@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{font-family:'Be Vietnam Pro',sans-serif;color:#fff9ec;background:#087487;font-synthesis:none;--ink:#073c4d;--cream:#f6f2df;--gold:#ffd278;--muted:#acd4d7}*{box-sizing:border-box}body{margin:0;overflow:hidden;overscroll-behavior:none;touch-action:none}button,select,input{font:inherit}button{cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ffdb89;outline-offset:4px}button:disabled{opacity:.65;cursor:default}button[hidden],[hidden]{display:none!important}#ocean{position:fixed;inset:0;width:100%;height:100%;display:block}#app{position:fixed;inset:0;background:linear-gradient(180deg,#07364d33 0,transparent 36%,transparent 60%,#002f43a1 100%);pointer-events:none}#app button,#app select{pointer-events:auto}.topbar{position:absolute;left:40px;right:40px;top:max(28px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:14px;text-shadow:0 2px 15px #063d5055}.brand svg{width:44px;height:44px;fill:#fff4d7}.brand svg circle{fill:#146273}.brand h1{font-family:'Playfair Display',serif;font-weight:600;font-size:26px;line-height:1.16;margin:0}.brand h1 em{font-weight:500}.brand span{display:block;font-size:10px;letter-spacing:2.3px;margin-top:7px;opacity:.8}.top-actions{display:flex;gap:9px}.icon-button{width:42px;height:42px;border:1px solid #ffffff40;border-radius:50%;background:#043c4e82;color:#fff8e8;font-size:23px;line-height:1;backdrop-filter:blur(8px)}.spot{position:absolute;left:42px;top:150px;text-shadow:0 2px 12px #073b4d40}.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:600;color:var(--gold)}.spot h2{font-family:'Playfair Display',serif;font-weight:500;letter-spacing:-2px;font-size:62px;line-height:1.15;margin:12px 0}.spot p{font-size:14px;margin:0 0 20px;color:#eff8ef}.spot-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;background:#03445544;border:1px solid #ffffff26;padding:9px 12px;border-radius:4px}.spot-tag i{width:6px;height:6px;border-radius:50%;background:#cfe9ba}.session-badge{position:absolute;right:42px;top:108px;display:flex;gap:14px;font-size:10px;letter-spacing:1.5px;color:#efffffaa}.session-badge #phase{color:#ffdda1}.setup{position:absolute;bottom:188px;left:42px;display:flex;gap:18px;align-items:center;padding:16px 20px;border:1px solid #ffffff2e;border-radius:12px;background:#043d4ed9;box-shadow:0 12px 30px #002b3f1c;backdrop-filter:blur(12px)}.setup label{display:grid;gap:5px}.setup label>span{font-size:9px;font-weight:600;letter-spacing:1.6px;color:#aad3d6}.setup select{max-width:190px;background:transparent;color:#fff7de;border:0;font-size:13px;padding:6px 18px 6px 0;cursor:pointer}.setup select option{background:#073c4d;color:white}.setup-divider{width:1px;height:35px;background:#ffffff26}.sea-caption{position:absolute;right:42px;bottom:204px;display:flex;gap:22px;font-size:10px;letter-spacing:2px;color:#ffffff94}.dock{position:absolute;left:42px;bottom:50px;display:flex;gap:24px}.dock button{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;color:#fff8e4;border:0;min-width:62px;font-size:12px}.nav-icon{font-size:28px;line-height:1.1}.dock b{position:absolute;right:0;top:-5px;font-size:10px;font-weight:500;background:#ffd278;color:#174c54;border-radius:5px;min-width:19px;padding:3px 5px}.controls{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);text-align:center;width:430px}.controls>p{font-size:13px;margin:0 0 13px;color:#edf4e8}.control-row{display:flex;justify-content:center;gap:18px;align-items:center}.action{width:235px;height:75px;display:grid;grid-template-columns:35px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:13px;background:var(--cream);color:var(--ink);border:1px solid #fff9e0;border-radius:12px;box-shadow:0 8px 0 #002e4433,0 10px 35px #002d4533;user-select:none}.action svg{width:29px;height:29px;fill:none;stroke:var(--ink);stroke-width:1.7;grid-row:1/3;align-self:center;margin-left:16px}.action>span{font-size:15px;font-weight:700;text-align:left;letter-spacing:.4px}.action small{font-size:9px;text-align:left;letter-spacing:2px;margin-top:5px;opacity:.6}.action.pressed{transform:translateY(3px);background:#ffd278;box-shadow:0 3px 0 #002e4433}.action.hook{background:#ffd278;animation:pulse .5s infinite alternate}.direction{width:68px;height:68px;border:1px solid #ffffff65;border-radius:50%;background:#073c4da3;color:#fff4d9;font-size:32px;user-select:none}.direction.pressed{background:#ffd278;color:#073c4d;transform:scale(.97)}.keyboard-hint{font-size:10px;letter-spacing:.5px;margin-top:20px;color:#fff8e4bb}.keyboard-hint span{font-size:9px;color:#d9e8e3a1}.save-status{position:absolute;right:42px;bottom:55px;font-size:10px;color:#d2e8e4b2}.power-wrap{margin:0 auto 14px;width:235px}.power-wrap>span{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;margin-bottom:6px}.meter{height:8px;background:#031f3580;border:1px solid #ffffff22;border-radius:6px;position:relative;overflow:hidden}.meter>i{display:block;height:100%;width:100%;background:#ffd278;border-radius:6px}.fight-hud{position:absolute;top:118px;left:50%;transform:translateX(-50%);width:440px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.meter-card{background:#073c4ddd;backdrop-filter:blur(10px);border:1px solid #ffffff28;border-radius:9px;padding:13px 15px}.meter-card>div:first-child{display:flex;justify-content:space-between;margin-bottom:9px;font-size:12px}.meter-card b{font-weight:500;color:#ffde98}.meter-card .meter{height:10px}.meter-card:first-child .meter>i{background:#67d7ce}.tension-track{background:linear-gradient(90deg,#45cda733 0%,#f8d26944 58%,#ff645066 82%,#ff645077 100%)}.tension-track .red-line{position:absolute;left:82%;top:0;bottom:0;border-left:1px solid #fff}.tension-track>i{background:#69d6b4}.danger-meter{height:3px;overflow:hidden;margin-top:6px;border-radius:4px}.danger-meter i{display:block;background:#ff6450;height:100%;width:0}.behavior{grid-column:1/3;justify-self:center;padding:9px 18px;background:#073c4dca;border:1px solid #ffffff20;border-radius:30px;font-size:13px;color:#ffdf9c}.distance{grid-column:1/3;display:flex;justify-content:space-between;padding:0 6px;font-size:11px;color:#f8f2d9}.distance b{font-weight:500}.toast{position:absolute;top:43%;left:50%;transform:translateX(-50%);font-size:16px;padding:15px 23px;background:#073c4de0;border:1px solid #ffffff2e;border-radius:12px;box-shadow:0 5px 40px #002d4450;text-align:center;opacity:0;transition:opacity .2s;width:max-content;max-width:85%}.toast.show{opacity:1}.bite-alert{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#052f3edf;padding:22px 44px;border:1px solid #ffce7c80;border-radius:15px;box-shadow:0 0 70px #ffe09644}.bite-alert>span{display:inline-grid;place-items:center;width:36px;height:36px;background:#ffd278;color:#073c4d;border-radius:50%;font-size:25px;font-weight:800}.bite-alert h2{margin:12px 0 5px;font-size:30px;color:#ffd278}.bite-alert p{font-size:13px;margin:0 0 13px}.hook-timer{height:4px;border-radius:4px;overflow:hidden;background:#ffffff22}.hook-timer i{display:block;height:100%;background:#ffd278;width:100%}dialog{border:1px solid #8ec1c340;background:#073c4d;color:#fff8e8;border-radius:20px;box-shadow:0 25px 100px #001c2aa6;padding:28px;width:520px;max-width:calc(100% - 28px);max-height:82dvh;overflow:auto;touch-action:pan-y}dialog::backdrop{background:#002b3e90;backdrop-filter:blur(6px)}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.panel-head h2{font-family:'Playfair Display',serif;font-size:29px;font-weight:500;margin:7px 0 0}.panel-head .eyebrow{font-size:10px}.panel-head button{flex-shrink:0}.panel-summary{display:flex;gap:12px;margin-bottom:20px}.stat{flex:1;background:#ffffff08;padding:14px;border:1px solid #ffffff17;border-radius:10px}.stat b{display:block;font-size:23px;color:#ffe0a4}.stat span{display:block;font-size:11px;color:#a9d1d1;margin-top:5px}.fish-list{display:grid;gap:8px}.fish-row{display:flex;align-items:center;gap:13px;padding:13px;background:#ffffff08;border:1px solid #ffffff12;border-radius:10px}.fish-symbol{width:40px;font-size:25px;line-height:1}.fish-row>div:nth-child(2){flex:1}.fish-row b{font-size:13px;font-weight:600;display:block}.fish-row small{font-size:10px;color:#a9d1d1;display:block;margin-top:6px;line-height:1.6}.fish-row>strong{font-size:14px;color:#ffdc94}.empty{text-align:center;color:#afd6d5;font-size:14px;line-height:1.8;padding:26px 10px}.help-copy{font-size:14px;line-height:1.9;color:#d4e7df}.help-copy p{margin:0 0 18px}.help-copy b{color:#ffdc94}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #ffffff15;font-size:13px}.setting input[type=checkbox]{width:21px;height:21px;accent-color:#ffd278}.setting select,.setting input[type=number]{border:1px solid #ffffff28;border-radius:6px;background:#052e3c;color:#fff2d6;padding:9px;width:170px;font-size:12px}.setting input[type=range]{width:170px;accent-color:#ffd278}.primary,.secondary{padding:14px 23px;font-size:14px;border-radius:9px;font-weight:600}.primary{background:#ffd278;color:#073c4d;border:1px solid #ffd278}.secondary{background:transparent;color:#d5e9df;border:1px solid #ffffff40}.debug-note{font-size:11px;line-height:1.8;color:#a9d1d1}.reset{margin-top:20px}.result-glow{position:absolute;top:-110px;left:50%;transform:translateX(-50%);width:350px;height:350px;border-radius:50%;background:radial-gradient(#ffce7833,transparent 65%);pointer-events:none}#result{text-align:center;overflow:hidden;padding:30px;width:430px;max-width:calc(100% - 28px)}#result>.eyebrow{position:relative}.result-fish{font-size:90px;padding:25px 0 15px;filter:drop-shadow(0 8px 6px #001e3060);transform:rotate(-12deg)}.rarity-chip{display:inline-block;font-size:10px;letter-spacing:1.7px;padding:6px 11px;border:1px solid currentColor;border-radius:4px;color:#9ae7d7}#result h2{font-family:'Playfair Display',serif;font-size:33px;font-weight:500;margin:12px 0}.result-weight{display:flex;justify-content:center;gap:9px;align-items:baseline}.result-weight b{font-size:47px;font-weight:500}.result-weight span{font-size:18px;color:#acd4d7}.result-meta{display:flex;gap:20px;justify-content:center;font-size:11px;color:#acd4d7;margin-top:11px}#result-record{font-size:12px;color:#ffcf76;height:20px;margin:19px 0}.result-actions{display:flex;gap:10px}.result-actions button{flex:1}#result>small{display:block;font-size:10px;line-height:1.7;color:#94bcbe;margin-top:16px}#fatal{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:#073c4d;color:white;font:16px/1.8 sans-serif;padding:25px}.danger-vignette{box-shadow:inset 0 0 120px #ff4d2566}.camera-debug{position:absolute;left:20px;top:50%;font:11px/1.7 monospace;color:white;background:#003041cc;padding:12px;white-space:pre}.debug-chip{position:absolute;left:50%;top:92px;transform:translateX(-50%);background:#ffd278;color:#073c4d;font-size:10px;padding:4px 9px;border-radius:4px}body.fighting .spot,body.fighting .sea-caption{opacity:.4}body.fighting .spot p,body.fighting .spot-tag{display:none}@keyframes pulse{to{box-shadow:0 0 25px #ffc77888}}@media(max-width:1100px){.spot h2{font-size:48px}.spot{top:132px}.setup{bottom:190px;left:25px;padding:12px;gap:10px}.setup select{max-width:150px;font-size:12px}.topbar{left:25px;right:25px}.dock{left:25px;gap:10px}.sea-caption{right:25px}.save-status{right:25px}.fight-hud{width:390px;top:130px}body.fighting .spot{display:none}}@media(max-width:700px){.topbar{left:20px;right:20px;top:max(20px,env(safe-area-inset-top))}.brand{gap:9px}.brand svg{width:31px;height:31px}.brand h1{font-size:21px}.brand h1 em{display:block;font-size:20px}.brand span{font-size:8px;letter-spacing:1.4px;margin-top:6px}.top-actions{gap:5px}.icon-button{width:36px;height:36px;font-size:20px}.spot{left:23px;top:139px}.spot .eyebrow{font-size:9px;letter-spacing:2px}.spot h2{font-size:43px;margin:8px 0;letter-spacing:-1.2px}.spot p{font-size:12px;margin-bottom:13px}.spot-tag{font-size:10px;padding:7px 9px}.session-badge{right:22px;top:112px;font-size:8px;gap:8px;letter-spacing:1px}.controls{bottom:calc(67px + env(safe-area-inset-bottom));width:calc(100% - 30px);max-width:380px}.controls>p{font-size:12px;margin-bottom:12px}.action{height:72px;width:222px;border-radius:12px}.action>span{font-size:14px}.control-row{gap:11px}.direction{width:59px;height:59px;font-size:27px;flex-shrink:0}.keyboard-hint{display:none}.setup{bottom:calc(176px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:10px 13px;gap:12px;max-width:calc(100% - 35px);width:320px}.setup label{width:50%;gap:3px}.setup select{max-width:100%;font-size:11px;padding-right:8px;min-height:32px}.setup label>span{font-size:8px;letter-spacing:1.2px}.setup-divider{height:30px;flex-shrink:0}.dock{left:22px;right:22px;bottom:calc(18px + env(safe-area-inset-bottom));justify-content:space-between;gap:0}.dock button{flex-direction:row;gap:7px;font-size:11px;padding:9px 4px;min-height:38px}.nav-icon{font-size:19px}.dock b{position:static;font-size:9px;margin-left:2px;min-width:15px}.save-status{display:none}.sea-caption{display:none}.fight-hud{width:calc(100% - 40px);top:140px;max-width:400px;gap:8px}.meter-card{padding:11px}.meter-card>div:first-child{font-size:11px}.behavior{font-size:12px;padding:8px 14px;margin-top:5px}.distance{font-size:10px}.bite-alert{top:43%;padding:20px 30px;width:260px}.bite-alert h2{font-size:29px}.toast{font-size:13px;top:46%;padding:14px 19px}.power-wrap{width:222px}dialog{padding:21px;max-height:84dvh}.panel-head h2{font-size:27px}.panel-head{margin-bottom:18px}#result{padding:25px 20px}.result-fish{font-size:72px;padding:20px 0 12px}#result h2{font-size:29px}.result-weight b{font-size:40px}#result .eyebrow{font-size:10px}.result-actions button{font-size:12px;padding:14px 8px}.setting{font-size:12px}.setting select,.setting input[type=number],.setting input[type=range]{width:140px}.debug-chip{top:111px}body.fighting .spot{display:none}}@media(max-height:650px){.spot{top:110px}.spot h2{font-size:35px}.spot p,.spot-tag{display:none}.controls{bottom:32px}.setup{bottom:135px}.dock{bottom:30px}.fight-hud{top:95px}.topbar{top:16px}.session-badge{top:85px}.result-fish{font-size:50px;padding:10px}#result{max-height:92dvh}#result h2{font-size:24px;margin:8px}#result-record{margin:9px 0}.keyboard-hint{display:none}}@media(prefers-reduced-motion:reduce){.action.hook{animation:none}}

/* Main touch targets remain usable at the narrowest portrait size. */
.icon-button{width:44px;height:44px}.dock button{min-height:44px}@media(max-width:700px){.icon-button{width:44px;height:44px}.setup select{min-height:44px}.top-actions{gap:4px}.brand h1{font-size:20px}.brand h1 em{font-size:19px}}

/* R2: leave the water and fight target readable on portrait screens. */
#app{background:linear-gradient(180deg,#173d4d33,transparent 28%,transparent 65%,#002f437a)}
.spot{top:122px}.spot h2{font-size:43px;letter-spacing:-1px;margin:8px 0}.spot p{font-size:12px;margin-bottom:12px}.spot-tag{font-size:10px;padding:7px 10px}
.fight-hud{top:104px;gap:8px}.meter-card{padding:11px 14px;background:#123d49c4}.behavior{padding:8px 16px;background:#123d49bd}.distance{text-shadow:0 1px 5px #00343c}
.controls>p{text-shadow:0 1px 7px #002d3d}.action{background:#f7ecd2;border-color:#fff6df}.direction{background:#104b5dbf}
body.fighting .spot{display:none}.debug-chip{top:86px}.bite-alert{top:34%;padding:17px 28px}.bite-alert h2{font-size:26px;margin:8px 0 4px}
@media(max-width:700px){
 .topbar{left:17px;right:17px;top:max(18px,env(safe-area-inset-top))}.brand h1{font-size:18px}.brand h1 em{font-size:18px}.brand span{font-size:7px;letter-spacing:1.3px}.brand svg{width:25px;height:25px}
 .spot{left:22px;top:121px}.spot h2{font-size:31px;letter-spacing:-.5px;margin:6px 0}.spot .eyebrow{font-size:8px}.spot p{font-size:11px;margin-bottom:8px}.spot-tag{font-size:9px;padding:5px 8px}
 .session-badge{top:96px;right:20px}.fight-hud{top:119px;width:calc(100% - 36px);gap:7px}.meter-card{padding:9px 11px}.meter-card>div:first-child{margin-bottom:7px}.behavior{font-size:11px;padding:7px 12px;margin-top:0}.distance{font-size:9px;gap:7px}.distance>span:last-child{text-align:right}
 .controls{bottom:calc(73px + env(safe-area-inset-bottom))}.controls>p{font-size:11px}.action{width:214px;height:70px}.control-row{gap:9px}.direction{width:54px;height:54px}.dock{bottom:calc(15px + env(safe-area-inset-bottom))}.setup{bottom:calc(186px + env(safe-area-inset-bottom))}.debug-chip{top:95px}.bite-alert{top:31%;width:245px;padding:14px 23px}.bite-alert>span{width:27px;height:27px;font-size:20px}.bite-alert p{margin-bottom:9px;font-size:12px}.toast{top:35%}
}
@media(max-height:650px){.spot{display:none}.fight-hud{top:89px;gap:5px}.meter-card{padding:7px 10px}.behavior{font-size:10px;padding:5px 9px}.distance{font-size:9px}.controls{bottom:25px}.dock{bottom:25px}.bite-alert{top:32%}.debug-chip{top:77px}}

@media(max-height:650px) and (min-aspect-ratio:6/5){
 .topbar{top:14px;left:18px;right:18px}.brand h1{font-size:18px}.brand h1 em{display:block;font-size:18px}.brand span{display:none}.brand svg{width:28px}.top-actions .icon-button{width:44px;height:44px}
 .fight-hud{top:15px;width:340px}.meter-card{padding:7px 10px}.meter-card>div:first-child{font-size:10px;margin-bottom:5px}.meter-card .meter{height:7px}.behavior{padding:4px 10px;font-size:10px}.distance{font-size:9px}.session-badge{top:73px;right:20px}.debug-chip{top:114px}
 .controls{bottom:18px;width:390px}.controls>p{font-size:10px;margin-bottom:7px}.action{height:61px;width:216px}.direction{width:51px;height:51px}.dock{left:20px;right:auto;bottom:22px;gap:8px}.dock button{font-size:10px}.sea-caption,.save-status{display:none}.setup{left:20px;bottom:126px;transform:none;width:auto}.bite-alert{top:36%;padding:10px 20px}.bite-alert h2{font-size:21px}.bite-alert>span{display:none}
}

#result{overflow:auto;overflow-x:hidden}
/* R3: actual Blender character portrait accompanies the real catch result. */
.result-catch{display:flex;align-items:center;justify-content:center;gap:8px;height:145px;position:relative}.result-portrait{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 5px 9px #001e3055)}.result-catch .result-fish{font-size:60px;padding:0}
@media(max-height:650px){.result-catch{height:100px}.result-portrait{width:90px;height:90px}.result-catch .result-fish{font-size:44px}}
/* R4–R10: functional voyages, night rhythm and shared rooms. */
.choice-list{display:grid;gap:10px}.choice-list article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid #ffffff26;border-radius:10px}.choice-list b{font-size:14px}.choice-list p{font-size:12px;line-height:1.7;color:#c8dedc;margin:6px 0}.choice-list small{font-size:10px;color:#ffd278}.choice-list button{flex-shrink:0;padding:12px;min-width:74px;min-height:44px}.field{display:grid;gap:8px;font-size:13px;margin:18px 0}.field input,.field select{border:1px solid #ffffff40;background:#043344;color:#fff8e8;border-radius:8px;padding:13px;min-height:46px;min-width:0;width:100%}.room-actions{display:flex;gap:10px;margin:16px 0}.room-actions button{flex:1;font-size:12px;padding:14px 10px}.room-heading{display:flex;justify-content:space-between;align-items:center}.room-heading small{display:block;font-size:10px;letter-spacing:2px;color:#aacdd2}.room-heading b{display:block;font-size:27px;letter-spacing:4px;margin-top:6px}.member-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #ffffff20;font-size:12px}.member-row span{color:#b8d7d7;font-size:11px}.jig-green{color:#073c4d!important;background:#88ebbb!important}.result-catch .result-fish{transform:none;filter:none}.result-fish canvas{width:180px;height:130px;max-width:100%;display:block}.spot #progress-label{color:#ffe0a1;font-size:11px;margin:9px 0}.spot p{max-width:260px}.dock{gap:14px}.dock button{font-size:11px}.controls{bottom:44px}
@media(max-width:700px){.dock{left:14px;right:14px}.dock button{flex-direction:column;gap:4px;font-size:9px;min-width:62px;padding:4px;position:relative}.dock b{position:absolute;right:0;top:0;padding:2px 3px}.dock .nav-icon{font-size:21px}.controls{bottom:calc(84px + env(safe-area-inset-bottom))}.setup{bottom:calc(197px + env(safe-area-inset-bottom))}.spot p{max-width:220px;font-size:10px;line-height:1.5}.choice-list article{padding:12px}.choice-list b{font-size:12px}.choice-list p{font-size:11px}.result-catch{gap:0}.result-portrait{width:94px;height:94px}.result-fish canvas{width:160px;height:116px}.room-heading b{font-size:23px}.spot #progress-label{font-size:10px}}
@media(max-height:650px) and (min-aspect-ratio:6/5){.dock{flex-wrap:wrap;max-width:190px;bottom:15px;gap:4px}.dock button{width:78px;font-size:9px;flex-direction:row}.controls{bottom:18px}.setup{bottom:132px}.result-fish canvas{width:130px;height:94px}.result-catch{height:100px}}

/* R10 art refinement: restrained glass HUD, warm action, clear touch labels. */
:root{--cream:#fff1d4;--gold:#ffcf78;--ink:#083447}
#app{background:linear-gradient(180deg,#082b4e42,transparent 29%,transparent 66%,#001e3766)}
.topbar{top:max(24px,env(safe-area-inset-top));left:30px;right:30px}.brand{gap:10px}.brand h1{font-size:27px;text-shadow:0 2px 5px #17374488}.brand span{font-size:10px;letter-spacing:2px;color:#ffe9b9}
.brand svg{fill:#fff0c9;filter:drop-shadow(0 1px 3px #23495888)}
.icon-button{background:linear-gradient(160deg,#294453cb,#163447cc);border:1px solid #d3edf366;box-shadow:inset 0 1px #fff3,0 4px 12px #082c4033}
.spot{top:126px;left:31px;padding:15px 18px;max-width:270px;background:linear-gradient(145deg,#133d49c9,#11313f9c);border:1px solid #d7e9dc45;border-radius:14px;box-shadow:0 5px 20px #172e3830;backdrop-filter:blur(7px)}
.spot h2{font-size:35px;letter-spacing:-.4px;color:#fff0cf}.spot .eyebrow{font-size:10px;letter-spacing:1.7px}.spot p{font-size:12px;line-height:1.6;margin:0 0 9px}.spot-tag{font-size:12px;padding:5px 9px;background:#d3e2d317;border-color:#e4eede40;border-radius:6px}.spot #progress-label{font-size:12px;margin:10px 0 0;color:#ffe1a5}
.session-badge{right:31px;top:90px;font-size:11px;letter-spacing:.6px;text-shadow:0 1px 4px #002f43;background:#173a4770;padding:6px 10px;border-radius:6px}#fps{display:none}
.sea-caption{font-size:11px;letter-spacing:1px;gap:12px}.sea-caption b{font-weight:500;color:#ffdfa9}
.setup{background:linear-gradient(150deg,#234e5ad4,#153747e8);border:1px solid #c9e5da55;box-shadow:inset 0 1px #efffef2b,0 10px 25px #01273344;border-radius:13px}.setup label>span{font-size:11px;color:#c9e2df;letter-spacing:1.2px}.setup select{font-size:14px;min-height:44px}
.controls>p{font-size:14px;text-shadow:0 2px 5px #073448;font-weight:500}.action{background:linear-gradient(180deg,#fff0bf,#f3c571);border:1px solid #ffebbe;border-radius:38px;box-shadow:inset 0 2px #fff9,0 5px 0 #6b4e2d55,0 10px 30px #00243844;height:74px;width:238px}.action>span{font-size:16px;letter-spacing:.2px}.action small{font-size:10px;letter-spacing:1.3px;opacity:.85}.action.pressed{background:linear-gradient(#f8d790,#deb064)}
.direction{background:linear-gradient(150deg,#245261d9,#0a3445dc);border:1px solid #bfdcdb88;box-shadow:inset 0 1px #fff3,0 5px 15px #001f3433;color:#fff0cb}
.dock{gap:9px}.dock button{min-width:74px;padding:10px 9px;border:1px solid #d2e1db44;background:linear-gradient(150deg,#193d48ce,#122e3ccb);border-radius:13px;box-shadow:inset 0 1px #fff2;font-size:12px;gap:6px;text-shadow:0 1px 3px #123647}.nav-icon svg{display:block;width:25px;height:25px;fill:none;stroke:#fff0cb;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dock b{right:-3px;top:-5px;background:#edb765;border:1px solid #ffdf9e;box-shadow:0 2px 5px #12374d55}
.fight-hud{top:24px;width:450px;gap:7px}.meter-card{padding:12px 15px;border-radius:16px;background:linear-gradient(160deg,#31525edb,#15303de3);border:1px solid #c5dfdb70;box-shadow:inset 0 1px #fffaee38,0 6px 18px #13374722}.meter-card>div:first-child{font-size:14px;color:#fff0d1;margin-bottom:7px}.meter{height:10px;box-shadow:inset 0 1px 3px #00152680;border:1px solid #b6d7d93b}.meter i{border-radius:8px}.behavior{font-size:14px;background:#193e4bdc;border:1px solid #d2e5de45;border-radius:14px;max-width:100%;box-shadow:0 4px 12px #082c4020}.distance{font-size:12px;color:#fff2d7}
dialog{background:linear-gradient(145deg,#285966,#0d3547 68%);border:1px solid #c4e0d875;box-shadow:inset 0 1px #fff3,0 20px 90px #041e40a6}dialog::backdrop{background:#061f3966;backdrop-filter:blur(6px)}.panel-head .eyebrow{font-size:12px;letter-spacing:1.4px}.panel-head h2{font-size:30px;color:#fff0cf}.primary{background:linear-gradient(#ffdf97,#edb861);border-color:#ffe3a9;color:#113d4e;box-shadow:inset 0 1px #fff8}.secondary{background:#163f4a60;border-color:#bdd9d55c}.fish-row{background:#b7d7cd0b;border-color:#d6e9d82c}.fish-row b,.choice-list b{font-size:15px}.fish-row small,.choice-list p{font-size:12px}.field,.setting{font-size:14px}.setting select,.setting input[type=number]{font-size:13px}.stat span{font-size:12px}.help-copy{font-size:15px}.room-actions button{font-size:13px}
#result{border-radius:24px;border-color:#f2d6a584;padding:26px;background:radial-gradient(ellipse at 50% 10%,#7a938377,transparent 60%),linear-gradient(150deg,#2b5d6b,#123a4b)}#result>.eyebrow{font-size:12px;letter-spacing:2px;color:#ffe7aa}.result-catch{height:173px;gap:12px}.result-portrait{height:142px;width:142px}.result-fish canvas{width:190px;height:137px}.rarity-chip{font-size:12px;font-weight:600;letter-spacing:1px;border-radius:7px;padding:7px 12px}#result h2{font-size:36px;color:#fff0cf}.result-weight b{font-size:48px;color:#ffdf9c}.result-meta{font-size:13px}.result-actions button{font-size:14px;min-height:48px;border-radius:10px}#result>small{font-size:12px;line-height:1.7;color:#c2d8d6}#result-record{font-size:13px}.bite-alert{border:1px solid #ffd57a66;border-radius:20px;background:linear-gradient(#1b4751eb,#092f44ee)}
body.night .spot{background:linear-gradient(145deg,#112c43dc,#081d30c9)}body.night .action{background:linear-gradient(#e1edf1,#94c2cf);border-color:#d2f1f6}body.night .action.pressed{background:#b8e3e4}
@media(max-width:700px){
 .topbar{left:16px;right:16px;top:max(16px,env(safe-area-inset-top))}.brand h1{font-size:21px}.brand h1 em{font-size:21px}.brand span{font-size:8px;letter-spacing:1.3px}.brand svg{width:25px;height:25px}.top-actions{gap:5px}
 .spot{left:18px;top:116px;padding:11px 13px;max-width:230px;border-radius:12px}.spot h2{font-size:29px;margin:3px 0 7px}.spot .eyebrow{font-size:10px}.spot p{font-size:12px;max-width:205px;line-height:1.5}.spot-tag{font-size:11px}.spot #progress-label{font-size:12px}.spot #spot-description{display:none}.session-badge{right:17px;top:91px;font-size:10px;padding:5px 8px}
 .fight-hud{top:115px;width:calc(100% - 32px)}.meter-card{padding:10px 12px;border-radius:13px}.meter-card>div:first-child{font-size:13px}.behavior{font-size:12px;padding:7px 10px}.distance{font-size:11px;gap:10px}
 .controls{bottom:calc(93px + env(safe-area-inset-bottom));width:calc(100% - 26px)}.controls>p{font-size:12px;margin-bottom:10px}.action{height:68px;width:218px}.action>span{font-size:15px}.action small{font-size:10px}.direction{width:51px;height:51px}.control-row{gap:9px}
 .setup{bottom:calc(204px + env(safe-area-inset-bottom));padding:8px 13px;width:320px;gap:12px}.setup select{font-size:13px;min-height:44px}.setup label>span{font-size:10px}.dock{left:15px;right:15px;bottom:calc(14px + env(safe-area-inset-bottom));gap:8px}.dock button{flex:1;min-width:0;padding:8px 3px;font-size:11px;min-height:61px;border-radius:12px}.dock .nav-icon svg{width:23px;height:23px}.dock b{right:-2px;top:-5px;font-size:9px;min-width:18px}.keyboard-hint{display:none}
 #result{padding:24px 18px;max-height:88dvh}.result-catch{height:159px;gap:0}.result-portrait{width:120px;height:120px}.result-fish canvas{width:173px;height:125px}#result h2{font-size:32px}.result-weight b{font-size:43px}.result-meta{font-size:12px}.setting select,.setting input[type=number],.setting input[type=range]{width:135px}.panel-head h2{font-size:27px}
}
@media(max-height:650px) and (min-aspect-ratio:6/5){
 .topbar{left:18px;right:18px;top:14px}.brand h1,.brand h1 em{font-size:18px}.brand span{display:none}.spot{display:none}.fight-hud{top:16px;width:340px;gap:4px}.meter-card{padding:7px 10px}.meter-card>div:first-child{font-size:12px;margin-bottom:5px}.behavior{font-size:12px;padding:4px 9px}.distance{font-size:11px}.session-badge{top:77px}.controls{bottom:18px;width:380px}.controls>p{font-size:11px;margin-bottom:7px}.action{height:60px;width:218px}.direction{width:48px;height:48px}.dock{left:18px;right:auto;bottom:16px;gap:5px;max-width:180px}.dock button{flex:0 0 80px;min-height:44px;padding:5px 7px;flex-direction:row;font-size:10px}.nav-icon svg{width:21px;height:21px}.dock b{display:none}.setup{bottom:130px;left:18px;transform:none;width:270px;max-width:32%;padding:6px 10px}.setup select{font-size:12px}.result-catch{height:105px}.result-portrait{width:90px;height:90px}.result-fish canvas{width:130px;height:94px}#result h2{font-size:26px;margin:7px 0}.result-weight b{font-size:35px}.result-meta{font-size:12px}#result-record{margin:8px 0}.sea-caption,.save-status{display:none}
}

/* READY gear remains clear of the closer over-shoulder character. */
@media(min-width:701px) and (min-height:651px){.setup{left:auto;right:31px;top:138px;bottom:auto;transform:none;max-width:385px}}
@media(max-width:700px) and (min-height:651px){.setup{top:270px;bottom:auto}}
@media(max-height:650px) and (min-aspect-ratio:6/5){.setup{left:auto;right:18px;top:116px;bottom:auto}}

/* The cast meter is the zone selector: keep the existing hold/release gesture. */
.cast-zones{display:grid;grid-template-columns:35fr 35fr 30fr;margin-top:8px;border-radius:8px;overflow:hidden;border:1px solid #afd9d954;background:#073e4ee0;text-align:center}
.cast-zones span{padding:5px 4px;font-size:11px;letter-spacing:0;color:#d7e5df}.cast-zones small{font-size:9px;color:#a9ccd0}.cast-zones .selected{background:#f0cc82;color:#123d47}.cast-zones .selected small{color:#375956}
.cue-meter{height:3px;background:#b6d7d92b;border-radius:3px;overflow:hidden;margin-top:-5px}.cue-meter i{display:block;height:100%;background:#ffe1a5;width:0}.behavior[data-cue=WARNING]{border-color:#ffe1a5;color:#ffe5ac}.behavior[data-cue=OPENING]{border-color:#83e8bf;color:#b7ffda}
@media(max-height:650px) and (min-aspect-ratio:6/5){.cast-zones{margin-top:4px}.cast-zones span{padding:3px}.cast-zones br,.cast-zones small{display:none}}
@media(max-height:650px) and (min-aspect-ratio:6/5){
 #result[open]{display:grid;grid-template-columns:180px 1fr;gap:4px 12px;width:600px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 24px);padding:16px 20px}
 #result>.eyebrow{grid-column:1/-1;font-size:11px}.result-catch{grid-column:1;grid-row:2/6;height:180px;flex-direction:column;gap:0}.result-portrait{width:86px;height:86px}.result-fish canvas{width:125px;height:90px}
 #result-rarity{grid-column:2;grid-row:2;align-self:center;justify-self:center;font-size:11px;padding:5px 10px}#result h2{grid-column:2;grid-row:3;margin:0;font-size:26px;align-self:center}.result-weight{grid-column:2;grid-row:4;margin:0;align-self:center}.result-weight b{font-size:35px}.result-meta{grid-column:2;grid-row:5;flex-direction:column;gap:3px;margin:0;font-size:12px;align-self:center}
 #result-record{grid-column:1/-1;grid-row:6;margin:4px 0;font-size:12px}.result-actions{grid-column:1/-1;grid-row:7;margin:4px 0}#result>small{grid-column:1/-1;grid-row:8;font-size:11px;line-height:1.5}
}

/* One simulation-driven marker; no independent animation clock. */
.rhythm-wrap{width:290px;max-width:100%;margin:0 auto 12px;padding:10px 14px 8px;border:1px solid #cce8df66;border-radius:14px;background:linear-gradient(145deg,#264e5beb,#123546ef);box-shadow:0 5px 20px #052a3f33;color:#ffefc8}
.rhythm-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.6px;margin-bottom:8px}.rhythm-heading b{color:#ffe1a0}.rhythm-heading span{color:#c2dedb;font-size:9px}
.rhythm-track{height:18px;position:relative;border:1px solid #b9d7d845;border-radius:10px;background:#052c3d;overflow:hidden}.rhythm-band{position:absolute;top:0;bottom:0}.rhythm-band.cool{background:#8ca98b}.rhythm-band.great{background:#c8bd73}.rhythm-band.perfect{background:#ffe09b;box-shadow:0 0 10px #ffdf77aa}.rhythm-center{position:absolute;left:65%;top:0;bottom:0;border-left:1px solid #fff4bd}.rhythm-marker{position:absolute;left:0;top:0;bottom:0;width:4px;transform:translateX(-50%);background:white;box-shadow:0 0 6px #fff;z-index:1}.rhythm-wrap p{font-size:11px;min-height:15px;margin:7px 0 0}.rhythm-wrap.waiting .rhythm-marker{opacity:.45}.rhythm-wrap[data-grade=Perfect]{border-color:#ffe1a0}.rhythm-wrap[data-grade=Perfect] p{color:#ffe1a0;font-weight:700}.rhythm-wrap[data-grade=Great] p{color:#a6efce}.rhythm-wrap[data-grade=Cool] p{color:#b9e1ee}.rhythm-wrap[data-grade=Miss] p{color:#efc5bd}#result-rhythm{color:#ffe1a0}
@media(max-height:650px) and (min-aspect-ratio:6/5){.rhythm-wrap{margin-bottom:8px;padding:7px 12px 5px}.rhythm-heading{margin-bottom:5px}.rhythm-track{height:15px}.rhythm-wrap p{margin-top:4px;font-size:10px}}

.result-meta{flex-wrap:wrap;gap:6px 16px}#result-rhythm{flex-basis:100%}
@media(max-height:650px) and (min-aspect-ratio:6/5){#result-rhythm{flex-basis:auto}}

/* Solo one-touch mode: one main button and clear automatic pull/rest states. */
.auto-pull .red-line,.auto-pull .danger-meter{display:none}.auto-pull .action.pulling{background:linear-gradient(#ffe4a2,#edbd65);box-shadow:inset 0 2px #fff8,0 0 24px #ffe09666}.auto-pull .rhythm-heading span{color:#ffe1a0}

/* Difficulty is selected before casting; grade feedback follows the simulation clock. */
.difficulty-control{display:flex;gap:8px;width:290px;max-width:100%;margin:0 auto 12px;pointer-events:auto}.difficulty-control button{flex:1;min-height:46px;display:grid;place-content:center;gap:3px;padding:7px 9px;color:#d1e8df;border:1px solid #d0ebe43b;border-radius:12px;background:#073c4ddf;box-shadow:0 5px 15px #00354422}.difficulty-control b{font-size:13px;font-weight:700}.difficulty-control small{font-size:9px;color:#b5d4cc}.difficulty-control button[aria-pressed=true]{background:#fff0c9;color:#164e53;border-color:#ffe1a0;box-shadow:0 0 0 2px #ffd27844}.difficulty-control button[aria-pressed=true] small{color:#366a68}.difficulty-control #difficulty-hard[aria-pressed=true]{background:#ffcdab;border-color:#ffa574}
.grade-flash{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(var(--grade-pop,1));text-align:center;white-space:nowrap;pointer-events:none;--grade-color:#ffe2a0;color:var(--grade-color);filter:drop-shadow(0 3px 8px #073c4d);z-index:2}.grade-flash b{display:block;font-size:42px;font-weight:800;font-style:italic;letter-spacing:2px;line-height:1.05;text-shadow:0 2px #063949,0 0 24px #ffe09899}.grade-flash span{display:block;font-size:12px;margin-top:7px;letter-spacing:.4px;color:#fff6da}.grade-flash:before,.grade-flash:after{content:'✦';position:absolute;top:3px;color:var(--grade-color);font-size:22px}.grade-flash:before{left:-27px}.grade-flash:after{right:-27px}.grade-flash[data-grade=Great]{--grade-color:#9bf3cb}.grade-flash[data-grade=Great] b{font-size:37px}.grade-flash[data-grade=Cool]{--grade-color:#a9defb}.grade-flash[data-grade=Cool] b{font-size:32px}.grade-flash[data-grade=Miss]{--grade-color:#ff9e87}.grade-flash[data-grade=Miss] b{font-size:34px}.grade-flash[data-grade=Miss]:before,.grade-flash[data-grade=Miss]:after{content:'·';font-size:30px}
.auto-pull .action[data-grade=Great].pulling{background:linear-gradient(#c1f4d5,#81d9b5);box-shadow:0 0 20px #93edc566}.auto-pull .action[data-grade=Cool].pulling{background:linear-gradient(#c7e7ef,#91c7d8);box-shadow:0 0 15px #9bd4e855}.auto-pull .action[data-grade=Miss]{border-color:#ed9178}
@media(max-width:700px){.grade-flash{top:38%}.grade-flash b{font-size:36px}.grade-flash[data-grade=Great] b{font-size:32px}.grade-flash[data-grade=Cool] b{font-size:29px}.grade-flash[data-grade=Miss] b{font-size:30px}}
@media(max-height:650px) and (max-aspect-ratio:6/5){.grade-flash{top:47%}.difficulty-control{margin-bottom:9px}.difficulty-control button{min-height:44px}.difficulty-control small{font-size:8px}}
@media(max-height:650px) and (min-aspect-ratio:6/5){.grade-flash{left:76%;top:55%}.grade-flash b,.grade-flash[data-grade=Great] b,.grade-flash[data-grade=Cool] b,.grade-flash[data-grade=Miss] b{font-size:28px}.grade-flash span{font-size:10px}.difficulty-control{width:270px;margin-bottom:8px}.difficulty-control button{min-height:44px}.difficulty-control small{display:none}}

/* Account controls keep verified identity separate from live gameplay. */
#account-open svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6}.account-person{display:flex;align-items:center;gap:14px;margin:12px 0 20px}.account-avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#91e0d829;color:#fff0bd;font-size:24px;font-weight:700}.account-person b{display:block;font-size:20px;overflow-wrap:anywhere}.account-person small{display:block;margin-top:5px;color:#d3e9e3;font-size:12px}.account-save{padding:16px;background:#03293b55;border:1px solid #c4e0d840;border-radius:14px;margin-bottom:18px}.account-save p{margin:8px 0 0;font-size:13px;line-height:1.6}.account-actions{display:flex;gap:10px;flex-wrap:wrap}.account-actions button,.account-link{min-height:44px}.account-link{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:11px;text-decoration:none;font-size:13px;font-weight:700}.account-note{font-size:12px;line-height:1.6;color:#c3dbd6}.account-actions :disabled{opacity:.45;cursor:not-allowed}
@media(max-width:430px){.topbar{gap:8px}.brand{min-width:0;gap:0}.brand>svg{display:none}.brand h1,.brand h1 em{font-size:17px;display:block}.brand span{font-size:8px;letter-spacing:.5px}.top-actions{gap:4px;flex-shrink:0}.account-actions{display:grid;grid-template-columns:1fr 1fr}.account-person b{font-size:18px}}

/* R10 sea expansion: real fish pressure remains visible during automatic pulls. */
.cue-meter{grid-column:1/3;width:100%;margin-top:0}.duel-status{grid-column:1/3;display:flex;justify-content:space-between;gap:10px;padding:5px 8px;font-size:11px;color:#d0e6df;background:#0d3949bd;border-radius:8px}.duel-status b{color:#ffe0a4;margin-left:4px;font-weight:600}.fish-duel.auto-pull .red-line{display:block}.fish-duel.auto-pull .danger-meter{display:block}.fish-duel .behavior[data-cue=ACTIVE]{border-color:#eea47c;color:#ffe2b9}
@media(max-width:700px){.duel-status{font-size:10px;padding:4px 7px}}
@media(max-height:650px) and (min-aspect-ratio:6/5){.duel-status{font-size:9px;padding:3px 6px}.fish-duel .fight-hud{gap:3px}}
@media(max-height:650px) and (max-aspect-ratio:6/5){.setup{top:180px;bottom:auto}.spot{top:89px;padding:7px 10px;max-width:210px}.spot h2{font-size:23px}.spot #progress-label{display:none}}

.rhythm-challenge{font-size:10px;line-height:1.25;margin:2px 0 5px;color:#ffe1a0;text-align:center}@media(max-height:650px) and (min-aspect-ratio:6/5){.rhythm-challenge{font-size:9px;margin:1px 0 3px}}