/* Spelscherm in de Shiver-brandbookstijl (v1.0). Laadt na app.css en extra.css, dus wint van beide.
   Kleuren alleen via de variabelen uit app.css :root. Klikbaar = kaartkarton (2 px inkt, harde schaduw); grote vlakken blijven vlak. */

#play{padding:0 16px}

/* ---------- Kop: niveau met mascotte ---------- */
.top{padding:6px 0 0;gap:6px}
.ptitle{display:flex;align-items:center;justify-content:center;gap:8px;text-align:left;font-family:var(--font-serif)}
.ptitle .lvm{display:block;height:52px;width:auto;flex:none}
.ptitle .lvt{display:flex;flex-direction:column;min-width:0}
.ptitle .lvt b{font-family:var(--font-serif);font-weight:800;font-size:1.25rem;line-height:1;letter-spacing:-.02em}
.ptitle small{display:block;margin-top:3px;font-family:var(--font-sans);font-weight:500;font-size:12px;line-height:1.2;color:var(--muted)}
.steps{margin:6px 0 0;gap:4px}
.steps i{height:6px;border-radius:3px;border:2px solid var(--ink);background:var(--white)}
.steps i.on[data-h]{background:var(--wine)}
.steps i.on[data-h="1"]{background:var(--ice)}
.steps i.on[data-h="2"]{background:var(--rose)}
.steps i.on[data-h="3"]{background:var(--wine)}

/* ---------- Kleding: compacte chips ---------- */
.dressbar{gap:6px;margin-top:8px}
.dp{min-height:36px;padding:3px 10px;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--white);box-shadow:none;cursor:default}
.dp .dl{width:100%;min-width:0}
.dp .dn2{font-size:11px;font-weight:500;line-height:1.2;color:var(--muted)}
.dp .ds{font-family:var(--font-sans);font-weight:700;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;-webkit-line-clamp:unset}

/* ---------- Tafel en kaart ---------- */
.stage{padding:10px 6px 8px 0}
.card{width:min(100cqw,400px);height:min(100cqh,calc(min(100cqw,400px) * 1.5));aspect-ratio:auto}
.face{border-radius:20px;border:var(--bw) solid var(--ink);box-shadow:var(--sh)}

/* Voorkant: crème, inktrand, harde schaduw */
.front{background:var(--cream);padding:14px 16px 78px;gap:8px;color:var(--ink)}
.front::before{content:none}
.ctop{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.lvchip{display:inline-block;max-width:100%;padding:5px 10px;border:var(--bw) solid var(--ink);border-radius:99px;font-family:var(--font-sans);font-weight:700;font-size:11px;line-height:1.1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--ice);color:var(--ink)}
.lvchip[data-l="2"]{background:var(--rose);color:var(--ink)}
.lvchip[data-l="3"]{background:var(--wine);color:var(--white)}
.lvchip[data-l="4"]{background:var(--ink);color:var(--white)}
.front .code{position:static;flex:none;font-size:11px;font-weight:500;opacity:.55}

/* De tekst krijgt de ruimte; fitText() in ui.js maakt hem kleiner als hij niet past */
#front .ctext{flex:1 1 0;min-height:0;padding:2px 0;font-family:var(--font-serif);font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.01em;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.front.has-strip .ctext{font-size:26px}
#front .ctext p{margin:auto 0;overflow-wrap:anywhere}
.front .nm{color:var(--wine)}
.front .strip{flex:none;margin:0;padding:8px 10px 9px;border-radius:10px;border:2px dashed var(--ink);background:var(--white)}
.front .strip b{color:var(--wine);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-sans)}
.front .strip p{font-size:.95rem;line-height:1.2}

/* Hulpregel en kleine chips */
.front .meta{flex:none;padding:0;gap:6px}
.front .badge{padding:3px 9px;border-radius:99px;font-size:12px;font-weight:700;line-height:1.2;border:var(--bw) solid var(--ink);background:var(--ice);color:var(--ink)}
.front .badge.helper{padding:0;border:0;background:none;font-weight:500;font-size:14px;color:var(--muted)}
.front .badge.go{background:var(--rose)}

