/* Clear screen water with a compact, mechanical reel control in the store's palette. */
html[data-welcome=pending] body{visibility:hidden}
.welcome-screen{position:fixed;inset:0;z-index:200;visibility:visible;overflow:hidden;overflow:clip;isolation:isolate;--water-drop:0%;--handle-turn:0deg}
.welcome-screen:before{content:"";position:absolute;inset:0 0 auto;height:82px;z-index:3;background:var(--paper);border-bottom:1px solid var(--line)}
.welcome-water{position:absolute;left:-6%;bottom:0;width:112%;height:100%;transform:translateY(var(--water-drop));transition:transform 1250ms cubic-bezier(.22,.75,.28,1);will-change:transform;pointer-events:none}
.water-body{position:absolute;inset:0;background:linear-gradient(180deg,#8badaa55,#536a6680 45%,#1b302db3);backdrop-filter:blur(2px) saturate(.6);-webkit-backdrop-filter:blur(2px) saturate(.6);overflow:hidden}
.water-body:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 10%,#ffffff0c 24%,transparent 38% 68%,#ffffff0b 79%,transparent 88%);box-shadow:inset 0 16px 28px #ffffff14}
.water-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 650ms;pointer-events:none}.water-canvas.is-ready{opacity:1}
.welcome-surface{position:absolute;left:0;top:0;width:100%;height:180px;overflow:visible}.water-back-rim{fill:none;stroke:#101f1b55;stroke-width:8}.water-shine{fill:none;stroke:#f8fffc;stroke-width:2.5;opacity:.85;filter:drop-shadow(0 2px 2px #0d242a99)}.water-highlight{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;opacity:.2}.water-second-rim{fill:none;stroke:#dcece5;stroke-width:1.5;opacity:.16}
.water-caustics{position:absolute;inset:-10%;opacity:.18;background:radial-gradient(ellipse 32% 6% at 26% 24%,transparent 68%,#ffffff44 74%,transparent 81%),radial-gradient(ellipse 38% 8% at 73% 61%,transparent 66%,#ffffff32 75%,transparent 83%);filter:blur(3px);animation:water-light 10s ease-in-out infinite alternate}
.water-reflection{position:absolute;inset:-20%;opacity:.12;background:radial-gradient(ellipse 15% 55% at 24% 0%,#ffffff66,transparent 80%),radial-gradient(ellipse 12% 65% at 85% 10%,#ffffff55,transparent 85%);filter:blur(25px);transform:rotate(16deg)}
.welcome-fishing-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}.welcome-line-shadow{fill:none;stroke:#17241d66;stroke-width:2.5}.welcome-line-thread{fill:none;stroke:#f4f1e7cc;stroke-width:1}
.welcome-fish{position:absolute;z-index:2;left:72%;top:38%;width:clamp(145px,16vw,220px);transform:translate(-50%,-50%) scale(.76) rotate(-18deg);transition:left 1150ms cubic-bezier(.2,.8,.25,1),top 1150ms cubic-bezier(.2,.8,.25,1),transform 1150ms cubic-bezier(.2,.8,.25,1);pointer-events:none;filter:drop-shadow(0 9px 12px #08140d55)}.welcome-fish-art{display:block;width:100%;overflow:visible}.welcome-fish-swim{animation:fish-swim 2800ms ease-in-out infinite}.fish-body{fill:url(#welcome-fish-body);stroke:#f4f1e7;stroke-width:1.5}.fish-tail{transform-origin:176px 52px;animation:fish-tail 850ms ease-in-out infinite alternate;fill:#26382b;stroke:#f4f1e7;stroke-width:1.2}.fish-fin{fill:#354235;stroke:#f4f1e799;stroke-width:1}.fish-belly{stroke:#e8e6ceaa;stroke-width:3}.fish-lateral{stroke:var(--signal);stroke-width:1.4;opacity:.85}.fish-detail{stroke:#f4f1e766;stroke-width:1}.fish-pectoral{fill:#5b633d;stroke:#f4f1e7aa;stroke-width:1}.fish-eye{fill:#f4f1e7}.fish-mouth{fill:var(--signal);stroke:#f4f1e7;stroke-width:1}
.welcome-screen[data-turn="1"] .welcome-fish{left:65%;top:49%;transform:translate(-50%,-50%) scale(.88) rotate(-24deg)}.welcome-screen[data-turn="2"] .welcome-fish{left:59%;top:60%;transform:translate(-50%,-50%) scale(1) rotate(-29deg)}.welcome-screen[data-turn="3"] .welcome-fish{left:54%;top:70%;transform:translate(-50%,-50%) scale(1.1) rotate(-34deg)}.welcome-screen[data-turn="4"] .welcome-fish{left:50%;top:calc(100% - 170px);transform:translate(-50%,-50%) scale(1.12) rotate(-12deg)}
.welcome-landed{position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:7px 10px;opacity:0}.welcome-screen.is-finishing .welcome-landed{opacity:1;transition:opacity 250ms 650ms}.welcome-screen.is-finishing .welcome-fish-swim,.welcome-screen.is-finishing .fish-tail{animation-play-state:paused}
.welcome-brand{position:absolute;z-index:4;top:24px;left:28px;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900;letter-spacing:-.03em;color:var(--ink)}.welcome-brand>span{width:34px;height:34px;display:grid;place-items:center;background:var(--signal);color:#111;border:1px solid #111;font-size:12px}
.welcome-dock{position:absolute;z-index:3;bottom:max(38px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:24px;padding:10px 24px 10px 10px;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 40px #08100d24;transition:opacity 350ms;animation:reel-dock 500ms ease both}
.welcome-game{position:relative}.welcome-reel{position:relative;display:flex;align-items:center;gap:8px;min-height:76px;padding:4px 16px 4px 4px;border:1px solid #111;background:var(--signal);color:#111;box-shadow:0 3px 0 #111;cursor:pointer;touch-action:manipulation;transition:transform 160ms,box-shadow 160ms}.welcome-reel:before{content:"";position:absolute;inset:-5px;border:1px solid var(--signal);pointer-events:none;animation:tap-cue 2400ms ease-out infinite}.welcome-screen.has-pulled .welcome-reel:before{display:none}.welcome-reel:hover{transform:translateY(-1px);box-shadow:0 4px 0 #111}.welcome-reel:active{transform:translateY(3px);box-shadow:0 0 0 #111}.welcome-reel:disabled{cursor:default}
.welcome-reel-symbol{width:105px;height:76px;overflow:visible;flex-shrink:0}.reel-body{fill:var(--steel)}.reel-side{fill:var(--signal);stroke:var(--ink)}.welcome-handle,.welcome-spool{transform-origin:45px 38px;transform:rotate(var(--handle-turn));transition:transform 900ms cubic-bezier(.16,.8,.22,1)}.welcome-spool{transform:rotate(calc(var(--handle-turn) * -1));transition-duration:1100ms}.reel-crank{stroke:var(--ink);stroke-width:5}.reel-grip{fill:var(--paper);stroke:var(--ink);stroke-width:2}.reel-hub{fill:var(--paper);stroke:var(--ink)}.welcome-turn-guide{stroke:var(--signal);stroke-width:2;animation:turn-guide 2200ms ease-in-out infinite}.welcome-screen.has-pulled .welcome-turn-guide{opacity:0;animation:none}
.welcome-caption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;white-space:nowrap}.welcome-reel-label{font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1}.welcome-tap-label{font-size:11px;color:#252820}
.welcome-meter{display:flex;flex-direction:column;gap:10px;padding-left:24px;border-left:1px solid var(--line)}.welcome-count{font-size:12px;font-weight:900;letter-spacing:.1em}.welcome-turns{display:flex;gap:5px}.welcome-turn{width:15px;height:3px;background:var(--line);transition:background 250ms}.welcome-turn.complete{background:var(--signal)}
.welcome-ripple{position:absolute;top:2px;left:8px;width:80px;height:72px;border:1px solid #ffffffbb;border-radius:50%;pointer-events:none;animation:reel-ripple 1100ms ease-out both}.welcome-ripple:after{content:"";position:absolute;inset:-12px;border:1px solid #ffffff55;border-radius:50%}
.welcome-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.welcome-skip{position:absolute;z-index:4;right:28px;top:20px;min-height:44px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:10px 16px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.welcome-skip:hover{border-color:var(--ink)}.welcome-skip:focus-visible{outline:2px solid var(--signal);outline-offset:4px}.welcome-reel:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.welcome-screen.is-finishing .welcome-dock{opacity:0;transition-delay:850ms}
@keyframes water-light{from{transform:translate(-2%,-1%) scale(1)}to{transform:translate(2%,3%) scale(1.07)}}
@keyframes turn-guide{0%,100%{opacity:.4;transform:translateY(-1px)}50%{opacity:1;transform:translateY(2px)}}
@keyframes reel-ripple{from{opacity:.6;transform:scale(.8)}to{opacity:0;transform:scale(2.5)}}
@keyframes reel-dock{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes tap-cue{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.045,1.12)}}
@keyframes fish-swim{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes fish-tail{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@media(max-width:600px){.welcome-screen:before{height:70px}.welcome-brand{top:22px;left:16px;font-size:15px;gap:8px}.welcome-brand>span{width:28px;height:28px;font-size:10px}.welcome-skip{right:16px;top:14px;padding:10px;gap:7px;font-size:10px}.welcome-dock{width:calc(100% - 32px);max-width:360px;padding:10px 12px 10px 8px;gap:12px;justify-content:space-between;bottom:max(28px,env(safe-area-inset-bottom))}.welcome-reel{gap:4px;padding-right:10px}.welcome-reel-symbol{width:76px;height:60px}.welcome-reel-label{font-size:13px}.welcome-tap-label{font-size:10px}.welcome-meter{padding-left:12px}.welcome-turn{width:10px}.welcome-fish{left:72%;top:35%;width:160px}.welcome-screen[data-turn="1"] .welcome-fish{left:66%;top:46%}.welcome-screen[data-turn="2"] .welcome-fish{left:59%;top:57%}.welcome-screen[data-turn="3"] .welcome-fish{left:54%;top:68%}.welcome-screen[data-turn="4"] .welcome-fish{top:calc(100% - 164px)}.water-reflection{filter:none;opacity:.08}.water-caustics{filter:none;animation-duration:12s}}
@media(max-height:530px){.welcome-dock{bottom:16px;padding-block:5px}.welcome-reel{min-height:60px}.welcome-reel-symbol{height:58px;width:80px}}
@media(prefers-reduced-motion:reduce){.welcome-screen{display:none}html[data-welcome=pending] body{visibility:visible}}