/* ═══════════════════════════════════════════════════════════════════════════
   Platinumlist Quiz — application layout.
   Every colour resolves to a design system token. No raw hex except
   brand-accent alphas, which the design system permits.
   ═══════════════════════════════════════════════════════════════════════════ */

html, body { min-height: 100%; }
body { display: flex; flex-direction: column; }

.page { width: 100%; max-width: 1100px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-10); flex: 1; }
.page--narrow { max-width: 520px; }
[hidden] { display: none !important; }

/* ── Header ───────────────────────────────────────────────────────────────── */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-default);
  border-bottom: 1px solid var(--bg-border);
}
.app-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.app-header__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.app-header__brand:hover { text-decoration: none; }
.app-header__brand img { height: 28px; width: auto; display: block; }
.pl-logo--dark { display: none; }
[data-theme="dark"] .pl-logo--light { display: none; }
[data-theme="dark"] .pl-logo--dark { display: block; }

.app-header__sub {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--poodle-primary);
  padding-left: var(--space-3);
  border-left: 1px solid var(--bg-border);
}
[data-theme="dark"] .app-header__sub { color: var(--poodle-40); }
.app-header__spacer { flex: 1; }
.app-header__right { display: flex; align-items: center; gap: var(--space-3); }
.app-header__who { text-align: right; line-height: 1.3; font-size: 13px; white-space: nowrap; }
.app-header__who strong { display: block; color: var(--content-primary); }
.app-header__who span { color: var(--content-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .app-header__inner { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .app-header__sub { display: none; }
  .app-header__brand img { height: 24px; }
  .page { padding: var(--space-4) var(--space-4) var(--space-8); }
}

/* ── Generic bits ─────────────────────────────────────────────────────────── */

.card { padding: var(--space-6); }
.card + .card { margin-top: var(--space-4); }
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--poodle-primary);
  margin-bottom: var(--space-2);
}
[data-theme="dark"] .eyebrow { color: var(--poodle-40); }
.blurb { color: var(--content-secondary); font-size: 14px; margin: 0 0 var(--space-4); }
.field { margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.muted { color: var(--content-secondary); }
.small { font-size: 13px; }
.center { text-align: center; }
.tnum { font-variant-numeric: tabular-nums; }
.pl-btn--lg { padding: 14px 26px; font-size: 16px; border-radius: var(--radius-base); }
.pl-btn--block { width: 100%; }
.pl-btn--sm { padding: 6px 10px; font-size: 12px; }

.note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-xs); font-size: 14px; }
.note--alert { background: rgba(249, 54, 67, .10); color: var(--accent-alert); border: 1px solid rgba(249, 54, 67, .25); }
.note--info  { background: rgba(126, 5, 232, .08); color: var(--content-primary); border: 1px solid rgba(126, 5, 232, .20); }

.pin-input {
  font-family: var(--font-accent);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .28em;
  text-align: center;
  padding: 14px;
}

/* ── Answer options ───────────────────────────────────────────────────────── */

