@font-face{font-family:PixelCN;src:local("Noto Sans CJK SC");font-display:swap}
:root{--paper:#f5f0df;--ink:#294e40;--green:#365e48;--sage:#94a678;--coral:#d7785d;--line:#48674c;--shadow:#ddd0aa;--sprite:url('assets/sprites.png')}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);font-family:PixelCN,"PingFang SC","Microsoft YaHei",sans-serif;overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--coral);outline-offset:4px}button:disabled{cursor:default;opacity:.45}button svg{width:23px;height:23px;fill:currentColor}button[hidden],[hidden]{display:none!important}
.game-shell{width:min(100%,464px);margin:auto;padding:20px 18px max(14px,env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column;justify-content:center}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:monospace;font-weight:900;font-size:32px;letter-spacing:3px;text-decoration:none;color:var(--ink);display:flex;align-items:center;flex:1;border-bottom:2px solid var(--line);line-height:1.2}.brand span{font-size:22px;margin-left:12px;color:var(--sage)}.tools{display:flex;gap:8px}.icon-button{border:2px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);height:40px;width:40px;display:grid;place-items:center}.icon-button:active{background:#e5e4cc}.sound-wave{display:none}#sound[aria-pressed=true] .sound-wave{display:block}#sound[aria-pressed=true] .sound-off{display:none}
.heading{text-align:center;margin:16px 0 15px}.heading h1{font-size:38px;font-weight:900;letter-spacing:4px;margin:0;line-height:1.2;text-shadow:2px 2px 0 #dfdfbf}.heading p{font-size:14px;letter-spacing:1px;margin:8px 0 0}.title-fish{display:inline-block;width:38px;height:30px;margin-left:5px;vertical-align:middle;background-image:var(--sprite);background-size:300% 200%;background-position:0 100%;image-rendering:pixelated}
.play-area{width:min(100%,calc(100svh - 350px));margin:0 auto}.hud{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:7px;margin-bottom:10px;height:39px}.hud-box{border:2px solid var(--line);border-radius:5px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px;font-weight:600;white-space:nowrap}.hud-box strong{font-family:monospace;font-size:22px;color:var(--coral);font-weight:900}.hud-box.score{gap:7px}.score strong{letter-spacing:1px}.hearts{color:var(--coral);font-size:20px;letter-spacing:0;text-shadow:1px 2px 0 #d9bd97}.hearts .lost{color:#c6c8ae}
.board-wrap{position:relative;border:5px solid var(--green);box-shadow:0 4px 0 #aab58b;background:#eae0c0;width:100%;aspect-ratio:1;border-radius:3px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated;outline:none}.objective{text-align:center;font-size:13px;font-weight:600;letter-spacing:.3px;min-height:20px;margin:13px -8px 10px}.objective::before,.objective::after{content:'✿';color:var(--coral);font-size:14px;padding:0 7px}.controls{display:flex;align-items:center;justify-content:space-around;gap:14px}.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,46px);gap:0;user-select:none;touch-action:none}.direction{border:2px solid #2a4c3c;background:var(--green);color:var(--paper);box-shadow:inset 0 0 0 3px #7f9568,0 4px 0 var(--shadow);border-radius:12px;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none}.direction:active,.direction.pressed{transform:translateY(3px);filter:brightness(1.15);box-shadow:inset 0 0 0 3px #9aaa79}.up{grid-column:2;grid-row:1}.left{grid-column:1;grid-row:2}.right{grid-column:3;grid-row:2}.down{grid-column:2;grid-row:3}.pad-center{grid-column:2;grid-row:2;display:grid;place-items:center;color:var(--sage);font-size:25px}.collection{max-width:164px;display:grid;grid-template-columns:44px auto;align-items:center;gap:4px 7px;border:2px solid var(--line);border-radius:8px;padding:12px 10px 9px;font-size:13px;font-weight:600}.collection p{margin:3px 0 0;font-family:monospace;font-size:24px;white-space:nowrap}.collection p strong{color:var(--coral)}.collection p b{font-weight:400}.fish-icon{width:44px;height:44px;background-image:var(--sprite);background-size:300% 200%;background-position:0 100%;image-rendering:pixelated}.collection small{grid-column:1/-1;font-size:10px;text-align:center;opacity:.8;margin-top:3px}.control-hint{text-align:center;font-size:10px;color:#64765b;margin:13px -10px 0}footer{display:flex;align-items:center;gap:10px;margin-top:20px;color:#657c56;font-size:11px}footer p{flex:1;text-align:center;border-top:1px solid #8b9d73;padding-top:9px;margin:0;letter-spacing:1px}footer span{font-size:20px}footer i{font-style:normal;color:var(--coral)}
.overlay{position:absolute;inset:0;background:#e8e4cd99;backdrop-filter:blur(2px);display:grid;place-items:center;padding:12px}.dialog{background:var(--paper);border:3px solid var(--line);box-shadow:5px 5px 0 #45694a44;text-align:center;width:min(94%,290px);padding:14px 18px 17px;border-radius:8px}.dialog-cat{width:66px;height:60px;margin:0 auto 3px;background:var(--sprite) 100% 0 / 300% 200%;image-rendering:pixelated}.dialog h2{font-size:23px;margin:6px 0 8px;letter-spacing:1px}.dialog p{font-size:13px;line-height:1.7;margin:0 0 14px}.primary{background:var(--green);color:var(--paper);border:2px solid #254332;border-radius:6px;padding:11px 20px;box-shadow:0 4px 0 #aab58b;font-weight:700;font-size:15px;min-width:160px;min-height:44px}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #aab58b}.text-button{display:block;margin:10px auto 0;background:none;border:0;text-decoration:underline;color:var(--ink);font-size:12px;padding:5px}.dialog small{display:block;font-size:10px;margin-top:14px;color:#6c795e}#primary:disabled{min-width:150px}.shake{animation:shake .22s linear}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(min-width:700px){body{background-image:radial-gradient(#c7cfb866 1px,transparent 1px);background-size:20px 20px}.game-shell{padding:26px 24px;min-height:100svh;background:var(--paper);border-inline:1px solid #dee2cd}.play-area{width:min(100%,calc(100svh - 350px))}}
@media(max-height:740px){.game-shell{padding-top:10px;padding-bottom:8px}.topbar .icon-button{height:36px;width:36px}.brand{font-size:27px}.heading{margin:9px 0}.heading h1{font-size:30px}.heading p{font-size:12px;margin-top:4px}.play-area{width:min(100%,calc(100svh - 293px))}.hud{height:32px;margin-bottom:7px}.hud-box{font-size:12px}.hud-box strong{font-size:19px}.hearts{font-size:17px}.objective{font-size:11px;margin:9px -15px 7px}.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,39px)}.collection{padding:8px;grid-template-columns:32px auto;font-size:11px}.fish-icon{width:32px;height:32px}.collection p{font-size:21px}.controls{gap:8px}.control-hint{font-size:9px;margin-top:8px}footer{margin-top:10px;font-size:10px}.dialog{padding:8px 12px 11px}.dialog-cat{width:42px;height:40px}.dialog h2{font-size:18px;margin:3px 0 5px}.dialog p{font-size:11px;margin-bottom:8px}.dialog small{margin-top:9px;font-size:9px}.primary{padding:7px 12px;font-size:13px;min-width:145px}}
@media(max-width:350px){.game-shell{padding-inline:12px}.controls{gap:5px}.collection{padding:8px 5px}.heading h1{font-size:30px}.objective::before,.objective::after{padding:0 3px}}
@media(prefers-reduced-motion:reduce){.shake{animation:none}*{scroll-behavior:auto!important}}
/* Tight atlas crops make the collectible visible even on small phones. */
.title-fish,.fish-icon{background-size:560% 465%;background-position:9.5% 84.2%}
.dialog-cat{background-size:415% 301%;background-position:94% 22%}
@media(max-height:740px) and (orientation:portrait){.game-shell{justify-content:flex-start}.play-area{width:min(100%,calc(100svh - 380px))}.controls{width:min(calc(100vw - 30px),300px);position:relative;left:50%;transform:translateX(-50%)}.objective{white-space:nowrap;position:relative;left:50%;width:max-content;transform:translateX(-50%);margin-left:0;margin-right:0}.hud{width:calc(100vw - 36px);max-width:390px;position:relative;left:50%;transform:translateX(-50%)}.heading{margin-bottom:10px}.dialog{padding:7px}.dialog-cat{display:none}.dialog h2{font-size:15px}.dialog p{font-size:10px;line-height:1.4}.dialog small{font-size:8px;margin-top:7px}.primary{font-size:12px;min-height:40px;min-width:120px}.text-button{margin-top:3px;padding:3px}footer{margin-top:auto;padding-top:8px}.control-hint{white-space:nowrap;position:relative;left:50%;width:max-content;transform:translateX(-50%);margin-left:0}}
@media(orientation:landscape) and (max-height:600px){.game-shell{width:100%;max-width:850px;padding:10px 20px;display:grid;grid-template-columns:minmax(200px,1fr) minmax(360px,1.6fr);grid-template-rows:45px 1fr 25px;gap:5px 25px;min-height:100svh}.topbar{grid-column:1;grid-row:1}.heading{grid-column:1;grid-row:2;align-self:center;margin:0}.heading h1{font-size:35px}.heading p{font-size:12px}.play-area{grid-column:2;grid-row:1/4;width:100%;height:100%;display:grid;grid-template-columns:minmax(180px,1fr) 135px;grid-template-rows:32px 1fr 24px;gap:8px 14px;align-items:center}.hud{grid-column:1/3;width:100%;margin:0}.board-wrap{grid-column:1;grid-row:2;width:min(100%,calc(100svh - 110px));justify-self:center}.controls{grid-column:2;grid-row:2;flex-direction:column;gap:17px}.objective{grid-column:1;grid-row:3;margin:0;font-size:10px;white-space:nowrap}.objective::before,.objective::after{display:none}.control-hint{grid-column:2;grid-row:3;font-size:8px;line-height:1.5;margin:0}footer{grid-column:1;grid-row:3;margin:0}.collection{padding:6px 10px}.dialog-cat{display:none}.dialog{padding:10px}.dialog h2{font-size:17px}.dialog p{font-size:11px}.dialog small{font-size:9px}.topbar .brand{font-size:26px}}
@media(max-height:740px) and (orientation:portrait){footer p{padding-top:7px}}
@media(max-height:740px) and (orientation:portrait){footer{line-height:1}footer span{line-height:1}}