/* Dagens oppvarming (B7). Ett kompakt kort – på forsiden i «Finn din vei inn»-
   kortenes stil, i appen i appens kortstil – og en dialog for selve runden.
   Flate farger, ingen klokke (hard-regel 3 og 11).

   Appen har tokens (--surface, --line, --ink …) og mørk modus; forsiden har
   ikke det. Derfor bruker reglene appens tokens med forsidens faste farger som
   reserve, og forsiden er lys, som resten av den. */

.dagens-spill{--ds-flate:var(--surface,#fff); --ds-linje:var(--line,#d3decb); --ds-linje2:var(--line2,#bacbb2);
              --ds-blekk:var(--ink,#234c40); --ds-dempet:var(--muted,#586b5b); --ds-myk:var(--bg2,#edf2e6);
              --ds-aksent:var(--forest,#285648);
              margin:0 0 22px; color:var(--ds-blekk);}
.spill-kort{display:flex; gap:16px; align-items:flex-start; background:var(--ds-flate);
            border:1px solid var(--ds-linje); border-radius:var(--r-m,16px); padding:20px 22px;}
.spill-siffer{flex:none; width:56px; height:56px; display:block;}
.spill-siffer svg{width:100%; height:100%; display:block; overflow:visible;}
.spill-tekst{min-width:0; flex:1;}
.spill-tekst .eyebrow{margin:0;}
.spill-tekst h2{font-size:1.2rem; line-height:1.25; margin:6px 0 4px;}
.spill-tekst>p{margin:0 0 12px; color:var(--ds-dempet); font-size:.95rem;}

.spill-chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px;}
.spill-chip{font:inherit; font-size:.85rem; font-weight:600; min-height:36px; padding:6px 13px;
            border-radius:999px; border:1px solid var(--ds-linje2); background:var(--ds-flate);
            color:var(--ds-blekk); cursor:pointer; font-variant-numeric:tabular-nums;}
.spill-chip:hover{border-color:var(--ds-blekk);}
.spill-chip[aria-checked="true"]{background:var(--ds-aksent); border-color:var(--ds-aksent); color:#fff;}
.spill-chip:focus-visible{outline:3px solid var(--orange,#ffb64b); outline-offset:2px;}

.spill-rad{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin:0;}
.spill-tall{margin:0; font-size:.85rem; color:var(--ds-dempet); font-variant-numeric:tabular-nums;}
.spill-tall:empty{display:none;}

/* ---- runden ---- */
.spill-dialog{--ds-flate:var(--surface,#fff); --ds-linje:var(--line,#d3decb); --ds-linje2:var(--line2,#bacbb2);
              --ds-blekk:var(--ink,#234c40); --ds-dempet:var(--muted,#586b5b);
              width:min(460px, calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow:auto;
              /* margin:auto er det som sentrerer en modal dialog. Appen nullstiller
                 margin på alle elementer (*{margin:0}), så den må settes her. */
              margin:auto; padding:0; border:1px solid var(--ds-linje); border-radius:18px;
              background:var(--ds-flate); color:var(--ds-blekk);}
.spill-dialog::backdrop{background:#142b2566;}
.spill-dialog-topp{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 0;}
.spill-dialog-topp .eyebrow{margin:0;}
.spill-lukk{background:none; border:0; font-size:1.5rem; line-height:1; min-width:44px; min-height:44px;
            cursor:pointer; color:var(--ds-dempet);}
.spill-dialog-innhold{padding:6px 22px 22px;}
.spill-dialog h2{font-size:1.4rem; margin:6px 0 8px;}
.spill-dialog p{margin:0 0 10px;}
.spill-status{font-size:.85rem; color:var(--ds-dempet); margin:0 0 6px;}
.spill-oppgave{font-size:2.2rem; font-weight:700; letter-spacing:.02em; margin:6px 0 14px; font-variant-numeric:tabular-nums;}
.spill-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.spill-form input{font:inherit; font-size:1.25rem; width:8ch; min-height:48px; padding:10px 12px; border-radius:10px;
                  border:1px solid var(--ds-linje2); background:var(--ds-flate); color:var(--ds-blekk);
                  font-variant-numeric:tabular-nums;}
.spill-fasit{min-height:1.4em; margin:12px 0 0; font-size:.92rem; color:var(--ds-dempet);}
.spill-rekord{font-weight:700; color:var(--green-deep,#5B7F1E);}
.spill-dialog .spill-rad{margin-top:14px;}

@media(max-width:520px){
  .spill-kort{padding:16px; gap:12px;}
  .spill-siffer{width:44px; height:44px;}
  .spill-tekst h2{font-size:1.1rem;}
  .spill-oppgave{font-size:1.8rem;}
}

/* Forsiden: ett kompakt kort i innholdets bredde rett under heroen, ikke en
   egen fullbreddeseksjon med luft som resten av seksjonene. */
.public-site .dagens-spill-band{padding-block:0 8px;}
.public-site .dagens-spill{margin:0;}
.public-site .spill-kort{padding:22px 26px; border-color:#d3decb; border-radius:16px;}
.public-site .spill-tekst h2{font-family:var(--font-display,inherit); font-size:1.35rem;}
@media(max-width:750px){.public-site .spill-kort{padding:20px;}}
@media print{.spill-dialog{display:none!important}}