@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{--ink:#14105a;--screen:#40318d;--screen-light:#7869c4;--cyan:#8ee1ff;--yellow:#fff6a0;--red:#ff7777;--green:#a9ff9f;--white:#f0f0f0;--black:#100c3c}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--white);font-family:'Press Start 2P',monospace;background:repeating-linear-gradient(90deg,#211a60 0 3px,#2c2474 3px 6px);image-rendering:pixelated}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.game-shell{width:min(1080px,100%);margin:auto;padding:26px 20px 34px}.masthead{min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;text-shadow:2px 2px 0 var(--ink)}.brand{display:flex;gap:12px;align-items:center;text-transform:uppercase;font-size:10px;line-height:1.4;letter-spacing:.3px}.brand b{font-size:16px;color:var(--yellow)}.brand-badge{display:grid;place-items:center;width:42px;height:42px;color:var(--ink);background:linear-gradient(160deg,#fff6a0,#ffd94d);border:4px solid var(--cyan);border-radius:0;font-size:20px;box-shadow:4px 4px 0 var(--ink),inset 0 -3px 0 #d99c00}.mission{text-align:center;text-transform:uppercase;font-size:8px;letter-spacing:.2px;color:var(--cyan)}.mission strong{display:block;margin-top:7px;font-size:14px;color:var(--yellow);line-height:1.35}.sound-button{width:42px;height:42px;border:4px solid var(--cyan);background:linear-gradient(160deg,var(--screen-light),var(--screen));color:var(--yellow);border-radius:0;font-size:18px;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}.sound-button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink),0 0 14px rgba(142,225,255,.55)}.sound-button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}.stage-wrap{position:relative;border:8px solid var(--cyan);border-radius:0;overflow:hidden;box-shadow:8px 8px 0 var(--ink),0 0 26px rgba(142,225,255,.28),inset 0 0 0 5px var(--ink);background:var(--screen)}.stage-wrap:before{content:'CVDORE 64 • MUSEUM HEIST • 1984style • GEMAAKT DOOR M.KREEFT';position:absolute;z-index:5;left:12px;bottom:9px;color:var(--yellow);font-size:7px;pointer-events:none;text-shadow:2px 2px var(--ink)}.stage-wrap:after{content:'';position:absolute;z-index:4;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#100c3c2b 3px 5px);mix-blend-mode:multiply}canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;image-rendering:pixelated;cursor:pointer;touch-action:manipulation}.overlay{position:fixed;z-index:6;inset:0;display:grid;place-items:center;overflow-y:auto;padding:24px 0;background:#100c3cd9;backdrop-filter:blur(2px);transition:opacity .18s steps(2),visibility .18s}.overlay.hidden{opacity:0;visibility:hidden}.case-file{position:relative;width:min(540px,86%);max-height:100%;overflow-y:auto;margin:auto;padding:32px 38px 28px;text-align:center;background:linear-gradient(165deg,var(--screen-light) 0%,var(--screen) 22%);border:6px solid var(--cyan);border-radius:0;box-shadow:8px 8px 0 var(--ink),0 0 32px rgba(142,225,255,.22)}.eyebrow{margin:0 0 15px;font-size:8px;line-height:1.6;color:var(--green)}.case-file h1{margin:0;font-size:clamp(24px,4vw,42px);line-height:1.35;color:var(--yellow);text-shadow:4px 4px var(--ink)}.case-file em{color:var(--red);font-style:normal}.case-file p:not(.eyebrow){font-family:monospace;font-size:15px;font-weight:bold;line-height:1.55;color:var(--white)}.primary{margin:11px 0 17px;padding:15px 17px;border:4px solid var(--ink);border-radius:0;background:linear-gradient(160deg,#fff6a0,#ffd94d);color:var(--ink);font-size:11px;line-height:1.5;box-shadow:5px 5px 0 var(--cyan);transition:transform .12s,box-shadow .12s}.primary:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--cyan),0 0 18px rgba(255,246,160,.45)}.primary:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--cyan)}.primary span{margin-left:10px;font-size:17px}.case-file small{display:block;font-family:monospace;font-size:11px;font-weight:bold;line-height:1.5;color:var(--cyan)}.sticker{position:absolute;z-index:3;display:grid;place-items:center;width:80px;height:80px;color:var(--ink);font-size:10px;line-height:1.5;text-align:center;box-shadow:3px 3px 0 var(--ink);clip-path:polygon(50% 0,61% 15%,78% 5%,82% 23%,100% 26%,88% 42%,98% 57%,80% 64%,80% 84%,62% 77%,49% 100%,39% 79%,20% 88%,20% 68%,0 61%,15% 47%,3% 31%,23% 27%,26% 8%,42% 18%);animation:sticker-pop 2.6s ease-in-out infinite}.sticker-one{background:linear-gradient(160deg,#ff9d9d,var(--red));top:13%;right:12%}.sticker-two{background:linear-gradient(160deg,#c8ffc0,var(--green));bottom:12%;left:10%;animation-delay:1.3s}@keyframes sticker-pop{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(3deg) scale(1.05)}}.message{position:absolute;z-index:7;top:15px;left:50%;transform:translateX(-50%) translateY(-80px);padding:11px 14px;border:4px solid var(--ink);border-radius:0;background:linear-gradient(160deg,#fff6a0,#ffd94d);color:var(--ink);font-size:12px;line-height:1.4;white-space:nowrap;box-shadow:4px 4px 0 var(--cyan),0 0 16px rgba(255,246,160,.5);opacity:0;transition:.2s steps(2)}.message.show{opacity:1;transform:translateX(-50%) translateY(0)}.dashboard{display:grid;grid-template-columns:1fr minmax(230px,1.35fr) 1fr;gap:23px;align-items:center;margin:22px 8px 12px}.stat{display:flex;gap:10px;align-items:baseline}.stat:last-child{justify-content:flex-end}.label{font-size:8px;color:var(--cyan)}.stat strong{font-size:17px;color:var(--yellow);text-shadow:2px 2px var(--ink),0 0 10px rgba(255,246,160,.35)}.coin{color:var(--yellow);text-shadow:0 0 8px rgba(255,246,160,.6)}.lives strong{color:var(--red);font-size:13px;letter-spacing:2px;text-shadow:2px 2px var(--ink),0 0 8px rgba(255,119,119,.5)}.bag{border:4px solid var(--cyan);border-radius:0;padding:10px 11px;background:linear-gradient(160deg,var(--screen-light),var(--screen) 40%);box-shadow:4px 4px 0 var(--ink)}.bag-top{display:flex;justify-content:space-between;font-size:8px;color:var(--white)}.meter{height:13px;margin-top:8px;overflow:hidden;border:3px solid var(--ink);background:var(--screen-light);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}.meter i{display:block;width:0%;height:100%;transition:width .25s cubic-bezier(.16,1,.3,1);background:repeating-linear-gradient(90deg,var(--green) 0 8px,var(--yellow) 8px 16px);box-shadow:0 0 10px rgba(169,255,159,.65)}.tip{margin:0;text-align:center;font-family:monospace;font-size:13px;font-weight:bold;line-height:1.5;color:var(--white)}.tip b{color:var(--yellow)}.touch-controls{display:none}
@media(max-width:600px){.game-shell{padding:12px 9px 22px}.masthead{min-height:58px;padding:0}.brand{font-size:7px}.brand b{font-size:10px}.brand-badge{width:32px;height:32px;border-width:3px;font-size:15px;box-shadow:2px 2px var(--ink)}.mission{font-size:6px}.mission strong{margin-top:4px;font-size:9px}.sound-button{width:34px;height:34px;border-width:3px;box-shadow:2px 2px var(--ink)}.stage-wrap{border-width:4px;box-shadow:4px 4px var(--ink)}.stage-wrap:before{font-size:5px;bottom:6px;left:7px}.case-file{padding:23px 19px 19px;border-width:4px;box-shadow:4px 4px var(--ink)}.case-file h1{font-size:22px}.case-file p:not(.eyebrow){font-size:12px}.eyebrow{font-size:6px}.case-file small{font-size:9px}.primary{font-size:9px;padding:12px}.sticker{display:none}.dashboard{grid-template-columns:1fr 1fr;gap:9px;margin:17px 3px 10px}.bag{grid-column:1/3;grid-row:2;padding:8px;border-width:3px}.bag-top,.label{font-size:7px}.stat strong{font-size:13px}.lives strong{font-size:10px}.tip{font-size:11px}.touch-controls{display:flex;justify-content:space-between;align-items:center;margin:19px 12px 0}.touch-controls .dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:5px}.touch-controls button{border:3px solid var(--cyan);border-radius:0;background:linear-gradient(160deg,var(--screen-light),var(--screen));color:var(--yellow);font-size:15px;box-shadow:3px 3px var(--ink);height:44px;transition:transform .1s,box-shadow .1s}.touch-controls button:active{transform:translate(2px,2px);box-shadow:1px 1px var(--ink);background:var(--screen-light)}.touch-controls [data-move=up]{grid-column:2;grid-row:1}.touch-controls [data-move=left]{grid-column:1;grid-row:2}.touch-controls [data-move=down]{grid-column:2;grid-row:2}.touch-controls [data-move=right]{grid-column:3;grid-row:2}.touch-controls .dash{width:56px;height:56px;background:linear-gradient(160deg,#fff6a0,#ffd94d);color:var(--ink);font-size:10px}.touch-controls .dash:active{background:#ffd94d}}
.stage-wrap{will-change:transform;contain:layout paint}.stage-wrap>canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block;width:100%;height:auto}
.overlay.pause{background:rgba(20,16,90,.78);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:8}
.overlay .secondary{margin-top:10px;background:linear-gradient(160deg,var(--screen),var(--black));color:var(--cyan);border:4px solid var(--cyan);box-shadow:4px 4px 0 var(--ink);padding:11px 14px;font-size:8px;letter-spacing:.2px;text-transform:uppercase;width:100%;transition:transform .1s,box-shadow .1s}
.overlay .secondary:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.overlay .secondary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
@media(max-width:600px){.overlay .secondary{font-size:7px;padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.touch-controls button,.sound-button,.overlay .secondary{transition:none}.stage-wrap{will-change:auto}}
.sound-cluster{display:flex;align-items:center;gap:8px}
.volume-slider{-webkit-appearance:none;appearance:none;width:88px;height:10px;background:linear-gradient(90deg,var(--cyan),var(--screen-light));border:3px solid var(--cyan);box-shadow:2px 2px 0 var(--ink);outline:none;cursor:pointer}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:22px;background:linear-gradient(160deg,var(--yellow),#ffd94d);border:3px solid var(--ink);box-shadow:1px 1px 0 var(--ink);cursor:grab}
.volume-slider::-moz-range-thumb{width:14px;height:22px;background:linear-gradient(160deg,var(--yellow),#ffd94d);border:3px solid var(--ink);box-shadow:1px 1px 0 var(--ink);cursor:grab}
.volume-slider:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.level-flash{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;background:radial-gradient(ellipse at center,rgba(255,246,160,.85) 0%,rgba(255,119,119,.45) 45%,transparent 75%);mix-blend-mode:screen}
.level-flash.flash{animation:levelFlash .7s ease-out forwards}
.stage-wrap.shake{animation:stageShake .4s cubic-bezier(.36,.07,.19,.97) both}
@keyframes levelFlash{0%{opacity:0;transform:scale(.85)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
@keyframes stageShake{10%,90%{transform:translate(-2px,0)}20%,80%{transform:translate(3px,-1px)}30%,50%,70%{transform:translate(-5px,1px)}40%,60%{transform:translate(5px,-2px)}}
@media(max-width:600px){.volume-slider{width:60px;height:8px}.volume-slider::-webkit-slider-thumb{width:10px;height:18px}.volume-slider::-moz-range-thumb{width:10px;height:18px}}
@media(prefers-reduced-motion:reduce){.level-flash.flash,.stage-wrap.shake{animation:none}}
.case-blurb{font-size:9px;line-height:1.45;color:var(--white);margin:0 0 10px;opacity:.88}
.level-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:2px 0 12px}
.level-tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 3px 5px;background:linear-gradient(160deg,var(--screen-light),var(--screen));border:3px solid var(--cyan);color:var(--white);box-shadow:2px 2px 0 var(--ink);font-size:6px;letter-spacing:.2px;text-transform:uppercase;transition:transform .1s,box-shadow .1s}
.level-tile b{font-size:12px;color:var(--yellow);line-height:1}
.level-tile span{font-size:5px;line-height:1.2}
.level-tile:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.level-tile:active{transform:translate(2px,2px);box-shadow:1px 1px var(--ink)}
.level-tile.active{background:linear-gradient(160deg,#fff6a0,#ffd94d);color:var(--ink);border-color:var(--ink);box-shadow:2px 2px 0 var(--red)}
.level-tile.active b,.level-tile.active span{color:var(--ink)}
@media(max-width:600px){.case-blurb{font-size:7px;margin-bottom:8px}.level-strip{gap:3px;margin:2px 0 8px}.level-tile{padding:5px 2px 4px;box-shadow:2px 2px var(--ink)}.level-tile b{font-size:10px}.level-tile span{font-size:5px}}
/* tighter case-file: less padding, smaller h1, blurb stays compact */
.case-file{padding:20px 22px 18px !important}
.case-file h1{font-size:clamp(20px,3vw,32px) !important}
.case-file .eyebrow{margin-bottom:8px !important}
.case-file .primary{margin:8px 0 12px !important;padding:12px 14px !important;font-size:10px !important}
.case-file small{font-size:10px !important}
/* Start-screen stickers stay inside the briefing frame. */
.case-file .sticker{width:72px;height:72px;padding:12px;font-size:6px;line-height:1.15;letter-spacing:-.35px;white-space:nowrap}
.case-file .sticker-one{top:auto;bottom:14px;right:14px}
.case-file .sticker-two{bottom:14px;left:14px}
.audio-toggle{width:68px;height:42px;padding:3px 2px;font-size:7px;line-height:1.35}
@media(max-width:600px){.audio-toggle{width:48px;height:34px;font-size:5px;line-height:1.35}}