/* Sunny island harbor: scenery and interactive objects remain separate layers. */
body{background:#168fa6 url('./island-bay.webp') center 47% / cover fixed}
body::before{content:"";position:fixed;inset:0;background:#164b5728;backdrop-filter:blur(8px);pointer-events:none}
#game{background:#45c3c5 url('./island-bay.webp') center / 100% 100% no-repeat;padding:13px 18px 9px;box-shadow:0 20px 90px #003f5d66;border-color:#f8e4af;isolation:isolate}
#game::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff4c51c 0,transparent 27%,#006e8b0a 62%,transparent 88%);pointer-events:none;z-index:-1}
.topbar{height:49px;align-items:start;position:relative;z-index:3}
.wordmark{gap:7px;font-size:20px;font-weight:900;letter-spacing:2px;color:#24694f;padding:6px 11px 7px 7px;border:1px solid #f4dc97;border-radius:10px 10px 17px 10px;background:linear-gradient(110deg,#fff8dcfa,#fff2cde8);box-shadow:0 3px 0 #a47e43a6,0 6px 16px #356a4730;transform:rotate(-1deg)}
.logo-mark{background:linear-gradient(#299b7b,#167b69);box-shadow:inset 0 2px #7ac8a1,0 2px #306e50;width:33px;height:33px;border-radius:9px;font-size:35px;color:#fff6c9}
.wordmark small{color:#7b956b;letter-spacing:1.8px;font-size:7px;margin-top:3px}
.header-actions{padding-top:4px;gap:8px}
.icon-button{width:38px;height:38px;color:#80622b;background:radial-gradient(circle at 35% 25%,#fff9dd,#f4d48a);border:2px solid #fdf2c3;box-shadow:0 3px #aa7b3e,0 4px 9px #1962683d}
.island-panorama{height:88px;flex:none;position:relative;pointer-events:none}
.panorama-gull{position:absolute;left:44%;top:3px;font-size:27px;color:#fff9df;text-shadow:0 2px 3px #267c8a4a;transform:rotate(-15deg);opacity:.9}
.island-flagline{position:absolute;right:0;bottom:8px;display:flex;gap:4px;transform:rotate(-9deg);border-top:1px solid #f8e5b2;padding-top:0;filter:drop-shadow(0 2px 1px #174e6840)}
.island-flagline i{display:block;width:11px;height:15px;background:#ef7c64;clip-path:polygon(0 0,100% 0,50% 100%)}
.island-flagline i:nth-child(2){background:#f7d564}.island-flagline i:nth-child(3){background:#7dc4a0}.island-flagline i:nth-child(4){background:#7baeda}.island-flagline i:nth-child(5){background:#c6a3db}.island-flagline i:nth-child(6){background:#f2a76b}
.voyage{background:linear-gradient(110deg,#fff7dceF,#fff3d5e8);border:1px solid #e9cd8a;border-radius:11px;padding:9px 12px 8px;margin:0 2px 8px;gap:5px 8px;box-shadow:0 3px 0 #9e753d91,0 4px 15px #1e625c22;position:relative;z-index:2}
.voyage::before,.voyage::after{content:"";position:absolute;top:8px;width:4px;height:4px;border-radius:50%;background:#bc995e;box-shadow:inset 0 1px #876c3d,0 1px #fff6dc}.voyage::before{left:4px}.voyage::after{right:4px}
.eyebrow{color:#688350;font-size:9px;letter-spacing:1.5px}h1{font-size:17px;color:#32614e;margin-top:3px}h1 span{color:#91a17b;font-size:9px}
.progress-number strong{color:#1c8e77;font-size:25px}.progress-number>span{color:#7a8b68}.progress-number small{color:#8b986f;font-size:8px}
.progress-track{height:5px;background:#dacda0;box-shadow:inset 0 1px 2px #92723b26}.progress-track i{background:linear-gradient(90deg,#43a97a,#92d496);box-shadow:0 0 4px #f8efba66}
.harbor{flex-basis:223px;background:linear-gradient(180deg,#40c2bb09,#178c9f12);box-shadow:none;border-radius:15px;border:0;padding:7px 8px 0;overflow:visible}
.harbor:before,.harbor:after{display:none}
.queue-heading{position:relative;z-index:2}.queue-heading #next-route{padding:5px 9px;border-radius:7px 7px 9px 7px;background:#fff7daf5;border:1px solid #edc984;box-shadow:0 2px #96734996;font-size:11px;transform:rotate(-1deg)}
.queue-count{background:#fff7dbdb;color:#547c64;padding:4px 7px;border-radius:6px;box-shadow:0 2px #bcaa7b50;font-size:8px}
.pier{height:65px;margin-top:5px;isolation:isolate}
.pier-planks{height:31px;bottom:3px;left:-14px;right:-14px;border-radius:7px;background:repeating-linear-gradient(90deg,transparent 0 29px,#9c6a3580 30px,#e8c382 31px,#ffdfa352 33px),linear-gradient(180deg,#eed7a1,#dbb374 45%,#c39150);border-top:3px solid #fff2c8;border-bottom:5px solid #a87d44;box-shadow:0 5px #2a777a55,0 8px 9px #006e8b24;z-index:-1}
.pier-planks::before,.pier-planks::after{content:"";position:absolute;width:8px;height:41px;border-radius:4px;background:linear-gradient(90deg,#a9763d,#e7bc7a 40%,#bb8d4c);border-top:3px solid #ffe4ad;top:-4px;box-shadow:2px 3px #3b76654a}.pier-planks::before{left:5px}.pier-planks::after{right:5px}
.pier-rope{border-bottom:2px solid #fff0c3;background:repeating-linear-gradient(90deg,transparent 0 44px,#eac085 45px,#fff0c0 47px,#bd9057 49px,transparent 50px);height:15px;bottom:1px;left:0;right:0;filter:drop-shadow(0 2px 1px #72512466);z-index:1}
#tourists{bottom:17px;filter:drop-shadow(1px 2px 1px #725e3840)}
.front-label{color:#fffbe4;text-shadow:0 1px 2px #2e7f78,0 0 4px #246d65;font-size:9px;bottom:35px}
.berth-label{color:#fff9d6;text-shadow:0 1px 2px #286e68;font-weight:750;font-size:9px;margin:6px 1px 7px}.berth-label>span:last-child{background:#126c795c;padding:3px 6px;border-radius:6px}
.berths{height:77px;gap:10px;padding:0 3px}.berth{height:75px;border:1.5px dashed #fff7c8c7;background:linear-gradient(#def9df20,#8ee7cf16);border-radius:7px 7px 15px 15px;box-shadow:inset 0 0 15px #b5ffea1f,0 4px 8px #117d8633}
.berth::before{content:"";position:absolute;left:-5px;top:-10px;width:6px;height:65px;border-radius:3px;background:repeating-linear-gradient(180deg,#d0a062 0 12px,#a8763e 13px,#f0cd8f 15px);box-shadow:0 3px #725b3580,1px 0 #ffe1aa}
.berth:last-child::after{content:"";position:absolute;right:-5px;top:-10px;width:6px;height:65px;border-radius:3px;background:repeating-linear-gradient(180deg,#d0a062 0 12px,#a8763e 13px,#f0cd8f 15px);box-shadow:0 3px #725b3580,1px 0 #ffe1aa}
.berth .berth-number{font-size:19px;font-weight:600;color:#efffda94;text-shadow:0 1px #228b91}
.berth.occupied{border-color:#ffebaa;background:linear-gradient(#fff2cc69,#fff2cc20);box-shadow:0 2px 12px #ffefb543,inset 0 0 10px #ffefbc30}
.berth .docked-ship{height:73px;width:35px;filter:drop-shadow(1px 3px 2px #146d7970)}
.load-label{background:#fff2cb;color:#6c6840;border:1px solid #e8bf7d;box-shadow:0 2px #38746d77;border-radius:5px;font-size:9px;padding:2px 7px;bottom:-7px}
.yard-section{padding-top:5px;min-height:180px;position:relative}.yard-heading{height:26px;padding-bottom:7px;color:#fff7d9;text-shadow:0 1px 3px #176e76;font-size:11px}.yard-heading h2{background:#1e7b7d77;padding:4px 9px;border-radius:6px;font-size:10px;box-shadow:0 1px #b4f1cd35}.yard-heading h2 span{color:#daf4d4;font-size:8px}.compass{color:#fff5cc;text-shadow:0 1px 2px #176977;background:#347d7370;padding:4px 7px;border:1px solid #c6f3d666;border-radius:50%;font-size:9px}
#yard{min-height:145px;border:1px solid #d8ffdc4a;border-radius:19px;background:linear-gradient(#60f3db08,#046f961a);box-shadow:inset 0 0 22px #2a899017,0 2px #e0ffcc22;overflow:hidden}
.sea-art{opacity:.42}.boat{filter:drop-shadow(1px 3px 2px #076e864d)}.boat:hover{filter:brightness(1.08) drop-shadow(0 0 5px #fff8a4)}
.feedback{height:29px;font-size:10px;color:#fff8dc;text-shadow:0 1px 3px #176b70,0 0 8px #206f7440;font-weight:650}.feedback.warning{color:#fff0ba;background:#bb5c3a96;border-radius:7px;text-shadow:none}
.tools{gap:9px;padding:0 1px}.tools button{height:61px;border:1px solid #ffe8b1;border-radius:10px;background:repeating-linear-gradient(0deg,transparent 0 15px,#b58b4522 16px,transparent 18px),linear-gradient(#fce9b5,#edcc8e);box-shadow:0 4px #a5763c,0 6px 10px #1b6e6f66;grid-template-columns:27px 1fr;padding:8px 8px;position:relative}.tools button::before,.tools button::after{content:"";position:absolute;top:7px;bottom:7px;width:2px;background:#c4924b66;border-radius:4px;box-shadow:1px 0 #fff3c86e}.tools button::before{left:4px}.tools button::after{right:4px}
.tools button:nth-child(2){background:repeating-linear-gradient(0deg,transparent 0 15px,#b7833526 16px,transparent 18px),linear-gradient(#ffe7a7,#f2c366);border-color:#ffe8a8;box-shadow:0 4px #a7762d,0 6px 10px #1b6e6f66}
.tools button>span{color:#2d866b;filter:drop-shadow(0 1px #fff2c6)}.tools button:nth-child(2)>span{color:#9f742f}.tools strong{color:#4b674a;font-size:11px}.tools small{color:#907c4f;font-size:8px}.tools button:disabled{opacity:.6}
.signature{color:#fff3c8cf;text-shadow:0 1px 2px #126a73;padding-top:12px;letter-spacing:1px;font-size:6px}.signature span{color:#fff0ad}
dialog{background:#fff7df;border:2px solid #fff0c4;box-shadow:0 20px 100px #074e7580;overflow-x:hidden;border-radius:22px}dialog::backdrop{background:#06546865;backdrop-filter:blur(5px)}
.modal-art{width:calc(100% + 48px);height:135px;margin:-28px -24px 23px;background:#61c8c7 url('./island-bay.webp') center top / 100% auto;border-radius:0 0 45% 8%;position:relative;box-shadow:0 5px #e9d3a04d}
.modal-art>svg,.modal-art .art-mark{display:none}.modal-eyebrow{color:#8d9b74;letter-spacing:1.7px}.modal-content h2{color:#2e715c;font-size:29px;font-weight:900;text-shadow:0 2px #fffdf0}.modal-description{color:#7c9270}.modal-close{z-index:2;background:#fff1c8e8;color:#8c6f3c;box-shadow:0 2px #c79b5e}
.primary{background:linear-gradient(#31a284,#19856d);border:1px solid #3eaf88;box-shadow:0 4px #146c59,inset 0 1px #a0db9b66;color:#fff6d2;letter-spacing:.5px}.secondary{background:linear-gradient(#fff1cc,#f0ddac);color:#7d7b51;border:1px solid #e8d19c;box-shadow:0 2px #d6bc87}.howto b{background:#e5edd5;color:#619673}.stats>div{background:#f4eac9;border:1px solid #e4d3a1}.stats strong{color:#358e71}.text-action{color:#8c936b}.level-grid button{background:#efe4bd;color:#8d895e;box-shadow:0 2px #d5bd86}.level-grid button.cleared{background:#cae4b3;color:#3c8b62;box-shadow:0 2px #a6c286}.level-grid button.current{background:#2d9d7d;color:#fff4ce;box-shadow:0 2px #1f735a}
#orientation{background:#35b7c4 url('./island-bay.webp') center / cover;color:#fff5d3;text-shadow:0 2px 6px #125a6880}#orientation>div{color:#fff1ba!important}#orientation h2{color:#fff7d8}#orientation p{color:#fff5d3!important;background:#1e6b6a77;padding:8px 13px;border-radius:10px}
#boot-status{background:#48bcc6 url('./island-bay.webp') center / cover;color:#fff9dc;text-shadow:0 2px 5px #196d77;font-weight:700}.boot-ring{border-color:#fff5cc65;border-top-color:#fff4bc}
@media(max-height:820px){.island-panorama{height:65px}.harbor{flex-basis:208px}.pier{height:59px}.berths,.berth{height:70px}.berth .docked-ship{height:67px}.berth::before,.berth:last-child::after{height:60px}.yard-section{min-height:155px}.tools button{height:56px}.voyage{padding-top:7px;padding-bottom:6px}.feedback{height:26px}}
@media(max-height:700px){.island-panorama{height:40px}.topbar{height:43px}.wordmark{font-size:17px}.wordmark small{font-size:6px}.logo-mark{width:29px;height:29px;font-size:30px}.icon-button{width:33px;height:33px}.harbor{flex-basis:195px}.tools button{height:51px}.signature{padding-top:8px}.voyage h1{font-size:14px}.voyage .eyebrow{font-size:8px}.yard-section{min-height:140px}}
@media(max-height:650px){#game{padding:7px 12px 7px}.island-panorama{height:29px}.topbar{height:38px}.header-actions{padding-top:2px}.wordmark{font-size:15px;padding:4px 8px 4px 5px}.wordmark small{font-size:6px}.logo-mark{width:25px;height:25px;font-size:27px}.icon-button{width:30px;height:30px}.voyage{padding:6px 9px 5px;margin-bottom:5px;gap:4px}.voyage h1{font-size:13px}.voyage .progress-number strong{font-size:20px}.harbor{flex-basis:170px;padding:4px 5px 0}.queue-heading #next-route{font-size:9px;padding:4px 6px}.queue-count{font-size:7px;padding:3px 5px}.pier{height:43px;margin-top:5px}.pier-planks{height:23px}.pier-planks::before,.pier-planks::after{height:30px}.pier-rope{bottom:0}#tourists{bottom:13px}.front-label{bottom:18px}.berth-label{font-size:8px;margin:4px 0 5px}.berth-label>span:last-child{padding:2px 5px}.berths,.berth{height:57px}.berths{gap:8px}.berth .docked-ship{height:54px;width:28px}.berth::before,.berth:last-child::after{height:49px;width:5px}.berth .berth-number{font-size:16px}.load-label{font-size:8px;bottom:-5px;padding:1px 5px}.yard-section{min-height:120px;padding-top:4px}.yard-heading{height:23px}.yard-heading h2{font-size:9px;padding:3px 7px}.compass{padding:3px 5px;font-size:8px}#yard{min-height:95px}.feedback{font-size:8px;height:24px}.tools{gap:7px}.tools button{height:47px;padding:6px 7px;grid-template-columns:22px 1fr}.tools strong{font-size:9px}.tools small{font-size:6px}.tools svg{width:21px;height:21px}.signature{display:none}.modal-art{height:85px;margin:-16px -22px 18px;width:calc(100% + 44px)}.modal-content h2{font-size:23px}}
@media(min-width:740px){#game{border-width:3px;border-radius:24px}.topbar{margin-top:0}.island-panorama{height:88px}}
@media(min-width:740px) and (max-height:650px){.island-panorama{height:29px}}
@media(max-width:370px){.wordmark{font-size:17px}.header-actions{gap:6px}.tools{gap:6px}.tools button{padding-left:6px;padding-right:6px}.tools strong{font-size:10px}.tools small{font-size:7px}}