@import"https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap";:root{font-family:Noto Sans JP,system-ui,sans-serif;color:#ebfcf4;background:#062c39;font-synthesis:none}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button{font:inherit;cursor:pointer;touch-action:manipulation}#app{position:relative;isolation:isolate}canvas#sea{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.grain,.vignette{pointer-events:none;position:absolute;inset:0}.grain{opacity:.045;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#123e49 4px,transparent 6px);mix-blend-mode:soft-light}.vignette{background:radial-gradient(ellipse 78% 72% at 50% 47%,transparent 38%,#001d2c66 100%)}.hud{position:absolute;top:env(safe-area-inset-top);left:0;right:0;display:flex;justify-content:space-between;padding:clamp(18px,5vw,30px);pointer-events:none;text-shadow:0 2px 7px #062d38b0}.hud-stat{white-space:nowrap}.hud-caption{display:block;color:#b5ddd8;font-size:10px;letter-spacing:.28em;font-weight:700}.hud-stat b{font-family:Barlow Condensed,Impact,sans-serif;font-weight:700;font-size:clamp(34px,8vw,54px);line-height:1.18;letter-spacing:.04em;font-variant-numeric:tabular-nums}.hud-stat small{font-weight:700;font-size:13px;margin-left:5px;color:#b5e6d9}.hud-right{display:flex;align-items:flex-start;gap:22px}.sound{pointer-events:auto;color:#d9efe9;background:#0a4851a3;border:1px solid #7db5ae54;width:37px;height:37px;border-radius:50%;font-size:18px}.event{position:absolute;pointer-events:none;top:19%;left:5%;right:5%;text-align:center;opacity:0;transform:translateY(12px) scale(.92);transition:opacity .18s,transform .18s;font-family:Barlow Condensed,Noto Sans JP,sans-serif;font-size:clamp(16px,4.5vw,25px);font-weight:800;letter-spacing:.09em;color:#f1f9e7;text-shadow:0 2px 18px #002d36}.event.visible{opacity:1;transform:translateY(0) scale(1)}.event.impact{font-size:clamp(26px,7vw,42px)}.leftcue,.rightcue{position:absolute;top:34%;height:32%;width:6px;opacity:0;pointer-events:none;transition:opacity .2s;background:linear-gradient(transparent,#c2ffdd,transparent);box-shadow:0 0 28px #a8ffce}.leftcue{left:0}.rightcue{right:0}.leftcue.active,.rightcue.active{opacity:.8;animation:surge .65s ease-in-out infinite alternate}.rearcue{pointer-events:none;position:absolute;bottom:4%;left:23%;width:54%;height:9px;opacity:0;transition:opacity .2s;background:radial-gradient(ellipse at center,#b7f4e4 2%,#94ddce5e 35%,transparent 75%);filter:blur(2px)}.rearcue.active{opacity:.9;animation:surge .65s ease-in-out infinite alternate}@keyframes surge{0%{opacity:.2}to{opacity:.82}}.hint{position:absolute;left:10%;right:10%;bottom:calc(12% + env(safe-area-inset-bottom));text-align:center;font-weight:700;font-size:13px;letter-spacing:.08em;color:#e3f8f1;text-shadow:0 2px 7px #002731;pointer-events:none;opacity:0;transition:opacity .45s}.hint.shown{opacity:.9}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:opacity .32s;background:linear-gradient(180deg,#012d42a8,#002b3c77 42%,#001e2bef)}.screen.hidden,.hidden{display:none!important}.screen.start{align-items:flex-end;justify-content:flex-start}.identity{position:absolute;top:calc(28px + env(safe-area-inset-top));left:8%;right:8%;color:#c0e6d6a6;font:600 11px Barlow Condensed,sans-serif;letter-spacing:.32em}.identity-line{display:inline-block;background:#b2e9d2;width:25px;height:1px;vertical-align:middle;margin:0 5px}.start-copy{width:100%;padding:0 8% calc(9% + env(safe-area-inset-bottom))}.start-copy .sub{letter-spacing:.32em;font-size:13px;font-weight:700;color:#c1eadd}h1{margin:.03em 0 .08em;font:900 clamp(68px,18.5vw,158px)/.88 "Barlow Condensed",Impact,sans-serif;letter-spacing:-.02em;color:#f8f9e9}h1 span{color:#83c6bc}.start-copy p{font-size:clamp(12px,3.2vw,15px);line-height:2.05;margin:18px 0 28px;color:#d4e7dc;font-weight:500}.primary{width:100%;height:62px;background:#e2f6d9;color:#063943;border:0;text-align:left;font-weight:900;font-size:15px;letter-spacing:.13em;padding:0 26px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 15px 32px #00151d4b}.primary span{font-size:26px;font-weight:400}.primary:active{transform:scale(.99);background:#b6e5cb}.footnote{color:#9bbfb9;font-size:10px;letter-spacing:.08em;text-align:center;margin-top:22px}.screen.result{background:linear-gradient(180deg,#032d3be8,#001f2afb);padding:24px}.result-content{width:min(100%,440px);padding:20px}.result-label{font-weight:700;letter-spacing:.22em;color:#b8e3d3;font-size:13px;margin-bottom:44px}.result-caption{font:600 14px Barlow Condensed,sans-serif;letter-spacing:.4em;color:#86c8c0}.result-fish{margin-bottom:42px;line-height:1}.result-fish b{font:900 clamp(108px,26vw,190px) "Barlow Condensed",sans-serif;color:#f0ffe7;letter-spacing:-.03em}.result-fish small{font-size:18px;margin-left:10px;font-weight:700}.result-stat{display:flex;justify-content:space-between;border-top:1px solid #a9d6ce44;padding:15px 2px;font-size:13px;color:#c5ded6}.result-stat strong{font-family:Barlow Condensed,Noto Sans JP,sans-serif;font-size:22px;line-height:1}.result-stat+.primary{margin-top:32px}@media(max-height:640px){.start-copy{padding-bottom:calc(4% + env(safe-area-inset-bottom))}h1{font-size:16vh}.start-copy p{margin:10px 0 16px}.primary{height:52px}.result-label{margin-bottom:16px}.result-fish{margin-bottom:12px}}@media(min-aspect-ratio:1/1){.start-copy{width:min(580px,58%);padding-bottom:4%}h1{font-size:clamp(72px,11vw,146px)}.hud{padding:24px 40px}.result-content{max-width:470px}}.exit-cue{position:absolute;pointer-events:none;z-index:3;font-size:11px;font-weight:900;color:#d4ffe7;white-space:nowrap;letter-spacing:.14em;transform:translate(-50%,-50%);text-shadow:0 0 8px #003e43;opacity:0;transition:opacity .2s;transform-origin:center}.exit-cue:before{content:"➤";display:inline-block;font-size:21px;vertical-align:middle;margin-right:6px;transform:rotate(var(--bearing,0rad))}.exit-cue.visible{opacity:.95}.rescue-cues{position:absolute;inset:0;pointer-events:none;z-index:3}.rescue-cue{position:absolute;display:flex;align-items:center;gap:4px;color:#f5d28f;font-weight:800;font-size:12px;letter-spacing:.05em;text-shadow:0 2px 8px #003e45;white-space:nowrap;opacity:0;transition:opacity .18s;transform:translate(-50%,-50%)}.rescue-cue.visible{opacity:.97}.rescue-arrow{display:inline-block;font-size:20px;line-height:1;transform:rotate(var(--bearing,0rad))}@media(orientation:landscape)and (max-height:480px){.screen.result{padding:10px max(22px,env(safe-area-inset-left)) 10px max(22px,env(safe-area-inset-right))}.result-content{width:min(100%,820px);max-width:820px;padding:4px 18px;display:grid;grid-template-columns:minmax(160px,.9fr) minmax(225px,1fr);grid-template-rows:25px repeat(4,34px) 46px;column-gap:26px;align-items:center}.result-label{grid-column:1;grid-row:1;margin:0;align-self:start;font-size:11px}.result-caption{grid-column:1;grid-row:2;align-self:start;font-size:10px}.result-fish{grid-column:1;grid-row:2/7;align-self:center;margin:0;padding-top:17px}.result-fish b{font-size:clamp(74px,27vh,135px)}.result-fish small{font-size:14px}.result-stat{grid-column:2;padding:5px 2px;font-size:11px;min-width:0}.result-stat strong{font-size:20px}.result-stat:nth-of-type(4){grid-row:1}.result-stat:nth-of-type(5){grid-row:2}.result-stat:nth-of-type(6){grid-row:3}.result-stat:nth-of-type(7){grid-row:4}.result-stat+.primary{grid-column:2;grid-row:5/7;margin:0;align-self:center;width:100%;height:44px}}.steer-feedback{position:absolute;z-index:4;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .12s;color:#e4fff2;filter:drop-shadow(0 1px 5px #004a56)}.steer-feedback.visible{opacity:1}.steer-origin{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border:2px solid #c6fced80;border-radius:50%;box-shadow:0 0 0 6px #8debd515}.steer-line{position:absolute;left:0;top:0;height:3px;background:linear-gradient(90deg,#a1e2cb11,#b6ffe9);transform-origin:0 50%;border-radius:3px}.steer-tip{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:23px;text-shadow:0 0 8px #21bb9e}.bite-impact{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);display:flex;align-items:center;flex-direction:column;gap:2px;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 8px #311019);text-shadow:0 2px 3px #2d090b;font-weight:900;white-space:nowrap}.bite-impact strong{font-size:clamp(22px,5.8vw,34px);color:#fff6cf;letter-spacing:.06em}.bite-impact span{font-family:Barlow Condensed,Noto Sans JP,sans-serif;font-size:clamp(28px,8.4vw,48px);color:#ff8868;line-height:1}.bite-impact.visible{animation:bite-pop .8s cubic-bezier(.18,.65,.15,1) both}@keyframes bite-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}17%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}48%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:.9}to{opacity:0;transform:translate(-50%,-82%) scale(.9)}}#fish-count.bitten{animation:fish-loss .42s ease-out}@keyframes fish-loss{0%,to{color:#efffe4;transform:scale(1)}30%{color:#ff8868;transform:scale(1.35)}65%{color:#ffce9d;transform:scale(1.05)}}.hit-shock{position:absolute;z-index:7;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--hitx,50%) var(--hity,50%),transparent 5%,#ffb07b07 24%,#ff997128 67%,#f86c5445 100%);mix-blend-mode:screen}.hit-shock.active{animation:hit-flash .42s ease-out both}@keyframes hit-flash{0%{opacity:0}18%{opacity:1}to{opacity:0}}.start-copy p strong{font-weight:900;color:#f0ffe8}.start-copy p em{font-style:normal;font-weight:900;color:#f5d495}.hud-stat b.goal-met{font-size:clamp(30px,6.5vw,43px);color:#eaf6ab}.start-mission{display:grid;gap:6px;margin:19px 0 26px;line-height:1.45}.start-mission strong{font-size:clamp(15px,4.1vw,18px);font-weight:900;color:#f0ffe9}.start-mission span{font-size:clamp(11px,3.15vw,13px);color:#d0e6e0;line-height:1.5}.start-mission b{font-size:clamp(17px,4.5vw,21px);color:#f5d495;font-weight:900}@media(max-height:640px){.start-mission{margin:9px 0 14px;gap:2px}.start-mission strong{font-size:14px}.start-mission span{font-size:11px}.start-mission b{font-size:15px}}.rescue-cue.onscreen{color:#ffe2a3;font-size:clamp(12px,3.5vw,14px);filter:drop-shadow(0 2px 5px #003b46)}.rescue-cue.onscreen .rescue-arrow{display:none}