/* BME-Skatten — «Byggeplassen»
   Byggmester Evensens farger: skoggrønn, BME-grønn og gull. Bricolage Grotesque til titler og tall,
   Figtree til tekst, som på byggmesterevensen.no. Tommestokk som skille, og logoens åpne gullramme
   med skråkuttet hjørne rundt det viktigste på skjermen. Én stor ting per skjerm.

   Variabelnavnene (--svart, --gul …) er beholdt fra DaggeGames, så sidene kan deles. Verdiene er BMEs. */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Figtree:wght@500;600;700;800&display=swap");

:root {
  --svart: #0E2A18;     /* skoggrønn, nesten svart: spillskjermens bunn og mørk tekst */
  --gul: #F5BD45;       /* BME-gull */
  --gul-dyp: #D89A1F;
  --lysgull: #FCDA8D;
  --gronn: #1BA423;     /* BME-grønn */
  --gronn-mork: #137A1A;
  --rod: #E5483B;
  --hvit: #FFFFFF;
  --asfalt: #24492F;    /* mellomgrønn til kolon og skiller */
  --stein: #A9BDAE;     /* dempet salvie */
  --kritt: #F4F6F1;     /* papir */

  --h: "Bricolage Grotesque", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --f: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* Tommestokk: små streker hver centimeter, lange hver femte */
  --tape:
    repeating-linear-gradient(90deg, var(--svart) 0 2px, transparent 2px 10px) 0 100% / 100% 40% no-repeat,
    repeating-linear-gradient(90deg, var(--svart) 0 3px, transparent 3px 50px) 0 100% / 100% 80% no-repeat,
    var(--gul);
  --kant: 2px solid var(--svart);
  --radius: 4px;
  --pad: clamp(16px, 4vw, 32px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; }
.flate-gul :focus-visible, .flate-kritt :focus-visible { outline-color: var(--gronn-mork); }
[hidden] { display: none !important; }

/* Flater */
.flate-gul { background: var(--gul); color: var(--svart); }
.flate-svart { background: var(--svart); color: var(--hvit); }
.flate-kritt { background: var(--kritt); color: var(--svart); }

/* Tommestokk */
.tape { height: 14px; background: var(--tape); }
.tape-tykk { height: 24px; background: var(--tape); }
.tape-tekst {
  background: var(--gul); color: var(--svart);
  padding: 6px var(--pad);
  font-family: var(--h); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Logoens ramme: gull, åpen på venstre side og skråkuttet nede til høyre */
.bme-ramme { position: relative; }
.bme-ramme::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: var(--rk, 6px) solid var(--gul);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 94% 100%, 0 100%, 0 70%, var(--rk, 6px) 70%, var(--rk, 6px) 30%, 0 30%);
}

/* Ordmerket: BME-merket og «Skatten» */
.ordmerke {
  display: inline-flex; align-items: center; gap: .3em;
  font-family: var(--h); font-weight: 800; line-height: 1; letter-spacing: -.01em; text-decoration: none;
}
.ordmerke b { font-weight: 800; }
.ordmerke .logo { display: block; height: 1.6em; width: auto; }
.ordmerke-navn { font-size: 1em; color: var(--lysgull); }
.flate-gul .ordmerke-navn, .flate-kritt .ordmerke-navn { color: inherit; }
.ordmerke small { font-family: var(--f); font-size: .5em; font-weight: 600; letter-spacing: 0; opacity: .8; margin-left: .2em; }

