/* Layout: a stadium scoreboard. Flip-style digit tiles up top, a baseball-style line score of moves by round below. */
:root{color-scheme:dark;
  --bg:#2B1D14;--well:#170F0A;--tile:#21160F;--seam:#0D0805;--rule:#4A3628;
  --ink:#F3EEE5;--ink2:#CDBFAB;--lime:#A9CF4A;--amber:#E7B34E;--red:#E0533D;
  --display:"Bricolage Grotesque",Impact,sans-serif;--body:Literata,Georgia,serif;--mono:"DM Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;overflow:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px}
body.clean{padding:0}
#wrap{flex:1;min-height:0;position:relative;overflow:hidden}
#stage{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--bg);display:grid;gap:22px;padding:30px 36px}

/* wide 1920x1080 */
#stage.wide{width:1920px;height:1080px;grid-template-columns:720px 1fr;grid-template-rows:64px 520px 1fr;
  grid-template-areas:"top top" "photo now" "line total"}
/* vertical 1080x1920 */
#stage.tall{width:1080px;height:1920px;padding:150px 36px 190px;grid-template-columns:1fr;grid-template-rows:64px 600px auto 1fr auto;
  grid-template-areas:"top" "photo" "now" "line" "total"}
/* camera on: an empty 16:9 slot for the camera source in OBS. Wide slot is 900x506 at x36 y116; tall is 1008x567 at x36 y236 */
#stage.wide.cam{grid-template-columns:900px 400px 1fr;grid-template-rows:64px 506px 1fr;
  grid-template-areas:"top top top" "cam now now" "line photo total"}
#stage.tall.cam{grid-template-columns:340px 1fr;grid-template-rows:64px 567px 390px 1fr auto;
  grid-template-areas:"top top" "cam cam" "photo now" "line line" "total total"}
