@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;900&family=Inter:wght@400;600;800&display=swap');
:root{--ink:#06141b;--panel:#071e29;--cyan:#46e3ed;--orange:#ffb52e;--muted:#84a6af}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#02090d;color:#eafcff;font-family:Inter,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 15%,#0d3c49 0,transparent 48%),linear-gradient(#06141b,#02080b);z-index:-1}
main{width:min(1480px,100%);margin:auto;min-height:100vh;display:flex;flex-direction:column}
header,footer{height:76px;background:rgba(4,19,27,.96);display:flex;align-items:center;padding:0 28px;border-bottom:1px solid #1e5662}
.brand{display:flex;align-items:center;gap:13px}.mark{display:grid;place-items:center;width:45px;height:45px;border:2px solid var(--cyan);border-radius:50%;font-size:33px;color:var(--cyan);transform:rotate(-45deg)}
h1{font:900 29px/24px 'Barlow Condensed';letter-spacing:2px;margin:0}.brand p{margin:5px 0 0;font:700 10px Inter;color:var(--cyan);letter-spacing:3px}#status{margin-left:auto;color:#78e2a4;font:700 11px Inter;letter-spacing:2px}
#gameWrap{position:relative;flex:1;min-height:0;background:#05313f;box-shadow:inset 0 0 90px #000}canvas{display:block;width:100%;height:auto;aspect-ratio:1200/760;cursor:crosshair;touch-action:none}
#start{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle,transparent 0,rgba(0,9,13,.62) 70%);backdrop-filter:blur(2px)}
.panel{width:min(510px,88vw);padding:36px;text-align:center;background:rgba(4,20,27,.9);border:1px solid #3f8a94;box-shadow:0 25px 80px #000}.eyebrow{color:var(--cyan)!important;font:800 11px Inter;letter-spacing:3px}.panel h2{font:900 55px/.9 'Barlow Condensed';text-transform:uppercase;margin:16px 0}.panel p{color:#b9d4d9;line-height:1.55}.panel input{width:100%;padding:15px;background:#06141a;border:1px solid #39616a;color:white;font:700 17px Inter;outline:none}
.panel button,#unload{border:0;background:var(--orange);color:#151007;font:900 17px 'Barlow Condensed';letter-spacing:2px;padding:15px 30px;cursor:pointer}.panel button{width:100%;margin-top:12px}.panel small{display:block;color:#7999a0;margin-top:17px;font-size:10px}
#toast{position:absolute;top:18px;left:50%;transform:translateX(-50%) translateY(-70px);padding:10px 20px;background:#06141ce6;border-left:3px solid var(--orange);font:700 12px Inter;letter-spacing:1px;transition:.25s;z-index:3}#toast.show{transform:translateX(-50%) translateY(0)}
footer{height:86px;border-top:1px solid #22606c;border-bottom:0;gap:34px}footer>div{display:flex;flex-direction:column}footer b{font:900 28px 'Barlow Condensed';color:#fff}footer span{font:700 9px Inter;color:var(--muted);letter-spacing:2px}.cargo{flex:1}.cargo>b{font-size:15px;text-align:right;margin-top:-17px}.cargo em{font-style:normal;color:var(--orange)}.cargo strong{font:inherit;color:#eafcff}.bar{height:9px;margin-top:7px;background:#16333b;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#32ceda,var(--orange));transition:.2s}
#unload{margin-left:auto;font-size:14px;padding:12px 23px;transition:.2s}#unload:disabled{background:#263d43;color:#6e878c;cursor:not-allowed;filter:saturate(.25)}#unload.ready{animation:readyPulse 1.15s infinite;box-shadow:0 0 22px #ffb52e77}.cargo.catch-pulse{animation:catchPulse .58s ease}.cargo.catch-pulse .bar i{filter:brightness(1.7);box-shadow:0 0 16px var(--cyan)}
@keyframes catchPulse{0%{transform:scale(1)}38%{transform:scale(1.035)}100%{transform:scale(1)}}@keyframes readyPulse{50%{transform:translateY(-2px);box-shadow:0 0 34px #ffb52eaa}}
@media(max-width:700px){header{height:58px;padding:0 12px}h1{font-size:21px}.brand p,#status{font-size:8px}.mark{width:35px;height:35px}footer{height:70px;padding:0 12px;gap:13px}footer b{font-size:20px}.cargo>b{font-size:12px}#unload{padding:10px;font-size:11px}.panel{padding:24px}.panel h2{font-size:43px}}