:root{--ink:#100b19;--purple:#b363f0;--lime:#b2fd4d;--gold:#efd18b;--card-w:clamp(64px,7.4vw,103px);--card-h:calc(var(--card-w) * 1.43)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;background:#090611;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;overflow:hidden}
button{font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation;user-select:none}
button:disabled{cursor:default;opacity:.37;filter:saturate(.5)}button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.app{height:100vh;height:100dvh;width:100%;max-width:2000px;margin:auto;display:flex;flex-direction:column;background:#140d1e;overflow:hidden;position:relative}
.topbar{z-index:5;flex:none;height:70px;min-height:54px;display:flex;justify-content:space-between;align-items:center;padding:4px clamp(14px,3vw,42px);border-bottom:1px solid rgba(179,99,240,.32);background:linear-gradient(105deg,#13071b 0%,#20102b 45%,#10091a 100%);box-shadow:0 8px 25px #07040ab8}
.brand-wrap,.top-stats{display:flex;align-items:center;gap:clamp(6px,1.2vw,20px)}
.brand-logo{object-fit:contain;object-position:left center;width:clamp(138px,20vw,267px);height:49px;filter:drop-shadow(0 0 6px #7930bd70)}
.brand-rule{height:32px;width:1px;background:#795586}.game-name{font-size:clamp(12px,1.45vw,20px);font-weight:900;letter-spacing:.16em;color:#f8f4ed;white-space:nowrap;text-shadow:0 1px 5px #000}.game-name-bullet{color:var(--lime)}
.top-stats{gap:9px}.wallet{display:flex;align-items:center;gap:10px;background:#191122;border:1px solid #6f4a84;border-radius:12px;padding:6px 16px;min-width:144px;box-shadow:inset 0 1px #ffffff12}.wallet small,.bet-info small,.action-caption small{display:block;color:#baa6c4;font-size:10px;letter-spacing:.17em;font-weight:800}.wallet strong{font-variant-numeric:tabular-nums;font-size:19px;color:#e8ffb7;line-height:1.2}.wallet-icon{color:#ceff6c;border:2px solid #a3c95d;border-radius:50%;height:31px;width:31px;display:grid;place-items:center;font-size:24px}
.icon-btn{border:1px solid #64446b;background:#24162f;width:40px;height:40px;border-radius:10px;font-size:22px;font-weight:800;display:grid;place-items:center;transition:.15s}.icon-btn:hover{background:#483054;border-color:#d7a9f4}
.game-stage{position:relative;flex:1;min-height:190px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 44%,#30173a 0%,#1b0e27 64%,#08050d 100%)}
.stage-lights{position:absolute;inset:0;background:radial-gradient(ellipse at 10% 8%,#872ab929,transparent 40%),radial-gradient(ellipse at 90% 75%,#ab79f91f,transparent 39%);pointer-events:none}
.table-rail{position:absolute;inset:3.4% 3.7% -38% 3.7%;border-radius:45% 45% 25% 25% / 48% 48% 35% 35%;background:linear-gradient(130deg,#53321c 0%,#b9934c 9%,#6b451c 18%,#2f1c16 29%,#885d30 52%,#ebc46b 71%,#57371c 94%);padding:12px;box-shadow:0 0 0 3px #100a11,0 0 0 6px #846335,0 15px 65px #000c,inset 0 2px 10px #ffe7a75e;overflow:hidden}
.felt{height:100%;width:100%;border:5px solid #183628;border-radius:inherit;background:radial-gradient(ellipse at 49% 30%,#0b6545 0%,#095638 36%,#06432f 65%,#052d23 100%);box-shadow:inset 0 0 45px #001c18d6,0 0 0 1px #e2c17a;position:relative}
.felt:after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(#e3ffc30b 1px,transparent 1px);background-size:5px 5px;opacity:.7;pointer-events:none}
.felt:before{content:"";position:absolute;left:12%;right:12%;top:23%;height:48%;border:2px solid #d3ba695c;border-top-color:#d3ba6995;border-radius:50% 50% 35% 35% / 70% 70% 30% 30%;pointer-events:none}
.felt-emblem{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-size:clamp(88px,15vw,180px);font-family:Georgia,serif;color:#ffffff08;text-shadow:0 0 20px #ffffff05;pointer-events:none}
.felt-inscription{position:absolute;left:0;right:0;top:43%;text-align:center;color:#e8c981ab;letter-spacing:.26em;font-weight:800;font-size:clamp(9px,1vw,15px);text-shadow:0 2px 2px #031b13;pointer-events:none}.felt-inscription span{padding:0 18px;color:var(--lime)}
.felt-edge-label{position:absolute;bottom:3%;left:0;right:0;text-align:center;color:#d4b77890;font-weight:800;font-size:clamp(9px,.83vw,12px);letter-spacing:.28em;pointer-events:none}.felt-edge-label span{color:#98e56d;padding:0 7px}
.round-id{position:absolute;right:5.6%;top:6%;color:#b8d1c0;font-size:9px;letter-spacing:.17em;font-weight:800;opacity:.6;text-align:right}
.shoe{position:absolute;right:10%;top:12%;width:var(--card-w);height:var(--card-h);filter:drop-shadow(0 8px 9px #03180f7a);transform:rotate(14deg) scale(.83);opacity:.94}.shoe-card{position:absolute;inset:0;border:2px solid #c19c64;border-radius:7px;background:#1d1028 url('assets/card-back.webp') center/100% 100% no-repeat;box-shadow:0 2px 6px #0009}.shoe .s1{transform:translate(7px,-6px)}.shoe .s2{transform:translate(4px,-3px)}
.dealer-area{position:absolute;top:8%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;min-width:34%;z-index:2}
.seat-heading,.player-hand-title{display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(11px,1vw,14px);font-weight:900;letter-spacing:.2em;text-shadow:0 2px 4px #00190a;white-space:nowrap}
.heading-dot{height:7px;width:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}.score-pill{display:grid;place-items:center;min-width:30px;height:23px;background:#061f19;border:1px solid #d3b87996;border-radius:7px;color:#faf5de;font-size:14px;letter-spacing:0;padding:0 7px}
.hand-cards{display:flex;justify-content:center;align-items:center;padding-left:clamp(5px,1vw,15px);min-height:var(--card-h)}.hand-cards>.card+.card{margin-left:calc(var(--card-w) * -.25)}
.card{height:var(--card-h);width:var(--card-w);flex:none;border-radius:clamp(5px,.7vw,11px);position:relative;box-shadow:0 5px 7px #00190e70,0 0 1px 1px #33202c;overflow:hidden}
.card-front{background:linear-gradient(143deg,#fff 0%,#fdfbf5 59%,#e4dfd7 100%);color:#262527;border:2px solid #f8f6f1;box-shadow:0 5px 10px #041810ac,0 0 0 1px #74634d}.card-front.red{color:#d22b3d}.card-back{border:2px solid #d8bd77;background:#291237 url('assets/card-back.webp') center/100% 100% no-repeat;box-shadow:0 5px 10px #041810ae,0 0 0 1px #e9b968}
.card-corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.93;gap:4px;left:5px;top:5px}.card-corner b{font-family:Georgia,serif;font-size:clamp(15px,1.7vw,25px);font-weight:900}.card-corner span{font-size:clamp(12px,1.55vw,22px)}.card-corner.bottom{left:auto;top:auto;right:5px;bottom:5px;transform:rotate(180deg)}
.card-center{position:absolute;inset:15% 12%;display:grid;place-items:center;font-size:clamp(33px,4.4vw,64px);font-family:Georgia,serif;text-shadow:1px 2px #00000017}.card-center.court{background:linear-gradient(145deg,#f2e3c5,#e9dcbb);border:1px double #d8ba78;border-radius:3px;inset:22% 21%;color:#6d408c;display:flex;flex-direction:column;justify-content:center;gap:3px}.card-center.court span{font-size:clamp(29px,3.7vw,54px);font-weight:900;line-height:1}.card-center.court em{font-size:clamp(16px,1.8vw,29px);font-style:normal;color:#ac6c2d}
.card-front.red .card-center.court{color:#b32639}
.ghost-card{border:2px dashed #c4e6b44d;background:#15594148;box-shadow:none;transform:rotate(-5deg)}.ghost-card+.ghost-card{transform:rotate(5deg)}
.card-enter{animation:card-in .31s cubic-bezier(.2,.8,.23,1.2) both;animation-delay:var(--delay,0ms)}@keyframes card-in{from{opacity:0;transform:translate(35px,-18px) rotate(8deg) scale(.9)}to{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
.status-area{position:absolute;left:50%;top:54.5%;transform:translate(-50%,-50%);z-index:3;text-align:center;width:70%;max-width:650px;pointer-events:none}.status-ornament{font-size:13px;letter-spacing:12px;color:#ffe39e9a;margin-bottom:3px}.status-ornament span{color:var(--lime)}.status-message{font-weight:800;font-size:clamp(12px,1.5vw,19px);color:#fff6df;text-shadow:0 2px 5px #04160b,0 0 17px #d6e89b75;letter-spacing:.02em}
.players-area{position:absolute;bottom:11%;left:5%;right:5%;z-index:4;--card-w:clamp(59px,7.25vw,103px)}.hands-container{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,2.6vw,38px);max-width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none;padding:5px 3px 2px}.hands-container::-webkit-scrollbar{display:none}
.player-hand{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;min-width:calc(var(--card-w) * 1.75);border:1px solid transparent;border-radius:12px;padding:2px 5px;position:relative}
.player-hand.active{border-color:#e7cc8d8c;background:#021d161f;box-shadow:0 0 20px #b2fd4d20}.player-hand-title{justify-content:space-between;min-width:100%;gap:9px;font-size:clamp(10px,1vw,13px);letter-spacing:.13em}.player-hand-title>span{white-space:nowrap}.player-hand-title small{font-size:clamp(9px,.9vw,12px);color:#e9ca7e;letter-spacing:0;margin-left:4px}.player-hand-title b{display:grid;place-items:center;padding:2px 7px;border:1px solid #d4b973;border-radius:6px;background:#0a3928;font-size:13px;letter-spacing:0}
.hand-result{position:absolute;bottom:34%;left:50%;transform:translateX(-50%) rotate(-7deg);padding:5px 13px;border-radius:5px;border:2px solid currentColor;white-space:nowrap;font-weight:1000;font-size:clamp(13px,1.5vw,19px);letter-spacing:.1em;box-shadow:0 2px 10px #000b;background:#122617eb;z-index:10}.hand-result.win{color:#b7ff6a}.hand-result.lose{color:#ff9e9e}.hand-result.push{color:#fff5b3}
.your-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:#d8d6bb8e;font-size:12px;font-weight:900;letter-spacing:.2em}.placeholders{display:flex}.placeholders .card+.card{margin-left:calc(var(--card-w) * -.25)}
.control-deck{flex:none;z-index:6;background:linear-gradient(180deg,#261530 0%,#170d23 65%,#100919 100%);border-top:2px solid #a36c4b;box-shadow:0 -10px 24px #0007;padding:10px clamp(10px,3.1vw,47px) 7px}
.bet-controls,.action-controls{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.5vw,39px);min-height:75px}.hidden{display:none!important}
.bet-info{min-width:94px}.bet-info>div{display:flex;align-items:center;gap:6px;font-size:25px;color:#efffc1}.bet-symbol{font-size:21px;color:#d4ac4c}.bet-info strong{font-variant-numeric:tabular-nums}
.chip-list{display:flex;align-items:center;gap:clamp(6px,1vw,14px)}.chip{height:clamp(50px,5.2vw,68px);width:clamp(50px,5.2vw,68px);padding:0;flex:none;border-radius:50%;border:5px dashed #fff8;box-shadow:0 3px 9px #000a,inset 0 0 0 3px #ffffff40,inset 0 0 0 7px #1d1824;display:grid;place-items:center;position:relative;transition:transform .16s ease,filter .16s ease}.chip:hover:not(:disabled){transform:translateY(-5px);filter:brightness(1.2)}.chip:active:not(:disabled){transform:translateY(1px)}.chip span{font-size:clamp(12px,1.3vw,17px);font-weight:1000;text-shadow:0 1px 3px #000}.chip-10{background:radial-gradient(circle,#284a4e,#137d84)}.chip-25{background:radial-gradient(circle,#2c6324,#27a247)}.chip-100{background:radial-gradient(circle,#702695,#9233d6)}.chip-500{background:radial-gradient(circle,#bd7122,#e29e20)}
.bet-helpers{display:flex;flex-direction:column;align-items:center;gap:4px}.text-btn{background:none;border:0;font-size:10px;font-weight:900;letter-spacing:.1em;color:#d5bddd;padding:2px 3px}.text-btn:not(:disabled):hover{color:#c5ff73}
.primary-btn{border:1px solid #d8ff72;border-radius:12px;background:linear-gradient(115deg,#bafc54 0%,#6cc62e 100%);color:#152612;font-weight:1000;font-size:clamp(12px,1.3vw,18px);letter-spacing:.055em;padding:0 22px;min-height:60px;box-shadow:inset 0 1px 1px #f6ffc8,0 5px 0 #305817,0 9px 15px #0009;transition:filter .15s,transform .15s;white-space:nowrap}.primary-btn:not(:disabled):active{transform:translateY(4px);box-shadow:inset 0 1px 1px #f6ffc8,0 1px 0 #305817,0 3px 7px #0009}.primary-btn:not(:disabled):hover{filter:brightness(1.1)}.deal-btn span{margin-left:10px}
.action-caption{min-width:87px}.action-caption strong{display:block;font-size:20px;color:#f7e7bd;white-space:nowrap}.action-buttons{display:flex;gap:clamp(8px,1.7vw,20px)}.action-btn{min-width:clamp(105px,13vw,174px);height:64px;border-radius:12px;font-size:clamp(13px,1.4vw,18px);letter-spacing:.08em;font-weight:1000;box-shadow:0 4px 0 #111,inset 0 1px #ffffff55;display:flex;align-items:center;justify-content:center;gap:12px;transition:.1s}.action-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #111}.hit-btn{background:#a5e44c;color:#1b3819;border:2px solid #d6fd9d}.stand-btn{background:#ad51c6;color:#fff;border:2px solid #f0a7ff}.action-btn.secondary{background:#32273b;color:#e9d9f2;border:2px solid #785f86}.action-icon{font-size:27px;line-height:1}
.foot-note{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff12;padding-top:5px;color:#a991b1;font-size:9px;font-weight:900;letter-spacing:.12em}.foot-note button{background:none;border:0;color:#dbcae7;font-size:10px;letter-spacing:.09em;font-weight:900}.foot-note button:hover{color:var(--lime)}
.toast{position:fixed;left:50%;top:16%;transform:translate(-50%,-15px);border:1px solid #c8ac76;background:#211330ed;border-radius:9px;box-shadow:0 7px 30px #0009;padding:12px 18px;color:#fff;z-index:15;font-size:13px;font-weight:800;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.rules-dialog{border:2px solid #b97af6;border-radius:21px;padding:25px;max-width:min(510px,90vw);max-height:85dvh;overflow:auto;color:#faf7ec;background:radial-gradient(circle at 50% 0,#392342,#140d20 75%);box-shadow:0 0 70px #000b}.rules-dialog::backdrop{background:#05040dcc;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:start}.modal-head small{letter-spacing:.22em;color:#b9e77a;font-size:11px}.modal-head h2{margin:5px 0 8px;font-size:26px;letter-spacing:.09em}.rules-dialog p{color:#d9cde0;font-size:13px;line-height:1.65}.rules-dialog strong{color:#c5fa72}.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.rule-grid>div{border:1px solid #725082;border-radius:9px;padding:12px;background:#ffffff08;display:flex;flex-direction:column;gap:5px}.rule-grid b{color:#d2f78d;font-size:12px}.rule-grid span{font-size:12px;color:#dbc7e2}.rules-dialog .rule-small{font-size:11px;color:#ac9db3}.modal-close{width:100%;min-height:48px;margin-top:8px}
@media(min-width:1200px){.game-stage{--card-w:109px}.players-area{--card-w:109px}.control-deck{padding-top:15px}.bet-controls,.action-controls{min-height:90px}}
@media(max-width:900px){.topbar{height:53px}.brand-logo{height:38px;width:clamp(118px,20vw,190px)}.brand-rule{height:25px}.wallet{padding:4px 8px;min-width:106px}.wallet strong{font-size:15px}.wallet-icon{display:none}.wallet small{font-size:8px}.icon-btn{height:32px;width:32px;font-size:18px}.game-name{font-size:12px;letter-spacing:.09em}.control-deck{padding:6px 13px 3px}.bet-controls,.action-controls{min-height:62px;gap:11px}.bet-info{min-width:74px}.bet-info>div{font-size:20px}.bet-info small,.action-caption small{font-size:8px}.chip{width:48px;height:48px;border-width:4px}.chip-list{gap:8px}.primary-btn{min-height:46px;border-radius:9px;padding:0 11px;font-size:12px}.action-btn{min-width:99px;height:48px;gap:5px;border-radius:9px}.action-icon{font-size:22px}.foot-note{font-size:8px}.players-area{bottom:8%;--card-w:clamp(58px,7.1vw,70px)}.game-stage{--card-w:clamp(61px,7.5vw,73px)}.dealer-area{top:7%;gap:5px}.status-area{top:55%}.felt-inscription{top:44%}.hand-cards{min-height:var(--card-h)}.player-hand{gap:4px}.player-hand-title{font-size:10px}.seat-heading{font-size:11px}.round-id{font-size:8px}}
@media(max-width:650px) and (orientation:landscape){.topbar{height:42px;min-height:42px}.brand-logo{height:32px;width:108px}.brand-wrap{gap:6px}.game-name{font-size:10px}.wallet{min-width:80px}.wallet strong{font-size:12px}.wallet small{font-size:7px}.icon-btn{width:28px;height:28px}.control-deck{padding:4px 8px 3px}.bet-controls,.action-controls{min-height:50px;gap:9px}.chip{width:42px;height:42px}.chip-list{gap:4px}.bet-info>div{font-size:16px}.bet-info{min-width:60px}.bet-helpers{gap:0}.text-btn{font-size:8px}.primary-btn{min-height:40px;font-size:10px}.action-btn{min-width:78px;height:38px;font-size:11px}.action-icon{font-size:19px}.action-caption{min-width:57px}.action-caption strong{font-size:14px}.foot-note{padding-top:2px;font-size:7px}.foot-note button{font-size:8px}.game-stage{--card-w:49px}.players-area{--card-w:49px;bottom:7%}.status-ornament{display:none}.status-area{top:53%}.status-message{font-size:11px}.felt-inscription{display:none}.felt-edge-label{display:none}.round-id{display:none}.shoe{right:7%}}
@media(max-height:470px) and (orientation:landscape){.topbar{height:41px;min-height:41px}.brand-logo{height:30px}.brand-rule{height:22px}.wallet{min-width:90px;padding:3px 7px}.wallet small{font-size:7px}.wallet strong{font-size:13px}.control-deck{padding:4px 14px 3px}.bet-controls,.action-controls{min-height:48px}.chip{width:42px;height:42px}.chip-list{gap:6px}.primary-btn{min-height:40px;font-size:11px}.action-btn{height:39px;min-width:86px}.action-icon{font-size:19px}.action-caption strong{font-size:15px}.foot-note{padding-top:2px;font-size:7px}.foot-note button{font-size:8px}.game-stage{--card-w:clamp(47px,6.8vw,62px)}.players-area{--card-w:clamp(47px,6.8vw,62px);bottom:7%}.dealer-area{top:5%;gap:3px}.players-area .player-hand{gap:2px}.status-area{top:54%}.status-ornament{display:none}.status-message{font-size:clamp(10px,1.3vw,14px)}.felt-inscription{display:none}.felt-edge-label{display:none}.round-id{font-size:7px}}
@media(orientation:portrait) and (max-width:740px){.app{overflow:auto;height:100dvh;min-height:620px}.topbar{padding:5px 10px;flex-wrap:nowrap}.brand-logo{width:122px;height:36px}.brand-rule{display:none}.game-name{font-size:11px}.top-stats{gap:4px}.wallet{min-width:75px;padding:3px 6px}.wallet strong{font-size:12px}.wallet small{font-size:7px}.wallet-icon{display:none}.fullscreen-btn{display:none}.game-stage{min-height:345px;--card-w:clamp(60px,16vw,85px)}.felt-inscription{top:45%;font-size:8px;letter-spacing:.09em}.felt-inscription span{padding:0 4px}.shoe{right:8%;top:15%;transform:rotate(14deg) scale(.58)}.dealer-area{top:12%}.players-area{--card-w:clamp(60px,16vw,85px);bottom:12%;left:1%;right:1%}.player-hand{padding:2px}.status-area{top:54%;width:94%}.status-message{font-size:13px}.felt-edge-label,.round-id{display:none}.control-deck{padding:10px 8px}.bet-controls{flex-wrap:wrap;gap:8px}.bet-info{min-width:66px}.chip-list{order:2;width:100%;justify-content:center}.bet-helpers{flex-direction:row;order:3}.deal-btn{order:4}.action-controls{flex-direction:column;gap:8px}.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}.action-btn{height:44px;width:100%}.action-caption{display:flex;align-items:center;gap:15px}.foot-note{margin-top:10px}.foot-note>span:first-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Recompute card height in each layout context after the responsive card width changes. */
.game-stage,.players-area{--card-h:calc(var(--card-w) * 1.43)}
@media (orientation:landscape) and (max-height:470px){
 .status-area{left:7%;top:55%;transform:translateY(-50%);width:25%;text-align:left}
 .status-message{font-size:clamp(10px,1.4vw,14px);line-height:1.3}
 .players-area{bottom:6%}
 .dealer-area{top:6%}
}