/* ===== Host / TV screen =====
 * TV-safe area: content stays inside ~5% overscan margins (Android TV guideline). */
body.host { font-size: 2.4vmin; --sx: 5vw; --sy: 4.5vh; }
.host .app { padding: var(--sy) var(--sx); display: flex; flex-direction: column; gap: 2vmin; }
.host .screen { flex: 1; min-height: 0; gap: 3vmin; }
.host .screen.center { align-items: center; justify-content: center; }
.host .screen.col { flex-direction: column; }

/* Top bar */
.topbar { display: flex; align-items: center; gap: 2vmin; min-height: 5.4vmin; }
.small-brand { font-size: 3.6vmin; }
.top-code { font-size: 2.4vmin; letter-spacing: .14em; }
.top-code:empty { display: none; }
.controls { margin-left: auto; display: flex; gap: 1.2vmin; align-items: center; font-size: 2.2vmin; }
.sound-hint { font-weight: 800; color: var(--muted); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }
body[data-phase="lobby"] #top-brand, body[data-phase="lobby"] .top-code { visibility: hidden; }

/* ---------- Lobby ---------- */
#s-lobby { align-items: stretch; }
.lobby-left { flex: 0 0 36%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vmin; }
.hero { display: flex; flex-direction: column; align-items: center; gap: .8vmin; }
.hero-mark { width: 13vmin; height: 13vmin; animation: bob 3.6s ease-in-out infinite; filter: drop-shadow(0 1.4vmin 2vmin rgba(0,0,0,.35)); }
@keyframes bob { 50% { transform: translateY(-1.2vmin) rotate(-3deg); } }
.logo.big { font-size: 9vmin; }
.logo.mid { font-size: 6.4vmin; }
.tagline { font-size: 2.6vmin; font-weight: 800; color: var(--muted); }
.join-card { padding: 2.6vmin 3vmin; text-align: center; width: 100%; max-width: 56vmin; }
.join-title { font-size: 3vmin; font-weight: 900; margin-bottom: 1.4vmin; }
.qr-wrap { background: #fff; border-radius: 2.4vmin; padding: 1.4vmin; display: inline-block; position: relative;
  box-shadow: 0 0 0 .8vmin rgba(255,255,255,.14), 0 2vmin 5vmin rgba(0,0,0,.35); animation: qrpulse 3s ease-in-out infinite; }