/* Timer: kaartkarton, compact (zelfde hoogte tijdens het lopen, zodat de tekst niet verspringt) */
.front .tbig,.front .tbig.running,.front .tbig.done{flex:none;margin:0;min-height:44px;padding:0 12px;gap:8px;border-radius:10px;border:var(--bw) solid var(--ink);background:var(--white);color:var(--ink);box-shadow:var(--sh-sm);font-family:var(--font-sans)}
.front .tbig .tfill{background:var(--ice)}
.front .tbig .tic{width:24px;height:24px;background:var(--ink);color:var(--white)}
.front .tbig .tl{font-size:13px;font-weight:700;white-space:nowrap}
.front .tbig .tt,.front .tbig.running .tt{font-family:var(--font-serif);font-weight:800;font-size:1.3rem;line-height:1}
.front .tbig.running{background:var(--ice)}
.front .tbig.running .tl{font-size:13px;font-weight:700}
.front .tbig.done{background:var(--wine);color:var(--white)}
.front .tbig.done .tic{background:var(--white);color:var(--wine)}
.front .tbig:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* Twee hoofdacties onderaan de kaart: "Not this one" (wit, geen schaduw) en "Done" (wijn).
   #ctl staat in #card maar buiten #inner, dus hij draait niet mee; voor het omdraaien is er alleen "Flip the card". */
.card{position:relative}
.card > .ctl{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:flex;gap:10px;padding:0}
.card > .ctl .btn{min-height:48px;padding:0 12px;font-size:15px;line-height:1.1}
.card > .ctl .btn.quiet{flex:1 1 0;background:var(--white);box-shadow:none}
.card > .ctl .btn.quiet:active:not(:disabled){transform:translate(1px,1px);box-shadow:none}
.card > .ctl .btn.quiet:disabled{background:var(--off)}
.card > .ctl .btn.primary{flex:1.25 1 0}
.card:not(.flipped) > .ctl .btn.quiet{display:none}
.card:not(.flipped) > .ctl .btn.primary{flex:1 1 auto;background:var(--cream);color:var(--ink)}

/* ---------- Achterkant: wijn met het app-icoon ---------- */
.back{background:var(--wine);color:var(--white)}
.bkpad{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 16px 64px;text-align:center}
.bkchip{position:absolute;top:14px;left:14px;padding:5px 10px;border:var(--bw) solid var(--ink);border-radius:99px;font-family:var(--font-sans);font-weight:700;font-size:11px;line-height:1.1;letter-spacing:.12em;text-transform:uppercase;background:var(--ice);color:var(--ink)}
.bkchip[data-l="2"]{background:var(--rose)}
.bkchip[data-l="3"]{background:var(--cream)}
.bkchip[data-l="4"]{background:var(--ink);color:var(--white);border-color:var(--cream)}
.bktile{width:104px;height:104px;border-radius:22px;background:var(--cream);border:var(--bw) solid var(--ink);display:grid;place-items:center;overflow:hidden}
.bktile img{display:block;width:100%;height:100%;object-fit:cover}
.back .who{margin:14px 0 0;padding:0;font-family:var(--font-serif);font-weight:800;font-size:2rem;line-height:1;letter-spacing:-.025em;color:var(--white);overflow-wrap:anywhere}
.back .hint{margin:0;font-family:var(--font-sans);font-size:15px;line-height:1.4;opacity:1;color:var(--white)}
.bkn{position:absolute;bottom:80px;left:0;right:0;font-family:var(--font-sans);font-weight:500;font-size:12px;color:var(--rose)}

/* ---------- Onder de kaart: rustige rij met de bijacties ---------- */
.cardx{flex:none;display:flex;flex-direction:column;gap:6px;padding:0 0 6px}
.cardx:empty{display:none}
#stage:not(:has(#card.flipped)) ~ .cardx{visibility:hidden}
#stage:has(#endcard:not([hidden])) ~ .cardx{display:none}
.cardx .xtra{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.cardx .xbtn{flex:0 1 auto;min-height:38px;padding:4px 12px;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--white);color:var(--ink);box-shadow:var(--sh-sm);font-family:var(--font-sans);font-weight:700;font-size:13px;line-height:1.15;cursor:pointer;transition:transform .08s,box-shadow .08s}
.cardx .xbtn small{font-size:11px;font-weight:500;color:var(--muted);margin-left:3px}
.cardx .xbtn:active:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.cardx .xbtn[aria-pressed="true"]{background:var(--ice);color:var(--ink);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.cardx .xbtn:disabled{box-shadow:none;background:var(--off);color:var(--off-ink);border-color:var(--off-ink);cursor:not-allowed}
.cardx .xbtn:disabled small{color:var(--off-ink)}
.cardx .xbtn.joker{flex:1 1 100%;background:var(--ice)}
.cardx .jokban{flex:1 1 100%;padding:8px 12px;border:0;border-radius:10px;background:var(--ice);color:var(--ink);font-size:13px}
.cardx .jmn{padding:8px;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--cream)}
.cardx .jmn .jmnq{flex:1 1 100%;margin:0;text-align:center;font-weight:700;font-size:13px}
.cardx .jmn .xbtn{flex:1 1 0}
.cardx .jmn .xbtn[aria-pressed="true"]{background:var(--ice)}

/* Tempo en eigen weg: tertiair, klein */
.pace{gap:8px;padding:0 0 8px}
.pbtn{min-height:44px;padding:4px 12px;border:var(--bw) solid var(--ink);border-radius:10px;background:var(--white);box-shadow:none;align-items:center;text-align:center;font-family:var(--font-sans)}
.pbtn b{font-weight:700;font-size:13px}
.pbtn span{font-size:11px}
.pbtn:disabled{border-color:var(--off-ink);color:var(--off-ink);background:var(--off)}
@media (hover:hover){.pbtn:hover:not(:disabled){background:var(--ice)}}

/* ---------- Einde: dezelfde kaart ---------- */
.endcard{width:min(100%,400px);max-height:100%;overflow-y:auto;padding:22px 20px;border:var(--bw) solid var(--ink);border-radius:20px;background:var(--cream);box-shadow:var(--sh)}
.endmascot{width:auto;margin:0 auto 6px}
.endmascot .endm{display:block;height:96px;width:auto;margin:0 auto}
.endcard h3{margin:0 0 10px;font-family:var(--font-serif);font-weight:800;font-size:clamp(1.75rem,8vw,2.25rem);line-height:1;letter-spacing:-.025em}
.endcard p{margin:0 auto 14px;max-width:30ch;color:var(--ink);font-size:15px;line-height:1.5}
.endcard .spark{font-size:13px;color:var(--muted)}
.endcard .btn{margin-top:10px}
.endcard #aftercare .btn{margin-top:0;min-height:48px}
.endcard #aftercare .linkbtn{margin:8px auto 14px}

/* ---------- Kleine telefoons ---------- */
@media (max-height:720px){
  .ptitle .lvm{height:48px}
  .steps{margin-top:4px}
  .dressbar{margin-top:6px}
  .dp{min-height:32px;padding:2px 8px}
  .stage{padding-top:8px;padding-bottom:6px}
  .front{padding:12px 14px 72px;gap:6px}
  .front .tbig,.front .tbig.running,.front .tbig.done{min-height:40px}
  .card > .ctl{left:14px;right:14px;bottom:14px}
  .card > .ctl .btn{min-height:46px}
  .cardx .xbtn{min-height:34px;padding:3px 10px;font-size:12px}
  .pbtn{min-height:38px;padding:2px 10px}
  .pbtn span{display:none}
  .bktile{width:84px;height:84px}
  .back .who{font-size:1.7rem}
}

/* ---------- Aftercare: rustig, in merkkleuren (ink-tegel, kaartkarton-knoppen) ---------- */
.ovl.afterdark{background:var(--ink);color:var(--cream)}
.ovl.afterdark .rhead h2{color:var(--cream);font-family:var(--font-serif);font-weight:800;letter-spacing:-.02em}
.ovl.afterdark .iconbtn{color:var(--ink);background:var(--cream);border-color:var(--cream)}
.ovl.afterdark .aq{font-family:var(--font-serif);font-weight:800;font-size:1.75rem;line-height:1.1;letter-spacing:-.02em;color:var(--white)}
.ovl.afterdark .aqs{color:var(--ice)}
.ovl.afterdark .btn{background:var(--cream);color:var(--ink);border:var(--bw) solid var(--cream);box-shadow:4px 4px 0 var(--rose)}
.ovl.afterdark .btn.primary{background:var(--ice);color:var(--ink);border-color:var(--cream);box-shadow:4px 4px 0 var(--cream)}
.ovl.afterdark .linkbtn{color:var(--ice)}
.ovl.afterdark .ownform h3,.ovl.afterdark .field span{color:var(--cream)}
.ovl.afterdark textarea{background:var(--cream);color:var(--ink);border:var(--bw) solid var(--cream)}
.ovl.afterdark .seg button{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.ovl.afterdark .seg button[aria-pressed="true"]{background:var(--ice);color:var(--ink)}

/* mission buttons: in the flow under the card (not floating over the card buttons) */
#mfloat{position:static;right:auto;bottom:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:0 0 8px}
#mfloat[hidden]{display:none}