/* NOVAX Brawl — menuer og DOM-overlays (WP8). bane-og-ui §7 (menuer), §7.2 (fokus), §7.6 (fejl), §8 (typografi),
   farver fra §2.2 og §4.5 (NOVAX-designguiden). Mål er referencepixels ved 1920×1080 og skaleres med --s
   (= min(bredde/1920, højde/1080), sat af client/ui/screens/dom.js via CSSOM); tekst har minimum 11 px, knaptekst 12 px.
   Skrift efter PO-afgørelsen: local('Poppins') først, derefter Google Fonts-familien "Poppins" (index.html),
   derefter systemfonte. Ingen fontfiler i repoet. */

@font-face { font-family: "Poppins Local"; font-weight: 400; font-display: swap;
  src: local("Poppins Regular"), local("Poppins-Regular"), local("Poppins"); }
@font-face { font-family: "Poppins Local"; font-weight: 600; font-display: swap;
  src: local("Poppins SemiBold"), local("Poppins-SemiBold"); }
@font-face { font-family: "Poppins Local"; font-weight: 700; font-display: swap;
  src: local("Poppins Bold"), local("Poppins-Bold"); }
@font-face { font-family: "Poppins Local"; font-weight: 900; font-display: swap;
  src: local("Poppins Black"), local("Poppins-Black"); }

:root {
  --font: "Poppins Local", "Poppins", "Calibri", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  /* Palet (bane-og-ui §2.2) */
  --novax-blaa: #10546B;
  --novax-moerk: #0D3145;
  --novax-lys: #CFE8F0;
  --novax-gul: #FFD86F;
  --hvid: #FFFFFF;
  --kontur: #0D1B24;
  --graa: #5A5A5A;
  --graa-moerk: #232323;
  --fejl-roed: #FF8A6B;
  --deaktiv: #9AA3A6;
  --moerk-85: rgba(13, 49, 69, 0.85);
  --moerk-60: rgba(13, 49, 69, 0.6);
  --moerk-90: rgba(13, 49, 69, 0.9);
  /* Spillerfarver (§4.5) og tekstfarven oven på dem */
  --p1: #E5392E; --p1-t: var(--hvid);
  --p2: #2463D9; --p2-t: var(--hvid);
  --p3: #FFD23F; --p3-t: var(--kontur);
  --p4: #0F8A50; --p4-t: var(--hvid);
  --p5: #F7941D; --p5-t: var(--kontur);
  --p6: #F2F2F2; --p6-t: var(--kontur);
  --p7: #E07ACD; --p7-t: var(--kontur);
  --p8: #40286F; --p8-t: var(--hvid);
  /* Skala (§8.3) */
  --s: 0.6;
  --u: calc(var(--s) * 1px);
  --fs-logo: max(40px, calc(120 * var(--u)));
  --fs-h1: max(24px, calc(64 * var(--u)));
  --fs-res: max(26px, calc(72 * var(--u)));
  --fs-panel: max(14px, calc(30 * var(--u)));
  --fs-btn: max(12px, calc(34 * var(--u)));
  --fs-body: max(13px, calc(28 * var(--u)));
  --fs-value: max(13px, calc(30 * var(--u)));
  --fs-cap: max(11px, calc(22 * var(--u)));
  --fs-table: max(12px, calc(26 * var(--u)));
  --fs-help: max(11px, calc(22 * var(--u)));
  --fs-err: max(11px, calc(24 * var(--u)));
  --btn-h: max(36px, calc(72 * var(--u)));
  --btn-w: max(180px, calc(360 * var(--u)));
  --gap: max(8px, calc(16 * var(--u)));
  --pad: max(16px, calc(48 * var(--u)));
  --radius: max(6px, calc(14 * var(--u)));
  /* Menukolonnen (PO F3): 620 ref-px = CAMERA_TUNING.menuPanelRef i client/render/camera.js — ret begge sammen. */
  --menu-w: max(310px, calc(620 * var(--u)));
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--novax-moerk); color: var(--hvid); font-family: var(--font); }
#scene { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; }
#ui, .ui { position: fixed; inset: 0; pointer-events: none; font-family: var(--font); color: var(--hvid);
  -webkit-font-smoothing: antialiased; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; font-size: 24px; }
.ui__layers { position: absolute; inset: 0; }

/* ---------------------------------------------------------------- skærme */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; box-sizing: border-box;
  padding: var(--pad) var(--pad) calc(var(--pad) * 0.6); pointer-events: auto; }
