@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root{color-scheme:dark;--bg:#0c1514;--panel:#14211f;--line:#2b3b35;--gold:#e2bf7c;--muted:#94a8a0;--text:#eff2e9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0,#1b2d26 0,transparent 45%),var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}header{max-width:1380px;margin:auto;padding:27px 40px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line)}.brand{letter-spacing:2px;font-size:15px;color:var(--text);text-decoration:none}.brand b{color:var(--gold);font-weight:400}.brand-icon{font-size:29px;vertical-align:middle;margin-right:10px;color:var(--gold)}.practice{font-size:9px;letter-spacing:1.6px;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:8px 12px}.quiet{color:var(--muted);background:none;padding:10px}header .quiet{margin-left:auto}main{max-width:1280px;margin:auto;padding:42px 30px 20px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:600}h1{font:500 43px/1.15 'Playfair Display',Georgia,serif;margin:13px 0 0}h1 em{color:var(--gold)}.heading p{line-height:1.8;color:var(--muted);padding-right:14px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px}.play-area{border:1px solid #395148;border-radius:17px;overflow:hidden;background:#111d19;box-shadow:0 20px 55px #0003}.table-top{display:flex;justify-content:space-between;padding:19px 23px;background:#1c3028;font-size:9px;letter-spacing:1.4px;color:#c6d5cc}.live{display:inline-block;width:6px;height:6px;background:#8dbc9c;border-radius:50%;margin-right:7px}.felt{position:relative;min-height:440px;background:radial-gradient(ellipse at center,#24523f,#153c2d);padding:24px 20px 20px;box-shadow:inset 0 0 65px #0003}.felt:before{content:'';position:absolute;inset:18px;border:1px solid #c6b78122;border-radius:160px 160px 35px 35px;pointer-events:none}.zone-label{font-size:10px;letter-spacing:1.5px;color:#b1c8bb}.zone-label span{background:#ffffff14;padding:3px 8px;border-radius:10px;letter-spacing:0;margin-left:8px}.dealer-zone{text-align:center;position:relative}.cards{display:flex;gap:9px;justify-content:center;min-height:106px;margin-top:13px;flex-wrap:wrap}.card{width:66px;height:93px;background:#faf7ef;border-radius:7px;box-shadow:0 4px 9px #0004;color:#20332a;display:flex;flex-direction:column;align-items:flex-start;padding:6px 8px;font:600 19px/1 Georgia;animation:deal .18s ease-out}.card .suit{font-size:30px;align-self:center;margin-top:7px}.card.red{color:#bd4447}.card.back{background:repeating-linear-gradient(45deg,#20443e 0 5px,#2e5c50 5px 7px);border:4px solid #dfd6b8;display:grid;place-items:center;color:#ddc591;font-size:35px}.table-mark{text-align:center;margin:16px 0 20px;color:#d9c48c88;letter-spacing:3px;font:17px Georgia,serif}.table-mark small{display:block;font:8px Arial;letter-spacing:1.5px;margin-top:9px;color:#a6bda177}.hands{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative}.hand{text-align:center;padding:8px 9px;border:1px solid transparent;border-radius:10px;min-width:155px}.hand.active{border-color:#dbc28c80;background:#ffffff05}.hand .cards{margin-top:10px}.hand .card{width:60px;height:85px}.hand-meta{font-size:11px;color:#c5d4ca;margin-top:6px}#message{position:relative;text-align:center;color:#e9d7ac;margin-top:14px;min-height:21px;font-size:13px}.controls{padding:22px 25px}.bet-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.bet-row strong{display:block;font-size:25px;margin-top:4px}.chips{display:flex;gap:9px;flex-wrap:wrap}.chip{border-radius:50%;width:45px;height:45px;color:#c8d6cb;background:#22392f;border:2px dashed #788d7a;outline:2px solid #304a3b;outline-offset:2px;font-weight:600;font-size:12px}.chip.selected{color:#16261d;background:var(--gold);border-color:#f6e2b4;outline-color:var(--gold)}.actions{display:flex;gap:9px;margin-top:23px;flex-wrap:wrap}.actions button,.primary{border-radius:7px;padding:14px 19px;background:#263c31;color:var(--text);flex:1;min-width:90px;font-weight:600}.actions .primary,.primary{background:var(--gold);color:#20291d}.keyboard{text-align:center;font-size:10px;color:#758c7e;margin:16px 0 0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:17px}.balance{font-size:37px;margin:16px 0 19px;letter-spacing:-1px}.bank-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.bank-foot strong{color:var(--gold)}#spark{width:100%;height:55px;margin:12px 0 -10px}.panel-title{font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-title>span{font-size:10px;color:var(--muted);font-weight:400}.stats{display:flex;justify-content:space-between;margin:25px 0}.stats strong{display:block;font-size:27px}.stats span{display:block;margin-top:6px;color:var(--muted);font-size:11px}.subtle{color:var(--muted);font-size:11px;line-height:1.7}.tip{background:linear-gradient(135deg,#263427,#19271f)}h3{font:23px 'Playfair Display',Georgia,serif;margin:14px 0}.tip p{font-size:12px;line-height:1.8;color:#b2c1b5}.history{margin-top:26px;padding:23px 25px}.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;white-space:nowrap;margin-top:20px;font-size:12px;text-align:left}th{font-size:9px;letter-spacing:1px;color:var(--muted);font-weight:500}td,th{padding:14px 12px;border-bottom:1px solid var(--line)}td:first-child,th:first-child{padding-left:0}.empty{text-align:center;color:var(--muted);padding:30px}.positive{color:#9accb0}.negative{color:#edaaa0}footer{font-size:10px;text-align:center;color:#789083;padding:14px}dialog{max-width:480px;width:calc(100% - 28px);background:#182820;border:1px solid #54654c;border-radius:14px;color:var(--text);padding:25px;max-height:90vh}dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}label{display:block;font-size:12px;margin:20px 0 8px}input,select{display:block;background:#101d16;border:1px solid #435444;border-radius:7px;padding:11px;color:var(--text);width:100%;margin-top:9px}.check{display:flex;align-items:center;gap:10px}.check input{width:auto;margin:0}form>.primary{width:100%;margin-top:18px}@keyframes deal{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:850px){.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:15px}aside .panel{margin:0}.tip{grid-column:1/-1}.heading p{display:none}header{padding:18px 20px;gap:12px}.practice{display:none}main{padding:30px 15px}.heading h1{font-size:36px}.history{padding:20px 15px}}@media(max-width:450px){.brand{font-size:11px;letter-spacing:1px}.brand-icon{margin-right:4px}header .quiet{font-size:11px;padding:5px}.controls{padding:20px 15px}.chips{gap:8px}.chip{width:36px;height:36px;font-size:10px}.actions button{padding:13px 10px;min-width:65px}.table-top{padding:16px}.table-mark{letter-spacing:2px;font-size:15px}.balance{font-size:31px}.panel{padding:18px}.cards{gap:6px}}

/* Cards move into place face-down, then turn over. Stable slots preserve motion across live updates. */
.card-shell{width:66px;height:93px;perspective:900px;flex-shrink:0;position:relative}
.card-turner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .8s cubic-bezier(.22,.65,.25,1)}
.card-turner.revealed{transform:rotateY(0deg)}
.card-shell .card{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation:none}
.card-shell .card-reverse{transform:rotateY(180deg);box-shadow:0 4px 9px #0004}
.card-shell .card-face{transform:rotateY(0deg)}
.dealt-card{animation:slide-to-seat .65s cubic-bezier(.2,.7,.2,1) both}
.shared-hands .card-shell{width:48px;height:72px}.hand .card-shell{width:60px;height:85px}
.demo-cards .card-shell{width:96px;height:136px;transform:rotate(-12deg)}.demo-cards .card-shell:last-child{transform:rotate(10deg);margin-left:-6px;margin-top:10px}
.demo-cards .card-shell .card{transform:none}.demo-cards .card-shell .card-reverse{transform:rotateY(180deg)}
@keyframes slide-to-seat{0%{opacity:0;transform:translate(65px,-85px) rotate(15deg) scale(.88)}25%{opacity:1}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.dealt-card{animation-duration:.01ms!important;animation-delay:0ms!important}.card-turner{transition:none}}

.solo-reveal .card-turner{animation:solo-turn .8s cubic-bezier(.22,.65,.25,1) var(--flip-delay) both}
@keyframes solo-turn{from{transform:rotateY(180deg)}to{transform:rotateY(0deg)}}
@media(prefers-reduced-motion:reduce){.solo-reveal .card-turner{animation-duration:.01ms;animation-delay:0ms}}
.brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}.brand-mascot{display:block;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 3px 7px #0005)}@media(max-width:620px){.brand{gap:8px;font-size:12px}.brand-mascot{width:45px;height:45px}}
body{background:#0b0f12}header{background:#101518;border-color:#343a38}.heading h1{font-family:'DM Sans',Arial,sans-serif;font-size:36px;font-weight:650;letter-spacing:-1px}.heading p{font-size:12px;color:#9da9ac}.panel{border-radius:8px;background:#141a1d;border-color:#303739}footer{border-top:1px solid #303739;margin-top:25px;padding:22px 0;color:#778488;text-align:left}