/* Høykontrastprofilen fra lydbokv2: helsvart bakgrunn, hvit tekst, store
   flater. Ingenting under 24 px. */
:root {
  --bg: #000000;
  --tekst: #ffffff;
  --dempet: #b8b8b8;
  --aksent: #4a9eff;
  --knapp: #1c1c1c;
  --kant: #4a4a4a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--tekst);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 24px;
  overscroll-behavior: none;
}

body { display: flex; flex-direction: column; }

/* Startskjerm – hele flaten er knappen */
#start {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--bg);
  text-align: center;
  font-size: 40px;
  line-height: 1.35;
  cursor: pointer;
}

#versjon {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  font-size: 20px;
  color: var(--dempet);
}

#status {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  min-height: 0;
}

#nivaa {
  font-size: 24px;
  color: var(--aksent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#tittel {
  font-size: 44px;
  line-height: 1.25;
  font-weight: 600;
  margin: 0;
}

#detalj { font-size: 26px; color: var(--dempet); }

#advarsel {
  margin: 0 24px 16px;
  padding: 16px;
  border: 3px solid #ffb020;
  border-radius: 12px;
  font-size: 24px;
  color: #ffb020;
}

/* Reserveknappene */
#kontroller {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
}

#kontroller button {
  min-height: 112px;
  font-size: 32px;
  font-weight: 600;
  font-family: inherit;
  color: var(--tekst);
  background: var(--knapp);
  border: 3px solid var(--kant);
  border-radius: 16px;
  cursor: pointer;
}

#kontroller button:active { background: var(--aksent); color: #000; }

#btn-velg { border-color: var(--aksent); }

#btn-tilbake { font-size: 26px; color: var(--dempet); }

#kontroller button:disabled { opacity: 0.35; }

@media (min-height: 700px) {
  #kontroller button { min-height: 132px; }
}