/* finncomford speedtest — Bühne dunkel, Papier hell */

@font-face{
  font-family:"JBMono"; src:url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:100 800; font-display:swap;
}
@font-face{font-family:"Saira"; src:url("../fonts/saira-400.woff2") format("woff2"); font-weight:400; font-display:swap;}
@font-face{font-family:"Saira"; src:url("../fonts/saira-500.woff2") format("woff2"); font-weight:500; font-display:swap;}
@font-face{font-family:"Saira"; src:url("../fonts/saira-600.woff2") format("woff2"); font-weight:600; font-display:swap;}
@font-face{font-family:"Saira"; src:url("../fonts/saira-700.woff2") format("woff2"); font-weight:700; font-display:swap;}

:root{
  --void:#080D13;
  --abyss:#0B1720;
  --navy:#14232C;
  --holo:#43D9ED;
  --ice:#A9EEF8;
  --snow:#EAF7FB;
  --gold:#C6A65A;
  --steel:#8FA3B4;
  --edge:rgba(169,238,248,.14);
  --paper:#F3EFE7;
  --ink:#141A20;
  --ink-soft:#3C464A;
  --mono:"JBMono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:"Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--void); color:var(--snow); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:contain;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}

/* ---------- Kopf ---------- */
.top{
  position:absolute; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 20px 10px;
  pointer-events:none;
}
.top .mark{font-weight:600; font-size:13px; letter-spacing:.01em; color:var(--snow);}
.top .tag{
  margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  color:rgba(169,238,248,.55); text-transform:lowercase;
}

