@font-face{font-family:Theater;src:url(./assets/studio-pixel.ttf) format("truetype");font-display:swap}
:root{color-scheme:dark;--ink:#141831;--wall:#15182f;--paper:#fff0cf;--mist:#cdd0e7;--blue:#b4c7ff;--line:#484c78;--pink:#ffb0ce;--mint:#80efda;--gold:#ffd780;--pad:clamp(8px,3vw,23px);--pixel:Theater,"Courier New",monospace;--mono:"Courier New",monospace;--body:system-ui,sans-serif}
*{box-sizing:border-box}
html{min-width:280px;background:#0e1125}
body{margin:0;background:radial-gradient(ellipse at 48% 0%,#232545 0,transparent 53%),#0e1125;color:var(--paper);font:500 14px/1.42 var(--body)}
h1,h2,h3,p,figure{margin:0}
h1,h2{font-family:var(--pixel);font-weight:400;line-height:1.1}
h2{font-size:clamp(1.3rem,5vw,1.95rem)}
h3{font-size:1rem;line-height:1.25}
a{color:inherit;text-decoration:none}
img{display:block;image-rendering:pixelated}
button{appearance:none;border:1px solid #5c608d;border-radius:0;min-width:44px;min-height:44px;padding:5px 9px;background:#272b4a;color:var(--paper);font:750 .85rem/1.16 var(--body);cursor:pointer;touch-action:manipulation}
button:disabled{color:#aaaec7;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #e3fff8;outline-offset:2px}
button:active{filter:brightness(1.23)}
svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
[hidden]{display:none!important}
.marquee,main,footer{width:min(100%,1050px);margin-inline:auto;padding-inline:max(var(--pad),env(safe-area-inset-left)) max(var(--pad),env(safe-area-inset-right))}
.marquee{min-height:calc(46px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;gap:6px;font:400 clamp(.67rem,2.6vw,.83rem)/1.15 var(--pixel);color:#fff1d4}
.marquee a{min-height:44px;display:flex;align-items:center;gap:6px}
.marquee img{width:22px;height:22px}
.site-tag{display:none;color:var(--mist)}
.doors,.chrome>span{display:inline-flex;align-items:center;gap:7px}
.doors{color:var(--mint);white-space:nowrap;font-size:.65rem}
.doors b,.chrome b{display:block;width:6px;height:6px;flex:none;background:#86e9dd;box-shadow:0 0 8px #68fcd2ac}
#cabinet{--height:calc(100dvh - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:grid;grid-template-rows:44px minmax(0,1fr) 46px;min-width:0;height:min(var(--height),720px);min-height:290px;border:2px solid #65628b;box-shadow:0 6px #090c1f,0 19px 46px #07081895;position:relative;isolation:isolate;background:var(--wall)}
#cabinet[data-page=title]{height:auto;min-height:0}
.chrome{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #53577f;background:#222641;padding-left:11px;font:700 .76rem/1 var(--mono);text-transform:uppercase;letter-spacing:.09em}
#expand{height:44px;display:grid;place-items:center;border:0;border-left:1px solid #53577f;background:#2a2e4c}
.screen{position:relative;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:#62618d #171a32;background:var(--wall)}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#222641}
.tools button{background:transparent;border:0;border-top:1px solid #53577f;border-right:1px solid #404567;padding-inline:3px;min-width:0}
.tools button:last-child{border-right:0}
.lobby{height:clamp(185px,70vw,min(470px,52dvh));isolation:isolate;overflow:hidden;position:relative;background:#191b3d}
.lobby>img,.lobby canvas,.lobby::after{position:absolute;inset:0;width:100%;height:100%}
.lobby>img{object-fit:cover;object-position:53% 53%}
.lobby canvas,.stage canvas{image-rendering:pixelated;pointer-events:none}
.lobby::after{content:"";background:linear-gradient(0deg,#0a102ae8,transparent 71%),linear-gradient(90deg,#090e27a6,transparent 72%);pointer-events:none}
.lobby-copy{position:absolute;z-index:1;left:clamp(11px,4vw,38px);bottom:clamp(10px,4vw,31px)}
.ticket{display:inline-block;font:800 .71rem/1.15 var(--mono);color:var(--gold);padding:4px 7px;border:1px solid #ac8b69;background:#24233e;letter-spacing:.045em;text-transform:uppercase;justify-self:start}
h1{font-size:clamp(2rem,8.8vw,5.5rem);margin:8px 0 4px;color:#fff0cf;text-shadow:3px 3px #1a1642}
h1 span{color:#b7f4e7}
.lobby-copy p{font-weight:670;color:#fff4dc;font-size:clamp(.83rem,2.6vw,1.1rem)}
.title-actions{display:grid;gap:5px;padding:7px;background:#232643;border-top:3px solid #7775a3}
.main-actions,.side-actions,.actions{display:flex;gap:5px}
.main-actions button,.side-actions button,.actions button{flex:1}
.primary{background:var(--gold);color:#201b34;border-color:#ffe7ab;box-shadow:inset 0 -3px #bd925a;font-weight:850}
.secondary{background:#2a2e4f}
.side-actions span{color:#a8f4e6;margin-left:3px;font-family:var(--mono)}
.posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:14px 0 7px}
.posters figure{background:#1a1e37;border:1px solid #45496e}
.posters img{width:100%;height:auto;aspect-ratio:2.05;object-fit:cover}
.posters figcaption{padding:6px 3px;font-size:.75rem;text-align:center}
footer{display:flex;justify-content:space-between;gap:8px;padding-top:7px;padding-bottom:max(12px,env(safe-area-inset-bottom));font:700 .74rem/1.25 var(--mono);color:#c4c8e3}
.page{width:min(100%,840px);margin:0 auto;padding:clamp(9px,3vw,22px);display:grid;gap:11px;align-content:start}
.page-head,.intro-copy,.result-body{display:grid;gap:6px}
.page-head p,.intro-copy p,.result-body p{color:#edebfd}
.mode-list,.rehearsals,.stamp-grid{display:grid;gap:7px}
.mode-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:7px;padding:6px;background:#242845;border:1px solid #575b87}
.mode-card img{width:58px;height:60px;object-fit:cover}
.mode-card p{font-size:.8rem}
.mode-card small{display:block;color:#c7cdea;font-size:.72rem}
.mode-card .locked{max-width:86px}
.back{justify-self:start}
.poster,.rehearsals>div,.stamp{background:linear-gradient(90deg,#10132bdf,#10132b7d),var(--scene) center 50%/cover;border:1px solid #585b80;border-left:4px solid var(--room);image-rendering:pixelated}
.poster{display:grid;align-content:end;gap:6px;min-height:clamp(95px,27dvh,238px);padding:11px;color:#fff4df}
.intro-copy p strong,.result-body p strong,.page-head p strong{color:var(--gold)}
.intro-copy button{margin-top:3px}
.rehearsals>div{padding:7px;display:flex;align-items:center;gap:6px}
.rehearsals h3{flex:1}
.stamp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.stamp{display:grid;gap:2px;align-content:end;min-height:65px;padding:6px;border-left-color:#6a6986}
.stamp span{color:#d8d7ef;font-size:.77rem}
.stamp.earned{border-left-color:var(--gold)}
.receipt-lines{display:grid;gap:1px;border:1px solid #62678d;background:#62678d}
.receipt-lines>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:8px;background:#242844}
.receipt-lines small{color:var(--mist);font-size:.75rem}
.receipt-lines strong{color:var(--mint);text-align:right;font-family:var(--mono)}
.stamp-message{padding:7px 8px;background:#2c3d4e;border-left:3px solid var(--mint);color:#e2fff4;font-weight:670}
.live{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:100%;height:100%;overflow:hidden}
.conductor{padding:7px 9px;background:#1e2340;border-bottom:1px solid #646585;display:grid;gap:4px;min-width:0}
.performance-head,.live-readout{display:flex;justify-content:space-between;align-items:center;gap:4px;font:700 .75rem/1.1 var(--mono);color:var(--room)}
.live-readout{color:#eee5ff}
#chain{color:var(--gold)}
.cue-box{display:grid;gap:2px;padding:5px 7px 4px;border:1px solid #575f8b;background:#151a34}
#cue-name{color:var(--cue,#f4e6ff);font:400 clamp(.95rem,4vw,1.3rem)/1.14 var(--pixel);min-height:1.08em}
#cue-sub{color:#e6e4fa;font-size:.74rem;min-height:1.25em}
.cue-strip{display:flex;gap:4px;min-height:22px}
.cue-strip:empty{display:none}
.cue-strip span{min-width:22px;display:grid;place-items:center;font:700 .88rem/1 var(--body);padding:2px 3px;color:var(--cue);background:#24294b;border:1px solid #50557c}
.cue-strip span:first-child{border-color:var(--cue);background:#313658}
.stage{position:relative;isolation:isolate;min-height:142px;background:#13152e var(--scene) center center/cover no-repeat;overflow:hidden}
.stage canvas,.stage-shade,.rim,#stage-targets{position:absolute;inset:0;width:100%;height:100%}
.stage-shade{z-index:-1;background:linear-gradient(0deg,#141628c2,transparent 38%),#100b2a1c;pointer-events:none}
.stage canvas{z-index:1}
.rim{pointer-events:none;border:2px solid transparent;z-index:3}
.stage.open .rim{border-color:#fff1e4;box-shadow:inset 0 0 16px #c9d9fa42}
.stage.waiting .rim{border-color:var(--room);opacity:.58}
.stage.rest .rim{border-style:dashed;border-color:#bcb9ed;opacity:.75}
#stage-targets{z-index:2;pointer-events:none}
.bubble{--voice:var(--mint);position:absolute;left:var(--x,50%);top:var(--y,52%);transform:translate(-50%,-50%);width:clamp(50px,16vw,82px);height:clamp(50px,16vw,82px);padding:0;border:0;background:none;display:grid;place-items:center;pointer-events:auto;touch-action:none}
.bubble img{width:100%;height:100%;pointer-events:none}
.bubble span{position:absolute;bottom:1px;right:0;border:1px solid var(--voice);color:#fff0d6;background:#191933;min-width:15px;font:700 .67rem/1.05 var(--mono);padding:1px;text-align:center;pointer-events:none}
.bubble.voice-rose{--voice:var(--pink)}.bubble.voice-gold{--voice:var(--gold)}
.bubble.ghost{width:49px;height:49px;opacity:.85}
.bubble.popped img,.bubble.popped span{opacity:.1}
.stage.open .bubble:not(.ghost):not(.popped) img{filter:drop-shadow(0 0 3px #fffeeb)}
.feedback{position:absolute;bottom:5px;left:50%;width:max-content;max-width:92%;transform:translateX(-50%);padding:3px 5px;text-align:center;background:#11162ded;color:#fff1d5;z-index:3;font:700 .75rem/1.18 var(--mono);pointer-events:none}
dialog{position:fixed;inset:0;width:min(91%,435px);max-height:calc(100dvh - max(11px,env(safe-area-inset-top)) - max(11px,env(safe-area-inset-bottom)));padding:0;background:#222741;color:var(--paper);border:2px solid #8987ad;overscroll-behavior:contain}
dialog::backdrop{background:#090e23bd}
#dialog-body{display:grid;gap:8px;padding:12px}
.dialog-help{max-height:calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;display:grid;gap:7px}
.volume-row{display:flex;align-items:center;gap:8px;min-height:44px}.volume-row input{width:100%;height:44px;accent-color:var(--gold)}
.storage-warning{color:var(--gold);padding:6px}
body.expanded{overflow:hidden}
#cabinet.expanded,#cabinet:fullscreen{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border:0;z-index:5}
#cabinet.expanded[data-page=title],#cabinet:fullscreen[data-page=title]{height:100dvh}
#cabinet.expanded .title-shell,#cabinet:fullscreen .title-shell{width:min(100%,950px);height:100%;margin:auto;display:grid;grid-template-rows:minmax(0,1fr) auto}
#cabinet.expanded .lobby,#cabinet:fullscreen .lobby{height:100%}
@media(min-width:485px){
 .site-tag{display:inline}
 .title-actions{grid-template-columns:1.25fr 1fr}
 .posters figcaption{font-size:.87rem}
 .stamp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:680px),(orientation:landscape) and (min-width:460px){
 .live{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(142px,30%) minmax(0,1fr)}
 .conductor{grid-template-rows:auto minmax(0,1fr) auto;align-content:center;align-items:center;border-right:1px solid #646585;border-bottom:0}
 .stage{min-height:0}
 .mode-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rehearsals{grid-template-columns:repeat(3,minmax(0,1fr))}
 .rehearsals>div{flex-wrap:wrap}.rehearsals h3{flex:1 0 100%}
}
@media(orientation:landscape) and (max-height:500px){
 :root{--pad:8px}
 .marquee{min-height:calc(44px + env(safe-area-inset-top))}
 #cabinet{--height:calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0}
 #cabinet[data-page=title]{height:var(--height)}
 .title-shell{height:100%;display:grid;grid-template-columns:minmax(0,1.66fr) minmax(0,1fr)}
 #cabinet.expanded .title-shell,#cabinet:fullscreen .title-shell{grid-template-rows:minmax(0,1fr)}
 .lobby{height:100%}
 .lobby-copy{left:10px;bottom:8px}
 .lobby-copy p{font-size:.77rem}
 h1{font-size:clamp(1.38rem,7dvh,2.55rem);margin:4px 0}
 h2{font-size:1.15rem}
 .ticket{font-size:.63rem;padding:3px 4px}
 .title-actions{grid-template-columns:1fr;align-content:center;border-left:3px solid #7775a3;border-top:0;padding:4px}
 .title-actions button{padding-inline:4px;font-size:.76rem}
 .page{padding:5px 7px;gap:5px}
 .poster{min-height:52px;padding:5px 7px;gap:2px}
 .intro-copy,.result-body{gap:4px}
 .conductor{padding:4px 5px}
 .performance-head,.live-readout{font-size:.67rem}
 .cue-box{padding:4px 5px}
 .bubble{width:clamp(46px,18dvh,68px);height:clamp(46px,18dvh,68px)}
 .bubble.ghost{width:44px;height:44px}
 .feedback{font-size:.67rem;bottom:2px}
 .receipt-lines>div{padding:3px 6px}
}
.stage{image-rendering:pixelated}

@media(orientation:landscape) and (max-height:385px) and (min-width:460px){
 .intro-page,.result-page{grid-template-columns:minmax(0,39fr) minmax(0,61fr);align-items:stretch;gap:8px}
 .intro-page .poster,.result-page .poster{align-content:end;min-height:100px}
 .intro-copy,.result-body{align-content:center}
 .receipt-page{grid-template-columns:minmax(0,44fr) minmax(0,56fr);grid-auto-flow:dense}
 .receipt-page .stamp-message{font-size:.75rem;padding:4px 6px}
}
.finale-copy,.finale-record{display:grid;gap:7px;align-content:start;min-width:0}
@media(orientation:landscape) and (max-height:385px) and (min-width:460px){
 .finale-copy,.finale-record{gap:4px}
}
@media(orientation:portrait) and (min-height:680px){
 .receipt-page::after{content:"";display:block;height:clamp(106px,22dvh,192px);border:1px solid #665d81;background:linear-gradient(90deg,#1b163c44,#1b163c00),url(./assets/booth.png) center 54%/cover;image-rendering:pixelated}
}
body.playing{overflow:hidden} body.playing .posters,body.playing footer{display:none}
.feedback:empty{display:none}
@media(orientation:portrait) and (max-height:540px){.rehearsal-page{gap:7px}.rehearsals>div{padding:5px}}