*{box-sizing:border-box}
:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#eef2ff;background:#080b16;
}
body{margin:0;min-height:100vh;background:
radial-gradient(circle at 15% 15%,rgba(79,70,229,.25),transparent 32%),
radial-gradient(circle at 85% 0%,rgba(8,145,178,.2),transparent 25%),
#080b16}
button,textarea{font:inherit}
.shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:28px 0 48px}
.card{background:rgba(16,23,42,.86);border:1px solid rgba(148,163,184,.18);border-radius:20px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.22);backdrop-filter:blur(12px)}
.hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px}
h1{font-size:clamp(28px,5vw,52px);line-height:1;margin:8px 0 12px;max-width:760px}
h2{margin-top:0}.eyebrow{letter-spacing:.18em;font-size:12px;color:#a5b4fc;font-weight:800}
p{color:#cbd5e1;line-height:1.55}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;margin:18px 0 8px;color:#cbd5e1;font-size:14px;font-weight:700}
textarea{width:100%;min-height:118px;resize:vertical;background:#090d19;color:#dbeafe;border:1px solid #334155;border-radius:12px;padding:12px;outline:none}
textarea:focus{border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,.12)}
button{border:1px solid #475569;background:#172033;color:#eef2ff;border-radius:12px;padding:11px 14px;font-weight:800;cursor:pointer}
button:hover{filter:brightness(1.08)}button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:linear-gradient(135deg,#4f46e5,#2563eb);border-color:transparent;width:100%}
.row{display:flex;gap:10px;margin-top:8px}
.pill{padding:10px 14px;border-radius:999px;font-weight:800;white-space:nowrap}.pill.offline{background:#3f1d2b;color:#fecdd3}.pill.online{background:#15392d;color:#bbf7d0}.pill.connecting{background:#3b351b;color:#fde68a}
.game-card{margin-top:18px}.hidden{display:none!important}.game-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:15px}.game-top>button{justify-self:end}
.score{font-size:clamp(28px,5vw,48px);font-weight:900;letter-spacing:.08em}
canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#050816;border-radius:16px;border:1px solid rgba(148,163,184,.2)}
.help{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#94a3b8;margin-top:12px;font-size:14px}
.touch{display:none;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.touch button{font-size:26px;padding:16px}
.status-text{text-align:center;margin-bottom:0}.note{margin-top:18px}.note p{margin:.45em 0}
@media(max-width:800px){.grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.touch{display:grid}.game-top{grid-template-columns:1fr auto}.game-top .score{grid-column:1/-1;grid-row:2;text-align:center}.game-top>button{grid-column:2;grid-row:1}}