/* Typography (HW-UX-TABLE-03): Estedad for headings, Vazirmatn for everything else; both variable WOFF2, self-hosted, SIL OFL 1.1 (see /fonts/LICENSE-*.txt).
   HWNum = Vazirmatn restricted to the Persian/Arabic-Indic digits, so card faces keep their Latin serif letters and suits but show Persian digits in one design. */
@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-VF.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Estedad;src:url(/fonts/Estedad-VF.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:HWNum;src:url(/fonts/Vazirmatn-VF.woff2) format("woff2");font-weight:100 900;unicode-range:U+0660-0669,U+06F0-06F9;font-display:swap}
:root{color-scheme:dark;--ink:#eae5d8;--muted:#98a6a9;--gold:#d8b66b;--line:rgba(228,200,132,.18);font-family:Vazirmatn,Tahoma,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 10%,#20254a 0,transparent 33%),radial-gradient(ellipse at 90% 75%,#12362e 0,transparent 36%),#090f1b;color:var(--ink);min-height:100vh}.app{max-width:1600px;margin:auto}.top{height:88px;display:flex;align-items:center;gap:40px;padding:0 clamp(20px,5vw,76px);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(8,13,25,.72)}.brand{direction:ltr;color:var(--ink);display:flex;gap:10px;align-items:center;text-decoration:none;letter-spacing:3px;font:700 19px Georgia,serif}.brand b{color:var(--gold)}.brand small{display:block;direction:rtl;font:600 11px Vazirmatn,Tahoma;letter-spacing:0;color:var(--muted);margin-top:5px}.crown{font-size:31px;color:var(--gold)}nav{display:flex;gap:28px;align-items:center;margin-inline-start:30px;flex:1}.nav,.text-button{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer}.nav.active{color:#f4dfae}.muted{font-size:12px}.profile{display:flex;align-items:center;gap:10px}.profile small,.seat small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.avatar{width:51px;height:51px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#385c55,#142c31);border:2px solid #ae9157;color:#e7d3a5;font-size:25px;flex:none}.tiny{width:38px;height:38px;font-size:18px}.lobby{padding:clamp(24px,5vw,72px)}.hero{min-height:470px;border:1px solid var(--line);border-radius:28px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:linear-gradient(120deg,rgba(29,42,59,.7),rgba(9,25,26,.83));position:relative}.hero-copy{padding:clamp(35px,5vw,80px);z-index:1}.eyebrow{font-size:11px;letter-spacing:1px;color:#d5b777}.hero h1{font-size:clamp(35px,4.2vw,65px);line-height:1.4;margin:28px 0 12px}.hero h1 em{font-style:normal;color:#e5c47e}.hero p{color:#b8c5c2;line-height:2;font-size:15px}.primary{border:0;background:linear-gradient(110deg,#e7ca88,#b98c43);color:#19231d;border-radius:11px;padding:16px 28px;font:600 16px Vazirmatn,Tahoma;cursor:pointer;box-shadow:0 8px 28px #0004}.primary span{margin-right:28px}.notice{color:#91a59e;font-size:11px;margin-top:22px}.hero-art{position:relative;direction:ltr;display:flex;align-items:center;justify-content:center;min-height:300px}.halo{position:absolute;width:320px;height:320px;border:1px solid #d5b77755;border-radius:50%;box-shadow:0 0 100px #a59c5e25,inset 0 0 65px #3d8e6330}.hero-card{width:94px;height:142px;border-radius:9px;background:#f5f1e8;color:#17212b;font:700 25px Georgia;padding:12px;box-shadow:0 16px 24px #0008;position:relative;margin-left:-18px}.hero-card span{display:block;text-align:center;font-size:45px;margin-top:5px}.c1{transform:rotate(-18deg) translateY(18px)}.c2{transform:rotate(-6deg)}.c3{transform:rotate(6deg)}.c4{transform:rotate(18deg) translateY(18px)}.c2,.c4{color:#b83b45}.art-caption{position:absolute;bottom:48px;font:10px Georgia;letter-spacing:4px;color:#d5b777}.lobby-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}.feature{border:1px solid var(--line);background:#121c27bb;border-radius:16px;padding:24px;display:flex;gap:18px}.feature>span{color:var(--gold);font-size:30px}.feature h3{margin:0 0 10px;font-size:15px}.feature p{margin:0;color:var(--muted);font-size:12px}.game{padding:22px clamp(12px,4vw,58px) 32px}.game-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.game-top h2{margin:6px 0;font-size:23px}.table-num{font-size:13px;color:#c4aa6d}.scores{display:flex;align-items:center;gap:18px;direction:rtl}.scores div{text-align:center;min-width:60px}.scores small{display:block;color:var(--muted);font-size:11px}.scores b{font:700 28px Georgia;color:#f0d99d}.scores>span{color:#897f66}.outline{background:transparent;border:1px solid #ba9e66;border-radius:9px;color:#e0cb9a;padding:10px 15px;cursor:pointer;font:inherit;font-size:12px}.game-actions{display:flex;gap:14px;align-items:center}.text-button{font-size:11px}.stage{position:relative;max-width:1080px;height:390px;margin:28px auto 10px}.table-glow{position:absolute;inset:50px 13% 15px;background:#0a815f44;filter:blur(38px);border-radius:50%}.table{position:absolute;inset:58px 12% 20px;border-radius:50%;background:linear-gradient(#e2c685,#8a6631 24%,#40351d 45%,#c3a25d 70%,#493e28);padding:12px;box-shadow:0 20px 35px #000a,0 0 0 3px #4d4229}.felt{height:100%;border-radius:50%;position:relative;background:radial-gradient(ellipse at 50% 37%,#17614c,#0a392d 68%,#06291f);border:2px solid #63583c;overflow:hidden}.felt-line{position:absolute;inset:16px;border:1px solid #d0af5b38;border-radius:50%}.center-mark{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:50px;color:#d5b77730;text-align:center}.center-mark small{display:block;font:9px Georgia;letter-spacing:3px}.trick{position:absolute;inset:25% 23%;display:flex;align-items:center;justify-content:center;gap:6px;direction:ltr}.played{width:50px;height:67px;background:#f2eee5;border-radius:5px;color:#202430;font:bold 16px Georgia;padding:5px;box-shadow:0 4px 12px #0008}.played.red{color:#b83240}.seat{position:absolute;display:flex;align-items:center;gap:9px;background:linear-gradient(120deg,#1d2a32,#0c1821);border:1px solid #c4a76e88;border-radius:36px;padding:5px 13px 5px 5px;min-width:145px;box-shadow:0 8px 15px #0006;font-size:12px}.seat i{display:block;width:7px;height:7px;border-radius:50%;background:#50766a;margin-right:auto}.seat.active{border-color:#f0d38b;box-shadow:0 0 20px #e3bd6677}.seat.active i{background:#f1cf70}.top-seat{top:0;left:50%;transform:translateX(-50%)}.bottom-seat{bottom:0;left:50%;transform:translateX(-50%)}.left-seat{left:1%;top:43%}.right-seat{right:1%;top:43%}.trump-badge{position:absolute;top:35px;right:8%;border:1px solid #cfac6d;border-radius:20px;background:#101820;padding:9px 18px;font-size:12px}.trump-badge b{font-size:19px;margin-right:9px;color:#ecd59a}.hand-panel{max-width:1100px;margin:auto;border:1px solid var(--line);border-radius:20px;background:#111a24ce;padding:20px}.hand-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.hand-heading h3{margin:6px 0;font-size:18px}.hand-heading p{font-size:11px;color:var(--muted)}.hand{display:flex;direction:ltr;justify-content:center;overflow-x:auto;padding:14px 8px 4px;min-height:120px}.card{width:65px;min-width:43px;height:95px;border:1px solid #c3bbae;border-radius:7px;background:linear-gradient(#fffdf4,#e9e4d9);color:#20232c;font:bold 19px Georgia;text-align:left;padding:7px;box-shadow:0 5px 12px #0007;cursor:pointer;transition:transform .16s}.card+.card{margin-left:-12px}.card.red{color:#b8313e}.card span{display:block;font-size:27px}.card:disabled{filter:brightness(.55);cursor:not-allowed}.card:not(:disabled):hover,.card:not(:disabled):focus-visible{transform:translateY(-12px);outline:2px solid #e7c779}.trump-choice{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}.trump-choice button{background:#263e39;color:#fff;border:1px solid #c4a76e;border-radius:8px;padding:9px 14px;font:inherit;cursor:pointer}.result{position:fixed;inset:0;background:#04080bd9;display:grid;place-items:center;z-index:4;text-align:center}.result>div{background:#142420;border:1px solid #c5a96e;border-radius:22px;padding:45px;min-width:300px}.result-icon{font-size:48px;color:#e3c77f}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#272e38;padding:12px 18px;border-radius:8px;z-index:5;font-size:13px}.hidden{display:none!important}@media(max-width:700px){.top{height:70px;padding:0 14px;gap:12px}.brand{font-size:14px;letter-spacing:1px}.brand small,.profile,nav .muted{display:none}nav{gap:12px;margin:0}.lobby{padding:16px}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:30px}.hero h1{font-size:35px}.hero-art{min-height:220px}.halo{width:200px;height:200px}.hero-card{width:65px;height:100px;font-size:17px}.hero-card span{font-size:28px}.art-caption{bottom:18px}.lobby-bottom{grid-template-columns:1fr}.feature{padding:15px}.game{padding:12px}.game-top h2{font-size:17px}.game-actions{flex-direction:column;gap:5px}.stage{height:290px;margin-top:18px}.table{inset:55px 8% 30px}.seat{min-width:100px;font-size:10px;padding:4px 7px}.avatar{width:35px;height:35px;font-size:18px}.seat small{font-size:9px}.left-seat{left:0}.right-seat{right:0}.trump-badge{right:1%;top:15px}.hand-heading p{display:none}.card{height:85px;width:55px;font-size:16px}.hand-panel{padding:12px}}

/* A played card stays on the side of the player who placed it. */
.trick{inset:19% 25%;display:block}.played{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .2s,transform .2s}.seat-card-0{transform:translate(-50%,5%)}.seat-card-1{transform:translate(-175%,-50%)}.seat-card-2{transform:translate(-50%,-105%)}.seat-card-3{transform:translate(75%,-50%)}

.played-by{display:block;margin-top:8px;font:500 10px Vazirmatn,Tahoma,sans-serif;color:#495047;text-align:center;white-space:nowrap}

.round-progress{max-width:1100px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;color:#b3c4bb;font-size:12px}.round-progress strong{color:#e8dfca;font-weight:600}.round-progress b{color:#e8c77f;font-size:18px;margin-right:5px}.round-progress #trick-winner{color:#e8c77f}

/* Trick winner and scoreboard additions */
.score-block{display:flex;flex-direction:column;align-items:center;gap:4px}
.played.trick-win{box-shadow:0 0 0 2px #e3c77f,0 4px 24px #d4a93aaa;z-index:2;transform-origin:center}
.seat.trick-win{border-color:#f0d38b;box-shadow:0 0 28px #e3bd66cc;background:linear-gradient(120deg,#2a3c2a,#1a2f20)}
.seat.trick-win.bottom-seat{background:linear-gradient(120deg,#2a3c2a,#1a2f20)}

/* Hand sort: suit group gap and trump highlight */
.card.suit-gap{margin-left:10px}
.card.trump-card{border-top:3px solid #d8b66b;box-shadow:0 5px 12px #0007,0 0 6px #d8b66b55}
.card.trump-card:not(:disabled):hover,.card.trump-card:not(:disabled):focus-visible{box-shadow:0 0 14px #d8b66baa}

/* Development-only four-hand QA view */
.dbg-banner{position:fixed;top:0;left:0;right:0;z-index:6;background:#8e1b24;color:#fff;text-align:center;font:600 13px Vazirmatn,Tahoma,sans-serif;padding:6px 10px;letter-spacing:.3px;border-bottom:2px solid #ff6b6b}
body.dbg-on{padding-top:32px}
.dbg-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:#f1b3b3;border:1px dashed #b84a52;border-radius:8px;padding:6px 10px;cursor:pointer}
.dbg-key-form{max-width:1100px;margin:10px auto 0;display:flex;gap:8px;align-items:center;justify-content:center;border:1px dashed #b84a52;border-radius:10px;padding:8px;font-size:12px;color:#f1b3b3}
.dbg-key-form input{background:#0d1620;color:var(--ink);border:1px solid #6b5a3a;border-radius:6px;padding:6px 8px;min-width:240px;direction:ltr}
.debug-dock{max-width:1100px;margin:0 auto 12px;border:1px dashed #b84a52;border-radius:14px;background:#1a1117cc;padding:10px 14px}
.dbg-title{color:#ff9aa2;font:600 12px Vazirmatn,Tahoma,sans-serif;text-align:center;margin-bottom:8px}
.dbg-row{border:1px solid #3a3f4a;border-radius:10px;margin-top:6px;padding:4px 10px;background:#101820}
.dbg-row.dbg-team{border-color:#3f8a6b}.dbg-row.dbg-opp{border-color:#8a4a4f}
.dbg-row.dbg-active{box-shadow:0 0 14px #e3bd6688;border-color:#f0d38b;background:#1d2a21}
.dbg-row summary{cursor:pointer;font-size:12px;color:#d6dcd8;padding:4px 0}
.dbg-cards{display:flex;flex-wrap:wrap;direction:ltr;gap:3px;padding:4px 0 6px}
.dbg-card{display:inline-block;min-width:34px;text-align:center;background:#f2eee5;color:#20232c;border-radius:4px;padding:3px 4px;font:bold 13px Georgia,serif}
.dbg-card.red{color:#b8313e}.dbg-card.dbg-gap{margin-left:7px}
.dbg-empty{color:#8a949a;font-size:11px;padding:4px 0}

/* Turn countdown (server-owned deadline) */
.turn-timer{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);border-radius:12px;padding:6px 16px;min-width:84px;background:#0d1620}
.turn-timer small{font-size:10px;color:var(--muted)}
.turn-timer b{font:700 22px Georgia,serif;color:#f0d99d;direction:ltr}
.turn-timer.low{border-color:#b84a52}.turn-timer.low b{color:#ff8a8a}

/* Which bot is about to play, and in how many seconds (server-owned deadline) */
.round-progress #bot-wait{color:#9fd3c4;font-weight:600}

/* Founder-only bot decision analysis (Debug Mode) */
.dbg-explain{border:1px solid #6b5a8a;border-radius:10px;margin:6px 0;padding:4px 10px;background:#161225}
.dbg-explain summary{cursor:pointer;font-size:12px;color:#d8c8ff;padding:4px 0}
.dbg-ex-main{font-size:13px;color:#f1e8c8;padding:4px 0;line-height:1.9}
.dbg-ex-old{font-size:11px;color:#9aa3ad;padding:2px 0;line-height:1.7}

/* ===== Fanned hands (HW-WEB-UX-GAMEPLAY-01): cards share one pivot below the hand and fan out by rotation ===== */
.stage{margin-top:124px}
.fan{position:absolute;width:0;height:0;z-index:3;pointer-events:none;--fw:30px;--fh:44px}
.fan-top{left:50%;top:-26px;--dx:0px;--dy:150px}
.fan-left{left:calc(1% + 72px);top:calc(43% - 28px);--dx:230px;--dy:90px}
.fan-right{right:calc(1% + 72px);top:calc(43% - 28px);--dx:-230px;--dy:90px}
.fcard{position:absolute;left:calc(var(--fw) / -2);bottom:0;width:var(--fw);height:var(--fh);border-radius:5px;transform-origin:50% calc(100% + var(--R,200px));transform:rotate(var(--r,0deg));box-shadow:0 2px 6px #000a}
.fcard.back{background:repeating-linear-gradient(45deg,#17695a 0 3px,#0e4a3e 3px 6px);border:1px solid #d8b66b}
.fcard.back::after{content:"";position:absolute;inset:3px;border:1px solid #d8b66b66;border-radius:3px}
.fcard.up{direction:ltr;text-align:left;background:linear-gradient(#fffdf4,#e9e4d9);border:1px solid #c3bbae;color:#20232c;font:bold 11px Georgia,serif;padding:2px 3px;line-height:1.05}
.fcard.up b{display:block;font-size:11px}.fcard.up i{display:block;font-style:normal;font-size:12px}
.fcard.up.red{color:#b8313e}.fcard.up.trump-card{border-top:2px solid #d8b66b}
.fan-count{position:absolute;left:0;top:6px;transform:translateX(-50%);min-width:24px;text-align:center;background:#101820;border:1px solid #cfac6d;border-radius:10px;padding:0 7px;font:600 11px Vazirmatn,Tahoma,sans-serif;color:#ecd59a;z-index:2}
.fan.active .fcard{border-color:#f0d38b;box-shadow:0 0 9px #e3bd66,0 2px 6px #000a}
.fan.active .fan-count{border-color:#f0d38b;color:#fff;box-shadow:0 0 8px #e3bd66aa}
.fan.pending,.hand.pending,.trick.pending{visibility:hidden}

/* the player's own fan (same buttons as before: original server indices, legal-card enabling) */
.hand{display:block;position:relative;direction:ltr;height:236px;min-height:0;padding:0;margin-top:6px;overflow:visible;--dx:0px;--dy:-260px}
.hand .card{position:absolute;left:50%;bottom:66px;margin-left:-32px!important;transform-origin:50% calc(100% + var(--R,400px));transform:rotate(var(--r,0deg));transition:transform .16s,filter .16s;box-shadow:0 4px 10px #000a}
.hand .card:not(:disabled){transform:rotate(var(--r,0deg)) translateY(-9px);filter:none}
.hand .card:disabled{filter:brightness(.8)}
.hand .card:not(:disabled):hover,.hand .card:not(:disabled):focus-visible{transform:rotate(var(--r,0deg)) translateY(-24px);z-index:5;outline:2px solid #e7c779}

/* Hakem marker and highlight */
.seat.hakem::after{content:"♛";position:absolute;top:-13px;right:16px;font-size:17px;color:#f0d38b;text-shadow:0 0 8px #e3bd66}
.seat.hakem-glow{border-color:#f7e2a6;box-shadow:0 0 34px #f0d38bcc;animation:hakemPulse .8s ease-in-out 3}
@keyframes hakemPulse{50%{filter:brightness(1.4)}}

/* dealing layer: deck, flying cards, banner, skip */
.deal-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.deck{position:absolute;left:calc(50% - 23px);top:calc(46% - 32px);width:46px;height:64px}
.deck i{position:absolute;inset:0;border-radius:6px;background:repeating-linear-gradient(45deg,#17695a 0 3px,#0e4a3e 3px 6px);border:1.5px solid #d8b66b;box-shadow:0 2px 6px #000a}
.deck i:nth-child(2){transform:translate(-1.5px,-1.5px)}.deck i:nth-child(3){transform:translate(-3px,-3px)}.deck i:nth-child(4){transform:translate(-4.5px,-4.5px)}
.deck.shuffling i:nth-child(odd){animation:riffleA .22s ease-in-out infinite alternate}
.deck.shuffling i:nth-child(even){animation:riffleB .22s ease-in-out infinite alternate}
@keyframes riffleA{to{transform:translate(-18px,-2px) rotate(-8deg)}}
@keyframes riffleB{to{transform:translate(16px,-4px) rotate(7deg)}}
.dcard{position:absolute;width:40px;height:58px;border-radius:5px;box-shadow:0 3px 8px #000b}
.dcard.back{background:repeating-linear-gradient(45deg,#17695a 0 3px,#0e4a3e 3px 6px);border:1.5px solid #d8b66b}
.dcard.up{background:linear-gradient(#fffdf4,#e9e4d9);border:1px solid #c3bbae;color:#20232c;font:bold 15px Georgia,serif;padding:3px 4px;line-height:1.05}
.dcard.up b{display:block}.dcard.up i{display:block;font-style:normal;font-size:19px}.dcard.up.red{color:#b8313e}
.hakem-banner{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:7;background:linear-gradient(120deg,#2b3a24,#16251c);border:1px solid #f0d38b;border-radius:14px;padding:8px 24px;text-align:center;box-shadow:0 0 30px #e3bd6688;animation:bannerIn .4s ease-out;pointer-events:none}
.hakem-banner strong{display:block;color:#f4dfae;font-size:18px}.hakem-banner span{color:#cfe3d8;font-size:12px}
@keyframes bannerIn{from{opacity:0;transform:translateX(-50%) scale(.85)}}
.skip-anim{position:absolute;right:6px;top:-112px;z-index:8;pointer-events:auto;padding:6px 12px}

/* cards arriving in a hand / being played */
.fan.reveal .fcard,.hand.reveal .card{animation:cardIn .4s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 34ms)}
@keyframes cardIn{from{opacity:0;transform:translate(var(--dx,0px),var(--dy,-90px)) rotate(0deg) scale(.5)}to{opacity:1;transform:rotate(var(--r,0deg))}}
.played.enter{animation:playIn .34s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes playIn{from{opacity:0;translate:var(--px,0px) var(--py,120px);scale:.6}to{opacity:1;translate:0 0;scale:1}}
.seat-card-0{--px:0px;--py:150px}.seat-card-1{--px:-200px;--py:0px}.seat-card-2{--px:0px;--py:-150px}.seat-card-3{--px:200px;--py:0px}

@media(max-width:700px){
  .stage{margin-top:108px}
  .fan{--fw:24px;--fh:35px}
  .fan-left{left:58px}.fan-right{right:58px}
  .hand{height:190px}.hand .card{width:55px;height:80px;margin-left:-27px!important;bottom:50px}
  .skip-anim{top:-96px}
  .hakem-banner{top:18%;padding:6px 16px}
}
@media (prefers-reduced-motion:reduce){
  .played.enter,.fan.reveal .fcard,.hand.reveal .card,.deck.shuffling i,.seat.hakem-glow,.hakem-banner{animation:none!important}
}

/* timeout substitute (R-114/R-115): the card the AI played for the expired human turn is labelled */
.played.ai-sub{outline:2px dashed #f0d38b;outline-offset:2px}
.played.ai-sub .played-by{color:#f0d38b}

/* public home (HW-IR-PUBLIC-02) */
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}.cta .primary,.cta-link{min-height:46px}.cta-link{display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid #b89b64;border-radius:12px;color:#ead19b;text-decoration:none;background:transparent}.cta-link:hover{background:#ffffff10}@media(max-width:700px){.cta{flex-direction:column;align-items:stretch}.cta .primary,.cta-link{width:100%}}

/* HW-UX-TABLE-03 typography rules */
html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:Vazirmatn,Tahoma,Arial,sans-serif;font-weight:400;line-height:1.75;font-feature-settings:"kern","liga"}
h1,h2,h3,.hero h1,.online-panel h1,.modal-box h3{font-family:Estedad,Vazirmatn,Tahoma,sans-serif;font-weight:800;line-height:1.35}h3{font-weight:700}
.eyebrow{font-weight:500}p,label,input,.note,.notice{font-weight:400}button,.outline,.primary,.cta-link,.nav,.text-button,.trump-choice button,button.danger,a.primary{font-family:Vazirmatn,Tahoma,sans-serif;font-weight:600}
input,textarea,select{font-family:Vazirmatn,Tahoma,sans-serif;font-size:16px}
.scores b,.turn-timer b,.table-num,.fan-count,.round-progress b{font-family:Vazirmatn,Tahoma,sans-serif;font-weight:700}
.hero-card,.played,.card,.dbg-card,.fcard.up,.dcard.up{font-family:HWNum,Georgia,serif}
.brand,.art-caption,.center-mark small{font-family:Georgia,serif}
.seat strong,.hakem-banner strong{font-family:Vazirmatn,Tahoma,sans-serif;font-weight:600}
@media(max-width:700px){body{font-size:16px}.hero h1{font-size:clamp(34px,10vw,46px)}}

/* shared by home and table pages: danger button + confirmation dialog */
button.danger,a.primary{min-height:44px;padding:0 20px;border-radius:12px;font-weight:600;cursor:pointer}button.danger{border:1px solid #a35a52;background:#3a1f1f;color:#ffd9d4}button.danger:hover{background:#4d2727}
.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.modal.hidden{display:none}.modal-box{max-width:460px;width:100%;background:#111c27;border:1px solid #b89b64;border-radius:18px;padding:26px}.modal-box p{line-height:1.9;color:#cfd8d4}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.my-table{margin-top:20px;padding:16px 18px;border:1px solid #b89b64;border-radius:14px;background:#0b1620cc}.my-table h3{margin:0 0 6px;font-size:19px}.my-table .mt-status{color:#ead19b;font-weight:600;margin:0 0 10px}
.my-table .mt-code{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}.my-table .mt-code strong{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.05em;word-break:break-all;flex:1 1 200px}
.my-table .mt-seats{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}.my-table .mt-seats span{padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px}.my-table .mt-seats span.on{border-color:#d8b66b;color:#ead19b}
.my-table .mt-actions{display:flex;gap:10px;flex-wrap:wrap}.my-table .mt-note{margin:0 0 8px;color:#f0b4ac}.hidden{display:none!important}
.hero-copy p,.hero p{font-size:16px}

/* ======================================================================================================================================
   HW-UX-TABLE-03 — responsive gameplay layout. While a match is on screen (body.in-game) the page is exactly one viewport tall:
   [HUD][status strip][STAGE grows/shrinks][own hand]. layout.js measures the stage (--k, --kt, --sw, --sh) and places the 13 cards.
   No overflow:hidden is used to hide anything; every block is sized to fit.
   ====================================================================================================================================== */
:root{--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
body.in-game{height:100vh;height:100dvh;min-height:0}
body.in-game .app{height:100vh;height:100dvh;max-width:none;display:flex;flex-direction:column;min-height:0}
body.in-game .top{display:none}
body.in-game .online-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0;max-width:none;margin:0}
body.in-game main.game,body.in-game #table-area{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;width:100%;max-width:1500px;margin:0 auto;padding:calc(var(--safe-t) + 6px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 10px)}
/* HUD: score, trump, timer on one slim bar; exit / new game at the far end */
.hud{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:44px}
.hud-spacer{flex:1 1 auto}
.hud .scores{display:flex;align-items:center;gap:8px;margin:0;padding:0}
.hud .scores .sc{display:flex;align-items:baseline;gap:5px}.hud .scores small{font-size:12px;color:var(--muted)}.hud .scores b{font-size:24px;line-height:1.1;color:#f0d99d}
.hud-trump{display:inline-flex;align-items:center;gap:6px;border:1px solid #cfac6d;border-radius:999px;background:#101820;padding:3px 12px;font-size:13px;white-space:nowrap}.hud-trump b{font-size:20px;color:#ecd59a}
.hud .turn-timer,.hud .hud-timer{display:inline-flex;align-items:center;flex-direction:row;gap:0;min-width:0;border:1px solid var(--line);border-radius:999px;padding:2px 12px;background:#0d1620;white-space:nowrap}
.hud .turn-timer small{display:none}.hud .turn-timer b,.hud .hud-timer{font-size:17px;font-weight:700;color:#f0d99d;direction:ltr}.hud .hud-timer:empty{display:none}
.hud-btn{min-width:44px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#0d1620;color:var(--ink);font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;text-decoration:none;white-space:nowrap}
.hud-btn:hover,.hud-btn:focus-visible{border-color:#e7c779;outline:none}
.hud .dbg-toggle{font-size:12px}
/* status strip */
.round-progress{flex:0 0 auto;margin:0;max-width:none;min-height:24px;gap:6px 14px;font-size:13px;line-height:1.5}
.round-progress .status-line,.round-progress #status{font-size:14px;font-weight:600;color:#f0e6c8;margin:0;font-family:Vazirmatn,Tahoma,sans-serif}
.round-progress .tricks b{font-size:15px;margin:0 2px}
/* STAGE: takes whatever height is left; everything inside is sized from --k (layout.js) */
.stage{--k:1;--kt:1;--sw:600px;--sh:300px;--fanH:calc(46px*var(--k));--sidew:clamp(84px,calc(60px + 36px*var(--k)),138px);position:relative;flex:1 1 0;min-height:0;max-width:none;height:auto;margin:0}
.table-glow{inset:12% 5% 8%}
.table{inset:auto;left:50%;transform:translateX(-50%);top:calc(var(--fanH) + 16px);bottom:18px;width:min(calc(var(--sw)*.9),calc(var(--sh)*2.3));padding:calc(5px + 5px*var(--k))}
.trick{inset:22% 22%}
.seat{min-width:0;gap:6px;padding:3px 10px 3px 4px;font-size:12px;border-radius:28px;max-width:calc(var(--sw)*.46)}
.seat strong{font-size:13px;white-space:nowrap}.seat small{margin-top:1px;font-size:10px;white-space:nowrap}
.seat .avatar{width:calc(24px + 12px*var(--k));height:calc(24px + 12px*var(--k));font-size:calc(12px + 6px*var(--k))}
.seat i{display:none}
.top-seat{top:calc(var(--fanH) + 8px);left:50%;bottom:auto;transform:translateX(-50%)}
.bottom-seat{bottom:0;top:auto;left:50%;transform:translateX(-50%)}
.left-seat,.right-seat{top:50%;width:var(--sidew);justify-content:center;transform:translateY(-10%)}
.left-seat{left:0;right:auto}.right-seat{right:0;left:auto}
/* bot fans scale with --k; the pivot trick uses --R * --k so the arcs keep their shape */
.fan{--fw:calc(30px*var(--k));--fh:calc(44px*var(--k))}
.fcard{transform-origin:50% calc(100% + var(--R,200px)*var(--k))}
.fan-top{left:50%;top:var(--fanH)}
.fan-left{left:calc(var(--sidew)/2);right:auto;top:calc(50% - 6px)}
.fan-right{right:calc(var(--sidew)/2);left:auto;top:calc(50% - 6px)}
.fan-count{top:calc(4px*var(--k) + 3px);font-size:11px}
.fcard.up{font-size:calc(11px*var(--k) + 2px)}
/* cards on the table scale with --kt (trick size), including their fly-in distance */
.played{width:calc(50px*var(--kt));height:calc(67px*var(--kt));font-size:calc(16px*var(--kt));padding:calc(5px*var(--kt))}
.played-by{font-size:calc(9px*var(--kt) + 1px)}
.seat-card-0{--px:0px;--py:calc(150px*var(--kt))}.seat-card-1{--px:calc(-200px*var(--kt));--py:0px}.seat-card-2{--px:0px;--py:calc(-150px*var(--kt))}.seat-card-3{--px:calc(200px*var(--kt));--py:0px}
.deck{width:calc(46px*var(--kt));height:calc(64px*var(--kt));left:calc(50% - 23px*var(--kt));top:calc(46% - 32px*var(--kt))}
.hakem-banner{top:16%;padding:6px 18px}.hakem-banner strong{font-size:16px}
.skip-anim{top:6px;right:6px}
/* the player's own hand: always at the bottom, always inside the width (cards positioned by HandFit) */
.hand-panel{flex:0 0 auto;position:relative;max-width:none;margin:0;padding:0;border:0;background:none;border-radius:0}
.hand{display:block;position:relative;direction:ltr;overflow:visible;padding:0;margin:0;min-height:0;height:var(--hand-h,150px)}
.hand .card{position:absolute;left:0;top:0;bottom:auto;margin:0!important;width:var(--cw,64px);height:var(--ch,92px);min-width:0;padding:calc(var(--cw,64px)*.07);font-size:calc(var(--cw,64px)*.3);line-height:1.05;border-radius:calc(var(--cw,64px)*.1);
  transform-origin:50% 100%;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));transition:none;box-shadow:0 4px 10px #000a;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hand .card span{font-size:calc(var(--cw,64px)*.42);line-height:1}
.hand .card:not(:disabled){transform:translate(var(--x,0px),calc(var(--y,0px) - 10px)) rotate(var(--r,0deg));filter:none;border-color:#e7c779}
.hand .card:disabled{filter:brightness(.62) saturate(.7);cursor:not-allowed}
.hand .card:not(:disabled):hover,.hand .card:not(:disabled):focus-visible,.hand .card:not(:disabled):active{transition:transform .12s;transform:translate(var(--x,0px),calc(var(--y,0px) - 22px)) rotate(var(--r,0deg));z-index:50!important;outline:3px solid #f2cf7a;box-shadow:0 0 18px #f2cf7acc,0 8px 14px #000b}
.hand.reveal .card{animation:handIn .4s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*34ms)}
@keyframes handIn{from{opacity:0;transform:translate(var(--x,0px),calc(var(--y,0px) - 18px)) rotate(var(--r,0deg)) scale(.9)}to{opacity:1}}
.trump-choice{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:30;justify-content:center;background:#0f1a24f2;border:1px solid #c4a76e;border-radius:14px;padding:8px 10px;gap:8px}
.trump-choice button{min-height:44px;min-width:56px;font-size:15px}
/* debug dock (Founder-only) must not push the layout */
.debug-dock{flex:0 0 auto;max-height:22vh}
@media(max-width:520px){
  .hud{gap:6px}.hud .scores b{font-size:21px}.hud-trump{padding:2px 9px}.hud-btn{padding:0 8px}.hud .lbl{display:none}
  .seat small{display:none}.seat strong{font-size:12px}
  body.in-game main.game,body.in-game #table-area{padding-left:calc(var(--safe-l) + 6px);padding-right:calc(var(--safe-r) + 6px)}
}
@media(max-height:460px){.hud{min-height:36px}.hud-btn{min-height:34px}.round-progress{min-height:20px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.hand.reveal .card{animation:none!important}}
@media(max-width:420px){
  .hud{gap:4px}.hud .scores{gap:4px}.hud .scores small{font-size:11px}.hud .scores b{font-size:19px}
  .hud-trump{padding:1px 8px;font-size:12px;gap:4px}.hud-trump b{font-size:17px}
  .hud .turn-timer,.hud .hud-timer{padding:1px 6px;border:0;background:transparent}.hud .turn-timer b,.hud .hud-timer{font-size:15px}
  .hud-btn{min-width:40px;padding:0 6px}
}
@media(max-width:359px){#restart{display:none}}
/* room for the card-count badge between a bot's fan and its name pill */
.fan-count{top:calc(2px*var(--k) + 1px)}
.top-seat{top:calc(var(--fanH) + 22px)}
.table{top:calc(var(--fanH) + 26px)}
.left-seat,.right-seat{top:calc(50% + 12px);transform:none}
/* side fans: keep the whole arc inside the stage at every scale */
.fan-left{left:max(calc(var(--sidew)/2),calc(100px*var(--k) + 6px))}
.fan-right{right:max(calc(var(--sidew)/2),calc(100px*var(--k) + 6px))}
/* landscape phones (short viewport): compact table — bot fans and team captions are dropped so the four players, the trick and all 13 cards still fit without scrolling */
@media(max-height:460px){
  .fan{display:none}.seat small{display:none}
  .top-seat{top:6px}.table{top:calc(6px + 18px)}
  .left-seat,.right-seat{top:calc(50% - 16px)}
  .bottom-seat{bottom:2px}
}

/* ======================================================================================================================================
   HW-UX-TABLE-03-R3 — "Royal Persian Night": deep navy, emerald felt, warm gold, ivory cards. Pure CSS/SVG (data-URI patterns, no assets).
   ====================================================================================================================================== */
:root{--navy:#070d1b;--navy2:#0d1a31;--emerald:#0f4d3b;--gold:#d8b66b;--gold2:#f0d99d;--ivory:#f6efdd;--glass:rgba(14,26,44,.62)}
body{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d8b66b' stroke-width='.6' opacity='.07'%3E%3Cpath d='M32 4 38 18 52 12 46 26 60 32 46 38 52 52 38 46 32 60 26 46 12 52 18 38 4 32 18 26 12 12 26 18z'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(ellipse at 50% -10%,#1b2b5a 0,transparent 45%),radial-gradient(ellipse at 85% 85%,#0f3b31 0,transparent 42%),radial-gradient(ellipse at 10% 90%,#1a1840 0,transparent 40%),linear-gradient(#0a1224,#060b16 70%);background-attachment:fixed}
/* --- glass panels --- */
.hud,.seat,.hud-trump,.hud .turn-timer,.hud .hud-timer,.hud-btn,.trump-choice,.my-table,.online-panel,.hero,.modal-box{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hud-btn,.hud-trump,.hud .turn-timer,.hud .hud-timer{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(10,20,36,.62);border-color:#d8b66b55;box-shadow:0 2px 10px #0006,inset 0 1px 0 #ffffff14}
.hud-trump{border-color:#d8b66bb0}
.hud .scores b{text-shadow:0 0 14px #f0d99d55}
.seat{background:linear-gradient(120deg,rgba(30,46,58,.78),rgba(10,22,32,.78));border:1px solid #d8b66b88;box-shadow:0 8px 18px #0008,inset 0 1px 0 #ffffff14}
.seat .avatar{background:radial-gradient(circle at 35% 30%,#4f7f73,#142c31 70%);border:2px solid #d8b66b;box-shadow:0 0 0 2px #0a1b1d,0 2px 8px #0009,inset 0 1px 2px #ffffff30}
.seat i{display:block;width:8px;height:8px;border-radius:50%;background:#3f5f58;margin-right:auto;flex:none}
.seat.active{border-color:#f6dc92;box-shadow:0 0 0 1px #f6dc9288,0 0 24px #e3bd66aa,0 8px 18px #0008;animation:turnPulse 1.6s ease-in-out infinite}
.seat.active i{background:#f6d572;box-shadow:0 0 10px #f6d572}
.seat.hakem{border-color:#f6dc92}
.seat.hakem::after{content:"♛";top:-15px;right:14px;font-size:19px;color:#ffe29a;text-shadow:0 0 10px #e3bd66,0 1px 0 #6d4f1d}
/* --- table: gold rim with relief, emerald felt with fine grain, soft centre light, Persian star watermark --- */
.table-glow{background:radial-gradient(ellipse,#0f9b6f66,transparent 70%);filter:blur(30px)}
.table{background:linear-gradient(180deg,#f4de9c 0,#c9a156 16%,#80601f 38%,#d6b265 60%,#6a4d1b 82%,#a88543 100%);box-shadow:0 28px 46px #000c,0 0 0 2px #3b2e12,inset 0 2px 2px #fff9,inset 0 -3px 7px #000a}
.felt{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),
  radial-gradient(ellipse at 50% 40%,#1f8062 0,#10513f 52%,#07352a 82%,#052a20 100%);border:2px solid #4a3f22;box-shadow:inset 0 0 42px #000b,inset 0 0 0 5px #08392c,inset 0 0 0 6px #d8b66b33}
.felt::before{content:"";position:absolute;left:50%;top:48%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23f0d99d' stroke-width='.7'%3E%3Cpath d='M50 3 59 24 80 14 76 37 97 50 76 63 80 86 59 76 50 97 41 76 20 86 24 63 3 50 24 37 20 14 41 24z'/%3E%3Ccircle cx='50' cy='50' r='22'/%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;opacity:.13}
.felt::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,#ffffff18,transparent 58%);pointer-events:none}
.felt-line{border-color:#f0d99d3a}
.center-mark{z-index:1;color:#f0d99d3a}
.trick-slots{position:absolute;inset:22% 22%;pointer-events:none}
.trick-slots .slot{position:absolute;left:50%;top:50%;width:calc(50px*var(--kt,1));height:calc(67px*var(--kt,1));border:1.5px dashed #f0d99d38;border-radius:calc(6px*var(--kt,1));background:#00000014}
.slot.s0{transform:translate(-50%,5%)}.slot.s1{transform:translate(-175%,-50%)}.slot.s2{transform:translate(-50%,-105%)}.slot.s3{transform:translate(75%,-50%)}
/* --- card backs: dark emerald with a gold geometric lattice --- */
.fcard.back,.dcard.back,.deck i{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230e4b3e'/%3E%3Cg fill='none' stroke='%23d8b66b' stroke-width='.55' opacity='.8'%3E%3Crect x='3.500' y='3.500' width='9' height='9'/%3E%3Crect x='3.500' y='3.500' width='9' height='9' transform='rotate(45 8 8)'/%3E%3Ccircle cx='8' cy='8' r='1.400'/%3E%3C/g%3E%3C/svg%3E") 0 0/12px 12px;
  border:1px solid #e2c27a;box-shadow:0 2px 6px #000b,inset 0 0 0 1.5px #0a3328,inset 0 0 0 2.500px #d8b66b99}
.fcard.back::after{display:none}
/* --- card faces: ivory, soft inner edge, value + suit in the corner, pips / emblems --- */
.cardart{--ink:#1c2430;color:var(--ink);background:radial-gradient(120% 90% at 28% 12%,#fffef8 0,#f8f1df 52%,#ebe0c6 100%)!important;border:1px solid #cbbd98!important;padding:0!important;font-family:Georgia,"Times New Roman",serif!important;text-align:left;overflow:hidden;
  box-shadow:0 5px 11px #0009,inset 0 0 0 1px #fffbe9,inset 0 0 0 3px #e9ddc2}
.cardart.red{--ink:#b01d2c;color:var(--ink)}
.cardart .cx{position:absolute;left:.16em;top:.12em;display:flex;flex-direction:column;align-items:center;width:1.05em;line-height:1;z-index:2}
.cardart .cx.br{left:auto;top:auto;right:.16em;bottom:.12em;transform:rotate(180deg)}
.hand .card.cardart span.rk,.cardart span.rk{display:block;font-size:.95em;font-weight:700;letter-spacing:-.06em;line-height:1}
.cardart[data-rank="10"] span.rk{font-size:.8em;letter-spacing:-.12em}
.cardart .su{width:.82em;height:.82em;margin-top:.1em;display:block}
.cardart .cf{position:absolute;display:block}
.cardart .cf.pips{left:31%;right:31%;top:13%;bottom:13%}
.cardart .pip{position:absolute;width:.88em;height:.88em;transform:translate(-50%,-50%)}
.cardart .pip.fl{transform:translate(-50%,-50%) rotate(180deg)}
.cardart .cf.ace{inset:0;display:grid;place-items:center}
.cardart .pip.big{position:static;width:2.5em;height:2.5em;transform:none;filter:drop-shadow(0 1px 0 #fff8)}
.cardart .cf.face{left:24%;right:24%;top:12%;bottom:12%}
.cardart .fig{width:100%;height:100%;display:block;color:var(--ink)}
.cardart[data-rank="10"] .pip{width:.8em;height:.8em}
/* hero cards on the home page use the same art */
.hero-card.cardart{width:94px;height:142px;font-size:30px;border-radius:9px;margin-left:-18px}
@media(max-width:700px){.hero-card.cardart{width:65px;height:100px;font-size:21px}}
/* cards on the table */
.played.cardart{border-radius:calc(6px*var(--kt,1))}
.played.cardart .played-by{display:none}
.played.cardart.ai-sub .played-by{display:block;position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);z-index:3;background:#000b;padding:1px 6px;border-radius:8px;color:#f0d38b;font:500 10px Vazirmatn,Tahoma,sans-serif}
.played.cardart.ai-sub{overflow:visible}
.played.cardart.trick-win{box-shadow:0 0 0 2px #f0d99d,0 0 22px #e3bd66cc,0 5px 11px #0009;animation:winPulse 1.1s ease-in-out 2}
/* hand cards: indices sized from the card width */
.hand .card.cardart{border-radius:calc(var(--cw,64px)*.09)}
.hand .card.cardart.trump-card{border-top:3px solid #d8b66b!important}
/* --- announcements --- */
.announce{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.8);z-index:8;display:flex;align-items:center;gap:10px;padding:10px 26px;border:1px solid #f0d99d;border-radius:999px;background:linear-gradient(120deg,#17302a,#0b1c1a);box-shadow:0 0 34px #e3bd6677,0 8px 20px #000a;color:#f0d99d;opacity:0;pointer-events:none;font-weight:600;white-space:nowrap}
.announce b{font-size:30px;line-height:1;color:#e8e2d0}.announce b.red{color:#ff7d86}.announce .an-n{color:#cfe3d8;font-size:14px}
.announce.show{animation:announceIn 1.9s cubic-bezier(.2,.8,.2,1) both}
.hud-trump.pop{animation:popIn .6s cubic-bezier(.2,.9,.3,1.3)}
.result>div{background:linear-gradient(160deg,#14302a,#0a1816);border:1px solid #e3c77f;box-shadow:0 0 60px #e3bd6655,0 20px 40px #000c;animation:resultIn .5s cubic-bezier(.2,.9,.3,1.1) both}
.result h2{font-family:Estedad,Vazirmatn,sans-serif;font-weight:800;color:#f4deaa;text-shadow:0 0 18px #e3bd6677}
@keyframes turnPulse{0%,100%{box-shadow:0 0 0 1px #f6dc9288,0 0 16px #e3bd6688,0 8px 18px #0008}50%{box-shadow:0 0 0 1px #f6dc92cc,0 0 30px #e3bd66cc,0 8px 18px #0008}}
@keyframes winPulse{0%,100%{transform-origin:center}50%{filter:brightness(1.12)}}
@keyframes announceIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(1)}}
@keyframes popIn{0%{transform:scale(.7)}60%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes resultIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .seat.active,.hud-trump.pop,.result>div,.played.cardart.trick-win{animation:none!important}
  .announce.show{animation:none!important;opacity:1;transform:translate(-50%,-50%)}
  .hand .card,.hand .card:not(:disabled):hover{transition:none!important}
}

/* R3 tuning after the first gallery review: calmer pips, larger court emblems */
.cardart .cf.pips{left:33%;right:33%;top:14%;bottom:14%}
.cardart .pip{width:.76em;height:.76em}
.cardart[data-rank="10"] .pip{width:.7em;height:.7em}
.cardart .cf.face{left:17%;right:17%;top:7%;bottom:7%}
/* legacy "card span" rules (27px / cw*.42 / 45px) must not reach the new card internals */
.cardart span.cx,.hand .card.cardart span.cx,.hero-card.cardart span.cx,.cardart span.cf,.hand .card.cardart span.cf,.hero-card.cardart span.cf{font-size:1em;margin:0;text-align:left}
.hero-card.cardart span.rk{font-size:.95em;margin:0;text-align:left}
/* R3 tuning: a more generous gold rim; no fixed-attachment body background (cheaper on mobile GPUs) */
.table{padding:calc(7px + 6px*var(--k))}
body{background-attachment:scroll}
/* R3 tuning: slimmer corner index so centre pips never touch it */
.cardart .cx{width:auto;min-width:.9em;left:.14em}
.cardart .cx.br{left:auto;right:.14em}
.hand .card.cardart span.rk,.cardart span.rk{font-size:.84em}
.cardart[data-rank="10"] span.rk{font-size:.72em;letter-spacing:-.1em}
.cardart .su{width:.7em;height:.7em;margin-top:.08em}
.cardart .cf.pips{left:37%;right:37%;top:14%;bottom:14%}
.cardart .pip{width:.66em;height:.66em}
.cardart[data-rank="10"] .pip{width:.62em;height:.62em}
.cardart .cf.pips{left:39.5%;right:39.5%}
.cardart .pip,.cardart[data-rank="10"] .pip{width:.6em;height:.6em}
.cardart[data-rank="10"] .cf.pips,.cardart[data-rank="9"] .cf.pips{top:19%}
/* --- R3 Standard Cards (free, default set): every face is one SVG drawing that fills the card; VIP set keeps the rules above --- */
.cardart.std{background:none!important;border:0!important;padding:0!important;overflow:visible;border-radius:5.8%/4%!important;color:inherit}
.cardart.std>svg.cs{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-card.cardart.std:not([style*="position"]){position:relative}
.hand .card.cardart.std.trump-card,.card.cardart.std.trump-card{border-top:0!important;box-shadow:0 0 0 2px #e0b85a,0 5px 12px #0007!important}
html:not(.deck-vip) .fcard.back,html:not(.deck-vip) .dcard.back,html:not(.deck-vip) .deck i{background:#14244f url(/cards/back-standard.svg) center/100% 100% no-repeat!important;border:0!important;box-shadow:0 2px 6px #000b!important}

/* --- HW-TABLE-3D-01: closer to the Founder mockup — 3D cards, bigger hand and table cards, heavy gold rim, larger seats and HUD, table logo --- */
/* cards: paper thickness (stacked edge) + soft drop shadow + light sheen */
.cardart.std{box-shadow:0 1px 0 #f1e8d1,0 2px 0 #dccfae,0 3px 0 #c6b690,0 4px 1px #8c7a55,0 12px 20px rgba(0,0,0,.55)}
.hand .card.cardart.std.trump-card,.card.cardart.std.trump-card{box-shadow:0 0 0 1.5px #e0b85acc,0 1px 0 #f1e8d1,0 2px 0 #dccfae,0 3px 0 #c6b690,0 4px 1px #8c7a55,0 12px 20px rgba(0,0,0,.55)!important}
.cardart.std::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.38) 0,rgba(255,255,255,.08) 28%,rgba(255,255,255,0) 45%,rgba(0,0,0,0) 72%,rgba(60,40,10,.08) 100%)}
.hand .card.cardart.std:disabled{filter:brightness(.8) saturate(.85)}
/* cards on the table: about twice the old size (positions are relative to the card size) */
.played{width:calc(92px*var(--kt));height:calc(133px*var(--kt))}
.trick-slots .slot{width:calc(92px*var(--kt,1));height:calc(133px*var(--kt,1));border-radius:calc(9px*var(--kt,1))}
/* opponent fans: larger backs */
.stage{--fanH:calc(60px*var(--k))}
.fan{--fw:calc(40px*var(--k));--fh:calc(58px*var(--k))}
.fcard{border-radius:calc(4px*var(--k))}
.fan-count{min-width:30px;padding:1px 8px;font-size:13px;border-width:1.5px;background:linear-gradient(180deg,#1b2333,#0b111c)}
/* table: thick polished gold rim with reflections */
.table{padding:calc(11px + 8px*var(--k));
  background:conic-gradient(from 205deg at 50% 50%,#f8e4a2,#b3852d 10%,#fff1bd 19%,#8a6322 31%,#e8c672 45%,#7a5620 58%,#f6dc93 70%,#9b7230 84%,#f8e4a2);
  box-shadow:0 0 0 2px #2a1d08,0 0 0 3.5px #d9b56577,0 30px 60px #000d,inset 0 3px 3px #fffbe6cc,inset 0 -5px 9px #3a2808cc}
.felt{border:3px solid #3a2d10;box-shadow:inset 0 0 50px #000c,inset 0 10px 24px #0009,inset 0 0 0 6px #08392c,inset 0 0 0 7px #d8b66b40}
/* logo in the corner of the table area */
.table-brand{position:absolute;top:calc(var(--fanH)*.35 + 4px);right:1.2%;z-index:2;display:flex;flex-direction:column;align-items:center;line-height:1.05;pointer-events:none;color:#e6c46f;text-shadow:0 2px 6px #000c}
.table-brand .tb-crown{font-size:calc(22px + 10px*var(--k));color:#f0cf74;filter:drop-shadow(0 0 8px #e3bd6688)}
.table-brand b{font:700 calc(15px + 8px*var(--k)) Georgia,serif;letter-spacing:1px;background:linear-gradient(180deg,#fbe7a6,#c99a3e);-webkit-background-clip:text;background-clip:text;color:transparent}
.table-brand small{margin-top:5px;font:500 calc(11px + 4px*var(--k)) Vazirmatn,Tahoma,sans-serif;color:#e7dfcc}
@media(max-width:1100px),(max-height:620px){.table-brand{display:none}}
/* seats: gold-ringed avatar with a person icon */
.seat .avatar{font-size:0!important;background:radial-gradient(circle at 35% 30%,#2f6a62,#0f2a2c 72%);border:2px solid #e2bd68;box-shadow:0 0 0 2px #0a1b1d,0 0 0 3.5px #c9a24f66,0 3px 8px #000a,inset 0 1px 3px #ffffff40}
.seat .avatar::before{content:"";width:56%;height:56%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.6' r='4.3' fill='%23e8c677'/%3E%3Cpath d='M3.2 21.5c.7-5 4.3-7.7 8.8-7.7s8.1 2.7 8.8 7.7z' fill='%23e8c677'/%3E%3C/svg%3E") center/contain no-repeat}
.seat{border:1.5px solid #d4ad5c;background:linear-gradient(180deg,rgba(28,36,52,.92),rgba(9,14,24,.92));box-shadow:0 0 0 1px #00000088,0 8px 20px #000a,inset 0 1px 0 #ffffff1c,inset 0 0 12px #d8b66b1a}
/* HUD pills */
.hud-btn,.hud-trump,.hud .turn-timer,.hud .hud-timer{border:1.5px solid #c9a24f;border-radius:999px;background:linear-gradient(180deg,#1a2234,#0a0f1a);box-shadow:0 3px 10px #0008,inset 0 1px 0 #ffffff1a,inset 0 0 10px #d8b66b14}
@media(min-width:900px) and (min-height:640px){
  .seat{gap:10px;padding:6px 18px 6px 6px;border-radius:40px}
  .seat .avatar{width:calc(30px + 16px*var(--k));height:calc(30px + 16px*var(--k))}
  .seat strong{font-size:17px}.seat small{font-size:12.5px;margin-top:3px}
  .hud{min-height:52px;gap:14px}
  .hud-btn{min-height:46px;padding:0 20px;font-size:16px}
  .hud-trump{min-height:46px;padding:0 20px;font-size:16px}.hud-trump b{font-size:22px}
  .hud .turn-timer,.hud .hud-timer{min-height:46px;padding:0 18px}
}
@media(min-width:900px) and (min-height:640px){.left-seat,.right-seat{width:auto;min-width:var(--sidew)}.left-seat{left:4px}.right-seat{right:4px}}
@media(max-width:700px){.played{width:calc(70px*var(--kt));height:calc(101px*var(--kt))}.trick-slots .slot{width:calc(70px*var(--kt,1));height:calc(101px*var(--kt,1))}}
/* Founder decision: opponents hold their cards off-table; only the card each player plays is shown */
.fan{display:none!important}
.stage{--fanH:calc(10px*var(--k))}
@media(max-width:700px){.left-seat,.right-seat{top:27%}}

/* --- HW-GAMEPLAY-UX-02: first-person 3D table. Camera values (--tilt, --persp, --oy, table size, player size) come from GameFit.fp() --- */
.stage:not(.fp) .t-edge,.stage:not(.fp) .bust{display:none}
.stage.fp{perspective:var(--persp,1200px);perspective-origin:50% var(--oy,0px)}
.stage.fp .table-glow{display:none}
/* the table: a plane hinged at its near edge, receding from the seated player */
.stage.fp .table{inset:auto;left:50%;top:calc(var(--yb,300px) - var(--th,300px));width:var(--tw,600px);height:var(--th,300px);
  transform:translateX(-50%) rotateX(var(--tilt,50deg));transform-origin:50% 100%;transform-style:preserve-3d;
  box-shadow:0 0 0 2px #2a1d08,inset 0 3px 3px #fffbe6cc,inset 0 -5px 9px #3a2808cc}
/* thickness: stacked slices under the top surface, shading from polished gold to the dark underside */
.t-edge{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.t-edge i{position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,#2e1d06,#8d6526 18%,#d7b25e 48%,#7a551c 82%,#2e1d06);box-shadow:inset 0 0 0 1.5px #00000066}
.t-edge i:nth-child(1){transform:translateZ(calc(var(--edge,4px)*-1))}
.t-edge i:nth-child(2){transform:translateZ(calc(var(--edge,4px)*-2))}
.t-edge i:nth-child(3){transform:translateZ(calc(var(--edge,4px)*-3))}
.t-edge i:nth-child(4){transform:translateZ(calc(var(--edge,4px)*-4))}
.t-edge i:nth-child(5){transform:translateZ(calc(var(--edge,4px)*-5));filter:brightness(.8)}
.t-edge i:nth-child(6){transform:translateZ(calc(var(--edge,4px)*-6));filter:brightness(.6)}
.t-edge i:nth-child(7){transform:translateZ(calc(var(--edge,4px)*-7));background:#1a1104;box-shadow:0 0 16px 4px #000b}
.stage.fp .felt{transform:translateZ(.6px)}
/* seated players: upright figures standing in the same 3D space; the table top hides their lower body */
.stage.fp .bust{position:absolute;width:var(--bw,160px);height:var(--bh,170px);transform-origin:50% 100%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(243,210,122,var(--glow,0)),rgba(243,210,122,0)) 50% 28%/115% 70% no-repeat}
.stage.fp .bust::after{content:"";position:absolute;inset:0;background:var(--img) 50% 100%/contain no-repeat}
.stage.fp .bust-top{--img:url(/avatars/teammate.svg);left:50%;top:2%;transform:translate(-50%,-100%) rotateX(calc(var(--tilt,50deg)*-1)) translateY(24%)}
.stage.fp .bust-left{--img:url(/avatars/opponent-left.svg);left:1%;top:46%;transform:translate(-30%,-100%) rotateX(calc(var(--tilt,50deg)*-1)) translateY(24%) scale(1.06)}
.stage.fp .bust-right{--img:url(/avatars/opponent-right.svg);right:1%;top:46%;transform:translate(30%,-100%) rotateX(calc(var(--tilt,50deg)*-1)) translateY(24%) scale(1.06)}
.stage.fp:has(.top-seat.active) .bust-top,.stage.fp:has(.left-seat.active) .bust-left,.stage.fp:has(.right-seat.active) .bust-right{--glow:.75}
/* name plates sit on the table edge in front of each player (positions measured from the projected figures) */
.stage.fp .seat.top-seat,.stage.fp .seat.left-seat,.stage.fp .seat.right-seat{left:var(--sx,50%)!important;top:var(--sy,0px)!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;width:auto!important;min-width:0!important;z-index:6}
/* cards on the table lie on the felt; larger so the foreshortened far cards stay readable */
.stage.fp .played{width:calc(104px*var(--kt));height:calc(151px*var(--kt))}
.stage.fp .trick-slots .slot{width:calc(104px*var(--kt,1));height:calc(151px*var(--kt,1))}
.stage.fp .played.cardart.std{box-shadow:0 1px 0 #dccfae,0 2px 0 #c6b690,0 9px 12px rgba(0,0,0,.5)}
@media(max-width:700px){.stage.fp .played{width:calc(84px*var(--kt));height:calc(122px*var(--kt))}.stage.fp .trick-slots .slot{width:calc(84px*var(--kt,1));height:calc(122px*var(--kt,1))}}
.stage.fp .seat.top-seat .avatar,.stage.fp .seat.left-seat .avatar,.stage.fp .seat.right-seat .avatar{display:none}
.stage.fp .seat.top-seat,.stage.fp .seat.left-seat,.stage.fp .seat.right-seat{padding:4px 14px!important}
/* the 3D stage is clipped at its own box: Chrome counts the un-projected bounds of the tilted plane as page overflow (nothing visible lies outside) */
.stage.fp{overflow:clip}

/* HW-GAMEPLAY-UX-02: WebGL3D mode — DOM table becomes transparent (three.js renders the visual table+characters behind it via #scene3d-canvas) */
.stage.webgl3d.fp .table{background:transparent!important;box-shadow:none!important}
.stage.webgl3d.fp .felt{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.stage.webgl3d.fp .felt::before,.stage.webgl3d.fp .felt::after,.stage.webgl3d.fp .felt-line{display:none!important}
.stage.webgl3d.fp .t-edge{display:none!important}
.stage.webgl3d.fp .bust{visibility:hidden!important;pointer-events:none!important}
.stage.webgl3d.fp .table-glow{display:none!important}
#scene3d-canvas{border-radius:var(--stage-radius,0)}
/* own plate moves to the stage corner so it never covers the card played from the bottom seat */
.stage.webgl3d.fp .seat.bottom-seat{left:8px!important;right:auto!important;transform:none!important;bottom:4px!important}
.stage.webgl3d.fp .felt,.stage.webgl3d.fp .table,.stage.webgl3d.fp .trick{overflow:visible!important;clip-path:none!important}