.opts { display: grid; gap: var(--space-3); }
.opts--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .opts--2col { grid-template-columns: 1fr; } }

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 74px;
  padding: var(--space-4) var(--space-5);
  border: none;
  border-radius: var(--radius-base);
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: transform var(--duration-base), opacity .3s, box-shadow var(--duration-base);
  box-shadow: var(--shadow-sm);
}
button.opt:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
button.opt:active:not(:disabled) { transform: scale(.985); }
.opt:disabled { cursor: default; }
.opt--a { background: var(--poodle-primary); }
.opt--b { background: var(--link-base); }
.opt--c { background: var(--accent-warning); }
.opt--d { background: var(--accent-success); }
.opt__shape { font-size: 26px; line-height: 1; width: 32px; text-align: center; flex: 0 0 auto; }
.opt__text { flex: 1; }
.opt__count {
  flex: 0 0 auto;
  font-family: var(--font-accent);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.opt.is-dim { opacity: .28; }
.opt.is-correct { outline: 4px solid #FFFFFF; outline-offset: -4px; }
.opt.is-correct::after {
  content: '✓';
  position: absolute;
  top: -12px;
  right: -8px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--accent-success);
  font-size: 22px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.opt.is-mine { box-shadow: 0 0 0 3px var(--bg-default), 0 0 0 6px currentColor; }

.opts--big .opt { min-height: 110px; font-size: 26px; padding: var(--space-5) var(--space-6); }
.opts--big .opt__shape { font-size: 38px; width: 48px; }

/* ── Timer ────────────────────────────────────────────────────────────────── */

.timer { height: 10px; border-radius: var(--radius-pill); background: var(--bg-secondary); overflow: hidden; }
.timer__fill { height: 100%; width: 100%; background: var(--poodle-primary); border-radius: var(--radius-pill); transition: width .25s linear; }
.timer__fill.is-low { background: var(--accent-alert); }
[data-theme="dark"] .timer__fill { background: var(--poodle-40); }
[data-theme="dark"] .timer__fill.is-low { background: var(--accent-alert); }

.countdown {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-accent);
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--bg-default);
  border: 4px solid var(--poodle-primary);
  color: var(--content-primary);
  flex: 0 0 auto;
}
.countdown.is-low { border-color: var(--accent-alert); color: var(--accent-alert); }

/* ── Big-screen question ──────────────────────────────────────────────────── */

.qhead { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); }
.qhead__meta { flex: 1; }
.qhead__count { color: var(--content-secondary); font-size: 14px; font-weight: var(--font-weight-semibold); letter-spacing: .06em; text-transform: uppercase; }
.qhead__answered { font-family: var(--font-accent); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qhead__answered span { font-size: 15px; color: var(--content-secondary); font-family: var(--font); font-weight: var(--font-weight-medium); }

.qtext {
  font-family: var(--font-accent);
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-6);
}
.qtext--phone { font-size: 20px; margin-bottom: var(--space-4); }

/* ── Picture questions ────────────────────────────────────────────────────── */

.qmedia {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-5);
}
.qmedia img {
  display: block;
  max-width: 100%;
  max-height: 42vh;
  min-height: 160px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--bg-default);
  border: 1px solid var(--bg-border);
  box-shadow: var(--shadow-md);
  animation: pop .35s ease-out;
}
.qmedia--reveal img { max-height: 48vh; border-color: var(--poodle-primary); }
.qmedia--phone { margin-bottom: var(--space-4); }
.qmedia--phone img { max-height: 34vh; min-height: 90px; }
/* With a picture on screen the answer tiles can be shorter. */
.has-media .qtext { font-size: clamp(20px, 2.4vw, 28px); margin-bottom: var(--space-4); }
.has-media .opts--big .opt { min-height: 84px; font-size: 22px; padding: var(--space-4) var(--space-5); }
.has-media .opts--big .opt__shape { font-size: 30px; width: 40px; }
.reveal-photo { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.reveal-photo img {
  display: block;
  max-width: 100%;
  max-height: 36vh;
  border-radius: var(--radius-lg);
  border: 2px solid var(--poodle-primary);
  box-shadow: var(--shadow-md);
  animation: pop .4s ease-out;
}

/* ── Section title card ───────────────────────────────────────────────────── */

.titlecard {
  text-align: center;
  padding: clamp(40px, 10vh, 120px) var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(126, 5, 232, .16), rgba(151, 55, 236, .06));
  border: 1px solid rgba(126, 5, 232, .30);
  animation: pop .45s ease-out;
}
.titlecard__title { font-size: clamp(36px, 6vw, 72px); margin: var(--space-3) 0; letter-spacing: -.01em; }
.titlecard__sub { color: var(--content-secondary); font-size: 18px; margin: 0 0 var(--space-6); }

/* ── Lobby ────────────────────────────────────────────────────────────────── */

