:root{font-family:"Trebuchet MS",Verdana,sans-serif;color:#293b59;background:#eaf6f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:4px solid #4969b6;outline-offset:4px}button{color:inherit;border:0}button:hover{filter:brightness(1.04)}button:active{transform:translateY(2px)}[hidden]{display:none!important}main{max-width:1440px;margin:auto;padding:24px 36px 0}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px}.brand{font-weight:900;font-size:23px;text-decoration:none;color:inherit;letter-spacing:-1px}.brand span{display:block;font-size:11px;font-weight:normal;letter-spacing:.3px;margin-top:5px}.quiet{background:#fff9;border:1px solid #293b5920;padding:11px 17px;border-radius:16px;font-size:13px;font-weight:bold}.stage{position:relative;isolation:isolate;overflow:hidden;border:3px solid #fff;border-radius:32px;height:min(730px,calc(100svh - 150px));min-height:590px;background:#bce8f6;box-shadow:0 16px 45px #35617a12}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding:24px;background:linear-gradient(#e4f6fc88,#e8f6fc66 65%,#e8f6fc00);gap:17px}.intro h1{font-size:clamp(48px,6.5vw,84px);line-height:1;margin:15px 0 18px;letter-spacing:-4px;text-shadow:0 4px #fff8}.little-note{font-size:13px}.intro p{margin:0;font-size:17px}.selection h2{font-size:15px;font-weight:normal;margin:12px 0}.cats{display:flex;gap:12px}.cat-option{position:relative;width:118px;height:136px;border:2px solid #ffffffa6;background:#fff7;border-radius:24px;padding:7px 8px 11px;font-size:13px;font-weight:bold}.cat-option[aria-pressed="true"]{border-color:#c67a35;background:#fff4dd;box-shadow:0 5px 0 #c67a3520}.cat-option svg{width:90px;height:85px;display:block;margin:auto}.cat-option small{display:block;font-size:9px;font-weight:normal;margin-top:4px}.primary{background:#293b59;color:#fff;border:2px solid #293b59;border-radius:19px;padding:17px 30px;font-size:18px;font-weight:bold;box-shadow:0 5px 0 #17263f;min-width:245px}.primary span{margin-left:22px;color:#ffdb7c}.controls{font-size:12px;margin:3px 0}.controls b{margin:0 8px}kbd{font-family:inherit;background:#fff9;border:1px solid #293b5925;border-bottom:3px solid #293b5925;padding:5px 9px;border-radius:7px}.journey{display:flex;align-items:center;gap:13px;font-size:11px;margin-top:15px}.journey i{font-style:normal;opacity:.4}footer{display:flex;justify-content:space-between;font-size:11px;color:#687d91;padding:19px 3px}#hud{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;gap:18px}.route{background:#ffffffd9;padding:12px 22px;border-radius:18px;width:340px;text-align:center;font-size:13px;font-weight:bold}.track{height:5px;background:#293b5915;border-radius:9px;margin-top:9px;overflow:hidden}.track i{display:block;height:100%;width:0;background:#e59c4c;border-radius:9px}.fish-counter{background:#ffffffda;padding:13px 18px;border-radius:16px;font-weight:bold}#hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;padding:12px 18px;background:#ffffffd9;border-radius:20px}.result{background:#e6f1fa55;backdrop-filter:blur(5px)}.result-card{background:#fff8ed;padding:28px 35px 30px;border:3px solid white;border-radius:32px;box-shadow:0 12px 0 #293b5915;max-width:510px}.result h2{font-size:36px;letter-spacing:-1px;margin:12px 0}.result p{font-size:15px;line-height:1.6;margin:0 0 24px}.result .quiet{display:block;margin:20px auto 0}.result svg{width:90px;height:90px}.result-art-row{display:flex;justify-content:center}.result-art-row svg{width:80px} @media(max-width:650px){main{padding:12px 10px 0}header{margin-bottom:12px}.brand{font-size:18px}.brand span{font-size:9px}header .quiet{font-size:11px;padding:10px}.stage{min-height:600px;height:calc(100svh - 120px);border-radius:24px}.overlay{padding:18px 10px;gap:20px}.intro h1{font-size:51px;letter-spacing:-3px}.intro p{font-size:13px}.little-note{font-size:10px}.cats{gap:6px}.cat-option{width:76px;height:112px;border-radius:18px;padding:4px;font-size:11px}.cat-option svg{width:64px;height:70px}.cat-option small{font-size:8px}.selection h2{font-size:13px}.journey{gap:5px;font-size:9px}.controls{font-size:10px}footer{font-size:9px;justify-content:center}footer span:last-child{display:none}#hud{top:12px;left:10px;right:10px;gap:8px}#hud .quiet{padding:10px;font-size:11px}.route{width:auto;flex:1;padding:10px;font-size:10px}.fish-counter{padding:11px;font-size:12px}.result-card{padding:25px 20px;max-width:95%}.result h2{font-size:29px}#hint{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

@media(max-width:650px){.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.cat-option{grid-column:span 2;width:86px;height:100px}.cat-option:nth-child(4){grid-column:2 / span 2}.cat-option svg{height:59px}.overlay{gap:12px}.intro h1{margin:9px 0 12px}.selection h2{margin:6px 0}.journey{margin-top:6px}.stage{min-height:690px}.result-art-row svg{max-width:20%}.result-art-row svg:only-child,.result-art-row svg:first-child:nth-last-child(2),.result-art-row svg:first-child:nth-last-child(2)~svg{max-width:50%}}