/* Titler: som overskriftene på byggmesterevensen.no, ikke versaler */
.tittel {
  font-family: var(--h); font-weight: 800; line-height: .95;
  letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere;
}
.tittel-xl { font-size: clamp(48px, 13vw, 128px); }
.tittel-xl .aar { color: var(--gul, #F5BD45); }
.tittel-l { font-size: clamp(38px, 8.5vw, 80px); }
.tittel-m { font-size: clamp(26px, 5.5vw, 42px); }
.lede { font-size: 19px; font-weight: 600; max-width: 34em; }

/* Tall */
.tall { font-family: var(--h); font-weight: 800; font-variant-numeric: tabular-nums; line-height: .9; letter-spacing: -.03em; }

/* Nedtelling. Alt er i em; BS.tilpass setter font-size så klokka
   fyller bredden den har, uten å bli høyere enn en gitt andel av skjermen. */
.nedtelling-ramme { width: 100%; min-width: 0; overflow: hidden; }
.nedtelling { display: inline-flex; width: max-content; gap: .07em; align-items: flex-start; flex-wrap: nowrap; font-size: 64px; line-height: 1; }
.nedtelling .ledd { display: flex; flex-direction: column; align-items: flex-start; }
.nedtelling .siffer {
  font-family: var(--h); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: 1em; line-height: .82; letter-spacing: -.04em;
  color: var(--gul);
}
.nedtelling .enhet { font-weight: 700; font-size: max(11px, .13em); color: var(--stein); margin-top: .6em; white-space: nowrap; }
.nedtelling .kolon { font-family: var(--h); font-weight: 800; font-size: .75em; line-height: 1.05; color: var(--asfalt); }

/* Kodebrikker: som gullbarrer */
.brikker { display: inline-flex; gap: clamp(4px, 1.4vw, 10px); }
.brikke {
  width: clamp(40px, 12.5vw, 70px); height: clamp(54px, 16vw, 90px);
  display: grid; place-items: center;
  background: var(--gul); color: var(--svart);
  border: var(--kant); border-radius: var(--radius); box-shadow: inset 0 -5px 0 var(--gul-dyp);
  font-family: var(--h); font-weight: 800; font-size: clamp(26px, 8vw, 48px);
}
.brikke.tom { background: var(--hvit); box-shadow: none; }
.brikke.aktiv { background: var(--hvit); box-shadow: none; outline: 3px solid var(--gronn); outline-offset: -7px; }
.flate-svart .brikke { border-color: var(--gul); }

/* Knapper */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 12px 22px;
  background: var(--svart); color: var(--gul);
  border: var(--kant); border-radius: var(--radius);
  font-family: var(--f); font-weight: 800; font-size: 18px; text-decoration: none;
  cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .28);
  transition: transform .08s, box-shadow .08s, background .15s;
}
.knapp:hover { background: var(--asfalt); }
.knapp:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .28); }
.knapp:disabled { opacity: .5; cursor: default; transform: none; }
.knapp-gul { background: var(--gul); color: var(--svart); border-color: var(--gul); box-shadow: 0 4px 0 var(--gul-dyp); }
.knapp-gul:hover { background: var(--lysgull); }
.knapp-gul:active { box-shadow: 0 1px 0 var(--gul-dyp); }
.knapp-hel { width: 100%; }
.knapp-stor { min-height: 64px; font-size: 22px; }
.knapp-liten { min-height: 36px; padding: 6px 12px; font-size: 14px; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.knapp-flat { background: var(--hvit); color: var(--svart); box-shadow: none; }
.knapp-flat:hover { box-shadow: none; background: var(--lysgull); }
.knapp-fare { background: var(--rod); color: var(--hvit); border-color: var(--rod); box-shadow: 0 3px 0 #a52a20; }
.knapp-fare:hover { background: #cf3b2f; }

/* Skjema */
.felt { display: grid; gap: 6px; margin-bottom: 18px; }
.felt label, .felt .etikett { font-weight: 700; font-size: 16px; }
.felt input, .felt select, .felt textarea {
  width: 100%; min-height: 54px; padding: 12px 14px;
  background: var(--hvit); color: var(--svart);
  border: var(--kant); border-radius: var(--radius);
  font-size: 18px; font-weight: 600;
}
.felt input:focus { outline: none; box-shadow: 0 0 0 3px var(--gronn); }
.felt .hjelp { font-size: 14px; font-weight: 500; }
.rad-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.avkrysning { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; cursor: pointer; margin-bottom: 18px; }
.avkrysning input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 30px; height: 30px; margin: 0; background: var(--hvit); border: var(--kant); border-radius: var(--radius); cursor: pointer;
  display: grid; place-items: center;
}
.avkrysning input:checked { background: var(--gronn); border-color: var(--gronn); }
.avkrysning input:checked::after { content: ""; width: 9px; height: 16px; border: solid var(--hvit); border-width: 0 4px 4px 0; transform: rotate(45deg) translate(-1px, -2px); }

.feilmelding {
  background: var(--rod); color: var(--hvit); font-weight: 700;
  padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px;
}
.feilmelding:empty { display: none; }

/* Stempel (live, fullt, stengt) */
.stempel {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border: 2px solid currentColor; border-radius: var(--radius);
  font-family: var(--f); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
}
.lampe { width: 12px; height: 12px; border-radius: 50%; background: var(--rod); box-shadow: 0 0 0 3px rgba(229, 72, 59, .35); }
.lampe.puls { animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .35; } }

/* Sosiale lenker */
.sosiale { display: flex; flex-wrap: wrap; gap: 10px; }
.sosiale a {
  padding: 10px 16px; border: var(--kant); border-radius: var(--radius); background: var(--hvit); color: var(--svart);
  font-weight: 700; text-decoration: none;
}
.sosiale a:hover { background: var(--svart); color: var(--gul); }
.flate-svart .sosiale a { border-color: var(--stein); background: transparent; color: var(--hvit); }
.flate-svart .sosiale a:hover { background: var(--gul); color: var(--svart); border-color: var(--gul); }

/* Oppsett */
.innhold { width: min(640px, 100%); margin-inline: auto; padding: var(--pad); }
.innhold-bred { width: min(1280px, 100%); margin-inline: auto; padding: var(--pad); }
.liten { font-size: 14px; }
.dempet { color: var(--stein); }

/* Siste ti sekunder */
.sluttspurt {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--gul); color: var(--svart);
}
.sluttspurt .tall { font-size: min(70vh, 80vw); line-height: 1; }
.sluttspurt.slag .tall { animation: slag .9s cubic-bezier(.2, .9, .2, 1); }
@keyframes slag { from { transform: scale(1.6); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Liten kreditering nederst på deltagersidene */
.gm-kreditt { margin: 0; padding: 8px var(--pad) calc(8px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 11.5px; font-weight: 600; line-height: 1.3; opacity: .75; }
.gm-kreditt a { color: inherit; font-weight: 800; text-underline-offset: 2px; }
.flate-svart .gm-kreditt { color: var(--stein); }