.lobby { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .lobby { grid-template-columns: 1fr; } }
.big-pin {
  font-family: var(--font-accent);
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  color: var(--poodle-primary);
  margin: var(--space-2) 0 var(--space-3);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .big-pin { color: var(--poodle-40); }
.join-url { font-size: 20px; font-weight: var(--font-weight-semibold); word-break: break-all; }
.qr { display: flex; justify-content: center; padding: var(--space-3); background: #FFFFFF; border-radius: var(--radius-base); width: fit-content; margin: var(--space-4) auto 0; }
.qr svg { display: block; width: 180px; height: 180px; }

.players { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.player-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-default);
  border: 1px solid var(--bg-border);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  animation: pop .25s ease-out;
}
.player-chip button {
  border: none; background: transparent; color: var(--content-highlight);
  cursor: pointer; font-size: 14px; padding: 0 0 0 4px; line-height: 1;
}
.player-chip button:hover { color: var(--accent-alert); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Leaderboard ──────────────────────────────────────────────────────────── */

.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.board__row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-default);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-base);
  font-size: 18px;
  animation: slide .35s ease-out both;
}
.board__row:nth-child(1) { animation-delay: .35s; }
.board__row:nth-child(2) { animation-delay: .28s; }
.board__row:nth-child(3) { animation-delay: .21s; }
.board__row:nth-child(4) { animation-delay: .14s; }
.board__row:nth-child(5) { animation-delay: .07s; }
@keyframes slide { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.board__row.is-me { border-color: var(--poodle-primary); background: rgba(126, 5, 232, .06); }
.board__rank {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-accent); font-weight: 700; font-size: 17px;
  background: var(--bg-secondary); color: var(--content-primary);
}
.board__row:nth-child(1) .board__rank { background: var(--poodle-primary); color: #FFFFFF; }
.board__row:nth-child(2) .board__rank { background: var(--poodle-40); color: #FFFFFF; }
.board__row:nth-child(3) .board__rank { background: var(--poodle-20); color: var(--aussie-100); }
.board__name { flex: 1; font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__delta { color: var(--accent-success); font-size: 14px; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.board__score { font-family: var(--font-accent); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }

.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); align-items: end; margin: var(--space-6) 0; }
.podium__slot { text-align: center; padding: var(--space-5) var(--space-3); border-radius: var(--radius-base); background: var(--bg-default); border: 1px solid var(--bg-border); animation: pop .4s ease-out both; }
.podium__slot--1 { order: 2; padding-top: var(--space-8); padding-bottom: var(--space-8); border-color: var(--poodle-primary); animation-delay: .5s; }
.podium__slot--2 { order: 1; animation-delay: .3s; }
.podium__slot--3 { order: 3; animation-delay: .1s; }
.podium__medal { font-size: 40px; line-height: 1; }
.podium__name { font-family: var(--font-accent); font-size: 22px; font-weight: 700; margin-top: var(--space-2); overflow-wrap: anywhere; }
.podium__score { color: var(--content-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .podium { grid-template-columns: 1fr; } .podium__slot { order: initial !important; } }

/* ── Phone status screens ─────────────────────────────────────────────────── */

.status { text-align: center; padding: var(--space-8) var(--space-5); }
.status__icon { font-size: 56px; line-height: 1; margin-bottom: var(--space-4); }
.status__title { font-family: var(--font-accent); font-size: 26px; font-weight: 700; margin: 0 0 var(--space-2); }
.status__sub { color: var(--content-secondary); font-size: 15px; margin: 0; }
.status--correct { background: rgba(48, 187, 71, .10); border-color: rgba(48, 187, 71, .35); }
.status--wrong { background: rgba(249, 54, 67, .08); border-color: rgba(249, 54, 67, .30); }
.status--correct .status__title { color: #1F8A32; }
.status--wrong .status__title { color: var(--accent-alert); }
[data-theme="dark"] .status--correct .status__title { color: var(--accent-success); }

.points {
  font-family: var(--font-accent);
  font-size: 48px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: var(--space-4) 0 var(--space-2);
  animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.stats { display: flex; justify-content: center; gap: var(--space-6); margin-top: var(--space-5); }
.stat { text-align: center; }
.stat__value { font-family: var(--font-accent); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 12px; color: var(--content-secondary); text-transform: uppercase; letter-spacing: .08em; }

.chosen { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; border-radius: var(--radius-pill); color: #FFFFFF; font-weight: var(--font-weight-semibold); margin-top: var(--space-3); }

/* ── Host: question editor ────────────────────────────────────────────────── */

.qlist { display: flex; flex-direction: column; gap: var(--space-3); }
.qcard { padding: var(--space-4) var(--space-5); }
.qcard__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.qcard__num { font-family: var(--font-accent); font-weight: 700; color: var(--content-secondary); width: 28px; }
.qcard__head .pl-input { flex: 1; }
.qcard__opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 640px) { .qcard__opts { grid-template-columns: 1fr; } }
.qopt { display: flex; align-items: center; gap: var(--space-2); }
.qopt__dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.qopt input[type="radio"] { accent-color: var(--poodle-primary); width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; }
.qcard__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.qcard__foot .pl-input { width: 72px; text-align: center; padding: 6px 8px; }
.qcard__extra { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
@media (max-width: 760px) { .qcard__extra { grid-template-columns: 1fr; } }
.qcard__extra .pl-input { padding: 6px 10px; font-size: 13px; }
.qcard__extra label { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--content-secondary); }
.qcard__extra label span { flex: 0 0 64px; }
.qcard__thumb { width: 40px; height: 28px; object-fit: cover; border-radius: 4px; border: 1px solid var(--bg-border); background: var(--bg-secondary); flex: 0 0 auto; }
.qcard__thumb:not([src]) { visibility: hidden; }
.qcard__spacer { flex: 1; }
.icon-btn { border: 1px solid var(--bg-border); background: var(--bg-default); color: var(--content-secondary); border-radius: var(--radius-xs); width: 32px; height: 32px; cursor: pointer; font-size: 14px; }
.icon-btn:hover { color: var(--content-primary); border-color: var(--bg-border-hover); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.sticky-actions {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-default);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}

.kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--bg-border-hover); border-bottom-width: 2px; border-radius: 5px; font-size: 11px; font-family: var(--font); color: var(--content-secondary); background: var(--bg-default); }

/* ── Join-anytime bar (host, during play) ─────────────────────────────────── */

.joinbar {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: rgba(126, 5, 232, .10);
  border-bottom: 1px solid rgba(126, 5, 232, .25);
  font-size: 18px;
}
.joinbar__label { color: var(--content-secondary); font-weight: var(--font-weight-medium); }
.joinbar__url { font-weight: var(--font-weight-semibold); }
.joinbar__sep { color: var(--content-highlight); }
.joinbar__pin {
  font-family: var(--font-accent);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--poodle-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
[data-theme="dark"] .joinbar__pin { color: var(--poodle-40); }
@media (max-width: 640px) { .joinbar { font-size: 14px; } .joinbar__pin { font-size: 22px; } }

/* ── Host bar ─────────────────────────────────────────────────────────────── */

.hostbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.hostbar__title { font-family: var(--font-accent); font-size: 18px; font-weight: 700; }
.hostbar__pin { font-family: var(--font-accent); font-weight: 700; letter-spacing: .1em; }

.results { display: grid; gap: var(--space-3); }
.result { display: flex; align-items: center; gap: var(--space-3); }
.result__bar { flex: 1; height: 44px; border-radius: var(--radius-xs); background: var(--bg-secondary); overflow: hidden; }
.result__fill { height: 100%; width: 0; border-radius: var(--radius-xs); transition: width .8s cubic-bezier(.2, .8, .2, 1); display: flex; align-items: center; padding-left: var(--space-3); color: #FFFFFF; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }