/* Generisk kort-panel, brukt av game-shell (meta-rad, sikkerhetsvarsel,
   regler) og senere av forsiden (Fase 4). Selve spillkort-taket på forsiden
   (ikon + farge + navn) bygges da som egen ting oppå denne — ikke før. */

.card{
  background:var(--card);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}

/* Kort som skal skille seg tydelig ut fra resten (viktig info, varsler) —
   se docs/design/design-2-organic-bunnfaner.pdf, bilde 1c. */
.card--prominent{
  background:var(--card-prominent);
  border-color:rgba(255,255,255,0.06);
}

/* Liten fargetile til et spills ikon (topplinje, senere spillkort på
   forsiden) — mørk/dempet tone av spillets aksentfarge med en lysere kant,
   se docs/design/design-1-mork-topplinje.pdf, bilde 2a. Settes opp med
   --tile-accent: var(--rod) (e.g.) på elementet. */
.icon-tile{
  --tile-accent: var(--aksent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:color-mix(in srgb, var(--tile-accent) 22%, var(--card));
  border:1.5px solid color-mix(in srgb, var(--tile-accent) 55%, transparent);
  border-radius:var(--radius-md);
}
/* 40px, ikke 36px — matcher `.topbar-icon-btn` (forsidens topplinje) slik
   at spillsidens og forsidens topplinje blir like høye. Se STILGUIDE.md. */
.icon-tile--sm{ width:40px; height:40px; font-size:1.15rem; }
.icon-tile--lg{ width:56px; height:56px; font-size:1.75rem; }
.icon-tile--row{ width:64px; height:64px; font-size:1.9rem; }

.chip-row{
  display:flex; flex-wrap:wrap; gap:var(--space-2);
  font-size:var(--text-xs); color:var(--text-dim);
}
.chip{
  background:var(--card-hover);
  border-radius:var(--radius-full);
  padding:var(--space-1) var(--space-3);
}
.chip-players{ display:inline-flex; align-items:center; gap:var(--space-1); }
.icon-svg{ flex-shrink:0; vertical-align:-2px; }

/* Kategori-chip i meta-raden: skjerm eller ikke. Samme størrelse som
   .chip (brukes alltid sammen med den, som første chip) men fargekodet,
   se docs/design/design-2-organic-bunnfaner.pdf, bilde 1d. Settes opp med
   --badge-accent: var(--gronn) (e.g.) på elementet. Samme kategori kan
   senere brukes til sortering/filter (Fase 4). */
.type-badge{
  --badge-accent: var(--aksent);
  background:color-mix(in srgb, var(--badge-accent) 20%, var(--card));
  color:var(--badge-accent);
  font-weight:700;
}

/* `.chip-break` (Fase 1: tvang type-kategorien til egen rad under 480px)
   er fjernet igjen (Fase 5) — unødvendig nå som typeteksten er kort
   ("Spill"/"Regler", Fase 4-revisjon 3), se `meta-row.js`. `.chip-row` sin
   vanlige `flex-wrap` bryter naturlig når det faktisk ikke er plass. */

/* Spillkortet på forsiden (Fase 4-revisjon) — smal rad, bygget oppå .card,
   etter docs/design/design-2-organic-bunnfaner.pdf bilde 1b: fargeblokken
   dekker HELE venstre kant av kortet (10–15%), ikke en innfelt tile med
   egen kant. `.card` sin egen padding fjernes derfor her — den flyttes inn
   i `.game-card-body` i stedet, og `overflow:hidden` klipper fargeblokkens
   rette hjørner til kortets avrundede form. Én kolonne med rader i stedet
   for et rutenett — se STILGUIDE.md. */
.game-grid{
  display:flex; flex-direction:column;
  gap:var(--space-2);
}
.game-card{
  display:flex; align-items:stretch;
  padding:0;
  overflow:hidden;
}
.game-card:hover .game-card-body{ background:var(--card-hover); }

.game-card-icon{
  flex:0 0 26%; min-width:76px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.25rem;
}
.game-card-body{ min-width:0; flex:1; padding:var(--space-3) var(--space-4); }
.game-card-title-row{
  display:flex; align-items:center; gap:var(--space-2);
  margin-bottom:2px;
}
.game-card-name{ font-size:var(--text-base); margin:0; min-width:0; }
.game-card-desc{
  margin:0 0 var(--space-1);
  color:var(--text-dim); font-size:var(--text-xs);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:1; -webkit-box-orient:vertical;
}

/* Plaketten sitter ved navnet (bilde 1b), ikke som eget hjørne-merke. */
.game-card-badge{
  flex-shrink:0;
  font-size:var(--text-2xs); font-weight:700;
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-full);
}
.game-card-badge--ny{ background:color-mix(in srgb, var(--aksent) 22%, var(--card)); color:var(--aksent); }
.game-card-badge--oppdatert{ background:color-mix(in srgb, var(--gul) 22%, var(--card)); color:var(--gul); }

/* IKKE en plakett — egen knapp i merkefargen, samme "dette går et sted"-
   MØNSTER som "Endre ›" på forsidens "Spillere"-kort
   (`.player-roster-toggle`), men en EKTE handling her (hopper rett inn i
   spillet, se game-card.js) — ikke bare tekst. `margin-left:auto` dytter
   den helt til høyre i tittelraden, uansett om "Ny"/"Oppdatert" også
   vises ved siden av navnet. Kan stå SAMTIDIG med en av de —
   uavhengige, se game-card.js. */
.game-card-continue{
  margin-left:auto; flex-shrink:0;
  font-weight:700; color:var(--aksent); font-size:var(--text-xs);
  white-space:nowrap;
}

/* Nedlastingsstatus som en liten ikon-badge I CHIP-RADEN (Fase 5 — var et
   frittstående ikon i kortets hjørne før, den plassen trengs nå til
   "Gjenoppta ›" i tittelraden over). Erstattet en enda tidligere egen
   "Nedlastinger"-liste i bunnarket, se core/pwa/README.md. */
.game-card-download-chip{
  flex-shrink:0;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-2xs); color:var(--text-dim);
  background:var(--card-hover);
  border-radius:var(--radius-full);
}
.game-card-download-chip--ready{ color:var(--aksent); }