/* Farbenjagd: Akzent Violett; Karten in vier Farben (Rot, Gelb, Grün, Blau) + Schwarz – jede Farbe hat zusätzlich eine Form (● ▲ ■ ◆) */
:root{--accent:#6c3fb5;--accent-dunkel:#4f2d87;--on-accent:#ffffff;--kw:56px;
  --fj0:#d7263d;--fj1:#f2b705;--fj2:#1f9d55;--fj3:#1e6fd9;--fj4:#23262d}
@media (prefers-color-scheme: dark){:root:not([data-theme="hell"]){--accent:#a98be0;--on-accent:#160b2a}}
:root[data-theme="dunkel"]{--accent:#a98be0;--on-accent:#160b2a}
.c0{--fc:var(--fj0)}.c1{--fc:var(--fj1)}.c2{--fc:var(--fj2)}.c3{--fc:var(--fj3)}.c4{--fc:var(--fj4)}

/* ---- Karte: farbige Karte, helles Innenfeld mit abgeschrägten Ecken, Zeichen in der Mitte ---- */
.fk{--w:var(--kw);width:var(--w);height:calc(var(--w) * 1.45);flex:none;position:relative;display:inline-grid;place-items:center;padding:0;margin:0;
  border-radius:calc(var(--w) * .14);background:var(--fc);color:var(--fc);border:calc(var(--w) * .05) solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.12);font-family:var(--f-display);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fk::before{content:"";position:absolute;inset:calc(var(--w) * .1);background:#fff;border-radius:calc(var(--w) * .07)}
.fk.c4::before{background:#fff}
.fk > *{position:relative}
.fj-z{font-size:calc(var(--w) * .58);font-weight:800;line-height:1}
.fk.lang .fj-z{font-size:calc(var(--w) * .44)}
.fj-e{position:absolute;top:calc(var(--w) * .13);left:calc(var(--w) * .13);color:var(--fc);font-size:calc(var(--w) * .19);font-weight:800;line-height:1;display:flex;flex-direction:column;align-items:center}
.fk.c1 .fj-e{color:#b78400}
.fk.c4 .fj-e{color:#23262d}
.fj-e small{font-size:calc(var(--w) * .14)}
.fj-e.u{top:auto;left:auto;bottom:calc(var(--w) * .13);right:calc(var(--w) * .13);transform:rotate(180deg)}
.fk.c1 .fj-z{color:#b78400}
/* schwarze Karten: Farbrad aus den vier Farben */
.fj-rad{width:calc(var(--w) * .62);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--fj0) 0 25%,var(--fj1) 0 50%,var(--fj2) 0 75%,var(--fj3) 0);box-shadow:inset 0 0 0 calc(var(--w) * .03) #fff}
.fj-rad b{font-size:calc(var(--w) * .3);font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.fk.ruecken{background:repeating-linear-gradient(135deg,var(--accent) 0 5px,color-mix(in srgb,var(--accent) 70%,#000) 5px 10px);color:#fff}
.fk.ruecken::before{display:none}
.fk.ruecken span{font-weight:800;font-size:calc(var(--w) * .28);letter-spacing:.04em;background:var(--accent);padding:2px 5px;border-radius:6px;border:2px solid #fff}
button.fk{cursor:pointer;transition:transform .14s,box-shadow .14s,opacity .14s,filter .14s}
button.fk.passt{transform:translateY(-6px);box-shadow:0 0 0 2px var(--accent),0 6px 12px rgba(0,0,0,.28)}
button.fk.gewaehlt{transform:translateY(-20px);box-shadow:0 0 0 3px var(--accent),0 10px 18px rgba(0,0,0,.35);z-index:2}
button.fk.aus{filter:brightness(.62) saturate(.55)}
@media (hover:hover){button.fk.passt:hover{transform:translateY(-12px)}}
button.fk:focus-visible{outline:3px solid var(--accent);outline-offset:2px;z-index:3}
button.fk.ruecken{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 50%,transparent),0 3px 8px rgba(0,0,0,.3)}
button.fk.ruecken:hover{transform:translateY(-4px)}

/* ======== Spielfläche: oben der Tisch (andere + Ablage), unten du (Statusleiste + Hand) ======== */
.fj{display:flex;flex-direction:column;gap:14px;width:100%;max-width:820px;margin-inline:auto}
/* während der Runde: Kopf nur eine schmale Zeile („Raum ABCDE · Runde 1 von 3“) */
.spiel.laeuft:has(.fj) > .kopfzeile{flex-direction:row;align-items:baseline;justify-content:center;gap:10px}
.spiel.laeuft:has(.fj) > .kopfzeile h2{font-size:17px}
.spiel.laeuft:has(.fj) > .kopfzeile .sub{display:none}

/* ---- Tisch ---- */
.fj-tisch{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px 14px 20px;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 55%,color-mix(in srgb,var(--accent) 16%,var(--surface)),color-mix(in srgb,var(--accent) 5%,var(--surface)) 70%);
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
.fj-sitze{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;width:100%}
.fj-sitz{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:color-mix(in srgb,var(--surface) 82%,transparent);
  border:1px solid var(--line);min-width:0;transition:box-shadow .2s,border-color .2s}
.fj-sitz .av{width:32px;height:32px;font-size:14px}
.fj-sitz.dran{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.fj-sitz.dran .av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.fj-sitz-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0;text-align:left}
.fj-sitz-text b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.fj-sitz-n{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.fj-sitz.eine .fj-sitz-n{color:var(--danger);font-weight:700}
.fj-faecher{display:flex;align-items:flex-end;height:16px;padding-left:6px}
.fj-faecher i{width:11px;height:16px;margin-left:-6px;border-radius:2px;border:1.5px solid #fff;box-shadow:0 0 0 .5px rgba(0,0,0,.25);
  background:repeating-linear-gradient(135deg,var(--accent) 0 2px,color-mix(in srgb,var(--accent) 70%,#000) 2px 4px)}
.fj-erwisch{padding:6px 12px;font-size:13px;margin-left:2px;animation:fj-puls .6s ease-in-out infinite alternate}

.fj-mitte{--kw:96px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,4vw,40px);width:100%}
.fj-feld{display:flex;flex-direction:column;align-items:center;gap:8px}
.fj-feld:first-child{justify-self:end}
.fj-feld.fj-richtung{justify-self:start}
.fj-feld small{font-size:13px;color:var(--muted);white-space:nowrap}
.fj-feld > .fk{--w:64px}
.fj-farbring{padding:10px 14px;border-radius:20px;background:color-mix(in srgb,var(--fc) 20%,transparent);box-shadow:inset 0 0 0 3px var(--fc);transition:background .3s,box-shadow .3s}
.fj-ablage{position:relative;width:calc(var(--kw) + 30px);height:calc(var(--kw) * 1.45);display:flex;justify-content:center}
.fj-ablage .fk{position:absolute;top:0}
.fj-ablage .fk.a3{left:0;transform:rotate(-8deg)}
.fj-ablage .fk.a2{left:10px;transform:rotate(-3deg)}
.fj-ablage .fk.a1{left:20px;transform:rotate(3deg)}
.fj-ablage .fk.a0{left:30px;transform:rotate(6deg);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.fj-ablage .fk:only-child{left:15px}
.fj-ft{color:var(--fc);font-weight:800}
.fj-ft.c1{color:#b78400}
@media (prefers-color-scheme: dark){:root:not([data-theme="hell"]) .fj-ft.c1{color:var(--fj1)}}
:root[data-theme="dunkel"] .fj-ft.c1{color:var(--fj1)}
.fj-richtung span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-size:26px;line-height:1;color:var(--accent);transition:transform .4s}
.fj-richtung.links span{transform:scaleX(-1)}
.fj-alarm{margin:0;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger);font-size:14px;font-weight:700;text-align:center}
.fj-rufzeit{font-family:var(--f-mono)}
.fj-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;font-size:13px;color:var(--muted)}
.fj-log li:first-child{font-size:15px;color:var(--ink)}
.fj-ruf-t{color:var(--accent)}
/* Zeit: dünner Balken an der Unterkante des Tisches */
.fj-zeitleiste{position:absolute;left:0;right:0;bottom:0;height:5px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.fj-zeitleiste i{display:block;height:100%;width:100%;background:var(--accent);transition:width .6s linear}

/* ---- du: Statusleiste + Hand ---- */
.fj-ich{--kw:84px;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
.fj-leiste{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:10px 12px 10px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.fj-leiste.ich{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.fj-status{display:flex;align-items:baseline;gap:10px;min-width:0}
.fj-status b{font-family:var(--f-display);font-weight:800;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fj-leiste.ich .fj-status b{color:var(--accent);font-size:20px}
.uhr{font-family:var(--f-mono);font-size:15px;color:var(--muted)}
.uhr.knapp{color:var(--danger);font-weight:700}
.fj-knoepfe{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fj-knoepfe .btn{min-width:96px}
.fj-hinweis{margin:-2px 0 0;font-size:14px;color:var(--muted);text-align:center}
.fj-hinweis b{color:var(--ink)}
.fj-rufknopf.an{opacity:.75}
.fj-rufknopf.eilt{display:flex;flex-direction:column;align-items:center;line-height:1.2;align-self:center;animation:fj-puls .6s ease-in-out infinite alternate}
.fj-rufknopf.eilt small{font-size:12px;font-weight:600;opacity:.9}
.fj-farbwahl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(100%,460px);align-self:center}
.fj-fw{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border:0;border-radius:14px;background:var(--fc);color:#fff;font:700 15px var(--f-body,inherit);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.fj-fw span{font-size:20px;line-height:1}
.fj-fw.c1{color:#3b2a00}
.fj-fw:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fj-ich.zuschauer .warte{margin:0;text-align:center}
/* Hand: eine Reihe, die Karten überlappen sich gerade so weit, dass alle hineinpassen (--n = Anzahl, setzt spiel.js) */
.fj-hand{container-type:inline-size;display:flex;justify-content:center;padding:24px 4px 6px;min-height:calc(var(--kw) * 1.45 + 30px)}
.fj-hand > .fk + .fk{margin-left:clamp(calc(var(--kw) * -.68), calc((100cqw - var(--n, 7) * var(--kw)) / max(var(--n, 7) - 1, 1)), 8px)}
@keyframes fj-puls{from{transform:scale(1)}to{transform:scale(1.05)}}

/* ---- Ergebnis ---- */
.fj-sieger{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.fj-sieger span{font-size:52px;line-height:1}
.fj-sieger b{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,4vw,30px)}
.fj-sieger small{font-size:14px;color:var(--muted)}
.fj-rest{--kw:22px;display:flex;flex-wrap:wrap;gap:2px;margin-top:4px}
.fj-rest .fk{border-width:1px}
.fj-rest .fj-e{display:none}

/* ---- Handy ---- */
@media (max-width:600px){
  .fj{gap:10px}
  .fj-tisch{padding:12px 8px 16px;gap:12px;border-radius:18px}
  .fj-sitze{gap:6px}
  .fj-sitz{padding:4px 10px 4px 4px;gap:6px}
  .fj-sitz .av{width:26px;height:26px;font-size:12px}
  .fj-sitz-text b{font-size:13px;max-width:76px}
  .fj-faecher{display:none}
  .fj-mitte{--kw:76px;gap:12px}
  .fj-feld > .fk{--w:50px}
  .fj-farbring{padding:8px 10px}
  .fj-richtung span{width:38px;height:38px;font-size:22px}
  .fj-ich{--kw:66px}
  .fj-leiste{padding:8px 8px 8px 12px}
  .fj-status b{font-size:16px}
  .fj-leiste.ich .fj-status b{font-size:18px}
  .fj-knoepfe{width:100%;justify-content:stretch}
  .fj-knoepfe .btn{flex:1;min-width:0}
  .fj-hand{padding-top:22px}
}
/* PC: breitere Seite, Chat-Spalte schmaler (wie Shithead) */
@media (min-width:1200px){
  html.raum-ansicht .app{max-width:1440px}
  html.raum-ansicht #main > .raum{grid-template-columns:minmax(0,1fr) clamp(320px,28vw,420px);gap:24px}
}
@media (min-width:1200px) and (min-height:900px){
  .fj-mitte{--kw:112px}
  .fj-feld > .fk{--w:74px}
  .fj-ich{--kw:96px}
}
/* PC mit wenig Höhe: Tisch flacher, damit die Hand ohne Scrollen sichtbar bleibt */
@media (min-width:881px) and (max-height:820px){
  .fj{gap:10px}
  .fj-tisch{padding:10px 12px 14px;gap:10px}
  .fj-mitte{--kw:76px}
  .fj-feld > .fk{--w:52px}
  .fj-log li:not(:first-child){display:none}
  .fj-ich{--kw:72px}
  .fj-hand{padding-top:20px}
}
@media (min-width:1400px){html.raum-ansicht #main > .raum > :first-child{padding-inline:24px}}
@media (prefers-reduced-motion: reduce){button.fk,.fj-richtung span,.fj-zeitleiste i{transition:none}.fj-erwisch,.fj-rufknopf.eilt{animation:none}}
/* PC: Spielfläche füllt die Höhe – Tisch in der Mitte, deine Hand unten am Rand (wie am echten Kartentisch) */
@media (min-width:881px){
  html.raum-ansicht #links.spiel.laeuft:has(.fj) > .fj{flex:1 0 auto}
  html.raum-ansicht .fj-tisch{flex:1 0 auto}
  html.raum-ansicht .fj-mitte,html.raum-ansicht .fj-log{margin-top:auto}
  .fj-sitz{padding:7px 14px 7px 7px;gap:10px}
  .fj-sitz .av{width:38px;height:38px;font-size:16px}
  .fj-sitz-text b{font-size:15px;max-width:140px}
  .fj-sitz-n{font-size:13px}
  /* Stapel und Hand wachsen mit der Bildschirmhöhe */
  .fj-mitte{--kw:clamp(64px,12vh,150px)}
  .fj-feld > .fk{--w:calc(var(--kw) * .66)}
  .fj-ich{--kw:clamp(64px,10vh,112px)}
}