/* Audience app: guess along on every question, vote in the audience joker, see the leaderboard.
   Same refined show look as the quizmaster desk (show-ui.css): flat fills, nothing below 15 px,
   44 px+ targets, state in words as well as colour. */

body.play {
  min-height: 100dvh;
  background: radial-gradient(ellipse 120% 60% at 50% 0%, #0d1f6b 0%, #040c33 55%, var(--night) 100%) fixed;
  color: var(--s-text);
}
.pl-top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: rgba(1, 4, 15, .94); border-bottom: 1px solid var(--s-line);
}
.pl-emblem svg { display: block; width: 36px; height: 36px; }
.pl-title { flex: 1; min-width: 0; font: 700 18px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-me {
  flex: none; max-width: 52%; min-height: 44px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--s-line-strong); background: var(--s-raise); color: var(--s-text);
  font: 600 16px/1.1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.pl-me b { color: var(--s-gold-hi); }
.pl-offline { margin: 0; padding: 10px 16px; background: var(--s-red); color: #fff; font: 700 16px/1.3 var(--font); }
.pl-main { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }

.pl-card { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 16px; padding: 18px; }
.pl-card.joker { border-color: rgba(247, 165, 49, .65); }
.pl-kicker { margin: 0 0 6px; font: 700 15px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--s-gold); }
.pl-h { margin: 0 0 8px; font: 800 26px/1.2 var(--font); }
.pl-h2 { margin: 0 0 12px; font: 700 19px/1.2 var(--font); }
.pl-p { margin: 0; font: 500 17px/1.45 var(--font); color: var(--s-muted); }
.pl-p b { color: var(--s-text); }
.pl-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; font: 600 15px/1.3 var(--font); color: var(--s-muted); }
.pl-meta b { color: var(--s-gold-hi); }
.pl-q { margin: 0 0 14px; font: 700 23px/1.3 var(--font); }
.pl-img { display: block; width: 100%; max-height: 240px; object-fit: contain; margin: 0 0 14px; border-radius: 10px; background: #000; }
.pl-welcome { text-align: center; }
.pl-welcome .emblem { display: block; margin: 0 auto 6px; }

/* ---------- answers ---------- */
.pl-answers { display: grid; gap: 10px; }
.p-ans {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px;
  width: 100%; min-height: 60px; padding: 10px 14px; border-radius: 12px;
  border: 2px solid var(--s-line-strong); background: var(--s-panel-2); color: var(--s-text);
  font: 600 19px/1.25 var(--font); text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.p-ans:disabled { cursor: default; }
.pl-answers.pickable .p-ans:not(:disabled):active { transform: scale(.985); }
.pa-l { font: 800 20px/1 var(--font); color: var(--s-gold); }
.pa-t { min-width: 0; overflow-wrap: anywhere; }
.pa-tag { padding: 4px 8px; border-radius: 6px; background: rgba(207, 218, 243, .16); font: 700 14px/1.1 var(--font); white-space: nowrap; }
.p-ans.empty { border-style: dashed; color: var(--s-muted); }
.p-ans.removed { opacity: .55; }
.p-ans.removed .pa-t { text-decoration: line-through; }
.p-ans.mine { border-color: var(--s-gold); box-shadow: inset 0 0 0 2px var(--s-gold); }
.p-ans.mine .pa-tag { background: var(--s-gold); color: var(--s-gold-ink); }
.p-ans.locked { background: var(--s-gold); border-color: var(--s-gold); color: var(--s-gold-ink); }
.p-ans.right { background: var(--s-green); border-color: var(--s-green); color: var(--s-green-ink); }
.p-ans.locked .pa-l, .p-ans.right .pa-l { color: inherit; }
.p-ans.locked .pa-tag, .p-ans.right .pa-tag { background: rgba(0, 0, 0, .2); color: inherit; }
.p-ans.miss { border-color: var(--s-red); box-shadow: inset 0 0 0 3px var(--s-red); }
.pl-hint { margin: 12px 0 0; font: 600 16px/1.4 var(--font); color: var(--s-muted); text-align: center; }
.pl-hint b { color: var(--s-text); }
.pl-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--s-red); color: #fff; font: 600 16px/1.35 var(--font); }

/* ---------- results ---------- */
.pl-result { padding: 16px 18px; border-radius: 14px; font: 800 24px/1.2 var(--font); }
.pl-result small { display: block; margin-top: 4px; font: 600 16px/1.35 var(--font); }
.pl-result.ok { background: var(--s-green); color: var(--s-green-ink); }
.pl-result.bad { background: var(--s-red); color: #fff; }
.pl-result.none { background: var(--s-raise); color: var(--s-text); }

.pl-bars { display: grid; gap: 8px; }
.pl-bar { display: grid; grid-template-columns: 22px 1fr 56px; align-items: center; gap: 10px; font: 700 17px/1 var(--font); }
.pl-bar > span:first-child { color: var(--s-gold); }
.pl-bar .b { height: 14px; border-radius: 7px; background: rgba(207, 218, 243, .14); overflow: hidden; }
.pl-bar .b i { display: block; height: 100%; background: var(--s-blue); }
.pl-bar.right .b i { background: var(--s-green); }
.pl-bar.right > span:first-child { color: var(--s-green-soft); }
.pl-bar .n { text-align: right; }
.pl-count { margin: 10px 0 0; font: 600 15px/1.3 var(--font); color: var(--s-muted); }
.pl-names { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--s-panel-2); font: 700 18px/1.4 var(--font); }
.pl-who { margin-top: 12px; }
.pl-who summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 700 16px/1.2 var(--font); color: var(--s-muted); }
.pl-who dl { margin: 4px 0 0; display: grid; grid-template-columns: 26px 1fr; gap: 6px 10px; font: 500 16px/1.4 var(--font); }
.pl-who dt { font-weight: 800; color: var(--s-gold); }
.pl-who dd { margin: 0; }
.pl-who dd.right { color: var(--s-green-soft); font-weight: 700; }

.pl-stand { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 600 17px/1.3 var(--font); }
.pl-stand b { font: 800 26px/1 var(--font); color: var(--s-gold-hi); }

/* ---------- name ---------- */
.pl-form { display: grid; gap: 10px; margin-top: 16px; }
.pl-form label { font: 700 16px/1.2 var(--font); }
.pl-form input {
  width: 100%; min-height: 54px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--s-line-strong);
  background: #fff; color: #0b1640; font: 700 20px/1 var(--font);
}
.pl-form input:focus { outline: 3px solid var(--s-gold); outline-offset: 2px; }
.pl-form .pl-err { margin: 0; }
.pl-form .d-link { justify-self: center; }

/* ---------- leaderboard ---------- */
.pl-board { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pl-board li {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px;
  min-height: 46px; padding: 6px 12px; border-radius: 10px; background: var(--s-panel-2); font: 600 18px/1.2 var(--font);
}
.pl-board .r { font-weight: 800; color: var(--s-gold); }
.pl-board .nm { min-width: 0; overflow-wrap: anywhere; }
.pl-board .pts { font-weight: 800; }
.pl-board li.me { background: var(--s-gold); color: var(--s-gold-ink); }
.pl-board li.me .r { color: inherit; }
.pl-board-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; padding: 0 12px 6px; font: 600 15px/1.2 var(--font); color: var(--s-muted); }

/* ---------- joker timer ---------- */
.pl-timer { height: 8px; margin-top: 14px; border-radius: 4px; background: rgba(207, 218, 243, .15); overflow: hidden; }
.pl-timer i { display: block; height: 100%; width: 100%; background: var(--s-gold); transform-origin: left; }

@media (prefers-reduced-motion: reduce) { .pl-answers.pickable .p-ans:active { transform: none; } }

/* ---------- contestant screen (/kandidat): same pieces, bigger, ladder at the side ---------- */
.k-amount { flex: none; font: 600 17px/1.2 var(--font); }
.k-amount b { color: var(--s-gold-hi); }
.k-main { max-width: 1280px; margin: 0 auto; padding: 18px 20px calc(36px + env(safe-area-inset-bottom)); display: grid; gap: 16px; }
.k-col, .k-side { display: grid; gap: 14px; align-content: start; }
.k-solo { max-width: 560px; justify-self: center; width: 100%; }
.k-q { font-size: clamp(24px, 2.8vw, 34px); }
.k-answers .p-ans { min-height: 76px; font-size: clamp(20px, 2.1vw, 26px); }
.k-answers .pa-l { font-size: clamp(21px, 2.2vw, 27px); }
.k-img { max-height: 320px; }
.k-jokers, .k-ladder { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.k-joker { display: flex; justify-content: space-between; gap: 10px; min-height: 44px; align-items: center; padding: 6px 12px; border-radius: 10px; background: var(--s-raise); font: 700 17px/1.2 var(--font); }
.k-joker.used { background: transparent; border: 1px dashed var(--s-line-strong); color: var(--s-muted); font-weight: 600; }
.k-ladder li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 3px 12px; border-radius: 8px; font: 600 17px/1.25 var(--font); color: var(--s-muted); }
.k-ladder li.safe { color: var(--s-text); font-weight: 800; }
.k-ladder li.done { color: var(--s-green-soft); }
.k-ladder li.now { background: var(--s-gold); color: var(--s-gold-ink); font-weight: 800; }
@media (min-width: 900px) {
  .k-main { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .k-answers { grid-template-columns: 1fr 1fr; }
  .k-side { position: sticky; top: 76px; }
}