/* Nookle 2.0: Dialed. Hvitt rom, svart apparat, presise gradeskiver, små rene
   lyder, kritisk dempede fjærer. Tokens, reset og felles komponenter. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: oklch(98.4% .003 255);
}
button, input { font: inherit; color: inherit; }
button {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
button:disabled { cursor: default; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }

:root {
  --ease-press: cubic-bezier(.2, .9, .3, 1.1); --dur-press: 260ms;
  --ease-base: cubic-bezier(.22, 1, .36, 1); --dur-base: 520ms;
  --ease-pop: cubic-bezier(.26, 1.45, .38, 1); --dur-pop: 560ms;
  --ease-soft: cubic-bezier(.16, 1, .3, 1); --dur-soft: 700ms;
  --ease-snap: cubic-bezier(.3, .7, .4, 1); --dur-snap: 300ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- tokens ---------- */
.app {
  --bg: oklch(98.4% .003 255);
  --bg-2: oklch(96.2% .004 255);
  --bg-3: oklch(93.6% .005 255);
  --surface: oklch(99.7% .002 255);
  --ink: oklch(19% .012 262);
  --ink-2: oklch(43% .012 262);
  --ink-3: oklch(53% .01 262);
  --line: oklch(91% .005 262);
  --line-2: oklch(83% .006 262);
  --accent: oklch(57% .23 22);
  --accent-ink: oklch(99% 0 0);
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
  --good: oklch(66% .17 150);
  --good-soft: oklch(95% .05 150);
  --bad: oklch(60% .2 25);
  --flame: oklch(70% .19 50);
  --flame-2: oklch(64% .23 30);
  --gold: oklch(80% .15 85);
  --gold-ink: oklch(45% .1 75);
  --scrim: oklch(19% .012 262 / .32);

  /* spillerfarger og tekst oppå dem */
  --p0: oklch(64% .23 22); --p1: oklch(77% .16 68); --p2: oklch(73% .13 182); --p3: oklch(61% .2 258);
  --p4: oklch(66% .25 338); --p5: oklch(74% .18 142); --p6: oklch(60% .21 296); --p7: oklch(83% .15 100);
  --pt0: oklch(99% 0 0); --pt1: oklch(99% 0 0); --pt2: oklch(99% 0 0); --pt3: oklch(99% 0 0);
  --pt4: oklch(99% 0 0); --pt5: oklch(99% 0 0); --pt6: oklch(99% 0 0); --pt7: oklch(20% .01 262);

  /* apparatet: det svarte instrumentet (konsoll, spillflate, kort) */
  --app-bg: oklch(17% .006 262);
  --app-bg-2: oklch(22% .008 262);
  --app-bg-3: oklch(27% .009 262);
  --app-ink: oklch(96% .003 255);
  --app-ink-2: oklch(72% .006 262);
  --app-ink-3: oklch(58% .008 262);
  --app-line: oklch(100% 0 0 / .09);

  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-num: 'Geist Mono', ui-monospace, monospace;
  --display-weight: 600;
  --display-track: -.035em;

  --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 22px; --r-xl: 28px;
  --shadow-1: 0 1px 2px oklch(19% .01 262 / .07), 0 6px 18px -8px oklch(19% .01 262 / .2);
  --shadow-2: 0 2px 6px oklch(19% .01 262 / .07), 0 24px 60px -18px oklch(19% .01 262 / .32);
  --shadow-3: 0 1px 0 oklch(100% 0 0 / .06) inset, 0 40px 80px -30px oklch(19% .01 262 / .5), 0 10px 24px -12px oklch(19% .01 262 / .28);
  --ring-dial: repeating-conic-gradient(var(--line-2) 0 1.4deg, transparent 1.4deg 6deg);
  --xp-ring: conic-gradient(from 0deg, oklch(70% .2 25), oklch(80% .16 80), oklch(78% .17 150), oklch(72% .14 220), oklch(64% .22 300), oklch(70% .2 25));
  --icon-stroke: 1.75;

  --top-h: 64px;
  --nav-h: 0px;
  --gutter: 32px;
  --page-w: 1440px; /* toppbaren, Kroken og alle sider deler denne bredden */

  /* spillene (Dialed-verdiene fra fase 1) */
  --game-bg: var(--app-bg); --game-ink: var(--app-ink); --game-ink-2: var(--app-ink-2);
  --bf-sky1: oklch(22% .012 262); --bf-sky2: oklch(33% .02 262); --bf-far: oklch(28% .012 262); --bf-mid: oklch(36% .014 262);
  --bf-snow: oklch(97% .003 255); --bf-snow2: oklch(93% .005 255); --bf-peng: oklch(16% .01 262); --bf-belly: oklch(98% 0 0);
  --bf-beak: oklch(77% .16 68); --bf-bear: oklch(96% .01 90); --bf-ink: oklch(15% .01 262); --bf-sun: oklch(64% .23 22);
  --aow-sky1: oklch(22% .012 262); --aow-sky2: oklch(30% .015 262); --aow-ground: oklch(36% .012 262); --aow-ink: oklch(12% .01 262); --aow-base: oklch(80% .006 262);
  --pip: oklch(99% 0 0);
  --art-a: var(--p0); --art-b: var(--p2); --art-c: var(--p1); --art-ink: oklch(15% .01 262); --art-paper: oklch(98% 0 0);
  --fig-eye: oklch(17% .01 262);
  --fig-shine: .26;

  position: fixed; inset: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  overflow: hidden;
  isolation: isolate;
  scrollbar-color: var(--line-2) transparent; scrollbar-width: thin;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.app input, .app textarea { -webkit-user-select: text; user-select: text; }
.app ::selection { background: color-mix(in oklch, var(--accent) 30%, transparent); color: inherit; }
.app :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.app input { caret-color: var(--accent); }

@media (max-width: 720px) {
  .app { --top-h: 56px; --nav-h: calc(62px + env(safe-area-inset-bottom)); --gutter: 16px; }
}

/* ---------- typografi ---------- */
.t-display { font: var(--display-weight) clamp(30px, 3.6vw, 48px)/1 var(--font-display); letter-spacing: var(--display-track); text-transform: lowercase; }
.t-title { font: var(--display-weight) 22px/1.1 var(--font-display); letter-spacing: -.025em; text-transform: lowercase; }
.t-label { font: 500 12px/1 var(--font-num); letter-spacing: .02em; text-transform: lowercase; color: var(--ink-3); }
.t-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.t-dim { color: var(--ink-3); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { font: var(--display-weight) 22px/1.1 var(--font-display); letter-spacing: -.025em; text-transform: lowercase; }
.sec-head small { font: 500 13px/1 var(--font-num); color: var(--ink-3); }

/* ---------- ikoner ---------- */
.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.ico .fill { fill: currentColor; stroke: none; }

/* ---------- trykkfølelse: lyd og bevegelse på pointerdown ---------- */
.tap {
  transition: scale var(--dur-press) var(--ease-press), translate var(--dur-press) var(--ease-press),
              background-color .2s, box-shadow .2s, opacity .2s, color .2s;
}
.is-down { scale: var(--press-s, .95); translate: 0 var(--press-y, 0); transition-duration: 80ms !important; transition-timing-function: var(--ease-snap) !important; }
.nudge { animation: nudge .38s var(--ease-snap); }
@keyframes nudge { 20% { translate: -5px 0; } 45% { translate: 4px 0; } 70% { translate: -2px 0; } }

/* ---------- knapper ---------- */
.btn, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 999px; white-space: nowrap; position: relative;
  font: 600 15.5px/1 var(--font-ui); letter-spacing: -.01em;
  background: var(--ink); color: var(--bg);
}
.btn .ico, .btn-primary .ico { width: 18px; height: 18px; }
.btn:disabled, .btn[aria-disabled="true"], .btn-primary:disabled { opacity: .38; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-soft { background: var(--bg-2); color: var(--ink); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-light { background: var(--app-ink); color: var(--app-bg); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; gap: 7px; }
.btn-sm .ico { width: 16px; height: 16px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 17px; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg-2); color: var(--ink-2); }
.btn-wide { width: 100%; }

/* hold-for-å-bekrefte: ringen fylles rundt knappen */
.btn-hold { overflow: hidden; isolation: isolate; }
.btn-hold::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--hold-fill, var(--good)); transform-origin: left; transform: scaleX(var(--hold, 0));
}

