:root{--accent:#00f0ff;--accent2:#b026ff;--bg:radial-gradient(circle at 50% 20%,#101026 0%,#08081a 60%,#04040c 100%)}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:#eaf6ff;background:var(--bg);background-attachment:fixed;min-height:100vh;overflow-x:hidden;transition:background .8s ease}body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(hsla(0,0%,100%,.04) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.04) 1px,transparent 0);background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0,transparent 80%);mask-image:radial-gradient(circle at 50% 40%,#000 0,transparent 80%);animation:gridDrift 20s linear infinite;pointer-events:none;z-index:0}@keyframes gridDrift{0%{background-position:0 0,0 0}to{background-position:44px 44px,44px 44px}}.shell{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:32px 20px 64px}.title{text-align:center;font-size:clamp(2.2rem,6vw,4rem);font-weight:800;letter-spacing:.12em;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px color-mix(in srgb,var(--accent) 40%,transparent);margin-bottom:4px}.subtitle{color:#9fb4c8;letter-spacing:.3em;font-size:.75rem;margin-bottom:28px}.section-label,.subtitle{text-align:center;text-transform:uppercase}.section-label{color:#7f93a8;letter-spacing:.25em;font-size:.7rem;margin:22px 0 12px}.theme-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px}.theme-chip{cursor:pointer;border:1px solid hsla(0,0%,100%,.14);background:hsla(0,0%,100%,.03);color:#cfe2f2;padding:8px 16px;border-radius:999px;font-size:.85rem;letter-spacing:.05em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}.theme-chip:hover{transform:translateY(-2px)}.theme-chip.active{border-color:var(--accent);color:#fff;background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}.tagline{text-align:center;color:var(--accent);font-style:italic;letter-spacing:.08em;margin:14px 0 6px;text-shadow:0 0 14px color-mix(in srgb,var(--accent) 50%,transparent)}.scoreboard{display:flex;justify-content:center;gap:28px;margin:20px 0 28px}.score-box{min-width:110px;text-align:center;padding:14px 18px;border-radius:16px;border:1px solid hsla(0,0%,100%,.1);background:hsla(0,0%,100%,.03)}.score-box .k{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#8ea3b8}.score-box .v{font-size:2rem;font-weight:800;margin-top:4px}.score-box.you .v{color:var(--accent)}.score-box.cpu .v{color:var(--accent2)}.arena{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;grid-gap:12px;gap:12px;margin:10px auto 24px;max-width:640px}.hand{text-align:center}.hand .disc{width:130px;height:130px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:4rem;border:2px solid hsla(0,0%,100%,.12);background:hsla(0,0%,100%,.03);box-shadow:inset 0 0 30px rgba(0,0,0,.4)}.hand.you .disc{border-color:var(--accent);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 0 30px rgba(0,0,0,.4)}.hand.cpu .disc{border-color:var(--accent2);box-shadow:0 0 30px color-mix(in srgb,var(--accent2) 40%,transparent),inset 0 0 30px rgba(0,0,0,.4)}.hand .who{margin-top:10px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8ea3b8}.vs{font-weight:800;font-size:1.4rem;color:#6b7f94;letter-spacing:.1em}.shake{animation:shake .5s ease}@keyframes shake{0%,to{transform:translateY(0)}25%{transform:translateY(-16px) rotate(-8deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-10px) rotate(8deg)}}.verdict{text-align:center;font-size:1.6rem;font-weight:800;letter-spacing:.08em;min-height:2.2rem;margin-bottom:8px}.verdict.win{color:#29ffa0;text-shadow:0 0 18px rgba(41,255,160,.5)}.verdict.lose{color:#ff4d6d;text-shadow:0 0 18px rgba(255,77,109,.5)}.verdict.draw{color:#ffd60a;text-shadow:0 0 18px rgba(255,214,10,.5)}.moves{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:10px}.move-btn{cursor:pointer;width:120px;padding:18px 10px;border-radius:18px;border:1px solid hsla(0,0%,100%,.14);background:hsla(0,0%,100%,.04);color:#eaf6ff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease}.move-btn:hover:not(:disabled){transform:translateY(-4px);border-color:var(--accent);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 45%,transparent)}.move-btn:disabled{opacity:.5;cursor:not-allowed}.move-btn .e{font-size:2.6rem;display:block;pointer-events:none}.move-btn .l{margin-top:8px;font-size:.8rem;letter-spacing:.08em;color:#cfe2f2;pointer-events:none}.controls{display:flex;justify-content:center;gap:12px;margin-top:26px}.ghost-btn{cursor:pointer;border:1px solid hsla(0,0%,100%,.18);background:transparent;color:#cfe2f2;padding:10px 22px;border-radius:999px;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;transition:border-color .2s ease,color .2s ease}.ghost-btn:hover{border-color:var(--accent);color:#fff}.footer{text-align:center;margin-top:40px;color:#5c6f83;font-size:.72rem;letter-spacing:.1em}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.mode-tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:5px 12px;border-radius:999px}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-gap:20px;gap:20px;max-width:720px;margin:40px auto 0}.mode-card{cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 22px;border-radius:22px;border:1px solid hsla(0,0%,100%,.12);background:hsla(0,0%,100%,.03);color:#eaf6ff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease}.mode-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 0 34px color-mix(in srgb,var(--accent) 45%,transparent)}.mode-emoji{font-size:3rem}.mode-name{font-size:1.15rem;font-weight:700;letter-spacing:.04em}.mode-desc{font-size:.85rem;color:#9fb4c8;line-height:1.4}.go-btn{cursor:pointer;border:none;padding:14px 40px;border-radius:999px;font-size:1rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#04040c;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 26px color-mix(in srgb,var(--accent) 55%,transparent);transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease}.go-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 40px color-mix(in srgb,var(--accent) 70%,transparent)}.go-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.move-btn.picked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 50%,transparent);transform:translateY(-4px)}.lobby{display:flex;align-items:stretch;justify-content:center;gap:18px;flex-wrap:wrap;margin:26px auto 0;max-width:760px}.lobby-card{flex:1 1 260px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 22px;border-radius:20px;border:1px solid hsla(0,0%,100%,.12);background:hsla(0,0%,100%,.03);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.lobby-card h3{letter-spacing:.06em}.lobby-divider{align-self:center;color:#6b7f94;letter-spacing:.2em;text-transform:uppercase;font-size:.75rem}.muted{color:#9fb4c8;font-size:.85rem;text-align:center;line-height:1.4}.code-input{width:100%;text-align:center;font-size:1.6rem;font-weight:800;letter-spacing:.4em;padding:12px;border-radius:14px;border:1px solid hsla(0,0%,100%,.18);background:rgba(0,0,0,.3);color:#fff;text-transform:uppercase}.code-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}.roominfo{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:6px 0 4px}.room-code{letter-spacing:.1em;color:#cfe2f2}.room-code strong{color:var(--accent);letter-spacing:.3em;font-size:1.1rem}.round-no{color:#8ea3b8;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase}.conn{font-size:.75rem;letter-spacing:.1em;padding:4px 12px;border-radius:999px}.conn.on{color:#29ffa0;border:1px solid rgba(41,255,160,.4)}.conn.off{color:#ffd60a;border:1px solid rgba(255,214,10,.4)}.hint{text-align:center;color:#9fb4c8;font-size:.85rem;margin-top:18px}.hint strong{color:var(--accent);letter-spacing:.2em}.error{text-align:center;color:#ff4d6d;font-size:.85rem;margin-top:16px}