/* Fonts are vendored locally in assets/fonts.css, loaded before this file in
   index.html — no remote font fetch, so the app is fully offline and private. */

:root { --night:#17213f; --indigo:#253c70; --violet:#6b58bd; --orchid:#cb5fa4; --coral:#f27d76; --mango:#ffc85c; --mint:#76d9c2; --cream:#fff8e8; --ink:#20304e; --line:#bac7db; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; min-height:100vh; color:var(--cream); background:url('./assets/table-background.png') center/cover fixed no-repeat #17234a; font-family:'Bai Jamjuree',sans-serif; }
body::before,body::after { content:''; position:fixed; z-index:-1; width:52vw; aspect-ratio:1; border:1px solid #ffffff12; border-radius:48% 52% 52% 45%; }
body::before { top:-31vw; left:-20vw; box-shadow:0 0 0 26px #ffffff08,0 0 0 55px #ffffff05; } body::after { right:-25vw; bottom:-35vw; box-shadow:0 0 0 28px #ffffff08,0 0 0 61px #ffffff05; }
button { font:inherit; cursor:pointer; }.game-shell { width:min(1080px,100%); margin:auto; padding:26px clamp(14px,3vw,34px) 34px; overflow:visible; }

.topbar { display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:14px; }.brand { display:flex; align-items:center; gap:12px; }.brand-mark { position:relative; display:grid; place-items:center; width:54px; height:54px; color:var(--cream); background:linear-gradient(135deg,var(--coral),var(--orchid)); border-radius:18px 18px 18px 4px; box-shadow:0 7px 0 #9b3f77,0 12px 22px #07132c55; font-size:28px; }.brand-mark::after { content:'✦'; position:absolute; right:-8px; top:-11px; color:var(--mango); font-size:17px; }.brand h1 { margin:0; font-family:'Chonburi',serif; font-size:34px; font-weight:400; letter-spacing:.5px; line-height:.87; text-shadow:0 3px #15213f; }.brand p { margin:5px 0 0; color:#d9e5ff; font:7px 'Press Start 2P'; letter-spacing:1.3px; white-space:nowrap; }
.seat-picker { display:flex; align-items:center; gap:5px; padding:6px 7px; border:1px solid #ffffff42; border-radius:13px; background:#18254bbb; box-shadow:inset 0 1px #ffffff2b; }.seat-picker span,.round-chip span,.pile-label { color:#e6efff; font:6px 'Press Start 2P'; letter-spacing:.4px; }.seat-picker span { margin:0 3px 0 1px; }.seat-picker button { width:28px; height:27px; border:0; border-radius:8px; color:#edf4ff; background:#ffffff17; font-weight:700; }.seat-picker button:hover { background:#ffffff2b; }.seat-picker button.active { color:#5b3452; background:var(--mango); box-shadow:0 2px 0 #d69139,0 0 12px #ffc85c77; }
.round-chip { min-width:77px; padding:7px 10px; text-align:center; border:1px solid #ffffff51; border-radius:13px; background:#172449cc; box-shadow:inset 0 1px #ffffff2b; }.round-chip strong { display:block; margin-top:5px; color:var(--mango); font:13px 'Press Start 2P'; text-shadow:0 2px #87542d; }.icon-button { display:grid; place-items:center; width:37px; height:37px; padding:0; border:1px solid #ffffff56; border-radius:50%; color:var(--cream); background:#ffffff13; font-weight:700; font-size:19px; transition:.2s; }.icon-button:hover { transform:rotate(12deg); color:var(--night); background:var(--mint); }

.status-strip { position:relative; display:flex; align-items:center; justify-content:space-between; gap:15px; margin:20px 0 13px; padding:10px 14px 10px 17px; overflow:hidden; border:1px solid #ffffff3c; border-radius:13px; background:linear-gradient(90deg,#283d70e6,#293968cc); box-shadow:inset 0 1px #ffffff2b,0 5px 13px #07142d30; color:#f3f5ff; font-weight:600; }.status-strip::before { content:'✦'; color:var(--mango); margin-right:10px; }.status-strip::after { content:''; position:absolute; right:240px; width:130px; height:100px; border:18px solid #ffffff0d; border-radius:50%; }.rank-ladder { display:flex; gap:5px; z-index:1; }.rank { padding:5px 7px; border-radius:5px; color:#28314d; font:6px 'Press Start 2P'; box-shadow:0 2px 0 #0003; }.king{background:var(--mango)}.queen{background:#f3c7e3}.people{background:var(--mint)}.vice{background:#bcd4ff}.slave{background:#ffaba4}

.table { position:relative; height:470px; overflow:visible; border:0; border-radius:32px; background:transparent; }.neon-grid { position:absolute; z-index:0; inset:0; border-radius:32px; opacity:.18; background:repeating-radial-gradient(ellipse at center,#ffffff00 0 36px,#ffffff25 37px 38px); background-size:100% 100%; }.scene-title { position:absolute; z-index:2; top:17px; padding:5px 8px; border:1px solid #ffe7a37a; border-radius:6px; color:#fff2cb; background:#281d4fba; box-shadow:0 2px 7px #090d2b88; font:6px 'Press Start 2P'; letter-spacing:.2px; }.scene-title span{color:var(--mango);font-size:11px;vertical-align:middle}.king-title{left:19px}.queen-title{right:19px}.slave-title,.vice-slave-title{top:auto;bottom:17px}.slave-title{left:19px}.vice-slave-title{right:19px}
.opponent { position:absolute; top:calc(50% + var(--sy,0px)); left:calc(50% + var(--sx,0%)); display:flex; align-items:center; gap:9px; z-index:3; transform:translate(-50%,-50%); filter:drop-shadow(0 3px 0 #0e1a3b66); }
.opponent.side-right { flex-direction:row-reverse; }
.seat-who { display:flex; align-items:center; gap:7px; }
.seat-stack { position:relative; flex:0 0 auto; }.avatar { display:grid; place-items:center; width:43px; height:43px; border:3px solid var(--cream); border-radius:50%; color:var(--cream); font-size:22px; font-weight:700; box-shadow:0 3px 0 #122044; }.opponent.is-active-turn .avatar{border-color:#ffe473;box-shadow:0 0 0 3px #ffbf5e55,0 0 16px #ffd46c,0 3px 0 #92552f}.opponent.is-active-turn .seat-name{color:#ffe986}.opponent.is-active-turn .opponent-cards{animation:stack-glow 1.2s ease-in-out infinite}@keyframes stack-glow{0%,100%{filter:drop-shadow(0 0 5px #ffe17488)}50%{filter:drop-shadow(0 0 13px #ffe174)}}.turn-marker{--badge-base:translateX(-50%);position:absolute;z-index:4;top:-31px;left:50%;padding:6px 9px;transform:var(--badge-base);border-radius:8px;color:#4b3450;background:#ffe174;box-shadow:0 3px #b26a37,0 0 18px #ffe174;font:8px 'Press Start 2P';white-space:nowrap;animation:badge-pulse 1.1s ease-in-out infinite}@keyframes badge-pulse{0%,100%{transform:var(--badge-base) scale(1)}50%{transform:var(--badge-base) scale(1.13)}}.avatar-purple{background:linear-gradient(145deg,#ae8be4,#7055bd)}.avatar-orange{background:linear-gradient(145deg,#ffc26e,#ea7a69)}.avatar-cyan{background:linear-gradient(145deg,#a4ede0,#4dbcae);color:#204759}.avatar-pink{background:linear-gradient(145deg,#f5a4c7,#c34d8f)}.avatar-yellow{background:linear-gradient(145deg,#ffe795,#e8a94f);color:#70451e}.stack-count { position:absolute; z-index:4; top:-2px; left:50%; transform:translateX(-50%); padding:3px 6px; border-radius:9px; background:var(--mango); color:#503146; font:11px 'Press Start 2P'; box-shadow:0 2px 0 #b47539,0 2px 6px #0c143855; white-space:nowrap; }
.seat-name { color:#fffaf0; font-size:15px; font-weight:700; white-space:nowrap; text-shadow:0 2px #17254c; }.badges { margin-top:3px; white-space:nowrap; }.badge { display:inline-block; padding:5px 8px; border-radius:6px; background:var(--mango); color:#503146; font:8px 'Press Start 2P'; box-shadow:0 2px #b47539; }.opponent-cards{position:relative;height:80px;pointer-events:none}.card-back,.deal-card,.deck-card{width:52px;height:74px;border:2px solid #f9e6b7;border-radius:7px;background:linear-gradient(135deg,#d66b9c,#604b9e);box-shadow:2px 3px 0 #122044}.card-back{position:absolute;top:0;left:calc(var(--back) * var(--spread,8px))}.card-back::after,.deal-card::after,.deck-card::after{content:'✦';position:absolute;inset:6px;border:1px solid #ffdfa0;border-radius:4px;color:#ffdfa0;text-align:center;font-size:24px;line-height:54px}

.dealer-deck{position:absolute;z-index:6;top:53%;left:50%;width:70px;height:102px;opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(.8);transition:opacity .2s,transform .2s;pointer-events:none}
.deck-card{position:absolute;left:9px;bottom:2px;transform:translate(calc(var(--layer) * -.18px),calc(var(--layer) * -.5px))}
/* Spotlight the riffle, then return to the normal deck size for dealing. */
.dealer-deck.is-dealing.is-shuffling{transform:translate(-50%,-50%) rotate(-7deg) scale(1.7)}
@media(max-width:700px){.dealer-deck.is-dealing.is-shuffling{transform:translate(-50%,-50%) rotate(-7deg) scale(1.45)}}
.dealer-deck.is-shuffling .deck-card:nth-child(-n+26){animation:shuffle-split-left .55s ease-in-out 3}
.dealer-deck.is-shuffling .deck-card:nth-child(n+27){animation:shuffle-split-right .55s ease-in-out 3}
.dealer-deck.is-shuffling .deck-card:nth-child(2n){animation-delay:.05s}
@keyframes shuffle-split-left{0%{transform:translate(calc(var(--layer) * -.18px),calc(var(--layer) * -.5px))}38%{transform:translate(calc(var(--layer) * -.18px - 32px),calc(var(--layer) * -.5px + 8px)) rotate(-11deg)}58%{transform:translate(calc(var(--layer) * -.18px - 32px),calc(var(--layer) * -.5px + 8px)) rotate(-11deg)}100%{transform:translate(calc(var(--layer) * -.18px),calc(var(--layer) * -.5px))}}
@keyframes shuffle-split-right{0%{transform:translate(calc(var(--layer) * -.18px),calc(var(--layer) * -.5px))}38%{transform:translate(calc(var(--layer) * -.18px + 32px),calc(var(--layer) * -.5px - 8px)) rotate(11deg)}58%{transform:translate(calc(var(--layer) * -.18px + 32px),calc(var(--layer) * -.5px - 8px)) rotate(11deg)}100%{transform:translate(calc(var(--layer) * -.18px),calc(var(--layer) * -.5px))}}.dealer-deck.is-dealing{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}.deal-animation{position:absolute;z-index:8;inset:0;pointer-events:none}.deal-card{position:absolute;top:53%;left:50%;opacity:0;animation:deal-flight 430ms cubic-bezier(.18,.8,.32,1) var(--deal-delay) forwards}.deal-card::after{border-radius:2px}@keyframes deal-flight{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-18deg)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--deal-x)),calc(-50% + var(--deal-y))) scale(1) rotate(var(--deal-r))}}
.royal-exchange{position:absolute;z-index:10;top:50%;left:50%;width:min(560px,93%);padding:20px 24px;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.88);border:2px solid #ffe39c;border-radius:22px;color:#fff8dc;background:linear-gradient(135deg,#25194eea,#4b2469e8);box-shadow:0 0 0 5px #6a459766,0 15px 38px #090d2bd9;transition:opacity .25s,transform .25s}.royal-exchange.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.exchange-kicker{margin:0 0 12px;color:#ffda75;text-align:center;font:700 16px 'Chakra Petch',sans-serif;letter-spacing:.6px}.exchange-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px;margin:6px 0;font-size:13px;font-weight:700}.exchange-row .giver{text-align:right}.exchange-row .receiver{color:#ffe48b}.exchange-arrow{color:#ffdb72;font:13px 'Press Start 2P'}.tribute-cards{display:flex;justify-content:center;gap:7px}.tribute-card{display:block;width:50px;height:71px;border-radius:6px;filter:drop-shadow(1px 2px #120d25)}

.direction-ring{position:absolute;z-index:2;top:55%;left:50%;width:min(342px,88%);height:auto;aspect-ratio:342/224;transform:translate(-50%,-50%);pointer-events:none}.direction-orbit{position:absolute;inset:0;border:2px dashed #68e9ed9e;border-radius:50%;box-shadow:0 0 16px #31dfe555,inset 0 0 24px #6a54d744}.direction-orbit::before{content:'';position:absolute;inset:9px;border:1px solid #ffd77a55;border-radius:50%}.direction-orbit i{position:absolute;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;color:#16234b;background:#ffdf83;box-shadow:0 0 11px #ffcf6f;font-style:normal}.direction-orbit i::after{content:'➜';font-size:16px;font-weight:900}.direction-orbit i:nth-child(1){top:-11px;left:50%;transform:translateX(-50%) rotate(4deg)}.direction-orbit i:nth-child(2){right:1px;bottom:26px;transform:rotate(120deg)}.direction-orbit i:nth-child(3){bottom:26px;left:1px;transform:rotate(240deg)}.direction-ring.is-reverse .direction-orbit{border-color:#ff9fceaa;box-shadow:0 0 16px #ff63b877,inset 0 0 24px #6a54d744}.direction-ring.is-reverse .direction-orbit i{color:#4a2455;background:#ffb3d7;box-shadow:0 0 11px #ff92cb}.direction-ring.is-reverse .direction-orbit i:nth-child(1){transform:translateX(-50%) rotate(184deg)}.direction-ring.is-reverse .direction-orbit i:nth-child(2){transform:rotate(300deg)}.direction-ring.is-reverse .direction-orbit i:nth-child(3){transform:rotate(60deg)}.direction-badge{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:108px;padding:5px 8px;transform:translate(-50%,-50%);border:1px solid #ffffff64;border-radius:13px;color:#f8f1d2;background:#152457db;box-shadow:0 3px 13px #08142c88;text-align:center}.direction-badge span{color:#82f1ec;font-size:22px;line-height:.9;text-shadow:0 0 8px #32d9e6}.direction-badge small{color:#d7e8ff;font:5px 'Press Start 2P';letter-spacing:.3px}.direction-badge b{color:#ffd980;font-size:11px;white-space:nowrap}.direction-ring.is-reverse .direction-badge span{color:#ffb0d3;text-shadow:0 0 8px #ff79ba}.direction-ring.is-reverse .direction-badge b{color:#ffc2dc}
.center-stage { position:absolute; z-index:3; top:55%; left:50%; width:355px; text-align:center; transform:translate(-50%,-50%); }.center-stage::before { content:''; position:absolute; z-index:-1; top:20px; left:50%; width:330px; height:215px; transform:translateX(-50%); border:1px solid #ffffff45; border-radius:50%; background:radial-gradient(ellipse,#17225bdb 0%,#17225b99 48%,transparent 70%); box-shadow:0 0 32px #0d143aba; }.turn-light { width:92px; height:5px; margin:0 auto 10px; border-radius:50%; background:var(--mint); box-shadow:0 0 9px var(--mint),0 0 22px #b9f4db99; }.pile-label { margin:0 0 8px; color:#f6ebcb; text-shadow:0 2px #18214d; }.pile { display:flex; align-items:center; justify-content:center; min-height:135px; margin-top:26px; }.empty-pile { width:101px; height:124px; padding-top:37px; border:2px dashed #ffe6ad99; border-radius:12px; background:#182a5acc; color:#fff3d3; font:9px 'Press Start 2P'; line-height:1.8; }.empty-pile small { color:var(--mango); font-size:6px; }.pile-detail { margin:7px 0 0; color:#f6f0dc; font-weight:500; text-shadow:0 2px #17214c; }.pile .card{margin:0 -45px 0 0;transform:rotate(var(--tilt));pointer-events:none}.pile .card:last-child{margin-right:0}
.pile .card.latest-throw{z-index:2}
/* A drop-shadow follows the card's alpha silhouette, so the gold edge hugs the
   rounded corners with no gap — a box-shadow ring can't (the SVG has
   transparent corners inside its rectangle). */
.pile .card.latest-throw .card-face-art{animation:latest-pulse 1.3s ease-in-out infinite}
@keyframes latest-pulse{0%,100%{filter:drop-shadow(0 0 1.5px #ffe9a8) drop-shadow(0 0 3px #ffd776) drop-shadow(0 0 10px #ffd77688)}50%{filter:drop-shadow(0 0 2px #fff3cf) drop-shadow(0 0 6px #ffd776) drop-shadow(0 0 18px #ffd776bb)}}.event-toast { position:absolute; z-index:6; /* Anchored to the table's lower edge, not a percentage plus a fixed 150px: that pair was tuned for one table height and slid onto the player badges the moment the table got shorter. */ top:auto; bottom:-25px; left:50%; min-width:max-content; padding:11px 18px; transform:translateX(-50%) translateY(18px); opacity:0; border-radius:22px; color:#5f3e47; background:var(--mango); box-shadow:0 3px #c58b43,0 7px 20px #10204b77; font:700 17px 'Chakra Petch',sans-serif; letter-spacing:.4px; transition:.3s; }.event-toast.show { transform:translateX(-50%) translateY(0); opacity:.68; }

.player-zone { margin-top:18px; padding:15px 15px 12px; color:#f6f3e8; text-shadow:0 2px 5px #101a3b; }.player-heading { display:flex; align-items:center; justify-content:space-between; }.you-tag { padding:4px 6px; border-radius:4px; color:#245864; background:var(--mint); font:6px 'Press Start 2P'; text-shadow:none; }.player-heading strong { margin-left:8px; color:#fff4d9; font-size:17px; }.player-heading>span { color:#e2e9ff; font:7px 'Press Start 2P'; }.player-zone.is-active-turn .player-heading strong{color:#ffe986}.combo-meter { display:inline-block; margin-left:10px; padding:5px 7px; border:1px solid #dcb56c; border-radius:11px; color:#ffe3a7; background:#171d45b3; font:6px 'Press Start 2P'; text-shadow:none; }.hand { display:flex; align-items:flex-end; justify-content:center; height:157px; padding:7px 8px 2px; overflow-x:auto; }.card { position:relative; flex:0 0 79px; height:111px; margin-right:-36px; overflow:hidden; border:2px solid #b8a18a; border-radius:11px; color:#253451; background:linear-gradient(135deg,#fffdf7,#f5e8d5); box-shadow:0 4px 0 #88735f55,0 7px 12px #5a3f4138; transition:transform .17s,box-shadow .17s,border .17s; user-select:none; }.card::after { content:''; position:absolute; inset:4px; border:1px solid #dac8ae; border-radius:7px; pointer-events:none; }.card.svg-card{padding:0;border:0;background:transparent;overflow:visible;border-radius:9px}.card.svg-card::after{display:none}.card-face-art{display:block;width:100%;height:100%;border-radius:9px;object-fit:fill;pointer-events:none}canvas.card-face{display:block}.card:last-child { margin-right:0; }.card:hover,.card.selected { transform:translateY(-20px) rotate(-1deg); box-shadow:0 9px 0 #88735f66,0 15px 20px #5a3f4166; }.card.selected { border-color:var(--coral); outline:3px solid #f7c35e; }.card.red { color:#d45267; }.pile .card { margin:0 -45px 0 0; transform:rotate(var(--tilt)); pointer-events:none; }.pile .card:last-child { margin-right:0; }.controls { display:flex; justify-content:center; gap:10px; margin-top:8px; }.controls button,dialog .primary { padding:12px 23px; border:0; border-radius:12px; color:#fff7e5; font:8px 'Press Start 2P'; box-shadow:0 4px 0 #0004,0 8px 12px #22183742; transition:.16s; }.controls button:hover:not(:disabled),dialog .primary:hover { transform:translateY(-2px); }.primary { background:linear-gradient(135deg,#e76790,#bf4e88); }.primary:not(:disabled):hover { background:linear-gradient(135deg,#ef799e,#cf5b94); }.primary:disabled { cursor:not-allowed; opacity:.42; filter:grayscale(1); }.secondary { background:linear-gradient(135deg,#526a9e,#354a7c); }

dialog { max-width:390px; padding:27px; border:0; border-radius:23px; color:#fff9ed; background:linear-gradient(135deg,#435889,#293b70); box-shadow:0 16px 50px #08122c99; font-size:16px; line-height:1.45; } dialog::backdrop { background:#0c1634cc; backdrop-filter:blur(4px); }dialog h2{margin-top:2px;color:var(--mango);font:14px 'Press Start 2P'}.close{position:absolute;right:9px;top:5px;border:0;background:transparent;color:#fff;font-size:25px}dialog li{margin:8px 0}

/* Card-stack filters paint outside the cards. These layers must never crop the halo to a rectangular scroll box. */
.game-shell,.table,.opponent,.seat-stack,.opponent-cards,.hand { overflow:visible !important; }

@media(max-width:700px){.game-shell{padding-top:17px}.topbar{grid-template-columns:1fr auto auto;gap:8px}.seat-picker{grid-row:2;grid-column:1/3;justify-self:start}.round-chip{grid-column:3;grid-row:1}.icon-button{grid-column:3;grid-row:2;justify-self:end}.brand h1{font-size:30px}.table{height:440px}.opponent{gap:4px}.avatar{width:34px;height:34px;border-width:2px;font-size:17px}.seat-name{font-size:12px}.center-stage{transform:translate(-50%,-50%) scale(.85)}.rank-ladder{display:none}.status-strip{font-size:14px}.status-strip::after{display:none}.player-zone{border-radius:18px;padding:11px}.combo-meter{display:none}.card{flex-basis:62px;height:96px;margin-right:-32px}.card .corner{font-size:15px}.card .center{inset-top:25px;font-size:36px}.hand{height:139px}}

/* The player's own corner reads top to bottom: who they are, then their
   cards, then what they can do with them.  play-comfort.css lays this zone
   out as a three-column grid at >=701px, which puts the badges down the left
   and the buttons off in a right-hand column, so the hand never sits on the
   table's centre line.  Here the first three rows span the full width and
   centre, and the last row carries the buttons and the boo side by side —
   one row rather than two, which keeps the boo above the fold. */
@media(min-width:701px){
 /* The table box stood about 50px taller than the oval drawn inside it, and
    that dead space pushed the avatar row and the hand down the screen. */
 body.comfort-play .table{height:clamp(280px,35svh,380px)}
 body.comfort-play .player-zone{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:6px 12px}
 body.comfort-play .player-zone .hand-badges{grid-column:1/-1;grid-row:1;width:auto;justify-content:center;flex-wrap:wrap;margin:0}
 body.comfort-play .player-zone .hand-tools{grid-column:1/-1;grid-row:2;width:100%;margin:0}
 body.comfort-play .player-zone .hand-row{grid-column:1/-1;grid-row:3;width:100%}
 body.comfort-play .player-zone .controls{grid-column:1;grid-row:4;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:0}
 body.comfort-play .player-zone .player-reactions{grid-column:2;grid-row:4;margin:0}
}

/* The play area sat directly under the top bar — the apex seat's TURN marker
   reached above the table box and landed behind the header buttons — while the
   table's lower edge had room to spare.  Everything drawn on the table is
   positioned against the table's own box, so the only way to lower the play
   area without lowering the hand and buttons underneath it is to shift the box
   itself: a transform moves what is painted and leaves the document flow, so
   the player's card stack stays exactly where it was. */
.table { --play-drop:24px; transform:translateY(var(--play-drop)); }
/* The toast is anchored to the table's lower edge and would otherwise ride the
   shift down onto the player's avatar row, so it gives the shift back. */
.event-toast { bottom:calc(-25px + var(--play-drop)); }

/* The top-centre seat was sitting ON the play area.  The arc and the centre
   oval were drawn for a 470px table; the comfort layout gives the table about
   300-315px, and at that height the apex seat — the only one at dead centre —
   came down 53px into the oval and 47px into the thrown cards themselves.
   Lowering the whole table (above) does not help: seat and pile move together.
   The separation has to grow, so it is taken from three places at once — the
   ring rides higher (46% of the table instead of 50%), the centre stage sits
   lower, and the seats' decorative card stacks lose the size they only had
   because they were drawn for the tall table. */
@media(max-width:700px){
 body.comfort-play .opponent{top:calc(46% + var(--sy,0px))}
 body.comfort-play .center-stage{top:61%}
 body.comfort-play .opponent .opponent-cards{height:48px}
 body.comfort-play .opponent .card-back{width:30px;height:43px;left:calc(var(--back) * .5px)}
 body.comfort-play .opponent .card-back::after{inset:3px;font-size:15px;line-height:33px}
 body.comfort-play .opponent .royal-crown[class]{width:46px;height:48px}
}
@media(min-width:701px){
 body.comfort-play .opponent{top:calc(46% + var(--sy,0px))}
 body.comfort-play .center-stage{top:65%}
 body.comfort-play .opponent .opponent-cards{height:64px}
 body.comfort-play .opponent .card-back{width:40px;height:56px;left:calc(var(--back) * 6px)}
 body.comfort-play .opponent .card-back::after{inset:4px;font-size:19px;line-height:44px}
}

/* On phones the player's own badge row was pinned to the left edge while the
   table, the hand and the buttons above and below it were all centred, so the
   avatar sat about 75px off the play area's centre line.  It shares that line
   now, at every width. */
@media(max-width:700px){
 body.comfort-play .player-zone .hand-badges{justify-content:center;padding-left:0}
}

/* The avatar IS the player, so it belongs on the same line the thrown cards
   sit on.  A flex row of avatar-shield-name cannot put it there: centring the
   row centres the whole group, which leaves the avatar half the width of
   everything after it to the left of the line — 94px on a wide screen.  Three
   grid columns with equal outer tracks put the avatar exactly on the centre
   line whatever the player has named themselves, and the order that falls out
   — rank, then who, then the name — is the order every opponent's seat
   already reads in. */
body.comfort-play .player-zone .hand-badges{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
body.comfort-play .player-zone .hand-badges .player-role-stack{grid-column:1;grid-row:1;justify-self:end}
body.comfort-play .player-zone .hand-badges .user-avatar{grid-column:2;grid-row:1}
body.comfort-play .player-zone .hand-badges .player-name{grid-column:3;grid-row:1;justify-self:start}

/* The used-cards stack was pinned to a point measured from the old centre
   stage (55% of the table plus 66px).  The seats have since moved up and the
   stage down, and that point now falls on the lower-right seat's avatar.  It
   is a corner decoration, so it is anchored to the corner: below the seat
   ring, outside the oval, and clear of the player's own badge row. */
@media(min-width:701px){
 body.comfort-play .discard-stack{top:auto;bottom:-26px;left:auto;right:10px;transform:none}
}
/* The count of cards left belongs under the player, not under the rank badge
   beside them.  It hangs from the badge row's centre line, which is where the
   avatar now sits. */
body.comfort-play .player-zone .hand-badges{position:relative}
body.comfort-play .player-zone .hand-badges .player-role-stack{position:static}
body.comfort-play .player-zone .hand-badges .hand-count{top:calc(100% - 6px);left:50%;transform:translateX(-50%)}