/* DFL · Kenney-Teile (D52): Kulisse hinter dem Gelände, Startbild, game-icons-Marken, Regler und Sterne.
   Lädt nach dfl_app_shell.css. Bilder: app/kulisse/ und app/ui/ (Kenney, CC0); Icons: data/dfl_spielicons.js (CC BY 3.0). */

/* ── Gelände mit Himmel: kein Farbschimmer mehr, abgerundete Ecken ────────────── */
.gel-buehne.mit-kulisse { background: none; border-radius: 0 0 22px 22px; overflow: hidden; }
.aok-gelaende .gel-buehne.mit-kulisse { border-radius: 0 0 22px 22px; }
/* D53: Ausbau des Geländes und was zur nächsten Stufe fehlt (oben links im Himmel) */
.gel-chip.unten { transform: translate(-50%, 12%); }
.gel-stand { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); pointer-events: none;
  padding: 3px 9px; border-radius: 10px; background: rgb(17 17 16 / .55); color: #f4f2ec;
  font: 700 10px/1.3 var(--font-text, system-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Startbild der Vereinswahl ───────────────────────────────────────────────── */
.dfl-startbild { position: relative; border-radius: 20px; overflow: hidden; margin: 4px auto 6px; max-width: 720px; box-shadow: var(--schatten, none); }
.dfl-startbild canvas { width: 100%; height: auto; display: block; aspect-ratio: 720 / 300; }
.dfl-startbild-titel { position: absolute; inset: 14px 0 auto; text-align: center; pointer-events: none; color: #fff; }
.dfl-startbild-logo { display: block; width: min(80%, 440px); height: auto; margin: 0 auto 2px; }
.dfl-startbild-titel b { display: block; font: 800 clamp(38px, 9vw, 64px)/1 var(--font-display, system-ui); text-shadow: 0 3px 0 rgb(0 0 0 / .18); letter-spacing: .02em; }
.dfl-startbild-titel span { font: 800 clamp(11px, 2.4vw, 14px)/1.3 var(--font-text, system-ui); text-shadow: 0 1px 2px rgb(0 0 0 / .35); }

/* ── game-icons: gefüllt, Farbe über currentColor ────────────────────────────── */
.gi { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -0.15em; }
.gi-marke { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; flex: none; vertical-align: middle; margin-right: 6px; }
.gi-marke .gi { width: 16px; height: 16px; vertical-align: 0; }
.gi-plus { background: rgb(95 211 154 / .16); color: #5fd39a; }
.gi-minus { background: rgb(240 116 98 / .16); color: #f07462; }
.gi-mix { background: rgb(124 178 242 / .16); color: #7cb2f2; }
.gi-gold { background: rgb(240 192 90 / .16); color: var(--gold, #f0c05a); }
.gi-neutral { background: var(--bg4, #2a2a28); color: var(--text, #eeeeec); }
/* Eigenschaften: Icon in der Pille */
.trait-chip .gi { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; }
/* Postfach: jedes Zeichen in einer runden Marke (game-icons wie Tabler), Farbe nach Kategorie */
html.freundlich .pf-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 17px; line-height: 1;
  background: color-mix(in oklab, currentColor 16%, transparent); }
html.freundlich .pf-ico .gi { width: 19px; height: 19px; vertical-align: 0; }

/* ── Mitwirkende (Mehr-Blatt) ────────────────────────────────────────────────── */
.app-lizenzen { font-size: 13.5px; line-height: 1.5; color: var(--text2, #b5b3ad); padding: 0 4px 12px; }
.app-lizenzen b { color: var(--text, #eeeeec); }
.app-lizenzen ul { margin: 6px 0 12px; padding-left: 18px; }
.app-lizenzen li { margin: 3px 0; }
.app-lizenzen a { color: var(--accent-text, var(--accent, #2fb36b)); }

/* ── Regler (Ticketpreise): Griff aus dem UI Pack, Bahn als Fläche (gestreckte Bahn-Bilder verzerren die Enden) ── */
.fc-stat.mit-regler { flex-wrap: wrap; row-gap: 4px; }
.dfl-regler-zeile { display: flex; align-items: center; gap: 12px; flex: 1 1 100%; min-width: 0; }
.dfl-regler { -webkit-appearance: none; appearance: none; flex: 1; min-width: 120px; height: 32px; margin: 0; background: none; cursor: pointer; --anteil: 50%; }
.dfl-regler::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; box-shadow: inset 0 2px 0 rgb(0 0 0 / .18);
  background: linear-gradient(to right, #f5c400 var(--anteil), #cfd0d8 var(--anteil)); }
.dfl-regler::-moz-range-track { height: 10px; border-radius: 5px; background: #cfd0d8; box-shadow: inset 0 2px 0 rgb(0 0 0 / .18); }
.dfl-regler::-moz-range-progress { height: 10px; border-radius: 5px; background: #f5c400; }
.dfl-regler::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 31px; margin-top: -11px; border: 0;
  background: url(../app/ui/regler_griff.png) center / contain no-repeat; }
.dfl-regler::-moz-range-thumb { width: 24px; height: 31px; border: 0; border-radius: 0; background: url(../app/ui/regler_griff.png) center / contain no-repeat; }
.dfl-regler:focus-visible { outline: 2px solid var(--accent, #2fb36b); outline-offset: 3px; border-radius: 8px; }
.dfl-regler-wert { min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.dfl-regler-wert span { display: block; font-weight: 400; font-size: 10.5px; color: var(--text2, #b5b3ad); }

/* ── Sterne (Potenzial) ──────────────────────────────────────────────────────── */
.dfl-sterne { display: inline-flex; gap: 2px; vertical-align: -2px; margin-left: 6px; }
.dfl-sterne i { position: relative; width: 14px; height: 13px; background: url(../app/ui/stern_leer.png) center / contain no-repeat; display: inline-block; }
.dfl-sterne b { position: absolute; inset: 0 auto 0 0; background: url(../app/ui/stern.png) left center / 14px 13px no-repeat; }