:root{color:#eafcff;background:#061924;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow:hidden}button{align-items:center;background:#eafcff;border:0;border-radius:8px;color:#062330;cursor:pointer;display:inline-flex;font:inherit;font-weight:800;gap:8px;justify-content:center;min-height:42px;padding:10px 14px;transition:transform .14s ease,background .14s ease}button:hover{background:#baf3ff;transform:translateY(-1px)}.app-shell{align-items:center;background:linear-gradient(180deg,#0e647c9e,#061924f5),#061924;display:flex;height:100vh;justify-content:center;padding:14px}.game-panel{background:#041721b8;border:1px solid rgba(208,248,255,.16);border-radius:8px;box-shadow:0 24px 80px #00000040}.game-panel{display:flex;flex-direction:column;height:min(720px,calc(100vh - 28px));max-width:1180px;min-width:0;padding:14px;width:min(1180px,100%)}.title-row,.meter-label,.icon-title,.button-row{align-items:center;display:flex}.menu-board{background:#02111994;border:1px solid rgba(208,248,255,.14);border-radius:8px;margin-top:14px;padding:12px}.route-grid,.animal-grid{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}.route-card,.animal-select-card{align-items:flex-start;background:#ffffff14;border:1px solid rgba(208,248,255,.14);color:#eafcff;display:grid;gap:5px;justify-content:stretch;min-height:86px;padding:9px;text-align:left}.route-card:hover,.route-card.selected,.animal-select-card:hover,.animal-select-card.selected{background:#83ddea2e;border-color:#83ddea8f}.route-card strong,.animal-select-card strong{color:#fff;font-size:.92rem}.route-card span,.route-card small,.animal-select-card span,.animal-select-card small{color:#b8dce3;font-size:.76rem;line-height:1.25}.route-card small,.animal-select-card small{color:#ffdd8b;font-weight:800}.pixel-badge{border:2px solid rgba(232,252,255,.48);border-radius:4px;display:block;height:24px;image-rendering:pixelated;width:42px}.title-row{gap:14px;justify-content:space-between;margin-bottom:10px}.title-actions{align-items:center;display:flex;gap:10px}.eyebrow{color:#83ddea;font-size:.74rem;font-weight:800;letter-spacing:0;margin:0 0 4px;text-transform:uppercase}h1,h2,p{margin:0}h1{font-size:clamp(1.8rem,3.4vw,3.6rem);line-height:.92}h2{font-size:1rem;line-height:1.2}p{color:#b8dce3;font-size:.92rem;line-height:1.45}.status-pill{align-items:center;background:#ef5f7f29;border:1px solid rgba(239,95,127,.42);border-radius:999px;color:#ffd7e1;display:inline-flex;flex:0 0 auto;font-size:.82rem;font-weight:800;gap:8px;padding:9px 12px}.canvas-wrap{background:#061924;border:1px solid rgba(208,248,255,.18);border-radius:8px;display:flex;flex:1;justify-content:center;min-height:0;overflow:hidden;position:relative}canvas{aspect-ratio:5 / 3;display:block;height:100%;image-rendering:pixelated;object-fit:contain;touch-action:none;width:100%}.controls-strip{align-items:center;background:#021119b8;bottom:0;color:#d8f8ff;display:flex;font-family:Courier New,monospace;font-size:.82rem;font-weight:800;gap:16px;justify-content:space-between;left:0;padding:9px 12px;position:absolute;right:0}.mission-overlay{background:#021119c7;border:1px solid rgba(208,248,255,.2);border-radius:8px;display:flex;flex-direction:column;height:min(500px,calc(100% - 72px));left:50%;max-width:900px;overflow:hidden;padding:0;position:absolute;right:auto;top:50%;transform:translate(-50%,-50%);width:min(900px,calc(100% - 32px))}.mission-overlay h2{color:#fff;font-size:1.05rem}.mission-scroll{display:grid;gap:9px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px}.mission-header{align-items:start;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) 108px}.animal-preview{background:#83ddea24;border:1px solid rgba(208,248,255,.24);border-radius:8px;height:86px;image-rendering:pixelated;position:relative;width:108px}.preview-body,.preview-head,.preview-tail,.preview-fin,.preview-eye,.preview-shell{position:absolute}.animal-preview.turtle .preview-body{background:#70c27a;height:40px;left:35px;top:24px;width:38px}.animal-preview.turtle .preview-shell{background:#1e5d4f;height:28px;left:41px;top:30px;width:26px}.animal-preview.turtle .preview-head{background:#74c87d;height:18px;left:70px;top:35px;width:18px}.animal-preview.turtle .preview-tail{background:#d8b76b;height:14px;left:24px;top:38px;width:14px}.animal-preview.turtle .preview-fin{background:#2f8f74;height:10px;width:24px}.animal-preview.turtle .preview-fin.top{left:26px;top:20px}.animal-preview.turtle .preview-fin.bottom{left:26px;top:59px}.animal-preview.vaquita .preview-body,.animal-preview.whaleShark .preview-body{height:30px;left:30px;top:28px;width:52px}.animal-preview.vaquita .preview-body{background:#b9d6df}.animal-preview.whaleShark .preview-body{background:#6fa9c6}.animal-preview.vaquita .preview-head,.animal-preview.whaleShark .preview-head{height:22px;left:75px;top:32px;width:18px}.animal-preview.vaquita .preview-head{background:#b9d6df}.animal-preview.whaleShark .preview-head{background:#6fa9c6}.animal-preview.vaquita .preview-tail,.animal-preview.whaleShark .preview-tail{height:18px;left:18px;top:34px;width:16px}.animal-preview.vaquita .preview-tail,.animal-preview.vaquita .preview-fin{background:#596d75}.animal-preview.whaleShark .preview-tail,.animal-preview.whaleShark .preview-fin{background:#244c68}.animal-preview.vaquita .preview-fin,.animal-preview.whaleShark .preview-fin{height:9px;left:42px;width:24px}.animal-preview.vaquita .preview-fin.top,.animal-preview.whaleShark .preview-fin.top{top:20px}.animal-preview.vaquita .preview-fin.bottom,.animal-preview.whaleShark .preview-fin.bottom{top:57px}.animal-preview.whaleShark .preview-shell{background:#e8fcffbf;height:5px;left:45px;top:36px;width:5px;box-shadow:12px 0 #e8fcffbf,24px 0 #e8fcffbf,6px 10px #e8fcffbf,18px 10px #e8fcffbf}.preview-eye{background:#062931;height:4px;left:84px;top:38px;width:4px}.mission-scroll::-webkit-scrollbar{width:10px}.mission-scroll::-webkit-scrollbar-thumb{background:#83ddea6b;border-radius:999px}.overlay-section,.obstacle-list{display:grid;gap:8px}.obstacle-row{align-items:center;background:#ffffff12;border:1px solid rgba(208,248,255,.13);border-radius:8px;display:grid;gap:12px;grid-template-columns:58px minmax(0,1fr);min-height:72px;padding:10px}.obstacle-row strong{color:#fff;display:block;font-size:.9rem;margin-bottom:3px}.obstacle-row p{font-size:.78rem;line-height:1.35}.obstacle-sprite{background:#061924d1;border:2px solid rgba(232,252,255,.36);border-radius:6px;display:block;height:50px;image-rendering:pixelated;overflow:hidden;position:relative;width:50px}.obstacle-sprite span{display:block;position:absolute}.obstacle-sprite.net{background:repeating-linear-gradient(45deg,rgba(232,252,255,.5) 0 3px,transparent 3px 9px),repeating-linear-gradient(-45deg,rgba(232,252,255,.34) 0 3px,transparent 3px 9px),#0e4c5be0}.obstacle-sprite.net .sprite-mark-a{background:#ffcf5d;height:8px;left:7px;top:34px;width:34px}.obstacle-sprite.bag{background:#14394a}.obstacle-sprite.bag .sprite-mark-a{background:#e8fcffc7;height:28px;left:13px;top:16px;width:23px}.obstacle-sprite.bag .sprite-mark-b{border:4px solid rgba(232,252,255,.78);border-bottom:0;height:13px;left:17px;top:8px;width:15px}.obstacle-sprite.boat,.obstacle-sprite.vesselStrike,.obstacle-sprite.tourism{background:#12364b}.obstacle-sprite.boat .sprite-mark-a,.obstacle-sprite.vesselStrike .sprite-mark-a,.obstacle-sprite.tourism .sprite-mark-a{background:#ff6f7c;height:12px;left:7px;top:25px;width:36px}.obstacle-sprite.boat .sprite-mark-b,.obstacle-sprite.vesselStrike .sprite-mark-b,.obstacle-sprite.tourism .sprite-mark-b{background:#eafcff;height:10px;left:22px;top:16px;width:14px}.obstacle-sprite.oil{background:#12364b}.obstacle-sprite.oil .sprite-mark-a{background:#17191b;height:18px;left:7px;top:24px;width:36px}.obstacle-sprite.oil .sprite-mark-b{background:#7d4bff;height:7px;left:16px;top:21px;width:18px}.obstacle-sprite.hook{background:#102f40}.obstacle-sprite.hook .sprite-mark-a{border:5px solid #dce7ea;border-left:0;border-top:0;height:27px;left:16px;top:8px;width:18px}.obstacle-sprite.cleanup,.obstacle-sprite.reef{background:#0f4f50}.obstacle-sprite.cleanup .sprite-mark-a,.obstacle-sprite.reef .sprite-mark-a{background:#58d186;height:24px;left:13px;top:18px;width:24px}.obstacle-sprite.bycatch,.obstacle-sprite.fisheries{background:repeating-linear-gradient(90deg,rgba(255,207,93,.42) 0 5px,transparent 5px 12px),#12364b}.obstacle-sprite.bycatch .sprite-mark-a,.obstacle-sprite.fisheries .sprite-mark-a{background:#dce7ea;height:8px;left:8px;top:28px;width:34px}.obstacle-sprite.finning{background:#12364b}.obstacle-sprite.finning .sprite-mark-a{background:#8bbccc;height:32px;left:20px;top:8px;transform:skew(-18deg);width:14px}.obstacle-sprite.finning .sprite-mark-b{background:#ff6f7c;height:8px;left:11px;top:34px;width:28px}.obstacle-sprite.climateChange{background:#49233a}.obstacle-sprite.climateChange .sprite-mark-a{background:#ffcf5d;height:22px;left:14px;top:8px;width:22px}.obstacle-sprite.climateChange .sprite-mark-b{background:#ff6f7c;height:10px;left:8px;top:34px;width:34px}.overlay-footer{background:#021119e6;border-top:1px solid rgba(208,248,255,.16);display:flex;flex:0 0 auto;padding:8px 14px}.menu-nav{display:grid;gap:8px;grid-template-columns:minmax(110px,.35fr) minmax(0,1fr);width:100%}.overlay-start{width:100%}.compact-action{width:fit-content}.secondary-action{background:#e8fcff24;border:1px solid rgba(232,252,255,.24);color:#eafcff}.secondary-action:hover{background:#e8fcff38}.animal-card{align-items:center;display:grid;gap:12px;grid-template-columns:78px 1fr}.animal-avatar{background:#0f5d74;border:2px solid rgba(232,252,255,.3);border-radius:8px;height:74px;image-rendering:pixelated;position:relative;width:74px}.shell,.head,.flipper{position:absolute}.shell{background:#1e5d4f;border:7px solid #73c47c;height:38px;left:18px;top:18px;width:38px}.head{background:#79cf7d;height:18px;right:7px;top:28px;width:17px}.flipper{background:#2e8d73;height:11px;width:20px}.flipper-a{left:10px;top:16px}.flipper-b{left:10px;top:47px}.stats-grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid div,.fact-box,.fund-box,.meter-block,.summary-box{background:#ffffff12;border:1px solid rgba(208,248,255,.12);border-radius:8px;padding:12px}.stats-grid span{color:#8fdce8;display:block;font-size:.74rem;font-weight:800;text-transform:uppercase}.stats-grid strong{color:#fff;display:block;font-size:1.45rem;line-height:1.1;margin-top:6px}.meter-label{color:#c6f4fb;font-size:.82rem;font-weight:800;justify-content:space-between;margin-bottom:8px}.meter{background:#02121ab8;border-radius:8px;height:12px;overflow:hidden}.meter div{background:linear-gradient(90deg,#58d186,#ffcf5d);height:100%;transition:width .18s ease}.meter.donation div{background:linear-gradient(90deg,#83ddea,#ff9fcd)}.meter.pollution div{background:linear-gradient(90deg,#83ddea,#ffcf5d,#ff6f7c)}.meter-note{font-size:.8rem;margin-top:8px}.icon-title{color:#eafcff;gap:8px;margin-bottom:8px}.button-row{gap:9px}.button-row button{flex:1}.primary{background:#ffcf5d}.primary:hover{background:#ffe08c}.fund-box{display:grid;gap:10px}.action-line{color:#ffdd8b;font-weight:800;margin-top:8px}.lesson-list{color:#d8f8ff;display:grid;font-size:.84rem;gap:6px;line-height:1.35;margin:0;padding-left:18px}.summary-box{border-color:#58d18652}.summary-box p+p{margin-top:6px}@media(max-width:980px){.route-grid,.animal-grid{grid-template-columns:1fr}}@media(max-width:620px){.app-shell{padding:10px}.title-row,.controls-strip,.button-row{align-items:stretch;flex-direction:column}.menu-nav{grid-template-columns:1fr}.obstacle-row{grid-template-columns:50px minmax(0,1fr);padding:8px}.status-pill{width:fit-content}.mission-header{grid-template-columns:1fr}.animal-preview{justify-self:end}}