:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100dvh; display: grid; place-items: center; overflow: hidden; background: #062a3a; }
button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.game-shell { width: 100%; height: 100dvh; display: grid; place-items: center; background: radial-gradient(circle at 50% 20%, #1b7794, #062a3a 72%); }
.game { position: relative; width: min(100vw, 56.25dvh); height: min(177.78vw, 100dvh); max-height: 100dvh; overflow: hidden; isolation: isolate; background: #0a6689; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 22px 80px rgba(0,0,0,.48); }
.sky { position: absolute; inset: 0 0 64% 0; background: linear-gradient(#70c6d7 0%, #b8e5e1 100%); }
.cloud { position: absolute; width: 34%; height: 12%; border-radius: 99px; background: rgba(255,255,255,.6); filter: blur(1px); }
.cloud::before, .cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.cloud::before { width:46%; aspect-ratio:1; left:18%; bottom:40%; }.cloud::after { width:35%; aspect-ratio:1; right:16%; bottom:30%; }
.cloud-one { top:17%; left:-7%; }.cloud-two { top:39%; right:-13%; transform:scale(.65); opacity:.8; }
.sea { position:absolute; inset:36% 0 31% 0; overflow:hidden; background: linear-gradient(180deg, #168db0 0%, #087093 35%, #075579 100%); }
.horizon-glint { position:absolute; top:7%; left:8%; width:84%; height:2px; background:rgba(239,255,245,.54); box-shadow: 0 13px 0 -1px rgba(234,255,251,.25), 0 29px 0 -1px rgba(234,255,251,.2); }
.wave { position:absolute; width:155%; height:15%; left:-25%; border-top:2px solid rgba(212,252,246,.38); border-radius:50%; }
.wave-a { top:30%; transform:rotate(-3deg); }.wave-b { top:52%; opacity:.5; transform:rotate(3deg); }.wave-c { top:76%; opacity:.36; transform:rotate(-2deg); }
.hud { position:absolute; z-index:5; inset: max(22px, env(safe-area-inset-top)) 22px auto; color:#053a51; text-shadow:0 1px rgba(255,255,255,.35); }
.title-lockup { display:flex; align-items:center; gap:8px; }.tiny-mark { padding:3px 7px; border:1px solid rgba(5,58,81,.4); border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; }.hud h1 { margin:0; font-size:clamp(18px, 4.8vw, 24px); letter-spacing:-.05em; }.hud p { margin:7px 0 0; font-size:14px; font-weight:600; }
.fishing-feedback { position:absolute; z-index:8; left:22px; right:22px; top:116px; padding:11px 12px 10px; border:1px solid rgba(4,59,79,.25); border-radius:14px; background:rgba(232,255,247,.82); color:#073f56; box-shadow:0 7px 18px rgba(2,57,77,.12); }.meter + .meter{margin-top:9px}.meter-heading{display:flex;justify-content:space-between;font-size:13px;font-weight:800}.meter-heading strong{font-variant-numeric:tabular-nums}.meter-track{height:8px;margin-top:5px;overflow:hidden;border-radius:99px;background:rgba(6,80,108,.16)}.meter-fill{display:block;width:0;height:100%;border-radius:inherit;transition:width .08s linear}.distance-fill{background:linear-gradient(90deg,#79c8ac,#16886c)}.tension-fill{background:linear-gradient(90deg,#75c9d4 0%,#efc34d 68%,#df594f 83%)}.tension-meter small{display:block;margin-top:5px;font-size:12px;font-weight:700;color:#296174}.danger .fishing-feedback{background:rgba(255,246,229,.92);box-shadow:0 0 0 2px rgba(229,89,74,.38),0 7px 22px rgba(158,41,34,.25)}.danger .tension-meter small{color:#b34135}
.b-mode .fishing-feedback{opacity:.76;transform:scale(.94);transform-origin:top center}.b-mode.danger .fishing-feedback{opacity:1}
.hook-line { --line-tension:0; --rod-direction:0; position:absolute; z-index:2; left:50%; top:-15%; width:calc(2px + var(--line-tension) * .035px); height:46%; background:linear-gradient(transparent, rgba(237,255,250,.9) 12%, rgba(237,255,250,.7)); box-shadow:0 0 calc(var(--line-tension) * .09px) rgba(255,101,75,.9); transform:rotate(calc((var(--line-tension) - 35) * .08deg - var(--rod-direction) * 34deg)); transform-origin:top; transition:width .08s linear,box-shadow .08s linear,transform .04s linear,height .45s ease; }
.rod { --rod-direction:0; position:absolute; z-index:4; left:50%; top:-7%; width:7px; height:48%; border-radius:99px; background:linear-gradient(#f2dc91,#7a4d27); box-shadow:1px 0 0 rgba(52,28,9,.38); transform:rotate(calc(var(--rod-direction) * -46deg)); transform-origin:top; opacity:0; transition:transform .04s linear; }.b-mode .rod{opacity:1}.b-mode.danger .rod{width:8px;filter:drop-shadow(0 0 4px #ffcf69)}
.water-fish { --fish-face:1; position:absolute; z-index:5; top:56%; width:72px; height:39px; transform:translateX(-50%) scaleX(var(--fish-face)); transition:left .04s linear; filter:drop-shadow(0 5px 4px rgba(0,40,55,.25)); }.water-fish-body{position:absolute;inset:0 0 0 13px;display:grid;place-items:center;border-radius:48% 55% 55% 48%;background:linear-gradient(145deg,#d2eee4,#78b6b7);color:#173e51;font-size:15px;font-weight:900;letter-spacing:-.15em;box-shadow:inset -6px -4px rgba(51,125,131,.22)}.water-fish-tail{position:absolute;left:0;top:8px;width:21px;height:23px;background:#78b6b7;clip-path:polygon(100% 0,0 50%,100% 100%)}.water-splash{position:absolute;z-index:4;top:62%;width:48px;height:13px;border-top:3px solid rgba(230,255,249,.86);border-radius:50%;opacity:0;transform:translateX(-50%);pointer-events:none}.water-splash.burst{animation:water-splash .45s ease-out}
.bobber { position:absolute; z-index:3; left:calc(50% - 13px); top:37%; width:26px; height:26px; border-radius:50%; background:linear-gradient(#fff 0 46%, #ee5552 47%); box-shadow:0 5px 0 rgba(1,48,69,.18); transition: top .6s cubic-bezier(.2,.8,.3,1), transform .3s; }
.bobber span { position:absolute; left:11px; top:-10px; width:4px; height:12px; border-radius:5px; background:#f4f5df; }
.deck { position:absolute; z-index:4; inset:auto 0 0; height:32%; overflow:hidden; background:linear-gradient(105deg, #c8834e, #e4ae68 45%, #bc713e); box-shadow: inset 0 12px 20px rgba(79,37,16,.24); }
.deck::before { content:""; position:absolute; inset:0; opacity:.42; background:repeating-linear-gradient(94deg, transparent 0 14%, rgba(94,43,18,.24) 14.4% 15%, transparent 15.4% 30%); }.deck-lines { position:absolute; inset:21% 0 0; background:repeating-linear-gradient(0deg, transparent 0 28%, rgba(100,48,22,.24) 29% 30%, transparent 31% 59%); }
.rail { position:absolute; top:0; z-index:2; width:29%; height:12px; border-radius:0 0 12px 12px; background:#704222; box-shadow:0 4px 0 rgba(53,29,14,.25); }.rail-left{left:-6%; transform:rotate(3deg)}.rail-right{right:-6%; transform:rotate(-3deg)}
.deck-label { position:absolute; z-index:1; right:17px; bottom:18px; color:rgba(89,43,18,.54); font-size:12px; font-weight:700; letter-spacing:.12em; }
.mode-select{position:absolute;z-index:7;left:50%;bottom:8%;width:min(82%,320px);display:grid;gap:11px;transform:translateX(-50%)}.cast-button { min-height:50px; padding:9px 18px; border:0; border-radius:16px; color:#fffde9; background:#074863; box-shadow:0 6px 0 #043145, 0 10px 24px rgba(58,27,8,.22); font-weight:800; font-size:16px; transition:transform .15s, opacity .2s; }.cast-button span{display:block;margin-top:2px;color:#b9e4e0;font-size:12px;font-weight:700}.cast-button-b{background:#286875}.cast-button:active { transform:translateY(5px); box-shadow:0 1px 0 #043145; }.cast-button:focus-visible,.deck-fish:focus-visible{outline:3px solid #fff9c9;outline-offset:4px}
.reel-control { position:absolute; z-index:7; left:50%; bottom:9%; width:min(78%, 310px); min-height:72px; padding:10px 20px; border:2px solid rgba(255,255,237,.83); border-radius:20px; color:#fffdea; background:linear-gradient(#147193,#07516f); box-shadow:0 7px 0 #04364b,0 12px 24px rgba(58,27,8,.18); transform:translateX(-50%); font-size:19px; font-weight:900; letter-spacing:.04em; user-select:none; }.reel-control span{display:block;margin-top:4px;font-size:12px;font-weight:700;letter-spacing:0;color:#bce8e5}.reel-control.holding{transform:translateX(-50%) translateY(6px);background:linear-gradient(#e3a84b,#ba693a);box-shadow:0 1px 0 #7d3d25}.reel-control:focus-visible{outline:3px solid #fff9c9;outline-offset:4px}
.catch-card { position:absolute; z-index:9; left:50%; top:36%; width:190px; padding:17px 16px 14px; border:2px solid rgba(255,255,255,.7); border-radius:22px; background:rgba(2,51,69,.91); color:#f8fff5; text-align:center; box-shadow:0 14px 32px rgba(0,25,38,.35); transform:translate(-50%,-50%) scale(.7); opacity:0; pointer-events:none; }.catch-card strong,.catch-card span { display:block; }.catch-card strong{font-size:20px;margin-top:6px}.catch-card span{margin-top:2px;color:#b8e8df;font-size:14px}.catch-card.show { animation: pop-card 1.35s cubic-bezier(.2,.9,.25,1) forwards; }
.fish-display,.deck-fish { position:relative; display:inline-block; }.fish-display { width:88px; height:47px; }.fish-body,.deck-fish-body { position:absolute; display:grid; place-items:center; border-radius:48% 55% 55% 48%; background:linear-gradient(145deg,#d2eee4,#85bdb9); color:#173e51; font-weight:900; letter-spacing:-.15em; box-shadow:inset -8px -5px rgba(51,125,131,.2); }.fish-display .fish-body { inset:2px 0 2px 15px; font-size:18px; }.fish-tail,.deck-fish-tail { position:absolute; left:0; top:10px; width:25px; height:27px; background:#8abdbb; clip-path:polygon(100% 0,0 50%,100% 100%); }
.deck-fish { position:absolute; z-index:4; left:50%; top:44%; width:118px; height:63px; padding:0; border:0; background:transparent; transform:translate(-50%, -280%) rotate(-9deg); opacity:0; }.deck-fish .deck-fish-body { inset:0 0 0 21px; font-size:23px; }.deck-fish .deck-fish-tail { top:14px; width:34px; height:36px; }.deck-fish.landed { animation: fish-drop .72s cubic-bezier(.2,.75,.35,1) forwards; }.deck-fish.hit { animation: fish-hit .24s ease-out; }
.splat { position:absolute; z-index:6; left:50%; top:35%; color:#713718; font-weight:1000; font-size:28px; opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-10deg); pointer-events:none; }.splat.show { animation:splat .45s ease-out forwards; }
.game.fishing .bobber { animation:bob .58s ease-in-out infinite; }.game.fishing .hook-line { transform:rotate(7deg); }.game.hooked .bobber { animation:bob .48s ease-in-out infinite; }.game.hooked.danger .bobber{filter:drop-shadow(0 0 5px #ffdb67)}.game.catching .bobber { top:-20%; transform:rotate(15deg); }.game.catching .hook-line { height:0; transform:rotate(15deg); }.game.danger{animation:line-warning .25s linear infinite}.game.b-mode.sprint{animation:sprint-shiver .16s linear 2}.game.line-broken .hook-line{height:18%;opacity:0}.game.line-broken .bobber{transform:translate(30px,25px) rotate(32deg)}
@keyframes bob { 50%{transform:translateY(9px) rotate(-5deg)} } @keyframes line-warning{25%{translate:1px 0}75%{translate:-1px 0}} @keyframes sprint-shiver{25%{translate:2px 0}75%{translate:-2px 0}} @keyframes water-splash{0%{opacity:0;transform:translateX(-50%) scale(.5)}35%{opacity:1;transform:translateX(-50%) scale(1.2)}100%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(1.45)}} @keyframes pop-card { 0%{opacity:0;transform:translate(-50%,-25%) scale(.55)} 20%,73%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-60%) scale(.94)} } @keyframes fish-drop { 0%{opacity:0;transform:translate(-50%,-280%) rotate(14deg)} 14%{opacity:1} 78%{opacity:1;transform:translate(-50%,0) rotate(-12deg)} 88%{transform:translate(-50%,-8%) rotate(-7deg)} 100%{opacity:1;transform:translate(-50%,0) rotate(-9deg)} } @keyframes fish-hit { 0%{transform:translate(-50%,0) rotate(-9deg) scale(1,1)} 38%{transform:translate(calc(-50% + 6px),3px) rotate(-5deg) scale(1.14,.76)} 72%{transform:translate(calc(-50% - 3px),0) rotate(-12deg) scale(.95,1.05)} 100%{transform:translate(-50%,0) rotate(-9deg) scale(1,1)} } @keyframes splat { 0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-13deg)} 28%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(4deg)} 100%{opacity:0;transform:translate(-50%,-70%) scale(.9) rotate(0)} }
.mode-select[hidden]{display:none}
@media (min-width: 700px) { .game { border-radius:28px; height:min(94dvh, 760px); width:min(52.9dvh, 428px); }.game-shell{padding:20px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;} }

/* V0.1：让鱼成为钓鱼阶段的主要阅读对象，进度条只作辅助。 */
.deck > .cast-button{position:absolute;z-index:7;left:50%;bottom:10%;min-width:238px;transform:translateX(-50%)}.deck > .cast-button[hidden]{display:none}
.b-mode .fishing-feedback{opacity:1;transform:none}.fishing-feedback{opacity:.72;transform:scale(.95);transform-origin:top center}.danger .fishing-feedback{opacity:1;transform:none}
.water-fish{--fish-scale:1;top:54%;width:82px;height:45px;transform:translateX(-50%) scaleX(var(--fish-face)) scale(var(--fish-scale));transition:left .035s linear,transform .08s ease;filter:drop-shadow(0 7px 5px rgba(0,39,56,.30))}.water-fish-body{inset:2px 0 2px 16px;border:2px solid rgba(17,72,79,.22);background:linear-gradient(150deg,#e8f7e9 4%,#9bd0c7 46%,#5f9d9e 100%);overflow:visible;animation:fish-body-wiggle .45s ease-in-out infinite}.water-fish-body::before,.water-fish-body::after{content:"";position:absolute;z-index:-1;background:inherit;border:inherit}.water-fish-body::before{width:25%;height:46%;left:38%;top:-22%;border-radius:90% 20% 10% 20%;transform:rotate(-20deg)}.water-fish-body::after{width:26%;height:43%;left:44%;bottom:-20%;border-radius:20% 20% 90% 20%;transform:rotate(18deg)}.water-fish-tail{left:0;top:7px;width:28px;height:30px;border-radius:7px;background:linear-gradient(135deg,#73aca9,#427d83);animation:tail-flick .32s ease-in-out infinite}
.water-fish[data-fish="bass"]{width:99px;height:54px}.water-fish[data-fish="bass"] .water-fish-body{background:linear-gradient(150deg,#e2db9b 2%,#8daa6b 45%,#3f674f 100%);color:#263b2d;border-color:#355640}.water-fish[data-fish="bass"] .water-fish-tail{background:linear-gradient(135deg,#84a05a,#426043)}.water-fish[data-fish="bass"] .water-fish-body::before{background:#446848;clip-path:polygon(0 100%,50% 0,100% 100%);border:0;width:26%;height:43%;top:-36%;left:44%}
.water-fish[data-fish="puffer"]{width:62px;height:55px}.water-fish[data-fish="puffer"] .water-fish-body{inset:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff4bd,#d7ae62 70%);font-size:14px}.water-fish[data-fish="puffer"] .water-fish-tail{left:-12px;top:17px;width:20px;height:20px;background:#c99850}.water-fish[data-fish="puffer"] .water-fish-body::before{width:7px;height:7px;left:9%;top:48%;border:0;border-radius:50%;background:#8b6a38;box-shadow:15px -19px #8b6a38,29px -8px #8b6a38,31px 13px #8b6a38,4px 17px #8b6a38}.water-fish[data-fish="puffer"] .water-fish-body::after{display:none}
.dash-bubbles{position:absolute;z-index:4;top:50%;width:46px;height:24px;opacity:0;pointer-events:none}.dash-bubbles::before,.dash-bubbles::after{content:"";position:absolute;border:2px solid rgba(236,255,249,.86);border-radius:50%}.dash-bubbles::before{width:7px;height:7px;left:5px;top:10px}.dash-bubbles::after{width:12px;height:12px;left:20px;top:0}.dash-bubbles.burst{animation:bubble-pop .46s ease-out}
.dash-prep .water-fish{filter:drop-shadow(0 0 8px rgba(255,238,144,.74));transform:translateX(-50%) scaleX(var(--fish-face)) scale(calc(var(--fish-scale) * .91))}.sprint .water-fish-body{animation-duration:.13s}.sprint .water-fish-tail{animation-duration:.10s}
.hook-line{opacity:.5;border-radius:50%;transition:width .08s linear,box-shadow .08s linear,transform .04s linear,height .45s ease,opacity .08s linear}.rod::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:36%;border-radius:99px;background:inherit;transform-origin:top;transform:rotate(0deg);transition:transform .1s}.danger .rod::after{transform:rotate(26deg)}
.deck-fish{--stage-size:1;filter:drop-shadow(0 8px 5px rgba(72,35,13,.24))}.deck-fish[data-fish="bass"]{width:140px;height:70px}.deck-fish[data-fish="bass"] .deck-fish-body{background:linear-gradient(150deg,#e2db9b,#8daa6b 48%,#3f674f);color:#263b2d}.deck-fish[data-fish="bass"] .deck-fish-tail{background:#51734e}.deck-fish[data-fish="puffer"]{width:82px;height:72px}.deck-fish[data-fish="puffer"] .deck-fish-body{inset:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff4bd,#d7ae62 70%);font-size:17px}.deck-fish[data-fish="puffer"] .deck-fish-tail{left:-12px;top:24px;width:24px;height:25px;background:#c99850}.deck-fish.puffer-inflated{width:132px;height:116px;animation:puffer-grow .42s cubic-bezier(.1,.8,.2,1) forwards}.deck-fish.puffer-inflated .deck-fish-body{font-size:20px}.deck-fish.puffer-boing{animation:puffer-boing .58s cubic-bezier(.15,.8,.25,1)}.deck-fish.bass-first-slap .deck-fish-body{filter:brightness(1.2)}
.deck-fish.landed{animation:fish-drop-stage .72s cubic-bezier(.2,.75,.35,1) forwards}.deck-fish.hit{animation:fish-hit-stage .27s ease-out}.deck-fish[data-fish="bass"].hit{animation:bass-hit .34s ease-out}
.catch-card .fish-display[data-fish="bass"] .fish-body{background:linear-gradient(150deg,#e2db9b,#8daa6b 48%,#3f674f);color:#263b2d}.catch-card .fish-display[data-fish="puffer"]{width:58px;height:58px}.catch-card .fish-display[data-fish="puffer"] .fish-body{inset:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff4bd,#d7ae62 70%);font-size:14px}.catch-card .fish-display[data-fish="puffer"] .fish-tail{left:-10px;top:17px}
.catch-pile{position:absolute;z-index:5;left:10px;bottom:13px;width:110px;height:92px}.pile-fish{position:absolute;left:0;bottom:0;width:66px;height:35px;transform:rotate(-14deg)}.pile-fish:nth-of-type(2){left:24px;bottom:13px;transform:rotate(11deg) scale(.91)}.pile-fish:nth-of-type(3){left:44px;bottom:1px;transform:rotate(-4deg) scale(.78)}.pile-fish .deck-fish-body{inset:0 0 0 12px;font-size:11px}.pile-fish .deck-fish-tail{top:8px;width:19px;height:20px}.pile-fish[data-fish="bass"] .deck-fish-body{background:#77946a;color:#263b2d}.pile-fish[data-fish="bass"] .deck-fish-tail{background:#51734e}.pile-fish[data-fish="puffer"]{width:39px;height:39px}.pile-fish[data-fish="puffer"] .deck-fish-body{inset:0;border-radius:50%;background:#d7ae62}.pile-fish[data-fish="puffer"] .deck-fish-tail{left:-8px;top:12px;width:15px;height:16px;background:#c99850}.pile-count{position:absolute;right:0;bottom:2px;padding:3px 6px;border-radius:99px;background:#704222;color:#fff3cb;font-size:12px;font-weight:900}
.decision-panel{position:absolute;z-index:12;left:50%;top:53%;width:min(86%,340px);padding:18px;border:2px solid rgba(255,255,236,.75);border-radius:20px;background:rgba(3,52,68,.94);box-shadow:0 16px 34px rgba(0,22,30,.4);color:#f7ffed;text-align:center;transform:translate(-50%,-50%)}.decision-panel[hidden]{display:none}.decision-panel p{margin:0 0 14px;font-size:15px;font-weight:700;line-height:1.45}.decision-panel div{display:grid;grid-template-columns:1fr 1.45fr;gap:9px}.decision-panel button{min-height:46px;border:0;border-radius:13px;background:#bdd9cf;color:#12495a;font-weight:900}.decision-panel button:last-child{background:#e5a554;color:#4c2b18}
.sea-risk-1 .sea{filter:saturate(.93) brightness(.97)}.sea-risk-1 .wave{animation:wave-rock 2.8s ease-in-out infinite}.sea-risk-2 .sea{filter:saturate(.86) brightness(.92)}.sea-risk-2 .wave{animation-duration:1.9s}.sea-risk-3 .sea{filter:saturate(.78) brightness(.86)}.sea-risk-3 .wave{animation-duration:1.3s}
@keyframes fish-body-wiggle{50%{translate:1px -1px;rotate:-2deg}}@keyframes tail-flick{50%{transform:rotate(18deg) scaleY(.82)}}@keyframes bubble-pop{0%{opacity:0;transform:translate(-50%,7px) scale(.55)}25%{opacity:1}100%{opacity:0;transform:translate(-75%,-18px) scale(1.35)}}@keyframes fish-drop-stage{0%{opacity:0;transform:translate(-50%,-280%) rotate(14deg) scale(var(--stage-size))}14%{opacity:1}78%{opacity:1;transform:translate(-50%,0) rotate(-12deg) scale(var(--stage-size))}88%{transform:translate(-50%,-8%) rotate(-7deg) scale(var(--stage-size))}100%{opacity:1;transform:translate(-50%,0) rotate(-9deg) scale(var(--stage-size))}}@keyframes fish-hit-stage{0%{transform:translate(-50%,0) rotate(-9deg) scale(var(--stage-size))}38%{transform:translate(calc(-50% + 7px),3px) rotate(-5deg) scale(calc(var(--stage-size) * 1.13),calc(var(--stage-size) * .74))}72%{transform:translate(calc(-50% - 4px),0) rotate(-12deg) scale(calc(var(--stage-size) * .95),calc(var(--stage-size) * 1.05))}100%{transform:translate(-50%,0) rotate(-9deg) scale(var(--stage-size))}}@keyframes bass-hit{0%{transform:translate(-50%,0) rotate(-9deg) scale(var(--stage-size))}35%{transform:translate(calc(-50% + 12px),-4px) rotate(12deg) scale(calc(var(--stage-size) * 1.08),calc(var(--stage-size) * .82))}65%{transform:translate(calc(-50% - 9px),4px) rotate(-22deg) scale(calc(var(--stage-size) * .94),calc(var(--stage-size) * 1.08))}100%{transform:translate(-50%,0) rotate(-9deg) scale(var(--stage-size))}}@keyframes puffer-grow{0%{transform:translate(-50%,0) rotate(-9deg) scale(.7)}75%{transform:translate(-50%,-8%) rotate(4deg) scale(1.12)}100%{transform:translate(-50%,0) rotate(-3deg) scale(1)}}@keyframes puffer-boing{0%,100%{transform:translate(-50%,0) rotate(-3deg)}35%{transform:translate(calc(-50% + 34px),-27px) rotate(35deg)}70%{transform:translate(calc(-50% + 54px),0) rotate(85deg)}}@keyframes wave-rock{50%{translate:0 4px}}

/* V0.1.1：让落船鱼成为甲板前景，并把断线读成一个明确事件。 */
.deck-fish{z-index:10;top:7%;cursor:pointer}.deck-fish:not([hidden]):hover .deck-fish-body{filter:brightness(1.12) saturate(1.12);animation:stage-fish-nudge .45s ease-in-out infinite}.deck-fish:not([hidden]):hover .deck-fish-tail{animation:tail-flick .18s ease-in-out infinite}.deck > .cast-button{bottom:0;min-height:46px}.break-banner{position:absolute;z-index:13;left:50%;top:48%;padding:10px 19px;border:2px solid rgba(255,250,222,.86);border-radius:999px;background:rgba(103,36,30,.92);color:#fff9df;font-size:22px;font-weight:900;letter-spacing:.08em;transform:translate(-50%,-50%);box-shadow:0 8px 24px rgba(48,14,11,.34);animation:break-pop .86s ease-out forwards;pointer-events:none}.break-banner[hidden]{display:none}.line-broken .hook-line{height:15%;opacity:1!important;transform:rotate(-24deg)!important;animation:line-snap .3s ease-out forwards}.line-broken .hook-line::after{content:"";position:absolute;left:1px;top:100%;width:3px;height:29%;border-radius:99px;background:rgba(237,255,250,.82);transform:rotate(56deg);transform-origin:top}.line-broken .bobber{animation:bobber-flee .58s cubic-bezier(.2,.7,.3,1) forwards}.water-fish.escaping{top:37%;opacity:0;transform:translateX(-50%) scaleX(var(--fish-face)) scale(calc(var(--fish-scale) * .62));transition:left .44s cubic-bezier(.15,.8,.2,1),top .45s ease,opacity .65s ease,transform .45s ease}.line-broken{animation:break-shake .22s linear 2}
@keyframes stage-fish-nudge{50%{translate:2px -3px}}@keyframes break-pop{0%{opacity:0;transform:translate(-50%,-45%) scale(.55)}20%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(.94)}}@keyframes line-snap{45%{filter:brightness(2);transform:rotate(16deg) scaleY(1.12)}100%{transform:rotate(-24deg) scaleY(.72)}}@keyframes bobber-flee{100%{transform:translate(70px,-32px) rotate(94deg);opacity:0}}@keyframes break-shake{25%{translate:3px 0}75%{translate:-3px 0}}
.deck-fish.landed.puffer-inflated{opacity:1;animation:puffer-grow .42s cubic-bezier(.1,.8,.2,1) forwards}.deck-fish.landed.puffer-inflated.puffer-boing{opacity:1;animation:puffer-boing .58s cubic-bezier(.15,.8,.25,1) forwards}
.deck-fish[data-fish="puffer"]{transition:width .5s ease,height .5s ease}.deck-fish.landed.puffer-inflated.puffer-deflating{opacity:1;animation:puffer-deflate .5s ease-in forwards}.deck-fish.sardine-slap .deck-fish-body{animation:sardine-body-slap .38s cubic-bezier(.15,.8,.25,1)}.deck-fish.sardine-slap .deck-fish-tail{animation:sardine-tail-slap .22s ease-in-out 2}.deck-fish.bass-slap .deck-fish-body{animation:bass-body-slap .4s cubic-bezier(.12,.82,.22,1)}.deck-fish.bass-slap .deck-fish-tail{animation:bass-tail-slap .18s ease-in-out 2}
.deck-fish.landed.hit{opacity:1}
.deck-fish.landed.hit{animation:none;transform:translate(-50%,0) rotate(-9deg) scale(var(--stage-size));transition:transform .12s ease}.deck-fish.landed.sardine-slap{transform:translate(calc(-50% + 10px),3px) rotate(-5deg) scale(var(--stage-size))}.deck-fish.landed.bass-slap{transform:translate(calc(-50% + 14px),-3px) rotate(9deg) scale(var(--stage-size))}
@keyframes sardine-body-slap{0%,100%{transform:scale(1)}30%{transform:scale(1.16,.58) translateX(9px)}65%{transform:scale(.93,1.08) translateX(4px)}}@keyframes sardine-tail-slap{50%{transform:translateX(-7px) rotate(-32deg) scaleY(.62)}}@keyframes bass-body-slap{0%,100%{transform:scale(1) rotate(0)}28%{transform:scale(1.2,.64) rotate(8deg) translateX(10px)}62%{transform:scale(.91,1.12) rotate(-9deg) translateX(-5px)}}@keyframes bass-tail-slap{50%{transform:translateX(-8px) rotate(-42deg) scaleY(.72)}}@keyframes puffer-deflate{0%{transform:translate(-50%,0) rotate(-3deg) scale(1)}70%{transform:translate(-50%,5px) rotate(2deg) scale(.68)}100%{transform:translate(-50%,0) rotate(-9deg) scale(.62)}}

/* V0.2：环境保持安静的平面大色块，鱼和甲板前景多一层材质与动作。 */
:root{color-scheme:light}
body{background:#103d56}
.game-shell{background:radial-gradient(circle at 50% 14%,#7fd0e4 0 12%,#2b7893 54%,#103d56 100%)}
.game{background:#77c9dd;box-shadow:0 0 0 1px rgba(255,255,255,.32),0 24px 72px rgba(0,27,41,.48)}
.sky{inset:0 0 63% 0;background:linear-gradient(180deg,#79c8df 0%,#a5dbea 63%,#cce8e5 100%)}
.sky::after{content:"";position:absolute;inset:auto -12% 0;height:24%;background:linear-gradient(180deg,transparent 0 47%,rgba(248,238,210,.88) 48% 100%);clip-path:polygon(0 63%,9% 48%,17% 63%,25% 39%,36% 62%,45% 48%,55% 66%,66% 37%,76% 63%,86% 45%,100% 64%,100% 100%,0 100%);opacity:.45}
.sun-glow{position:absolute;right:-8%;top:4%;width:35%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff9dc 0 28%,rgba(255,247,215,.66) 29% 49%,transparent 70%);opacity:.72}
.cloud{height:7%;background:#fff6e6;filter:none;opacity:.92;box-shadow:0 8px 0 rgba(234,246,241,.17)}
.cloud-one{top:21%;left:-9%;width:39%}.cloud-two{top:43%;right:-12%;width:32%;opacity:.82}
.gull{position:absolute;width:22px;height:12px;border-top:2px solid rgba(24,86,108,.82);border-radius:50% 50% 0 0;transform:rotate(-8deg);opacity:.78}.gull::after{content:"";position:absolute;right:-18px;top:-2px;width:20px;height:11px;border-top:2px solid rgba(24,86,108,.82);border-radius:50% 50% 0 0;transform:rotate(16deg)}.gull-one{right:27%;top:34%}.gull-two{right:13%;top:27%;transform:scale(.72) rotate(6deg)}
.sea{inset:35% 0 37% 0;background:linear-gradient(180deg,#4aa5c7 0%,#2c91b9 22%,#137da7 56%,#0d668d 100%)}
.sea::before{content:"";position:absolute;inset:12% -14% 0;background:repeating-linear-gradient(171deg,transparent 0 29px,rgba(190,236,237,.26) 30px 33px,transparent 34px 61px),repeating-linear-gradient(6deg,transparent 0 48px,rgba(4,76,109,.22) 49px 63px,transparent 64px 94px);opacity:.88}
.sea::after{content:"";position:absolute;inset:32% -12% 0;background:repeating-linear-gradient(176deg,transparent 0 18px,rgba(233,249,238,.32) 19px 21px,transparent 22px 45px);opacity:.54;transform:rotate(-2deg)}
.distant-land{position:absolute;z-index:1;bottom:84%;width:42%;height:18%;background:#648f88;clip-path:polygon(0 84%,12% 61%,22% 66%,34% 36%,48% 51%,63% 25%,74% 47%,86% 41%,100% 74%,100% 100%,0 100%);filter:drop-shadow(0 5px 0 rgba(73,119,128,.42))}.land-left{left:-7%}.land-right{right:-6%;height:21%;background:#597f78;transform:scaleX(-1)}.distant-land::after{content:"";position:absolute;inset:56% 0 0;background:#7da095;clip-path:polygon(0 30%,18% 0,36% 45%,53% 15%,70% 40%,87% 0,100% 36%,100% 100%,0 100%)}.lighthouse{position:absolute;z-index:2;right:26%;bottom:48%;width:5px;height:25px;background:#f8e9d5;transform:scaleX(-1);box-shadow:0 -5px 0 2px #c75e48}.lighthouse::after{content:"";position:absolute;left:-2px;top:-7px;width:9px;height:4px;background:#8e5148;border-radius:2px 2px 0 0}
.horizon-glint{z-index:2;top:18%;height:1px;background:rgba(238,255,248,.56);box-shadow:30px 17px 0 -1px rgba(238,255,248,.36),-54px 34px 0 -1px rgba(238,255,248,.28),77px 48px 0 -1px rgba(238,255,248,.24)}
.wave{z-index:2;border-top-color:rgba(231,249,242,.5);border-top-width:2px}.wave-a{top:37%}.wave-b{top:61%}.wave-c{top:82%}
.hud{z-index:15;inset:max(16px,env(safe-area-inset-top)) 16px auto;color:#173e54;text-shadow:0 1px rgba(255,255,255,.58)}
.title-lockup{gap:7px}.tiny-mark{padding:3px 7px;border:1px solid rgba(23,62,84,.45);background:rgba(255,249,228,.68);font-size:10px;letter-spacing:.08em}.hud h1{font-size:clamp(17px,4.4vw,23px);font-weight:900;letter-spacing:-.06em}.hud p{width:max-content;max-width:63%;margin-top:5px;padding:3px 7px;border-radius:5px;background:rgba(255,250,230,.4);font-size:12px;font-weight:700}.catch-hud{position:absolute;right:0;top:1px;padding:7px 11px;border:1px solid rgba(243,251,243,.74);border-radius:10px;background:rgba(20,72,93,.76);box-shadow:0 3px 0 rgba(10,53,71,.25);color:#fff9e6;font-size:12px;font-weight:800;letter-spacing:.04em}.catch-hud span{color:#f1ce69}.catch-hud strong{font-size:15px}
.fishing-feedback{z-index:9;top:107px;left:16px;right:16px;padding:8px 10px;border:1px solid rgba(229,249,244,.5);border-radius:11px;background:rgba(10,79,105,.57);box-shadow:none;color:#f5ffeb;backdrop-filter:blur(3px)}.meter + .meter{margin-top:6px}.meter-heading{font-size:11px}.meter-track{height:5px;margin-top:3px;background:rgba(1,38,58,.34)}.distance-fill{background:linear-gradient(90deg,#a6dcb7,#d8e874)}.tension-meter small{margin-top:3px;color:#d4f0e4;font-size:10px}.danger .fishing-feedback{background:rgba(133,62,42,.78);box-shadow:0 0 0 1px rgba(255,217,145,.84),0 5px 18px rgba(112,35,25,.26)}.danger .tension-meter small{color:#fff2c5}
.rod{z-index:6;width:9px;background:linear-gradient(90deg,#101c25 0 25%,#d4a46b 26% 39%,#26313a 40% 100%);box-shadow:1px 0 0 #050d12,4px 0 0 rgba(255,227,165,.23);opacity:.88}.b-mode .rod{opacity:1}.rod::before{content:"";position:absolute;left:-6px;top:37%;width:20px;height:8px;border-radius:99px;background:#b8874e;box-shadow:0 0 0 2px #1d2830,0 38px 0 -1px #bb8951,0 38px 0 1px #202b32}.hook-line{z-index:5;background:linear-gradient(transparent,rgba(255,253,232,.94) 12%,rgba(231,250,245,.72));box-shadow:0 0 calc(var(--line-tension) * .12px) rgba(255,105,72,.9)}.bobber{z-index:7;width:22px;height:27px;border-radius:48% 48% 48% 48%;background:linear-gradient(90deg,#f6fbf3 0 31%,#fb6d45 32% 72%,#b93a2e 73%);box-shadow:0 5px 0 rgba(1,48,69,.22),inset 2px 0 rgba(255,255,255,.72)}.bobber span{left:9px;background:#fff6dc}
.water-fish{z-index:8;filter:drop-shadow(0 8px 5px rgba(1,53,78,.32))}.water-fish-body{border:2px solid rgba(14,57,78,.36);box-shadow:inset 5px 5px rgba(255,255,255,.22),inset -8px -6px rgba(17,72,91,.28),0 2px 0 rgba(255,255,255,.19)}.water-fish-tail{border:2px solid rgba(14,57,78,.28)}
.water-fish[data-fish="sardine"] .water-fish-body,.fish-display[data-fish="sardine"] .fish-body,.deck-fish[data-fish="sardine"] .deck-fish-body{background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.83) 0 4%,transparent 5% 100%),repeating-radial-gradient(ellipse at 58% 52%,rgba(239,255,255,.17) 0 2px,transparent 3px 8px),linear-gradient(145deg,#e2f0ed 2%,#8eb9ca 44%,#385f83 100%);color:#183248;border-color:#315d76}.water-fish[data-fish="sardine"] .water-fish-tail,.deck-fish[data-fish="sardine"] .deck-fish-tail{background:linear-gradient(135deg,#7fb5c2,#345a7d)}
.water-fish[data-fish="bass"] .water-fish-body,.fish-display[data-fish="bass"] .fish-body,.deck-fish[data-fish="bass"] .deck-fish-body{background:radial-gradient(ellipse at 27% 28%,rgba(255,247,205,.7) 0 5%,transparent 6% 100%),repeating-radial-gradient(ellipse at 57% 50%,rgba(232,235,166,.24) 0 2px,transparent 3px 9px),linear-gradient(151deg,#eef0bd 0%,#9cad75 42%,#4a694d 75%,#293f3b 100%);border:2px solid #344d3b;color:#202d2a;box-shadow:inset 6px 5px rgba(255,244,192,.21),inset -10px -7px rgba(24,53,41,.32)}.water-fish[data-fish="bass"] .water-fish-tail,.deck-fish[data-fish="bass"] .deck-fish-tail{background:linear-gradient(135deg,#849a61,#3b5541);border-color:#344d3b}
.water-fish[data-fish="puffer"] .water-fish-body,.fish-display[data-fish="puffer"] .fish-body,.deck-fish[data-fish="puffer"] .deck-fish-body{background:radial-gradient(circle at 35% 27%,#fff9d7 0 8%,transparent 9%),radial-gradient(circle at 19% 58%,#95733d 0 3px,transparent 4px),radial-gradient(circle at 67% 22%,#95733d 0 3px,transparent 4px),radial-gradient(circle at 77% 69%,#95733d 0 3px,transparent 4px),radial-gradient(circle at 44% 80%,#95733d 0 3px,transparent 4px),linear-gradient(145deg,#f9dfa0,#d69e4e);border:2px solid #8e6d3d;color:#443c29;box-shadow:inset 5px 5px rgba(255,255,236,.38),inset -7px -6px rgba(126,81,35,.18)}
.deck{height:37%;overflow:hidden;background:linear-gradient(102deg,#dcae72 0%,#f2cf99 46%,#d69b62 100%);box-shadow:inset 0 13px 12px rgba(78,50,33,.21),inset 0 -16px 22px rgba(116,68,40,.1)}.deck::before{opacity:.62;background:repeating-linear-gradient(94deg,transparent 0 15%,rgba(105,62,34,.22) 15.3% 15.8%,transparent 16.2% 31%),radial-gradient(ellipse at 17% 65%,rgba(91,118,128,.28) 0 4px,transparent 5px),radial-gradient(ellipse at 72% 35%,rgba(91,118,128,.2) 0 3px,transparent 4px)}.deck::after{content:"";position:absolute;inset:10% 0 0;background:repeating-linear-gradient(0deg,transparent 0 27%,rgba(116,70,41,.32) 28% 28.8%,transparent 29.6% 57%);opacity:.64}.deck-lines{display:none}
.boat-rail{position:absolute;z-index:8;left:-4%;right:-4%;top:0;height:34px;border-top:7px solid #fff1d5;border-bottom:5px solid #7899a1;background:linear-gradient(#f4e4ca,#b7d1ce);box-shadow:0 5px 0 rgba(37,76,89,.38),0 10px 11px rgba(66,55,41,.18);transform:rotate(-1deg)}.boat-rail span{position:absolute;top:18px;width:8px;height:49px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#edf2df,#8eaeb0);box-shadow:2px 0 #557b87}.boat-rail span:nth-child(1){left:13%}.boat-rail span:nth-child(2){left:37%}.boat-rail span:nth-child(3){left:64%}.boat-rail span:nth-child(4){left:87%}
.rail{z-index:7;height:8px;background:#72949c;box-shadow:0 3px 0 rgba(40,71,81,.32)}.deck-label{z-index:3;right:14px;bottom:51px;color:rgba(91,57,35,.52);font-size:10px;letter-spacing:.16em}.catch-pile{z-index:6;left:13px;bottom:48px}.pile-count{background:#315c68;color:#fff6dd}.pile-fish{filter:drop-shadow(0 4px 2px rgba(75,39,20,.19))}
.deck-fish{z-index:11;top:18%;width:158px;height:81px;filter:drop-shadow(0 11px 5px rgba(76,46,26,.3));transform:translate(-50%,-280%) rotate(-8deg)}.deck-fish .deck-fish-body{inset:0 0 0 27px;border:2px solid #315d76;font-size:25px;letter-spacing:-.19em;box-shadow:inset 6px 5px rgba(255,255,255,.25),inset -10px -8px rgba(25,54,77,.28)}.deck-fish .deck-fish-tail{top:18px;width:43px;height:42px;border-radius:5px;border:2px solid #315d76}.deck-fish::before{content:"";position:absolute;z-index:0;left:66px;top:1px;width:45px;height:29px;background:#416b70;clip-path:polygon(0 100%,19% 5%,38% 74%,56% 0,76% 75%,100% 24%,92% 100%);transform:rotate(-9deg)}.deck-fish-body{z-index:1}.deck-fish-tail{z-index:1}.deck-fish[data-fish="bass"]{width:186px;height:96px}.deck-fish[data-fish="bass"]::before{left:78px;top:-4px;width:66px;height:43px;background:#425b43;clip-path:polygon(0 100%,13% 17%,28% 75%,45% 0,61% 76%,78% 14%,100% 100%)}.deck-fish[data-fish="bass"] .deck-fish-body{inset:2px 0 0 31px;font-size:28px}.deck-fish[data-fish="bass"] .deck-fish-tail{top:21px;width:49px;height:49px}.deck-fish[data-fish="puffer"]{width:108px;height:76px}.deck-fish[data-fish="puffer"]::before{display:none}.deck-fish[data-fish="puffer"] .deck-fish-body{inset:0;border-radius:48%;font-size:18px}.deck-fish[data-fish="puffer"] .deck-fish-tail{left:-16px;top:25px;width:31px;height:27px;border-color:#8e6d3d;background:#cc994f}.deck-fish.puffer-inflated{width:142px;height:125px}.deck-fish.puffer-inflated .deck-fish-body{border-radius:50%;font-size:23px}
.fish-display{width:102px;height:56px}.fish-display .fish-body{inset:2px 0 2px 17px;border:2px solid #315d76;box-shadow:inset 5px 4px rgba(255,255,255,.25),inset -7px -5px rgba(25,54,77,.24)}.fish-display .fish-tail{top:11px;width:31px;height:31px;border:2px solid #315d76}.catch-card{z-index:17;width:201px;padding:15px 15px 13px;border:2px solid #4f4233;border-radius:5px;background:linear-gradient(135deg,#fff2d7,#ecd2a8);color:#2f2924;box-shadow:0 9px 0 rgba(73,50,33,.18),0 14px 26px rgba(0,34,49,.28);clip-path:polygon(4% 0,96% 2%,100% 11%,98% 89%,93% 100%,7% 98%,0 91%,2% 10%)}.catch-card strong{font-size:21px}.catch-card span{color:#674d39}.catch-card::before{content:"";position:absolute;inset:6px;border:1px dashed rgba(108,76,49,.34);pointer-events:none}
.splat{z-index:15;top:23%;color:#3d342a;font-size:31px;text-shadow:2px 2px #fff0d2,-1px -1px #fff0d2}
.cast-button,.reel-control{z-index:24;border:2px solid rgba(255,247,222,.8);border-radius:14px;background:linear-gradient(145deg,#275d76,#153f59);box-shadow:0 5px 0 #112f42,0 10px 20px rgba(60,38,23,.18);color:#fff8e9}.deck > .cast-button{bottom:8px;min-height:45px;font-size:15px}.cast-button span{color:#c9e5dc}.reel-control{bottom:10px;background:linear-gradient(145deg,#2c7590,#15516c)}.reel-control.holding{background:linear-gradient(#e0aa55,#b76d3d);box-shadow:0 1px 0 #794425}.decision-panel{z-index:26;background:linear-gradient(145deg,#f9ebcf,#e7c798);color:#342b25;border:2px solid #5d4b38;border-radius:8px;box-shadow:0 12px 30px rgba(0,28,42,.42);clip-path:polygon(3% 0,98% 2%,100% 7%,98% 96%,93% 100%,4% 98%,0 91%,1% 6%)}.decision-panel button{background:#f4e4c6;color:#254a5a;border:1px solid #365665}.decision-panel button:last-child{background:#285f7d;color:#fff9e6}
.break-banner{z-index:22;background:#6f382d;border-color:#ffebbd;box-shadow:0 8px 25px rgba(40,23,20,.35)}
@keyframes deck-warm-shimmer{50%{opacity:.78}}.deck::before{animation:deck-warm-shimmer 4.8s ease-in-out infinite}

/* V0.2 甲板碰撞：舞台鱼越过船沿落下后，位置由 JS 的二维速度驱动。 */
.deck{overflow:visible}
.deck-fish{--fish-x:0px;--fish-y:0px;--fish-angle:-9deg;--impact-x:1;--impact-y:1;transform-origin:50% 58%}
.deck-fish.landed.physics-active,.deck-fish.landed.physics-active.puffer-inflated{opacity:1!important;visibility:visible;animation:none!important;transform:translate(calc(-50% + var(--fish-x)),var(--fish-y)) rotate(var(--fish-angle)) scale(calc(var(--stage-size) * var(--impact-x)),calc(var(--stage-size) * var(--impact-y)))!important;transition:none!important}
.deck-fish.physics-active.deck-impact{--impact-x:1.11;--impact-y:.78}
.deck-fish.physics-active.deck-impact .deck-fish-tail{animation:deck-tail-impact .13s ease-out 2}
.deck-fish.physics-active.deck-impact .deck-fish-body{filter:brightness(1.11) saturate(1.13)}
.deck-fish.landed{z-index:17}
.deck-fish.landed.physics-active[data-fish="bass"] .deck-fish-body{animation:bass-deck-thud .16s ease-out}
.deck-fish.landed.physics-active[data-fish="puffer"] .deck-fish-body{box-shadow:inset 5px 5px rgba(255,255,236,.38),inset -7px -6px rgba(126,81,35,.18),0 3px 0 rgba(255,246,207,.36)}
@keyframes deck-tail-impact{50%{transform:translateX(-7px) rotate(-35deg) scaleY(.7)}}
@keyframes bass-deck-thud{50%{transform:scale(1.1,.74) rotate(4deg)}}

/* 正式沙丁鱼 PNG：素材自己提供表情与轮廓，不叠加程序鱼脸。 */
.fish-sprite{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 3px 2px rgba(13,43,60,.2))}
.water-fish[data-fish="sardine"],.fish-display[data-fish="sardine"]{aspect-ratio:2.78;height:auto}
.water-fish[data-fish="sardine"]{width:130px}.fish-display[data-fish="sardine"]{width:110px}
.water-fish[data-fish="sardine"] .sardine-sprite,.fish-display[data-fish="sardine"] .sardine-sprite,.deck-fish[data-fish="sardine"] .sardine-sprite,.pile-fish[data-fish="sardine"] .sardine-sprite{display:block}
.water-fish[data-fish="sardine"] .water-fish-body,.water-fish[data-fish="sardine"] .water-fish-tail,.fish-display[data-fish="sardine"] .fish-body,.fish-display[data-fish="sardine"] .fish-tail,.deck-fish[data-fish="sardine"] .deck-fish-body,.deck-fish[data-fish="sardine"] .deck-fish-tail,.deck-fish[data-fish="sardine"]::before,.pile-fish[data-fish="sardine"] .deck-fish-body,.pile-fish[data-fish="sardine"] .deck-fish-tail{display:none}
.water-fish[data-fish="sardine"] .sardine-sprite{animation:sardine-water-wiggle .58s ease-in-out infinite;filter:drop-shadow(0 5px 3px rgba(2,46,70,.33))}
.fish-display[data-fish="sardine"] .sardine-sprite{filter:drop-shadow(0 3px 2px rgba(24,45,56,.25))}
.deck-fish[data-fish="sardine"]{width:188px;height:94px;clip-path:polygon(1% 55%,3% 40%,9% 29%,19% 20%,32% 16%,40% 8%,54% 14%,67% 24%,80% 34%,91% 13%,99% 25%,94% 45%,90% 54%,99% 81%,91% 70%,81% 57%,68% 65%,55% 76%,41% 83%,23% 87%,8% 81%,2% 70%)}
.deck-fish[data-fish="sardine"] .sardine-sprite{filter:drop-shadow(0 8px 4px rgba(45,39,30,.28));transform-origin:50% 54%}
.deck-fish[data-fish="sardine"].sardine-slap .sardine-sprite{animation:sardine-sprite-slap .38s cubic-bezier(.15,.8,.25,1)}
.deck-fish[data-fish="sardine"].deck-impact .sardine-sprite{animation:sardine-sprite-impact .16s ease-out}
.pile-fish[data-fish="sardine"]{width:72px;height:27px}.pile-fish[data-fish="sardine"] .sardine-sprite{filter:drop-shadow(0 2px 1px rgba(51,33,21,.2))}
@keyframes sardine-water-wiggle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@keyframes sardine-sprite-slap{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08,.72) translateX(8px) rotate(-3deg)}65%{transform:scale(.96,1.06) translateX(3px) rotate(2deg)}}
@keyframes sardine-sprite-impact{50%{transform:scale(1.1,.79) rotate(-4deg)}}

/* V0.2 完整环境图：静态环境交给单张背景，动态玩法层继续独立存在。 */
.game{background:#5ec0e9 url("assets/environment-web.webp") center center/cover no-repeat}
.sky{display:none}
.sea{background:transparent!important}
.sea::before,.sea::after,.distant-land,.horizon-glint,.wave{display:none}
.deck{background:transparent!important;box-shadow:none!important}
.deck::before,.deck::after,.deck-lines,.boat-rail,.rail,.deck-label{display:none}
.water-fish{top:35%}
.water-splash{top:46%}
.dash-bubbles{top:43%}

/* V0.2 素材包：三条鱼均使用正式贴图，程序形体只保留动画与碰撞容器。 */
.water-fish[data-fish] .fish-sprite,.fish-display[data-fish] .fish-sprite,.deck-fish[data-fish] .fish-sprite,.pile-fish[data-fish] .fish-sprite{display:block}
.water-fish[data-fish] .water-fish-body,.water-fish[data-fish] .water-fish-tail,.fish-display[data-fish] .fish-body,.fish-display[data-fish] .fish-tail,.deck-fish[data-fish] .deck-fish-body,.deck-fish[data-fish] .deck-fish-tail,.deck-fish[data-fish]::before,.pile-fish[data-fish] .deck-fish-body,.pile-fish[data-fish] .deck-fish-tail{display:none}
.water-fish[data-fish="bass"],.water-fish[data-fish="sardine"]{width:130px;height:auto;aspect-ratio:2/1}.water-fish[data-fish="puffer"]{width:82px;height:58px;aspect-ratio:1.5/1}
.fish-display[data-fish="bass"],.fish-display[data-fish="sardine"]{width:116px;height:58px;aspect-ratio:2/1}.fish-display[data-fish="puffer"]{width:78px;height:55px;aspect-ratio:1.5/1}
.deck-fish[data-fish="bass"]{width:198px;height:99px}.deck-fish[data-fish="puffer"]{width:122px;height:82px}.deck-fish[data-fish="puffer"].puffer-inflated{width:178px;height:118px}
.water-fish[data-fish="bass"] .fish-sprite,.water-fish[data-fish="puffer"] .fish-sprite{animation:fish-asset-wiggle .46s ease-in-out infinite;filter:drop-shadow(0 5px 3px rgba(2,46,70,.33))}
.deck-fish[data-fish="bass"].bass-slap .fish-sprite{animation:bass-sprite-slap .4s cubic-bezier(.12,.82,.22,1)}
.deck-fish[data-fish="puffer"].puffer-boing .fish-sprite{animation:puffer-sprite-boing .58s cubic-bezier(.15,.8,.25,1)}
@keyframes fish-asset-wiggle{50%{transform:translateY(-2px) rotate(2deg)}}
@keyframes bass-sprite-slap{0%,100%{transform:scale(1) rotate(0)}28%{transform:scale(1.17,.72) rotate(8deg) translateX(9px)}62%{transform:scale(.94,1.08) rotate(-8deg) translateX(-4px)}}
@keyframes puffer-sprite-boing{50%{transform:scale(1.08,.92) rotate(13deg)}}

/* 完整鱼竿：整张图围绕握把旋转；竿尖坐标由 app.js 的 ROD_ANCHORS 提供给鱼线。 */
.sea{overflow:visible}
.rod-full{--rod-direction:0;--fish-force:0;position:absolute;z-index:7;right:8%;bottom:-60%;width:42%;height:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none;transform-origin:83% 87%;transform:rotate(calc(var(--rod-direction) * 12deg + var(--fish-force) * 4deg));transition:transform .055s linear;filter:drop-shadow(0 5px 4px rgba(0,24,37,.3))}
.hook-line{--line-angle:0deg;z-index:5;left:57%;top:31%;height:80px;transform:rotate(var(--line-angle))!important;transform-origin:top center;transition:width .08s linear,box-shadow .08s linear,transform .035s linear,opacity .08s linear,height .08s linear}
.game.fishing .hook-line,.game.hooked .hook-line{transform:rotate(var(--line-angle))!important}
.game.catching .hook-line{height:0!important}
.water-fish{transition:left .035s linear,top .06s linear,transform .08s ease,opacity .12s linear}
.water-splash,.dash-bubbles{transition:left .04s linear,top .08s linear}
.deck-fish.retiring,.deck-fish.landed.physics-active.retiring{pointer-events:none;opacity:0!important;transition:opacity .28s ease!important}
.deck-fish.retiring .fish-sprite{transform:scale(.78);transition:transform .28s ease}

/* 手机试玩素材包：更克制的远处浮漂。 */
.bobber{z-index:8;width:15px;height:30px;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 3px 2px rgba(0,45,67,.25));transition:left .12s linear,top .16s ease,transform .22s ease}
.bobber img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.bobber span{display:none}
.game.fishing .bobber,.game.hooked .bobber{animation:float-idle .72s ease-in-out infinite}
.game.catching .bobber{top:-20%!important;transform:rotate(15deg)}
.hook-line{z-index:6}
.water-fish{z-index:9}
.reel-control{touch-action:none;min-height:76px}
.deck-fish{touch-action:manipulation}
@keyframes float-idle{50%{transform:translateY(4px) rotate(-3deg)}}

/* Performance pass: water objects only composite transforms during the fishing RAF. */
.meter-fill{--meter-level:0;width:100%;transform:scaleX(var(--meter-level));transform-origin:left center;transition:none}
.fishing-feedback{backdrop-filter:none}
.rod-full{transition:none;filter:none;will-change:transform}
.water-fish{--water-x:0px;--water-y:0px;--fish-pulse:1;left:50%!important;top:35%!important;transform:translate3d(var(--water-x),var(--water-y),0) translateX(-50%) scaleX(var(--fish-face)) scale(calc(var(--fish-scale) * var(--fish-pulse)))!important;transition:opacity .08s linear;filter:none;will-change:transform,opacity}
.water-fish .fish-sprite{filter:none}
.dash-prep .water-fish{--fish-pulse:.91}
.water-splash,.dash-bubbles{--effect-x:0px;--effect-y:0px;left:50%!important;translate:var(--effect-x) var(--effect-y);transition:none;will-change:translate,transform,opacity}
.hook-line{--line-x:0px;--line-y:0px;--line-angle:0deg;--line-length:1;left:0!important;top:0!important;width:2px!important;height:1px!important;border-radius:99px;box-shadow:none!important;transform:translate3d(var(--line-x),var(--line-y),0) rotate(var(--line-angle)) scaleY(var(--line-length))!important;transform-origin:top center;transition:none!important;will-change:transform,opacity}
.game.catching .hook-line{--line-length:0!important}
.game.danger .hook-line{box-shadow:0 0 4px rgba(255,105,72,.78)!important}

/* V0.2：鱼线是同一帧 SVG 的两段路径。竿尖、入水点和鱼的位置都由 app.js 的缓存几何计算。 */
svg.hook-line{
  --above-opacity:.55;
  --below-opacity:.24;
  position:absolute;
  z-index:6;
  inset:0!important;
  display:block;
  width:100%!important;
  height:100%!important;
  overflow:visible;
  pointer-events:none;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  transform-origin:initial!important;
  transition:opacity .16s ease!important;
  will-change:opacity;
}
.hook-line .line-above{
  fill:none;
  stroke:rgba(247,253,239,.9);
  stroke-width:1.15px;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:var(--above-opacity);
}
.hook-line .line-below{
  fill:none;
  stroke:rgba(133,181,198,.88);
  stroke-width:.78px;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:var(--below-opacity);
}
/* 让浮漂的世界位置只由轻量 translate 改变，不再被旧的 bob 动画覆盖。 */
.bobber{
  --bobber-x:0px;
  --bobber-y:0px;
  left:calc(50% - 7.5px)!important;
  top:37%!important;
  translate:var(--bobber-x) var(--bobber-y);
  transition:none!important;
  filter:none!important;
  will-change:translate;
}
.game.fishing .bobber,.game.hooked .bobber{animation:none!important}
.game.hooked.danger .bobber{filter:none!important}
/* 只在真正遛鱼时显示；上岸后的残留路径不会重新连到甲板鱼。 */
.game:not(.hooked) svg.hook-line{
  height:100%!important;
  opacity:0!important;
  transform:none!important;
  animation:none!important;
}
/* 断线沿用已有失败反馈：保留一小截断开的上半线，水下连接立即消失。 */
.game.line-broken svg.hook-line{opacity:.78!important}
.game.line-broken .line-above{stroke-dasharray:3px 6px;opacity:.78!important}
.game.line-broken .line-below{opacity:0!important}