:root{--night:#031321;--deep:#010b14;--foam:#c8fff1;--glow:#49e4c7;--coral:#ff785f;--text:#eef8f4;--dim:#9bc8c7;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--sans:Inter,system-ui,"Hiragino Sans","Noto Sans JP",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--night);color:var(--text);font:500 16px/1.4 var(--sans);overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--foam);outline-offset:4px}[hidden]{display:none!important}
#sea{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}#app{position:relative;min-height:100dvh;width:min(100%,690px);margin:auto;isolation:isolate}#app:before{content:"";position:absolute;inset:0;border-left:1px solid #b7fff112;border-right:1px solid #b7fff112;pointer-events:none}.topbar{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:calc(env(safe-area-inset-top) + 18px) 20px 12px}.brand{font:800 11px var(--mono);letter-spacing:.18em;white-space:nowrap}.brand span{color:var(--coral);padding:0 5px}.depth{margin-left:auto;font:700 11px var(--mono);letter-spacing:.1em;color:var(--foam)}.mute{width:42px;height:42px;flex:none;border-radius:50%;background:#ffffff12;border:1px solid #bfffff50;color:var(--text);font-size:20px;backdrop-filter:blur(10px)}.panel{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 82px) 22px calc(env(safe-area-inset-bottom) + 24px);position:relative}.eyebrow{font:800 11px var(--mono);letter-spacing:.16em;color:var(--glow);margin:0 0 13px;text-transform:uppercase}.intro{display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(180deg,#03132166 0%,#03132111 44%,#01121fd9 100%)}.intro h1{font:900 clamp(86px,24vw,160px)/.82 var(--sans);letter-spacing:-.105em;margin:0;position:relative;z-index:2;text-shadow:0 14px 32px #0008}.intro-line{font-size:clamp(22px,6.6vw,34px);font-weight:800;line-height:1.12;letter-spacing:-.04em;max-width:16ch;margin:auto 0 8px;text-wrap:balance}.rule{color:var(--dim);font-size:14px;max-width:35ch;margin:0 0 18px}.privacy,.feedback{font:500 11px/1.5 var(--mono);color:var(--dim);margin:12px 0 0}.primary,.secondary,.pass{min-height:60px;border-radius:14px;padding:15px 20px;font-weight:850;letter-spacing:.01em;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.primary{border:1px solid #b9fff7;background:var(--foam);color:#06231e;box-shadow:0 8px 0 #1c807c,0 14px 36px #0005}.primary:hover{transform:translateY(-2px);box-shadow:0 10px 0 #1c807c,0 17px 38px #0006}.primary:active{transform:translateY(6px);box-shadow:0 2px 0 #1c807c}.intro .primary{width:100%;text-align:left}.friend-line{padding:10px 13px;border-left:3px solid var(--coral);background:#ff785f20;color:#ffbb9e;font-size:13px;margin:0 0 14px}
.hero{position:relative;align-self:center;width:min(100%,440px);height:clamp(250px,39dvh,390px);margin:0 0 -24px}.hero-ring{position:absolute;width:66%;aspect-ratio:1;left:17%;top:7%;border:1px solid #9affef4a;border-radius:50%;box-shadow:0 0 0 27px #73fff009,0 0 0 61px #73fff007}.hero-hook{position:absolute;z-index:2;left:52%;top:0;height:50%;width:2px;background:linear-gradient(#c5ffff22,#b6fff2aa)}.hero-hook i{position:absolute;bottom:-24px;left:-12px;width:34px;height:45px;border:4px solid #cffff6;border-left:0;border-top:0;border-radius:0 0 30px 0;transform:rotate(20deg);filter:drop-shadow(0 0 9px #49e4c7)}.hero-fish{position:absolute;z-index:3;left:18%;top:50%;width:44%;height:33%;border-radius:50% 60% 58% 46%;background:radial-gradient(circle at 67% 33%,#b6ffdf,#45ccbb 51%,#0b757c 100%);transform:rotate(-13deg);box-shadow:inset -20px -20px 30px #06445488,0 0 30px #4be4ce88;animation:swim 4s ease-in-out infinite}.hero-fish:before{content:"";position:absolute;left:-30%;top:16%;width:44%;height:68%;background:#42d4c1;clip-path:polygon(100% 50%,0 0,13% 50%,0 100%);filter:drop-shadow(0 0 10px #45dcca)}.hero-fish:after{content:"";position:absolute;right:20%;top:33%;width:10px;height:10px;border-radius:50%;background:#073544;box-shadow:0 0 0 4px #d7fff1}.hero-fish b{position:absolute;left:35%;top:-14%;width:34%;height:32%;background:#8ff8d6;clip-path:polygon(0 100%,80% 0,100% 100%)}.hero-fish i{position:absolute;left:43%;bottom:-25%;width:30%;height:30%;background:#159a9e;clip-path:polygon(0 0,100% 0,45% 100%)}@keyframes swim{50%{transform:translate(12px,-9px) rotate(-8deg)}}
.play{display:flex;flex-direction:column;background:linear-gradient(180deg,#00121f55,#00111abb 95%)}.play-heading{display:flex;align-items:flex-start;justify-content:space-between}.current{font:900 54px/.9 var(--sans);color:#cffff4aa;letter-spacing:-.07em}.lures{display:grid;gap:10px;margin:auto 0;position:relative}.lures:before{content:"";position:absolute;width:1px;top:-42px;bottom:100%;left:36px;background:#9fffee77}.lure{position:relative;display:grid;grid-template-columns:84px 1fr 26px;align-items:center;gap:12px;width:100%;min-height:104px;padding:10px 12px;border:1px solid #b4f6e950;border-radius:14px;color:#fff;text-align:left;background:linear-gradient(115deg,#154c5dbb,#0c2a3ade);box-shadow:0 10px 30px #0005,inset 0 1px #c7fff54a;backdrop-filter:blur(12px);transition:transform .22s ease,border-color .22s ease,background .22s ease}.lure:before{content:"";position:absolute;left:35px;top:-31px;height:31px;width:1px;background:#b3fff16b;pointer-events:none}.lure:first-child:before{display:none}.lure:hover,.lure:focus-visible{transform:translateX(4px);border-color:var(--foam);background:linear-gradient(115deg,#1b6874dd,#104352ed)}.lure:active{transform:translateX(7px) scale(.99)}.lure canvas{width:84px;height:84px;border-radius:10px;background:#082b37}.lure .type{display:block;font:900 10px var(--mono);letter-spacing:.15em;color:var(--glow);margin-bottom:6px}.lure .hook-copy{display:block;font-weight:760;font-size:clamp(14px,4vw,18px);line-height:1.2;text-wrap:balance}.lure .arrow{font-size:24px;color:var(--foam)}.reaction{height:20px;font:800 11px var(--mono);letter-spacing:.12em;color:var(--coral);margin:0 0 8px;text-align:center}.pass{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid #8ce7d87d;background:#032a32c9;color:var(--foam);box-shadow:0 10px 25px #0005}.pass:hover{background:#0a4246;transform:translateY(-2px)}.pass:active{transform:translateY(2px)}.pass span:last-child{font-size:28px;line-height:1}.play.exit .lures{animation:diveOut .45s ease both}@keyframes diveOut{to{opacity:0;transform:translateY(-45px) scale(.94)}}
.preference{display:flex;align-items:center;gap:8px;margin:12px 0 -5px;color:#ffbda5;font:800 10px var(--mono);letter-spacing:.11em}.preference:before{content:"◉";font-size:15px;animation:pulse 1.4s ease-in-out infinite}.lure.learned{border-color:#ffba9d;box-shadow:0 10px 30px #0005,inset 0 0 20px #ffba9d22,0 0 25px #ff8e6b22}.lure .learned-tag{display:inline-block;margin:0 0 5px;padding:3px 6px;border-radius:3px;background:#ff9e7b;color:#341a18;font:900 9px var(--mono);letter-spacing:.08em}@keyframes pulse{50%{opacity:.4;transform:scale(.85)}}
.result{background:linear-gradient(180deg,#031321dd,#031321f3 65%,#01111bec);padding-bottom:calc(env(safe-area-inset-bottom) + 40px)}.result h2{font:900 clamp(36px,10vw,64px)/.93 var(--sans);letter-spacing:-.06em;margin:0 0 14px;text-wrap:balance}.specimen{position:relative;width:min(100%,430px);aspect-ratio:1;margin:0 auto 8px;border:1px solid #a7fff581;border-radius:50%;box-shadow:0 0 0 16px #63fff20c,0 0 90px #49e4c73d,inset 0 0 55px #49e4c718;background:radial-gradient(circle at 50% 50%,#0b546184,#021924 68%)}.specimen canvas{width:100%;height:100%;display:block}.specimen-stamp{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);font:700 10px var(--mono);letter-spacing:.16em;color:#affff3;white-space:nowrap}.result-count{font:900 clamp(24px,7vw,38px)/1.05 var(--sans);letter-spacing:-.04em;margin:12px 0 8px;color:var(--foam)}.finding{font-size:15px;line-height:1.5;margin:0 0 8px;color:#e4fcf8}.escaped{font:700 12px var(--mono);color:var(--dim);margin:0 0 15px}.friend-result{border-left:3px solid var(--coral);padding:9px 12px;background:#ff785f1c;color:#ffbda8;font-size:13px}.actions{display:grid;grid-template-columns:1fr auto;gap:9px}.actions .primary{font-size:14px}.secondary{border:1px solid #a9e9dd;background:#052d37c9;color:var(--foam);font-size:13px;white-space:nowrap}.secondary:hover{transform:translateY(-2px);background:#0b4e55}.app-door{display:inline-flex;margin:22px 0 0;color:#ffcca4;text-decoration:none;font:800 12px var(--mono);letter-spacing:.1em;border-bottom:1px solid #ffcca4;padding-bottom:5px}
@media(max-height:760px){.panel{padding-top:calc(env(safe-area-inset-top) + 72px)}.hero{height:clamp(185px,30dvh,280px)}.lure{min-height:88px;grid-template-columns:68px 1fr 22px}.lure canvas{width:68px;height:68px}.result .specimen{width:min(66vw,320px)}}@media(max-width:360px){.panel{padding-left:16px;padding-right:16px}.lure{grid-template-columns:66px 1fr 18px;gap:9px;padding:8px}.lure canvas{width:66px;height:66px}.actions{grid-template-columns:1fr}.actions .secondary{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.share-link{display:block;width:100%;margin:8px 0 0;padding:10px;border:1px solid var(--foam);border-radius:8px;background:#061d29;color:var(--foam);font:12px var(--mono)}
.riku-line{margin:20px 0 0;padding:12px 14px;border-left:2px solid #ffcda4;background:#ffcda40d;color:#ffdcc0;font:700 15px/1.4 var(--sans)}

/* headings get focus for screen readers; no visible box */
[tabindex="-1"]:focus{outline:none}

/* painted lures + the fisherman above */
.lure-art{position:relative;display:block;width:84px;height:84px;border-radius:12px;overflow:hidden;flex:none}
.lure-art canvas,.lure-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lure-art img{opacity:0;transition:opacity .25s}.lure-art.painted img{opacity:1}
@media(max-height:760px){.lure-art{width:68px;height:68px}}
.intro{background:linear-gradient(180deg,#04161d33 0%,#04161dcc 58%,#04161d 78%),url("./assets/fisherman.webp") center top/cover no-repeat}
.intro .hero{opacity:.55}
.intro .eyebrow,.intro h1{text-shadow:0 2px 12px #000c}

/* SK-3 · Morrow's file: a small second share beside the reveal video */
.fileBtn::before{content:"▣ ";color:#ff8e77}