:root{--bg:#070914;--p:#00f0ff;--m:#ff2bd6;--t:#e8f0ff}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--t);font-family:Cairo,system-ui,sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(#ffffff0d 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,#ffffff0d 1px,transparent 1px) 0 0/40px 40px,radial-gradient(60% 40% at 80% 0,#5b13a055,transparent)}
/* cursor glow: one element moved with transform only (no inherited CSS vars, no layout) */
.glow{position:fixed;top:0;left:0;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(#00f0ff30,transparent 70%);pointer-events:none}
main{position:relative;max-width:980px;margin:auto;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.screen{display:none}
.screen.on{display:block;animation:in .35s both}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
@keyframes pop{from{opacity:0;transform:scale(.85)}}
@keyframes flip{from{opacity:0;transform:rotateX(90deg)}}
.logo{direction:ltr;text-align:center;margin:9vh 0 8px;font:800 clamp(42px,11vw,88px)/1 Orbitron,sans-serif;letter-spacing:.05em;text-shadow:0 0 22px var(--p)}
.logo span{color:var(--m);text-shadow:0 0 22px var(--m)}
.sub,.hint{text-align:center;color:#9fb0d0;min-height:1.4em}
.panel{max-width:420px;margin:24px auto;padding:22px;display:grid;gap:14px;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:18px;backdrop-filter:blur(12px)}
#joinf{display:flex;gap:8px}
input{flex:1;min-width:0;padding:12px;border-radius:12px;border:1px solid #ffffff2a;background:#0008;color:var(--t);text-align:center;text-transform:uppercase;letter-spacing:.25em;font:800 16px Cairo,sans-serif}
input:focus-visible,.btn:focus-visible,.gc:focus-visible{outline:2px solid var(--m);outline-offset:2px}
#err{color:#ff6b8b;text-align:center;min-height:1.2em}
.btn{padding:12px 22px;border-radius:12px;border:1px solid var(--p);background:#00f0ff18;color:var(--p);font:800 16px Cairo,sans-serif;cursor:pointer;box-shadow:0 0 14px #00f0ff44;transition:transform .2s,background-color .2s}
.btn:hover{transform:translateY(-2px);background:#00f0ff30}
.btn.ghost{border-color:#ffffff40;color:var(--t);box-shadow:none}
.btn.sm{padding:8px 14px;font-size:14px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0 18px}
.code{font-family:Orbitron,sans-serif;letter-spacing:.2em;color:var(--p);text-shadow:0 0 10px var(--p)}
.pill{padding:6px 12px;border-radius:99px;background:#ffffff12;font-size:14px}
.score{font:800 20px Cairo,sans-serif}.score b{color:var(--p);font-size:26px}.score b+b,.score b:last-of-type{color:var(--m)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gc{display:grid;gap:6px;justify-items:center;padding:18px 10px;border-radius:16px;border:1px solid #ffffff1f;background:#ffffff0a;color:var(--t);font:800 15px Cairo,sans-serif;cursor:pointer;transition:transform .2s,border-color .2s}
.gc:hover:not(:disabled){transform:translateY(-4px);border-color:var(--m)}
.gc i{font-size:30px;font-style:normal}.gc small{color:#8fa0c0;font-weight:500}.gc:disabled{opacity:.4;cursor:not-allowed}
.ov{position:fixed;inset:0;display:none;place-items:center;background:#000b;z-index:9}
.ov.on{display:grid;animation:in .3s both}
.card{padding:28px 34px;text-align:center;border:1px solid var(--p);border-radius:20px;background:#0a0d1f;animation:pop .35s both}
.card h2{font-size:34px;margin:0 0 18px}.row{display:flex;gap:10px;justify-content:center}
/* games */
.xo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:340px;margin:16px auto}
.xo button{aspect-ratio:1;border-radius:14px;border:1px solid #ffffff2a;background:#ffffff0a;color:var(--p);font:800 clamp(32px,10vw,56px) Orbitron,sans-serif;cursor:pointer}
.xo .p1{color:var(--m)}.xo .win{background:#ffffff22;animation:pop .5s}
.wrap{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.wg{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;width:min(300px,80vw);direction:ltr}.wg.op{width:min(140px,40vw)}
.wg i{aspect-ratio:1;display:grid;place-items:center;border:1px solid #ffffff22;border-radius:6px;font:800 22px Orbitron,sans-serif;font-style:normal}
.wg i.g{background:#0a8f6a}.wg i.y{background:#b8860b}.wg i.b{background:#2a2f45}.wg i.g,.wg i.y,.wg i.b{animation:flip .35s both}
.wf{display:flex;gap:8px;justify-content:center;margin:14px auto;max-width:360px}
.arena{display:block;width:100%;max-height:70dvh;background:#070914;border:1px solid var(--p);border-radius:14px;box-shadow:0 0 24px #00f0ff33;touch-action:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}