@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Space+Mono:wght@700&display=swap');
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overflow:hidden;background:#00101d;color:#effcff;font-family:'Barlow Condensed',Impact,sans-serif}body{background:radial-gradient(circle at 50% 110%,#006f7b66,transparent 45%),#00101d}.shell{height:100dvh;padding:14px;display:grid;grid-template-rows:auto 1fr;gap:10px}header{display:flex;align-items:center;justify-content:space-between;padding:4px 14px;border-left:5px solid #ffc33d}header small{font:700 9px 'Space Mono';letter-spacing:.2em;color:#67cbd9}h1{font:900 clamp(30px,5vw,60px)/.85 'Barlow Condensed';margin:5px 0}h1 em{font-style:normal;color:#58f4ff;text-shadow:0 0 22px #3eeeff}button{font:900 16px 'Barlow Condensed';letter-spacing:.1em;color:white;border:1px solid #35cfe6;background:#002842d9;padding:12px 18px;cursor:pointer}button:hover,button:focus-visible{outline:2px solid #fff;background:#075b72}.window{position:relative;min-height:0;overflow:hidden;border:10px solid #73501f;background:#002844;border-radius:34px;box-shadow:inset 0 0 0 5px #d7a845,inset 0 0 40px #00101d,0 0 50px #00c8e733}.window:before,.window:after{content:"";position:absolute;z-index:3;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#d5bd7b,#6e4c18 60%,#271b0d);top:12px;box-shadow:0 calc(100dvh - 165px) #775522}.window:before{left:14px}.window:after{right:14px}.glass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#fff2 0 5%,transparent 12% 72%,#63eeff12 75%);mix-blend-mode:screen}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;inset:18px 25px auto;display:flex;justify-content:space-between;pointer-events:none}.hud>div{background:#001624d9;border:1px solid #28cfe5;padding:8px 14px;min-width:125px}.hud small{display:block;font:700 8px 'Space Mono';letter-spacing:.16em;color:#6bdbe9}.hud b{font-size:32px;color:#ffe36d}.hud span{color:#8ebcca}.hud div+div{text-align:right}.banner{position:absolute;z-index:5;inset:50% auto auto 50%;translate:-50% -50%;width:min(590px,90%);padding:30px;text-align:center;background:linear-gradient(150deg,#001725f0,#043f59e8);border:2px solid #68eefa;box-shadow:0 20px 70px #000d,0 0 40px #00d9ff4d;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}.banner.hidden{display:none}.banner small{font:700 9px 'Space Mono';letter-spacing:.2em;color:#62ecff}.banner h2{font-size:clamp(34px,6vw,63px);line-height:.88;margin:12px 0;color:#fff1bf}.banner p{font-size:19px;color:#b4dae1}.banner button{display:block;margin:20px auto 12px;background:linear-gradient(135deg,#ffd555,#e88921);color:#1d210c;border-color:#fff;font-size:22px}.banner span{font:700 8px 'Space Mono';color:#70a4b2}.message{position:absolute;left:50%;top:17%;translate:-50% -120px;transition:.3s;background:#00121de8;border:1px solid #65efff;padding:10px 22px;font:900 22px 'Barlow Condensed';letter-spacing:.08em}.message.show{translate:-50% 0}.sonar{position:absolute;right:26px;bottom:22px;width:76px;height:76px;border-radius:50%;padding:0;color:#6cf5ff;box-shadow:inset 0 0 0 7px #02445c,0 0 18px #38e8ff}.sonar span{display:block;font-size:10px}.window.ping:after{content:"";position:absolute;left:24%;top:55%;width:30px;height:30px;border:4px solid #75f7ff;border-radius:50%;animation:ping .9s ease-out;pointer-events:none;background:none;box-shadow:none}.mobile{position:absolute;inset:auto auto 20px 22px;display:none;pointer-events:none}.mobile button{pointer-events:auto;min-width:66px;min-height:53px;margin-right:5px}.mobile #bubble{background:#865016}@keyframes ping{to{scale:25;opacity:0}}@media(max-width:760px),(pointer:coarse){.shell{padding:5px}.window{border-width:6px}.mobile{display:flex}.sonar{width:62px;height:62px;bottom:18px;right:18px}.hud{inset:9px 12px auto}.hud>div{min-width:100px;padding:6px}.hud b{font-size:26px}.banner{padding:20px}.banner p{font-size:16px}header small{font-size:6px}header button{padding:8px}}
.glass{z-index:2}.hud,.message,.sonar,.mobile{z-index:4}.message{width:max-content;max-width:82%;text-align:center;font-size:clamp(16px,2.3vw,22px)}
.sub-sprite{position:absolute;z-index:2;left:0;top:0;width:175px;height:125px;object-fit:contain;pointer-events:none;transform-origin:center;filter:drop-shadow(0 10px 15px #00111faa);will-change:transform}
.brush-sprite{position:absolute;z-index:6;left:0;top:0;width:116px;height:116px;object-fit:contain;pointer-events:none;opacity:0;transform-origin:center;filter:drop-shadow(0 0 14px #34edff);will-change:transform,opacity;transition:opacity .12s}
.brush-sprite.show{opacity:1}
.paint-guide{position:absolute;z-index:4;left:50%;bottom:18px;translate:-50% 0;padding:8px 15px;background:#001421d9;border:1px solid #33e8ff;font:700 9px 'Space Mono';letter-spacing:.08em;color:#b8e7ee;pointer-events:none;box-shadow:0 0 20px #00d9ff35;white-space:nowrap}.paint-guide b{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#27e8ff;color:#00202d}.paint-guide i{font-style:normal;color:#ffcb45;margin:0 5px}.paint-guide strong{color:#fff1a8}
@media(max-width:760px),(pointer:coarse){.brush-sprite{width:88px;height:88px}.paint-guide{bottom:82px;font-size:7px;padding:6px 9px}}