.screen--match { pointer-events: none; padding: 0; }
.screen--modal { align-items: center; justify-content: center; }
.screen--modal.dim-55 { background: rgba(13, 49, 69, 0.55); }
.screen--modal.dim-40 { background: rgba(13, 49, 69, 0.40); }
.screen--modal.dim-30 { background: rgba(13, 49, 69, 0.30); }
.screen__head { display: flex; align-items: baseline; gap: calc(var(--gap) * 2); margin-bottom: calc(var(--gap) * 1.5); }
.screen__title { margin: 0; font-weight: 900; font-size: var(--fs-h1); line-height: 1.1; text-transform: uppercase;
  letter-spacing: 0.01em; -webkit-text-stroke: calc(6 * var(--u)) var(--novax-moerk); paint-order: stroke fill; }
.screen__sub { margin: 0; font-size: var(--fs-help); color: var(--novax-lys); }
.screen__aside { margin-left: auto; }
.screen__corner { margin: 0 0 0 auto; font-size: var(--fs-help); color: var(--novax-lys); font-family: var(--mono); }
.screen__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.screen__help { margin: var(--gap) 0 0; font-size: var(--fs-help); line-height: 1.3; color: var(--novax-lys);
  text-shadow: 0 1px 2px var(--kontur); }
.screen--modal .screen__help { position: absolute; left: var(--pad); bottom: calc(var(--pad) * 0.6); margin: 0; }

/* Menukolonnen (PO F3: bygningen er helten). Hovedmenu, Opret rum, Tilslut rum og navnefeltet til direkte links
   står i en kolonne til venstre, der toner ud mod højre; menukameraet (client/render/camera.js) centrerer
   NOVAX-bygningen i resten af skærmen, så facaden og bogstaverne altid er fri. */
.screen.column { right: auto; width: var(--menu-w); padding-right: calc(var(--pad) * 1.1);
  background: linear-gradient(90deg, rgba(13, 49, 69, 0.92) 0%, rgba(13, 49, 69, 0.8) 70%, rgba(13, 49, 69, 0) 100%); }
.screen.column .screen__head { flex-direction: column; align-items: flex-start; gap: calc(var(--gap) * 0.5);
  margin-bottom: calc(var(--gap) * 2); }
.screen.column .screen__body { align-items: stretch; justify-content: center; gap: calc(var(--gap) * 1.25); }
.screen.column .btnwrap { align-items: stretch; }
.screen.column .btn { width: 100%; min-width: 0; justify-content: flex-start; }
.screen.column .row.buttons { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin-top: calc(var(--gap) * 0.5); }
.screen.column .field { grid-template-columns: 1fr; }
.screen.column .field__input { width: 100%; }
.screen.column .text.intro { color: var(--novax-lys); max-width: 30em; }

/* Hovedmenu (§7.3 A): logoet brydes til to linjer (NOVAX / BRAWL) i kolonnen */
.screen--main .screen__head { margin-top: 6vh; }
.screen--main .screen__title.logo { font-size: var(--fs-logo); line-height: 0.95; letter-spacing: 0.02em;
  -webkit-text-stroke: calc(8 * var(--u)) var(--novax-moerk); }
.screen--main .screen__corner { position: absolute; right: calc(var(--pad) * 1.1); bottom: calc(var(--pad) * 0.6); margin: 0; }

/* ---------------------------------------------------------------- paneler og rækker */
.panel { background: var(--moerk-85); border: 2px solid var(--novax-blaa); border-radius: var(--radius);
  padding: calc(var(--gap) * 1.25); box-sizing: border-box; min-width: 0; }
