:root {
  --bg: #16101f; --card: #221a30; --line: #362a4a; --text: #f6f0ff; --dim: #a99bc0;
  --pink: #ff4f7b; --lime: #c6f432; --sky: #5fd4ff; --gold: #ffc94d;
  --r: 18px; --display: 'Bricolage Grotesque', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { min-height: 100dvh; background: radial-gradient(120% 60% at 50% -10%, #3a1d4d 0%, var(--bg) 60%) fixed; }
#app { max-width: 520px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
h1, h2, h3, .big { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: 26px; line-height: 1.15; }
p { margin: 0; }
.dim { color: var(--dim); }
.stack { display: grid; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }

.logo { font-size: clamp(54px, 17vw, 84px); line-height: .9; text-align: center; margin: 28px 0 6px; }
.logo span { display: inline-block; color: var(--pink); transform: scaleX(-1); }
.tag { text-align: center; color: var(--dim); margin-bottom: 26px; }

input { width: 100%; font: inherit; font-size: 18px; color: var(--text); background: #120c1a; border: 2px solid var(--line);
  border-radius: 14px; padding: 14px 16px; outline: none; }
input:focus { border-color: var(--sky); }
input.code { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-family: var(--display); font-weight: 800; }

button { font: inherit; font-weight: 700; font-size: 17px; border: 0; border-radius: 14px; padding: 15px 18px; min-height: 52px;
  color: var(--bg); background: var(--lime); cursor: pointer; transition: transform .08s, opacity .2s; }
button:active { transform: scale(.97); }
button:disabled { opacity: .4; cursor: default; }
button.alt { background: transparent; color: var(--text); border: 2px solid var(--line); }
button.pink { background: var(--pink); color: #fff; }
button.sky { background: var(--sky); }
button.small { min-height: 40px; padding: 8px 14px; font-size: 15px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.howto { counter-reset: s; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.howto li { counter-increment: s; display: flex; gap: 12px; color: var(--dim); }
.howto li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); color: var(--text); font-weight: 800; font-size: 14px; }

.roomcode { font-family: var(--display); font-weight: 800; font-size: 56px; letter-spacing: .14em; text-align: center; color: var(--lime); line-height: 1; }
.players { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.players li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #1b1427; }
.players .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--bg); flex: none; }
.players .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players .sc { font-family: var(--display); font-weight: 800; }
.players .off { opacity: .45; }
.players .ok { color: var(--lime); }
.gain { color: var(--lime); font-weight: 800; font-size: 14px; }
.badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--line); color: var(--dim); }

.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--dim); font-size: 14px; }
.timer { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 18px; }
.timer i { display: block; height: 100%; background: var(--lime); border-radius: 99px; transition: width .25s linear; }
.timer.low i { background: var(--pink); }
.secs { font-family: var(--display); font-weight: 800; color: var(--text); font-size: 18px; }

.role { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices button { flex: 1 1 30%; background: #1b1427; color: var(--text); border: 2px solid var(--line); min-height: 48px; }
.choices button[aria-pressed=true] { border-color: var(--lime); color: var(--lime); }
.choices button:disabled { opacity: .5; }
.choices button:disabled[aria-pressed=true] { opacity: 1; }
.word { font-family: var(--display); font-weight: 800; font-size: 40px; text-align: center; color: var(--gold); line-height: 1.1; word-break: break-word; }

.rec { width: 132px; height: 132px; border-radius: 50%; margin: 6px auto; display: grid; place-items: center; background: var(--pink);
  color: #fff; font-size: 15px; box-shadow: 0 0 0 0 rgba(255, 79, 123, .5); }
.rec.on { animation: pulse 1s infinite; background: #ff2257; }
.rec svg { width: 44px; height: 44px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 79, 123, .6); } 100% { box-shadow: 0 0 0 26px rgba(255, 79, 123, 0); } }
.play { display: flex; align-items: center; justify-content: center; gap: 10px; }
.play svg { width: 20px; height: 20px; flex: none; }
.bigplay { min-height: 84px; font-size: 20px; }

.wait { text-align: center; padding: 34px 18px; }
.wait .dots::after { content: '…'; animation: dots 1.2s steps(4) infinite; display: inline-block; width: 1.2em; text-align: left; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1.2em; } }
.wave { display: flex; gap: 5px; justify-content: center; align-items: center; height: 46px; margin-bottom: 12px; }
.wave i { width: 6px; border-radius: 3px; background: var(--sky); animation: wave 1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .1s; } .wave i:nth-child(3) { animation-delay: .2s; } .wave i:nth-child(4) { animation-delay: .3s; } .wave i:nth-child(5) { animation-delay: .4s; }
@keyframes wave { 0%, 100% { height: 10px; } 50% { height: 42px; } }

.feed { display: flex; flex-direction: column-reverse; gap: 6px; max-height: 220px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.feed li { padding: 8px 12px; background: #1b1427; border-radius: 10px; font-size: 15px; }
.feed li b { color: var(--dim); font-weight: 600; }
.feed li.ok { background: rgba(198, 244, 50, .12); color: var(--lime); }

.podium { text-align: center; }
.podium .first { font-size: 64px; }
#toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); opacity: 0; background: var(--text);
  color: var(--bg); padding: 12px 18px; border-radius: 12px; font-weight: 700; transition: transform .25s, opacity .25s; max-width: 90vw; z-index: 9; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }
.foot { text-align: center; margin-top: 18px; font-size: 14px; }
.foot button { background: none; color: var(--dim); min-height: 40px; font-weight: 500; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }