/* Donkey (Kazhutha). The table reuses the Thurupu card table (body.thurupu-mode);
   these rules cover what differs: more players, larger hands and the pickup. */
.donkey-tile .game-tile-art{background:radial-gradient(ellipse at 70% 25%,#9a8bb055,transparent 60%),linear-gradient(150deg,#3d4a63,#25352f)}
.donkey-tile .game-tile-art .decorative-hand{transform:translate(-56%,-48%)}
.donkey-tile-head{position:absolute;right:7%;bottom:5%;width:104px;height:104px;filter:drop-shadow(0 6px 8px #0b1c1666);transform:rotate(9deg)}
@media (max-width:580px){.donkey-tile-head{width:90px;height:90px;right:6%}}

.donkey-rule-pick{border:1px solid var(--line);border-radius:12px;padding:10px 12px 6px;margin:0;display:grid;gap:4px}
.donkey-rule-pick legend{font-size:.78rem;font-weight:650;padding:0 4px}
.donkey-rule-pick .option-row{display:flex;gap:10px;align-items:flex-start;padding:6px 2px;cursor:pointer}
.donkey-rule-pick .option-row input{margin-top:4px}
.donkey-rule-pick .option-row strong{display:block;font-size:.86rem}
.donkey-rule-pick .option-row small{display:block;color:var(--muted);font-size:.74rem;line-height:1.45}
.donkey-rules-card h2{font-size:1.5rem}

/* Seats: a card count beside the fan, an "Out" badge once a player escapes. */
.donkey-seats .seat-hand{align-items:flex-end;gap:5px}
.donkey-count{font-size:.68rem;font-weight:800;line-height:1;padding:2px 5px;border-radius:8px;background:#0d2e2366;color:#f1ecd2;font-variant-numeric:tabular-nums}
.donkey-out-badge{display:inline-block;padding:3px 8px;border-radius:10px;background:#e7c66f;color:#2f3a22;font-size:.66rem;font-weight:800;white-space:nowrap}
.table-orbit .seat-circle .player-seat.escaped{opacity:.82}
.table-orbit .seat-circle .player-seat.escaped .name{color:#f3dc9b}
.donkey-marks{font-size:.62rem;font-weight:800;color:#f3c7b8;padding:2px 4px;border-radius:6px;background:#5c2a2266}
.donkey-seat-head svg{width:30px;height:30px;display:block}
.table-orbit .seat-circle .player-seat.is-donkey{border-color:#e0a490;background:#5a2f2a99}

/* The finished trick: a cut card gets a red tag, the card that picks up glows. */
.donkey-cut-tag{background:#c4473a;color:#fff}
.donkey-discard-tag{background:#d9d4bf;color:#41443a}
.donkey-trick .trick-winner .trick-face{box-shadow:0 0 0 3px #f3cf7b,0 0 18px #f3cf7b99;border-radius:10px}
.donkey-pickup .donkey-trick .trick-winner .trick-face{box-shadow:0 0 0 3px #f09a86,0 0 20px #f09a86aa}
.donkey-in-flight{visibility:hidden}
.donkey-flight{position:absolute;left:0;top:0;will-change:transform,opacity}
.table-orbit.donkey-orbit .thurupu-center,.audience-board .table-orbit.donkey-orbit .thurupu-center{grid-template-columns:minmax(0,1fr);gap:0}
.donkey-trick .trick-position{z-index:calc(1 + var(--play-order,0))}
/* With five or more players the empty slots would crowd the middle, so only played cards show. */
.donkey-orbit:not([data-seat-count="3"]):not([data-seat-count="4"]) .donkey-trick .trick-empty{visibility:hidden}

/* A typed length, so the size worked out against the table (cqw, cqh) reaches
   the cards as pixels; the cards are size containers of their own. */
@property --ring-card{syntax:'<length>';inherits:true;initial-value:76px}
/* Five or more players: each card sits on a ring at its player's angle. The
   ring and the card size come from the free space inside the seats (the orbit
   is a size container), so cards never cover each other. Per player count:
   --kx/--ky are the ring radii and --ex/--ey the ring's reach, all in card widths. */
.donkey-orbit{container-type:size}
.donkey-orbit[data-seat-count="5"]{--kx:1.1;--ky:1.35;--ex:1.55;--ey:2.05}
.donkey-orbit[data-seat-count="6"]{--kx:1.25;--ky:1.5;--ex:1.58;--ey:2.2}
.donkey-orbit[data-seat-count="7"]{--kx:1.95;--ky:1.75;--ex:2.4;--ey:2.45}
.donkey-orbit[data-seat-count="8"]{--kx:1.5;--ky:2.08;--ex:2;--ey:2.78}
.donkey-orbit[data-seat-count="9"]{--kx:1.95;--ky:2.48;--ex:2.42;--ey:3.18}
.donkey-orbit[data-seat-count="10"]{--kx:1.8;--ky:2.9;--ex:2.21;--ey:3.6}
.table-orbit.donkey-orbit:not([data-seat-count="3"]):not([data-seat-count="4"]) .donkey-trick,
.audience-board .table-orbit.donkey-orbit:not([data-seat-count="3"]):not([data-seat-count="4"]) .donkey-trick{
  --ring-ax:calc(50cqw - var(--seat-width) - 6px);--ring-ay:calc(50cqh - var(--seat-height) - 6px);
  --ring-card:clamp(22px,min(calc(var(--ring-ax) / var(--ex)),calc(var(--ring-ay) / var(--ey))),84px);
  --trick-width:var(--ring-card);--trick-height:calc(var(--ring-card) * 1.4);
  position:absolute;left:50%;top:50%;width:0;height:0;margin:0}
.table-orbit.donkey-orbit:not([data-seat-count="3"]):not([data-seat-count="4"]) .donkey-trick .trick-position{
  left:calc(var(--ring-x) * var(--kx) * var(--trick-width) - var(--trick-width) / 2);
  top:calc(var(--ring-y) * var(--ky) * var(--trick-width) - var(--trick-height) / 2);width:var(--trick-width);gap:0}
.table-orbit.donkey-orbit:not([data-seat-count="3"]):not([data-seat-count="4"]) .donkey-trick .trick-face{transform:none}
.table-orbit.donkey-orbit:not([data-seat-count="3"]):not([data-seat-count="4"]) .donkey-trick .playing-card{border-radius:calc(var(--trick-width) * .1)}
.table-orbit.donkey-orbit:not([data-seat-count="3"]):not([data-seat-count="4"]) .donkey-trick .simple-card .card-value{font-size:calc(var(--trick-width) * .42)}
.table-orbit.donkey-orbit:not([data-seat-count="3"]):not([data-seat-count="4"]) .donkey-trick .simple-card .card-suit{font-size:calc(var(--trick-width) * .38)}
.table-orbit.donkey-orbit:not([data-seat-count="3"]):not([data-seat-count="4"]) .donkey-trick .trump-play-tag{font-size:calc(var(--trick-width) * .17);padding:1px 3px;bottom:3px;right:2px}

/* Set-aside cards: a small stack in the top corner beside the player count. */
.donkey-strip-end{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.donkey-pile{display:inline-flex;align-items:center;gap:3px;pointer-events:none}
.donkey-pile-back{width:13px;height:18px;border-radius:2px;border:1.5px solid #e4dbbd;background:#839276 repeating-linear-gradient(45deg,transparent 0,transparent 2px,#ffffff22 2px,#ffffff22 3px);box-shadow:1.5px 1.5px 0 #fffdf2,2.5px 2.5px 0 #d4d1bd}
.donkey-pile b{font-size:.66rem;font-weight:800;color:#e9ecd7;font-variant-numeric:tabular-nums}
.donkey-pile.empty{visibility:hidden}
.audience-board .donkey-pile-back{width:18px;height:25px}
.audience-board .donkey-pile b{font-size:.9rem}
.donkey-seat-dealing{display:block;width:30px;height:16px}
.donkey-dealing-note{color:var(--muted)}
.donkey-strip .donkey-chip{font-weight:700}

/* A hand of up to 50 cards: overlap more as it grows, scroll when it no longer fits. */
.donkey-hand .hand-cards{container-type:inline-size;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
.donkey-hand .hand-fan{width:max-content;min-width:100%;margin:0 auto}
/* Each button is the exposed strip of its card: wide enough to read the rank,
   narrower as the hand grows, and the row scrolls once even that no longer fits. */
.donkey-hand.hand-area .hand-fan{--step:max(calc(var(--hand-card-width) * .3),min(calc(var(--hand-card-width) * .47),calc((100cqw - var(--hand-card-width) - 20px) / max(1, var(--n) - 1))))}
.donkey-hand.hand-area .hand-fan .card-button{width:var(--step);min-width:var(--step);flex:0 0 var(--step)}
.donkey-hand.hand-area .hand-fan .card-button:last-child{width:var(--hand-card-width);min-width:var(--hand-card-width);flex-basis:var(--hand-card-width)}
.donkey-hand .hand-fan{justify-content:center}
.donkey-hand .unavailable-card .playing-card{filter:saturate(.45);background:#e4e4d8}
.donkey-hand .unavailable-card .card-value,.donkey-hand .unavailable-card .card-suit{opacity:.55}
.donkey-hand .card-button.selected{transform:translateY(-14px);z-index:60}
body.thurupu-mode.in-game .donkey-hand .hand-cards{overflow-x:auto;overflow-y:hidden;padding-top:16px;margin-top:-16px}
@media (max-width:580px) and (orientation:portrait){body.thurupu-mode.in-game .donkey-hand .hand-cards{--hand-card-width:min(var(--thu-card),74px);--hand-card-height:calc(min(var(--thu-card),74px) * 1.35)}}
/* Narrow strips keep the rank readable: the corner text follows the strip width. */
.donkey-hand .hand-fan .simple-card .card-value{font-size:min(32cqw,calc(var(--step) * .8));margin-left:6%}
.donkey-hand .hand-fan .simple-card .card-suit{font-size:min(34cqw,calc(var(--step) * .8));margin-left:6%}

/* Round and match result. */
.donkey-result{display:grid;gap:14px}
.donkey-result-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donkey-result-face{position:relative;width:92px;height:92px;flex-shrink:0}
.donkey-result-player .gh-face{--face:76px}
.donkey-result-head{position:absolute;right:-14px;bottom:-10px;width:58px;height:58px;filter:drop-shadow(0 3px 4px #0002)}
.donkey-result-title{font-family:Georgia,serif;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;color:#5c2d26;margin:4px 0 0}
.donkey-result.you-donkey .donkey-result-title{color:#922c22}
.donkey-left{font-size:.9rem;color:#7b5a52;margin-top:4px}
.donkey-leftover{flex-wrap:wrap}
.donkey-order-title{font-size:.95rem;margin-top:4px}
.donkey-order{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.donkey-order li{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #d7decf;border-radius:12px;background:#ffffff9a}
.donkey-order-place{min-width:38px;font-weight:800;color:#8a6a2e}
.donkey-order-face .gh-face{--face:34px}
.donkey-order-name{font-weight:700;font-size:1rem}
.donkey-order small{margin-left:auto;color:var(--muted)}
.donkey-order li.donkey-last{border:2px solid #d98a76;background:#fdeee8}
.donkey-order li.donkey-last .donkey-order-place{color:#922c22}
.donkey-round-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.donkey-round-list li{display:grid;gap:2px;padding:9px 0;border-top:1px solid var(--line);font-size:.82rem}
.donkey-round-list small{color:var(--muted)}
.audience-board .donkey-result-title{font-size:clamp(2.2rem,3.4vw,3.2rem)}
.audience-board .donkey-order-name{font-size:1.3rem}
@media (prefers-reduced-motion:reduce){.donkey-hand .card-button.selected{transform:translateY(-8px)}}
.past-verdict.donkey-verdict{background:#f6dcd3;color:#7a2a20}