.panel.stack { background: none; border: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap); }
.panel__title { margin: 0 0 var(--gap); font-weight: 700; font-size: var(--fs-panel); line-height: 1.2; }
.panel__body { display: flex; flex-direction: column; gap: calc(var(--gap) * 0.6); }
.row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: flex-start; }
.row.columns { flex-wrap: nowrap; gap: calc(var(--gap) * 2); align-items: stretch; }
.row.columns > .panel { flex: 1 1 0; }
.row.columns > .panel--rules { flex: 0 0 auto; min-width: calc(var(--btn-w) + 4 * var(--gap)); }
.row.buttons { justify-content: center; margin-top: var(--gap); }
.text { margin: 0; font-size: var(--fs-body); line-height: 1.35; }
.text.note, .text.explain, .text.hint, .text.status, .text.rule { font-size: var(--fs-help); color: var(--novax-lys); line-height: 1.3; }
.text.small { font-size: max(11px, calc(20 * var(--u))); }
.text.status { color: var(--novax-gul); font-weight: 600; }
.text.inline-error { color: var(--fejl-roed); font-size: var(--fs-err); font-weight: 600; }
.line { display: flex; align-items: center; gap: calc(var(--gap) * 0.75); font-size: var(--fs-body); min-height: calc(var(--btn-h) * 0.72); }
.part.name { font-weight: 600; }
.part.tag { font-size: var(--fs-help); font-weight: 600; color: var(--novax-lys); }
.part.tag.host, .part.tag.you { color: var(--novax-gul); }
.part.tag.ready { color: #8FE3A5; }
.part.tag.warn { color: var(--fejl-roed); }
.part.hint { font-size: var(--fs-help); color: var(--novax-lys); margin-left: auto; }
.part.empty { color: var(--deaktiv); }
.part.flag { font-size: var(--fs-help); color: var(--novax-lys); margin-left: calc(var(--gap) * 0.5); }

/* P-mærker (§4.2: fyld = spillerfarve, tekst i farvens tekstfarve) */
.pbadge { display: inline-grid; place-items: center; min-width: calc(40 * var(--u) + 12px); height: max(18px, calc(28 * var(--u)));
  border-radius: 6px; font-weight: 900; font-size: max(11px, calc(18 * var(--u))); border: 2px solid var(--kontur); }
.pbadge.p1 { background: var(--p1); color: var(--p1-t); } .pbadge.p2 { background: var(--p2); color: var(--p2-t); }
.pbadge.p3 { background: var(--p3); color: var(--p3-t); } .pbadge.p4 { background: var(--p4); color: var(--p4-t); }
.pbadge.p5 { background: var(--p5); color: var(--p5-t); } .pbadge.p6 { background: var(--p6); color: var(--p6-t); }
.pbadge.p7 { background: var(--p7); color: var(--p7-t); } .pbadge.p8 { background: var(--p8); color: var(--p8-t); }
.slot { padding: 0 calc(var(--gap) * 0.75); border-radius: calc(var(--radius) * 0.6); }
.slot.mine { box-shadow: inset 0 0 0 2px var(--hvid); }

/* ---------------------------------------------------------------- knapper og vælgere (§7.2-tabellen) */
.btnwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.btnwrap--slot { align-items: stretch; }
.btn, .select { position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--gap) * 0.75); box-sizing: border-box; height: var(--btn-h); min-width: var(--btn-w);
  padding: 0 calc(var(--gap) * 2); border: 2px solid var(--novax-blaa); border-radius: var(--radius);
  background: var(--moerk-85); color: var(--hvid); font-family: var(--font); font-weight: 700; font-size: var(--fs-btn);
  line-height: 1; cursor: pointer; outline: none; transition: transform 80ms ease-out; }
.btn.slot, .select.slot { min-width: 0; width: 100%; justify-content: flex-start; height: calc(var(--btn-h) * 0.8);
  font-size: var(--fs-body); padding: 0 calc(var(--gap) * 0.75); }
.btn.is-focus, .select.is-focus, .btn:focus-visible, .select:focus-visible { background: var(--novax-blaa); font-weight: 900;
  outline: calc(4 * var(--u) + 1px) solid var(--novax-gul); outline-offset: calc(3 * var(--u) + 1px); transform: scale(1.03); }
.btn.is-focus::before, .select.is-focus::before { content: "▶"; position: absolute; left: calc(var(--gap) * -2.2);
  color: var(--novax-gul); font-size: max(12px, calc(24 * var(--u))); font-weight: 900; }
.btn.slot.is-focus::before, .select.slot.is-focus::before { left: calc(var(--gap) * -1.6); }
.btn[aria-disabled="true"] { background: var(--moerk-60); border-color: var(--graa); color: var(--deaktiv); }
.btn[aria-disabled="true"].is-focus { background: var(--moerk-60); }
.btn__reason { font-size: var(--fs-help); color: var(--novax-lys); max-width: calc(var(--btn-w) * 1.4); text-align: center; }
.btn.primary { border-width: 3px; }
.select__label { margin-right: auto; font-weight: 700; }
.select__value { min-width: 4ch; text-align: center; font-weight: 600; font-size: var(--fs-value); }
.select__arrow { color: var(--novax-lys); font-size: 0.8em; }
.select.is-focus .select__arrow { color: var(--novax-gul); }
.select.is-min .select__arrow--prev, .select.is-max .select__arrow--next { opacity: 0.3; }
.select--layout { min-width: calc(var(--btn-w) * 1.3); }

/* ---------------------------------------------------------------- tekstfelter (§7.3 C/D) */
.field { display: grid; grid-template-columns: max-content auto; align-items: center; column-gap: calc(var(--gap) * 1.5);
  row-gap: 6px; font-size: var(--fs-body); }
.field__label { font-weight: 600; }
.field__box { position: relative; display: inline-block; }
.field__input { box-sizing: border-box; height: var(--btn-h); width: calc(var(--btn-w) * 1.1); padding: 0 var(--gap);
  border: 2px solid var(--novax-blaa); border-radius: var(--radius); background: var(--moerk-85); color: var(--hvid);
  font-family: var(--font); font-size: var(--fs-value); font-weight: 600; outline: none; }
.field__input.is-focus, .field__input:focus-visible { outline: calc(4 * var(--u) + 1px) solid var(--novax-gul);
  outline-offset: calc(3 * var(--u) + 1px); background: var(--novax-blaa); }
