#memberButton { position:relative; border:0; background:none; padding:0; display:grid; place-items:center; }
#catchArchive small { display:block; margin-top:6px; line-height:1.6; color:#688273; }
#catchCardDialog { width:min(460px,calc(100% - 24px)); max-height:90dvh; overflow:auto; }
#archiveFish,#archiveCard { display:block; width:100%; height:auto; }
#archiveCard { max-height:62dvh; object-fit:contain; }
#catchCardDialog .catch-actions { padding:12px; flex-wrap:wrap; }
#downloadCatchCard { color:#285e4c; padding:10px; }
#motionStatus { font-size:12px; max-width:65%; }
#motionSensitivity { width:120px; accent-color:#548e76; }
body[data-motion="on"] .rod-pad { border-color:#ceac60; }
.catch-actions { flex-wrap:wrap; }
#memberButton[data-reward="true"]::after { content:""; position:absolute; width:9px; height:9px; right:-2px; top:-2px; background:#df8958; border:2px solid #fff; border-radius:50%; }
.topbar { grid-template-columns:1fr; }
.top-actions { padding-left:0; justify-content:flex-end; }
.hud { grid-column:1; }
.top-actions #memberButton { border:1px solid #ffffffb0; background:#fbfdf4ed; padding:8px; }
#memberButton svg { width:21px; height:21px; }
[data-night="true"] .brand h1 { color:#e7f4e7; }
.tactile-controls { --dial-size:140px; position:absolute; bottom:max(12px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(450px,calc(100% - 24px)); display:grid; grid-template-columns:var(--dial-size) minmax(46px,1fr) var(--dial-size); align-items:center; gap:12px; z-index:3; pointer-events:none; }
.tactile-controls > * { pointer-events:auto; }
.rod-pad,.reel-dial { position:relative; width:var(--dial-size); height:var(--dial-size); border-radius:50%; padding:0; border:2px solid #d8e8dd; background:#f4faf1f2; color:#345f50; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; box-shadow:0 5px 0 #628978, inset 0 0 0 5px #e5efe4, 0 8px 18px #21493724; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.rod-pad strong,.reel-dial strong { font-size:15px; }
.rod-pad small,.reel-dial small { font-size:11px; font-variant-numeric:tabular-nums; color:#6e8a7b; }
.rod-grip { display:grid; place-items:center; width:40px; height:40px; background:#679c83; border-radius:50%; color:#fff; transform:translate(var(--stick-x,0px),var(--stick-y,0px)); box-shadow:inset 0 2px 0 #b9d9c3,0 3px 0 #446d5b; transition:background .12s; }
.rod-grip svg { width:25px; height:25px; }
.pad-guide { position:absolute; inset:12px; border:1px dashed #9fbaaa; border-radius:50%; pointer-events:none; }
.rod-pad[data-state="bite"] { background:#fcebb2; border-color:#e5ba58; }
.rod-pad[data-state="fight"] .rod-grip { background:#c39155; }
.rod-pad[data-feedback="danger"] { border-color:#c35d4c; box-shadow:0 5px 0 #a94f43,inset 0 0 0 5px #f7ded2; }
.rod-pad[data-feedback="slack"] { border-color:#4f92b0; }
.rod-pad[data-feedback="anticipation"] .pad-guide,.rod-pad[data-feedback="burst"] .pad-guide { border:2px solid #d29743; }
.rod-pad[data-state="bite"] .pad-guide { border:4px solid #dbac46; clip-path:inset(0 calc(100% - var(--bite-remaining,100%)) 0 0); }
.run-cue { display:none; position:absolute; top:24px; right:17px; color:#9c621f; pointer-events:none; }
.run-cue svg { display:block; width:19px; height:19px; }
.rod-pad[data-run="right"] .run-cue { display:block; transform:rotate(90deg); }
.rod-pad[data-run="left"] .run-cue { display:block; right:auto; left:17px; transform:rotate(-90deg); }
.reel-rim { position:absolute; inset:9px; border:7px solid #cad9d0; border-radius:50%; box-shadow:inset 0 1px 2px #91ab9d,0 1px 1px #fff; }
.reel-crank { position:absolute; inset:20px; border-radius:50%; transform:rotate(var(--reel-angle,0deg)); pointer-events:none; }
.reel-crank:before { content:""; position:absolute; left:50%; top:calc(50% - 4px); width:45%; height:8px; background:#91a99b; border-radius:4px; }
.reel-crank i { position:absolute; right:-7px; top:calc(50% - 12px); width:22px; height:24px; border-radius:8px; border:2px solid #345d4b; background:#567b65; box-shadow:inset 0 2px 0 #96b299; }
.reel-dial strong,.reel-dial small { z-index:1; background:#f2f8ee; padding:1px 4px; }
.tackle-adjustments { display:grid; gap:6px; place-items:center; }
.tackle-adjustments button,.save-actions button,.import-save { width:40px; height:36px; min-height:0; padding:8px; border-radius:8px; background:#f6fbee; color:#4c705d; display:grid; place-items:center; border:1px solid #b5cebc; }
.tackle-adjustments svg,.save-actions svg { width:20px; height:20px; }
.tackle-adjustments label { display:grid; text-align:center; font-size:10px; line-height:1.4; color:#345848; background:#f6fbee; border-radius:4px; padding:2px 6px; }
#dragControl { width:100%; min-width:0; height:20px; accent-color:#a1834f; touch-action:none; }
body[data-controls="gesture"] .controls { display:none; }
body[data-controls="gesture"] .meters { bottom:calc(max(12px,env(safe-area-inset-bottom)) + 155px); }
body[data-controls="gesture"] .toast { bottom:calc(max(12px,env(safe-area-inset-bottom)) + 218px); }
body[data-controls="buttons"] .tactile-controls { display:none; }
body[data-hand="left"] #reelDial { grid-column:1; grid-row:1; }
body[data-hand="left"] #rodPad { grid-column:3; grid-row:1; }
body[data-hand="left"] .tackle-adjustments { grid-column:2; grid-row:1; }
.fishing-readout { position:absolute; left:19px; top:calc(max(12px,env(safe-area-inset-top)) + 161px); max-width:calc(100% - 88px); padding:6px 9px; background:#f4f9edf0; color:#436651; border:1px solid #fff8; border-radius:6px; font-size:11px; line-height:1.5; z-index:2; pointer-events:none; }
.fishing-readout:empty { display:none; }
.fishing-readout[data-feedback="danger"] { color:#8b3e35; background:#fff0e9; border-color:#d6a18f; }
.fishing-readout[data-feedback="slack"] { color:#2c6683; background:#edf9ff; border-color:#9dbdcc; }
.fishing-readout[data-feedback="anticipation"],.fishing-readout[data-feedback="bite"] { color:#855a21; background:#fff2cf; border-color:#d8b770; }
.track.tension { background:linear-gradient(to right,#91bdd2 0 15%,#8fbea0 15% 68%,#e8bf69 68% 88%,#d67f70 88%); }
.track.tension i { box-shadow:2px 0 0 #264e45; opacity:.75; }
.settings-row { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:10px 2px; border-bottom:1px solid #d9e4d9; }
.settings-row select { min-height:40px; border:1px solid #b8cbbb; border-radius:6px; padding:6px; background:#fff; color:#355c4c; }
.settings-row input[type="checkbox"] { width:22px; height:22px; accent-color:#548e76; }
#menuDrag { width:150px; max-width:50%; accent-color:#a1834f; }
#memberPanel h3,#gear > h3 { font-size:15px; margin:20px 0 10px; }
.journey-section { padding:4px 0 18px; margin-bottom:8px; border-bottom:1px solid #cbdccd; }
.journey-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.journey-heading span { font-size:12px; color:#73927a; }
#journeyName { display:block; color:#355f4c; font-size:17px; }
#journeyGoal { color:#698473; font-size:12px; line-height:1.7; margin:8px 0 12px; }
#journeyProgress { display:block; width:100%; height:7px; border:0; border-radius:4px; overflow:hidden; background:#d7e5d8; accent-color:#69a083; }
#journeyProgress::-webkit-progress-bar { background:#d7e5d8; }
#journeyProgress::-webkit-progress-value { background:#69a083; }
.journey-reward { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; }
.journey-reward span { font-size:12px; line-height:1.6; color:#967239; min-width:0; }
#journeyClaim { flex:none; min-height:42px; padding:8px 12px; color:#fff; border:1px solid #518368; background:#699d80; border-radius:6px; }
.journey-section details { margin-top:12px; }
.journey-section summary { font-size:12px; color:#5c7e68; cursor:pointer; padding:6px 0; }
#journeyChapters { list-style:none; padding:0; margin:0; }
#journeyChapters li { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid #d6e2d5; }
#journeyChapters li div { display:grid; gap:5px; min-width:0; }
#journeyChapters b { font-size:12px; color:#466450; }
#journeyChapters small { font-size:11px; color:#7a8e7a; line-height:1.7; }
#journeyChapters li > span { flex:none; font-size:11px; color:#799780; }
#journeyChapters [data-state="current"] b { color:#35785d; }
.challenge-row,.loadout-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #d6e3d7; font-size:12px; }
.challenge-row span,.loadout-row span { flex:1; min-width:0; }
.challenge-row button,.loadout-row button,.confirm-actions button { min-height:40px; padding:8px 12px; border-radius:6px; background:#e3f0df; color:#39634e; border:1px solid #b3cdb5; }
.water-advice,#lastSession { font-size:12px; line-height:1.8; color:#4a6a57; }
.shop-filters { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #d7e2d6; }
.shop-filters input[type="search"] { min-width:0; flex:1; width:80px; }
.shop-filters input[type="search"],.shop-filters select { padding:8px; height:38px; border:1px solid #bacdbc; border-radius:6px; background:#fff; color:#355c4b; font-size:12px; }
.shop-filters label { white-space:nowrap; font-size:11px; display:flex; gap:3px; align-items:center; }
.shop-filters input[type="checkbox"] { width:17px; height:17px; accent-color:#5e8c70; }
.gear-compare { color:#527765!important; line-height:1.6; }
.shop-empty { padding:20px 0; text-align:center; font-size:13px; color:#68806c; }
.catch-result { max-height:calc(100dvh - 28px); overflow:auto; pointer-events:auto; }
.catch-actions { display:flex; gap:10px; margin-top:14px; pointer-events:auto; }
.catch-actions button { background:#e0eedf; color:#365f48; border:1px solid #b3c7ae; border-radius:6px; padding:9px 14px; }
.catch-rating { font-size:11px; color:#69836b; text-align:center; line-height:1.7; margin-top:10px; }
.book-card small { display:block; font-size:11px; color:#78907b; margin-top:4px; }
.save-actions { display:flex; gap:12px; margin:18px 0 8px; }
.import-save { position:relative; cursor:pointer; }
.import-save input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.confirm-actions { display:flex; justify-content:flex-end; gap:12px; padding:15px; }
#recallDialog p { margin:16px; line-height:1.7; }
button:disabled { cursor:not-allowed; opacity:.5; }
@media(max-width:370px) { .tactile-controls { --dial-size:118px; gap:7px; } body[data-controls="gesture"] .meters { bottom:145px; } body[data-controls="gesture"] .toast { bottom:201px; } }
@media(max-height:650px) and (orientation:portrait) { .tactile-controls { --dial-size:112px; } body[data-controls="gesture"] .meters { bottom:140px; } body[data-controls="gesture"] .toast { bottom:194px; } }
@media(orientation:portrait) and (max-height:650px) {
  body[data-controls="gesture"] .meters { bottom:calc(max(12px,env(safe-area-inset-bottom)) + 154px); }
  body[data-controls="gesture"] .toast { bottom:calc(max(12px,env(safe-area-inset-bottom)) + 204px); }
}
@media(orientation:landscape) and (max-height:520px) {
  .tactile-controls { --dial-size:100px; width:calc(100% - 30px); grid-template-columns:100px 95px 100px; justify-content:space-between; bottom:12px; }
  .tackle-adjustments { grid-template-columns:1fr 1fr; gap:3px; } .tackle-adjustments label { grid-column:1 / -1; grid-row:1; } #dragControl { grid-column:1 / -1; grid-row:2; }
  body[data-controls="gesture"] .meters { bottom:118px; left:50%; transform:translateX(-50%); width:255px; padding:5px 9px; }
  body[data-controls="gesture"] .toast { bottom:175px; padding:5px 9px; }
  .fishing-readout { top:116px; left:auto; right:17px; max-width:220px; }
  .catch-result { padding:12px; }
  .catch-result canvas { height:55px; width:95px; }
  .catch-result strong { font-size:20px; }
  .catch-result b { margin-top:8px; }
  .catch-rating { margin-top:5px; }
  .catch-actions { margin-top:8px; }
}

@media(min-width:760px) and (min-height:521px) {
  .topbar { grid-template-columns:minmax(0,1fr) auto; align-items:start; }
  .top-actions { grid-column:2; grid-row:1; }
  .hud { grid-column:1; grid-row:1; flex-wrap:wrap; }
  .condition-chip { top:calc(max(12px,env(safe-area-inset-top)) + 56px); }
  .scene-status { top:calc(max(12px,env(safe-area-inset-top)) + 82px); }
  .fishing-readout { top:calc(max(12px,env(safe-area-inset-top)) + 111px); }
  .view-reset { top:calc(max(12px,env(safe-area-inset-top)) + 56px); }
}

@media(orientation:portrait) and (max-width:759px) {
  .view-reset { top:calc(max(12px,env(safe-area-inset-top)) + 101px); right:max(12px,env(safe-area-inset-right)); }
  .condition-chip { max-width:calc(100% - 82px); }
}

/* Keep the character clear: side gestures, one bottom instrument strip. */
@media(orientation:landscape) and (max-height:520px) {
  .app { --edge-left:max(10px,env(safe-area-inset-left)); --edge-right:max(10px,env(safe-area-inset-right)); --edge-bottom:max(8px,env(safe-area-inset-bottom)); --land-dial:clamp(120px,34dvh,144px); --instrument-width:min(400px,calc(100% - var(--edge-left) - var(--edge-right) - var(--land-dial) * 2 - 20px)); --instrument-left:calc((100% - var(--instrument-width) + var(--edge-left) - var(--edge-right)) / 2); }
  .topbar { top:max(8px,env(safe-area-inset-top)); left:var(--edge-left); right:var(--edge-right); grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; }
  .top-actions { grid-column:2; grid-row:1; padding:0; gap:4px; }
  .top-actions .tab,.top-actions .icon-button { flex:none; width:38px; height:42px; }
  .hud { grid-column:1; grid-row:1; gap:4px; max-width:400px; }
  .hud .stat { min-width:0; min-height:42px; padding:4px 7px; gap:2px; flex:1; flex-direction:column; align-items:flex-start; border-radius:6px; }
  .hud .stat:first-child { flex:.7; min-width:0; }
  .stat strong { font-size:11px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stat span { font-size:9px; }
  .condition-chip { top:calc(max(8px,env(safe-area-inset-top)) + 50px); left:var(--edge-left); max-width:calc(100% - var(--edge-left) - var(--edge-right) - 48px); font-size:10px; gap:3px 10px; }
  .scene-status,.scene-status[data-mode] { top:calc(max(8px,env(safe-area-inset-top)) + 74px); left:var(--edge-left); max-width:310px; padding:3px 6px; font-size:11px; }
  .fishing-readout { top:calc(max(8px,env(safe-area-inset-top)) + 103px); left:var(--edge-left); right:auto; max-width:300px; padding:3px 6px; font-size:10px; }
  .view-reset { top:calc(max(8px,env(safe-area-inset-top)) + 50px); right:var(--edge-right); width:36px; height:36px; }
  body[data-controls="gesture"] .tactile-controls { display:contents; }
  .rod-pad,.reel-dial { --dial-size:var(--land-dial); position:absolute; bottom:calc(var(--edge-bottom) + 12px); z-index:3; }
  #rodPad { left:var(--edge-left); right:auto; }
  #reelDial { right:var(--edge-right); left:auto; }
  body[data-hand="left"] #rodPad { left:auto; right:var(--edge-right); }
  body[data-hand="left"] #reelDial { right:auto; left:var(--edge-left); }
  body[data-controls="gesture"] .meters { left:var(--instrument-left); bottom:var(--edge-bottom); transform:none; width:calc(var(--instrument-width) * .55); height:46px; padding:6px; gap:6px; border-radius:6px 0 0 6px; box-shadow:none; }
  .tackle-adjustments { position:absolute; right:calc(var(--edge-right) + 106px); bottom:var(--edge-bottom); width:calc(var(--instrument-width) * .52); height:46px; padding:3px 4px; display:grid; grid-template-columns:minmax(0,1fr) 32px 32px; grid-template-rows:14px 22px; gap:0 3px; background:#f4f9ef; border:1px solid #ffffff96; border-left:0; border-radius:0 6px 6px 0; z-index:3; }
  .tackle-adjustments label { grid-column:1; grid-row:1; display:block; padding:0; font-size:9px; background:none; }
  #dragControl { grid-column:1; grid-row:2; margin:0; height:22px; }
  .tackle-adjustments button { width:32px; height:40px; padding:6px; }
  #recallButton { grid-column:2; grid-row:1 / 3; }
  .tackle-adjustments { left:calc(var(--instrument-left) + var(--instrument-width) * .55); right:auto; width:calc(var(--instrument-width) * .45); grid-template-columns:minmax(0,1fr) 32px; }
  body[data-controls="gesture"] .toast,body[data-controls="buttons"] .toast { top:calc(max(8px,env(safe-area-inset-top)) + 137px); bottom:auto; left:var(--edge-left); right:auto; transform:none; max-width:300px; padding:4px 7px; font-size:10px; }
  .toast.hide { transform:translateY(4px); }
  body[data-controls="buttons"] .controls { right:var(--edge-right); bottom:var(--edge-bottom); }
  body[data-controls="buttons"] .meters { left:var(--edge-left); bottom:var(--edge-bottom); }
}