/* Heklestua: tellerskjermen. Stor skrift, høy kontrast, store knapper. Lys og mørk følger telefonen. */
@font-face{ font-family:"Atkinson"; src:url("skrift/AtkinsonHyperlegible-Regular.ttf"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Atkinson"; src:url("skrift/AtkinsonHyperlegible-Bold.ttf"); font-weight:700; font-display:swap; }
:root{
  --bg:#fbf8f3; --tekst:#1b2130; --dempet:#454b5a; --kant:#1b2130;
  --flate:#efe0c8; --flatetekst:#1b2130;
  --knapp:#ffffff; --knapptekst:#1b2130;
  --rod:#8c1c13; --rodbg:#fde8e6;
  --merke:#ffd54f; --merketekst:#1b1b1b;
  --fokus:#0b57d0;
}
@media (prefers-color-scheme:dark){ :root{
  --bg:#1b2130; --tekst:#f4f1e8; --dempet:#cfd3dc; --kant:#f4f1e8;
  --flate:#2c3a5c; --flatetekst:#ffffff;
  --knapp:#262e42; --knapptekst:#f4f1e8;
  --rod:#ffb4ab; --rodbg:#5c1a14;
  --fokus:#9ecbff;
} }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--tekst); font:400 18px/1.4 "Atkinson",system-ui,sans-serif; }
body{ -webkit-tap-highlight-color:transparent; }
#app{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; max-width:40rem; margin:0 auto; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:8px; }
button{ font:inherit; color:inherit; touch-action:manipulation; }
:focus-visible{ outline:4px solid var(--fokus); outline-offset:2px; }
[hidden]{ display:none !important; }

#topp{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; }
#delnavn{ font-weight:700; font-size:1.2rem; }
#omgangslinje{ font-weight:700; font-size:1.5rem; width:100%; }
#maskelinje{ font-size:1.25rem; }
#versjon{ font-size:.85rem; color:var(--dempet); }
#vaakenstatus{ font-size:.95rem; color:var(--dempet); }

.varsel{ background:var(--rodbg); color:var(--rod); border:2px solid var(--rod); padding:10px 12px; border-radius:10px; font-size:1rem; }

#midt{ position:relative; flex:1; display:flex; flex-direction:column; min-height:0; }
#flate{ flex:1; width:100%; min-height:46vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  background:var(--flate); color:var(--flatetekst); border:4px solid var(--kant); border-radius:20px; padding:16px;
  user-select:none; -webkit-user-select:none; cursor:pointer; }
#flate:active{ filter:brightness(1.12); }
#steg{ font-weight:700; font-size:clamp(3.5rem,20vw,7rem); line-height:1.05; overflow-wrap:anywhere; }
#steginfo{ font-size:1.5rem; }
#rep{ font-size:1.15rem; }
#naboer{ font-size:1rem; color:inherit; opacity:.92; margin-top:8px; display:grid; gap:2px; }

#banner{ position:absolute; z-index:2; left:8px; right:8px; top:8px; background:var(--merke); color:var(--merketekst); border:4px solid var(--merketekst);
  border-radius:14px; padding:14px 16px; font-weight:700; font-size:1.4rem; text-align:center; pointer-events:none; }

#ferdig{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center;
  background:var(--flate); color:var(--flatetekst); border:4px solid var(--kant); border-radius:20px; padding:16px; }
#ferdigtekst{ font-weight:700; font-size:2rem; }

.stor{ min-height:68px; padding:12px 16px; font-size:1.3rem; font-weight:700; background:var(--knapp); color:var(--knapptekst); border:3px solid var(--kant); border-radius:14px; cursor:pointer; }
.stor:disabled{ opacity:.45; cursor:default; }
#knapper{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

#bekreft{ position:fixed; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.6); }
#bekreftboks{ background:var(--bg); color:var(--tekst); border:4px solid var(--kant); border-radius:16px; padding:18px; max-width:30rem; width:100%; display:grid; gap:14px; }
#bekreftboks p{ margin:0; font-size:1.25rem; }
#bekreftknapper{ display:grid; gap:10px; }