/* Ordjagten: overstregningstusch på ternet puslespilspapir. Én skrift (Archivo, variabel vægt og bredde). */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --papir: #f2efe6;
  --papir-2: #e9e4d6;
  --linje: #ddd6c4;
  --blaek: #1e2240;
  --blaek-2: #4d5170;
  --blaek-3: #6b6e86;
  --tusch-gul: #ffd23f;
  --tusch-0: #ffd23f;
  --tusch-1: #ff9b85;
  --tusch-2: #7fe0b8;
  --tusch-3: #8ccbff;
  --tusch-4: #c9adff;
  --tusch-5: #c6e86e;
  --fejl: #d6452f;
  --fokus: #e0573f;
  --radius: 14px;
  --skrift: "Archivo", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--skrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--blaek);
  background-color: var(--papir);
  background-image:
    linear-gradient(var(--linje) 1px, transparent 1px),
    linear-gradient(90deg, var(--linje) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--tusch-gul); color: var(--blaek); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
a { color: var(--blaek); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--tusch-1); }
a:hover { text-decoration-color: var(--blaek); }

.ramme { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .ramme { padding: 0 32px; } }

.spring { position: absolute; left: -9999px; top: 8px; background: var(--blaek); color: var(--papir); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.spring:focus { left: 16px; }

/* Top */
.top { background: var(--papir); border-bottom: 2px solid var(--blaek); }
.top-ramme { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.ordmaerke { display: block; line-height: 0; text-decoration: none; }
.ordmaerke-svg { width: 148px; height: auto; }
.ordmaerke-svg text { font-family: var(--skrift); font-weight: 800; font-stretch: 118%; font-size: 30px; fill: var(--blaek); letter-spacing: 0; }
.hovednav { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: 0.9375rem; font-weight: 550; }
.hovednav a { text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; }
.hovednav a:hover { border-bottom-color: var(--linje); }
.hovednav a[aria-current="page"] { border-bottom-color: var(--tusch-1); }
@media (min-width: 768px) { .ordmaerke-svg { width: 176px; } .hovednav { font-size: 1rem; gap: 24px; } }

main { flex: 1; }

/* Forside */
.intro { padding: 22px 0 14px; }
.intro h1 {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.02;
  font-weight: 820;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.intro p { margin: 8px 0 0; color: var(--blaek-2); max-width: 52ch; font-size: 1rem; }

.spil {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "styr" "braet" "panel";
  gap: 14px;
  padding-bottom: 40px;
}
@media (min-width: 720px) {
  .spil { grid-template-columns: minmax(0, 600px) minmax(250px, 1fr); grid-template-areas: "braet styr" "braet panel"; grid-template-rows: auto 1fr; column-gap: clamp(24px, 3vw, 40px); row-gap: 22px; align-items: start; }
  .intro { padding: 36px 0 24px; }
}

/* Styring */
.styr { grid-area: styr; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tema knap" "niveau niveau"; align-items: end; gap: 12px; }
.felt { display: grid; gap: 4px; grid-area: tema; min-width: 0; }
.styr #nyt { grid-area: knap; }
.felt > span, .niveau legend { font-size: 0.8125rem; font-weight: 650; color: var(--blaek-2); letter-spacing: 0.01em; }
select {
  font: inherit; font-size: 1rem; font-weight: 550; color: var(--blaek);
  appearance: none; -webkit-appearance: none;
  background: #fffdf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231e2240' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 2px solid var(--blaek); border-radius: 10px;
  padding: 8px 36px 8px 12px; min-height: 44px; width: 100%;
}
.niveau { grid-area: niveau; border: 0; margin: 0; padding: 0; min-width: 0; }
.niveau legend { padding: 0; margin-bottom: 4px; }
.niveau-valg { display: flex; border: 2px solid var(--blaek); border-radius: 10px; overflow: hidden; background: #fffdf7; }
.niveau-valg label { position: relative; flex: 1; text-align: center; }
.niveau-valg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.niveau-valg span { display: block; padding: 9px 12px; min-height: 40px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; user-select: none; }
.niveau-valg label + label span { border-left: 2px solid var(--blaek); }
.niveau-valg input:checked + span { background: var(--blaek); color: var(--papir); }
.niveau-valg input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: -5px; border-radius: 6px; }
.niveau-valg input:not(:checked):hover + span { background: var(--papir-2); }

.knap {
  font: inherit; font-size: 1rem; font-weight: 700; font-stretch: 108%;
  color: var(--papir); background: var(--blaek);
  border: 2px solid var(--blaek); border-radius: 10px;
  padding: 8px 18px; min-height: 44px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(30, 34, 64, 0.25), 0 6px 14px -6px rgba(30, 34, 64, 0.45);
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 140ms;
}
.knap:hover { background: #2c3260; }
.knap:active { transform: translateY(1px) scale(0.98); }

/* Brættet */
.braet-ramme { grid-area: braet; container-type: inline-size; }
.braet {
  --n: 10;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  aspect-ratio: 1;
  width: 100%;
  background: #fffdf7;
  border: 2px solid var(--blaek);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(30, 34, 64, 0.08), 0 18px 40px -22px rgba(30, 34, 64, 0.45);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
  overflow: hidden;
}
.braet:focus-visible { outline-offset: 4px; border-radius: var(--radius); }
.celle {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  font-size: calc(100cqi / var(--n) * 0.5);
  font-weight: 640;
  font-stretch: 100%;
  line-height: 1;
  color: var(--blaek);
  pointer-events: none;
}
.streger { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.fundet-streg {
  stroke-width: 0.74; stroke-linecap: round;
  mix-blend-mode: multiply;
  stroke-dasharray: calc(var(--laengde) * 1px + 0.01px) 100;
  animation: tusch 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tusch { from { stroke-dashoffset: calc(var(--laengde) * 1px + 0.01px); } to { stroke-dashoffset: 0; } }
.f0 { stroke: var(--tusch-0); --farve: var(--tusch-0); }
.f1 { stroke: var(--tusch-1); --farve: var(--tusch-1); }
.f2 { stroke: var(--tusch-2); --farve: var(--tusch-2); }
.f3 { stroke: var(--tusch-3); --farve: var(--tusch-3); }
.f4 { stroke: var(--tusch-4); --farve: var(--tusch-4); }
.f5 { stroke: var(--tusch-5); --farve: var(--tusch-5); }
.aktiv-streg { stroke: rgba(30, 34, 64, 0.16); stroke-width: 0.74; stroke-linecap: round; }
.aktiv-streg.forkert { stroke: rgba(214, 69, 47, 0.28); animation: ryst 320ms ease-out; }
@keyframes ryst { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-0.08px); } 75% { transform: translateX(0.08px); } }
.start-ring { fill: rgba(30, 34, 64, 0.1); stroke: var(--blaek); stroke-width: 0.07; }
.markoer { fill: none; stroke: var(--fokus); stroke-width: 0.08; }
.nojs { margin: 12px 0 0; font-weight: 600; }

/* Panel med ordliste */
.panel { grid-area: panel; }
.status-linje { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--blaek); padding-bottom: 6px; }
.taeller { margin: 0; font-weight: 750; font-stretch: 110%; font-size: 1.0625rem; }
.tid { margin: 0; font-variant-numeric: tabular-nums; color: var(--blaek-2); font-weight: 600; }
.ordliste {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px;
}
@media (min-width: 560px) and (max-width: 719px) { .ordliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ordliste li {
  position: relative; padding: 4px 6px; font-size: 1.0625rem; font-weight: 560;
  border-radius: 6px; width: fit-content; max-width: 100%;
  overflow-wrap: anywhere;
  transition: color 200ms;
}
.ordliste li.fundet { color: var(--blaek-3); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--blaek-2); }
.ordliste li.fundet::before {
  content: ""; position: absolute; inset: 3px -2px; z-index: -1; border-radius: 8px;
  background: var(--farve); opacity: 0.75;
  transform-origin: left center; animation: under 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ordliste { position: relative; z-index: 0; isolation: isolate; }
@keyframes under { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hjaelp { margin: 14px 0 0; font-size: 0.9375rem; color: var(--blaek-2); min-height: 3em; }
.faerdig {
  margin-top: 14px; padding: 16px; border: 2px solid var(--blaek); border-radius: var(--radius);
  background: #fffdf7; box-shadow: 0 14px 30px -20px rgba(30, 34, 64, 0.5);
}
.faerdig p { margin: 0 0 12px; font-weight: 700; font-size: 1.125rem; font-stretch: 108%; }
.faerdig[hidden] { display: none; }

/* Kort om spillet */
.kort-om { border-top: 2px solid var(--blaek); padding: 28px 0 48px; }
.kort-om h2 { margin: 0 0 12px; font-size: 1.375rem; font-weight: 780; font-stretch: 112%; letter-spacing: -0.01em; }
.om-kolonner { display: grid; gap: 4px 32px; }
.om-kolonner p { margin: 0 0 10px; color: var(--blaek-2); max-width: 60ch; }
@media (min-width: 768px) { .om-kolonner { grid-template-columns: repeat(3, 1fr); } }

/* Tekstsider */
.tekstside { padding: 32px 0 56px; }
.tekst { max-width: 68ch; background: rgba(255, 253, 247, 0.92); border: 2px solid var(--blaek); border-radius: var(--radius); padding: 22px 18px 26px; }
@media (min-width: 768px) { .tekst { padding: 36px 44px 40px; } .tekstside { padding: 48px 0 72px; } }
.tekst h1 { margin: 0 0 14px; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); line-height: 1.05; font-weight: 820; font-stretch: 112%; letter-spacing: -0.02em; text-wrap: balance; }
.tekst h2 { margin: 32px 0 8px; font-size: 1.3125rem; line-height: 1.2; font-weight: 760; font-stretch: 110%; }
.tekst p, .tekst li { color: #2c3052; }
.tekst ul, .tekst ol { padding-left: 1.25em; }
.tekst li { margin-bottom: 6px; }
.tekst li::marker { color: var(--blaek-3); font-weight: 700; }
.ingress { font-size: 1.125rem; }
.tema-liste { display: grid; gap: 0; margin: 20px 0 0; }
.tema { padding: 16px 0; border-top: 1px solid var(--linje); }
.tema h2 { margin: 0 0 6px; }
.tema p { margin: 0; }
.tema .antal { font-size: 0.875rem; color: var(--blaek-3); font-weight: 600; margin-top: 4px; }
.mark { background: linear-gradient(transparent 55%, var(--tusch-gul) 55%, var(--tusch-gul) 92%, transparent 92%); padding: 0 2px; }

/* Bund */
.bund { border-top: 2px solid var(--blaek); background: var(--papir); }
.bund-ramme { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; font-size: 0.9375rem; }
.bund p { margin: 0; font-weight: 700; font-stretch: 110%; }

@media (prefers-reduced-motion: reduce) {
  .fundet-streg, .ordliste li.fundet::before, .aktiv-streg.forkert { animation: none; }
  .knap { transition: none; }
}
.knap-link { display: inline-block; text-decoration: none; margin-top: 8px; }
.knap-link:hover { color: var(--papir); }
.luft { margin-top: 24px; }