.camslot{grid-area:cam;display:none;align-items:center;justify-content:center;background:var(--seam);border:1px solid var(--rule);
  font:500 22px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
#stage.cam .camslot{display:flex}
#stage.cam #name{font-size:68px}
#stage.cam #sub{font-size:28px}
#stage.cam .tiles{font-size:84px}
#stage.cam #clockWell.hms .tiles{font-size:64px}
#stage.cam #totalTiles{font-size:84px}
#stage.cam .goal b{font-size:40px}
#stage.cam #next{font-size:22px}
#stage.tall.cam #name{font-size:56px}
#stage.tall.cam .tiles{font-size:68px}
#stage.tall.cam #clockWell.hms .tiles{font-size:46px}
#stage.tall.cam #totalTiles{font-size:76px}
#stage.tall.cam .line td{font-size:30px}
#stage.tall.cam .line td:first-child{font-size:24px}

.top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:3px double var(--ink);padding-bottom:14px;
  font:500 26px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.top b{font-weight:500;color:var(--lime)}
.top .right{display:flex;align-items:center;gap:24px}
#badge{padding:9px 14px 8px;background:var(--well);border:1px solid var(--rule);color:var(--ink2)}
#badge.on{background:var(--red);border-color:var(--red);color:#fff}
#stage.tall .top{font-size:22px}

.photo{grid-area:photo;background:var(--well);border:1px solid var(--rule);min-height:0;position:relative;overflow:hidden}
.layer{position:absolute;inset:0;visibility:hidden}
.layer.on{visibility:visible}
.layer img,.layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.layer video{visibility:hidden}
.layer.on video.ready{visibility:visible}
.layer.on.clip img{visibility:hidden}
#stage.tall .photo{justify-self:stretch}

.now{grid-area:now;display:flex;flex-direction:column;gap:14px;min-width:0}
#phase{font:500 28px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
#phase.rest{color:var(--amber)}
#phase.switch{color:var(--ink);background:var(--red);align-self:flex-start;padding:8px 12px}
#name{margin:0;font:800 104px/.9 var(--display);letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
#sub{margin:0;font:italic 400 36px/1.2 var(--body);color:var(--ink2)}
#stage.tall #name{font-size:88px}
.wells{margin-top:auto;display:grid;grid-template-columns:auto auto 1fr;gap:18px}
.well{background:var(--well);border:1px solid var(--rule);padding:14px 18px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.well>label,.lab{font:500 22px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.tiles{display:flex;align-items:center;gap:6px;font:800 124px/1 var(--display);color:var(--ink)}
.tiles i{font-style:normal;position:relative;display:flex;align-items:center;justify-content:center;width:.68em;height:1.14em;background:var(--tile);border-radius:6px;overflow:hidden}
.tiles i::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--seam)}
.tiles u{text-decoration:none;width:.28em;text-align:center}
.tiles small{font:500 .3em/1 var(--mono);color:var(--ink2);padding:0 8px 0 4px;letter-spacing:.06em}
#clockWell .tiles{color:var(--lime)}
#clockWell.rest .tiles{color:var(--amber)}
#clockWell.idle .tiles{color:var(--ink)}
#clockWell{align-items:flex-start}
#clockWell.hms .tiles{font-size:92px;gap:4px}
#stage.tall .tiles{font-size:108px}

.line{grid-area:line;background:var(--well);border:1px solid var(--rule);padding:6px 22px 8px;min-height:0}
.line table{width:100%;height:100%;border-collapse:collapse;table-layout:fixed}
.line th{font:500 20px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);text-align:center;padding:10px 0}
.line th:first-child,.line td:first-child{text-align:left;width:55%}
.line td{border-top:1px solid var(--rule);font:800 38px/1 var(--display);text-align:center;font-variant-numeric:tabular-nums;color:var(--ink);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.line td:first-child{font-size:30px;overflow:hidden}
.line td.empty{color:var(--rule)}
.line td.cur{background:var(--lime);color:var(--seam)}
.line td.sum{color:var(--lime)}
.line tr.active td:first-child{color:var(--lime)}

.total{grid-area:total;background:var(--well);border:1px solid var(--rule);padding:18px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.total .row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
#totalTiles{font-size:112px}
.goal{font:500 22px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);text-align:right;white-space:nowrap}
.goal b{display:block;font:800 52px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.bar{height:14px;background:var(--tile);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--lime);transition:width .4s}
#next{margin-top:auto;font:500 32px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
#next b{font-weight:500;color:var(--ink)}
#stage.tall #totalTiles{font-size:96px}

/* operator controls: never part of what viewers see once hidden */
#controls{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;font:500 13px/1.2 var(--mono);color:var(--ink2)}
#controls button,#controls select,#controls input{font:500 14px/1 var(--mono);color:var(--ink);background:var(--well);border:1px solid var(--rule);padding:11px 12px;border-radius:4px;min-height:42px}
#controls button{cursor:pointer}
#controls button:hover:not(:disabled){border-color:var(--ink2)}
#controls button:disabled{opacity:.4;cursor:default}
#reset{min-width:76px}
#main{background:var(--lime)!important;border-color:var(--lime)!important;color:var(--seam)!important;min-width:170px}
#controls :focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#controls label{display:inline-flex;align-items:center;gap:6px}
#controls .sep{flex:1 1 12px}
#help{flex-basis:100%;margin:0;color:var(--ink2);font:500 12px/1.4 var(--mono)}
@media (max-width:700px){#help{display:none}#main{flex:1 1 100%}}
body.mirror #controls>:not(.keep){display:none}

/* Hosting modes. The same panels trade places, so the clip keeps playing through a switch. */
#stage.cam.mode-ai .photo{grid-area:cam}
#stage.cam.mode-ai .camslot{grid-area:photo}
.camslot{position:relative;overflow:hidden}
#camVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;visibility:hidden}
#camVideo.on{visibility:visible}
#aiCard{display:none;flex-direction:column;align-items:center;gap:16px;text-align:center}
#stage.mode-ai #aiCard{display:flex}
#aiCard b{font:800 56px/1 var(--display);letter-spacing:-.02em;color:var(--ink);text-transform:uppercase}
#aiCard small{font:500 20px/1.2 var(--mono);letter-spacing:.06em;text-transform:none;color:var(--ink2)}
.bars{display:flex;align-items:flex-end;gap:7px;height:48px}
.bars i{width:11px;height:12px;background:var(--rule)}
.talking .bars i{background:var(--lime);animation:bar .7s ease-in-out infinite alternate}
.talking .bars i:nth-child(2){animation-delay:.15s}.talking .bars i:nth-child(3){animation-delay:.3s}.talking .bars i:nth-child(4){animation-delay:.45s}
@keyframes bar{to{height:48px}}
@media (prefers-reduced-motion:reduce){.talking .bars i{animation:none;height:30px}}
#camTag{position:absolute;left:0;top:0;background:var(--lime);color:var(--seam);padding:9px 12px;font:500 22px/1 var(--mono);letter-spacing:.08em}
[hidden]{display:none!important}

/* Voice-only: no camera window at all. The exercise video takes the whole left side at its full 4:3 shape. */
#stage.wide.voice{grid-template-columns:1180px 1fr;grid-template-rows:64px auto 1fr auto;grid-template-areas:"top top" "photo now" "photo line" "photo total"}
#stage.voice .camslot{display:none}
#stage.voice #name{font-size:68px}
#stage.voice #sub{font-size:28px}
#stage.voice .now{gap:10px}
#stage.voice .wells{margin-top:10px;gap:12px}
#stage.voice .well{padding:10px 12px 12px}
#stage.voice .tiles{font-size:72px}
#stage.voice #clockWell.hms .tiles{font-size:44px}
#stage.voice .line td{font-size:30px}
#stage.voice .line td:first-child{font-size:23px;width:50%}
#stage.voice .line th:first-child{width:50%}
#stage.voice #totalTiles{font-size:72px}
#stage.voice .goal b{font-size:40px}
#stage.voice #next{font-size:22px;margin-top:0}
#stage.voice .total{gap:10px;padding:14px 18px}