:root {
  --paper: #f7efdc;
  --paper-2: #efe2c4;
  --ink: #3d2614;
  --ink-soft: #6b4a2e;
  --gold: #f5c542;
  --gold-dark: #b8860b;
  --wood: #4a2412;
  /* Kartengrößen: eigene Karten, Gegnerkarten, Mitte */
  --own-w: 110px; --own-h: 165px;
  --opp-w: 84px;  --opp-h: 126px;
  --mid-w: 140px; --mid-h: 210px;
  --wal-w: 88px;  --wal-h: 132px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: clip; }
body {
  font-family: "Fredoka", system-ui, sans-serif; color: var(--ink); user-select: none;
  background: radial-gradient(ellipse at center, #2b1709 0%, #120a04 100%);
}
button { font-family: inherit; cursor: pointer; }
.num { font-family: "Lilita One", "Fredoka", sans-serif; letter-spacing: .5px; }

/* ================================================================ Bühne */
#stage {
  position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; overflow: hidden;
  transform-origin: 50% 50%;
  background: url("assets/web/tisch.webp") center / 100% 100% no-repeat;
}
#stage::before {
  content: ""; position: absolute; left: 56px; right: 56px; top: 52px; bottom: 52px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,230,.10), transparent 62%);
}
.paper {
  background: var(--paper); color: var(--ink); border-radius: 16px; border: 3px solid var(--wood);
  box-shadow: inset 0 0 0 2px var(--paper-2), 0 10px 26px rgba(0,0,0,.45);
}

/* ================================================================ Karten */
.card {
  position: absolute; border-radius: 8px; background: var(--paper) center / cover no-repeat;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.28);
}
.card.back { background-image: url("assets/web/rueckseite.webp"); }
.card.mback { background-image: url("assets/web/rueckseite_geld.webp"); }
.card.own { width: var(--own-w); height: var(--own-h); }
.card.opp { width: var(--opp-w); height: var(--opp-h); border-radius: 6px; }
.card.mid { width: var(--mid-w); height: var(--mid-h); border-radius: 10px; }
.card.wal { width: var(--wal-w); height: var(--wal-h); border-radius: 7px; }
.cnt {
  position: absolute; z-index: 20; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px;
  background: var(--wood); color: var(--paper); border: 2px solid var(--paper);
  font-family: "Lilita One"; font-size: 14px; display: grid; place-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.5); white-space: nowrap; pointer-events: none;
}
/* Komplette Quartette: grüner Schimmer, eng gestapelt */
.full .card { box-shadow: 0 0 0 2px #5fd47a, 0 0 14px 3px rgba(95,212,122,.55), 0 4px 10px rgba(0,0,0,.3) !important; }
.full > .cnt { background: #3aa655 !important; color: #fff !important; border-color: var(--paper) !important; }
.fly { position: fixed; z-index: 500; pointer-events: none; transform-origin: 50% 50%; transition: transform .62s cubic-bezier(.3,.7,.2,1), opacity .15s; }

/* ================================================================ Gegner */
#seats { position: absolute; inset: 0; }
.seat {
  position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  transition: left .3s ease, width .3s ease;
}
.seat.focus { z-index: 60 !important; }
.seat-head { position: relative; display: flex; align-items: center; gap: 10px; }
.avatar-wrap { position: relative; width: 62px; height: 62px; flex: none; }
.avatar {
  width: 100%; height: 100%; border-radius: 50%;
  background-color: var(--paper); background-size: 150%; background-position: 50% 40%;
  border: 3px solid var(--paper); box-shadow: 0 0 0 3px var(--wood), 0 6px 14px rgba(0,0,0,.5);
}
.active .avatar { border-color: var(--gold); box-shadow: 0 0 0 3px var(--wood), 0 0 0 7px rgba(245,197,66,.35), 0 0 24px 6px rgba(245,197,66,.55); }
.active .avatar-wrap::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 3px dashed rgba(245,197,66,.95); animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.badge {
  position: absolute; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; border: 2px solid var(--wood); box-shadow: 0 2px 5px rgba(0,0,0,.45);
}
.badge.auct { left: -9px; bottom: -5px; background: var(--paper); }
.badge.auct .gavel { width: 20px; height: 20px; }
.badge.crown { right: -9px; top: -7px; background: var(--gold); animation: bob 1.4s ease-in-out infinite; }
.badge.out { right: -9px; bottom: -5px; background: #efb3ab; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.gavel { width: 18px; height: 18px; vertical-align: -3px; }
.nameplate {
  background: linear-gradient(#5a2e17, #3f1f0e); color: var(--paper);
  border: 2px solid #8a5a2b; border-radius: 12px; padding: 3px 14px 5px; box-shadow: 0 4px 10px rgba(0,0,0,.45);
}
.nameplate > b { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; }
.nameplate .sub { font-size: 14px; opacity: .9; white-space: nowrap; }
.nameplate .pts { color: var(--gold); font-family: "Lilita One"; }
.nameplate .role {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 0 8px; border-radius: 99px;
  background: var(--gold); color: var(--wood); font-size: 12px; font-weight: 700; vertical-align: 2px;
}
.nameplate .role .gavel { width: 14px; height: 14px; }

/* Sprechblasen (Gebote) */
.bubble {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 30;
  background: var(--paper); color: var(--ink); padding: 2px 12px; border-radius: 14px;
  border: 3px solid var(--wood); font-family: "Lilita One"; font-size: 24px; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.45); transition: opacity .4s;
}
.bubble.pop { animation: pop .28s ease-out; }
.bubble::before {
  content: ""; position: absolute; left: -11px; top: 50%; margin-top: -8px; border: 8px solid transparent;
  border-left: 0; border-right-color: var(--wood);
}
.bubble.pass { font-family: "Fredoka"; font-weight: 600; font-size: 16px; color: #8c7b66; background: #e9e1cf; padding: 6px 12px; }
.bubble.high { background: var(--gold); }
.bubble.old { opacity: .45; }
/* rechte Gegner: Sprechblase links vom Kopf, damit sie nicht über den Rand ragt */
.seat.rside .bubble { left: auto; right: calc(100% + 12px); }
.seat.rside .bubble::before { left: auto; right: -11px; border-right: 0; border-left: 8px solid var(--wood); }
@keyframes pop { from { transform: translateY(-50%) scale(.3); opacity: 0; } }

/* Versteigerer im Scheinwerferlicht (Lichtellipse kleiner als ihr Rechteck -> keine Kanten) */
.seat.spot { z-index: 1; }
.seat.spot::before, #me-plate.spot::before {
  content: ""; position: absolute; left: 50%; pointer-events: none; z-index: -1; animation: spot 2.6s ease-in-out infinite;
}
.seat.spot::before {
  top: -60px; width: 520px; height: 360px; transform: translateX(-50%);
  background: radial-gradient(ellipse 230px 125px at 50% 170px,
    rgba(255,240,190,.55) 0%, rgba(255,236,170,.30) 40%, rgba(255,236,170,.10) 72%, rgba(255,236,170,0) 100%);
}
#me-plate.spot::before {
  top: 50%; width: 560px; height: 340px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 240px 130px at 50% 50%,
    rgba(255,240,190,.5) 0%, rgba(255,236,170,.28) 40%, rgba(255,236,170,.09) 72%, rgba(255,236,170,0) 100%);
}
@keyframes spot { 50% { opacity: .8; } }

/* Auslage: Geld als grober Fächer, Tiere pro Art als Stapel */
.mini-money { position: relative; height: 62px; flex: none; }
.mini-money .broke { font-size: 11px; color: rgba(247,239,220,.7); position: absolute; top: 22px; left: 2px; }
.seat-cards { position: relative; margin-top: 10px; display: flex; gap: 14px; align-items: flex-end; }
.opp-animals { position: relative; height: calc(var(--opp-h) + 8px); transition: width .3s ease, height .3s ease; }
.no-animals { color: rgba(247,239,220,.75); font-size: 14px; padding: 0 8px 50px; white-space: nowrap; }
.ogroup { position: absolute; height: var(--opp-h); transition: left .3s ease, top .3s ease, transform .18s; }
.ogroup > .cnt { left: -7px; top: -9px; min-width: 22px; height: 22px; font-size: 12px; padding: 0 4px; }
.ogroup:hover { z-index: 50 !important; transform: translateY(-10px) scale(1.25); }
.ogroup.pick { cursor: pointer; }
.ogroup.pick:hover { z-index: 100 !important; }
.ogroup.pick .card { animation: pickglow 1.1s ease-in-out infinite; }
.ogroup.pick::after {
  content: "⚔️"; position: absolute; left: 14px; top: -12px; z-index: 21; font-size: 18px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
.ogroup.pick:hover::before {
  content: "⚔ Herausfordern"; position: absolute; left: 50%; top: -30px; transform: translateX(-50%) scale(.8); z-index: 30;
  background: var(--gold); color: var(--wood); border: 2px solid var(--wood); border-radius: 99px; padding: 1px 10px;
  font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
@keyframes pickglow { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 18px 5px rgba(245,197,66,.8); } }

/* ================================================================ Mitte */
#center { position: absolute; left: 800px; top: 296px; transform: translateX(-50%); display: flex; align-items: center; gap: 44px; }
#pile-area { position: relative; width: calc(var(--mid-w) + 44px); height: calc(var(--mid-h) + 26px); }
#pile-area.hidden { display: none; }
#deck { position: absolute; left: 0; top: 12px; }
#deck-count {
  position: absolute; left: 50%; top: -34px; transform: translateX(-50%); white-space: nowrap;
  font-size: 14px; color: var(--paper); background: rgba(0,0,0,.4); padding: 2px 12px; border-radius: 99px;
}
#revealed { position: absolute; left: 30px; top: -2px; perspective: 1000px; }
#revealed .flip { position: relative; width: var(--mid-w); height: var(--mid-h); transform-style: preserve-3d; transform: rotate(4deg); }
#revealed .flip.in { animation: flipin .7s cubic-bezier(.25,.8,.3,1); }
#revealed .flip.wait { transform: translate(-28px, 12px) rotateY(180deg); }   /* liegt noch verdeckt auf dem Stapel */
#revealed .face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; background: center / cover;
  box-shadow: 0 2px 3px rgba(0,0,0,.35), 0 14px 26px rgba(0,0,0,.45); }
