/* genereret af build.py fra ds/tokens.json — ret ikke i hånden */
.tk-pl-app, [data-theme="aften"] {
  --surface: #13241a;
  --surface-raised: #1e3528;
  --surface-sunk: #0e1c14;
  --ink: #f6f1e6;
  --ink-muted: #b7c6b2;
  --line: #2e4a39;
  --line-strong: #6f8c77;
  --skov: #2c4933;
  --lime: #a4c856;
  --on-lime: #17291c;
  --on-skov: #fbf8f1;
  --accent-ink: #a4c856;
  --glow: #f4b942;
  --glow-ink: #f4b942;
  --glow-soft: #3a3420;
  --pebernoed: #8a5530;
  --pebernoed-lys: #c98e5a;
  --baand: #b8402b;
  --sne: #fbf8f1;
  --nat: #0e1c14;
  --danger: #ff9a80;
  --focus: #ffd166;
  --scrim: #0e1c14cc;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --tap-min: 48px;
  --dice-button: 68px;
  --nav-height: 64px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 18px rgba(0,0,0,0.35);
  --shadow-lift: 0 12px 30px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 4px rgba(244,185,66,0.25), 0 0 28px rgba(244,185,66,0.55);
  --dur-quick: 160ms;
  --dur-base: 280ms;
  --dur-roll: 1100ms;
  --dur-fill: 700ms;
  --dur-open: 900ms;
  --dur-bell: 1400ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-land: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Figtree", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
[data-theme="dag"] {
  --surface: #fbf8f1;
  --surface-raised: #ffffff;
  --surface-sunk: #f1ecdf;
  --ink: #1b2a20;
  --ink-muted: #56645a;
  --line: #e3dccb;
  --line-strong: #7c8778;
  --accent-ink: #4e6b1c;
  --glow-ink: #8a5a00;
  --glow-soft: #fff3d6;
  --danger: #b3261e;
  --focus: #2c4933;
  --scrim: #1b2a2099;
  --shadow-card: 0 1px 2px rgba(27,42,32,0.08), 0 6px 18px rgba(27,42,32,0.08);
  --shadow-lift: 0 12px 30px rgba(27,42,32,0.18);
  color-scheme: light;
}

/* BetterFeast Pakkeleg 2026 — shared styles. Everything reads tokens.css vars. */
.pl, .pl * { box-sizing: border-box; }
.pl { font-family: var(--font-ui); color: var(--ink); -webkit-font-smoothing: antialiased; }
.pl h1, .pl h2, .pl h3 { font-family: var(--font-display); margin: 0; font-optical-sizing: auto; }
.pl p { margin: 0; }
.pl .num { font-variant-numeric: tabular-nums; }
.pl :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- phone frame used in screen previews ---------- */
.pl-phone { width: 360px; height: 720px; border-radius: 36px; overflow: hidden; position: relative; flex: none;
  background: var(--surface); color: var(--ink); box-shadow: 0 0 0 8px #0a120d, 0 20px 50px rgba(0,0,0,.35);
  display: flex; flex-direction: column; font-family: var(--font-ui); }
.pl-phone-caption { font: 600 13px/18px var(--font-ui); color: var(--ink-muted); margin-top: 18px; text-align: center; max-width: 360px; }
.pl-row { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; padding: 24px; }
.pl-col { display: flex; flex-direction: column; align-items: center; }

/* ---------- top bar ---------- */
.pl-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; min-height: 56px; flex: none; }
.pl-logo { display: flex; flex-direction: column; line-height: 1; }
.pl-wordmark { font: 700 18px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.pl-logo-sub { font: 700 12px/16px var(--font-ui); color: var(--accent-ink); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.pl-top-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--surface-raised); font: 650 14px/20px var(--font-ui); color: var(--ink); border: 1px solid var(--line); }
.pl-niveau-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(164,200,86,.25); }

/* ---------- scene ---------- */
.pl-scene-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #18301f; }
.pl-scene-wrap > svg { display: block; width: 100%; height: 100%; }
.pl-scene-wrap .pl-hilsen { position: absolute; left: 12px; right: 12px; top: 8px; z-index: 3; }
.pl-hud { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; justify-content: space-between; gap: 8px; z-index: 2; pointer-events: none; }
.pl-hud-chip { display: flex; flex-direction: column; padding: 5px 12px 6px; border-radius: 12px; background: rgba(14,28,20,.82); color: #f6f1e6;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); backdrop-filter: blur(4px); }
.pl-hud-chip b { font: 750 14px/19px var(--font-ui); font-variant-numeric: tabular-nums; }
.pl-hud-chip span { font: 500 13px/17px var(--font-ui); color: #b7c6b2; }
.pl-hud-chip.is-right { align-items: flex-end; text-align: right; }
.pl-hud-nod { color: #d9a06a; }

/* ---------- karm: bottom panel with the dice button ---------- */
.pl-karm { flex: none; background: var(--skov); color: var(--on-skov); padding: 12px 16px 10px; border-top: 3px solid #3d6347; }
.pl-slag { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font: 600 14px/20px var(--font-ui); }
.pl-prikker { display: inline-flex; gap: 6px; }
.pl-prik { width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px rgba(164,200,86,.3); transition: background var(--dur-base) var(--ease-out); }
.pl-prik.is-brugt { background: transparent; box-shadow: inset 0 0 0 2px #7f9a86; }
.pl-slag-tekst b { font-size: 16px; font-variant-numeric: tabular-nums; }
.pl-bonus { color: var(--lime); }
.pl-terningknap { appearance: none; border: 0; width: 100%; min-height: var(--dice-button); border-radius: var(--radius-pill); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px;
  background: var(--lime); color: var(--on-lime); font: 750 18px/24px var(--font-ui); box-shadow: 0 4px 0 #6f8f33, 0 0 24px rgba(164,200,86,.35);
  transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); }
.pl-terningknap:active { transform: translateY(3px); box-shadow: 0 1px 0 #6f8f33; }
.pl-terningknap:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.pl-terningknap-ikon { display: inline-flex; margin-left: -8px; }
.pl-terningknap-tekst { display: flex; flex-direction: column; align-items: flex-start; }
.pl-terningknap-tekst small { font: 600 13px/16px var(--font-ui); opacity: .85; }
.pl-terningknap.is-tom { background: #22392a; color: #d5dfd0; box-shadow: inset 0 0 0 2px #6f8c77; cursor: default; }
.pl-terningknap.is-tom .pl-terning { opacity: .45; filter: grayscale(1); }
.pl-terningknap.is-bonus { background: var(--glow); color: var(--nat); box-shadow: 0 4px 0 #b9862a, 0 0 24px rgba(244,185,66,.4); }
.pl-terningknap.is-ruller .pl-terning { animation: pl-tumle .45s linear infinite; }

/* ---------- bottom nav ---------- */
.pl-nav { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--line); min-height: var(--nav-height); }
.pl-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; text-decoration: none;
  color: var(--ink-muted); font: 650 13px/16px var(--font-ui); }
.pl-nav a.is-aktiv { color: var(--accent-ink); }
.pl-nav a.is-aktiv svg { filter: drop-shadow(0 0 6px rgba(164,200,86,.4)); }

/* ---------- buttons, chips ---------- */
.pl-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap-min); padding: 0 22px;
  border-radius: var(--radius-pill); font: 750 16px/22px var(--font-ui); cursor: pointer; border: 0; text-decoration: none; }
.pl-btn-primary { background: var(--lime); color: var(--on-lime); }
[data-theme="dag"] .pl-btn-primary, .pl-btn-primary.is-skov { background: var(--skov); color: var(--on-skov); }
.pl-btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); }
.pl-btn-ghost { background: transparent; color: var(--accent-ink); padding: 0 12px; }
.pl-btn-block { width: 100%; }
.pl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: var(--radius-pill);
  font: 650 13px/18px var(--font-ui); background: var(--surface-sunk); color: var(--ink-muted); }
.pl-chip.is-lime { background: var(--lime); color: var(--on-lime); }
.pl-chip.is-glow { background: var(--glow); color: var(--nat); }
.pl-chip.is-fiktiv { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-muted); }

/* ---------- cards & lists ---------- */
.pl-screen { flex: 1 1 auto; overflow: hidden; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.pl-h { font: 650 30px/34px var(--font-display); letter-spacing: -.01em; }
.pl-h2 { font: 600 21px/26px var(--font-display); }
.pl-sub { font: 400 16px/24px var(--font-ui); color: var(--ink-muted); }
.pl-card { background: var(--surface-raised); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-card); }
.pl-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-sunk); border-radius: var(--radius-pill); }
.pl-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); font: 650 14px/20px var(--font-ui); cursor: pointer; }
.pl-tabs button[aria-selected="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-card); }

.pl-mission { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; background: var(--surface-raised);
  border-radius: var(--radius-md); padding: 12px 14px; min-height: 72px; }
.pl-mission-ikon { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-sunk); display: grid; place-items: center; }
.pl-mission-titel { font: 650 16px/22px var(--font-ui); }
.pl-mission-beloen { font: 650 13px/18px var(--font-ui); color: var(--accent-ink); }
.pl-mission.is-klaret { opacity: .78; }
.pl-mission.is-klaret .pl-mission-titel { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pl-mission .pl-btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.pl-done { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/20px var(--font-ui); color: var(--accent-ink); }

.pl-rank { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; border-radius: 12px; }
.pl-rank + .pl-rank { border-top: 1px solid var(--line); }
.pl-rank-nr { font: 800 16px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-muted); text-align: center; }
.pl-rank-navn { font: 650 16px/20px var(--font-ui); display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-rank-navn small { font: 500 13px/18px var(--font-ui); color: var(--ink-muted); }
.pl-rank-point { font: 800 16px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--pebernoed-lys); }
[data-theme="dag"] .pl-rank-point { color: var(--pebernoed); }
.pl-rank.is-mig { background: var(--glow-soft); box-shadow: inset 0 0 0 2px var(--glow); }
.pl-rank.is-mig + .pl-rank { border-top-color: transparent; }

/* ---------- progress ---------- */
.pl-fremdrift-top { display: flex; justify-content: space-between; gap: 12px; font: 650 14px/20px var(--font-ui); margin-bottom: 6px; }
.pl-fremdrift-top b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pl-spor { height: 10px; background: var(--surface-sunk); border-radius: var(--radius-pill); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.pl-spor span { display: block; height: 100%; background: var(--lime); border-radius: inherit; }
.pl-fremdrift-hint { font: 500 13px/18px var(--font-ui); color: var(--ink-muted); margin-top: 6px; }
.pl-fremdrift.is-klar .pl-fremdrift-hint { color: var(--accent-ink); font-weight: 650; }

/* ---------- julehilsen / events ---------- */
.pl-hilsen { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--glow); color: var(--nat); box-shadow: var(--shadow-lift); font: 500 14px/19px var(--font-ui); }
.pl-hilsen b { display: block; font: 700 15px/20px var(--font-ui); }
.pl-hilsen-ikon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff6d8; display: grid; place-items: center; }
.pl-hilsen.is-overhalet { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-lift), inset 0 0 0 2px var(--danger); }
.pl-hilsen.is-overhalet .pl-hilsen-ikon { background: var(--surface-sunk); }
.pl-hilsen.is-info { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-lift), inset 0 0 0 1.5px var(--line-strong); }
.pl-hilsen.is-info .pl-hilsen-ikon { background: var(--surface-sunk); }
.pl-luk { margin-left: auto; appearance: none; border: 0; background: transparent; color: inherit; width: 44px; height: 44px; font: 400 26px/1 var(--font-ui); cursor: pointer; flex: none; }

/* ---------- badges ---------- */
.pl-maerke { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; text-align: center; font: 650 13px/16px var(--font-ui); }
.pl-maerke small { font: 500 12px/15px var(--font-ui); color: var(--ink-muted); }
.pl-maerke.is-laast svg { filter: grayscale(1) brightness(.7); opacity: .55; }

/* ---------- forms ---------- */
.pl-field { display: flex; flex-direction: column; gap: 6px; }
.pl-field label { font: 650 14px/20px var(--font-ui); }
.pl-input { min-height: 52px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong); background: var(--surface-raised);
  color: var(--ink); padding: 0 14px; font: 500 17px/24px var(--font-ui); width: 100%; }
.pl-check { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 10px 0; font: 400 15px/22px var(--font-ui); }
.pl-check .box { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line-strong); background: var(--surface-raised); display: grid; place-items: center; }
.pl-check.is-on .box { background: var(--lime); border-color: var(--lime); }
.pl-check.is-on .box::after { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--on-lime); border-bottom: 3px solid var(--on-lime); transform: translateY(-2px) rotate(-45deg); }
.pl-check small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; margin-top: 2px; }

/* ---------- sheets & overlays ---------- */
.pl-overlay { position: absolute; inset: 0; background: var(--scrim); display: flex; flex-direction: column; justify-content: flex-end; z-index: 5; }
.pl-overlay.is-center { justify-content: center; align-items: center; }
.pl-sheet { background: var(--surface-raised); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 12px 20px 24px; box-shadow: var(--shadow-lift); }
.pl-sheet::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 14px; }
.pl-moment { font: 700 44px/46px var(--font-display); letter-spacing: -.02em; }
.pl-pakkegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-pakkeplads { appearance: none; border: 0; min-height: 96px; border-radius: var(--radius-md); background: var(--surface-sunk); display: grid; place-items: center;
  color: var(--ink-muted); font: 650 13px/16px var(--font-ui); cursor: pointer; position: relative; padding: 6px; }
.pl-pakkeplads.is-valgt { box-shadow: inset 0 0 0 3px var(--lime), var(--shadow-glow); background: var(--surface-raised); }
.pl-pakkeplads.is-valgt svg { transform: translateY(-4px); }
.pl-pakkeplads[disabled] { cursor: default; }
.pl-pakkeplads.is-raekke { justify-items: start; }
.pl-pakkeplads .pl-nr { position: absolute; top: 6px; left: 8px; font: 700 13px/1 var(--font-ui); color: var(--ink-muted); }

/* ---------- desktop frame ---------- */
.pl-desk { width: 1200px; height: 760px; background: var(--surface); color: var(--ink); display: grid; grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); font-family: var(--font-ui); }
.pl-desk > .pl-top { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding: 12px 28px; }
.pl-desk-scene { display: flex; flex-direction: column; min-height: 0; }
.pl-desk-side { border-left: 1px solid var(--line); padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }

/* ---------- motion ---------- */
@keyframes pl-flakker { 0%,100% { transform: scale(1,1) } 30% { transform: scale(.94,1.06) } 60% { transform: scale(1.04,.96) } }
@keyframes pl-sne { from { transform: translateY(-6px) } to { transform: translateY(10px) } }
@keyframes pl-tumle { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } }
@keyframes pl-klokke { 0%,100% { transform: rotate(0) } 20% { transform: rotate(14deg) } 45% { transform: rotate(-11deg) } 70% { transform: rotate(6deg) } }
@keyframes pl-land { 0% { transform: translateY(-40px) rotate(-120deg) scale(.8) } 80% { transform: translateY(4px) rotate(8deg) scale(1.03) } 100% { transform: none } }
.pl-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-flakker 2.6s var(--ease-in-out) infinite; }
.pl-sne { animation: pl-sne 4s linear infinite alternate; }
.pl-klokke { transform-origin: 50% 5%; animation: pl-klokke var(--dur-bell) var(--ease-in-out) 1; }
.pl-land .pl-terning { animation: pl-land var(--dur-roll) var(--ease-land) 1; }
@media (prefers-reduced-motion: reduce) {
  .pl-flamme, .pl-sne, .pl-klokke, .pl-land .pl-terning, .pl-terningknap.is-ruller .pl-terning { animation: none !important; }
  .pl-terningknap, .pl-prik { transition: none; }
}

/* ---------- sekser: choose from the table ---------- */
.pl-valg { position: relative; margin: 4px -4px 14px; }
.pl-valg-row { display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 18px 4px 0; position: relative; z-index: 1; }
.pl-valg-bord { height: 22px; margin-top: -10px; border-radius: 6px; background: linear-gradient(#e0b27a, #c79660 60%, #8f6238); box-shadow: 0 6px 12px rgba(0,0,0,.35); }
.pl-valg-pakke { appearance: none; border: 0; background: transparent; padding: 0; margin: 0 -9px; min-width: 48px; min-height: 48px; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; border-radius: 12px; transition: transform var(--dur-base) var(--ease-land), filter var(--dur-base) var(--ease-out); }
.pl-valg-pakke svg { display: block; }
.pl-valg-pakke.is-valgt { transform: translateY(-16px) scale(1.12); filter: drop-shadow(0 0 10px rgba(164,200,86,.85)) drop-shadow(0 10px 8px rgba(0,0,0,.4)); }
.pl-valg-pakke:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pl-nabovalg { appearance: none; border: 0; width: 100%; display: grid; grid-template-columns: 56px 1fr 32px; gap: 12px; align-items: center; text-align: left;
  padding: 8px 12px; min-height: 76px; border-radius: var(--radius-md); background: var(--surface-sunk); color: var(--ink); cursor: pointer; }
.pl-nabovalg.is-valgt { background: var(--surface-raised); box-shadow: inset 0 0 0 3px var(--lime), var(--shadow-glow); }
.pl-nabovalg-tekst b { display: block; font: 650 16px/22px var(--font-ui); }
.pl-nabovalg-gaver { display: flex; gap: 0; margin-top: 2px; }
.pl-nabovalg-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--line-strong); font: 800 16px/1 var(--font-ui); color: var(--on-lime); }
.pl-nabovalg.is-valgt .pl-nabovalg-mark { background: var(--lime); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pl-valg-pakke { transition: none; } }

