/* Sejlerquiz — app-specifikke tokens og layout. Bruges af værtssiden (index.html) og spillersiden (spil/). */
:root{
  /* svarfarver: ingen af dem er grøn eller rød, så de ikke blandes med rigtigt (--ok) og forkert (--danger).
     Hver farve har også sin egen form (trekant, rombe, cirkel, firkant). */
  --s1:#2D63C8; --s2:#7446BD; --s3:#B35A0C; --s4:#B83A72; --s-ink:#FFFFFF;
  /* QR-koden er altid mørk på lys, også i mørk tilstand, så kameraet kan læse den */
  --qr-bg:#FFFFFF;
  --gold:#C99A1E; --silver:#8A9AA3; --bronze:#A8673A; --podium-ink:#1B1B1B;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --s1:#2F62BF; --s2:#6E43B3; --s3:#A6550E; --s4:#AA386B;
    --gold:#E2B640; --silver:#A9B8C0; --bronze:#C9875A;
  }
}
:root[data-theme="dark"]{
  --s1:#2F62BF; --s2:#6E43B3; --s3:#A6550E; --s4:#AA386B;
  --gold:#E2B640; --silver:#A9B8C0; --bronze:#C9875A;
}

.wrap{max-width:1280px;margin:0 auto;padding:28px 16px 48px;display:grid;gap:var(--gap)}
#setup{display:grid;gap:var(--gap)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}

