/* =========================================================
   GULDALDER  –  Spillebræt (tablet/desktop, landskab)
   ========================================================= */

.hidden { display: none !important; }

/* ── Baggrund: mørkt, varmt spillebord i stedet for fladt sort ──────────
   Kun body-BAGGRUNDEN ændres her — kort og paneler beholder deres
   nuværende mørke --surface-farve og er derfor stadig fuldt læsbare oven på
   teksturen (de er uigennemsigtige bokse, ikke transparente). Rent CSS,
   ingen billedfil: en varm brun/oliven grundfarve, et par svage diagonale
   "årer"-striber der antyder træ, en lys plet foroven-venstre for dybde,
   og en vignet der gør hjørnerne en anelse mørkere. */
body {
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(8, 6, 3, 0.55) 100%),
    repeating-linear-gradient(95deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 6px),
    radial-gradient(ellipse at 18% 15%, rgba(120, 95, 50, 0.16), transparent 55%),
    linear-gradient(155deg, #322818 0%, #241c11 45%, #191309 100%);
  background-attachment: fixed;
}

/* ── Landing (opret/deltag) ───────────────────────────────── */
.ga-landing {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.ga-landing h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 6px;
}
.ga-landing .subtitle {
  text-align: center;
  color: var(--subtext);
  margin-bottom: 4px;
}
.ga-tablet-hint {
  text-align: center;
  color: var(--subtext);
  font-size: 0.8rem;
  margin-bottom: 24px;
}
.ga-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.ga-panel h3 {
  font-size: 0.95rem;
  letter-spacing: 1px;
  margin-bottom: 14px;
  color: var(--text);
}
.ga-rules ul { padding-left: 20px; color: var(--subtext); font-size: 0.85rem; line-height: 1.7; }
.ga-form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.ga-form-row > div { flex: 1; min-width: 140px; }
.ga-label { font-size: 0.75rem; color: var(--subtext); margin-bottom: 6px; }
.ga-input {
  width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 0.95rem;
}
.ga-input:focus { border-color: #d4af37; outline: none; }
.ga-input-code { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-weight: 700; }
.ga-chips { display: flex; gap: 8px; }
.ga-chip {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: 0.85rem; color: var(--subtext);
}
.ga-chip.selected { border-color: #d4af37; color: var(--text); background: rgba(212,175,55,0.12); }
.btn-ga-primary {
  padding: 11px 20px; border-radius: var(--radius); border: none; background: #d4af37; color: #1a1408;
  font-weight: 700; cursor: pointer; font-size: 0.9rem;
}
.btn-ga-primary:hover:not(:disabled) { opacity: 0.88; }
.btn-ga-primary:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-ga-secondary {
  padding: 11px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent;
  color: var(--text); font-weight: 600; cursor: pointer; font-size: 0.9rem;
}
.btn-ga-new { background: #d4af37; color: #1a1408; border-radius: var(--radius); font-weight: 700; }

/* ── Mobil-advarsel ────────────────────────────────────────── */
.ga-mobil-advarsel {
  display: none;
  text-align: center;
  padding: 60px 24px;
  color: var(--subtext);
}
.ga-mobil-advarsel p:first-child { font-size: 1.1rem; color: var(--text); margin-bottom: 8px; }

@media (max-width: 899px) {
  #ga-main { display: none; }
  .ga-mobil-advarsel { display: block; }
}

/* ── Lobby ─────────────────────────────────────────────────── */
.ga-game-wrap { max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; width: 100%; }

/* Kun mens selve spillebrættet vises (ikke lobby/slutskærm) låses siden til
   fuld viewport-højde uden scroll, og pladsen fordeles i to-kolonne layout —
   se .ga-game-screen herunder. body.ga-playing sættes af show() i guldalder.js. */
body.ga-playing { height: 100dvh; overflow: hidden; }
body.ga-playing .ga-game-wrap {
  flex: 1 1 auto; min-height: 0; max-width: 1700px;
  display: flex; flex-direction: column; padding: 44px 16px 12px; overflow: hidden;
}

/* Den brede bannerbjælke ("GULDALDER" + dato) skjules mens man spiller for
   at spare lodret plads — men selve <header> beholdes i DOM'en (nu svævende,
   taget ud af dokumentflowet) så burger-knappen og navigationsmenuen stadig
   virker som normalt, bare placeret i hjørnet oven på spilpladen i stedet
   for i en fuld bred bjælke. "GULDALDER"-navnet vises i stedet i det
   modsatte hjørne via .ga-brand-label (se nedenfor). */
body.ga-playing header {
  position: fixed; top: 0; right: 0; left: auto; width: 230px; min-height: 52px;
  background: transparent; border-bottom: none; padding: 8px 12px 0; z-index: 60;
}
body.ga-playing .game-nav.aaben {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
body.ga-playing .header-inner { display: none; }

.ga-brand-label {
  display: none;
}
body.ga-playing .ga-brand-label {
  display: block; position: fixed; top: 16px; left: 20px; z-index: 55;
  font-size: 0.95rem; font-weight: 800; letter-spacing: 3px; color: #d4af37;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7); pointer-events: none;
}

/* Tur-banneret flyttes op i den øverste stribe, imellem "GULDALDER"-navnet
   (venstre) og burger-menuen (højre) — smallere end før, i stedet for en
   fuld bred bjælke i selve spillets flow. Tages ud af .ga-topbar's
   dokumentflow (position:fixed), så det heller ikke længere fylder i
   højden dér. */
body.ga-playing .ga-turn-banner {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 55;
  width: max-content; max-width: 300px; padding: 5px 14px; font-size: 0.8rem;
}
.ga-game-screen {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; flex-direction: column; gap: 6px;
}
.ga-topbar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.ga-main-area {
  flex: 1 1 auto; min-height: 0;
  /* Sidebar 400px bred (350px → 400px) — markedet (og dermed tier-kort-
     rækkerne) bliver tilsvarende 50px smallere, da det er minmax(0, 1fr). */
  display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 4px;
}
.ga-market {
  min-height: 0; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.025), transparent 70%);
  border-radius: 12px; padding: 4px;
  /* Markedets grid-kolonne er minmax(0, 1fr) — på brede skærme er den langt
     bredere end de 4 kort + dæk reelt fylder, og DET overskydende rum var
     hele tiden den dominerende kilde til de store afstande (fordelt via
     .ga-tier-cards' centrering) — de små faste gap-værdier ovenfor var kun
     en lille ekstra tilføjelse oveni og gjorde derfor ingen mærkbar forskel.
     Loft på bredden + skub til højre (mod sidebaren) flytter det ledige rum
     ud til venstre i stedet, så kortene reelt ligger tæt på dæk og sidebar. */
  max-width: 760px; justify-self: end;
}
.ga-sidebar {
  min-height: 0; overflow-y: auto; padding-right: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.ga-lobby { max-width: 480px; margin: 40px auto; text-align: center; }
.ga-lobby-title { font-size: 1.3rem; font-weight: 800; letter-spacing: 1px; margin-bottom: 20px; }
.ga-code-display {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px; cursor: pointer;
}
.ga-code-label { font-size: 0.75rem; color: var(--subtext); margin-bottom: 8px; }
.ga-code-value { font-size: 2.4rem; font-weight: 800; letter-spacing: 6px; color: #d4af37; }
.ga-code-hint { font-size: 0.7rem; color: var(--subtext); margin-top: 8px; }
.ga-player-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ga-player-row {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; text-align: left;
}
.ga-player-row.me { border-color: #d4af37; }
.ga-order {
  width: 22px; height: 22px; border-radius: 50%; background: var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.ga-waiting-msg { color: var(--subtext); font-size: 0.85rem; margin-bottom: 14px; }
.btn-ga-start {
  width: 100%; padding: 14px; border-radius: var(--radius); border: none; background: #d4af37;
  color: #1a1408; font-weight: 800; font-size: 1rem; cursor: pointer;
}
.btn-ga-start:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Turn banner + toast ──────────────────────────────────── */
.ga-turn-banner {
  text-align: center; padding: 8px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); font-size: 0.9rem; color: var(--subtext);
}
.ga-turn-banner.my-turn { border-color: #d4af37; color: var(--text); }
.ga-turn-banner .highlight { color: #d4af37; font-weight: 700; }
.ga-toast-area { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 50; }
.ga-toast {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 18px; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.ga-toast.show { opacity: 1; }

/* ── Adelskort — bredt/fladt vandret format i stedet for høje kort, så
   de fylder mindst muligt i højden: pointtal + navn/krav side om side. ─── */
.ga-nobles { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ga-noble {
  /* Yderligere 10% større (91px → 100px) */
  width: 100px; flex: 0 0 auto; background: linear-gradient(145deg,#2a2010,#1a1408); border: 1px solid #d4af37;
  border-radius: var(--radius); padding: 8px; text-align: center;
  background-size: cover; background-position: center;
}
.ga-noble-points { font-size: 1.39rem; font-weight: 800; color: #d4af37; }
.ga-noble-navn { font-size: 0.9rem; margin: 3px 0; line-height: 1.2; }
/* Fast (ikke-responsiv) ikonstørrelse for adelskrav, så de 3 mønt-ikoner altid
   holder sig på én række uden ombrydning — uafhængigt af viewport-bredden som
   de almindelige kort-prisikoner ellers skalerer med. */
.ga-noble-krav { display: flex; gap: 3px; justify-content: center; flex-wrap: nowrap; }
.ga-noble-krav .ga-cost-pip-wrap { width: 21px; height: 21px; flex: 0 0 auto; }
/* Ingen mørk gradient bag teksten længere (fjernet fra baggrundsbilledet i
   JS) — kompenseres med en kraftigere tekstskygge (skarp kant + blødt glow)
   så navn og pointtal forbliver læsbare uanset billedets egne farver. */
/* Hvid skrift oven på en let mørk toning af baggrundsbilledet (sort skrift
   virkede ikke godt nok i praksis) — skyggen er bevaret/styrket for ekstra
   læsbarhed oven i tonen. */
.ga-noble.has-art .ga-noble-navn { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.75); }
.ga-noble.has-art .ga-noble-points { text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.75); }

/* ── Bræt (tiers) — de 3 rækker deler markedets højde ligeligt, så alle
   altid er synlige uden scroll. Kortstørrelsen skalerer med clamp() efter
   den bredde der er til rådighed (loft sikrer de ikke bliver urimeligt
   store på meget brede skærme). ────────────────────────────────────── */
.ga-board { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; }
/* .ga-tier-row's gap er nu den FASTE afstand mellem dæk og kort-boksen
   (større end før). .ga-tier-cards fylder igen resten af rækken og centrerer
   kortene INDENI sig selv — det garanterer at margenen FØR første kort og
   margenen EFTER sidste kort (mod sidebaren) altid er ens store, uanset
   hvor mange kort der er, eller hvor bredt vinduet er. */
.ga-tier-row { flex: 1 1 0; min-height: 0; display: flex; gap: 20px; align-items: center; }
.ga-deck { flex: 0 0 auto; cursor: pointer; }
.ga-deck-back {
  width: clamp(80px, 9.2vw, 138px); height: clamp(107px, 12.2vw, 185px);
  border: 1px dashed var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--subtext); font-size: 0.75rem; background: var(--surface);
  background-size: cover; background-position: center;
}
.ga-deck-back span { font-size: 0.65rem; margin-top: 4px; }
/* Samme princip som adelskortene: gradienten bag "Tier N / X tilbage"-teksten
   er fjernet fra billedet, tekstskyggen er i stedet gjort kraftigere. */
.ga-deck-back.has-art { border-style: solid; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.75); }
.ga-tier-cards { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

.ga-card {
  width: clamp(80px, 9.2vw, 138px); height: clamp(107px, 12.2vw, 185px);
  flex: 0 0 auto; background-color: var(--surface); border: 1.5px solid var(--bonus-farve);
  border-top: 4.5px solid var(--bonus-farve); border-radius: var(--radius); padding: 6px 6px 22px;
  cursor: pointer; display: flex; flex-direction: column; position: relative;
  transition: transform 0.12s; background-size: cover; background-position: center;
}
.ga-card:hover { transform: translateY(-3px); }
/* Let hvid toning øverst på kortet (uafhængig af det uploadede baggrundsbillede,
   som sættes separat via inline style) — gør værdi/pointtal tydeligere uden at
   dække hele billedet som den tidligere fjernede mørke gradient gjorde. */
.ga-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
  border-radius: var(--radius) var(--radius) 0 0; pointer-events: none;
}
.ga-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
/* Samme cirkel-design som mønterne forneden (samme størrelse, rund form,
   farvet baggrund) — matcher nu bonus-mønten i det modsatte hjørne. */
.ga-card-points {
  display: flex; align-items: center; justify-content: center;
  width: clamp(12px, 1.33vw, 20px); height: clamp(12px, 1.33vw, 20px);
  border-radius: 50%; background-color: var(--bonus-farve); color: #111;
  font-weight: 800; font-size: clamp(0.6rem, 0.75vw, 0.85rem); line-height: 1;
}
.ga-card-points:empty { background: none; width: 0; height: 0; }
.ga-card-bonus {
  display: inline-block; width: clamp(12px, 1.33vw, 20px); height: clamp(12px, 1.33vw, 20px); border-radius: 50%;
  background-size: cover; background-position: center; box-sizing: border-box;
  border: 1px solid rgba(140,140,140,0.75); box-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
/* gap er bevidst lille — sammen med pip-størrelsen nedenfor sikrer det at
   4 mønt-ikoner altid kan stå på én række under et markedskort, uanset
   hvor bred korttypen (clamp) lige nu er. */
/* margin-top:auto forankrer rækken til bunden af kortet ved at opsluge al
   overskydende plads ovenover den — den følger dermed altid kortets
   nederste kant, uanset hvor højt navnet eller kortet selv er, i stedet
   for en fast "top: Npx"-placering. justify-content:space-between spreder
   ikonerne jævnt ud over hele kortets bredde (3 eller 4 stk.). */
/* Venstrejusteret med et fast mellemrum (i stedet for space-between) — det
   samme mellemrum bruges uanset om der er 1, 2, 3 eller 4 ikoner, så
   afstanden altid matcher den man ser ved kort med 4 ikoner. */
.ga-card-cost {
  margin-top: auto; display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(3px, 0.8vw, 10px); flex-wrap: wrap; row-gap: 4px;
}
.ga-cost-pip-wrap { display: inline-block; position: relative; width: clamp(12px, 1.33vw, 20px); height: clamp(12px, 1.33vw, 20px); }
.ga-cost-pip {
  display: block; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box;
  background-color: var(--metal-farve); background-size: cover; background-position: center;
  border: 1px solid rgba(140,140,140,0.75); box-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Antallet flyttes fra midt på mønten (hvor hvid tekst kan drukne i et
   billede) til et lille mørkt badge i hjørnet, uden for selve mønten. */
.ga-count-badge {
  position: absolute; top: -6px; right: -6px; z-index: 1;
  min-width: 17px; height: 17px; padding: 0 3px;
  background: #1a1408; color: #fff; border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%; font-size: 0.64rem; font-weight: 800; line-height: 15px;
  text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.ga-count-badge-sm { min-width: 14px; height: 14px; font-size: 0.56rem; line-height: 12px; top: -5px; right: -5px; }
.ga-count-badge-xs {
  min-width: 15px; height: 15px; font-size: 0.62rem; font-weight: 900; line-height: 13px;
  top: -6px; right: -6px; padding: 0 2px;
}

/* ── Poletbank ─────────────────────────────────────────────── */
/* Alle 6 mønttyper i én vandret række i stedet for to, så bank-sektionen
   fylder mindst muligt i højden i sidebaren. */
.ga-bank { display: flex; gap: 4px; justify-content: center; flex-wrap: nowrap; }
.ga-token-stack {
  /* 10% større igen (48px → 53px) — det er disse bunker man tager fra. */
  width: 53px; flex: 0 0 auto; text-align: center; padding: 3px; border-radius: var(--radius);
  border: 1px solid transparent;
}
.ga-token-stack.clickable { cursor: pointer; }
.ga-token-stack.clickable:hover { border-color: var(--metal-farve); }
.ga-token-stack.selected { border-color: var(--metal-farve); background: rgba(255,255,255,0.05); }
.ga-token-wrap { position: relative; width: 42px; height: 42px; margin: 0 auto; }
.ga-token-circle {
  width: 100%; height: 100%; border-radius: 50%; background-color: var(--metal-farve);
  background-size: cover; background-position: center;
}
.ga-token-label { font-size: 0.56rem; color: var(--subtext); margin-top: 3px; line-height: 1.1; }
.ga-token-selcount { font-size: 0.6rem; color: #d4af37; font-weight: 700; }
/* Étklik-genvej til "tag 2 ens" — vises kun når bunken har mindst 4 tilbage. */
.ga-token-take2 {
  margin-top: 3px; font-size: 0.52rem; padding: 1px 6px; border-radius: 8px;
  border: 1px solid var(--metal-farve); background: transparent; color: var(--text);
  cursor: pointer; line-height: 1.4;
}
.ga-token-take2:hover { background: var(--metal-farve); color: #111; }

/* ── Handlingsbjælke / discard ─────────────────────────────── */
/* Svæver oven på spillet i stedet for at stå i det almindelige dokumentflow
   — så den hverken skubber til eller ændrer højden på kort-rækkerne når den
   dukker op/forsvinder under polet-valg eller tilbagelægning. */
.ga-action-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid #d4af37; border-radius: var(--radius);
  padding: 12px 16px; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  max-width: min(640px, 92vw); box-sizing: border-box;
}
/* Uden min-width:0 vil en lang sætning i et flex-barn presse hele bjælken
   (og dermed siden) bredere i stedet for at ombryde til flere linjer. */
.ga-action-bar > span { min-width: 0; overflow-wrap: break-word; }

/* #ga-action-bar (mønt-bekræft/annuller) er en mindre boks i normalt
   dokumentflow, placeret FØR banken i HTML'en — den skubber altså poletterne
   ned i stedet for at dække dem, så man stadig kan se sit valg. Teksten står
   på linje 1, knapperne samlet på linje 2 herunder. #ga-discard-bar beholder
   den oprindelige bund-svævende opførsel og påvirkes ikke af disse regler. */
#ga-action-bar {
  position: static; transform: none;
  flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; flex-wrap: nowrap;
  padding: 8px 10px; max-width: none; font-size: 0.74rem;
  box-shadow: none;
  /* Fast reserveret plads — se #ga-action-bar.hidden herunder — så banken,
     ens egen mat og modstandernes point/kort IKKE hopper op og ned hver
     gang boksen vises/skjules under polet-valg. */
  min-height: 68px; box-sizing: border-box;
}
/* Global .hidden bruger display:none, hvilket ville fjerne den reserverede
   plads igen. Her overstyres den specifikt for #ga-action-bar, så boksen i
   stedet blot bliver usynlig og upåklikkelig — pladsen i layoutet bevares. */
#ga-action-bar.hidden {
  display: flex !important; visibility: hidden; pointer-events: none;
}
#ga-action-bar #ga-action-desc { text-align: center; line-height: 1.3; }
.ga-action-bar-buttons { display: flex; gap: 8px; justify-content: center; }
#ga-action-bar .btn-ga-primary,
#ga-action-bar .btn-ga-secondary { padding: 6px 14px; font-size: 0.76rem; }
.ga-discard-tokens { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ga-discard-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-radius: var(--radius); border: 1px solid var(--metal-farve); background: transparent;
}
.ga-discard-label { font-size: 0.78rem; color: var(--text); white-space: nowrap; }
.ga-discard-label em { color: var(--subtext); font-style: normal; }
.ga-stepper { display: flex; align-items: center; gap: 8px; }
.ga-step-btn {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--metal-farve);
  background: transparent; color: var(--text); font-size: 0.9rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ga-step-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.ga-step-btn:hover:not(:disabled) { background: var(--metal-farve); color: #111; }
.ga-step-count { min-width: 14px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Egen mat + modstandere ────────────────────────────────── */
/* #ga-my-mat er blot en flex-række — selve point/mønt-rammen er flyttet til
   .ga-mat-frame, så "sidste runde"-panelet (.ga-last-round) kan ligge UDEN
   FOR rammen, til venstre for den, med en FAST reserveret bredde (70px) så
   resten af rækken ikke flytter sig når indholdet dukker op/forsvinder. */
.ga-my-mat { display: flex; gap: 8px; align-items: flex-start; }
.ga-mat-frame {
  flex: 1 1 auto; min-width: 0;
  background: var(--surface); border: 1px solid #d4af37; border-radius: var(--radius);
  padding: 10px;
}
.ga-mat-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.ga-mat-points { color: #d4af37; font-weight: 700; }
.ga-mat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }

/* "Sidste runde": kort/mønter UDEN FOR point/mønt-rammen — se lastRoundHtml()
   i guldalder.js. Fast bredde (70px) reserveres ALTID, uanset om der er
   noget at vise, så layoutet ikke hopper. */
.ga-last-round { flex: 0 0 70px; width: 70px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ga-last-round-label { font-size: 0.6rem; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; text-align: center; }
.ga-last-round-coins { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.ga-last-round-coin { position: relative; width: 28px; height: 28px; }
.ga-last-round-coin .ga-token-circle { width: 100%; height: 100%; }
.ga-mat-label { font-size: 0.75rem; color: var(--subtext); min-width: 90px; }
.ga-subtle { color: var(--subtext); font-size: 0.75rem; }
.ga-reserved-cards { display: flex; gap: 5px; flex-wrap: nowrap; }
/* Kompakt kort-miniature (bonusfarve + pointtal + prisikoner) i stedet for
   et fuldt markeds-kort — så 3 reserverede kort fylder én smal vandret
   række i stedet for at ombrydes til flere linjer og skubbe resten af
   sidebaren (modstanderens sektion m.m.) ud af syne. */
.ga-mini-card {
  width: 54px; height: 72px; flex: 0 0 auto; cursor: pointer;
  background-color: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--bonus-farve); border-radius: 4px;
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3px;
}
/* Samme runde mønt-badge-design som pointtallet på markedskortene. */
.ga-mini-card-points {
  align-self: flex-end; display: flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background-color: var(--bonus-farve);
  color: #111; font-weight: 800; font-size: 0.6rem; line-height: 1;
}
.ga-mini-card-points:empty { background: none; width: 0; height: 0; }
.ga-mini-card-cost { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.ga-mini-card-cost .ga-cost-pip-wrap { width: 16px; height: 16px; }

/* ── Animationer: mønter bank↔spiller, kort købt/reserveret ──────────
   Klasserne tilføjes af guldalder.js kun på ELEMENTER DER LIGE ER OPRETTET
   (innerHTML genopbygges hver poll), så animationen starter automatisk
   uden behov for reflow-tricks eller klasse-fjernelse bagefter. */
@keyframes ga-pulse-gain {
  0%   { transform: scale(1); filter: brightness(1); }
  35%  { transform: scale(1.35); filter: brightness(1.7); }
  100% { transform: scale(1); filter: brightness(1); }
}
.ga-anim-gain { animation: ga-pulse-gain 0.55s ease-out; }

@keyframes ga-pulse-lose {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(0.78); opacity: 0.35; }
  100% { transform: scale(1); opacity: 1; }
}
.ga-anim-lose { animation: ga-pulse-lose 0.45s ease-out; }

@keyframes ga-card-pop {
  0%   { transform: scale(0.35) translateY(14px); opacity: 0; }
  65%  { transform: scale(1.08) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.ga-anim-card-pop { animation: ga-card-pop 0.4s cubic-bezier(.34,1.56,.64,1); }

/* Gylden glorie omkring et NYT kort der lige er vendt fra dækket op på
   pladen — vises uanset om DET ER MIG eller en modstander der købte/
   reserverede kortet der tømte pladsen (animNewBoardCardIds beregnes ud fra
   hele brættets før/efter-tilstand i computeAnimDiff(), ikke kun mine egne
   handlinger, så alle spillere ser glorien uafhængigt af hvis tur det var). */
@keyframes ga-card-new-glow {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0), 0 0 0 0 rgba(212,175,55,0); }
  8%   { box-shadow: 0 0 0 3px rgba(212,175,55,0.9), 0 0 22px 8px rgba(212,175,55,0.55); }
  75%  { box-shadow: 0 0 0 3px rgba(212,175,55,0.6), 0 0 16px 5px rgba(212,175,55,0.32); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0), 0 0 0 0 rgba(212,175,55,0); }
}
.ga-anim-new-card { animation: ga-card-new-glow 12s ease-out; }

/* Flyvende kloner: en mønt eller et kort der glider fra kilde- til
   mål-position på skærmen (se flyRectToRect() i guldalder.js). */
.ga-fly-coin {
  border-radius: 50%; background-color: var(--metal-farve);
  background-size: cover; background-position: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.ga-fly-card {
  background: var(--surface); border: 1.5px solid var(--bonus-farve);
  border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.55);
}

@media (prefers-reduced-motion: reduce) {
  .ga-anim-gain, .ga-anim-lose, .ga-anim-card-pop, .ga-anim-new-card { animation: none !important; }
  .ga-fly-coin, .ga-fly-card { display: none; }
}

/* Poletter + ejede kort af samme farve stables lodret i én søjle pr. metal,
   så antal bonuskort (øverst) og poletter på hånden (nederst) hænger sammen
   visuelt i stedet for at stå i to adskilte, ujusterede rækker. */
.ga-color-columns { display: flex; gap: 5px; margin-bottom: 8px; }
.ga-color-col {
  flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 6px 4px; border-radius: var(--radius); border: 1px solid var(--metal-farve);
  background: color-mix(in srgb, var(--metal-farve) 10%, transparent);
}
.ga-color-col-guld { border-style: dashed; }
.ga-col-bonus {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: #111;
  background: var(--metal-farve); border-radius: 4px;
}
.ga-col-token-wrap { position: relative; width: 28px; height: 28px; }
.ga-col-token {
  width: 100%; height: 100%; background-color: var(--metal-farve);
  background-size: cover; background-position: center;
  border-radius: 50%; opacity: 0.85;
}
.ga-col-bonus.empty { background: transparent; color: var(--subtext); border: 1px dashed var(--border); }
.ga-col-token.empty { background: transparent; border: 1px dashed var(--border); }
.ga-color-col-small .ga-col-bonus { width: 22px; height: 22px; font-size: 0.68rem; }
.ga-color-col-small .ga-col-token-wrap { width: 22px; height: 22px; }

.ga-opponents { display: flex; gap: 10px; flex-wrap: wrap; }
/* Ydre række pr. modstander: "sidste runde"-panelet (fast 70px) ligger her,
   UDEN FOR .ga-opp-card (point/mønt-rammen), til venstre for den. */
.ga-opp-row-outer { display: flex; gap: 8px; align-items: flex-start; flex: 1; min-width: 240px; }
.ga-opp-card {
  flex: 1 1 auto; min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.ga-opp-card.current-turn { border-color: #d4af37; }
.ga-opp-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.ga-opp-points { color: #d4af37; font-weight: 700; }
.ga-opp-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }

/* ── Spillog ───────────────────────────────────────────────── */
.ga-log-panel { margin-top: 14px; }
.ga-log-toggle {
  width: 100%; text-align: left; padding: 8px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
  font-size: 0.8rem; cursor: pointer;
}
.ga-log-toggle:hover { border-color: #d4af37; }
.ga-log-list {
  max-height: 220px; overflow-y: auto; margin-top: 6px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.ga-log-item { font-size: 0.78rem; padding: 3px 0; border-bottom: 1px solid var(--border); }
.ga-log-item:last-child { border-bottom: none; }
.ga-log-time { font-family: ui-monospace, monospace; color: var(--subtext); margin-right: 6px; }

/* Lille farve/point/pris-badge på "købte X"-logposter, så man kan se kortets
   bonusfarve, pointværdi og hvad det kostede uden at åbne modalen. */
.ga-log-card {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 1px 5px; border-radius: 10px; vertical-align: middle;
  border: 1px solid var(--bonus-farve); background: color-mix(in srgb, var(--bonus-farve) 14%, transparent);
}
.ga-log-card-swatch { width: 9px; height: 9px; border-radius: 50%; background-color: var(--bonus-farve); flex: 0 0 auto; }
.ga-log-card-points { font-size: 0.68rem; font-weight: 800; color: #d4af37; }
.ga-log-card-cost { display: flex; gap: 2px; }
.ga-log-card-cost .ga-cost-pip-wrap { width: 12px; height: 12px; flex: 0 0 auto; }
.ga-log-card-cost .ga-count-badge { min-width: 12px; height: 12px; font-size: 0.5rem; line-height: 10px; top: -4px; right: -4px; }

/* Mønt-ikoner + antal på "tog poletter"-logposter — erstatter de gamle
   farvenavne (Kobber, Sølv, Jern osv.) som ren tekst. */
.ga-log-tokens { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: middle; }
.ga-log-token { position: relative; display: inline-block; width: 14px; height: 14px; }
.ga-log-token-circle {
  width: 100%; height: 100%; border-radius: 50%; background-color: var(--metal-farve);
  background-size: cover; background-position: center;
}
.ga-log-token .ga-count-badge { min-width: 12px; height: 12px; font-size: 0.5rem; line-height: 10px; top: -4px; right: -5px; }

/* ── Modal ─────────────────────────────────────────────────── */
.ga-modal {
  position: fixed; inset: 0; background: var(--modal-bg); display: flex; align-items: center;
  justify-content: center; z-index: 100;
}
.ga-modal-inner {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; max-width: 320px; width: 90%; text-align: center;
}
.ga-card-cost-full { display: flex; gap: 6px; justify-content: center; margin: 12px 0; }
.ga-card-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

/* ── Slutskærm — popup oven på det stadig-synlige bræt ────────────────
   Genbruger .ga-modal-mønstret (fast baggrund + centreret boks) i stedet
   for at erstatte hele spilskærmen, så brættet med alle brikker og point
   forbliver synligt og kan ses efter man lukker popup'en. */
.ga-end {
  position: fixed; inset: 0; background: var(--modal-bg); display: flex; align-items: center;
  justify-content: center; z-index: 110; padding: 20px; box-sizing: border-box;
}
.ga-end-inner {
  background: var(--surface); border: 1px solid #d4af37; border-radius: var(--radius);
  padding: 24px; max-width: 420px; width: 100%; text-align: center; max-height: 90vh; overflow-y: auto;
}
.ga-end-icon { font-size: 3rem; margin-bottom: 10px; }
.ga-final-scores { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.ga-final-row {
  display: flex; justify-content: space-between; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
}
.ga-final-row.winner { border-color: #d4af37; }
.ga-winner-crown { margin-right: 6px; }

/* Highscore-kontekst på slutskærmen: dette spils placering + 2 over/2 under. */
.ga-hs-context { margin: 4px 0 16px; text-align: left; }
.ga-hs-context-label {
  font-size: 0.75rem; color: var(--subtext); text-align: center; margin-bottom: 8px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.ga-hs-context-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.ga-hs-context-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); color: var(--subtext); }
.ga-hs-context-table tr:last-child td { border-bottom: none; }
.ga-hs-context-table tr.this-game td { color: #d4af37; font-weight: 700; background: rgba(212,175,55,0.08); }

.ga-end-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── Debug-visning: navne + rammer + størrelser på layout-sektioner ──────
   Slås til/fra med 🐛-knappen (se toggleDebugMode() i guldalder.js). Rent
   visuel udviklings-hjælp — påvirker intet ved selve spillet. */
.ga-debug-toggle {
  position: fixed; bottom: 14px; left: 14px; z-index: 120;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); font-size: 0.95rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.55; transition: opacity 0.15s;
}
.ga-debug-toggle:hover { opacity: 1; }
.ga-debug-toggle.active { border-color: #ff3cb4; opacity: 1; box-shadow: 0 0 8px rgba(255,60,180,0.6); }

body.ga-debug [data-debug-name] { outline: 1px dashed rgba(255, 60, 180, 0.55); position: relative; }
body.ga-debug [data-debug-name]::before {
  content: attr(data-debug-name) " " attr(data-debug-size);
  position: absolute; top: 0; left: 0; z-index: 9999;
  background: rgba(255, 60, 180, 0.88); color: #fff;
  font-size: 9px; line-height: 1.3; padding: 1px 3px;
  font-family: ui-monospace, monospace; white-space: nowrap; pointer-events: none;
}