@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;700;800&display=swap');
/* Hjernetræning: roligt, lyst stenudtryk med Radils typografi. Egne tokens; mørk tilstand nedenfor. */
:root{
  --bg:#eef1ec;--surface:#fbfcf8;--surface2:#f3f5f0;--ink:#1f3138;--ink2:#4c6068;--muted:#5d6f75;--line:#d3dbd6;
  --navy:#213741;--accent:#2f6b73;--accentInk:#fff;--brandRed:#aa5b55;--focus:#c2553f;
  --good:#24774a;--goodBg:#e1f2e6;--bad:#b23b31;--badBg:#fbe5e2;--lit:#f2b84b;--litInk:#2a2208;
  --cell:#e4eae6;--cellLine:#c5cfca;--wall:#213741;--stage:#fbfcf8;
  --a-hukommelse:#6b5bb8;--a-fokus:#b5543c;--a-hastighed:#a86d0f;--a-logik:#2b7383;--a-sprog:#3d7a46;--a-matematik:#2f5c9e;--a-rumlig:#8e4a7e;
  --radius:16px;--shadow:0 10px 30px #1a333714;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141c1f;--surface:#1c262a;--surface2:#222e33;--ink:#e6ece8;--ink2:#b7c4c2;--muted:#9fb0b0;--line:#34444a;
  --navy:#0f181b;--accent:#6fb3b9;--accentInk:#0f1b1e;--brandRed:#e08a83;--focus:#ff9b85;
  --good:#7fd29b;--goodBg:#173426;--bad:#ff9a8f;--badBg:#3c1e1b;--lit:#f2b84b;--litInk:#2a2208;
  --cell:#2a373c;--cellLine:#3d4f55;--wall:#e6ece8;--stage:#1c262a;
  --a-hukommelse:#a99cf0;--a-fokus:#ef9a82;--a-hastighed:#e5b45a;--a-logik:#6cc0cf;--a-sprog:#86c98d;--a-matematik:#8cb1ef;--a-rumlig:#d99cc9;
  --shadow:0 10px 30px #0006;color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#141c1f;--surface:#1c262a;--surface2:#222e33;--ink:#e6ece8;--ink2:#b7c4c2;--muted:#9fb0b0;--line:#34444a;
  --navy:#0f181b;--accent:#6fb3b9;--accentInk:#0f1b1e;--brandRed:#e08a83;--focus:#ff9b85;
  --good:#7fd29b;--goodBg:#173426;--bad:#ff9a8f;--badBg:#3c1e1b;
  --cell:#2a373c;--cellLine:#3d4f55;--wall:#e6ece8;--stage:#1c262a;
  --a-hukommelse:#a99cf0;--a-fokus:#ef9a82;--a-hastighed:#e5b45a;--a-logik:#6cc0cf;--a-sprog:#86c98d;--a-matematik:#8cb1ef;--a-rumlig:#d99cc9;
  --shadow:0 10px 30px #0006;color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 'DM Sans',system-ui,sans-serif;min-height:100vh;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:'Manrope',system-ui,sans-serif;letter-spacing:-.03em;line-height:1.2;margin:0}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.top{background:var(--navy);color:#f3f0e9;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px max(16px,calc((100vw - 1080px)/2));padding-top:max(12px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:10px;color:#f3f0e9;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:-.5px}
.brandmark{display:block;background:#fff;color:#213741;width:34px;height:34px;border-radius:9px;text-align:center;font-weight:800;font-size:27px;line-height:32px}
.brandmark span,.brand .dot{color:#d0766f}
.brandlight{font-weight:400;color:#a9bac0}
.account{font-size:14px;display:flex;gap:12px;align-items:center;color:#d6e0e2;text-align:right}
.account a{color:#e8eef0}

main{max-width:1080px;margin:auto;padding:24px 16px 40px}
.back{display:inline-block;margin-bottom:14px;font-size:14px;color:var(--ink2);text-decoration:none}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.intro h1{font-size:clamp(34px,7vw,52px);font-weight:800}
.intro h1 span{color:var(--brandRed)}
.intro p.lead{color:var(--ink2);max-width:60ch;margin:10px 0 24px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;margin-bottom:28px}
.scoreTop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.bigScore{font:800 clamp(48px,11vw,68px)/1 'Manrope',system-ui,sans-serif;letter-spacing:-.04em}
.bigScore small{font-size:18px;font-weight:600;color:var(--muted);letter-spacing:0}
.pct{color:var(--ink2);font-size:15px;margin:6px 0 0}
.streak{background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600;white-space:nowrap}
.chart{margin-top:14px;position:relative}
.chart svg{display:block;width:100%;height:120px;overflow:visible}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .base{stroke:var(--line);stroke-width:1}
.chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.chart .dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.chart .axis{fill:var(--muted);font-size:11px}
.chart .hover{stroke:var(--muted);stroke-width:1}
.tip{position:absolute;top:-6px;transform:translate(-50%,-100%);background:var(--ink);color:var(--surface);font-size:13px;padding:4px 8px;border-radius:8px;pointer-events:none;white-space:nowrap}
.empty{color:var(--muted);font-size:14px;margin:10px 0 0}

.daily h2{font-size:20px;margin-bottom:4px}
.daily ol{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.daily li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.daily li .check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);font-size:14px;flex:none}
.daily li.done .check{background:var(--good);border-color:var(--good);color:var(--surface)}
.daily li .meta{font-size:13px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--ink2)}
.chip::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--area,var(--accent))}

.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:12px 18px;font-weight:700;min-height:48px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap}

.sectionHead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:8px 0 12px}
.sectionHead h2{font-size:22px}
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:28px}
.area{padding:12px 14px;border-top:4px solid var(--area)}
.area h3{font-size:15px;display:flex;justify-content:space-between;gap:8px}
.area .val{font:800 30px/1.1 'Manrope',system-ui,sans-serif;margin:6px 0 4px}
.area .val.unknown{color:var(--muted);font-size:17px;padding:6px 0 3px}
.meter{height:8px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--area);border-radius:999px}
.area p{margin:8px 0 0;font-size:13px;color:var(--ink2)}

