:root { color-scheme: dark; --accent:#f5c451; --accent2:#a78bfa; --text:#eaeaf0; --muted:#9a9aaa; --border:#ffffff14; --p1:#f5c451; --p2:#ef476f; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #2a1a4a 0%, transparent 60%), radial-gradient(900px 500px at 110% 20%, #0a3a4a 0%, transparent 55%), #0b0b12; }
header { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
header h1 { margin: 0; font-size: 1.3rem; }
a.home { color: var(--muted); text-decoration: none; font-size: .9rem; }
a.home:hover { color: #fff; }

.card { max-width: 520px; margin: 2.5rem auto; padding: 1.75rem; background: linear-gradient(180deg, #ffffff0a, #ffffff05); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 60px -30px #000; }
.card h2 { margin: 0 0 .5rem; }
.dim { color: var(--muted); font-size: .9rem; }
label { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .85rem; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
input, button { font: inherit; padding: .65rem .85rem; border-radius: 10px; border: 1px solid var(--border); background: #ffffff0c; color: inherit; }
input:focus { outline: 2px solid var(--accent); border-color: transparent; }
button { background: var(--accent); color: #111; border: none; cursor: pointer; font-weight: 700; transition: transform .1s, filter .1s; }
button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
button:disabled { opacity: .4; cursor: default; }
button.tiny { padding: .25rem .55rem; font-size: .75rem; background: #ffffff14; color: inherit; font-weight: 500; }
button.ghost { background: #ffffff10; color: inherit; }
button.primary-lg { width: 100%; padding: .85rem; font-size: 1rem; margin-top: .5rem; }
button.danger { background: #ff4d6a; color: #fff; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .25rem; background: #00000050; border-radius: 10px; margin-bottom: 1.25rem; }
.seg button { background: transparent; color: var(--muted); padding: .5rem; font-weight: 600; font-size: .9rem; border-radius: 7px; }
.seg button.active { background: #ffffff14; color: var(--text); }

.msg { min-height: 1.2em; opacity: .9; margin: .75rem 0 0; font-size: .85rem; }
.msg.err { color: #ff9090; }

.game-wrap { padding: 1.5rem; max-width: 720px; margin: 0 auto; }
.game-top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.room-tag { font-family: ui-monospace, monospace; background: var(--accent); color: #111; padding: .15em .5em; border-radius: 6px; font-size: .95rem; letter-spacing: .15em; font-weight: 700; }
.vs { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.vs .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 8px; background: #ffffff08; border: 1px solid var(--border); }
.vs .chip.p1 .dot { background: var(--p1); }
.vs .chip.p2 .dot { background: var(--p2); }
.vs .chip .dot { width: 10px; height: 10px; border-radius: 50%; }
.vs .chip.turn { outline: 2px solid var(--accent); }
.status { font-weight: 600; }

.actions { display: flex; gap: .4rem; }
.actions button { padding: .5rem .8rem; }

.banner { margin: 0 auto 1rem; padding: .75rem 1rem; text-align: center; background: linear-gradient(90deg, var(--accent)22, var(--accent2)22); border: 1px solid var(--border); border-radius: 10px; max-width: 520px; font-weight: 600; }