:root{--c-void: #050507;--c-bone: #d8d2c4;--c-ash: #8a857a;--c-rec: #e0362c;--c-amber: #d9a441;--font-hud: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--font-title: "Times New Roman", Georgia, serif;--gutter: 16px;--dur-fast: .15s}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:var(--c-void);color:var(--c-bone);font-family:var(--font-hud)}#app,.stage{position:fixed;inset:0}.stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.input-surface{position:absolute;inset:0;touch-action:none}.hud{position:absolute;inset:0;z-index:10;pointer-events:none}.screen{position:fixed;inset:0;z-index:50;display:grid;place-content:center;gap:12px;padding:var(--gutter);text-align:center;background:radial-gradient(ellipse at 50% 40%,#15110c 0%,var(--c-void) 70%)}.screen__title{margin:0 -.35em 0 0;font-family:var(--font-title);font-size:clamp(2.25rem,.5rem + 9vw,7rem);letter-spacing:.35em;text-shadow:2px 0 var(--c-rec),-2px 0 #2b6cff55}.screen__heading{margin:0;font-family:var(--font-title);font-size:1.5rem}.screen__tagline{margin:0 0 24px;color:var(--c-amber);letter-spacing:.2em;text-transform:uppercase}.screen__warning,.screen__tip{justify-self:center;max-width:34ch;margin:0;color:var(--c-ash);font-size:.85rem;line-height:1.5}.screen__start{justify-self:center;margin-top:28px;padding:14px 28px;border:0;background:var(--c-bone);color:var(--c-void);font:inherit;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:transform var(--dur-fast),background var(--dur-fast);animation:pulse 1.6s steps(2) infinite}.screen__start:hover,.screen__start:focus-visible{background:var(--c-amber);transform:translateY(-2px);outline:2px solid var(--c-bone);outline-offset:4px}.screen__start:active{transform:translateY(1px)}@keyframes pulse{50%{opacity:.75}}.debug-overlay{position:fixed;bottom:120px;right:8px;z-index:40;max-width:50vw;margin:0;padding:6px 8px;background:#000a;color:#7dff8a;font-size:11px;white-space:pre-wrap;pointer-events:none}.touch-controls{display:none;position:absolute;inset:0;z-index:20;pointer-events:none}@media(pointer:coarse){.touch-controls{display:block}}.is-touch .touch-controls{display:block}.joystick{position:fixed;left:0;top:0;width:112px;height:112px;border:2px solid #d8d2c455;border-radius:50%;opacity:0;transition:opacity var(--dur-fast)}.joystick.is-active{opacity:1}.joystick__knob{position:absolute;left:32px;top:32px;width:48px;height:48px;border-radius:50%;background:#d8d2c499}.touch-btn{position:absolute;right:calc(var(--gutter) + env(safe-area-inset-right));width:72px;height:72px;border:2px solid var(--c-bone);border-radius:50%;background:#0008;color:var(--c-bone);font:700 10px var(--font-hud);letter-spacing:.1em;pointer-events:auto;touch-action:none}.touch-btn:active{background:var(--c-bone);color:var(--c-void);transform:scale(.94)}.touch-btn--interact{bottom:calc(32px + env(safe-area-inset-bottom))}.touch-btn--camera{bottom:calc(116px + env(safe-area-inset-bottom))}.touch-btn--flashlight{bottom:calc(200px + env(safe-area-inset-bottom))}@media(prefers-reduced-motion:reduce){.screen__start{animation:none}}.crosshair{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--c-bone);opacity:.6;transition:transform var(--dur-fast),opacity var(--dur-fast)}.crosshair[data-mode=active]{opacity:1;transform:scale(2.4);background:transparent;box-shadow:0 0 0 1.5px var(--c-amber)}.prompt{position:absolute;left:50%;top:calc(50% + 22px);margin:0;transform:translate(-50%);color:var(--c-amber);font-size:12px;letter-spacing:.12em;text-shadow:0 1px 0 #000;white-space:nowrap}.toast{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(24px + env(safe-area-inset-bottom));max-width:60ch;margin:0 auto;padding:10px 14px;border-left:3px solid var(--c-amber);background:#000c;font-size:13px;line-height:1.5;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}.toast.is-visible{opacity:1;transform:none}@media(pointer:coarse){.toast{right:104px}}.is-touch .toast{right:104px}.save-warning{position:absolute;top:8px;left:var(--gutter);margin:0;color:var(--c-rec);font-size:11px;letter-spacing:.1em}.viewfinder{position:absolute;inset:0;pointer-events:none}.viewfinder__frame{position:absolute;inset:6%;border:2px solid #ffffffb0}.viewfinder__noise{position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);animation:scan .2s steps(3) infinite}@keyframes scan{to{transform:translateY(3px)}}.viewfinder__rec,.viewfinder__clock,.viewfinder__battery{position:absolute;margin:0;color:#fff;font-size:13px;letter-spacing:.1em;text-shadow:1px 1px 0 #000}.viewfinder__rec{top:calc(6% + 10px);left:calc(6% + 12px)}.viewfinder__rec:before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--c-rec);animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}.viewfinder__clock{bottom:calc(6% + 10px);left:calc(6% + 12px)}.viewfinder__battery{top:calc(6% + 10px);right:calc(6% + 12px)}.viewfinder__battery.is-low{color:var(--c-rec)}.keypad{position:absolute;left:50%;top:50%;z-index:30;display:grid;gap:12px;width:min(280px,calc(100vw - 32px));padding:18px;transform:translate(-50%,-50%);border:1px solid #5a5246;background:linear-gradient(160deg,#2a2621,#12100d);box-shadow:0 24px 60px #000,inset 0 1px #ffffff14}.keypad__title{margin:0;color:var(--c-ash);font-size:11px;letter-spacing:.4em}.keypad__display{display:block;padding:10px;border:1px solid #000;background:#0b0d09;color:#9fd18a;font-size:28px;letter-spacing:.3em;text-align:center}.keypad[data-status=wrong] .keypad__display{color:var(--c-rec);animation:shake .3s}.keypad[data-status=solved] .keypad__display{color:var(--c-amber)}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.keypad__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.keypad__key{min-height:44px;border:0;border-bottom:3px solid #1c1915;background:#3a342c;color:var(--c-bone);font:600 18px var(--font-hud);cursor:pointer;touch-action:manipulation;transition:transform var(--dur-fast),background var(--dur-fast)}.keypad__key:hover,.keypad__key:focus-visible{background:#4a4238;outline:2px solid var(--c-amber);outline-offset:1px}.keypad__key:active{transform:translateY(2px);border-bottom-width:1px}@media(prefers-reduced-motion:reduce){.viewfinder__noise,.viewfinder__rec:before,.keypad[data-status=wrong] .keypad__display{animation:none}}.touch-btn--gallery{bottom:calc(284px + env(safe-area-inset-bottom))}.touch-btn--menu{top:calc(8px + env(safe-area-inset-top));bottom:auto;width:44px;height:44px;font-size:18px}@media(max-height:480px){.touch-btn--flashlight,.touch-btn--gallery{right:calc(var(--gutter) + 84px + env(safe-area-inset-right))}.touch-btn--flashlight{bottom:calc(32px + env(safe-area-inset-bottom))}.touch-btn--gallery{bottom:calc(116px + env(safe-area-inset-bottom))}}.dialog{position:absolute;left:50%;top:50%;z-index:30;display:grid;gap:12px;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:18px;transform:translate(-50%,-50%);border:1px solid #5a5246;background:linear-gradient(160deg,#2a2621,#12100d);box-shadow:0 24px 60px #000,inset 0 1px #ffffff14}.dialog__btn{justify-self:end;min-height:44px;padding:0 18px;border:0;border-bottom:3px solid #1c1915;background:#3a342c;color:var(--c-bone);font:600 13px var(--font-hud);letter-spacing:.15em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:transform var(--dur-fast),background var(--dur-fast)}.dialog__btn:hover,.dialog__btn:focus-visible{background:#4a4238;outline:2px solid var(--c-amber);outline-offset:1px}.dialog__btn:active{transform:translateY(2px);border-bottom-width:1px}.note{width:min(360px,calc(100vw - 32px));background:#d9cfb6;color:#2a2118;border:0;box-shadow:0 24px 60px #000,6px 6px #0005;transform:translate(-50%,-50%) rotate(-.8deg)}.note__title{margin:0;font:italic 600 1.1rem var(--font-title);border-bottom:1px solid #2a211833;padding-bottom:6px}.note__line{margin:0;font:italic 1.05rem/1.5 var(--font-title)}.note .dialog__btn{background:#2a2118;color:#d9cfb6}.fade{position:absolute;inset:0;z-index:15;background:#000;opacity:0;pointer-events:none;transition:opacity .28s}.fade.is-on{opacity:1}@media(prefers-reduced-motion:reduce){.fade{transition:none}}.viewfinder__flash{position:absolute;inset:0;opacity:0;background:#fff}.viewfinder__flash.is-on{animation:flash .2s ease-out}.viewfinder__flash.is-soft{background:#000;animation:flash .2s ease-out}@keyframes flash{0%{opacity:.85}to{opacity:0}}.gallery{width:min(520px,calc(100vw - 32px))}.gallery__title{margin:0;color:var(--c-ash);font:600 11px var(--font-hud);letter-spacing:.4em}.gallery__preview{display:grid;gap:6px;margin:0}.gallery__photo{display:grid;place-items:center;width:100%;aspect-ratio:16 / 9;object-fit:cover;image-rendering:pixelated;border:1px solid #000;background:repeating-linear-gradient(45deg,#111 0 4px,#181614 4px 8px);color:var(--c-ash);font-size:32px}.gallery__photo--barang{color:var(--c-amber)}.gallery__caption{color:var(--c-bone);font-size:13px;letter-spacing:.08em}.gallery__detail,.gallery__empty{margin:0;color:var(--c-ash);font-size:12px;line-height:1.5}.gallery__count{justify-self:end;margin:0;color:var(--c-ash);font-size:11px}.gallery__list{display:flex;flex-wrap:wrap;gap:6px}.gallery__item{min-height:44px;padding:0 12px;border:1px solid #5a5246;background:#1c1915;color:var(--c-bone);font:12px var(--font-hud);cursor:pointer;touch-action:manipulation;transition:border-color var(--dur-fast),color var(--dur-fast)}.gallery__item[aria-current=true]{border-color:var(--c-amber);color:var(--c-amber)}.gallery__item:focus-visible{outline:2px solid var(--c-amber);outline-offset:1px}@media(prefers-reduced-motion:reduce){.viewfinder__flash.is-on{background:#000}}.subtitles{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));max-width:min(60ch,calc(100vw - 32px));margin:0;padding:4px 10px;transform:translate(-50%);background:#000b;color:#fff;font-size:14px;line-height:1.4;text-align:center;white-space:pre-line}.subtitles:empty{opacity:0}.chat{position:absolute;top:calc(28px + env(safe-area-inset-top));left:calc(var(--gutter) + env(safe-area-inset-left));width:min(280px,45vw);font-size:12px}.chat__head{margin:0 0 4px;color:var(--c-rec);font-weight:700;letter-spacing:.25em}.chat__list{display:grid;gap:3px;margin:0;padding:0;list-style:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);mask-image:linear-gradient(to bottom,transparent,#000 45%)}.chat__msg{color:#e8e2d4;line-height:1.35;text-shadow:0 1px 0 #000,0 0 6px #000;animation:chat-in .24s ease-out}.chat__user{margin-right:2px;color:var(--c-amber);font-weight:600}.chat__msg--reaction{color:#ff9b8f;font-weight:700}.viewfinder:not([hidden])~.chat{top:calc(6% + 38px);left:calc(6% + 12px)}@keyframes chat-in{0%{opacity:0;transform:translateY(6px)}}@media(prefers-reduced-motion:reduce){.chat__msg{animation:none}}.settings{width:min(440px,calc(100vw - 32px));gap:4px;overscroll-behavior:contain}.settings__title{margin:0 0 8px;color:var(--c-amber);font:700 13px var(--font-hud);letter-spacing:.5em}.settings__row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid #ffffff12;font-size:13px;cursor:pointer}.settings__label{color:var(--c-bone)}.settings__range{width:min(150px,34vw);accent-color:var(--c-amber)}.settings__value{min-width:4ch;color:var(--c-amber);text-align:right}.settings__check{width:22px;height:22px;margin:0;accent-color:var(--c-amber)}.settings__select{min-height:36px;padding:0 8px;border:1px solid #5a5246;background:#1c1915;color:var(--c-bone);font:inherit}.settings__note{margin:0;color:var(--c-ash);font-size:11px;line-height:1.4}.settings .dialog__btn{margin-top:10px}.settings__range:focus-visible,.settings__check:focus-visible,.settings__select:focus-visible{outline:2px solid var(--c-amber);outline-offset:2px}.clock,.sesajen{width:min(340px,calc(100vw - 32px))}.clock__display{display:block;padding:10px;border:1px solid #000;background:#0b0d09;color:#d8ceb0;font:600 34px var(--font-hud);letter-spacing:.2em;text-align:center}.clock__row{display:grid;grid-template-columns:56px repeat(4,1fr);gap:6px;align-items:center}.clock__unit{color:var(--c-ash);font-size:11px;letter-spacing:.3em}.clock__actions{display:flex;justify-content:flex-end;gap:8px}.sesajen__slots{display:grid;gap:4px;margin:0;padding:10px 10px 10px 32px;border:1px solid #000;background:#0b0d09;color:#d8ceb0;font-size:14px}.sesajen__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sesajen__offering{font-size:14px}.sesajen__offering:disabled{opacity:.35;cursor:default}.clock[data-status=wrong] .clock__display,.sesajen[data-status=wrong] .sesajen__slots{color:var(--c-rec);animation:shake .3s}.clock[data-status=solved] .clock__display,.sesajen[data-status=solved] .sesajen__slots{color:var(--c-amber)}@media(prefers-reduced-motion:reduce){.clock[data-status=wrong] .clock__display,.sesajen[data-status=wrong] .sesajen__slots{animation:none}}.gamelan,.brankas{width:min(360px,calc(100vw - 32px))}.gamelan__bars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.gamelan__bar{min-height:64px;padding:4px 2px;white-space:pre-line;font-size:12px;line-height:1.3;background:linear-gradient(#6a5530,#3a2f1c)}.gamelan__slots{grid-template-columns:repeat(2,1fr)}.brankas__display{font-size:22px;letter-spacing:.06em}.brankas__days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.brankas__pasaran{font-size:12px}.brankas__pasaran[aria-pressed=true]{background:#6a5226;color:var(--c-amber)}.gamelan[data-status=wrong] .sesajen__slots,.brankas[data-status=wrong] .clock__display{color:var(--c-rec);animation:shake .3s}.gamelan[data-status=solved] .sesajen__slots,.brankas[data-status=solved] .clock__display{color:var(--c-amber)}@media(prefers-reduced-motion:reduce){.gamelan[data-status=wrong] .sesajen__slots,.brankas[data-status=wrong] .clock__display{animation:none}}.accusation{width:min(400px,calc(100vw - 32px))}.accusation__suspects{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.accusation__suspect{font-size:13px}.accusation__suspect[aria-pressed=true]{background:#6a2a1f;color:var(--c-bone);outline:2px solid var(--c-rec)}.accusation__proofs{display:grid;gap:6px}.accusation__proof{min-height:44px;padding:0 12px;border:1px solid #5a5246;background:#1a1714;color:var(--c-ash);font:13px var(--font-hud);text-align:left;cursor:pointer}.accusation__proof[aria-pressed=true]{border-color:var(--c-amber);color:var(--c-amber)}.accusation__proof:focus-visible{outline:2px solid var(--c-amber);outline-offset:1px}.accusation__empty{margin:0;color:var(--c-ash);font-size:13px}.accusation .dialog__btn:disabled{opacity:.4;cursor:default}.ending{width:min(520px,calc(100vw - 32px));background:radial-gradient(circle at 50% 0%,#2a1512,#0b0807 70%)}.ending__title{margin:0;color:var(--c-bone);font:600 2rem var(--font-title);letter-spacing:.04em}.ending--sejati .ending__title{color:var(--c-amber)}.ending--salah-tuduh .ending__title{color:var(--c-rec)}.ending__line{margin:0;color:var(--c-ash);font:1rem/1.55 var(--font-title)}.ending__subtitle{margin:8px 0 0;color:var(--c-amber);font:600 .8rem var(--font-hud);letter-spacing:.3em;text-transform:uppercase}.ending__story{margin:0;color:var(--c-ash);font:.95rem/1.5 var(--font-title)}.ending__story strong{color:var(--c-bone)}.ending__status{margin:0;min-height:1.2em;color:var(--c-amber);font-size:12px;overflow-wrap:anywhere}.screen--prologue{gap:20px}.prologue__body{display:grid;gap:16px;max-width:46ch;min-height:9em;align-content:center}.prologue__text{margin:0;color:var(--c-bone);font-size:clamp(1rem,.9rem + .5vw,1.2rem);line-height:1.7;text-align:left;animation:card-in .6s ease-out both}@keyframes card-in{0%{opacity:0;transform:translateY(6px)}}.prologue__skip{justify-self:center;min-height:44px;padding:8px 16px;border:0;background:none;color:var(--c-ash);font:inherit;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}.prologue__skip:hover,.prologue__skip:focus-visible{color:var(--c-bone);outline:1px solid var(--c-ash);outline-offset:2px}.controls{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:0;text-align:left;font-size:.9rem}.controls__keys{color:var(--c-amber);letter-spacing:.05em}.controls__action{margin:0;color:var(--c-bone)}.settings__controls summary{cursor:pointer;padding:8px 0;letter-spacing:.1em;text-transform:uppercase}.settings__controls .controls{font-size:.8rem}.objective{position:absolute;top:8px;right:var(--gutter);max-width:min(42ch,46vw);margin:0;padding:6px 10px;border-right:3px solid var(--c-amber);background:#0009;font-size:12px;line-height:1.45;text-align:right}.objective__label{display:block;color:var(--c-amber);font-size:10px;letter-spacing:.2em}.objective.is-new{animation:objective-new 1.2s steps(4) 2}@keyframes objective-new{50%{background:#c8892a55}}@media(prefers-reduced-motion:reduce){.prologue__text,.objective.is-new{animation:none}}.ending .clock__actions{flex-wrap:wrap}.ending .clock__actions .dialog__btn{flex:1 1 auto;min-width:44px;min-height:44px}.gallery__photo--doc{image-rendering:auto;object-fit:contain;background:#0d0c0a}.gpu-lost{z-index:60}.gpu-lost[hidden]{display:none}@media(pointer:coarse){.objective{top:calc(60px + env(safe-area-inset-top));max-width:min(34ch,60vw)}}.is-touch .objective{top:calc(60px + env(safe-area-inset-top));max-width:min(34ch,60vw)}.screen{overflow-y:auto;align-content:safe center}@media(max-height:500px){.screen{gap:8px;padding-block:12px}.screen__title{font-size:clamp(1.75rem,1rem + 6vh,3rem)}.screen__tagline{margin-bottom:8px}.screen__start{margin-top:10px;padding:10px 24px}.screen__warning,.screen__tip{font-size:.8rem}.prologue__body{min-height:0;max-width:min(92vw,760px)}.prologue__text{font-size:.95rem;line-height:1.55}.controls{grid-template-columns:repeat(2,max-content minmax(16ch,1fr));gap:4px 14px;font-size:.8rem}}@media(pointer:coarse)and (max-height:500px){.objective{top:calc(8px + env(safe-area-inset-top));right:calc(var(--gutter) + 56px + env(safe-area-inset-right));max-width:min(34ch,42vw);font-size:11px}}@media(max-height:500px){.is-touch .objective{top:calc(8px + env(safe-area-inset-top));right:calc(var(--gutter) + 56px + env(safe-area-inset-right));max-width:min(34ch,42vw);font-size:11px}}