/* ---------- små byggeklosser ---------- */
.card { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); }
.card-pad { padding: 20px; }
.card-dark { background: var(--app-bg); color: var(--app-ink); border-radius: var(--r-l); box-shadow: var(--shadow-3); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  background: var(--bg-2); color: var(--ink-2); font: 600 12.5px/1 var(--font-ui); white-space: nowrap;
}
.pill .ico { width: 14px; height: 14px; }
.pill-dark { background: oklch(100% 0 0 / .08); color: var(--app-ink-2); }
.pill-accent { background: var(--accent); color: var(--accent-ink); }
.lvl-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font: 700 11.5px/1 var(--font-num); font-variant-numeric: tabular-nums;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; }

/* segmentkontroll med glidende markør */
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-2); isolation: isolate; }
.seg-opt { position: relative; z-index: 1; height: 36px; padding: 0 16px; border-radius: 999px; font: 600 14px/1 var(--font-ui); color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.seg-opt.is-on { color: var(--ink); }
.seg-opt .ico { width: 17px; height: 17px; }
.seg-ind { position: absolute; z-index: 0; top: 4px; left: 0; height: 36px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); will-change: transform, width; }
.seg-dark { background: oklch(100% 0 0 / .07); }
.seg-dark .seg-opt { color: var(--app-ink-3); }
.seg-dark .seg-opt.is-on { color: var(--app-bg); }
.seg-dark .seg-ind { background: var(--app-ink); box-shadow: none; }

