
*{box-sizing:border-box}body{margin:0;color:#f1f1d9;background:#071010;font:15px system-ui, sans-serif}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #ffd589}#stage{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;isolation:isolate}#view{width:100%;height:100%;display:block;touch-action:none;background:#1a2828}.glass{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,transparent 34%,#040c0c80 100%)}#hud{position:absolute;inset:0;pointer-events:none;padding:clamp(12px,2vw,32px);display:flex;flex-direction:column;justify-content:space-between}.bar,.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bar{justify-content:space-between;align-items:flex-start}.panel,.chip,.tool{background:#0a1d1ce8;border:1px solid #75908280;border-radius:6px;padding:9px 12px;box-shadow:0 4px 16px #0004}.tool{pointer-events:auto;min-height:40px}.eyebrow,.chip,#hint,.tool,.tag,dt{font:700 10px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}.eyebrow,.tag{color:#bcdd9a}.tag{border-bottom:1px solid #84957566;padding-bottom:9px}.objective{font-weight:650;margin-top:3px}.chip{color:#c9e1d2}#alert[data-level="danger"]{color:#ffc49b;border-color:#dc836a}#notice{position:absolute;left:50%;top:23%;transform:translateX(-50%);text-align:center;width:max-content;max-width:85%;font-weight:650;color:#f5ebd3;background:#142725ed;padding:8px 15px;border-radius:5px;pointer-events:none}#dot{position:absolute;top:50%;left:50%;width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:#fcf8cb;box-shadow:0 0 3px #000}#hint{align-self:center;background:#0a1919df;padding:8px 12px;border-radius:5px;max-width:95%;text-align:center}#bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.slot{display:inline-block;color:#b4c2ba;border:1px solid #718379;margin:3px 2px 0 0;padding:3px 6px;border-radius:3px;font:700 10px monospace}.slot.have{color:#1a2c23;background:#c3ea98;border-color:#c3ea98}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:clamp(16px,6vw,90px);background:linear-gradient(90deg,#081313f5 0%,#081313cc 40%,#06101038 85%);overflow:auto}.sheet{max-width:530px;width:100%;max-height:100%;overflow:auto;padding:10px 4px}.sheet h1,.sheet h2{font-weight:900;letter-spacing:-.065em;line-height:.92;margin:20px 0 12px}.sheet h1{font-size:clamp(58px,10vw,128px)}.sheet h1 em{display:block;font-style:normal;color:#bddd9d}.sheet h2{font-size:clamp(38px,6vw,70px)}.sheet p{color:#d5dfd5;line-height:1.55;margin:8px 0 16px;max-width:44ch}.primary,.secondary{border:1px solid #8baf83;border-radius:5px;padding:12px 17px;min-height:46px;font-weight:750;background:#bedf9e;color:#14211b}.secondary{background:#18312c;color:#edf2e0}.fine{font:11px/1.5 ui-monospace,monospace;color:#a6b7aa;margin:12px 0}.map{width:min(100%,390px);max-height:38vh;object-fit:contain;background:#101d1e}.sheet dl{font-size:13px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px}.sheet dd{margin:0;color:#d5dfd5}#touch{display:none}.pad,.buttons{pointer-events:auto;touch-action:none}.pad{width:98px;height:98px;border:1px solid #a5b5a480;border-radius:50%;background:#182c2e99;display:grid;place-items:center}.pad i{display:block;border-radius:50%;width:36px;height:36px;background:#b6d4a8aa}.buttons{display:grid;grid-template-columns:repeat(2,minmax(50px,1fr));gap:5px}.buttons button{font-size:12px;background:#142a29da;border:1px solid #8fa28c;border-radius:7px;min-height:44px;padding:5px 9px}.buttons #act{background:#c6dfa7;color:#14251d;font-weight:800}[hidden]{display:none!important}
@media(pointer:coarse),(max-width:850px){#touch{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:6px}#hud{padding:10px 12px max(10px,env(safe-area-inset-bottom))}.tool{padding:7px}.panel{padding:6px 8px}.objective{font-size:12px}#bottom{align-items:center}.pad{width:88px;height:88px}.overlay{background:linear-gradient(90deg,#071312e8,#0713128c)}#hint{font-size:9px}.slot{font-size:9px}.bar .row{gap:3px}.bar{gap:5px}.sheet h1{margin-top:12px}}
@media(max-height:470px){.overlay{padding:10px 5vw}.sheet h1{font-size:48px}.sheet h1 em{display:inline}.sheet h1 em:before{content:' '}.sheet p{margin:5px 0}.sheet h2{font-size:34px}.fine{margin:6px 0}.pad{width:72px;height:72px}#touch{position:absolute;bottom:8px;left:12px;right:12px}#bottom{margin:0 145px 0 91px}.buttons button{min-height:39px}#hint{max-width:46%}}

#saveStamp{color:#e1eccc;text-shadow:0 1px 3px black;font:10px monospace}#shutters{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#091315ed 0 12%,transparent 12.5% 17%,#0e1d20 18% 20%);pointer-events:none;z-index:-1}#hud{isolation:isolate}.desktop-keys{text-align:center;color:#d3e0d1;font:600 11px ui-monospace,monospace;text-shadow:0 1px 4px #000}.glass{background:radial-gradient(ellipse at center,transparent 44%,#04101170)}#hint{justify-self:center;color:#f3efd7;border:1px solid #91aa8670}#act.ready{outline:2px solid #e6ffb3}#saveStamp{justify-self:start;background:#112320bf;padding:1px 5px}
.cinema{justify-content:center;background:radial-gradient(at 50% 35%,#324744,#091415 70%);padding:12px}.cinema .sheet{max-width:min(780px,100%);padding:12px}.cinema .tag{margin-bottom:10px}.film-art{overflow:hidden;background:#071211;border:1px solid #657b6a;border-radius:9px;text-align:center}.film-art img{display:block;width:100%;height:min(49dvh,430px);object-fit:contain;animation:jp-shot 3.7s ease-out both}.cinema h2{font-size:clamp(25px,4vw,43px);margin:10px 0 3px}.cinema p{max-width:none;margin:5px 0 11px}.reel-track{height:3px;background:#47564b}.reel-track i{display:block;height:100%;background:#c5e9a3;transform-origin:left;transform:scaleX(0)}@keyframes jp-shot{from{opacity:.5;transform:scale(.98) translateY(2px)}20%{opacity:1}to{transform:scale(1.035)}}@media(prefers-reduced-motion:reduce){.film-art img{animation:none}}@media(pointer:coarse),(max-width:850px){.desktop-keys{display:none}}@media(max-height:470px){.cinema .sheet{display:grid;grid-template-columns:1fr 1fr;gap:4px 15px}.cinema .tag,.cinema .row{grid-column:1/-1}.cinema #copy{display:contents}.cinema .film-art{grid-row:2/5}.cinema .reel-track{grid-column:2}.cinema .film-art img{height:43dvh}}

.film-art{position:relative}.film-art[data-shot="3"]:after,.film-art[data-shot="4"]:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 24%,#ffe7a633 44%,transparent 65%);animation:beam-pass 2s ease-out both}.film-art[data-shot="2"] img{transform-origin:70% 65%}.film-art[data-shot="5"] img{transform-origin:40% 70%}@keyframes beam-pass{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media(prefers-reduced-motion:reduce){.film-art:after{display:none}}
#notice{top:auto;bottom:151px}@media(pointer:coarse),(max-width:850px){#notice{bottom:auto;top:14%}}

#director{position:absolute;bottom:4%;left:5%;width:90%;display:flex;align-items:center;justify-content:space-between;background:#132923ed;padding:12px 16px;border:1px solid #8ba48c;border-radius:8px}#skipShot{background:#d4e6ac;color:#172a23;padding:10px 14px;border:0;border-radius:5px}#kit{display:block;color:#dae9bd;margin-top:4px}
