/* airhockey.dk - det gamle sites neon-spillehal: mørk lilla baggrund med gitter, marquee med pærer, neontekst,
   chrome-knapper, blåt bord. Læsesiderne er hvide med scanlines, lyserøde overskrifter og systemskrift som før. */
@font-face {
  font-family: "Anton";
  src: url("/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --cyan: #00f0ff;
  --pink: #ff1f8f;
  --gul: #ffd400;
  --gron: #00ff88;
  --lilla: #1a0030;
  --nat: #0a0014;
  --indhold-bg: #fff;
  --indhold-tekst: #1a1a1a;
  --indhold-accent: #c2185b;
  --display: Impact, Anton, "Bebas Neue", "Arial Black", sans-serif;
  --arcade: "Press Start 2P", VT323, "Courier New", Courier, monospace;
  --tekst: -apple-system, BlinkMacSystemFont, Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--nat); color: #fff; font-family: var(--tekst); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
/* Scanlines over hele siden som på det gamle site */
body::before { content: ""; pointer-events: none; z-index: 5; mix-blend-mode: multiply; background: repeating-linear-gradient(#0000 0 2px, #0000002e 3px, #0000 4px); position: fixed; inset: 0; }
.arcade-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(at 50% 0, #ff1f8f40, #0000 50%), radial-gradient(at 50% 100%, #00f0ff2e, #0000 60%), linear-gradient(#0a0014, #1a0030, #0a0014); }
.arcade-grid { position: absolute; inset: 0; background-image: linear-gradient(#ff1f8f26 1px, #0000 1px), linear-gradient(90deg, #00f0ff26 1px, #0000 1px); background-size: 40px 40px; animation: grid-pan 12s linear infinite; -webkit-mask-image: linear-gradient(#0000 0%, #000 30% 70%, #0000 100%); mask-image: linear-gradient(#0000 0%, #000 30% 70%, #0000 100%); }
@keyframes grid-pan { to { background-position: 0 40px; } }
::selection { background: var(--pink); color: #fff; }
a { color: var(--cyan); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; background: #fff; color: #000; padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* Neontekst */
.neon-pink { color: #fff; text-shadow: 0 0 4px #ff1f8f, 0 0 10px #ff1f8f, 0 0 20px #ff1f8f, 0 0 40px #f0a; }
.neon-cyan { color: #fff; text-shadow: 0 0 4px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00b0ff; }
.neon-yellow { color: #fff8d0; text-shadow: 0 0 4px #ffd400, 0 0 10px #ffd400, 0 0 20px #ff7a00; }
.neon-green { color: #e8ffe8; text-shadow: 0 0 4px #0f8, 0 0 10px #0f8, 0 0 20px #0c6; }
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Top: menu og marquee med pærer ---------- */
.top { position: relative; padding: 0 16px; }
.menu { display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; padding-top: 2px; }
.menu a { font-family: var(--arcade); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; text-decoration: none; min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; padding: 0 4px; text-shadow: 0 0 4px #00f0ff, 0 0 10px #00f0ff; }
.menu a:hover, .menu a[aria-current="page"] { text-shadow: 0 0 4px #ff1f8f, 0 0 10px #ff1f8f, 0 0 20px #ff1f8f; text-decoration: underline; text-decoration-color: var(--pink); }
.marquee-wrap { max-width: 640px; margin: 0 auto 8px; }
.marquee-frame { background: radial-gradient(#2a0050, #0a0014 70%), #0a0014; border-radius: 14px; padding: 16px 18px; position: relative; text-align: center; box-shadow: inset 0 0 40px #ff1f8f4d, 0 0 30px #00f0ff40, 0 0 60px #ff1f8f26; }
.marquee-frame::before, .marquee-frame::after { content: ""; filter: drop-shadow(0 0 4px #ffd400); background-image: radial-gradient(circle, #fff4b0 0 3px, #0000 3.5px); background-position: 50%; background-repeat: repeat-x; background-size: 18px 8px; height: 8px; animation: bulb-chase 1.6s linear infinite; position: absolute; left: 8px; right: 8px; }
.marquee-frame::before { top: 4px; }
.marquee-frame::after { bottom: 4px; animation-direction: reverse; }
@keyframes bulb-chase { 0% { background-position: 0; } to { background-position: 18px; } }
.marquee { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; text-decoration: none; line-height: 1; font-weight: 400; }
.mq-titel { font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 0 4px #ff1f8f, 0 0 10px #ff1f8f, 0 0 20px #ff1f8f, 0 0 40px #f0a; }
/* På spilsiden er marqueen smal som i det gamle spilbillede */
.side-spil .marquee-frame { padding: 16px 14px; border-radius: 12px; }
.side-spil .mq-titel { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.side-spil .mq-under { font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.05rem); }
.mq-under { font-family: var(--display); font-size: clamp(1rem, 0.8rem + 0.9vw, 1.35rem); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-shadow: 0 0 4px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff; }

/* ---------- Spillet ---------- */
.spil { padding-top: 4px; padding-bottom: 10px; position: relative; z-index: 1; }
.spil-noscript { background: var(--lilla); padding: 16px; text-align: center; }
.bord { margin: 0 auto; width: var(--bord-b); }
.flade { position: relative; line-height: 0; border-radius: 4px; box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255, 255, 255, 0.55), 0 0 50px rgba(0, 240, 255, 0.35); }
.flade canvas { display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; border-radius: 4px; }
.flade canvas:focus-visible { outline: 3px solid var(--gul); outline-offset: 4px; }
.flade.shake { animation: shake 0.28s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes shake { 10%, 90% { transform: translate(-2px); } 20%, 80% { transform: translate(4px); } 30%, 50%, 70% { transform: translate(-6px); } 40%, 60% { transform: translate(6px); } }

/* HUD øverst på bordet: P1 (cyan) til venstre, P2 (gul) til højre, i midten mål/tid og knapper */
.hud { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; line-height: 1; pointer-events: none; z-index: 2; min-height: 56px; }
.hud-sp { --c: var(--gul); --glod: 0 0 4px #ffd400, 0 0 10px #ffd400, 0 0 20px #ff7a00; display: flex; flex-direction: column; align-items: center; min-width: 64px; gap: 3px; }
.hud-sp[data-sp="1"] { --c: var(--cyan); --glod: 0 0 4px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00b0ff; }
.hud-navn { font-family: var(--arcade); font-weight: 700; font-size: 12px; color: #fff; text-shadow: var(--glod); white-space: nowrap; }
.hud-tal { font-family: var(--display); font-size: 48px; line-height: 1; color: #fff; text-shadow: var(--glod); font-variant-numeric: tabular-nums; }
.hud-tal span { display: block; }
.hud-tal.pop span { animation: pop 0.42s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes pop { 0% { transform: scale(0.7); opacity: 0.4; } 55% { transform: scale(1.35); } 100% { transform: scale(1); opacity: 1; } }
.hud-af { font-family: var(--arcade); font-size: 10px; color: rgba(255, 255, 255, 0.8); min-height: 10px; }
.hud-midt { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: auto; }
.hud-titel { font-family: var(--arcade); font-weight: 700; font-size: 12px; text-transform: uppercase; white-space: nowrap; }
.hud-titel.tid { font-size: 20px; font-variant-numeric: tabular-nums; }
.hud-knapper { display: flex; gap: 4px; }
.hud-knap { width: 44px; height: 44px; border-radius: 6px; background: rgba(26, 0, 48, 0.85); border: 1px solid rgba(0, 240, 255, 0.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color 120ms ease, transform 100ms ease; }
.hud-knap:hover { background: rgba(42, 0, 80, 0.95); }
.hud-knap:active { transform: scale(0.94); }
.hud-knap:disabled { opacity: 0.4; cursor: default; }
.hud-knap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hud-knap svg path[d^="M7 5l12"] { fill: currentColor; }
.bord[data-layout="liggende"] .hud { padding: 4px 8px; }
/* Liggende bord: mål/ur og knapperne står uden for bordet til højre, så de ikke dækker midterlinjen */
.bord[data-layout="liggende"] .hud-midt { position: absolute; left: calc(100% + 14px); top: 0; width: 76px; }
.bord[data-layout="liggende"] .hud-knapper { flex-direction: column; }
.bord[data-layout="liggende"] .hud-titel { white-space: normal; text-align: center; font-size: 11px; line-height: 1.3; }
.bord[data-layout="liggende"] .hud-tal { font-size: 36px; }
.status { margin: 12px auto 0; max-width: 520px; text-align: center; font-family: var(--arcade); font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); min-height: 1.5em; }

/* Lag over bordet: pause, start forfra, vinder (kun efter brugerens handling) */
.lag { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 0, 20, 0.72); line-height: 1.5; padding: 12px; z-index: 6; border-radius: 4px; }
.lag[hidden] { display: none; }
.lag-kort { background: rgba(26, 0, 48, 0.94); border: 2px solid rgba(0, 240, 255, 0.4); box-shadow: 0 0 18px rgba(0, 240, 255, 0.25); border-radius: 12px; padding: 20px 18px; max-width: min(380px, 100%); width: 100%; text-align: center; animation: ind 0.28s ease-out backwards; }
@keyframes ind { 0% { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.lag-kort h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 2.4rem; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; }
.lag-kort p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.82); }
.lag-score { font-family: var(--display); font-size: 4.4rem; line-height: 1 !important; margin: 4px 0 8px !important; display: flex; justify-content: center; gap: 10px; }
.lag-score b { font-weight: 400; color: #fff; }
.lag-score i { font-style: normal; color: rgba(255, 255, 255, 0.5); }
.lag-score .sp1 { text-shadow: 0 0 4px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff; }
.lag-score .sp0 { text-shadow: 0 0 4px #ffd400, 0 0 10px #ffd400, 0 0 20px #ff7a00; }
.lag-knapper { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Chrome-knapperne fra det gamle site */
.btn-chrome { font-family: var(--display); letter-spacing: 0.06em; color: var(--lilla); text-transform: uppercase; background: linear-gradient(#fff, #d8d8e8 30%, #8a8a98 55%, #d0d0dc 75%, #fff); border: 2px solid var(--lilla); border-radius: 10px; justify-content: center; align-items: center; padding: 12px 22px; min-height: 48px; font-size: 20px; font-weight: 400; transition: transform 80ms, box-shadow 80ms; display: inline-flex; position: relative; cursor: pointer; box-shadow: inset 0 1px #ffffffe6, inset 0 -2px #00000040, 0 4px var(--lilla), 0 8px 18px #0006; }
.btn-chrome:hover { transform: translateY(-1px); }
.btn-chrome:active { transform: translateY(3px); box-shadow: inset 0 1px #ffffffe6, inset 0 -2px #00000040, 0 1px var(--lilla), 0 2px 6px #0006; }
.btn-chrome.btn-pink { background: linear-gradient(#ffd0e8, #ff8fc4, #ff1f8f 60%, #ff66b0, #ffd0e8); }
.btn-chrome.btn-cyan { background: linear-gradient(#d8feff, #6ff0ff, #00b0d0 60%, #50d8e8, #d8feff); }
.btn-chrome.btn-yellow { background: linear-gradient(#fff5b8, #ffe070, #ffae00 60%, #ffd860, #fff5b8); }

/* Menuen (det gamle sites startmenu), åbnes kun ved tryk */
dialog.menu { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; color: #fff; background: radial-gradient(at 50% 0, #ff1f8f40, #0000 50%), radial-gradient(at 50% 100%, #00f0ff2e, #0000 60%), linear-gradient(#0a0014, #1a0030, #0a0014); overflow-y: auto; }
dialog.menu::backdrop { background: var(--nat); }
dialog.menu[open] { animation: ind 0.28s ease-out; }
.menu-ind { max-width: 860px; margin: 0 auto; padding: 18px 16px 28px; position: relative; }
dialog.menu .arcade-grid { position: fixed; }
.menu-marquee { margin-bottom: 18px; }
.menu-marquee .marquee { flex-direction: column; align-items: center; gap: 6px; }
.menu-titel { font-family: var(--display); font-weight: 400; font-size: 2.6rem; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; margin: 4px 0 14px; }
.menu-gitter { display: grid; gap: 16px; }
@media (min-width: 768px) { .menu-gitter { grid-template-columns: 1fr 1fr; } }
.ci { border-radius: 12px; padding: 16px 18px 18px; background: rgba(26, 0, 48, 0.7); border: 2px solid rgba(0, 240, 255, 0.4); box-shadow: 0 0 18px rgba(0, 240, 255, 0.18); }
.ci-titel { font-family: var(--arcade); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 12px; }
.knapper { display: flex; flex-wrap: wrap; gap: 8px; }
.knapper + .knapper { margin-top: 12px; }
.knapper[hidden] { display: none; }
.vk { --a: var(--pink); font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; border: 2px solid var(--a); border-radius: 6px; background: transparent; color: #fff; cursor: pointer; transition: background-color 120ms ease, box-shadow 120ms ease, transform 100ms ease; min-height: 44px; min-width: 44px; }
.vk[data-a="cyan"] { --a: var(--cyan); } .vk[data-a="gul"] { --a: var(--gul); } .vk[data-a="gron"] { --a: var(--gron); }
.vk.stor { padding: 8px 16px; font-size: 1.15rem; }
.vk.lille { padding: 6px 12px; font-size: 0.95rem; }
.vk:hover { background: rgba(255, 255, 255, 0.1); }
.vk:active { transform: scale(0.96); }
.vk[aria-pressed="true"] { background: var(--a); color: var(--lilla); box-shadow: 0 0 18px var(--a); }
.vk:disabled { opacity: 0.35; cursor: default; }
.ci .btn-chrome { width: 100%; }
.ci .btn-chrome.start { font-size: 26px; padding: 16px 22px; margin-bottom: 14px; animation: pulse-soft 1.8s ease-in-out infinite; }
@keyframes pulse-soft { 0%, to { opacity: 1; transform: scale(1); } 50% { opacity: 0.9; transform: scale(0.985); } }
.indsaet { margin: 12px 0 0; font-family: var(--arcade); font-size: 12px; color: rgba(255, 255, 255, 0.7); text-align: center; text-transform: uppercase; }
.menu-advarsel { margin: 0 0 12px; font-size: 0.95rem; color: var(--gul); }

/* ---------- Indhold: hvidt med scanlines som det gamle site ---------- */
.efter, .artikel { background: var(--indhold-bg); color: var(--indhold-tekst); position: relative; }
.efter { padding: 40px 0 56px; margin-top: 16px; }
.artikel { padding: 36px 0 60px; }
.efter a, .artikel a, .bund a { color: var(--indhold-accent); }
.prosa { max-width: 46rem; }
.prosa h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1.15; margin: 0 0 14px; color: var(--indhold-accent); text-transform: uppercase; font-weight: 800; letter-spacing: -0.01em; }
.prosa h2 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.85rem); line-height: 1.2; margin: 2em 0 0.55em; color: var(--indhold-accent); text-transform: uppercase; font-weight: 800; letter-spacing: -0.01em; }
.prosa h3 { font-size: 1.2rem; margin: 1.6em 0 0.4em; }
.prosa p, .prosa li { max-width: 70ch; }
.prosa li { margin: 0.35em 0; }
.ingress { font-size: 1.12rem; line-height: 1.65; }
.punkter { list-style: none; padding: 0 0 0 24px; margin: 14px 0 18px; }
.punkter li { margin: 0 0 10px; }
.cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: var(--lilla) !important; border: 2px solid var(--lilla); border-radius: 10px; background: linear-gradient(#ffd0e8, #ff8fc4, #ff1f8f 60%, #ff66b0, #ffd0e8); box-shadow: inset 0 1px #ffffffe6, inset 0 -2px #00000040, 0 4px var(--lilla), 0 8px 18px #0003; transition: transform 80ms; }
.cta:active { transform: translateY(3px); }
.figur { margin: 24px 0; }
.figur img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 6px; }
.figur figcaption, .tegning figcaption { font-size: 0.92rem; color: #555; margin-top: 8px; }
.tegning { margin: 24px 0; }
.tegning svg { width: 100%; height: auto; display: block; }
.faq { border-top: 1px solid #ddd; }
.faq details { border-bottom: 1px solid #ddd; }
.faq summary { cursor: pointer; font-weight: 700; padding: 12px 36px 12px 0; min-height: 44px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--indhold-accent); border-bottom: 2px solid var(--indhold-accent); transform: translateY(-70%) rotate(45deg); transition: transform 180ms ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { margin: 0 0 14px; }
.kilder { padding-left: 1.2em; }

/* Tabeller: én linje pr. celle, sidelæns scroll i rammen, fast første kolonne på mobil */
.tabel-wrap { overflow-x: auto; margin: 20px 0 24px; border: 1px solid #ddd; background: #fff; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #e6e6e6; vertical-align: top; white-space: nowrap; }
thead th { background: #fbe9f0; color: var(--indhold-accent); font-weight: 800; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; }
tbody th { font-weight: 700; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
@media (max-width: 640px) {
  .tabel-wrap th:first-child, .tabel-wrap td:first-child { position: sticky; left: 0; background: #fff; box-shadow: 1px 0 0 #ddd; }
  .tabel-wrap thead th:first-child { background: #fbe9f0; }
  /* Første kolonne må ombryde lange tekster og fylder højst ca. 45 % */
  .tabel-wrap tr > :first-child { white-space: normal; width: 40%; max-width: 45vw; min-width: 7.5em; }
}

/* ---------- Bund ---------- */
.bund { background: var(--indhold-bg); color: #444; padding: 26px 0 40px; font-size: 0.95rem; text-align: center; border-top: 1px solid #e6e6e6; position: relative; }
.bund-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 10px; align-items: center; }
.bund-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.bund p { margin: 6px 0 0; }
.side-spil .bund { margin-top: 0; }

/* Lav skærm i landskab (fx 740x360): kompakt top */
@media (max-height: 500px) and (orientation: landscape) {
  .menu a { min-height: 44px; font-size: 0.75rem; }
  .marquee-frame, .side-spil .marquee-frame { padding: 14px 12px; }
  .mq-titel { font-size: 1.6rem; }
  .mq-under { font-size: 0.95rem; }
  .marquee-wrap { margin-bottom: 4px; }
}
@media (max-width: 519px) {
  .menu { gap: 0 12px; }
  .menu a { font-size: 0.74rem; }
  .marquee-frame { padding: 16px 12px; }
  .hud { padding: 6px 6px; }
  .hud-tal { font-size: 40px; }
  .hud-sp { min-width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .arcade-grid, .marquee-frame::before, .marquee-frame::after { animation: none !important; }
  .btn-chrome:active, .cta:active, .vk:active, .hud-knap:active { transform: none; }
}

/* Lavt bord (liggende på lave skærme): kompakte lag, så knapperne ikke klippes */
.bord[data-lav] .lag { padding: 6px; }
.bord[data-lav] .lag-kort { padding: 10px 12px; max-width: min(460px, 100%); }
.bord[data-lav] .lag-kort h2 { font-size: 1.5rem; margin-bottom: 2px; }
.bord[data-lav] .lag-kort p { margin-bottom: 6px; font-size: 0.9rem; }
.bord[data-lav] .lag-score { font-size: 2.4rem; margin: 0 0 4px !important; }
.bord[data-lav] .btn-chrome { padding: 6px 14px; min-height: 44px; font-size: 16px; }
.bord[data-lav] .lag-knapper { gap: 8px; }