:root{
  --ink:#12100C; --wood:#221A13;
  --brass:#C9A34E; --chalk:#E8E2D4;
  --shadow:0 6px 14px rgba(0,0,0,.45);
  --cw:88;                            /* Kartenbreite als Zahl */
  --card-w:calc(var(--cw)*1px);
  --card-h:calc(var(--cw)*1.5929px);  /* Bildflaeche der Karte ist 226 x 360 */
  --sc:calc(var(--cw)/226);           /* Massstab fuers Blatt */
  --shw:1582; --shh:1207;             /* Groesse von cards.webp */
  --sheet:url("../assets/cards.webp");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;
  touch-action:manipulation}   /* kein Scrollen, kein Ziehen zum Neuladen */
body{
  background:radial-gradient(120% 80% at 50% 0%,#2C2118 0%,var(--ink) 70%);
  color:var(--chalk);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;justify-content:center;
  height:100dvh;                     /* genau ein Bildschirm, nicht mehr */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app{width:100%;max-width:470px;display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;overflow:hidden;padding:6px 12px 8px}

header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 7px;border-bottom:1px solid #3B2E22}
h1{font:700 16px/1 Georgia,"Hoefler Text",serif;letter-spacing:.26em;text-transform:uppercase;margin:0;color:var(--brass)}
h1 small{display:block;letter-spacing:.12em;font-size:10.5px;font-weight:600;color:#9C8B6E;margin-top:3px}
.bummerl{display:flex;flex-direction:column;gap:5px;font-size:11px}
.brow{display:flex;align-items:center;gap:5px}
.brow b{color:#9C8B6E;font-weight:700;width:34px;text-align:right;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pip{width:11px;height:11px;border-radius:50%;border:1.5px solid #4A3B2C}
.pip.on{border-color:var(--chalk);box-shadow:inset 0 0 0 1px rgba(232,226,212,.25)}
.pip.neu{background:var(--brass);border-color:var(--brass);animation:pipAn .7s ease-out backwards}
@keyframes pipAn{0%{transform:scale(.3);box-shadow:0 0 0 0 rgba(201,163,78,.85)}
  60%{transform:scale(1.35);box-shadow:0 0 0 7px rgba(201,163,78,0)}
  100%{transform:scale(1)}}

/* ---------- Spielerseiten ---------- */
.side{padding:3px 0}
.tag{display:flex;align-items:center;gap:10px;min-height:44px;
  font:600 12px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9C8B6E}
.tag .who{flex:0 0 52px}
.line{display:flex;align-items:center;gap:12px}
.pts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.pts b{font:700 16px ui-monospace,Menlo,monospace;color:var(--chalk);
  flex:0 0 28px;text-align:right}
.pts .bar{flex:0 0 52px;height:4px;border-radius:3px;background:#3B2E22;overflow:hidden}
/* Punkt ist immer da, damit beim Wechsel nichts springt */
.pts::after{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#3B2E22}
.pts.act b{color:var(--brass)}
.pts.act::after{background:var(--brass);animation:blink 1.1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.fan{display:flex;flex:1;min-height:var(--card-h)}
.fan .card+.card{margin-left:calc(var(--card-w)*-0.48)}

/* ---------- Karten (Bilder aus assets/cards.webp) ---------- */
.card{
  width:var(--card-w);height:var(--card-h);border-radius:7px;flex:0 0 auto;position:relative;
  box-shadow:var(--shadow);user-select:none;overflow:hidden;background-color:#F4EFE4;
  background-image:var(--sheet);
  background-size:calc(var(--shw)*var(--sc)*1px) calc(var(--shh)*var(--sc)*1px);
  background-position:calc(var(--sx)*var(--sc)*-1px) calc(var(--sy)*var(--sc)*-1px);
  background-repeat:no-repeat;
}

/* ---------- franzoesisches Blatt: gezeichnete Karten ---------- */
body.fr{--card-h:calc(var(--cw)*1.5px)}
body.fr .card{
  background:linear-gradient(160deg,#F1E8D4 0%,#DCCFB4 100%);
  border:1px solid rgba(0,0,0,.35);color:var(--c,#2A2018)
}
body.fr .card .ix{position:absolute;display:flex;flex-direction:column;align-items:center;
  gap:1px;line-height:1;color:var(--c)}
body.fr .card .ix span{font:700 13px/1 Georgia,serif}
body.fr .card .ix .sym{font-size:13px;line-height:1;display:block}
body.fr .card .tl{top:4px;left:4px}
body.fr .card .tr{top:4px;right:4px}
body.fr .card .bl{bottom:4px;left:4px;transform:rotate(180deg)}
body.fr .card .br{bottom:4px;right:4px;transform:rotate(180deg)}
body.fr .card .mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--c)}
body.fr .card .mid .sym{font-size:30px;line-height:1;opacity:.9}
body.fr .card.back{background:repeating-linear-gradient(45deg,#3A2A20 0 5px,#31231A 5px 10px);
  border:1px solid #4A392C}
body.fr .card.back::after{content:"";position:absolute;inset:5px;
  border:1px solid rgba(201,163,78,.35);border-radius:3px}
.hand .card{cursor:pointer;transition:transform .12s ease}
.hand .card.playable:active{transform:translateY(-8px)}
.hand .card.blocked{filter:brightness(.55) saturate(.35);cursor:not-allowed}

/* ---------- Spielflaeche ---------- */
/* Trumpfanzeige: mittig unter Ablage und Stapel, Zeichen in beiden Blaettern gleich gross */
.tbadge{position:absolute;left:0;right:0;bottom:auto;
  top:calc(50% + var(--card-h)/2 + 8px);        /* direkt unter den gelegten Karten */
  display:flex;justify-content:center;
  align-items:center;gap:8px;pointer-events:none;
  font:600 12px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#B0A084}
.tbadge .sicon{flex:0 0 auto}
.tbadge .tsym{flex:0 0 auto;width:25px;height:30px;display:flex;align-items:center;
  justify-content:center;font-size:25px;line-height:1}
.sicon{display:inline-block;--ic:.236;   /* Farbzeichen 108 x 127 -> 25 x 30 */
  width:calc(108px*var(--ic));height:calc(127px*var(--ic));
  background-image:var(--sheet);
  background-size:calc(var(--shw)*var(--ic)*1px) calc(var(--shh)*var(--ic)*1px);
  background-position:calc(var(--sx)*var(--ic)*-1px) calc(var(--sy)*var(--ic)*-1px);
  background-repeat:no-repeat}
.board{position:relative;flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 4px 46px}
.slot{width:var(--card-w);height:var(--card-h);border-radius:7px;border:1px dashed #4A3B2C}
.slot.filled{border-color:transparent}
.trick{display:flex;gap:6px;align-items:center;position:relative;z-index:2}
.won{position:relative;flex:0 0 auto;width:var(--card-w);height:var(--card-h);margin-left:-6px}
.side.top .line{position:relative;top:16px}   /* Reihe tiefer, oben bleibt Platz fuer Knoepfe */
.won .card{position:absolute;left:0;top:0;transform-origin:50% 50%;
  box-shadow:0 4px 10px rgba(0,0,0,.5)}
.pts .bar i{display:block;height:100%;background:var(--brass);width:0;transition:width .35s ease}
.pts .bar.you i{background:linear-gradient(90deg,#6E8354,#9BB177)}

/* Stapel: Trumpfkarte liegt quer, rechte Hälfte bleibt frei lesbar */
.stock{position:relative;flex:0 0 auto;height:var(--card-h);
  width:calc(var(--card-w) + var(--card-h)/2);--off:0px}
.stock .under{position:absolute;left:calc(var(--card-w)/2);top:0;transform:rotate(90deg);overflow:visible}
/* größere Trefferfläche an den herausragenden Enden (Karte ist gedreht) */
.stock .under::before{content:"";position:absolute;left:-4px;right:-4px;top:-16px;bottom:-16px}
.stock .over{position:absolute;left:var(--off);top:0;z-index:2}
/* Restkarten als Zahl unter dem Stoss - auf dem Rueckenmuster waere sie nicht lesbar */
.stock .count{position:absolute;left:var(--off);top:calc(var(--card-h) + 4px);z-index:3;
  width:var(--card-w);display:flex;justify-content:center;pointer-events:none;
  font:700 15px ui-monospace,Menlo,monospace;color:#B0A084}
.stock .zu{position:absolute;left:var(--off);top:0;z-index:4;width:var(--card-w);height:var(--card-h);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font:700 11.5px system-ui,sans-serif;letter-spacing:.1em;
  background:rgba(145,43,38,.85);text-transform:uppercase}

.icons{display:flex;gap:6px;flex:0 0 auto;margin-left:auto}
.ico{width:42px;height:42px;padding:0;border-radius:12px;border:1px solid #4E3E2E;
  color:#B9A88C;background:rgba(255,255,255,.05);box-shadow:0 2px 6px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ico:active{transform:translateY(1px);color:var(--brass);border-color:var(--brass)}
.ico .i-close{display:none}
body.fs .ico .i-open{display:none}
body.fs .ico .i-close{display:block}
.ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.clickable{cursor:pointer}
.stock.clickable .over{box-shadow:0 0 0 2px var(--brass),var(--shadow)}
.card.swapbar{cursor:pointer}
button{font:700 14.5px/1 system-ui,sans-serif;letter-spacing:.03em;padding:13px 18px;border-radius:11px;
  border:1px solid #5A4835;background:rgba(255,255,255,.05);color:#DDD0B6;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.35)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.3;cursor:default}
button.primary{background:linear-gradient(180deg,#D9B360,#BC9339);border-color:#D9B360;
  color:#221805;box-shadow:0 3px 8px rgba(0,0,0,.4)}
button:focus-visible{outline:2px solid var(--chalk);outline-offset:2px}
.hand{display:flex;justify-content:flex-start;min-height:var(--card-h);flex:1}
.hand .card+.card{margin-left:calc(var(--card-w)*-0.48)}
.hand .card:active{z-index:5}
.hand .card.dragging{z-index:40;box-shadow:0 16px 26px rgba(0,0,0,.55);transition:none}
.hand .card.ready{outline:2px solid var(--brass);outline-offset:-2px}
.board.drop .slot{border-color:var(--brass);border-style:solid}
.board.dropswap .stock{filter:drop-shadow(0 0 6px rgba(201,163,78,.7))}

#over{position:fixed;inset:0;background:rgba(10,8,6,.9);display:none;align-items:center;justify-content:center;padding:24px;z-index:9}
#over.on{display:flex}
.sheet{max-width:340px;width:100%;background:var(--wood);border:1px solid #3B2E22;border-radius:12px;padding:18px;text-align:center;box-shadow:var(--shadow)}
.sheet h2{font:700 21px Georgia,serif;margin:0 0 8px;color:var(--brass)}
.sheet p{font-size:15px;color:#CDBFA4;margin:0 0 4px}
.sheet .res{margin:0 0 13px;font:700 15px ui-monospace,Menlo,monospace;letter-spacing:.03em;
  color:var(--brass)}
/* Partieende: groesser und ruhiger als der Blattabschluss */
.sheet.final{padding:24px 20px}
.sheet.final h2{font-size:26px;margin-bottom:14px}
.sheet .endstand{margin:0 0 8px;font:700 40px/1 Georgia,serif;letter-spacing:.02em;color:var(--chalk)}
.sheet .endstand span{margin:0 8px;color:#6E5D46;font-size:30px}
.sheet.win .endstand{color:var(--brass);text-shadow:0 0 22px rgba(201,163,78,.35)}
.sheet.lose .endstand{color:#C2694A}
.sheet .endtext{margin:0 0 4px;font-size:13px;color:#9C8B6E}
.sheet .schwarz{margin:0 0 12px;padding:7px 10px;border-radius:10px;
  font:700 13px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:#F2E6D2;background:rgba(160,35,30,.32);border:1px solid rgba(224,82,75,.55)}
.sheet .augen{display:flex;flex-direction:column;gap:6px;max-width:168px;margin:0 auto}
.sheet .aug{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.04)}
.sheet .aug span{font:600 12px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#A08E70}
.sheet .aug b{font:700 17px ui-monospace,Menlo,monospace;color:var(--chalk)}
/* Farbe zeigt den Ausgang: Gold bei Sieg, Rotgold bei Niederlage */
.sheet.win h2,.sheet.win .res{color:var(--brass)}
.sheet.lose h2,.sheet.lose .res{color:#C2694A}
.sheet.win{border-color:rgba(201,163,78,.55)}
.sheet.lose{border-color:rgba(194,105,74,.5)}
.sheet .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.setgrp{margin-bottom:16px}
.setgrp>h3{margin:0 0 10px;font:700 11px/1 system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:#8A7659;text-align:left}
.toggles{display:flex;gap:6px}
.toggles button{flex:1;padding:12px 4px;border-radius:12px;border:1px solid #4E3E2E;color:#B9A88C;
  font-size:13.5px;font-weight:600}
.toggles button.on{border-color:var(--brass);color:#20180E;background:var(--brass)}
.setrow{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;text-align:left}
.setrow>span{font:700 11.5px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9C8B6E}
.seg{display:flex;gap:6px}
.seg button{flex:1;padding:11px 4px;font-size:13.5px;font-weight:600;border-radius:12px;border:1px solid #4E3E2E;color:#B9A88C}
.seg button.on{border-color:var(--brass);color:#20180E;background:var(--brass)}
.sethint{font-size:12.5px;color:#9C8B6E;text-align:left;line-height:1.4;margin:2px 0 0}
.sheet .stand{display:flex;flex-direction:column;gap:4px;align-items:center;margin-top:10px}
.tricks{display:flex;gap:18px;justify-content:center;margin-top:6px}
.tk{display:flex;flex-direction:column;align-items:center;gap:7px}
.tk span{font:600 12px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#A08E70}
/* ---------- Animationen ---------- */
@keyframes dealIn{from{opacity:0;
  transform:translate(var(--dx,90px),var(--dy,-60px)) scale(.82) rotate(var(--dr,12deg))}}
.card.deal{animation:dealIn .42s cubic-bezier(.2,.8,.3,1) backwards}
.fan .card.deal{--dy:60px;--dr:-12deg}     /* Gegnerkarten kommen von der Mitte herauf */
.hand .card.deal{--dy:-60px}               /* deine kommen von der Mitte herunter */
@keyframes trumpIn{from{opacity:0;transform:rotate(90deg) translate(0,60px) scale(.88)}
  to{opacity:1;transform:rotate(90deg)}}
.stock .under.deal{animation:trumpIn .45s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes pileIn{from{opacity:0;transform:scale(.86)}}
.stock .over.deal,.stock .count.deal{animation:pileIn .35s ease-out backwards}

.card.fly{position:fixed;z-index:1;pointer-events:none;margin:0;will-change:transform}
.card.fly.above{z-index:6}   /* wenn sie oben liegen soll, z.B. beim Zudrehen */
@keyframes stamp{0%{opacity:0;transform:scale(2.3) rotate(-12deg)}65%{opacity:1;transform:scale(.92) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.stock .zu.stampfx{animation:stamp .55s cubic-bezier(.2,.9,.3,1)}
/* Meldung: kleine Tafel ueber der Mitte, kein Vollflaechen-Vorhang mehr */
.meld{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;
  display:none;flex-direction:column;align-items:center;gap:9px;
  padding:13px 16px 15px;border-radius:14px;
  background:linear-gradient(180deg,#33281D,#1A140E);
  border:1px solid var(--brass);box-shadow:0 14px 34px rgba(0,0,0,.65);
  animation:meldIn .3s cubic-bezier(.2,.9,.3,1)}
.meld.on{display:flex}
.meld .lbl{display:flex;align-items:baseline;gap:8px;
  font:600 12px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#B0A084}
.meld .lbl b{font:700 20px Georgia,serif;letter-spacing:0;color:var(--brass)}
.meld .mc{display:flex;gap:8px}
.meld .mc .card{--cw:66}
@keyframes meldIn{from{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.pts b.pend{color:var(--brass)}
@keyframes pop{50%{transform:scale(1.22)}}
.pts b.bump{animation:pop .45s ease;display:inline-block}
.brow i{font-style:normal;color:var(--chalk);font:700 12px ui-monospace,Menlo,monospace;margin-left:4px}
body.noanim .card,body.noanim .meld,body.noanim .stock .zu{animation:none!important}
body.noanim .pts .bar i{transition:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:420px){:root{--cw:82}}
@media (max-width:360px){:root{--cw:74}}
@media (max-height:720px){:root{--cw:74}}

/* ---------- Querformat ---------- */
@media (orientation:landscape) and (max-height:600px){
  :root{--cw:54}
  #app{max-width:640px;padding:4px 14px 8px}
  header{padding:0 0 5px}
  h1{font-size:13px;letter-spacing:.22em}
  h1 small{display:none}
  .pip{width:9px;height:9px}
  .tag{min-height:40px}
  .ico{width:38px;height:38px}
  .ico svg{width:18px;height:18px}
  .fan .card+.card{margin-left:calc(var(--card-w)*-0.2)}
  .hand .card+.card{margin-left:calc(var(--card-w)*-0.2)}
  .side{padding:2px 0}
  .board{padding:6px 4px 20px}
  .meld .mc .card{--cw:56}
  .sheet{max-width:420px;padding:16px}
  .sheet h2{font-size:19px;margin-bottom:6px}
}