:root {
  color-scheme: dark;
  --bg: #0f1115;
  --card: #171b22;
  --muted: #9299a8;
  --text: #f2f5fb;
  --accent: #71d5ff;
  --danger: #ff7a7a;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: radial-gradient(circle at top, #1f2530, var(--bg) 40%); color: var(--text); }
.app-shell { min-height: 100vh; padding: 16px; max-width: 640px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid #2a3343; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
h1,h2,h3 { margin: 0 0 12px; }
label { display:block; font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
input, select, button { width: 100%; border-radius: 10px; border: 1px solid #33405a; background: #0f1520; color: var(--text); padding: 10px; font-size: 1rem; }
button { background: #1e2f48; border-color: #35598e; font-weight: 600; cursor: pointer; }
button.secondary { background: #252d3b; border-color: #3d4b64; }
button:disabled { opacity: .45; cursor: not-allowed; }
.row { display:flex; gap: 8px; }
.row > * { flex:1; }
.small { font-size: .85rem; color: var(--muted); }
.error { background: rgba(255,122,122,.15); border: 1px solid rgba(255,122,122,.5); color: #ffd2d2; padding: 10px; border-radius: 8px; margin-bottom: 12px; white-space: pre-wrap; }
.kpi { font-size: 1.25rem; letter-spacing: .08em; font-weight: 800; }
ul.players { margin: 8px 0 0; padding-left: 20px; }
#qr-box { display:flex; justify-content:center; padding: 8px; background:white; border-radius:10px; width: fit-content; margin: 10px auto 0; }
.mode-toggle { display:flex; gap:8px; margin-bottom:10px; }
.mode-toggle button.active { outline: 2px solid var(--accent); }

.hud { position: sticky; top: 8px; z-index: 4; }
.gauge-row { margin-top: 10px; }
.gauge { height: 10px; background:#0e141f; border:1px solid #2e3a4d; border-radius:999px; overflow:hidden; }
.gauge span { display:block; height:100%; background:linear-gradient(90deg,#4ab7ff,#7dffb8); transition: width .4s ease; }
.gauge-row.completed .gauge span { background: linear-gradient(90deg,#77e16f,#b6ff98); }
.gauge-row.locked { opacity: .55; }
.delta { color: var(--accent); font-weight: 700; }
.choices { display:grid; gap:8px; }
.choice-btn.active { outline:2px solid var(--accent); }
.choice-loader { padding: 10px 0; }
.choice-confirm { margin: 8px 0 10px; padding: 10px; border: 1px solid #33405a; border-radius: 10px; background: #121a28; }
.small-btn { width: auto; display: inline-block; margin-top: 6px; padding: 8px 10px; font-size: .85rem; }
.action-zone { margin-top: 12px; padding-top: 10px; border-top: 1px solid #2a3343; }
.choice-submitted { border: 1px solid #2f4e35; background: #15221a; border-radius: 10px; padding: 10px; margin: 8px 0; }
.timer { font-weight:700; }
.timer-big { font-size: 2rem; text-align:center; padding:8px 0; }
.pause-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10; }

.ready-btn-ready { background: #1f4f33; border-color: #43a86d; color: #d6ffe6; }
.ready-btn-sending { opacity: .85; }
.ready-waiting { margin-top: 8px; color: #b7d9ff; }
.ready-error { margin-top: 8px; color: #ffd2d2; background: rgba(255,122,122,.12); border: 1px solid rgba(255,122,122,.45); border-radius: 8px; padding: 8px; font-size: .9rem; }