@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Teko:wght@500;700&display=swap');

:root { --blue:#3157a4; --deep:#101a3c; --orange:#f18a22; --cream:#f4e8cc; --grey:#a9a9a2; --dark:#20212c; --shadow:#080910; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:#171926; background:#5671b4; font-family:"Share Tech Mono",monospace; image-rendering:pixelated; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.035) 1px 3px); mix-blend-mode:overlay; }
button,input { font:inherit; }
button { cursor:pointer; }
.workbench { min-height:100vh; padding:48px 4vw 36px; background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.12),transparent 28%),linear-gradient(135deg,#5374bf,#385caa 55%,#2a4a93); }
.screen-bar { position:fixed; z-index:4; inset:0 0 auto; height:27px; display:flex; align-items:center; gap:12px; padding:0 12px; color:#05050b; background:#efefec; border-bottom:3px solid #111; box-shadow:inset 0 -1px #777; font-size:13px; }
.screen-chip { width:18px; height:14px; border:2px solid #222; background:repeating-linear-gradient(90deg,#3157a4 0 3px,#eee 3px 5px); }
.screen-memory { margin-left:auto; }
#clock { min-width:45px; }
.window { width:min(1120px,100%); margin:20px auto 0; border:4px solid #101019; background:var(--grey); box-shadow:14px 16px 0 rgba(8,14,42,.45),inset 2px 2px #fff; }
.titlebar { height:35px; display:flex; align-items:center; padding:3px 5px; color:#fff; background:repeating-linear-gradient(0deg,#eee 0 2px,#242735 2px 4px); border-bottom:3px solid #111; }
.titlebar h1 { margin:auto; padding:0 14px; font-size:16px; letter-spacing:2px; background:#252735; }
.window-gadget,.depth-gadget { width:25px; height:23px; flex:none; border:2px solid #111; background:#aaa; box-shadow:inset 2px 2px #fff,inset -2px -2px #555; }
.window-gadget::after { content:""; display:block; width:9px; height:9px; margin:5px; background:#222; }
.depth-gadget::after { content:""; display:block; width:10px; height:7px; margin:4px; border:2px solid #222; box-shadow:4px 4px #aaa,4px 4px 0 2px #222; }
.menu-strip { height:29px; display:flex; align-items:center; gap:4px; padding:0 7px; border-bottom:2px solid #555; background:#ddd; }
.menu-strip button { border:0; background:transparent; padding:3px 10px; }
.menu-strip button:hover,.menu-strip button:focus { color:#fff; background:#234c9e; outline:0; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; padding:12px; }
.table-panel,.control-panel { border:3px solid #25252b; box-shadow:inset 2px 2px rgba(255,255,255,.7),inset -2px -2px #656565; }
.table-panel { padding:18px; background:#d0cec1; }
.table-header { display:flex; justify-content:space-between; align-items:center; min-height:70px; color:var(--deep); }
.eyebrow { color:#555; font-size:13px; letter-spacing:2px; }
.table-header h2 { margin:5px 0 10px; font:700 29px/1 "Teko",sans-serif; letter-spacing:2px; }
.deck-counter { display:grid; place-items:center; width:67px; height:57px; background:#252738; color:#fff; border:3px solid #111; box-shadow:inset 3px 3px #4e5167; }
.deck-counter span { font:700 25px/1 "Teko"; color:#ffc04a; }.deck-counter small { font-size:9px; }
.felt { min-height:370px; display:flex; justify-content:center; align-items:center; gap:clamp(16px,4vw,50px); padding:30px 15px; border:5px solid #151c31; background-color:#172d62; background-image:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%); background-size:10px 10px; box-shadow:inset 0 0 0 3px #4166b1,inset 0 0 45px #080d28,4px 4px #727267; }
.card-slot { display:flex; flex-direction:column; align-items:center; gap:9px; }
.slot-label { color:#b5c8ef; font-size:11px; letter-spacing:2px; }
.card { position:relative; width:146px; height:208px; padding:12px; color:#15151b; background:var(--cream); border:4px solid #11131b; border-radius:5px; box-shadow:5px 6px #080d20,inset 0 0 0 3px #fff,inset 0 0 0 5px #bdb19c; transition:transform .3s; }
.card.red { color:#b32925; }.card.reveal { animation:flip .45s ease; }
.card .corner { position:absolute; top:11px; left:12px; font:700 30px/24px "Teko"; text-align:center; }.card .corner small { display:block; font:21px serif; }
.card .corner.bottom { inset:auto 12px 11px auto; transform:rotate(180deg); }
.card .big-suit { display:grid; height:100%; place-items:center; font:74px serif; text-shadow:2px 2px rgba(0,0,0,.12); }
.card::before { content:""; position:absolute; inset:42px 17px; border:2px dotted currentColor; opacity:.25; }
.between-mark { width:54px; height:65px; display:grid; place-items:center; color:#f5ae31; border:3px dashed #7e94c5; }
.between-mark span { font:700 51px/1 "Teko"; animation:pulse 1.5s infinite; }
.message { min-height:48px; margin-top:14px; display:grid; place-items:center; padding:8px; color:#202234; background:#eeeadd; border:2px solid #555; box-shadow:inset 2px 2px #fff; text-align:center; }
.message.win { color:#176133; }.message.loss { color:#a72b25; }
.control-panel { padding:15px; background:#96968f; }
.logo-block { position:relative; min-height:128px; padding:10px 10px 8px 93px; color:#eee; background:#20233a; border:3px solid #0b0b12; box-shadow:inset 3px 3px #484b61; }
.logo-block strong { display:block; color:#f5a12b; font:700 42px/31px "Teko"; letter-spacing:2px; text-shadow:3px 3px #8c3023; }
.logo-small,.logo-edition { display:block; font-size:8px; letter-spacing:1px; }.logo-edition { margin-top:5px; color:#aabce8; }
.logo-cards { position:absolute; left:13px; top:25px; width:59px; height:80px; padding:5px; font:700 22px "Teko"; color:#12131c; background:#eee4c9; border:3px solid #101018; transform:rotate(-5deg); }.logo-cards span { color:#b72d29; }
.meters { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:12px 0; }.meter { padding:9px; color:#b7c6e9; background:#202232; border:2px solid #101018; text-align:center; }.meter span { display:block; font-size:9px; }.meter strong { display:block; margin-top:4px; color:#59e38d; font-size:19px; }.meter.pot strong { color:#ffc25c; }
.bet-box { margin:0 0 12px; padding:13px 10px 11px; border:2px groove #eee; }.bet-box legend { padding:0 7px; font-size:11px; }
.stepper { display:grid; grid-template-columns:38px 1fr 38px; height:40px; }.stepper button,.quick-bets button,.mui-button { border:2px solid #292931; background:#bbb; box-shadow:inset 2px 2px #eee,inset -2px -2px #666; }.stepper button:active,.quick-bets button:active,.mui-button:active { box-shadow:inset 2px 2px #555; }.stepper output { display:grid; place-items:center; color:#f8b842; background:#242635; border-block:2px solid #292931; font-size:19px; }
input[type=range] { width:100%; accent-color:#3157a4; margin:13px 0 9px; }.quick-bets { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.quick-bets button { padding:5px; font-size:11px; }
.deal-button { width:100%; padding:14px 5px; color:#fff; background:#3159aa; border:3px solid #172650; box-shadow:inset 3px 3px #7397df,inset -3px -3px #172d69,4px 4px #555; font:700 21px "Teko"; letter-spacing:2px; }.deal-button:hover { background:#3f6bc5; }.deal-button:disabled { filter:grayscale(1); cursor:not-allowed; }.led { display:inline-block; width:8px; height:8px; margin-right:8px; background:#73ef93; box-shadow:0 0 6px #73ef93; }
.mui-button { width:100%; margin-top:11px; padding:8px; }
.statusbar { height:29px; display:flex; align-items:center; padding:0 8px; gap:8px; border-top:2px solid #555; background:#cacac3; font-size:11px; }.status-light { width:9px; height:9px; background:#42a85b; border:1px solid #163e20; }.resize-grip { margin-left:auto; font-size:20px; }
.desktop-label { width:min(1120px,100%); margin:14px auto; color:#fff; font-size:11px; text-shadow:1px 2px #1a2b60; }
dialog { width:min(470px,90vw); padding:0; border:4px solid #15151d; background:#bbb; box-shadow:12px 14px rgba(0,0,0,.4); }.dialog-title { display:flex; justify-content:space-between; align-items:center; padding:5px 8px; color:#fff; background:#25283c; }.dialog-title button { color:#fff; border:0; background:transparent; font-size:20px; }.dialog-title + div { padding:24px; line-height:1.6; }.dialog-title + div p { margin-top:0; }dialog .mui-button { width:120px; margin:0 0 18px calc(50% - 60px); }dialog::backdrop { background:rgba(9,13,33,.65); }
@keyframes flip { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} } @keyframes pulse { 50%{transform:scale(1.12)} }
@media(max-width:800px){.game-layout{grid-template-columns:1fr}.control-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px}.logo-block{grid-row:span 2}.meters,.bet-box{margin:0}.deal-button,.mui-button{margin:0}.felt{min-height:310px}.card{width:120px;height:172px}.card .big-suit{font-size:60px}}
@media(max-width:570px){.workbench{padding-inline:8px}.screen-memory{display:none}.game-layout{padding:7px}.table-panel{padding:9px}.control-panel{display:block}.logo-block,.meters,.bet-box,.deal-button{margin-bottom:10px}.felt{gap:8px;padding:20px 5px}.card{width:94px;height:140px;padding:5px}.card .corner{font-size:24px;line-height:19px}.card .corner small{font-size:16px}.card .big-suit{font-size:44px}.between-mark{width:34px}.table-header h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}