/* The delegate's phone. One column on paper, answers where the thumb is. */

.phone { min-height: 100dvh; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; background: var(--paper); }
/* On a laptop (the host's "Try on this laptop") the column stands on darker paper as a phone would */
@media (min-width: 720px) {
  body { background: #e9e3d8; }
  .phone { min-height: calc(100dvh - 48px); margin: 24px auto; border-radius: 28px; outline: 1px solid var(--line-2); overflow: hidden; }
}

/* ---- Start and end screens open with the band ---- */
.top { padding: 18px 22px calc(var(--cut) + 20px); }
.top .logo { height: 20px; margin-bottom: 20px; }
.top .topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.top .topline .logo { margin: 0; }
.top .topline span { font-size: 13px; font-weight: 600; opacity: .9; }
.top h1 { font-size: 30px; font-weight: 900; letter-spacing: -0.02em; }
.top .kicker { font-family: var(--display); font-weight: 800; font-size: 15px; opacity: .9; margin-bottom: 4px; }
.top p { margin-top: 8px; font-size: 15px; line-height: 1.4; opacity: .92; }
.sheet { flex: 1; padding: 24px 22px 28px; display: flex; flex-direction: column; gap: 18px; }
.sheet .form { display: grid; gap: 14px; }
.sheet .foot { margin-top: auto; display: grid; gap: 10px; padding-top: 10px; }
.sheet.is-centre { justify-content: center; }
.sheet.is-centre .rule { font-size: 19px; line-height: 1.45; color: var(--ink-2); }
.sheet .next-rule { color: var(--ink-2); font-size: 15px; }
.sheet .next-rule b { color: var(--ink); }
.note { padding: 12px 14px; border-radius: var(--r-control); background: var(--warn-soft); color: #5a4300; font-size: 14px; font-weight: 600; }

/* ---- Rounds list on the game intro: a family chip, the name, what you do, the points ---- */
.rounds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rounds li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border: 2px solid var(--line); border-radius: var(--r-tile); background: var(--card); }
.rounds .chip { width: 44px; height: 44px; border-radius: 11px; } .rounds .chip svg { width: 24px; height: 24px; }
.rounds .n { display: none; }
.rounds b { display: block; font-weight: 700; font-size: 15px; line-height: 1.2; }
.rounds small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.3; margin-top: 2px; }
.rounds .pts { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.rounds .pts small { display: block; font: 400 11px/1 var(--body); color: var(--ink-3); margin-top: 3px; }
/* Joker: the rows are pressable cards; the chosen one carries the blue edge */
.rounds.pick li { cursor: pointer; box-shadow: 0 var(--edge) 0 var(--line-2); margin-bottom: var(--edge); transition: transform .08s, box-shadow .08s; }
.rounds.pick li:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--line-2); }
.rounds.pick li[aria-pressed='true'] { border-color: var(--blue); box-shadow: 0 var(--edge) 0 var(--blue); }
.rounds.pick li[aria-pressed='true'] .pts { color: var(--blue); }
.sheet .lead { font-size: 15px; color: var(--ink-2); }