/* Pakkeleg working demo — app-skal, ark, desktop-layout og demo-panel. Lægger sig oven på ds/bundle.css. */
:where(.tk-pl-app) button, :where(.tk-pl-app) input { margin: 0; text-transform: none; letter-spacing: normal; line-height: inherit; border-radius: 0; box-shadow: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; min-height: 0; }
:where(.tk-pl-app) a { color: inherit; text-decoration: none; }
.tk-pl-app :where(h1, h2, h3, p, ul, ol, li, figure) { margin: 0; padding: 0; color: inherit; letter-spacing: normal; text-transform: none; } /* (0,1,0): slår temaets element-regler, taber til designsystemets klasser */
.tk-pl-app :where(ul, ol) { list-style: none; }
.tk-pl-app :where(label) { color: inherit; font-weight: inherit; font-size: inherit; text-transform: none; letter-spacing: normal; margin: 0; display: inline-block; }
.tk-pl-app :where(svg) { max-width: none; height: auto; vertical-align: middle; }
.tk-pl-app svg.pl-lys { overflow: visible; } /* kalenderlysets glød går ud over viewBox'en de første dage */
.tk-pl-app { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 560px; background: var(--surface); color: var(--ink); font-family: var(--font-ui); overflow: hidden; box-sizing: border-box; }
.tk-pl-app.is-fullscreen { position: fixed; inset: 0; z-index: 99999; height: auto; min-height: 0; }
.admin-bar .tk-pl-app.is-fullscreen { top: 32px; } /* WP-adminbjælken */
@media (max-width: 782px) { .admin-bar .tk-pl-app.is-fullscreen { top: 46px; } }
.admin-bar .tk-pl-app:not(.is-fullscreen) { margin-top: 12px; }
.tk-pl-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tk-pl-view > .pl-top { flex: none; gap: 12px; }
.tk-topright { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* v0.83.0 (Patrick 29/10): live-tælleren for administratorer på testlisten (kun når /nyheder sender puls) */
.tk-pl-app .tk-puls { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.28); color: #fbf8f1; font: 600 12px/1.2 var(--font-ui); white-space: nowrap; }
.tk-pl-app .tk-puls b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-pl-app .tk-puls i { width: 7px; height: 7px; border-radius: 50%; background: #74d17b; box-shadow: 0 0 0 2px rgba(116,209,123,.25); }
@media (max-width: 600px) { .tk-pl-app .tk-puls-mere { display: none; } }
.tk-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tk-scenecol { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tk-scroll, .tk-pl-app .pl-screen { overflow: auto !important; -webkit-overflow-scrolling: touch; }
.tk-pl-app .pl-screen { flex: 1 1 auto; min-height: 0; }
.tk-pl-app .pl-screen > * { flex: none; }
.tk-pl-app .pl-mission > span:nth-child(2) { min-width: 0; }
.tk-pl-app .tk-traefokus-tekst { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 600 13px/18px var(--font-ui); } /* v0.72.0 (#38) */
.tk-pl-app .tk-sekser-pr { display: grid; gap: 4px; margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-sunk); } .tk-pl-app .tk-sekser-pr-t { font: 700 12px/16px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); } .tk-pl-app .tk-sekser-pr-ik { display: flex; gap: 10px; align-items: center; } .tk-pl-app .tk-sekser-pr-ik svg { width: 36px; height: 36px; } .tk-pl-app .tk-sekser-pr small { font: 500 12px/16px var(--font-ui); color: var(--ink-muted); } /* v0.72.0 (#17) */
.tk-pl-app .tk-sg-styr { height: 42px; margin: 8px 0 0; border-radius: 999px; background: linear-gradient(90deg, #dbe9ff, #f6f9ff 50%, #dbe9ff); border: 1px solid #b7cdf5; display: grid; place-items: center; font: 600 12px/16px var(--font-ui); color: #2f3f66; touch-action: none; user-select: none; cursor: ew-resize; } /* v0.72.0 (#41): styrebjælken under Max Bite Hunter */
.tk-pl-app .tk-ven-tjek { display: grid; gap: 6px; margin-top: 12px; } /* v0.73.0: "Tjek om venner har bestilt" i del-arket */
.tk-pl-app .tk-profil-dage { margin: 10px 0 0; font: 600 14px/20px var(--font-ui); } /* v0.72.0 (#11): aktive dage på Profil */
.tk-pl-app .tk-ap-opdater { display: inline-block; margin-top: 8px; font: 650 13px/18px var(--font-ui); color: var(--accent-ink); background: none; border: 1.5px solid currentColor; border-radius: 999px; padding: 5px 12px; cursor: pointer; } /* v0.71.0: "Opdater abonnementer" i autoplay-arket */
.tk-pl-app .tk-ap-opdater[disabled] { opacity: .6; cursor: default; }
.tk-pl-app .tk-ap-note { display: block; margin-top: 4px; }
.tk-pl-app .pl-desk-side > * { flex: none; } /* v0.73.3 (Patrick 28/10: "den grønne baggrund … følger med i højden"): sidepanelet er en flex-kolonne med rulning — uden flex: none kunne kortene krympes til min-højden (72 px), når panelet var fuldt, og teksten løb ud af kortet (Cecilies #1 var samme fejl) */
.tk-pl-app .pl-mission { height: auto; min-height: 72px; } /* v0.70.0 (Cecilie 26/10: "Teksten går ud over boksen" ved "En ven startede abonnement"): kortet vokser med to linjers titel og belønning */
.tk-pl-app .pl-mission-titel, .tk-pl-app .pl-mission-beloen { overflow-wrap: anywhere; white-space: normal; }
.tk-pl-app .pl-scene-wrap { min-height: 220px; }
.tk-logo { display: flex; flex-direction: column; gap: 3px; text-decoration: none; min-width: 0; }
.tk-logo svg { height: 26px; width: auto; display: block; }
.tk-logo .pl-logo-sub { white-space: nowrap; }
.tk-pl-app .pl-top-chip { white-space: nowrap; }
.tk-logo-pos { display: none; }
[data-theme="dag"] .tk-logo-pos { display: block; }
[data-theme="dag"] .tk-logo-neg { display: none; }
.tk-topnav { display: none; gap: 2px; }
.tk-topnav a { padding: 8px 12px; border-radius: var(--radius-pill); font: 650 14px/20px var(--font-ui); color: var(--ink-muted); }
.tk-topnav a.is-aktiv { color: var(--accent-ink); background: var(--surface-sunk); }
.tk-udefra { position: relative; flex: none; height: 290px; overflow: hidden; }
.tk-udefra svg { display: block; width: 100%; height: 100%; }
.tk-center { align-items: center; text-align: center; justify-content: center; gap: 10px; background: radial-gradient(circle at 50% 30%, rgba(244,185,66,.22), transparent 60%); }
.tk-pkrow { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; justify-content: center; }
.tk-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.tk-hint { font: 500 13px/18px var(--font-ui); color: var(--ink-muted); }
.tk-pl-app .tk-terms-link { font: 600 14px/20px var(--font-ui); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.tk-err { color: var(--danger); font: 600 14px/20px var(--font-ui); }
.tk-tbd { color: var(--danger); font-weight: 750; white-space: nowrap; } /* v0.28.0 (Patrick 2/10): "(TBD)" sidst i titlen på missioner, der ikke er endelige */
.tk-note { font: 500 13px/18px var(--font-ui); color: var(--ink-muted); text-align: center; margin-top: 8px; }
.tk-lukket > .pl-chip { align-self: flex-start; } /* den lukkede skærm (live); centreres på PC */
.tk-check { appearance: none; border: 0; background: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tk-check:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.tk-pl-app .pl-btn[disabled] { opacity: .5; cursor: default; }
.tk-toast { position: absolute; left: 50%; bottom: calc(var(--nav-height) + 16px); transform: translateX(-50%); background: var(--surface-raised); color: var(--ink); padding: 10px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); font: 600 14px/20px var(--font-ui); z-index: 9; max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tk-demo { position: absolute; right: 12px; top: 58px; z-index: 8; }
/* demo-panelet er lilla, så testværktøjet skiller sig tydeligt ud fra spillets grønne flader (Patrick 24/9) */
.tk-demo-toggle { appearance: none; border: 0; cursor: pointer; padding: 6px 10px; border-radius: var(--radius-pill); background: #c4b5fd; color: #2e1065; font: 800 12px/16px var(--font-ui); min-height: 32px; flex: none; box-shadow: 0 0 0 2px rgba(196, 181, 253, .35); }
.tk-demo-toggle[aria-expanded="true"] { background: #6d28d9; color: #fff; box-shadow: 0 0 0 2px #c4b5fd; }
.tk-demo-panel { width: min(1080px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; background: #2e1065; color: #fff; border: 2px solid #a78bfa; border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(20, 0, 60, .6); padding: 10px; display: grid; gap: 6px; }
.tk-demo-h { font: 800 11px/14px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #ddd6fe; margin-top: 4px; }
.tk-demo-panel button { appearance: none; border: 0; cursor: pointer; text-align: left; padding: 8px 10px; border-radius: 8px; background: #6d28d9; color: #fff; font: 650 13px/18px var(--font-ui); min-height: 36px; }
.tk-demo-panel button:hover { background: #7c3aed; }
.tk-demo-panel button:focus-visible { outline: 3px solid #fde68a; outline-offset: 1px; }
/* v0.5.3 (Patrick 25/9): popup'en i grupper (5 kolonner på PC, 2 på mobil), gul kant på de mest brugte knapper */
.tk-demo-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; align-items: start; }
.tk-demo-ev { display: grid; gap: 4px; font: 650 13px/18px var(--font-ui); color: #fff; }
.tk-demo-ev select { width: 100%; padding: 7px 8px; border-radius: 8px; border: 0; background: #fff; color: #1b2a20; font: 600 13px/18px var(--font-ui); }
.tk-demo-ev-hint { font: 500 12px/16px var(--font-ui); color: rgba(255, 255, 255, .75); }
.tk-demo-grp { display: grid; gap: 6px; align-content: start; background: rgba(255, 255, 255, .06); border-radius: 10px; padding: 8px; }
.tk-demo-grp .tk-demo-h { margin: 0 0 2px; }
.tk-demo-panel button.is-vigtig { box-shadow: inset 0 0 0 2px #facc15; }
.tk-demo-panel button.is-nulstil { margin-top: 6px; background: transparent; box-shadow: inset 0 0 0 1px #a78bfa; }
.tk-demo-panel button.is-nulstil:hover { background: rgba(167, 139, 250, .2); }
.tk-demo-panel button.is-demo, .tk-demo-panel button.is-demo.is-usikker { margin-top: 6px; background: #ea580c; color: #fff7ed; box-shadow: inset 0 0 0 1px #fdba74; } /* v0.68.0 (Patrick 22/10): "Nulstil til demo" — orange; v0.69.0: også som rød (alle testere) */
.tk-demo-panel button.is-demo:hover, .tk-demo-panel button.is-demo.is-usikker:hover { background: #f97316; }
.tk-demo-legende > .is-demo { background: #ea580c; }
.tk-demo-panel button.is-ude { opacity: .45; } /* v0.6.1: spillets knapper uden for sæsonen (giver en besked) */
/* v0.22.1 (Patrick 30/9): grøn = sikker (kun din skærm), rød = ændrer data på serveren. Ikonet (✓ eller !) gør forskellen synlig uden farver */
.tk-demo-panel button.is-sikker { background: #166534; } .tk-demo-panel button.is-sikker:hover { background: #15803d; }
.tk-demo-panel button.is-usikker { background: #991b1b; } .tk-demo-panel button.is-usikker:hover { background: #b91c1c; }
.tk-demo-panel button.is-nulstil.is-usikker { background: #7f1d1d; box-shadow: inset 0 0 0 1px #fca5a5; }
.tk-demo-ikon { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: rgba(255, 255, 255, .92); font: 800 11px/1 var(--font-ui); vertical-align: -2px; }
.is-sikker > .tk-demo-ikon { color: #166534; } .is-usikker > .tk-demo-ikon { color: #991b1b; }
.tk-demo-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 10px; font: 650 12px/16px var(--font-ui); color: #fff; }
.tk-demo-legende > span { display: inline-flex; align-items: center; padding: 3px 8px 3px 4px; border-radius: 999px; }
.tk-demo-legende > .is-sikker { background: #166534; } .tk-demo-legende > .is-usikker { background: #991b1b; }
.tk-pl-app .pl-overlay { animation: tk-fade var(--dur-base) var(--ease-out); }
.tk-pl-app .pl-sheet { animation: tk-up var(--dur-base) var(--ease-out); max-height: 92%; overflow: auto; }
@keyframes tk-up { from { transform: translateY(24px); opacity: .6; } }
@keyframes tk-fade { from { opacity: 0; } }
.tk-drys { position: absolute; right: 12%; top: 40%; width: 60px; height: 90px; pointer-events: none; z-index: 2; }
.tk-drys span { position: absolute; top: 0; animation: tk-drop var(--dur-fill) var(--ease-land) both; }
@keyframes tk-drop { from { transform: translateY(-70px) scale(.6); opacity: 0; } 30% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(0) scale(1); opacity: 0; } }
.tk-after { animation: tk-fade .3s .35s both; }
.tk-pl-app .pl-pakke.is-aaben { animation: tk-pop var(--dur-open) var(--ease-land); transform-origin: 50% 80%; }
@keyframes tk-pop { from { transform: scale(.9); } 50% { transform: scale(1.1); } }
.tk-pl-app .pl-terningknap.is-ruller { pointer-events: none; }
.tk-stars { display: flex; gap: 6px; justify-content: center; }
.tk-star { width: 52px; height: 52px; border-radius: 12px; background: var(--surface-sunk); color: var(--glow); font-size: 28px; line-height: 1; cursor: pointer; }
.tk-star:hover, .tk-star:focus-visible { background: var(--glow-soft); }
.tk-opt { justify-content: flex-start; text-align: left; }
.tk-opt.is-forkert { opacity: .55; text-decoration: line-through; } /* 5·1: et forkert svar i dag (serverens gåde) */
.pl-mission.tk-gave-gylden { border: 2px solid #d9a92c; box-shadow: 0 0 0 3px rgba(217, 169, 44, .18); } /* v0.6.4: gaven fra den gyldne pakke */
.tk-pl-app [hidden] { display: none !important; }
.tk-pl-app .pl-hud { z-index: 3; align-items: flex-start; container-type: inline-size; } /* v0.6.4: 3 (før 2), så beskeden i HUD'en ligger i samme lag som før */
.tk-pl-app .pl-scene-wrap .pl-hilsen { z-index: 3; }
/* v0.6.4 (Patrick 26/9): beskeden (hilsen) står i HUD'en. Er der plads (HUD'en mindst 660 px, fx PC og tablet), står den midt i
   toppen mellem dato og pebernødder og dækker intet. Ellers (mobil, smal PC) ligger den som før oven på dem. */
.tk-pl-app .pl-hud .pl-hud-chip { flex: none; }
.tk-pl-app .pl-scene-wrap .pl-hud .pl-hilsen { pointer-events: auto; left: 4px; right: 4px; top: 0; }
@container (min-width: 660px) { .tk-pl-app .pl-scene-wrap .pl-hud .pl-hilsen { position: relative; left: auto; right: auto; top: auto; flex: 0 1 560px; min-width: 0; } }
/* v0.38.2 (Patrick 3/10 22.12): PC-layoutet gælder fra 1100 px (før 1000). Mellem 1000 og 1099 px beskar den brede stue træet (iPad liggende
   1024×768, iPad Pro stående 1024×1366); de får nu tablet-layoutet. Samme grænse i isWide() (game.js) og alle fire media queries her. */
@media (min-width: 1100px) {
  .tk-pl-app.is-home .tk-main { flex-direction: row; min-height: 0; }
  .tk-pl-app.is-home .tk-scenecol { flex: 1 1 auto; }
  .tk-pl-app.is-home .pl-desk-side { width: 380px; flex: none; overflow: auto; }
  .tk-pl-app .pl-nav { display: none; }
  .tk-topnav { display: flex; }
  /* v0.4.31 (Patrick 25/9): topbaren og den rullende flade er fuld bredde på alle sider (som i stuen); kun indholdet holdes på 1120 px (flows 680 px) */
  .tk-pl-app:not(.is-home) .pl-screen { padding: 8px max(32px, calc((100% - 1056px) / 2)) 28px; }
  .tk-pl-app .tk-cols { flex-direction: row; align-items: flex-start; gap: 28px; }
  .tk-pl-app .tk-col { flex: 1 1 0; }
  .tk-pl-app.is-home .pl-desk-side { width: 400px; padding: 12px 16px 24px 4px; }
  .tk-pl-app.is-flow .tk-pl-view > .pl-screen { flex: 0 1 auto; margin-block: auto; padding: 20px max(32px, calc((100% - 616px) / 2)) 36px; }
  .tk-pl-app.is-flow .tk-pl-view > :not(.pl-top):not(.pl-screen):not(.pl-nav) { width: 100%; max-width: 680px; margin-inline: auto; } /* udefra-billedet og bekræft-scenen som før */
  /* v0.5.2 (Patrick 25/9): billedet og teksten under det (forsiden/den lukkede skærm) centreres samlet; før stod billedet øverst og teksten midt i resten */
  .tk-pl-app.is-flow .tk-pl-view > .tk-udefra { margin-top: auto; border-radius: var(--radius-lg); }
  .tk-pl-app.is-flow .tk-pl-view > .tk-udefra + .pl-screen { margin-top: 0; }
  .tk-pl-app.is-flow .tk-lukket { align-items: center; text-align: center; } /* den lukkede skærm (live): teksten centreret under billedet */
  .tk-pl-app.is-flow .tk-lukket > .pl-chip { align-self: center; }
  .tk-pl-app .pl-karm { padding: 14px 28px; display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: center; }
  .tk-pl-app .pl-karm .pl-slag { margin-bottom: 0; }
  .tk-pl-app:not(.is-home) .pl-karm { grid-template-columns: 1fr; }
  .tk-pl-app .pl-sheet { max-width: 560px; width: 100%; margin: 0 auto; border-radius: var(--radius-lg); }
  .tk-pl-app .pl-overlay { justify-content: center; align-items: center; padding: 24px; }
  .tk-toast { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-pl-app .pl-overlay, .tk-pl-app .pl-sheet, .tk-drys span, .tk-after, .tk-pl-app .pl-pakke.is-aaben { animation: none !important; }
}
/* ---------- sne: falder kun nedad (overstyrer designsystemets frem-og-tilbage) ---------- */
.tk-pl-app .pl-sne { animation: tk-sne 7s linear infinite; }
.tk-pl-app .pl-sne:nth-child(2n) { animation-duration: 9s; animation-delay: -3s; }
.tk-pl-app .pl-sne:nth-child(3n) { animation-duration: 6s; animation-delay: -5s; }
.tk-pl-app .pl-sne:nth-child(5n) { animation-delay: -1.5s; }
@keyframes tk-sne { 0% { transform: translateY(-40px); opacity: 0; } 8% { opacity: .85; } 92% { opacity: .85; } 100% { transform: translateY(140px); opacity: 0; } }
/* ---------- klikbar pynt i scenen ---------- */
.tk-hit { cursor: pointer; transform-box: fill-box; }
.tk-sok.is-hit, .tk-hjerte.is-hit, .tk-billede.is-hit { transform-origin: 50% 0; animation: tk-swing 1.5s ease-in-out; }
.tk-nisse.is-hit { transform-origin: 50% 0; animation: tk-fall 3s ease-in-out; }
.tk-skaal.is-hit { transform-origin: 50% 100%; animation: tk-wobble 1s ease-in-out; }
.tk-lys.is-hit .pl-flamme { animation: tk-flare .9s ease-out; }
.tk-lys.is-hit .pl-lys-glow { animation: tk-glow .9s ease-out; transform-box: fill-box; transform-origin: 50% 50%; }
.tk-pakke.is-hit { transform-origin: 50% 100%; animation: tk-hop .7s ease-out; }
@keyframes tk-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 45% { transform: rotate(-11deg); } 70% { transform: rotate(6deg); } 85% { transform: rotate(-3deg); } }
@keyframes tk-fall { 0% { transform: translate(0, 0) rotate(0); animation-timing-function: ease-in; } 8% { transform: translate(2px, -6px) rotate(-6deg); animation-timing-function: ease-in; } 38% { transform: translate(6px, 170px) rotate(28deg); } 70% { transform: translate(6px, 170px) rotate(28deg); animation-timing-function: ease-out; } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes tk-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-2.5deg); } 80% { transform: rotate(1.5deg); } }
@keyframes tk-flare { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.7, 2.1); } }
@keyframes tk-glow { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.8); opacity: 1; } }
@keyframes tk-hop { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-18px) rotate(-5deg); } 70% { transform: translateY(0) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .tk-hit.is-hit, .tk-lys.is-hit .pl-flamme, .tk-lys.is-hit .pl-lys-glow { animation: none !important; } }
/* v0.14.0 (Patrick 29/9): tændstikken og adventskransen */
.tk-taendstik { pointer-events: none; }
.tk-taendstik .tk-ts { transform-box: fill-box; transform-origin: 0 0; animation: tk-taend .55s ease-out both; }
.tk-taendstik.is-vaek .tk-ts { animation: tk-taend-vaek .3s ease-in both; }
.tk-taendstik .tk-ts-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-ts-flakker .18s ease-in-out infinite alternate; }
@keyframes tk-taend { 0% { transform: translate(44px, 38px) rotate(-35deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(0, 0) rotate(0); opacity: 1; } }
@keyframes tk-taend-vaek { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(14px, 10px) rotate(20deg); opacity: 0; } }
@keyframes tk-ts-flakker { 0% { transform: scale(1); } 100% { transform: scale(1.15, .9); } }
.tk-kranslys.is-slukket .tk-flammegr { display: none; }
.tk-kranslys.is-venter { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .tk-taendstik .tk-ts, .tk-taendstik .tk-ts-flamme { animation: none !important; } }
/* ---------- topbar: tre tal ---------- */
.tk-stats { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--line); font: 700 14px/20px var(--font-ui); color: var(--ink); white-space: nowrap; }
.tk-stats span { display: inline-flex; align-items: center; gap: 4px; }
.tk-stats svg { display: block; flex: none; }
/* ---------- juletræ (indendørs): stjerne, lyskæde, kugler, flag, gaver, nisse ---------- */
.tk-trae-star { cursor: pointer; }
.tk-trae-star .tk-star-glow, .tk-trae-star .tk-gnist { pointer-events: none; } /* v0.7.0: gløden og gnisterne dækkede den øverste kugle (Patrick 27/9) */
.tk-trae-star .tk-star-glow { opacity: 0; transition: opacity .3s ease; transform-box: fill-box; transform-origin: 50% 50%; }
.tk-trae-star.is-on .tk-star-glow { opacity: 1; animation: tk-twinkle 2.6s ease-in-out infinite; }
.tk-trae-star .tk-star-shape { fill: #7a6a3a; transition: fill .3s ease; transform-box: fill-box; transform-origin: 50% 50%; }
.tk-trae-star.is-on .tk-star-shape { fill: #f4b942; }
.tk-trae-star.is-pop .tk-star-shape { animation: tk-pop .7s cubic-bezier(.34, 1.56, .64, 1); }
.tk-trae-star .tk-gnist { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.tk-trae-star.is-pop .tk-gnist { animation: tk-gnist .8s ease-out; }
@keyframes tk-pop { 0% { transform: scale(.5) rotate(-30deg); } 60% { transform: scale(1.4) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes tk-twinkle { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes tk-gnist { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.tk-lights { cursor: pointer; }
.tk-lights .tk-bulb-lys, .tk-lights .tk-bulb-glow { transition: fill .3s ease, opacity .3s ease; }
.tk-lights .tk-bulb-glow { pointer-events: none; } /* v0.32.0: skæret om pæren er pynt og tager ikke tryk; i den udzoomede stue på små telefoner (v0.31.0) tog det trykket fra træet */
.tk-trae.is-hit .tk-lights { pointer-events: none; } /* v0.32.0: mens træet svinger efter et tryk, går de næste tryk til træet (nisserne), ikke til en pære, der svinger ind under fingeren (kuglerne tager stadig tryk: påskeæggets melodi) */
.tk-lights.is-off .tk-bulb-lys { fill: #5a6a5e !important; }
.tk-lights.is-off .tk-bulb-glow { opacity: 0; }
.tk-lights.is-on .tk-bulb { animation: tk-blink 1.8s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.37s); }
.tk-lights.is-blink .tk-bulb { animation: tk-blink2 1s steps(1, end) infinite; }
.tk-lights.is-blink .tk-bulb:nth-of-type(2n) { animation-delay: .5s; }
.tk-lights.is-loeb .tk-bulb { animation: tk-loeb 1.4s linear infinite; animation-delay: calc(var(--i, 0) * -.09s); }
@keyframes tk-blink { from { opacity: .55; } to { opacity: 1; } }
@keyframes tk-blink2 { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }
@keyframes tk-loeb { 0%, 22% { opacity: 1; } 32%, 100% { opacity: .2; } }
.tk-kugle { cursor: pointer; transform-box: fill-box; transform-origin: 50% 0; }
.tk-kugle .tk-kugle-fill { transition: fill .25s ease; }
.tk-kugle.is-hit, .tk-trae.is-hit .tk-kugle { animation: tk-swing 1.2s ease-in-out; }
.tk-pynt-lag { pointer-events: none; } /* v0.7.2: pynten kan ikke trykkes; et tryk rammer træet */
.tk-pynt { transform-box: fill-box; transform-origin: 50% 0; }
.tk-trae.is-hit .tk-pynt { animation: tk-swing 1.2s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .tk-trae.is-hit .tk-pynt { animation: none; } }
.tk-trae-body { transform-box: fill-box; transform-origin: 50% 100%; }
.tk-trae.is-hit .tk-trae-body { animation: tk-shake .9s ease-in-out; }
@keyframes tk-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 50% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } }
.tk-trae-nisse { transform-box: fill-box; transform-origin: 50% 100%; }
.tk-trae-nisse.is-kig { animation: tk-kig 2.4s ease-in-out; }
@keyframes tk-kig { 0% { transform: translate(0, 0) rotate(0); } 22% { transform: translate(var(--dx, 34px), -6px) rotate(var(--rot, -12deg)); } 78% { transform: translate(var(--dx, 34px), -6px) rotate(var(--rot, -12deg)); } 100% { transform: translate(0, 0) rotate(0); } }
/* ---------- to kolonner på brede skærme, sidepanel, Nisse-News ---------- */
.tk-cols { display: flex; flex-direction: column; gap: 10px; }
.tk-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tk-col > * { flex: none; }
.tk-side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tk-side-link { display: inline-block; color: var(--accent-ink); font: 650 14px/20px var(--font-ui); text-decoration: none; }
.tk-side-link:hover, .tk-side-link:focus-visible { text-decoration: underline; }
.pl-desk-side > .tk-side-head { padding: 0 16px; } /* v0.6.6 (Patrick 27/9): "Missioner i dag" og tælleren flugter med titlerne inde i kortene (Nisse-News, Ugens stilling) */
.pl-desk-side > .tk-side-link { margin-left: 16px; }
.tk-news-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tk-live { font: 700 11px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--danger, #b8402b); display: inline-flex; align-items: center; gap: 6px; }
.tk-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: tk-live 1.6s ease-in-out infinite; }
@keyframes tk-live { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.tk-news-list { list-style: none; margin: 0; padding: 0; }
.tk-news-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); font: 500 14px/20px var(--font-ui); color: var(--ink); }
.tk-news-list li:first-child { border-top: 0; padding-top: 2px; }
.tk-news-list li.is-dig { font-weight: 650; }
.tk-news-list li.is-test, .tk-news-list li.is-test + li { border-top-color: transparent; }
.tk-news-list li.is-test { margin: 2px 0; padding: 8px 10px; border-radius: 12px; background: #ede9fe; color: #2e1065; font-weight: 650; } /* v0.6.1 (Patrick 26/9): lilla linje, når en tester starter forfra — lilla som demo-knappen */
.tk-news-list li.is-test .tk-news-tid { color: #5b21b6; }
.tk-news-list li.is-ny { animation: tk-newsin .5s ease-out; }
@keyframes tk-newsin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tk-news-ikon { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-sunk); display: grid; place-items: center; }
.tk-news-ikon svg { display: block; }
.tk-news-tid { font: 500 12px/20px var(--font-ui); color: var(--ink-muted); white-space: nowrap; }
.tk-person { all: unset; cursor: help; font: inherit; font-weight: 700; color: var(--accent-ink); border-bottom: 1px dotted currentColor; position: relative; }
.tk-person::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); background: var(--glow, #f4b942); color: #13241a; font: 600 12px/16px var(--font-ui); padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; z-index: 2; }
.tk-person:hover::after, .tk-person:focus-visible::after { opacity: 1; transform: none; }
.tk-mobilnews { padding: 0 16px 96px; }
.tk-log-wrap { overflow: auto; max-height: 440px; border: 1px solid var(--line); border-radius: 10px; }
.tk-log-tab { width: 100%; border-collapse: collapse; font: 500 13px/18px var(--font-ui); color: var(--ink); } /* farven sættes her: tabeller arver ikke farve i quirks-tilstand (demo.html uden doctype) */
.tk-log-tab th { text-align: left; font-weight: 700; color: var(--ink-muted); padding: 6px 8px; border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; background: var(--surface-raised); }
.tk-log-tab td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tk-log-tab td.num, .tk-log-tab th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-log-tab .is-plus { color: var(--accent-ink); font-weight: 700; }
.tk-log-tab .is-minus { color: var(--danger, #b8402b); font-weight: 700; }
.tk-pl-app.is-home .tk-scenecol { overflow: auto; }
/* v0.31.0 (Patrick 2/10): udzoomet på mobil ligger prikkerne og "Slå terningen" oppe over bordbenene. Scenen er 360 enheder bred og 470 høj; dugens kant
   slutter ved 412–415, og under den er der kun gulv og ben. Karmen rykker 52 enheder op (fra 418): 52/360 = 14,4 % af bredden (en procent-margen regnes af
   bredden, så det passer på alle telefoner). Ingen skjult ting, pakke, "Dine"-bunke eller kasse ligger dér (test_terning_synlig). */
.tk-pl-app.is-karm-op .tk-scenecol > .pl-karm { margin-top: calc(var(--stue-b, 100%) * -.144); position: relative; z-index: 4; } /* kun når knappen ellers ikke ses (stueTilpas) */
/* Patrick 2/10 (B): er der stadig ikke plads, bliver stuen smallere (--stue-b fra stueTilpas, aldrig under halv bredde); kolonnens grønne baggrund ses i siderne */
.tk-pl-app.is-stue-ud .pl-scene-wrap > svg { width: var(--stue-b, 100%); height: auto; margin-inline: auto; }
@media (max-width: 1099px) { .tk-pl-app.is-home .tk-scenecol > * { flex: none; } }
.tk-fund { cursor: pointer; transform-box: fill-box; transform-origin: 50% 50%; }
.tk-lev { cursor: pointer; transform-box: fill-box; transform-origin: 50% 100%; }
.tk-lev.is-ny { animation: tk-lev-in .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes tk-lev-in { 0% { transform: translate(-70px, -8px); opacity: 0; } 70% { transform: translate(3px, 0); opacity: 1; } 100% { transform: none; opacity: 1; } }
.tk-lev.is-hit { animation: tk-lev-tag .5s ease-in both; }
@keyframes tk-lev-tag { 0% { transform: scale(1); } 40% { transform: scale(1.25) translateY(-6px); } 100% { transform: scale(.2) translateY(-20px); opacity: 0; } }
.tk-nod { cursor: pointer; transform-box: fill-box; transform-origin: 50% 50%; }
.tk-nod.is-hit { animation: tk-fund .5s ease-out both; }
.tk-lev-ryst { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-lev-ryst 7s ease-in-out infinite; }
@keyframes tk-lev-ryst { 0%, 84%, 100% { transform: none; } 86% { transform: translateY(-2px) rotate(-7deg); } 89% { transform: rotate(6deg); } 92% { transform: translateY(-1px) rotate(-4deg); } 95% { transform: rotate(2deg); } 98% { transform: none; } }
.tk-fund-hint { transform-box: fill-box; transform-origin: 50% 50%; animation: tk-fund-hint 20s ease-in-out infinite both; }
@keyframes tk-fund-hint { 0%, 6%, 100% { transform: none; } 1% { transform: rotate(-16deg) scale(1.25); } 2.5% { transform: rotate(14deg) scale(1.25); } 4% { transform: rotate(-8deg) scale(1.1); } 5% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .tk-lev.is-ny, .tk-lev.is-hit, .tk-nod.is-hit, .tk-lev-ryst, .tk-fund-hint { animation: none !important; } }
.tk-fund.is-hit { animation: tk-fund .5s ease-out; }
@keyframes tk-fund { 0% { transform: scale(1) rotate(0); } 50% { transform: scale(1.8) rotate(180deg); } 100% { transform: scale(2.2) rotate(360deg); opacity: 0; } }
.tk-gylden { cursor: pointer; transform-box: fill-box; transform-origin: 50% 100%; }
.tk-gylden.is-hit { animation: tk-hop .9s ease-in-out; }
.tk-gylden text { letter-spacing: .08em; }
/* ---------- julesokker på stang, skål ---------- */
.tk-sok2 { cursor: pointer; }
.tk-sok2 .tk-sok-body { transform-box: fill-box; transform-origin: 50% 0; }
.tk-sok2.is-hit .tk-sok-body { animation: tk-sok-kick 1.4s ease-in-out; }
.tk-sok2 .tk-sok-nod { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.tk-sok2.is-hit .tk-sok-nod { animation: tk-sok-pop 1.3s ease-out; animation-delay: var(--d, 0s); }
@keyframes tk-sok-kick { 0% { transform: rotate(0) scale(1); } 12% { transform: rotate(-16deg) scale(1.08, .92); } 28% { transform: rotate(12deg) scale(.94, 1.1); } 44% { transform: rotate(-9deg) scale(1.05, .96); } 60% { transform: rotate(6deg) scale(.98, 1.03); } 78% { transform: rotate(-3deg) scale(1); } 100% { transform: rotate(0) scale(1); } }
@keyframes tk-sok-pop { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 42% { transform: translate(var(--dx, 0px), var(--h, -24px)) rotate(200deg); opacity: 1; } 80% { transform: translate(calc(var(--dx, 0px) * 1.4), 0) rotate(380deg); opacity: 1; } 100% { transform: translate(calc(var(--dx, 0px) * 1.4), 3px) rotate(380deg); opacity: 0; } }
.tk-skaal-nod { transform-box: fill-box; transform-origin: 50% 50%; }
.tk-skaal.is-hit .tk-skaal-nod { animation: tk-toss 1.1s cubic-bezier(.25, .7, .35, 1); animation-delay: var(--d, 0s); }
@keyframes tk-toss { 0% { transform: translate(0, 0) rotate(0); } 40% { transform: translate(var(--dx, 0px), var(--h, -20px)) rotate(180deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
/* ---------- guirlande, nabo-terning ---------- */
.tk-flagg { transform-box: fill-box; transform-origin: 50% 0; }
.tk-guirlande .tk-snor { filter: drop-shadow(0 4px 3px rgba(0,0,0,.35)); }
.tk-guirlande.is-hit .tk-flagg { animation: tk-flagwave 1.1s ease-in-out; }
.tk-guirlande.is-hit .tk-flagg:nth-of-type(2n) { animation-delay: .08s; }
@keyframes tk-flagwave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(6deg); } }
.tk-hjerte.is-hit { animation: tk-beat 1.2s ease-in-out; transform-origin: 50% 0; }
@keyframes tk-beat { 0%, 100% { transform: scale(1) rotate(0); } 20% { transform: scale(1.18) rotate(8deg); } 50% { transform: scale(1) rotate(-8deg); } 75% { transform: scale(1.1) rotate(3deg); } }
.tk-nabo-dice { transform-box: fill-box; transform-origin: 50% 50%; }
.tk-nabo-dice.is-ruller { animation: tk-nabo-spin .5s linear infinite; }
.tk-nabo-dice.is-landet { animation: tk-nabo-land .7s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes tk-nabo-spin { to { transform: rotate(360deg); } }
@keyframes tk-nabo-land { from { transform: translateY(-30px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tk-live::before, .tk-news-list li.is-ny, .tk-lights .tk-bulb, .tk-nabo-dice.is-ruller, .tk-nabo-dice.is-landet, .tk-guirlande.is-hit .tk-flagg, .tk-trae.is-hit .tk-trae-body, .tk-trae-star .tk-star-glow, .tk-trae-star .tk-star-shape, .tk-trae-star .tk-gnist, .tk-kugle, .tk-trae-nisse, .tk-sok2 .tk-sok-body, .tk-sok2 .tk-sok-nod, .tk-skaal-nod { animation: none !important; } }
/* ---------- nyhedsbrev: skål med pebernødder ---------- */
.tk-nl { position: relative; width: 112px; height: 90px; flex: none; }
.tk-nl-skaal { position: absolute; left: 8px; bottom: 0; }
.tk-nl-skaal svg { display: block; }
.tk-nl-drys span { position: absolute; display: block; }
.tk-nl-drys .is-ned { animation: tk-nl-ned .75s cubic-bezier(.34, 1.4, .64, 1) both; }
.tk-nl-drys .is-op { animation: tk-nl-op .7s ease-in both; }
@keyframes tk-nl-ned { from { transform: translateY(-80px) scale(.5); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes tk-nl-op { from { transform: none; opacity: 1; } to { transform: translateY(-90px) rotate(50deg); opacity: 0; } }
.tk-nl-count { position: absolute; right: 0; top: 2px; font: 800 16px/1 var(--font-ui); color: var(--accent-ink); opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.tk-nl-count.is-on { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .tk-nl-drys span { animation: none !important; } .tk-nl-count { transition: none; } }
/* præmie-visning (v0.4.13): stor = ekstra spil, lille = pebernødder */
.tk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-praemie { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(12, 24, 17, .35), rgba(12, 24, 17, .8)); animation: tk-pr-ind .25s ease-out both; }
.tk-praemie.is-ud { animation: tk-pr-ud .3s ease-in both; }
@keyframes tk-pr-ind { from { opacity: 0; } to { opacity: 1; } }
@keyframes tk-pr-ud { from { opacity: 1; } to { opacity: 0; } }
.tk-pr-fyr { position: absolute; inset: 0; width: 100%; height: 100%; }
.tk-pr-kort { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #f6f1e6; padding: 16px; }
.tk-pr-titel { font: 700 20px/26px var(--font-ui, system-ui, sans-serif); text-shadow: 0 2px 10px rgba(0, 0, 0, .55); max-width: 24ch; text-wrap: balance; animation: tk-pr-fade .35s .15s both; }
.tk-pr-terninger { display: flex; gap: 12px; min-height: 64px; justify-content: center; flex-wrap: wrap; max-width: 90vw; }
.tk-pr-terning { display: block; width: 64px; height: 64px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); animation: tk-pr-terning .6s cubic-bezier(.2, 1.3, .4, 1) calc(.85s + var(--i) * .15s) both; }
.tk-pr-terning svg { display: block; width: 64px; height: 64px; }
@keyframes tk-pr-terning { 0% { transform: translateY(90px) scale(.2) rotate(-40deg); opacity: 0; } 60% { transform: translateY(-14px) scale(1.12) rotate(8deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.tk-pr-gave { position: relative; width: 150px; height: 141px; animation: tk-pr-gave-ind .45s cubic-bezier(.2, 1.4, .4, 1) both, tk-pr-gave-ryst .35s .45s ease-in-out; }
.tk-pr-gave svg { position: relative; display: block; overflow: visible; }
.tk-pr-laag { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-pr-laag .55s .8s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes tk-pr-laag { to { transform: translate(-40px, -110px) rotate(-38deg); opacity: 0; } }
@keyframes tk-pr-gave-ind { from { transform: scale(.4) translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tk-pr-gave-ryst { 0%, 100% { transform: none; } 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
.tk-pr-glow { position: absolute; left: 50%; top: 40%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 185, 66, .75), rgba(244, 185, 66, 0) 65%); animation: tk-pr-glow 1.6s .8s ease-out both; }
@keyframes tk-pr-glow { 0% { transform: scale(.1); opacity: 0; } 30% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.4); opacity: .35; } }
.tk-pr-sum { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: tk-pr-fade .4s 1.05s both; }
.tk-pr-sum b { font: 800 34px/40px var(--font-ui, system-ui, sans-serif); color: #f4b942; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.tk-pr-sum span { font: 700 18px/24px var(--font-ui, system-ui, sans-serif); }
@keyframes tk-pr-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tk-praemie.is-rm .tk-pr-laag { display: none; }
.tk-pr-lille { position: fixed; z-index: 61; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(12, 24, 17, .88); color: #f6f1e6; font: 800 20px/26px var(--font-ui, system-ui, sans-serif); white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: tk-pr-lille 1.4s ease-out both; }
@keyframes tk-pr-lille { 0% { transform: translate(-50%, -30%) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -80%) scale(1.08); opacity: 1; } 70% { transform: translate(-50%, -120%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -160%); opacity: 0; } }
.tk-pr-nod { position: fixed; z-index: 61; width: 18px; height: 18px; pointer-events: none; }
.tk-pl-app .pl-hud-chip.tk-hud-puls { animation: tk-hud-puls .45s ease-out; }
@keyframes tk-hud-puls { 0% { transform: scale(1); } 40% { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(244, 185, 66, .6); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tk-praemie, .tk-praemie *, .tk-pr-lille, .tk-pl-app .pl-hud-chip.tk-hud-puls { animation: none !important; } }
/* v0.4.14: tallet på knappen, prikker for alle dagens spil, raflebæger (test) */
.tk-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-pl-app .pl-prik.tk-prik-bonus { background: #f4b942; box-shadow: 0 0 0 2px rgba(244, 185, 66, .3); }
.tk-prik-mere { font: 700 12px/14px var(--font-ui); color: #f4b942; align-self: center; }
.tk-pl-app .pl-terningknap-tekst small b { font-weight: 800; font-size: 15px; }
.tk-baeger { position: fixed; inset: 0; z-index: 55; cursor: pointer; animation: tk-pr-ind .18s ease-out both; }
.tk-baeger.is-ud { opacity: 0; transition: opacity .3s ease; }
.tk-bg-gulv { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 190, .3), rgba(255, 236, 190, 0)); }
.tk-bg-kop { position: absolute; transform-origin: 50% 100%; }
.tk-bg-vip { width: 100%; height: 100%; transform-origin: 85% 100%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45)); }
.tk-bg-vip svg, .tk-bg-flade svg { display: block; width: 100%; height: 100%; }
.tk-bg-terning { position: absolute; }
.tk-bg-flade { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); }
.tk-bg-ring { position: absolute; inset: -24%; border-radius: 50%; border: 3px solid rgba(244, 185, 66, 0); pointer-events: none; }
.tk-bg-terning.is-landet .tk-bg-ring { animation: tk-bg-ring .75s ease-out both; }
@keyframes tk-bg-ring { 0% { transform: scale(.6); border-color: rgba(244, 185, 66, .95); } 100% { transform: scale(1.35); border-color: rgba(244, 185, 66, 0); } }
.tk-bg-terning.is-seks .tk-bg-flade { filter: drop-shadow(0 0 18px rgba(244, 185, 66, .95)) drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); }
/* v0.4.15: pakkevalget — nedtælling og ingen gen-animation ved opdatering */
.tk-pl-app .pl-sheet.is-opdateret, .tk-pl-app .pl-sheet.is-opdateret *:not(.tk-valg-bar) { animation: none !important; }
.tk-valg { height: 6px; border-radius: 3px; background: rgba(127, 154, 134, .25); overflow: hidden; margin: 14px 0 6px; }
.tk-valg-bar { height: 100%; background: #f4b942; transform-origin: 0 50%; animation-name: tk-valg-bar; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes tk-valg-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tk-valg-tid { font: 600 13px/18px var(--font-ui); color: var(--ink-muted); text-align: center; margin: 0; font-variant-numeric: tabular-nums; }


/* v0.4.17 (Patrick 24/9): julemandens slæde fra 20/12 — flyver over himlen i vinduets glas-lag, mellem naboernes tællere og tagene; tryk = taleboble + vink, første tryk om dagen = julemagi på træet */
.tk-pl-app .tk-slaede { cursor: pointer; animation: tk-sl-fly 45s linear infinite; }
@keyframes tk-sl-fly {
  0% { transform: translate(-95px, 70px); }
  6% { transform: translate(-14px, 66px); }
  12% { transform: translate(67px, 63px); }
  18% { transform: translate(148px, 62px); }
  24% { transform: translate(229px, 64px); }
  30% { transform: translate(310px, 68px); }
  30.01%, 100% { transform: translate(330px, 68px); }
}
.tk-sl-bob { animation: tk-sl-bob 1.7s ease-in-out infinite alternate; }
@keyframes tk-sl-bob { from { transform: translateY(-1.6px); } to { transform: translateY(1.6px); } }
.tk-sl-ren { transform-box: fill-box; transform-origin: 50% 60%; animation: tk-sl-ren .55s ease-in-out infinite alternate; }
.tk-sl-ren.is-rudolf { animation-delay: -.27s; }
@keyframes tk-sl-ren { from { transform: rotate(-5deg) translateY(-.8px); } to { transform: rotate(4deg) translateY(.8px); } }
.tk-sl-naese { animation: tk-sl-naese 1.1s ease-in-out infinite alternate; }
@keyframes tk-sl-naese { from { opacity: .12; } to { opacity: .8; } }
.tk-sl-stov circle { animation: tk-sl-stov 1.3s ease-in-out infinite; }
.tk-sl-stov circle:nth-child(2) { animation-delay: -.26s; }
.tk-sl-stov circle:nth-child(3) { animation-delay: -.52s; }
.tk-sl-stov circle:nth-child(4) { animation-delay: -.78s; }
.tk-sl-stov circle:nth-child(5) { animation-delay: -1.04s; }
@keyframes tk-sl-stov { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.tk-sl-arm { transform-box: fill-box; transform-origin: 0% 100%; }
.tk-slaede.is-vinker .tk-sl-arm { animation: tk-sl-vink .42s ease-in-out infinite alternate; }
@keyframes tk-sl-vink { from { transform: rotate(-22deg); } to { transform: rotate(14deg); } }
.tk-sl-boble { position: fixed; z-index: 50; transform: translate(-50%, -100%); max-width: 230px; padding: 9px 13px 10px; border-radius: 16px; background: #fffdf7; color: #1d2b22; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); pointer-events: none; animation: tk-boble-ind .28s cubic-bezier(.3, 1.4, .5, 1) both; transition: opacity .35s ease; }
.tk-sl-boble b { display: block; font: 800 16px/21px var(--font-ui); }
.tk-sl-boble small { display: block; margin-top: 2px; font: 600 13px/17px var(--font-ui); color: #6b4a1a; }
.tk-sl-boble::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fffdf7; }
.tk-sl-boble.is-under { transform: translate(-50%, 0); }
.tk-sl-boble.is-under::after { bottom: auto; top: -7px; border: 8px solid transparent; border-top: 0; border-bottom-color: #fffdf7; }
.tk-sl-boble.is-ud { opacity: 0; }
@keyframes tk-boble-ind { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.tk-magi-stov { position: fixed; z-index: 49; pointer-events: none; color: #ffd76a; font-size: 18px; line-height: 1; text-shadow: 0 0 8px rgba(255, 215, 106, .9); }
.tk-magi-lamet, .tk-magi { pointer-events: none; }
.tk-magi-glimt { animation: tk-magi-glimt 2.4s linear infinite; }
@keyframes tk-magi-glimt { to { stroke-dashoffset: -34; } }
.tk-magi path { transform-box: fill-box; transform-origin: 50% 50%; animation: tk-magi-gnist 1.9s ease-in-out infinite; }
@keyframes tk-magi-gnist { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.tk-trae.is-julemagi .tk-trae-star.is-on .tk-star-glow { animation: tk-magi-glod 1.5s ease-in-out infinite alternate; }
@keyframes tk-magi-glod { from { transform: scale(1); opacity: .8; } to { transform: scale(1.45); opacity: 1; } }
.tk-trae.is-magi-ny { animation: tk-magi-ny 1.1s ease-out; }
@keyframes tk-magi-ny { 0% { filter: brightness(1.7) drop-shadow(0 0 10px #ffd76a); } 100% { filter: none; } }
/* nissen i vindueskarmen kigger op og vinker af og til (Patrick 24/9) */
.tk-nisse-hoved { transform-box: fill-box; transform-origin: 41% 82%; }
.tk-nisse-arm { transform-box: fill-box; transform-origin: 0% 0%; }
.tk-nisse.is-vinker .tk-nisse-hoved { animation: tk-nisse-kig 2.8s ease-in-out; }
.tk-nisse.is-vinker .tk-nisse-arm { animation: tk-nisse-vink 2.8s ease-in-out; }
@keyframes tk-nisse-kig { 0%, 100% { transform: none; } 14%, 86% { transform: rotate(-16deg) translateY(-1px); } }
@keyframes tk-nisse-vink { 0%, 100% { transform: none; } 16% { transform: rotate(-128deg); } 26% { transform: rotate(-100deg); } 36% { transform: rotate(-130deg); } 46% { transform: rotate(-102deg); } 56% { transform: rotate(-130deg); } 66% { transform: rotate(-104deg); } 84% { transform: rotate(-120deg); } }
@media (prefers-reduced-motion: reduce) { .tk-pl-app .tk-slaede, .tk-sl-bob, .tk-sl-ren, .tk-sl-naese, .tk-sl-stov circle, .tk-slaede.is-vinker .tk-sl-arm, .tk-magi path, .tk-magi-glimt, .tk-trae.is-julemagi .tk-trae-star.is-on .tk-star-glow, .tk-trae.is-magi-ny, .tk-sl-boble, .tk-nisse.is-vinker .tk-nisse-hoved, .tk-nisse.is-vinker .tk-nisse-arm { animation: none !important; } }

/* julelogo (Patrick 24/9): nissehue på f'et, nisse på t'et der skubber "feast" sammen hvert 24. sekund; "PAKKELEG 2026" til højre */
.tk-logo.is-jul { flex-direction: row; align-items: center; gap: 9px; }
.tk-logo.is-jul svg { height: 40px; width: auto; overflow: visible; }
.tk-logo.is-jul .tk-logo-txt { display: grid; margin: 0; padding-left: 9px; border-left: 1.5px solid currentColor; font: 800 11px/13px var(--font-ui); letter-spacing: .08em; }
.tk-logo.is-jul .tk-logo-txt span { font-weight: 700; opacity: .85; }
.tk-lg-feast { transform-box: view-box; transform-origin: 688px 200px; animation: tk-lg-feast 24s ease-in-out infinite; }
@keyframes tk-lg-feast { 0%, 3% { transform: none; } 5.5% { transform: scaleX(.95); } 8% { transform: scaleX(.9); } 9% { transform: scaleX(1.05); } 10.2% { transform: scaleX(.98); } 11.4% { transform: scaleX(1.01); } 12.5%, 100% { transform: none; } }
.tk-lg-nisse { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-lg-nisse 24s ease-in-out infinite; }
@keyframes tk-lg-nisse { 0%, 3% { transform: none; } 5.5% { transform: translateX(-40px) rotate(-4deg); } 8% { transform: translateX(-80px) rotate(-7deg); } 9% { transform: translate(44px, -34px) rotate(6deg); } 10.2% { transform: translate(-14px, 0); } 11.4% { transform: translate(6px, 0); } 12.5%, 100% { transform: none; } }
.tk-lg-pom { transform-box: fill-box; transform-origin: 50% 0; animation: tk-lg-pom 24s ease-in-out infinite; }
@keyframes tk-lg-pom { 0%, 8.8% { transform: none; } 9.6% { transform: translateY(-14px); } 10.6% { transform: translateY(6px); } 11.6%, 100% { transform: none; } }
.tk-lg-ben { transform-box: fill-box; transform-origin: 50% 0; animation: tk-lg-ben 1.3s ease-in-out infinite alternate; }
.tk-lg-ben.is-h { animation-delay: -.65s; }
@keyframes tk-lg-ben { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@media (max-width: 420px) { /* telefon: logo, demo-knap og tællere skal kunne stå på én linje fra 360 px (uden demo-knap fra 320 px) */
  .pl-top:has(.tk-logo.is-jul) { gap: 8px; }
  .tk-logo.is-jul svg { height: 28px; } .tk-logo.is-jul { gap: 6px; flex: 0 1 auto; }
  .tk-logo.is-jul .tk-logo-txt { font-size: 9.5px; line-height: 11px; padding-left: 6px; letter-spacing: .06em; }
  .tk-topright { gap: 6px; } .tk-demo-toggle { padding: 4px 8px; font-size: 11px; min-height: 30px; }
  .tk-demo-toggle { line-height: 12px; } .tk-demo-v { display: block; font-size: 9.5px; font-weight: 700; } /* v0.5.3: versionen under "Demo", så knappen er lige så smal som før */
  .tk-topchip.pl-top-chip, .tk-stats.tk-topchip { gap: 6px; padding: 0 10px; }
}
@media (max-width: 370px) { .pl-top:has(.tk-logo.is-jul) { gap: 6px; } .tk-logo.is-jul svg { height: 25px; } .tk-logo.is-jul { gap: 5px; } .tk-logo.is-jul .tk-logo-txt { font-size: 9px; padding-left: 5px; } .tk-topright { gap: 5px; } .tk-stats.tk-topchip { gap: 5px; padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .tk-lg-feast, .tk-lg-nisse, .tk-lg-pom, .tk-lg-ben { animation: none !important; } }

/* prikkerne nederst til venstre: forklaring på hover/fokus (PC) og tryk (mobil) (Patrick 24/9) */
.tk-prik-boks { position: relative; cursor: help; border-radius: 10px; outline-offset: 3px; }
.tk-prik-tip { position: absolute; left: -4px; bottom: calc(100% + 10px); z-index: 30; display: grid; gap: 5px; width: max-content; max-width: min(270px, calc(100vw - 32px)); padding: 10px 12px; border-radius: 12px; background: #fffdf7; color: #1d2b22; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); font: 600 13px/18px var(--font-ui); text-align: left; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.tk-prik-tip::after { content: ''; position: absolute; left: 18px; bottom: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #fffdf7; }
.tk-prik-tip b { font: 800 14px/19px var(--font-ui); }
.tk-prik-tip span { display: flex; align-items: center; gap: 8px; }
.tk-prik-tip .pl-prik { flex: none; box-shadow: 0 0 0 1.5px rgba(30, 42, 34, .28); }
.tk-prik-tip .tk-prik-tip-svag { color: #5c6b5f; }
.tk-prik-tip small { font: 500 12px/16px var(--font-ui); color: #5c6b5f; }
.tk-prik-boks:hover .tk-prik-tip, .tk-prik-boks:focus-visible .tk-prik-tip, .tk-prik-boks.is-aaben .tk-prik-tip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tk-prik-tip { transition: none; } }

/* lyd og musik (Patrick 24/9): højttaler ved prikkerne med to kontakter (Musik, Lyde); de samme kontakter på Profil */
.tk-pl-app .pl-karm .pl-slag { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-lyd { position: relative; flex: none; }
.tk-karm-knapper { display: flex; align-items: center; gap: 8px; flex: none; }
.tk-pl-app .pl-karm > .tk-rm-note { grid-column: 1 / -1; } .tk-pl-app .tk-rm-note { display: flex; align-items: flex-start; gap: 8px; width: 100%; box-sizing: border-box; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #fbf0d9; color: #5a3d00; font: 500 12px/16px var(--font-ui); } .tk-pl-app .tk-rm-note .tk-rm-luk { appearance: none; border: 0; background: none; color: inherit; font: 700 16px/16px var(--font-ui); cursor: pointer; padding: 0 2px; margin-left: auto; } /* v0.74.0: noten om reduceret bevægelse (kun PC) */ /* v0.7.2: "Hele stuen" (mobil) og højttaleren */
.tk-zoom-knap[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }
.tk-lyd-knap { appearance: none; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.tk-lyd-knap:hover { border-color: var(--lime); }
.tk-lyd .tk-lyd-streg { display: none; }
.tk-lyd.is-fra .tk-lyd-streg { display: inline; }
.tk-lyd.is-fra .tk-lyd-boelger { display: none; }
.tk-lyd.is-fra .tk-lyd-knap { color: var(--ink-muted); }
.tk-lyd-pop { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 31; width: 240px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fffdf7; color: #1d2b22; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); text-align: left; }
.tk-lyd-pop::after { content: ''; position: absolute; right: 11px; bottom: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #fffdf7; }
.tk-lyd-pop b { font: 800 14px/19px var(--font-ui); margin-bottom: 2px; }
.tk-lyd-pop small { font: 500 12px/16px var(--font-ui); color: #5c6b5f; margin-top: 4px; }
.tk-ap.is-paa .tk-ap-knap { color: var(--lime); border-color: var(--lime); } /* 0.64.0: autoplay tændt */
.tk-ap-pop .tk-ap-bestil { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; padding: 0 18px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font: 700 15px/20px var(--font-ui); text-decoration: none; } /* egen klasse, ikke .pl-btn: stueMaal() måler karmens første .pl-terningknap/.pl-btn (zoomen på lave telefoner), og linket står før terningknappen */
.tk-ap-pop .tk-ap-bestil:hover { filter: brightness(1.05); }
.tk-ap-pop .tk-ap-sidst { color: #1d2b22; font-weight: 650; }
/* v0.66.0: arket "Imens du var væk" */
.tk-vaek-liste { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; display: grid; gap: 8px; font: 500 15px/22px var(--font-ui); }
.tk-vaek-liste li { background: rgba(0, 0, 0, .06); border-radius: 10px; padding: 8px 12px; }
.tk-vaek-liste b { font-weight: 700; }
.tk-switch { appearance: none; border: 0; background: none; color: inherit; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 4px 0; font: 650 15px/20px var(--font-ui); cursor: pointer; text-align: left; }
.tk-switch-spor { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: #8a968d; transition: background .2s ease; }
.tk-switch-knap { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.tk-switch.is-on .tk-switch-spor { background: #3f7a47; }
.tk-switch.is-on .tk-switch-knap { transform: translateX(18px); }
.tk-switch:focus-visible { outline: 3px solid #a4c856; outline-offset: 2px; border-radius: 8px; }
.tk-lyd-kort .tk-switch { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .tk-switch-spor, .tk-switch-knap { transition: none; } }

/* v0.4.22 (Patrick 24/9): radioen i vindueskarmen mellem kalenderlyset og nissen (bordet er fyldt med pakker) — tryk = musik til/fra */
.tk-radio .tk-radio-glod { opacity: 0; transition: opacity .5s; }
.tk-radio.is-paa .tk-radio-glod { opacity: .9; animation: tk-radio-glod 2.4s ease-in-out infinite; }
.tk-radio .tk-radio-skala { transition: fill .4s; }
.tk-radio.is-paa .tk-radio-skala { fill: #ffe0a0; }
.tk-radio .tk-radio-lampe { fill: #5a3a22; transition: fill .3s; }
.tk-radio.is-paa .tk-radio-lampe { fill: #b8e04a; }
.tk-radio-node { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.tk-radio.is-paa .tk-radio-node { animation: tk-radio-node 3s ease-out infinite; animation-delay: calc(var(--i) * 1s); }
.tk-radio.is-paa .tk-radio-krop { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-radio-bop .52s ease-in-out infinite alternate; }
.tk-radio.is-hit { transform-origin: 50% 100%; animation: tk-radio-tryk .35s ease-out; }
.tk-radio:focus { outline: none; }
.tk-radio:focus-visible .tk-radio-krop > rect:nth-of-type(3) { stroke: #b8e04a; stroke-width: 2; }
@keyframes tk-radio-node { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -34px) rotate(var(--r)); } }
@keyframes tk-radio-bop { from { transform: scaleY(1); } to { transform: scaleY(1.035); } }
@keyframes tk-radio-glod { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes tk-radio-tryk { 0% { transform: scale(1, 1); } 35% { transform: scale(1.06, .92); } 70% { transform: scale(.97, 1.04); } 100% { transform: scale(1, 1); } }
@media (prefers-reduced-motion: reduce) { .tk-radio.is-paa .tk-radio-node, .tk-radio.is-paa .tk-radio-krop, .tk-radio.is-paa .tk-radio-glod, .tk-radio.is-hit { animation: none !important; } .tk-radio.is-paa .tk-radio-node:first-child { opacity: 1; } }

/* v0.4.25 (Patrick 24/9): Missioner og statistik, nissehue, mærker med tidspunkt, præmie-ikoner i stedet for førertrøjen */
.tk-stat-titel { margin: 4px 0 2px; }
.tk-graf { display: flex; flex-direction: column; gap: 6px; }
.tk-graf svg { display: block; overflow: visible; }
.tk-akse { font: 600 10px/1 var(--font-ui); fill: var(--ink-muted); }
.tk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 13px/18px var(--font-ui); color: var(--ink-muted); }
.tk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tk-legend b { color: var(--ink); font-weight: 700; margin-left: 2px; }
.tk-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tk-stat { display: flex; flex-direction: column; gap: 8px; }
.tk-stat-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 17px/22px var(--font-display); color: var(--ink); }
.tk-stat-ikon { display: inline-grid; place-items: center; width: 28px; height: 28px; }
.tk-stat-ikon svg { width: 26px; height: 26px; }
.tk-stat dl { margin: 0; display: flex; flex-direction: column; }
.tk-stat dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font: 500 14px/20px var(--font-ui); }
.tk-stat dl > div:first-child { border-top: 0; }
.tk-stat dt { color: var(--ink-muted); }
.tk-stat dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
.tk-oje { display: flex; align-items: flex-end; gap: 6px; height: 56px; padding-top: 4px; }
.tk-oje span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tk-oje i { display: block; width: 100%; max-width: 26px; border-radius: 4px 4px 2px 2px; background: var(--pebernoed-lys, #c98e5a); }
.tk-oje i.is-seks { background: var(--glow, #f4b942); }
.tk-oje b { font: 700 12px/1 var(--font-ui); color: var(--ink-muted); }
.tk-dage { display: flex; flex-wrap: wrap; gap: 4px; }
.tk-dagprik { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); }
.tk-dagprik.is-on { background: var(--glow, #f4b942); box-shadow: none; }
.tk-huer { display: flex; flex-wrap: wrap; gap: 6px; }
/* v0.15.0 (Patrick 29/9): vælg billedet på væggen */
.tk-mine-liste { display: flex; flex-direction: column; }
.tk-mine-raekke { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font: 500 14px/20px var(--font-ui); }
.tk-mine-raekke:first-child { border-top: 0; }
.tk-mine-hvad { color: var(--ink-muted); white-space: nowrap; }
.tk-billeder { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.tk-billede-valg { appearance: none; border: 2px solid transparent; border-radius: 10px; background: var(--surface-raised); padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--ink); font: 600 12px/16px var(--font-ui); }
.tk-billede-valg svg { display: block; border-radius: 3px; }
.tk-billede-valg.is-on { border-color: #f4b942; box-shadow: 0 0 0 2px rgba(244, 185, 66, .35); }
.tk-vaegge { display: flex; flex-wrap: wrap; gap: 8px; } /* v0.61.0: vægfarven */
.tk-vaeg-valg { appearance: none; border: 2px solid transparent; border-radius: 10px; background: var(--surface-raised); padding: 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 12px/16px var(--font-ui); color: var(--ink); cursor: pointer; min-width: 64px; }
.tk-vaeg-prove { display: block; width: 44px; height: 34px; border-radius: 6px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.tk-vaeg-prove i { position: absolute; left: 6px; top: 8px; width: 6px; height: 6px; transform: rotate(45deg); opacity: .8; }
.tk-vaeg-valg.is-on { border-color: #f4b942; box-shadow: 0 0 0 2px rgba(244, 185, 66, .35); }
.tk-hue-knap { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s, transform .15s; }
.tk-hue-knap:hover { transform: translateY(-2px); }
.tk-hue-knap.is-valgt { box-shadow: inset 0 0 0 3px var(--glow, #f4b942); }
.tk-hue-knap:focus-visible { outline: 3px solid var(--focus, #ffd166); outline-offset: 2px; }
.tk-hue-label { font: 600 14px/20px var(--font-ui); color: var(--ink); }
.tk-profil-hue { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--glow, #f4b942); }
.pl-rank-navn .tk-hue, .pl-rank-navn .tk-pr-ikon { flex: none; margin-right: 6px; vertical-align: middle; }
.pl-rank-navn { display: inline-flex; align-items: center; }
.tk-pr-cirkel { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #3a2a14; box-shadow: 0 0 0 3px var(--glow, #f4b942); }
.tk-maerke-tid { display: block; margin-top: 2px; font: 600 11px/14px var(--font-ui); color: var(--accent-ink, #a4c856); }
@media (prefers-reduced-motion: reduce) { .tk-hue-knap { transition: none; } .tk-hue-knap:hover { transform: none; } }

/* v0.4.27 (Patrick 24–25/9): jule-tema på Missioner, Ranking og Profil, og Ranking som forslag A. v0.49.1 (Patrick 13/10: "fælles med grøn/mørk for alle siderne"):
   undersiderne har stuens mørke tema (aften); julepynten (sne, bannere) bliver, og de lyse kort og chips bruger nu tokens */
[data-theme="dag"] { --pr-stamme: #8a5530; --pr-blad: #2f7d3a; --pr-pad: #20263a; --pr-pad-ink: #fbf8f1; }
[data-theme="dag"] .tk-pr-cirkel { background: #fff3d6; }
.tk-pl-app .pl-rank { grid-template-columns: minmax(32px, auto) minmax(0, 1fr) auto; }
.tk-pl-app.is-jul { background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg stroke='%23284433' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cpath d='M40 30v16M33 34l14 8M33 42l14-8'/%3E%3Cpath d='M196 104v20M187 109l18 10M187 119l18-10'/%3E%3Cpath d='M96 196v14M90 199l12 8M90 207l12-8'/%3E%3C/g%3E%3C/svg%3E") repeat; }
.tk-pl-app.is-jul .pl-top { background: var(--surface); border-bottom-color: var(--line); }
.tk-pl-app.is-jul .pl-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); }
.tk-pl-app.is-jul .tk-topnav a.is-aktiv { background: #2c4933; color: #fbf8f1; }
.tk-pl-app.is-jul .pl-tabs { background: var(--surface-sunk); }
.tk-pl-app.is-jul .pl-tabs button { color: var(--ink); font-weight: 700; min-height: 44px; }
.tk-pl-app.is-jul .pl-tabs button[aria-selected="true"] { background: #2c4933; color: #fbf8f1; box-shadow: none; }
.tk-cap { font: 700 13px/18px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-top: 4px; }
.tk-pl-app.is-jul .tk-cap { color: var(--ink-muted); } /* v0.7.17: roligere (Patrick 28/9) */
.tk-cap .tk-kun-test { margin-left: 6px; padding: 2px 8px; font: 700 11px/16px var(--font-ui); letter-spacing: 0; text-transform: none; background: var(--glow-soft); color: var(--glow-ink); border-color: transparent; vertical-align: 1px; } /* v0.32.0: minispillene er kun for testere */
.tk-mis-head { flex: none; margin-top: 4px; }
.tk-pl-app .tk-mis-h { font: 700 24px/28px var(--font-display); }
.tk-mis-skille { flex: none; display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
/* julebanneret: rødt med guirlande og sne */
.tk-julbanner { position: relative; flex: none; display: flex; align-items: center; gap: 14px; padding: 38px 18px 18px; border-radius: 20px; background: #a8321f; color: #fbf8f1; overflow: hidden; }
.tk-jb-guirlande { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='304' height='46' viewBox='0 0 304 46'%3E%3Cpath d='M-152 4Q-76 40 0 4Q76 40 152 4Q228 40 304 4Q380 40 456 4' stroke='%232f6b3a' stroke-width='9' fill='none'/%3E%3Cpath d='M-152 4Q-76 40 0 4Q76 40 152 4Q228 40 304 4Q380 40 456 4' stroke='%233f8a4a' stroke-width='3' stroke-dasharray='2 7' fill='none'/%3E%3Cg fill='%232f6b3a'%3E%3Ccircle cx='0' cy='4' r='6'/%3E%3Ccircle cx='152' cy='4' r='6'/%3E%3Ccircle cx='304' cy='4' r='6'/%3E%3C/g%3E%3Ccircle cx='76' cy='29' r='6.5' fill='%23f4b942'/%3E%3Ccircle cx='228' cy='29' r='6.5' fill='%23fbf8f1'/%3E%3C/svg%3E") repeat-x 0 0 / 238px 36px; pointer-events: none; }
.tk-jb-sne { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220'%3E%3Cg stroke='%23c4543e' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cpath d='M60 150v14M54 153l12 8M54 161l12-8'/%3E%3Cpath d='M250 40v14M244 43l12 8M244 51l12-8'/%3E%3Cpath d='M320 170v12M315 173l10 6M315 179l10-6'/%3E%3C/g%3E%3C/svg%3E") repeat 0 16px / 360px 220px; pointer-events: none; }
.tk-julbanner > .tk-jb-tekst, .tk-julbanner > .tk-jb-billede, .tk-julbanner > .tk-profil-hue { position: relative; }
.tk-jb-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-jb-chip { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #f4b942; color: #243b22; font: 800 11px/16px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.tk-pl-app .tk-jb-h { font: 700 26px/30px var(--font-display); color: #fbf8f1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tk-pl-app .tk-jb-p { font: 400 15px/22px var(--font-ui); color: #fbe6dc; }
.tk-jb-billede { flex: none; width: 110px; }
.tk-jb-billede svg { display: block; width: 100%; height: auto; }
.tk-julbanner .tk-profil-hue { flex: none; background: #fbf8f1; }
.tk-julbanner.is-stor { flex-direction: column; align-items: stretch; gap: 10px; }
.tk-pl-app .tk-julbanner.is-stor .tk-jb-h { font-size: 30px; line-height: 34px; }
.tk-julbanner.is-stor .tk-jb-billede { width: 100%; max-width: 322px; align-self: center; }
@media (max-width: 480px) { .tk-julbanner:not(.is-stor) .tk-jb-billede { width: 84px; } .tk-pl-app .tk-julbanner:not(.is-stor) .tk-jb-h { font-size: 23px; line-height: 27px; } }
/* nedtællingerne */
.tk-ned-rk { flex: none; display: grid; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 18px; padding: 4px 14px; }
.tk-ned { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ikon l tal" "ikon sub tal"; align-items: center; column-gap: 12px; min-height: 56px; padding: 6px 0; }
.tk-ned + .tk-ned { border-top: 1px solid var(--line); }
.tk-ned-ikon { grid-area: ikon; }
.tk-ned-ikon svg { display: block; width: 36px; height: 36px; }
.tk-ned-l { grid-area: l; align-self: end; font: 700 14px/18px var(--font-ui); color: var(--ink); }
.tk-ned-om { display: none; }
.tk-ned-sub { grid-area: sub; align-self: start; font: 500 12px/16px var(--font-ui); color: var(--ink-muted); }
.tk-ned-tal { grid-area: tal; font: 800 20px/24px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.tk-ned-tal.is-slut { font: 700 15px/20px var(--font-ui); color: var(--ink-muted); }
@media (min-width: 700px) {
  .tk-ned-rk { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; background: none; border: 0; padding: 0; }
  .tk-ned { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "ikon l" "ikon tal" "ikon sub"; row-gap: 2px; column-gap: 16px; padding: 16px 18px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; }
  .tk-ned + .tk-ned { border-top: 1px solid var(--line); }
  .tk-ned-ikon svg { width: 52px; height: 52px; }
  .tk-ned-om { display: inline; }
  .tk-ned-l { font: 600 14px/20px var(--font-ui); color: var(--ink-muted); }
  .tk-ned-tal { font-size: 28px; line-height: 34px; }
}
/* Ranking-kortet */
.tk-rk-cols { flex: none; display: flex; flex-direction: column; gap: 16px; }
.tk-pl-app.is-jul .tk-rk-kort { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 20px; box-shadow: 0 1px 2px rgba(27, 42, 32, .08), 0 6px 18px rgba(27, 42, 32, .08); }
.tk-rk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tk-pl-app .tk-rk-h { font: 700 26px/30px var(--font-display); color: var(--ink); }
.tk-rk-antal { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: rgba(164, 200, 86, .16); color: var(--lime); font: 600 13px/18px var(--font-ui); }
.tk-rk-faner { flex: 1 1 100%; }
.tk-rk-tom { font: 600 15px/22px var(--font-ui); color: var(--ink-muted); padding: 12px 0; }
.tk-podie { display: flex; justify-content: center; align-items: flex-end; gap: 8px; padding-top: 6px; list-style: none; }
.tk-pod { flex: 1 1 0; min-width: 0; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.tk-pod.is-nr1 { order: 2; }
.tk-pod.is-nr2 { order: 1; }
.tk-pod.is-nr3 { order: 3; }
.tk-pod-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--glow-soft); border: 1px solid #f4b942; color: var(--glow-ink); font: 700 11px/16px var(--font-ui); white-space: nowrap; }
.tk-pod .tk-hue { width: 46px; height: 46px; }
.tk-rk-vundet { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(164, 200, 86, .16); border: 1px solid #a4c856; color: var(--lime); font: 700 10px/14px var(--font-ui); vertical-align: middle; white-space: nowrap; } /* v0.10.0: har allerede vundet en adventsgave */
.tk-pod.is-mig .tk-hue { border-radius: 50%; box-shadow: 0 0 0 3px #f4b942; }
.tk-pod-navn { max-width: 100%; min-height: 32px; font: 700 13px/16px var(--font-ui); color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tk-pod.is-mig .tk-pod-navn { font-weight: 800; }
.tk-pod-pts { font: 800 13px/16px var(--font-ui); color: var(--pebernoed-lys); }
.tk-pod-enh { display: none; }
.tk-pod-blok { width: 100%; display: flex; justify-content: center; padding-top: 6px; border-radius: 12px 12px 4px 4px; font: 800 24px/28px var(--font-display); color: #243b22; }
.tk-pod.is-nr1 .tk-pod-blok { height: 96px; background: #f4b942; }
.tk-pod.is-nr2 .tk-pod-blok { height: 70px; background: #dcd6c8; }
.tk-pod.is-nr3 .tk-pod-blok { height: 52px; background: #e7ad73; }
.tk-pc-ikon { width: 16px; height: 15px; flex: none; }
.tk-rk-liste { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.tk-rk-r { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.tk-rk-r.is-mig { background: var(--glow-soft); box-shadow: inset 0 0 0 2px #f4b942; }
.tk-rk-nr { width: 40px; flex: none; text-align: right; font: 700 14px/20px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.tk-rk-r .tk-hue { flex: none; width: 26px; height: 26px; }
.tk-rk-navn { flex: 1 1 auto; min-width: 0; font: 600 14px/20px var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-rk-r.is-mig .tk-rk-navn { font-weight: 800; }
.tk-rk-pts { font: 800 14px/20px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--pebernoed-lys); }
.tk-top100 { display: flex; flex-direction: column; gap: 8px; }
.tk-top100-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.tk-pl-app .tk-rk-h3 { font: 700 19px/24px var(--font-display); color: var(--ink); }
.tk-top100-liste { height: 380px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px; -webkit-overflow-scrolling: touch; }
.tk-top100-liste:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tk-top100-liste .tk-rk-r.is-mig { position: sticky; top: 0; bottom: 0; z-index: 1; background: var(--glow-soft); } /* Patrick 26/9: din række står altid i kanten af listen, mens der rulles */
.tk-rk-spring { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 6px 8px; font: 600 12px/16px var(--font-ui); color: var(--ink-muted); }
.tk-rk-spring span { font-size: 16px; line-height: 1; }
.tk-rk-migtxt { margin: 0; font: 600 13px/18px var(--font-ui); color: var(--ink-muted); }
/* præmierne */
.tk-rk-praemier { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tk-pr-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.tk-gevinst { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: var(--surface-raised); border: 1px solid var(--line); }
.tk-gevinst.is-stor { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.tk-pr-bill { flex: none; }
.tk-pr-bill svg { display: block; width: 86px; height: 60px; }
.tk-gevinst.is-stor .tk-pr-bill svg { width: 100%; height: 136px; }
.tk-pr-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-gevinst.is-stor .tk-pr-body { padding: 12px 16px 14px; gap: 6px; }
.tk-pr-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; }
.tk-pl-app .tk-pr-t { font: 700 18px/22px var(--font-display); color: var(--ink); }
.tk-pl-app .tk-gevinst.is-stor .tk-pr-t { font-size: 20px; line-height: 26px; }
.tk-pr-tag { font: 700 13px/18px var(--font-ui); color: #ef8a6f; }
.tk-pl-app .tk-pr-p { font: 400 14px/20px var(--font-ui); color: var(--ink-muted); }
.tk-pr-fod { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding-top: 6px; font: 600 14px/20px var(--font-ui); color: var(--ink); } /* v0.7.17 (Patrick 28/9): "Fører" og "Din placering" på hver sin linje i fuld bredde */
.tk-pr-linje { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.tk-pr-fod .tk-hue { flex: none; }
.tk-pr-dig { color: var(--ink-muted); }
.tk-metode { position: relative; }
.tk-metode-nr { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #2c4933; color: #fbf8f1; font: 800 15px/1 var(--font-ui); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.tk-metode:not(.is-stor) .tk-metode-nr { top: -6px; left: -6px; }
.tk-pladser { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.tk-pladser li { display: flex; align-items: baseline; gap: 10px; font: 600 14px/20px var(--font-ui); color: var(--ink); }
.tk-pladser li.is-vej .tk-plads-t { color: var(--ink-muted); font-weight: 500; font-style: italic; }
.tk-plads-info { display: block; margin-top: 1px; font: 500 13px/18px var(--font-ui); color: var(--ink-muted); } /* v0.22.4: gear-pakkens indhold under 1. pladsen */
.tk-plads-nr { flex: none; min-width: 58px; font: 700 12px/20px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--glow-ink); }
.tk-pladser li:nth-child(2) .tk-plads-nr { color: #c3c8cf; } .tk-pladser li:nth-child(3) .tk-plads-nr { color: var(--pebernoed-lys); }
.tk-pm-maader { flex: none; }
.tk-pm-maader .tk-pr-head { margin-bottom: 2px; }
.tk-pr-bar { height: 8px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.tk-pr-bar i { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
.tk-pr-du { font: 600 13px/18px var(--font-ui); color: var(--accent-ink); }
.tk-pr-tip { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 18px; background: #2c4933; }
.tk-pl-app .tk-pr-tip .tk-pr-t { color: #fbf8f1; }
.tk-pl-app .tk-pr-tip p { font: 400 14px/21px var(--font-ui); color: #dfe8d8; }
@media (min-width: 1100px) {
  .tk-julbanner { padding: 46px 28px 22px; gap: 20px; border-radius: 24px; }
  .tk-jb-guirlande { height: 46px; background-size: 304px 46px; }
  .tk-jb-billede { width: 150px; }
  .tk-julbanner.is-stor { flex-direction: row; align-items: center; min-height: 300px; padding: 30px 40px; }
  .tk-julbanner.is-stor .tk-jb-tekst { gap: 14px; padding-top: 18px; }
  .tk-pl-app .tk-julbanner.is-stor .tk-jb-h { font-size: 44px; line-height: 48px; }
  .tk-pl-app .tk-julbanner.is-stor .tk-jb-p { font-size: 17px; line-height: 26px; max-width: 600px; }
  .tk-julbanner.is-stor .tk-jb-billede { width: 400px; max-width: none; align-self: center; }
  .tk-rk-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
  .tk-pl-app.is-jul .tk-rk-kort { padding: 24px; gap: 18px; border-radius: 24px; }
  .tk-pl-app .tk-rk-h { font-size: 30px; line-height: 34px; }
  .tk-rk-antal { margin-left: 0; }
  .tk-rk-faner { flex: none; margin-left: auto; min-width: 300px; }
  .tk-podie { gap: 18px; }
  .tk-pod .tk-hue { width: 64px; height: 64px; }
  .tk-pod-chip { font-size: 13px; line-height: 18px; padding: 4px 10px; gap: 6px; }
  .tk-pod-navn { font-size: 16px; line-height: 20px; min-height: 20px; -webkit-line-clamp: 1; }
  .tk-pod-pts { font-size: 15px; line-height: 20px; }
  .tk-pod-enh { display: inline; }
  .tk-pod-blok { font-size: 30px; line-height: 34px; padding-top: 10px; border-radius: 14px 14px 4px 4px; }
  .tk-pod.is-nr1 .tk-pod-blok { height: 132px; }
  .tk-pod.is-nr2 .tk-pod-blok { height: 96px; }
  .tk-pod.is-nr3 .tk-pod-blok { height: 72px; }
  .tk-rk-r { gap: 12px; padding: 6px 12px; }
  .tk-rk-nr { width: 44px; font-size: 15px; }
  .tk-rk-r .tk-hue { width: 28px; height: 28px; }
  .tk-rk-navn, .tk-rk-pts { font-size: 15px; }
  .tk-top100-liste { height: 470px; padding: 6px; }
  .tk-pr-bill svg { width: 104px; height: 72px; }
  .tk-gevinst.is-stor .tk-pr-bill svg { height: 160px; }
  .tk-pl-app .tk-gevinst.is-stor .tk-pr-t { font-size: 21px; }
}
/* v0.6.7 (Patrick 27/9): menuen på mobil har 5 punkter (designsystemets Nav har 4), og Præmier-fanen "Sådan vinder du" */
.tk-pl-app .pl-nav.tk-nav5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tk-pl-app .pl-nav.tk-nav5 a { min-width: 0; }
.tk-pl-app .pl-nav.tk-nav5 a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 370px) { .tk-pl-app .pl-nav.tk-nav5 a { font-size: 12px; letter-spacing: -.1px; } }
@media (max-width: 340px) { .tk-pl-app .pl-nav.tk-nav5 a { font-size: 11px; letter-spacing: -.2px; } }
.tk-pm-grid { flex: none; display: flex; flex-direction: column; gap: 22px; }
.tk-pm-sek { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tk-pm-grid > .tk-pm-sek { gap: 22px; }
.tk-pm-chip { align-self: flex-start; display: inline-flex; margin-top: 2px; padding: 2px 10px; border-radius: 999px; background: var(--glow-soft); color: var(--glow-ink); font: 700 12px/18px var(--font-ui); }
.tk-pm-kort { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tk-pl-app .tk-pm-p, .tk-pl-app .tk-pm-note { margin: 0; font: 400 15px/22px var(--font-ui); color: var(--ink-muted); }
.tk-pl-app .tk-pm-note { font-size: 13px; line-height: 18px; }
.tk-pm-gaver { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tk-pm-gaver li { padding: 4px 10px; border-radius: 999px; background: rgba(164, 200, 86, .16); color: var(--lime); font: 600 13px/18px var(--font-ui); }
.tk-pm-gaver li.is-sjaelden { background: var(--glow-soft); color: var(--glow-ink); box-shadow: inset 0 0 0 1px #f4b942; }
.tk-pl-app.is-jul .tk-pm-kort.is-guld { background: var(--glow-soft); border: 2px solid #f4b942; }
.tk-pl-app .tk-pm-status { margin: 0; font: 700 14px/20px var(--font-ui); color: var(--glow-ink); }
.tk-pm-tab { width: 100%; border-collapse: collapse; }
.tk-pm-tab th, .tk-pm-tab td { padding: 8px 4px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font: 400 14px/20px var(--font-ui); color: var(--ink); }
.tk-pm-tab tr:first-child th, .tk-pm-tab tr:first-child td { border-top: 0; }
.tk-pm-tab th { width: 38%; padding-right: 12px; font-weight: 700; }
@media (min-width: 1100px) { .tk-pm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } }
/* v0.6.8 (Patrick 27/9): eventplanens events i vinduet (moede/eventplan.html v4) */
.tk-pl-app [data-ev] { cursor: pointer; }
.tk-husly circle { animation: tk-husly 1.4s steps(1) infinite; }
.tk-husly circle:nth-of-type(3n+1) { animation-delay: -.46s; }
.tk-husly circle:nth-of-type(3n+2) { animation-delay: -.93s; }
@keyframes tk-husly { 0% { opacity: 1; } 50% { opacity: .35; } }
.tk-husly.is-loeb circle { animation: tk-husly-loeb .9s steps(3) infinite; }
.tk-husly.is-loeb circle:nth-of-type(3n+1) { animation-delay: -.3s; }
.tk-husly.is-loeb circle:nth-of-type(3n+2) { animation-delay: -.6s; }
@keyframes tk-husly-loeb { 0%, 100% { opacity: .25; } 34% { opacity: 1; } }
/* rensdyret (v0.7.10): går frem og tilbage i sneen foran husene (26 s: 9 s hver vej, 4 s græsning i enderne); tryk = kigger op */
.tk-rd-krop { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-rd-gang 26s linear infinite; animation-delay: var(--vt, 0s); }
@keyframes tk-rd-gang { 0% { transform: translateX(0) scaleX(1); } 34.6% { transform: translateX(74px) scaleX(1); } 50% { transform: translateX(74px) scaleX(1); } 50.01% { transform: translateX(74px) scaleX(-1); } 84.6% { transform: translateX(0) scaleX(-1); } 99.99% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } }
.tk-rd-ben { transform-box: fill-box; transform-origin: 50% 0; animation: tk-rd-ben .7s ease-in-out infinite alternate; }
.tk-rd-ben-b { animation-direction: alternate-reverse; }
.tk-rensdyr.is-graesser .tk-rd-ben { animation-play-state: paused; }
@keyframes tk-rd-ben { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.tk-rd-hoved { transform-box: fill-box; transform-origin: 12% 100%; transition: transform .8s ease-in-out; }
.tk-rensdyr.is-graesser .tk-rd-hoved { transform: rotate(42deg); }
.tk-rensdyr.is-kig .tk-rd-hoved { transform: rotate(-14deg); transition-duration: .3s; }
.tk-rensdyr.is-kig .tk-rd-lys { animation: tk-rd-lys .5s ease-in-out 5 alternate; }
@keyframes tk-rd-lys { from { opacity: .28; } to { opacity: .8; } }
.tk-sm-hat.is-hop { animation: tk-sm-hop .7s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes tk-sm-hop { 0% { transform: none; } 40% { transform: translateY(-14px) rotate(-18deg); } 100% { transform: none; } }
.tk-lucia-bag { animation: tk-lucia-bag 60s linear infinite; } /* v0.17.8: 60 s pr. runde (før 30 s) */
@keyframes tk-lucia-bag { 0% { transform: translateX(-126px); } 45%, 100% { transform: translateX(305px); } }
.tk-lucia-for { animation: tk-lucia-for 60s linear infinite; }
@keyframes tk-lucia-for { 0%, 48% { transform: translateX(323px); } 95%, 100% { transform: translateX(-188px); } }
.tk-lu-flamme { animation: tk-lu-flamme .5s steps(2) infinite alternate; }
@keyframes tk-lu-flamme { from { opacity: .6; } to { opacity: 1; } }
.tk-nordlys path { animation: tk-nordlys 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes tk-nordlys { from { transform: translateX(-10px) scaleY(.85); } to { transform: translateX(10px) scaleY(1.15); } }
.tk-dryp { animation: tk-dryp 1.6s ease-in infinite; }
@keyframes tk-dryp { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
.tk-skud { animation: tk-skud 10s linear infinite; opacity: 0; visibility: hidden; } /* v0.6.10: flyver hvert 10. sekund i 2 s og kan kun rammes under flugten */
@keyframes tk-skud { 0%, 79.9% { opacity: 0; visibility: hidden; transform: translate(0, 0); } 80% { opacity: 1; visibility: visible; transform: translate(0, 0); } 94% { opacity: 1; } 100% { opacity: 0; visibility: visible; transform: translate(135px, 54px); } }
.tk-skud-hit { cursor: pointer; }
.tk-skud-gnist circle { animation: tk-skud-gnist .7s ease-out forwards; }
@keyframes tk-skud-gnist { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--gx), var(--gy)); opacity: 0; } }
.tk-ev-toe .pl-sne { display: none; }
.tk-ev-toe .tk-tagsne { opacity: 0; }
.tk-ev-toe .tk-jordsne { fill: #9fb3a0; }
.tk-ev-storm .tk-tagsne { transform: translateY(-3px); }
.tk-ev-storm .pl-sne { display: none; }
.tk-stormsne circle { animation: tk-sne-storm 1.1s linear infinite; }
@keyframes tk-sne-storm { from { transform: translate(-50px, -40px); } to { transform: translate(110px, 200px); } }
.tk-pl-app .pl-scene.tk-ev-frost, .tk-frost { touch-action: none; -webkit-user-select: none; user-select: none; } /* kun mens der er frost: bagefter kan siden rulles igen (v0.6.10); et træk markerer ikke tekst */
.tk-frost { cursor: crosshair; }
.tk-frost { transition: opacity 1.2s ease; }
.tk-frost.is-fri { opacity: 0; pointer-events: none; }
/* kravlenisserne 22.–24. (v0.7.4): benene dingler stille; et tryk får nissen til at hoppe, vinke og sparke */
.tk-kravle { cursor: pointer; transform-box: fill-box; transform-origin: 50% 100%; }
.tk-kravle .tk-kv-ben { transform-box: fill-box; transform-origin: 50% 0; animation: tk-kv-dingel 2.8s ease-in-out infinite alternate; }
.tk-kravle.is-gulv .tk-kv-ben { transform-origin: 0 50%; animation-name: tk-kv-spark; }
.tk-kravle .tk-kv-arm { transform-box: fill-box; transform-origin: 0 0; }
.tk-kravle.is-vink { animation: tk-kv-hop .5s ease-out; }
.tk-kravle.is-vink .tk-kv-arm { animation: tk-kv-vink .28s ease-in-out 6 alternate; }
.tk-kravle.is-vink .tk-kv-ben { animation-duration: .22s; animation-iteration-count: 8; }
@keyframes tk-kv-dingel { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes tk-kv-spark { from { transform: rotate(3deg); } to { transform: rotate(-5deg); } }
@keyframes tk-kv-vink { from { transform: rotate(-150deg); } to { transform: rotate(-110deg); } }
@keyframes tk-kv-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
.tk-klokke { animation: tk-klokke-sving .5s ease-in-out 4 alternate; transform-box: fill-box; transform-origin: 50% 0; }
.tk-klokke.is-ring { animation-name: tk-klokke-sving2; }
@keyframes tk-klokke-sving { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes tk-klokke-sving2 { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
/* juleaften (v0.7.4): julemandens konfetti falder over hele skærmen; laget ligger over siden, men tager ingen tryk */
.tk-konfetti { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; contain: strict; }
.tk-konfetti i { position: absolute; top: -28px; display: block; border-radius: 19%; animation-name: tk-konfetti; animation-timing-function: linear; animation-fill-mode: forwards; will-change: transform; }
@keyframes tk-konfetti {
  0% { transform: translate3d(0, 0, 0) rotate(0) rotateX(0); }
  30% { transform: translate3d(var(--dx), 32vh, 0) rotate(calc(var(--r) * .3)) rotateX(calc(var(--r) * .9)); }
  62% { transform: translate3d(calc(var(--dx) * -.4), 66vh, 0) rotate(calc(var(--r) * .62)) rotateX(calc(var(--r) * 1.8)); }
  100% { transform: translate3d(calc(var(--dx) * .5), calc(100vh + 56px), 0) rotate(var(--r)) rotateX(calc(var(--r) * 2.9)); }
}
.tk-landet .tk-sl-arm { transform-box: fill-box; transform-origin: 0% 100%; }
.tk-landet.is-vinker .tk-sl-arm { animation: tk-sl-vink .42s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .tk-husly circle, .tk-lucia-for, .tk-lu-flamme, .tk-nordlys path, .tk-dryp, .tk-skud, .tk-stormsne circle, .tk-klokke, .tk-sm-hat.is-hop, .tk-landet.is-vinker .tk-sl-arm { animation: none !important; }
  .tk-rd-krop, .tk-rd-ben, .tk-rd-lys { animation: none !important; }
  .tk-rd-hoved { transition: none; }
  .tk-kravle, .tk-kravle .tk-kv-ben, .tk-kravle .tk-kv-arm { animation: none !important; }
  .tk-lucia-bag, .tk-konfetti { display: none; }
  .tk-lucia-for { animation: none !important; transform: translateX(60px); }
  .tk-skud { opacity: .8; visibility: visible; }
  .tk-frost { transition: none; }
}
/* v0.44.0 (Patrick 5/10): åbningsugen — åbningsfestens fyrværkeri og banner, Black Fridays neonskilt, diskokugle og blinkende vinduer */
.tk-fv-raket { animation: tk-fv-raket 7s linear infinite; animation-delay: var(--fv, 0s); opacity: 0; }
@keyframes tk-fv-raket { 0% { transform: translateY(64px); opacity: 0; } 2% { opacity: 1; } 12% { transform: translateY(0); opacity: 1; } 12.5%, 100% { transform: translateY(0); opacity: 0; } }
.tk-fv-ud { transform-box: fill-box; transform-origin: 50% 50%; animation: tk-fv-ud 7s ease-out infinite; animation-delay: var(--fv, 0s); opacity: 0; }
@keyframes tk-fv-ud { 0%, 12% { transform: scale(.12); opacity: 0; } 13% { opacity: 1; } 26% { transform: scale(1); opacity: .95; } 38%, 100% { transform: scale(1.12) translateY(3px); opacity: 0; } }
.tk-fv.is-tryk .tk-fv-raket { animation: tk-fv-raket1 .55s linear 1 forwards; }
@keyframes tk-fv-raket1 { 0% { transform: translateY(64px); opacity: 1; } 99% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.tk-fv.is-tryk .tk-fv-ud { animation: tk-fv-ud1 2s ease-out .55s 1 forwards; }
@keyframes tk-fv-ud1 { 0% { transform: scale(.12); opacity: 1; } 35% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.14) translateY(4px); opacity: 0; } }
.tk-ab-banner { animation: tk-ab-sving 4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes tk-ab-sving { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
.tk-bf-neon { animation: tk-bf-neon 5s steps(1) infinite; }
@keyframes tk-bf-neon { 0%, 17%, 21%, 61%, 64%, 100% { opacity: 1; } 18%, 20%, 62% { opacity: .3; } }
.tk-bf-skilt.is-blink .tk-bf-neon { animation: tk-bf-blink .12s steps(1) 6; }
@keyframes tk-bf-blink { 0% { opacity: .2; } 50% { opacity: 1; } }
.tk-bf-facetter { animation: tk-bf-disko 1.4s linear infinite; }
@keyframes tk-bf-disko { from { transform: translateX(0); } to { transform: translateX(6px); } }
.tk-bf-glimt { animation: tk-bf-glimt 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes tk-bf-glimt { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
.tk-pl-app .tk-bf-vin { animation: tk-bf-vin 1.65s steps(1) infinite; }
@keyframes tk-bf-vin { 0% { fill: #ff4fa3; } 33% { fill: #4fd8ff; } 66% { fill: #ffe14f; } }
@media (prefers-reduced-motion: reduce) {
  .tk-fv-raket, .tk-fv.is-tryk .tk-fv-raket { animation: none !important; opacity: 0; }
  .tk-fv-ud, .tk-fv.is-tryk .tk-fv-ud { animation: none !important; opacity: .85; transform: none; }
  .tk-ab-banner, .tk-bf-neon, .tk-bf-skilt.is-blink .tk-bf-neon, .tk-bf-facetter, .tk-bf-glimt, .tk-pl-app .tk-bf-vin { animation: none !important; }
}
/* v0.4.29: naboernes slag i demo-panelet */

/* naboernes vinduer (v0.7.7, Patrick 27/9): dannebrogsvindue og skyggeteater. Alle loops deler 36 s op (36, 12, 6, 3, 2.25, 2, 1.5, 1.2, .9, .6, .45),
   og fasen kommer fra --vt (fælles ur), så en gen-tegning af stuen ikke starter teatret forfra. Vinduerne tager ingen tryk. */
.tk-vin { pointer-events: none; }
.tk-vin .tk-vs { opacity: .84; }
.tk-vin.is-nat .tk-vin-lys { opacity: .3; }
.tk-vin.is-aften .tk-vin-lys { opacity: .8; } /* v0.7.11: aften */
.tk-vin .tk-vs-zzz { animation: tk-vs-zzz 6s linear infinite; animation-delay: calc(var(--vt) + var(--z, 0s)); opacity: 0; } /* nat: zZz driver op og ud af vinduet */
@keyframes tk-vs-zzz { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(5px, -17px); opacity: 0; } }
.tk-vin .tk-vs-dyne { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-vs-dyne 4s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-dyne { from { transform: scaleY(1); } to { transform: scaleY(1.08); } }
.tk-vin.is-nat .tk-vs { opacity: .55; }
.tk-vin .tk-vin-glans { transition: opacity .6s; }
.tk-vin.is-taendt .tk-vin-glans { animation: tk-vin-glans 1.8s ease-in-out infinite alternate; }
.tk-vin.is-jul .tk-vin-glans { animation: tk-vin-glans 1.8s ease-in-out infinite alternate; } /* juleaften (eventplanen v0.6.8, "alle vinduer er tændt"): papirstjernerne lyser, og lyset er varmere */
.tk-vin.is-jul .tk-vin-lys { filter: saturate(1.2) brightness(1.06); }
.tk-vin.is-nat.is-jul .tk-vin-lys { opacity: .55; }
@keyframes tk-vin-glans { from { opacity: .3; } to { opacity: .7; } }
.tk-vin .tk-vs-lampe { animation: tk-vs-lampe 6s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-lampe { from { opacity: .24; } to { opacity: .46; } }
.tk-vin .tk-vs-hale { transform-box: fill-box; transform-origin: 0 100%; animation: tk-vs-hale 3s ease-in-out infinite alternate; animation-delay: var(--vt); }
.tk-vin.is-nat .tk-vs-hale { animation-duration: 4.5s; }
@keyframes tk-vs-hale { from { transform: rotate(-16deg); } to { transform: rotate(20deg); } }
.tk-vin .tk-vs-damp circle { animation: tk-vs-damp 3s ease-out infinite; animation-delay: var(--vt); }
@keyframes tk-vs-damp { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(-4px); opacity: 0; } }
.tk-vin .tk-vs-kop-op, .tk-vin .tk-vs-skaal-op, .tk-vin .tk-vs-pynt-op, .tk-vin .tk-vs-bakke { opacity: 0; }
.tk-vin .tk-vs-kop-op { animation: tk-vs-kop-op 36s steps(1) infinite; animation-delay: var(--vt); }
.tk-vin .tk-vs-kop-ned { animation: tk-vs-kop-ned 36s steps(1) infinite; animation-delay: var(--vt); }
@keyframes tk-vs-kop-op { 0%, 8% { opacity: 0; } 8.01%, 12% { opacity: 1; } 12.01%, 36% { opacity: 0; } 36.01%, 40% { opacity: 1; } 40.01%, 66% { opacity: 0; } 66.01%, 70% { opacity: 1; } 70.01%, 100% { opacity: 0; } }
@keyframes tk-vs-kop-ned { 0%, 8% { opacity: 1; } 8.01%, 12% { opacity: 0; } 12.01%, 36% { opacity: 1; } 36.01%, 40% { opacity: 0; } 40.01%, 66% { opacity: 1; } 66.01%, 70% { opacity: 0; } 70.01%, 100% { opacity: 1; } }
.tk-vin .tk-vs-krydser { animation: tk-vs-krydser 36s linear infinite; animation-delay: var(--vt); }
@keyframes tk-vs-krydser { 0%, 50% { transform: translateX(-8px); } 58%, 100% { transform: translateX(40px); } }
.tk-vin .tk-vs-gang { animation: tk-vs-gang .45s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-gang { from { transform: translateY(0); } to { transform: translateY(-.9px); } }
.tk-vin .tk-vs-sving { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-vs-sving 1.2s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-sving { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.tk-vin .tk-vs-hop { animation: tk-vs-hop .6s ease-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-hop { from { transform: translateY(0); } to { transform: translateY(-1.8px); } }
.tk-vin .tk-vs-par { animation: tk-vs-par 36s ease-in-out infinite; animation-delay: var(--vt); }
@keyframes tk-vs-par { 0%, 42% { transform: translateX(0); } 50%, 58% { transform: translateX(26px); } 66%, 100% { transform: translateX(0); } }
.tk-vin .tk-vs-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-vs-flamme .9s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-flamme { from { transform: scale(1); opacity: .8; } to { transform: scale(1.3, .8); opacity: 1; } }
.tk-vin .tk-vs-aelte { animation: tk-vs-aelte .9s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-aelte { from { transform: translateY(0); } to { transform: translateY(1.6px); } }
.tk-vin .tk-vs-aelte-vis { animation: tk-vs-bakke-skjul 36s steps(1) infinite; animation-delay: var(--vt); }
.tk-vin .tk-vs-bakke { animation: tk-vs-bakke-vis 36s steps(1) infinite; animation-delay: var(--vt); }
@keyframes tk-vs-bakke-vis { 0%, 58% { opacity: 0; } 58.01%, 70% { opacity: 1; } 70.01%, 100% { opacity: 0; } }
@keyframes tk-vs-bakke-skjul { 0%, 58% { opacity: 1; } 58.01%, 70% { opacity: 0; } 70.01%, 100% { opacity: 1; } }
.tk-vin .tk-vs-bob { animation: tk-vs-bob 1.5s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-bob { from { transform: translateY(0); } to { transform: translateY(-1px); } }
.tk-vin .tk-vs-gynge { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-vs-gynge 3s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-gynge { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.tk-vin .tk-vs-side { transform-box: fill-box; transform-origin: 0 50%; animation: tk-vs-side 36s steps(1) infinite; animation-delay: var(--vt); }
@keyframes tk-vs-side { 0%, 20% { transform: scaleX(1); } 20.01%, 21% { transform: scaleX(.15); } 21.01%, 45% { transform: scaleX(1); } 45.01%, 46% { transform: scaleX(.15); } 46.01%, 75% { transform: scaleX(1); } 75.01%, 76% { transform: scaleX(.15); } 76.01%, 100% { transform: scaleX(1); } }
.tk-vin .tk-vs-nik { animation: tk-vs-nik 2s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-nik { from { transform: translateY(0); } to { transform: translateY(.7px); } }
.tk-vin .tk-vs-rejs { animation: tk-vs-rejs 36s ease-in-out infinite; animation-delay: var(--vt); }
@keyframes tk-vs-rejs { 0%, 40% { transform: translateY(0); } 42%, 50% { transform: translateY(-3px); } 52%, 100% { transform: translateY(0); } }
.tk-vin .tk-vs-skaal-op { animation: tk-vs-skaal-op 36s steps(1) infinite; animation-delay: var(--vt); }
.tk-vin .tk-vs-skaal-ned { animation: tk-vs-skaal-ned 36s steps(1) infinite; animation-delay: var(--vt); }
@keyframes tk-vs-skaal-op { 0%, 20% { opacity: 0; } 20.01%, 25% { opacity: 1; } 25.01%, 55% { opacity: 0; } 55.01%, 60% { opacity: 1; } 60.01%, 100% { opacity: 0; } }
@keyframes tk-vs-skaal-ned { 0%, 20% { opacity: 1; } 20.01%, 25% { opacity: 0; } 25.01%, 55% { opacity: 1; } 55.01%, 60% { opacity: 0; } 60.01%, 100% { opacity: 1; } }
.tk-vin .tk-vs-pynt-op { animation: tk-vs-pynt-op 6s steps(1) infinite; animation-delay: var(--vt); }
.tk-vin .tk-vs-pynt-ned { animation: tk-vs-pynt-ned 6s steps(1) infinite; animation-delay: var(--vt); }
@keyframes tk-vs-pynt-op { 0%, 55% { opacity: 0; } 55.01%, 100% { opacity: 1; } }
@keyframes tk-vs-pynt-ned { 0%, 55% { opacity: 1; } 55.01%, 100% { opacity: 0; } }
.tk-vin .tk-vs-lys { animation: tk-vs-lys 2.25s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-lys { from { opacity: .3; } to { opacity: 1; } }
.tk-vin .tk-vs-topstjerne { transform-box: fill-box; transform-origin: 50% 50%; animation: tk-vs-topstjerne 3s ease-in-out infinite alternate; animation-delay: var(--vt); }
@keyframes tk-vs-topstjerne { from { opacity: .7; transform: scale(.9); } to { opacity: 1; transform: scale(1.15); } }
.tk-vin .tk-vs-ring { transform-box: fill-box; transform-origin: 50% 100%; animation: tk-vs-ring 12s linear infinite; animation-delay: var(--vt); }
.tk-vin .tk-vs-ring.is-bag { animation-name: tk-vs-ring-bag; }
@keyframes tk-vs-ring { 0% { transform: translate(12px, 0) scale(.93); opacity: 1; } 12.5% { transform: translate(8.5px, 2.4px) scale(.98); } 25% { transform: translate(0, 3.4px) scale(1); } 37.5% { transform: translate(-8.5px, 2.4px) scale(.98); } 49.99% { transform: translate(-12px, .01px) scale(.93); opacity: 1; } 50% { transform: translate(-12px, 0) scale(.93); opacity: 0; } 62.5% { transform: translate(-8.5px, -2.4px) scale(.88); } 75% { transform: translate(0, -3.4px) scale(.86); } 87.5% { transform: translate(8.5px, -2.4px) scale(.88); } 99.99% { transform: translate(12px, -.01px) scale(.93); opacity: 0; } 100% { transform: translate(12px, 0) scale(.93); opacity: 1; } }
@keyframes tk-vs-ring-bag { 0% { transform: translate(12px, 0) scale(.93); opacity: 0; } 12.5% { transform: translate(8.5px, 2.4px) scale(.98); } 25% { transform: translate(0, 3.4px) scale(1); } 37.5% { transform: translate(-8.5px, 2.4px) scale(.98); } 49.99% { transform: translate(-12px, .01px) scale(.93); opacity: 0; } 50% { transform: translate(-12px, 0) scale(.93); opacity: 1; } 62.5% { transform: translate(-8.5px, -2.4px) scale(.88); } 75% { transform: translate(0, -3.4px) scale(.86); } 87.5% { transform: translate(8.5px, -2.4px) scale(.88); } 99.99% { transform: translate(12px, -.01px) scale(.93); opacity: 1; } 100% { transform: translate(12px, 0) scale(.93); opacity: 0; } }
.tk-vin .tk-vs-vink { opacity: 0; }
.tk-vin.is-taendt .tk-vs-vink { animation: tk-vs-vink 10s ease-in-out 1 forwards; animation-delay: var(--vtt, 0s); }
@keyframes tk-vs-vink { 0% { opacity: 0; transform: translateX(-4px); } 6% { opacity: 1; transform: translateX(-4px); } 24% { transform: translateX(18px); } 78% { transform: translateX(18px); opacity: 1; } 94% { transform: translateX(-4px); opacity: 1; } 100% { opacity: 0; transform: translateX(-4px); } }
.tk-vin .tk-vs-vink-arm { transform-box: fill-box; transform-origin: 0 100%; }
.tk-vin.is-taendt .tk-vs-vink-arm { animation: tk-vs-vink-arm .4s ease-in-out 12 alternate; animation-delay: calc(var(--vtt, 0s) + 2.8s); }
@keyframes tk-vs-vink-arm { from { transform: rotate(0deg); } to { transform: rotate(-38deg); } }
@media (prefers-reduced-motion: reduce) {
  .tk-vin * { animation: none !important; }
  .tk-vin .tk-vs-kop-op, .tk-vin .tk-vs-skaal-op, .tk-vin .tk-vs-pynt-op, .tk-vin .tk-vs-bakke, .tk-vin .tk-vs-vink, .tk-vin .tk-vs-ring.is-bag { opacity: 0 !important; }
  .tk-vin .tk-vs-krydser { transform: translateX(-8px); }
  .tk-vin .tk-vs-ring.is-for:nth-of-type(1) { transform: translate(12px, 0) scale(.93); }
  .tk-vin .tk-vs-ring.is-for:nth-of-type(2) { transform: translate(-8px, 2px) scale(.98); }
  .tk-vin .tk-vs-ring.is-for:nth-of-type(3) { transform: translate(2px, 3px); }
}

/* husstanden i onboardingen (v0.7.7, Patrick 27/9): to tællere, voksne 1–4 og børn 0–6 */
.tk-hus { display: flex; gap: 12px; flex-wrap: wrap; }
.tk-hus-felt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1 1 140px; padding: 8px 10px 8px 14px; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); }
.tk-hus-label { font: 650 14px/20px var(--font-ui); color: var(--ink); }
.tk-hus-tal { display: inline-flex; align-items: center; gap: 6px; }
.tk-hus-tal .num { min-width: 22px; text-align: center; font: 700 17px/24px var(--font-ui); color: var(--ink); }
.tk-hus-knap { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-strong); background: transparent; color: var(--ink); font: 700 20px/28px var(--font-ui); cursor: pointer; }
.tk-hus-knap:not(:disabled):hover { background: var(--line-strong); }
.tk-hus-knap:disabled { opacity: .35; cursor: default; }

/* ---------- THEO, nisse-robotten (v0.7.9, Patrick 27/9): nederst til højre over navigationen, som toasten; lilla #6c58f5 overalt ---------- */
.tk-theo { position: absolute; top: 8px; right: 8px; z-index: 9; display: flex; align-items: flex-start; gap: 22px; pointer-events: none; } /* v0.7.13: 22 px luft, så boblen ender til venstre for træets stjerne på PC (målt 1280 px: stjernens midte 5 px inde i boblen ved 6 px) */ /* v0.7.12: oppe til højre i stuen (top/right sættes af theoPlacer efter scenen) */
.tk-theo > * { pointer-events: auto; }
/* v0.14.0 (Patrick 29/9): på PC står THEO i venstre side halvvejs nede i stuen — figuren yderst til venstre, boblen ved siden af, ind fra venstre */
.tk-theo.is-venstre { flex-direction: row-reverse; justify-content: flex-end; right: auto; }
.tk-theo.is-venstre .tk-theo-fig { animation-name: tk-theo-ind-v; }
.tk-theo.is-venstre.is-ud .tk-theo-fig { animation-name: tk-theo-ud-v; }
.tk-theo.is-venstre .tk-theo-boble { border-radius: 4px 14px 14px 14px; }
@keyframes tk-theo-ind-v { from { transform: translateX(-120px) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tk-theo-ud-v { to { transform: translateX(-140px) translateY(-20px) rotate(6deg); opacity: 0; } }
.tk-theo-fig { appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; width: 78px; height: 110px; flex: none; animation: tk-theo-ind .7s cubic-bezier(.2, .8, .2, 1) both; }
.tk-theo-fig svg { width: 100%; height: 100%; display: block; overflow: visible; animation: tk-theo-svaev 3s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.tk-theo.is-ud .tk-theo-fig { animation: tk-theo-ud .6s ease-in both; }
.tk-theo-boble { /* v0.7.13: 300 px og tekster på højst ca. 150 tegn = 4 linjer, så boblen ender over træets stjerne på PC */ background: var(--surface-raised); color: var(--ink); border: 2px solid #6c58f5; border-radius: 14px 4px 14px 14px; padding: 9px 12px 10px; max-width: 300px; box-shadow: var(--shadow-lift); font: 500 14px/20px var(--font-ui); animation: tk-theo-boble .4s .3s ease-out both; }
.tk-theo.is-ud .tk-theo-boble { animation: tk-theo-boble-ud .3s ease-in both; }
.tk-theo-navn { display: flex; align-items: center; gap: 4px; color: #6c58f5; font: 800 12px/16px var(--font-ui); letter-spacing: .06em; }
.tk-theo-boble p { margin: 4px 0 8px; }
.tk-theo-knapper { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.tk-theo-link { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: #6c58f5; font: 700 14px/20px var(--font-ui); text-decoration: underline; text-underline-offset: 2px; }
.tk-theo-tak { appearance: none; border: 0; cursor: pointer; padding: 5px 11px; border-radius: var(--radius-pill); background: #6c58f5; color: #fff; font: 700 12px/16px var(--font-ui); min-height: 28px; }
.tk-theo-oje { transform-origin: 32px 23px; animation: tk-theo-blink 4.5s ease-in-out infinite; }
.tk-theo-smil { display: none; }
.tk-theo.is-glad .tk-theo-oje { display: none; }
.tk-theo.is-glad .tk-theo-smil { display: block; }
.tk-theo.is-glad .tk-theo-mund { d: path("M26.5 27.5 Q32 33 37.5 27.5"); }
.tk-theo-lys { animation: tk-theo-lys 1.6s ease-in-out infinite alternate; }
.tk-theo-jet { transform-origin: 32px 77px; animation: tk-theo-jet .9s ease-in-out infinite alternate; }
.tk-theo-arm-h { transform-origin: 49px 47px; }
.tk-theo.is-glad .tk-theo-arm-h { animation: tk-theo-vink .45s ease-in-out 6 alternate; }
@keyframes tk-theo-ind { from { transform: translateX(120px) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tk-theo-ud { to { transform: translateX(140px) translateY(-20px) rotate(-6deg); opacity: 0; } }
@keyframes tk-theo-svaev { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes tk-theo-boble { from { transform: translateY(8px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tk-theo-boble-ud { to { transform: translateY(8px); opacity: 0; } }
@keyframes tk-theo-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes tk-theo-lys { from { opacity: .45; } to { opacity: 1; } }
@keyframes tk-theo-jet { from { transform: scaleX(.8); opacity: .2; } to { transform: scaleX(1.1); opacity: .4; } }
@keyframes tk-theo-vink { from { transform: rotate(-70deg); } to { transform: rotate(-110deg); } }
@media (max-width: 520px) { /* mobil: mindre figur, smallere boble (placeringen er den samme: oppe til højre i stuen) */
  .tk-theo { gap: 6px; }
  .tk-theo-boble { max-width: calc(100vw - 104px); }
  .tk-theo-fig { width: 62px; height: 88px; }
}
.tk-theo.is-stille .tk-theo-fig, .tk-theo.is-stille .tk-theo-fig svg, .tk-theo.is-stille .tk-theo-boble, .tk-theo.is-stille .tk-theo-oje, .tk-theo.is-stille .tk-theo-lys, .tk-theo.is-stille .tk-theo-jet, .tk-theo.is-stille .tk-theo-arm-h { animation: none; }

/* v0.7.18 (Patrick 28/9): præmiekortene på Præmier-fanen i to kolonner på PC (50 % bredde) med hele tegningen (2:1, ingen fast højde) */
.tk-pm-kort-grid { display: flex; flex-direction: column; gap: 12px; }
.tk-pl-app .tk-pm-maader .tk-gevinst { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.tk-pl-app .tk-pm-maader .tk-gevinst .tk-pr-body { padding: 12px 16px 14px; gap: 6px; }
.tk-pl-app .tk-pm-maader .tk-gevinst .tk-pr-bill svg { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.tk-pl-app .tk-pm-maader .tk-metode-nr { top: 10px; left: 10px; }
@media (min-width: 700px) { .tk-pm-kort-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } }

/* v0.7.19 (Patrick 28/9): Missioner — banneret tilbage; "Spil tilbage" med chippen til højre; graferne to og to på PC */
.tk-mis-spil { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tk-mis-spil > div { min-width: 0; }
.tk-stat-grafer { display: flex; flex-direction: column; gap: 10px; }
.tk-stat-grafer > * { min-width: 0; flex: none; }
@media (min-width: 700px) { .tk-stat-grafer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } }

/* v0.8.0 (trin 6·4/6·5/små): "?"-hjælpen i toppen, vinderne på præmiekortene, hjælpearket */
.tk-hjaelp { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 800 17px/1 var(--font-ui); cursor: pointer; flex: none; }
.tk-hjaelp:hover, .tk-hjaelp:focus-visible { background: var(--surface-sunk); }
.tk-vindere { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.tk-vindere .tk-cap { margin: 0 0 2px; }
.tk-hjaelp-liste { margin: 6px 0 12px; padding-left: 18px; font: 500 15px/22px var(--font-ui); display: flex; flex-direction: column; gap: 6px; }
.tk-forlad .pl-btn-ghost { color: var(--accent-ink); }

/* ---------- nissehuerne i spillets aktivering (v0.18.0) ---------- */
.tk-hue-valg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tk-hue-valg .tk-hue { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); transition: transform .15s ease; }
.tk-hue-valg .tk-hue:hover { transform: translateY(-2px); }
.tk-hue-valg .tk-hue.is-valgt { box-shadow: 0 0 0 3px var(--glow, #f4b942), inset 0 0 0 2px rgba(255, 255, 255, .6); }
.tk-hue-valg .tk-hue:focus-visible { outline: 3px solid var(--focus, #ffd166); outline-offset: 3px; }
/* ---------- v0.25.0 (Patrick 1/10): Ceilies overlay — tilmeldingen (udlogget, venteliste.js), "før åbning" (SCREENS.foer) og pausen (SCREENS.pause) ----------
   Én boks over stuen, aldrig spillets levende stue: ingen lyde, ingen kald. Båndet øverst viser stuen og nedtællingen; formularerne har et hoved med
   tilbage-knap. PC: boksen (720 px) midt over den dæmpede stue. Mobil: boksen fylder skærmen.
   v0.26.0 (Patrick 1/10): stuen er spillets egen tegning som vektor (assets/stue.svg) i baggrundslaget .tk-ov-bg med stuens egne små bevægelser;
   boksene ligger i rullefladen .tk-ov-rul, så stuen står stille, når man ruller. Båndet er gennemsigtigt, så stuen ses gennem boksen. "Før åbning"
   har tre bokse (.tk-ov-stak): nedtællingen i fuld bredde, "Inviter en ven" og "Det kan du vinde" side om side (mobil: under hinanden). */
.tk-pl-app.tk-vl { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } /* tilmeldingssiden: den mørke baggrund fylder skærmen, også uden child-temaets side. 0.53.2 (Patrick 15/10: "jeg kan ikke scrolle i den"): den fritstående side har html/body på 100 %, og spil-boksen er ellers viewport-høj med overflow hidden — landingssiden skal rulle som en almindelig side (boksene login/opret ruller så med siden i stedet for inde i .tk-ov-rul) */
.tk-vl-side { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.tk-pl-app .tk-ov { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; color: #fff; font-family: var(--font-ui); background: #0e1c14; }
.tk-pl-app .tk-ov-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(#16301f, #0b1710); } /* stuen (stue.svg); uden den: den mørke baggrund */
.tk-pl-app .tk-ov-bg > svg { display: block; width: 100%; height: 100%; }
.tk-pl-app .tk-ov-bg::after { content: ''; position: absolute; inset: 0; background: rgba(10, 22, 15, .58); } /* dæmpet, så teksten kan læses */
.tk-pl-app .tk-ov-rul { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; box-sizing: border-box; padding: 32px 16px; }
.tk-pl-app .tk-ov-boks { position: relative; margin: auto; width: 100%; max-width: 720px; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: transparent; border: 1px solid #3a5a42; border-radius: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.tk-pl-app .tk-ov :focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.tk-pl-app .tk-ov-band { position: relative; flex: none; min-height: 200px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 74px 24px 22px; border-bottom: 1px solid #2c4933;
  background: linear-gradient(rgba(10, 22, 15, .05), rgba(10, 22, 15, .4)); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } /* gennemsigtigt: stuen bag boksen ses */
.tk-pl-app .tk-ov-boks.is-start .tk-ov-band { min-height: 280px; }
.tk-pl-app .tk-ov-chip { position: absolute; left: 24px; top: 18px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(19, 36, 26, .88); }
.tk-pl-app .tk-ov-chip svg { display: block; width: auto; height: 22px; }
.tk-pl-app .tk-ov-chip i { width: 1px; height: 20px; background: #3a5a42; }
.tk-pl-app .tk-ov-chip span { font: 700 12px/1 var(--font-ui); letter-spacing: 1.5px; color: #a4c856; white-space: nowrap; }
.tk-pl-app .tk-ov-band .tk-topright { position: absolute; right: 18px; top: 22px; display: flex; } /* testerne: demo-knappen */
.tk-pl-app .tk-ov-ned { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.tk-pl-app .tk-ov-ned-h { font: 700 14px/1.2 var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: #a4c856; text-align: center; }
.tk-pl-app .tk-ov-fliser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 416px; } /* v0.26.0: dage, timer, minutter og sekunder */
.tk-pl-app .tk-ov-boks.is-start .tk-ov-fliser { max-width: 600px; }
.tk-pl-app .tk-ov-fliser > div { padding: 10px 0 8px; text-align: center; background: rgba(19, 36, 26, .9); border: 1px solid #3a5a42; border-radius: 14px; }
.tk-pl-app .tk-ov-fliser b { display: block; font: 700 30px/1.1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.tk-pl-app .tk-ov-boks.is-start .tk-ov-fliser b { font-size: 52px; }
.tk-pl-app .tk-ov-fliser span { font: 500 14px/1.3 var(--font-ui); color: #c2cebe; }
.tk-pl-app .tk-ov-ned-dato { font: 600 14px/1.3 var(--font-ui); color: #fff; }
.tk-pl-app .tk-ov-hoved { flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 64px; padding: 0 16px; border-bottom: 1px solid #1e3528; background: #13241a; }
.tk-pl-app .tk-ov-hoved .tk-ov-chip { position: static; justify-self: center; height: auto; padding: 0; background: none; }
.tk-pl-app .tk-ov-tilbage { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #b8c5b3; cursor: pointer; }
.tk-pl-app .tk-ov-tilbage:hover { background: rgba(255, 255, 255, .06); }
.tk-pl-app .tk-ov-krop { flex: 1 1 auto; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 24px 40px 28px; background: #13241a; }
.tk-pl-app .tk-ov-h { margin: 0; font: 700 26px/1.2 var(--font-display); color: #fff; text-wrap: balance; }
.tk-pl-app .tk-ov-boks.is-start .tk-ov-h { font-size: 24px; }
.tk-pl-app .tk-ov-sub { margin: 0; font: 400 15px/1.5 var(--font-ui); color: #d3ddcc; }
.tk-pl-app .tk-ov-tekst { display: flex; flex-direction: column; gap: 8px; }
.tk-pl-app .tk-ov-note { margin: 0; font: 400 13px/1.45 var(--font-ui); color: #a4b4a1; }
.tk-pl-app .tk-ov-hint { margin: 0; font: 400 13px/1.4 var(--font-ui); color: #8fa08c; }
.tk-pl-app .tk-ov-hint a, .tk-pl-app .tk-ov-note a, .tk-pl-app .tk-ov .tk-err a { color: #a4c856; }
.tk-pl-app .tk-ov-knapper { display: flex; gap: 12px; }
.tk-pl-app .tk-ov-knapper > * { flex: 1 1 0; }
.tk-pl-app .tk-ov-knap { appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #a4c856; color: #13241a; font: 700 16px/1.2 var(--font-ui); text-align: center; text-decoration: none; cursor: pointer; }
.tk-pl-app .tk-ov-knap:hover { background: #b3d465; }
.tk-pl-app .tk-ov-knap:disabled { opacity: .6; cursor: default; }
.tk-pl-app .tk-ov-knap.is-sekundaer { background: transparent; color: #fff; border: 1px solid #56705b; }
.tk-pl-app .tk-ov-knap.is-sekundaer:hover { background: rgba(255, 255, 255, .06); }
.tk-pl-app .tk-ov-link { appearance: none; padding: 0; border: 0; background: none; color: #a4c856; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.tk-pl-app .tk-ov-link:hover { text-decoration: underline; }
.tk-pl-app .tk-ov-form { width: 100%; max-width: 380px; align-self: center; display: flex; flex-direction: column; gap: 14px; }
.tk-pl-app .tk-ov-titel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; text-align: center; }
.tk-pl-app .tk-ov-titel .tk-ov-sub { color: #b8c5b3; }
.tk-pl-app .tk-ov-felt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-pl-app .tk-ov-felt > label { font: 600 13px/1.3 var(--font-ui); color: #b8c5b3; }
.tk-pl-app .tk-ov-input { width: 100%; min-width: 0; height: 46px; box-sizing: border-box; padding: 0 14px; border: 1px solid #34523b; border-radius: 12px; background: #0e1c14; color: #fff; font: 400 16px/1.2 var(--font-ui); }
.tk-pl-app .tk-ov-input:focus { outline: none; border-color: #a4c856; box-shadow: 0 0 0 3px rgba(164, 200, 86, .25); }
.tk-pl-app .tk-ov-to { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tk-pl-app .tk-ov-to.is-by { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.tk-pl-app .tk-ov-kode { display: flex; gap: 8px; }
.tk-pl-app .tk-ov-vis { flex: none; min-width: 64px; height: 46px; border: 1px solid #34523b; border-radius: 12px; background: transparent; color: #b8c5b3; font: 600 14px/1 var(--font-ui); cursor: pointer; }
.tk-pl-app .tk-ov-glemt { align-self: flex-end; margin-top: -6px; font: 600 13px/1.3 var(--font-ui); color: #a4c856; text-decoration: none; }
.tk-pl-app .tk-ov-glemt:hover { text-decoration: underline; }
.tk-pl-app .tk-ov-skift { margin: 0; text-align: center; font: 400 13px/1.45 var(--font-ui); color: #8fa08c; }
.tk-pl-app .tk-ov .tk-err { margin: 0; font: 600 13px/1.4 var(--font-ui); color: #ffb4a8; }
.tk-pl-app .tk-ov .tk-err[hidden] { display: none; }
.tk-pl-app .tk-ov .tk-fl-loginknap { width: 100%; margin-top: 8px; }
.tk-pl-app .tk-ov-midt { width: 100%; max-width: 400px; align-self: center; margin-block: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tk-pl-app .tk-ov-midt > .tk-ov-knap, .tk-pl-app .tk-ov-midt > .tk-ov-knapper { width: 100%; }
.tk-pl-app .tk-ov-ikon { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 999px; background: #1e3528; color: #a4c856; }
.tk-pl-app .tk-ov-hej { display: flex; align-items: center; gap: 14px; }
.tk-pl-app .tk-ov-flueben { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: #a4c856; color: #13241a; }
.tk-pl-app .tk-ov-boks.is-foer .tk-ov-h { font-size: 28px; }
.tk-pl-app .tk-ov-boks.is-foer > .tk-ov-krop > .tk-ov-knap { align-self: flex-start; }
.tk-pl-app .tk-ov-stak { position: relative; margin: auto; width: 100%; max-width: 960px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.tk-pl-app .tk-ov-stak > .tk-ov-boks { margin: 0; max-width: none; }
.tk-pl-app .tk-ov-stak > .tk-ov-boks.is-foer { grid-column: 1 / -1; }
.tk-pl-app .tk-ov-boks.is-del .tk-ov-krop, .tk-pl-app .tk-ov-boks.is-pr .tk-ov-krop { gap: 14px; padding: 22px 26px 24px; }
.tk-pl-app .tk-ov-kh { margin: 0; font: 700 13px/1.2 var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: #a4c856; }
.tk-pl-app .tk-ov-boks.is-del .tk-ov-sub { font-size: 14px; }
.tk-pl-app .tk-ov-linkrk { display: flex; gap: 8px; }
.tk-pl-app .tk-ov-linkrk .tk-ov-input { flex: 1 1 auto; height: 44px; font-size: 14px; }
.tk-pl-app .tk-ov-linkrk .tk-ov-knap { flex: none; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.tk-pl-app .tk-ov-ik { display: block; flex: none; width: 20px; height: 20px; }
.tk-pl-app .tk-ov-del { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tk-pl-app .tk-ov-del > a, .tk-pl-app .tk-ov-del > button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; min-height: 46px; box-sizing: border-box; padding: 0 12px; border: 1px solid #34523b; border-radius: 14px; background: #1a3022; color: #fff; font: 600 14px/1.1 var(--font-ui); text-decoration: none; cursor: pointer; }
.tk-pl-app .tk-ov-del > a:hover, .tk-pl-app .tk-ov-del > button:hover { background: #22402d; border-color: #56705b; }
.tk-pl-app .tk-ov-del span { min-width: 0; }
.tk-pl-app .tk-ov-del > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* den sidste knap alene: fuld bredde */
.tk-pl-app .tk-ov-pr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tk-pl-app .tk-ov-pr li { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #1a3022; border: 1px solid #2c4933; border-radius: 16px; }
.tk-pl-app .tk-ov-prbill { flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 50px; }
.tk-pl-app .tk-ov-prbill svg { display: block; width: 100%; height: 100%; }
.tk-pl-app .tk-ov-prtxt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tk-pl-app .tk-ov-prtxt b { font: 700 14px/1.25 var(--font-ui); color: #fff; }
.tk-pl-app .tk-ov-prtxt > span { font: 400 13px/1.35 var(--font-ui); color: #b8c5b3; }
.tk-pl-app .tk-ov-antal { display: inline-block; margin-right: 2px; padding: 0 7px; border-radius: 999px; background: #f4b942; color: #13241a; font: 800 12px/1.6 var(--font-ui); white-space: nowrap; vertical-align: 1px; } /* v0.27.0: antallet ("mængde betyder noget") */
.tk-pl-app .tk-nw { white-space: nowrap; } /* v0.27.0: "825 GB-bundle" brydes ikke ved bindestregen */
.tk-pl-app .tk-ov-prh { margin: 2px 0 -4px; font: 700 12px/1.2 var(--font-ui); letter-spacing: 1.2px; text-transform: uppercase; color: #b8c5b3; } /* v0.27.0: "Præmieoversigt" */
.tk-pl-app .tk-ov-boks.is-pr .tk-ov-sub { font-size: 14px; }
.tk-pl-app .tk-ov-boks.is-pr .tk-ov-krop > .tk-ov-link { align-self: flex-start; font-size: 14px; }
.tk-pl-app .tk-ov-boks.is-pause { max-width: 520px; }
.tk-pl-app .tk-ov-boks.is-pause .tk-ov-krop { padding: 32px 32px 36px; }
@media (max-width: 699px) {
  .tk-pl-app .tk-ov-rul { padding: 0; }
  .tk-pl-app .tk-ov-boks { max-width: none; min-height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .tk-pl-app .tk-ov-boks.is-pause { min-height: 0; margin: auto 16px; border: 1px solid #3a5a42; border-radius: 24px; } /* pausen: et kort over stuen */
  .tk-pl-app .tk-ov-band { min-height: 190px; padding: 70px 16px 18px; }
  .tk-pl-app .tk-ov-boks.is-start .tk-ov-band { min-height: 236px; }
  .tk-pl-app .tk-ov-boks.is-start .tk-ov-fliser b { font-size: 34px; }
  .tk-pl-app .tk-ov-fliser { gap: 8px; }
  .tk-pl-app .tk-ov-chip { left: 16px; top: 14px; }
  .tk-pl-app .tk-ov-band .tk-topright { right: 14px; top: 18px; }
  .tk-pl-app .tk-ov-krop { padding: 20px 16px 28px; }
  .tk-pl-app .tk-ov-boks.is-pause .tk-ov-krop { padding: 28px 20px 32px; }
  .tk-pl-app .tk-ov-knapper { flex-direction: column; }
  .tk-pl-app .tk-ov-stak { display: flex; flex-direction: column; gap: 16px; max-width: none; padding-bottom: 24px; }
  .tk-pl-app .tk-ov-stak > .tk-ov-boks.is-foer { min-height: 0; }
  .tk-pl-app .tk-ov-stak > .tk-ov-boks.is-del, .tk-pl-app .tk-ov-stak > .tk-ov-boks.is-pr { min-height: 0; width: auto; margin: 0 16px; border: 1px solid #3a5a42; border-radius: 24px; }
  .tk-pl-app .tk-ov-boks.is-del .tk-ov-krop, .tk-pl-app .tk-ov-boks.is-pr .tk-ov-krop { padding: 20px 18px 22px; }
  .tk-pl-app .tk-ov-prbill { width: 60px; height: 42px; }
  .tk-pl-app .tk-ov-boks.is-foer .tk-ov-h { font-size: 24px; }
}
/* ---------- v0.52.0 (Patrick 14/10): landingssiden for udloggede (venteliste.js, afsnit 1) — kun under .tk-vl, så intet når spillet ----------
   v0.53.0 (Patrick 14/10 aften, forslag B): hovedet, heroen med båndet "Præmier for 115.000 kr.", overskriften, kortene om spillet og formularen
   (.tk-ld-form) i højre side; nedtællingen som bjælke (.tk-ld-ned, de samme fliser .tk-ov-fliser som før); scenen med de tre minispil (.tk-ms-*:
   faner, plakater, hajen); rækken "Hver dag frem til jul" (.tk-ld-dag) og THEO (.tk-ld-hygge); præmiekortene og den fulde oversigt (.tk-ld-pr-l);
   "Klar til jul?" nederst (.tk-ld-slut). Julepynt som SVG (.tk-ld-p). Telefon først; PC fra 700 px. "Reducer bevægelse": sneen, scenerne og faneskiftet står stille. */
.tk-vl .tk-ld { --ld-gold-dim: #8a6c2c; --ld-red: #9e3524; --ld-display: "Bricolage Grotesque", var(--font-ui); position: relative; width: 100%; overflow: hidden; background: var(--surface); color: var(--ink); font: 400 16px/1.5 var(--font-ui); }
.tk-vl .tk-ld-sne { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Ccircle cx='165' cy='77' r='2.0' fill='%23fff' fill-opacity='0.47'/%3E%3Ccircle cx='274' cy='48' r='2.0' fill='%23fff' fill-opacity='0.47'/%3E%3Ccircle cx='259' cy='109' r='1.6' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='35' cy='123' r='1.7' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='289' cy='63' r='2.5' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='298' cy='31' r='2.2' fill='%23fff' fill-opacity='0.59'/%3E%3Ccircle cx='113' cy='23' r='2.2' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='214' cy='73' r='2.1' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='286' cy='349' r='1.8' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='327' cy='96' r='2.0' fill='%23fff' fill-opacity='0.64'/%3E%3Ccircle cx='32' cy='288' r='1.7' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='348' cy='272' r='2.0' fill='%23fff' fill-opacity='0.56'/%3E%3Ccircle cx='299' cy='232' r='2.0' fill='%23fff' fill-opacity='0.54'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Ccircle cx='46' cy='178' r='1.3' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='76' cy='134' r='1.1' fill='%23fff' fill-opacity='0.40'/%3E%3Ccircle cx='114' cy='73' r='1.2' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='131' cy='107' r='0.9' fill='%23fff' fill-opacity='0.40'/%3E%3Ccircle cx='238' cy='125' r='1.1' fill='%23fff' fill-opacity='0.59'/%3E%3Ccircle cx='19' cy='195' r='1.1' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='209' cy='80' r='1.0' fill='%23fff' fill-opacity='0.41'/%3E%3Ccircle cx='127' cy='148' r='1.3' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='23' cy='69' r='1.1' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='15' cy='187' r='1.2' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='174' cy='210' r='1.1' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='227' cy='171' r='1.0' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='90' cy='43' r='1.2' fill='%23fff' fill-opacity='0.45'/%3E%3Ccircle cx='55' cy='196' r='1.0' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='101' cy='100' r='1.4' fill='%23fff' fill-opacity='0.45'/%3E%3Ccircle cx='42' cy='114' r='1.0' fill='%23fff' fill-opacity='0.38'/%3E%3C/svg%3E"); background-size: 360px 360px, 240px 240px; animation: tk-ld-sne 40s linear infinite; }
@keyframes tk-ld-sne { from { background-position: 0 0, 0 0; } to { background-position: 0 720px, 0 960px; } }
.tk-vl .tk-ld-p { display: block; line-height: 0; }
.tk-vl .tk-ld-p > svg { display: block; width: 100%; height: 100%; }
.tk-vl .tk-ld-guirl { position: relative; z-index: 1; display: block; width: 100%; height: 64px; max-height: none; overflow: visible; } /* v0.52.1 (Patrick 14/10): lysene må hænge helt ned — 64 px, intet klip (temaets svg-regler overstyres) */
.tk-vl .tk-ld-guirl + .tk-ld-kugler, .tk-vl .tk-ld-w { margin-top: -18px; } /* headeren rykker op igen, så siden står som før */
.tk-vl .tk-ld-kugler { display: none; position: absolute; z-index: 1; top: 30px; width: 60px; height: 220px; pointer-events: none; }
.tk-vl .tk-ld-kugler.is-v { left: 14px; } .tk-vl .tk-ld-kugler.is-h { right: 14px; transform: scaleX(-1); }
.tk-vl .tk-ld-w { position: relative; z-index: 1; max-width: 1120px; margin-inline: auto; padding: 4px 16px 56px; }
.tk-vl .tk-ld-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.tk-vl .tk-ld-logo svg { display: block; width: auto; height: 26px; }
.tk-vl .tk-ld-chip { font: 700 13px/1.2 var(--ld-display); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); border: 1.5px solid var(--glow); padding: 4px 10px; border-radius: 4px; white-space: nowrap; }
.tk-vl .tk-ld-hero { display: grid; gap: 28px; padding: 24px 0 26px; }
.tk-vl .tk-ld-pulje { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 24px 8px; background: var(--glow); color: #1b1a0e; font: 800 19px/1.3 var(--ld-display); letter-spacing: -.01em; clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%, 11px 50%); }
.tk-vl .tk-ld-pulje .tk-ld-p, .tk-vl .tk-ld-sec-h .tk-ld-p, .tk-vl .tk-ld-pr-h .tk-ld-p, .tk-vl .tk-ld-tag .tk-ld-p, .tk-vl .tk-ms-tab .tk-ld-p { display: inline-block; flex: none; }
.tk-vl .tk-ld-pulje .tk-ld-p { width: 15px; height: 15px; }
.tk-vl .tk-ld-h1 { margin: 0; font: 800 40px/.98 var(--ld-display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.tk-vl .tk-ld-h1 span { color: var(--glow); }
.tk-vl .tk-ld-lead { margin: 14px 0 0; max-width: 32em; font-size: 17px; color: var(--ink-muted); }
.tk-vl .tk-ld-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tk-vl .tk-ld-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); font: 600 13px/1.3 var(--font-ui); color: var(--ink); }
.tk-vl .tk-ld-tag .tk-ld-p { width: 16px; height: 16px; }
.tk-vl .tk-ld-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.tk-vl .tk-ld .tk-ov-knap { min-height: 50px; padding: 12px 22px; border: 2px solid var(--glow); border-radius: 8px; background: var(--glow); color: #1b1a0e; font: 700 17px/1.2 var(--ld-display); }
.tk-vl .tk-ld .tk-ov-knap:hover { background: #ffc85a; }
.tk-vl .tk-ld .tk-ov-knap.is-sekundaer { background: transparent; color: var(--ink); border-color: var(--line); }
.tk-vl .tk-ld .tk-ov-knap.is-sekundaer:hover { border-color: var(--glow); }
.tk-vl .tk-ld .tk-ov-knap:disabled { opacity: .45; }
.tk-vl .tk-ld .tk-ov-link { color: var(--glow); text-decoration: underline; text-underline-offset: 3px; }
.tk-vl .tk-ld-note { margin: 18px 0 0; max-width: 34em; font-size: 14px; color: var(--ink-muted); }
/* nedtællingen som bjælke under heroen */
.tk-vl .tk-ld-ned { display: grid; justify-items: center; gap: 10px; margin: 4px 0 0; padding: 22px 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-sunk); text-align: center; } /* 0.55.0 (Patrick 15/10: "Coundown er underlig og meget lille.. 3-4x større og så skal den være centreret"): stablet og centreret, store tal */
.tk-vl .tk-ld-nedh { margin: 0; font: 700 14px/1.3 var(--ld-display); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.tk-vl .tk-ld-ned .tk-ov-fliser { display: flex; justify-content: center; width: auto; max-width: none; gap: 10px 20px; } /* 0.54.0: fliserne midt i bjælken som overskriften (på PC stod de i venstre side, mens "Spillet åbner om" stod i midten) */
.tk-vl .tk-ld-ned .tk-ov-fliser > div { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 0; border: 0; background: none; box-shadow: none; }
.tk-vl .tk-ld-ned .tk-ov-fliser b { font: 800 46px/1 var(--ld-display); letter-spacing: -.03em; color: var(--glow); font-variant-numeric: tabular-nums; }
.tk-vl .tk-ld-ned .tk-ov-fliser span { margin: 0; font: 600 12px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.tk-vl .tk-ld-neddato { margin: 0; font-size: 15px; color: var(--ink-muted); }
.tk-vl .tk-ld-neddato b { color: var(--ink); font-weight: 600; }
.tk-vl .tk-ld-skille { display: flex; align-items: center; gap: 12px; margin: 30px 0 30px; }
.tk-vl .tk-ld-skille::before, .tk-vl .tk-ld-skille::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ld-gold-dim)); }
.tk-vl .tk-ld-skille::after { transform: scaleX(-1); }
.tk-vl .tk-ld-skille .tk-ld-p { width: 190px; height: 28px; flex: none; }
.tk-vl .tk-ld-sec-h { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font: 800 26px/1.2 var(--ld-display); letter-spacing: -.015em; color: var(--ink); text-align: center; text-wrap: balance; }
.tk-vl .tk-ld-sec-h .tk-ld-p { width: 18px; height: 18px; }
.tk-vl .tk-ld-sec-p { margin: 8px auto 0; max-width: 40em; text-align: center; font-size: 15px; color: var(--ink-muted); }
/* minispillene: scenen med faner */
.tk-vl .tk-ms-stage { display: grid; gap: 14px; margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-sunk); }
.tk-vl .tk-ms-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tk-vl .tk-ms-tabs::-webkit-scrollbar { display: none; }
.tk-vl .tk-ms-tab { flex: 1 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--ink); font: 700 15px/1.2 var(--ld-display); white-space: nowrap; cursor: pointer; }
.tk-vl .tk-ms-tab[aria-selected="true"] { border-color: var(--glow); background: #2a4634; box-shadow: inset 0 0 0 1px var(--glow); }
.tk-vl .tk-ms-tab .tk-ld-p { width: 22px; height: 22px; }
.tk-vl .tk-ms-pane { display: grid; gap: 14px; }
.tk-vl .tk-ms-pane[hidden] { display: none; }
.tk-vl .tk-ms-scene { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 12px; background: #0b1a36; }
.tk-vl .tk-ms-scene > svg, .tk-vl .tk-ms-plakat { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tk-vl .tk-ms-plakat { object-fit: cover; }
.tk-vl .tk-ms-plakat.is-tom { display: grid; place-items: center; background: var(--surface-raised); }
.tk-vl .tk-ms-plakat.is-tom .tk-ld-p { width: 96px; height: 96px; opacity: .7; }
.tk-vl .tk-ms-over { pointer-events: none; }
.tk-vl .tk-ms-hud { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.tk-vl .tk-ms-hud span { padding: 3px 8px 4px; border-radius: 6px; background: rgba(19, 36, 26, .78); color: var(--ink); font: 700 12px/1.3 var(--ld-display); letter-spacing: .02em; }
.tk-vl .tk-ms-hud span b { color: var(--glow); }
.tk-vl .tk-ms-sponsor { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px 4px; border-radius: 6px; background: rgba(255, 255, 255, .9); color: #0e1b33; font: 800 11px/1.3 var(--ld-display); letter-spacing: .06em; text-transform: uppercase; }
.tk-vl .tk-ms-txt { display: grid; gap: 6px; padding: 0 2px; align-content: start; }
.tk-vl .tk-ms-k { font: 700 11px/1.3 var(--ld-display); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.tk-vl .tk-ms-h { margin: 0; font: 800 22px/1.08 var(--ld-display); letter-spacing: -.015em; color: var(--ink); }
.tk-vl .tk-ms-p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.tk-vl .tk-ms-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tk-vl .tk-ms-meta span { padding: 3px 8px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-sunk); font: 600 12px/1.3 var(--font-ui); color: var(--ink); }
.tk-vl .tk-ms-meta span b { color: var(--glow); }
.tk-vl .tk-ms-prik { display: flex; justify-content: center; gap: 6px; }
.tk-vl .tk-ms-prik i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tk-vl .tk-ms-prik i.on { background: var(--glow); }
/* scenernes bevægelser: hajen svømmer (spillets 26 s-rytme, kortere her), pebernødderne falder, sneen daler */
.tk-vl .tk-ms-haj { transform-box: fill-box; transform-origin: center; animation: tk-ms-svoem 9s ease-in-out infinite; }
@keyframes tk-ms-svoem { 0% { transform: translateX(0) scaleX(1); } 46% { transform: translateX(130px) scaleX(1); } 50% { transform: translateX(130px) scaleX(-1); } 96% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } }
.tk-vl .tk-ms-f { animation: tk-ms-fald linear infinite; }
.tk-vl .tk-ms-f.n1 { animation-duration: 2.6s; } .tk-vl .tk-ms-f.n2 { animation-duration: 3.3s; animation-delay: -1.2s; } .tk-vl .tk-ms-f.n3 { animation-duration: 2.9s; animation-delay: -2s; } .tk-vl .tk-ms-f.n4 { animation-duration: 3.6s; animation-delay: -.6s; } .tk-vl .tk-ms-f.n5 { animation-duration: 3.1s; animation-delay: -2.6s; }
@keyframes tk-ms-fald { from { transform: translateY(-30px) rotate(0); } to { transform: translateY(175px) rotate(200deg); } }
.tk-vl .tk-ms-sne { animation: tk-ms-sner 7s linear infinite; }
@keyframes tk-ms-sner { from { transform: translateY(0); } to { transform: translateY(180px); } }
/* hver dag frem til jul */
.tk-vl .tk-ld-dag { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; }
.tk-vl .tk-ld-dag li { display: grid; gap: 6px; min-width: 0; padding: 14px 12px; border-radius: 12px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); }
.tk-vl .tk-ld-dag .tk-ld-p { width: 40px; height: 40px; }
.tk-vl .tk-ld-dag b { font: 800 16px/1.15 var(--ld-display); letter-spacing: -.01em; color: var(--ink); }
.tk-vl .tk-ld-dag p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-muted); }
.tk-vl .tk-ld-hygge { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 18px 0 0; padding: 14px 16px; border: 1px dashed var(--ld-gold-dim); border-radius: 12px; }
.tk-vl .tk-ld-hygge .tk-ld-p { width: 46px; height: 46px; }
.tk-vl .tk-ld-hygge p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.tk-vl .tk-ld-hygge p b { color: var(--glow); }
/* præmierne: de fire kort og den fulde oversigt */
.tk-vl .tk-ld-pr-h { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 6px; font: 800 26px/1.2 var(--ld-display); letter-spacing: -.015em; color: var(--ink); text-align: center; text-wrap: balance; }
.tk-vl .tk-ld-pr-h .tk-ld-p { width: 18px; height: 18px; }
.tk-vl .tk-ld-pr-g { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tk-vl .tk-ld-pr-t { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border-radius: 12px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--ld-gold-dim); }
.tk-vl .tk-ld-pr-bill { aspect-ratio: 10 / 7; max-width: 100%; background: #e8f1e4; line-height: 0; }
.tk-vl .tk-ld-pr-bill svg { display: block; width: 100%; height: 100%; }
.tk-vl .tk-ld-pr-t.is-pc .tk-ld-pr-bill { background: #0e1b33; }
.tk-vl .tk-ld-pr-txt { display: grid; align-content: start; gap: 5px; padding: 10px 12px 13px; }
.tk-vl .tk-ld-pr-tag { justify-self: start; padding: 2px 7px 3px; border-radius: 4px; background: var(--glow); color: #1b1a0e; font: 700 11px/1.3 var(--ld-display); letter-spacing: .08em; text-transform: uppercase; }
.tk-vl .tk-ld-pr-n { font: 700 15px/1.25 var(--font-ui); color: var(--ink); text-wrap: balance; }
.tk-vl .tk-ld-pr-l { list-style: none; display: grid; margin: 18px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-sunk); }
.tk-vl .tk-ld-pr-l li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; min-width: 0; padding: 10px 14px; }
.tk-vl .tk-ld-pr-l li + li { border-top: 1px solid var(--line); }
@media (max-width: 699px) { .tk-vl .tk-ms-tabs { flex-wrap: wrap; overflow: visible; } .tk-vl .tk-ms-tab { flex: 1 1 calc(50% - 8px); } } /* v0.72.0 (Cecilie 27/10, #25): alle tre faner synlige på telefon (før rullede den tredje ud af billedet) */
.tk-vl .tk-ld-pr-ik { display: block; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: #e8f1e4; line-height: 0; }
.tk-vl .tk-ld-pr-ik svg { display: block; width: 100%; height: 100%; }
.tk-vl .tk-ld-pr-l b { display: block; font: 700 15px/1.3 var(--font-ui); color: var(--ink); }
.tk-vl .tk-ld-pr-l b em { margin-right: 4px; font: 800 15px/1.3 var(--ld-display); font-style: normal; color: var(--glow); }
.tk-vl .tk-ld-pr-l small { display: block; font-size: 13px; color: var(--ink-muted); }
.tk-vl .tk-ld-pr-mer { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--ink-muted); }
.tk-vl .tk-ld-pr-mer b { color: var(--ink); }
/* formularen med bånd og sløjfe (i heroen) */
.tk-vl .tk-ld-form-in { position: relative; padding: 46px 18px 22px; border-radius: 12px; background: var(--surface-raised); box-shadow: inset 0 0 0 5px var(--surface-raised), inset 0 0 0 6px var(--ld-gold-dim); }
.tk-vl .tk-ld-baand { position: absolute; left: 0; right: 0; top: 16px; height: 14px; pointer-events: none; background: linear-gradient(var(--glow), var(--glow)) 0 2px / 100% 1.5px no-repeat, linear-gradient(var(--glow), var(--glow)) 0 calc(100% - 2px) / 100% 1.5px no-repeat, var(--ld-red); }
.tk-vl .tk-ld-sloejfe { position: absolute; left: 50%; top: -6px; width: 80px; height: 52px; transform: translateX(-50%); pointer-events: none; }
.tk-vl .tk-ld-ekstra { display: block; font: 700 13px/1.3 var(--ld-display); letter-spacing: .1em; text-transform: uppercase; color: var(--glow); }
.tk-vl .tk-ld-form-in h2 { margin: 4px 0 0; font: 800 24px/1.05 var(--ld-display); letter-spacing: -.02em; color: var(--ink); }
.tk-vl .tk-ld-sub { margin: 8px 0 0; font-size: 15px; color: var(--ink-muted); }
.tk-vl .tk-ld-f { display: grid; gap: 10px; margin-top: 12px; }
.tk-vl .tk-ld-f .tk-ov-felt > label { font: 600 14px/1.3 var(--font-ui); color: var(--ink); }
.tk-vl .tk-ld-f .tk-ov-input { min-height: 48px; border: 1.5px solid #3f6150; border-radius: 8px; background: var(--surface-sunk); }
.tk-vl .tk-ld-f .tk-ov-vis { border-radius: 8px; }
.tk-vl .tk-ld-f .tk-ov-hint { color: var(--ink-muted); }
.tk-vl .tk-ld-f .tk-ov-knap { width: 100%; }
.tk-vl .tk-ld-f .tk-ov-skift { margin-top: 4px; font-size: 14px; color: var(--ink-muted); }
.tk-vl .tk-ld .tk-err { margin: 0; font: 600 13px/1.4 var(--font-ui); color: #ffb4a8; }
.tk-vl .tk-ld .tk-err[hidden] { display: none; }
.tk-vl .tk-ld .tk-fl-loginknap { width: 100%; margin-top: 8px; }
/* klar til jul? */
.tk-vl .tk-ld-slut { display: grid; justify-items: center; gap: 10px; margin-top: 34px; padding: 26px 18px; border-radius: 12px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--ld-gold-dim); text-align: center; }
.tk-vl .tk-ld-slut-p { width: 44px; height: 44px; }
.tk-vl .tk-ld-slut h2 { margin: 0; font: 800 26px/1.08 var(--ld-display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.tk-vl .tk-ld-slut p { margin: 0; max-width: 34em; font-size: 15px; color: var(--ink-muted); }
.tk-vl .tk-ld-slut .tk-ld-cta { margin-top: 6px; justify-content: center; }
@media (max-width: 699px) {
  .tk-vl .tk-ld-cta .tk-ov-knap { flex: 1 1 100%; width: 100%; } /* Patrick 14/10: på telefonen er begge knapper 100 % brede */
}
@media (min-width: 700px) {
  .tk-vl .tk-ld-hero { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 48px; padding: 40px 0 36px; }
  .tk-vl .tk-ld-h1 { font-size: 60px; }
  .tk-vl .tk-ld-sec-h { font-size: 32px; }
  .tk-vl .tk-ms-stage { padding: 18px; }
  .tk-vl .tk-ms-pane { grid-template-columns: 1.5fr 1fr; align-items: center; gap: 26px; }
  .tk-vl .tk-ms-pane .tk-ms-txt { padding: 0 6px; }
  .tk-vl .tk-ms-h { font-size: 30px; }
  .tk-vl .tk-ms-p { font-size: 17px; }
  .tk-vl .tk-ms-tab { flex: 1 1 0; justify-content: center; }
  .tk-vl .tk-ld-dag { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .tk-vl .tk-ld-dag li { padding: 18px 16px; }
  .tk-vl .tk-ld-dag b { font-size: 18px; }
  .tk-vl .tk-ld-dag p { font-size: 14.5px; }
  .tk-vl .tk-ld-pr-h { font-size: 30px; }
  .tk-vl .tk-ld-pr-g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .tk-vl .tk-ld-pr-n { font-size: 16px; }
  .tk-vl .tk-ld-pr-l { grid-template-columns: 1fr 1fr; }
  .tk-vl .tk-ld-pr-l li + li { border-top: 0; }
  .tk-vl .tk-ld-pr-l li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tk-vl .tk-ld-pr-l li:nth-child(even) { border-left: 1px solid var(--line); } .tk-vl .tk-ld-pr-l li:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; } /* v0.72.0 (#26): ingen tom celle uden streger */
  .tk-vl .tk-ld-form-in { padding: 50px 26px 26px; }
}
@media (min-width: 1240px) { .tk-vl .tk-ld-kugler { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .tk-vl .tk-ld-sne, .tk-vl .tk-ms-haj, .tk-vl .tk-ms-f, .tk-vl .tk-ms-sne { animation: none !important; }
}
/* ---------- v0.18.1: Sharkgaming, hovedsponsor (Patrick 30/9): hajfinnen i sneen, minispillet Max Bite Hunter, THEO's reklame, PC'en på Præmier ---------- */
.tk-sg { cursor: pointer; }
.tk-sg-svoem { animation: tk-sg-svoem 26s linear infinite; animation-delay: var(--vt, 0s); }
@keyframes tk-sg-svoem { 0% { transform: translateX(0); } 46% { transform: translateX(236px); } 50% { transform: translateX(236px); } 96% { transform: translateX(0); } 100% { transform: translateX(0); } }
.tk-sg-side-h { animation: tk-sg-h 26s linear infinite; animation-delay: var(--vt, 0s); }
.tk-sg-side-v { opacity: 0; animation: tk-sg-v 26s linear infinite; animation-delay: var(--vt, 0s); }
@keyframes tk-sg-h { 0%, 47.9% { opacity: 1; } 48%, 97.9% { opacity: 0; } 98%, 100% { opacity: 1; } } /* svinget: siden mod højre ud, siden mod venstre ind */
@keyframes tk-sg-v { 0%, 47.9% { opacity: 0; } 48%, 97.9% { opacity: 1; } 98%, 100% { opacity: 0; } }
.tk-sg-finne { animation: tk-sg-bob 1.7s ease-in-out infinite alternate; }
@keyframes tk-sg-bob { from { transform: translateY(0); } to { transform: translateY(1.4px); } }
.tk-sg-hop { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.tk-sg.is-hop .tk-sg-hop { animation: tk-sg-hop 1.4s cubic-bezier(.35, .1, .45, 1) both; }
@keyframes tk-sg-hop { 0% { opacity: 1; transform: translate(-12px, 22px) rotate(-40deg); } 50% { transform: translate(0, -24px) rotate(0deg); } 100% { opacity: 1; transform: translate(12px, 22px) rotate(40deg); } }
.tk-sg.is-hop .tk-sg-finne { animation: tk-sg-dyk 1.4s ease both; }
@keyframes tk-sg-dyk { 0% { opacity: 1; transform: translateY(0); } 12%, 86% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
.tk-sg-plask { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.tk-sg.is-hop .tk-sg-plask { animation: tk-sg-plask 1.4s ease-out both; }
@keyframes tk-sg-plask { 0% { opacity: 0; transform: translateY(0) scale(.4); } 8% { opacity: 1; } 22% { opacity: 0; transform: translateY(-6px) scale(1.2); } 78% { opacity: 0; transform: translateY(0) scale(.4); } 86% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px) scale(1.2); } }
.tk-sg-chip { display: inline-flex; align-items: center; background: #0d1320; border-radius: 10px; padding: 5px 9px; line-height: 0; flex: none; }
.tk-sg-chip .tk-sg-logo { display: block; width: 88px; height: auto; }
.tk-sg-chip-lille { padding: 3px 7px; border-radius: 8px; }
.tk-sg-chip-lille .tk-sg-logo { width: 60px; }
.tk-sg-boble { max-width: 250px; }
.tk-sg-boble .tk-sg-chip { margin: 0 auto 6px; }
.tk-theo-sponsor { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 700 11px/14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #6b7280; }
.tk-theo.is-sponsor .tk-theo-boble { border-color: #255BEE; }
.tk-theo.is-sponsor .tk-theo-link { color: #1d4ed8; background: #eef2ff; padding: 2px 8px; border-radius: 6px; font-weight: 800; } /* v0.72.0 (Michael 27/10, #37): linket skal kunne ses på den mørke baggrund */
.tk-pl-app .pl-overlay[data-id="sgspil"] .pl-sheet { background: #0b1628; color: #eef3ff; }
.tk-pl-app .pl-overlay[data-id="sgspil"] .pl-sheet::before { background: rgba(255, 255, 255, .25); }
.tk-sg-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tk-sg-sponsor { font: 700 11px/14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #9fb3d9; }
.tk-sg-luk { margin-left: auto; appearance: none; border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 40px; height: 40px; border-radius: 50%; font: 700 24px/40px var(--font-ui); cursor: pointer; flex: none; }
.tk-sg-luk:hover { background: rgba(255, 255, 255, .18); }
.tk-sg-h { margin: 0 0 4px; font: 800 26px/31px var(--font-ui); color: #fff; }
.tk-sg-p { margin: 0 0 12px; font: 500 15px/21px var(--font-ui); color: #c9d6f2; }
.tk-sg-bane { position: relative; border-radius: 14px; overflow: hidden; background: #0b1a36; box-shadow: inset 0 0 0 1px rgba(111, 183, 255, .25); }
.tk-sg-cv { display: block; width: 100%; touch-action: none; outline: none; cursor: grab; }
.tk-sg .pl-btn-primary { background: #255BEE; color: #fff; }
.tk-sg .pl-btn-primary:hover { background: #1d49c9; }
.tk-sg-start { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); min-width: 160px; min-height: 54px; font-size: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.tk-sg-bonus { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(244, 185, 66, .14); color: #ffd76a; font: 700 14px/19px var(--font-ui); text-align: center; } /* v0.18.2: ugens 10 pebernødder */
.tk-sg-bonus.is-givet { background: rgba(244, 185, 66, .24); color: #ffe39a; }
.tk-sg-bonus.is-faaet { background: rgba(255, 255, 255, .06); color: #c9d6f2; font-weight: 600; }
.tk-sg-hint { margin: 8px 0 0; font: 500 13px/18px var(--font-ui); color: #9fb3d9; text-align: center; }
.tk-sg-pcl { margin: 10px 0 0; font: 700 14px/20px var(--font-ui); color: #eef3ff; text-align: center; }
.tk-sg-res { margin: 2px 0 0; text-align: center; font: 800 20px/24px var(--font-ui); color: #fff; }
.tk-sg-tal { display: block; font-size: 60px; line-height: 64px; color: #6fb7ff; }
.tk-sg-rek { margin: 4px 0 12px; text-align: center; font: 700 15px/20px var(--font-ui); color: #f4b942; }
.tk-sg-pc { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; background: rgba(255, 255, 255, .06); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.tk-sg-pc-svg { display: block; width: 100%; height: auto; }
.tk-sg-pc-t b { display: block; font: 800 16px/21px var(--font-ui); color: #fff; }
.tk-sg-pc-t > span { display: block; margin: 2px 0 8px; font: 500 13px/18px var(--font-ui); color: #c9d6f2; }
.tk-sg-pc .tk-pr-bar { background: rgba(255, 255, 255, .15); }
.tk-sg-pc .tk-pr-bar i { background: #6fb7ff; }
.tk-sg-pc .tk-pr-du { color: #9fd0ff; }
.tk-sg-slut .pl-btn-block + .pl-btn-block { margin-top: 8px; }
.tk-sg-link { color: #eef3ff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); text-decoration: none; }
.tk-sg-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.tk-sg-rgb-s { animation: tk-sg-rgb-s 6s linear infinite; }
.tk-sg-rgb-f { animation: tk-sg-rgb-f 6s linear infinite; }
@keyframes tk-sg-rgb-s { 0%, 100% { stroke: #8fd8ff; } 33% { stroke: #b58cff; } 66% { stroke: #ff8fcf; } }
@keyframes tk-sg-rgb-f { 0%, 100% { fill: #8fd8ff; } 33% { fill: #b58cff; } 66% { fill: #ff8fcf; } }
@media (max-width: 420px) { .tk-sg-pc { grid-template-columns: 112px 1fr; gap: 10px; } .tk-sg-h { font-size: 23px; line-height: 28px; } }
@media (prefers-reduced-motion: reduce) {
  .tk-sg-svoem, .tk-sg-side-h, .tk-sg-side-v, .tk-sg-finne, .tk-sg.is-hop .tk-sg-hop, .tk-sg.is-hop .tk-sg-finne, .tk-sg.is-hop .tk-sg-plask, .tk-sg-rgb-s, .tk-sg-rgb-f { animation: none !important; }
}
.tk-sg-prlink { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .08); } /* v0.18.2: Præmier-kortets link til minispillet */
.tk-sg-prlink .pl-btn { min-height: 44px; background: #255BEE; color: #fff; }
.tk-sg-prlink small { grid-column: 1 / -1; font: 600 13px/18px var(--font-ui); color: #4b5563; }
/* ---------- rundvisningen (v0.24.0, Ceilies "Pakkeleg onboarding"): stuen dæmpes, trinets mål lyses op med en pulserende ring og en pil fra kortet ---------- */
.tk-pl-app .tk-rv { position: absolute; inset: 0; z-index: 70; }
.tk-pl-app .tk-rv-fang { position: absolute; inset: 0; } /* stuen kan ikke trykkes på, mens rundvisningen er åben */
.tk-pl-app svg.tk-rv-dim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.tk-rv-skygge { fill: rgba(10, 22, 15, .78); }
.tk-rv-pil { fill: none; stroke: #a4c856; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tk-pl-app .tk-rv-ring { position: absolute; box-sizing: border-box; border: 3px solid #a4c856; pointer-events: none; animation: tk-rv-puls 1.8s ease-in-out infinite; }
@keyframes tk-rv-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(164, 200, 86, .4); } 50% { box-shadow: 0 0 0 5px rgba(164, 200, 86, 0); } } /* v0.72.0 (Mads E 27/10, #31): roligere puls — pilen viser allerede vej */
.tk-pl-app .tk-rv-kort { position: absolute; left: 16px; top: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; background: #1e3528; border: 1px solid #3a5a42; border-radius: 22px; color: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); font-family: var(--font-ui); text-align: left; }
.tk-pl-app .tk-rv-kort.is-velkommen { gap: 16px; padding: 18px 18px 20px; border-radius: 24px; border-color: #2f4b38; }
.tk-pl-app .tk-rv-kort.is-ind { animation: tk-rv-ind .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tk-rv-ind { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tk-rv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tk-rv-tal { padding: 5px 12px; border-radius: 999px; background: #13241a; font: 700 13px/18px var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: #a4c856; white-space: nowrap; }
.tk-pl-app .tk-rv-spring { height: 44px; padding: 0 4px; font: 600 15px/20px var(--font-ui); color: #a4b4a1; cursor: pointer; }
.tk-pl-app .tk-rv-spring:hover { color: #fff; }
.tk-rv-billede { display: flex; align-items: center; justify-content: center; gap: 12px; height: 150px; padding: 12px; box-sizing: border-box; border-radius: 14px; background: #0e1c14; border: 1px solid #2c4933; overflow: hidden; }
.tk-rv-billede.is-velkommen { height: 140px; border-radius: 16px; background: radial-gradient(circle at 50% 60%, rgba(244, 185, 66, .22), transparent 65%), #0e1c14; }
.tk-pl-app .tk-rv-billede svg { flex: none; }
.tk-pl-app .tk-rv-billede.is-theo svg { height: 100%; width: auto; }
.tk-rv-ord { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* v0.24.1: kortet er aldrig højere end skærmen (max-height fra rvPlacer); teksten ruller, knapperne bliver */
.tk-pl-app .tk-rv-kort > :not(.tk-rv-ord) { flex: none; }
.tk-pl-app .tk-rv-titel { margin: 0; font: 700 24px/1.15 var(--font-display); color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.tk-pl-app .is-velkommen .tk-rv-titel { font-size: 27px; }
.tk-pl-app .tk-rv-tekst { margin: 0; font: 400 16px/1.5 var(--font-ui); color: #d3ddcc; }
.tk-rv-bund { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.tk-rv-prikker { display: flex; }
.is-velkommen .tk-rv-prikker { justify-content: center; }
.tk-pl-app .tk-rv-prik { width: 14px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tk-pl-app .is-velkommen .tk-rv-prik { width: 20px; height: 32px; }
.tk-rv-prik span { display: block; width: 7px; height: 7px; border-radius: 999px; background: #56705b; }
.is-velkommen .tk-rv-prik span { width: 8px; height: 8px; }
.tk-rv-prik[aria-current="step"] span { width: 14px; background: #a4c856; }
.is-velkommen .tk-rv-prik[aria-current="step"] span { width: 18px; }
.tk-rv-knapper { display: flex; gap: 8px; margin-left: auto; }
.tk-pl-app .tk-rv-tilbage { width: 48px; height: 48px; flex: none; box-sizing: border-box; border: 1px solid #3a5a42; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
.tk-pl-app .tk-rv-tilbage:hover { background: rgba(255, 255, 255, .06); }
.tk-pl-app .tk-rv-naeste { min-height: 48px; padding: 0 22px; font: 700 17px/22px var(--font-ui); white-space: nowrap; }
.tk-pl-app .is-velkommen .tk-rv-naeste { min-height: 56px; font-size: 18px; }
.tk-pl-app .tk-rv button:focus-visible { outline: 3px solid var(--focus, #ffd166); outline-offset: 2px; }
.tk-pl-app .tk-hjaelp-rv { margin-bottom: 8px; }
/* v0.24.1: små og lave skærme (320 px, liggende telefon): et kompakt kort, så det ikke dækker målene, og billedet væk, når der ikke er plads */
@media (max-height: 700px), (max-width: 360px) {
  .tk-pl-app .tk-rv-kort, .tk-pl-app .tk-rv-kort.is-velkommen { gap: 8px; padding: 10px 12px 12px; border-radius: 18px; }
  .tk-pl-app .tk-rv-billede { height: 84px; padding: 8px; }
  .tk-pl-app .tk-rv-billede.is-velkommen svg { transform: scale(.7); }
  .tk-pl-app .tk-rv-titel, .tk-pl-app .is-velkommen .tk-rv-titel { font-size: 20px; }
  .tk-pl-app .tk-rv-tekst { font-size: 15px; line-height: 1.4; }
  .tk-pl-app .tk-rv-tal { padding: 3px 10px; font-size: 12px; }
  .tk-pl-app .tk-rv-spring { height: 36px; }
  .tk-pl-app .tk-rv-prik, .tk-pl-app .is-velkommen .tk-rv-prik { height: 30px; }
  .tk-pl-app .tk-rv-tilbage { width: 44px; height: 44px; }
  .tk-pl-app .tk-rv-naeste, .tk-pl-app .is-velkommen .tk-rv-naeste { min-height: 44px; font-size: 16px; }
}
@media (max-height: 480px) { .tk-pl-app .tk-rv-billede { display: none; } }
@media (prefers-reduced-motion: reduce) { .tk-pl-app .tk-rv-ring, .tk-pl-app .tk-rv-kort.is-ind { animation: none; } }
/* v0.39.0 (Patrick 3/10 22.36): træ-zoomet på telefon og tablet. Første tryk på juletræet lægger et lag med træet tæt på mellem topbjælken og
   fanerne (game.js sætter top og bund). Laget ligger under popups og ark (z-index 5), så de stadig ses; boblerne (50) ligger over. */
.tk-pl-app .tk-traefokus { position: fixed; left: 0; right: 0; z-index: 4; display: flex; background: radial-gradient(ellipse at 50% 45%, #1e3a27 0%, #0f1d15 75%); animation: tk-tf-ind .25s ease-out; }
@keyframes tk-tf-ind { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tk-pl-app .tk-traefokus { animation: none; } }
.tk-pl-app.is-traefokus .tk-theo { visibility: hidden; } /* v0.39.2: THEO står over stuen (z-index 9) og kunne dække "← Stuen" i træ-zoomet; han ses igen, når zoomet lukkes */
.tk-pl-app .tk-traefokus-svg { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; }
.tk-pl-app .tk-traefokus-ud { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(19, 36, 26, .86); color: #fbf8f1; font: 700 15px/1 var(--font-ui); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); cursor: pointer; }
.tk-pl-app .tk-traefokus-ud:focus-visible { outline: 3px solid #f4b942; outline-offset: 2px; }
.tk-news-link { margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* v0.48.1: link til minispillet i Nisse-News */
/* v0.48.1 (Patrick 12/10: "Antal pakker som er mine … skal de ned i samme setup som antal spil"): dine pakker i karmen ved prikkerne — kun PC.
   Fra 1440 px: alle pakker og tallet i en lys pille efter en skillelinje. 1100–1439 px (smal karm): én pakke og tallet, så terningknappen bliver i karmen. */
.tk-dine-boks { display: none; }
@media (min-width: 1100px) {
  .tk-pl-app .pl-karm .pl-slag > .tk-dine-boks { display: flex; align-items: center; margin: 0 auto 0 0; border-radius: 999px; }
  .tk-dine-pakker { display: flex; align-items: center; gap: 3px; padding: 3px 9px 3px 6px; border-radius: 999px; background: #f6efdf; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08); } /* lys pille: også de mørkegrønne pakker ses mod karmen */
  .tk-dine-pk { display: block; width: 22px; height: 22px; }
  .tk-dine-pk svg { display: block; width: 22px; height: 22px; }
  .tk-dine-pk:not(:first-child) { display: none; }
  .tk-dine-pk.is-tom { border: 1.5px dashed rgba(30, 42, 34, .35); border-radius: 5px; width: 18px; height: 18px; }
  .tk-dine-tal { margin-left: 4px; font: 800 15px/1 var(--font-ui); color: #1d2b22; }
}
@media (min-width: 1440px) {
  .tk-pl-app .pl-karm .pl-slag > .tk-dine-boks { margin-left: 8px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .18); border-radius: 0; }
  .tk-dine-pk, .tk-dine-pk svg { width: 26px; height: 26px; }
  .tk-dine-pk:not(:first-child) { display: block; }
}
/* v0.50.0 (Patrick 14/10): påmindelserne på Profil som oplysning (alle får dem) og i demo-panelet (Vis / Send til mig) */
.tk-paamind-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.tk-paamind-liste li { display: flex; gap: 10px; align-items: flex-start; font: 650 15px/20px var(--font-ui); color: var(--ink); }
.tk-paamind-liste small { display: block; font: 500 13px/18px var(--font-ui); color: var(--ink-muted); }
.tk-paamind-ikon { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-sunk); color: var(--glow); font-size: 15px; }
.tk-demo-grp:has(.tk-demo-pm) { grid-column: span 2; } /* gruppen er to kolonner bred, så "Send til mig" står på én linje */
.tk-demo-pm { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tk-demo-pm-t { grid-column: 1 / -1; font: 650 12px/16px var(--font-ui); color: #ddd6fe; }
.tk-pm-ramme { display: block; width: 100%; height: min(60vh, 560px); border: 0; border-radius: 10px; background: #efe9dc; margin: 8px 0 12px; }
/* 0.54.0: noten under "Tid og tilstand" i demo-panelet */
.tk-demo-panel .tk-demo-note{margin:4px 0 2px;font-size:11px;line-height:1.35;opacity:.8}
/* 0.55.0 (Patrick 15/10): landingssiden for indloggede før åbningen (SCREENS.foer) — ruller inde i spil-boksen; "Inviter en ven" som heroens kort; demo-knappen i hovedet */
.tk-pl-app .tk-ld-rul { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tk-vl .tk-ld-top .tk-ld-chip { margin-left: auto; }
.tk-vl .tk-ld-top .tk-topright { flex: none; }
.tk-vl .tk-ld-del { display: block; }
.tk-vl .tk-ld-del .tk-ov-krop { gap: 12px; padding: 0; background: none; }
.tk-vl .tk-ld-del .tk-ov-kh { margin: 4px 0 0; font: 800 24px/1.05 var(--ld-display); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.tk-vl .tk-ld-del .tk-ov-sub { margin: 0; font-size: 15px; color: var(--ink-muted); }
.tk-vl .tk-ld-del .tk-ov-linkrk .tk-ov-input { min-height: 44px; border: 1.5px solid #3f6150; border-radius: 8px; background: var(--surface-sunk); }
.tk-vl .tk-ld-ned .tk-ov-knap { flex: none; }
.tk-vl .tk-ld-ned .tk-ov-note { width: 100%; margin: 0; font-size: 14px; text-align: center; }
@media (min-width: 700px) { /* 0.55.0: nedtællingen stor på tablet og PC */
  .tk-vl .tk-ld-ned { padding: 28px 24px 26px; gap: 14px; }
  .tk-vl .tk-ld-nedh { font-size: 16px; }
  .tk-vl .tk-ld-ned .tk-ov-fliser { gap: 12px 40px; }
  .tk-vl .tk-ld-ned .tk-ov-fliser > div { min-width: 120px; }
  .tk-vl .tk-ld-ned .tk-ov-fliser b { font-size: 78px; }
  .tk-vl .tk-ld-ned .tk-ov-fliser span { font-size: 13px; }
  .tk-vl .tk-ld-neddato { font-size: 16px; }
}

/* ms.css — spil-vinduet (modal) til minispil-prototyperne. Farver og skrift som spillets "aften"-tema (pakkeleg/demo/tokens.css). */
/* .ms-svg har overflow: visible, så et spil kan male sin baggrund ud over viewBox'en (0 0 360 600) på høje og brede skærme. */
.ms-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(8, 16, 11, .82);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.ms-modal[hidden] { display: none !important; }
html.ms-aaben, html.ms-aaben body { overflow: hidden; }
.ms-tlf { position: relative; display: flex; flex-direction: column; width: min(100vw, 430px); height: min(100dvh, 880px); background: #0e1c14; color: #f6f1e6;
  font-family: Figtree, system-ui, -apple-system, sans-serif; overflow: hidden; }
@media (min-width: 640px) { .ms-tlf { height: min(calc(100dvh - 32px), 880px); border-radius: 28px; border: 1px solid #2e4a39; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); } }
.ms-top { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; background: #13241a; border-bottom: 1px solid #2e4a39; }
.ms-titel { flex: 1 1 auto; min-width: 0; font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-hud { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: #f4b942; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-luk, .ms-lyd { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; border: 1px solid #2e4a39; background: #1e3528; color: #f6f1e6; font: 700 20px/1 Figtree, system-ui, sans-serif; cursor: pointer; }
.ms-lyd { font-size: 17px; }
.ms-luk:focus-visible, .ms-lyd:focus-visible, .ms-knap:focus-visible, .ms-chip:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.ms-scene { position: relative; flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; } /* klipper det, der males uden for viewBox'en, ved scenens kant */
.ms-svg { width: 100%; height: 100%; display: block; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ms-svg text { user-select: none; -webkit-user-select: none; }
.ms-svg [data-tryk], .ms-svg .tryk { cursor: pointer; }
.ms-lag { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: linear-gradient(180deg, rgba(14, 28, 20, 0) 0%, rgba(14, 28, 20, .55) 38%, rgba(14, 28, 20, .92) 70%); }
.ms-lag[hidden] { display: none; }
.ms-lag.ms-intro { background: linear-gradient(180deg, rgba(14, 28, 20, 0) 0%, rgba(14, 28, 20, .2) 40%, rgba(14, 28, 20, .95) 62%); }
.ms-kort { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; background: #1e3528; border: 1px solid #2e4a39; border-radius: 22px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.ms-kort h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 24px; line-height: 1.15; text-wrap: balance; }
.ms-kort p { margin: 0; color: #b7c6b2; font-size: 15px; line-height: 1.45; }
.ms-kort ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.4; color: #f6f1e6; }
.ms-kort .ms-lille { font-size: 12px; color: #8fa596; text-align: center; }
.ms-kort .ms-bel { font-size: 13px; color: #f4b942; }
.ms-slut { align-items: center; text-align: center; }
.ms-slut.ok h2 { color: #a4c856; }
.ms-knapper { display: flex; gap: 10px; width: 100%; }
.ms-knapper .ms-knap { flex: 1 1 0; }
.ms-knap { min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: #a4c856; color: #17291c; font: 800 17px/1 Figtree, system-ui, sans-serif; cursor: pointer; }
.ms-knap.ms-sek { background: transparent; color: #f6f1e6; border: 1px solid #6f8c77; }
.ms-knap:active { transform: translateY(1px); }
.ms-chips { display: flex; gap: 6px; }
.ms-chip { flex: 1 1 0; min-height: 40px; border-radius: 999px; border: 1px solid #6f8c77; background: transparent; color: #f6f1e6; font: 700 14px/1 Figtree, system-ui, sans-serif; cursor: pointer; }
.ms-chip.on { background: #f4b942; border-color: #f4b942; color: #17291c; }
/* v0.32.0: i spillet ligger vinduet i spillets boks (MS.vaert), under WordPress' adminbjælke og over fanerne */
.ms-modal.ms-i-vaert { position: absolute; z-index: 1000; padding: 0; }
.ms-i-vaert .ms-tlf { width: min(100%, 430px); height: 100%; }
@media (min-width: 640px) { .ms-i-vaert .ms-tlf { height: min(calc(100% - 32px), 880px); } }
@media (prefers-reduced-motion: reduce) { .ms-svg * { animation: none !important; transition: none !important; } }
/* v0.35.1 (Patrick 2/10 23.51: "SKAL minigamet være så lille - også på PC?"): et spil med bred: true fylder bredden på skærme fra 900 px
   (højst 1180 × 1000 px); i spillet fylder det spillets boks. Telefonen og spil uden bred er uændrede. */
@media (min-width: 900px) {
  .ms-bred .ms-tlf { width: min(calc(100vw - 48px), 1180px); height: min(calc(100dvh - 32px), 1000px); }
  .ms-i-vaert.ms-bred .ms-tlf { width: min(calc(100% - 32px), 1180px); height: min(calc(100% - 32px), 1000px); }
}
/* v0.36.0 (Patrick 3/10 00.12): vælgeren i introen (fx byen i Levering) */
.ms-valg { display: flex; align-items: center; gap: 10px; font: 700 14px/1.2 Figtree, system-ui, sans-serif; color: #b7c6b2; }
.ms-valg select { flex: 1 1 auto; min-width: 0; min-height: 42px; border-radius: 12px; border: 1px solid #6f8c77; background: #13241a; color: #f6f1e6; font: 700 15px/1.2 Figtree, system-ui, sans-serif; padding: 0 10px; }
.ms-valg select:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }