/* galge.dk - salviegrå skolebordsflade, blæk, træ og rust */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/atkinson-next.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --papir: #e4e6dc;
  --papir-2: #d7dacd;
  --flade: #f6f6f0;
  --blaek: #18212b;
  --daempet: #4a5562;
  --linje: #c3c7b8;
  --tra: #5e4128;
  --reb: #a5824a;
  --rust: #a93d17;
  --rust-lys: #d4552b;
  --gran: #1d5a4a;
  --gran-lys: #d6e6dc;
  --rust-flade: #f3ddd2;
  --skygge: 0 1px 2px rgba(24, 33, 43, .08), 0 6px 18px -8px rgba(24, 33, 43, .22);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --tekst: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papir); color: var(--blaek);
  font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.6;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
::selection { background: var(--blaek); color: var(--flade); }
a { color: var(--blaek); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--rust-lys); }
a:hover { color: var(--rust); }
:focus-visible { outline: 3px solid var(--rust-lys); outline-offset: 2px; border-radius: 4px; }

.ramme { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.smal { max-width: 720px; }

/* Top */
.top { border-bottom: 1px solid var(--linje); }
.top-indre { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.ordmaerke { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--blaek); font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: .01em; line-height: 1; }
.ordmaerke em { font-style: normal; color: var(--rust); }
.ordmaerke svg { color: var(--tra); flex: none; }
.menu { display: flex; gap: 4px; }
.menu a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 10px; border-radius: 8px; color: var(--daempet); }
.menu a:hover { color: var(--blaek); background: var(--papir-2); }
.menu a[aria-current="page"] { color: var(--blaek); box-shadow: inset 0 -2px 0 var(--rust-lys); border-radius: 0; }

/* Spil */
.spil { padding: 20px 0 28px; }
.spil-titel { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; margin: 0 0 14px; letter-spacing: -.005em; }
.indstillinger { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.vaelg { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--daempet); }
.vaelg select {
  font: inherit; color: var(--blaek); background: var(--flade); border: 1px solid var(--linje); border-radius: 10px;
  padding: 8px 34px 8px 12px; min-height: 42px; appearance: none;
  background-image: 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='%2318212b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.svaerhed { display: inline-flex; background: var(--papir-2); border-radius: 11px; padding: 3px; }
.svaerhed button { font: inherit; font-size: .9rem; font-weight: 600; border: 0; background: transparent; color: var(--daempet); padding: 7px 12px; border-radius: 8px; min-height: 36px; cursor: pointer; }
.svaerhed button[aria-checked="true"] { background: var(--flade); color: var(--blaek); box-shadow: var(--skygge); }

.bord { display: grid; gap: 14px; grid-template-columns: 1fr; }
.galge-felt { margin: 0; background: var(--flade); border-radius: 18px; box-shadow: var(--skygge); padding: 10px 12px 12px; display: flex; flex-direction: column; align-items: center; }
.galge { width: 100%; max-width: 300px; height: auto; max-height: min(24vh, 200px); display: block; }
.spor { stroke: var(--linje); stroke-width: 2; stroke-dasharray: 3 6; opacity: .9; }
.del { stroke-dasharray: 1; stroke-dashoffset: 1; visibility: hidden; transition: stroke-dashoffset .45s cubic-bezier(.16, 1, .3, 1), stroke .3s, visibility 0s .45s; }
.del.vist { stroke-dashoffset: 0; visibility: visible; transition: stroke-dashoffset .45s cubic-bezier(.16, 1, .3, 1), stroke .3s, visibility 0s; }
.tra { stroke: var(--tra); stroke-width: 6; }
.reb { stroke: var(--reb); stroke-width: 3; }
.mand { stroke: var(--blaek); stroke-width: 4.2; }
.galge.tabt .mand { stroke: var(--rust); }
.forsoeg { font-family: var(--display); font-size: 1.15rem; letter-spacing: .02em; color: var(--daempet); margin-top: 2px; font-variant-numeric: tabular-nums; }

.ord-felt { display: flex; flex-direction: column; justify-content: center; }
.hint { margin: 0 0 8px; color: var(--daempet); font-size: .95rem; }
.hint strong { color: var(--blaek); }
.ord { --n: 8; --b: calc((100vw - 2 * var(--gutter)) / var(--n)); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 46px)); gap: clamp(3px, 1.2vw, 8px); margin: 0 0 12px; min-height: 52px; }
.felt {
  height: clamp(34px, calc(var(--b) * 1.25), 58px); min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, calc(var(--b) * .78), 2.3rem); line-height: 1;
  border-bottom: 3px solid var(--blaek); color: var(--blaek);
}
.felt.fundet { animation: frem .32s cubic-bezier(.16, 1, .3, 1); }
.felt.manglede { color: var(--rust); border-bottom-color: var(--rust-lys); }
@keyframes frem { from { transform: translateY(6px); opacity: .2; } to { transform: none; opacity: 1; } }

