/* =========================================================
   SPEEDY.dk — Dansk fart-arkade
   Visuel verden: motorvejsskiltning. Asfalt, vejstriber,
   fartskilt-rødt, motorvejsblåt. Signatur: speedometeret.
   ========================================================= */
:root{
  --asfalt:#16191D;
  --asfalt-2:#0E1114;
  --asfalt-3:#1F242A;
  --stribe:#F6F8F4;        /* vejstribe-hvid */
  --beton:#EDEFEA;         /* lyse sektioner */
  --beton-2:#E982;         /* (ubrugt reserve) */
  --fart:#E03A2F;          /* fartskiltets røde ring */
  --motorvej:#0B63C5;      /* dansk motorvejsblå */
  --advarsel:#F5B32D;      /* vejarbejde-gul */
  --graes:#2E9E5B;         /* klar-signal grøn */
  --ink:#13171B;
  --ink-soft:#5A646E;
  --radius:14px;
  --font-display:'Archivo Black', 'Arial Black', sans-serif;
  --font-body:'Barlow', 'Segoe UI', sans-serif;
  --font-data:'Chivo Mono', 'Courier New', monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--font-body);background:var(--asfalt);color:var(--stribe);
  line-height:1.6;-webkit-text-size-adjust:100%;
}
a{color:var(--stribe)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--advarsel);outline-offset:3px}
button,input{font-family:inherit;touch-action:manipulation}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* Vejstribe — gennemgående motiv */
.stribe-linje{
  height:6px;width:100%;
  background:repeating-linear-gradient(90deg, var(--stribe) 0 42px, transparent 42px 84px);
  opacity:.5;
}

