:root{
  color-scheme: light;
  --bg1:#EAF4FF; --bg2:#FFF6F0; --bg:#FDFBF7;
  --panel:#FFFFFF; --soft:#F1EEF8; --line:#ECE7F3; --line2:#DAD3E8;
  --ink:#2A2547; --mut:#6E6892; --dim:#A69FC0;
  --coral:#FF6B5E; --sky:#3BB6F0; --mint:#25C98A; --gold:#FFB020;
  --coralInk:#E8503F; --mintInk:#12A874;
  --spark:#FF4FA3; --spark2:#8B6BFF; --card:#FFFFFF;
  --disp:"SF Arabic Rounded","SF Pro Rounded","Baloo Bhaijaan 2",ui-rounded,"Segoe UI","Tajawal",Tahoma,system-ui,sans-serif;
  --sans:"SF Arabic","Segoe UI","Tajawal",Tahoma,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,Menlo,monospace;
  --shadow:0 24px 50px -26px rgba(80,70,130,.45);
  --sfx:0 12px 30px -16px rgba(80,70,130,.28);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%}
body{
  font-family:var(--sans); color:var(--ink);
  background:radial-gradient(1000px 600px at 85% -6%, var(--bg1), transparent 55%),
             radial-gradient(900px 520px at 4% 0%, var(--bg2), transparent 52%), var(--bg);
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
#app{max-width:440px; margin:0 auto; height:100dvh; position:relative; overflow:hidden}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* screens */
.screen{position:absolute; inset:0; display:none; flex-direction:column; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.screen.active{display:flex}

/* buttons + fields */
.btn{font-family:var(--disp); font-weight:800; border:none; border-radius:16px; padding:15px 18px; font-size:16px; cursor:pointer; transition:transform .1s, box-shadow .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(96deg,var(--spark),var(--spark2)); color:#fff; box-shadow:0 14px 30px -12px var(--spark)}
.btn.ghost{background:var(--panel); color:var(--ink); border:1px solid var(--line2); box-shadow:var(--sfx)}
.btn.text{background:none; color:var(--mut); box-shadow:none; font-size:14px}
.btn:disabled{opacity:.5; cursor:default}
.field{font-family:var(--sans); font-weight:700; font-size:16px; text-align:center; border:1px solid var(--line2); border-radius:14px; padding:14px; background:var(--panel); color:var(--ink); width:100%; box-shadow:var(--sfx)}
.field:focus{outline:none; border-color:var(--spark)}

/* ===== HOME ===== */
.home-inner{margin:auto; width:100%; max-width:360px; padding:24px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center}
.home-avatar{cursor:pointer}
.brand{font-family:var(--disp); font-weight:800; font-size:34px; margin-top:-4px}
.tagline{color:var(--mut); font-size:14px; margin-top:-8px}
.picker{width:100%; display:flex; flex-direction:column; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:var(--sfx)}
.pickrow{display:flex; align-items:center; gap:10px}
.picklbl{font-weight:800; font-size:13px; color:var(--mut); width:52px; text-align:start}
.pickopts{display:flex; gap:8px; flex-wrap:wrap; flex:1}
.pickopts .opt{width:46px; height:46px; border-radius:12px; border:2px solid var(--line2); background:var(--panel); display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:800; font-size:12px; color:var(--mut)}
.pickopts .opt.on{border-color:var(--spark); box-shadow:0 0 0 3px rgba(255,79,163,.15)}
#createBtn{width:100%; margin-top:4px}
.joinrow{display:flex; gap:8px; width:100%}
.joinrow .code{flex:1; letter-spacing:.3em; text-transform:uppercase}
.joinrow .btn{flex:none}
.conn{font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:2px}
.conn.ok{color:var(--mintInk)}

/* ===== LOBBY ===== */
.lobby-inner{margin:auto; width:100%; max-width:400px; padding:24px; display:flex; flex-direction:column; gap:18px}
.lobby-head{text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center}
.lobby-title{font-family:var(--disp); font-weight:800; font-size:22px}
.code-chip{font-family:var(--disp); font-weight:800; font-size:34px; letter-spacing:.22em; color:var(--spark); background:var(--panel); border:2px dashed var(--line2); border-radius:16px; padding:8px 22px; cursor:pointer}
.lobby-sub{color:var(--mut); font-size:13px}
.slots{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.slot{aspect-ratio:1/1.05; border-radius:20px; border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; position:relative; box-shadow:var(--sfx)}
.slot.empty{border-style:dashed; box-shadow:none; background:transparent; color:var(--dim)}
.slot .sn{font-weight:800; font-size:14px}
.slot .rdy{font-weight:800; font-size:10px; padding:3px 10px; border-radius:100px}
.slot .rdy.y{color:var(--mintInk); background:rgba(37,201,138,.14)}
.slot .rdy.n{color:var(--dim); background:var(--soft)}
.slot .host{position:absolute; top:9px; inset-inline-end:9px; font-size:14px}
.slot .off{position:absolute; top:9px; inset-inline-start:9px; font-size:11px; color:var(--dim)}
.lobby-actions{display:flex; flex-direction:column; gap:10px}
.readyBtn.on{background:linear-gradient(96deg,var(--mint),#5fe0b0); color:#04382a; border:none}

/* ===== GAME ===== */
#game{background:linear-gradient(180deg, var(--bg1) 0%, var(--bg) 42%)}
.finalvig{position:absolute; inset:0; box-shadow:inset 0 0 60px 10px rgba(255,107,94,0); pointer-events:none; z-index:20; transition:box-shadow .5s}
.hud{display:flex; justify-content:space-between; align-items:center; padding:10px 16px 2px; font-size:11px; color:var(--mut); z-index:2}
.hud-brand{font-family:var(--disp); font-weight:800; color:var(--ink)}
.sndbtn{border:1px solid var(--line2); background:var(--panel); border-radius:100px; width:32px; height:32px; font-size:15px; cursor:pointer; box-shadow:var(--sfx)}
.rail{display:flex; gap:7px; padding:6px 12px; z-index:2}
.opp{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:5px 3px 6px; text-align:center; position:relative; min-width:0; box-shadow:var(--sfx); transition:transform .18s, box-shadow .18s}
.opp.lead{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), var(--sfx)}
.opp.win{transform:translateY(-4px) scale(1.06)}
.opp.off{opacity:.45}
.opp .oname{font-weight:800; font-size:10px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.opp .osc{font-family:var(--disp); font-weight:800; font-size:17px; line-height:1; color:var(--ink)}
.opp .crown{position:absolute; top:-9px; inset-inline-start:50%; transform:translateX(50%); font-size:13px}
[dir=rtl] .opp .crown{transform:translateX(-50%)}
.opp .fl{position:absolute; top:-7px; inset-inline-end:0; font-size:12px}
.opp .rb{position:absolute; top:-16px; inset-inline-end:-6px; font-size:17px; opacity:0}
.opp .rb.show{animation:pop 1.2s ease-out}
@keyframes pop{0%{opacity:0;transform:scale(.4) translateY(6px)}25%{opacity:1;transform:scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}

.pulsebar{display:flex; align-items:center; gap:8px; padding:2px 16px 0; z-index:2}
.pulsebar .rt{font-family:var(--mono); font-size:10px; color:var(--mut); font-weight:700; white-space:nowrap}
.pulsebar .bar{flex:1; height:5px; border-radius:5px; background:var(--soft); overflow:hidden; display:flex; justify-content:flex-start}
.pulsebar .bar i{display:block; height:100%; border-radius:5px; width:100%; background:linear-gradient(90deg,var(--mint),var(--sky)); transition:width .3s}

.board{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:space-around; padding:6px 16px 8px; position:relative; z-index:1}
.card{background:var(--card); border-radius:24px; position:relative; box-shadow:var(--shadow); border:1px solid var(--line); aspect-ratio:1/1}
.card.center{width:66%}
.card.mine{width:100%; box-shadow:0 0 0 3px var(--me,var(--coral)), 0 0 24px -6px var(--me,var(--coral)), var(--shadow)}
.card .lbl{position:absolute; top:9px; inset-inline-end:12px; font-weight:800; font-size:9px; color:var(--dim); z-index:4}
.card.mine .lbl{color:var(--me,var(--coralInk))}
.card .you{position:absolute; bottom:9px; inset-inline-start:12px; font-family:var(--disp); font-weight:800; font-size:13px; color:var(--me,var(--coralInk)); z-index:4}
.sym{position:absolute; transform:translate(50%,-50%); cursor:pointer; transition:transform .12s; z-index:2; line-height:0}
.sym:active{transform:translate(50%,-50%) scale(.9)}
.sym.hit{animation:hit .5s cubic-bezier(.34,1.6,.5,1)}
@keyframes hit{0%{transform:translate(50%,-50%) scale(1)}35%{transform:translate(50%,-50%) scale(1.5)}100%{transform:translate(50%,-50%) scale(1)}}
.sym.hit .glow{filter:drop-shadow(0 0 10px currentColor)}
.symfloat{display:inline-block; will-change:transform; animation:floaty 3.4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1.6deg)}}
.sym svg{filter:drop-shadow(0 3px 3px rgba(80,70,130,.18))}
.sym.dim{opacity:.5}

.plus{position:absolute; font-family:var(--disp); font-weight:800; font-size:34px; color:var(--mintInk); z-index:40; pointer-events:none; opacity:0}
.plus.go{animation:plusgo 1s cubic-bezier(.3,1.4,.5,1)}
@keyframes plusgo{0%{opacity:0;transform:translateY(10px) scale(.6)}25%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(-60px) scale(.9)}}
.lock{position:absolute; inset:0; border-radius:24px; background:rgba(255,107,94,.14); z-index:30; display:none; align-items:center; justify-content:center; pointer-events:none}
.lock.on{display:flex}
.lock .ring{width:46px;height:46px;border-radius:50%; border:4px solid rgba(255,107,94,.3); border-top-color:var(--coral); animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.myreact{position:absolute; bottom:74px; inset-inline-start:50%; font-size:30px; z-index:45; pointer-events:none; opacity:0}
.myreact.go{animation:myr 1.1s ease-out}
@keyframes myr{0%{opacity:0;transform:translate(-50%,10px) scale(.5)}25%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50px)}}

.reactdock{display:flex; gap:8px; justify-content:center; padding:4px 10px 10px; z-index:2}
.reactdock button{width:36px;height:36px;border-radius:50%; background:var(--panel); border:1px solid var(--line); font-size:18px; cursor:pointer; box-shadow:var(--sfx); transition:transform .1s}
.reactdock button:active{transform:scale(.85)}

/* overlays */
.overlay{position:absolute; inset:0; z-index:50; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:26px; text-align:center;
  background:linear-gradient(180deg, rgba(234,244,255,.9), rgba(253,251,247,.97)); backdrop-filter:blur(3px)}
.overlay.on{display:flex}
.count{font-family:var(--disp); font-weight:800; font-size:130px; line-height:1; color:var(--spark); text-shadow:0 12px 30px rgba(255,79,163,.3)}
.count.tick{animation:ct .6s ease-out}
@keyframes ct{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}100%{opacity:1}}
.count-sub{font-weight:800; color:var(--mut); font-size:14px}
.overlay h2{font-family:var(--disp); font-weight:800; font-size:26px; margin:0}
.overlay p{color:var(--mut); font-size:14px; margin:0}
.podium{display:flex; align-items:flex-end; justify-content:center; gap:8px; margin-top:8px}
.pod{display:flex; flex-direction:column; align-items:center; gap:5px}
.pod .bar{width:56px; border-radius:12px 12px 0 0; display:flex; align-items:flex-start; justify-content:center; padding-top:7px; font-family:var(--disp); font-weight:800; color:#fff; font-size:15px}
.pod .nm{font-size:12px; font-weight:800} .pod .sc{font-family:var(--mono); font-size:11px; color:var(--mut); font-weight:700}

#toast{position:absolute; top:14px; inset-inline:0; display:flex; justify-content:center; z-index:100; pointer-events:none}
#toast .t{background:var(--ink); color:#fff; font-weight:700; font-size:13px; padding:10px 16px; border-radius:100px; opacity:0; transform:translateY(-10px); transition:.25s; box-shadow:var(--shadow)}
#toast .t.show{opacity:1; transform:translateY(0)}

@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important}}