:root{--ink:#12323b;--ink-soft:#3d5d66;--panel:#fbf8f0f7;--accent:#e2873a;--accent-d:#c9702a;--good:#4caf6a;--bad:#e0584f;--glass:#0926318c;--glass-line:#ffffff29;--vignette:#08284638;--r-Common:#6f8fa3;--r-Uncommon:#3fa56a;--r-Rare:#d9902b;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK JP", "Noto Sans CJK SC", sans-serif;font-family:var(--font);color:var(--ink)}html[lang=ja]{--font:system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif}html[lang=zh-Hans]{--font:system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif}*{box-sizing:border-box}html,body{background:#e9f3f2;margin:0}body{-webkit-tap-highlight-color:transparent;font-family:var(--font)}button,kbd{font-family:inherit}kbd{background:#0000001f;border-radius:4px;margin-left:4px;padding:1px 5px;font-size:.72em;font-weight:600}#stage{width:100%;height:100vh;-webkit-user-select:none;user-select:none;touch-action:none;background:#8cc9d3;height:100svh;min-height:420px;max-height:900px;position:relative;overflow:hidden}#game-canvas{width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}#grade{pointer-events:none;background:radial-gradient(ellipse at 50% 46%, transparent 52%, var(--vignette) 100%), linear-gradient(to bottom, #ffffff0d, transparent 20%, #041c2833 100%);transition:background .6s;position:absolute;top:0;bottom:0;left:0;right:0}#hud{pointer-events:none;padding:10px 12px calc(10px + env(safe-area-inset-bottom));flex-direction:column;justify-content:space-between;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}#hud button{pointer-events:auto}.hidden{display:none!important}#topbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}h1{color:#fff;text-shadow:0 1px 3px #002832b3;letter-spacing:.4px;margin:0 auto 0 0;font-size:21px}#topbtns{gap:6px;display:flex}button{font:inherit;cursor:pointer;background:var(--panel);color:var(--ink);border:0;border-radius:10px;padding:7px 12px;font-size:13px;transition:transform 80ms,background .15s,box-shadow .15s;box-shadow:inset 0 1px #fff9,0 2px 6px #00000040}button:hover{background:#fff}button:active{transform:translateY(1px)}button:focus-visible{outline-offset:2px;outline:3px solid #ffd36e}button.primary{background:linear-gradient(#ee9a4c, var(--accent-d));color:#fff;text-shadow:0 1px 1px #0003;font-weight:700}button.primary:hover{background:linear-gradient(#f4a65c, var(--accent))}button:disabled{opacity:.45;cursor:not-allowed}.icon-btn{background:var(--glass);color:#fff;-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 1px var(--glass-line) inset, 0 2px 8px #0003;align-items:center;gap:6px;display:inline-flex}.icon-btn:hover{background:#092631bf}.icon-btn kbd{background:#ffffff2e}.seg{background:var(--glass);box-shadow:0 0 0 1px var(--glass-line) inset;-webkit-backdrop-filter:blur(6px);pointer-events:auto;border-radius:10px;gap:2px;padding:3px;display:inline-flex}.seg button{color:#fff;box-shadow:none;white-space:nowrap;background:0 0;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600}.seg button:hover{background:#ffffff2e}.seg button[aria-pressed=true]{color:var(--ink);background:#fff}#guide .seg{box-shadow:none;background:#12323b1a}#guide .seg button{color:var(--ink)}#guide .seg button:hover{background:#12323b1f}#guide .seg button[aria-pressed=true]{background:var(--ink);color:#fff}#title-card{text-align:center;color:#fff;width:min(460px,90vw);box-shadow:0 0 0 1px var(--glass-line) inset, 0 12px 40px #00141e59;-webkit-backdrop-filter:blur(6px);background:linear-gradient(#0926318c,#09263166);border-radius:18px;padding:16px 22px 18px;transition:opacity .5s,transform .5s,visibility .5s;position:absolute;top:17%;left:50%;transform:translate(-50%)}#title-card.gone{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%)translateY(-10px)}#title-card .logo{letter-spacing:.5px;text-shadow:0 2px 8px #001e2899;font-size:38px;font-weight:800;line-height:1.1}#title-card .tagline{opacity:.92;margin:4px 0 10px;font-size:14.5px}#title-card .hint{opacity:.85;margin:3px 0;font-size:12.5px;line-height:1.45}#title-card .touch{display:none}#title-card .start{color:#ffe27a;margin:12px 0 0;font-size:16px;font-weight:700;animation:1.8s ease-in-out infinite breathe}@keyframes breathe{0%,to{opacity:.75}50%{opacity:1}}@media (pointer:coarse){#title-card .touch{display:block}#title-card .mouse{display:none}}#center-prompt{text-align:center;color:#fff;text-shadow:0 2px 8px #001e28bf,0 0 2px #001e28cc;pointer-events:none;max-width:90%;font-size:22px;font-weight:700;transition:opacity .2s;position:absolute;top:18%;left:50%;transform:translate(-50%)}body.title-on #center-prompt{opacity:0}#center-prompt.bite{color:#ffe27a;font-size:30px;animation:.35s infinite alternate pulse}#center-prompt.warn{color:#ffb4a8}@keyframes pulse{0%{transform:translate(-50%)scale(1)}to{transform:translate(-50%)scale(1.1)}}#meters{pointer-events:none;flex-direction:column;gap:8px;width:min(380px,86vw);display:flex;position:absolute;bottom:120px;left:50%;transform:translate(-50%)}.meter{color:#fff;-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 1px var(--glass-line) inset, 0 6px 18px #00000040;background:linear-gradient(#092631a8,#09263180);border-radius:14px;padding:9px 12px 10px;font-size:12px}.meter-label{letter-spacing:.2px;justify-content:space-between;gap:8px;margin-bottom:5px;font-weight:700;display:flex}.meter-label.small{opacity:.92;margin-top:9px;font-weight:500}#tension-hint{color:#ffe27a;text-align:right;font-weight:700}#tension-hint.warn{color:#ffb4a8}.bar{background:#fff3;border-radius:7px;height:14px;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px #00000059}.bar.dist{height:8px}#power-fill,#dist-fill{background:linear-gradient(90deg,#8bd3ff,#ffd36e,#ff7a5c);border-radius:7px;width:0;height:100%}#dist-fill{background:linear-gradient(90deg,#6dc4f0,#a9e6ff)}.tension .zone.safe{background:repeating-linear-gradient(135deg,#4caf6a73 0 6px,#4caf6a4d 6px 12px);width:45%;position:absolute;top:0;bottom:0;left:35%}#tension-fill{background:var(--good);opacity:.92;border-radius:7px;width:0;transition:background .1s;position:absolute;top:0;bottom:0;left:0}#tension-mark{background:#fff;border-radius:2px;width:3px;margin-left:-1px;position:absolute;top:-2px;bottom:-2px;left:0;box-shadow:0 0 4px #00000080}#bottom{flex-direction:column;align-items:center;gap:6px;display:flex}#creel{pointer-events:auto;width:min(560px,96vw);box-shadow:0 0 0 1px var(--glass-line) inset, 0 6px 18px #00000040;-webkit-backdrop-filter:blur(6px);background:linear-gradient(#0926319e,#09263180);border-radius:14px;grid-template-columns:repeat(8,1fr);gap:4px;padding:5px;display:grid}.slot{aspect-ratio:1.5;cursor:default;background:#ffffff1a;border-radius:9px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.slot img{width:96%;height:auto}.slot.full{cursor:pointer;box-shadow:0 -2px 0 var(--rc,#fff) inset;background:radial-gradient(circle at 50% 40%,#ffffff57,#ffffff24)}.slot.full:hover{background:radial-gradient(circle at 50% 40%,#ffffff80,#fff3)}.slot .len{color:#fff;text-shadow:0 1px 2px #000;font-size:9px;font-weight:700;position:absolute;bottom:2px;right:3px}#help{color:#fff;text-shadow:0 1px 3px #001e28e6;text-align:center;max-width:96vw;font-size:12px;line-height:1.4}#help .help-touch{display:none}@media (pointer:coarse){#help .help-touch{display:inline}#help .help-mouse{display:none}}.r-Common{--rc:var(--r-Common)}.r-Uncommon{--rc:var(--r-Uncommon)}.r-Rare{--rc:var(--r-Rare)}.rarity-pill{color:#fff;background:var(--rc,#777);letter-spacing:.2px;vertical-align:middle;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;display:inline-block}.overlay{z-index:5;background:radial-gradient(#08242c73,#08242cb8);justify-content:center;align-items:center;padding:12px;animation:.2s ease-out fade;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}@keyframes fade{0%{opacity:0}to{opacity:1}}.panel{background:var(--panel);border-radius:20px;max-width:min(720px,100%);max-height:100%;padding:18px 20px;overflow:auto;box-shadow:0 16px 50px #00000073,inset 0 0 0 1px #ffffff80}.panel.small{text-align:center}.panel h2{margin:0 0 8px}.card{text-align:center;border-top:5px solid var(--rc,#6f8fa3);width:min(350px,92vw);padding-top:14px;animation:.3s cubic-bezier(.2,1.3,.4,1) pop;position:relative}@keyframes pop{0%{opacity:0;transform:scale(.8)translateY(14px)}to{opacity:1;transform:none}}.card .rarity-pill{z-index:2;padding:2px 10px;font-size:12px;position:absolute;top:12px;right:14px}.fish-stage{background:radial-gradient(at 50% 55%,#fffffff2,#bee2e88c 62%,#bee2e800 100%);border-radius:14px;height:170px;margin:0 -8px 2px}.fish-stage canvas{width:100%;height:100%;display:block}.card h2{margin:2px 0 0;font-size:25px}.card .alt{opacity:.6;margin-top:1px;font-size:13px}.card .stats{color:var(--ink-soft);justify-content:center;gap:26px;margin:10px 0 8px;font-size:14px;display:flex}.card .stats b{color:var(--ink);font-size:25px;line-height:1.15;display:block}.tags{flex-wrap:wrap;justify-content:center;gap:6px;min-height:28px;margin-bottom:12px;display:flex}.tag{color:#fff;background:#3b8ea5;border-radius:999px;padding:3px 11px;font-size:13px;font-weight:700}.tag.rare{background:linear-gradient(#e8a23a,#d6892b)}.tag.new{background:linear-gradient(#58bf78,#3f9f5f)}.card .btns{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.card .btns button{padding:9px 18px;font-size:14px}.card .btns button:not(.primary){background:#e6ecee}.card .note{opacity:.75;margin-top:8px;font-size:12px;line-height:1.4}#guide .panel{width:min(760px,100%)}.guide-head{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;display:flex}.guide-head h2{margin:0 auto 0 0;font-size:22px}.guide-head h2 small{opacity:.6;margin-left:4px;font-size:13px;font-weight:600}.guide-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;display:grid}.entry{box-shadow:0 0 0 1px #00000012 inset, 0 -3px 0 var(--rc) inset;background:#fff;border-radius:14px;padding:8px 10px 10px;font-size:13px;line-height:1.4}.entry .art{background:radial-gradient(at 50% 55%,#f2fafb,#cfe7ec);border-radius:10px;margin-bottom:4px}.entry img{object-fit:contain;width:100%;height:84px;display:block}.entry.unknown img{filter:brightness(0);opacity:.16}.entry h4{margin:2px 0;font-size:15px}.entry .meta{opacity:.75;font-size:12px}.entry .best b{font-size:14px}.guide-foot{opacity:.7;margin-top:10px;font-size:12px}#about{max-width:820px;margin:0 auto;padding:24px 16px 48px;font-size:15px;line-height:1.65}#about h2{margin-top:0}#about table{border-collapse:collapse;width:100%;font-size:14px}#about th,#about td{text-align:left;border-bottom:1px solid #0000001f;padding:6px 8px}#about .legal{background:#ffffffb3;border-radius:8px;margin-top:18px;padding:10px 12px}#about kbd{background:#0000001a}.noscript{text-align:center;color:#fff;width:100%;position:absolute;top:40%}@media (max-width:640px){h1{font-size:18px}#topbar{gap:6px}#topbtns{justify-content:flex-end;width:100%}.icon-btn{padding:6px 9px;font-size:12px}.icon-btn kbd{display:none}.seg button{padding:5px 8px;font-size:12px}#title-card{padding:12px 14px 14px;top:22%}#title-card .logo{font-size:30px}#title-card .tagline{margin-bottom:8px;font-size:13.5px}#title-card .hint{font-size:12px}#title-card .start{margin-top:9px;font-size:14.5px}#center-prompt{font-size:18px;top:22%}#center-prompt.bite{font-size:24px}#help{font-size:11px}#meters{bottom:124px}.guide-grid{grid-template-columns:repeat(2,1fr);gap:8px}.entry{padding:6px 8px 8px;font-size:12px}.entry img{height:56px}.entry h4{font-size:13.5px}.guide-head h2{font-size:19px}.panel{padding:14px}.fish-stage{height:150px}#stage{height:84vh;height:84svh}}@media (max-width:400px){#topbtns .lbl{display:none}#topbtns .icon-btn{padding:7px 10px}}@media (prefers-reduced-motion:reduce){#title-card .start,#center-prompt.bite,.overlay,.card{animation:none}}