.field__input[readonly] { color: var(--deaktiv); border-color: var(--graa); }
.field__hint, .field__error { grid-column: 2; font-size: var(--fs-help); line-height: 1.3; color: var(--novax-lys); }
.field__error { color: var(--fejl-roed); font-size: var(--fs-err); font-weight: 600; }
.field--warn .field__hint { color: var(--novax-gul); }
.field__box--code .field__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; caret-color: transparent; }
.codeboxes { display: inline-flex; gap: calc(var(--gap) * 0.5); }
.codebox { display: inline-grid; place-items: center; box-sizing: border-box; width: var(--btn-h); height: var(--btn-h);
  border: 2px solid var(--novax-blaa); border-radius: calc(var(--radius) * 0.7); background: var(--moerk-85);
  font-weight: 900; font-size: var(--fs-value); font-family: var(--font); }
.field__input.is-focus + .codeboxes .codebox { border-color: var(--novax-lys); }
.field__input.is-focus + .codeboxes .codebox.is-next { outline: calc(4 * var(--u) + 1px) solid var(--novax-gul);
  outline-offset: 2px; background: var(--novax-blaa); }
.field.shake .field__box { animation: shake 100ms linear; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.link { box-sizing: border-box; width: 100%; height: calc(var(--btn-h) * 0.7); padding: 0 var(--gap); border: 2px solid var(--novax-gul);
  border-radius: var(--radius); background: var(--kontur); color: var(--hvid); font-family: var(--mono); font-size: var(--fs-help); }

/* ---------------------------------------------------------------- lobby (§7.3 B/E) */
.screen--bots .screen__body, .screen--lobby .screen__body { justify-content: center; }
.panel--fighters .panel__body { gap: calc(var(--gap) * 0.35); }
.panel--rules .panel__body { align-items: stretch; gap: var(--gap); }
.panel--rules .field { grid-template-columns: 1fr; }
.panel--rules .field__hint, .panel--rules .field__error, .screen.column .field__hint, .screen.column .field__error { grid-column: 1; }
.panel--rules .field__input { width: 100%; }
.panel--rules .select, .panel--rules .btn { width: 100%; }

/* ---------------------------------------------------------------- M2: figurvalget (grafik §4.2–§4.4, m2-spec §5)
   Lobby-skærmen er figurvalget: gitter (v2: 4 + 4 = syv figurer + Tilfældig) og spillerkort til venstre, forhåndsvisning og opsætning
   til højre. Mål i referencepixels × --u. Canvas-portrætterne (.art) får deres mål som --aw/--ah (CSSOM, CSP). */
.art { display: block; width: calc(var(--aw, 64) * var(--u)); height: calc(var(--ah, 64) * var(--u)); flex: 0 0 auto; }
.box { min-width: 0; }
.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.screen.figsel .screen__body { justify-content: flex-start; }
.figsel__cols { display: flex; gap: calc(40 * var(--u)); align-items: flex-start; flex: 1 1 auto; min-height: 0; }
.figsel__left { flex: 0 0 calc(800 * var(--u)); display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.figsel__right { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(24 * var(--u)); min-width: 0; }
.text.picking { font-weight: 700; font-size: var(--fs-panel); color: var(--novax-gul); }
.grid { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.grid.is-dim { opacity: 0.5; }
.grid__row { display: flex; gap: calc(16 * var(--u)); }
.btn.cell, .line.cell { position: relative; flex: 0 0 calc(188 * var(--u)); min-width: 0; width: calc(188 * var(--u));
  height: calc(200 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); box-sizing: border-box; display: grid;
  grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto; align-items: center; justify-items: start;
  column-gap: calc(8 * var(--u)); row-gap: 2px; background: var(--moerk-85); border: 2px solid var(--novax-blaa);
  border-radius: var(--radius); font-size: max(11px, calc(26 * var(--u))); font-weight: 600; }
.btn.cell .cell__art { grid-column: 1 / 3; grid-row: 1; justify-self: center; }
.btn.cell .btn__label, .line.cell .cell__name { grid-column: 1 / 3; grid-row: 2; font-weight: 600; }
.part.cell__icon, .cell__icon { grid-column: 1; grid-row: 3; }
.part.cell__arch { grid-column: 2; grid-row: 3; font-weight: 400; font-size: max(11px, calc(20 * var(--u))); color: var(--novax-lys); }
.btn.cell.is-focus .cell__arch { color: var(--novax-gul); }
/* Låste figurer ("Kommer snart", 2026-10-06): gråtonet buste og et gult mærke; kan fokuseres, men ikke vælges. */
.btn.cell.is-locked .cell__art, .line.cell.is-locked .cell__art { filter: grayscale(1) brightness(0.6); }
.btn.cell.is-locked .btn__label, .line.cell.is-locked .cell__name { color: var(--deaktiv); }
.btn.cell.is-locked { border-style: dashed; border-color: var(--graa); }
/* Mærket står som et skråt stempel over portrættet, så navnet (også på to linjer) har sin plads. */
.part.cell__soon { position: absolute; left: 50%; top: calc(64 * var(--u)); transform: translate(-50%, -50%) rotate(-8deg);
  white-space: nowrap; padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u));
  background: var(--novax-gul); color: var(--kontur); border: 2px solid var(--kontur); font-weight: 700;
  font-size: max(10px, calc(20 * var(--u))); text-transform: uppercase; letter-spacing: 0.04em; pointer-events: none; }
/* Knapperne står i en .btnwrap (dom.js); Tilfældig fylder resten af rækken (2/3, når Testdukken står ved siden af). */
.grid__row > .btnwrap, .cards__row > .btnwrap { flex: 0 0 auto; }
.grid__row--last > .btnwrap:first-child { flex: 1 1 auto; align-items: stretch; }
/* .btnwrap er en kolonne-flexboks: dér er flex-basis HØJDEN. Cellernes/kortenes `flex: 0 0 <bredde>` (til rækkerne)
   gjorde derfor knapperne lige så høje som brede (celle 256 × 256 i stedet for 256 × 200, Testdukken 256 høj), og
   spillerkortene P5–P8 faldt ud under skærmen ved 1280 × 720 og 1920 × 1080 (TL-røgtest, testbuild 1). */
.btnwrap > .btn.cell, .btnwrap > .btn.card { flex: 0 0 auto; }
.grid__row--last > .btnwrap:first-child > .btn.cell--random { flex: 1 1 auto; }
/* Testdukken (kun ?debug) står i en lav celle ved siden af Tilfældig: lille buste, navnet ved siden af. */
.btn.cell--dummy .cell__art, .line.cell--dummy .cell__art { width: calc(80 * var(--u)); height: calc(48 * var(--u)); }
.btn.cell--dummy, .line.cell--dummy { align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); }
.btn.cell--dummy .btn__label, .line.cell--dummy .cell__name { font-size: max(11px, calc(20 * var(--u))); }
.btn.cell--random, .line.cell--random { justify-items: center; }
.btn.cell--random .btn__label, .line.cell--random .cell__name { justify-self: center; }
.part.cell__sub { grid-column: 1 / 3; grid-row: 3; justify-self: center; }
.btn.cell--dummy, .line.cell--dummy { flex: 0 0 calc(256 * var(--u)); height: calc(64 * var(--u)); display: flex; }
.btn.cell--random .btn__label { font-size: max(11px, calc(26 * var(--u))); }
.part.cell__sub { font-weight: 400; font-size: max(11px, calc(22 * var(--u))); color: var(--novax-lys); }
.part.chip { position: static; display: inline-grid; place-items: center; min-width: calc(28 * var(--u) + 6px);
  height: max(14px, calc(18 * var(--u))); border-radius: 4px; font-weight: 900; font-size: max(10px, calc(13 * var(--u))); }
