/* The bet studios share Operator Studio 14's grammar: black and white, 3px rules, hard shadows,
   monospace with no smoothing, icon-first square buttons, a numbered strip on top, lettered verbs below. */
:root{ --k:#000; --w:#fff; --g:#8a8a8a; --lg:#e9e9e9;
  --aA:#0033cc; --aB:#c8a800; --aC:#e60000; --aD:#000; --aE:#008a4e; --hi:var(--aA); }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background:var(--w); color:var(--k); font:13px/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace; display:flex; flex-direction:column;
  overflow:hidden; height:100vh; height:100dvh; -webkit-font-smoothing:none; -webkit-text-size-adjust:100%; }
button{ font:inherit; color:inherit; background:var(--w); border:0; border-radius:0; cursor:pointer; padding:0; }
button:focus-visible{ outline:3px solid var(--hi); outline-offset:-3px; }
svg{ display:block; }
.hidden{ display:none !important; }

/* bar */
#bar{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:8px 12px; padding-top:max(8px,env(safe-area-inset-top)); background:var(--k); color:var(--w); }
#bar .ind{ width:12px; height:12px; border:3px solid var(--w); flex:0 0 auto; }
#bar.live .ind{ background:var(--w); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.15} }
#bar .bet{ font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
#bar .bet b{ display:inline-block; min-width:26px; padding:0 4px; margin-right:6px; background:var(--w); color:var(--k); text-align:center; }
#bar .claim{ font-size:12px; opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#bar .sp{ flex:1 1 auto; }
#bar .clock{ font-size:12px; letter-spacing:.04em; white-space:nowrap; font-variant-numeric:tabular-nums; }
#bar .ic{ width:36px; height:36px; background:transparent; color:var(--w); border:2px solid var(--w); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
#bar .ic:hover,#bar .ic.on{ background:var(--w); color:var(--k); }
#bar .ic svg{ width:18px; height:18px; }
#bar a.ic{ text-decoration:none; }
@media (max-width:620px){ #bar .claim{ display:none; } }

/* numbered strip (films) */
#strip{ flex:0 0 auto; display:flex; gap:3px; padding:3px; background:var(--k); overflow-x:auto; scrollbar-width:none; }
#strip button{ flex:0 0 auto; min-width:52px; height:40px; background:var(--w); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:3px 5px; position:relative; }
#strip button .n{ font-weight:700; font-size:14px; line-height:1; }
#strip button .cov{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--lg); }
#strip button .cov i{ display:block; height:100%; background:var(--k); }
#strip button.on{ box-shadow:inset 0 0 0 3px var(--hi); }
#strip button .t{ font-size:9px; letter-spacing:.04em; max-width:88px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-transform:uppercase; }

/* stage */
#stage{ flex:1 1 auto; min-height:0; display:flex; background:var(--k); padding:0 3px; gap:3px; }
.pane{ background:var(--w); position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.pane > h2{ margin:0; flex:0 0 auto; padding:5px 9px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; border-bottom:3px solid var(--k); display:flex; gap:8px; align-items:center; }
.pane > h2 .tag{ margin-left:auto; font-weight:400; opacity:.6; letter-spacing:.04em; text-transform:none; }
.body{ flex:1 1 auto; min-height:0; overflow:hidden; position:relative; }
.grow{ flex:1 1 0; }

/* monitor: the film as seated at the playhead */
.mon{ background:var(--k); display:flex; align-items:center; justify-content:center; position:relative; flex:1 1 auto; min-height:0; }
.mon video,.mon img{ max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; image-rendering:auto; }
.mon .cap{ position:absolute; left:8px; right:8px; bottom:8px; color:var(--w); font-size:12px; text-shadow:0 0 3px #000,0 0 3px #000; }
.mon .none{ color:var(--g); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }

/* clip tile */
.tile{ position:relative; background:var(--k); border:3px solid var(--k); aspect-ratio:4/3; overflow:hidden; cursor:pointer; }
.tile video,.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile .v{ position:absolute; left:0; top:0; font-size:10px; font-weight:700; padding:1px 4px; background:var(--w); color:var(--k); }
.tile .v.KEEP{ background:var(--aE); color:var(--w); } .tile .v.MAYBE{ background:var(--aB); color:var(--k); } .tile .v.FLOOR{ background:var(--g); color:var(--w); }
.tile .nm{ position:absolute; left:0; right:0; bottom:0; font-size:10px; padding:2px 4px; background:rgba(0,0,0,.72); color:var(--w); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile.on{ border-color:var(--hi); box-shadow:0 0 0 3px var(--hi); }
.tile.seated::after{ content:''; position:absolute; right:4px; top:4px; width:10px; height:10px; background:var(--w); border:3px solid var(--k); }

/* words */
.wd{ display:inline-block; padding:1px 3px; margin:1px 0; cursor:pointer; border-bottom:3px solid transparent; }
.wd:hover{ background:var(--lg); }
.wd.now{ background:var(--k); color:var(--w); }
.wd.sel{ background:var(--hi); color:var(--w); }
.wd.seat{ border-bottom-color:var(--k); }
.wd.strike{ text-decoration:line-through; opacity:.45; }

/* tools row + log */
#tools{ flex:0 0 auto; display:flex; align-items:stretch; gap:8px; padding:6px 8px; border-top:3px solid var(--k); background:var(--w); flex-wrap:wrap; }
.tool-grp{ display:flex; border:2px solid var(--k); }
.tool-grp button{ min-width:38px; height:34px; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 8px; font-size:11px; letter-spacing:.04em; }
.tool-grp button + button{ border-left:2px solid var(--k); }
.tool-grp button.on{ background:var(--k); color:var(--w); }
.tool-grp button svg{ width:16px; height:16px; }
#log{ flex:1 1 200px; align-self:center; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#log b{ text-transform:uppercase; letter-spacing:.06em; }

/* lettered verbs */
#verbs{ flex:0 0 auto; display:grid; grid-template-columns:repeat(5,1fr); border-top:3px solid var(--k); padding-bottom:env(safe-area-inset-bottom,0px); }
#verbs button{ min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-left:3px solid var(--k); position:relative; }
#verbs button:first-child{ border-left:0; }
#verbs button .L{ font-weight:700; font-size:22px; line-height:1; border-bottom:3px solid currentColor; padding:0 2px; }
#verbs button .V{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
#verbs button[data-l="A"] .L{ color:var(--aA); } #verbs button[data-l="B"] .L{ color:var(--aB); } #verbs button[data-l="C"] .L{ color:var(--aC); } #verbs button[data-l="D"] .L{ color:var(--aD); } #verbs button[data-l="E"] .L{ color:var(--aE); }
#verbs button:hover{ background:var(--lg); }
#verbs button.fire{ background:var(--k); color:var(--w); }
#verbs button.fire .L{ color:var(--w); }
#verbs button:disabled{ opacity:.35; cursor:default; }
@media (max-width:560px){ #verbs button{ min-height:54px; } #verbs button .V{ font-size:9px; letter-spacing:.06em; } }

/* help sheet */
#help{ position:fixed; right:14px; top:60px; z-index:20; width:min(380px,calc(100% - 28px)); max-height:calc(100% - 80px); overflow:auto; background:var(--w); border:3px solid var(--k); box-shadow:6px 6px 0 var(--k); padding:12px 14px; font-size:12px; }
#help h3{ margin:0 0 6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
#help p{ margin:0 0 8px; }
#help dl{ margin:0; display:grid; grid-template-columns:max-content 1fr; gap:4px 10px; }
#help dt{ font-weight:700; }
#help dd{ margin:0; }
#help .inv{ border-top:2px solid var(--k); margin-top:10px; padding-top:8px; }

/* scrollable lists inside panes */
.scroll{ overflow:auto; height:100%; scrollbar-width:thin; }
.row{ display:flex; gap:6px; align-items:center; }
.mini{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--g); }
.chipk{ display:inline-block; font-size:10px; padding:0 4px; border:2px solid var(--k); margin-right:3px; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:760px){ #stage{ flex-direction:column; } #stage > .pane{ flex:1 1 auto !important; } #stage > #side,#stage > #right{ flex:0 0 42% !important; } #stage > #tpl{ flex:0 0 auto !important; } }
@media (prefers-reduced-motion:reduce){ #bar.live .ind{ animation:none; } }

/* the stake, in the bar */
#bar .stake{ font-size:11px; white-space:nowrap; letter-spacing:.04em; border:2px solid var(--w); padding:3px 7px; }
#bar .stake b{ font-size:13px; }
@media (max-width:760px){ #bar .stake{ display:none; } }

/* the reel: this bet's whole film */
#reel{ flex:0 0 auto; position:relative; height:26px; background:#1a1a1a; border-top:3px solid var(--k); border-bottom:0; cursor:pointer; overflow:hidden; }
#reel .fb,#screen .reel .fb{ position:absolute; top:0; bottom:0; border-left:1px solid #555; color:#777; font-size:9px; padding:1px 3px; z-index:1; pointer-events:none; }
#reel .rs,#screen .reel .rs{ position:absolute; top:3px; bottom:3px; background:#fff center/cover no-repeat; }
#reel .rs.m,#screen .reel .rs.m{ opacity:.45; }
#reel .rph,#screen .reel .rph{ position:absolute; top:0; bottom:0; width:0; border-left:3px solid var(--aB); z-index:2; }

/* the screening */
#screen{ position:fixed; inset:0; z-index:40; background:#000; color:#fff; display:flex; flex-direction:column; }
#screen .top{ display:flex; align-items:center; gap:10px; padding:8px 12px; padding-top:max(8px,env(safe-area-inset-top)); }
#screen .top b{ background:#fff; color:#000; padding:0 6px; }
#screen .top .ti{ letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
#screen .top .sp2{ flex:1 1 auto; }
#screen .top .ck{ font-size:12px; font-variant-numeric:tabular-nums; }
#screen .top button{ width:36px; height:36px; background:transparent; color:#fff; border:2px solid #fff; display:inline-flex; align-items:center; justify-content:center; }
#screen .top button:hover{ background:#fff; color:#000; }
#screen .scr{ flex:1 1 auto; min-height:0; display:flex; }
#screen .scr .mon .cap{ font-size:clamp(16px,2.2vw,26px); text-align:center; bottom:18px; }
#screen .reel{ flex:0 0 auto; position:relative; height:34px; background:#1a1a1a; cursor:pointer; margin-bottom:env(safe-area-inset-bottom,0px); }

/* the periodic table's colour on every clip: the frame is the sign's domain */
.tile{ border-color:var(--sg,var(--k)); }
.tile .sgn{ position:absolute; right:0; top:0; font-size:10px; font-weight:700; padding:1px 4px; background:var(--sg,#ddd); color:#111; border-left:2px solid #000; border-bottom:2px solid #000; }
.tile.saved .v::after{ content:' ★'; }
.tile.on{ border-color:var(--hi); }
#reel .rs,#screen .reel .rs{ box-shadow:inset 0 -5px 0 var(--sg,#fff); }
[data-flag]{ outline:3px solid var(--aB) !important; outline-offset:-3px; }
[data-mute]::before{ content:'✕♪'; position:absolute; left:2px; bottom:2px; z-index:3; font-size:9px; background:#000; color:#fff; padding:0 3px; }

/* the deck: words on top, the clips are the page (no scrolling, ever) */
.deck{ display:flex; flex-direction:column; height:100%; min-height:0; background:#000; }
.dtop{ flex:0 0 auto; display:flex; align-items:stretch; background:var(--w); border-bottom:3px solid var(--k); }
.dcap{ flex:1 1 auto; min-width:0; padding:5px 9px; font-size:14px; line-height:1.3; max-height:3.1em; overflow:hidden; }
.dcap b{ background:var(--k); color:var(--w); padding:0 2px; }
.dic{ flex:0 0 auto; min-width:40px; border-left:3px solid var(--k); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; padding:0 8px; }
.dic.off,.dic.on{ background:var(--k); color:var(--w); }
.dgrid{ flex:1 1 auto; min-height:0; display:grid; gap:3px; padding:3px; align-content:start; overflow:hidden; }
.dgrid .tile{ aspect-ratio:auto; height:100%; border-width:4px; }
.dgrid .tile[hidden]{ display:none; }
.dmain{ position:relative; background:#000; overflow:hidden; border:4px solid var(--sg,#222); display:flex; align-items:center; justify-content:center; height:100%; }
.dmain video,.dmain img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dmain.ghost video{ opacity:.8; }
.dmain .none{ color:#777; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.dmain .dsg{ position:absolute; left:0; bottom:0; background:var(--sg,#ddd); color:#111; font-size:11px; font-weight:700; padding:2px 7px; z-index:2; }
.dmain .dti{ position:absolute; left:0; top:0; max-width:75%; background:rgba(0,0,0,.7); color:#fff; font-size:11px; padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:2; }
.dmain .dpv{ position:absolute; right:0; top:0; background:var(--aC); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; letter-spacing:.08em; text-transform:uppercase; z-index:2; }
.dmain .dpv.m{ background:#fff; color:#000; }
.deck.nostrip .dgrid{ padding:0; }
#screen .scr .deck{ background:#000; } #screen .scr .dtop{ background:#000; color:#fff; border-color:#333; } #screen .scr .dic{ color:#fff; border-color:#333; }
#screen .scr .dcap{ font-size:clamp(16px,2.2vw,26px); text-align:center; max-height:none; }

/* resizable panes */
.gut{ flex:0 0 6px; background:var(--k); cursor:col-resize; touch-action:none; position:relative; margin:0 -3px; z-index:2; }
.gut:hover,.gut:active{ background:var(--hi); }
@media (max-width:760px){ .gut{ display:none; } }

/* slimmer chrome: the videos get the room */
#verbs button{ min-height:46px; flex-direction:row; gap:8px; }
#verbs button .L{ font-size:17px; }
#tools{ padding:4px 8px; }
.tool-grp button{ height:28px; }

/* right click */
#ctx{ position:fixed; z-index:60; min-width:190px; background:var(--w); border:3px solid var(--k); box-shadow:5px 5px 0 var(--k); display:flex; flex-direction:column; }
#ctx .ch{ padding:5px 9px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; background:var(--k); color:var(--w); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
#ctx button{ display:flex; justify-content:space-between; gap:14px; padding:7px 10px; font-size:12px; text-align:left; border-top:2px solid var(--lg); }
#ctx button:hover{ background:var(--k); color:var(--w); }
#ctx small{ color:var(--g); }

/* the EDL panel */
#bar .ic.wide{ width:auto; padding:0 8px; font-size:11px; font-weight:700; letter-spacing:.08em; }
#edlp{ position:fixed; right:14px; top:60px; z-index:30; width:min(520px,calc(100% - 28px)); background:var(--w); border:3px solid var(--k); box-shadow:6px 6px 0 var(--k); padding:12px 14px; font-size:12px; }
#edlp h3{ margin:0 0 6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
#edlp p{ margin:0 0 10px; }
#edlp .erow{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
#edlp button{ border:2px solid var(--k); padding:6px 10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
#edlp button:hover{ background:var(--k); color:var(--w); }
#edlp select{ font:12px ui-monospace,Menlo,monospace; border:2px solid var(--k); padding:5px; background:var(--w); }
#monHost{ min-width:0; min-height:0; }
#monHost:has(.deck.nostrip){ display:block !important; flex:0 0 auto; aspect-ratio:4/3; }

/* ---------- purer: no scrollbars, no badges; the clips carry only colour, a star, and dots ---------- */
*{ scrollbar-width:none; } *::-webkit-scrollbar{ display:none; }
#reel{ display:none; }
#strip{ overflow:hidden; }
#strip button{ flex:1 1 0; min-width:0; height:48px; padding:2px 4px 16px; }
#strip button .t{ max-width:100%; }
#strip button .mr{ position:absolute; left:0; right:0; bottom:0; height:14px; background:#222; overflow:hidden; }
#strip button .mr span{ position:absolute; top:0; bottom:0; background:#fff center/cover no-repeat; box-shadow:inset 0 -3px 0 var(--sg,#fff); }
#strip button .mr .mph{ position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--aB); display:none; }
#strip button.on .mr .mph{ display:block; }
#strip button .cov{ display:none; }
.tile{ border-width:4px; }
.tile .v,.tile .sgn,.tile .nm{ display:none; }
.tile .pips{ position:absolute; left:2px; bottom:2px; display:flex; gap:2px; z-index:2; }
.tile .pips i{ font-style:normal; width:13px; height:13px; background:#fff; color:#000; border:1px solid #000; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.tile.saved::after{ content:'★'; position:absolute; right:3px; top:0; color:#fff; font-size:16px; text-shadow:0 0 3px #000; z-index:2; }
.tile.seated{ outline:3px solid #fff; outline-offset:-7px; }
.tile.seated::after{ border:0; background:none; }
.tile.on{ border-color:#fff; box-shadow:0 0 0 3px var(--hi); z-index:1; }
.dmain.loose{ border-style:dashed; }
.dmain .star{ position:absolute; right:6px; top:2px; color:#fff; font-size:22px; text-shadow:0 0 4px #000; z-index:2; }
.cele{ animation:cele 1s ease-out; position:relative; }
.cele::before{ content:'★'; position:absolute; left:50%; top:50%; z-index:9; color:var(--cele); font-size:80px; line-height:1; transform:translate(-50%,-50%) scale(.2); animation:star 1s ease-out forwards; pointer-events:none; text-shadow:0 0 12px #000; }
@keyframes cele{ 0%{ box-shadow:0 0 0 0 var(--cele); } 30%{ box-shadow:0 0 0 10px var(--cele); } 100%{ box-shadow:0 0 0 0 transparent; } }
@keyframes star{ 0%{ transform:translate(-50%,-50%) scale(.2); opacity:1; } 60%{ transform:translate(-50%,-50%) scale(1.4); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1.8); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .cele,.cele::before{ animation:none; } }
body.dragging [data-seat],body.dragging [data-span],body.dragging [data-tl0],body.dragging .dmain{ outline:2px dashed var(--aB); outline-offset:-2px; }
.dropok{ outline:4px solid var(--aB) !important; outline-offset:-4px; background-color:rgba(200,168,0,.18); }
#own{ border-color:var(--g); }
#own button{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#444; }
#own button b{ color:var(--k); }
#log{ color:#555; font-size:11px; }
#verbs button .V{ font-size:11px; letter-spacing:.14em; }

/* ---------- tighter: no pane headers, no caption row; one dense state line; everything a clip ---------- */
.pane > h2{ display:none; }
.dtop,.dcap{ display:none; }
.deck{ position:relative; }
.dctl{ position:absolute; left:9px; top:9px; z-index:6; display:flex; gap:3px; }
.dctl .dic{ min-width:30px; height:24px; border:2px solid #000; background:#fff; color:#000; font-size:11px; padding:0 5px; }
.dctl .dic.off,.dctl .dic.on{ background:#000; color:#fff; border-color:#fff; }
#bar{ padding:4px 10px; gap:8px; }
#bar .claim,#bar .stake{ display:none; }
#bar .state{ display:flex; gap:0; min-width:0; overflow:hidden; font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
#bar .state i{ font-style:normal; opacity:.55; margin:0 4px 0 10px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; align-self:center; }
#bar .state b{ font-weight:700; }
#bar .ic{ width:30px; height:30px; }
#strip button{ height:38px; padding:2px 4px 7px; background:#333 center/cover no-repeat; color:#fff; border:0; box-shadow:inset 0 -5px 0 var(--sg,#333); }
#strip button:not(.made){ filter:grayscale(1) brightness(.55); }
#strip button .n{ font-size:13px; text-shadow:0 0 3px #000,0 0 3px #000; }
#strip button .t{ display:none; }
#strip button .mr{ height:5px; background:rgba(0,0,0,.6); }
#strip button .mr span{ box-shadow:none; }
#strip button.on{ box-shadow:inset 0 0 0 3px var(--aB),inset 0 -5px 0 var(--sg,#333); filter:none; }
.brick{ display:inline-block; vertical-align:middle; width:44px; height:33px; margin-right:6px; border:2px dashed #aaa; background:#f3f3f3; position:relative; overflow:hidden; cursor:pointer; flex:0 0 auto; }
.brick.full{ border:3px solid var(--sg,#000); background:#000; }
.brick img{ width:100%; height:100%; object-fit:cover; display:block; }
#screen .scap{ flex:0 0 auto; padding:10px 16px 14px; font-size:clamp(16px,2.2vw,26px); text-align:center; color:#ddd; min-height:2.8em; }
#screen .scap b{ color:#fff; background:#333; padding:0 3px; }
.mw{ position:relative; display:block; width:100%; height:100%; }
.mw img,.mw video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mw video{ opacity:0; transition:opacity .35s; } .mw video.on{ opacity:1; }
.dmain img.still{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dmain video{ opacity:0; transition:opacity .35s; } .dmain video.on{ opacity:1; }