:root{
  --felt:#1c4a35;
  --felt-deep:#0d2419;
  --gold:#c9a13b;
  --gold-bright:#e4c568;
  --paper:#e8dcc0;
  --fan-w:clamp(58px,17vw,78px);
  --trick-w:clamp(58px,18vw,78px);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  background:radial-gradient(ellipse at 50% 0%, #245840 0%, var(--felt) 48%, var(--felt-deep) 100%);
  background-attachment:fixed;
  color:var(--paper);
  font-family:'Karla',"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.page{max-width:460px;margin:0 auto;padding:26px 16px 56px}

header{text-align:center;padding:4px 0 20px}
header .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.85}
header h1{
  font-family:'UnifrakturCook',serif;font-weight:700;
  font-size:clamp(34px,10vw,46px);margin:2px 0 8px;color:var(--gold-bright);
  text-shadow:0 2px 0 rgba(0,0,0,.4);text-wrap:balance;
}
header p{font-size:13.5px;line-height:1.5;max-width:34ch;margin:0 auto;opacity:.85}
.abmelden-form{margin:14px 0 0}
.abmelden-form button{
  background:none;border:1px solid rgba(201,161,59,.4);border-radius:999px;
  color:var(--gold);font-family:'Karla',sans-serif;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 16px;cursor:pointer;
}
.abmelden-form button:hover,.abmelden-form button:focus-visible{border-color:var(--gold-bright);color:var(--gold-bright)}

section{margin:0 0 28px}
.section-head{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.section-head h2{font-family:'Bitter',Georgia,serif;font-weight:700;font-size:16px;color:var(--gold-bright);margin:0}
.section-head .rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(201,161,59,.5),rgba(201,161,59,0))}
.note{font-size:12.5px;line-height:1.55;opacity:.72;margin:10px 2px 0}

.well{
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.06));
  border:1px solid rgba(201,161,59,.2);
  border-radius:16px;padding:20px 12px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.35);
}

/* Kartenbild -- die PNGs sind bereits freigestellt mit runden Ecken */
img.karte{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.45));
}

.showcase{display:flex;gap:14px;justify-content:center;align-items:flex-start}
.showcase .karte{width:clamp(84px,26vw,112px)}
.showcase figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.showcase figcaption{font-size:11px;opacity:.7;text-align:center}

/* Handfächer: 8 Karten, feste Winkel/Versatz je Position */
.fan{display:flex;justify-content:center;align-items:flex-end;padding:16px 0 28px}
.fan .karte{
  width:var(--fan-w);
  transform-origin:50% 125%;
  animation:geben .45s cubic-bezier(.2,.7,.3,1) backwards;
}
.fan .karte + .karte{margin-left:calc(-1 * var(--fan-w) * .52)}
.fan .karte:nth-child(1){transform:rotate(-23deg) translateY(16px);z-index:1}
.fan .karte:nth-child(2){transform:rotate(-16deg) translateY(11px);z-index:2}
.fan .karte:nth-child(3){transform:rotate(-10deg) translateY(7px);z-index:3}
.fan .karte:nth-child(4){transform:rotate(-3deg)  translateY(2px);z-index:4}
.fan .karte:nth-child(5){transform:rotate(3deg)   translateY(2px);z-index:5}
.fan .karte:nth-child(6){transform:rotate(10deg)  translateY(7px);z-index:6}
.fan .karte:nth-child(7){transform:rotate(16deg)  translateY(11px);z-index:7}
.fan .karte:nth-child(8){transform:rotate(23deg)  translateY(16px);z-index:8}

/* Tisch: vier feste Sitzplätze, Karten leicht "hingeworfen". Die Labels für
   oben/unten stehen als normaler Text außerhalb von .tisch -- innerhalb der
   Karten-Raute überlappten sie sonst mit der gegenüberliegenden Karte. Nur
   links/rechts sitzen als Rand-Label mit in der Raute, dort ist genug Platz. */
.tisch-label{
  position:relative;z-index:1; /* .tisch ist position:relative und würde sonst
    über diesem statischen Geschwister liegen, auch wenn Karten leicht über den
    Tisch-Rahmen hinausragen -- so gewinnt das Label immer. */
  text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);opacity:.7;
}
.tisch{position:relative;height:clamp(220px,58vw,270px);margin:6px 0}
.tisch::before{
  content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.3), rgba(0,0,0,0) 68%);
}
.tisch .karte{
  position:absolute;width:var(--trick-w);
  animation:legen .45s cubic-bezier(.2,.7,.3,1) backwards;
}
/* Bei --trick-w max (78px) ist die Karte ~136px hoch, also 68px Halbhöhe --
   in % der .tisch-Maximalhöhe (270px) sind das ~25%. Die Mittelpunkte von
   oben/unten liegen deshalb mit >=5% Sicherheitsabstand von den Kanten. */
.platz-0{left:50%;top:70%;transform:translate(-50%,-50%) rotate(-4deg)} /* unten: Du */
.platz-1{left:18%;top:50%;transform:translate(-50%,-50%) rotate(7deg)}  /* links */
.platz-2{left:50%;top:30%;transform:translate(-50%,-50%) rotate(-2deg)} /* oben */
.platz-3{left:82%;top:50%;transform:translate(-50%,-50%) rotate(-8deg)} /* rechts */

.sitz{
  position:absolute;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);opacity:.7;white-space:nowrap;top:44%;
}
.sitz-1{left:1%;transform:translateY(-50%)}
.sitz-3{right:1%;transform:translateY(-50%);text-align:right}

@keyframes geben{from{opacity:0;transform:translateY(24px) rotate(0deg) scale(.94)}}
@keyframes legen{from{opacity:0;transform:translate(-50%,-50%) scale(.75)}}
@media (prefers-reduced-motion:reduce){
  .fan .karte,.tisch .karte{animation:none !important}
}

/* Punktestand: Ansage-Zeile, Punkte, Konto je Spieler mit Münzreihe.
   Gewinn/Verlust nicht über Rot/Grün allein, sondern über das Vorzeichen im
   Text plus hell (Gewinn) vs. gedämpft (Verlust) in derselben Goldfamilie. */
.ansage-zeile{font-size:13px;margin:0 0 6px;opacity:.9}
.punkte-zeile{
  font-family:'Bitter',Georgia,serif;font-weight:700;font-size:15px;
  margin:0 0 14px;display:flex;align-items:center;gap:8px;
}
.abzeichen{
  font-family:'Karla',sans-serif;font-weight:600;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--felt-deep);background:var(--gold-bright);
  padding:3px 8px;border-radius:999px;
}
.konten{display:flex;flex-direction:column;gap:10px}
.konto-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.konto-name{font-size:13px;min-width:6.5em}
.konto-betrag{font-family:'Bitter',Georgia,serif;font-weight:700;font-size:13px;min-width:4.5em}
.konto-betrag.gewinn{color:var(--gold-bright)}
.konto-betrag.verlust{color:var(--paper);opacity:.55}
.muenzen-reihe{display:flex}
.muenze{
  width:22px;height:22px;flex:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.muenze + .muenze{margin-left:-9px}

/* Ganzes Blatt, als Referenzraster */
.blatt-farbe{margin-bottom:16px}
.blatt-farbe h3{
  font-family:'Karla',sans-serif;font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);opacity:.8;margin:0 0 7px;
}
.blatt-reihe{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.blatt-reihe .karte{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}

footer{text-align:center;font-size:11.5px;opacity:.5;padding-top:8px}