:root { color-scheme: dark; --fish-bg:#061b20; --fish-panel:#0b2930; --fish-panel-2:#0e353b; --fish-line:#28717a; --fish-cyan:#5bd4d0; --fish-mint:#baf6df; --fish-yellow:#f0c657; --fish-red:#f26759; --fish-water:#0c6673; }
body { background:radial-gradient(circle at 50% 0,#103c43 0,var(--fish-bg) 44rem); color:#e6fff7; }
.fishing-shell { max-width:1120px; }
.game-card,.content-section,.info-panel,.faq-section,.related-section { border-radius:5px; }
.game-card { border-color:var(--fish-line); background:linear-gradient(180deg,rgba(13,48,55,.97),rgba(6,27,32,.98)); box-shadow:0 20px 60px rgba(0,0,0,.32); }
.eyebrow,.section-kicker,.stat span,.stage-kicker { color:var(--fish-cyan); }
.mode-panel,.progress-box,.stat,.info-panel { border-color:#245b63; background:rgba(6,27,32,.64); border-radius:5px; }
.mode-switch button,.primary-button,.reel-button,.related-links a,.faq-list details { border-radius:5px; }
.mode-switch button[aria-pressed="true"],.primary-button { background:var(--fish-yellow); color:#10292b; border-color:#ffe08a; }
.stats-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.fishing-stage { margin-top:24px; padding:clamp(15px,3vw,28px); border:1px solid #245b63; border-radius:5px; background:#071f25; overflow:hidden; }
.stage-copy { text-align:center; min-height:116px; }
.stage-copy h2 { margin:.35rem 0 .45rem; font-size:clamp(1.45rem,4vw,2.5rem); }
.stage-copy p { margin-inline:auto; max-width:650px; }
.timing-wrap { margin:14px auto 18px; max-width:820px; }
.timing-labels { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:7px; color:#a8d5d1; font-family:var(--font-pixel,monospace); font-size:.75rem; letter-spacing:.08em; }
.timing-labels strong { color:#fff3bf; white-space:nowrap; }
.timing-bar { position:relative; height:20px; overflow:hidden; border:2px solid #4b9094; border-radius:5px; background:#031317; box-shadow:inset 0 0 0 2px #0c343a; }
.timing-bar > span { position:absolute; inset:3px; transform:scaleX(0); transform-origin:left center; border-radius:2px; background:linear-gradient(90deg,var(--fish-cyan),var(--fish-yellow)); transition:transform 70ms linear; }
.timing-bar[data-phase="waiting"] > span { width:34%; transform:scaleX(1)!important; animation:status-sweep 1.45s ease-in-out infinite alternate; background:repeating-linear-gradient(90deg,#2fa5aa 0 10px,#6bd4c9 10px 20px); }
.timing-bar[data-urgent="true"] > span { background:var(--fish-red); }
.timing-bar i { position:absolute; top:0; bottom:0; width:1px; background:rgba(225,255,248,.24); }
.timing-bar i:nth-of-type(1){left:25%}.timing-bar i:nth-of-type(2){left:50%}.timing-bar i:nth-of-type(3){left:75%}
@keyframes status-sweep { from{left:3%} to{left:63%} }
.fishing-scene { position:relative; display:block; width:100%; max-width:820px; height:clamp(245px,42vw,390px); margin:0 auto; padding:0; overflow:hidden; cursor:pointer; touch-action:manipulation; border:2px solid #347e86; border-radius:5px; background:#0d3f48; color:#fff; }
.fishing-scene:disabled { cursor:default; opacity:1; }
.sky { position:absolute; inset:0 0 44%; background:linear-gradient(#0e4147,#17626a); }
.sky::before,.sky::after,.sky i { content:""; position:absolute; width:7px; height:7px; background:#6ed0cc; box-shadow:12px 0 #6ed0cc,24px 0 #6ed0cc; opacity:.45; }
.sky::before { left:13%; top:22%; }.sky::after{right:17%;top:36%}.sky i:first-child{left:44%;top:15%}
.bank { position:absolute; z-index:2; left:0; right:0; top:51%; height:8%; background:repeating-linear-gradient(90deg,#9b7b47 0 18px,#ae8b52 18px 36px); clip-path:polygon(0 15%,18% 0,39% 36%,62% 5%,80% 32%,100% 12%,100% 100%,0 100%); }
.water { position:absolute; z-index:3; inset:56% 0 0; background:linear-gradient(#0c7180,#074d5b); }
.water::before,.water i { content:""; position:absolute; left:0; right:0; height:4px; opacity:.75; background:repeating-linear-gradient(90deg,transparent 0 14px,#5ac1c3 14px 35px,transparent 35px 54px); }
.water::before{top:12%}.water i:nth-child(1){top:34%;transform:translateX(16px)}.water i:nth-child(2){top:60%;transform:translateX(-10px)}.water i:nth-child(3){top:82%;transform:translateX(28px)}
.line { position:absolute; z-index:5; left:50%; top:8%; height:55%; width:2px; background:#d8eee8; transform:rotate(3deg); transform-origin:top; }
.bobber { position:absolute; z-index:6; left:calc(50% - 12px); top:49%; width:24px; height:45px; border:3px solid #dbeee7; border-radius:5px 5px 12px 12px; background:linear-gradient(to bottom,var(--fish-red) 0 48%,#f5e3aa 48% 100%); box-shadow:0 6px 0 rgba(0,0,0,.25); transition:transform 90ms linear,filter 90ms linear; }
.bobber::before { content:""; position:absolute; left:8px; top:-16px; width:3px; height:15px; background:#f3f3d0; }
.bobber i { position:absolute; left:-16px; right:-16px; bottom:-7px; height:4px; border:2px solid #64d6d2; border-top:0; border-radius:50%; }
[data-state="twitch"] .bobber { animation:twitch 220ms steps(3); }
[data-state="bite"] .bobber { transform:translateY(50px) scale(.9); filter:saturate(1.6) brightness(1.15); box-shadow:0 0 18px rgba(242,103,89,.75); }
@keyframes twitch { 0%,100%{transform:translate(0,0)} 30%{transform:translate(-9px,-7px) rotate(-5deg)} 65%{transform:translate(8px,2px) rotate(5deg)} }
.scene-message { position:absolute; z-index:9; left:50%; bottom:16px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); padding:9px 13px; border:1px solid #58aeb0; border-radius:5px; background:rgba(3,19,23,.88); color:#eafff8; font-family:var(--font-pixel,monospace); font-size:clamp(.68rem,2vw,.88rem); letter-spacing:.08em; }
[data-state="bite"] .scene-message { color:#fff3bf; border-color:var(--fish-red); }
.result-line { min-height:28px; margin:12px 0 6px; text-align:center; color:#acd7d4; }
.result-line[data-kind="correct"] { color:#86e0bb; }.result-line[data-kind="wrong"] { color:#ff9a8f; }
.reel-button { display:flex; align-items:center; justify-content:center; flex-direction:column; width:min(100%,520px); min-height:82px; margin:10px auto; border:2px solid #65d8d1; background:#0e4e55; color:#effff9; cursor:pointer; touch-action:manipulation; box-shadow:0 5px 0 #052f35; }
.reel-button strong { font-family:var(--font-pixel,monospace); font-size:1.18rem; letter-spacing:.1em; }.reel-button span{margin-top:7px;font-size:.75rem;color:#bde8df}.reel-button kbd{padding:3px 7px;border:1px solid #79bab7;border-radius:3px;background:#082b30;color:#fff}
.reel-button:disabled { opacity:.38; cursor:default; box-shadow:none; }
[data-state="bite"] .reel-button { border-color:#ffd86a; background:#a53f35; box-shadow:0 5px 0 #5e231e; }
.primary-button { display:block; margin:16px auto 0; min-width:min(100%,310px); }
.control-note { margin:14px auto 0; max-width:680px; text-align:center; color:#99c3c0; }
.steps-list li { border-radius:5px; }
.related-links a:hover { border-color:var(--fish-cyan); }
@media (max-width:720px) { .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fishing-stage{padding:14px 10px}.stage-copy{min-height:135px}.reel-button{min-height:88px}.timing-labels{align-items:flex-end;font-size:.66rem}.topbar-meta{gap:7px}.topbar-link{font-size:.58rem} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important}.timing-bar[data-phase="waiting"] > span{animation:none;left:33%}.bobber{transition:none}[data-state="twitch"] .bobber{animation:none;transform:translateX(6px)} }