:root{font-family:-apple-system,BlinkMacSystemFont,'Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;color:#143e4a;background:#e8f4ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:540px;margin:auto;background:#f8fbf4;min-height:100svh;padding:env(safe-area-inset-top) 20px calc(18px + env(safe-area-inset-bottom))}header{height:76px;display:flex;align-items:center;justify-content:space-between;gap:6px}header a{font-weight:850;font-size:16px;color:#126778;text-decoration:none}button{font:inherit;font-weight:750;border:0;border-radius:18px;padding:16px 18px;min-height:54px;cursor:pointer;touch-action:manipulation;background:#e7efdf;color:#234c4e}button:focus-visible,a:focus-visible{outline:3px solid #ed9d23;outline-offset:3px}button:disabled{opacity:.55;cursor:default}.small{font-size:12px;min-width:58px;padding:10px;border-radius:50px}.eyebrow{font-size:11px;font-weight:850;letter-spacing:2px;color:#58877c;margin:12px 0}h1{font-size:35px;line-height:1.35;letter-spacing:-1px;margin:10px 0 14px}h2{font-size:24px;margin:10px 0 16px;line-height:1.5}p{font-size:15px;line-height:1.85;margin:8px 0}.muted{color:#577378;font-size:13px}.primary{background:#ffcf54;color:#264744;box-shadow:0 4px 0 #e7ad38;width:100%}.secondary{background:#0c7c89;color:white;width:100%}.stack{display:grid;gap:12px;margin:18px 0}.row{display:flex;gap:10px}.row>*{flex:1}.pill{display:inline-block;border-radius:30px;background:#e0efe8;padding:7px 12px;font-size:12px;font-weight:700}.card{background:white;border:1px solid #dfe9dd;border-radius:22px;padding:20px;margin:14px 0}.nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.nav button{background:white;border:1px solid #dfe9dd;text-align:left;font-size:15px}.nav span{display:block;font-size:11px;color:#6c817b;margin-top:7px}.steps{display:flex;justify-content:space-between;font-size:12px;margin:20px 0 10px}.steps span{padding:6px 9px;border-radius:30px}.steps .active{background:#0c7c89;color:white}.feedback{background:#e3f2e9;border-radius:16px;padding:16px;line-height:1.8;font-size:15px;margin:12px 0}.progress{height:14px;border-radius:12px;background:#dfebe1;overflow:hidden;margin:12px 0}.progress i{display:block;height:100%;background:#12a899;transition:width .2s}.hint{min-height:55px}footer{font-size:11px;color:#5e7c76;text-align:center;line-height:1.9;margin-top:28px}rt{font-size:.55em}ruby{ruby-align:center}.fish-card{display:flex;align-items:center;gap:16px}.fish-card svg{width:90px;flex-shrink:0}.big-fish{width:180px;margin:10px auto;display:block}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{text-align:center;padding:18px 5px;background:#e5f0e7;border-radius:18px;font-size:11px}.stat b{display:block;font-size:27px;color:#0e7c80;margin-bottom:6px}.check{display:flex;align-items:center;gap:12px;padding:12px 0;min-height:58px}.check input{width:25px;height:25px;accent-color:#0c7c89}.check label{font-size:15px;line-height:1.6}.choice{width:100%;text-align:left;background:white;border:2px solid #dce9df}.selected{border-color:#168b81;background:#e0f6e9}.danger{background:#fff0df}.back{margin-bottom:6px;background:transparent;padding:8px 0;font-size:14px}.finish{font-size:44px;text-align:center}.tiny{font-size:12px;line-height:1.8}details summary{min-height:48px;cursor:pointer;padding:14px 0;font-size:13px}details p{font-size:12px}@keyframes bob{50%{transform:translateY(8px)}}@keyframes swim{50%{transform:translateX(-28px) translateY(6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:360px){main{padding-left:14px;padding-right:14px}h1{font-size:31px}header a{font-size:14px}}
/* First-person SVG scene: no camera movement or continuous JS render loop. */
.scene.pov{position:relative;isolation:isolate;overflow:hidden;height:355px;margin:20px 0;border-radius:24px;background:#387e8e;box-shadow:inset 0 0 0 1px #ffffff60,0 12px 24px #124c5b15;contain:layout paint}
.world{display:block;width:100%;height:100%}.game.scene.pov{height:clamp(230px,36svh,340px);margin:10px 0 14px}
.scene-message{position:absolute;top:12px;left:12px;right:12px;padding:11px 12px;background:#f7fbf0ed;border:1px solid #ffffffb0;border-radius:13px;font-size:14px;font-weight:800;text-align:center;color:#214750;line-height:1.65;box-shadow:0 3px 12px #10415312}
.sea-label{position:absolute;left:14px;bottom:13px;border-radius:20px;padding:6px 10px;color:#f0f5e7;background:#183e49b8;font-size:10px;letter-spacing:1px}
.far-waves{animation:water-drift 9s ease-in-out infinite}.near-waves{animation:water-drift 6s ease-in-out infinite reverse}.water-sparkles{animation:light-dance 4s ease-in-out infinite}.underwater-fish{animation:fish-glide 14s ease-in-out infinite}
.pov-float{animation:float-rock 2.8s ease-in-out infinite;transform-origin:225px 209px}.float-ripples{transform-origin:225px 211px;animation:rings 3s ease-out infinite}.float-shadow{opacity:.6}.cast-trail,.splash{opacity:0}.gear{transform-origin:340px 405px}.before-cast #float-position,.before-cast .float-ripples,.before-cast #fishing-line{opacity:0}
.casting .gear{animation:cast-rod 1.2s ease-in-out both}.casting #float-position{animation:cast-float 1.2s ease-out both}.casting .cast-trail{animation:cast-line 1.2s ease-out both;stroke-dasharray:650;stroke-dashoffset:650}.casting .splash{animation:landing 1.2s ease-out both}.casting #fishing-line{animation:cast-connected-line 1.2s ease-out both}.casting .float-ripples{animation:cast-rings 1.2s ease-out both}
.bite .pov-float{animation:float-dive 1.5s ease-in-out infinite}.bite .float-ripples{animation:rings 1s ease-out infinite}.bite .splash,.pulling .splash{opacity:.6;animation:light-dance .8s ease-in-out infinite}.hooked .pov-float{transform:translateY(7px) rotate(-12deg);animation:none}.hooked .float-ripples{animation:rings 1.8s ease-out infinite}.pulling .float-ripples{animation:rings .8s ease-out infinite;stroke-width:1.6}.pulling .pov-float{transform:translateY(11px) rotate(-22deg)}
.reel-crank{transform-origin:286px 347px}.left-hand{transform-origin:198px 397px}.winding .reel-crank{animation:crank-turn .42s linear 1}.winding .left-hand{animation:hand-wind .42s ease-in-out 1}
@keyframes water-drift{50%{transform:translate(8px,3px)}}@keyframes light-dance{50%{opacity:.3}}@keyframes fish-glide{50%{transform:translate(24px,-9px);opacity:.12}}@keyframes float-rock{50%{transform:translateY(2px) rotate(4deg)}}@keyframes rings{0%{transform:scale(.65);opacity:.65}100%{transform:scale(1.5);opacity:0}}
@keyframes cast-rod{0%{transform:rotate(0)}25%{transform:rotate(18deg)}55%{transform:rotate(-9deg)}80%{transform:rotate(3deg)}100%{transform:rotate(0)}}@keyframes cast-float{0%,22%{transform:translate(98px,110px);opacity:0}28%{opacity:1}55%{transform:translate(-25px,-95px) scale(.7)}85%,100%{transform:translate(0,0);opacity:1}}@keyframes cast-line{0%,25%{opacity:0;stroke-dashoffset:650}35%{opacity:.7}80%{opacity:.5;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}@keyframes cast-connected-line{0%,75%{opacity:0}100%{opacity:.85}}@keyframes cast-rings{0%,78%{opacity:0}85%{opacity:.8}100%{opacity:.4}}@keyframes landing{0%,78%{opacity:0}85%{opacity:1}100%{opacity:0}}@keyframes float-dive{0%,100%{transform:translateY(3px);opacity:1}35%,70%{transform:translateY(18px) rotate(9deg);opacity:.15}}@keyframes crank-turn{to{transform:rotate(360deg)}}@keyframes hand-wind{25%{transform:translate(-4px,-5px) rotate(-2deg)}75%{transform:translate(3px,2px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.scene.pov *{animation:none!important}.bite .pov-float{transform:translateY(12px);opacity:.35}.casting #float-position{opacity:1}.casting .cast-trail{opacity:0}}
@media(max-width:360px){.scene.pov{height:315px}.game.scene.pov{height:clamp(230px,36svh,285px)}.scene-message{font-size:13px}.steps span{padding:6px}}

#app[data-view="game"] #controls{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:sticky;bottom:env(safe-area-inset-bottom);z-index:8;background:#f8fbf4f5;padding:8px 0 12px;margin:8px 0;gap:10px}#app[data-view="game"] #gameText p{font-size:14px;line-height:1.65}#app[data-view="game"] .eyebrow{font-size:10px;letter-spacing:1px}
.fish-plate{display:block;width:100%;height:auto}.fish-plate.locked{filter:grayscale(1);opacity:.4}.big-fish{width:100%;max-width:420px;background:radial-gradient(ellipse,#f3f2e7,transparent 70%)}.fish-card{display:block}.fish-card svg{width:100%;max-width:420px}.fish-card>div{display:flex;align-items:center;justify-content:space-between}.fight-stats{display:flex;justify-content:space-between;font-size:11px;gap:8px}.fight-stats b{display:block;font-size:19px;margin:3px 0}.tension-meter{position:relative;height:14px;border-radius:20px;background:linear-gradient(90deg,#bdcdd4 0 18%,#ffdd95 18% 78%,#edac96 78%);margin:10px 4px 2px}.safe-zone{position:absolute;left:18%;width:60%;height:100%;background:#9cd5b9;border-radius:3px}#tension-marker{position:absolute;top:-3px;width:5px;height:20px;background:#214650;border-radius:4px;transform:translateX(-50%)}.meter-labels{display:flex;justify-content:space-between;font-size:10px;color:#587775}#reel{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#reel[aria-pressed="true"]{background:#f3bb35;box-shadow:none}#app[data-view="game"] #controls{grid-auto-flow:row;grid-template-columns:1.4fr 1fr}#controls>#hook,#controls>#cast,#controls>#drag{grid-column:1/-1}#controls>#drag{min-height:46px;padding:8px;font-size:13px}#app[data-view="game"] #reelHint{min-height:2.7em;margin:6px 0;font-size:13px}.nibbling .pov-float{animation:nibble .8s ease-in-out infinite}.bite .pov-float{animation:decisive-bite 1s ease-in-out forwards}.winding .reel-crank{animation:crank-turn 1s linear infinite}.winding .left-hand{animation:hand-wind 1s ease-in-out infinite}@keyframes nibble{50%{transform:translateY(5px) rotate(4deg)}}@keyframes decisive-bite{to{transform:translateY(18px);opacity:.15}}@media(prefers-reduced-motion:reduce){.nibbling .pov-float{transform:translateY(3px)}.bite .pov-float{transform:translateY(15px);opacity:.2}}
.rpg-bar{display:flex;justify-content:space-between;align-items:center;background:#174f5b;color:#f7f5dd;padding:13px 16px;border-radius:16px;gap:10px;font-size:13px}.rpg-bar b{font-size:22px}.coins{color:#ffdf7e;white-space:nowrap}.xp-line{display:flex;justify-content:space-between;font-size:11px;color:#547873;padding:8px 3px}.harbor-map{width:100%;height:auto;display:block;margin:12px 0 18px;border-radius:24px;box-shadow:0 8px 20px #255e6c12}.current-place h2{margin:8px 0 0;font-size:22px}.town-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.town-nav button{text-align:left;background:#fff;border:1px solid #d9e5d9;font-size:16px;min-height:95px;padding:14px}.town-nav span{display:block;font-size:11px;line-height:1.7;color:#4d7676;margin-top:8px}.location-lesson{font-size:13px;padding:12px;border-left:3px solid #a2c8a5;background:#f0f5eb}.gear-icon{font-size:30px;color:#487e79;background:#e8f0df;border-radius:16px;width:58px;height:58px;display:grid;place-items:center}.gear-card h2,.quest-card h2,.location-card h2{font-size:21px}.gear-card button,.quest-card button,.location-card button{margin-top:8px;width:100%}.reward{color:#756019;font-weight:750;font-size:13px}.reward-strip{padding:14px;background:#fff0bd;border-radius:16px;margin-bottom:12px;color:#645020;font-weight:700;font-size:14px}.kelp-bed{display:none}.theme-kelp .kelp-bed{display:block}.theme-kelp #water stop:first-child{stop-color:#75a997}.theme-kelp #water stop:last-child{stop-color:#164c4c}.theme-channel .near-waves{animation-duration:4s}.theme-channel #water stop:first-child{stop-color:#5a9cb4}.visible-float #float-position{transform:scale(1.65);transform-origin:225px 211px}.visible-float.casting #float-position{animation:cast-float 1.2s ease-out both}.visible-float .float-ripples{stroke-width:1.5}button{overflow-wrap:anywhere}.town-nav button:disabled{opacity:.7}@media(max-width:360px){.rpg-bar{padding:12px;font-size:12px}.rpg-bar b{font-size:20px}.town-nav button{padding:12px;font-size:15px}.row>button{padding:12px;font-size:14px}}
/* Walkable harbor + searchable 100-species field guide. */
.adventure-cover{position:relative;border-radius:24px;overflow:hidden;margin:16px 0;background:#4b929f}.adventure-cover svg{display:block;width:100%;height:240px;object-fit:cover;opacity:.9}.cover-title{position:absolute;inset:auto 0 0;padding:25px 20px 18px;background:linear-gradient(transparent,#174b5ee6);color:#fff5d8;font-size:25px;font-weight:bold}.cover-title span{display:block;font-size:11px;margin-top:5px;letter-spacing:1px}.walking-frame{position:relative;overflow:hidden;border:5px solid #f7f0dc;border-radius:22px;box-shadow:0 6px 20px #24526022;background:#8bbfbb}.walking-frame svg{display:block;width:100%;height:auto;aspect-ratio:384/352}.walk-compass{position:absolute;right:12px;top:12px;background:#ffffe8d9;padding:5px 10px;border-radius:20px;font-size:12px}.walk-head{display:flex;align-items:center;justify-content:space-between}.walk-head h2{font-size:23px}.walk-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;bottom:max(8px,env(safe-area-inset-bottom));background:#f5f4e8f5;padding:10px;border-radius:20px;z-index:5;box-shadow:0 5px 15px #234e6215}.walk-controls>#interact{flex:1;min-height:84px;font-size:14px;padding:9px}.dpad{display:grid;grid-template-columns:52px 52px 52px;grid-template-rows:50px 50px;gap:4px}.dpad button{padding:0;min-height:50px;font-size:26px;background:#e0e9dd;color:#326371;touch-action:none;user-select:none;-webkit-user-select:none}.dpad button:active{background:#b4d4c8}.dpad #north{grid-column:2}.dpad #west{grid-row:2;grid-column:1}.dpad #south{grid-row:2;grid-column:2}.dpad #east{grid-row:2;grid-column:3}.map-overview svg{width:100%;height:auto}.field-label{display:block;font-size:13px;font-weight:bold;margin:14px 0 6px}select,input[type=search]{font-family:inherit;font-size:16px;min-height:48px;border:1px solid #bacfc4;border-radius:10px;background:#fffdf5;color:#254e59;padding:10px;max-width:100%;width:100%}.preset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.preset-row button{font-size:12px;padding:9px;min-height:58px}.gear-slot{background:#fffdf5;border:1px solid #d6e0d1;padding:14px;border-radius:18px;margin:16px 0}.gear-slot h3{font-size:16px;margin:2px 0 12px}.item-row{display:flex;gap:10px;padding:14px 0;border-top:1px solid #e3e8dc;align-items:center}.item-row>div{flex:1;min-width:0}.item-row b{font-size:14px}.item-row p{margin:6px 0 0}.item-row button{font-size:12px;min-width:78px;padding:9px}.search-row{display:flex;gap:8px}.search-row input{min-width:0}.search-row button{flex-shrink:0;font-size:13px;padding:8px 12px}.filter-row{display:flex;gap:10px;margin:12px 0}.filter-row label{width:50%;font-size:12px}.filter-row select{margin-top:5px}.catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.catalog-card{background:#fffdf5;border:1px solid #d5ded1;border-radius:18px;padding:8px 6px 14px;display:block;min-width:0;text-align:center}.catalog-card svg{width:100%;height:auto;display:block}.catalog-card b{font-size:14px;color:#294f5c;display:block;overflow-wrap:anywhere}.catalog-card span{font-size:11px;display:block;color:#6a8177;margin-top:5px}.plate-card{background:#fffdf4;border:1px solid #dedec9;border-radius:20px;margin:16px 0}.plate-card svg{width:100%;height:auto;display:block}.method-bottom #float-position,.method-bottom .float-ripples,.method-lure .float-ripples,.method-lure .pov-float{display:none}.method-lure #float-position{display:block!important;opacity:1!important;transform:none!important}.method-bottom.bite #rod-highlight{stroke:#c1d7d0}.lure-meter{font-size:28px;letter-spacing:8px;text-align:center;color:#c5943c}.theme-deep #water stop:first-child{stop-color:#386884}.theme-deep #water stop:last-child{stop-color:#142f54}.theme-warm #water stop:first-child{stop-color:#72c1b4}.theme-cold #water stop:first-child{stop-color:#81adbb}#luremove{touch-action:none;-webkit-user-select:none;user-select:none}@media(max-width:360px){.dpad{grid-template-columns:46px 46px 46px;gap:3px}.walk-controls{padding:7px;gap:8px}.walk-controls>#interact{font-size:12px}.catalog-card b{font-size:12px}}@media(prefers-reduced-motion:reduce){.underwater-fish{animation:none}}

.search-row input{flex:1;width:0}.search-row button{width:auto;flex:0 0 78px}.item-row button{width:auto;flex:0 0 80px}.walk-head button{width:auto}.walk-controls .dpad button{width:100%}