.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:28px}
.gameCard{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border-left:4px solid var(--area);min-height:150px}
.gameCard:hover{border-color:var(--area);transform:translateY(-1px)}
.gameCard h3{font-size:18px}
.gameCard p{margin:0;font-size:14px;color:var(--ink2);flex:1}
.gameCard .stats{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}

details.settings{margin-top:8px}
details.settings summary{cursor:pointer;font-weight:700;padding:8px 0}
details.settings .card{margin-top:8px;display:grid;gap:14px}
.switch{display:flex;align-items:center;gap:10px;min-height:44px}
.switch input{width:22px;height:22px}
.note{font-size:14px;color:var(--ink2)}

/* ---------------------------------------------------------------- Spilvisning */
.playHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.playHead h1{font-size:clamp(22px,5vw,30px);flex:1;min-width:150px}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.hud div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 10px;text-align:center}
.hud small{display:block;font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:700}
.hud b{font:800 20px 'Manrope',system-ui,sans-serif}
.timebar{height:6px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);overflow:hidden;margin-bottom:12px}
.timebar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transition:transform .25s linear}
.stage{position:relative;background:var(--stage);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;min-height:min(70vh,560px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:box-shadow .2s,border-color .2s}
.stage.ok{border-color:var(--good);box-shadow:0 0 0 3px var(--good)}
.stage.bad{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad)}
#board{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px}
.status{min-height:26px;font-weight:700;text-align:center;color:var(--ink2)}
.status.ok{color:var(--good)}.status.bad{color:var(--bad)}

