/* Zwölf – Werte aus fachkonzept/docs/DESIGN.md */

@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url("../fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("../fonts/fredoka-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 300; font-display: swap; src: url("../fonts/manrope-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); }

:root {
  --felt: #123B36;
  --felt-panel: rgba(0, 0, 0, .22);
  --felt-panel-dunkel: rgba(0, 0, 0, .25);
  --felt-panel-solid: #1A4A44;
  --input-bg: #0D2E2A;
  --line: #2E625A;
  --line-hell: #3D756C;
  --text: #F3EEE3;
  --text-muted: #A9C2BB;
  --text-leise: #8FAAA3;
  --accent: #F2B544;
  --accent-hell: #FFD27A;
  --accent-ink: #1B1A17;
  --ok: #7FE0B0;
  --dir-down: #9EC5FF;
  --herz: #FF8FA3;
  --karte: #FBF7EE;
  --karte-rand: #E4DCCB;
  --karte-tiefe: #D9CFBB;
  --blau: #1D4ED8;
  --gruen: #15803D;
  --rot: #B91C1C;
  --ruecken: #0F1B2D;        /* ink aus dem seereich-Brand-Kit */
  --ruecken-tiefe: #070D17;
  --gestrichelt: rgba(243, 238, 227, .38);
  --trenner: rgba(243, 238, 227, .15);
  --s: 1;                       /* Kartenskala, setzt app.js nach Fenstergroesse */
  --sicher-oben: env(safe-area-inset-top, 0px);
  --sicher-unten: env(safe-area-inset-bottom, 0px);
  --sicher-links: env(safe-area-inset-left, 0px);
  --sicher-rechts: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
/* Tischfarbe (Einstellung) */
:root[data-tisch="blau"] { --felt: #1F2A44; --felt-panel-solid: #29375A; --input-bg: #161E33; --line: #3A4A70; --line-hell: #4A5B85; }
:root[data-tisch="beere"] { --felt: #4A2433; --felt-panel-solid: #5C3042; --input-bg: #361A25; --line: #774459; --line-hell: #8A546B; }
:root[data-tisch="grau"] { --felt: #2B2B2B; --felt-panel-solid: #383838; --input-bg: #1F1F1F; --line: #4D4D4D; --line-hell: #5E5E5E; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--felt);
  color: var(--text);
  font: 400 15px/1.4 "DM Sans", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
a { color: var(--accent); }
a:hover { color: var(--accent-hell); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

#app { min-height: 100%; display: flex; justify-content: center; }

/* ---------- Bildschirme (Start, Lobby, Ende) ---------- */
.screen {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(20px + var(--sicher-oben)) calc(20px + var(--sicher-rechts)) calc(28px + var(--sicher-unten)) calc(20px + var(--sicher-links));
  gap: 22px;
}
.titel { font: 700 52px/1 "Fredoka", sans-serif; letter-spacing: -.5px; margin: 0; }
.untertitel { margin: 0; font-size: 16px; color: var(--text-muted); text-align: center; }
.h1 { margin: 0; font: 600 22px "Fredoka", sans-serif; }
.h2 { margin: 0; font-size: 16px; font-weight: 700; }
.etikett { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.leise { color: var(--text-muted); font-size: 13px; margin: 0; }

.feld {
  height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--input-bg);
  color: var(--text); font: 500 17px "DM Sans", sans-serif; padding: 0 16px; width: 100%; min-width: 0;
}
.feld::placeholder { color: var(--text-leise); }
.feld-code { height: 56px; border-radius: 16px; font: 600 22px "Fredoka", sans-serif; letter-spacing: 6px; text-transform: uppercase; flex: 1; }
.feld-code::placeholder { letter-spacing: 1px; font-size: 18px; }

.knopf {
  min-height: 48px; border-radius: 14px; border: none; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.knopf svg { flex-shrink: 0; }
.knopf-gross { min-height: 58px; border-radius: 18px; font-size: 18px; width: 100%; }
.knopf-mittel { min-height: 56px; border-radius: 16px; font-size: 17px; width: 100%; }
.knopf-primaer { background: var(--accent); color: var(--accent-ink); }
.knopf-primaer:disabled { background: rgba(242, 181, 68, .35); color: rgba(27, 26, 23, .6); }
.knopf-rahmen { background: transparent; border: 1.5px solid var(--line-hell); color: var(--text); font-weight: 600; }
.knopf-akzent-rahmen { background: transparent; border: 2px solid var(--accent); color: var(--accent); }
.knopf-hell-rahmen { background: transparent; border: 1.5px solid var(--text); color: var(--text); min-height: 46px; }
.knopf-hell-rahmen.aktiv { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.knopf-gestrichelt { width: 100%; border: 1px dashed var(--line-hell); background: rgba(243, 238, 227, .04); color: var(--text); font-weight: 500; font-size: 14px; }
.knopf-icon {
  width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--felt-panel);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0;
}
.knopf-icon.solid { background: var(--felt-panel-solid); }
.linkknopf { background: none; border: none; color: var(--accent); padding: 8px 4px; min-height: 44px; font-size: 14px; text-decoration: underline; }

/* Start */
.start { padding-top: calc(48px + var(--sicher-oben)); gap: 30px; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 12px; }
.logo-karten { position: relative; width: 150px; height: 130px; }
.logo-karten .karte { position: absolute; --kw: 70px; --kh: 98px; --kr: 12px; --kf: 40px; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.logo-karten .karte:nth-child(1) { left: 8px; top: 18px; transform: rotate(-14deg); }
.logo-karten .karte:nth-child(2) { left: 40px; top: 6px; }
.logo-karten .karte:nth-child(3) { left: 72px; top: 18px; transform: rotate(14deg); }
.spalte { display: flex; flex-direction: column; gap: 12px; }
.reihe { display: flex; gap: 10px; }
.trenner-text { display: flex; align-items: center; gap: 12px; color: var(--text-leise); font-size: 13px; }
.trenner-text::before, .trenner-text::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fuss { margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fuss-links { display: flex; gap: 24px; }

/* Powered by seereich GmbH (Farben = dunkle Variante aus dem Brand-Kit) */
.powered { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; padding-bottom: 4px; }
.powered-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
.powered-lockup { display: flex; align-items: center; gap: 10px; }
.powered-mark { width: 40px; height: 40px; flex-shrink: 0; }
.powered-text { display: flex; flex-direction: column; font-family: "Manrope", system-ui, sans-serif; line-height: 1.15; }
.powered-name { font-size: 18px; font-weight: 700; letter-spacing: .05em; color: #F4F6F5; }
.powered-name .see, .powered-name .ai { color: #7CC4CE; }
.powered-name .ai { font-weight: 300; }
.credits { margin: 2px 0 0; font-size: 11px; letter-spacing: .04em; color: var(--text-leise); opacity: .75; }
.powered-claim { font-size: 11px; font-weight: 400; letter-spacing: .08em; color: #B9CDD1; }
.hinweis { margin: 0; font-size: 13px; color: var(--text-muted); text-align: center; }
.fehlertext { margin: 0; color: #FFB4A8; font-size: 14px; font-weight: 500; min-height: 1.4em; }

/* Lobby */
.kopfzeile { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.kasten { background: var(--felt-panel-solid); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.code-kacheln { display: flex; gap: 8px; }
.code-kacheln span {
  width: 58px; height: 70px; border-radius: 12px; background: var(--karte); color: var(--accent-ink);
  font: 600 38px "Fredoka", sans-serif; display: flex; align-items: center; justify-content: center;
}
.zwei-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.spielerliste { display: flex; flex-direction: column; gap: 10px; }
.spielerzeile { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 14px; border-radius: 16px; background: var(--felt-panel-solid); }
.spielerzeile.frei { background: none; border: 1px dashed var(--line-hell); color: var(--text-leise); font-size: 15px; }
.spielerzeile .wer { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.spielerzeile .wer b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spielerzeile .wer span { font-size: 13px; color: var(--text-muted); }
.status-online { font-size: 13px; font-weight: 700; color: var(--ok); }
.status-offline { font-size: 13px; font-weight: 700; color: var(--text-leise); }
.avatar {
  --a: 40px; width: var(--a); height: var(--a); border-radius: 50%; flex-shrink: 0;
  background: var(--av, var(--accent)); color: #10223F;
  font: 600 calc(var(--a) * .45) "Fredoka", sans-serif; display: flex; align-items: center; justify-content: center;
}
.avatar.leer { background: none; border: 1px dashed var(--line-hell); color: var(--text-leise); }
.av-0 { --av: #F2B544; } .av-1 { --av: #9EC5FF; } .av-2 { --av: #FFC59E; } .av-3 { --av: #C9B8FF; }
.segment { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; padding: 5px; border-radius: 16px; background: var(--input-bg); }
.segment button { min-height: 44px; border-radius: 12px; border: none; background: transparent; color: var(--text-muted); font-weight: 600; font-size: 16px; }
.segment button[aria-pressed="true"] { background: var(--text); color: var(--felt); font-weight: 700; }
.segment button:disabled:not([aria-pressed="true"]) { opacity: .6; }
.abschnitt { display: flex; flex-direction: column; gap: 10px; }
.zeile-zwischen { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

/* Ende */
.ende { padding-top: calc(40px + var(--sicher-oben)); gap: 26px; }
.sieg { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 20px; text-align: center; }
.sieg-kreis { width: 120px; height: 120px; border-radius: 60px; background: rgba(242, 181, 68, .16); display: flex; align-items: center; justify-content: center; }
.sieg-kreis .karte { --kw: 70px; --kh: 98px; --kr: 12px; --kf: 46px; transform: rotate(-8deg); box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.sieg h1 { margin: 0; font: 700 40px "Fredoka", sans-serif; }
.panel { background: var(--felt-panel); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.stand { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stand-wer { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; text-align: center; }
.stand-wer b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.stand-mitte { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stand-zahl { font: 600 38px "Fredoka", sans-serif; white-space: nowrap; }
.plus { font-size: 13px; font-weight: 700; color: var(--ok); }
.standliste { display: flex; flex-direction: column; gap: 10px; }
.standliste div { display: flex; align-items: center; gap: 10px; }
.standliste b { flex: 1; }
.standliste .zahl { font: 600 22px "Fredoka", sans-serif; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid rgba(243,238,227,.12); padding-top: 14px; }
.kennzahlen div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kennzahlen b { font: 600 22px "Fredoka", sans-serif; }
.kennzahlen span { font-size: 12px; color: var(--text-muted); }
.banner { border-radius: 16px; background: var(--accent); color: var(--accent-ink); padding: 12px 16px; font-weight: 700; text-align: center; }

/* ---------- Karten ---------- */
.karte {
  --kw: calc(64px * var(--s)); --kh: calc(90px * var(--s)); --kr: calc(11px * var(--s));
  --kf: calc(40px * var(--s)); --ke: calc(14px * var(--s));
  position: relative; flex-shrink: 0;
  width: var(--kw); height: var(--kh); border-radius: var(--kr);
  padding: 0; margin: 0;
  background: var(--karte); border: 1px solid var(--karte-rand); color: var(--gruen);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
  display: flex; align-items: center; justify-content: center;
  font: 600 var(--kf)/1 "Fredoka", sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.karte .ecke { position: absolute; top: calc(var(--kh) * .04); left: calc(var(--kw) * .1); font-size: var(--ke); line-height: 1; }
.karte.w1 { color: var(--blau); } .karte.w2 { color: var(--gruen); } .karte.w3 { color: var(--rot); }
.karte.joker { background: var(--accent); border-color: #C98E1E; color: #5A3A00; }
.karte.joker .stern { font-family: system-ui, sans-serif; font-size: calc(var(--kf) * .9); }
.karte.leer {
  background: transparent; border: 1.5px dashed var(--gestrichelt); box-shadow: none;
  color: rgba(243, 238, 227, .5); font-size: calc(var(--kf) * .72);
}
.karte.ruecken {
  background: var(--ruecken); border: calc(3px * var(--s)) solid var(--karte); color: var(--accent);
  font-weight: 700; font-size: calc(var(--kf) * .4);
  box-shadow: 2px 3px 0 var(--ruecken-tiefe), 4px 6px 0 rgba(0, 0, 0, .25);
}
.karte.ruecken .ruecken-marke { width: 78%; height: auto; }
.karte.ruecken.leer-stapel { opacity: .35; box-shadow: none; }
.karte.dick { box-shadow: 2px 3px 0 var(--karte-tiefe), 4px 6px 0 rgba(0, 0, 0, .28); }
.karte.joker.dick { box-shadow: 2px 3px 0 #C98E1E, 4px 6px 0 rgba(0, 0, 0, .28); }
button.karte:disabled { cursor: default; }

/* Groessen (Handy) */
.k-hand    { --kw: calc(64px * var(--s)); --kh: calc(90px * var(--s));  --kr: calc(11px * var(--s)); --kf: calc(40px * var(--s)); --ke: calc(14px * var(--s)); box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.k-haufen  { --kw: calc(58px * var(--s)); --kh: calc(82px * var(--s));  --kr: calc(10px * var(--s)); --kf: calc(36px * var(--s)); --ke: calc(13px * var(--s)); }
.k-stapel  { --kw: calc(74px * var(--s)); --kh: calc(104px * var(--s)); --kr: calc(12px * var(--s)); --kf: calc(46px * var(--s)); --ke: calc(15px * var(--s)); }
.k-ablage  { --kw: calc(52px * var(--s)); --kh: calc(74px * var(--s));  --kr: calc(9px * var(--s));  --kf: calc(30px * var(--s)); --ke: calc(13px * var(--s)); box-shadow: 0 -1px 0 rgba(0,0,0,.12), 0 3px 0 rgba(0,0,0,.25); }
.k-gegner  { --kw: calc(48px * var(--s)); --kh: calc(68px * var(--s));  --kr: calc(9px * var(--s));  --kf: calc(28px * var(--s)); --ke: calc(11px * var(--s)); }
.k-minist  { --kw: calc(34px * var(--s)); --kh: calc(48px * var(--s));  --kr: calc(7px * var(--s));  --kf: calc(20px * var(--s)); --ke: 0px; box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.k-mini    { --kw: calc(22px * var(--s)); --kh: calc(30px * var(--s));  --kr: calc(5px * var(--s));  --kf: calc(13px * var(--s)); --ke: 0px; box-shadow: none; }
.k-minist .ecke, .k-mini .ecke { display: none; }

/* Zustaende */
.karte.gewaehlt { transform: translateY(calc(-14px * var(--s))); outline: 3px solid var(--accent); outline-offset: 3px; z-index: 2; }
.karte.ziel, .ablage-spalte.ziel .karte:last-child { outline: 3px solid var(--accent); outline-offset: 3px; }
.karte.letzter-zug { outline: 3px solid var(--text); outline-offset: 3px; }
.wackeln { animation: wackeln .32s ease; }
@keyframes wackeln { 0%,100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 6px; } 60% { translate: -4px; } 80% { translate: 4px; } }
.karte.zieht { opacity: .35; }
.flug {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; margin: 0;
  transition: transform .3s cubic-bezier(.3, .7, .3, 1);
}
.schwebt { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; margin: 0; transform-origin: center; }

/* ---------- Spieltisch (Handy hoch) ---------- */
.tisch {
  width: 100%; max-width: 520px; height: 100dvh; display: flex;
}
.tisch-haupt {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding: calc(14px * var(--s) + var(--sicher-oben)) calc(14px + var(--sicher-rechts)) calc(18px * var(--s) + var(--sicher-unten)) calc(14px + var(--sicher-links));
  gap: calc(12px * var(--s));
  overflow: hidden;
}
.tisch-kopf { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 10px; }
.tisch-kopf .marke, .tisch-kopf .raumcode { display: none; }
.chip {
  min-height: 36px; padding: 0 16px; border-radius: 18px; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
  background: rgba(0,0,0,.28); border: 1px solid rgba(243,238,227,.2);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); flex-shrink: 0; }
.chip.dran { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip.dran::before { background: var(--accent-ink); }
.chip.offline::before { background: #FFB4A8; }

/* Gegner (2 Spieler) */
.gegner { background: var(--felt-panel); border-radius: 18px; padding: calc(12px * var(--s)); display: flex; flex-direction: column; gap: calc(10px * var(--s)); border: 2px solid transparent; }
.gegner.aktiv { border-color: var(--accent); }
.gegner-kopf { display: flex; align-items: center; gap: 10px; }
.gegner-kopf .avatar { --a: 32px; }
.gegner-kopf b { font-size: 15px; }
.gegner-kopf span { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.gegner-reihe { display: flex; align-items: flex-end; gap: calc(14px * var(--s)); }
.gegner-ablagen { display: flex; gap: calc(8px * var(--s)); }
.mit-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mit-text > span { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.mit-text > span.fett { font-weight: 700; color: var(--text); }
.senkrecht { width: 1px; align-self: stretch; background: var(--trenner); flex-shrink: 0; }
.gegner-ablagen button { background: none; border: none; padding: 0; }

/* Gegner kompakt (3–4 Spieler) */
.gegner-raster { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.gegner-kompakt { border-radius: 16px; padding: 10px 8px; background: var(--felt-panel); border: 2px solid transparent; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gegner-kompakt.aktiv { border-color: var(--accent); }
.gegner-kompakt .kopf { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gegner-kompakt .kopf .avatar { --a: 24px; }
.gegner-kompakt .kopf b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gegner-kompakt .stapelzeile { display: flex; align-items: center; gap: 8px; }
.gegner-kompakt .uebrig { display: flex; flex-direction: column; line-height: 1.2; }
.gegner-kompakt .uebrig b { font: 600 18px "Fredoka", sans-serif; }
.gegner-kompakt .uebrig span { font-size: 11px; color: var(--text-muted); }
.gegner-kompakt .minis { display: flex; gap: 4px; }
.gegner-kompakt .minis button { background: none; border: none; padding: 0; }

.zugmeldung {
  align-self: center; min-height: 34px; padding: 0 14px; border-radius: 17px; background: var(--text); color: var(--felt);
  font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; max-width: 100%;
}
.zugmeldung span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mitte */
.mitte { display: flex; flex-direction: column; gap: 8px; }
.haufen-reihe { display: flex; gap: calc(10px * var(--s)); align-items: flex-start; }
.haufen { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.haufen .richtung { font-size: 11px; font-weight: 700; white-space: nowrap; }
.haufen .richtung.ab { color: var(--dir-down); }
.haufen .braucht { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.haufen.ist-ziel .braucht { color: var(--accent); }
.trenner-senkrecht { width: 1px; height: calc(82px * var(--s)); background: var(--trenner); flex-shrink: 0; }
.haufen-reihe .mit-text > span { color: var(--text-muted); }

/* Eigene Ablagen + Spielstapel: Ablagen links, Stapel rechts */
.eigenes { display: flex; flex-direction: row-reverse; gap: calc(14px * var(--s)); align-items: flex-start; padding-top: 4px; }
.mein-stapel { position: relative; }
.mein-stapel .zaehler {
  position: absolute; top: -8px; right: -10px; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: var(--text); color: var(--felt); font: 700 13px "DM Sans", sans-serif; display: flex; align-items: center; justify-content: center; z-index: 3;
}
.ablagen { display: flex; gap: calc(8px * var(--s)); flex: 1; justify-content: flex-end; }
.ablage-spalte {
  display: flex; flex-direction: column; align-items: center; width: calc(52px * var(--s));
  background: none; border: none; padding: 0; color: inherit; min-height: calc(74px * var(--s));
}
.ablage-spalte .karte.leer { color: rgba(243,238,227,.5); }
.ablage-spalte.ziel .karte.leer { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Hand */
.hand-bereich { margin-top: auto; display: flex; flex-direction: column; gap: calc(10px * var(--s)); }
.hand-hinweis { font-size: 13px; font-weight: 700; color: var(--accent); text-align: right; }
.hand-hinweis.ruhig { color: var(--text-muted); font-weight: 400; }
.hand { display: flex; gap: calc(8px * var(--s)); align-items: flex-end; min-height: calc(104px * var(--s)); }
.hand.wartet { opacity: .55; }
.hand-leer { color: var(--text-muted); font-size: 14px; align-self: center; }

/* Aktionsleiste */
.aktion { display: flex; gap: 10px; align-items: center; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--felt-panel-dunkel); min-height: 66px; }
.aktion p { margin: 0; flex: 1; font-size: 13px; line-height: 1.35; color: #DCE6E2; }
.reaktionen { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.reaktion {
  min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(243,238,227,.25);
  background: rgba(0,0,0,.2); color: var(--text); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.reaktion.herz { width: 44px; padding: 0; color: var(--herz); }
.hand-knopf, .tablet-hinweis { display: none; }

/* Seitenleiste – nur Tablet */
.seite { display: none; }
.verlauf { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.4; overflow-y: auto; min-height: 0; }
.verlauf li { display: flex; gap: 10px; }
.verlauf li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 4px; background: var(--av, var(--accent)); flex-shrink: 0; }

/* ---------- Tablet quer ---------- */
@media (min-width: 900px) and (orientation: landscape) {
  .tisch { max-width: none; }
  .tisch-haupt { padding: calc(22px * var(--s) + var(--sicher-oben)) 28px calc(26px * var(--s) + var(--sicher-unten)); gap: calc(20px * var(--s)); }
  .tisch-kopf { justify-content: flex-start; gap: 14px; }
  .tisch-kopf .marke { display: inline; font: 700 22px "Fredoka", sans-serif; }
  .tisch-kopf .raumcode { display: inline; font-size: 14px; color: var(--text-muted); }
  .tisch-kopf .chip { margin-left: auto; min-height: 38px; }
  .tisch-kopf .knopf-reaktion { display: none; }
  .gegner { align-self: center; flex-direction: row; align-items: center; gap: 22px; padding: 14px 22px; border-radius: 20px; }
  .gegner-kopf { flex-direction: column; gap: 6px; width: 84px; text-align: center; }
  .gegner-kopf .avatar { --a: 44px; }
  .gegner-kopf span { margin: 0; font-size: 12px; }
  .gegner-reihe { gap: 22px; align-items: center; }
  .gegner-raster { align-self: center; width: min(100%, 860px); }
  .k-hand    { --kw: calc(78px * var(--s)); --kh: calc(110px * var(--s)); --kr: calc(13px * var(--s)); --kf: calc(48px * var(--s)); --ke: calc(16px * var(--s)); }
  .k-haufen  { --kw: calc(84px * var(--s)); --kh: calc(118px * var(--s)); --kr: calc(13px * var(--s)); --kf: calc(52px * var(--s)); --ke: calc(16px * var(--s)); }
  .k-stapel  { --kw: calc(92px * var(--s)); --kh: calc(128px * var(--s)); --kr: calc(14px * var(--s)); --kf: calc(58px * var(--s)); --ke: calc(18px * var(--s)); }
  .k-ablage  { --kw: calc(70px * var(--s)); --kh: calc(98px * var(--s));  --kr: calc(11px * var(--s)); --kf: calc(40px * var(--s)); --ke: calc(15px * var(--s)); }
  .k-gegner  { --kw: calc(62px * var(--s)); --kh: calc(88px * var(--s));  --kr: calc(10px * var(--s)); --kf: calc(38px * var(--s)); --ke: calc(13px * var(--s)); }
  .mitte .etikett { display: none; }
  .haufen-reihe { justify-content: center; gap: calc(18px * var(--s)); }
  .haufen .richtung { font-size: 12px; }
  .haufen .braucht { font-size: 13px; }
  .trenner-senkrecht { height: calc(118px * var(--s)); margin: 0 6px; }
  .eigenes { justify-content: center; gap: 28px; margin-top: auto; }
  .ablagen { flex: 0 0 auto; gap: 12px; }
  .ablage-spalte { width: calc(70px * var(--s)); min-height: calc(98px * var(--s)); }
  .hand-bereich { margin-top: 0; flex-direction: row; align-items: flex-end; justify-content: center; gap: 24px; }
  .hand-bereich > .zeile-zwischen { display: none; }
  .hand { min-height: calc(124px * var(--s)); gap: 12px; }
  .aktion { display: none; }
  .hand-knopf { display: inline-flex; align-self: center; height: 50px; padding: 0 20px; border-radius: 16px; }
  .tablet-hinweis { display: block; text-align: center; font-size: 14px; color: var(--accent); font-weight: 700; min-height: 1.4em; margin: 0; }
  .seite {
    display: flex; flex-direction: column; gap: 18px; width: 290px; flex-shrink: 0;
    background: rgba(0,0,0,.24); padding: calc(26px + var(--sicher-oben)) calc(20px + var(--sicher-rechts)) calc(26px + var(--sicher-unten)) 20px;
  }
  .seite h2 { margin: 0; font: 600 18px "Fredoka", sans-serif; }
  .seite .reaktionen { justify-content: flex-start; margin-top: auto; }
  .seite .reaktion { background: transparent; padding: 0 14px; }
  .seite .reaktion.herz { padding: 0; }
  .zugmeldung { display: none; }
}

/* ---------- Overlays ---------- */
.toasts { position: fixed; left: 0; right: 0; top: calc(70px + var(--sicher-oben)); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 80; pointer-events: none; padding: 0 16px; }
.toast {
  background: var(--text); color: var(--felt); font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); animation: toast-rein .2s ease; max-width: 100%;
}
.toast.reaktion-toast { background: var(--accent); color: var(--accent-ink); font-size: 17px; }
.toast.fehler { background: #FFB4A8; color: #4A0E06; }
.toast.weg { opacity: 0; transition: opacity .3s; }
@keyframes toast-rein { from { opacity: 0; transform: translateY(-8px); } }

.blatt-hintergrund { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.blatt {
  width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; background: var(--felt-panel-solid); color: var(--text);
  border-radius: 24px 24px 0 0; padding: 22px 20px calc(22px + var(--sicher-unten)); display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.4);
}
@media (min-width: 700px) { .blatt-hintergrund { align-items: center; } .blatt { border-radius: 24px; } }
.blatt h2 { margin: 0; font: 600 20px "Fredoka", sans-serif; }
.blatt h3 { margin: 6px 0 0; font-size: 15px; }
.blatt p, .blatt li { margin: 0; color: #DCE6E2; font-size: 14px; line-height: 1.5; }
.blatt ul, .blatt ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.menue-liste { display: flex; flex-direction: column; gap: 8px; }
.menue-liste .knopf { justify-content: flex-start; width: 100%; }
.farbwahl { display: flex; gap: 12px; }
.farbwahl button { width: 48px; height: 48px; border-radius: 50%; border: 3px solid transparent; }
.farbwahl button[aria-pressed="true"] { border-color: var(--accent); }
.farbe-gruen { background: #123B36; } .farbe-blau { background: #1F2A44; } .farbe-beere { background: #4A2433; } .farbe-grau { background: #2B2B2B; }
.farbwahl button { box-shadow: inset 0 0 0 1px rgba(243,238,227,.3); }
.verbindung-weg {
  position: fixed; left: 50%; bottom: calc(16px + var(--sicher-unten)); transform: translateX(-50%); z-index: 85;
  background: #FFB4A8; color: #4A0E06; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .flug { transition-duration: 0s; }
  .wackeln { animation: none; }
}

/* Logo/Spielende: grosse Einzelkarten ohne Eckzahl */
.logo-karten .karte .ecke, .sieg-kreis .karte .ecke { display: none; }
.aktion .reaktionen { flex-wrap: nowrap; gap: 6px; }
.aktion .reaktion { padding: 0 12px; font-size: 13px; }