/* ---------- Bühne ---------- */
.stage{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:18px;
  padding:calc(64px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
  overflow:hidden;
}
.side{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  width:100%; position:relative; z-index:2;
}
.veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 34%, rgba(27,127,146,.30), rgba(8,13,19,0) 62%),
    repeating-linear-gradient(0deg, rgba(169,238,248,.028) 0 1px, transparent 1px 3px);
}
.veil::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(169,238,248,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(169,238,248,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(closest-side at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(closest-side at 50% 40%, #000 30%, transparent 78%);
  opacity:.5;
}

/* ---------- Instrument ---------- */
.gauge{
  position:relative; width:min(84vw, 360px); aspect-ratio:1/1; flex:none;
  display:grid; place-items:center;
}
.gauge svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.track{fill:none; stroke:rgba(169,238,248,.17); stroke-width:8; stroke-linecap:round;}
.arc{
  fill:none; stroke:url(#arcGrad); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:0 1000; transition:stroke-dasharray .18s linear;
}
.cap{fill:var(--snow); opacity:0; transition:opacity .2s var(--ease);}
.gauge.live .cap{opacity:1;}
.ticks line{stroke:rgba(169,238,248,.28); stroke-width:1;}
.ticks line.major{stroke:rgba(169,238,248,.55); stroke-width:1.4;}
.ticks text{
  font-family:var(--mono); font-size:7.5px; fill:rgba(169,238,248,.50);
  letter-spacing:.04em;
}

.readout{
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:2px; padding-top:6px;
}
.state{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.20em;
  color:rgba(169,238,248,.62); min-height:14px;
}
.value{
  position:relative; display:flex; align-items:baseline;
  font-family:var(--mono); font-weight:700; font-size:clamp(42px, 13.5vw, 62px);
  line-height:1; letter-spacing:-.03em; color:var(--snow);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  text-shadow:0 0 24px rgba(67,217,237,.28);
}
.value .unit{
  position:absolute; left:100%; bottom:6px; margin-left:7px; white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.06em;
  color:rgba(169,238,248,.72); text-shadow:none;
}
.sub{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  color:rgba(169,238,248,.42);
}

/* ---------- Kacheln ---------- */
.tiles{
  width:min(84vw, 360px); display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--edge); padding-top:10px; gap:6px;
}
.tile{display:flex; flex-direction:column; gap:3px; align-items:flex-start;}
.tile .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--steel);
}
.tile .v{
  font-family:var(--mono); font-weight:700; font-size:17px; letter-spacing:-.01em;
  color:var(--snow); font-variant-numeric:tabular-nums;
}
.tile .v i{font-style:normal; font-size:9px; color:rgba(143,163,180,.8); margin-left:3px;}
.tile.on .v{color:var(--ice);}

/* ---------- Knopf ---------- */
.go{
  width:min(84vw, 360px); height:54px; border-radius:15px;
  font-family:var(--sans); font-weight:600; font-size:16px; color:var(--snow);
  background:linear-gradient(180deg, rgba(169,238,248,.15), rgba(67,217,237,.07));
  border:1px solid rgba(169,238,248,.40);
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 1px 0 rgba(234,247,251,.16) inset, 0 12px 30px rgba(0,0,0,.35);
  transition:transform .12s var(--ease), background .2s, border-color .2s;
}
.go:active{transform:scale(.985); background:rgba(169,238,248,.22);}
.go.stop{border-color:rgba(255,69,58,.45); color:#FFD9D5;}
.share{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:rgba(169,238,248,.70); padding:2px 4px; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(169,238,248,.35);
}
.hint{
  margin:0; font-family:var(--mono); font-size:9.5px; letter-spacing:.05em;
  color:rgba(143,163,180,.75); text-align:center; min-height:14px;
}
.hint.err{color:#FF9F9A;}

@keyframes sweep{
  from{transform:rotate(0deg);} to{transform:rotate(360deg);}
}

/* ---------- Papier ---------- */
.paper{
  background:var(--paper); color:var(--ink);
  padding:34px 22px calc(30px + env(safe-area-inset-bottom));
  border-radius:20px 20px 0 0;
}
.paper h2{
  margin:0 0 12px; font-size:21px; font-weight:600; letter-spacing:-.015em;
}
.paper h2 + p, .paper p{
  margin:0 0 14px; font-size:15.5px; line-height:1.62; color:var(--ink-soft); max-width:60ch;
}
.paper .h2-hist{margin-top:26px;}
.facts{
  margin:22px 0 4px; display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;
  border-top:1px solid rgba(20,26,32,.12); padding-top:18px;
}
.facts > div{display:flex; flex-direction:column; gap:3px;}
.facts dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.10em; color:#6C7A7E;
}
.facts dd{margin:0; font-size:14.5px; font-weight:500; color:var(--ink);}

.hist{display:flex; align-items:flex-end; gap:10px; height:96px; margin:6px 0 8px;}
.hist.is-empty{height:auto;}
.hist .bar{flex:0 0 auto; width:44px; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; height:100%;}
.hist .bar i{
  display:block; background:linear-gradient(180deg, #2AA7B8, #1B7F92);
  border-radius:3px 3px 0 0; min-height:3px;
}
.hist .bar span{font-family:var(--mono); font-size:8.5px; color:#6C7A7E; text-align:center;}
.hist .empty{margin:0; font-size:14px; color:#6C7A7E;}

.foot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:26px; padding-top:16px; border-top:1px solid rgba(20,26,32,.12);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:#6C7A7E;
}

/* ---------- größere Displays ---------- */
@media (min-width:720px){
  .stage{
    display:grid; grid-template-columns:auto auto; align-items:center;
    justify-content:center; column-gap:68px; row-gap:20px;
    padding:110px 40px 70px;
  }
  .gauge{width:380px;}
  .side{width:340px; align-items:stretch; gap:18px;}
  .tiles{width:100%;}
  .go{width:100%; height:56px;}
  .hint{width:100%; text-align:left;}
  .top{padding-left:40px; padding-right:40px;}
  .paper{padding:56px 48px 44px; border-radius:24px 24px 0 0;}
  .paper h2{font-size:26px;}
  .paper h2 + p, .paper p{font-size:16.5px;}
  .facts{grid-template-columns:repeat(4,1fr);}
  .hist{height:110px; max-width:640px;}
}

@media (prefers-reduced-motion:reduce){
  .arc{transition:none;}
  .go{transition:none;}
}