/* Illustrated title screen. No rendering loop, remote fonts or blocking image decode. */
#welcome{position:fixed;inset:0;z-index:9;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:auto;background:#f7f3e6;color:#173f40;box-shadow:none;backdrop-filter:none;font-family:Arial,Helvetica,sans-serif;isolation:isolate}
#welcome .welcome-art{position:absolute;inset:0 0 0 27%;z-index:-3;overflow:hidden;background:#85d9de}
#welcome .welcome-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:65% 50%}
#welcome .welcome-wash{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#f7f3e6 0%,#f7f3e6 29%,#f7f3e6ed 36%,#f7f3e68c 45%,#f7f3e600 60%)}
#welcome .welcome-brand{position:absolute;top:max(32px,env(safe-area-inset-top));left:max(5.5vw,env(safe-area-inset-left));display:flex;align-items:center;gap:11px;line-height:1;user-select:none}
#welcome .welcome-brand>span{font-size:49px;font-weight:950;letter-spacing:-4px;transform:rotate(-3deg)}
#welcome .welcome-brand-dot{color:#ea7b50}
#welcome .welcome-brand>b{font-size:12px;letter-spacing:2px;padding:7px 8px;background:#ffd34f;transform:rotate(6deg);border-radius:6px;border:1px solid #173f4022;box-shadow:0 3px 0 #d8b342}
#welcome .welcome-alpha{position:absolute;right:max(30px,env(safe-area-inset-right));top:max(35px,env(safe-area-inset-top));display:flex;gap:7px;align-items:center;padding:9px 13px;border:1px solid #ffffffa1;border-radius:30px;background:#fff5dfed;color:#254d45;box-shadow:0 3px 10px #193f3220;font-size:9px;font-weight:800;letter-spacing:1.1px}
#welcome .welcome-alpha i{width:6px;height:6px;border-radius:50%;background:#3a9c69}
#welcome .welcome-content{position:relative;width:47%;max-width:650px;min-height:100%;padding:clamp(124px,21vh,240px) 20px 80px max(5.5vw,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
#welcome .welcome-player{display:flex;align-items:center;gap:5px;padding:8px 11px;background:#e0ebdc;border:1px solid #c7dcc7;border-radius:30px;font-size:12px;line-height:1.2;max-width:100%;overflow-wrap:anywhere}
#welcome .welcome-player strong{font-weight:800;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#welcome .welcome-player-dot{height:7px;width:7px;background:#47a074;border-radius:50%;margin-right:3px;box-shadow:0 0 0 3px #47a0741f}
#welcome h2{font-family:Arial,Helvetica,sans-serif!important;font-size:clamp(36px,4.2vw,66px);font-weight:900;line-height:1.03;letter-spacing:-2.8px;margin:24px 0 16px;color:#173f40;text-wrap:nowrap}
#welcome h2>span{color:#327d73}
#welcome .welcome-description{font-size:clamp(14px,1.25vw,18px);line-height:1.6;margin:0 0 21px;color:#546c64;font-weight:400}
#welcome .welcome-activities{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
#welcome .welcome-activities>span{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;line-height:1;padding:8px 10px;border:1px solid #173f4019;border-radius:10px;background:#fff8eb}
#welcome .welcome-activities>span:nth-child(2){background:#ffe3d7}#welcome .welcome-activities>span:nth-child(3){background:#d8eee9}
#welcome .welcome-activities svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#welcome .welcome-play{display:flex;align-items:center;gap:17px;width:min(100%,350px);min-height:70px;padding:12px 19px;border:2px solid #234b3a;border-radius:18px;background:#ffcf43;color:#173f40;font-size:23px;font-weight:900;letter-spacing:-.6px;box-shadow:0 6px 0 #244b3a,0 13px 25px #284b3220;transition:transform .15s,box-shadow .15s,background .15s;touch-action:manipulation}
#welcome .welcome-play:hover{background:#ffdd67;transform:translateY(-2px);box-shadow:0 8px 0 #244b3a,0 16px 26px #284b3226}
#welcome .welcome-play:active{transform:translateY(5px);box-shadow:0 1px 0 #244b3a}
#welcome .welcome-play:focus-visible{outline:3px solid #267e93;outline-offset:7px}
#welcome .welcome-play-symbol{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#173f40;flex-shrink:0}
#welcome .welcome-play-symbol svg{width:22px;height:22px;fill:#ffdf72;transform:translateX(1px)}
#welcome .welcome-play-arrow{margin-left:auto;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#welcome .welcome-controls{position:relative;width:min(100%,350px);margin-top:23px;color:#597169}
#welcome .welcome-controls summary{display:flex;align-items:center;justify-content:space-between;list-style:none;padding:7px 2px;font-size:11px;font-weight:700;cursor:pointer;user-select:none}
#welcome .welcome-controls summary::-webkit-details-marker{display:none}
#welcome .welcome-controls summary>span{font-size:18px;line-height:12px}#welcome .welcome-controls[open] summary>span{transform:rotate(45deg)}
#welcome .welcome-controls p{font-size:11px;line-height:2;margin:5px 0 0;color:#405e54}
#welcome kbd{display:inline-block;background:#fffdf7;border:1px solid #ccd9ca;border-bottom-width:2px;border-radius:4px;font:700 9px Arial,sans-serif;padding:0 4px;margin-right:3px}
#welcome .welcome-postcard{position:absolute;right:5%;bottom:9%;display:flex;align-items:center;gap:20px;padding:18px 23px;background:#fff8e8;color:#2a514a;box-shadow:0 7px 0 #234b3a30,0 18px 36px #163b3433;border:1px solid #fff;border-radius:6px 17px 9px 16px;transform:rotate(-5deg)}
#welcome .welcome-postcard>span{font-size:21px;font-weight:900;letter-spacing:-.5px;line-height:1.15}#welcome .welcome-postcard i{font-size:40px;font-style:normal;color:#e69734}
#welcome .welcome-footer{position:absolute;left:5.5vw;bottom:max(25px,env(safe-area-inset-bottom));font-size:9px;font-weight:800;letter-spacing:2.5px;color:#7f9181}
@media(max-width:1000px){#welcome h2{font-size:40px;letter-spacing:-2px}#welcome .welcome-content{width:51%;padding-left:5vw}#welcome .welcome-brand{left:5vw}#welcome .welcome-wash{background:linear-gradient(90deg,#f7f3e6 0%,#f7f3e6 33%,#f7f3e6cc 45%,transparent 68%)}#welcome .welcome-postcard{right:4%;padding:14px 18px}#welcome .welcome-postcard>span{font-size:17px}}
@media(max-width:650px) and (orientation:portrait){#welcome .welcome-art{inset:0 0 auto;height:43%;min-height:220px}#welcome .welcome-art img{object-position:65% 52%}#welcome .welcome-wash{background:linear-gradient(0deg,#f7f3e6 0%,#f7f3e6 53%,#f7f3e600 69%)}#welcome .welcome-brand{top:max(21px,env(safe-area-inset-top));left:22px;color:#fff;filter:drop-shadow(0 3px 3px #153b4255)}#welcome .welcome-brand>span{font-size:43px}#welcome .welcome-brand>b{color:#21463c}#welcome .welcome-alpha{top:max(26px,env(safe-area-inset-top));right:18px;font-size:7px;padding:8px 9px;letter-spacing:.6px}#welcome .welcome-content{min-height:100%;width:100%;max-width:none;padding:35dvh 26px 42px;justify-content:center;align-items:center;text-align:center}#welcome h2{font-size:clamp(32px,9vw,44px);letter-spacing:-1.8px;margin:17px 0 11px}#welcome .welcome-description{font-size:13px;line-height:1.5;margin-bottom:15px}#welcome .welcome-activities{margin-bottom:20px;gap:6px}#welcome .welcome-activities>span{font-size:10px;padding:7px 10px}#welcome .welcome-play{min-height:61px;font-size:22px;max-width:350px;text-align:left}#welcome .welcome-controls{margin-top:18px;text-align:left}#welcome .welcome-controls p{font-size:11px}#welcome .welcome-postcard,#welcome .welcome-footer{display:none}}
@media(max-height:600px) and (orientation:landscape){#welcome .welcome-brand{top:max(18px,env(safe-area-inset-top));left:max(30px,env(safe-area-inset-left))}#welcome .welcome-brand>span{font-size:35px;letter-spacing:-3px}#welcome .welcome-brand>b{font-size:9px;padding:5px 7px}#welcome .welcome-alpha{top:20px;right:24px;font-size:7px;padding:7px 10px}#welcome .welcome-content{width:50%;padding:76px 12px 18px max(30px,env(safe-area-inset-left));min-height:100%;justify-content:center}#welcome .welcome-player{font-size:10px;padding:5px 9px}#welcome h2{font-size:clamp(27px,4.4vw,40px);letter-spacing:-1.5px;margin:12px 0 10px}#welcome .welcome-description{font-size:11px;line-height:1.45;margin:0 0 13px}#welcome .welcome-activities{display:none}#welcome .welcome-play{min-height:51px;font-size:19px;padding:8px 13px;gap:13px;width:min(100%,300px);border-radius:14px}#welcome .welcome-play-symbol{width:30px;height:30px}#welcome .welcome-controls{margin-top:12px;max-width:300px}#welcome .welcome-controls summary{font-size:10px;padding:3px 1px}#welcome .welcome-controls p{font-size:10px;line-height:1.6}#welcome .welcome-footer{display:none}#welcome .welcome-postcard{bottom:9%;padding:11px 15px;gap:10px}#welcome .welcome-postcard>span{font-size:15px}#welcome .welcome-postcard i{font-size:30px}}
@media(max-height:350px) and (orientation:landscape){#welcome .welcome-description{display:none}#welcome .welcome-content{padding-top:63px}#welcome h2{font-size:29px;margin:8px 0 12px}#welcome .welcome-controls{margin-top:10px}}
@media(prefers-reduced-motion:reduce){#welcome .welcome-play{transition:none}}

/* Lively illustrated game cover; animations stop when the welcome screen is hidden. */
#welcome .welcome-art img{animation:bay-breathe 18s ease-in-out infinite alternate;transform-origin:65% 60%}
#welcome .welcome-brand>span{color:#198779;text-shadow:0 3px 0 #fff,0 6px 0 #b1ddd0,0 10px 18px #214b3830}
#welcome .welcome-brand>b{animation:bay-badge 4s ease-in-out infinite}
#welcome .welcome-postcard{animation:bay-postcard 5s ease-in-out infinite}
#welcome .welcome-activities>span{border:2px solid #ffffff;box-shadow:0 4px 0 #244b3a20;transform:rotate(-3deg);padding:11px 14px}
#welcome .welcome-activities>span:nth-child(2){transform:rotate(3deg)}
#welcome .welcome-play{background:linear-gradient(135deg,#ffe582,#ffc330);position:relative;overflow:hidden}
#welcome .welcome-play:after{content:"";position:absolute;inset:-50% auto -50% -50%;width:25%;background:#fff6;transform:skewX(-20deg);animation:bay-shine 5s ease-in-out infinite;pointer-events:none}
#welcome h2>span{color:#168875;text-shadow:0 3px 0 #b6e5cb}
@keyframes bay-breathe{from{transform:scale(1)}to{transform:scale(1.045) translateY(-.6%)}}
@keyframes bay-badge{50%{transform:translateY(-4px) rotate(10deg)}}
@keyframes bay-postcard{50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes bay-shine{0%,65%{left:-50%}100%{left:140%}}
@media(prefers-reduced-motion:reduce){#welcome *{animation:none!important}}
/* A full-bleed storybook cover, with warm game rewards floating over the bay. */
#welcome{background:#153e45;color:#fff9df}
#welcome .welcome-art{inset:0}
#welcome .welcome-wash{background:linear-gradient(90deg,#123d49f5 0%,#174c50ec 27%,#174c5099 43%,#174c5000 72%)}
#welcome .welcome-brand>span{color:#fff8db;text-shadow:0 4px 0 #167f78,0 7px 0 #0f4148,0 12px 20px #09272b66}
#welcome .welcome-content{padding-top:clamp(115px,18vh,210px)}
#welcome h2{color:#fff9e8;text-shadow:0 4px 0 #0e38433d}
#welcome h2>span{color:#ffdc69;text-shadow:0 4px 0 #9a65283d}
#welcome .welcome-description{color:#e0eee1}
#welcome .welcome-player{background:#153944b5;border-color:#b5ebcf55;color:#f0fff2;box-shadow:inset 0 1px 0 #d9ffdc19}
#welcome .welcome-activities>span{color:#183e47;background:#e5f9de}
#welcome .welcome-footer{color:#d6eed8b3}
#welcome .welcome-art:after,#welcome .welcome-art:before{content:"";position:absolute;background:center/contain no-repeat;filter:drop-shadow(0 8px 7px #163e4455);animation:bay-reward 6s ease-in-out infinite;pointer-events:none}
#welcome .welcome-art:after{width:64px;height:64px;right:29%;bottom:19%;background-image:url('./ui-icons/coin.webp');transform:rotate(13deg)}
#welcome .welcome-art:before{width:78px;height:78px;right:9%;top:23%;background-image:url('./ui-icons/fishing.webp');animation-delay:-3s}
@keyframes bay-reward{50%{translate:0 -12px;rotate:6deg}}
@media(max-width:1000px){#welcome .welcome-wash{background:linear-gradient(90deg,#123d49f5,#174c50e6 31%,#174c5066 55%,transparent 80%)}}
@media(max-width:650px) and (orientation:portrait){#welcome .welcome-art{inset:0 0 auto;height:55%;min-height:220px}#welcome .welcome-wash{background:linear-gradient(0deg,#153e45 0%,#153e45 39%,#153e45ed 47%,#153e4500 75%)}#welcome .welcome-content{padding-top:38dvh}#welcome .welcome-art:before{right:6%;top:29%;width:60px;height:60px}#welcome .welcome-art:after{right:67%;bottom:19%;width:48px;height:48px}}
@media(max-height:600px) and (orientation:landscape){#welcome .welcome-content{padding-top:78px}#welcome .welcome-art:before{width:55px;height:55px;top:22%}#welcome .welcome-art:after{width:46px;height:46px;bottom:18%;right:34%}}
@media(prefers-reduced-motion:reduce){#welcome .welcome-art:before,#welcome .welcome-art:after{animation:none}}
@media(max-height:680px) and (orientation:portrait){#welcome .welcome-content{padding:29dvh 20px 24px}#welcome h2{font-size:30px;margin:14px 0 10px}#welcome .welcome-description{font-size:12px;margin-bottom:12px}#welcome .welcome-activities{margin-bottom:16px}#welcome .welcome-activities>span{padding:7px 9px}#welcome .welcome-play{min-height:57px}#welcome .welcome-art{height:47%}#welcome .welcome-wash{background:linear-gradient(0deg,#153e45 0%,#153e45 48%,transparent 79%)}}