/* bryter */
.switch { margin-left: auto; width: 36px; height: 22px; border-radius: 22px; background: var(--line-2); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: oklch(99% 0 0); transition: translate var(--dur-pop) var(--ease-pop); box-shadow: 0 1px 2px oklch(0% 0 0 / .25); }
.is-on > .switch, .switch.is-on { background: var(--good); }
.is-on > .switch::after, .switch.is-on::after { translate: 14px 0; }

/* fremdriftslinje */
.bar { height: 8px; border-radius: 8px; background: var(--bg-3); overflow: hidden; position: relative; }
.bar > i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); border-radius: inherit; background: var(--xp-ring); transition: transform .9s var(--ease-out); }

/* verktøytips (grafer) */
.tip {
  position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; padding: 7px 10px; border-radius: 9px;
  background: var(--ink); color: var(--bg); font: 500 12.5px/1.2 var(--font-ui); white-space: nowrap;
  opacity: 0; transition: opacity .12s; box-shadow: var(--shadow-2);
}
.tip.is-on { opacity: 1; }

/* tall som ruller som et telleverk */
.roll-d { display: inline-block; }
.roll-d.roll-in { animation: rollIn .38s var(--ease-pop) both; }
.roll-d.roll-down { animation: rollDown .38s var(--ease-pop) both; }
@keyframes rollIn { from { transform: translateY(70%); opacity: 0; } }
@keyframes rollDown { from { transform: translateY(-70%); opacity: 0; } }

/* ---------- figurer (SVG-brikker, farge fra --pc) ---------- */
.fig { width: 100%; height: 100%; overflow: visible; display: block; }
.fig .body { fill: var(--pc, var(--p0)); }
.fig .body > * { stroke: var(--fig-stroke, none); stroke-width: var(--fig-stroke-w, 0); paint-order: stroke; }
.fig .knit { fill: url(#knit); opacity: var(--knit, 0); pointer-events: none; }
.fig .shade { fill: url(#fig-shade); opacity: var(--fig-shade, 1); }
.fig .shine { fill: oklch(100% 0 0); opacity: var(--fig-shine); }
.fig .sclera { fill: oklch(99% 0 0); }
.fig .iris { fill: var(--fig-eye); }
.fig .glint { fill: oklch(100% 0 0); }
.fig .pupil { transform: translate(calc(var(--lx, 0) * 1.7px), calc(var(--ly, 0) * 1.5px)); transition: transform .14s ease-out; }
.fig .eye { transform-box: fill-box; transform-origin: center; animation: blink var(--blink-dur, 5s) infinite var(--blink-delay, 0s); }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.08); } }
.fig .mouth { fill: none; stroke: var(--fig-eye); stroke-width: 1.9; stroke-linecap: round; }
.fig .mouth-o { fill: var(--fig-eye); }
.fig .cheek { fill: oklch(72% .17 10); opacity: .38; }
.fig .acc-fill { fill: var(--acc); } .fig .acc-band { fill: var(--acc-2); }
.fig .acc-line { fill: none; stroke: var(--fig-eye); stroke-width: 2.2; stroke-linecap: round; }
.fig .acc-line.thick { stroke-width: 3.6; }
.fig .acc-ring { fill: oklch(100% 0 0 / .18); stroke: var(--fig-eye); stroke-width: 2; }
.fig .acc-leaf { fill: oklch(72% .17 145); }
.fig.acc-tone-0 { --acc: oklch(96% .01 90); --acc-2: oklch(62% .2 28); }
.fig.acc-tone-1 { --acc: oklch(62% .2 28); --acc-2: oklch(96% .01 90); }
.fig.acc-tone-2 { --acc: oklch(55% .16 255); --acc-2: oklch(92% .05 90); }
.fig.acc-tone-3 { --acc: oklch(30% .02 260); --acc-2: oklch(85% .14 85); }
.fig .crown { display: none; }
.fig.has-crown .crown { display: inline; animation: crownIn .7s var(--ease-pop); transform-box: fill-box; transform-origin: center bottom; }
@keyframes crownIn { from { transform: translateY(-14px) scale(.3); opacity: 0; } }
.fig .crown-fill { fill: oklch(84% .16 85); stroke: oklch(52% .12 70); stroke-width: 1.5; stroke-linejoin: round; }
.fig-breathe .fig { transform-origin: 50% 92%; animation: figBreathe 3.4s ease-in-out infinite var(--breathe-delay, 0s); }
@keyframes figBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.028); } }

/* avatar: figur i en hvit skive med valgfri ramme bak */
.avatar { position: relative; display: inline-block; vertical-align: middle; width: var(--av, 48px); height: var(--av, 48px); flex: none; border-radius: 50%; }
.avatar-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); }
.avatar .fig-wrap { position: absolute; inset: 10%; }
.avatar .ramme { position: absolute; inset: -14%; pointer-events: none; }
.avatar .avatar-lvl { position: absolute; right: -4px; bottom: -4px; box-shadow: 0 0 0 2.5px var(--bg); }

/* ---------- toasts ---------- */
.toasts {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 18px); translate: -50% 0; z-index: 75;
  width: min(440px, calc(100vw - 24px)); display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 16px;
  border-radius: var(--r-m); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-2); overflow: hidden; touch-action: none;
}
.toast-ico { width: 18px; height: 18px; opacity: .7; }
.toast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.toast-main { font: 600 14.5px/1.25 var(--font-ui); }
.toast-sub { font: 500 12px/1.2 var(--font-num); opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-undo { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: oklch(100% 0 0 / .12); font: 600 13.5px/1 var(--font-ui); flex: none; }
.toast-undo .ico { width: 15px; height: 15px; }
.toast-undo:disabled { opacity: .4; }
.toast.is-undone .toast-main { opacity: .7; }
.toast-time { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: .3; transform-origin: left; animation: toastTime linear forwards; }
.toast.is-paused .toast-time { animation-play-state: paused; }
@keyframes toastTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- lag ---------- */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 85; }
.fly-spark { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; color: var(--accent); will-change: transform; }
.fly-spark .ico { width: 18px; height: 18px; }

/* ---------- små animasjoner ---------- */
@keyframes bump { 35% { scale: 1.16; } }
@keyframes slam { 0% { scale: 1.7; } 40% { scale: .92; } 100% { scale: 1; } }
@keyframes popIn { from { opacity: 0; scale: .6; } }
@keyframes riseIn { from { opacity: 0; translate: 0 14px; } }
@keyframes fadeIn { from { opacity: 0; } }
.bump { animation: bump .42s var(--ease-pop); }

@media (prefers-reduced-motion: reduce) {
  .fig .eye, .fig-breathe .fig { animation: none; }
}

/* ---------- spillillustrasjoner (SVG fra registry.js) ---------- */
.art .art-a { fill: var(--art-a); } .art .art-b { fill: var(--art-b); } .art .art-c { fill: var(--art-c); }
.art .art-ink { fill: var(--art-ink); } .art .art-paper { fill: var(--art-paper); }
.art .art-line { fill: none; stroke: var(--art-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art .art-line.thick { stroke-width: 4.5; } .art .art-line.dash { stroke-dasharray: 2 7; }
.art-bellyflop { --art-b: oklch(73% .13 182); --art-c: oklch(77% .16 68); }
.art-ageofwar { --art-a: oklch(66% .25 338); --art-c: oklch(83% .15 100); }
.art-doodle { --art-a: oklch(73% .13 182); --art-c: oklch(77% .16 68); }
.art-wordfuse { --art-c: oklch(64% .23 22); }
.art-juiced { --art-a: oklch(64% .23 22); --art-b: oklch(74% .18 142); --art-c: oklch(83% .15 100); }
.art-bluff { --art-a: oklch(60% .21 296); }
.art-overunder { --art-a: oklch(74% .18 142); --art-c: oklch(64% .23 22); }
.art-dailynook { --art-c: oklch(64% .23 22); }
/* på det svarte apparatet blir blekket lyst */
.konsoll .art, .card-dark .art, .hg-art .art, .game-surface .art { --art-ink: oklch(94% .004 262); --art-paper: oklch(99% 0 0); }
.konsoll .art-bellyflop, .card-dark .art-bellyflop, .hg-art .art-bellyflop { --art-ink: oklch(94% .004 262); }