@font-face{font-family:Corpid;src:url('../assets/My Collection/CorpidOffice Bold.ttf')}
@font-face{font-family:Matisse;src:url('../assets/My Collection/Fonts/MatissePro B.otf')}
*{box-sizing:border-box}
:root{color-scheme:dark}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#010711}
body{display:grid;place-items:center;font-family:Corpid,Arial,sans-serif;color:#edfaff;background:radial-gradient(circle at 50% 20%,#103b60,#020711 68%)}
button,a{font:inherit}
.breach-shell{width:min(100vw,160vh);max-width:1440px;padding:12px 22px 18px}
.breach-header{height:88px;display:grid;grid-template-columns:220px 1fr 250px;align-items:center;padding:8px 22px;background:linear-gradient(180deg,#eff8fa,#a7c6d1 70%,#41697b);border:2px solid #d7edf3;border-bottom-color:#e8c95f;color:#0d354f;box-shadow:0 8px 25px #0009}
.return-link{justify-self:start;padding:12px 17px;text-decoration:none;color:#fff;background:linear-gradient(#147aa7,#07496c);border:2px solid #d4f4fa;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.mission-copy{text-align:center}
.mission-copy small{color:#147ba1;letter-spacing:.28em;font-size:11px}
.mission-copy h1{margin:4px 0 0;font-family:Matisse,serif;font-weight:500;letter-spacing:.08em;font-size:31px}
.quartz-bank{justify-self:end;display:grid;grid-template-columns:54px 1fr;grid-template-rows:1fr 1fr;align-items:center;min-width:220px;padding:7px 14px;background:linear-gradient(#fff,#c9dce3);border:2px solid #638ba0;box-shadow:inset 0 0 0 2px #effaff}
.quartz-bank img{grid-row:1/3;width:46px;height:46px;object-fit:contain;image-rendering:pixelated}
.quartz-bank span{font-size:9px;letter-spacing:.18em;color:#2b6e89}
.quartz-bank strong{font-size:22px}
.game-frame{position:relative;width:100%;aspect-ratio:16/9;margin-top:12px;overflow:hidden;border:3px solid #e9d17b;outline:2px solid #3d6f85;background:#000;box-shadow:0 14px 45px #000b}
#breach-canvas{display:block;width:100%;height:100%;background:#031222;image-rendering:pixelated;outline:0}
.game-hud{position:absolute;z-index:4;left:18px;right:18px;top:16px;display:flex;justify-content:space-between;pointer-events:none;text-shadow:2px 2px #020916}
.life-panel,.objective-panel{padding:9px 13px;background:linear-gradient(90deg,#061a2ee8,#0e3852d2,transparent);border-left:3px solid #e9cd68}
.life-panel span,.objective-panel span{display:block;color:#9ae9fa;font-size:10px;letter-spacing:.18em}
#life-meter{display:flex;gap:4px;margin-top:6px}
#life-meter i{display:block;width:27px;height:8px;background:#45e4ee;border:1px solid #d9ffff;box-shadow:0 0 6px #2de6ff}
#life-meter i.empty{background:#132b38;border-color:#315262;box-shadow:none}
.objective-panel{text-align:right;background:linear-gradient(270deg,#061a2ee8,#0e3852d2,transparent);border-left:0;border-right:3px solid #e9cd68}
.objective-panel b{display:block;margin-top:4px;color:#ffe37d;font-size:20px}
.game-overlay{position:absolute;z-index:8;inset:0;display:grid;place-items:center;align-content:center;padding:40px;text-align:center;background:linear-gradient(#020a14a8,#020712e8),radial-gradient(circle,#16476580,transparent 55%);opacity:0;visibility:hidden;transition:opacity .25s}
.game-overlay.visible{opacity:1;visibility:visible}
.game-overlay small{color:#74dff4;letter-spacing:.35em}
.game-overlay h2{margin:13px 0;color:#fff7cf;font:38px/1.2 Matisse,serif;letter-spacing:.05em;text-shadow:0 3px #08101a,0 0 24px #5cdfff}
.game-overlay p{margin:0 0 20px;color:#c5e1e8;font:18px Georgia,serif}
.control-legend{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin:0 0 24px}
.control-legend span{padding:8px 11px;background:#071c2bd9;border:1px solid #47758b;color:#9abcc9;font-size:10px;letter-spacing:.08em}
.control-legend b{color:#ffe179}
.game-overlay button,.result-actions a{min-width:230px;padding:14px 24px;border:2px solid #fff1a3;background:linear-gradient(135deg,#ffcf48,#e75632 45%,#8e174f);color:#fff;text-decoration:none;text-shadow:0 2px #541631;box-shadow:inset 0 0 0 3px #9e3450,0 0 20px #ffb93277;cursor:pointer;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.result-overlay .reward-display{display:grid;grid-template-columns:68px auto;grid-template-rows:1fr 1fr;align-items:center;margin:0 0 22px;padding:10px 25px;background:#061828d9;border:2px solid #d7c36e}
.reward-display img{grid-row:1/3;width:58px;height:58px;image-rendering:pixelated}
.reward-display span{color:#fff08e;font-size:30px}
.reward-display b{font-size:11px;letter-spacing:.18em}
.result-actions{display:flex;gap:12px}
.result-actions a{display:grid;place-items:center;background:linear-gradient(#237ba0,#073b5a);box-shadow:inset 0 0 0 3px #176184}
.pause-label{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 38px;background:#020915e8;border:2px solid #f1d36d;font-size:27px;letter-spacing:.25em;opacity:0;pointer-events:none}
.pause-label.visible{opacity:1}
.touch-controls{display:none;position:absolute;z-index:6;left:15px;right:15px;bottom:16px;justify-content:space-between;pointer-events:none}
.touch-move,.touch-action{display:flex;gap:11px}
.touch-controls button{width:62px;height:62px;border:2px solid #b9eaf5;background:#082b42c9;color:#fff;border-radius:50%;font-size:24px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-action button{background:#5b174bc9;border-color:#ffe090}
footer{display:flex;justify-content:space-between;padding:10px 8px 0;color:#6fa0b2;font-size:9px;letter-spacing:.16em}
@media(pointer:coarse),(max-width:800px){.breach-shell{width:100vw;padding:0}.breach-header{height:62px;grid-template-columns:105px 1fr 125px;padding:5px 8px}.return-link{padding:8px;font-size:9px}.mission-copy h1{font-size:18px}.mission-copy small{font-size:7px}.quartz-bank{min-width:0;padding:4px 7px;grid-template-columns:35px 1fr}.quartz-bank img{width:32px;height:32px}.quartz-bank span{font-size:6px}.quartz-bank strong{font-size:15px}.game-frame{margin:0;border-width:2px}.touch-controls{display:flex}.game-hud{top:8px;left:8px;right:8px}.life-panel,.objective-panel{padding:5px 8px}.game-overlay{padding:20px}.game-overlay h2{font-size:24px}.game-overlay p{font-size:14px}.control-legend{display:none}footer{display:none}}
@media(max-height:650px){.breach-header{height:58px}.mission-copy h1{font-size:20px}.game-frame{width:min(100%,calc((100vh - 72px)*16/9));margin:0 auto}.breach-shell{padding-top:0;padding-bottom:0}footer{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}