/* Kwiz Live: last one standing. The whole card takes the colour of the level you're on, getting hotter as you climb.
   Wide screens get two columns (the question on the left, the players on the right); phones get one. */
.gamecard.live {
  --ink: #15121F;
  color: #FFFFFF;
  background: #1E4FE0;
}
.live .view { position: absolute; inset: 0; }
.live .scr {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scrollbar-width: none;
  background: radial-gradient(90% 55% at 30% 0%, rgba(255, 255, 255, 0.2), transparent 60%), linear-gradient(170deg, var(--c1), var(--c2));
  animation: lv-in 320ms var(--ease);
}
.live .scr::-webkit-scrollbar { display: none; }
@keyframes lv-in { from { opacity: 0; transform: translateY(10px); } }
.live .lv-start { --c1: #3B82FF; --c2: #1E4FE0; --deep: #1438B8; }
.live .lv-0 { --c1: #23C98A; --c2: #0E9C68; --deep: #087A51; }
.live .lv-1 { --c1: #FFD23F; --c2: #FFA51F; --deep: #B86A00; color: #2A1A00; }
.live .lv-2 { --c1: #FF7448; --c2: #EE3B23; --deep: #B8240F; }
.live .lv-3 { --c1: #9B4DFF; --c2: #E0287D; --deep: #8A1C9E; }
.live .lv-win { --c1: #FFD84D; --c2: #FFAA1A; --deep: #B86A00; color: #2A1A00; }
/* The closest-number question that settles a long game */
.live .lv-4 { --c1: #1EC8E8; --c2: #0B7FD9; --deep: #075E9A; }
.live .wrap { position: relative; display: flex; flex-direction: column; min-height: 100%; max-width: 1160px; margin: 0 auto; padding: 32px 44px 36px; }
.live p, .live h1, .live h2, .live h3 { margin: 0; }
.live button { font: inherit; color: inherit; }

/* Two columns on wide screens */
.live .cols { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: center; margin-top: 24px; }
.live .col { display: flex; flex-direction: column; min-width: 0; }
.live .narrow { width: min(100%, 560px); margin: auto; padding: 24px 0; }

/* Top bar and the level ladder */
.live .bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.live .tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #FF2D55; color: #FFFFFF; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px -6px rgba(180, 0, 40, 0.7); }
.live .tag i { width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; animation: lv-blink 1.2s ease-in-out infinite; }
@keyframes lv-blink { 50% { opacity: 0.25; } }
.live .glass { background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.live .lv-1 .glass, .live .lv-win .glass { background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65); }
.live .left { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; font-size: 14px; font-weight: 750; white-space: nowrap; }
.live .left.plain { padding: 7px 14px; }
.live .caps { font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.live .ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.live .ladder span { height: 34px; display: grid; place-items: center; border-radius: 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.72); }
.live .lv-1 .ladder span, .live .lv-win .ladder span { background: rgba(255, 255, 255, 0.35); color: rgba(42, 26, 0, 0.55); }
.live .ladder span.done { background: rgba(255, 255, 255, 0.34); color: #FFFFFF; }
.live .lv-1 .ladder span.done { color: #2A1A00; }
.live .ladder span.now { background: #FFFFFF; color: var(--deep); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.14), 0 10px 20px -8px rgba(0, 0, 0, 0.35); transform: translateY(-2px); }

/* Players: emoji on glossy coloured balls */
.live .av { position: relative; display: grid; place-items: center; flex: none; width: var(--s, 46px); height: var(--s, 46px); border-radius: 50%; font-size: calc(var(--s, 46px) * 0.52); line-height: 1;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75), transparent 38%), var(--a, #FFB13B);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16), 0 6px 12px -6px rgba(0, 0, 0, 0.45), 0 0 0 2.5px #FFFFFF; }
.live .av.me { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16), 0 0 0 2.5px #FFFFFF, 0 0 0 5px var(--ink); }
.live .stack { display: flex; }
.live .stack .av { --s: 26px; margin-left: -8px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16), 0 0 0 2px #FFFFFF; }
.live .stack .av:first-child { margin-left: 0; }
.live .host::after { content: "👑"; position: absolute; top: -12px; right: -4px; font-size: 20px; transform: rotate(18deg); }

/* White cards and chunky buttons */
.live .card { position: relative; border-radius: 30px; background: #FFFFFF; color: var(--ink); box-shadow: inset 0 -6px 0 rgba(20, 10, 50, 0.07), 0 30px 50px -28px rgba(20, 5, 60, 0.6); }
.live .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 64px; border: 0; border-radius: 22px; font-size: 19px; font-weight: 750; letter-spacing: -0.02em; cursor: pointer; transition: transform 160ms var(--spring), opacity 200ms; }
.live .btn:hover { transform: translateY(-2px); }
.live .btn:active { transform: translateY(3px) scale(0.98); }
.live .btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.live .btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.live .btn.white { background: #FFFFFF; color: var(--deep); box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 0 rgba(0, 0, 0, 0.16), 0 18px 30px -14px rgba(0, 0, 0, 0.45); }
.live .btn.ink { background: var(--ink); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 0 rgba(0, 0, 0, 0.35), 0 18px 30px -14px rgba(0, 0, 0, 0.5); }
.live .btn.ghost { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.live .btn svg { width: 22px; height: 22px; }
.live .btns { display: grid; gap: 10px; }
.live .note { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 600; opacity: 0.85; }

/* ---------- start ---------- */
.live .beams { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.12) 44%, transparent 52%), linear-gradient(65deg, transparent 46%, rgba(255, 255, 255, 0.1) 52%, transparent 60%); animation: lv-sweep 6s ease-in-out infinite alternate; }
@keyframes lv-sweep { to { transform: translateX(30px); } }
.live .kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.live .title { margin-top: 14px; font-size: clamp(56px, 7vw, 104px); font-weight: 850; letter-spacing: -0.065em; line-height: 0.9; text-wrap: balance; }
.live .sub { margin-top: 18px; max-width: 30ch; font-size: 19px; line-height: 1.45; opacity: 0.92; }
.live .rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.live .rules li { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.live .start .btns { grid-template-columns: 1fr 1fr; margin-top: 30px; max-width: 520px; }
.live .tower-box { display: grid; place-items: center; }
.live .tower { position: relative; width: 314px; height: 300px; transform: scale(1.35); transform-origin: center; }
.live .step { position: absolute; bottom: 30px; width: 66px; border-radius: 18px 18px 14px 14px; background: linear-gradient(180deg, var(--a), var(--b)); border-bottom: 12px solid var(--c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 22px 30px -16px rgba(0, 0, 30, 0.6); }
.live .step em { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); }
.live .step.s1 { left: 10px; height: 70px; --a: #3FE0A2; --b: #14B67A; --c: #0A8558; }
.live .step.s2 { left: 82px; height: 118px; --a: #FFE070; --b: #FFB21E; --c: #D9820A; }
.live .step.s2 em { color: rgba(60, 35, 0, 0.75); }
.live .step.s3 { left: 154px; height: 166px; --a: #FF9068; --b: #F2482A; --c: #B8240F; }
.live .step.s4 { left: 226px; height: 214px; --a: #B57BFF; --b: #D02E8B; --c: #87178F; }
.live .step .av { position: absolute; left: 50%; top: -40px; margin-left: -23px; animation: lv-hop 2.4s var(--ease) infinite; }
.live .step.s2 .av { animation-delay: 0.3s; }
.live .step.s3 .av { animation-delay: 0.6s; }
@keyframes lv-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-10px); } }
.live .crown { position: absolute; left: 226px; width: 66px; bottom: 262px; text-align: center; font-size: 46px; filter: drop-shadow(0 10px 12px rgba(120, 60, 0, 0.45)); animation: lv-float 3s ease-in-out infinite; }
@keyframes lv-float { 50% { transform: translateY(-8px) rotate(-4deg); } }
.live .floor { position: absolute; left: 0; right: 0; bottom: 14px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 40, 0.35), transparent); }

/* ---------- name and player ---------- */
.live .label { margin-top: 26px; opacity: 0.85; }
.live .label:first-child { margin-top: 0; }
.live .code-in, .live .bigcode { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.live .code-in input { width: 100%; height: 88px; border: 0; border-radius: 24px; background: #FFFFFF; color: var(--ink); text-align: center; text-transform: uppercase; font: inherit; font-size: 46px; font-weight: 850; outline: none; box-shadow: inset 0 -6px 0 rgba(20, 10, 50, 0.08), 0 16px 26px -16px rgba(0, 0, 40, 0.6); caret-color: var(--deep); }
.live .code-in input:placeholder-shown { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.live .code-in input:focus { box-shadow: inset 0 -6px 0 rgba(20, 10, 50, 0.08), 0 0 0 4px rgba(255, 255, 255, 0.6); }
.live .field { display: flex; align-items: center; width: 100%; height: 64px; padding: 0 20px; border: 0; border-radius: 20px; background: #FFFFFF; color: var(--ink); font: inherit; font-size: 20px; font-weight: 650; outline: none; box-shadow: inset 0 -4px 0 rgba(20, 10, 50, 0.07), 0 16px 26px -18px rgba(0, 0, 40, 0.6); }
.live .field:focus { box-shadow: inset 0 -4px 0 rgba(20, 10, 50, 0.07), 0 0 0 4px rgba(255, 255, 255, 0.55); }
.live input.field::placeholder { color: #A09AB2; }
.live .pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 8px; margin-top: 12px; }
.live .pick button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.live .pick button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 4px; }
.live .pick .av { --s: 58px; margin: 0 auto; transition: transform 200ms var(--spring); }
.live .pick .on .av { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16), 0 0 0 3px #FFFFFF, 0 0 0 7px var(--ink); transform: scale(1.08); }
.live .setup .btns { margin-top: 30px; }

/* ---------- waiting room ---------- */
.live .bigcode span { display: grid; place-items: center; height: 104px; border-radius: 26px; background: #FFFFFF; color: var(--deep); font-size: 62px; font-weight: 850; box-shadow: inset 0 -7px 0 rgba(20, 10, 50, 0.08), 0 9px 0 rgba(0, 0, 40, 0.14); }
.live .bigcode span:nth-child(1) { transform: rotate(-4deg); }
.live .bigcode span:nth-child(2) { transform: rotate(3deg); }
.live .bigcode span:nth-child(3) { transform: rotate(-2deg); }
.live .bigcode span:nth-child(4) { transform: rotate(4deg); }
.live .share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.live .share-row .btn { height: 54px; font-size: 16px; border-radius: 18px; }
.live .lobby-cols { grid-template-areas: "a b" "s b"; align-content: center; row-gap: 26px; }
.live .lobby-cols .side-a { grid-area: a; align-self: end; }
.live .lobby-cols .side-b { grid-area: b; }
.live .lobby-cols .start-row { grid-area: s; align-self: start; }
.live .sect { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.live .sect h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.live .sect span { font-size: 13.5px; font-weight: 700; opacity: 0.8; }
.live .players { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px 8px; margin-top: 18px; }
.live .players div { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 700; }
.live .players b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live .players .av { --s: 60px; }
.live .players .fresh { animation: lv-pop 500ms var(--spring) both; }
/* The host's remove button: a small white badge on the top right of someone else's avatar */
.live .players div { position: relative; }
.live .players .kick { position: absolute; top: -6px; left: calc(50% + 14px); width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: #FFFFFF; color: var(--ink, #111); font-family: inherit; font-weight: 800; font-size: 17px; line-height: 1; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12); cursor: pointer; }
.live .players .kick:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.live .players .kick:disabled { opacity: 0.4; }
@keyframes lv-pop { from { transform: scale(0); opacity: 0; } }
.live .toast { display: flex; justify-content: center; min-height: 36px; margin-top: 18px; }
.live .toast span { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; animation: lv-pop 500ms var(--spring) both; }

/* ---------- level up ---------- */
.live .lvl { position: relative; margin: auto 0; padding: 30px 0; text-align: center; }
.live .lvl .badge { position: relative; display: inline-grid; place-items: center; width: 200px; height: 200px; border-radius: 56px; background: linear-gradient(160deg, #FFFFFF, #F4F0FF); box-shadow: inset 0 -10px 0 rgba(40, 20, 80, 0.1), 0 14px 0 rgba(0, 0, 0, 0.22), 0 40px 60px -20px rgba(0, 0, 0, 0.5); animation: lv-badge 900ms var(--spring) both; }
.live .lvl .badge span { font-size: 104px; line-height: 1; }
@keyframes lv-badge { from { transform: rotate(-30deg) scale(0.3); } to { transform: rotate(-6deg) scale(1); } }
.live .lvl .rays { position: absolute; left: 50%; top: 130px; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.16) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); animation: lv-spin 18s linear infinite; }
.live .lv-1 .lvl .rays { background: repeating-conic-gradient(rgba(255, 255, 255, 0.35) 0 10deg, transparent 10deg 24deg); }
@keyframes lv-spin { to { transform: rotate(360deg); } }
.live .lvl h2 { position: relative; margin-top: 36px; font-size: 84px; font-weight: 900; letter-spacing: -0.06em; line-height: 0.9; text-shadow: 0 6px 0 rgba(0, 0, 0, 0.18); animation: lv-rise 500ms 200ms var(--ease) both; }
.live .lvl p { position: relative; margin-top: 14px; font-size: 19px; opacity: 0.92; animation: lv-rise 500ms 300ms var(--ease) both; }
@keyframes lv-rise { from { opacity: 0; transform: translateY(16px); } }
.live .left-row { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.live .left-row .av { --s: 46px; }
.live .lvl .rules { justify-content: center; }

/* ---------- question ---------- */
.live .qrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.live .qrow .caps { opacity: 0.85; }
.live .qrow .qsec { margin-top: 4px; font-size: 26px; font-weight: 850; letter-spacing: -0.04em; }
.live .timer { position: relative; flex: none; width: 70px; height: 70px; }
.live .timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.live .timer circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.live .timer .track { stroke: rgba(255, 255, 255, 0.25); }
.live .lv-1 .timer .track { stroke: rgba(255, 255, 255, 0.45); }
.live .timer .run { stroke: #FFFFFF; stroke-dasharray: 233.7; }
.live .timer b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 27px; font-weight: 850; letter-spacing: -0.04em; }
.live .timer.big { width: 190px; height: 190px; margin: 0 auto; }
.live .timer.big circle { stroke-width: 7; }
.live .timer.big b { font-size: 72px; }
.live .timer.hot .run { stroke: #FFE14D; }
.live .lv-1 .timer.hot .run { stroke: #E0287D; }
.live .timer.hot b { color: #FFE14D; animation: lv-throb 1s ease-in-out infinite; }
.live .lv-1 .timer.hot b { color: #C0145E; }
@keyframes lv-throb { 50% { transform: scale(1.12); } }
.live .qrow .timer { display: none; }
.live .qcard { margin-top: 18px; padding: 26px 30px 28px; animation: lv-rise 400ms var(--ease) both; }
.live .qcard .cat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #F1EEF8; color: #5E5872; font-size: 13px; font-weight: 750; }
.live .qcard h2 { margin-top: 14px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; text-wrap: balance; }
.live .qhint { margin-top: 12px; color: #8A849A; font-size: 14px; font-weight: 600; }
.live .answer { display: flex; gap: 10px; margin-top: 16px; }
.live .answer .field { flex: 1; min-width: 0; height: 66px; font-size: 22px; }
.live .answer .btn { width: 140px; height: 66px; flex: none; font-size: 18px; }
.live .watching { margin-top: 16px; padding: 16px 18px; border-radius: 20px; font-size: 16px; font-weight: 700; text-align: center; }
.live .locked { margin-top: 44px; padding: 24px 22px; text-align: center; animation: lv-rise 400ms var(--ease) both; }
.live .locked .tick { display: grid; place-items: center; width: 60px; height: 60px; margin: -54px auto 10px; border-radius: 50%; background: linear-gradient(160deg, #3FE0A2, #0E9C68); color: #FFFFFF; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 0 6px #FFFFFF, 0 14px 20px -8px rgba(0, 60, 30, 0.6); animation: lv-pop 500ms var(--spring) both; }
.live .locked .tick svg { width: 30px; height: 30px; }
.live .locked p { color: #6E6880; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.live .locked h2 { margin-top: 6px; font-size: 40px; font-weight: 850; letter-spacing: -0.05em; overflow-wrap: anywhere; }
.live .wait { margin-top: 26px; }
.live .wait h3 { font-size: 16px; font-weight: 750; text-align: center; opacity: 0.92; }
.live .wait-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; margin-top: 14px; }
.live .wait-grid .av { --s: 48px; }
.live .wait-grid .av.ok::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #15121F; color: #FFFFFF; font-size: 11px; font-weight: 900; box-shadow: 0 0 0 2px #FFFFFF; animation: lv-pop 400ms var(--spring) both; }
.live .wait-grid .av.typing { animation: lv-wobble 1.2s ease-in-out infinite; }
.live .wait-grid .av.typing::after { content: "···"; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: #FFFFFF; color: #15121F; font-size: 12px; font-weight: 900; line-height: 16px; }
@keyframes lv-wobble { 50% { transform: translateY(-3px); } }

/* ---------- the reveal ---------- */
.live .reveal { padding: 26px 26px 28px; text-align: center; animation: lv-slam-in 520ms var(--spring) both; }
@keyframes lv-slam-in { from { transform: scale(0.6); opacity: 0; } }
.live .reveal p { color: #6E6880; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.live .reveal h2 { margin-top: 6px; font-size: clamp(44px, 6vw, 80px); font-weight: 850; letter-spacing: -0.06em; line-height: 0.95; color: var(--deep); overflow-wrap: anywhere; text-wrap: balance; }
.live .reveal .you { display: inline-flex; margin-top: 14px; padding: 7px 14px; border-radius: 999px; font-size: 15px; font-weight: 750; }
.live .reveal .you.ok { background: #DDF7EC; color: #087A51; }
.live .reveal .you.no { background: #FFE1E6; color: #C4123A; }
.live .burst { position: absolute; inset: -30px; pointer-events: none; }
.live .burst i { position: absolute; width: 10px; height: 14px; border-radius: 3px; background: var(--k); animation: lv-confetti 1.6s var(--ease) both; }
@keyframes lv-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); opacity: 0; } }
.live .outs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.live .out { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 20px; background: rgba(0, 0, 0, 0.16); animation: lv-rise 400ms var(--ease) both; }
.live .out .av { --s: 40px; filter: grayscale(1); opacity: 0.85; }
.live .out b { font-size: 16px; white-space: nowrap; }
.live .out q { margin-left: auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 12px; border-radius: 12px; background: #FFFFFF; color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: line-through; text-decoration-color: #FF2D55; text-decoration-thickness: 2px; }
.live .out q.slow { quotes: none; text-decoration: none; background: rgba(255, 255, 255, 0.25); color: inherit; font-style: italic; }
/* Closest number: million / billion buttons, what the phone read, and everyone's guesses closest first */
.live .mag { display: flex; gap: 8px; margin-top: 10px; }
.live .mag button { flex: 1; height: 44px; border: 0; border-radius: 14px; color: inherit; font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; }
.live .mag button:active { transform: translateY(2px); }
.live .reads { min-height: 24px; margin-top: 10px; font-size: 17px; font-weight: 750; }
.live .reads.bad { opacity: 0.75; font-weight: 650; }
.live .reveal .exact { margin-top: 10px; letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 650; }
.live .guesses { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.live .guess { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 20px; background: rgba(0, 0, 0, 0.16); animation: lv-rise 400ms var(--ease) both; }
.live .guess .av { --s: 40px; }
.live .guess b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 16px; white-space: nowrap; }
.live .guess span { margin-left: auto; padding: 5px 12px; border-radius: 12px; background: #FFFFFF; color: var(--ink); font-size: 15px; font-weight: 750; white-space: nowrap; }
.live .guess em { width: 116px; flex: none; font-size: 13px; font-style: normal; font-weight: 700; opacity: 0.85; text-align: right; white-space: nowrap; }
.live .guess.win { background: #FFFFFF; color: var(--ink); box-shadow: 0 0 0 3px #FFD84D, 0 10px 24px -10px rgba(0, 0, 0, 0.45); }
.live .guess.win span { background: #FFD84D; color: #2A1A00; }
.live .guess.win em { color: var(--deep); opacity: 1; }
.live .guess:not(.win) .av { filter: grayscale(1); opacity: 0.85; }
.live .nobody { margin-top: 12px; padding: 16px 18px; border-radius: 20px; font-size: 16px; font-weight: 700; text-align: center; }
.live .alive { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.live .alive .av { --s: 44px; }
.live .gap { margin-top: 26px; }

/* ---------- you're out ---------- */
.live .stamp { align-self: center; padding: 8px 32px; border: 7px solid #FFFFFF; border-radius: 26px; font-size: clamp(84px, 10vw, 132px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; transform: rotate(-8deg); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 20px 30px -14px rgba(0, 0, 0, 0.45); animation: lv-slam 600ms var(--spring) both; }
@keyframes lv-slam { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }
.live .said { margin-top: 30px; text-align: center; font-size: 19px; line-height: 1.6; }
.live .said s { text-decoration-thickness: 2px; opacity: 0.85; }
.live .said b { padding: 2px 10px; border-radius: 10px; background: #FFFFFF; color: var(--deep); }
.live .run { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.live .run span { display: flex; flex-direction: column; align-items: center; min-width: 104px; padding: 12px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.live .run b { font-size: 30px; font-weight: 850; letter-spacing: -0.04em; text-transform: none; }
.live .predict { padding: 24px 24px 22px; }
.live .predict h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.live .predict p { margin-top: 4px; color: #6E6880; font-size: 15px; }
.live .picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; margin-top: 18px; }
.live .picks button { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 0; border: 0; background: none; color: #3A3450; font-size: 13px; font-weight: 700; cursor: pointer; }
.live .picks b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live .picks .av { --s: 54px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16), 0 6px 12px -6px rgba(0, 0, 0, 0.35), 0 0 0 2.5px #FFFFFF, 0 0 0 4px #ECE8F4; transition: transform 200ms var(--spring); }
.live .picks .on .av { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16), 0 0 0 3px #FFFFFF, 0 0 0 7px var(--deep); transform: scale(1.08); }
.live .picks .on { color: var(--deep); }
.live .predict .btn { height: 56px; margin-top: 18px; font-size: 17px; }

/* ---------- winner ---------- */
.live .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.live .confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; background: var(--k); animation: lv-fall var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes lv-fall { to { transform: translate(var(--x), 1000px) rotate(720deg); } }
.live .win-head { text-align: center; }
.live .win-head .av { --s: 140px; margin: 46px auto 0; font-size: 76px; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.16), 0 0 0 6px #FFFFFF, 0 26px 34px -12px rgba(120, 60, 0, 0.6); animation: lv-slam-in 700ms var(--spring) both; }
.live .win-head .av::before { content: "👑"; position: absolute; top: -50px; font-size: 60px; transform: rotate(-12deg); animation: lv-float 3s ease-in-out infinite; }
.live .win-head h2 { margin-top: 20px; font-size: clamp(46px, 6vw, 76px); font-weight: 900; letter-spacing: -0.06em; line-height: 0.95; text-wrap: balance; animation: lv-rise 500ms 200ms var(--ease) both; }
.live .win-head p { margin-top: 10px; font-size: 17px; font-weight: 600; opacity: 0.8; }
.live .podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.live .podium div { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 110px; min-width: 0; font-size: 15px; font-weight: 750; animation: lv-rise 500ms var(--ease) both; }
.live .podium div b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live .podium .av { --s: 54px; }
.live .podium em { display: grid; place-items: start center; width: 100%; padding-top: 12px; border-radius: 18px 18px 8px 8px; font-style: normal; font-size: 30px; font-weight: 900; color: #FFFFFF; background: linear-gradient(180deg, var(--a), var(--b)); border-bottom: 10px solid var(--c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.live .podium .p1 em { height: 130px; --a: #B57BFF; --b: #7C3AED; --c: #5B21B6; }
.live .podium .p2 em { height: 92px; --a: #6FA8FF; --b: #2F6BFF; --c: #1E4FE0; }
.live .podium .p3 em { height: 66px; --a: #FF9068; --b: #F2482A; --c: #B8240F; }
.live .podium .p1 { animation-delay: 300ms; }
.live .podium .p2 { animation-delay: 450ms; }
.live .podium .p3 { animation-delay: 600ms; }
.live .called { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; min-height: 40px; }
.live .called span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 14.5px; font-weight: 750; }
.live .called .av { --s: 30px; }
.live .win-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.live .win-btns .btn { height: 60px; font-size: 17px; }

/* ---------- phones and narrow windows: one column ---------- */
@media (max-width: 760px) {
  .live .wrap { padding: 18px 18px 22px; }
  .live .cols { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 16px; }
  .live .cols.top { justify-content: flex-start; }
  .live .ladder { margin-top: 14px; }
  .live .ladder span { height: 30px; font-size: 10.5px; border-radius: 10px; }
  .live .left { font-size: 13px; }

  .live .start .cols { margin-top: 0; }
  .live .start .tower-box { order: -1; margin: 18px 0 8px; }
  .live .tower { transform: scale(0.76); margin: -36px auto -30px; }
  .live .title { margin-top: 4px; font-size: 48px; }
  .live .sub { margin-top: 10px; font-size: 16.5px; }
  .live .rules { margin-top: 16px; }
  .live .rules li { padding: 7px 12px; font-size: 13px; }
  .live .start .kicker { display: none; }
  .live .start .btns { grid-template-columns: 1fr; margin-top: 22px; max-width: none; }

  .live .code-in input { height: 78px; font-size: 40px; }
  .live .pick .av { --s: 52px; }
  .live .bigcode span { height: 78px; font-size: 46px; border-radius: 20px; }
  .live .players { grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
  .live .players .av { --s: 52px; }
  .live .players div { font-size: 13px; }
  .live .players .kick { left: calc(50% + 11px); width: 24px; height: 24px; font-size: 16px; }
  .live .lobby .side-b { margin-top: 22px; }
  .live .lobby-cols > .col { align-self: stretch; }
  .live .lobby-cols .start-row { margin-top: 18px; }

  .live .lvl .badge { width: 170px; height: 170px; border-radius: 48px; }
  .live .lvl .badge span { font-size: 90px; }
  .live .lvl h2 { font-size: 60px; }
  .live .lvl p { font-size: 17px; }
  .live .lvl .rays { top: 100px; width: 440px; height: 440px; margin: -220px 0 0 -220px; }

  .live .qrow .timer { display: block; }
  .live .timer.big { display: none; }
  .live .qrow .qsec { font-size: 22px; }
  .live .qcard { margin-top: 14px; padding: 18px 20px 20px; border-radius: 26px; }
  .live .qcard h2 { font-size: 25px; }
  .live .qhint { font-size: 13px; }
  .live .answer { margin-top: 12px; gap: 8px; }
  .live .answer .field { height: 60px; font-size: 20px; }
  .live .answer .btn { width: 108px; height: 60px; font-size: 17px; }
  .live .locked { margin-top: 30px; }
  .live .locked h2 { font-size: 34px; }
  .live .wait { margin-top: 22px; }
  .live .wait h3 { text-align: left; font-size: 15px; }
  .live .wait-grid { display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; gap: 12px 4px; }
  .live .wait-grid .av { --s: 42px; }

  .live .reveal { padding: 18px 20px 20px; }
  .live .reveal h2 { font-size: 44px; }
  .live .side-b { margin-top: 20px; }
  .live .out b { font-size: 15px; }
  .live .out q { font-size: 14px; max-width: 55%; }
  .live .guess { gap: 10px; padding-right: 10px; }
  .live .guess b { font-size: 15px; }
  .live .guess span { padding: 4px 10px; font-size: 14px; }
  .live .guess em { width: 86px; font-size: 12px; white-space: normal; line-height: 1.15; }
  .live .mag button { height: 42px; font-size: 14px; }
  .live .alive .av { --s: 40px; }

  .live .stamp { margin-top: 14px; font-size: 88px; border-width: 6px; }
  .live .said { margin-top: 22px; font-size: 17px; }
  .live .run span { min-width: 92px; padding: 10px 12px; }
  .live .run b { font-size: 26px; }
  .live .out-scr .side-b { margin-top: auto; padding-top: 20px; }
  .live .predict { padding: 18px; }
  .live .predict h3 { font-size: 21px; }
  .live .picks .av { --s: 48px; }

  .live .win-head .av { --s: 108px; margin-top: 40px; font-size: 58px; }
  .live .win-head .av::before { top: -40px; font-size: 48px; }
  .live .win-head h2 { font-size: 46px; }
  .live .win-head p { font-size: 16px; }
  .live .win .side-b { margin-top: 22px; }
  .live .podium div { width: 88px; font-size: 14px; }
  .live .podium .av { --s: 46px; }
  .live .podium .p1 em { height: 104px; }
  .live .podium .p2 em { height: 74px; }
  .live .podium .p3 em { height: 54px; }
  .live .podium em { font-size: 26px; }
  .live .win-btns { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .live *, .live *::before, .live *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* Your run on your own: a dot per question */
.live .trail { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 16px; }
.live .trail i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.live .lv-1 .trail i { background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.live .trail i.done { background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.7), transparent 45%), var(--k); box-shadow: 0 0 0 2.5px #FFFFFF; }
.live .trail i.now { animation: lv-pop 500ms var(--spring) both; }
.live .trail i.miss { background: #FF2D55; box-shadow: 0 0 0 2.5px #FFFFFF; animation: lv-pop 500ms var(--spring) both; }
.live .trail-k { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.live .trail-k span:nth-child(n+2) { padding-left: 3px; }
.live .trail i.cur { background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px #FFFFFF; animation: lv-throb 1.2s ease-in-out infinite; }
.live .wait .trail, .live .win .trail { margin-top: 14px; }

/* Before the server is live: the start screen says it's coming */
.live .soon { display: flex; flex-direction: column; gap: 6px; max-width: 520px; margin-top: 30px; padding: 18px 22px; border-radius: 22px; font-size: 16px; line-height: 1.45; }
.live .soon b { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.live .start .btns.one { grid-template-columns: minmax(0, 260px); margin-top: 16px; }
.live a.btn { text-decoration: none; }
@media (max-width: 760px) { .live .start .btns.one { grid-template-columns: 1fr; } .live .soon { margin-top: 22px; } }

/* Connection and messages */
.live .reconnect { position: absolute; left: 50%; top: 16px; z-index: 20; margin: 0; padding: 8px 16px; border-radius: 999px; background: #15121F; color: #FFFFFF; font-size: 14px; font-weight: 700; transform: translateX(-50%); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); animation: lv-pop 400ms var(--spring) both; }
.live .pop { position: absolute; left: 50%; bottom: 22px; z-index: 20; max-width: calc(100% - 40px); margin: 0; padding: 10px 18px; border-radius: 16px; font-size: 15px; font-weight: 700; text-align: center; transform: translateX(-50%); animation: lv-pop 400ms var(--spring) both; }
.live .form-err { margin-top: 18px; padding: 12px 16px; border-radius: 16px; font-size: 15px; font-weight: 650; line-height: 1.45; }
.live .players .away { opacity: 0.45; }

/* Short phones (most of them once the browser's bars take their share, and Android with bigger system text): a smaller
   podium and no rule chips, so "Create a game" and "Join with a code" are on screen without scrolling. The tower is
   300px tall before scaling; the margins take back what the scale leaves empty. */
@media (max-width: 760px) and (max-height: 780px) {
  .live .start .tower-box { margin: 10px 0 4px; }
  .live .start .tower { transform: scale(0.5); margin: -76px auto -74px; }
  .live .start .title { font-size: 40px; }
  .live .start .sub { margin-top: 8px; font-size: 15px; }
  .live .start .rules { display: none; }
  .live .start .btns { margin-top: 16px; gap: 8px; }
  .live .start .btn { height: 54px; }
}
@media (max-width: 760px) and (max-height: 660px) {
  .live .start.wrap, .live .start .wrap { padding-bottom: 14px; }
}
@media (max-width: 760px) and (max-height: 580px) {
  .live .start .tower { transform: scale(0.4); margin: -91px auto -89px; }
  .live .start .title { font-size: 36px; }
}
/* The name-and-player screen (and the code boxes when joining), the same way: smaller boxes and players, less space */
@media (max-width: 760px) and (max-height: 780px) {
  .live .setup .narrow { padding: 12px 0; }
  .live .setup .label { margin-top: 16px; }
  .live .setup .label:first-child { margin-top: 0; }
  .live .code-in input { height: 60px; font-size: 32px; border-radius: 18px; }
  .live .setup .field { height: 54px; }
  .live .pick { gap: 10px 8px; }
  .live .pick .av { --s: 46px; }
  .live .setup .btns { margin-top: 18px; }
  .live .setup .btn { height: 54px; }
}
@media (max-width: 760px) and (max-height: 660px) {
  .live .code-in input { height: 54px; }
  .live .pick .av { --s: 42px; }
}
@media (max-width: 760px) and (max-height: 580px) {
  .live .setup .label { margin-top: 12px; }
  .live .code-in input { height: 50px; font-size: 28px; }
  .live .setup .field { height: 50px; }
  .live .pick { gap: 8px 6px; }
  .live .pick .av { --s: 38px; }
}
/* The lobby on short phones: a smaller code, so the players and the start button have room */
@media (max-width: 760px) and (max-height: 660px) {
  .live .bigcode span { height: 60px; font-size: 38px; border-radius: 16px; }
  .live .lobby .side-b { margin-top: 16px; }
}
/* If the text is still too big (very large system text), the screen scrolls but the buttons stay on it. In the lobby
   the start button stays at the bottom however many players join, and the list scrolls under it. */
@media (max-width: 760px) {
  .live .start .btns, .live .setup .btns { position: sticky; bottom: 0; z-index: 3; }
  .live .wrap.lobby { padding-bottom: 0; }
  .live .lobby .start-row { position: sticky; bottom: 0; z-index: 3; margin: 18px -18px 0; padding: 14px 18px 20px; background: linear-gradient(rgba(30, 79, 224, 0), var(--c2) 14px); }
}