/* Tierkreis-Karten – gemeinsame Gestaltung (Karten, Knöpfe) für Arena (Duell, Tierkreis-Runde), Deck und Kartensammlung.
   Die Spielfarben gelten nur innerhalb von .tk (Spielbereich, immer dunkel) und in der Großansicht – sie überschreiben
   die Website-Tokens nicht außerhalb. Karten: gezeichnete Rahmen images/karten/rahmen/. */
.tk, .vorschau {
  --seite: #12161f;
  --text: #ece7da;
  --leise: #a49d8c;
  --tusche: #23262f;
  --papier: #f7f1e3;
  --papier-2: #efe6d2;
  --gold: #e0a526;
  --rot: #c4452c;
  --chi: #3a92b8;
  --technik: #6b4a9a;
}
@property --winkel { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
/* Karten 2.0 (2026-10-20): Spielbereiche folgen Hell/Dunkel der Website – Hintergrund und Text aus den Website-Tokens */
.tk { --text: var(--color-text); --leise: var(--color-text-muted); color: var(--text); background: var(--color-bg); }
.tk *, .tk *::before, .tk *::after { box-sizing: border-box; }
.tk button { font: inherit; color: inherit; }
.tk .btn, .tk .btn:hover { color: var(--btn-fg); }   /* Knöpfe behalten ihre Schriftfarbe (z. B. dunkel auf Gold: „In die Sammlung legen“) */
.tk [hidden] { display: none !important; }
.tk a:not(.btn):not(.knopf) { color: var(--link, var(--color-link)); }
/* Vollbild (js/arena.js, 2026-10-20): ohne Website-Kopf und -Fuß, Spieltisch so breit, wie die Bildschirmhöhe erlaubt */
html.spiel-vollbild, html.spiel-vollbild body { background: var(--color-bg); }
html.spiel-vollbild #site-header, html.spiel-vollbild .site-footer { display: none; }
/* Alles passt ohne Scrollen auf den Bildschirm (Nutzer-Wunsch 2026-10-20): Spalte aus Kopf, Brett, Knöpfen und Hand;
   das Brett (16:9) füllt den Rest so groß wie möglich, Verlauf und Regeln entfallen im Vollbild.
   Nur ab 900 px Breite (16:9-Brett); schmaler (iPad hochkant, Handy) bleibt das gestapelte Brett und die Seite scrollt. */
.feld-rahmen { display: contents; }   /* Runde: Hülle ums Brett, nur im Vollbild wirksam */
@media (min-width: 900px) {
html.spiel-vollbild, html.spiel-vollbild body { overflow: hidden; }
html.spiel-vollbild .tk .unten { display: none; }
html.spiel-vollbild .tk .tisch { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: none; padding: 10px 16px 8px; gap: 8px; }   /* dvh: iPad-Safari zählt Leisten sonst mit */
html.spiel-vollbild .tk .tisch > * { flex: none; }
html.spiel-vollbild .tk .tisch > .arena, html.spiel-vollbild .tk .tisch > .feld-rahmen {
  flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center;
}
html.spiel-vollbild .tk .arena { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
html.spiel-vollbild .tk .arena > .brett { width: min(100cqw, 100cqh * 16 / 9); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--color-border), var(--shadow-lift); }
html.spiel-vollbild .tk .feld-rahmen > .feld { width: min(100cqw, 100cqh * 16 / 9); }
/* Handkarten größer, mit der Bildschirmhöhe wachsend */
html.spiel-vollbild .tk .hand .hk { --b: 14vh; --b: 14dvh; }
html.spiel-vollbild .tk .hand .sk { --b: 13vh; --b: 13dvh; }
html.spiel-vollbild .tk .hand.eng .sk + .sk { margin-left: calc(var(--b) * -0.32); }
html.spiel-vollbild .tk .hand.eng:has(.sk:nth-child(12)) .sk + .sk { margin-left: calc(var(--b) * -0.5); }
html.spiel-vollbild .tk .hand.eng:has(.sk:nth-child(16)) .sk + .sk { margin-left: calc(var(--b) * -0.62); }
}
.knopf { display: inline-block; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); padding: 7px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; color: var(--text); }
.knopf:hover { background: rgba(255,255,255,.12); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf--gold { background: linear-gradient(180deg, #f3cf6a, #d49b1f); color: var(--tusche); border-color: transparent; font-weight: 800; }
.knopf--gold:hover { background: linear-gradient(180deg, #f7d97f, #dfa82b); }

/* ---------- Karte (Hand, Sammlung, Deck, Duell) – Redesign 2.0 (2026-10-11, Anhang/Domatik Design/Tierkreis-Duell/04_karten) ----------
   Rahmen je Seltenheit (images/karten/rahmen-neu/): Normal = weiß, Selten = blau, Episch (Schlüssel einzigartig) = lila, Mythisch = gold (Gold = höchste Stufe, Nutzer 2026-10-11).
   Format 5 : 7; das Bildfenster des Rahmens ist durchsichtig → Bild liegt darunter, der Rahmen als Ebene (::after) darüber.
   Positionen in % der Karte, vermessen aus tierkarte-normal.png: Kosten oben links, Angriff unten links (blau), Leben unten rechts (rot). */
.hk {
  --rahmen: url("../images/karten/rahmen-neu/tier-normal.webp");
  --fenster: radial-gradient(120% 90% at 50% 100%, #cfe3c4 0%, #e9eedf 45%, #dfe8f1 100%);
  display: inline-block; position: relative; flex: none; width: var(--b, 112px); aspect-ratio: 5 / 7; padding: 0; border: 0; cursor: pointer;
  background: none; color: var(--tusche); text-align: center; isolation: isolate;
  container-type: inline-size; transition: transform .15s, filter .15s; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
}
.tk button.hk, .vorschau .hk, button.hk { color: var(--tusche); }   /* dunkle Schrift auf dem Papier (gegen .tk button { color: inherit }) */
/* Alte gemalte Rahmen nur für alte Karten; die neue Karte (Karten 2.0, css/karten2.css) trägt .hk.k2 */
.hk:not(.k2)::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--rahmen) center / 100% 100% no-repeat; pointer-events: none; }
.hk[data-sel="selten"] { --rahmen: url("../images/karten/rahmen-neu/tier-selten.webp"); --fenster: radial-gradient(120% 90% at 50% 100%, #9cc7ef 0%, #c9def4 50%, #e3edf8 100%); }
.hk[data-sel="einzigartig"] { --rahmen: url("../images/karten/rahmen-neu/tier-einzigartig.webp"); --fenster: radial-gradient(120% 90% at 50% 100%, #c9a8ec 0%, #dccbf2 50%, #ece3f8 100%); }
.hk[data-sel="mythisch"] { --rahmen: url("../images/karten/rahmen-neu/tier-mythisch.webp"); --fenster: radial-gradient(120% 90% at 50% 100%, #f3cf87 0%, #f6e3b7 50%, #fbf1d9 100%); }
.hk--technik { --rahmen: url("../images/karten/rahmen-neu/technik-normal.webp"); }
.hk--technik[data-sel="selten"] { --rahmen: url("../images/karten/rahmen-neu/technik-selten.webp"); }
.hk--technik[data-sel="einzigartig"] { --rahmen: url("../images/karten/rahmen-neu/technik-einzigartig.webp"); }
.hk--technik[data-sel="mythisch"] { --rahmen: url("../images/karten/rahmen-neu/technik-mythisch.webp"); }
.hk:not(.k2) > span { position: absolute; z-index: 2; display: grid; place-items: center; }
/* Bild im Fenster (unter dem Rahmen) */
.hk > .hk__bild { z-index: 0; left: 12.1%; right: 11.9%; top: 7.3%; height: 43.8%; overflow: hidden; place-items: end center; background: var(--fenster); border-radius: 2cqw; }
.hk__bild img { width: 84%; height: 88%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 1.2cqw 1.2cqw rgba(0,0,0,.25)); }
.hk--technik > .hk__bild { left: 22.1%; right: 19.8%; top: 11.5%; height: auto; aspect-ratio: 1; border-radius: 50%; place-items: center; }   /* rundes Fenster */
.hk--technik .hk__bild img { width: 86%; height: 86%; object-position: center; }
/* Kosten im Achteck oben links */
.hk__kosten { left: 14.2%; top: 9.8%; transform: translate(-50%, -50%); font-size: 15cqw; }
.hk__symbol { display: none !important; }   /* ältere Rahmen hatten einen Kreis am Band */
/* Name im Band */
.hk__name { left: 12%; right: 12%; top: 51.8%; height: 8%; line-height: 1; font-size: 8cqw; font-weight: 900; white-space: nowrap; overflow: hidden; }
.hk__name small { display: block; font-size: 4.8cqw; font-weight: 700; color: #6d6758; }
.hk__name.lang { font-size: 6.6cqw; }
.hk--technik .hk__name { top: 52.8%; height: 8.4%; }
/* Text im Papierfeld */
.hk__text { left: 13%; right: 13%; top: 61.4%; height: 25%; font-size: 5.3cqw; line-height: 1.25; overflow: hidden; }
.hk__unter { display: block; margin-bottom: 1.2cqw; font-size: 4.6cqw; font-weight: 700; color: #6d6758; }
.hk--technik .hk__text { top: 63.4%; height: 24%; }
.hk__text b { white-space: nowrap; }
/* Mythisch: zwei Fähigkeiten müssen ins Papierfeld passen */
.hk__text.zwei { top: 60.4%; height: 26%; padding: 0 1.5cqw; place-items: start center; font-size: 4.6cqw; line-height: 1.15; }
.hk__text.zwei .hk__unter { margin-bottom: .4cqw; font-size: 4.2cqw; }
/* kleines Band unten: Typ bzw. Seltenheit in Worten */
.hk__unten { left: 28.9%; right: 29.2%; top: 87.5%; height: 6.2%; font-size: 4.6cqw; font-weight: 800; color: #5d5646; white-space: nowrap; }
/* Zahlen auf den Steinen: blau = Angriff, rot = Leben */
.hk__kosten, .hk__atk, .hk__hp {
  font-weight: 900; color: #fff; -webkit-text-stroke: 1.4cqw var(--tusche); paint-order: stroke fill; line-height: 1;
}
.hk__atk, .hk__hp { top: 90.6%; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%); font-size: 13cqw; }
.hk__atk { left: 12.9%; }
.hk__hp { left: 87%; }
.hk__atk.hoch, .hk__hp.hoch { color: #b9f5b5; }
.hk__atk.tief, .hk__hp.tief { color: #ffc4b5; }
/* Techniken: Rahmen ohne Werte-Steine – Band unten mittig */
.hk--technik .hk__unten { left: 24%; right: 23.6%; top: 88.4%; height: 6.1%; }
.hk__siegel { display: none !important; }
.hk.falsch { animation: wackeln .35s; }
/* Symbole */
.sym { width: 1em; height: 1em; flex: none; vertical-align: -.15em; }
.sym--text { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; }   /* gegen svg { display: block } aus style.css, sonst eigene Zeile */

/* Großansicht beim Zeigen auf eine Karte */
.vorschau {
  position: fixed; top: 50%; z-index: 80; pointer-events: none;
  transform: translateY(-50%) scale(.92); opacity: 0; transition: opacity .15s, transform .15s;
}
.vorschau.offen { opacity: 1; transform: translateY(-50%); }
.vorschau .hk { --b: min(270px, 70vw, 42vh); cursor: default; filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
/* Begleiter-Kraft groß (js/arena-duell.js kraftInfoHtml) */
.kraft-info {
  display: grid; justify-items: center; gap: 6px; width: min(300px, 70vw); padding: 18px 18px 20px; text-align: center;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.kraft-info__bild { width: 45%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.kraft-info small { font-family: var(--font-label); font-size: var(--fs-meta); color: var(--color-text-muted); }
.kraft-info b { font-size: 1.3rem; }
.kraft-info__kosten { font-size: .9rem; color: var(--color-primary-strong, var(--color-primary)); font-weight: 650; }
.kraft-info p { margin: 4px 0 0; line-height: 1.4; }
/* Touch (iPad, 2026-10-20): kein iOS-Bildmenü, keine Textauswahl und kein Doppeltipp-Zoom im Spiel; Großansicht etwas größer */
.tk .arena, .tk .hand, .tk .feld-rahmen, .vorschau { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tk .arena img, .tk .hand img, .tk .feld-rahmen img, .vorschau img { -webkit-user-drag: none; pointer-events: none; }
@media (pointer: coarse) { .vorschau .hk { --b: min(340px, 60vw, 52vh); } }
@media (prefers-reduced-motion: reduce) { .vorschau { transition: none; } }
@keyframes wackeln { 20% { transform: translateX(-6px) rotate(-3deg); } 50% { transform: translateX(6px) rotate(3deg); } 80% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .hk.falsch { animation: none; } }

/* ---------- Website-Teile (Arena-Übersicht, Sperr-Hinweis, Pause, Kartensammlung) – Website-Tokens, Hell/Dunkel wie die Seite ---------- */
.arena-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4, 16px); margin-bottom: var(--space-5, 24px); }
.arena-kopf h1 { margin: 0; }
/* Design System 2.0 (2026-10-19): Freigabe als Statuszeile – Punkt (offen gefüllt grün, zu als Ring) + Text */
.arena-status { display: grid; grid-template-columns: auto 1fr; column-gap: 0.55rem; align-items: baseline; margin: 0; max-width: 420px; font-size: var(--fs-hilfe); color: var(--text-secondary); }
.arena-status > span { grid-column: 2; }
.arena-status::before { content: ""; grid-row: 1; width: 0.65rem; height: 0.65rem; border-radius: 50%; border: 2px solid var(--text-muted); align-self: center; }
.arena-status.ist-offen::before { background: var(--color-success); border-color: var(--color-success); }
.arena-status strong { font-family: var(--font-label); font-weight: 500; color: var(--text); }
.arena-spiele { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4, 16px); margin-bottom: var(--space-5, 24px); }
/* Spiel als ruhige Karte: Schachtel links (feste Größe), Text + Knöpfe rechts; kein Goldrahmen, keine Navy-Bildfläche */
.arena-spiele { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.arena-spiel { display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: none; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); }
.arena-spiel > div { padding: 1rem 1.2rem 1.1rem; display: grid; align-content: start; gap: 0.4rem; }
.arena-spiel__box { display: grid; place-items: center; aspect-ratio: auto; background: var(--surface-sunken); border-right: 1px solid var(--border); border-bottom: 0; }
.arena-spiel img { width: 100%; height: auto; max-height: 180px; object-fit: contain; padding: 12px; }
.arena-spiel h2 { margin: 0; font-size: var(--fs-h3); }
.arena-spiel p { margin: 0; }
.arena-spiel__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.5rem !important; }
.arena-spiel.ist-zu img { filter: grayscale(1) opacity(.6); }
.arena-spiel__zu { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: var(--fw-halbfett); font-size: var(--fs-hilfe); color: var(--color-text-muted); }
.arena-spiel__zu .icon { width: var(--icon-status); height: var(--icon-status); }
@media (max-width: 560px) {
  .arena-spiel { grid-template-columns: 1fr; }
  .arena-spiel__box { border-right: 0; border-bottom: 1px solid var(--border); }
  .arena-spiel img { max-height: 160px; }
}
/* Textkasten „So schützen die Spiele …“: Innenabstand, Rahmen */
.arena-regeln { padding: 1.25rem 0 0; margin: 1.5rem 0 1rem; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; }
.arena-regeln h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.arena-regeln ul { color: var(--text-secondary); }
.arena-regeln ul { margin: 0; padding-left: 20px; display: grid; gap: 0.3rem; }
/* Spielkarten (Box-Bild + Text) haben die feste Navy-Gold-Optik – auch im Hellmodus */
/* Spielkarten folgen dem Modus; nur die Bildfläche mit der Schachtel bleibt Navy (Bild ist auf dunklen Grund gemalt) */
.arena-spiel { background: var(--color-surface); color: var(--color-text); }
.arena-spiel p { color: var(--color-text-muted); }
.arena-sperre { max-width: 560px; margin: 40px auto; padding: 24px; text-align: center; }
.arena-sperre__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }