/* ===================== TVivia — game show styles ===================== */
:root {
  --bg0: #0b0120; --bg1: #1a0442; --bg2: #3b0d7a;
  --gold: #ffd23f; --gold2: #ff9f1c; --pink: #ff3e9d; --cyan: #26e0ff; --lime: #9bff4f;
  --panel: #1d0a45; --panel2: #2a1160; --line: rgba(255,255,255,.14);
  --text: #fff; --muted: #c9b8ff;
  --good: #2ee66b; --bad: #ff4d5e;
  --display: "Bungee", "Arial Black", Impact, sans-serif;
  --body: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --adh: 90px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg0); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea { font: inherit; }
.hidden { display: none !important; }
.display { font-family: var(--display); letter-spacing: .02em; }

/* ---------- stage backdrop ---------- */
.stage-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, #ff3e9d55 0%, transparent 45%),
              radial-gradient(ellipse at 50% -20%, #6a2cff88 0%, transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg0) 70%); }
.stage-bg .beam { position: absolute; top: -20%; width: 40vmax; height: 140vmax; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); filter: blur(6px); mix-blend-mode: screen; opacity: .5; }
.stage-bg .b1 { left: 5%; animation: sweep 9s ease-in-out infinite alternate; }
.stage-bg .b2 { right: 5%; animation: sweep 11s ease-in-out infinite alternate-reverse; background: linear-gradient(180deg, rgba(38,224,255,.3), transparent 70%); }
.stage-bg .b3 { left: 38%; animation: sweep 13s ease-in-out infinite alternate; background: linear-gradient(180deg, rgba(255,62,157,.28), transparent 70%); }
@keyframes sweep { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.stage-bg .floor { position: absolute; left: -10%; right: -10%; bottom: -30vh; height: 60vh; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,210,63,.25), transparent 60%); }
.stage-bg .sparkles { position: absolute; inset: 0; background-image:
  radial-gradient(2px 2px at 10% 20%, #fff8, transparent), radial-gradient(2px 2px at 80% 30%, #fff6, transparent),
  radial-gradient(1.5px 1.5px at 30% 70%, #fff7, transparent), radial-gradient(2px 2px at 60% 15%, #fff5, transparent),
  radial-gradient(1.5px 1.5px at 90% 80%, #fff6, transparent), radial-gradient(2px 2px at 45% 45%, #fff4, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .3; } }

/* ---------- marquee bulb frame ---------- */
.marquee { position: relative; padding: 1.1rem; border-radius: 1.6rem;
  background: radial-gradient(circle, #fffbe0 0 .22rem, var(--gold) .3rem, #ff9f1c55 .5rem, transparent .62rem) 0 0 / 1.6rem 1.6rem, linear-gradient(135deg, #7a1fd1, #3b0d7a);
  box-shadow: 0 0 2.5rem #ffd23f55, 0 1rem 3rem #0009; animation: chase 0.9s steps(2) infinite; }
@keyframes chase { to { background-position: .8rem .8rem, 0 0; } }
.marquee > .panel { position: relative; border-radius: 1rem; background: linear-gradient(180deg, #25105a, #140633); box-shadow: inset 0 0 0 2px #ffffff22, inset 0 -1.5rem 3rem #0006; }

/* ---------- ad bars ---------- */
.ad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #07010f; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ad.tv { height: var(--adh); }
.ad.phone { height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.house-ad { display: flex; gap: .8em; align-items: center; justify-content: center; color: #efe8ff; font-weight: 800; font-size: clamp(12px, 1.6vmin, 18px); padding: 0 1em; text-align: center; width: min(100% - 16px, 728px); height: calc(100% - 12px); max-height: 90px; border: 1px dashed #ffffff40; border-radius: 8px; background: repeating-linear-gradient(135deg, #ffffff08 0 10px, #ffffff03 10px 20px); }
.ad.phone .house-ad { width: min(100% - 16px, 320px); max-height: 50px; font-size: 12px; }
.ad-tag { font-size: .7em; border: 1px solid #fff5; border-radius: 4px; padding: .1em .4em; color: #fff9; }
.ad-in { animation: fadeUp .5s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

/* =====================================================================
   HOST (TV) — everything scales with viewport via rem
   ===================================================================== */
/* Host sizes everything in rem; the root font scales with the screen (and host.js shrinks it further if a screen would overflow). */
html.host-root { font-size: 1.5vmin; }
.host #app { position: fixed; inset: 0 0 var(--adh) 0; z-index: 1; display: grid; grid-template-rows: auto 1fr; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 2.2rem .4rem; gap: 2rem; }
.logo { font-family: var(--display); font-size: 2.6rem; line-height: 1; background: linear-gradient(180deg, #fff 0%, var(--gold) 55%, var(--gold2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .2rem 0 #7a1fd1) drop-shadow(0 0 1rem #ffd23f66); }
.logo small { font-size: .35em; display: block; color: var(--muted); -webkit-text-fill-color: var(--muted); filter: none; letter-spacing: .3em; font-family: var(--body); font-weight: 800; }
.status { font-family: var(--display); font-size: 1.5rem; color: var(--muted); text-align: center; }
.status b { color: var(--gold); }
.joinmini { text-align: right; font-weight: 800; font-size: 1.3rem; color: var(--muted); display: flex; align-items: center; gap: 1rem; }
.joinmini .code { font-family: var(--display); color: #fff; font-size: 2rem; letter-spacing: .12em; background: #ffffff14; padding: .2rem .8rem; border-radius: .6rem; }
.joinmini .qrmini { width: 5.5rem; height: 5.5rem; background: #fff; padding: .3rem; border-radius: .4rem; }
#screen { position: relative; min-height: 0; padding: 1rem 2.5rem 1.2rem; display: flex; flex-direction: column; overflow: hidden; }
.hostctl { display: flex; gap: .5rem; opacity: .45; transition: opacity .2s; flex: none; }
.topbar .status { flex: 1; }
.hostctl:hover, .hostctl:focus-within { opacity: 1; }
.btn { font-family: var(--display); font-size: 1.4rem; padding: .8rem 1.6rem; border-radius: 99rem; background: #ffffff1a; border: 2px solid #ffffff33; transition: transform .1s, background .2s; }
.btn:hover, .btn:focus-visible { background: #ffffff33; transform: translateY(-2px); outline: none; }
.btn.small { font-size: 1rem; padding: .5rem 1rem; }
.btn.go { background: linear-gradient(180deg, #ffe066, var(--gold2)); color: #3a1300; border: 0; box-shadow: 0 .4rem 0 #b35a00, 0 0 2rem #ffd23f88; }
.btn.go:hover, .btn.go:focus-visible { background: linear-gradient(180deg, #fff09a, #ffb347); }
.btn.go:active { transform: translateY(.3rem); box-shadow: 0 .1rem 0 #b35a00; }
.btn.pink { background: linear-gradient(180deg, #ff6fb7, var(--pink)); border: 0; box-shadow: 0 .4rem 0 #a3105a; }
.toast { position: fixed; left: 50%; top: 1.5rem; transform: translateX(-50%); z-index: 99; background: #000c; border: 2px solid var(--gold); padding: .8rem 1.4rem; border-radius: 1rem; font-weight: 800; font-size: 1.4rem; animation: fadeUp .3s; }
.demo-banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 60; background: #ff9f1c; color: #2a1000; font-weight: 800; font-size: 12px; padding: 3px 12px; border-radius: 0 0 8px 8px; }

/* ---------- lobby ---------- */
.lobby { display: grid; grid-template-columns: minmax(0, 38rem) 1fr; gap: 2.5rem; flex: 1; min-height: 0; }
.joincard { display: flex; flex-direction: column; }
.joincard .panel { padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.joincard .howto { font-size: 1.6rem; font-weight: 800; color: var(--muted); }
.joincard .howto b { color: #fff; }
.bigcode { font-family: var(--display); font-size: 6.4rem; letter-spacing: .12em; line-height: 1; color: #fff; text-shadow: 0 .35rem 0 #7a1fd1, 0 0 2rem #ffd23f88; }
.qrbox { background: #fff; padding: .9rem; border-radius: 1rem; }
.qrbox { width: 17rem; height: 17rem; }
.lobby-right { display: flex; flex-direction: column; min-height: 0; gap: 1.2rem; }
.lobby-title { font-family: var(--display); font-size: 2.2rem; display: flex; align-items: baseline; gap: 1rem; }
.lobby-title .count { color: var(--gold); }
.players-grid { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1rem; padding: .5rem; }
.pchip { display: flex; align-items: center; gap: .7rem; padding: .5rem 1.2rem .5rem .5rem; border-radius: 99rem; background: #ffffff12; border: 2px solid var(--c, #fff3); font-weight: 900; font-size: 1.5rem; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); position: relative; }
.pchip .av { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: var(--c); box-shadow: inset 0 -.3rem 0 #0003; }
.pchip.off { opacity: .4; }
.pchip .vip { position: absolute; top: -.9rem; left: .6rem; font-size: 1.3rem; }
.pchip .kick { margin-left: .3rem; opacity: 0; font-size: 1rem; background: #0006; border-radius: 50%; width: 1.8rem; height: 1.8rem; }
.pchip:hover .kick, .pchip .kick:focus { opacity: 1; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }
.empty-note { color: var(--muted); font-size: 1.8rem; font-weight: 800; padding: 3rem 0; text-align: center; width: 100%; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.lobby-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.presets { display: flex; gap: .7rem; flex-wrap: wrap; }
.preset { padding: .6rem 1.1rem; border-radius: 1rem; background: #ffffff10; border: 2px solid transparent; text-align: left; }
.preset b { display: block; font-size: 1.3rem; }
.preset span { font-size: 1rem; color: var(--muted); font-weight: 700; }
.preset.on { border-color: var(--gold); background: #ffd23f22; }
.lobby-summary { color: var(--muted); font-weight: 700; font-size: 1.2rem; }
.spacer { flex: 1; }

/* ---------- settings modal ---------- */
.modal { position: fixed; inset: 0; z-index: 80; background: #05001099; backdrop-filter: blur(6px); display: grid; place-items: center; }
.modal .sheet { width: min(96vw, 110rem); max-height: 88vh; overflow: auto; padding: 2rem 2.4rem; }
.sheet h2 { font-family: var(--display); margin: 0 0 1rem; font-size: 2.2rem; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); gap: 1.2rem 2rem; }
.sgroup.wide { grid-column: 1 / -1; }
.sgroup { background: #ffffff0a; border-radius: 1rem; padding: 1rem 1.2rem; }
.sgroup h3 { margin: 0 0 .7rem; font-size: 1.1rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-weight: 800; font-size: 1.25rem; }
.srow .hint { display: block; font-weight: 600; font-size: .95rem; color: var(--muted); }
.seg { display: inline-flex; background: #0005; border-radius: 99rem; padding: .25rem; flex-wrap: wrap; }
.seg button { padding: .4rem .9rem; border-radius: 99rem; font-weight: 800; font-size: 1.1rem; color: var(--muted); }
.seg button.on { background: var(--gold); color: #2a1000; }
.stepper { display: inline-flex; align-items: center; gap: .6rem; }
.stepper button { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #ffffff1c; font-weight: 900; font-size: 1.4rem; }
.stepper output { min-width: 3.6rem; text-align: center; font-family: var(--display); font-size: 1.5rem; }
.toggle { width: 4rem; height: 2.2rem; border-radius: 99rem; background: #ffffff25; position: relative; transition: background .2s; flex: none; }
.toggle::after { content: ""; position: absolute; top: .25rem; left: .25rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: var(--good); }
.toggle.on::after { transform: translateX(1.8rem); }
.catchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.catchip { padding: .4rem .8rem; border-radius: 99rem; background: #ffffff10; font-weight: 800; font-size: 1.05rem; border: 2px solid transparent; }
.catchip.on { background: #26e0ff22; border-color: var(--cyan); }
.sheet .foot { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; }

/* ---------- intro / round cards ---------- */
.center-stage { flex: 1; display: grid; place-items: center; text-align: center; }
.title-card { animation: slam .7s cubic-bezier(.2, 1.4, .4, 1); }
.title-card .kicker { font-family: var(--display); font-size: 2.2rem; color: var(--cyan); letter-spacing: .2em; }
.title-card .huge { font-family: var(--display); font-size: 11rem; line-height: 1; background: linear-gradient(180deg, #fff, var(--gold) 60%, var(--gold2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .6rem 0 #7a1fd1) drop-shadow(0 0 3rem #ffd23f66); }
.title-card .catname { font-family: var(--display); font-size: 4.5rem; margin-top: 1rem; }
.title-card .caticon { font-size: 9rem; display: block; animation: bob 2s ease-in-out infinite; }
.title-card .pills { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.pill { font-family: var(--display); font-size: 1.5rem; padding: .5rem 1.4rem; border-radius: 99rem; background: #ffffff18; }
.pill.hot { background: linear-gradient(90deg, var(--pink), var(--gold2)); animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 2.5rem var(--pink); } }
@keyframes slam { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-1rem) rotate(4deg); } }
.sweep-in { animation: sweepIn .6s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes sweepIn { from { transform: translateX(-30%) skewX(10deg); opacity: 0; } }

/* ---------- question ---------- */
.qwrap { flex: 1; display: grid; grid-template-rows: auto auto auto 1fr; gap: 1.1rem; min-height: 0; }
.qhead { display: flex; align-items: center; gap: 1.2rem; }
.catpill { font-family: var(--display); font-size: 1.6rem; background: #ffffff16; padding: .5rem 1.3rem; border-radius: 99rem; }
.stars { color: var(--gold); font-size: 1.6rem; letter-spacing: .2em; }
.stars i { color: #ffffff30; font-style: normal; }
.qhead .spacer { flex: 1; }
.timer { position: relative; width: 7rem; height: 7rem; flex: none; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 9; }
.timer .track { stroke: #ffffff1c; }
.timer .ring { stroke: var(--gold); stroke-linecap: round; transition: stroke .3s; filter: drop-shadow(0 0 .5rem #ffd23f); }
.timer.low .ring { stroke: var(--bad); filter: drop-shadow(0 0 .6rem var(--bad)); }
.timer .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 3.2rem; }
.timer.low .num { color: var(--bad); animation: throb .5s infinite alternate; }
@keyframes throb { to { transform: scale(1.12); } }
.qcard .panel { padding: 1.8rem 2.6rem; min-height: 11rem; display: grid; place-items: center; text-align: center; }
.qtext { font-size: 3.6rem; font-weight: 900; line-height: 1.18; text-wrap: balance; text-shadow: 0 .2rem 0 #0006; }
.qtext.long { font-size: 2.9rem; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-content: start; }
.choice { position: relative; display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.6rem; border-radius: 1.2rem; background: var(--cc); font-size: 2.3rem; font-weight: 900; box-shadow: inset 0 -.5rem 0 #0003, 0 .5rem 1.4rem #0005; animation: dealIn .45s cubic-bezier(.2, 1.3, .4, 1) both; overflow: hidden; min-height: 5.8rem; }
.choice:nth-child(2) { animation-delay: .08s; } .choice:nth-child(3) { animation-delay: .16s; } .choice:nth-child(4) { animation-delay: .24s; }
@keyframes dealIn { from { transform: translateY(2rem) scale(.9); opacity: 0; } }
.choice .shape { width: 3.6rem; height: 3.6rem; flex: none; display: grid; place-items: center; font-size: 2rem; background: #0000002e; border-radius: .7rem; }
.choice .txt { flex: 1; line-height: 1.15; }
.choice .cnt { font-family: var(--display); font-size: 2rem; background: #0004; border-radius: 99rem; padding: .1rem 1rem; }
.choice .bar { position: absolute; left: 0; bottom: 0; height: .5rem; background: #fff9; transition: width 1s ease; }
.choice .who { display: flex; margin-left: .5rem; }
.choice .who span { font-size: 1.6rem; margin-left: -.5rem; background: var(--c); border-radius: 50%; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; box-shadow: 0 0 0 2px #0005; }
.choices.revealed .choice.wrong { filter: grayscale(.85) brightness(.45); transform: scale(.97); transition: all .5s; }
.choices.revealed .choice.right { animation: winner .9s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 0 0 .4rem #fff, 0 0 3rem #fff8, 0 0 5rem var(--cc); z-index: 2; }
.choices.revealed .choice.right::after { content: "✔"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 3rem; }
@keyframes winner { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1.03); } }
.answered { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-height: 3.4rem; }
.answered .lbl { font-weight: 900; font-size: 1.5rem; color: var(--muted); margin-right: .6rem; }
.answered .lbl b { color: #fff; }
.mini { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; background: var(--c); opacity: .25; filter: grayscale(1); transition: all .3s; }
.mini.in { opacity: 1; filter: none; animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); box-shadow: 0 0 0 .2rem #fff; }
.fact { margin-top: .6rem; font-size: 1.55rem; font-weight: 800; background: #00000055; border-left: .5rem solid var(--cyan); padding: .8rem 1.2rem; border-radius: .6rem; animation: fadeUp .6s .6s both; }
.fact b { color: var(--cyan); }
.nextcue { font-family: var(--display); font-size: 1.3rem; color: var(--gold); animation: pulse 1.4s infinite; }
.xp { display: flex; gap: .8rem; flex-wrap: wrap; }
.xp .gain { display: flex; align-items: center; gap: .4rem; font-weight: 900; font-size: 1.4rem; background: #ffffff12; padding: .2rem .8rem .2rem .2rem; border-radius: 99rem; animation: pop .4s both; }
.xp .gain .mini { opacity: 1; filter: none; width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
.xp .gain.pos b { color: var(--good); } .xp .gain.neg b { color: var(--bad); }

/* ---------- scoreboard ---------- */
.board { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; min-height: 0; }
.board h2 { font-family: var(--display); font-size: 3.2rem; margin: 0 0 .5rem; color: var(--gold); text-shadow: 0 .3rem 0 #7a1fd1; }
.rows { width: min(100%, 90rem); display: flex; flex-direction: column; gap: .7rem; }
.row { display: grid; grid-template-columns: 4.5rem 3.6rem 1fr auto; align-items: center; gap: 1rem; padding: .5rem 1.2rem .5rem .6rem; border-radius: 1rem; background: #ffffff10; position: relative; overflow: hidden; animation: sweepIn .5s both; }
.row .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--c), transparent); opacity: .35; transition: width 1.4s cubic-bezier(.2, .8, .3, 1); }
.row > * { position: relative; }
.row .rk { font-family: var(--display); font-size: 2.2rem; text-align: center; }
.row .av { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem; background: var(--c); }
.row .nm { font-weight: 900; font-size: 1.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sc { font-family: var(--display); font-size: 2.2rem; }
.row .dl { font-size: 1.2rem; font-weight: 900; color: var(--good); margin-right: .6rem; }
.row.first { background: linear-gradient(90deg, #ffd23f33, #ffffff10); box-shadow: 0 0 0 2px var(--gold); }
.row .streak { font-size: 1.2rem; margin-left: .6rem; }

/* ---------- category vote ---------- */
.catvote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; width: min(100%, 110rem); }
.catcard { border-radius: 1.6rem; padding: 2.5rem 1.5rem; background: linear-gradient(180deg, #ffffff18, #ffffff08); text-align: center; border: 3px solid #ffffff22; animation: dealIn .5s both; position: relative; }
.catcard .ic { font-size: 7rem; }
.catcard .nm { font-family: var(--display); font-size: 2.4rem; margin-top: .6rem; }
.catcard .votes { font-family: var(--display); font-size: 1.6rem; color: var(--gold); margin-top: .6rem; min-height: 2rem; }
.catcard.win { border-color: var(--gold); box-shadow: 0 0 3rem #ffd23f99; transform: scale(1.06); transition: all .4s; }
.catcard.lose { opacity: .3; transition: opacity .4s; }
.bigprompt { font-family: var(--display); font-size: 3rem; margin-bottom: 2rem; text-align: center; }
.bigprompt small { display: block; font-family: var(--body); font-weight: 800; font-size: 1.6rem; color: var(--muted); }

/* ---------- bluff ---------- */
.bluffq .qtext .blank { display: inline-block; min-width: 6em; border-bottom: .3rem solid var(--gold); color: var(--gold); }
.lies { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1.2rem; align-content: start; }
.lie { position: relative; border-radius: 1.2rem; padding: 1rem 1.4rem; background: #ffffff14; border: 3px solid #ffffff22; font-size: 2.1rem; font-weight: 900; text-align: center; animation: dealIn .45s both; min-height: 5rem; display: grid; place-items: center; }
.lie.focus { border-color: var(--gold); background: #ffd23f22; transform: scale(1.05); transition: all .3s; box-shadow: 0 0 3rem #ffd23f66; z-index: 2; }
.lie.done { opacity: .45; }
.lie .stamp { position: absolute; top: -1rem; right: -1rem; font-family: var(--display); font-size: 1.6rem; padding: .3rem 1rem; border-radius: .5rem; transform: rotate(8deg); animation: stamp .35s cubic-bezier(.2, 1.8, .4, 1) both; }
.lie .stamp.bad { background: var(--bad); } .lie .stamp.good { background: var(--good); color: #032; }
@keyframes stamp { from { transform: rotate(8deg) scale(3); opacity: 0; } }
.lie .by { font-size: 1.3rem; color: var(--muted); margin-top: .4rem; font-weight: 800; }
.lie .pk { display: flex; justify-content: center; gap: .3rem; margin-top: .5rem; flex-wrap: wrap; }
.lie .pk .mini { opacity: 1; filter: none; width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
.lie.truth.focus { border-color: var(--good); background: #2ee66b2a; box-shadow: 0 0 3rem #2ee66b88; }

/* ---------- tiebreak ---------- */
.tied { display: flex; gap: 1.5rem; justify-content: center; margin: 1rem 0 2rem; flex-wrap: wrap; }
.tied .pchip { font-size: 2rem; }
.guesses { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1rem; width: min(100%, 110rem); margin: 1rem auto 0; }
.guess { display: flex; align-items: center; gap: .8rem; font-size: 1.7rem; font-weight: 900; background: #ffffff10; border-radius: 1rem; padding: .5rem 1rem; }
.guess.win { box-shadow: 0 0 0 3px var(--gold); background: #ffd23f22; }
.guess .v { margin-left: auto; font-family: var(--display); }
.answerbig { font-family: var(--display); font-size: 3.6rem; color: var(--good); animation: slam .6s both; }

/* ---------- final / podium ---------- */
.final { flex: 1; display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; gap: 1rem; min-height: 0; }
.final h1 { font-family: var(--display); font-size: 5rem; margin: 0; background: linear-gradient(180deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .4rem 0 #7a1fd1); animation: slam .8s both; }
.podium { display: flex; align-items: flex-end; gap: 1.6rem; height: 100%; max-height: 42rem; }
.pod { width: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pod .who { text-align: center; animation: pop .6s both; }
.pod .who .av { width: 7rem; height: 7rem; font-size: 4.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--c); margin: 0 auto .5rem; box-shadow: 0 0 0 .35rem #fff; }
.pod .who .nm { font-weight: 900; font-size: 2rem; }
.pod .who .sc { font-family: var(--display); font-size: 1.8rem; color: var(--gold); }
.pod .block { transform-origin: bottom; width: 100%; margin-top: .8rem; border-radius: 1rem 1rem 0 0; display: grid; place-items: start center; padding-top: 1rem; font-family: var(--display); font-size: 4rem; color: #0006; animation: rise 1s cubic-bezier(.2, 1, .3, 1) both; }
.pod.p1 .block { height: 22rem; background: linear-gradient(180deg, #ffe066, #ff9f1c); animation-delay: 1.2s; }
.pod.p2 .block { height: 15rem; background: linear-gradient(180deg, #e9ecef, #adb5bd); animation-delay: .6s; }
.pod.p3 .block { height: 10rem; background: linear-gradient(180deg, #f4a261, #b5651d); }
.pod.p1 .who { animation-delay: 1.9s; } .pod.p2 .who { animation-delay: 1.3s; } .pod.p3 .who { animation-delay: .7s; }
.pod .crown { font-size: 4rem; display: block; animation: bob 1.6s infinite; }
@keyframes rise { from { transform: scaleY(0); } }
.final .note { font-family: var(--display); color: var(--cyan); font-size: 1.6rem; }
.final .actions { display: flex; gap: 1rem; margin-bottom: .5rem; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i { position: absolute; top: -5vh; border-radius: 2px; animation-name: fall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes fall { to { top: 110vh; transform: translateX(10vw) rotate(900deg); } }
.paused { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; background: #0008; backdrop-filter: blur(4px); font-family: var(--display); font-size: 7rem; }

/* =====================================================================
   PLAYER (phone controller)
   ===================================================================== */
body.player { font-size: 16px; overflow: auto; }
.player #app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; padding: 14px 16px calc(80px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.ptop { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ptop .logo { font-size: 24px; }
.ptop .me { margin-left: auto; display: flex; align-items: center; gap: 8px; font-weight: 900; }
.ptop .me .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c); font-size: 20px; }
.ptop .me .sc { font-family: var(--display); color: var(--gold); }
.pmain { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 10px 0; }
.pcard { background: #ffffff10; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.plabel { font-weight: 800; color: var(--muted); font-size: 14px; margin-bottom: 6px; display: block; }
.pinput { width: 100%; font-size: 22px; font-weight: 900; padding: 14px 16px; border-radius: 14px; border: 2px solid #ffffff33; background: #0006; color: #fff; outline: none; }
.pinput:focus { border-color: var(--gold); }
.pinput.code { font-family: var(--display); letter-spacing: .25em; text-transform: uppercase; text-align: center; font-size: 30px; }
.avgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.avgrid button { aspect-ratio: 1; font-size: 24px; border-radius: 12px; background: #ffffff10; }
.avgrid button.on { background: var(--gold); box-shadow: 0 0 0 2px #fff; }
.pbtn { width: 100%; padding: 18px; border-radius: 16px; font-family: var(--display); font-size: 22px; background: linear-gradient(180deg, #ffe066, var(--gold2)); color: #3a1300; box-shadow: 0 5px 0 #b35a00; }
/* scroll-down hint */
.scrollhint { position: fixed; left: 50%; bottom: 84px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 99px; font-family: var(--display); font-size: clamp(15px, 2.2vmin, 26px);
  color: #2a1000; background: linear-gradient(180deg, #ffe066, var(--gold2)); box-shadow: 0 6px 0 #b35a00, 0 0 30px #ffd23faa; transition: opacity .3s, transform .3s; white-space: nowrap; }
.scrollhint.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); animation: hintbob 1.2s ease-in-out infinite; }
.scrollhint .arr { display: inline-block; animation: hintarrow 1.2s ease-in-out infinite; }
.scrollhint.inside { position: absolute; bottom: 16px; }
@keyframes hintbob { 50% { transform: translate(-50%, -6px); } }
@keyframes hintarrow { 50% { transform: translateY(5px); } }
.pbtn:focus-visible, .btn:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.pbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #b35a00; }
.pbtn:disabled { opacity: .5; }
.pbtn.alt { background: #ffffff1c; color: #fff; box-shadow: 0 5px 0 #0006; }
.pmsg { text-align: center; }
.pmsg .big { font-family: var(--display); font-size: 30px; line-height: 1.1; }
.pmsg .sub { color: var(--muted); font-weight: 800; margin-top: 8px; }
.pmsg .emoji { font-size: 64px; display: block; margin-bottom: 8px; }
.perr { color: #ff8a95; font-weight: 800; text-align: center; min-height: 1.2em; }
.pq { font-weight: 900; font-size: 19px; line-height: 1.25; text-align: center; }
.pbar { height: 8px; border-radius: 9px; background: #ffffff1c; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--gold); width: 100%; transition: width .2s linear; }
.pbar.low i { background: var(--bad); }
.pchoices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; max-height: 460px; }
.pchoices.text { grid-template-columns: 1fr; }
.pchoice { border-radius: 16px; background: var(--cc); display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 900; font-size: 18px; text-align: left; box-shadow: inset 0 -5px 0 #0003; min-height: 64px; }
.pchoices:not(.text) .pchoice { flex-direction: column; justify-content: center; font-size: 40px; }
.pchoice .shape { font-size: 22px; width: 36px; height: 36px; display: grid; place-items: center; background: #0003; border-radius: 9px; flex: none; }
.pchoices:not(.text) .pchoice .shape { font-size: 44px; width: auto; height: auto; background: none; }
.pchoice:active { transform: scale(.97); }
.pchoice.dim { opacity: .3; }
.pchoice.soft { opacity: .55; }
.pchoice:disabled.sel { opacity: 1; }
.pchoice.sel { box-shadow: 0 0 0 4px #fff, inset 0 -5px 0 #0003; }
.result { border-radius: 20px; padding: 26px 18px; text-align: center; }
.result.good { background: linear-gradient(180deg, #2ee66b, #14a44a); }
.result.bad { background: linear-gradient(180deg, #ff5b6b, #c3182c); }
.result.meh { background: #ffffff18; }
.result .big { font-family: var(--display); font-size: 34px; }
.result .pts { font-family: var(--display); font-size: 28px; margin-top: 6px; }
.result .sub { font-weight: 800; margin-top: 8px; opacity: .9; }
.plist { display: flex; flex-direction: column; gap: 10px; }
.plist button { padding: 16px; border-radius: 14px; background: #ffffff14; border: 2px solid #ffffff2a; font-weight: 900; font-size: 19px; }
.plist button.sel { border-color: var(--gold); background: #ffd23f33; }
.plist button:disabled { opacity: .35; }
.vipbox { border: 2px dashed var(--gold); border-radius: 16px; padding: 14px; text-align: center; }
.vipbox .t { font-weight: 900; color: var(--gold); margin-bottom: 10px; }
.prow { display: flex; gap: 10px; }
.rankbig { font-family: var(--display); font-size: 64px; line-height: 1; color: var(--gold); }
.plink { color: var(--muted); font-weight: 800; text-align: center; font-size: 14px; }
.plink a { color: var(--cyan); }

/* ---------- landing ---------- */
body.home { overflow: auto; }
.home #app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 90px; gap: 28px; text-align: center; }
.home .logo { font-size: clamp(54px, 12vw, 120px); }
.home .tag { font-size: clamp(16px, 2.4vw, 22px); font-weight: 800; color: var(--muted); max-width: 640px; }
.home .choices2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; width: min(100%, 760px); }
.home .opt { border-radius: 22px; padding: 22px; background: #ffffff10; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.home .opt h2 { font-family: var(--display); margin: 0; font-size: 24px; }
.home .opt p { margin: 0; color: var(--muted); font-weight: 700; }
.home .feat { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 760px; }
.home .feat span { background: #ffffff10; border-radius: 99px; padding: 6px 12px; font-weight: 800; font-size: 14px; }

@media (max-width: 380px) { .avgrid { grid-template-columns: repeat(6, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ---------- info pages (about / privacy / terms / contact) ---------- */
body.doc { overflow: auto; }
.doc #app { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 24px 16px 110px; }
.doc header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.doc header a { text-decoration: none; }
.doc header .logo { font-size: 34px; }
.doc article { background: #140633cc; border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px; line-height: 1.65; font-size: 17px; }
.doc h1 { font-family: var(--display); font-size: clamp(26px, 5vw, 38px); margin: 0 0 6px; color: var(--gold); }
.doc h2 { font-size: 20px; margin: 26px 0 6px; color: var(--cyan); }
.doc p, .doc li { color: #e9e2ff; }
.doc a { color: var(--cyan); }
.doc .updated { color: var(--muted); font-weight: 700; font-size: 14px; margin-bottom: 18px; }
.doc .mailbox { display: inline-block; margin: 8px 0; font-family: var(--display); font-size: clamp(16px, 4vw, 22px); background: #ffffff12; padding: 12px 18px; border-radius: 14px; text-decoration: none; word-break: break-all; }
.sitefoot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 22px; font-weight: 800; font-size: 14px; }
.sitefoot a { color: var(--muted); text-decoration: none; }
.sitefoot a:hover { color: #fff; text-decoration: underline; }

/* Short, wide screens (TV browsers): tighten the home page so the buttons fit */
@media (orientation: landscape) and (max-height: 820px) {
  .home #app { gap: 14px; padding-top: 14px; justify-content: flex-start; }
  .home #app img { width: 64px; height: 64px; margin-bottom: 2px !important; }
  .home .logo { font-size: clamp(40px, 9vh, 80px); }
  .home .logo small { font-size: .26em; }
  .home .tag { font-size: clamp(14px, 2.6vh, 20px); margin: 0; }
  .home .opt { padding: 16px 20px; gap: 8px; }
  .home .opt h2 { font-size: 20px; }
}

/* ---------- guide pages & home info ---------- */
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 6px; font-size: 15.5px; }
.doc th, .doc td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #ffffff1f; vertical-align: top; }
.doc th { color: var(--gold); font-weight: 900; background: #ffffff0a; }
.doc td:first-child { font-weight: 800; color: #fff; white-space: nowrap; }
.doc .toc { background: #ffffff0c; border-radius: 12px; padding: 10px 14px; font-size: 15px; line-height: 1.9; margin: 14px 0; }
.doc .toc a { color: var(--cyan); text-decoration: none; }
.doc h2[id] { scroll-margin-top: 16px; }
.doc ol li, .doc ul li { margin: 4px 0; }
.doc .checklist { list-style: none; padding-left: 4px; }
.cta-box { margin-top: 26px; padding: 18px; border: 2px solid var(--gold); border-radius: 16px; background: #ffd23f14; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-box b { flex: 1 1 100%; font-size: 18px; }
.pbtn.inline { width: auto; display: inline-block; padding: 12px 18px; font-size: 16px; text-decoration: none; color: #3a1300 !important; }
.pbtn.inline.alt { color: #fff !important; }
.homeinfo { width: min(100%, 860px); text-align: left; background: #140633b3; border: 1px solid var(--line); border-radius: 22px; padding: 22px 24px; }
.homeinfo h2 { font-family: var(--display); font-size: 24px; margin: 0 0 12px; color: var(--gold); text-align: center; }
.homeinfo p { color: #e3d8ff; font-weight: 700; line-height: 1.55; margin: 8px 0 0; }
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.steps3 > div { background: #ffffff0c; border-radius: 14px; padding: 12px 14px; }
.steps3 b { color: #fff; font-size: 17px; }
.steps3 p { margin: 4px 0 0; font-size: 14.5px; }
.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.guides a { display: block; text-decoration: none; background: #ffffff12; border: 1px solid #ffffff2a; border-radius: 14px; padding: 12px 14px; color: #fff; }
.guides a:hover, .guides a:focus-visible { border-color: var(--gold); background: #ffd23f1a; }
.guides b { display: block; font-size: 17px; }
.guides span { color: var(--muted); font-weight: 700; font-size: 14px; }