/* Kategorie-Karten von Country Streak (Spielscreen UND Live-Demo im Regeln-Sheet, siehe rules.js).
   Eine Quelle fuer beide, damit die Demo bei jeder Design-Aenderung automatisch aktuell bleibt.
   Erwartet die Design-Tokens aus shared.css (--navy, --salbei, --terra). */
/* Fuellt die uebrige Hoehe in #guess-section (siehe game.html): ist dort kein Platz uebrig (z.B. Handy quer, wenig
   Fensterhoehe), bleiben die Karten bei ihrer Mindesthoehe 58px (Spec 18.3) - ist Hoehe uebrig, wird sie in groessere Karten
   gesteckt, bis maximal 92px (Nutzer-Wunsch: an die Fensterhoehe anpassen, NICHT an die Fensterbreite - gilt also genauso auf
   einem schmalen, aber hohen Handy). flex-basis 0 (Kurzform "flex: 1") ignoriert dabei bewusst die Eigenhoehe aus dem Inhalt -
   noetig, damit container-type:size unten keinen Zirkelbezug bekommt (Groesse haengt sonst vom Inhalt ab, der wiederum per
   cqh von der Groesse abhaengen wuerde). min-height/max-height = 4 Karten a 58-92px + 3 Zwischenraeume a 8-13px (deren eigene
   Grenzen, siehe unten): ohne die Grenzen wuerde die Liste entweder mehr Hoehe beanspruchen, als ihre Karten je ausfuellen
   koennen (unsichtbarer Leerraum INNERHALB der Liste), oder bei zu wenig Platz kleiner werden, als die Karten mindestens
   brauchen (sie liefen dann unten heraus und ueberlappten den "Antwort pruefen"-Button darunter). */
.cs-cat-list { display: flex; flex-direction: column; gap: clamp(8px, 1.5vh, 13px); flex: 1; min-height: 256px; max-height: 410px; container-type: size; }
/* Hoehe 58-92px, gleichmaessig verteilt (flex:1 je Karte); "in jedem Zustand" (Spec 18.3) heisst hier: bei gleicher
   Fensterhoehe aendert sich beim Antippen/Aufdecken nichts, nicht dass die Karte auf jedem Bildschirm gleich hoch waere. */
.cs-cat-btn {
  width: 100%; min-height: 58px; max-height: 92px; flex: 1; box-sizing: border-box; text-align: left; background: var(--surface);
  border: 1.5px solid rgb(var(--ink-rgb) / 0.12); border-radius: 12px; padding: 0 clamp(12px, 4cqh, 17px); cursor: pointer;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: 10px;
  transition: border-color 0.3s, background 0.3s, transform 0.1s;
  font-family: 'DM Sans', sans-serif; color: var(--ink);
}
.cs-cat-btn:active:not(:disabled) { transform: scale(0.985); }
.cs-cat-btn:disabled { cursor: default; }
.cs-cat-btn.selected { border-color: var(--ink); background: rgb(var(--ink-rgb) / 0.06); }
/* Nach dem Pruefen: angekreuzt+richtig gruen, angekreuzt+falsch rot (Mockup), alles Nicht-Angekreuzte
   bleibt weiss/grau - auch zutreffende Kategorien (Nutzerwunsch, weicht von Spec 18.3 ab). */
.cs-cat-btn.is-a { border-color: var(--salbei); background: rgba(129,178,154,0.16); }
.cs-cat-btn.is-wrong { border-color: #c0392b; background: rgba(192,57,43,0.07); }
.cs-cat-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-cat-top { display: flex; align-items: center; height: 18px; }
.cs-cat-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-cat-icon { width: clamp(16px, 4.4cqh, 19px); height: clamp(16px, 4.4cqh, 19px); flex-shrink: 0; color: var(--ink); opacity: 0.7; }
.cs-cat-icon svg { display: block; width: 100%; height: 100%; }
/* BIP-Icon: die Scheine decken sich ueberlappend ab - Flaechenfarbe statt festem Weiss, damit sie im Dunkelmodus nicht aus der Reihe fallen */
.cs-cat-icon .cs-icon-note { fill: var(--surface); }
.cs-cat-btn .cs-cat-name { font-size: clamp(13px, 3.5cqh, 15px); font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kaestchen: von Anfang an sichtbar und antippbar (leerer grauer Rahmen), nur das Symbol darin
   kommt spaeter. Form = Aufloesung, Farbe = eigene Auswahl (Spec 18.3). */
.cs-cat-box {
  width: clamp(24px, 6.3cqh, 27px); height: clamp(24px, 6.3cqh, 27px); box-sizing: border-box; flex-shrink: 0; border-radius: 7px;
  border: 1.5px solid #cfcac1; background: var(--surface); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.cs-cat-box svg { display: block; width: 14px; height: 14px; }
.cs-box-sym { display: inline-flex; transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); }
.cs-box-sym.pre { transform: scale(0.6); }
.cs-cat-btn.selected .cs-cat-box { background: var(--control); border-color: var(--ink); color: var(--on-control); }
.cs-cat-box.ok { background: #2f7a52; border-color: #2f7a52; color: #fff; }
.cs-cat-box.bad { background: #c0392b; border-color: #c0392b; color: #fff; }
.cs-cat-box.miss, .cs-cat-box.none { background: var(--surface); border-color: #cfcac1; color: #a7a29a; }

/* Wert-Zeile: linke/rechte Wertspalte haben feste Breite (88 px: laengster Wert "3.240 mm/year" braucht bis 86 px), damit die Balkenspur in jeder Zeile
   gleich lang ist und die Mittellinie wirklich mittig sitzt. Verborgene Werte zeigen "???". */
.cs-cat-row2 { display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; column-gap: 6px; height: clamp(16px, 4.4cqh, 19px); }
.cs-bar-val { font-size: clamp(10.5px, 2.8cqh, 12px); font-weight: 700; color: var(--salbei); white-space: nowrap; overflow: hidden; transition: opacity 0.3s; }
.cs-bar-val.right { text-align: right; color: var(--accent); }
.cs-bar-val.pre { opacity: 0; }
.cs-bar-track { height: clamp(10px, 2.9cqh, 12.5px); background: rgb(var(--ink-rgb) / 0.08); border-radius: 5px; position: relative; overflow: hidden; }
/* Fuellung wie in der frueheren Version: grau von der linken Kante bis zum Zielwert (Anteil von Land A),
   Faerbung erst beim Ueberqueren der Mitte (gruen) bzw. beim Ankommen (orange), siehe showRevealBars(). */
.cs-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: rgb(var(--ink-rgb) / 0.25); }
.cs-bar-mid { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 1px dashed rgb(var(--ink-rgb) / 0.25); z-index: 1; }