/* Hellseher: Akzent Weinrot; gespielt wird an einem Wahrsager-Tisch aus weinrotem Samt mit Goldrand (hell und dunkel gleich).
   In der Mitte die Kristallkugel mit dem Trumpf. Karten wie Tarotkarten: helles Pergament, leicht in der Farbe ihres Elements getönt,
   große Zahl + Zeichen in der Ecke (im Fächer sieht man nur die Ecke). Sterne nachtblau mit Gold, Nebel grau. */
:root{--accent:#8c1f4a;--accent-dunkel:#6a1636;--on-accent:#ffffff;--kw:64px;
  --samt:#6e1733;--samt-hell:#932447;--samt-dunkel:#320818;--gold:#e3b75a;--gold-hell:#f4d88f;--gold-dunkel:#9a7226}
@media (prefers-color-scheme: dark){:root:not([data-theme="hell"]){--accent:#e58bb0;--on-accent:#2a0614}}
:root[data-theme="dunkel"]{--accent:#e58bb0;--on-accent:#2a0614}
/* Elemente: Feuer, Wasser, Erde, Luft (ec = Farbe, ed = dunkel für Schrift auf hellem Grund, eg = Leuchten in der Kugel) */
.e0{--ec:#d8452c;--ed:#a3260f;--eg:#ff7a45}
.e1{--ec:#2271d6;--ed:#15479a;--eg:#5aaaff}
.e2{--ec:#2f9548;--ed:#1c6a2f;--eg:#5fd68a}
.e3{--ec:#e2a20f;--ed:#8f6006;--eg:#ffd54d}

/* ======== Zeichen ======== */
.sym{display:block;fill:currentColor;flex:none}
.sym.s-luft,.sym.s-block{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sym.s-block{stroke-width:1.9}
.sym.s-nebel .w{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* ======== Karte ======== */
.hsk{--w:var(--kw);width:var(--w);height:calc(var(--w) * 1.5);flex:none;position:relative;display:inline-block;box-sizing:border-box;padding:0;margin:0;border:0;
  border-radius:calc(var(--w) * .1);font-family:var(--f-display);font-weight:800;line-height:1;color:var(--ed,#3a2a1a);text-align:left;
  background:radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--ec,#c9b28a) 24%,#fffaf0) 0 30%,transparent 31%),
    linear-gradient(160deg,color-mix(in srgb,var(--ec,#c9b28a) 6%,#fffdf6) 0%,color-mix(in srgb,var(--ec,#c9b28a) 24%,#faf1de) 100%);
  box-shadow:inset 0 0 0 calc(var(--w) * .045) #fffdf6,inset 0 0 0 calc(var(--w) * .065) color-mix(in srgb,var(--ec,#c9b28a) 80%,#fff),0 1px 3px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.12);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .16s ease,filter .2s,box-shadow .2s}
.hsk-e{position:absolute;top:calc(var(--w) * .085);left:calc(var(--w) * .1);display:flex;flex-direction:column;align-items:center;gap:calc(var(--w) * .03)}
.hsk-e b{font-size:calc(var(--w) * .32);letter-spacing:-.04em}
.hsk.lang .hsk-e b{font-size:calc(var(--w) * .27);letter-spacing:-.08em}
.hsk-e .sym{width:calc(var(--w) * .2);height:calc(var(--w) * .2);color:var(--ec)}
.hsk-e.u{top:auto;left:auto;bottom:calc(var(--w) * .085);right:calc(var(--w) * .1);transform:rotate(180deg)}
.hsk-m{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.hsk-m .sym{width:calc(var(--w) * .46);height:calc(var(--w) * .46);color:var(--ec);opacity:.9}
.hsk-t{position:absolute;left:0;right:0;bottom:calc(var(--w) * .1);text-align:center;font-size:calc(var(--w) * .14);letter-spacing:.08em;text-transform:uppercase}
/* Stern: Nachthimmel mit Gold – gewinnt immer */
.hsk.stern{color:var(--gold);
  background:radial-gradient(circle at 22% 70%,rgba(255,255,255,.7) 0 .6px,transparent 1.4px),radial-gradient(circle at 78% 28%,rgba(255,255,255,.6) 0 .6px,transparent 1.4px),
    radial-gradient(circle at 70% 82%,rgba(255,255,255,.5) 0 .5px,transparent 1.2px),radial-gradient(circle at 50% 48%,#3f4596 0%,#1d2052 55%,#0e0f2a 100%);
  box-shadow:inset 0 0 0 calc(var(--w) * .045) #0e0f2a,inset 0 0 0 calc(var(--w) * .06) var(--gold),0 1px 3px rgba(0,0,0,.45)}
.hsk.stern .hsk-e .sym{color:var(--gold);width:calc(var(--w) * .26);height:calc(var(--w) * .26)}
.hsk.stern .hsk-m .sym{color:var(--gold-hell);width:calc(var(--w) * .56);height:calc(var(--w) * .56);filter:drop-shadow(0 0 calc(var(--w) * .08) rgba(244,216,143,.75))}
/* Nebel: grau, verliert immer */
.hsk.nebel{color:#4b5262;background:radial-gradient(circle at 50% 50%,#f4f5f8 0 30%,transparent 60%),linear-gradient(165deg,#e3e6ec,#aeb4c1);
  box-shadow:inset 0 0 0 calc(var(--w) * .045) #eef0f4,inset 0 0 0 calc(var(--w) * .06) #9aa1ae,0 1px 3px rgba(0,0,0,.45)}
.hsk.nebel .hsk-e .sym{color:#6b7385;width:calc(var(--w) * .26);height:calc(var(--w) * .26)}
.hsk.nebel .hsk-m .sym{color:#fff;width:calc(var(--w) * .58);height:calc(var(--w) * .58);filter:drop-shadow(0 1px 1px rgba(60,66,80,.45))}
/* Rückseite: weinrot mit goldener Kugel */
.hsk.ruecken{background:radial-gradient(circle at 50% 50%,var(--gold-hell) 0 9%,var(--gold-dunkel) 10% 12%,transparent 13%),
    radial-gradient(circle at 50% 50%,transparent 0 22%,rgba(227,183,90,.55) 23% 25%,transparent 26%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 3px,transparent 3px 7px),linear-gradient(160deg,#5a1530,#260616);
  box-shadow:inset 0 0 0 calc(var(--w) * .05) #260616,inset 0 0 0 calc(var(--w) * .065) var(--gold-dunkel),0 1px 3px rgba(0,0,0,.45)}

.hsk.gesperrt{filter:brightness(.74) saturate(.4)}
.hsk.weg{visibility:hidden}
.hsk.matt{filter:brightness(.62) saturate(.6)}
.hsk.wackeln{animation:hs-wackeln .35s}
@keyframes hs-wackeln{25%{transform:translateX(-5px) rotate(-3deg)}75%{transform:translateX(5px) rotate(3deg)}}
.hsk.hs-flug{position:fixed;z-index:70;margin:0;pointer-events:none}

/* ======== Spielfläche ======== */
.hs{display:flex;flex-direction:column;gap:10px;width:100%;margin-inline:auto;container:hs / inline-size}
.spiel.laeuft:has(.hs) > .kopfzeile{flex-direction:row;align-items:baseline;justify-content:center;gap:10px}
.spiel.laeuft:has(.hs) > .kopfzeile h2{font-size:17px}
.spiel.laeuft:has(.hs) > .kopfzeile .sub{display:none}
.spiel.laeuft:has(.hs) > .toast:empty{display:none}

/* der Tisch: weinroter Samt, ein paar Sterne, Goldrand */
.hs-tisch{position:relative;display:flex;flex-direction:column;color:#fff}
.hs-oval,.schmal .hs-tisch{
  background:radial-gradient(circle at 18% 30%,rgba(255,226,160,.35) 0 1px,transparent 1.6px),radial-gradient(circle at 82% 24%,rgba(255,226,160,.3) 0 1px,transparent 1.6px),
    radial-gradient(circle at 70% 78%,rgba(255,226,160,.28) 0 1px,transparent 1.6px),radial-gradient(circle at 28% 74%,rgba(255,226,160,.25) 0 1px,transparent 1.6px),
    radial-gradient(ellipse at 50% 44%,var(--samt-hell),var(--samt) 55%,var(--samt-dunkel) 100%)}
.quer .hs-tisch{flex:1 1 auto;min-height:0;padding:56px 92px 52px}
.hs-oval{position:relative;flex:1 1 auto;min-height:300px;container-type:size;border-radius:50% / 46%;
  box-shadow:inset 0 0 0 2px rgba(227,183,90,.55),inset 0 0 60px rgba(0,0,0,.45),0 0 0 9px #2a0713,0 0 0 11px var(--gold-dunkel),0 0 0 12px var(--gold),0 16px 40px rgba(0,0,0,.35)}
.hs-oval::before{content:"";position:absolute;inset:6%;border-radius:inherit;border:1.5px dashed rgba(227,183,90,.18);pointer-events:none}

/* Ecke unten links: Runde, Trumpf, Ansagen (oben sitzen bei 5–6 Spielern die Plätze im Weg); oben rechts: Block */
.hs-info{position:absolute;left:0;bottom:0;z-index:2;margin:0;display:flex;flex-direction:column;font-size:12.5px;line-height:1.4;color:var(--muted);text-align:left;white-space:nowrap}
.hs-info > b{color:var(--ink);font-size:13.5px}
.hs-info b[class^="e"],.hs-kopf-text b b{color:var(--ed)}
:root[data-theme="dunkel"] .hs-info b[class^="e"]{color:var(--eg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="hell"]) .hs-info b[class^="e"]{color:var(--eg)}}
.hs-summe .rauf{color:#c0392b;font-weight:700}.hs-summe .runter{color:#2f7d4f;font-weight:700}.hs-summe .genau{font-weight:700}
.hs-blockknopf{position:absolute;right:0;top:0;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 10px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:13.5px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.hs-blockknopf .sym{width:17px;height:17px;color:var(--accent)}
.hs-blockknopf:hover,.hs-blockknopf[aria-expanded="true"]{border-color:var(--accent)}

/* ---- Plätze rund um den Tisch (quer): Lage über --x/--y ---- */
.hs-sitz{--x:50%;--y:50%;position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:4}
.s-t{--x:50%;--y:0%} .s-tl{--x:17%;--y:9%} .s-tr{--x:83%;--y:9%} .s-l{--x:0%;--y:50%} .s-r{--x:100%;--y:50%} .s-ich{--x:50%;--y:100%}
.hs-schild{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:7px;row-gap:2px;align-items:center;
  min-width:152px;max-width:196px;box-sizing:border-box;padding:5px 12px 6px 5px;border-radius:15px;text-align:left;
  background:linear-gradient(180deg,#3e0f23,#1d0510);border:1.5px solid rgba(227,183,90,.32);box-shadow:0 6px 16px rgba(0,0,0,.45);transition:border-color .25s,box-shadow .25s}
.hs-schild .av{grid-row:1 / 3;width:32px;height:32px;font-size:14px;flex:none}
.hs-name{font-size:13.5px;line-height:1.2;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hs-pkt{font-family:var(--f-mono);font-weight:700;font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}
.hs-zeile{grid-column:2 / 4;display:flex;align-items:center;min-height:15px}
.s-ich .hs-schild{min-width:176px;padding:6px 14px 7px 6px}
.s-ich .hs-schild .av{width:36px;height:36px}
.s-ich .hs-name{font-size:15px}
.s-ich .hs-pkt{font-size:14.5px}
.hs-sitz.dran .hs-schild{border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,183,90,.32),0 0 26px rgba(227,183,90,.45),0 6px 16px rgba(0,0,0,.45)}
.hs-sitz.gewinnt .hs-schild{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold),0 0 30px rgba(227,183,90,.65)}
.hs-sitz.weg .hs-schild{opacity:.6}
.hs-sitz.weg .hs-name::after{content:"";display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:#ff8a7a;vertical-align:middle}
/* Ansage und Stiche als Perlen */
.hs-perlen{display:flex;align-items:center;gap:3px;font-size:11.5px;white-space:nowrap}
.hs-perlen i{width:9px;height:9px;border-radius:50%;flex:none}
.hs-perlen i.voll{background:var(--gold);box-shadow:0 0 6px rgba(227,183,90,.6)}
.hs-perlen i.offen{box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.55)}
.hs-perlen i.zuviel{background:#ff6b5a}
.hs-perlen b{margin-left:3px;font-weight:700;color:rgba(255,255,255,.78)}
.hs-perlen.genau b{color:#a7e8b4}
.hs-perlen.drueber b{color:#ffb0a6}
.hs-denkt{font-size:11.5px;font-style:italic;color:rgba(255,255,255,.66)}
.s-ich .hs-perlen,.s-ich .hs-denkt{font-size:12.5px}
.s-ich .hs-perlen i{width:10px;height:10px}
/* Karten in der Hand der anderen: kleine Rückseite mit Zahl */
.hs-anz{position:absolute;right:-7px;top:-9px;display:grid;place-items:center;min-width:18px;height:24px;padding:0 3px;box-sizing:border-box;border-radius:4px;
  font-family:var(--f-mono);font-size:11px;font-weight:700;color:#fff;background:linear-gradient(160deg,#6a1a39,#2a0717);box-shadow:inset 0 0 0 1.5px var(--gold-dunkel),0 2px 4px rgba(0,0,0,.5)}
.hs-geber{position:absolute;left:-8px;top:-9px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;font-style:normal;font-weight:900;font-size:11px;
  background:linear-gradient(180deg,var(--gold-hell),var(--gold-dunkel));color:#3a2200;box-shadow:0 2px 4px rgba(0,0,0,.45)}
.hs-zeit{position:absolute;left:16px;right:16px;bottom:-1px;height:4px;border-radius:2px;overflow:hidden;background:rgba(0,0,0,.45)}
.hs-zeit b{display:block;height:100%;width:100%;background:var(--gold);transition:width .4s linear}
.hs-zeit b.knapp{background:#ff6b5a}

/* ---- Tischmitte ---- */
.hs-mitte{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.hs-mitte > *,.hs-mitte button{pointer-events:auto}
.hs-kern{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.hs-kern-reihe{display:flex;align-items:center;gap:clamp(14px,4cqw,34px)}
.hs-tk{--kw:clamp(36px,13cqh,64px);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:rgba(255,255,255,.7)}
.hs-tk .hsk{transform:rotate(-6deg)}
.hs-mitte-text{margin:0;font-size:14px;font-weight:700;color:rgba(255,255,255,.88);text-shadow:0 1px 2px rgba(0,0,0,.4)}
/* Kristallkugel: Glas mit Lichtpunkt, innen das Zeichen des Trumpfs, darunter ein goldener Sockel */
.hs-kugel{--g:clamp(58px,23cqh,118px);--kc:#b9b4cf;position:relative;width:var(--g);height:var(--g);flex:none;border-radius:50%;display:grid;place-items:center;margin-bottom:calc(var(--g) * .14);
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.9) 0 5%,rgba(255,255,255,.25) 11%,transparent 28%),
    radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--kc) 65%,#fff) 0%,color-mix(in srgb,var(--kc) 55%,#1a1040) 60%,#100828 100%);
  box-shadow:0 0 calc(var(--g) * .35) color-mix(in srgb,var(--kc) 55%,transparent),inset 0 calc(var(--g) * -.08) calc(var(--g) * .18) rgba(0,0,0,.5),inset 0 calc(var(--g) * .04) calc(var(--g) * .1) rgba(255,255,255,.25);
  animation:hs-schimmer 4s ease-in-out infinite}
.hs-kugel::after{content:"";position:absolute;left:50%;bottom:calc(var(--g) * -.17);width:calc(var(--g) * .66);height:calc(var(--g) * .22);transform:translateX(-50%);z-index:-1;
  background:linear-gradient(180deg,var(--gold-hell),var(--gold-dunkel));clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);border-radius:2px}
.hs-kugel .sym{width:calc(var(--g) * .44);height:calc(var(--g) * .44);color:#fff;filter:drop-shadow(0 0 calc(var(--g) * .08) var(--kc)) drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.hs-kugel b{font-family:var(--f-display);font-size:calc(var(--g) * .42);color:#fff;text-shadow:0 0 12px #fff}
.hs-kugel.t0{--kc:#ff7a45}.hs-kugel.t1{--kc:#5aaaff}.hs-kugel.t2{--kc:#5fd68a}.hs-kugel.t3{--kc:#ffd54d}
.hs-kugel.ohne .sym{color:rgba(255,255,255,.85)}
.hs-kugel.wahl{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.9) 0 5%,rgba(255,255,255,.25) 11%,transparent 28%),
  conic-gradient(from 0deg,#ff7a45,#ffd54d,#5fd68a,#5aaaff,#ff7a45);animation:hs-wirbel 3s linear infinite}
.hs-kugel.klein{--g:clamp(44px,15cqh,64px)}
@keyframes hs-schimmer{50%{box-shadow:0 0 calc(var(--g) * .5) color-mix(in srgb,var(--kc) 70%,transparent),inset 0 calc(var(--g) * -.08) calc(var(--g) * .18) rgba(0,0,0,.5),inset 0 calc(var(--g) * .04) calc(var(--g) * .1) rgba(255,255,255,.25)}}
@keyframes hs-wirbel{to{filter:hue-rotate(360deg)}}

/* ---- Stich: jede Karte liegt vor dem, der sie gelegt hat (quer) ---- */
.hs-stich{--skw:clamp(40px,19cqh,88px);position:absolute;inset:0}
.hs-mitte.mit-stich .hs-kugel{--g:clamp(42px,17cqh,96px)}
.hs-slot{--w:var(--skw);--kw:var(--skw);position:absolute;width:var(--skw);height:calc(var(--skw) * 1.5);border-radius:calc(var(--skw) * .1)}
/* jede Karte auf halbem Weg zwischen Tischmitte und dem Platz, der sie gelegt hat */
.hs-slot{left:var(--sx);top:var(--sy);transform:translate(-50%,-50%) rotate(var(--sd,0deg))}
.p-ich{--sx:50%;--sy:75%}
.p-t{--sx:50%;--sy:25%}
.p-tl{--sx:31%;--sy:30%;--sd:-8deg}
.p-tr{--sx:69%;--sy:30%;--sd:8deg}
.p-l{--sx:21%;--sy:50%;--sd:-5deg}
.p-r{--sx:79%;--sy:50%;--sd:5deg}
/* 5–6 am Tisch: oben links/rechts und links/rechts sitzt jemand – Karten weiter auseinander */
:is(.n5,.n6) .hs-stich{--skw:clamp(38px,17cqh,80px)}
:is(.n5,.n6) .p-tl{--sx:35%;--sy:30%} :is(.n5,.n6) .p-tr{--sx:65%;--sy:30%}
:is(.n5,.n6) .p-l{--sx:19%;--sy:60%} :is(.n5,.n6) .p-r{--sx:81%;--sy:60%}
.hs-slot.dran:not(.voll){box-shadow:inset 0 0 0 2px rgba(227,183,90,.55);background:rgba(227,183,90,.08);animation:hs-puls 1.4s ease-in-out infinite}
@keyframes hs-puls{50%{background:rgba(227,183,90,.18)}}
.hs-slot .hsk{display:block}
.hs-slot.sieger .hsk{box-shadow:inset 0 0 0 calc(var(--w) * .045) #fffdf6,0 0 0 3px var(--gold),0 0 26px rgba(244,216,143,.8);transform:scale(1.07)}
.hs-slot.sieger .hsk.stern{box-shadow:inset 0 0 0 calc(var(--w) * .045) #0e0f2a,0 0 0 3px var(--gold),0 0 26px rgba(244,216,143,.8)}
.hs-slot.sieger::after{content:"★";position:absolute;right:-9px;top:-11px;z-index:2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:#3a2200;font-size:13px;box-shadow:0 2px 6px rgba(0,0,0,.45)}
/* neu gelegt: kommt aus der Richtung des Platzes */
.hsk.neu{animation:hs-legen .34s cubic-bezier(.2,1.1,.4,1) both}
.p-t .hsk.neu{--vx:0;--vy:-46px}.p-tl .hsk.neu{--vx:-40px;--vy:-36px}.p-tr .hsk.neu{--vx:40px;--vy:-36px}
.p-l .hsk.neu{--vx:-50px;--vy:0}.p-r .hsk.neu{--vx:50px;--vy:0}.p-ich .hsk.neu{--vx:0;--vy:46px}
@keyframes hs-legen{from{transform:translate(var(--vx,0),var(--vy,-30px)) scale(.75) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}

/* ---- Ansage / Trumpfwahl (quer in der Tischmitte) ---- */
.hs-mitte.mit-wahl{grid-template-rows:auto auto;align-content:center;gap:6px}
.hs-wahl{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:min(520px,80cqw);padding:14px 18px;border-radius:20px;text-align:center;
  background:rgba(20,3,10,.55);box-shadow:inset 0 0 0 1px rgba(227,183,90,.35),0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.hs-frage{margin:0;font-family:var(--f-display);font-weight:800;font-size:19px;line-height:1.25;color:#fff}
.hs-frage b{color:var(--gold-hell)}
.hs-zahlen{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.hs-zahl{min-width:46px;height:46px;padding:0 10px;border-radius:12px;border:0;font-family:var(--f-display);font-weight:800;font-size:20px;color:#3a2200;
  background:linear-gradient(180deg,var(--gold-hell),var(--gold));box-shadow:0 3px 0 var(--gold-dunkel),0 6px 14px rgba(0,0,0,.3);transition:transform .1s,box-shadow .1s}
.hs-zahl:hover:not(:disabled){transform:translateY(-2px)}
.hs-zahl:active:not(:disabled),.hs-zahl.gewaehlt{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-dunkel),0 2px 6px rgba(0,0,0,.3)}
.hs-zahl:disabled{background:rgba(255,255,255,.12);color:rgba(255,255,255,.35);box-shadow:none;text-decoration:line-through;cursor:not-allowed}
.hs-zahlen.viele .hs-zahl{min-width:40px;height:40px;font-size:17px;padding:0 6px}
.hs-wahl-info{margin:0;font-size:13px;color:rgba(255,255,255,.8)}
.hs-wahl-info b{color:var(--gold-hell)}
.hs-wahl .uhr,.hs-status .uhr{color:rgba(255,255,255,.8);margin-left:4px}
.hs-wahl .uhr.knapp{color:#ffb0a6}
.hs-elemente{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hs-element{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:82px;padding:10px 8px 8px;border-radius:14px;border:0;font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(170deg,color-mix(in srgb,var(--ec) 80%,#fff),var(--ed));box-shadow:0 4px 0 color-mix(in srgb,var(--ed) 70%,#000),0 8px 16px rgba(0,0,0,.3)}
.hs-element .sym{width:34px;height:34px;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.hs-element:hover{transform:translateY(-2px)}

/* ---- Abrechnung nach jeder Runde ---- */
.hs-abrechnung{display:flex;flex-direction:column;gap:8px;min-width:min(360px,70cqw);max-width:min(460px,80cqw);max-height:92cqh;overflow:auto;padding:14px 16px;border-radius:20px;
  background:rgba(20,3,10,.72);box-shadow:inset 0 0 0 1px rgba(227,183,90,.4),0 12px 32px rgba(0,0,0,.4);animation:hs-auf .35s ease both}
@keyframes hs-auf{from{transform:translateY(8px) scale(.97);opacity:0}}
.hs-ab-titel{margin:0;font-family:var(--f-display);font-weight:800;font-size:17px;color:var(--gold-hell);text-align:center}
.hs-abrechnung ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.hs-abrechnung li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:8px;padding:5px 8px;border-radius:10px;background:rgba(255,255,255,.06);font-size:14px;text-align:left}
.hs-abrechnung li.ich{background:rgba(227,183,90,.14)}
.hs-abrechnung .av{width:24px;height:24px;font-size:11px}
.hs-ab-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-ab-wie{font-size:12px;color:rgba(255,255,255,.7);white-space:nowrap}
.hs-ab-d{font-family:var(--f-mono);font-size:14px;min-width:44px;text-align:right}
li.gut .hs-ab-d{color:#9be3a9} li.schlecht .hs-ab-d{color:#ffb0a6}
.hs-ab-summe{font-family:var(--f-mono);font-weight:700;color:var(--gold);min-width:44px;text-align:right}
.hs-weiter{margin:0;font-size:12.5px;color:rgba(255,255,255,.7);text-align:center}

/* ---- Spielblock (aufklappbar) ---- */
.hs-block{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:20px;color:#fff;text-align:left;
  background:#1c040e;box-shadow:inset 0 0 0 1.5px var(--gold-dunkel),0 18px 40px rgba(0,0,0,.45);animation:hs-auf .25s ease both}
.hs-block-kopf{display:flex;align-items:center;gap:10px}
.hs-block-kopf b{font-family:var(--f-display);font-size:18px;color:var(--gold-hell)}
.hs-block-kopf span{flex:1;font-size:13px;color:rgba(255,255,255,.7)}
.hs-zu{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1}
.hs-block-tab{flex:1;min-height:0;overflow:auto;border-radius:12px;background:rgba(255,255,255,.04)}
.hs-block table,.hs-endblock table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.hs-block th,.hs-block td{padding:5px 8px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
.hs-block thead th{position:sticky;top:0;background:#2a0816;font-size:12px;font-weight:700}
.hs-block th .av,.hs-endblock th .av{width:22px;height:22px;font-size:10px;margin:0 auto 2px;display:grid}
.hs-block th span,.hs-endblock th span{display:block;max-width:80px;margin:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-block td:first-child,.hs-endblock td:first-child{font-weight:700;white-space:nowrap}
.hs-block td:first-child .sym,.hs-endblock td:first-child .sym{display:inline-block;width:13px;height:13px;margin-left:4px;vertical-align:-1px;color:var(--eg)}
.hs-block td small,.hs-endblock td small{display:block;font-size:11px;opacity:.75}
.hs-block td b,.hs-block td.gut b,.hs-block td.schlecht b{font-family:var(--f-mono);font-size:13.5px;color:#fff}
.hs-block td.gut small{color:#9be3a9;opacity:1}.hs-block td.schlecht small{color:#ffb0a6;opacity:1}
.hs-block tr.jetzt td{color:rgba(255,255,255,.65)}
.hs-block-info{margin:0;font-size:12px;color:rgba(255,255,255,.6)}
.hs-letzter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.8)}
.hs-letzter > div{display:flex;gap:6px;--kw:34px}
.hs-l-k{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px}
.hs-l-k.sieger .hsk{box-shadow:0 0 0 2px var(--gold),0 0 10px rgba(227,183,90,.6)}
.hs-l-k small{max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- unter dem Tisch: Status + deine Hand ---- */
.hs-unten{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0}
.hs-status{margin:0;font-size:14.5px;color:var(--muted);text-align:center;min-height:1.4em}
.hs-status.du{color:var(--accent);font-weight:800}
.hs-status .uhr{color:var(--muted)}
.uhr{font-family:var(--f-mono);font-size:14px;font-weight:600}
.uhr.knapp{color:#d7263d;font-weight:800}
.hs-hand{container-type:inline-size;display:flex;justify-content:center;width:100%;--kw:clamp(56px,11vh,102px);padding:20px 4px 2px;min-height:calc(var(--kw) * 1.5 + 22px);box-sizing:border-box}
.hs-hand > .hsk + .hsk{margin-left:clamp(calc(var(--kw) * -.72),calc((100cqw - var(--n, 8) * var(--kw)) / max(var(--n, 8) - 1, 1)),8px)}
.hs-hand .hsk{cursor:default}
.hs-hand.amzug .hsk:not(.gesperrt){cursor:pointer}
@media (hover:hover) and (pointer:fine){.hs-hand.amzug .hsk:not(.gesperrt):hover{transform:translateY(-16px)}}
.hs-hand .hsk.gewaehlt{transform:translateY(-18px);box-shadow:inset 0 0 0 calc(var(--w) * .045) #fffdf6,0 0 0 3px var(--accent),0 10px 18px rgba(0,0,0,.3)}
.hs-hand .hsk.stern.gewaehlt{box-shadow:inset 0 0 0 calc(var(--w) * .045) #0e0f2a,0 0 0 3px var(--accent),0 10px 18px rgba(0,0,0,.3)}
.hs-hand.austeilen .hsk{animation:hs-austeilen .42s calc(var(--i, 0) * 45ms) cubic-bezier(.2,1,.3,1) both}
@keyframes hs-austeilen{from{transform:translateY(-70px) rotate(-10deg) scale(.6);opacity:0}}

/* schwebender Hinweis („Du musst Feuer bedienen“) – verschiebt nichts */
.hs-hinweis{position:fixed;left:50%;bottom:30%;z-index:66;max-width:calc(100vw - 32px);padding:9px 16px;border-radius:999px;background:rgba(40,6,20,.95);color:#fff;
  font-weight:700;font-size:14px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;opacity:0;transform:translate(-50%,6px);transition:opacity .2s,transform .2s}
.hs-hinweis.zeigen{opacity:1;transform:translate(-50%,0)}
.hs-tag{color:var(--accent)}

/* ---- Ergebnis der Partie ---- */
.hs-ende{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.hs-ende-kugel{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.9) 0 5%,transparent 26%),radial-gradient(circle at 50% 58%,#5b62c9,#1d2052 70%);box-shadow:0 0 24px rgba(244,216,143,.55)}
.hs-ende-kugel .sym{width:34px;height:34px;color:var(--gold-hell)}
.hs-ende b{font-family:var(--f-display);font-weight:800;font-size:clamp(20px,4vw,28px)}
.hs-ende small{font-size:14px;color:var(--muted)}
.hs-endblock .tabelle{max-height:340px;overflow:auto}
.hs-endblock th,.hs-endblock td{text-align:center}
.hs-endblock td b,.hs-endblock td.gut b,.hs-endblock td.schlecht b{font-family:var(--f-mono);color:var(--ink)}
.hs-endblock td.gut small{color:var(--gut);opacity:1}.hs-endblock td.schlecht small{color:var(--danger);opacity:1}

@media (prefers-reduced-motion: reduce){.hsk.neu,.hs-hand.austeilen .hsk,.hs-kugel,.hs-kugel.wahl,.hs-slot.dran,.hs-abrechnung,.hs-block{animation:none}.hs-zeit b{transition:none}}

/* ======== PC: Fläche füllt die Höhe ======== */
@media (min-width:1200px){
  html.raum-ansicht .app{max-width:1440px}
}
@media (min-width:881px){
  html.raum-ansicht #links.spiel.laeuft:has(.hs) > .hs{flex:1 1 auto;min-height:0}
}
/* PC mit wenig Höhe (Laptop): Raum-Zeile weg, Plätze und Karten kleiner */
@media (min-width:881px) and (max-height:820px){
  .spiel.laeuft:has(.hs) > .kopfzeile{display:none}
  .hs{gap:6px}
  .quer .hs-tisch{padding:46px 86px 44px}
  .hs-oval{min-height:250px}
  .hs-schild{min-width:136px;padding:4px 10px 5px 4px}
  .hs-schild .av{width:28px;height:28px;font-size:12px}
  .s-ich .hs-schild{min-width:160px}
  .s-ich .hs-schild .av{width:32px;height:32px}
  .hs-hand{--kw:clamp(50px,10.5vh,80px);padding-top:16px}
  .hs-frage{font-size:17px}
  .hs-zahl{min-width:40px;height:40px;font-size:18px}
  .hs-wahl{padding:10px 14px;gap:8px}
  .hs-abrechnung li{padding:3px 8px;font-size:13px}
}

/* ======== Hochkant (Handy, schmale Spalte): die anderen in einer Reihe oben, Stich als Reihe, du darunter ======== */
.schmal .hs-tisch{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px 8px 10px;border-radius:22px;
  box-shadow:inset 0 0 0 1.5px rgba(227,183,90,.55),inset 0 0 40px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.25)}
.hs-kopf{display:flex;align-items:center;gap:8px;min-width:0;container-type:size;height:46px;flex:none}
.hs-kopf .hs-kugel{--g:36px;margin:0 0 6px 4px}
.hs-kopf .hs-kugel::after{bottom:-6px}
.hs-kopf-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;text-align:left}
.hs-kopf-text b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-kopf-text b b{color:var(--eg)}
.hs-kopf-text span{font-size:12px;color:rgba(255,255,255,.75)}
.hs-kopf-text .rauf{color:#ffb0a6}.hs-kopf-text .runter{color:#9be3a9}
.schmal .hs-blockknopf{position:static;background:rgba(0,0,0,.28);border-color:rgba(227,183,90,.45);color:#fff;padding:6px 11px 6px 8px;font-size:13px}
.schmal .hs-blockknopf .sym{color:var(--gold)}
.hs-reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 8px;padding-top:6px;flex:none}
.schmal .hs-sitz{position:relative;left:auto;top:auto;transform:none}
.schmal .hs-schild{grid-template-columns:minmax(0,1fr) auto;min-width:0;width:104px;max-width:none;padding:4px 8px 5px;border-radius:12px;column-gap:4px}
.schmal .hs-schild .av{display:none}
.schmal .hs-name{font-size:12px}
.schmal .hs-pkt{font-size:11.5px}
.schmal .hs-zeile{grid-column:1 / 3}
.schmal .hs-perlen{gap:2px;font-size:10.5px}
.schmal .hs-perlen i{width:7px;height:7px}
.schmal .hs-denkt{font-size:10.5px}
.schmal .hs-anz{min-width:16px;height:20px;font-size:10px;right:-5px;top:-7px}
.schmal .hs-geber{width:18px;height:18px;font-size:10px;left:-6px;top:-7px}
.schmal .hs-zeit{left:8px;right:8px}
.schmal .hs-mitte{position:relative;inset:auto;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;container-type:inline-size}
.schmal .hs-stich{position:static;inset:auto;display:flex;justify-content:center;align-items:flex-start;gap:6px;width:100%;--skw:min(66px,calc((100cqw - 40px) / var(--sn, 4)))}
.n2,.n3{--sn:3}.n4{--sn:4}.n5{--sn:5}.n6{--sn:6}
.schmal .hs-slot{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;height:auto;display:flex;flex-direction:column;align-items:center;gap:3px}
.schmal .hs-slot::before{content:"";display:block;width:var(--skw);height:calc(var(--skw) * 1.5);border-radius:calc(var(--skw) * .1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.schmal .hs-slot.voll::before{display:none}
.schmal .hs-slot.dran:not(.voll){box-shadow:none;background:none;animation:none}
.schmal .hs-slot.dran:not(.voll)::before{box-shadow:inset 0 0 0 2px rgba(227,183,90,.7);background:rgba(227,183,90,.1);animation:hs-puls 1.4s ease-in-out infinite}
.schmal .hs-slot small{max-width:calc(var(--skw) + 8px);font-size:11px;color:rgba(255,255,255,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schmal .hs-slot.sieger small{color:var(--gold-hell);font-weight:800}
.schmal .hsk.neu{--vx:0;--vy:-24px}
.schmal .p-ich .hsk.neu{--vy:30px}
.schmal .hs-mitte-text{font-size:14px}
.schmal .hs-kern{display:flex;flex-direction:column;align-items:center;gap:10px}
.schmal .hs-tk{--kw:54px;font-size:11px}
.schmal .hs-abrechnung{min-width:0;width:100%;max-width:none;max-height:none;padding:10px 10px;border-radius:14px}
.schmal .hs-abrechnung li{font-size:13px;gap:6px;padding:3px 6px}
.hs-ich-platz{display:flex;justify-content:center;flex:none}
.schmal .s-ich .hs-schild{grid-template-columns:auto minmax(0,1fr) auto;width:auto;min-width:200px;padding:4px 12px 5px 4px;border-radius:999px}
.schmal .s-ich .hs-schild .av{display:grid;width:28px;height:28px;font-size:12px}
.schmal .s-ich .hs-zeile{grid-column:2 / 4}
.schmal .s-ich .hs-name{font-size:13.5px}
.schmal .hs-block{inset:0;padding:10px;border-radius:22px}
.schmal .hs-wahl{max-width:none;width:100%;box-sizing:border-box;padding:10px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);backdrop-filter:none}
.schmal .hs-frage{font-size:16px;color:var(--ink)}
.schmal .hs-frage b{color:var(--accent)}
.schmal .hs-wahl-info{color:var(--muted);font-size:12.5px}
.schmal .hs-wahl-info b{color:var(--accent)}
.schmal .hs-wahl .uhr{color:var(--muted)}
.schmal .hs-zahlen{width:100%;gap:6px}
.schmal .hs-zahl{min-width:46px;height:44px;font-size:19px}
.schmal .hs-zahlen.viele .hs-zahl{min-width:38px;height:36px;font-size:16px}
.schmal .hs-elemente{width:100%;gap:6px}
.schmal .hs-element{min-width:0;padding:8px 4px 6px;font-size:13px}
.schmal .hs-element .sym{width:28px;height:28px}
.schmal .hs-hand{--kw:clamp(48px,19cqw,76px);padding-top:16px}
.schmal .hs-hand:has(> .hsk:nth-child(6)){--kw:clamp(44px,16cqw,66px)}
.schmal .hs-hand:has(> .hsk:nth-child(9)){--kw:clamp(42px,13cqw,58px)}
.schmal .hs-hand:has(> .hsk:nth-child(13)){--kw:clamp(40px,12cqw,52px)}
.schmal .hs-hand > .hsk + .hsk{margin-left:clamp(calc(var(--kw) * -.74),calc((100cqw - var(--n, 8) * var(--kw)) / max(var(--n, 8) - 1, 1)),6px)}

@media (max-width:860px){
  #main > .raum:has(.spiel.laeuft .hs) > .spalte-rechts{display:none}
}
/* Handy: Seite genau bildschirmhoch, kein Scrollen – der Tisch gibt nach, die Hand bleibt unten im Bild */
@media (max-width:600px){
  .app:has(.spiel.laeuft .hs){padding-top:6px;gap:6px;padding-bottom:10px}
  .app:has(.spiel.laeuft .hs) > header{gap:8px}
  .app:has(.spiel.laeuft .hs) h1{font-size:20px}
  .app:has(.spiel.laeuft .hs) #hallo{display:none}
  .app:has(.spiel.laeuft .hs) > header :is(.heimknopf,.chatknopf,.themeknopf){width:36px;height:36px}
  .app:has(.spiel.laeuft .hs) > header svg{width:16px;height:16px}
  .spiel.laeuft:has(.hs){gap:6px;min-height:calc(100svh - 64px)}
  .spiel.laeuft:has(.hs) > .kopfzeile{display:none}
  .hs{gap:6px}
  html:has(.spiel.laeuft .hs),html:has(.spiel.laeuft .hs) body{height:100%;overflow:hidden;overscroll-behavior:none}
  body > .app:has(.spiel.laeuft .hs){height:100dvh;min-height:0;box-sizing:border-box;overflow:hidden;padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}
  .app:has(.spiel.laeuft .hs) > .rechtsfuss{display:none}
  .app:has(.spiel.laeuft .hs) > #main{flex:1;min-height:0;display:flex;flex-direction:column}
  .app:has(.spiel.laeuft .hs) #main > .raum{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0}
  .app:has(.spiel.laeuft .hs) #links.spiel.laeuft{flex:1;min-height:0;overflow:hidden}
  .app:has(.spiel.laeuft .hs) #links.spiel.laeuft > .hs{flex:1 1 auto;min-height:0}
  .hs-status{font-size:13.5px}
}