/* radil-spil-ui.css – fælles udtryk for spillene, hentet fra forsiden (/radil-design/).
   Indlæses EFTER style.css, focus.css, spillets game.css og nature-v9.css.
   Se DESIGN.md i samme mappe. Tema: lys som standard; mørk via <html data-theme="dark">
   eller <html data-theme="auto"> (følger systemet). Alle farver er tokens – brug dem, ikke hex. */

/* ---------- 1. Tokens (lys) ---------- */
:root{
  /* flader */
  --rs-bg:#e8ede8;            /* sidebaggrund (tåget eng) */
  --rs-bg-deep:#d9dfdb;       /* bag siden, html */
  --rs-card:#fbfcf6f5;        /* kort, paneler */
  --rs-card-2:#eef2ec;        /* felter inde i kort (statistik, noter) */
  --rs-field:#f7f9f4;         /* input, select */
  --rs-backdrop:linear-gradient(180deg,#f0f3e9ad,#e8eee8e8 75%),url('/radil-design/misty-hills-v8.webp') center/cover no-repeat;
  --rs-backdrop-mobile:linear-gradient(180deg,#f0f3e9bc,#e8eee8ed 80%),url('/radil-design/misty-hills-mobile-v8.webp') center/cover no-repeat;
  --rs-granite:linear-gradient(125deg,#1d3c46e8,#263845ee),url('/radil-design/granite-v8.webp') center/350px;
  /* tekst */
  --rs-ink:#20353e;
  --rs-ink-soft:#415a64;
  --rs-muted:#526771;
  --rs-on-dark:#f6f1e8;       /* tekst på granit/navy */
  --rs-on-dark-soft:#c5d0d3;
  /* streger */
  --rs-line:#c9d3d0;
  --rs-line-strong:#becac6;
  --rs-line-on-dark:#657b7d;
  /* farver */
  --rs-navy:#213741;
  --rs-primary:#355f73;       /* knapper, aktive faner */
  --rs-primary-hover:#244858;
  --rs-primary-ink:#ffffff;
  --rs-accent:#aa5b55;        /* punktummet i overskriften, advarsler, fokus */
  --rs-peach:#e6c0aa;         /* forsidens varme accent – små mængder */
  --rs-peach-strong:#f4ad9c;
  --rs-tint:#dce8e3;          /* trykket/valgt tilstand, badges */
  --rs-tint-2:#e2e9e0;        /* noter, beskeder */
  --rs-tint-ink:#355b64;
  --rs-ok:#3f7d4c;
  --rs-warn-bg:#f3d6d0;
  --rs-warn-ink:#8a3a2e;
  /* form */
  --rs-radius:14px;
  --rs-radius-sm:10px;
  --rs-shadow:0 10px 30px #1a333710;
  --rs-shadow-deep:0 12px 35px #172b3333;
  --rs-focus:#aa5b55;
  /* skrift */
  --rs-font:'DM Sans',system-ui,sans-serif;
  --rs-font-head:'Manrope',system-ui,sans-serif;
  --rs-ease:160ms ease;
  --rs-heading-glow:0 1px 10px #ffffff80; /* nature-v9 lægger lys glød bag overskrifter */
}

/* ---------- 1b. Tokens (mørk) – samme navne, hentet fra hub og forside ---------- */
:root[data-theme="dark"]{
  --rs-bg:#162631;--rs-bg-deep:#101b25;
  --rs-card:linear-gradient(130deg,#2a3c47f5,#1b2d38f5);--rs-card-2:#1b2d38;--rs-field:#1f323d;
  --rs-backdrop:linear-gradient(110deg,#132835d9,#20323bba 50%,#18262fdc),url('/radil-design/misty-hills-v8.webp') center/cover no-repeat;
  --rs-backdrop-mobile:linear-gradient(110deg,#132835e3,#20323bcd),url('/radil-design/misty-hills-mobile-v8.webp') center/cover no-repeat;
  --rs-granite:radial-gradient(ellipse at 30% 0,#70878444,transparent 65%),linear-gradient(#203844d0,#162b36e8),url('/radil-design/granite-v8.webp') center/380px;
  --rs-ink:#f2efe7;--rs-ink-soft:#d0d9da;--rs-muted:#bdcbd0;--rs-on-dark:#f6f1e8;--rs-on-dark-soft:#c5d0d3;
  --rs-line:#a4b6b540;--rs-line-strong:#9db4af66;--rs-line-on-dark:#81979760;
  --rs-navy:#192e39;
  --rs-primary:#e3c3a6;--rs-primary-hover:#f2d8b9;--rs-primary-ink:#24313b;
  --rs-accent:#e5ad99;--rs-peach:#e6c0aa;--rs-peach-strong:#f4ad9c;
  --rs-tint:#758d8b40;--rs-tint-2:#243a43e8;--rs-tint-ink:#e6e9df;
  --rs-ok:#9ccf9a;--rs-warn-bg:#5a3430;--rs-warn-ink:#f1c9c0;
  --rs-shadow:0 18px 45px #06151b50;--rs-shadow-deep:0 18px 45px #06151b70;--rs-focus:#f4ad9c;--rs-heading-glow:none;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --rs-bg:#162631;--rs-bg-deep:#101b25;
    --rs-card:linear-gradient(130deg,#2a3c47f5,#1b2d38f5);--rs-card-2:#1b2d38;--rs-field:#1f323d;
    --rs-backdrop:linear-gradient(110deg,#132835d9,#20323bba 50%,#18262fdc),url('/radil-design/misty-hills-v8.webp') center/cover no-repeat;
    --rs-backdrop-mobile:linear-gradient(110deg,#132835e3,#20323bcd),url('/radil-design/misty-hills-mobile-v8.webp') center/cover no-repeat;
    --rs-granite:radial-gradient(ellipse at 30% 0,#70878444,transparent 65%),linear-gradient(#203844d0,#162b36e8),url('/radil-design/granite-v8.webp') center/380px;
    --rs-ink:#f2efe7;--rs-ink-soft:#d0d9da;--rs-muted:#bdcbd0;--rs-on-dark:#f6f1e8;--rs-on-dark-soft:#c5d0d3;
    --rs-line:#a4b6b540;--rs-line-strong:#9db4af66;--rs-line-on-dark:#81979760;
    --rs-navy:#192e39;
    --rs-primary:#e3c3a6;--rs-primary-hover:#f2d8b9;--rs-primary-ink:#24313b;
    --rs-accent:#e5ad99;--rs-peach:#e6c0aa;--rs-peach-strong:#f4ad9c;
    --rs-tint:#758d8b40;--rs-tint-2:#243a43e8;--rs-tint-ink:#e6e9df;
    --rs-ok:#9ccf9a;--rs-warn-bg:#5a3430;--rs-warn-ink:#f1c9c0;
    --rs-shadow:0 18px 45px #06151b50;--rs-shadow-deep:0 18px 45px #06151b70;--rs-focus:#f4ad9c;--rs-heading-glow:none;
    color-scheme:dark;
  }
}

/* ---------- 2. Gamle variabelnavne peger på tokens, så ældre spil-CSS følger med ---------- */
html:has(body[data-radil-theme]){background:var(--rs-bg-deep)}
body[data-radil-theme]{
  --navy:var(--rs-navy);--blue:var(--rs-primary);--red:var(--rs-accent);--muted:var(--rs-muted);--ink:var(--rs-ink);--line:var(--rs-line);
  background:var(--rs-bg);color:var(--rs-ink);font-family:var(--rs-font)
}
body[data-radil-theme]::before{background:var(--rs-backdrop)}
@media(max-width:700px){body[data-radil-theme]::before{background:var(--rs-backdrop-mobile)}}

/* ---------- 3. Typografi ---------- */
body[data-radil-theme] :is(h1,h2,h3,.rs-h1,.rs-h2,.rs-h3){font-family:var(--rs-font-head);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--rs-ink)}
body[data-radil-theme] :is(h1,.rs-h1){font-size:clamp(38px,5vw,52px);font-weight:700;letter-spacing:-.04em}
body[data-radil-theme] :is(h1,.rs-h1) span{color:var(--rs-accent)}
body[data-radil-theme] :is(h2,.rs-h2){font-size:23px;line-height:1.3}
body[data-radil-theme] :is(h3,.rs-h3){font-size:18px}
body[data-radil-theme] :is(.eyebrow,.rs-eyebrow){font:600 11px/1.4 var(--rs-font);letter-spacing:2.4px;text-transform:uppercase;color:var(--rs-muted);margin:0 0 10px}
body[data-radil-theme] :is(p,.rs-lead){line-height:1.65}
body[data-radil-theme] .rs-lead{font-size:17px;color:var(--rs-ink-soft);max-width:60ch}
body[data-radil-theme] :is(.muted,.rs-muted){color:var(--rs-muted);font-size:14px}
body[data-radil-theme] .rs-small{font-size:12px;color:var(--rs-muted)}
body[data-radil-theme] a{color:var(--rs-primary)}
body[data-radil-theme] .backToGames{color:var(--rs-muted)}
body[data-radil-theme] :is(.intro,.heading,.sectionIntro){text-shadow:var(--rs-heading-glow)}

/* ---------- 4. Knapper ---------- */
body[data-radil-theme] :is(button,.rs-btn){
  font:600 15px/1.2 var(--rs-font);color:var(--rs-ink);background:var(--rs-card);border:1px solid var(--rs-line-strong);border-radius:var(--rs-radius-sm);
  padding:10px 15px;cursor:pointer;transition:background var(--rs-ease),border-color var(--rs-ease),color var(--rs-ease)
}
body[data-radil-theme] :is(button,.rs-btn):hover{background:var(--rs-tint);border-color:var(--rs-tint-ink)}
body[data-radil-theme] :is(button,.rs-btn):disabled{opacity:.55;cursor:default}
body[data-radil-theme] :is(.primary,.playButton,.rs-btn--primary){background:var(--rs-primary);color:var(--rs-primary-ink);border-color:var(--rs-primary);box-shadow:0 5px 12px #1a333718}
body[data-radil-theme] :is(.primary,.playButton,.rs-btn--primary):hover{background:var(--rs-primary-hover);border-color:var(--rs-primary-hover);color:var(--rs-primary-ink)}
body[data-radil-theme] .rs-btn--quiet{background:transparent;border-color:transparent;font-weight:500}
body[data-radil-theme] .rs-btn--quiet:hover{background:var(--rs-tint);border-color:transparent}
body[data-radil-theme] .rs-btn--small{padding:6px 11px;font-size:13px}
body[data-radil-theme] button[aria-pressed="true"],body[data-radil-theme] .tools button[aria-pressed="true"]{background:var(--rs-tint);color:var(--rs-tint-ink);border-color:var(--rs-tint-ink)}
body[data-radil-theme] .tools button{background:none;border-color:transparent;font-weight:500;font-size:14px;color:var(--rs-ink)}
body[data-radil-theme] .tools button:hover{background:var(--rs-tint);border-color:transparent}
body[data-radil-theme] .tools button[aria-pressed="true"]{border-color:transparent}
body[data-radil-theme] :is(button,a,input,select,summary):focus-visible{outline:3px solid var(--rs-focus);outline-offset:3px}
body[data-radil-theme] .account button{background:#243a43;color:#fff;border-color:#4b6068}
body[data-radil-theme] .tabs button{background:none;border:0;border-radius:0;color:var(--rs-muted)}
body[data-radil-theme] .tabs button:hover{background:none;color:var(--rs-ink)}
body[data-radil-theme] .tabs button.active{color:var(--rs-primary)}
body[data-radil-theme] .tabs button.active:after{background:var(--rs-primary)}
body[data-radil-theme] .tabs{border-color:var(--rs-line)}

/* ---------- 5. Kort, paneler, lister ---------- */
body[data-radil-theme] :is(.sideCard,.leaderCard,.historyItem,.panel,.levelCard,.rs-card){
  background:var(--rs-card);border:1px solid var(--rs-line-strong);border-radius:var(--rs-radius);box-shadow:var(--rs-shadow);color:var(--rs-ink)
}
body[data-radil-theme] .rs-card{padding:24px;margin-bottom:18px}
body[data-radil-theme] :is(.sideCard p,.leaderCard>p,.historyItem p){color:var(--rs-muted)}
body[data-radil-theme] :is(.currentCard,.boardPreview,.rs-card--granite){background:var(--rs-granite);color:var(--rs-on-dark);border-color:var(--rs-line-on-dark)}
body[data-radil-theme] :is(.currentCard,.rs-card--granite) :is(h2,h3){color:var(--rs-on-dark)}
body[data-radil-theme] :is(.currentCard,.rs-card--granite) :is(p,.eyebrow,.rs-eyebrow){color:var(--rs-on-dark-soft)}
body[data-radil-theme] :is(.currentCard,.rs-card--granite) :is(.eyebrow,.rs-eyebrow){color:var(--rs-peach)}
body[data-radil-theme] .currentCard .eligibility{color:var(--rs-on-dark-soft);border-color:#ffffff22}
body[data-radil-theme] .currentCard .progressTrack{background:#ffffff22}
body[data-radil-theme] .currentCard #progressBar{background:var(--rs-peach)}
body[data-radil-theme] .accountNote{background:var(--rs-tint-2);color:var(--rs-ink)}
body[data-radil-theme] .boardFrame{border-color:var(--rs-navy);box-shadow:var(--rs-shadow-deep)}
body[data-radil-theme] .empty{background:var(--rs-card);border:1px dashed var(--rs-line-strong);color:var(--rs-muted)}
body[data-radil-theme] .leaderRow{border-color:var(--rs-line)}
body[data-radil-theme] footer{border-color:var(--rs-line-strong);color:var(--rs-muted)}
body[data-radil-theme] footer a{color:var(--rs-ink)}

/* små mærkater og tællere */
body[data-radil-theme] :is(.pill,.badge,.plus,.rs-pill){background:var(--rs-tint);color:var(--rs-tint-ink);border-radius:6px;padding:6px 9px;font-size:12px;font-weight:800;letter-spacing:1px}
body[data-radil-theme] .pillButton:hover{background:var(--rs-tint-2);color:var(--rs-tint-ink)}
body[data-radil-theme] :is(.scoreBox,.mineBox,.moveBox,.rs-counter){display:flex;align-items:center;gap:10px;background:var(--rs-navy);color:var(--rs-on-dark);border-radius:9px;padding:7px 14px}
body[data-radil-theme] :is(.scoreBox,.mineBox,.moveBox,.rs-counter) small{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--rs-on-dark-soft)}
body[data-radil-theme] :is(.scoreBox,.mineBox,.moveBox,.rs-counter) b{font-family:var(--rs-font-head);font-size:21px;font-variant-numeric:tabular-nums}
body[data-radil-theme] #clock{font-variant-numeric:tabular-nums;font-weight:700}

/* statistik-felter: tre små kasser i et kort (resultater, bedste tider) */
body[data-radil-theme] :is(.statGrid,.rs-stats){display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
body[data-radil-theme] :is(.statGrid,.rs-stats)>div{background:var(--rs-card-2);border-radius:var(--rs-radius-sm);padding:10px;text-align:center}
body[data-radil-theme] :is(.statGrid,.rs-stats) small{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--rs-muted)}
body[data-radil-theme] :is(.statGrid,.rs-stats) b{display:block;font-family:var(--rs-font-head);font-size:24px;font-variant-numeric:tabular-nums;color:var(--rs-ink)}
body[data-radil-theme] :is(.statGrid,.rs-stats) span{font-size:11px;color:var(--rs-muted)}

/* beskeder: fast plads under brættet, så det aldrig hopper */
body[data-radil-theme] #message,body[data-radil-theme] .rs-note{background:var(--rs-tint-2);color:var(--rs-ink);border:1px solid var(--rs-line-strong);border-radius:var(--rs-radius-sm);padding:12px 16px}
body[data-radil-theme] #message.error,body[data-radil-theme] .rs-note--warn{background:var(--rs-warn-bg);border-color:var(--rs-warn-bg);color:var(--rs-warn-ink)}
body[data-radil-theme] .boardColumn #message{min-height:42px;margin:10px 0 0;padding:10px 14px;font-size:14px}
body[data-radil-theme] .boardColumn #message:empty{display:block;visibility:hidden}
body[data-radil-theme] .boardFooter{color:var(--rs-muted)}
body[data-radil-theme] .keyboardHint{color:var(--rs-muted)}

/* regler: foldet tekst, der læses som en forklaring – ikke en manual */
body[data-radil-theme] .rules summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--rs-ink)}
body[data-radil-theme] .rules p{font-size:14px;line-height:1.7}
body[data-radil-theme] .rules b{color:var(--rs-ink)}

/* ---------- 6. Dialoger og formularer ---------- */
body[data-radil-theme] dialog{background:var(--rs-card);color:var(--rs-ink);border:1px solid var(--rs-line-strong);border-radius:20px;box-shadow:0 25px 80px #0b1a2240}
body[data-radil-theme] dialog::backdrop{background:#16263190;backdrop-filter:blur(4px)}
body[data-radil-theme] dialog p{color:var(--rs-muted)}
body[data-radil-theme] dialog .close{background:none;border:0;color:var(--rs-muted)}
body[data-radil-theme] :is(select,input:not([type=radio]):not([type=checkbox])){background:var(--rs-field);color:var(--rs-ink);border:1px solid var(--rs-line-strong);border-radius:9px}
body[data-radil-theme] .modeChoice{border:1px solid var(--rs-line);border-radius:var(--rs-radius-sm);background:transparent;transition:background var(--rs-ease),border-color var(--rs-ease)}
body[data-radil-theme] .modeChoice:hover{border-color:var(--rs-line-strong)}
body[data-radil-theme] .modeChoice:has(input:checked){border-color:var(--rs-primary);background:var(--rs-tint-2)}
body[data-radil-theme] .modeChoice small{color:var(--rs-muted)}
body[data-radil-theme] :is(.modeChoice input,.checkLabel input){accent-color:var(--rs-primary)}

/* ---------- 7. Layout-hjælpere ---------- */
.rs-stack{display:flex;flex-direction:column;gap:14px}
.rs-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rs-divider{border:0;border-top:1px solid var(--rs-line);margin:18px 0}

/* ---------- 8. Bevægelse: afdæmpet, aldrig i vejen ---------- */
body[data-radil-theme] .rs-lift{transition:transform .25s,border-color .25s}
body[data-radil-theme] .rs-lift:hover{transform:translateY(-3px);border-color:var(--rs-peach)}
@media(prefers-reduced-motion:reduce){
  body[data-radil-theme] :is(button,.rs-btn,.modeChoice,.rs-lift){transition:none}
  body[data-radil-theme] .rs-lift:hover{transform:none}
}

/* ---------- 9. Fuldskærm og print ---------- */
body[data-radil-theme].game-focus::before,body[data-radil-theme].board-only::before{background:var(--rs-bg)}
@media print{body[data-radil-theme]::before{display:none}body[data-radil-theme]{background:#fff;color:#000}}