#revealed .face.b { transform: rotateY(180deg); background-image: url("assets/web/rueckseite.webp"); }
#revealed .flip.glow .face.f { box-shadow: 0 0 0 4px var(--gold), 0 0 36px 8px rgba(245,197,66,.45), 0 14px 26px rgba(0,0,0,.45); }
@keyframes flipin {
  0% { transform: translate(-28px, 12px) rotateY(180deg) rotate(0deg); }
  45% { transform: translate(-10px, -26px) rotateY(90deg) rotate(1deg) scale(1.08); }
  100% { transform: rotate(4deg); }
}
/* Kuhhandel in der Mitte: Karten beider Beteiligten */
#revealed .tcards { position: relative; }
#revealed .tcard { box-shadow: 0 2px 3px rgba(0,0,0,.35), 0 10px 20px rgba(0,0,0,.4); }
#revealed .tname { position: absolute; top: calc(var(--mid-h) + 14px); white-space: nowrap;
  background: rgba(0,0,0,.5); color: var(--paper); font-size: 13px; font-weight: 600; padding: 1px 9px; border-radius: 99px; }
#revealed .tname.l { left: 0; }
/* Verdeckter Geldstapel auf dem Tisch */
.tstack { position: absolute; left: calc(100% + 18px); top: 20px; width: 110px; height: 140px; cursor: help; }
.tstack .card { width: 64px; height: 96px; }
.tstack > .cnt { left: 40px; top: -12px; z-index: 30; }
.fly > .cnt { right: -8px; top: -10px; left: auto; }
.tstack .lab { position: absolute; left: 0; right: 0; top: 108px; text-align: center; font-size: 13px; color: var(--paper);
  background: rgba(0,0,0,.45); border-radius: 99px; padding: 1px 8px; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.tstack:hover .lab { opacity: 1; }
.tstack:hover .card { transform: translateY(-4px); }

#plaque { width: 250px; padding: 12px 14px; text-align: center; }
#plaque .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--ink-soft); font-weight: 600; }
#plaque .amt { font-family: "Lilita One"; font-size: 50px; line-height: 1.05; color: var(--gold);
  -webkit-text-stroke: 2px var(--wood); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(61,38,20,.35); }