@keyframes qrpulse { 50% { box-shadow: 0 0 0 1.8vmin rgba(255,255,255,.06), 0 2vmin 5vmin rgba(0,0,0,.35); } }
#qr { width: 26vmin; height: 26vmin; display: block; image-rendering: pixelated; }
.join-url { margin-top: 1.4vmin; font-size: 2.2vmin; word-break: break-all; color: var(--muted); }
.join-url b { color: #fff; }
.code-label { margin-top: 1.4vmin; font-size: 1.9vmin; text-transform: uppercase; letter-spacing: .24em; color: var(--muted); font-weight: 900; }
.room-code { font-size: 8.5vmin; font-weight: 900; letter-spacing: .2em; line-height: 1.05; margin-right: -.2em; text-shadow: 0 .6vmin 2vmin rgba(0,0,0,.35); }

.lobby-right { flex: 1; display: flex; flex-direction: column; gap: 2.2vmin; min-width: 0; }
.lobby-head h2 { margin: 0; font-size: 4.4vmin; display: flex; align-items: center; gap: 1.5vmin; }
.count-pill { font-size: 2.6vmin; }
.howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4vmin; }
.howto li { display: flex; align-items: center; gap: 1.2vmin; padding: 1.2vmin 1.6vmin; border-radius: 1.8vmin; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-weight: 800; font-size: 2.1vmin; line-height: 1.2; }
.howto b { flex: none; display: grid; place-items: center; width: 4.4vmin; height: 4.4vmin; border-radius: 50%; background: var(--brand); font-size: 2.4vmin; }
.player-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(17vmin, 1fr)); grid-auto-rows: min-content; gap: 1.6vmin; align-content: start; overflow: hidden; padding: 1vmin .4vmin; }
.pcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: .9vmin; padding: 1.6vmin 1vmin 1.3vmin; border-radius: 2.2vmin;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid var(--glass-b); min-width: 0; }
.pcard.new { animation: joinpop .8s var(--ease-pop) both; }
.pcard.new::after { content: ''; position: absolute; inset: -1vmin; border-radius: 3vmin; border: .5vmin solid var(--pc); opacity: 0; animation: ring 1s ease-out .1s; }
@keyframes joinpop { 0% { transform: translateY(6vmin) scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: translateY(-1vmin) scale(1.08) rotate(3deg); opacity: 1; } 100% { transform: none; } }
@keyframes ring { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.25); } }
.pcard .avatar { width: 9vmin; height: 9vmin; font-size: 9vmin; }
.pcard .nm { font-weight: 900; font-size: 2.4vmin; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .crown { position: absolute; top: -.6vmin; right: 1vmin; font-size: 3vmin; filter: drop-shadow(0 .3vmin .4vmin rgba(0,0,0,.4)); transform: rotate(14deg); }
.pcard.offline { opacity: .4; filter: grayscale(.8); }
.pcard.ghost { background: none; border: .3vmin dashed rgba(255,255,255,.2); justify-content: center; color: rgba(255,255,255,.35); font-size: 5vmin; font-weight: 900; min-height: 15.5vmin; animation: ghost 2.4s ease-in-out infinite; }
@keyframes ghost { 50% { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.6); } }
.lobby-status { padding: 1.8vmin 2.4vmin; font-size: 2.8vmin; font-weight: 800; display: flex; align-items: center; gap: 1.6vmin; }
.lobby-status .dots::after { content: '…'; animation: dots 1.4s steps(4) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
.settings-summary { display: flex; flex-wrap: wrap; gap: 1vmin; font-size: 2.1vmin; }
.settings-summary .pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.settings-summary .pill.meta { background: rgba(255,213,74,.16); }

/* ---------- Ready / countdown ---------- */
#s-ready { position: relative; }
.intro, .ready-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: opacity .4s, transform .4s; }
.intro { gap: 3vmin; }
.intro-mark { width: 26vmin; animation: introspin 1.6s var(--ease-pop) both; }
@keyframes introspin { from { transform: scale(0) rotate(-200deg); } }
.intro-text { font-size: 12vmin; animation: zoomin .9s var(--ease-pop) .35s both; }
@keyframes zoomin { from { transform: scale(.2); opacity: 0; } }
#s-ready:not(.is-intro) .intro, #s-ready.is-intro .ready-inner { opacity: 0; transform: scale(.9); pointer-events: none; }
.ready-qnum { font-size: 3.2vmin; font-weight: 900; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.cat-tile { width: 18vmin; height: 18vmin; border-radius: 5vmin; display: grid; place-items: center; font-size: 10vmin; margin: 2vmin 0 1vmin;
  background: var(--brand); box-shadow: 0 2vmin 5vmin rgba(255,61,129,.35), inset 0 .5vmin 0 rgba(255,255,255,.25); animation: tilein .7s var(--ease-pop) both; }
@keyframes tilein { from { transform: scale(.3) rotate(-25deg); opacity: 0; } }
.ready-cat { font-size: 6.4vmin; font-weight: 900; margin-bottom: 3vmin; animation: zoomin .6s var(--ease-pop) .1s both; }
.count-wrap { position: relative; width: 24vmin; height: 24vmin; display: grid; place-items: center; }
.count-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.2vmin solid rgba(255,255,255,.15); }
.count-ring::after { content: ''; position: absolute; inset: -1.2vmin; border-radius: 50%; border: 1.2vmin solid #ffd54a; animation: ringburst 1s ease-out infinite; }
@keyframes ringburst { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.ready-count { font-size: 17vmin; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg,#fff,#ffd54a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ready-count.tick { animation: countpop .9s var(--ease-pop); }
@keyframes countpop { 0% { transform: scale(2.2); opacity: 0; } 35% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); } }

/* ---------- Question ---------- */
#s-question { align-items: stretch; }
.q-main { flex: 1; display: flex; flex-direction: column; gap: 2.2vmin; min-width: 0; }
.q-top { display: flex; gap: 1.6vmin; font-size: 2.6vmin; align-items: center; }
.cat-pill { font-size: 2.6vmin; padding: .4em 1em; background: rgba(255,255,255,.16); }
.progress { flex: 1; display: flex; gap: .6vmin; align-items: center; }
.progress i { flex: 1; height: .9vmin; border-radius: 99px; background: rgba(255,255,255,.15); max-width: 6vmin; }
.progress i.done { background: rgba(255,255,255,.55); }
.progress i.cur { background: #ffd54a; box-shadow: 0 0 1.4vmin #ffd54a; }
.q-num { font-weight: 900; color: var(--muted); }
.q-row { display: flex; gap: 3vmin; align-items: stretch; }
.q-text { flex: 1; padding: 3vmin 3.4vmin; font-size: 4.8vmin; font-weight: 900; line-height: 1.18; display: flex; align-items: center; min-height: 22vmin; text-wrap: balance; }
.q-text.enter { animation: qin .6s cubic-bezier(.2,.9,.3,1) both; }
@keyframes qin { from { transform: translateY(3vmin) scale(.96); opacity: 0; filter: blur(6px); } }
.q-text.long { font-size: 4vmin; }
.timer { position: relative; flex: 0 0 22vmin; height: 22vmin; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 1.4vmin rgba(255,213,74,.35)); }
.timer circle { fill: rgba(0,0,0,.18); stroke-width: 10; }
.timer .track { stroke: rgba(255,255,255,.14); }
.timer .bar { fill: none; stroke: #ffd54a; stroke-linecap: round; stroke-dasharray: 326.7; transition: stroke .3s; }
.timer.low .bar { stroke: #ff5d73; }
.timer.low { animation: urgent .5s ease-in-out infinite alternate; }
@keyframes urgent { to { transform: scale(1.05); } }
.timer.next .bar { stroke: rgba(255,255,255,.5); }
.timer-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7.6vmin; font-weight: 900; font-variant-numeric: tabular-nums; }
.timer-pts { position: absolute; left: 0; right: 0; bottom: 3.6vmin; text-align: center; font-size: 2vmin; font-weight: 900; color: #ffd54a; }
.timer-pts.drop { animation: ptsdrop .6s ease; }
@keyframes ptsdrop { 0% { transform: scale(1.6); color: #ff5d73; } }
.options { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2vmin; min-height: 0; }
.option { position: relative; display: flex; align-items: center; gap: 2vmin; padding: 1.8vmin 2.4vmin; border-radius: var(--radius); isolation: isolate;
  background: var(--c); color: #fff; text-shadow: 0 .2vmin .4vmin rgba(0,0,0,.3); font-size: 3.6vmin; font-weight: 900;
  background: var(--pat), linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 72%, #000));
  box-shadow: 0 1vmin 0 rgba(0,0,0,.3), 0 2vmin 4vmin rgba(0,0,0,.25);
  box-shadow: 0 1vmin 0 color-mix(in srgb, var(--c) 55%, #000), 0 2vmin 4vmin rgba(0,0,0,.25);
  transition: transform .5s var(--ease-pop), opacity .5s ease, filter .5s ease; animation: slidein .55s var(--ease-pop) backwards; overflow: hidden; }
.option:nth-child(2) { animation-delay: .08s; } .option:nth-child(3) { animation-delay: .16s; } .option:nth-child(4) { animation-delay: .24s; }
@keyframes slidein { from { transform: translateY(5vmin) scale(.85); opacity: 0; } }
.option .opt-shape { width: 8vmin; height: 8vmin; border-radius: 2vmin; background: rgba(0,0,0,.22); }
.option .opt-letter { position: absolute; right: .5vmin; bottom: .2vmin; font-size: 1.8vmin; }
.option .txt { flex: 1; line-height: 1.15; }
.option .dist { position: absolute; inset: auto 0 0 0; height: 100%; width: 0; background: rgba(255,255,255,.18); z-index: -1; transition: width 1s cubic-bezier(.2,.9,.3,1) .3s; }
.option .count { font-size: 3vmin; background: rgba(0,0,0,.3); border-radius: 999px; padding: .15em .7em; display: none; font-variant-numeric: tabular-nums; }
.option .pickers { display: none; gap: 0; }
.option .pickers .avatar { width: 4.2vmin; height: 4.2vmin; font-size: 4.2vmin; margin-left: -1vmin; animation: dropin .5s var(--ease-pop) backwards; }
@keyframes dropin { from { transform: translateY(-3vmin) scale(.4); opacity: 0; } }
.reveal .option .count, .reveal .option .pickers { display: inline-flex; }
.reveal .timer-pts { visibility: hidden; }
.reveal .option.wrong { opacity: .45; filter: saturate(.35) brightness(.8); transform: scale(.95); animation: shake .45s ease .1s; }
@keyframes shake { 25% { transform: translateX(-1vmin) scale(.95); } 50% { transform: translateX(1vmin) scale(.95); } 75% { transform: translateX(-.5vmin) scale(.95); } }
.reveal .option.right { transform: scale(1.04); z-index: 2; box-shadow: 0 0 0 .8vmin #fff; box-shadow: 0 0 0 .8vmin #fff, 0 0 7vmin color-mix(in srgb, var(--c) 70%, #fff); animation: winpulse 1.4s ease-in-out .2s 2; }
@keyframes winpulse { 50% { transform: scale(1.07); } }
.reveal .option.right .opt-shape::after { content: '✓'; position: absolute; inset: -1vmin -1vmin auto auto; width: 4.4vmin; height: 4.4vmin; border-radius: 50%; background: #fff; color: #0b7a55;
  display: grid; place-items: center; font-size: 3vmin; text-shadow: none; animation: zoomin .5s var(--ease-pop) .2s both; }
.q-bottom { display: flex; align-items: center; gap: 2vmin; min-height: 7vmin; }
.answered-heads { display: flex; }
.answered-heads .avatar { width: 4.6vmin; height: 4.6vmin; font-size: 4.6vmin; margin-right: -1.2vmin; animation: dropin .45s var(--ease-pop); }
.q-answered { flex: 1; font-size: 2.6vmin; font-weight: 900; padding-left: 2vmin; color: var(--muted); }
.q-bottom .btn { font-size: 2.6vmin; }

.scoreboard { flex: 0 0 42vmin; padding: 2.2vmin; display: flex; flex-direction: column; min-width: 0; }
.scoreboard h3 { margin: 0 0 1.4vmin; font-size: 3vmin; }
.score-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8vmin; position: relative; flex: 1; overflow: hidden; }
.score-row { display: flex; align-items: center; gap: 1vmin; padding: .8vmin 1.2vmin; border-radius: 1.6vmin; background: rgba(255,255,255,.08);
  font-size: 2.4vmin; font-weight: 800; transition: background .3s; will-change: transform; position: relative; }
.score-row.top1 { background: linear-gradient(90deg, rgba(255,213,74,.32), rgba(255,213,74,.08)); }
.score-row .rk { width: 3.4vmin; text-align: center; color: var(--muted); font-weight: 900; }
.score-row .avatar { width: 4.4vmin; height: 4.4vmin; font-size: 4.4vmin; }
.score-row .nm { flex: 1; min-width: 8vmin; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-row .sc { font-variant-numeric: tabular-nums; flex: none; font-weight: 900; min-width: 4.5vmin; text-align: right; }
.score-row .st { width: 3.4vmin; text-align: center; }
.score-row .delta { font-size: 1.7vmin; font-weight: 900; padding: .1em .45em; border-radius: 99px; animation: zoomin .5s var(--ease-pop) .6s both; }
.score-row .delta.up { background: rgba(52,224,161,.25); color: var(--good); }
.score-row .delta.down { background: rgba(255,93,115,.2); color: #ff9aa8; }
.score-row .streak { font-size: 2vmin; }
.score-row.answered { background: rgba(52,224,161,.22); }
.score-row.answered .st { animation: zoomin .4s var(--ease-pop); }
.score-row .gain { position: absolute; right: 6vmin; color: var(--good); font-size: 2.2vmin; font-weight: 900; animation: floatup 1.8s ease-out both; pointer-events: none; }
@keyframes floatup { 0% { transform: translateY(1vmin) scale(.6); opacity: 0; } 20% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-3vmin); opacity: 0; } }
.score-row.offline { opacity: .45; }
.score-list.dense .score-row { padding: .4vmin 1vmin; font-size: 2vmin; }
.score-list.dense .score-row .avatar { width: 3.2vmin; height: 3.2vmin; font-size: 3.2vmin; }

/* ---------- Final ---------- */
#s-final { gap: 2vmin; justify-content: flex-start; }
.final-title { animation: zoomin .8s var(--ease-pop) both; }
.final-body { flex: 1; display: flex; gap: 4vmin; width: 100%; min-height: 0; align-items: stretch; }
.final-left { flex: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2vmin; min-width: 0; }
.final-right { flex: 1; display: flex; flex-direction: column; gap: 1.4vmin; min-width: 0; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 2.4vmin; width: 100%; }
.pod { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 22vmin; animation: rise 1s var(--ease-pop) backwards; min-width: 0; }
.pod .avatar { width: 11vmin; height: 11vmin; font-size: 11vmin; margin-bottom: 1vmin; }
.pod .nm { font-size: 3vmin; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .sc { font-size: 2.6vmin; font-weight: 900; color: #ffe38a; margin-bottom: 1vmin; font-variant-numeric: tabular-nums; }
.pod .block { width: 100%; border-radius: 2vmin 2vmin 0 0; display: grid; place-items: center; font-size: 7vmin; font-weight: 900; color: rgba(0,0,0,.35);
  box-shadow: inset 0 .6vmin 0 rgba(255,255,255,.4), 0 2vmin 4vmin rgba(0,0,0,.3); }
.pod.r1 .block { height: 22vmin; background: linear-gradient(180deg, var(--gold), #d9a400); }
.pod.r2 .block { height: 15vmin; background: linear-gradient(180deg, var(--silver), #9fb0c0); }
.pod.r3 .block { height: 10vmin; background: linear-gradient(180deg, var(--bronze), #a8612b); }
.pod.pos0 { animation-delay: 1.2s; } .pod.pos1 { animation-delay: .6s; } .pod.pos2 { animation-delay: 0s; }
.pod .crown { font-size: 5.4vmin; animation: crown 1.6s ease-in-out infinite; }
@keyframes crown { 50% { transform: translateY(-.8vmin) rotate(-6deg); } }
@keyframes rise { from { transform: translateY(30vmin); opacity: 0; } }
.final-rest { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1vmin; font-size: 2.2vmin; font-weight: 800; }
.final-rest li { display: inline-flex; align-items: center; gap: .8vmin; padding: .5vmin 1.4vmin .5vmin .6vmin; border-radius: 99px; background: rgba(255,255,255,.1); animation: zoomin .5s var(--ease-pop) backwards; }
.final-rest .avatar { width: 3.4vmin; height: 3.4vmin; font-size: 3.4vmin; }
.final-rest:empty { display: none; }
.awards-title { margin: 0; font-size: 3vmin; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.awards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vmin; }
.award { display: flex; gap: 1.4vmin; align-items: center; padding: 1.4vmin 1.6vmin; border-radius: 2vmin; background: rgba(255,255,255,.09); border: 1px solid var(--glass-b);
  animation: awardin .7s var(--ease-pop) backwards; min-width: 0; }
@keyframes awardin { from { transform: translateX(6vmin) scale(.8); opacity: 0; } }
.award .ic { font-size: 5vmin; flex: none; filter: drop-shadow(0 .4vmin .6vmin rgba(0,0,0,.35)); }
.award .tx { min-width: 0; }
.award .ti { font-weight: 900; font-size: 2.3vmin; color: #ffe38a; }
.award .who { font-weight: 900; font-size: 2.4vmin; display: flex; align-items: center; gap: .6vmin; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.award .who .avatar { width: 3.2vmin; height: 3.2vmin; font-size: 3.2vmin; }
.award .de { font-size: 1.9vmin; color: var(--muted); font-weight: 800; }
.stats { display: flex; flex-direction: column; gap: 1vmin; margin-top: .6vmin; }
.stat { padding: 1.2vmin 1.6vmin; border-radius: 1.6vmin; background: rgba(0,0,0,.18); font-size: 2vmin; font-weight: 800; animation: zoomin .5s ease backwards; }
.stat b { font-size: 2.8vmin; color: #fff; }
.stat .q { display: block; color: #fff; font-size: 2.1vmin; margin-top: .3vmin; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.final-actions .btn { font-size: 2.8vmin; }

.toast { position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%); padding: 1.4vmin 3vmin; border-radius: 999px; background: rgba(0,0,0,.7); font-size: 2.4vmin; font-weight: 800; z-index: 60; }

/* Portrait tablets */
@media (orientation: portrait) {
  body.host { font-size: 2vmax; --sx: 4vw; --sy: 3vh; }
  #s-lobby, #s-question { flex-direction: column; overflow-y: auto; }
  .lobby-left { flex: none; }
  .howto { grid-template-columns: 1fr; }
  .scoreboard { flex: none; max-height: 30vh; }
  .options { grid-template-columns: 1fr; }
  .q-text { font-size: 4.4vmin; }
  .final-body { flex-direction: column; overflow-y: auto; }
}
.void-banner { padding: 1.6vmin 2.4vmin; border-radius: 2vmin; background: rgba(255,181,71,.22); border: .3vmin solid #ffb547; font-size: 2.8vmin; font-weight: 900; text-align: center; animation: zoomin .5s var(--ease-pop); }
.voided .option.right { box-shadow: 0 0 0 .8vmin #ffb547; filter: saturate(.4); }
.voided .score-row .gain { display: none; }
.diff-pill { font-size: 2.3vmin; gap: .6em; }
.diff-pill:empty { display: none; }
.diff-pill .stars { letter-spacing: .05em; }
.diff-pill.d-easy { background: rgba(52,224,161,.22); border: 1px solid rgba(52,224,161,.5); }
.diff-pill.d-medium { background: rgba(255,213,74,.2); border: 1px solid rgba(255,213,74,.5); }
.diff-pill.d-hard { background: rgba(255,93,115,.24); border: 1px solid rgba(255,93,115,.55); }
.settings-summary .pill.warnpill { background: rgba(255,181,71,.3); }
.lan-warn { margin-top: 1vmin; padding: 1vmin 1.4vmin; border-radius: 1.4vmin; background: rgba(255,181,71,.22); border: .25vmin solid #ffb547; font-weight: 800; font-size: 1.9vmin; }

/* ---- Kids game: bigger, rounder, friendlier ---- */
body.kids .q-text { font-size: 5.4vmin; }
body.kids .option { border-radius: 4vmin; }
.pill.kids-pill { background: linear-gradient(135deg, #ffb3d1, #ffd36e); color: #3a1450; font-weight: 900; }
.bonus-tag { display: inline-block; margin-left: .4em; padding: .05em .45em; border-radius: 1em; background: #ffd23f; color: #3a1450; font-weight: 900; font-size: .8em; }
.bonus-tag.removed { background: rgba(255,255,255,.18); color: #fff; font-weight: 700; }

/* ---- Lumi fanfare ---- */
.lumi-fx { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,210,63,.35), rgba(20,6,50,.75)); pointer-events: none; }
.lumi-fx.hidden { display: none; }
.lumi-card { text-align: center; padding: 4vmin 6vmin; border-radius: 4vmin; background: linear-gradient(135deg, #ff5d8f, #ffb84d 55%, #ffd23f); color: #2a0b3d; box-shadow: 0 0 8vmin rgba(255,210,63,.8); max-width: 80vw; }
.lumi-stars { font-size: 7vmin; animation: lumiWiggle .6s ease-in-out infinite alternate; }
.lumi-text { font-size: 6vmin; font-weight: 900; line-height: 1.15; margin: 1.5vmin 0; }
.lumi-pts { font-size: 12vmin; font-weight: 900; color: #fff; text-shadow: 0 .6vmin 0 #b3245f; }
.lumi-fx.pop .lumi-card { animation: lumiPop .9s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes lumiPop { from { transform: scale(.2) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lumiWiggle { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(6deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .lumi-fx.pop .lumi-card, .lumi-stars { animation: none; } }
html.hc .lumi-card { background: #000; color: #fff; border: .5vmin solid #ffd23f; }