@import url('data:text/css,');
:root{--ink:#102f36;--cream:#f5f0df;--teal:#43c5b2;--gold:#ffc76c;--muted:#9bb9b6}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#102f36;color:var(--cream);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button{font:inherit;cursor:pointer}#game-shell{position:relative;width:100%;height:100%;overflow:hidden;background:#183f48}canvas{display:block;width:100%;height:100%;touch-action:none}.topbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:22px;padding:18px 26px;background:linear-gradient(180deg,rgba(9,31,39,.83),rgba(9,31,39,0));z-index:3}.brandmark{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:900;letter-spacing:.18em;white-space:nowrap}.brandmark small{display:block;color:#8eb1ad;font-size:8px;letter-spacing:.17em;margin-top:3px}.brand-dot{width:11px;height:11px;border-radius:50%;background:var(--teal);box-shadow:0 0 15px #43c5b277}.progress-wrap{width:min(340px,40vw);margin-left:auto}.progress-copy{display:flex;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:.14em;color:#c7d7cf;margin-bottom:7px}.progress-track{height:4px;background:#ffffff28;border-radius:9px;overflow:hidden}.progress-track div{height:100%;width:0;background:var(--gold);border-radius:9px;transition:width .2s}.icon-button{border:1px solid #ffffff45;background:#163a43a8;color:#f5f0df;width:36px;height:36px;border-radius:50%;font-size:16px}.hint{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);padding:11px 16px;border:1px solid #ffffff38;border-radius:30px;background:#102f36c9;color:#e9eee5;font-size:12px;display:flex;align-items:center;gap:9px;white-space:nowrap;backdrop-filter:blur(8px)}.hint-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px #ffc76c}.overlay{position:absolute;inset:0;z-index:5;overflow:auto;background:linear-gradient(90deg,rgba(11,35,43,.97) 0%,rgba(11,35,43,.91) 46%,rgba(11,35,43,.12) 100%);display:flex;align-items:center}.overlay[hidden],.topbar[hidden],.hint[hidden],.touch-controls[hidden],.toast[hidden]{display:none!important}.title-content{width:min(600px,62vw);padding:clamp(24px,5vw,72px);position:relative;z-index:2}.eyebrow{font-size:9px;letter-spacing:.19em;font-weight:800;color:#9bc5bc;display:flex;align-items:center;gap:9px}.eyebrow span{width:20px;height:2px;background:var(--gold)}h1{font-size:clamp(80px,12vw,150px);line-height:.8;letter-spacing:-.09em;margin:30px 0 12px;font-weight:950;color:#f6f0dc}h1 span,h2 span{color:var(--teal)}.subtitle{font-size:clamp(13px,2vw,20px);letter-spacing:.32em;font-weight:800;color:var(--gold)}.lede{font-size:clamp(15px,1.7vw,19px);line-height:1.7;color:#c0d1c8;margin:28px 0 27px}.mode-label{font-size:9px;letter-spacing:.2em;color:#90aaa6;font-weight:800;margin-bottom:10px}.difficulty{display:grid;grid-template-columns:1fr;gap:7px;max-width:440px}.mode{display:grid;grid-template-columns:105px 65px 1fr;align-items:center;text-align:left;padding:11px 12px;border:1px solid #9ebdb333;background:#163941a8;color:#e9eee4;border-radius:7px;gap:8px}.mode strong{font-size:10px;letter-spacing:.1em}.mode span{font-size:9px;color:var(--gold);letter-spacing:.1em;font-weight:900}.mode small{font-size:10px;color:#a8c0b8;line-height:1.4}.mode.selected{border-color:var(--teal);background:#1a5554b0;box-shadow:inset 3px 0 var(--teal)}.primary,.secondary{display:block;width:100%;max-width:440px;padding:15px 18px;border-radius:5px;font-size:11px;font-weight:900;letter-spacing:.12em}.primary{margin-top:17px;background:var(--teal);color:#082e34;border:0;box-shadow:0 7px 24px #43c5b21a}.primary span{float:right;font-size:17px;line-height:10px}.primary:hover{background:#74e1ce;transform:translateY(-1px)}.secondary{margin-top:9px;border:1px solid #ffffff35;background:#ffffff0b;color:#e5eee3}.microcopy{font-size:9px;letter-spacing:.09em;line-height:1.9;color:#8eaaa5;margin-top:19px}.title-art{position:absolute;inset:0 0 0 45%;overflow:hidden;background:linear-gradient(#efb97a 0%,#b3b9a2 45%,#4e8a85 100%);clip-path:polygon(11% 0,100% 0,100% 100%,0 100%);opacity:.96}.sun{position:absolute;width:120px;height:120px;border-radius:50%;background:#ffdb91;right:20%;top:13%;box-shadow:0 0 80px #ffdb9166}.far-city,.near-city{position:absolute;inset:35% -2% 13%;background:repeating-linear-gradient(90deg,#315b60 0 27px,#476e6c 28px 31px,transparent 32px 47px);clip-path:polygon(0 35%,4% 35%,4% 10%,10% 10%,10% 44%,15% 44%,15% 20%,22% 20%,22% 0,27% 0,27% 51%,33% 51%,33% 27%,40% 27%,40% 43%,46% 43%,46% 12%,51% 12%,51% 52%,59% 52%,59% 22%,65% 22%,65% 40%,72% 40%,72% 4%,77% 4%,77% 47%,84% 47%,84% 29%,90% 29%,90% 12%,96% 12%,96% 45%,100% 45%,100% 100%,0 100%);opacity:.62}.near-city{inset:54% -4% 8%;background:#24545a;opacity:.9;clip-path:polygon(0 30%,12% 30%,12% 4%,22% 4%,22% 45%,35% 45%,35% 20%,44% 20%,44% 0,49% 0,49% 40%,63% 40%,63% 13%,73% 13%,73% 48%,83% 48%,83% 24%,91% 24%,91% 8%,100% 8%,100% 100%,0 100%)}.art-river{position:absolute;bottom:-8%;height:30%;left:-5%;right:-5%;background:linear-gradient(165deg,#367e7c,#174d5a 60%,#123d4a);transform:rotate(-4deg);border-top:2px solid #c6d1a566}.art-roof{position:absolute;background:#c77c51;border-top:5px solid #e4aa70;box-shadow:0 15px 30px #17383b55}.roof-a{right:-4%;bottom:15%;width:70%;height:28%;transform:skewY(-8deg)}.roof-b{left:7%;bottom:10%;width:44%;height:18%;background:#8b6550;transform:skewY(7deg)}.art-tank{position:absolute;right:16%;bottom:41%;width:75px;height:94px;border-radius:14px 14px 8px 8px;background:linear-gradient(90deg,#324f50,#62827a 35%,#36595a);border-top:6px solid #73978a;box-shadow:0 12px 20px #17383b55}.art-person{position:absolute;right:35%;bottom:30%;width:110px;height:180px;transform:rotate(-6deg)}.person-head{position:absolute;top:0;left:35px;width:31px;height:35px;background:#a96645;border-radius:45% 45% 40% 40%;box-shadow:inset -4px 0 #744a39}.person-body{position:absolute;top:31px;left:20px;width:58px;height:83px;background:#247e79;border-radius:13px 13px 7px 7px;transform:rotate(-8deg)}.person-arm{position:absolute;top:39px;left:65px;width:45px;height:13px;background:#a96645;border-radius:8px;transform:rotate(-48deg);transform-origin:left center}.person-bucket{position:absolute;right:-13px;top:5px;width:45px;height:45px;clip-path:polygon(7% 0,93% 0,79% 100%,20% 100%);background:linear-gradient(90deg,#087b79,#4bc2ad 60%,#16877f);font-size:6px;color:#eaffdd;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;letter-spacing:1px}.art-label{position:absolute;bottom:23px;right:28px;font-size:9px;letter-spacing:.2em;color:#f4e4b6}.bird{position:absolute;color:#345a58;font-size:42px;transform:rotate(-15deg)}.bird1{right:38%;top:27%}.bird2{right:31%;top:32%;font-size:28px}.modal{justify-content:center;background:rgba(7,27,34,.76);backdrop-filter:blur(12px);padding:20px}.modal-card{width:min(430px,100%);padding:clamp(25px,5vw,45px);background:#123940ed;border:1px solid #8bb7ac3d;border-radius:10px;box-shadow:0 30px 100px #06191f88}h2{font-size:clamp(36px,6vw,58px);line-height:.95;letter-spacing:-.06em;margin:20px 0 14px}.modal-card p{color:#b3cbc1;line-height:1.6;font-size:14px}.win-stats{display:flex;justify-content:space-between;margin:25px 0;padding:18px 0;border-block:1px solid #ffffff20}.win-stats div{display:flex;flex-direction:column;gap:6px}.win-stats strong{font-size:22px;color:var(--gold)}.win-stats small{font-size:8px;letter-spacing:.14em;color:#9cbab3}.touch-controls{position:absolute;z-index:4;bottom:15px;left:14px;right:14px;display:flex;align-items:end;gap:8px;pointer-events:none}.touch-controls button{pointer-events:auto;min-width:48px;height:48px;border-radius:50%;border:1px solid #ffffff55;background:#123940c9;color:#fff;font-weight:900;touch-action:none;backdrop-filter:blur(8px)}.touch-controls #touch-grab{margin-left:auto;border-radius:24px;width:76px;height:48px;background:#2e9e93e8;font-size:11px}.touch-controls #touch-jump{background:#d69b50;color:#17383d}.toast{position:absolute;z-index:6;top:88px;left:50%;transform:translateX(-50%);padding:10px 16px;background:#133c43e8;border:1px solid #9ed0c044;border-radius:5px;color:#f2e9ce;font-size:11px;letter-spacing:.06em;white-space:nowrap}@media(max-width:720px){.overlay{background:linear-gradient(90deg,rgba(11,35,43,.97),rgba(11,35,43,.76))}.title-content{width:100%;padding:28px 22px}.title-art{left:25%;opacity:.38;clip-path:none}.eyebrow{font-size:8px}h1{font-size:88px;margin-top:24px}.lede{margin:20px 0}.mode{grid-template-columns:95px 55px 1fr;padding:10px;gap:5px}.mode small{font-size:9px}.microcopy{font-size:8px}.topbar{padding:12px;gap:9px}.brandmark{font-size:11px}.brandmark small{font-size:7px}.progress-wrap{width:auto;flex:1;max-width:180px}.progress-copy{font-size:7px}.icon-button{width:32px;height:32px}.hint{bottom:78px;font-size:10px;max-width:90%;white-space:normal}.touch-controls{display:flex}.modal-card{padding:28px}.art-label{right:10px}}@media(max-height:720px) and (min-width:721px){.title-content{padding-top:25px;padding-bottom:20px}.eyebrow{font-size:8px}h1{font-size:85px;margin:20px 0 9px}.lede{margin:15px 0}.mode{padding:8px 11px}.primary{padding:12px}.microcopy{margin-top:10px}}

/* BALTI SIMULATOR refinement: editorial settings, tutorial and responsive controls */
.game-title{font-size:clamp(48px,7vw,88px);letter-spacing:-.075em;line-height:.92;white-space:nowrap;margin:26px 0 12px}.game-title span{display:block;font-size:.43em;letter-spacing:.16em;color:var(--teal);margin-top:10px}.settings-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;max-width:440px;margin-top:16px;padding-top:13px;border-top:1px solid #ffffff20;color:#a9c3bb;font-size:9px;letter-spacing:.1em}.settings-row label{display:flex;align-items:center;gap:8px}.settings-row input[type=range]{width:92px;accent-color:var(--teal)}.check-setting input{accent-color:var(--teal)}.text-button{border:0;background:transparent;color:var(--gold);font-size:9px;font-weight:900;letter-spacing:.1em;padding:6px 0}.tutorial-progress{font-size:9px;letter-spacing:.17em;color:var(--gold);padding:12px 0;border-top:1px solid #ffffff20;margin-top:15px}.modal-card h2{font-size:clamp(30px,5vw,48px)}#sound-btn,#music-btn{font-size:11px;font-weight:900}.touch-controls button:active{transform:scale(.96);background:#2e9e93}.mode:hover{border-color:#8bd6c8}.primary:focus-visible,.secondary:focus-visible,.mode:focus-visible,.icon-button:focus-visible,.text-button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:720px){.game-title{font-size:54px;margin:20px 0 10px}.game-title span{font-size:.38em}.settings-row{gap:10px;margin-top:11px}.settings-row label{font-size:8px}.settings-row input[type=range]{width:70px}.text-button{font-size:8px}.tutorial-progress{margin-top:10px}}
@media(max-height:780px) and (min-width:721px){.game-title{font-size:55px;margin:16px 0 7px}.game-title span{margin-top:5px}.settings-row{margin-top:9px;padding-top:8px}.lede{margin:14px 0}.microcopy{margin-top:10px}}

/* Local MP3 playlist controls */
.music-library{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px auto 0;max-width:660px}
.mp3-picker{display:inline-flex;align-items:center;justify-content:center;padding:10px 13px;border:1px solid #77b9a7;border-radius:9px;color:#e7f7ef;background:#153e43;font:700 10px/1.2 system-ui;letter-spacing:.08em;cursor:pointer}
#music-files{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#music-files:focus-visible+.music-control,.mp3-picker:focus-within{outline:2px solid #f4cf83;outline-offset:3px}
.music-control{font-size:10px!important;padding:10px 12px!important;min-height:34px}
#music-status{flex-basis:100%;margin:0;color:#a8c8bd;font:10px/1.4 system-ui;text-align:center;overflow-wrap:anywhere}
