@font-face { font-family: "Anton"; src: url(fonts/anton.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --blekk: #0c0b0b;
  --krem: #f4f1ea;
  --pistasj: #c9e09b;
  --pad: clamp(16px, 2.4vw, 32px);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--blekk); color: var(--krem); -webkit-text-size-adjust: 100%; }
body { background: var(--blekk); font-family: "Bricolage Grotesque", system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; }
canvas.scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.topp {
  position: fixed; z-index: 5; top: var(--pad); left: var(--pad); right: var(--pad);
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
  mix-blend-mode: difference;
}
.topp a { pointer-events: auto; display: block; }
.topp img { display: block; height: 22px; width: auto; }
.topp .tilbake { font: 400 13px "JetBrains Mono", monospace; color: var(--krem); text-decoration: none; padding: 8px 0; }
.topp .tilbake:hover, .topp .tilbake:focus-visible { color: var(--pistasj); }
.vis { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: 0; }
.mono { font: 400 13px/1.4 "JetBrains Mono", monospace; }
.slash { color: var(--pistasj); }
:focus-visible { outline: 2px solid var(--pistasj); outline-offset: 4px; }
.feil { position: fixed; inset: 0; display: none; place-items: center; padding: var(--pad); text-align: center; }
.uten-gl .feil { display: grid; }

  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  canvas.scene { touch-action: none; cursor: grab; }
  canvas.scene.drar { cursor: grabbing; }
  .bunn {
    position: fixed; z-index: 3; left: var(--pad); right: var(--pad); bottom: var(--pad);
    display: flex; justify-content: space-between; gap: 16px; align-items: end; pointer-events: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bunn a {
    pointer-events: auto; font-size: clamp(1.5rem, 3vw, 2.4rem); text-decoration: none; color: var(--blekk);
    background: var(--pistasj); padding: .18em .4em; visibility: hidden;
  }
  .bunn a.pa { visibility: visible; }
  .bunn .mono { text-shadow: 0 1px 12px #0c0b0b; }
  .lukk {
    position: fixed; z-index: 4; top: calc(var(--pad) + 44px); right: var(--pad); display: none;
    border: 0; background: var(--pistasj); color: var(--blekk); padding: 10px 14px; cursor: pointer;
  }
  .lukk.pa { display: block; }

  /* Veien ut står alltid fremme, uansett hva veggen gjør bak den. */
  .ut {
    position: fixed; z-index: 6; top: calc(var(--pad) + env(safe-area-inset-top)); right: var(--pad);
    background: var(--pistasj); color: var(--blekk); text-decoration: none;
    font: 700 15px/1 "Bricolage Grotesque", system-ui, sans-serif; padding: 13px 16px;
  }
  .ut:hover, .ut:focus-visible { background: var(--krem); }
  .lukk { top: calc(var(--pad) + env(safe-area-inset-top) + 56px); }
  .feil a { color: var(--pistasj); }
  @media (hover: none) { .kun-mus { display: none; } }

  /* Logoen og hjelpeteksten får egen flate, veggen bak skifter hele tiden. */
  .topp { mix-blend-mode: normal; right: auto; top: calc(var(--pad) + env(safe-area-inset-top)); }
  .topp .logo { background: var(--blekk); padding: 11px 14px; }
  .topp img { height: 19px; }
  .bunn .mono { background: var(--blekk); padding: 8px 12px; text-shadow: none; }
  .uten-gl canvas.scene, .uten-gl .bunn, .uten-gl .lukk { display: none; }
  .uten-gl .feil { place-content: center; gap: 14px; }

  /* Radioen, nederst når du har zoomet inn på et sted. */
  .radio {
    position: fixed; z-index: 5; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + env(safe-area-inset-bottom));
    max-width: 560px; background: var(--blekk); padding: 20px 22px 22px; display: grid; gap: 10px;
  }
  .radio[hidden], .radio [hidden] { display: none; }
  .hvor { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--krem); }
  .slaa { justify-self: start; border: 0; background: var(--pistasj); color: var(--blekk); font-size: 1.5rem; padding: .3em .6em; cursor: pointer; }
  .kaker { opacity: .72; }
  .spiller iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }
  .lytter .bunn { display: none; }
  @media (min-width: 700px) { .radio { left: auto; width: min(46vw, 520px); } }