/* ---------- valg ---------- */
.setup{display:grid;gap:22px;max-width:960px}
.group{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
.group legend{font-family:var(--font-display);font-weight:800;font-size:1.2rem;padding:0;margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{min-height:48px;min-width:64px;padding:8px 18px;border:2px solid var(--line);border-radius:var(--radius-sm);
  background:transparent;color:var(--ink);font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px}
.opt:hover{border-color:var(--brand)}
.opt[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.opts--tema{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.opt--tema{justify-content:flex-start;min-height:64px;text-align:left;line-height:1.2}
.opt--tema svg{width:30px;height:30px;flex:none}
.opt--lvl{flex-direction:column;gap:0;min-width:140px;line-height:1.2;padding:8px 18px}
.opt--lvl b{font-family:var(--font-display);font-weight:800;font-size:1.15rem}
.opt--lvl small{font-size:.85rem;font-weight:400;opacity:.9}
.summary{margin:0;color:var(--ink-2)}
.summary b{color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{min-height:48px;padding:8px 20px;border:2px solid var(--line);border-radius:var(--radius-pill);background:var(--panel);
  color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.btn:hover{border-color:var(--brand)}
.btn:disabled{opacity:.5;cursor:default}
.btn--go{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-family:var(--font-display);
  font-weight:800;font-size:1.25rem;padding:8px 28px}
.btn--go:hover{filter:brightness(1.08)}
.err{margin:0;padding:12px 16px;border-left:4px solid var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent);
  border-radius:var(--radius-sm)}
.note-foot{max-width:72ch;color:var(--ink-2);font-size:.95rem;display:grid;gap:8px}
.note-foot p{margin:0}
.hint{margin:0;color:var(--ink-3);font-size:.9rem}

/* ---------- lobby ---------- */
.screen{display:grid;gap:var(--gap)}
.lobby{display:grid;gap:var(--gap);align-items:start}
@media (min-width:900px){.lobby{grid-template-columns:minmax(320px,5fr) 7fr}}
.qr-card{display:grid;gap:10px;justify-items:center;text-align:center}
.qr{width:min(100%,460px);aspect-ratio:1;background:var(--qr-bg);border-radius:var(--radius-sm)}
.qr svg{display:block;width:100%;height:100%}
.qr-tip{margin:0;font-weight:700;color:var(--ink-2)}
.lobby-info{display:grid;gap:12px;align-content:start}
.lobby-tema{color:var(--brand);font-size:clamp(1.6rem,3.5vw,2.4rem)}
.join-how{margin:0;font-size:1.15rem}
.join-how b{color:var(--brand);overflow-wrap:anywhere}
.pin{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,9vw,5.5rem);line-height:1;letter-spacing:.06em;color:var(--ink)}
.count{font-size:1.3rem}
.players{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;min-height:48px}
.players button{min-height:44px;padding:6px 14px;border:2px solid var(--line);border-radius:var(--radius-pill);background:var(--bg);
  color:var(--ink);font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.players button:hover{border-color:var(--danger)}
.players button svg{width:16px;height:16px;color:var(--ink-3)}
.players .off{opacity:.55}
.players .new{animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ---------- spørgsmål ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bar__n,.bar__a{font-weight:700;color:var(--ink-2);font-size:1.1rem}
.timer{position:relative;width:76px;height:76px;flex:none;display:grid;place-items:center}
.timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:4}
.timer__bg{stroke:var(--line)}
.timer__fg{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:119.4;transition:stroke-dashoffset .25s linear}
.timer.low .timer__fg{stroke:var(--warn)}
.timer.read .timer__fg{stroke:var(--ink-3)}
/* læsetid: hvad der sker nu, under spørgsmålet */
.phase{margin:0;text-align:center;font-weight:700;font-size:1.2rem;color:var(--ink-2)}
.phase--go{color:var(--brand);font-family:var(--font-display);font-weight:800;font-size:1.5rem}
.timer b{font-family:var(--font-display);font-weight:800;font-size:1.8rem;line-height:1}
.q{font-size:clamp(1.5rem,3.6vw,2.8rem);font-weight:800;text-align:center;max-width:32ch;margin:0 auto;overflow-wrap:break-word}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.ans{position:relative;display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 18px;border-radius:var(--radius-sm);
  background:var(--c);color:var(--s-ink);font-weight:700;font-size:1.15rem;line-height:1.25;border:3px solid transparent;
  text-align:left;overflow-wrap:break-word;min-width:0}
.ans__shape{width:30px;height:30px;flex:none}
.ans__t{flex:1;min-width:0}
.answers--host .ans{min-height:96px;font-size:clamp(1.15rem,2vw,1.6rem)}
.ans__n{flex:none;font-family:var(--font-display);font-weight:800;font-size:1.3rem;padding:0 10px;border-radius:var(--radius-pill);
  background:rgb(0 0 0 / .25)}
.ans__mark{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--panel)}
.ans__mark svg{width:22px;height:22px}
.ans--right .ans__mark{color:var(--ok)}
.ans--wrong .ans__mark{color:var(--danger)}
.revealed .ans--wrong{opacity:.4}
.revealed .ans--right{border-color:var(--ink);box-shadow:0 0 0 3px var(--ok)}
.ans__bar{position:absolute;left:0;bottom:0;height:6px;border-radius:0 0 0 var(--radius-sm);background:rgb(255 255 255 / .75);width:var(--w,0%)}
/* efter svarfristen: forklaringen og stillingen side om side (under hinanden på mobil) */
.after{display:grid;gap:var(--gap);align-items:start}
@media (min-width:900px){.after{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.why{display:grid;gap:6px;width:100%}
.board{display:grid;gap:10px}
.board__h{color:var(--brand);font-size:1.3rem}
.rank--side{width:100%}
.rank--side{gap:6px}
.rank--side li{padding:6px 14px;font-size:1.1rem}
.revealed .ans{min-height:64px}
.why p{margin:0}
.why__res{font-weight:700;color:var(--ink-2)}

/* ---------- stilling og podium ---------- */
.screen__h{color:var(--brand);font-size:clamp(1.8rem,4vw,2.8rem);text-align:center}
.rank{display:grid;gap:10px;margin:0 auto;padding:0;list-style:none;width:min(100%,720px);counter-reset:r}
.rank li{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 18px;font-size:1.25rem;font-weight:700}
.rank__p{font-family:var(--font-display);font-weight:800;color:var(--ink-3);min-width:2ch}
.rank__n{flex:1;min-width:0;overflow-wrap:anywhere}
.rank__pt{font-family:var(--font-display);font-weight:800;color:var(--brand)}
.rank__plus{font-size:.95rem;color:var(--ok);min-width:5ch;text-align:right}
.rank--all li{font-size:1.05rem;padding:8px 16px}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;margin:0 auto;padding:0;list-style:none;width:min(100%,760px)}
.podium li{display:grid;justify-items:center;gap:8px;text-align:center;min-width:0}
.podium__n{font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,2.6vw,1.8rem);overflow-wrap:anywhere;line-height:1.1}
.podium__pt{color:var(--ink-2);font-weight:700}
.podium__b{width:100%;border-radius:var(--radius-sm) var(--radius-sm) 0 0;display:grid;place-items:start center;padding-top:10px;
  font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--podium-ink);background:var(--m)}
.podium .p1{order:2}.podium .p1 .podium__b{height:180px}
.podium .p2{order:1}.podium .p2 .podium__b{height:130px}
.podium .p3{order:3}.podium .p3 .podium__b{height:95px}

@media (max-width:560px){
  .answers{grid-template-columns:1fr}
  .answers--host .ans{min-height:72px}
  .podium .p1 .podium__b{height:130px}.podium .p2 .podium__b{height:96px}.podium .p3 .podium__b{height:70px}
}
@media (prefers-reduced-motion:reduce){
  .players .new{animation:none}
  .timer__fg{transition:none}
}

/* ---------- spillersiden (spil/) ---------- */
.play{max-width:640px;margin:0 auto;padding:20px 16px 40px;display:grid;gap:18px;scroll-margin-top:8px}
.join{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-weight:700}
.field input{min-height:52px;padding:8px 14px;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);
  color:var(--ink);font:inherit;font-size:1.3rem}
.field input:focus-visible{border-color:var(--brand)}
.field--pin input{font-family:var(--font-display);font-weight:800;letter-spacing:.15em;font-size:1.6rem}
.big{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,7vw,2.4rem);line-height:1.1;margin:0;text-align:center}
.mid{margin:0;text-align:center;font-size:1.15rem}
.sub{margin:0;text-align:center;color:var(--ink-2)}
.state{display:grid;gap:12px;justify-items:center;text-align:center;padding:28px 20px}
.state__ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 14%,transparent)}
.state__ic svg{width:42px;height:42px}
.state--ok .state__ic{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.state--bad .state__ic{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.state--ok .big{color:var(--ok)}
.state--bad .big{color:var(--danger)}
.pq{margin:0;font-weight:700;font-size:1.15rem;text-align:center}
.pbar{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink-2);font-weight:700}
.pbar b{font-family:var(--font-display);font-size:1.6rem;color:var(--ink);min-width:2ch;text-align:right}
.play .phase{font-size:1.05rem}
.pbar--read b{color:var(--ink-3)}
.play .phase--go{font-size:1.3rem}
.answers--player .ans{width:100%;min-height:76px;cursor:pointer;font:inherit;font-weight:700;font-size:1.15rem}
.answers--player .ans:active{transform:scale(.98)}
/* låst i læsetiden: farven dæmpes, men teksten kan stadig læses */
.answers--player .ans:disabled{filter:grayscale(.75);cursor:default}
.answers--player .ans:disabled:active{transform:none}
.answers--player .ans:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.me{margin:0;text-align:center;color:var(--ink-2)}
.me b{color:var(--ink)}
.dots{display:flex;gap:8px;justify-content:center}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--brand);animation:dot 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.6}.answers--player .ans:active{transform:none}}
/* knapperne under spørgsmål, stilling og podium står midt på skærmen */
#play>.actions,#board>.actions,#slut>.actions{justify-content:center}