.status { margin: 0 0 12px; min-height: 1.6em; font-weight: 500; }
.status.vandt { color: var(--gran); font-weight: 700; }
.status.tabte { color: var(--rust); font-weight: 700; }
.handling { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px; }
.knap {
  font: inherit; font-weight: 700; font-size: 1rem; color: var(--flade); background: var(--blaek);
  border: 0; border-radius: 12px; padding: 11px 22px; min-height: 46px; cursor: pointer; text-decoration: none; display: inline-block;
  box-shadow: 0 2px 6px -2px rgba(24, 33, 43, .4);
  transition: background .15s, transform .1s;
}
.knap:hover { background: #2a3746; color: var(--flade); }
.knap:active { transform: translateY(1px); }
.score { margin: 0; color: var(--daempet); font-size: .95rem; font-variant-numeric: tabular-nums; }
.forkerte { margin: 0; color: var(--daempet); font-size: .95rem; }
.forkerte span.tom { font-family: inherit; font-size: inherit; letter-spacing: 0; color: var(--daempet); }
.forkerte span { font-family: var(--display); font-size: 1.15rem; letter-spacing: .12em; color: var(--rust); }

/* Tastatur */
.tastatur { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; align-items: center; user-select: none; -webkit-user-select: none; }
.raekke { display: flex; gap: 5px; justify-content: center; width: 100%; }
.tast {
  flex: 0 1 46px; min-width: 0; height: 50px; padding: 0;
  font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--blaek);
  background: var(--flade); border: 1px solid var(--linje); border-radius: 9px; cursor: pointer;
  box-shadow: 0 1px 0 var(--linje); touch-action: manipulation;
  transition: background .15s, color .15s, transform .08s;
}
.tast:hover:not(:disabled) { background: #fff; border-color: var(--daempet); }
.tast:active:not(:disabled) { transform: translateY(1px); }
.tast:disabled { cursor: default; }
.tast.rigtig { background: var(--gran-lys); border-color: transparent; color: var(--gran); box-shadow: none; }
.tast.forkert { background: transparent; border-color: transparent; color: #8b939c; text-decoration: line-through; text-decoration-color: var(--rust-lys); box-shadow: none; }
.tast:disabled:not(.rigtig):not(.forkert) { opacity: .55; }

/* Indholdssider */
.kort-om { border-top: 1px solid var(--linje); padding: 32px 0 40px; }
.kort-om h2, .tekstside h2 { font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1.1; margin: 1.6em 0 .4em; }
.kort-om h2 { margin-top: 0; }
.tekstside { padding: 32px 0 48px; }
.tekstside h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 8vw, 3.6rem); line-height: 1; margin: 0 0 .45em; }
.tekstside p, .tekstside li, .kort-om p { max-width: 68ch; }
.tekstside .indledning { font-size: 1.2rem; color: var(--daempet); }
.tekstside ul, .tekstside ol { padding-left: 1.3em; }
.tekstside li { margin-bottom: .4em; }
.tekstside li::marker { color: var(--rust); font-weight: 700; }
.tekstside .knap { margin-top: 8px; }

/* Bund */
.bund { border-top: 1px solid var(--linje); background: var(--papir-2); }
.bund-indre { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; font-size: .95rem; color: var(--daempet); }
.bund p { margin: 0; font-family: var(--display); font-size: 1.15rem; letter-spacing: .02em; color: var(--blaek); }

@media (max-width: 420px) {
  :root { --gutter: 12px; }
  .menu a { padding: 8px 7px; font-size: .9rem; }
  .ordmaerke { font-size: 1.4rem; }
  .raekke { gap: 4px; }
  .tast { height: 48px; font-size: 1.2rem; border-radius: 7px; }
  .vaelg > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .indstillinger { gap: 8px; margin-bottom: 12px; }
  .spil-titel { margin-bottom: 12px; }
  .felt { height: clamp(34px, calc(var(--b) * 1.1), 52px); }
}

@media (min-width: 760px) {
  .spil { padding-top: 32px; }
  .bord { grid-template-columns: minmax(260px, 340px) 1fr; gap: 28px; align-items: stretch; }
  .galge { max-height: none; }
  .ord { --b: calc((100vw - 2 * var(--gutter) - 368px) / var(--n)); }
  .tastatur { margin-top: 22px; align-items: flex-start; }
  .raekke { justify-content: flex-start; }
  .raekke:nth-child(2) { padding-left: 0; }
  .raekke:nth-child(3) { padding-left: 25px; }
  .tast { height: 54px; font-size: 1.45rem; }
}

.nulstil .del, .nulstil .tast { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .del { transition: none; }
  .felt.fundet { animation: none; }
}