:root { color-scheme:dark; --gold:#dfbd78; --ink:#f6f1e5; --muted:#adbcb5; --panel:#0f211b; --line:#ffffff20; }
* { box-sizing:border-box; }
html { min-width:0; }
body { min-width:0; min-height:100vh; margin:0; overflow-x:hidden; background:radial-gradient(ellipse at 50% -15%,#19332a 0,#091711 62%,#07120e 100%); color:var(--ink); font:14px/1.45 "Segoe UI",Inter,Arial,sans-serif; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { display:flex; align-items:center; gap:24px; min-height:70px; padding:12px 24px; border-bottom:1px solid #e8d4a127; background:#09150fd9; }
.brand { display:flex; flex:none; align-items:center; gap:10px; }
.brand-mark { color:var(--gold); font-size:29px; line-height:1; }
.brand strong,.brand small { display:block; }
.brand strong { letter-spacing:.18em; font-size:15px; line-height:1.15; }
.brand small { margin-top:3px; color:var(--muted); font-size:9px; letter-spacing:.14em; }
#status { flex:1; margin:0; overflow:hidden; color:var(--gold); text-align:center; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.lobby-link { flex:none; color:var(--muted); text-decoration:none; font-size:12px; }
.lobby-link:hover { color:var(--gold); }
main { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,310px); gap:10px; min-width:0; padding:10px; }
.stage-shell { display:grid; min-width:0; min-height:calc(100dvh - 106px); place-items:center; overflow:hidden; }
#stage-holder { position:relative; width:1000px; height:620px; flex:none; }
#stage { position:absolute; top:0; left:0; width:1000px; height:620px; overflow:visible; background:transparent; transform:scale(var(--scene-scale,1)); transform-origin:top left; --card-scale:1; --chip-scale:1; }
#zones,#tableMarkings,#shadows,#objects,#playerPositions { position:absolute; inset:0; }
#zones { z-index:3; pointer-events:none; }
#tableMarkings { z-index:1; pointer-events:none; }
#shadows { z-index:2; pointer-events:none; }
#objects { z-index:4; pointer-events:none; }
#playerPositions { z-index:5; pointer-events:none; }
.tabletop-shadow { position:absolute; left:0; top:0; width:31px; height:12px; border-radius:50%; background:radial-gradient(ellipse,#000 0%,#000e 39%,#0008 63%,transparent 84%); filter:blur(2px); pointer-events:none; transform:translate(-50%,-50%); transform-origin:center; }
.zone { position:absolute; display:grid; place-items:center; border:1px dashed #f3d88b25; border-radius:18px; color:#f6edcf63; font-size:10px; font-weight:750; letter-spacing:.10em; text-align:center; text-transform:uppercase; transform:translate(-50%,-50%); }
.zone.shared { border-radius:50%; }
.zone.shuffle { display:none; }
.zone.rack { border:0; background:transparent; box-shadow:none; color:transparent; }
.zone.seatChip,.zone.seatCard,.zone.seatBet { display:none; }
#stage[data-layout="ten-player"] .zone { display:none; }
.betting-line { position:absolute; inset:0; width:1000px; height:620px; overflow:visible; }
.betting-line path { fill:none; stroke:#d7b66a80; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.betting-line.is-active path { stroke:#f0d28e; stroke-width:2.1; filter:drop-shadow(0 0 5px #e8c778); }
.table-marking { position:absolute; inset:0; }
.seat-card-area,.seat-chip-area,.seat-bet-area { position:absolute; display:grid; place-items:center; transform:translate(-50%,-50%); color:#f0dca799; font-size:8px; font-weight:800; letter-spacing:.1em; text-align:center; text-transform:uppercase; }
.seat-card-area { width:80px; height:52px; }
.seat-card-area::before,.seat-card-area::after { position:absolute; top:4px; width:29px; height:41px; border:1px dashed #dfc48072; border-radius:4px; background:#071c1360; content:""; }
.seat-card-area::before { left:9px; transform:rotate(-9deg); }
.seat-card-area::after { right:9px; transform:rotate(8deg); }
.seat-card-area { text-shadow:0 1px 2px #00160d; isolation:isolate; }
.seat-card-area::before,.seat-card-area::after { z-index:-1; }
.seat-chip-area { width:52px; height:52px; border:1px dotted #dfc48085; border-radius:50%; background:radial-gradient(circle,#d3b7700d,transparent 71%); }
.seat-bet-area { width:64px; height:34px; border:1px dashed #dfc48085; border-radius:50%; background:#071c1340; }
.table-marking[data-active="true"] .seat-card-area::before,.table-marking[data-active="true"] .seat-card-area::after,.table-marking[data-active="true"] .seat-chip-area,.table-marking[data-active="true"] .seat-bet-area { border-color:#efd79bcb; box-shadow:0 0 12px #dfbd7850; }
.pot-markings { position:absolute; top:308px; left:500px; display:grid; grid-template-columns:repeat(3,48px); grid-template-rows:repeat(3,34px); gap:24px 12px; transform:translate(-50%,-50%); }
.pot-marking { display:grid; place-items:center; border:1px solid #efd59e49; border-radius:999px; background:#081b1480; color:#e4d2a27a; font-size:9px; font-weight:800; letter-spacing:.07em; }
.pot-marking[data-active="true"] { border-color:#eed08d; background:#675328bd; color:#fff0be; box-shadow:0 0 14px #e5c87a5c; }
#stage[data-demo-scene="chip-formations"] .zone:not(.rack),
#stage[data-demo-scene="chip-formations"] .table-marking,
#stage[data-demo-scene="chip-formations"] .pot-markings,
#stage[data-demo-scene="chip-formations"] .betting-line { display:none; }
.tabletop-object { position:absolute; left:0; top:0; z-index:10; pointer-events:none; transform:translate(-50%,-50%); transform-origin:center; }
.tabletop-object.card { width:calc(46px * var(--card-scale)); height:calc(64px * var(--card-scale)); border-radius:6px; object-fit:cover; box-shadow:0 2px 4px #00180e9c; }
.tabletop-object.chip { width:calc(var(--chip-width,25px) * var(--chip-scale)); height:calc(var(--chip-height,18px) * var(--chip-scale)); object-fit:fill; }
.tabletop-object.chip[data-zone="rack"] { height:calc(19px * var(--chip-scale)); }
.rack-physical-chips { position:absolute; inset:0; z-index:2; display:none; pointer-events:none; }
.tabletop-object.chip[data-mouse-held="true"] { z-index:10000!important; filter:drop-shadow(0 4px 4px #0009); }
.chip-plow-hand { position:absolute; z-index:9000; width:60px; height:78px; background:var(--casino-hand-sweep-image,url("../assets/hands/glove-sweep.svg?v=round-2")) center/contain no-repeat; filter:drop-shadow(0 3px 3px #0009) drop-shadow(-2px -2px 1px #ffffff24); pointer-events:none; transform:translate(-50%,-50%); }
.chip-plow-hand[data-side="1"] { transform:translate(-50%,-50%) scaleX(-1); }
.chip-grip-hand,.chip-pull-hand { position:absolute; z-index:9000; width:82px; height:82px; background:var(--casino-hand-grip-image,url("../assets/hands/glove-grip.svg?v=round-2")) center/contain no-repeat; filter:drop-shadow(0 3px 3px #0009) drop-shadow(-2px -2px 1px #ffffff24); pointer-events:none; transform:translate(-50%,-50%) rotate(var(--grip-angle,0deg)); }
.chip-pull-hand { background-image:var(--casino-hand-pull-image,var(--casino-hand-grip-image)); }
.chip-grip-hand[data-side="-1"] { transform:translate(-50%,-50%) rotate(var(--grip-angle,0deg)) scaleY(-1); }
.chip-plow-hand,.chip-grip-hand,.chip-pull-hand { opacity:calc(var(--hand-opacity,.6) * var(--rig-presence,1)); }
.card-hand { position:absolute; z-index:9000; width:82px; height:82px; pointer-events:none; transform:translate(-50%,-50%) rotate(var(--grip-angle,0deg)); background:var(--casino-hand-card-image,var(--casino-hand-grip-image,url("../assets/hands/glove-grip.svg"))) center/contain no-repeat; filter:drop-shadow(0 4px 4px #000a) drop-shadow(-2px -2px 1px #ffffff24); opacity:calc(var(--hand-opacity,.6) * var(--rig-presence,1)); }
.card-hand[data-motion="wash"] { width:74px; height:94px; background:var(--casino-hand-wash-image,var(--casino-hand-sweep-image,url("../assets/hands/glove-sweep.svg"))) center/contain no-repeat; }
.chip-plow-hand[data-hand="left"] { transform:translate(-50%,-50%) rotate(var(--grip-angle,0deg)) scaleX(-1); }
.chip-plow-hand[data-hand="right"] { transform:translate(-50%,-50%) rotate(var(--grip-angle,0deg)); }
.chip-grip-hand[data-hand="left"],.chip-pull-hand[data-hand="left"],.card-hand[data-hand="left"] { transform:translate(-50%,-50%) rotate(var(--grip-angle,0deg)) scaleX(-1); }
.chip-grip-hand[data-hand="right"],.chip-pull-hand[data-hand="right"],.card-hand[data-hand="right"] { transform:translate(-50%,-50%) rotate(var(--grip-angle,0deg)); }
.chip-hand-table-shadow { position:absolute; z-index:30; width:54px; height:27px; border-radius:50%; background:#0008; filter:blur(9px); pointer-events:none; transform:translate(-50%,-50%); }
.tabletop-object.chip[data-mouse-selected="true"] { filter:drop-shadow(0 0 5px #f6d484); }
.mouse-hand-badge { position:absolute; z-index:140; min-width:34px; padding:3px 6px; transform:translate(16px,-36px); border:1px solid #e7cb8a; border-radius:999px; background:#14271ee6; box-shadow:0 2px 8px #000b; color:#fff2cf; font:700 12px system-ui,sans-serif; pointer-events:none; text-align:center; }
.mouse-help { grid-column:1/-1; margin:2px 0 4px; padding:8px 10px; border-left:2px solid #c9a96e; color:#ead8b4; background:#14251d; font-size:12px; line-height:1.45; }
#stage[data-mouse-demo="true"] { touch-action:none; cursor:crosshair; }
.mouse-help button { margin-left:6px; padding:3px 8px; border:1px solid #ba9a62; border-radius:999px; background:#21382a; color:#f4e4be; font:700 11px system-ui,sans-serif; cursor:pointer; }
.tabletop-stack { position:absolute; z-index:35; width:calc((var(--chip-width,25px) + 4px) * var(--chip-scale)); height:calc((var(--chip-height,18px) + 2px + var(--stack-depth,0) * var(--chip-stack-pitch,1.3px)) * var(--chip-scale)); pointer-events:none; transform:translate(-50%,-50%); filter:drop-shadow(0 2px 2px #0008); }
.tabletop-stack .grouped-chip { position:absolute; left:calc((2px + var(--stack-jitter-x,0px)) * var(--chip-scale)); top:calc((1px + var(--stack-level)) * var(--chip-scale)); width:calc(var(--chip-width,25px) * var(--chip-scale)); height:calc(var(--chip-height,18px) * var(--chip-scale)); object-fit:fill; transform-origin:center; }
.tabletop-bridge { position:absolute; z-index:36; width:calc(var(--bridge-width) * var(--chip-scale)); height:calc(var(--bridge-height) * var(--chip-scale)); pointer-events:none; transform:translate(-50%,-50%); filter:drop-shadow(0 2px 2px #0008); }
.tabletop-bridge .grouped-chip { position:absolute; left:calc(var(--bridge-x) * var(--chip-scale)); top:calc(var(--bridge-y) * var(--chip-scale)); width:calc(var(--chip-width,25px) * var(--chip-scale)); height:calc(var(--chip-height,18px) * var(--chip-scale)); object-fit:fill; }
.bridge-options { display:grid; gap:6px; padding:8px; border:1px solid #d7ba7e45; border-radius:8px; }
.bridge-options summary { cursor:pointer; color:var(--gold); }
.bridge-options label { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bridge-options select { min-width:80px; }
.is-airborne-tabletop-object { z-index:100!important; filter:drop-shadow(0 var(--tabletop-shadow-y,4px) var(--tabletop-shadow-blur,5px) rgb(0 12 8 / var(--tabletop-shadow-alpha,.35)))!important; will-change:left,top,width,height,filter,rotate; }
.dealer-seat { top:12px; left:50%; transform:translateX(-50%); }
.seat-a { top:575px; left:310px; }
.seat-b { top:575px; left:544px; }
.seat-c { top:575px; left:105px; }
.seat-d { top:575px; left:749px; }
.seat-e { top:450px; left:8px; }
.seat-f { top:290px; left:8px; }
.seat-g { top:12px; left:150px; }
.seat-h { top:12px; right:150px; }
.seat-i { top:290px; right:8px; flex-direction:row-reverse; }
.seat-j { top:450px; right:8px; flex-direction:row-reverse; }
.seat-i .seat-meta,.seat-j .seat-meta { margin-left:0; margin-right:-10px; padding:2px 17px 2px 10px; border-radius:999px 0 0 999px; background:linear-gradient(270deg,#11251bd9,#0b2018b8 74%,#0b20183d); text-align:right; }
.seat-bubble { position:absolute; bottom:calc(100% + 11px); left:0; display:none; max-width:190px; min-width:80px; padding:8px 10px; border:1px solid #d9c69780; border-radius:11px; background:#f5efdf; box-shadow:0 6px 18px #0007; color:#1a2921; font-size:12px; font-weight:500; line-height:1.25; overflow-wrap:anywhere; white-space:normal; }
.seat-bubble:not(:empty) { display:block; }
.seat-bubble::after { position:absolute; top:100%; left:20px; width:10px; height:10px; border-right:1px solid #d9c69780; border-bottom:1px solid #d9c69780; background:#f5efdf; content:""; transform:translateY(-5px) rotate(45deg); }
.seat-i .seat-bubble,.seat-j .seat-bubble,.seat-h .seat-bubble { left:auto; right:0; }
.seat-i .seat-bubble::after,.seat-j .seat-bubble::after,.seat-h .seat-bubble::after { left:auto; right:20px; }
.seat-g .seat-bubble,.seat-h .seat-bubble { top:calc(100% + 11px); bottom:auto; }
.seat-g .seat-bubble::after,.seat-h .seat-bubble::after { top:-5px; transform:rotate(225deg); }
.dealer-seat .seat-bubble { top:calc(100% + 11px); bottom:auto; left:50%; transform:translateX(-50%); }
.dealer-seat .seat-bubble::after { top:-5px; left:calc(50% - 5px); transform:rotate(225deg); }
.control-panel { min-width:0; max-height:calc(100dvh - 106px); overflow:auto; padding:18px; border:1px solid #d7ba7e45; border-radius:16px; background:linear-gradient(155deg,#142a21f2,#0a1b15f2); box-shadow:0 20px 55px #0007; scrollbar-color:#8b7548 #0b1b15; }
.mobile-seat-roster { display:none; }
.intro { padding-bottom:17px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 5px; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.15em; }
.intro h1 { margin:0 0 7px; font:500 27px/1.14 Georgia,serif; }
.intro > p:not(.eyebrow) { margin:0 0 13px; color:var(--muted); font-size:12px; }
.intro a { color:var(--gold); text-decoration-thickness:1px; text-underline-offset:3px; }
.intro a:hover { color:#ffe4a8; }
.hand-monitor { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.hand-monitor span { min-width:0; padding:6px 3px; border:1px solid #ddb96835; border-radius:7px; background:#07150f; color:var(--muted); font-size:9px; line-height:1.3; text-align:center; }
.hand-monitor b { color:var(--gold); letter-spacing:.02em; }
.settings-group,.demo-group,.chat-panel { padding-top:16px; margin-top:0; border-bottom:1px solid var(--line); padding-bottom:16px; }
.settings-group h2,.demo-group h2,.chat-panel h2 { margin:0 0 10px; color:var(--gold); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.settings-note { margin:0 0 10px; color:var(--muted); font-size:11px; line-height:1.45; }
.dealer-sweep-controls { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; align-items:end; margin:12px 0 7px; }
.dealer-sweep-controls label { display:grid; gap:4px; min-width:0; color:var(--muted); font-size:11px; }
@media (max-width:640px) { .dealer-sweep-controls { grid-template-columns:repeat(2,minmax(0,1fr)); } .dealer-sweep-controls label { grid-column:1/-1; } }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.settings-grid label { display:grid; min-width:0; gap:4px; color:var(--muted); font-size:11px; }
select,input[type="text"] { min-width:0; width:100%; min-height:34px; padding:6px 9px; border:1px solid #d5c49a49; border-radius:7px; background:#091b15; color:var(--ink); font:inherit; }
select:focus-visible,input:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.range-line { display:flex; align-items:center; min-width:0; gap:6px; }
input[type="range"] { width:100%; min-width:0; margin:0; accent-color:var(--gold); }
.range-line output { flex:none; width:37px; color:var(--ink); font-size:10px; text-align:right; }
.demo-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.demo-group h2 { grid-column:1/-1; margin-bottom:2px; }
button { min-width:0; min-height:40px; padding:8px 10px; border:1px solid #d9ba784d; border-radius:8px; background:linear-gradient(#294536,#1b342a); color:var(--ink); cursor:pointer; font:650 12px/1.25 "Segoe UI",Arial,sans-serif; text-align:center; overflow-wrap:anywhere; transition:background .15s,border-color .15s,transform .15s; }
button:hover:not(:disabled) { border-color:var(--gold); background:linear-gradient(#355b46,#254233); transform:translateY(-1px); }
button:active:not(:disabled) { transform:translateY(0); }
button:disabled { cursor:wait; opacity:.54; }
button.primary { border-color:#e3c889b8; background:linear-gradient(#937544,#70562e); }
.event-panel { padding-top:14px; color:var(--muted); font-size:11px; }
.event-panel summary { cursor:pointer; }
#events { display:grid; max-height:180px; overflow:auto; gap:4px; padding:0; list-style:none; color:var(--muted); font:10px/1.4 ui-monospace,Consolas,monospace; }
#events li { padding-left:8px; border-left:1px solid #ddb96855; }
@media (max-width:1100px) { main { grid-template-columns:minmax(0,1fr); } .stage-shell { min-height:0; aspect-ratio:1000/620; } .control-panel { max-height:none; overflow:visible; } .settings-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .demo-group { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) { .site-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:10px 12px; } .brand strong { font-size:13px; } .brand small { font-size:8px; } #status { grid-column:1/-1; grid-row:2; text-align:left; font-size:11px; } .lobby-link { grid-column:2; grid-row:1; font-size:11px; } main { gap:12px; padding:12px; } .control-panel { padding:14px; } .intro h1 { font-size:23px; } .settings-grid,.demo-group { grid-template-columns:repeat(2,minmax(0,1fr)); } .stage-shell { border-radius:8px; } .mobile-seat-roster { display:block; min-width:0; overflow:hidden; border:1px solid #d7ba7e45; border-radius:10px; background:#10231a; } .mobile-seat-roster summary { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; color:var(--gold); cursor:pointer; font-size:12px; font-weight:750; } .mobile-seat-roster summary span { color:var(--muted); font-size:10px; font-weight:500; } .mobile-seat-track { display:flex; gap:8px; overflow-x:auto; padding:2px 10px 12px; scroll-snap-type:x mandatory; scrollbar-color:#9c7b44 #0d1e16; } .mobile-seat { display:flex; align-items:center; gap:7px; flex:0 0 142px; min-height:52px; padding:7px; border:1px solid #c2a56d65; border-radius:8px; background:#172d21; scroll-snap-align:start; } .roster-avatar { position:relative; display:grid; width:30px; height:30px; place-items:center; flex:none; overflow:hidden; border:1px solid #dcb979; border-radius:7px; background:#765731; color:#fff1d2; font:700 14px Georgia,serif; } .roster-photo { position:absolute; inset:0; display:none; width:100%; height:100%; object-fit:cover; } .roster-photo[src]:not([src=""]):not([data-failed="true"]) { display:block; } .mobile-seat strong,.mobile-seat small { display:block; white-space:nowrap; } .mobile-seat strong { font-size:11px; } .mobile-seat small { color:#d4be91; font-size:9px; } }
@media (max-width:370px) { .settings-grid { grid-template-columns:minmax(0,1fr); } }

[hidden] { display:none!important; }
.demo-selector { display:grid; gap:10px; }
.demo-selector h2 { margin-bottom:0; }
#demoPicker { border:1px solid #d7ba7e65; border-radius:8px; background:#091b15; }
#demoPicker > summary { padding:12px; cursor:pointer; color:var(--ink); font-weight:650; }
.demo-picker-content { display:grid; gap:10px; padding:0 10px 10px; }
#demoSearch { width:100%; min-height:40px; padding:8px; border:1px solid #d5c49a49; border-radius:6px; background:#132a20; color:var(--ink); font:inherit; }
.demo-selection-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }
.demo-selection-tools label { display:flex; align-items:center; gap:8px; }
.demo-selection-tools button { min-height:32px; padding:5px 8px; font-size:11px; }
.demo-choices { max-height:340px; overflow:auto; overscroll-behavior:contain; scrollbar-color:#8b7548 #091b15; }
.demo-choices fieldset { margin:0 0 8px; padding:0; border:0; min-width:0; }
.demo-choices legend { padding:6px 0; color:var(--gold); font-size:11px; font-weight:750; }
.demo-choices label { display:flex; align-items:center; gap:9px; min-height:44px; padding:6px; border-radius:5px; font-size:12px; cursor:pointer; }
.demo-choices label:has(input:checked) { background:#294536; }
.demo-choices label:hover { background:#1c3528; }
.demo-selector input[type="checkbox"] { flex:none; width:18px; height:18px; margin:0; accent-color:var(--gold); }
.demo-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#demoContinue { grid-column:1/-1; }
#demoSelectedNames { margin:0; overflow-wrap:anywhere; }
#demoSceneSettings { display:grid; gap:10px; }
#demoSceneSettings fieldset { min-width:0; margin:0; border:1px solid var(--line); border-radius:7px; padding:9px; display:grid; gap:8px; }
#demoSceneSettings label { display:grid; gap:4px; color:var(--muted); font-size:12px; }
#movementCatalogPreview,#legacyScenePreview { width:100%; min-width:0; }
#movementCatalogPreview { position:absolute; inset:0 auto auto 0; z-index:6; width:1000px; height:620px; pointer-events:none; }
#movementCatalogPreview .movement-preview-viewport { height:620px; overflow:visible; border-radius:0; background:transparent; }
#movementCatalogPreview .movement-preview-stage { top:10px; background:transparent; isolation:auto; }
#legacyScenePreview iframe { display:block; width:100%; aspect-ratio:1000/620; border:0; }
html[data-scene-preview="true"] body { min-height:0; }
html[data-scene-preview="true"] .site-header,
html[data-scene-preview="true"] .control-panel,
html[data-scene-preview="true"] .mobile-seat-roster { display:none!important; }
html[data-scene-preview="true"] main { display:block; padding:0; }
html[data-scene-preview="true"] .stage-shell { min-height:0; height:100dvh; aspect-ratio:auto; }