*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#070b13;color:#eae2cc;font-family:ui-monospace,'Cascadia Code','Courier New',monospace;overscroll-behavior:none}body{display:flex;justify-content:center;align-items:center;touch-action:none;user-select:none;-webkit-user-select:none}button,select{font:inherit;color:inherit;cursor:pointer;touch-action:none}button{border:1px solid #4b5265;background:#171f30;border-radius:4px;min-height:38px;transition:background .15s,transform .12s}button:hover,button:focus-visible{background:#303a50;outline:2px solid #e7bb70;outline-offset:3px}button:active{transform:translateY(2px)}#app{width:min(100vw,1200px,calc((100dvh - 140px)*1.5));position:relative}header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #263043}.brand{color:#edc88b;font-size:12px;letter-spacing:2px;text-decoration:none;font-weight:bold}.brand span{color:#77839b}.tools{display:flex;gap:6px}.tools button{width:38px;font-size:21px}.tools select{background:#121b2b;border:1px solid #4b5265;border-radius:4px;padding:4px}#screen{position:relative;width:100%;aspect-ratio:1.5;overflow:hidden;background:#10182a;box-shadow:0 20px 90px #0008}canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#06071314 3px 4px);pointer-events:none;opacity:.5}#overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:20px;pointer-events:none}#overlay:empty{display:none}.panel{pointer-events:auto;text-align:center;max-width:510px;width:94%;padding:30px 36px;background:linear-gradient(140deg,#101929f5,#0b101df8);border:1px solid #9c8052;box-shadow:0 0 0 5px #0c1320b0,0 25px 65px #000a;animation:appear .4s ease-out}.panel.title{margin-top:100px;background:linear-gradient(180deg,#0c1422b0,#0a1020f5);border:0;box-shadow:none;max-width:560px}.eyebrow{color:#d5ab69;letter-spacing:4px;font-size:11px;margin-bottom:14px}.panel h1{margin:6px 0 14px;font-size:32px;letter-spacing:2px}.panel p{font:15px/1.65 ui-monospace,monospace;color:#b6c1d4;margin:10px 0 20px}.panel .primary{display:block;margin:15px auto 10px;padding:14px 24px;min-width:220px;background:#e6b66f;border-color:#ffe0a4;color:#151a28;font-size:16px;font-weight:900;letter-spacing:2px;box-shadow:0 4px 0 #815932}.panel .secondary{margin:8px 4px;padding:8px 16px;font-size:12px}.panel small{display:block;color:#7f8da4;font-size:11px;line-height:1.6;margin-top:16px}.badge{display:inline-block;padding:6px 10px;border:1px solid #425168;color:#9eafca;font-size:11px;margin:0 3px}.stats{display:flex;justify-content:center;gap:28px;margin:20px 0}.stats strong{display:block;color:#e6ba74;font-size:28px}.stats span{font-size:11px;color:#9aa8bc}.initials{display:flex;gap:12px;justify-content:center}.initials button{font-size:28px;width:48px;height:52px;color:#f1c981}.records{font-size:13px;border-collapse:collapse;width:100%;margin:16px 0}.records td{padding:5px;text-align:left;border-bottom:1px solid #263045}.records td:last-child{text-align:right;color:#e4bb7d}footer{display:flex;align-items:center;justify-content:space-between;height:92px;padding:8px 14px;gap:12px}.dpad{display:grid;grid-template-columns:36px 36px 36px;grid-template-rows:26px 26px 26px;gap:3px}.dpad button{min-height:0;border-color:#485267;font-size:14px}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.dpad span{grid-area:2/2;text-align:center;color:#56657e}.control-note{color:#7888a2;font-size:11px;line-height:1.8}.actions{display:flex;gap:7px}.actions button{padding:8px 12px;font-size:17px}.actions span{font-size:11px}.immersive{position:fixed!important;inset:0;margin:auto!important}#app:fullscreen{background:#070b13;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}#app:fullscreen header,#app:fullscreen footer{width:min(100%,1200px)}#app:fullscreen #screen{width:min(100%,calc((100dvh - 140px)*1.5));flex:none} @keyframes appear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){#app{width:100vw}header{height:42px}.brand{font-size:9px;letter-spacing:1px}.tools button{min-height:30px;width:32px}.panel{padding:15px 18px}.panel.title{margin-top:60px}.panel h1{font-size:22px}.panel p{font-size:11px;line-height:1.5;margin:8px 0 12px}.eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:8px}.panel .primary{padding:10px 16px;font-size:13px;min-width:180px;margin:8px auto}.panel small{font-size:9px;margin-top:8px}.panel .secondary{font-size:10px;padding:5px 10px;margin:4px}.control-note{display:none}.actions span{display:none}.actions button{min-width:42px}.badge{font-size:8px}.stats{margin:10px;gap:16px}.stats strong{font-size:20px}.records{font-size:10px;margin:6px}.records td{padding:3px}}@media(orientation:landscape) and (max-height:600px){#app,#app:fullscreen{width:100vw;height:100dvh;display:flex;align-items:center;justify-content:center}header{position:absolute;left:0;right:0;top:0;height:36px;z-index:5;border:0;background:linear-gradient(#070b13cc,transparent)}.brand{font-size:9px}#screen,#app:fullscreen #screen{height:100dvh;width:auto;aspect-ratio:1.5;max-width:100vw}footer,#app:fullscreen footer{position:absolute;inset:0;pointer-events:none;height:100%;width:100%;padding:0 10px;align-items:flex-end;padding-bottom:20px}.dpad,.actions{pointer-events:auto}.actions{flex-direction:column}.actions span,.control-note{display:none}.panel{padding:16px 25px;max-width:430px}.panel.title{margin-top:70px}.panel p{font-size:12px}.panel h1{font-size:24px}.panel small{font-size:9px}.panel .primary{padding:10px 16px;margin:8px auto}.panel .secondary{margin:4px;padding:6px 12px}.stats{margin:10px}.stats strong{font-size:22px}}
.comic-panel{display:grid;grid-template-columns:43% 57%;width:94%;max-width:800px;padding:0;overflow:hidden;text-align:left;border-color:#baa077;background:#101a2a}.comic-art{position:relative;min-height:320px;background-image:url('assets/heist-stories.png');background-size:300% 200%;background-position:var(--cx) var(--cy);aspect-ratio:1;background-repeat:no-repeat;image-rendering:auto;align-self:stretch;overflow:hidden;animation:comicReveal .7s cubic-bezier(.15,.8,.3,1)}.comic-copy{padding:24px 27px;align-self:center}.comic-copy h1{font-size:23px;line-height:1.2;margin:8px 0 12px}.comic-copy p{font-size:13px;line-height:1.55;margin:12px 0}.comic-copy .eyebrow{letter-spacing:2px}.comic-copy small{font-size:10px;line-height:1.5}.comic-copy .primary{min-width:180px;font-size:13px;padding:12px 16px;margin:15px 0 4px}.comic-shine{position:absolute;inset:-100% -200%;background:linear-gradient(110deg,transparent 45%,#fff5 49%,transparent 53%);animation:comicShine 7s infinite;pointer-events:none}.comic-caption{position:absolute;bottom:8px;left:10px;right:10px;padding:8px;background:#080f20dd;font-size:12px;color:#f5deac}.brief-time{font-size:25px;color:#edc487;margin:12px 0}.brief-time span{font-size:10px;display:block;letter-spacing:1px;text-transform:uppercase;color:#9aabc3}.letter-control{display:flex;flex-direction:column;align-items:center;gap:3px}.initials .letter-up,.initials .letter-down{font-size:10px;height:22px;min-height:22px;width:44px;color:#d4af77}.initials{gap:10px;justify-content:flex-start;margin-top:6px}.initials button{height:44px;width:44px}.comic-copy .stats{justify-content:flex-start;gap:15px;margin:12px 0}.comic-copy .stats strong{font-size:27px}#hint span{font-size:10px}.panel{max-height:98%;overflow:auto;touch-action:pan-y}.panel.title{max-height:none}.panel:not(.title){backdrop-filter:blur(5px)}@keyframes comicReveal{from{opacity:0;transform:translateX(-24px) scale(1.05)}to{opacity:1;transform:none}}@keyframes comicShine{0%,65%{transform:translateX(-25%)}95%,100%{transform:translateX(25%)}}@media(max-width:640px){.comic-panel{grid-template-columns:32% 68%;width:100%;max-height:98%}.comic-art{min-height:0;aspect-ratio:auto;background-size:auto 200%;background-position:var(--cx) var(--cy)}.comic-copy{padding:12px}.comic-copy h1{font-size:15px;margin:4px 0 6px}.comic-copy p{font-size:10px;line-height:1.35;margin:7px 0}.comic-copy .primary{font-size:11px;padding:7px 10px;min-width:130px;margin:7px 0}.comic-copy small{font-size:8px}.comic-copy .eyebrow{font-size:8px;margin:4px 0}.brief-time{font-size:17px;margin:7px 0}.brief-time span{font-size:8px}.initials button{font-size:20px;width:32px;height:32px;min-height:32px}.initials .letter-up,.initials .letter-down{width:32px;height:17px;min-height:17px}.comic-copy .stats{margin:5px 0}.comic-copy .stats strong{font-size:18px}.comic-copy .stats span{font-size:8px}}@media(orientation:landscape) and (max-height:600px){.comic-panel{max-width:690px;width:91%;grid-template-columns:40% 60%;max-height:92%;}.comic-art{min-height:0;aspect-ratio:1;background-size:300% 200%}.comic-copy{padding:13px 18px}.comic-copy h1{font-size:19px}.comic-copy p{font-size:11px;margin:8px 0}.comic-copy .primary{padding:8px 14px;min-width:170px;margin:8px 0}.comic-copy small{font-size:8px}.brief-time{font-size:20px;margin:8px 0}.comic-copy .stats{margin:5px 0}.comic-copy .stats strong{font-size:21px}.initials button{font-size:22px;width:36px;height:32px;min-height:32px}.initials .letter-up,.initials .letter-down{width:36px;height:17px;min-height:17px}.comic-copy .eyebrow{font-size:9px;margin-bottom:8px}.comic-copy .badge{font-size:9px}}
/* Keep the illustration inside its grid track; intrinsic square sizing must not cover text. */
.comic-panel>.comic-art{min-width:0;width:100%;max-width:100%;aspect-ratio:auto;background-size:auto 200%}.comic-panel>.comic-copy{min-width:0}
.comic-panel>.comic-art{align-self:center;aspect-ratio:1;height:auto;min-height:0;background-size:300% 200%;border-top:1px solid #685640;border-bottom:1px solid #685640}

.level-art{position:relative;align-self:center;width:100%;aspect-ratio:1;overflow:hidden;background-size:500% 100%;background-position:var(--scene) 0;image-rendering:pixelated;border:1px solid #cbaa6766;box-shadow:0 12px 38px #0008;animation:sceneReveal 1.1s cubic-bezier(.16,1,.3,1) both,sceneBreathe 9s ease-in-out 1.1s infinite alternate}
.level-panel{perspective:1100px}.level-panel .comic-copy{animation:copyReveal .85s .18s both}.scene-number{position:absolute;bottom:12px;left:12px;padding:7px 10px;color:#ffdb8e;background:#071020dc;border:1px solid #b58d52;font-size:12px;letter-spacing:3px}.scene-sparkles{position:absolute;inset:-20%;background-image:radial-gradient(circle,#ffdd9c 0 1px,transparent 2px),radial-gradient(circle,#98eced 0 1px,transparent 2px);background-size:57px 83px,97px 113px;animation:dustFloat 15s linear infinite;opacity:.3;pointer-events:none}.level-art:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#d9f7ff22 40%,transparent 60%);background-size:250% 100%;animation:lightSweep 6s ease-in-out infinite}.scene-1{animation-name:sceneReveal,sceneTilt}.scene-2{animation-name:sceneReveal,sceneBreathe}.scene-3{animation-name:sceneReveal,sceneTilt}.hide-touch #controls{display:none}.hide-touch #screen{max-height:calc(100dvh - 48px)}
@keyframes sceneReveal{from{opacity:0;transform:translateX(-50px) rotateY(24deg) scale(.87);filter:brightness(2)}to{opacity:1;transform:none;filter:brightness(1)}}@keyframes copyReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes sceneBreathe{to{transform:scale(1.018) translateY(-3px)}}@keyframes sceneTilt{to{transform:rotate(.7deg) translateY(-4px)}}@keyframes dustFloat{to{transform:translate(27px,-83px)}}@keyframes lightSweep{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.level-art,.scene-sparkles,.level-art:after,.level-panel .comic-copy{animation:none}}

.level-art{width:auto;height:min(52vh,410px);aspect-ratio:3/5;max-width:100%;justify-self:center;background-size:500% 100%}@media(max-height:500px){.level-art{height:64vh}.level-panel{padding:12px!important}.level-panel h1{font-size:22px}.level-panel p{font-size:12px;margin:8px 0}}

.comic-panel>.new-capture{background-image:url(assets/cover.png);background-size:cover;background-position:center;aspect-ratio:1}
/* Briefings use the viewport on phones, independent of the small board aspect ratio. */
@media(max-width:640px) and (orientation:portrait){
 #overlay{position:fixed;inset:52px 10px 105px;z-index:20;padding:4px;background:#070d17b8}
 #overlay .panel{max-height:100%;width:100%;margin:0}.comic-panel{grid-template-columns:34% 66%}
 .comic-copy{padding:14px}.comic-copy h1{font-size:19px;line-height:1.2}.comic-copy p{font-size:12px;line-height:1.5}.comic-copy small{font-size:10px}.comic-copy .primary{font-size:12px;min-height:44px;width:100%;min-width:0}.comic-copy .badge{font-size:9px}.brief-time{font-size:23px;margin:12px 0}.level-art{height:auto;width:100%;aspect-ratio:3/5}.scene-number{font-size:8px;letter-spacing:1px;padding:4px;left:4px;bottom:5px}
}
@media(orientation:landscape) and (max-height:600px){
 #overlay{position:fixed;inset:42px 68px 12px;z-index:6;padding:0}
 #overlay .comic-panel{width:min(100%,750px);max-height:100%;grid-template-columns:31% 69%;padding:0!important}
 .level-panel .comic-copy{padding:10px 16px}.level-panel h1{font-size:17px;line-height:1.15;margin:4px 0 8px}.level-panel p{font-size:11px;line-height:1.35;margin:6px 0}.level-panel small{font-size:8px;line-height:1.3;margin:6px 0}.level-panel .eyebrow{font-size:8px;margin:2px 0 6px}.level-panel .primary{font-size:11px;min-height:36px;padding:8px 14px;margin:6px 0}.level-panel .brief-time{font-size:18px;margin:6px 0}.level-art{height:min(72vh,300px);aspect-ratio:3/5;width:auto;max-width:100%}
}
/* Large arcade controls: no text selection, callouts or drag gestures. */
#app,#app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#app button,#app button *,#game{touch-action:none;-webkit-user-drag:none}
#app{width:min(100vw,1200px,calc((100dvh - 230px)*1.5))}
#controls{height:180px;padding:10px 16px;gap:12px}
.dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px}
.dpad button{font-size:23px;border-width:2px;border-radius:10px;min-height:52px}
.dpad span{align-self:center;font-size:24px}
.actions button{min-width:56px;min-height:56px;font-size:25px;border-width:2px;border-radius:10px}
.tools button,.tools select{min-width:44px;min-height:44px}
.initials button,.initials .letter-up,.initials .letter-down{min-width:44px;min-height:44px;height:44px}
#app:fullscreen #screen{width:min(100%,calc((100dvh - 230px)*1.5))}
@media(max-width:640px){#app{width:100vw}#controls{padding:8px;gap:8px}.actions{gap:5px}.actions button{min-width:50px;width:50px;padding:6px}.tools{gap:4px}.tools button,.tools select{min-width:40px;width:40px;min-height:42px}.brand{letter-spacing:0}header{padding:0 7px;height:46px}}
@media(orientation:portrait) and (max-width:640px){#overlay{bottom:190px}}
@media(orientation:landscape) and (max-height:600px){
 #app,#app:fullscreen{width:100vw;height:100dvh;padding-left:max(176px,env(safe-area-inset-left));padding-right:max(76px,env(safe-area-inset-right))}
 #screen,#app:fullscreen #screen{width:min(calc(100vw - 252px),calc((100dvh - 44px)*1.5));height:auto;aspect-ratio:1.5;margin-top:34px;flex:none}
 #controls,#app:fullscreen #controls{height:100%;padding:0 max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));align-items:flex-end}
 .actions{gap:8px}.actions button{width:56px;min-width:56px;min-height:56px}.control-note{display:none}
 .hide-touch #app{padding:0}.hide-touch #screen{width:min(100vw,calc((100dvh - 44px)*1.5))}
}
@media(min-height:601px){.hide-touch #app{width:min(100vw,1200px,calc((100dvh - 48px)*1.5))}}