/* 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; }
.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))}
.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; top:calc(55% + 150px); 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}.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}}