@font-face{font-family:"Press Start 2P";src:url("assets/fonts/press-start-2p.woff2") format("woff2");font-display:swap;font-weight:400}
@font-face{font-family:VT323;src:url("assets/fonts/vt323.woff2") format("woff2");font-display:swap;font-weight:400}
:root{color-scheme:dark;--navy:#0b1020;--panel:#151a24;--paper:#f2f2e8;--cream:#e8ddbf;--amber:#ffd15c;--green:#7cff6b;--red:#ff6b6b;--muted:#bac5ce;--line:#536176;--pixel:"Press Start 2P",monospace;--body:VT323,"Courier New",monospace}
*{box-sizing:border-box}body{margin:0;background:var(--navy);color:var(--paper);font:24px/1.3 var(--body);-webkit-font-smoothing:antialiased}
button{font:inherit;min-height:44px;padding:10px 18px;border:2px solid var(--amber);background:var(--amber);color:var(--navy);cursor:pointer;box-shadow:3px 3px 0 #000;border-radius:0}button:hover{filter:brightness(1.12)}button.secondary{color:var(--paper);background:var(--panel);border-color:var(--line)}button:disabled{opacity:.5;cursor:not-allowed}
a{color:var(--amber);text-underline-offset:4px}:focus-visible{outline:3px solid var(--green);outline-offset:4px}[hidden]{display:none!important}
h1{font:clamp(23px,3vw,40px)/1.5 var(--pixel);font-weight:400;text-wrap:balance;margin:12px 0 22px}h2{font:clamp(15px,1.4vw,20px)/1.6 var(--pixel);font-weight:400;margin:0 0 8px}p{margin:10px 0;text-wrap:pretty}strong,b{font-weight:400}.kicker{font-size:22px;color:var(--amber);margin:0 0 8px}
.masthead{max-width:1320px;margin:auto;padding:18px 24px 14px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brands{display:flex;align-items:center;gap:14px;color:var(--paper);font-size:22px}.brands img{display:block;height:44px;width:auto}.brands .logo-jaring{height:48px}.brands .logo-orn{margin-left:10px}
.support{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:14px;color:var(--paper);font-size:20px}.support img{display:block;height:40px;width:auto;max-width:100%}
.lang{min-height:40px;padding:4px 12px;font-size:20px;box-shadow:none}.lang span{color:var(--muted)}html[lang=id] .lang [data-l=id],html[lang=en] .lang [data-l=en]{color:var(--amber)}
main{max-width:1320px;padding:0 24px;margin:auto}
.opening-scene{min-height:max(460px,calc(100dvh - 190px));background:url("assets/story/hero-tangan.webp") 70% center/cover;display:flex;align-items:center;border:3px solid var(--line);padding:32px}.opening-scene>div{background:rgba(11,16,32,.9);padding:24px;max-width:800px}.opening-scene p{font-size:26px;color:var(--cream)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.start-note{color:var(--muted);font-size:21px}
.adil{display:block;width:100%;height:auto;image-rendering:pixelated;align-self:end}
.brief-layout{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:end;margin:18px 0}
.dialog-box{border:3px solid var(--cream);background:var(--panel);box-shadow:6px 6px 0 #000;padding:24px;min-width:0}
#brief-box{cursor:pointer}#brief-text .ghost{color:transparent}#end-title:focus{outline:none}#brief-text{white-space:pre-line;font-size:26px;line-height:1.35;max-width:70ch}
#brief-media{margin:14px 0 0}#brief-media img{display:block;max-width:100%;max-height:34svh;border:2px solid var(--line)}#brief-media figcaption{font-size:19px;color:var(--muted);margin-top:4px}
.brief-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;color:var(--muted);font-size:20px}.brief-nav>div{display:flex;gap:10px}
.speaker{font:12px/1.8 var(--pixel);color:var(--green);margin:0 0 12px}.speaker span{font:20px/1.4 var(--body);color:var(--muted)}.dialog-small{font-size:20px;color:var(--muted)}#setup-status{color:var(--amber);margin:12px 0 0}
.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px 0 10px}.toolbar>span{font-size:20px;color:var(--muted)}.toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.toolbar button{font-size:21px;padding:6px 14px}
.stage{position:relative;background:var(--panel);border:3px solid var(--line);isolation:isolate}#world{width:100%;display:block;aspect-ratio:16/9;touch-action:none;outline:none}
.stage-head{position:absolute;inset:14px 16px auto;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none}
#chapter{font:11px/1.6 var(--pixel);padding:10px 12px;background:var(--navy);max-width:45%}
.hud{display:flex;gap:8px;align-items:stretch}.hud>span{background:var(--navy);padding:6px 12px;font-size:24px;display:flex;align-items:center;font-variant-numeric:tabular-nums}
#timer{font:18px var(--pixel);color:var(--amber);min-width:6ch;justify-content:center}#timer[data-low="true"]{color:var(--red);animation:blink .6s steps(2) infinite}#count{color:var(--green)}.hud-score{color:var(--muted)}#score{color:var(--amber);margin-left:8px;font:18px var(--pixel)}
@keyframes blink{50%{opacity:.4}}
.play-area{display:grid;gap:16px;align-items:start}
.camera-preview{background:var(--panel);border:2px solid var(--green);padding:8px}.cam-frame{position:relative}.cam-frame video,.cam-frame canvas{display:block;width:100%;aspect-ratio:4/3}.cam-frame video{transform:scaleX(-1);opacity:.55}.cam-frame canvas{position:absolute;inset:0}.camera-preview p{font-size:18px;line-height:1.25;color:var(--green);margin:8px 0 0}
#curtain{position:absolute;inset:0;background:rgba(5,7,15,.9);display:flex;align-items:center;justify-content:center;padding:24px;z-index:10}.receipt-layout{display:grid;grid-template-columns:150px minmax(0,700px);align-items:end;gap:20px;max-height:100%;overflow:auto;padding:8px}#curtain h2{font-size:17px}#curtain-copy{font-size:24px;line-height:1.35}#scene-score{color:var(--amber);font-size:22px}#pause-options{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}#continue{margin-top:10px}
.mission{display:flex;justify-content:space-between;gap:24px;padding:16px 0 0}.mission>div:first-child{min-width:0}.mission .kicker{font-size:20px}#hint{font-size:23px;color:var(--muted);margin:8px 0 0;max-width:90ch}
#mouse-taps{display:flex;gap:10px;align-self:center}#mouse-taps button{min-width:150px}
#feedback{color:var(--amber);min-height:31px;font-size:26px}.caption{font-size:18px;color:var(--muted);margin:0 0 16px}
#ending{max-width:1040px;margin:auto;padding-top:24px}.end-score{border-top:3px solid var(--cream);border-bottom:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted)}.end-score strong{font:28px var(--pixel);color:var(--amber);margin:0 12px}.end-score b{color:var(--paper)}
.ledger{margin:24px 0}.ledger>div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:12px 0}.ledger dt{color:var(--muted)}.ledger dd{margin:0;text-align:right}
.reporter-dialog{display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:end;margin:32px 0}
details{border-top:1px solid var(--line);padding:12px 0}summary{cursor:pointer;min-height:44px;display:list-item;font-size:22px;color:var(--cream)}#ending>button{margin-top:20px}
footer p{margin:0}footer{font-size:18px;color:var(--muted);border-top:1px solid var(--line);padding:20px 0;margin:28px 0 0}body.playing .masthead{padding-top:8px;padding-bottom:6px}body.playing .brands img{height:32px}
/* Mode main: panggung mengisi tinggi layar; sisa ~190px untuk toolbar + satu baris misi. */
@media(min-width:701px){
body.playing .masthead,body.playing footer,body.playing #art-label,body.playing .mission .kicker{display:none}
body.playing main{max-width:none;padding:0 16px}
body.playing .toolbar{padding:8px 0}
.play-area{--stage-w:min(100%,calc((100dvh - 200px) * 16 / 9));grid-template-columns:var(--stage-w);justify-content:center}
.play-area:has(.camera-preview:not([hidden])){grid-template-columns:minmax(0,calc((100dvh - 200px) * 16 / 9)) 220px}
.play-area.calibrating:has(.camera-preview:not([hidden])){grid-template-columns:minmax(0,calc((100dvh - 200px) * 16 / 9)) 300px}
body.playing .mission{padding-top:10px;align-items:center}body.playing #instruction{margin:0}body.playing #hint{font-size:20px;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.playing #feedback{margin:6px 0 0;font-size:24px}}
@media(max-width:700px){
body{font-size:22px}main{padding:0 12px}.masthead{padding:12px;flex-wrap:wrap}.brands{gap:8px}.brands img{height:30px}.brands .logo-jaring{height:34px}
.opening-scene{min-height:320px;padding:12px}.opening-scene>div{padding:14px}.opening-scene p{font-size:22px}h1{font-size:21px}
.brief-layout,.reporter-dialog,.receipt-layout{grid-template-columns:1fr;gap:0}.adil{width:90px;margin:0 0 -3px 10px}#brief-text{font-size:23px}.dialog-box{padding:14px}
.stage-head{inset:6px 6px auto}#chapter{font:16px var(--body);padding:4px 6px}.hud>span{font-size:17px;padding:2px 6px}#timer,#score{font:17px var(--body)}
.play-area:has(.camera-preview:not([hidden])),.play-area.calibrating:has(.camera-preview:not([hidden])){grid-template-columns:1fr}.camera-preview{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}.camera-preview p{margin:0}
#curtain{position:relative;padding:14px 8px;background:var(--navy)}.receipt-layout{overflow:visible;padding:0;max-height:none}#curtain-copy{font-size:21px}
.mission{display:block}#mouse-taps{margin-top:10px}#mouse-taps button{flex:1;min-width:0}.ledger>div{flex-direction:column;gap:2px}.ledger dd{text-align:left}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}