/* ---------- Topbar ---------- */
.topbar{position:sticky;top:0;z-index:900;background:var(--asfalt-2);border-bottom:1px solid #262C33}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--stribe)}
.brand-mark{width:30px;height:30px;flex:none}
.brand-name{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.01em}
.brand-name .dk{color:var(--advarsel)}
.topnav{display:flex;gap:18px}
.topnav a{color:#A9B3BD;text-decoration:none;font-size:.9rem;font-weight:500}
.topnav a:hover{color:var(--stribe)}
.topnav a[aria-current="page"]{color:var(--advarsel)}
@media(max-width:560px){.topnav{gap:12px}.topnav a{font-size:.82rem}}

/* ---------- Hero ---------- */
.hero{padding:52px 0 44px;background:
  radial-gradient(700px 340px at 78% 10%, rgba(11,99,197,.20), transparent 60%),
  radial-gradient(600px 300px at 10% 100%, rgba(224,58,47,.14), transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1fr .9fr;gap:44px;align-items:center}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:28px}}
.eyebrow{
  font-family:var(--font-data);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--advarsel);margin-bottom:14px;
}
.hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.02;letter-spacing:-.01em}
.hero h1 span{color:var(--fart)}
.hero p{margin-top:18px;max-width:48ch;color:#B7C1CB;font-size:1.05rem}
.hero-knapper{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Knapper */
.knap{
  display:inline-block;font-family:var(--font-body);font-weight:600;font-size:.98rem;
  border:none;border-radius:10px;padding:13px 22px;cursor:pointer;text-decoration:none;
  background:var(--fart);color:#fff;
}
.knap:hover{background:#C42F25}
.knap-sekundaer{background:transparent;color:var(--stribe);border:2px solid #39424B}
.knap-sekundaer:hover{border-color:var(--stribe);background:transparent}
.knap-blaa{background:var(--motorvej)}
.knap-blaa:hover{background:#0952A5}
.knap[disabled]{opacity:.5;cursor:default}

/* ---------- Speedometer (signatur) ---------- */
.speedo{width:100%;max-width:380px;margin:0 auto;display:block}
.speedo .skala{fill:none;stroke:#2A3138;stroke-width:11;stroke-linecap:round}
.speedo .fyld{fill:none;stroke:var(--advarsel);stroke-width:11;stroke-linecap:round;
  transition:stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1), stroke 1.1s ease}
.speedo .tik{stroke:#5A646E;stroke-width:2}
.speedo .tik-stor{stroke:#8C97A2;stroke-width:3}
.speedo .naal{
  transform-box:view-box;transform-origin:100px 100px;
  transition:transform 1.25s cubic-bezier(.22,1,.36,1);
}
.speedo .naal-krop{fill:var(--fart)}
.speedo .nav{fill:#2A3138;stroke:#5A646E;stroke-width:2}
.speedo-tal{font-family:var(--font-data);fill:var(--stribe);font-size:26px;text-anchor:middle}
.speedo-mrk{font-family:var(--font-data);fill:#8C97A2;font-size:9px;text-anchor:middle;letter-spacing:.14em}

/* ---------- Testkort ---------- */
.sektion{padding:56px 0}
.sektion-hoved{display:flex;align-items:baseline;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.sektion-hoved h2{font-family:var(--font-display);font-size:clamp(1.4rem,3.2vw,2rem)}
.sektion-hoved .note{font-family:var(--font-data);font-size:.72rem;color:#8C97A2;letter-spacing:.1em;text-transform:uppercase}
.sektion-hoved::after{content:"";flex:1;height:1px;background:#2A3138;min-width:40px}

.kort-net{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.kort-net{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kort-net{grid-template-columns:1fr}}
.testkort{
  background:var(--asfalt-3);border:1px solid #2A3138;border-radius:var(--radius);
  padding:22px;text-decoration:none;color:var(--stribe);display:flex;flex-direction:column;gap:8px;
  transition:transform .16s ease, border-color .16s ease;
}
.testkort:hover{transform:translateY(-4px);border-color:var(--advarsel)}
.testkort .ikon{font-size:1.9rem;line-height:1}
.testkort h3{font-family:var(--font-display);font-size:1.05rem}
.testkort p{font-size:.9rem;color:#A9B3BD}
.testkort .bedste{
  font-family:var(--font-data);font-size:.78rem;color:var(--advarsel);
  margin-top:auto;padding-top:12px;border-top:1px dashed #39424B;
}
.testkort .bedste.tom{color:#6C7681}

/* ---------- Arena (testsiden) ---------- */
.arena-hoved{padding:34px 0 20px;text-align:center}
.arena-hoved .ikon{font-size:2.4rem;display:block;margin-bottom:6px}
.arena-hoved h1{font-family:var(--font-display);font-size:clamp(1.6rem,4.4vw,2.4rem)}
.arena-hoved p{margin:12px auto 0;max-width:56ch;color:#B7C1CB}

.arena{
  position:relative;min-height:430px;border-radius:18px;border:2px solid #2A3138;
  background:var(--asfalt-3);display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;text-align:center;padding:28px;overflow:hidden;
  user-select:none;-webkit-user-select:none;
}
@media(max-width:600px){.arena{min-height:340px;padding:18px}}
.arena.klikbar{cursor:pointer}
.arena h2{font-family:var(--font-display);font-size:clamp(1.3rem,4vw,2.1rem);line-height:1.15}
.arena p{color:#B7C1CB;max-width:46ch}
.arena .stort-tal{font-family:var(--font-data);font-size:clamp(2.6rem,9vw,4.4rem);line-height:1}
.arena .hint{font-family:var(--font-data);font-size:.76rem;color:#8C97A2;letter-spacing:.08em}

/* Arena-tilstande */
.arena.t-vent{background:var(--fart);border-color:var(--fart)}
.arena.t-vent h2, .arena.t-vent p{color:#fff}
.arena.t-nu{background:var(--graes);border-color:var(--graes)}
.arena.t-nu h2{color:#fff}
.arena.t-fejl{background:var(--advarsel);border-color:var(--advarsel)}
.arena.t-fejl h2, .arena.t-fejl p{color:var(--asfalt-2)}
.arena.t-blaa{background:var(--motorvej);border-color:var(--motorvej)}
.arena.t-blaa h2, .arena.t-blaa p{color:#fff}

/* Runde-prikker */
.runder{display:flex;gap:8px;justify-content:center;margin-top:4px}
.runder i{width:9px;height:9px;border-radius:50%;background:#4A545E;display:block}
.runder i.klaret{background:var(--advarsel)}

/* Klikstorm */
.klikpad{
  width:min(260px,62vw);aspect-ratio:1;border-radius:50%;border:6px solid var(--stribe);
  background:var(--fart);color:#fff;font-family:var(--font-display);font-size:1.5rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.klikpad:active{transform:scale(.97)}
.tidsbjaelke{width:min(420px,80%);height:8px;border-radius:4px;background:#39424B;overflow:hidden}
.tidsbjaelke i{display:block;height:100%;background:var(--advarsel);width:100%}

/* Sigtekornet */
.maalbane{position:absolute;inset:0}
.maal{
  position:absolute;width:52px;height:52px;border-radius:50%;
  background:var(--fart);border:5px solid var(--stribe);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.maal::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--stribe)}
@media(max-width:600px){.maal{width:60px;height:60px}}
.tael-op{
  position:absolute;top:12px;left:0;right:0;text-align:center;
  font-family:var(--font-data);font-size:.85rem;color:#8C97A2;pointer-events:none;
}

/* Tastefart */
.ordstroem{
  font-family:var(--font-data);font-size:clamp(1rem,3.4vw,1.4rem);line-height:2;
  max-width:640px;word-spacing:.2em;color:#6C7681;
}
.ordstroem b{color:var(--stribe);font-weight:400;background:var(--motorvej);padding:2px 6px;border-radius:5px}
.ordstroem s{color:var(--fart);text-decoration:line-through}
.ordstroem u{color:var(--graes);text-decoration:none}
.tastefelt{
  width:min(420px,86%);background:var(--asfalt-2);border:2px solid #39424B;border-radius:10px;
  color:var(--stribe);font-family:var(--font-data);font-size:1.1rem;padding:12px 14px;text-align:center;
}
.tastefelt:focus{border-color:var(--advarsel);outline:none}

/* Talhukommelse */
.cifre{font-family:var(--font-data);font-size:clamp(2rem,8vw,3.6rem);letter-spacing:.16em}
.niveau{font-family:var(--font-data);font-size:.8rem;color:var(--advarsel);letter-spacing:.1em}

/* Farvefælden */
.stroop-ord{font-family:var(--font-display);font-size:clamp(2.4rem,10vw,4.6rem);line-height:1}
.farveknapper{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(460px,92%)}
@media(max-width:520px){.farveknapper{grid-template-columns:repeat(2,1fr)}}
.farveknap{
  border:none;border-radius:10px;padding:16px 6px;cursor:pointer;
  font-family:var(--font-display);font-size:.9rem;color:#fff;
}
.farveknap:active{transform:scale(.97)}

/* ---------- Resultatpanel ---------- */
.resultat{
  margin-top:22px;background:var(--asfalt-3);border:1px solid #2A3138;border-radius:var(--radius);
  padding:26px;text-align:center;
}
.resultat .vaerdi{font-family:var(--font-data);font-size:clamp(2.2rem,7vw,3.2rem);line-height:1;color:var(--advarsel)}
.resultat .enhed{font-family:var(--font-data);font-size:.9rem;color:#8C97A2;margin-top:4px}
.resultat h3{font-family:var(--font-display);font-size:1.15rem;margin-bottom:10px}
.resultat .dom{margin:14px auto 0;max-width:48ch;color:#B7C1CB}
.resultat .rekord{display:inline-block;font-family:var(--font-data);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--advarsel);color:var(--asfalt-2);border-radius:999px;padding:5px 12px;margin-top:12px}
.resultat-knapper{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.detaljer{font-family:var(--font-data);font-size:.8rem;color:#8C97A2;margin-top:12px}

/* Skala-bjælke: hvor ligger man? */
.skalabjaelke{margin:20px auto 0;max-width:460px}
.skalabjaelke .bane{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--fart),var(--advarsel),var(--graes));position:relative}
.skalabjaelke .maerke{position:absolute;top:-5px;width:4px;height:20px;background:var(--stribe);border-radius:2px;transform:translateX(-2px)}
.skalabjaelke .ender{display:flex;justify-content:space-between;font-family:var(--font-data);font-size:.68rem;color:#8C97A2;margin-top:6px}

/* ---------- Resultatside ---------- */
.lys{background:var(--beton);color:var(--ink)}
.lys .sektion-hoved h2{color:var(--ink)}
.lys .sektion-hoved::after{background:#CFD5CC}
.lys .sektion-hoved .note{color:#7A838C}
.rang-kort{
  background:var(--asfalt-2);border-radius:18px;padding:30px;text-align:center;
  border:1px solid #2A3138;
}
.rang-kort .rang-emoji{font-size:3rem;display:block}
.rang-kort .rang-navn{font-family:var(--font-display);font-size:clamp(1.6rem,5vw,2.4rem);margin-top:6px}
.rang-kort .rang-kmt{font-family:var(--font-data);color:var(--advarsel);letter-spacing:.12em;margin-top:4px}
.rang-kort .rang-tekst{color:#B7C1CB;max-width:52ch;margin:14px auto 0}

.stat-liste{list-style:none;margin-top:8px}
.stat-liste li{padding:14px 0;border-bottom:1px solid #CFD5CC}
.stat-liste li:last-child{border-bottom:none}
.stat-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.stat-navn{font-weight:600}
.stat-vaerdi{font-family:var(--font-data);font-size:.95rem;color:var(--ink)}
.stat-vaerdi.tom{color:#98A0A8}
.stat-bar{height:9px;border-radius:5px;background:#DCE0DA;margin-top:8px;overflow:hidden}
.stat-bar i{display:block;height:100%;background:var(--motorvej);width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
.stat-point{font-family:var(--font-data);font-size:.76rem;color:#7A838C}

.deleboks{
  background:#fff;border:1px solid #CFD5CC;border-radius:var(--radius);padding:20px;margin-top:24px;
}
.deleboks h3{font-family:var(--font-display);font-size:1rem;margin-bottom:10px;color:var(--ink)}
.deleboks pre{
  font-family:var(--font-data);font-size:.82rem;color:var(--ink);background:var(--beton);
  border-radius:10px;padding:14px;white-space:pre-wrap;word-break:break-word;
}
.deleboks .knap{margin-top:12px}
.lille-note{font-family:var(--font-data);font-size:.72rem;color:#7A838C;margin-top:14px}

/* Rangtabel */
.rangtabel{width:100%;border-collapse:collapse;margin-top:10px;font-size:.92rem}
.rangtabel th,.rangtabel td{text-align:left;padding:9px 10px;border-bottom:1px solid #CFD5CC}
.rangtabel th{font-family:var(--font-data);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#7A838C}
.rangtabel td:last-child,.rangtabel th:last-child{text-align:right;font-family:var(--font-data)}
.rangtabel tr.din{background:#DDE6F5;font-weight:600}

/* ---------- Footer ---------- */
footer{background:var(--asfalt-2);padding:0 0 34px;margin-top:20px}
footer .stribe-linje{margin-bottom:34px}
footer h4{font-family:var(--font-display);font-size:.95rem;margin-bottom:10px;color:var(--stribe)}
.foot-net{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
@media(max-width:760px){.foot-net{grid-template-columns:1fr}}
footer p,footer li{font-size:.86rem;color:#8C97A2}
footer ul{list-style:none}
footer li{padding:3px 0}
footer a{color:var(--advarsel);text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-bund{margin-top:30px;padding-top:16px;border-top:1px solid #262C33;
  font-family:var(--font-data);font-size:.7rem;color:#6C7681;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}