/* Valg-mærkerne står øverst til højre fra højre mod venstre. I en knap er markøren (P1▸) det sidste <span>, i en
   dæmpet linje er der ingen markør; derfor tælles fra enden med og uden én. */
.btn.cell .part.chip, .line.cell .part.chip { position: absolute; top: calc(8 * var(--u)); --cw: calc(32 * var(--u) + 8px); }
.btn.cell .part.chip:nth-last-of-type(2), .line.cell .part.chip:nth-last-of-type(1) { right: calc(8 * var(--u)); }
.btn.cell .part.chip:nth-last-of-type(3), .line.cell .part.chip:nth-last-of-type(2) { right: calc(8 * var(--u) + var(--cw)); }
.btn.cell .part.chip:nth-last-of-type(4), .line.cell .part.chip:nth-last-of-type(3) { right: calc(8 * var(--u) + 2 * var(--cw)); }
.btn.cell .part.chip:nth-last-of-type(5), .line.cell .part.chip:nth-last-of-type(4) { right: calc(8 * var(--u) + 3 * var(--cw)); }
.btn.cell .part.chip:nth-last-of-type(6), .line.cell .part.chip:nth-last-of-type(5) { right: calc(8 * var(--u) + 4 * var(--cw)); }
.btn.cell--random .part.chip, .line.cell--random .part.chip { position: static; }
.part.chip.p1, .part.marker.p1 { background: var(--p1); color: var(--p1-t); } .part.chip.p2, .part.marker.p2 { background: var(--p2); color: var(--p2-t); }
.part.chip.p3, .part.marker.p3 { background: var(--p3); color: var(--p3-t); } .part.chip.p4, .part.marker.p4 { background: var(--p4); color: var(--p4-t); }
.part.chip.p5, .part.marker.p5 { background: var(--p5); color: var(--p5-t); } .part.chip.p6, .part.marker.p6 { background: var(--p6); color: var(--p6-t); }
.part.chip.p7, .part.marker.p7 { background: var(--p7); color: var(--p7-t); } .part.chip.p8, .part.marker.p8 { background: var(--p8); color: var(--p8-t); }
.part.chip.more { background: var(--novax-lys); color: var(--kontur); }
.part.marker { display: none; position: absolute; left: calc(-6 * var(--u)); top: calc(-10 * var(--u)); padding: 0 6px;
  min-width: calc(44 * var(--u)); height: max(16px, calc(26 * var(--u))); border-radius: 6px; font-weight: 900;
  font-size: max(11px, calc(16 * var(--u))); border: 2px solid var(--kontur); place-items: center; }
