/* =====================================================================
 * duellen.css — designtokens og basisstiler for Fellesarenaduellen
 *
 * Kilde: ARKITEKTUR.md §2 (bindende palett) og
 * underlag/design_handoff_fellesarenaduellen/ (form, bevegelse, typografi).
 * Ikke improviser nye verdier her — se ARKITEKTUR.md §1.
 *
 * Brukes av håndskrevne sider (1, 2, 10). Ingen APEX-tema-avhengighet.
 * ===================================================================== */

:root {
  /* --- Farger ------------------------------------------------------ */
  --farge-lerret: #002257;
  --farge-flate: #00338D;
  --farge-linje: #4A6FA8;
  --farge-tekst: #FFFFFF;
  --farge-dempet: #8BAEDC;
  --farge-dempet-2: #6E93C4;
  --farge-prikk-24: #123F86;
  --farge-prikk-28: #1B4CA0;

  --farge-svar-1: #003087; /* trekant */
  --farge-svar-2: #B04A1E; /* rombe */
  --farge-svar-3: #1C6B5A; /* sirkel */
  --farge-svar-4: #9A996E; /* firkant — mørk tekst */
  --farge-svar-4-tekst: #002257;

  --farge-gull-lys: #C4C39B;
  --farge-riktig: #1C6B5A;
  --farge-feil: #8E2A32;
  --farge-advarsel: #E8927C;

  --farge-merke-1: #8BAEDC;
  --farge-merke-2: #C4C39B;
  --farge-merke-3: #E8927C;
  --farge-merke-4: #7FC9B8;

  /* --- Typografi ----------------------------------------------------
   * FNSP-skala. Negativ sporing på display-størrelser gjøres per
   * komponent (-.02em til -.04em), ikke som token her — den varierer
   * med kontekst (overskrift vs. tall).
   */
  --font-hoved: 'Plus Jakarta Sans', Aptos, Calibri, system-ui, sans-serif;
  --font-mono: 'Cascadia Mono', Consolas, ui-monospace, monospace;

  --skrift-14: 14px;
  --skrift-16: 16px;
  --skrift-18: 18px;
  --skrift-20: 20px;
  --skrift-24: 24px;
  --skrift-28: 28px;
  --skrift-32: 32px;
  --skrift-40: 40px;
  --skrift-48: 48px;
  --skrift-64: 64px;
  --skrift-96: 96px;
  --skrift-128: 128px;

  /* --- Mellomrom (8px-grid) ------------------------------------------ */
  --mellomrom-2: 2px;
  --mellomrom-4: 4px;
  --mellomrom-8: 8px;
  --mellomrom-12: 12px;
  --mellomrom-16: 16px;
  --mellomrom-24: 24px;
  --mellomrom-32: 32px;
  --mellomrom-48: 48px;

  /* --- Radius --------------------------------------------------------
   * Ingen skygger noe sted. Runde hjørner er identiteten, ikke pynt.
   */
  --radius-felt: 14px;
  --radius-flis: 16px;
  --radius-svar: 18px;
  --radius-pille: 999px;

  /* --- Linje ----------------------------------------------------------
   * 2px dotted, aldri heltrukket. Se ARKITEKTUR.md §2.
   */
  --bredde-linje: 2px;
}

/* --- Font: Plus Jakarta Sans, selvhostet -----------------------------
 * Variabel font (vektakse 400–800) i to delmengder (latin / latin-ext),
 * samme mønster som ressurs-apex/statiske/ressurs.css: én fil dekker alle
 * fire vektene i BANE_F.md i stedet for fire statiske instanser.
 * Norsk bokmål (æ ø å) ligger i "latin" (U+0000-00FF); "latin-ext" er
 * medsendt som forsvar mot spørsmålstekst med andre tegn.
 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Grunnstiler for de håndskrevne sidene ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--farge-lerret);
  color: var(--farge-tekst);
  font-family: var(--font-hoved);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
input, textarea, button { font: inherit; }
a { color: var(--farge-dempet); }
a:hover { color: var(--farge-tekst); }

/* --- Bevegelse ---------------------------------------------------------
 * Navngitte animasjoner delt av alle sider som trenger dem, slik at hver
 * side ikke definerer sin egen kopi. Tidene og easingen er fra
 * designoverleveringen — ikke endre dem per side.
 */