/* ---- The round intro ---- */
.intro-head { display: grid; gap: 14px; justify-items: start; }
.intro-head .count { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.intro-head h2 { font-size: 34px; font-weight: 900; letter-spacing: -0.02em; }
.intro-head .chip.lg { width: 64px; height: 64px; border-radius: 16px; } .intro-head .chip.lg svg { width: 34px; height: 34px; }
.rules { display: grid; gap: 10px; }
.rules .line { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--r-control); background: var(--card); border: 2px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.rules .line b { color: var(--ink); font-weight: 700; }
.rules .line .chip { width: 30px; height: 30px; border-radius: 8px; } .rules .line .chip svg { width: 14px; height: 14px; }
.rules .line.evil { border-color: var(--red-text); }
.rules .line.evil .chip { background: var(--red-text); }
.rules .line.speed .chip { background: var(--blue); }

/* ---- In play: the band in the round's family colour, the red cut, the question, the ring ---- */
.play { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; }
.play .band { padding: 14px 22px calc(var(--cut) + 16px); }
.playbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.playbar .rchip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; font-size: 15px; }
.playbar .rchip b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playbar .rchip .chip { width: 28px; height: 28px; border-radius: 7px; background: rgba(255, 255, 255, .18); } .playbar .rchip .chip svg { width: 16px; height: 16px; }
.playbar .score { font: 900 24px/1 var(--display); display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.playbar .score small { font: 600 13px/1 var(--body); }
.playbar .tag { margin-left: 2px; }
.play .band .steps { margin-top: 14px; }
.body { position: relative; flex: 1; display: flex; flex-direction: column; }
.qhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 0 22px; min-height: 52px; }
.qhead .qnum { font-size: 13px; font-weight: 600; color: var(--ink-3); padding-bottom: 2px; }
.qhead .timer { margin-top: -22px; }
.stage { display: flex; flex-direction: column; gap: 14px; padding: 8px 22px 16px; }
.prompt { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.22; letter-spacing: -0.01em; text-wrap: pretty; }
.prompt.long { font-size: 20px; }
.prompt.small { font-size: 18px; line-height: 1.3; }
.hint { color: var(--ink-3); font-size: 14px; }
.hint.center { text-align: center; }
.small-note { font-size: 13px; }
.answers { padding: 4px 22px 20px; display: grid; gap: 10px; }
.answers.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.answers .pass { grid-column: 1 / -1; }
.answers.two .opt:not(.pass-btn) { flex-direction: column; justify-content: center; gap: 10px; text-align: center; font-family: var(--display); font-weight: 900; font-size: 26px; min-height: 108px; letter-spacing: -0.01em; }
.opt .pts-tag { margin-left: auto; font-family: var(--display); font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.opt .txt { min-width: 0; }
.opt .txt small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.ruleline { margin-top: auto; padding: 10px 22px 18px; text-align: center; font-size: 13px; color: var(--ink-3); }
.play.is-feedback > .band, .play.is-feedback > .band-edge, .play.is-feedback .qhead, .play.is-feedback .ruleline { display: none; }
.is-revealed .stage, .is-revealed .answers { display: none; }
.is-revealed [data-fb] { flex: 1; display: flex; flex-direction: column; }

/* ---- Feedback after an answer: a block that drops in, green for right and red for wrong ---- */
.feedback { display: flex; flex-direction: column; flex: 1; }
.feedback .flood { background: var(--ink-2); color: var(--white); padding: 20px 22px calc(var(--cut) + 18px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.feedback.is-right .flood { background: var(--ok); }
.feedback.is-wrong .flood { background: var(--red-text); }
.feedback.is-close .flood { background: var(--blue); }
.feedback .verdict { display: flex; align-items: center; gap: 14px; }
.feedback .verdict .tick { width: 50px; height: 50px; border-radius: 50%; background: var(--white); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.feedback.is-right .verdict .tick { color: var(--ok); }
.feedback.is-wrong .verdict .tick { color: var(--red-text); }
.feedback.is-close .verdict .tick { color: var(--blue); }
.feedback .verdict .tick svg { width: 28px; height: 28px; }
.feedback .verdict b { font: 900 34px/1 var(--display); letter-spacing: -0.02em; min-width: 0; }
.feedback .verdict b.long { font-size: 22px; line-height: 1.1; }
.feedback .pts { margin-left: auto; font: 900 52px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feedback .ans { margin-top: 16px; display: flex; align-items: center; gap: 12px; background: var(--card); color: var(--ink); border-radius: 12px; padding: 10px 12px; font: 600 16px/1.25 var(--body); box-shadow: 0 4px 0 #2f333c; }
.feedback.is-right .ans { box-shadow: 0 4px 0 var(--ok-deep); }
.feedback.is-wrong .ans { box-shadow: 0 4px 0 #8f1620; }
.feedback.is-close .ans { box-shadow: 0 4px 0 var(--blue-deep); }
.feedback .ans + .ans { margin-top: 10px; }
.feedback .ans .chip { width: 32px; height: 32px; border-radius: 8px; } .feedback .ans .chip svg { width: 15px; height: 15px; }
.feedback .ans .verdict-mark { margin-left: auto; width: 22px; height: 22px; flex: none; }
.feedback .ans.yes .verdict-mark { color: var(--ok); }
.feedback .ans.no .verdict-mark { color: var(--red-text); }
.feedback .fbody { padding: 18px 22px 0; display: grid; gap: 10px; align-content: start; }
.feedback .recap { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.feedback .why { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.feedback .why b { color: var(--ink); font-weight: 600; }
.feedback .took { font-size: 13.5px; color: var(--ink-3); }
.feedback .took b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.feedback .duel { font-size: 14px; color: var(--ink-2); }
.feedback .fb-foot { margin-top: auto; padding: 18px 22px 20px; display: grid; gap: 14px; }
.minisc { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.minisc b { font: 800 16px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px; }
.minisc .steps { width: 150px; }
/* Before any screen is restyled, feedback drawn under a screen's own content keeps the same block */
[data-fb] .feedback { margin-top: 8px; }
[data-fb] .feedback .flood { --cut: 14px; }

/* How the room answered: a chip, the option, a bar in its colour, the share */
.roomsplit { display: grid; gap: 10px; margin-top: 8px; }
.roomsplit .roomh { display: flex; justify-content: space-between; align-items: baseline; }
.roomsplit .roomh h3 { font-size: 16px; }
.roomsplit .roomh span { font-size: 13px; color: var(--ink-3); }
.roomsplit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.roomsplit li { display: grid; grid-template-columns: 30px minmax(70px, 118px) minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.roomsplit li .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roomsplit li .pc { text-align: right; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.roomsplit li.is-key .pc { color: var(--ok); }

/* ---- Round result ---- */
.result { display: grid; gap: 8px; }
.result .count { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.result h2 { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
.result .who { display: flex; align-items: center; gap: 12px; }
.big { font-family: var(--display); font-weight: 900; font-size: 84px; line-height: .95; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.big small { font-size: 24px; color: var(--ink-3); font-weight: 800; letter-spacing: -0.01em; }
.ticks { display: flex; gap: 6px; flex-wrap: wrap; }
.ticks span { min-width: 48px; height: 44px; padding: 0 8px; display: grid; place-items: center; border-radius: 10px; background: var(--well); color: var(--ink-2); font-family: var(--display); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ticks .r { background: var(--ok); color: var(--white); }
.ticks .w { background: var(--red-text); color: var(--white); }
.rank { font-size: 16px; }
.rank b { font-family: var(--display); font-weight: 900; color: var(--blue); }

/* ---- Final: the band, the score card over its edge, the rank badge with the red slash, the rounds ---- */
.top.fin { padding-bottom: calc(var(--cut) + 56px); }
.scard { position: relative; margin: -62px 22px 0; background: var(--card); border-radius: var(--r-sheet); border: 2px solid var(--line); box-shadow: 0 6px 0 var(--line-2); padding: 18px 20px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.scard .big { font-size: 72px; line-height: .9; }
.scard .of { font-size: 14px; line-height: 1.3; color: var(--ink-3); align-self: end; padding-bottom: 4px; }
.scard .of b { display: block; color: var(--ink); font-weight: 700; font-size: 15px; }
.scard .badge { grid-column: 2; grid-row: 1 / 3; width: 104px; height: 104px; position: relative; display: grid; place-items: center; color: var(--white); }
.scard .badge svg { position: absolute; inset: 0; width: 104px; height: 104px; }
.scard .badge .r { position: relative; top: -6px; text-align: center; font: 900 30px/1 var(--display); }
.scard .badge .r sup { font-size: 14px; vertical-align: top; margin-left: 1px; }
.scard .badge .r small { display: block; font: 600 13px/1 var(--body); margin-top: 4px; }
.scard .rank { grid-column: 1 / -1; margin-top: 4px; padding-top: 12px; border-top: 1.5px solid var(--line); font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.scard .rank b { font-family: var(--body); font-weight: 600; color: var(--ink); }
.breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.breakdown li { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(56px, auto); gap: 12px; align-items: center; }
.breakdown .chip { width: 36px; height: 36px; } .breakdown .chip svg { width: 19px; height: 19px; }
.breakdown .nm { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.breakdown .nm span { color: var(--ink-3); font-weight: 400; white-space: nowrap; }
.breakdown .pt { text-align: right; font: 800 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.breakdown .pt small { font: 600 13px/1 var(--body); color: var(--ink-3); margin-left: 1px; }
.breakdown li.best .pt { color: var(--ok); }
.breakdown li.sum { grid-template-columns: minmax(0, 1fr) 56px; padding-top: 8px; border-top: 1.5px solid var(--line); font-size: 14px; color: var(--ink-2); }

/* ---- Wager, second chance, session ---- */
.readout { font-family: var(--display); font-weight: 900; font-size: 44px; color: var(--blue); font-variant-numeric: tabular-nums; text-align: center; }
.limit-readout { font-size: 28px; }
div.second { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-tile); background: var(--card); border: 2px solid var(--line); }
div.second p { font-size: 14px; color: var(--ink-2); }
div.second p b { color: var(--ink); }
.lobby .big { font-size: 96px; }
.err { color: var(--red-text); font-size: 14px; min-height: 1em; }
/* The wager slider sits outside a family colour, so it takes the structure blue */
[data-wager] .slider input[type='range'] { width: 100%; height: 44px; accent-color: var(--blue); }

/* ---- Motion pieces (phone motion spec, 5 Oct) ---- */
/* The streak: three squares and a line, in the flood. No bonus, no flame. */
.streak { margin-top: 12px; display: flex; align-items: center; gap: 6px; font: 600 14px/1 var(--body); }
.streak i { width: 10px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.streak i.on { background: var(--white); }
.streak span { margin-left: 6px; }
/* A quiet marker on the band while the streak lasts */
.playbar .stk { display: inline-flex; gap: 4px; margin-right: 10px; align-self: center; }
.playbar .stk i { width: 7px; height: 7px; border-radius: 2px; background: var(--white); }
/* The score change: the TV's +N chip, beside the number it changes. It does not travel. */
.minisc .msc { position: relative; display: inline-flex; align-items: baseline; }
.minisc .pchip, .playbar .pchip { position: absolute; left: calc(100% + 8px); top: 50%; margin-top: -11px; font: 800 13px/1 var(--display); background: var(--blue); color: var(--white); padding: 5px 7px; border-radius: 6px; opacity: 0; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.playbar .score { position: relative; }
.playbar .pchip { left: auto; right: calc(100% + 8px); background: var(--white); color: var(--ink); }
/* Next never leaves the screen on a short phone: it sticks to the bottom edge */
.feedback .fb-foot { position: sticky; bottom: 0; z-index: 3; background: var(--paper); }
/* Your option named in the split, and one line on where you sit */
.roomsplit .you { font: 700 12px/1 var(--body); color: var(--blue); margin-left: 6px; }
.roomsplit .with { font-size: 14px; color: var(--ink-2); }
.roomsplit .with b { color: var(--ink); }
.ticks .blank { color: transparent; background: var(--well); }
/* Round title card: the round's colour and pictogram take the screen, cut on the slant */
.tcw { position: fixed; inset: 0; z-index: 4; pointer-events: none; max-width: 520px; margin: 0 auto; }
.tcard { position: absolute; left: 0; right: 0; top: 0; height: 80%; background: var(--accent, var(--blue)); color: var(--white); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%); display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 0 26px 84px; pointer-events: auto; cursor: pointer; }
.tcw .tc-edge { position: absolute; left: 0; right: 0; top: calc(80% - 46px); height: 50px; background: var(--red); clip-path: polygon(0 46px, 100% 0, 100% 4px, 0 50px); }
.tcard .tc-count { font: 600 15px/1 var(--body); opacity: .88; }
.tcard .tc-chip { width: 92px; height: 92px; border-radius: 22px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.tcard .tc-chip svg { width: 52px; height: 52px; }
.tcard h2 { font-size: 46px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.tcard .steps { width: 190px; margin-top: 6px; }
.sheet.tc-wait { visibility: hidden; }
/* Your place today: five rows round you, live */
.place { position: relative; margin: 16px 22px 0; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-sheet); box-shadow: 0 5px 0 var(--line-2); padding: 14px 14px 12px; }
.place .plh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.place .plh h3 { font-size: 17px; font-weight: 800; }
.place .plh .tag { font-size: 12px; padding: 5px 9px 5px 12px; }
.place .win { position: relative; height: 224px; overflow: hidden; }
.prow { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 0 12px 0 6px; border-radius: 10px; }
.prow .rk { text-align: center; font: 800 16px/40px var(--display); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.prow .nm { font: 600 15px/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .nm small { font: 700 12px/1 var(--body); color: var(--blue); margin-left: 8px; }
.prow .sc { font: 800 16px/1 var(--display); font-variant-numeric: tabular-nums; }
.prow.me { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); }
.prow.me .rk { color: var(--blue); }
.prow::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 2px; background: var(--red); opacity: 0; transition: opacity .6s var(--ease-out); }
.prow.now::before { opacity: 1; }
.place.is-out .win { display: none; }
.place.is-out .plh { margin-bottom: 8px; }
.place.is-out .pline { margin-top: 0; padding-top: 0; border-top: 0; font-size: 15px; }
.place .pline { margin-top: 10px; padding-top: 10px; border-top: 1.5px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--ink-2); min-height: 1.4em; }
.place .pline b { color: var(--ink); font-weight: 600; }
.place .pline .rl { display: grid; }
.place .paused { margin-top: 8px; font-size: 13px; color: var(--ink-3); background: none; border: 0; padding: 0; text-align: left; text-decoration: underline; }
/* On the big screen now: the band itself drops in and names the moment, with the TV's own strip inside */
.bigw { position: fixed; left: 0; right: 0; top: 0; z-index: 6; max-width: 520px; margin: 0 auto; }
.bigs { min-height: 312px; background: var(--blue); color: var(--white); padding: 22px 22px calc(var(--cut) + 36px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); cursor: pointer; }
.bigs .bk { display: flex; align-items: center; gap: 10px; font: 600 14px/1.2 var(--body); opacity: .92; }
.upc { width: 26px; height: 26px; border-radius: 50%; background: var(--white); color: var(--blue); display: grid; place-items: center; flex: none; }
.upc svg { width: 15px; height: 15px; }
.upc.b { background: var(--blue); color: var(--white); }
.bigs h2 { margin-top: 12px; font-size: 34px; font-weight: 900; letter-spacing: -0.025em; }
.bigs .ev { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; background: var(--card); color: var(--ink); border-radius: 10px; padding: 9px 16px 9px 9px; font: 600 16px/1.2 var(--body); box-shadow: 0 4px 0 var(--blue-deep); }
.bigs .ev b { font-weight: 700; }
.bigs .sub { margin-top: 14px; font-size: 15px; line-height: 1.4; opacity: .92; }
.scard .badge { backface-visibility: hidden; }
.scard .badge svg { overflow: visible; }