.btn.cell.is-focus .part.marker { display: inline-grid; }
.btn.cell.is-focus::before { content: none; }
.cards { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.cards__row { display: flex; gap: calc(12 * var(--u)); }
.btn.card, .line.card { position: relative; flex: 0 0 calc(196 * var(--u)); width: calc(196 * var(--u)); min-width: 0;
  height: calc(128 * var(--u)); padding: calc(10 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); box-sizing: border-box;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr 1fr 1fr; column-gap: calc(8 * var(--u));
  align-items: center; justify-items: start; background: var(--moerk-85); border: 2px solid var(--novax-blaa);
  border-radius: calc(var(--radius) * 0.7); font-size: max(11px, calc(20 * var(--u))); font-weight: 600; overflow: hidden; }
.btn.card::after, .line.card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(6 * var(--u)); background: var(--pc, var(--novax-lys)); }
.card.p1 { --pc: var(--p1); } .card.p2 { --pc: var(--p2); } .card.p3 { --pc: var(--p3); } .card.p4 { --pc: var(--p4); }
.card.p5 { --pc: var(--p5); } .card.p6 { --pc: var(--p6); } .card.p7 { --pc: var(--p7); } .card.p8 { --pc: var(--p8); }
.card .pbadge { grid-column: 1 / 3; grid-row: 1; }
.card .card__art { grid-column: 1; grid-row: 2 / 5; }
.btn.card .btn__label, .line.card .fname { grid-column: 2; grid-row: 2; font-weight: 600; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.card .part.pname { grid-column: 2; grid-row: 3; font-weight: 400; font-size: max(11px, calc(18 * var(--u))); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .part.status { grid-column: 2; grid-row: 4; font-size: max(10px, calc(16 * var(--u))); font-weight: 600; color: var(--novax-lys); }
.card .part.status.host, .card .part.status.you { color: var(--novax-gul); }
.card .part.status.ready { color: #8FE3A5; }
.card .part.status.warn { color: var(--fejl-roed); }
.card.mine { box-shadow: inset 0 0 0 3px var(--hvid); }
.btn.card--add { display: flex; flex-direction: column; justify-content: center; border-style: dashed; border-color: var(--novax-lys); }
.btn.card--add .part.plus { font-weight: 900; font-size: max(16px, calc(40 * var(--u))); line-height: 1; }
.btn.card--add .btn__label { font-size: max(11px, calc(18 * var(--u))); }
.line.card--empty { display: flex; justify-content: center; opacity: 0.5; }
.btn.card.is-focus::before { content: none; }
.preview { position: relative; display: flex; gap: calc(24 * var(--u)); height: calc(496 * var(--u)); box-sizing: border-box;
  padding: calc(16 * var(--u)) calc(24 * var(--u)); background: var(--moerk-85); border: 2px solid var(--novax-blaa);
  border-radius: calc(16 * var(--u)); overflow: hidden; }
.preview__text { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-width: 0; padding-top: calc(16 * var(--u)); }
.text.pv-name { font-weight: 900; font-size: max(20px, calc(56 * var(--u))); line-height: 1.05; text-transform: uppercase; }
.line.pv-role { min-height: 0; font-weight: 700; font-size: max(13px, calc(28 * var(--u))); color: var(--novax-lys); }
.text.pv-tag { font-size: max(12px, calc(26 * var(--u))); }
/* Valgfri figurbeskrivelse (TESO-TASTIC): står på taglinens plads; tættere linjeafstand i hele tekstkolonnen, så
   beskrivelsen (3 linjer) og de fire specials kan være i den faste forhåndsvisning ved 1920 × 1080 og 960 × 540. */
.preview__text.has-desc { gap: calc(5 * var(--u)); }
.text.pv-desc { font-size: max(11px, calc(20 * var(--u))); line-height: 1.2; color: var(--hvid); flex-shrink: 0; }
.has-desc .part.mname { white-space: nowrap; }
.has-desc .line.pv-spec { margin-top: calc(4 * var(--u)); }
.has-desc .line.pv-traits { margin-top: calc(2 * var(--u)); }
.text.pv-note { font-size: var(--fs-help); color: var(--novax-lys); }
.line.pv-spec { min-height: 0; margin-top: calc(12 * var(--u)); gap: calc(8 * var(--u)); }
.part.pv-h { font-weight: 700; font-size: max(11px, calc(22 * var(--u))); color: var(--novax-lys); text-transform: uppercase; }
.part.pv-hint { font-size: max(11px, calc(20 * var(--u))); color: var(--novax-lys); font-weight: 400; }
.line.pv-move { min-height: 0; gap: calc(12 * var(--u)); }
.part.dir { min-width: calc(32 * var(--u)); font-weight: 900; font-size: max(13px, calc(26 * var(--u))); color: var(--novax-gul); }
.part.mname { font-weight: 600; font-size: max(12px, calc(26 * var(--u))); }
.part.mtip { font-weight: 400; font-size: max(11px, calc(22 * var(--u))); color: var(--novax-lys); }
.line.pv-traits { min-height: 0; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.part.trait { display: inline-grid; place-items: center; height: max(18px, calc(34 * var(--u))); padding: 0 calc(14 * var(--u));
  border: 2px solid var(--novax-blaa); border-radius: 999px; background: var(--novax-moerk); font-weight: 600;
  font-size: max(11px, calc(20 * var(--u))); }
.setup { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.setup .select, .setup .field__input { width: 100%; }
.setup .select--alt { min-width: calc(520 * var(--u)); justify-content: flex-start; }
.setup .row.buttons { justify-content: flex-start; margin-top: 0; }
.setup .field { grid-template-columns: max-content 1fr; }
.part.swatch { display: inline-grid; place-items: end center; width: max(10px, calc(20 * var(--u))); height: max(10px, calc(20 * var(--u)));
  border: 2px solid var(--kontur); border-radius: 3px; background: var(--c, var(--novax-lys)); color: var(--novax-gul);
  font-size: max(8px, calc(12 * var(--u))); line-height: 0; }
.part.swatch.is-sel { outline: 3px solid var(--novax-gul); outline-offset: 1px; }
.part.swatch.is-taken { opacity: 0.35; background-image: linear-gradient(135deg, transparent 45%, var(--kontur) 45%, var(--kontur) 55%, transparent 55%); }
.select.is-random .part.swatch, .select[aria-disabled="true"] .part.swatch { display: none; }
.select--alt .select__value { min-width: 12ch; }

/* Kortmenuen (grafik §4.3): modal dialog, dæmper 30 % */
.dialog.cardmenu { align-items: stretch; min-width: calc(var(--btn-w) * 1.8); border-top: 6px solid var(--pc, var(--novax-blaa)); }
.dialog.cardmenu.p1 { --pc: var(--p1); } .dialog.cardmenu.p2 { --pc: var(--p2); } .dialog.cardmenu.p3 { --pc: var(--p3); }
.dialog.cardmenu.p4 { --pc: var(--p4); } .dialog.cardmenu.p5 { --pc: var(--p5); } .dialog.cardmenu.p6 { --pc: var(--p6); }
.dialog.cardmenu.p7 { --pc: var(--p7); } .dialog.cardmenu.p8 { --pc: var(--p8); }
.dialog.cardmenu .dialog__body { align-items: stretch; }
.dialog.cardmenu .btn, .dialog.cardmenu .select { width: 100%; justify-content: flex-start; }
.dialog.cardmenu .part.value { margin-left: auto; font-weight: 600; color: var(--novax-lys); }

/* Galleriet (?debug&galleri): canvas'et er under; skærmen har kun titel og hjælpelinje */
.screen--gallery { pointer-events: none; }

/* ---------------------------------------------------------------- styring (§7.3 F) */
.screen--controls { background: rgba(13, 49, 69, 0.55); }
.screen--controls .screen__body { gap: calc(var(--gap) * 0.6); }
.ctrl-row { min-height: 0; gap: calc(var(--gap) * 0.5); font-size: var(--fs-help); }
.ctrl-row .part.action { min-width: calc(330 * var(--u)); color: var(--novax-lys); }
.part.cap, .cap { display: inline-grid; place-items: center; min-width: 2.2em; padding: 2px 8px; box-sizing: border-box;
  border: 2px solid var(--novax-lys); border-radius: 8px; font-weight: 600; font-size: var(--fs-cap); font-family: var(--font);
  background: var(--kontur); color: var(--hvid); }
.part.cap.lit, .cap.lit { background: var(--novax-gul); color: var(--kontur); border-color: var(--novax-gul); }
.part.extra { font-size: var(--fs-cap); color: var(--novax-lys); }
.keycaps { display: flex; flex-wrap: wrap; gap: calc(var(--gap) * 0.6); }
.keycaps .cap { min-width: 3em; height: max(24px, calc(48 * var(--u))); }
.screen--controls .btnwrap { align-self: center; }

/* ---------------------------------------------------------------- resultat (§7.4) */
.screen--results .screen__head { justify-content: center; }
.screen--results .screen__title { font-size: var(--fs-res); text-transform: none; }
.screen--results .screen__body { align-items: center; }
.table.results { border-collapse: collapse; font-size: var(--fs-table); line-height: 1.4; background: var(--moerk-85);
  border-radius: var(--radius); min-width: 60%; }
.table.results th, .table.results td { padding: calc(var(--gap) * 0.4) calc(var(--gap) * 1.2); text-align: left; }
.table.results th { color: var(--novax-lys); font-weight: 600; border-bottom: 2px solid var(--novax-blaa); }
.table.results .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.table.results tr.mine td { background: rgba(16, 84, 107, 0.6); }
/* M2 (grafik §5.5): undertitel, portræt (d 40) og figurens navn i spillercellen; sejrsscenen er på canvas til højre */
.screen--results .screen__head { flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.screen--results .screen__sub { font-size: max(13px, calc(28 * var(--u))); color: var(--hvid); }
.screen--results .screen__body { align-items: flex-start; padding-left: calc(80 * var(--u)); max-width: calc(920 * var(--u)); }
.table.results td.player { display: grid; grid-template-columns: auto auto 1fr; column-gap: calc(10 * var(--u)); align-items: center; }
.table.results td.player .res__art { grid-row: 1 / 3; }
.table.results td.player .part.fname { grid-column: 2 / 4; font-weight: 400; font-size: max(11px, calc(20 * var(--u))); color: var(--novax-lys); }

/* ---------------------------------------------------------------- dialoger og fejlbokse (§7.3 G/H, §7.6) */
.dialog { display: flex; flex-direction: column; align-items: center; gap: var(--gap); min-width: calc(var(--btn-w) * 1.6);
  max-width: 70vw; padding: calc(var(--gap) * 2) calc(var(--gap) * 3); background: var(--moerk-90);
  border: 2px solid var(--novax-blaa); border-radius: calc(var(--radius) * 1.3); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45); }
.dialog__title { margin: 0; font-weight: 900; font-size: var(--fs-h1); text-transform: uppercase; text-align: center; }
.dialog__text { margin: 0; font-size: var(--fs-body); text-align: center; color: var(--novax-lys); }
.text.dialog__extra { color: var(--novax-lys); text-align: center; }
.dialog__body { display: flex; flex-direction: column; align-items: center; gap: var(--gap); }
.dialog.error .dialog__title, .dialog.lost .dialog__title, .dialog.confirm .dialog__title { font-size: var(--fs-res); text-transform: none; }

/* ---------------------------------------------------------------- beskeder, "Synkroniserer …", for lille vindue */
.ui__toasts { position: absolute; top: max(12px, calc(24 * var(--u))); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: max(6px, calc(8 * var(--u))); pointer-events: none; }
.toast { box-sizing: border-box; max-width: min(90vw, calc(640 * var(--u) + 120px)); min-height: max(28px, calc(48 * var(--u)));
  padding: 0 calc(var(--gap) * 1.25) 0 calc(var(--gap) * 1.25 + 6px); display: flex; align-items: center;
  background: var(--moerk-90); border-radius: 999px; font-weight: 600; font-size: var(--fs-help); color: var(--hvid);
  border-left: 6px solid var(--novax-lys); animation: toast 4000ms linear forwards; }
.toast.p1 { border-left-color: var(--p1); } .toast.p2 { border-left-color: var(--p2); } .toast.p3 { border-left-color: var(--p3); }
.toast.p4 { border-left-color: var(--p4); } .toast.p5 { border-left-color: var(--p5); } .toast.p6 { border-left-color: var(--p6); }
.toast.p7 { border-left-color: var(--p7); } .toast.p8 { border-left-color: var(--p8); }
@keyframes toast { 0% { opacity: 0; } 3.3% { opacity: 1; } 91.7% { opacity: 1; } 100% { opacity: 0; } }
.ui__notice { display: none; position: absolute; right: var(--pad); top: var(--pad); padding: 8px 16px; border-radius: 999px;
  background: var(--moerk-90); font-weight: 600; font-size: var(--fs-help); }
.ui__notice.is-on { display: block; }
.ui__blocker { display: none; position: absolute; inset: 0; place-items: center; padding: 24px; box-sizing: border-box;
  background: var(--novax-moerk); font-size: 20px; font-weight: 700; text-align: center; pointer-events: auto; }
.ui__blocker.is-on { display: grid; }

@media (prefers-reduced-motion: reduce) {
  .btn, .select { transition: none; }
  .btn.is-focus, .select.is-focus, .btn:focus-visible, .select:focus-visible { transform: none; }
  .field.shake .field__box { animation: none; }
  .toast { animation: none; }
  .btn.cell.is-focus, .btn.card.is-focus { transform: none; }
}