@keyframes pop  { 0% { transform: scale(.35); opacity: 0 } 60% { transform: scale(1.12); opacity: 1 } 100% { transform: scale(1) } }
@keyframes slam { 0% { transform: scale(1.7); opacity: 0 } 55% { transform: scale(.93); opacity: 1 } 100% { transform: scale(1) } }
@keyframes puls { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.1) } }
@keyframes vent { 0%, 100% { opacity: .4 } 50% { opacity: 1 } }
@keyframes tikk { 0% { transform: scale(1.6); opacity: 0 } 40% { transform: scale(1); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
@keyframes drift { from { background-position: 0 0 } to { background-position: 24px 24px } }

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

/* --- Prikkefelt --------------------------------------------------------
 * Bakgrunnen på innmelding/lobby (24px rutenett) og klargjør/podium
 * (28px, større prikker). `.prikkefelt--driv` legger på drift-animasjonen;
 * den utelates på flater som selv skal stå stille (f.eks. klargjør).
 */
.prikkefelt-24 {
  background-color: var(--farge-lerret);
  background-image: radial-gradient(var(--farge-prikk-24) 2px, transparent 2.2px);
  background-size: 24px 24px;
}
.prikkefelt-24.prikkefelt--driv {
  animation: drift 20s linear infinite;
}
.prikkefelt-28 {
  background-color: var(--farge-flate);
  background-image: radial-gradient(var(--farge-prikk-28) 3px, transparent 3.2px);
  background-size: 28px 28px;
}

/* --- Stiplet skillelinje -------------------------------------------------
 * 2px dotted, aldri heltrukket. `--lys` er varianten på fargede flater
 * (fasit-skjermen), der linjen skal være hvit med lav alfa i stedet for
 * kant-blåfargen.
 */
.stiplet-linje {
  border: 0;
  border-top: var(--bredde-linje) dotted var(--farge-linje);
  margin: 0;
}
.stiplet-linje--lys {
  border: 0;
  border-top: var(--bredde-linje) dotted rgba(255, 255, 255, .45);
  margin: 0;
}

/* --- Pilleknapp -----------------------------------------------------------
 * Primær: hvit flate, blå tekst — hovedhandlingen på hver skjerm
 * («Bli med», «Klar», «Forhåndsvis spørsmålet»).
 * Omriss: mørkere flate med kantlinje — sekundærhandling («Spill igjen»).
 * Høyden settes av den som bruker knappen (76px / 72px / 48px i
 * overleveringen) — denne klassen eier bare form og farge, ikke mål,
 * siden trykkflatens høyde er skjermspesifikk.
 */
.knapp-pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pille);
  background: #FFFFFF;
  color: var(--farge-svar-1);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}
.knapp-pille--omriss {
  background: var(--farge-flate);
  color: var(--farge-tekst);
  border: var(--bredde-linje) solid var(--farge-linje);
}

/* --- Felt (input/textarea) -----------------------------------------------
 * Standardfeltet fra admin/innmelding: flate-bakgrunn, kantlinje, radius
 * 14px. Høyde og skriftstørrelse varierer per felt (56px felt vs. 76px
 * kode/kallenavn) og settes av den som bruker klassen.
 */
.felt {
  border: var(--bredde-linje) solid var(--farge-linje);
  border-radius: var(--radius-felt);
  background: var(--farge-flate);
  color: var(--farge-tekst);
  font-family: inherit;
  outline: none;
  width: 100%;
}
.felt::placeholder { color: var(--farge-dempet-2); }

/* --- Merkeskive -----------------------------------------------------------
 * Sirkulær bakgrunn for en spillerfigur (lobby, ledertavle, podium).
 * Figuren selv (SVG) legges inn av figurer.js; denne klassen eier bare
 * den sirkulære fargeflaten og sentreringen. Størrelsen varierer
 * (132px lobby, 40px ledertavle, 88px podium) og settes per bruksted.
 */
.merkeskive {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--radius-pille);
}