.prompt{text-align:center;width:100%;max-width:640px}
.prompt .text{font:700 clamp(22px,5.5vw,34px)/1.3 'Manrope',system-ui,sans-serif}
.prompt .text.big{font-size:clamp(34px,9vw,56px)}
.prompt .text.small{font-size:clamp(18px,4.5vw,24px)}
.prompt .sub{color:var(--ink2);margin-top:6px}
.stroop{background:#1d2629;border-radius:14px;padding:18px 12px;color:#fff}
.stroop .rule{font-size:13px;font-weight:700;letter-spacing:1.5px;color:#cfd8d6}
.stroop .word{font:800 clamp(42px,12vw,72px)/1.1 'Manrope',system-ui,sans-serif;letter-spacing:.02em}
.arrows{font:700 clamp(34px,10vw,64px)/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;white-space:nowrap}
.arrows.reverse{color:var(--bad)}
.reverseTag{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;border:2px solid var(--bad);color:var(--bad);font-weight:800;letter-spacing:1px;font-size:13px}
.keyrow{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.keyrow span{display:grid;grid-template-rows:auto auto;min-width:40px;border:1px solid var(--line);border-radius:10px;padding:4px 6px;background:var(--surface2)}
.keyrow span b{font-size:22px;line-height:1.2}
.keyrow span i{font-style:normal;font-weight:700;color:var(--ink2);border-top:1px solid var(--line)}
.bigsym{font-size:clamp(64px,18vw,104px);line-height:1}
.facts{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px;font-size:clamp(16px,4.2vw,20px);font-weight:600}
.facts li{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.question{font:800 clamp(20px,5vw,26px) 'Manrope',system-ui,sans-serif}
.light{width:min(46vw,180px);height:min(46vw,180px)}
.fix{font:300 64px/1 'DM Sans',sans-serif;color:var(--muted)}
.shapes{display:flex;justify-content:center;gap:clamp(16px,6vw,48px);align-items:center}
.shapes svg{width:min(36vw,170px);height:min(36vw,170px)}
.shapes rect{fill:var(--accent);stroke:var(--stage);stroke-width:.08}
.shapes .b rect{fill:var(--a-rumlig)}

.options{display:grid;gap:10px;width:100%;max-width:640px;grid-template-columns:repeat(2,minmax(0,1fr))}
.options.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.options.n1{grid-template-columns:1fr}
.options.digits{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
.options.list{grid-template-columns:1fr}
.opt{min-height:60px;border:2px solid var(--line);border-radius:14px;background:var(--surface);font-weight:700;font-size:clamp(17px,4.4vw,22px);padding:10px;color:var(--ink);overflow-wrap:anywhere}
.opt:hover{border-color:var(--accent)}
.opt.correct{border-color:var(--good);background:var(--goodBg)}
.opt.wrong{border-color:var(--bad);background:var(--badBg)}
.opt.go{min-height:110px;font-size:28px;background:var(--accent);color:var(--accentInk);border-color:var(--accent)}
.opt .k{display:block;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.5px}

.grid{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:8px;width:min(100%,440px,58vh);aspect-ratio:1;touch-action:none}
.grid .c{border:2px solid var(--cellLine);background:var(--cell);border-radius:12px;padding:0;min-width:0;min-height:0}
.grid .c.lit{background:var(--lit);border-color:var(--lit);color:var(--litInk)}
.grid .c.pick{background:var(--accent);border-color:var(--accent)}
.grid .c.miss{background:var(--badBg);border-color:var(--bad)}
.grid .c.answer{outline:3px dashed var(--good);outline-offset:-6px}
.grid.locked .c{cursor:default}
.maze{gap:0;border:3px solid var(--wall);border-radius:8px;overflow:hidden;background:var(--cell)}
.maze .c{border-radius:0;border:2px solid transparent;background:var(--cell);font:800 clamp(16px,5vw,26px) 'Manrope',sans-serif;color:var(--ink);box-shadow:inset 0 0 0 1px var(--cellLine)}
.maze .c.path{background:var(--accent);color:var(--accentInk)}
.maze .c.answer{background:var(--goodBg)}
.maze .c.miss{background:var(--badBg)}

.slots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.slot{width:clamp(34px,9vw,52px);height:clamp(44px,11vw,60px);border-bottom:3px solid var(--line);display:grid;place-items:center;font:800 clamp(22px,6vw,32px) 'Manrope',sans-serif;text-transform:uppercase;background:none;border-top:0;border-left:0;border-right:0;color:var(--ink);padding:0}
.slot.fixed{color:var(--muted)}
.tiles{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:560px}
.tile{width:clamp(44px,12vw,60px);height:clamp(48px,13vw,64px);border:2px solid var(--line);border-radius:12px;background:var(--surface);font:800 clamp(22px,6vw,30px) 'Manrope',sans-serif;text-transform:uppercase;color:var(--ink)}
.tile:disabled{opacity:.25}
.tile.chosen{border-color:var(--accent);background:var(--goodBg)}
.tokenGrid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,300px);margin:10px auto;border:1px solid var(--line)}
.tokenGrid>span{min-width:0;min-height:34px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:5px 2px;border:1px solid var(--line);font:700 clamp(13px,3.5vw,22px)/1.25 system-ui;overflow-wrap:anywhere;white-space:normal}
.tokenGrid .boxRight{border-right:3px solid var(--ink)}
.tokenGrid .boxBottom{border-bottom:3px solid var(--ink)}
.symbolRows{font:700 clamp(22px,5vw,32px)/1.5 system-ui;overflow-wrap:anywhere}
.pairGrid{width:min(100%,440px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pairCard{border:2px solid var(--line);border-radius:10px;min-height:64px;background:var(--cell);color:var(--ink);font:700 30px system-ui}
.pairCard.matched{border-color:var(--good);background:var(--goodBg)}
.symbolCells .c{font:700 clamp(18px,5vw,30px) system-ui;color:var(--ink)}
.spotPair{display:grid;gap:12px;width:min(100%,360px)}
.spotPair .tokenGrid{width:100%;margin:0}
.spotPair .grid{width:100%;max-height:30vh}
.opt .tokenGrid{margin:0;width:100%;pointer-events:none}
.opt .tokenGrid>span{min-height:24px;font-size:clamp(12px,3.5vw,20px);padding:2px}

.overlay{position:absolute;inset:0;background:var(--stage);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px;z-index:3;overflow:auto}
.overlay h2{font-size:clamp(24px,6vw,32px)}
.overlay p{max-width:52ch;margin:0;color:var(--ink2)}
.overlay .row{justify-content:center}
.resultGrid{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px;width:min(100%,420px);margin:6px 0}
.resultGrid div{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:8px}
.resultGrid small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.resultGrid b{font:800 22px 'Manrope',sans-serif}
.up{color:var(--good)}.down{color:var(--bad)}

footer{max-width:1080px;margin:0 auto;padding:16px 16px 32px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:760px){.hero{grid-template-columns:1fr}.top{padding-left:16px;padding-right:16px}.brandlight{display:none}.stage{padding:14px 10px;min-height:min(72vh,560px)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.gameCard:hover{transform:none}}
@media (forced-colors:active){.grid .c.lit,.grid .c.pick,.maze .c.path{forced-color-adjust:none;background:Highlight;color:HighlightText}}