/* Mersal LIVE — immersive live-game experience, mobile first */
*{box-sizing:border-box}html{scroll-behavior:smooth}
body.live-page{margin:0;min-height:100vh;background-color:#10071d;background-image:linear-gradient(180deg,rgba(9,5,22,.30),rgba(9,5,22,.48)),url('../img/mersal-romantic-bg.webp');background-position:center center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;color:#f4f0ff;font-family:'Tajawal',sans-serif;overflow-x:hidden}
.live-ambient{pointer-events:none;position:fixed;border-radius:50%;filter:blur(100px);z-index:0;opacity:.3}
.live-ambient.a{height:550px;width:650px;background:#7428d9;right:-220px;top:-280px}.live-ambient.b{height:500px;width:500px;background:#e548a6;left:-330px;bottom:-150px;opacity:.17}
.live-wrap{width:min(1000px,calc(100% - 40px));margin:auto;position:relative;z-index:2}
.live-nav{height:96px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff18}
.live-brand{text-decoration:none;color:#fff;font-size:30px;font-weight:700;display:flex;align-items:center;gap:9px;font-family:'Aref Ruqaa Ink','Tajawal',serif}
.brand-gem{display:inline-grid;place-items:center;width:37px;height:37px;background:linear-gradient(130deg,#ff5cb5,#7437fc);border-radius:11px;font-size:26px}
.live-tag{font:800 10px 'Tajawal';letter-spacing:2px;color:#ddc6ff;border:1px solid #ffffff35;border-radius:6px;padding:5px 6px;margin-top:-15px}
.nav-links{display:flex;gap:24px}.nav-links a,.live-footer a{color:#c7bddf;text-decoration:none;font-weight:700;font-size:14px}.nav-links a:hover,.live-footer a:hover{color:white}
.live-hero{text-align:center;padding:78px 0 45px}.eyebrow,.mini-eyebrow{display:inline-flex;align-items:center;gap:9px;color:#a79ac5;font-size:12px;font-weight:800;letter-spacing:.6px}.eyebrow{border:1px solid #ffffff22;background:#ffffff08;border-radius:30px;padding:9px 17px;color:#e1c5fd}
.pulse-dot,.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#b0a6be;box-shadow:0 0 0 4px #ffffff0c}.pulse-dot,.status-dot.connected{background:#57e6ab;box-shadow:0 0 0 5px #57e6ab12}
.live-hero h1{font-size:clamp(36px,6vw,72px);font-weight:900;letter-spacing:-2px;line-height:1.18;margin:20px auto 12px;max-width:900px}.live-hero h1 em{font-style:normal;background:linear-gradient(115deg,#f2a2ff,#9e84ff,#f8bcd8);-webkit-background-clip:text;background-clip:text;color:transparent}
.live-hero p{font-size:16px;color:#a99fbe;line-height:1.9;max-width:580px;margin:auto}
.live-surface{background:linear-gradient(135deg,rgba(33,25,63,.95),rgba(20,16,43,.95));border:1px solid #ffffff1f;box-shadow:0 30px 80px #0005, inset 0 1px #ffffff15;border-radius:28px;padding:36px 40px;max-width:825px;margin:0 auto}
.live-section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.live-section-heading h2,.live-surface h2{font-size:27px;color:#fff;margin:8px 0 0}.side-spark{font-size:35px;color:#b992ff}
.live-game-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.game-option{min-height:240px;border-radius:19px;background:#15102d;border:1px solid #ffffff18;color:#fff;text-align:right;padding:21px 23px;display:flex;align-items:flex-start;flex-direction:column;cursor:pointer;position:relative;transition:transform .2s,border .2s,box-shadow .2s;overflow:hidden;font-family:inherit}
.game-option:before{content:'';background:radial-gradient(circle,#9857ff33,transparent 70%);position:absolute;width:280px;height:260px;left:-110px;top:-110px;pointer-events:none}
.game-option:hover{transform:translateY(-3px);border-color:#b582ff88}.game-option.picked{border-color:#9e78ff;background:linear-gradient(145deg,#302052,#201535);box-shadow:0 0 0 1px #9e78ff3d,0 12px 40px #8551dd20}
.option-mark{font:800 11px 'Tajawal';color:#786c99;letter-spacing:2px}.option-art{align-self:center;font-size:46px;margin:10px 0 5px;font-weight:900;min-height:64px;white-space:nowrap}.option-art span{font-size:38px}.xo-art{display:flex;gap:10px;align-items:center}.xo-art b:first-child{color:#f18ad6;font-size:74px;line-height:.8}.xo-art b:last-child{color:#9f8afa;font-size:69px;line-height:.8}
.option-title{font-weight:900;font-size:20px;margin-top:10px}.game-option small{font-size:12px;color:#a79abc;margin:8px 0 16px}.option-select{margin-top:auto;font-size:12px;color:#d9adff;font-weight:800}
.join-controls{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px;margin-top:26px}.join-controls label{grid-column:1/-1;color:#bdb2d5;font-weight:700;font-size:13px;margin-bottom:-4px}.join-controls input,.invite-box input{height:53px;min-width:0;background:#100c24;color:#fff;border:1px solid #ffffff25;border-radius:12px;outline:none;padding:0 15px;font-family:inherit;font-size:16px}.join-controls input:focus,.invite-box input:focus{border-color:#a779ff;box-shadow:0 0 0 3px #8f66ed26}
.live-primary{border:0;border-radius:12px;min-height:53px;padding:12px 25px;color:white;background:linear-gradient(110deg,#9e58ff,#e654ac);font-family:inherit;font-size:15px;font-weight:900;cursor:pointer;box-shadow:0 8px 24px #b33cea35}.live-primary span{margin-right:12px}.live-primary:hover{filter:brightness(1.12)}button:disabled{cursor:not-allowed!important;opacity:.55}
.live-tip{color:#7c7594;font-size:12px;margin:17px 0 0;text-align:center}.live-muted{color:#a69ebc;margin:12px 0;line-height:1.9}
.room-panel{max-width:740px}.room-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.connection{font-size:12px;font-weight:800;color:#b0a7c6;display:flex;gap:9px;align-items:center}
.room-players{display:flex;align-items:center;gap:13px;justify-content:space-between;margin:30px auto 15px}.player-tile{display:flex;gap:12px;align-items:center;border:1px solid #ffffff16;background:#ffffff08;padding:13px 15px;border-radius:14px;min-width:0;flex:1;position:relative}.player-tile.self{border-color:#8d67ff66;background:#7049c015}.player-tile .avatar{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:12px;font-size:34px;font-weight:900;color:#f5a0de;background:#ef7ccb13}.player-tile:nth-child(3) .avatar{color:#ac9eff;background:#aa9dff16}.player-tile small{display:block;font-size:11px;color:#8f85a7}.player-tile strong{display:block;font-size:15px;margin-top:4px;overflow-wrap:anywhere}.online-dot{width:8px;height:8px;border-radius:50%;background:#746b85;position:absolute;top:12px;left:12px}.online-dot.active{background:#55d6a0}.vs{font-size:15px;font-weight:900;font-style:italic;color:#9586b3}
.game-score{text-align:center;font-size:27px;font-weight:900;direction:ltr;letter-spacing:3px;color:#e8dcff}.game-score span{color:#796c92;margin:0 13px}.game-status{text-align:center;min-height:45px;margin:10px 0;color:#cdbaff;font-size:16px;font-weight:800}
.live-xo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(360px,95%);margin:15px auto 30px;direction:ltr}
.live-xo button{aspect-ratio:1;background:#ffffff0a;border:1px solid #ffffff21;border-radius:18px;font:900 clamp(55px,9vw,80px) 'Tajawal';color:#fff;cursor:pointer;transition:background .2s,transform .2s}
.live-xo button:not(:disabled):hover{background:#8e57d833;transform:scale(.96)}.live-xo button.x{color:#f497d0}.live-xo button.o{color:#a99afd}.live-xo button:disabled{opacity:1;cursor:default!important}
.round-label{text-align:center;color:#a69abc;font-weight:800;font-size:13px;letter-spacing:1px}.rps-secret{text-align:center;background:#ffffff09;border:1px solid #ffffff15;padding:15px;border-radius:12px;color:#bbb0d1;font-size:13px;margin:18px auto;max-width:470px}.rps-secret span{margin-left:8px}
.live-rps{display:flex;justify-content:center;gap:14px;margin:25px auto 29px}.rps-btn{background:linear-gradient(140deg,#312249,#20162d);border:1px solid #ffffff28;border-radius:20px;display:grid;gap:8px;place-items:center;padding:22px 19px;min-width:110px;color:#fff;cursor:pointer;transition:transform .2s,border .2s}.rps-btn strong{font-size:56px;line-height:1.35}.rps-btn small{font-size:15px;font-weight:800}.rps-btn:not(:disabled):hover{transform:translateY(-6px);border-color:#c39aff}.rps-btn.chosen{border-color:#6fe3ae;background:#335a5229}.rps-wait{text-align:center;color:#74d8bc;font-size:13px;font-weight:800}
.rps-reveal{display:flex;align-items:center;justify-content:center;gap:25px;margin:22px auto}.rps-reveal div{display:grid;place-items:center;gap:8px;background:#ffffff09;border:1px solid #ffffff24;border-radius:18px;padding:18px 23px;max-width:200px}.rps-reveal small{font-size:13px;color:#bab0cc;overflow-wrap:anywhere}.rps-reveal strong{font-size:64px}.rps-vs{color:#a991e8;font-weight:900}.next-round{display:block;margin:0 auto 30px}
.invite-box{display:flex;align-items:end;gap:12px;border-top:1px solid #ffffff17;padding-top:23px}.invite-box>div{flex:1;min-width:0}.invite-box small{display:block;color:#998fae;font-size:12px;font-weight:800;margin-bottom:8px}.invite-box input{width:100%;height:44px;font-size:12px;direction:ltr;text-align:left}
.live-outline{background:#ffffff0c;border:1px solid #ffffff2a;border-radius:12px;color:#e5d4fa;font-family:inherit;font-size:13px;font-weight:800;padding:11px 19px;cursor:pointer}.live-outline:hover{background:#ffffff16}.room-actions{display:flex;align-items:center;justify-content:space-between;margin:18px 0 0}.live-exit{color:#aaa0c6;text-decoration:none;font-size:13px;font-weight:700}.live-footer{padding:40px 0;text-align:center;color:#7e729d;font-size:13px}.live-footer a{margin-right:15px}
@media(max-width:640px){.live-wrap{width:min(100% - 24px,1000px)}.live-nav{height:76px}.live-hero{padding:48px 10px 30px}.live-hero h1{letter-spacing:-1px}.live-surface{padding:25px 17px;border-radius:23px}.live-game-cards{gap:10px}.game-option{min-height:218px;padding:15px 12px}.option-title{font-size:17px}.option-art{font-size:37px}.option-art span{font-size:29px}.join-controls{grid-template-columns:1fr}.join-controls .live-primary{width:100%}.player-tile{gap:6px;padding:10px 7px;flex:1}.player-tile .avatar{flex-basis:30px;height:34px;font-size:25px}.player-tile strong{font-size:12px}.player-tile small{font-size:10px}.vs{font-size:12px}.room-players{gap:5px}.live-rps{gap:7px}.rps-btn{min-width:0;flex:1;padding:14px 5px}.rps-btn strong{font-size:40px}.rps-btn small{font-size:12px}.invite-box{flex-wrap:wrap}.invite-box>div{flex-basis:100%}.live-xo button{border-radius:12px}}

/* MERSAL V6 multiplayer finish state + consent-based rematches */
.room-panel{position:relative;isolation:isolate}.room-round-label{text-align:center;font-size:12px;letter-spacing:1px;color:#bdace5;font-weight:800;margin-top:11px}.game-score{display:flex;justify-content:center;align-items:center;gap:10px}.game-score small{font:700 11px Tajawal;color:#aba0c5;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-status{font-size:18px;min-height:35px}.room-panel.round-complete .game-status{color:#ffe0a2;text-shadow:0 0 22px #efb67d50}.rematch-status{text-align:center;min-height:20px;margin:0 0 9px;font-size:12px;color:#c7aaff}.room-panel.round-complete .live-xo{filter:drop-shadow(0 0 18px #b36def24)}.live-xo button.filled{animation:cell-pop .24s ease-out}@keyframes cell-pop{from{transform:scale(.8);opacity:.55}to{transform:scale(1);opacity:1}}.game-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5;border-radius:25px}.game-confetti i{position:absolute;top:-18px;left:var(--x);width:7px;height:13px;border-radius:2px;background:hsl(var(--hue) 87% 72%);animation:confetti-fall 2s ease-in var(--delay) both}@keyframes confetti-fall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(45px,620px) rotate(560deg);opacity:0}}.live-footer{color:#aea2cd}.live-surface{backdrop-filter:blur(14px)}@media(prefers-reduced-motion:reduce){.game-confetti{display:none}.live-xo button.filled{animation:none}}@media(max-width:640px){.game-score small{max-width:70px;font-size:10px}.game-status{font-size:15px}}