/* Battle Trivia - phone. One column, thumb-sized, the same stage lights as the TV. A bar up top
   (your face, place, score, item) once the game is on; everything else is one screen at a time. */
:root {
  --top: calc(env(safe-area-inset-top, 0px) + 34px);
  --bot: calc(env(safe-area-inset-bottom, 0px) + 22px);
  /* the reveal floods the stage: green for right, red for wrong */
  --rv-good:
    radial-gradient(85% 50% at 50% -6%, rgba(47,214,143,.8) 0%, rgba(47,214,143,.22) 42%, rgba(47,214,143,0) 72%),
    conic-gradient(from 160deg at 18% -6%, rgba(90,255,190,0) 0deg, rgba(90,255,190,.2) 9deg, rgba(90,255,190,0) 20deg),
    conic-gradient(from 180deg at 82% -6%, rgba(69,208,255,0) 0deg, rgba(69,208,255,.2) 9deg, rgba(69,208,255,0) 20deg),
    radial-gradient(120% 40% at 50% 112%, rgba(47,214,143,.22), rgba(47,214,143,0) 70%),
    linear-gradient(180deg, #0a2c3c 0%, #0b0728 55%, #06041a 100%);
  --rv-bad:
    radial-gradient(85% 50% at 50% -6%, rgba(240,68,82,.8) 0%, rgba(240,68,82,.22) 42%, rgba(240,68,82,0) 72%),
    conic-gradient(from 160deg at 18% -6%, rgba(255,110,130,0) 0deg, rgba(255,110,130,.2) 9deg, rgba(255,110,130,0) 20deg),
    conic-gradient(from 180deg at 82% -6%, rgba(47,123,255,0) 0deg, rgba(47,123,255,.2) 9deg, rgba(47,123,255,0) 20deg),
    radial-gradient(120% 40% at 50% 112%, rgba(240,68,82,.2), rgba(240,68,82,0) 70%),
    linear-gradient(180deg, #2e0b30 0%, #0b0728 55%, #06041a 100%);
}
body.has-hud { --top: calc(env(safe-area-inset-top, 0px) + 82px); }
body.phone {
  min-height: 100dvh; overflow: hidden; background: var(--stage); background-attachment: fixed;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; overscroll-behavior: none;
}
body.phone.good { background: var(--rv-good); background-attachment: fixed; }
body.phone.bad { background: var(--rv-bad); background-attachment: fixed; }
input { user-select: text; -webkit-user-select: text; }

#app { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; padding: var(--top) 16px var(--bot); overflow: hidden; }
.scr { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: bt-fade .25s ease-out both; }
.scr.still { animation: none; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.grow { flex: 1; min-height: 8px; }
.center { align-items: center; justify-content: center; text-align: center; }
.t-xl { font-stretch: 125%; font-weight: 800; line-height: 1.05; }
.lav { color: var(--lav); } .lav2 { color: var(--lav-2); }
.p { font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--lav); }
.small { font-weight: 600; font-size: 15px; color: var(--lav-2); }
.big-btn { height: 68px; flex: none; width: 100%; font-size: 24px; }
.btn.cyan.on { background: #2fd68f; color: #00301f; box-shadow: 0 3px 0 #0b8a5c; }
.linkbtn { height: 44px; flex: none; font-weight: 600; font-size: 16px; color: var(--lav-2); }
.linkbtn:active { color: var(--lav); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-weight: 800; font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.tagline { display: inline-block; padding: 4px 8px; border-radius: 7px; font-weight: 900; font-size: 10px; letter-spacing: .12em; white-space: nowrap; }
.brand-num { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- the bar up top ---------- */
#hud { position: fixed; z-index: 40; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 0; right: 0; max-width: 456px; margin: 0 auto; width: calc(100% - 24px);
  display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 24px; background: rgba(11,7,36,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(69,208,255,.35), 0 6px 24px rgba(0,0,0,.4); }
#hud .place { font-stretch: 125%; font-weight: 800; font-size: 18px; line-height: 1; }
#hud .sp { flex: 1; }
#hud .bet { background: var(--hot); color: #fff; }
#hud .x2 { background: var(--go); color: #fff; }
#hud .score { font-stretch: 125%; font-weight: 800; font-size: 24px; line-height: 1.05; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
#hud .slot { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; border: 2px dashed #3b2d9a; }
#hud .slot.full { background: #261b6e; border: 2px solid var(--cyan); }
#hud .slot.armed { background: #261b6e; border: 2px solid var(--good); box-shadow: 0 0 16px rgba(47,214,143,.55); }
#hud .slot img { width: 30px; height: 30px; display: block; }
#hud .me { padding: 0; border-radius: 50%; }

/* ---------- join: the landing page (two doors: join a game, host login; play solo underneath) ---------- */
.join { padding-top: 4px; }
.land { overflow-y: auto; overflow-x: hidden; margin: -26px -16px 0; padding: 26px 16px 0; }   /* room above the logo for its glow */
.lwrap { display: flex; flex-direction: column; }
.join .logo { font-size: 50px; }
.join .pitch { display: none; }
.doors { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.door { border-radius: 24px; background: var(--card); text-align: left; }
.door .tag { display: flex; align-items: center; gap: 12px; }
.door .ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 36px; line-height: 1; flex: none; }   /* just the emoji, no box (owner 2026-10-25) */
.door h2 { margin: 0; font-size: 25px; }
.door .tag p { margin: 3px 0 0; color: var(--lav); font-size: 15px; font-weight: 600; }
.door.jn { padding: 20px 16px 16px; box-shadow: inset 0 0 0 2px rgba(123,77,255,.7), 0 18px 50px rgba(90,31,209,.35); }
.door.jn .codes .cb { background: rgba(6,4,26,.45); height: 84px; font-size: 44px; }
.door.jn .cmsg { margin-top: 10px; }
.cmsg.hint { color: var(--lav-2); }
.join .go { margin-top: 8px; }
.door.hd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; background: rgba(38,25,111,.55);
  box-shadow: inset 0 0 0 2px rgba(69,208,255,.55); transition: transform .08s, box-shadow .15s; }
.door.hd:active { transform: translateY(2px); }
.door.hd:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cyan), 0 0 26px rgba(69,208,255,.35); }
.door.hd .tag { flex: 1; }
.door.hd h2 { font-size: 22px; }
.door.hd .more { display: none; }
.door.hd .arrow { font-size: 26px; font-weight: 800; color: var(--cyan); }
.how { display: none; }
.solo { margin-top: 22px; text-align: center; font-size: 16px; font-weight: 600; color: var(--lav); }
.solo a { color: var(--cyan); text-decoration: none; font-weight: 800; white-space: nowrap; padding: 8px 0; }
.join .foot { margin-top: auto; padding-top: 18px; text-align: center; color: var(--lav-2); font-size: 13px; font-weight: 600; }
/* wide screens (a host on a laptop): the doors side by side, the host door says more, How it works, all centered */
@media (min-width: 820px) {
  body.landing #app { max-width: 1060px; padding: 0 32px; }
  body.landing .land { margin: 0 -32px; padding: 32px; }
  body.landing .lwrap { margin: auto 0; }
  body.landing .join .foot { margin-top: 0; }
  .join .logo { font-size: 64px; }
  .join .pitch { display: block; margin: 14px 0 0; text-align: center; color: var(--lav); font-size: 19px; font-weight: 600; }
  .doors { flex-direction: row; align-items: stretch; gap: 24px; margin-top: 34px; }
  .doors > .door { flex: 1; }
  .door.jn { padding: 28px 26px 24px; }
  .door h2 { font-size: 27px; }
  .door.hd { flex-direction: column; align-items: flex-start; padding: 28px 26px; }
  .door.hd:hover { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 26px rgba(69,208,255,.25); }
  .door.hd .tag { flex: none; }
  .door.hd h2 { font-size: 27px; }
  .door.hd .more { display: block; margin: 22px 0 0; padding: 0; list-style: none; color: var(--lav); font-size: 17px; font-weight: 600; line-height: 1.4; }
  .door.hd .more li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(59,45,154,.6); }
  .door.hd .more li::before { content: '\2713'; color: var(--cyan); font-weight: 800; }
  .door.hd .arrow { margin-top: auto; padding-top: 20px; font-size: 19px; }
  .door.hd .arrow::before { content: 'Sign in '; }
  .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
  .how .step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 18px; border-radius: 20px;
    background: rgba(19,21,82,.55); box-shadow: inset 0 0 0 1px rgba(59,45,154,.7); }
  .how .pics { height: 52px; display: flex; align-items: center; gap: 4px; font-size: 40px; margin-bottom: 4px; }
  .how .pics img { width: 46px; height: 46px; }
  .how b { font-stretch: 125%; font-weight: 800; font-size: 17px; }
  .how span { color: var(--lav); font-size: 15px; font-weight: 600; line-height: 1.4; }
  .solo { margin-top: 26px; font-size: 17px; }
}
/* laptops (800 tall and under): the same page, tighter, so it all fits without scrolling */
@media (min-width: 820px) and (max-height: 880px) {
  body.landing .land { padding: 20px 32px; }
  .join .logo { font-size: 52px; }
  .join .pitch { margin-top: 8px; font-size: 17px; }
  .doors { margin-top: 22px; }
  .door.jn { padding: 22px 24px 20px; } .door.hd { padding: 22px 24px; }
  .door.hd .more { margin-top: 14px; } .door.hd .more li { padding: 7px 0; }
  .door.hd .arrow { padding-top: 14px; }
  .how { margin-top: 18px; } .how .step { padding: 14px 16px; gap: 4px; } .how .pics { height: 40px; font-size: 32px; } .how .pics img { width: 36px; height: 36px; }
  .solo { margin-top: 18px; }
  body.landing .join .foot { padding-top: 12px; }
}
@media (min-width: 820px) and (max-height: 720px) {
  .join .logo { font-size: 42px; }
  .join .pitch { display: none; }
  .door.jn .codes .cb { height: 70px; font-size: 38px; }
  .how .step span { display: none; }
}
.codes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.codes .cb { height: 92px; border-radius: 18px; display: grid; place-items: center; background: var(--card); font-stretch: 125%; font-weight: 800; font-size: 48px;
  box-shadow: inset 0 0 0 2px #3b2d9a; transition: box-shadow .2s; }
.codes .cb.cur { box-shadow: inset 0 0 0 3px var(--cyan), 0 0 22px rgba(69,208,255,.35); }
.codes.found .cb { box-shadow: inset 0 0 0 3px var(--good), 0 0 24px rgba(47,214,143,.35); }
.codes.none .cb { box-shadow: inset 0 0 0 3px var(--bad); }
.codes input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; text-transform: uppercase; caret-color: transparent; }
.cmsg { height: 22px; margin-top: 12px; text-align: center; font-weight: 600; font-size: 15px; color: var(--lav); }
.cmsg.ok { color: var(--good); } .cmsg.no { color: #ff7b86; }

/* ---------- name & character ---------- */
.you h1 { margin: 0; font-size: 32px; text-align: center; }
.you .me { align-self: center; margin-top: 18px; animation: bt-float 2.6s ease-in-out infinite; }
.you .me .face { box-shadow: 0 0 0 6px var(--bg), 0 0 60px rgba(123,77,255,.45); }
.you .name { margin-top: 22px; width: 100%; background: transparent; border: 0; border-bottom: 3px solid #3b2d9a; outline: 0; text-align: center; color: var(--text);
  font-stretch: 125%; font-weight: 800; font-size: 34px; line-height: 1.05; padding: 4px 0 10px; border-radius: 0; }
.you .name:focus { border-bottom-color: var(--cyan); }
.you .name::placeholder { color: #3b2d9a; }
.looks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 2px; }
.looks button { position: relative; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; font-family: var(--emoji); font-size: 32px; line-height: 1; }
.looks button .em img { width: 1.15em; height: 1.15em; }
.looks button.on { background: rgba(69,208,255,.18); box-shadow: inset 0 0 0 2px var(--cyan); }
.looks button.taken { cursor: default; }
.looks button.taken .em { opacity: .3; }
.looks button .by { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-family: var(--ui); font-weight: 700; font-size: 9.5px; color: var(--lav); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatches { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; margin-top: 16px; }
.swatches button { aspect-ratio: 1; border-radius: 50%; }
.swatches button.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.err { min-height: 20px; margin-top: 10px; text-align: center; font-weight: 600; font-size: 15px; color: #ff7b86; }

/* ---------- lobby ---------- */
.lobby .me { animation: bt-float 2.8s ease-in-out infinite; }
.lobby .me .face { box-shadow: 0 0 0 6px var(--bg), 0 0 80px rgba(123,77,255,.5); }
.lobby .hi { font-size: 42px; margin-top: 28px; }
.lobby .crowd { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 26px; }
.lobby .crowd .face { animation: bt-float 2.4s ease-in-out infinite; }
.lobby .crowd .more { align-self: center; font-weight: 800; font-size: 16px; color: var(--lav); }
.lobby .rm { font-stretch: 125%; font-weight: 800; font-size: 22px; color: var(--cyan); }
.howbtn { height: 56px; flex: none; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 2px #3b2d9a; font-weight: 700; font-size: 17px; }

/* ---------- how to play / items ---------- */
.segs { display: flex; gap: 6px; flex: none; }
.segs i { flex: 1; height: 4px; border-radius: 2px; background: rgba(244,245,255,.25); }
.segs i.on { background: var(--text); }
.how .card3 { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 34px; cursor: pointer; }
.how .say { font-size: 28px; text-wrap: balance; }
.how .abcd { width: 170px; height: 170px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; animation: bt-pop .35s ease-out; }
.glassy { background: linear-gradient(180deg, rgba(130,180,255,.34) 0%, rgba(70,110,255,.16) 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(175,210,255,.6), inset 0 1px 0 rgba(255,255,255,.7), 0 8px 24px rgba(0,0,0,.35); }
.how .abcd span { border-radius: 18px; display: grid; place-items: center; font-stretch: 125%; font-weight: 800; font-size: 36px; }
.how .wob { width: 150px; height: 150px; animation: bt-wobble 1.6s ease-in-out infinite; }
.how .three { display: flex; gap: 16px; animation: bt-pop .35s ease-out; }
.how .three img { width: 84px; height: 84px; }
@keyframes bt-wobble { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
.backrow { display: flex; align-items: center; gap: 6px; flex: none; }
.backrow button { width: 44px; height: 44px; margin-left: -10px; font-size: 30px; line-height: 1; color: var(--lav); }
.gloss h1 { margin: 0; font-size: 38px; }
.glist { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.gitem { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: var(--card); }
.gitem img { width: 48px; height: 48px; flex: none; }
.gitem .n { font-weight: 700; font-size: 17px; }
.gitem .b { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--lav); margin-top: 3px; }
.gitem .w { font-weight: 900; font-size: 10px; letter-spacing: .12em; color: var(--lav-2); margin-top: 6px; }

/* ---------- next up ---------- */
/* never split a word: fitCat() shrinks the size until the longest word fits the phone */
.nextup .cat { font-size: 54px; text-wrap: balance; animation: bt-pop .4s ease-out; width: 100%; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.nextup .cat.long { font-size: 40px; }
.nextup .bug { padding: 8px 18px; border-radius: 999px; background: linear-gradient(180deg, #9b55ff 0%, #6a2be0 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 24px rgba(138,61,255,.5);
  font-stretch: 125%; font-weight: 800; font-size: 13px; letter-spacing: .12em; margin-bottom: 20px; }
.nextup .bug.fin { background: linear-gradient(180deg, #ffd56a 0%, #f7a92c 100%); color: #3a2400; }
.nextup .kind { margin-top: 20px; padding: 8px 16px; border-radius: 999px; font-stretch: 125%; font-weight: 800; font-size: 12px; letter-spacing: .1em;
  background: linear-gradient(180deg, #6fe0ff 0%, #27a9e6 100%); color: #06213d; }
.nextup .kind.write, .nextup .kind.x2 { background: linear-gradient(180deg, #6aa8ff 0%, #2f7bff 100%); color: #fff; }
.nextup.ask { padding-top: 18px; }
.nextup .askhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.nextup .askhead .kind { margin-top: 0; }
.nextup .acat { font-stretch: 125%; font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: var(--cyan); text-align: center; }
.nextup .qtext { font-stretch: 125%; font-weight: 800; font-size: 28px; line-height: 1.2; text-align: center; text-wrap: balance; padding: 0 6px; animation: bt-pop .4s ease-out both; }
.nextup .qtext.long { font-size: 22px; }
.nextup.ask .grow { justify-content: flex-start; padding-top: 6vh; }
.nextup .eyes { text-align: center; font-weight: 600; font-size: 18px; color: var(--lav); }
.note { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(11,7,36,.55); box-shadow: inset 0 0 0 1.5px rgba(175,210,255,.25); display: flex; gap: 12px; align-items: center; text-align: left; font-weight: 600; font-size: 14px; line-height: 1.4; }
.note img { width: 36px; height: 36px; flex: none; }
.note.warn { box-shadow: inset 0 0 0 1.5px rgba(47,123,255,.55); }

/* ---------- answer pad ---------- */
.pad .qarea { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 4px 10px; text-align: center; }
.pad .qtext { font-stretch: 125%; font-weight: 800; font-size: 22px; line-height: 1.22; text-wrap: balance; max-width: 350px; }
.pad .qtext.long { font-size: 18px; }
.pad .clock { font-stretch: 125%; font-weight: 800; font-size: 64px; line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.pad .clock.box { color: var(--cyan); } .pad .clock.low { color: var(--bad); } .pad .clock.done { color: var(--lav); }
.pad .boxchip { height: 30px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--cyan); }
.pad .boxchip img { width: 28px; height: 28px; }
.pad .boxchip.gone { color: var(--lav-2); }
.pad .boxchip.gone img { filter: grayscale(1); opacity: .5; }
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 340px; }
.tray .face { transition: opacity .2s; }
.answers { display: flex; flex-direction: column; gap: 8px; flex: none; }
.answers .a { height: 88px; border-radius: 16px; display: flex; align-items: center; padding: 0 10px; text-align: left; transition: transform .1s, filter .1s, opacity .2s; }
.answers .a:active { filter: brightness(1.25); transform: scale(.985); }
.answers .a .L { width: 72px; height: 68px; flex: none; border-radius: 12px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(200,225,255,.55);
  display: grid; place-items: center; font-stretch: 125%; font-weight: 800; font-size: 44px; line-height: 1; }
.answers .a .t { flex: 1; min-width: 0; margin-left: 16px; font-weight: 700; font-size: 20px; line-height: 1.15; text-shadow: 0 1px 8px rgba(10,20,80,.35); overflow-wrap: anywhere; }
.answers .a.gone { border: 3px dashed #261b6e; background: none; box-shadow: none; padding: 0 34px; font-stretch: 125%; font-weight: 800; font-size: 30px; color: #261b6e; pointer-events: none; }
.answers .a.pick { filter: brightness(1.35); transform: scale(.97); }
/* letters only (the question isn't on phones): a 2x2 of big pads */
.answers.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.answers.grid .a { height: 150px; justify-content: center; padding: 0; border-radius: 22px; }
.answers.grid .a .L { width: auto; height: auto; background: none; box-shadow: none; font-size: 72px; }
.answers.grid .a.gone { justify-content: center; font-size: 56px; }
.locked { height: 210px; flex: none; border-radius: 24px; margin-bottom: 7px; display: flex; align-items: center; gap: 18px; padding: 0 22px; animation: bt-pop .35s ease-out;
  background: linear-gradient(180deg, #c57bff 0%, #8a3dff 55%, #5a1fd1 100%); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), 0 0 0 4px rgba(69,208,255,.25), 0 0 44px rgba(150,70,255,.65); }
.locked .bigL { font-stretch: 125%; font-weight: 800; font-size: 120px; line-height: 1; flex: none; }
.locked .col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.locked .li { font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1.05; white-space: nowrap; }
.locked .ch { font-weight: 700; font-size: 20px; line-height: 1.2; opacity: .92; overflow-wrap: anywhere; }
.locked.write { background: var(--card); box-shadow: inset 0 0 0 3px var(--violet); flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 0 24px; }
.locked.write .txt { font-stretch: 125%; font-weight: 800; font-size: 36px; line-height: 1.05; word-break: break-word; }
.locked.write .li { font-stretch: 100%; font-weight: 700; font-size: 18px; color: var(--pink-violet); }
.status { height: 150px; flex: none; display: grid; place-items: center; text-align: center; font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--lav); }
.timeup { font-size: 76px; color: var(--bad); animation: bt-slam .45s ease-out both; }
/* write-in */
.wbox { flex: none; padding: 16px 18px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 3px #3b8cff; min-height: 66px; display: flex; align-items: center; justify-content: center; }
.wbox .typed { font-weight: 700; font-size: 26px; text-align: center; min-height: 32px; overflow-wrap: anywhere; }
.wbox .typed.ph { color: #4a3fa0; }
.wbox .typed.mirror { transform: scaleX(-1); }
.wbox .caret { display: inline-block; width: 3px; height: 26px; margin-left: 2px; vertical-align: -4px; background: var(--cyan); animation: bt-blink 1s steps(1) infinite; }
.wlock { margin-top: 10px; margin-bottom: 5px; height: 58px; flex: none; border-radius: 12px; font-stretch: 125%; font-weight: 800; font-size: 20px; background: #261b6e; color: var(--lav-2); box-shadow: 0 3px 0 #05031a; transition: background .15s; }
.wlock.ready { background: var(--hot); color: #fff; box-shadow: 0 3px 0 #1a3f9e; }
.hint { text-align: center; font-weight: 700; font-size: 15px; color: var(--cyan); margin-top: 8px; }
.kb { position: relative; margin: 12px -16px calc(-1 * var(--bot)); padding: 8px 3px calc(var(--bot) + 6px); background: #0e0a30; display: flex; flex-direction: column; gap: 10px; flex: none;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.kb .row { display: flex; gap: 6px; padding: 0 2px; }
.kb .kpad { min-width: 0; }   /* half-key indents: flex set inline */
.kb button { flex: 1; min-width: 0; padding: 0; height: 44px; touch-action: none; border-radius: 7px; background: #2c2380; color: var(--text); font-weight: 400; font-size: 21px; box-shadow: 0 1px 0 rgba(0,0,0,.5); transition: background .15s; }
.kb button.down { background: #4a3ab0; }
.kb .kpop { position: absolute; z-index: 2; width: 52px; height: 58px; margin: -64px 0 0 -26px; border-radius: 10px; display: grid; place-items: center;
  background: #4a3ab0; color: var(--text); font-size: 32px; box-shadow: 0 6px 18px rgba(0,0,0,.5); pointer-events: none; }
.kb .kpop.hidden { display: none; }
.kb button.sp { background: #1d1658; font-size: 14px; font-weight: 700; }
.kb button.go.ready { background: var(--hot); }

/* ---------- things done to you during a question ---------- */
#fx { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; pointer-events: none; }
#fx > * { position: absolute; }
#fx .ring2 { left: 5px; right: 5px; top: calc(var(--top) - 6px); bottom: 12px; border-radius: 22px; box-shadow: inset 0 0 0 3px var(--cyan), 0 0 30px rgba(69,208,255,.45); }
#fx .chips { top: calc(var(--top) - 10px); left: 0; right: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 10px; }
#fx .chips span { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; font-weight: 900; font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
#fx .chips img { width: 22px; height: 22px; }
#fx .ink { left: 0; right: 0; top: calc(var(--top) - 8px); bottom: 0; pointer-events: auto; touch-action: none; }
#fx .ink canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#fx .ink .say { position: absolute; left: 0; right: 0; top: 26%; display: flex; flex-direction: column; align-items: center; gap: 16px; pointer-events: none; animation: bt-pop .35s ease-out; text-align: center; color: #fff; text-shadow: 0 4px 24px rgba(20,0,60,.6); }
#fx .ink .say .who { font-stretch: 125%; font-weight: 800; font-size: 64px; line-height: 1; }
#fx .ink .say .what { font-stretch: 125%; font-weight: 800; font-size: 28px; line-height: 1; margin-top: 6px; }
#fx .ink .say .wipe { font-weight: 700; font-size: 19px; text-shadow: 0 2px 14px rgba(20,0,60,.7); text-align: center; line-height: 1.35; padding: 0 20px; }
#fx .ink .left { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); pointer-events: none; padding: 6px 14px; border-radius: 999px; background: rgba(11,7,36,.75); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
#fx .ink .left:empty { display: none; }
/* inked: the whole screen loses some colour until the ink is completely gone */
body.inked #app, body.inked #hud { filter: saturate(.45); transition: filter .3s; }
#fx .ink .say .finger { font-size: 36px; line-height: 1; font-family: var(--emoji); animation: bt-wipe 1.6s ease-in-out infinite; filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(20,0,60,.55)); }
#fx .frozen { left: 10px; right: 10px; top: var(--top); bottom: 30px; border-radius: 19px; pointer-events: auto; background: rgba(127,227,255,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: inset 0 0 0 3px #bdf2ff, inset 0 0 70px rgba(255,255,255,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #002838; animation: bt-fade .2s ease-out; }
#fx .frozen img { width: 96px; height: 96px; }
#fx .frozen .l { font-stretch: 125%; font-weight: 800; font-size: 30px; }
#fx .frozen .n { font-stretch: 125%; font-weight: 800; font-size: 100px; line-height: 1; }
#fx .frozen .by { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(0,40,56,.14); font-weight: 700; font-size: 14px; }
#fx .dark { inset: 0; z-index: 66; pointer-events: auto; background: radial-gradient(60% 40% at 50% 46%, #0d0a1f 0%, #000 70%); overflow: hidden; }
#fx .dark .crt { position: absolute; inset: 0; background: #e9e6ff; transform-origin: 50% 46%; animation: bt-crt .5s ease-in forwards; }
#fx .dark .say { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: bt-fade .4s .45s ease-out both; }
#fx .dark .who { font-stretch: 125%; font-weight: 800; font-size: 64px; line-height: 1; color: var(--text); text-shadow: 0 0 30px rgba(140,110,255,.35); }
#fx .dark .what { font-stretch: 125%; font-weight: 800; font-size: 24px; line-height: 1.1; color: #cfc9ee; margin-top: 8px; }
#fx .dark .ringn { position: relative; width: 132px; height: 132px; margin-top: 42px; }
#fx .dark .ringn svg { position: absolute; inset: 0; transform: rotate(-90deg); }
#fx .dark .ringn b { position: absolute; inset: 0; display: grid; place-items: center; font-stretch: 125%; font-weight: 800; font-size: 56px; color: #5d5780; }
#fx .dark .back { font-weight: 500; font-size: 16px; color: #6f6894; margin-top: 22px; }

/* ---------- the reveal ---------- */
.rev { padding-top: 6px; }
.rev .verdict { text-align: center; font-stretch: 125%; font-weight: 800; line-height: 1; margin-top: 8px; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bt-slam .5s cubic-bezier(.2,.9,.3,1.2) both; padding-bottom: .06em; }
.rev .verdict.ok { background-image: linear-gradient(180deg, #e6fff5 0%, #6ff5bd 48%, #2fd6c5 100%); filter: drop-shadow(0 0 18px rgba(47,214,143,.7)); }
.rev .verdict.no { background-image: linear-gradient(180deg, #ffe3e8 0%, #ff6b7d 48%, #f04452 100%); filter: drop-shadow(0 0 18px rgba(240,68,82,.7)); }
.rev .verdict.meh { background-image: linear-gradient(180deg, #fff 0%, #c9c3ff 100%); }
.rev .pts { text-align: center; font-stretch: 125%; font-weight: 800; font-size: 46px; line-height: 1.05; margin-top: 12px; animation: bt-up .4s .2s ease-out both; }
.rev .sub { text-align: center; font-weight: 600; font-size: 15px; color: #e3dfff; margin-top: 8px; animation: bt-up .4s .25s ease-out both; }
.rev .was { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700; font-size: 18px; text-align: left; }
.rev .was .L { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-stretch: 125%; font-weight: 800; font-size: 22px; background: #4f8dff; color: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.2); }
.near { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; animation: bt-up .4s .35s ease-out both; }
.nrow { position: relative; height: 52px; display: grid; grid-template-columns: 26px 34px 1fr auto; gap: 12px; align-items: center; padding: 0 16px; border-radius: 16px; background: rgba(11,7,36,.88); }
.nrow.me { background: #261b6e; box-shadow: inset 0 0 0 2px var(--cyan); z-index: 2; }
.nrow .pl { font-stretch: 125%; font-weight: 800; font-size: 17px; color: var(--lav); }
.nrow .nm { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrow .sc { font-stretch: 125%; font-weight: 800; font-size: 17px; }
.panel { flex: none; border-radius: 24px; background: #0b0724; padding: 12px; }
.panel .none { padding: 18px; text-align: center; font-weight: 600; font-size: 17px; line-height: 1.4; color: #d6d0f5; }
.reel { position: relative; height: 108px; border-radius: 16px; background: #18124a; overflow: hidden; }
.reel .strip { position: absolute; top: 12px; left: 0; display: flex; gap: 8px; animation: bt-wheel 4s .5s both; }
.reel.done .strip { animation: none; transform: translateX(var(--x)); }
.reel .strip span { flex: none; width: 84px; height: 84px; border-radius: 14px; background: #0b0724; display: grid; place-items: center; }
.reel .strip img { width: 62px; height: 62px; }
.reel .win { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 96px; margin-left: -48px; border-radius: 16px; box-shadow: inset 0 0 0 3px var(--cyan); pointer-events: none; animation: bt-glow .7s 4.45s ease-out both; }
.reel.done .win { animation: none; box-shadow: inset 0 0 0 3px #45d0ff, 0 0 26px rgba(69,208,255,.55); }
.reel .fade { position: absolute; inset: 0; background: linear-gradient(90deg, #18124a 0%, rgba(24,18,74,0) 30%, rgba(24,18,74,0) 70%, #18124a 100%); pointer-events: none; }
.reelname { position: relative; margin-top: 12px; min-height: 58px; }
.reelname .spin { position: absolute; inset: 0; display: grid; place-items: center; font-stretch: 125%; font-weight: 800; font-size: 18px; color: var(--lav-2); animation: bt-out 4.5s linear both; }
.reelname .got { text-align: center; animation: bt-pop .45s 4.5s ease-out both; }
.reel.done + .reelname .spin { display: none; }
.reel.done + .reelname .got { animation: none; }
.reelname .nm { font-stretch: 125%; font-weight: 800; font-size: 24px; line-height: 1.05; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reelname .bl { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--lav); margin-top: 6px; }
@keyframes bt-out { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
.offer { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; animation: bt-up .4s ease-out both; }
.offer .q { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--lav); text-align: center; }
.offer .two { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.offer .keep { height: 54px; border-radius: 16px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(175,210,255,.3); font-weight: 700; font-size: 15px; }
.offer .swap { height: 54px; border-radius: 16px; background: var(--go); color: #fff; box-shadow: 0 3px 0 #3a1d9e, 0 10px 30px rgba(123,77,255,.35); font-stretch: 125%; font-weight: 800; font-size: 13px; padding: 0 8px; }
.offerdone { margin-top: 12px; text-align: center; font-weight: 700; font-size: 16px; color: var(--cyan); animation: bt-pop .3s ease-out; }

/* ---------- item time ---------- */
.itm .ringbox { position: relative; width: 156px; height: 156px; align-self: center; flex: none; }
.itm .ringbox .glow { position: absolute; inset: -26px; border-radius: 50%; }
.itm .ringbox svg { position: absolute; left: 0; top: 0; transform: rotate(-90deg); }
.itm .ringbox .core { position: absolute; left: 18px; top: 18px; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #2c2288, #120d3d 70%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.4); }
.itm .ringbox .core img { width: 76px; height: 76px; }
.itm .ringbox .sec { position: absolute; right: -8px; top: -4px; min-width: 42px; height: 42px; padding: 0 8px; border-radius: 21px; background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2);
  display: grid; place-items: center; font-stretch: 125%; font-weight: 800; font-size: 18px; }
.itm .what { text-align: center; margin-top: 18px; flex: none; }
.itm .what .nm { font-stretch: 125%; font-weight: 800; font-size: 34px; line-height: 1.05; }
.itm .what .sb { font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--lav); margin-top: 8px; }
.targets { margin-top: 20px; padding: 6px; border-radius: 22px; background: linear-gradient(180deg, rgba(130,180,255,.14), rgba(70,110,255,.06)); box-shadow: inset 0 0 0 1px rgba(175,210,255,.22);
  display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; flex: 0 1 auto; }
.targets button { display: flex; align-items: center; gap: 14px; height: 58px; flex: none; padding: 0 16px 0 12px; border-radius: 16px; text-align: left; transition: background .15s, box-shadow .15s; }
.targets button.sel { background: linear-gradient(90deg, #8a3dff 0%, #5a1fd1 100%); box-shadow: 0 0 28px rgba(150,70,255,.55), inset 0 0 0 1px rgba(255,255,255,.3); }
.targets .pl { width: 16px; flex: none; font-stretch: 125%; font-weight: 800; font-size: 15px; color: var(--lav-2); text-align: center; }
.targets .face { box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
.targets .nm { flex: 1; min-width: 0; font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.targets .gap { font-weight: 600; font-size: 14px; color: var(--lav); white-space: nowrap; }
.targets .gap.ahead { color: #ff9fd2; }
.targets .armed { width: 22px; height: 22px; }
.fire { height: 66px; flex: none; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; font-stretch: 125%; font-weight: 800; font-size: 21px; line-height: 1.05;
  background: rgba(255,255,255,.06); color: var(--lav-2); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); transition: background .2s, color .2s; }
.fire.ready { background: var(--go); color: #fff; box-shadow: 0 3px 0 #3a1d9e, 0 10px 30px rgba(123,77,255,.4); }
.fire.arm { background: linear-gradient(135deg, #2fd68f, #1fae8a); color: #00301f; box-shadow: 0 3px 0 #0b6b4f, 0 10px 30px rgba(47,214,143,.3); }
.fire.hot { background: var(--hot); color: #fff; box-shadow: 0 3px 0 #1a3f9e, 0 10px 30px rgba(47,123,255,.35); }
.acted { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; animation: bt-pop .35s ease-out; }
.acted .pic { position: relative; width: 170px; height: 170px; }
.acted .pic .face { box-shadow: 0 0 0 6px var(--bg), 0 0 60px rgba(150,70,255,.55); }
.acted .pic img { position: absolute; right: -18px; bottom: -12px; width: 92px; height: 92px; animation: bt-pop .4s .15s ease-out both; }
.acted .tt { font-stretch: 125%; font-weight: 800; font-size: 46px; line-height: 1.05; }
.acted .tx { font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--lav); max-width: 290px; }
.nofeed { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.nofeed > div { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--card); animation: bt-up .3s ease-out both; font-weight: 500; font-size: 16px; }
.nofeed > div span.t { flex: 1; }
.nofeed img { width: 34px; height: 34px; }
.reacts { display: flex; gap: 6px; flex: none; }
.reacts button { flex: 1; height: 50px; border-radius: 14px; background: var(--card); font-family: var(--emoji); font-size: 22px; line-height: 1; transition: transform .1s; }
.reacts button:active { transform: scale(.9); }

/* ---------- getting hit: the whole phone ---------- */
#take { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 50px) 22px var(--bot); text-align: center; }
#take .mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#take .pic { position: relative; width: 170px; height: 170px; animation: bt-slam .45s cubic-bezier(.2,.9,.3,1.2) both; }
#take .pic img { position: absolute; right: -24px; bottom: -14px; width: 86px; height: 86px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); animation: bt-pop .4s .25s cubic-bezier(.2,.9,.3,1.4) both; }
#take .t1 { margin-top: 36px; font-stretch: 125%; font-weight: 800; line-height: 1; white-space: nowrap; animation: bt-up .35s .2s ease-out both; max-width: 100%; }
#take .t2 { font-stretch: 125%; font-weight: 800; line-height: 1.1; margin-top: 8px; animation: bt-up .35s .28s ease-out both; }
#take .ef { font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--lav); margin-top: 18px; max-width: 290px; animation: bt-up .35s .36s ease-out both; }
#take .taunts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#take .taunts button { height: 46px; padding: 0 18px; border-radius: 23px; background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); font-weight: 700; font-size: 15px; white-space: nowrap; transition: opacity .2s, transform .2s, background .2s; }
#take .taunts button.sent { background: linear-gradient(135deg, #3d8bff, #b44dff); transform: scale(1.04); }
#take .taunts.done button:not(.sent) { opacity: .25; }
#take .tap { height: 40px; margin-top: 6px; font-weight: 600; font-size: 14px; color: var(--lav-2); }

/* ---------- final wager ---------- */
.wg h1 { margin: 0; font-size: 32px; text-align: center; }
.wg .val { font-stretch: 125%; font-weight: 800; font-size: 88px; line-height: 1.05; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.wg .val.small { font-size: 64px; }
.wg .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 26px; }
.wg .two > div { padding: 14px 16px; border-radius: 18px; text-align: left; }
.wg .two .r { background: rgba(47,214,143,.12); box-shadow: inset 0 0 0 1.5px rgba(47,214,143,.45); }
.wg .two .w { background: rgba(240,68,82,.12); box-shadow: inset 0 0 0 1.5px rgba(240,68,82,.45); }
.wg .two .k { font-weight: 600; font-size: 14px; }
.wg .two .r .k { color: var(--good); } .wg .two .w .k { color: #ff7a86; }
.wg .two .v { font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1.05; margin-top: 6px; }
.slider { position: relative; height: 56px; touch-action: none; cursor: pointer; margin: 0 16px; flex: none; }
.slider .tr { position: absolute; left: 0; right: 0; top: 22px; height: 12px; border-radius: 6px; background: rgba(255,255,255,.12); }
.slider .fill { position: absolute; left: 0; top: 22px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #3d8bff, #b44dff); }
.slider .knob { position: absolute; top: 6px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 5px rgba(123,77,255,.6), 0 6px 16px rgba(0,0,0,.5); pointer-events: none; }
.slider.off { opacity: .4; pointer-events: none; }
.ends { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; color: var(--lav-2); margin: 4px 16px 0; flex: none; }
.wg .gl { font-stretch: 125%; font-weight: 800; font-size: 24px; line-height: 1.05; margin-top: 16px; }

/* ---------- podium, recap, again ---------- */
.conf { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.conf i { position: absolute; top: -20px; border-radius: 2px; animation: bt-confetti linear infinite both; }
.pod > *:not(.conf) { position: relative; z-index: 1; }
.pod .top { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 10px; flex: none; }
.pod .top .face { box-shadow: 0 0 0 6px var(--bg), 0 0 0 10px var(--cyan), 0 0 60px rgba(123,77,255,.5); }
.pod .title { font-size: 48px; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: 22px; animation: bt-slam .5s ease-out both; padding-bottom: .06em; }
.pod .score { font-size: 24px; margin-top: 10px; }
.board6 { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; flex: none; }
.brow { height: 46px; display: grid; grid-template-columns: 24px 32px 1fr auto; gap: 12px; align-items: center; padding: 0 16px; border-radius: 14px; background: #18124a; }
.brow.me { background: #261b6e; box-shadow: inset 0 0 0 2px var(--cyan); }
.brow .pl { font-stretch: 125%; font-weight: 800; font-size: 16px; color: var(--lav); }
.brow .pl.first { color: var(--cyan); }
.brow .nm { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .sc { font-stretch: 125%; font-weight: 800; font-size: 16px; }
.brow.dots { height: 18px; background: none; display: block; text-align: center; font-weight: 800; color: var(--lav-2); line-height: 10px; }
.recap { padding-top: 0; }
.recap .hd { display: flex; align-items: center; gap: 12px; padding: 0 2px 14px; flex: none; }
.recap .hd .t { font-size: 26px; line-height: 1; }
.recap .hd .s { font-weight: 600; font-size: 13px; color: var(--lav); margin-top: 4px; }
.recap .body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats div { padding: 14px; border-radius: 12px; background: var(--card); }
.stats b { display: block; font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1; }
.stats span { display: block; font-weight: 600; font-size: 13px; color: var(--lav); margin-top: 5px; }
.chartbox { padding: 14px; border-radius: 12px; background: var(--card); }
.chart { position: relative; width: 100%; height: 160px; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart .end { position: absolute; right: -8px; width: 24px; height: 24px; }
.chart .end .face { box-shadow: 0 0 0 2px var(--bg); }
.chart .end.me .face { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan); }
.chart .labels { position: absolute; left: 0; right: 0; bottom: -18px; display: flex; justify-content: space-between; font-weight: 700; font-size: 11px; color: var(--lav-2); }
.chartbox .gap { height: 18px; }
.ilog { padding: 14px; border-radius: 12px; background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.ilog > div { display: flex; align-items: center; gap: 12px; }
.ilog img { width: 38px; height: 38px; flex: none; }
.ilog b { display: block; font-weight: 700; font-size: 15px; }
.ilog span { display: block; font-weight: 500; font-size: 13px; color: var(--lav); }
.ilog .empty { font-weight: 500; font-size: 14px; color: var(--lav); }
.again h1 { margin: 0; font-size: 52px; text-align: center; }
.again .ppl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 10px; }
.again .ppl.many { grid-template-columns: repeat(5, 1fr); gap: 16px 6px; }
.again .p { display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .2s; min-width: 0; }
.again .p.out { opacity: .32; }
.again .p .wrap { position: relative; }
.again .p .ck { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; background: var(--good); color: #00301f; font-weight: 900; font-size: 15px; line-height: 28px; text-align: center; box-shadow: 0 0 0 3px var(--bg); animation: bt-pop .3s ease-out; }
.again .p .nm { font-weight: 700; font-size: 15px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.again .n { font-size: 22px; text-align: center; margin-bottom: 18px; flex: none; }

/* ---------- mid-game, watching, edge cases ---------- */
.roomline { display: flex; align-items: center; gap: 10px; flex: none; }
.roomline .code { font-stretch: 125%; font-weight: 800; font-size: 18px; color: var(--cyan); letter-spacing: .08em; }
.roomline .what { font-weight: 700; font-size: 12px; color: var(--lav); }
.late .me .face { box-shadow: 0 0 0 6px var(--bg), 0 0 0 10px var(--good); animation: bt-pop .45s ease-out; }
.nowcard { margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--card); flex: none; }
.nowcard .row1 { display: flex; align-items: center; gap: 8px; }
.nowcard .sec { margin-left: auto; font-stretch: 125%; font-weight: 800; font-size: 22px; }
.nowcard .row2 { display: flex; gap: 6px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.nowcard .row2 .n { margin-left: auto; font-weight: 700; font-size: 12.5px; color: var(--lav); white-space: nowrap; }
.tipbox { margin-top: 10px; padding: 14px; border-radius: 12px; background: rgba(69,208,255,.1); box-shadow: inset 0 0 0 1.5px rgba(69,208,255,.35); display: flex; gap: 12px; align-items: center; flex: none; }
.tipbox img { width: 46px; height: 46px; flex: none; }
.tipbox span { font-weight: 600; font-size: 13.5px; line-height: 1.45; color: #c9f1ff; }
.mini { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.mrow { height: 36px; flex: none; display: grid; grid-template-columns: 20px 28px 1fr auto; gap: 10px; align-items: center; padding: 0 12px; border-radius: 12px; background: var(--card); }
.mrow.me { background: #261b6e; box-shadow: inset 0 0 0 2px var(--cyan); }
.mrow .pl { font-stretch: 125%; font-weight: 800; font-size: 13px; color: var(--lav); }
.mrow .nm { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .sc { font-stretch: 125%; font-weight: 800; font-size: 13px; }
.watchq { margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--card); display: flex; align-items: center; gap: 14px; flex: none; }
.watchq .big { font-stretch: 125%; font-weight: 800; font-size: 58px; line-height: 1; min-width: 76px; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 14px rgba(140,100,255,.5)); }
.watchq .fs { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.queue { padding: 14px; border-radius: 12px; background: #261b6e; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex: none; }
.queue b { font-stretch: 125%; font-weight: 800; font-size: 24px; color: var(--cyan); }
.queue span { flex: 1; font-weight: 600; font-size: 14px; line-height: 1.4; }
.queue button { font-weight: 700; font-size: 13px; color: var(--lav); padding: 6px 4px; }

/* ---------- sheets, notes ---------- */
#sheet { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(5,3,26,.72); animation: bt-fade .2s ease-out; }
#sheet .in { max-height: 82%; max-width: 480px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; border-radius: 19px 19px 0 0; background: var(--card); padding: 10px 16px calc(var(--bot) + 8px); animation: bt-sheet .28s cubic-bezier(.2,.8,.2,1); }
#sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: #3b2d9a; margin: 0 auto 2px; flex: none; }
#sheet .mine { flex: none; display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--cyan); }
#sheet .mine.armed { box-shadow: inset 0 0 0 2px var(--good); }
#sheet .mine img { width: 72px; height: 72px; flex: none; }
#sheet .mine .nm { font-stretch: 125%; font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--cyan); }
#sheet .mine .bl { font-weight: 500; font-size: 13.5px; line-height: 1.4; color: var(--lav); margin-top: 4px; }
#sheet .empty { flex: none; padding: 14px; border-radius: 14px; border: 2px dashed #3b2d9a; font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--lav); }
#sheet .lbl { flex: none; font-weight: 900; font-size: 11px; letter-spacing: .16em; color: var(--lav); margin: 4px 4px 0; }
#sheet .all { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
#sheet .all > div { display: flex; gap: 10px; align-items: center; padding: 6px 4px; }
#sheet .all img { width: 34px; height: 34px; flex: none; }
#sheet .all b { display: block; font-weight: 700; font-size: 14px; }
#sheet .all span { display: block; font-weight: 400; font-size: 12.5px; line-height: 1.35; color: var(--lav); }
#sheet .lookhd { display: flex; align-items: center; gap: 14px; flex: none; }
#sheet .lookhd .t { font-size: 26px; line-height: 1; }
#sheet .lookhd .s { font-weight: 500; font-size: 13px; color: var(--lav); margin-top: 6px; }
#sheet .looks { grid-template-columns: repeat(8, 1fr); gap: 6px; overflow-y: auto; }
#sheet .looks button { border-radius: 12px; font-size: 24px; }
#sheet .swatches { margin-top: 0; flex: none; }
#sheet .done { height: 56px; flex: none; border-radius: 12px; font-size: 20px; margin-top: 4px; }
.toast { position: fixed; z-index: 95; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px;
  background: rgba(11,7,36,.94); box-shadow: inset 0 0 0 1.5px rgba(175,210,255,.35), 0 14px 40px rgba(0,0,0,.45); font-weight: 700; font-size: 15px; text-align: center; animation: bt-banner 2.6s ease-in-out forwards; }
.toast.good { box-shadow: inset 0 0 0 1.5px var(--good), 0 14px 40px rgba(0,0,0,.45); }
.floater { position: fixed; z-index: 75; bottom: 110px; font-family: var(--emoji); font-size: 38px; line-height: 1; pointer-events: none; animation: bt-rise 1.4s ease-out forwards; }
body.shaking #app { animation: bt-shake .5s ease-in-out 2; }
.sparks { position: fixed; inset: 0; z-index: 59; pointer-events: none; overflow: hidden; }
.sparks .sh { position: absolute; top: 0; bottom: 0; left: -170px; width: 150px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0)); transform: skewX(-18deg); animation: bt-shine .75s ease-out forwards; }
.sparks i { position: absolute; background: #fff; clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); filter: drop-shadow(0 0 8px rgba(160,220,255,.95)); animation: bt-spark 1s ease-out both; }
@keyframes bt-shine { to { left: 120%; } }

/* short phones: tighten the big pieces */
@media (max-height: 700px) {
  .answers .a { height: 72px; }
  .answers.grid .a { height: 120px; }
  .locked { height: 170px; }
  .locked .bigL { font-size: 100px; }
  .status { height: 110px; }
  .join .logo { font-size: 42px; }
  .doors { margin-top: 16px; }
  .door.jn .codes .cb { height: 70px; font-size: 38px; }
  .kb button { height: 40px; }
  .kb { gap: 8px; }
  .itm .ringbox { transform: scale(.85); margin: -10px 0; }
  .pod .title { font-size: 40px; }
}

/* Mini-games */
.mgframe { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + 64px); width: 100%; height: calc(100dvh - env(safe-area-inset-top, 0px) - 64px); border: 0; background: #0b0724; }
.mgbar { position: fixed; z-index: 31; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: rgba(11,7,36,.92); box-shadow: 0 2px 0 rgba(175,210,255,.15); }
.mgbar .nm { flex: 1; font-stretch: 125%; font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgbar .clock { font-stretch: 125%; font-weight: 800; font-size: 30px; color: var(--cyan); min-width: 48px; text-align: center; }
.mgbar .clock.low { color: #ff7b86; }
.mgbar .best { flex: 1; text-align: right; font-weight: 600; font-size: 15px; color: var(--lav); }
.mgbar .best b { color: #fff; font-size: 18px; }
.mgout { position: fixed; z-index: 32; inset: 64px 0 0 0; display: grid; place-content: center; text-align: center; gap: 10px; background: rgba(11,7,36,.72); color: #fff; }
.mgout .big { font-stretch: 125%; font-weight: 900; font-size: 64px; color: #ff7b86; }
.mgout .p { font-size: 17px; opacity: .85; padding: 0 24px; }
.cd321 { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; font-stretch: 125%; font-weight: 800; font-size: 180px; line-height: 1; color: var(--cyan); text-shadow: 0 0 60px rgba(69,208,255,.7); background: rgba(11,7,36,.55); pointer-events: none; }
.cd321.hidden { display: none; }
.cd321.low { inset: auto 0 0 0; height: 34%; font-size: 130px; background: none; }
.cd321 b { display: block; animation: bt-321 .9s ease-out both; }
@keyframes bt-321 { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.92); opacity: .9; } }
.minir { gap: 12px; padding-top: 12px; }
.minir .eyebrow, .minires .eyebrow { font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--cyan); }
.minir h1 { margin: 0; font-size: 40px; line-height: 1.05; }
.minir .how { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: h; display: flex; flex-direction: column; gap: 10px; }
.minir .how li { counter-increment: h; display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 17px; line-height: 1.3; }
.minir .how li::before { content: counter(h); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--violet); font-weight: 800; font-size: 16px; }
.minir .prize b { color: var(--cyan); }
.minir .warn { color: #ffb3b9; font-size: 14px; }
.minir #mgwait { text-align: center; color: var(--cyan); font-weight: 700; }
.minires { gap: 10px; }
.minires .title { font-size: 40px; }
.minires .score { font-size: 64px; color: var(--cyan); }
.minires .bonus { font-weight: 800; font-size: 28px; color: var(--good); }
.minires .goldnote { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(255,213,106,.12); box-shadow: inset 0 0 0 2px #ffd56a; text-align: left; }
.minires .goldnote img { width: 48px; height: 48px; filter: sepia(1) saturate(5) hue-rotate(-5deg) brightness(1.15); }
.minires .goldnote b { display: block; color: #ffd56a; font-size: 18px; }
.minires .goldnote span { font-size: 14px; color: var(--lav); }
#hud .slot.gold { box-shadow: 0 0 0 3px #ffd56a, 0 0 16px rgba(255,213,106,.6); }

/* all-day mode: at the podium, when the next game starts (you're already in it) */
.loopbar { position: fixed; z-index: 70; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); transform: translateX(-50%); max-width: calc(100% - 24px);
  padding: 9px 16px; border-radius: 999px; background: rgba(11,7,36,.92); box-shadow: inset 0 0 0 2px var(--cyan), 0 8px 24px rgba(0,0,0,.4);
  font-stretch: 125%; font-weight: 800; font-size: 14px; color: var(--cyan); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The answers arrive with the TV's (owner 2026-10-25), locked: dimmed, untappable, a countdown over them */
.prelook .qarea .acat { font-stretch: 125%; font-weight: 800; font-size: 26px; color: var(--lav); text-align: center; }
.answers.prelock { position: relative; }
.answers.prelock .a { opacity: .62; filter: saturate(.6); pointer-events: none; }
.answers.prelock .lockcd { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }   /* centred over the answers (owner 2026-10-25) */
.lockcd .box { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; background: rgba(11,7,36,.94);
  box-shadow: inset 0 0 0 2px var(--cyan), 0 12px 40px rgba(0,0,0,.5); }
.lockcd b { font-stretch: 125%; font-weight: 800; font-size: 104px; line-height: 1; color: var(--cyan); text-shadow: 0 0 50px rgba(69,208,255,.7); }
.lockcd b:not(:empty) { animation: bt-lockpop .45s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes bt-lockpop { 0% { transform: scale(1.45); } 100% { transform: scale(1); } }   /* never faded: the number always reads */
.tray .tl { font-weight: 700; font-size: 17px; color: var(--lav); }
.tray .tl b { font-stretch: 125%; font-weight: 800; color: var(--text); }

/* stuck on Connecting: after 10 s, a way back home (owner 2026-10-25) */
.connout { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s .4s; }
.connout.show { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .4s ease; }
.connout .p { color: var(--lav); }
.connout .btn { font-size: 20px; }