#plaque .amt.bump { animation: bump .35s ease-out; }
@keyframes bump { 40% { transform: scale(1.22); } }
#plaque .who { font-weight: 600; font-size: 16px; }
#plaque hr { border: none; border-top: 2px dashed #d9c79f; margin: 8px 0; }
#plaque .history { font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plaque .history b { color: var(--ink); }
.pill { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: 14px; font-weight: 600; }
.pill.auct { background: #e3bf94; display: inline-flex; align-items: center; gap: 4px; }
.pill.high { background: var(--gold); }
.pill.out { background: #efb3ab; }

/* ================================================================ Eigener Bereich */
#wallet { position: absolute; left: 86px; bottom: 60px; width: 520px; height: 200px; }
.mstack { position: absolute; bottom: 0; width: var(--wal-w); height: var(--wal-h); transition: transform .16s; }
.mstack:hover { transform: translateY(-14px); z-index: 30 !important; }
.mstack > .cnt { left: 26px; top: -13px; }
.mstack.selectable { cursor: pointer; }
.mstack.selectable:hover .card:last-of-type { box-shadow: 0 0 0 3px var(--gold), 0 8px 18px rgba(0,0,0,.4); }
.mstack.empty { opacity: .35; }
.mstack .plus {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.8); z-index: 21; opacity: 0;
  background: var(--gold); color: var(--wood); border: 2px solid var(--wood); border-radius: 99px; padding: 2px 10px;
  font-family: "Lilita One"; font-size: 18px; box-shadow: 0 3px 8px rgba(0,0,0,.4); transition: opacity .12s, transform .12s; pointer-events: none;
}
.mstack.selectable:hover .plus { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#offer-pile { position: absolute; left: 86px; bottom: 262px; width: 520px; height: 190px; display: none; }
#offer-pile.show { display: block; }
#offer-pile .title { position: absolute; left: 0; top: -6px; max-width: 380px; color: var(--paper); font-size: 14px;
  background: rgba(0,0,0,.45); padding: 2px 12px; border-radius: 99px; }
#offer-pile .title b { font-family: "Lilita One"; color: var(--gold); font-weight: 400; font-size: 17px; }
#offer-pile .card { cursor: pointer; transition: transform .15s; }
#offer-pile .card:hover { transform: translateY(-10px); }
#offer-pile .empty-hint { position: absolute; left: 0; top: 40px; color: rgba(247,239,220,.75); font-size: 14px; }

#hand { position: absolute; right: 70px; bottom: 60px; width: 540px; height: 200px; }
.hgroup { position: absolute; bottom: 0; height: var(--own-h); transition: transform .2s; }
.hgroup > .cnt { left: -8px; top: -12px; }
.hgroup .card { transition: transform .22s ease; }
.hgroup:hover { z-index: 60 !important; transform: translateY(-22px); }
.hgroup .name { position: absolute; left: 22px; top: -12px; z-index: 21; background: var(--paper); border: 2px solid var(--wood);
  border-radius: 99px; padding: 0 8px; font-size: 13px; font-weight: 600; display: none; white-space: nowrap; }
.hgroup:hover .name { display: block; }
.hgroup.pick > .card { box-shadow: 0 0 0 3px var(--gold), 0 0 16px 3px rgba(245,197,66,.55), 0 6px 14px rgba(0,0,0,.3); }
.hgroup.target .card { animation: redpulse 1s ease-in-out infinite; }
@keyframes redpulse { 50% { box-shadow: 0 0 0 4px #e0584f, 0 0 20px 6px rgba(224,88,79,.6); } }
.hand-empty { position: absolute; right: 150px; bottom: 70px; color: rgba(247,239,220,.75); font-size: 15px; }

/* Kuhhandel: Gegner kommen hinter der eigenen Karte hervor */
.hgroup .pops { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 0; pointer-events: none; }
/* unsichtbare Brücke über der Karte, damit die Maus die Gegner-Karten sicher erreicht */
.hgroup .pops::before { content: ""; position: absolute; left: 0; right: 0; bottom: 92%; height: 60px; }
.hgroup:hover .pops { pointer-events: auto; }
.pop {
  position: absolute; left: 50%; bottom: 36px; width: 120px; height: 150px; margin-left: -60px; z-index: 0;
  background: var(--paper); border: 3px solid var(--wood); border-radius: 10px; text-align: center; padding-top: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); transform-origin: 50% 100%;
  transform: rotate(var(--ang)) translateY(0) scale(.7); opacity: 0;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .18s; transition-delay: 0s;
}
.hgroup:hover .pop { transform: rotate(var(--ang)) translateY(-146px) scale(1); opacity: 1; transition-delay: var(--d); }
.pop .avatar { width: 40px; height: 40px; margin: 0 auto; border-width: 2px; box-shadow: 0 0 0 2px var(--wood); }
.pop .pn { font-weight: 600; font-size: 15px; margin-top: 3px; line-height: 1.1; }
.pop .pc { font-size: 14px; color: var(--ink-soft); }
.pop .pc b { font-family: "Lilita One"; font-size: 18px; color: var(--ink); font-weight: 400; }
.pop .pa { font-size: 13px; font-weight: 700; color: var(--wood); }
.pop.active { cursor: pointer; background: #fff6d6; border-color: var(--gold-dark); }
.pop.active:hover { background: var(--gold); }
.pop.info { height: 120px; padding-top: 16px; }
.pop.info .pn { font-size: 13px; color: var(--ink-soft); }

/* Eigenes Spielerschild (sitzt per JS direkt auf dem Aktionsfeld) */
#me-plate { position: absolute; left: 800px; bottom: 64px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 7; }
#me-plate .avatar-wrap { width: 70px; height: 70px; }
#me-plate .bubble { left: calc(100% + 12px); }
.chips { display: flex; gap: 6px; margin-top: 3px; }
.chip { background: rgba(0,0,0,.28); border-radius: 99px; padding: 1px 9px; font-size: 14px; white-space: nowrap; }
.chip b { font-family: "Lilita One"; color: var(--gold); font-weight: 400; font-size: 16px; }

/* ================================================================ Aktionsfeld (ganz unten) */
#actions {
  position: absolute; left: 800px; bottom: 58px; transform: translateX(-50%); z-index: 6;
  width: 440px; min-height: 136px; padding: 10px 14px 12px; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
#actions.mine { animation: mine 1.6s ease-in-out infinite; }
@keyframes mine { 50% { box-shadow: inset 0 0 0 2px var(--paper-2), 0 0 0 4px rgba(245,197,66,.7), 0 0 30px 6px rgba(245,197,66,.45); } }
#actions h4 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
#actions .hint { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
#actions .warn { color: #b3342f; font-weight: 600; }
#actions .note { color: #7a5600; background: #fff0b8; border-radius: 8px; padding: 3px 8px; font-weight: 600; }
#actions .waiting { font-size: 17px; color: var(--ink-soft); padding: 6px 0; }
#actions .ctx { font-size: 15px; font-weight: 500; color: var(--ink-soft); }
#actions .ctx b { color: var(--ink); font-size: 18px; font-weight: 400; }
#actions .ctx.redo { display: block; margin: -4px 0 8px; color: #b3342f; font-weight: 600; }
.perr {
  position: absolute; left: 50%; top: -44px; transform: translateX(-50%); white-space: nowrap; z-index: 5;
  background: #b3342f; color: #fff; padding: 5px 14px; border-radius: 99px; font-size: 15px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.4); animation: pop .25s ease-out;
}
.btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.btns.bidrow { flex-wrap: nowrap; gap: 6px; }
.btns.bidrow .btn { padding: 7px 12px; white-space: nowrap; }
.btns.bidrow #bgo { min-width: 86px; }
.btns.quick { margin-top: 8px; flex-wrap: nowrap; gap: 6px; }
.btns.quick .btn { min-width: 0; padding: 4px 10px; font-size: 14px; white-space: nowrap; }
.btns.quick .btn b { font-size: 15px; margin-left: 3px; }
.btns.quick .btn.out { margin-left: auto; background: #e9e1cf; color: #6b4a2e; }   /* rechts außen */
.btns.quick .btn.out:hover { background: #ef9f96; color: var(--ink); }
.btn {
  border: 2.5px solid var(--wood); border-radius: 12px; padding: 7px 16px; font-size: 16px; font-weight: 600;
  background: #fffaf0; color: var(--ink); box-shadow: 0 4px 0 var(--wood); transition: transform .08s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--wood); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood); }
.btn.primary { background: var(--gold); }
.btn.go { background: #7cc47f; }
.btn.danger { background: #ef9f96; }
.btn.bluff { background: #f7c9c3; border-color: #b3342f; box-shadow: 0 4px 0 #b3342f; }
.btn.small { padding: 6px 12px; font-size: 15px; border-width: 2px; box-shadow: 0 3px 0 var(--wood); }
.btn small { font-size: 11px; opacity: .6; margin-left: 4px; }   /* Tastenkürzel */
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.bid-input {
  width: 100px; font-family: "Lilita One"; font-size: 26px; text-align: center; border-radius: 12px;
  border: 3px solid var(--wood); padding: 2px 4px; background: #fff; color: var(--ink);
}
.bid-input::-webkit-inner-spin-button { display: none; }
.dots::after { content: "…"; }

/* ================================================================ Phase 2 (Kuhhandel): andere Aufteilung */
#stage.p2 #center { top: 300px; gap: 140px; }
#stage.p2 #pile-area { --mid-w: 104px; --mid-h: 156px; width: 250px; }
#stage.p2 #hand { width: 500px; }
#stage.p2 #wallet { width: 470px; }
#stage.p2 #actions { padding: 10px 16px 12px; }
#stage.p2 #actions h4 { margin-bottom: 6px; }
#stage.p2 #offer-pile { height: 150px; }
#stage.p2 #offer-pile .card { width: 84px !important; height: 126px !important; }
#stage.p2 #toasts { top: 470px; }
/* Aktionsfeld zurücknehmen, solange Gegner-Karten hinter der eigenen Karte zu sehen sind */
#stage:has(#hand .hgroup:hover .pop) #actions { opacity: .25; transition: opacity .15s; }

/* ================================================================ Abdunkeln mit bis zu zwei Lichtkegeln */
@property --sx { syntax: "<length>"; inherits: false; initial-value: 800px; }
@property --sy { syntax: "<length>"; inherits: false; initial-value: 400px; }
@property --rx { syntax: "<length>"; inherits: false; initial-value: 220px; }
@property --ry { syntax: "<length>"; inherits: false; initial-value: 160px; }
@property --s2x { syntax: "<length>"; inherits: false; initial-value: 800px; }
@property --s2y { syntax: "<length>"; inherits: false; initial-value: 400px; }
@property --r2x { syntax: "<length>"; inherits: false; initial-value: 220px; }
@property --r2y { syntax: "<length>"; inherits: false; initial-value: 160px; }
#dim {
  position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0;
  background: rgba(6,3,1,.66);
  -webkit-mask-image:
    radial-gradient(ellipse var(--rx) var(--ry) at var(--sx) var(--sy), transparent 0%, transparent 58%, #000 100%),
    radial-gradient(ellipse var(--r2x) var(--r2y) at var(--s2x) var(--s2y), transparent 0%, transparent 58%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse var(--rx) var(--ry) at var(--sx) var(--sy), transparent 0%, transparent 58%, #000 100%),
    radial-gradient(ellipse var(--r2x) var(--r2y) at var(--s2x) var(--s2y), transparent 0%, transparent 58%, #000 100%);
  mask-composite: intersect;
  transition: opacity .35s ease,
    --sx .65s cubic-bezier(.4,.1,.2,1), --sy .65s cubic-bezier(.4,.1,.2,1), --rx .65s, --ry .65s,
    --s2x .65s cubic-bezier(.4,.1,.2,1), --s2y .65s cubic-bezier(.4,.1,.2,1), --r2x .65s, --r2y .65s;
}
#dim.on { opacity: 1; }
#dim.soft.on { opacity: .6; }   /* dezenter beim Aufdecken einer neuen Versteigerungskarte */
#stage.focusing #hand { z-index: 61; }
#stage.focusing #actions { opacity: .25; }

/* ================================================================ Meldungen */
#toasts {
  position: absolute; right: 90px; top: 450px; width: 460px; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none;
}
.toast {
  background: var(--paper); color: var(--ink); border: 2px solid var(--wood); padding: 5px 14px; border-radius: 12px;
  font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.4); animation: toast 4.2s forwards; max-width: 460px;
}
@keyframes toast { 0% { opacity: 0; transform: translateX(20px); } 7%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Banner liegt außerhalb der Bühne, damit er über fliegenden Karten erscheint */
#banner-wrap { position: fixed; left: 50%; top: 42%; z-index: 800; pointer-events: none; transform-origin: 50% 50%; }
#banner {
  position: relative; pointer-events: none;
  min-width: 520px; max-width: 760px; padding: 18px 30px; text-align: center; display: none;
  background: var(--paper); border: 4px solid var(--wood); border-radius: 20px;
  box-shadow: inset 0 0 0 3px var(--gold), 0 20px 60px rgba(0,0,0,.6);
}
#banner.show { display: block; animation: banner 2.1s ease-out forwards; }
#banner .t { font-family: "Lilita One"; font-size: 36px; color: var(--gold); -webkit-text-stroke: 2px var(--wood); paint-order: stroke fill; }
#banner .d { font-size: 18px; margin-top: 4px; }
#banner.bad .t { color: #ef6f63; }
@keyframes banner {
  0% { transform: scale(.6); opacity: 0; }
  14% { transform: scale(1.05); opacity: 1; }
  22% { transform: scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: scale(.97); }
}
.shake { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.scorepop {
  position: fixed; z-index: 900; transform: translate(-50%, -100%); pointer-events: none;
  color: #7cc47f; -webkit-text-stroke: 2px var(--wood); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0,0,0,.3);
  animation: scorepop 1.9s ease-out forwards;
}
@keyframes scorepop { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -110%) scale(1.1); }
  80% { opacity: 1; transform: translate(-50%, -190%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -230%); } }
.confetti { position: fixed; inset: 0; z-index: 1050; pointer-events: none; }

/* ================================================================ Aufdeck-Szene */
.reveal {
  position: absolute; left: 800px; top: 250px; transform: translateX(-50%); z-index: 70;
  background: rgba(24,14,7,.96); border: 3px solid var(--gold); border-radius: 22px; padding: 16px 28px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); color: var(--paper); text-align: center; min-width: 520px;
  animation: revealin .35s ease-out; transition: opacity .3s, transform .3s;
}
@keyframes revealin { from { opacity: 0; transform: translateX(-50%) scale(.85); } }
.reveal.out { opacity: 0; transform: translateX(-50%) scale(.95); }
.reveal.win { border-color: #7cc47f; box-shadow: 0 0 0 4px rgba(124,196,127,.4), 0 20px 60px rgba(0,0,0,.6); }
.reveal.lose { border-color: #ef6f63; box-shadow: 0 0 0 4px rgba(239,111,99,.35), 0 20px 60px rgba(0,0,0,.6); }
.reveal .rtitle { font-family: "Lilita One"; font-size: 30px; color: var(--gold); -webkit-text-stroke: 1.5px var(--wood); paint-order: stroke fill; }
.reveal .rrow { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 10px; }
.reveal .rside { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 200px; }
.reveal .rwho { font-weight: 600; font-size: 17px; }
.reveal .rhint { font-size: 12px; opacity: .7; font-weight: 400; }
.reveal .rmid { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 120px; }
.reveal .rvs { font-family: "Lilita One"; font-size: 22px; opacity: .8; }
.reveal .rcards { position: relative; height: 130px; display: flex; align-items: center; justify-content: center; }
.reveal .rempty { opacity: .6; font-size: 14px; }
.reveal .rc { width: 76px; height: 114px; perspective: 600px; position: relative; flex: none; }
.reveal .rc + .rc { margin-left: -44px; }
.reveal .rc.up { z-index: 2; }
.reveal .rf { position: absolute; inset: 0; border-radius: 6px; background: center / cover; backface-visibility: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.5); transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.reveal .rc.still .rf { transition: none; }   /* eigene Karten liegen ohne Dreh-Animation offen */
.reveal .rb { background-image: url("assets/web/rueckseite_geld.webp"); }
.reveal .rfront { transform: rotateY(180deg); }
.reveal .rc.up .rb { transform: rotateY(-180deg); }
.reveal .rc.up .rfront { transform: rotateY(0deg); }
.reveal .rsum { font-size: 40px; color: var(--gold); -webkit-text-stroke: 1.5px var(--wood); paint-order: stroke fill; }
.reveal .rsum.bump { animation: bump .3s ease-out; }
.reveal .rdelta { font-size: 46px; line-height: 1; opacity: 0; transform: scale(.4); }
.reveal .rdelta.good, .reveal .rdelta.bad { animation: deltain .45s cubic-bezier(.2,.9,.3,1.3) forwards; }
.reveal .rdelta.good { color: #7cc47f; -webkit-text-stroke: 1.5px #173d1b; paint-order: stroke fill; }
.reveal .rdelta.bad { color: #ef6f63; -webkit-text-stroke: 1.5px #4a130e; paint-order: stroke fill; }
.reveal .rdelta small { display: block; font-family: "Fredoka"; font-size: 14px; font-weight: 600; -webkit-text-stroke: 0; margin-top: 4px; opacity: .9; }
@keyframes deltain { to { opacity: 1; transform: scale(1); } }

/* ================================================================ Knöpfe / Menü / Log */
#top-buttons { position: absolute; right: 70px; top: 64px; z-index: 90; }
.round {
  height: 42px; min-width: 42px; padding: 0 10px; border-radius: 99px; border: 3px solid var(--wood);
  background: var(--paper); font-size: 17px; font-weight: 600; color: var(--ink); box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.round.small { height: 34px; min-width: 34px; font-size: 15px; }
#menu { position: absolute; right: 0; top: 52px; width: 290px; padding: 12px; display: none; flex-direction: column; gap: 6px; z-index: 96; }
#menu.open { display: flex; }
#menu .m-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-soft); font-weight: 600; }
#menu .seg { margin: 0 0 6px; gap: 5px; }
#menu .seg button { font-size: 13px; padding: 6px 4px; }
.m-item { display: block; text-align: left; padding: 8px 12px; border-radius: 10px; border: 2px solid var(--wood); background: #fffaf0;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; font-family: inherit; }
.m-item:hover { background: var(--gold); }
.m-item.danger:hover { background: #ef9f96; }
#log {
  position: absolute; right: 56px; top: 52px; bottom: 52px; width: 360px; z-index: 95;
  background: rgba(247,239,220,.98); color: var(--ink); border-left: 3px solid var(--wood);
  display: none; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,.4);
}
#log.open { display: flex; }
#log header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px 18px; border-bottom: 2px dashed #d9c79f; }
#log h3 { margin: 0; }
#log ol { list-style: none; padding: 8px 14px 16px 18px; margin: 0; overflow: auto; font-size: 14px; }
#log li { margin-bottom: 5px; line-height: 1.35; }
#log li.card { position: static; margin-top: 12px; font-weight: 700; box-shadow: none; background: none; border-radius: 0; }
#log li.bad { color: #b3342f; font-weight: 600; }
#log li.good { color: #7a5a00; font-weight: 600; }

/* ================================================================ Overlays: Start, Ergebnis, Regeln */
#overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(10,6,2,.72); display: none; place-items: center; backdrop-filter: blur(5px); }
#overlay.show { display: grid; }
.panel {
  background: var(--paper); color: var(--ink); border-radius: 22px; padding: 26px 34px 30px;
  width: 400px; box-shadow: inset 0 0 0 3px var(--paper-2), 0 24px 70px rgba(0,0,0,.7); text-align: center; border: 4px solid var(--wood);
}
.logo-cards { height: 120px; position: relative; margin-top: -80px; }
.logo-cards img { position: absolute; width: 80px; border-radius: 7px; box-shadow: 0 8px 18px rgba(0,0,0,.45); left: 50%; top: 0; }
.logo-cards img:nth-child(1) { transform: translateX(-120%) rotate(-14deg); top: 14px; }
.logo-cards img:nth-child(2) { transform: translateX(-50%); z-index: 2; }
.logo-cards img:nth-child(3) { transform: translateX(20%) rotate(14deg); top: 14px; }
.panel h1 { margin: 6px 0 0; font-family: "Lilita One"; font-weight: 400; font-size: 54px; color: var(--gold);
  -webkit-text-stroke: 3px var(--wood); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(61,38,20,.4); }
.panel .sub { margin: 0 0 14px; color: var(--ink-soft); }
.panel label { display: block; margin: 12px 0; font-weight: 600; text-align: left; }
.panel input { display: block; width: 100%; font: inherit; padding: 8px 12px; border-radius: 12px; border: 2.5px solid var(--wood); margin-top: 5px; background: #fff; }
.panel .note { font-weight: 400; font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.seg { display: flex; gap: 8px; margin-top: 5px; }
.seg button { flex: 1; padding: 8px; border-radius: 12px; border: 2.5px solid var(--wood); background: #fff; font-size: 17px; font-weight: 600; color: var(--ink); }
.seg button.on { background: var(--gold); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.big { margin-top: 14px; width: 100%; padding: 12px; font-size: 21px; font-weight: 700; border: 3px solid var(--wood); border-radius: 14px;
  background: #7cc47f; color: var(--ink); box-shadow: 0 5px 0 var(--wood); }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--wood); }
.results { text-align: left; margin: 12px 0; }
.results .r { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 7px 0; border-bottom: 2px dashed #d9c79f; font-size: 17px; }
.results .r.win { font-weight: 700; }
.results .r .num { color: var(--gold); -webkit-text-stroke: 1.5px var(--wood); paint-order: stroke fill; font-size: 22px; }
.results .rname { display: flex; flex-direction: column; gap: 4px; }
.results .qrow { display: flex; gap: 4px; }
.results .qrow em { font-size: 12px; opacity: .6; font-style: normal; }
.results .qi { width: 22px; height: 33px; border-radius: 3px; background: center / cover; box-shadow: 0 1px 3px rgba(0,0,0,.35); display: inline-block; }
.rules-ov { position: fixed; inset: 0; z-index: 1100; background: rgba(10,6,2,.72); display: grid; place-items: center; backdrop-filter: blur(4px); }
.panel.rules { width: min(640px, 92vw); max-height: 86vh; overflow: auto; text-align: left; }
.panel.rules h2 { font-family: "Lilita One"; font-weight: 400; margin: 0 0 6px; color: var(--wood); }
.panel.rules h3 { margin: 14px 0 4px; }
.panel.rules p, .panel.rules li { font-size: 15px; line-height: 1.45; }
.panel.rules ul { padding-left: 20px; margin: 4px 0; }
.panel .fan { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-soft); opacity: .8; }

/* ================================================================ Handy hochkant
   Eigene, schmale Bühne (480 breit, Höhe nach Seitenverhältnis). Oben die Gegner, in der Mitte der Stapel,
   unten von unten nach oben: Aktionsfeld, Geld + eigenes Schild, eigene Tierkarten (per JS platziert). */
body.compact {
  --own-w: 72px; --own-h: 108px;
  --opp-w: 46px; --opp-h: 69px;
  --mid-w: 96px; --mid-h: 144px;
  --wal-w: 56px; --wal-h: 84px;
}
body.compact #stage { background: none; }
/* Tisch aus dem vorhandenen Bild: Holzrand schmal, Filz gedehnt */
body.compact #stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 16px solid transparent; border-image: url("assets/web/tisch.webp") 58 fill / 16px stretch;
}
body.portrait.felt-port #stage::after { border: none; border-image: none; background: url("assets/web/tisch_hochkant.webp") center / 100% 100% no-repeat; }
body.compact #stage::before { left: 16px; right: 16px; top: 16px; bottom: 16px; }

/* Gegner: kompakter Kopf, Gebotsblase unter dem Bild */
body.compact .seat-head { gap: 6px; }
body.compact .avatar-wrap { width: 40px; height: 40px; }
body.compact .avatar { border-width: 2px; box-shadow: 0 0 0 2px var(--wood), 0 4px 10px rgba(0,0,0,.5); }
body.compact .active .avatar-wrap::after { inset: -6px; border-width: 2px; }
body.compact .badge { width: 22px; height: 22px; font-size: 12px; }
body.compact .badge.auct .gavel { width: 15px; height: 15px; }
body.compact .nameplate { padding: 2px 9px 3px; border-radius: 10px; }
body.compact .nameplate > b { font-size: 15px; }
body.compact .nameplate .sub { font-size: 12px; }
body.compact .nameplate .role { font-size: 10px; padding: 0 6px; margin-left: 5px; }
body.compact .mini-money { height: 40px; }
body.compact .seat-cards { margin-top: 6px; }
body.compact .no-animals { font-size: 12px; padding: 0 4px 20px; }
body.compact .ogroup > .cnt { left: -5px; top: -7px; min-width: 17px; height: 17px; font-size: 10px; padding: 0 3px; border-width: 1.5px; }
body.compact .ogroup:hover { transform: translateY(-4px) scale(1.15); }
body.compact .ogroup.pick::after { left: 6px; top: -10px; font-size: 13px; }
body.compact .bubble, body.compact .seat.rside .bubble {
  left: 26px; right: auto; top: calc(100% + 6px); transform: none; font-size: 19px; padding: 1px 10px; border-width: 2px;
}
body.compact .bubble.pass { font-size: 13px; padding: 3px 9px; }
body.compact .bubble::before, body.compact .seat.rside .bubble::before {
  left: 10px; right: auto; top: -9px; margin-top: 0; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--wood);
}
body.compact .bubble.pop { animation: popp .28s ease-out; }
@keyframes popp { from { transform: scale(.3); opacity: 0; } }
body.compact .seat.spot::before {
  top: -40px; width: 300px; height: 220px;
  background: radial-gradient(ellipse 140px 80px at 50% 90px,
    rgba(255,240,190,.55) 0%, rgba(255,236,170,.30) 40%, rgba(255,236,170,.10) 72%, rgba(255,236,170,0) 100%);
}

/* Mitte */
body.portrait #center { left: 240px; top: 300px; gap: 14px; }
body.portrait #stage.o34 #center { top: 404px; }
/* hochkant: Stapel und aufgedeckte Karte etwas kleiner, damit die eigenen Karten nichts verdecken */
body.portrait { --mid-w: 88px; --mid-h: 132px; }
body.portrait #plaque .history { display: none; }
body.portrait #plaque .amt { font-size: 32px; }
body.portrait #plaque hr { margin: 4px 0; }
body.portrait #deck-count { top: calc(100% + 2px); font-size: 12px; padding: 1px 10px; }
body.compact #revealed .tname { font-size: 11px; top: calc(var(--mid-h) + 8px); }
body.compact #plaque { width: 186px; padding: 8px 10px; border-radius: 14px; }
body.compact #plaque .lbl { font-size: 10px; }
body.compact #plaque .amt { font-size: 38px; }
body.compact #plaque .who { font-size: 14px; }
body.compact #plaque hr { margin: 5px 0; }
body.compact #plaque .history { font-size: 11px; }
body.compact .pill { font-size: 12px; padding: 1px 8px; }
body.portrait #stage.p2 #center { top: 300px; gap: 84px; }
body.portrait #stage.p2.o34 #center { top: 404px; }
body.compact #stage.p2 #pile-area { --mid-w: 72px; --mid-h: 108px; width: 150px; }
body.compact .tstack { left: calc(100% + 6px); top: 12px; width: 76px; height: 90px; }
body.compact .tstack .card { width: 40px; height: 60px; }
body.compact .tstack > .cnt { left: 24px; top: -10px; }
body.compact .tstack .lab { display: none; }

/* Unten: Aktionsfeld, darüber Geld (links) und eigenes Schild (rechts), darüber die Tierkarten */
body.portrait #actions { left: 240px; bottom: 10px; width: 460px; min-height: 120px; padding: 10px 12px 12px; }
body.compact #actions h4 { font-size: 18px; margin-bottom: 8px; }
body.compact #actions .hint { font-size: 14px; }
body.compact #actions .waiting { font-size: 17px; }
body.compact .btn { padding: 10px 16px; font-size: 18px; }
body.compact .btn.small { padding: 8px 12px; font-size: 16px; }
body.compact .btns.bidrow .btn { padding: 10px 12px; }
body.compact .btns.quick { margin-top: 10px; }
body.compact .btns.quick .btn { padding: 8px 10px; font-size: 15px; }
body.compact .bid-input { width: 92px; font-size: 26px; padding: 5px 4px; }
body.portrait #wallet { left: 16px; width: 226px; height: 110px; }
body.compact .mstack > .cnt { left: 14px; top: -11px; min-width: 22px; height: 22px; font-size: 12px; }
body.compact .mstack .plus { font-size: 14px; padding: 1px 7px; }
body.compact .mstack:hover { transform: translateY(-6px); }
body.portrait #me-plate { left: auto; right: 16px; transform: none; gap: 8px; max-width: 218px; align-items: flex-end; }
body.compact #me-plate .avatar-wrap { width: 50px; height: 50px; }
body.compact #me-plate .nameplate { padding: 3px 10px 5px; }
body.compact .chips { flex-wrap: wrap; gap: 4px; }
body.compact .chip { font-size: 13px; padding: 0 7px; }
body.compact .chip b { font-size: 15px; }
body.compact #me-plate .bubble { left: 10px; top: auto; bottom: calc(100% + 10px); }
body.compact #me-plate .bubble::before { top: auto; bottom: -9px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--wood); }
body.compact #me-plate.spot::before {
  width: 320px; height: 200px;
  background: radial-gradient(ellipse 150px 85px at 50% 50%,
    rgba(255,240,190,.5) 0%, rgba(255,236,170,.28) 40%, rgba(255,236,170,.09) 72%, rgba(255,236,170,0) 100%);
}
body.portrait #hand, body.portrait #stage.p2 #hand { left: 16px; right: auto; width: 448px; height: 130px; }
body.compact .hgroup > .cnt { left: -6px; top: -10px; min-width: 22px; height: 22px; font-size: 12px; }
body.compact .hgroup:hover { transform: translateY(-12px); }
body.compact .hgroup .name { left: 14px; top: -10px; font-size: 11px; padding: 0 6px; }
body.compact .hand-empty { left: 0; right: 0; bottom: 40px; text-align: center; font-size: 14px; }
body.portrait #offer-pile, body.portrait #stage.p2 #offer-pile { left: 20px; width: 440px; height: 124px; }
body.compact #stage.selecting #hand { visibility: hidden; }
/* Knopf „Meine Tiere“: beim Bieten im Kuhhandel kurz die eigenen Tiere statt des Gebots zeigen */
body.compact #stage.selecting.peek #hand { visibility: visible; }
body.compact #stage.selecting.peek #offer-pile > :not(.peekbtn) { visibility: hidden; }
.peekbtn { display: none; }
body.compact #offer-pile .peekbtn { display: block; position: absolute; right: 0; top: -8px; z-index: 30; padding: 3px 10px; font-size: 13px;
  font-weight: 700; border-radius: 99px; border: 2px solid var(--wood); background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 var(--wood); }
body.compact #offer-pile .title { font-size: 12px; max-width: 440px; top: -4px; }
body.compact #stage.p2 #offer-pile .card { width: 64px !important; height: 96px !important; }
body.compact #offer-pile .empty-hint { top: 34px; font-size: 13px; }

/* Kuhhandel am Handy: Gegner-Karten klappen hinter der eigenen Karte auf (kleiner) */
body.compact .pop { width: 104px; height: 116px; margin-left: -52px; bottom: 24px; padding-top: 6px; border-width: 2px; }
body.compact .hgroup:hover .pop, body.compact .hgroup.open .pop { transform: rotate(var(--ang)) translateY(-104px) scale(1); }
body.compact .pop .avatar { width: 32px; height: 32px; }
body.compact .pop .pn { font-size: 13px; }
body.compact .pop .pc { font-size: 12px; }
body.compact .pop .pc b { font-size: 15px; }
body.compact .pop .pa { font-size: 11px; white-space: nowrap; }
body.compact .pop.info { height: 90px; padding-top: 12px; }

/* Meldungen, Aufdecken, Banner, Menü */
body.portrait #toasts, body.portrait #stage.p2 #toasts { left: 20px; right: 20px; top: 490px; width: auto; align-items: center; }
body.portrait #stage.o34 #toasts { top: 572px; }
body.compact #stage.selecting #toasts { display: none; }
body.compact .toast:not(:nth-last-child(-n+2)) { display: none; }   /* hochkant höchstens zwei Meldungen */
body.compact .toast { font-size: 14px; max-width: 440px; padding: 4px 12px; text-align: center; }
body.portrait .reveal { left: 240px; top: 150px; min-width: 0; width: 440px; padding: 12px 14px 14px; }
body.compact .reveal .rtitle { font-size: 26px; }
body.portrait .reveal .rrow { flex-direction: column; gap: 6px; }
body.portrait .reveal .rmid { flex-direction: row; min-width: 0; gap: 14px; }
body.compact .reveal .rvs { font-size: 18px; }
body.compact .reveal .rcards { height: 92px; }
body.compact .reveal .rc { width: 52px; height: 78px; }
body.compact .reveal .rc + .rc { margin-left: -28px; }
body.compact .reveal .rsum { font-size: 32px; }
body.compact .reveal .rdelta { font-size: 38px; }
body.compact #banner { min-width: 380px; max-width: 440px; padding: 14px 20px; }
body.compact #banner .t { font-size: 30px; }
body.compact #banner .d { font-size: 16px; }
body.portrait #top-buttons { right: 16px; top: 8px; }
body.compact .round { height: 38px; min-width: 38px; }
body.portrait #log { right: 16px; top: 16px; bottom: 16px; width: 380px; }

/* ================================================================ Touch allgemein */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { -webkit-tap-highlight-color: transparent; }
.hgroup.open { z-index: 60 !important; transform: translateY(-22px); }
body.compact .hgroup.open { transform: translateY(-12px); }
.hgroup.open .pops { pointer-events: auto; }
.hgroup.open .pop { transform: rotate(var(--ang)) translateY(-146px) scale(1); opacity: 1; transition-delay: var(--d); }
body.compact .hgroup.open .pop { transform: rotate(var(--ang)) translateY(-104px) scale(1); }
#stage:has(#hand .hgroup.open) #actions { opacity: .25; transition: opacity .15s; }
/* ohne Maus bleibt ein angetippter Hover-Zustand sonst „kleben“ */
@media (hover: none) {
  .hgroup:hover:not(.open) { transform: none; }
  .hgroup:hover:not(.open) .pop { opacity: 0; transform: rotate(var(--ang)) translateY(0) scale(.7); }
  .hgroup:hover:not(.open) .pops { pointer-events: none; }
  #stage:has(#hand .hgroup:hover .pop) #actions { opacity: 1; }
  #stage:has(#hand .hgroup.open) #actions { opacity: .25; }
  .ogroup:hover { transform: none; }
  .btn:hover { transform: none; box-shadow: 0 4px 0 var(--wood); }
  .btn.small:hover { box-shadow: 0 3px 0 var(--wood); }
  .btn small { display: none; }   /* Tastenkürzel ergeben ohne Tastatur keinen Sinn */
}
/* Start- und Ergebnisfenster passen aufs Handy */
#overlay { overflow: auto; padding: 16px; }
.panel { width: min(400px, 100%); }
@media (max-width: 440px) {
  .panel { padding: 20px 20px 22px; }
  .panel h1 { font-size: 44px; }
  .logo-cards { height: 96px; margin-top: -40px; }
  .logo-cards img { width: 64px; }
}

/* ================================================================ Handy quer
   Bühne 1040 breit, Höhe nach Seitenverhältnis. Gegner oben in einer Reihe, Stapel + Tafel in der Mitte,
   unten links Geld und Schild, unten Mitte das Bedienfeld, unten rechts die eigenen Tiere. */
body.phland { --opp-w: 44px; --opp-h: 66px; --mid-w: 88px; --mid-h: 132px; }
body.phland #center, body.phland #stage.o34 #center, body.phland #stage.p2 #center, body.phland #stage.p2.o34 #center { left: 520px; top: 140px; }
body.phland #center { gap: 14px; }
body.phland #stage.p2 #center { gap: 84px; }
body.phland #deck-count { left: auto; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-size: 12px; padding: 1px 10px; }
body.phland #actions { left: 520px; bottom: 10px; width: 464px; min-height: 110px; padding: 8px 12px 10px; }
body.phland #wallet { left: 16px; bottom: 12px; width: 262px; height: 110px; }
body.phland #me-plate { left: 16px; right: auto; bottom: 120px; transform: none; gap: 8px; max-width: 280px; align-items: flex-end; }
body.phland #hand, body.phland #stage.p2 #hand { left: 760px; right: auto; bottom: 12px; width: 266px; height: 130px; }
body.phland #offer-pile, body.phland #stage.p2 #offer-pile { left: 760px; bottom: 12px; width: 266px; height: 124px; }
body.phland #offer-pile .title { max-width: 266px; }
body.phland #toasts, body.phland #stage.p2 #toasts, body.phland #stage.o34 #toasts { left: auto; right: 16px; top: 150px; width: 300px; align-items: flex-end; }
body.phland #stage.selecting #toasts { display: none; }
body.phland .toast:not(:nth-last-child(-n+2)) { display: none; }
body.phland .reveal { left: 520px; top: 24px; min-width: 0; width: 760px; padding: 12px 18px 14px; }
body.phland .reveal .rside { min-width: 240px; }
body.phland .reveal .rmid { min-width: 100px; }
body.phland #top-buttons { right: 14px; top: 8px; }
body.phland #log { right: 14px; top: 14px; bottom: 14px; width: 380px; }
/* quer ist wenig Höhe: Summe steht schon über den gelegten Karten, Zusatzhinweis weglassen */
body.phland #actions .sumline, body.phland #actions .hint.only { display: none; }
body.phland #actions h4 { margin-bottom: 6px; }
body.phland .btns.quick { margin-top: 6px; }
body.compact #offer-pile .title .tip { display: none; }

/* ================================================================ Rückblick nach dem Spiel */
.big.alt { background: #fffaf0; margin-top: 10px; }
.panel.stats { width: min(640px, 100%); max-height: 88vh; overflow: auto; text-align: left; padding: 20px 22px 22px; }
.panel.stats h2 { font-family: "Lilita One"; font-weight: 400; margin: 0 0 4px; color: var(--wood); font-size: 26px; }
.panel.stats h3 { margin: 16px 0 4px; font-size: 17px; }
.panel.stats p { margin: 4px 0; font-size: 15px; line-height: 1.4; }
.panel.stats .muted { color: var(--ink-soft); font-size: 14px; }
.panel.stats .foot { margin-top: 14px; font-size: 12px; color: var(--ink-soft); }
.wchart { width: 100%; height: auto; display: block; margin-top: 6px; touch-action: none; cursor: crosshair; }
.wchart .grid { stroke: #e3d4b2; stroke-width: 1; }
.wchart .ax { font-size: 14px; fill: var(--ink-soft); font-family: "Fredoka", sans-serif; }
.wchart .fair { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.wchart .fairt { opacity: .8; }
.wchart .p2 { stroke: var(--wood); stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; }
.wchart .me { fill: none; stroke: #c8372d; stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.wchart .opp { fill: none; stroke: #4f7fc0; stroke-width: 1.6; stroke-linejoin: round; opacity: .55; }
.wchart .cross { stroke: var(--wood); stroke-width: 1; opacity: .5; }
.wchart .dot { fill: #c8372d; stroke: var(--paper); stroke-width: 2; }
.wchart .tm circle { stroke: var(--paper); stroke-width: 2; }
.wchart .tm circle { fill: var(--wood); }
.wchart .tm text { fill: #fff; font-size: 13px; font-weight: 700; font-family: "Fredoka", sans-serif; pointer-events: none; }
.panel.stats .cap { min-height: 40px; font-size: 13px; color: var(--ink); margin: 2px 0 4px; line-height: 1.4; }
.panel.stats .cap .me { color: #c8372d; font-weight: 700; }
.panel.stats .legend { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 6px; color: var(--ink-soft); }
.panel.stats .legend .sw { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-left: 8px; }
.panel.stats .legend .sw:first-child { margin-left: 0; }
.panel.stats .legend .sw.me { background: #c8372d; }
.panel.stats .legend .sw.opp { background: #4f7fc0; opacity: .7; }
.panel.stats .deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 6px 0; }
.panel.stats .deal { display: flex; gap: 10px; align-items: center; background: #fffaf0; border: 2px solid #e3d4b2; border-radius: 12px; padding: 8px; }
.panel.stats .deal.good { border-color: #8cc79a; }
.panel.stats .deal.bad { border-color: #e5a29b; }
.panel.stats .dimg { flex: none; width: 52px; height: 78px; border-radius: 6px; background: center / cover; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.panel.stats .dtxt { min-width: 0; }
.panel.stats .deal .tag { margin: 0 0 2px; }
.panel.stats .deal.good .tag { background: #2f8a46; }
.panel.stats .deal.bad .tag { background: #b3342f; }
.panel.stats .dname { font-weight: 600; font-size: 15px; line-height: 1.2; }
.panel.stats .dname small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.panel.stats .dprice .num { font-size: 22px; color: var(--ink); }
.panel.stats .dprice .vs { font-size: 12px; color: var(--ink-soft); }
.panel.stats .drel { font-size: 12px; font-weight: 600; }
.panel.stats .deal.good .drel { color: #2f8a46; }
.panel.stats .deal.bad .drel { color: #b3342f; }
.panel.stats .turns { list-style: none; padding: 0; margin: 4px 0; }
.panel.stats .turns li, .panel.stats .deals li, .panel.stats .notable li { font-size: 14px; line-height: 1.4; padding: 5px 0; border-bottom: 1.5px dashed #e3d4b2; }
.panel.stats .turns b { display: inline-block; min-width: 72px; }
.panel.stats .up { color: #2f8a46; }
.panel.stats .down { color: #b3342f; }
.panel.stats ul { list-style: none; padding: 0; margin: 4px 0; }
.panel.stats .tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 8px; border-radius: 99px; margin-right: 4px; color: #fff; }
.panel.stats .tag.good { background: #2f8a46; }
.panel.stats .tag.bad { background: #b3342f; }
.panel.stats .rel { color: var(--ink-soft); }
.panel.stats .notable small { display: block; font-size: 12px; color: var(--ink-soft); }

/* ---- Rückblick: Ringe, Balken, Skalen, Kacheln, Reiter */
.panel.stats h4 { margin: 16px 0 6px; font-size: 15px; color: var(--wood); text-transform: uppercase; letter-spacing: .8px; }
.panel.stats .lhint { margin-left: auto; font-size: 12px; opacity: .8; }
.ring { width: 76px; height: 76px; flex: none; transform: rotate(-90deg); }
.ring .rbg { fill: none; stroke: #e8dcc0; stroke-width: 5; }
.ring .rfg { fill: none; stroke: var(--gold-dark); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 1.1s cubic-bezier(.3,.7,.2,1); }
.ring.win .rfg { stroke: #2f8a46; }
.ring text { transform: rotate(90deg); transform-origin: 21px 21px; font-family: "Lilita One"; font-size: 9px; fill: var(--ink); }
.agreehead, .tradehead { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.agreehead > div, .tradehead > div { flex: 1; min-width: 0; font-size: 15px; }
.meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.meter .ml { width: 92px; color: var(--ink-soft); }
.meter .mbar { flex: 1; height: 10px; border-radius: 99px; background: #e8dcc0; overflow: hidden; }
.meter .mbar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #d9a41f, var(--gold-dark)); transition: width 1s cubic-bezier(.3,.7,.2,1); }
.meter b { width: 40px; text-align: right; font-family: "Lilita One"; font-weight: 400; }
.tabs { display: flex; gap: 6px; margin: 18px 0 4px; padding: 4px; background: #efe2c4; border-radius: 14px; }
.tabs button { flex: 1; border: none; background: none; padding: 9px 6px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.tabs button.on { background: var(--paper); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; }
.tile { background: #fffaf0; border: 2px solid #e3d4b2; border-radius: 12px; padding: 8px 6px; text-align: center; }
.tile b { display: block; font-size: 26px; font-weight: 400; color: var(--ink); line-height: 1.1; }
.tile span { font-size: 12px; color: var(--ink-soft); }
.tile.good b { color: #2f8a46; }
.tile.bad b { color: #b3342f; }
.scale { margin: 12px 0; }
.scale .st { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.scale .st .good { color: #2f8a46; font-weight: 600; }
.scale .st .bad { color: #b3342f; font-weight: 600; }
.scale .sbar { position: relative; height: 12px; border-radius: 99px; margin: 8px 0 4px; }
.scale.low .sbar { background: linear-gradient(90deg, #8cc79a, #f1e6c6 45%, #f1e6c6 55%, #e5a29b); }
.scale.high .sbar { background: linear-gradient(90deg, #e5a29b, #f1e6c6 45%, #f1e6c6 55%, #8cc79a); }
.scale .sbar .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--ink-soft); opacity: .5; }
.scale .mk { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--wood); box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: left 1.1s cubic-bezier(.3,.7,.2,1); }
.scale .sl { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft); }
.scale .snote { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---- Kuhhandel-Highlight: Endlos-Animation */
.hl { display: flex; gap: 12px; align-items: center; background: #fffaf0; border: 2.5px solid #e3d4b2; border-radius: 14px; padding: 8px; margin: 8px 0; }
.hl.good { border-color: #8cc79a; box-shadow: 0 0 0 3px rgba(47,138,70,.12); }
.hl.bad { border-color: #e5a29b; box-shadow: 0 0 0 3px rgba(179,52,47,.12); }
.hl-stage { position: relative; flex: none; width: 210px; height: 170px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #1f7a3c, #0f4d24); box-shadow: inset 0 0 0 3px #5a2e17; }
.hl-stage .who { position: absolute; left: 8px; font-size: 11px; font-weight: 600; color: rgba(247,239,220,.85); }
.hl-stage .who.top { top: 5px; }
.hl-stage .who.bot { bottom: 5px; }
.hlrow { position: absolute; left: 0; right: 0; top: 58px; height: 54px; display: flex; justify-content: center; gap: 10px; }
.hlc { position: relative; width: 36px; height: 54px; border-radius: 4px; background: center / cover; box-shadow: 0 2px 5px rgba(0,0,0,.4);
  opacity: 0; animation: 7s cubic-bezier(.3,.7,.2,1) infinite; animation-delay: calc(var(--i) * .12s); }
.hlg { display: flex; }
.hlg .hlc + .hlc { margin-left: -16px; }
.hlc.l { animation-name: hlL; }
.hlc.r { animation-name: hlR; }
@keyframes hlL {
  0% { opacity: 0; transform: translateX(-150px) rotate(-20deg); }
  6% { opacity: 1; }
  14%, 58% { opacity: 1; transform: translateX(0) rotate(var(--r)); }
  72%, 100% { opacity: 0; transform: translateY(calc(var(--exit) * 110px)) rotate(var(--r)); }
}
@keyframes hlR {
  0% { opacity: 0; transform: translateX(150px) rotate(20deg); }
  6% { opacity: 1; }
  14%, 58% { opacity: 1; transform: translateX(0) rotate(var(--r)); }
  72%, 100% { opacity: 0; transform: translateY(calc(var(--exit) * 110px)) rotate(var(--r)); }
}
.hlm { position: absolute; left: 50%; display: flex; align-items: center; gap: 6px; transform: translateX(-50%); opacity: 0; animation: 7s ease-out infinite; }
.hlm.top { top: 14px; animation-name: hlTop; }
.hlm.bot { bottom: 16px; animation-name: hlBot; }
.hlm i { width: 22px; height: 33px; border-radius: 3px; background: url("assets/web/rueckseite_geld.webp") center / cover; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.hlm b { font-size: 18px; font-weight: 400; color: var(--paper); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
@keyframes hlTop { 0%, 14% { opacity: 0; transform: translate(-50%, -50px); } 26%, 60% { opacity: 1; transform: translate(-50%, 0); } 70%, 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes hlBot { 0%, 18% { opacity: 0; transform: translate(-50%, 50px); } 30%, 60% { opacity: 1; transform: translate(-50%, 0); } 70%, 100% { opacity: 0; transform: translate(-50%, 0); } }
.hld { position: absolute; left: 50%; top: 72px; padding: 2px 12px; border-radius: 99px; background: var(--gold); color: var(--wood);
  border: 2px solid var(--wood); font-size: 18px; white-space: nowrap; opacity: 0; transform: translateX(-50%) scale(.5); animation: hlD 7s ease-out infinite; z-index: 3; }
@keyframes hlD { 0%, 32% { opacity: 0; transform: translateX(-50%) scale(.5); } 38% { opacity: 1; transform: translateX(-50%) scale(1.12); }
  42%, 58% { opacity: 1; transform: translateX(-50%) scale(1); } 64%, 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
.hl-txt { min-width: 0; font-size: 14px; line-height: 1.35; }
.hl.good .tag { background: #2f8a46; }
.hl.bad .tag { background: #b3342f; }
.hl-bids { margin-top: 4px; }
.hl-bids .num { font-weight: 400; font-size: 17px; }
.hl-res { margin-top: 3px; font-weight: 600; }
.hl.good .hl-res b { color: #2f8a46; }
.hl.bad .hl-res b { color: #b3342f; }
.hl-ref { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 520px) {
  .hl { flex-direction: column; align-items: stretch; }
  .hl-stage { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hlc, .hlm, .hld { animation: none; opacity: 1; transform: none; }
  .hld { transform: translateX(-50%); }
  .hlm { transform: translateX(-50%); }
}

/* ---- Rückblick: Legende je Spieler, Schlüsselmomente, Replay */
.panel.stats .legend { flex-wrap: wrap; gap: 4px 12px; }
.panel.stats .legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.panel.stats .legend .lg .sw { margin-left: 0; width: 16px; height: 4px; }
.panel.stats .legend .lg.me { font-weight: 700; color: var(--ink); }
.panel.stats .legend .lg.me .sw { height: 5px; }
.wchart .opp { opacity: .8; stroke-width: 1.7; }
.wchart .tm { cursor: pointer; }
.wchart .tm:hover circle { fill: var(--gold-dark); }
.moments { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.moment { display: flex; gap: 10px; align-items: flex-start; background: #fffaf0; border: 2px solid #e3d4b2; border-left-width: 6px; border-radius: 12px; padding: 8px 10px; }
.moment.m-up { border-left-color: #2f8a46; }
.moment.m-down { border-left-color: #b3342f; }
.moment .mnum { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--wood); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.moment .mimg { flex: none; width: 40px; height: 60px; border-radius: 5px; background: center / cover; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.moment .mtxt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.moment .mcq { color: var(--wood); font-weight: 600; }
.moment .rp { margin-top: 6px; }

/* ---- Kurve: Markierung mitten im Wechsel */
.wchart .tm line { stroke: var(--wood); stroke-width: 1.5; }
.wchart .tm .tp { fill: var(--wood); stroke: var(--paper); stroke-width: 1.5; }
.wchart .me { stroke-width: 3; }

/* ---- Mini-Animation einer Versteigerung (Endlosschleife) */
.am-stage { position: relative; flex: none; width: 112px; height: 140px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #1f7a3c, #0f4d24); box-shadow: inset 0 0 0 3px #5a2e17; }
.am-stage.small { width: 84px; height: 112px; }
.am-stage .who { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 600; color: rgba(247,239,220,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.am-stage .who.top { top: 4px; }
.am-stage .who.bot { bottom: 4px; }
.amc { position: absolute; left: 50%; top: 50%; width: 40px; height: 60px; margin: -36px 0 0 -20px; border-radius: 4px; background: center / cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.45); opacity: 0; animation: amCard 6s cubic-bezier(.3,.7,.2,1) infinite; }
.am-stage.small .amc { width: 32px; height: 48px; margin: -30px 0 0 -16px; }
@keyframes amCard {
  0% { opacity: 0; transform: translateY(-14px) rotateY(90deg) scale(.8); }
  10% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
  56% { opacity: 1; transform: translateY(0); }
  72%, 100% { opacity: 0; transform: translateY(calc(var(--dir) * 70px)) scale(.9); }
}
.amp { position: absolute; left: 50%; top: calc(50% + 28px); transform: translateX(-50%) scale(.5); padding: 0 8px; border-radius: 99px;
  background: var(--gold); color: var(--wood); border: 2px solid var(--wood); font-size: 14px; opacity: 0; animation: amPrice 6s ease-out infinite; }
.am-stage.small .amp { top: calc(50% + 21px); font-size: 12px; }
@keyframes amPrice { 0%, 16% { opacity: 0; transform: translateX(-50%) scale(.5); } 22% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  26%, 40% { opacity: 1; transform: translateX(-50%) scale(1); } 46%, 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
.amm { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 4px; margin-top: -12px; opacity: 0; animation: amMoney 6s ease-in-out infinite; }
.amm i { width: 16px; height: 24px; border-radius: 2px; background: url("assets/web/rueckseite_geld.webp") center / cover; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.amm b { font-size: 13px; font-weight: 400; color: var(--paper); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
/* Geld wandert entgegen der Karte: vom Käufer zum Versteigerer */
@keyframes amMoney {
  0%, 40% { opacity: 0; transform: translate(-50%, calc(var(--dir) * 46px)); }
  46% { opacity: 1; }
  62% { opacity: 1; transform: translate(-50%, calc(var(--dir) * -46px)); }
  70%, 100% { opacity: 0; transform: translate(-50%, calc(var(--dir) * -46px)); }
}
.panel.stats .deals { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.panel.stats .deal { align-items: center; }
@media (prefers-reduced-motion: reduce) { .amc, .amp, .amm { animation: none; opacity: 1; } .amm { display: none; } }

/* ---- Replay eines Kuhhandels: zwei Spieler, oben und unten */
.trv-ov { z-index: 1200; }
.panel.trv { width: min(520px, 100%); padding: 18px 18px 20px; }
.panel.trv h2 { font-family: "Lilita One"; font-weight: 400; margin: 0; color: var(--wood); font-size: 24px; }
.trtitle { font-size: 15px; margin: 2px 0 10px; }
.tr-stage { position: relative; height: 340px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #1f7a3c, #0f4d24); box-shadow: inset 0 0 0 4px #5a2e17; }
.trp { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; color: var(--paper); white-space: nowrap; }
.trp.top { top: 10px; }
.trp.bot { bottom: 10px; }
.trp .avatar { width: 34px; height: 34px; border-width: 2px; }
.trp b { font-size: 15px; }
.trp .role { font-size: 11px; background: var(--gold); color: var(--wood); border-radius: 99px; padding: 0 7px; font-weight: 700; }
.trrow { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; gap: 30px; }
.trg { display: flex; }
.trg .trc + .trc { margin-left: -22px; }
.trc { width: 50px; height: 75px; border-radius: 5px; background: center / cover; box-shadow: 0 3px 8px rgba(0,0,0,.45); opacity: 0;
  transition: transform .6s cubic-bezier(.3,.7,.2,1), opacity .4s; transition-delay: calc(var(--i) * .1s); }
.trc.b { transform: translateY(150px); }
.trc.t { transform: translateY(-150px); }
.s-cards .trc { opacity: 1; transform: translateY(0) rotate(calc((var(--i) - .5) * 5deg)); }
.s-win .trc { opacity: 0; transform: translateY(calc(var(--win) * 160px)); transition-delay: 0s; }
.trs { position: absolute; left: 50%; display: flex; align-items: center; gap: 8px; opacity: 0;
  transition: transform .7s cubic-bezier(.3,.7,.2,1), opacity .4s; }
.trs.top { top: 58px; transform: translate(-50%, -40px); }
.trs.bot { bottom: 58px; transform: translate(-50%, 40px); }
.trs.in, .trs.acc { opacity: 1; transform: translate(-50%, 0); }
.trs .backs { position: relative; height: 39px; }
.trs .backs i { position: absolute; top: 0; width: 26px; height: 39px; border-radius: 3px; background: url("assets/web/rueckseite_geld.webp") center / cover; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.trs .trn { font-family: "Lilita One"; font-size: 13px; color: var(--paper); background: rgba(0,0,0,.35); border-radius: 99px; padding: 0 7px; }
.trs .trv { font-size: 22px; font-weight: 400; color: var(--gold); -webkit-text-stroke: 1px var(--wood); paint-order: stroke fill; opacity: .5; min-width: 30px; }
.trs .trv.on { opacity: 1; }
.trs.acc .backs, .trs.acc .trn { display: none; }
.trs.acc .trv { font-family: "Fredoka"; font-size: 15px; -webkit-text-stroke: 0; color: var(--paper); opacity: 1; }
.trs.to-bot { transform: translate(-50%, 185px); opacity: 0; transition: transform .8s cubic-bezier(.4,.1,.2,1), opacity .3s .6s; }
.trs.to-top { transform: translate(-50%, -185px); opacity: 0; transition: transform .8s cubic-bezier(.4,.1,.2,1), opacity .3s .6s; }
.trd { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.5); z-index: 4; padding: 3px 14px; border-radius: 99px;
  background: var(--gold); color: var(--wood); border: 2px solid var(--wood); font-size: 20px; white-space: nowrap; opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .25s; }
.s-diff .trd { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.s-win .trd { opacity: 0; }
.trres { margin-top: 10px; font-size: 15px; font-weight: 600; opacity: .25; transition: opacity .4s; }
.trres.on { opacity: 1; }
.trres .mcq { color: var(--wood); }

/* ---- Siegchance vorher/nachher als Balken */
.crs { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; width: 100%; max-width: 380px; }
.crs.wide { max-width: none; margin-top: 10px; gap: 6px; }
.crs .crh { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-soft); font-weight: 600; }
.cr { display: grid; grid-template-columns: 112px minmax(80px, 1fr) 40px; align-items: center; gap: 8px; font-size: 13px; }
.crs.wide .cr { grid-template-columns: 128px 1fr 44px; font-size: 14px; }
.cr .cn { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cr .cnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr.me .cnm { font-weight: 700; }
.panel.stats .cr .dl, .panel.trv .cr .dl { flex: none; font-family: "Lilita One"; font-size: 12px; padding: 0 7px; border-radius: 99px;
  color: #fff; line-height: 18px; letter-spacing: .3px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
.cr .dl.up { background: #2f8a46; }
.cr .dl.down { background: #c0392b; }
.cr .dl.eq { background: #b9a988; }
.cr .cbar { position: relative; height: 14px; border-radius: 99px; background: #efe5cc; box-shadow: inset 0 1px 2px rgba(61,38,20,.18); }
.crs.wide .cr .cbar { height: 16px; }
.cr .cbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width 1.1s cubic-bezier(.3,.7,.2,1); }
.cr .cbar .fill { background: var(--c); z-index: 2; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.25); }
.cr .cbar .gain { z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: 0 0 6px color-mix(in srgb, var(--c) 50%, transparent); }
.cr .cbar .ghost { z-index: 1; background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--c) 70%, transparent); box-sizing: border-box; }
.cr .cbar .tick { left: 0; width: 2px; top: -3px; bottom: -3px; margin-left: -1px; border-radius: 1px; background: var(--wood); opacity: .55; z-index: 3; transition: none; }
.cr .cv { text-align: right; font-weight: 400; font-size: 15px; }
.cr.me .cv { color: var(--c); }

/* ---- Replay: Einblendung am Ende */
.trx { position: absolute; left: 50%; display: flex; align-items: center; gap: 6px; z-index: 6; pointer-events: none;
  opacity: 0; transform: translateX(-50%) scale(.6); transition: opacity .3s, transform .4s cubic-bezier(.2,.9,.3,1.4); }
.trx.top { top: 52px; }
.trx.bot { bottom: 52px; }
.s-pop .trx { opacity: 1; transform: translateX(-50%) scale(1); }
.trx .mon { font-family: "Lilita One"; font-size: 26px; color: var(--paper); -webkit-text-stroke: 1.5px var(--wood); paint-order: stroke fill; }
.trx .mon.good { color: #8fe0a0; }
.trx .mon.bad { color: #ff8f84; }
.trx .got { display: inline-flex; align-items: center; gap: 3px; font-family: "Lilita One"; font-size: 18px; color: var(--paper); }
.trx .got i { width: 22px; height: 33px; border-radius: 3px; background: center / cover; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.trx .stamp { font-family: "Lilita One"; font-size: 15px; padding: 2px 10px; border-radius: 8px; color: #fff; transform: rotate(-6deg);
  border: 2px solid rgba(255,255,255,.85); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.trx .stamp.good { background: #2f8a46; }
.trx .stamp.bad { background: #b3342f; }

/* ---- gleiche Tierart hervorheben (Maus über einer Karte) */
.hgroup.same-a .card, .ogroup.same-a .card, #revealed .tcard.same-a, #revealed .flip.same-a .face.f {
  box-shadow: 0 0 0 3px #3d8bfd, 0 0 14px 3px rgba(61,139,253,.55), 0 4px 10px rgba(0,0,0,.3) !important;
}

/* ---- kleiner Replay-Knopf oben rechts in Karten */
.moment, .deal, .hl, .aicard { position: relative; }
.rpi { position: absolute; top: 6px; right: 6px; z-index: 5; width: 28px; height: 28px; border-radius: 50%; padding: 0 0 0 2px;
  border: 2px solid var(--wood); background: var(--gold); color: var(--wood); font-size: 11px; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 2px 0 var(--wood); }
.rpi:hover { background: #ffd95e; transform: translateY(-1px); }
.rpi:active { transform: translateY(1px); box-shadow: none; }

/* ---- Kuhhandel-Highlight: Stapel mit Kartenanzahl */
.hlm .fan { position: relative; height: 24px; display: inline-block; }
.hlm .fan i { position: absolute; top: 0; width: 16px; height: 24px; border-radius: 2px; background: url("assets/web/rueckseite_geld.webp") center / cover; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.hlm .cntc { font-family: "Lilita One"; font-size: 12px; color: var(--paper); background: rgba(0,0,0,.4); border-radius: 99px; padding: 0 6px; }

/* ---- KI hätte anders entschieden: Vergleich Du / KI */
.aicards { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.aicard { display: flex; gap: 10px; align-items: center; background: #fffaf0; border: 2px solid #e3d4b2; border-left: 6px solid #3d8bfd; border-radius: 12px; padding: 8px 40px 8px 10px; }
.aicard .mimg { flex: none; width: 36px; height: 54px; border-radius: 5px; background: center / cover; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.aicard .mtxt { flex: 1; min-width: 0; font-size: 14px; }
.aicard small { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 3px; }
.aicmp { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; margin: 4px 0; }
.aicmp .ylabel, .aicmp .alabel { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; text-align: center; white-space: nowrap; }
.aicmp .ylabel { background: #efe2c4; color: var(--ink); }
.aicmp .alabel { background: #3d8bfd; color: #fff; }
.aicmp .yv { font-size: 14px; }
.aicmp .av { font-size: 14px; font-weight: 600; color: #1f5fbf; }
.aitext { font-size: 13px; color: #1f5fbf; margin: 4px 0; }
.moment.m-ai { border-left-color: #3d8bfd; }
.moment { padding-right: 40px; }
.wchart .tm.ai circle:not(.tp) { fill: #3d8bfd; }

/* ---- Replay einer Versteigerung */
.auc { position: absolute; left: 50%; top: 50%; width: 64px; height: 96px; margin: -48px 0 0 -32px; border-radius: 6px; background: center / cover;
  box-shadow: 0 4px 12px rgba(0,0,0,.5); opacity: 0; transform: rotateY(90deg) scale(.8);
  transition: transform .6s cubic-bezier(.3,.7,.2,1), opacity .3s; }
.s-card .auc { opacity: 1; transform: none; }
.s-win .auc { opacity: 0; transform: translateY(calc(var(--win) * 150px)) scale(.9); transition: transform .8s cubic-bezier(.4,.1,.2,1), opacity .4s .5s; }
.ticker { position: absolute; right: 10px; top: 48px; bottom: 48px; width: 118px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.tk { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: rgba(247,239,220,.92); color: var(--ink); border-left: 4px solid var(--c, var(--wood)); opacity: 0; transform: translateX(20px);
  transition: transform .3s, opacity .3s, background .2s; }
.tk b { font-size: 14px; font-weight: 400; }
.tk.in { opacity: .65; transform: none; }
.tk.hi { opacity: 1; background: var(--gold); }
.tk.bust { border-left-color: #b3342f; background: #f5c4bd; justify-content: center; }
.au-stage .trd { top: auto; bottom: 96px; }
.aumoney { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 5px; opacity: 0; z-index: 3;
  transform: translate(-50%, calc(var(--win) * 120px)); transition: transform .8s cubic-bezier(.4,.1,.2,1), opacity .3s; }
.aumoney i { width: 22px; height: 33px; border-radius: 3px; background: url("assets/web/rueckseite_geld.webp") center / cover; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.aumoney b { font-size: 18px; font-weight: 400; color: var(--paper); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.s-win .aumoney { opacity: 1; transform: translate(-50%, calc(var(--win) * -120px)); }
.s-pop .aumoney { opacity: 0; transition-delay: 0s; }
@media (max-width: 520px) { .ticker { width: 96px; } .au-stage .auc { margin-left: -60px; } }

/* Gedrehte Karten als echtes Bild (Safari/iOS: background-size wird bei 3D-Drehung ignoriert) */
#revealed .face img, .reveal .rf img, .amc img, .auc img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.reveal .rf { overflow: hidden; }

/* ---- Rückblick am Handy: nichts darf seitlich überstehen */
@media (max-width: 560px) {
  .rules-ov { padding: 8px; }
  .panel.stats { padding: 14px 12px 16px; overflow-x: hidden; }
  .moment { flex-wrap: wrap; padding-right: 10px; }
  .moment .mtxt { flex: 1 1 100%; }
  .cr { grid-template-columns: minmax(70px, auto) minmax(56px, 1fr) 36px; gap: 6px; }
  .crs.wide .cr { grid-template-columns: minmax(84px, auto) minmax(56px, 1fr) 40px; }
  .aicard { padding-right: 38px; }
}