:root{--sa-lake:#0D3B52;--sa-deep:#092A39;--sa-forest:#1F5A3A;--sa-amber:#F4A340;--sa-cream:#F8F4E8;--sa-mist:#DDE8E8;--sa-stone:#8B9189;--sa-teal:#2B6A79;--font-brand:'Manrope',Arial,sans-serif;--font-num:'IBM Plex Mono',ui-monospace,monospace;--ink:#F8F4E8;--muted:#a9b9b6;--panel:rgba(9,42,57,.74);--panel-solid:#102F3C;--line:rgba(248,244,232,.18);--lime:#F4A340;--warm:#F4A340;--red:#e0806f;--btn:#092A39;--btn-ink:#F8F4E8;--serif:'Manrope',Arial,sans-serif;--sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;position:fixed;inset:0;width:100%;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#0a252f;color:var(--ink);font:14px/1.45 var(--sans);-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--sa-amber);outline-offset:2px}
.hidden{display:none!important}
/* Phones: iOS zooms into any field with text under 16px and stays zoomed, so fields get 16px there;
   buttons don't double-tap-zoom; the HUD keeps clear of the notch and the home bar */
/* iPad/iPhone: fields at 16px everywhere (an iPad with keyboard or trackpad counts as a fine pointer and would zoom too) */
input,select,textarea{font-size:16px!important}
/* no text selection, magnifier or copy/paste bubble when a button or the picture is held (cast, reel, steer) */
html,body,.hud,.screen,.modal,button,canvas,.toast{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,.code-row code{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
html,body,button,a,.hud,.screen,.modal{touch-action:pan-x pan-y} /* no double-tap or pinch zoom anywhere (manipulation would still allow pinch) */
canvas{touch-action:none}
.modal-card,.fish-panel,.wissen-card{touch-action:pan-y}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.fade{position:fixed;inset:0;background:#06161d;opacity:0;pointer-events:none;transition:opacity .35s;z-index:40}.fade.on{opacity:1}
.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:800;color:#FFCB81}.eyebrow.small{font-size:9px;letter-spacing:.19em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:12px 16px;font-weight:780;font-size:13px;letter-spacing:.01em;transition:background .15s,transform .1s;user-select:none;-webkit-user-select:none;touch-action:none}
.btn:active,.btn.held{transform:scale(.97)}.btn:disabled{opacity:.55;cursor:wait}
.btn small{font-size:9px;font-weight:700;letter-spacing:.12em;opacity:.7;text-transform:uppercase}
.btn-primary{background:var(--btn);color:var(--btn-ink);border:1px solid rgba(244,163,64,.62)}.btn-primary:hover{background:#10465F;border-color:var(--sa-amber)}
.btn-soft{background:rgba(214,236,222,.1);color:var(--ink);border:1px solid var(--line)}.btn-soft:hover{background:rgba(214,236,222,.18)}
.btn-reel{background:#163f50;color:#F8F4E8;border:1px solid rgba(248,244,232,.3)}.btn-reel.held{background:var(--sa-amber);color:var(--sa-deep)}
.btn-ghost{background:transparent;color:#c6ddd4;border:1px dashed rgba(197,238,227,.3)}
.icon-btn{background:rgba(8,29,38,.55);border:1px solid var(--line);border-radius:8px;color:#d4e6de;display:inline-flex;align-items:center;gap:7px;padding:7px 10px;min-height:34px;font-weight:650;backdrop-filter:blur(8px)}
.icon-btn[aria-pressed=true]{background:rgba(244,163,64,.2);border-color:var(--sa-amber);color:var(--sa-cream)}
/* Title */
.screen{position:fixed;inset:0;z-index:30}
/* HUD */
/* the HUD already keeps inside the safe area (notch, Dynamic Island, home bar): what sits in it is placed from its
   edges, without adding env() a second time */
.hud{position:fixed;top:env(safe-area-inset-top,0);bottom:env(safe-area-inset-bottom,0);left:env(safe-area-inset-left,0);right:env(safe-area-inset-right,0);pointer-events:none;z-index:10}
.hud button,.hud input,.hud select,.hud a,.hud canvas{pointer-events:auto}
.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;background:linear-gradient(180deg,rgba(5,20,26,.7),rgba(5,20,26,0))}
.brand{font-size:13px;letter-spacing:.12em;color:#dcebe5;white-space:nowrap;background:none;border:0;padding:4px 2px;cursor:pointer}.brand:hover{color:var(--lime)}.brand span{color:var(--warm);font-weight:800}
.chips{display:flex;gap:6px;flex-wrap:nowrap;justify-content:center;white-space:nowrap}
@media (min-width:761px) and (max-width:1150px){.brand{display:none}}.chips span{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:12px;color:#d7e8e1;backdrop-filter:blur(8px)}
.top-actions{display:flex;gap:6px}
.coach{position:absolute;top:62px;left:50%;transform:translateX(-50%);max-width:min(560px,calc(100% - 32px));background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 14px;text-align:center;backdrop-filter:blur(10px);transition:opacity .4s}
.coach small{display:block;font-size:9px;letter-spacing:.18em;font-weight:800;color:var(--lime)}.coach span{font-size:13px;color:#dbe9e3}
.coach.quiet{opacity:0}
.sonar-panel{position:absolute;left:16px;bottom:16px;width:min(300px,42vw);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;backdrop-filter:blur(10px)}
.panel-title{font-size:9px;letter-spacing:.2em;font-weight:800;color:var(--muted);display:flex;justify-content:space-between;margin:0 2px 6px}
#sonarCanvas{width:100%;height:170px;display:block;border-radius:7px}
.sonar-note{font-size:10px;color:var(--warm);margin:6px 2px 0}
.mode-hud{position:absolute;inset:0}
/* Drive */
.drive-stats{position:absolute;top:62px;left:16px;display:flex;gap:8px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 11px;min-width:92px;backdrop-filter:blur(8px)}
.stat small,.zone-card small,.row small,.status small,.meter small,.fight-row small,.fight-head small{display:block;font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--muted)}
.stat b{font-size:15px;white-space:nowrap}
.minimap-wrap{position:absolute;top:62px;right:16px;width:150px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;backdrop-filter:blur(8px);text-align:center}
#minimap{width:100%;height:250px;display:block;cursor:pointer}
.mini-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.mini-actions button{min-width:30px}.mini-actions button{flex:1;height:30px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);font-weight:800;font-size:15px}
.mini-hint{display:block;font-size:9px;color:var(--muted);margin-top:5px}
.zone-card{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(520px,calc(100% - 32px));background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;text-align:center;backdrop-filter:blur(12px);transition:border-color .2s}
.zone-card.in-zone{border-color:rgba(240,206,149,.8)}.zone-card.in-zone small{color:var(--warm)}
.zone-card strong{display:block;font-size:17px;margin:2px 0}.zone-card span{display:block;font-size:12px;color:#bdd2cb;margin-bottom:10px}
.zone-card .btn{min-width:250px}
/* compact: text left, the anchor button right, the keys only while the boat stands */
.zone-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center;text-align:left;width:min(600px,calc(100% - 32px));padding:9px 10px 9px 16px}
.zone-card>small,.zone-card>strong,.zone-card>span{grid-column:1}.zone-card strong{font-size:15px;margin:1px 0}
.zone-card span{margin:0;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zone-card .btn{grid-column:2;grid-row:1/4;min-width:0;padding:10px 16px}
.zone-card #bankBtn{grid-column:3;grid-row:1/4;padding:10px 12px}.shore .zone-card{grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px}.zone-card>small,.zone-card>strong,.zone-card>span{padding-right:6px}
.shore .zone-card .keys{grid-column:1/4}
.zone-card .keys{grid-column:1/3;margin-top:6px;transition:opacity .4s}.zone-card.moving .keys{display:none}
.keys{font-size:10.5px;color:var(--muted);margin:8px 0 0;text-align:center}
.pad{position:absolute;bottom:190px;display:flex;gap:10px}.pad-left{left:16px}.pad-right{right:16px;flex-direction:column;align-items:center}
.pad button{width:62px;height:62px;border-radius:50%;border:1px solid rgba(223,248,234,.28);background:var(--panel);color:var(--ink);font-size:20px;touch-action:none;user-select:none;-webkit-user-select:none}
.pad button.small{width:44px;height:44px;font-size:16px}.pad button.held{background:var(--btn);color:var(--btn-ink)}
@media (hover:hover) and (pointer:fine){.pad{display:none}}
#labels{position:fixed;inset:0;pointer-events:none;z-index:5}
.lbl{position:absolute;transform:translate(-50%,-50%);font-size:11px;font-weight:800;letter-spacing:.12em;color:#eef4dc;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.5);white-space:nowrap}
.lbl.spot{color:var(--lime)}.lbl.spot.on{color:var(--warm)}.lbl.warn{color:#ffc6a8;font-size:10px}.lbl.town{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:.02em;font-size:14px}
/* Fish */
.fish-panel{position:absolute;top:62px;right:16px;width:290px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;backdrop-filter:blur(12px);max-height:calc(100% - 180px);overflow:auto}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.tab{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);border-radius:9px;padding:9px 8px;font-weight:780;font-size:12.5px;text-align:left}.tab small{display:block;font-size:10px;color:var(--muted);font-weight:600}
.tab.active{background:#2a5149;border-color:rgba(248,244,232,.6)}
.row{margin:0 0 11px}.row small b{color:var(--ink);float:right;letter-spacing:.02em}
.row input[type=range]{width:100%;accent-color:var(--sa-amber)}
.seg{display:flex;gap:4px;margin-top:5px}.seg button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);border-radius:7px;padding:6px 4px;font-size:12px}.seg button.active{background:var(--btn);color:var(--btn-ink);font-weight:800}
.power{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin:4px 0 8px}#powerBar{height:100%;width:0;background:linear-gradient(90deg,#DDE8E8,#F4A340,#e0806f)}
.hint{font-size:11.5px;color:#bdd2cb;margin:4px 0 0}
.status{display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.18);border-radius:8px;padding:7px 10px;margin:4px 0 8px}.status b{font-size:12.5px}
.float-card{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.float-card .btn{width:100%}
.float-card.biting,.status.biting{animation:pulse .5s infinite alternate}
.panel-head{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;background:none;border:0;color:var(--ink);font-weight:800;font-size:13px;padding:2px 2px 10px;text-align:left}
.panel-head .chev{transition:transform .2s;color:var(--muted)}
.fish-panel.collapsed{padding:8px 12px}.fish-panel.collapsed .panel-body{display:none}.fish-panel.collapsed .panel-head{padding:2px}.fish-panel.collapsed .chev{transform:rotate(-90deg)}
.gesture-hint.faded{opacity:0;transition:opacity 1s}
@media (pointer:coarse){.btn small,.keys,.kb{display:none}.action-bar .big{padding:12px 6px}}
@keyframes pulse{to{box-shadow:0 0 0 3px rgba(255,158,133,.6)}}
.action-bar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:min(720px,calc(100% - 24px))}
.action-bar .big{min-width:140px;padding:14px 16px;flex-direction:column;gap:2px;font-size:14px}
.action-bar .btn-ghost{align-self:center}
#castBtn,#rigCastBtn{--p:0;--c:#f0ce95;background:linear-gradient(90deg,var(--c) calc(var(--p)*100%),var(--btn) 0);text-shadow:0 1px 3px rgba(0,0,0,.55)} /* fills while held: amber for a short cast, red for a long one */
.fish-chips{position:absolute;left:16px;top:62px;display:flex;gap:6px}.fish-chips .icon-btn{font-size:13px}
.gesture-hint{position:absolute;left:16px;top:106px;margin:0;font-size:11px;color:#d6e6df;text-shadow:0 1px 3px #000;max-width:260px;display:none}
@media (pointer:coarse){.gesture-hint{display:block}}
.seg{flex-wrap:wrap}.seg button.small-lure{border-style:dashed}
.bite-alert{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;background:rgba(80,24,14,.86);border:2px solid var(--red);border-radius:16px;padding:14px 18px;backdrop-filter:blur(10px);animation:pop .25s ease-out;pointer-events:auto}
.bite-alert b{display:block;font-size:22px;letter-spacing:.06em}.bite-alert span{font-size:13px;color:#ffe2d6}
.bite-signal{width:44px;height:44px;border-radius:50%;background:var(--red);color:#3d120a;display:grid;place-items:center;font-size:26px;font-weight:900;animation:pulse .3s infinite alternate}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.8);opacity:0}}
/* Fight */
/* Fight: slim strip on top, two thumb buttons in the lower corners; the tension runs round the reel button */
.fight-top{position:absolute;top:62px;left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 24px));background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 14px 10px;text-align:center;backdrop-filter:blur(12px)}
.fight-top small{display:block;font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--muted)}
.fight-top b#fightText{display:block;font-size:16px;margin:2px 0 6px;min-height:22px}
.fight-line{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);white-space:nowrap}.fight-line .bar{flex:1;margin:0;height:8px}.fight-line b{color:var(--ink);font-size:12px}
.bar{position:relative;height:12px;border-radius:7px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:4px}.bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:7px}
.stamina i{background:#8dcfc1}
.thumb{position:absolute;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:10px}
.thumb-left{left:22px}.thumb-right{right:22px}
.thumb-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:50%;border:1px solid rgba(248,244,232,.35);color:#eaf5e6;font:inherit;font-weight:800;font-size:13px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.thumb-btn .ico{font-size:26px;line-height:1}.thumb-btn small{font-size:9.5px;font-weight:700;opacity:.7;letter-spacing:.04em}
.thumb-btn.pump{width:96px;height:96px;background:rgba(18,44,48,.82)}
.thumb-btn.pump:active,.thumb-btn.pump.held{background:var(--sa-amber);color:var(--sa-deep)}
.tension-ring{--t:0;--tc:#9fd3a5;width:138px;height:138px;border-radius:50%;padding:9px;background:conic-gradient(var(--tc) calc(var(--t) * 1turn),rgba(255,255,255,.12) 0);transition:background .1s}
.thumb-btn.reel{width:100%;height:100%;background:#2a5149}.thumb-btn.reel.held{background:var(--sa-amber);color:var(--sa-deep)}
.ring-label{font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--muted);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.thumb .drag{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px 6px;backdrop-filter:blur(12px)}
.thumb .drag span{text-align:center;min-width:52px}.thumb .drag small{display:block;font-size:8.5px;letter-spacing:.14em;font-weight:800;color:var(--muted)}.thumb .drag b{font-size:14px}
.drag button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);font-weight:800;font-size:17px}
.fight-hud .keys{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);max-width:calc(100% - 420px);text-align:center;font-size:11px;color:var(--muted);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.fight-hud::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 0 rgba(255,90,60,0);transition:box-shadow .25s}
.fight-hud.danger::before{box-shadow:inset 0 0 90px 10px rgba(255,90,60,.55);animation:dangerPulse .5s ease-in-out infinite alternate}
@keyframes dangerPulse{to{box-shadow:inset 0 0 60px 4px rgba(255,90,60,.3)}}
/* Modals */
.modal{position:fixed;inset:0;z-index:50;background:rgba(2,15,20,.55);display:grid;place-items:start center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:auto;backdrop-filter:blur(3px)}
.modal-card{position:relative;width:min(560px,100%);background:var(--panel-solid);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 25px 90px rgba(0,0,0,.35);max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));overflow:auto;margin:auto 0}
/* the close button stays at hand while a long card scrolls */
.modal-card>.close{position:sticky;top:0;float:right;margin:-8px -8px 0 8px;z-index:2;background:var(--panel-solid)}
.modal-card h2{font:500 30px/1.1 var(--serif);margin:8px 0 14px}
.close{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink)}
.catch-modal-pos{place-items:end end}
#catchModal{background:transparent;backdrop-filter:none;place-items:center end}
.catch-card{width:min(380px,100%)}
.catch-size{display:flex;align-items:baseline;gap:6px;margin:-4px 0 12px}.catch-size b{font:600 54px/1 var(--serif);color:var(--warm)}.catch-size span{font-size:18px;color:var(--muted)}.catch-size em{margin-left:auto;font-style:normal;font-weight:800;font-size:18px}
.catch-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.catch-grid div{background:rgba(0,0,0,.2);border-radius:8px;padding:7px 10px}.catch-grid small{display:block;font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:800}.catch-grid b{font-size:13px}
.memory{margin:0;background:#f4efe3;padding:8px 8px 6px;border-radius:4px;box-shadow:0 14px 36px rgba(0,0,0,.45)}.memory img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.memory figcaption{color:#3b3a33;font:italic 13px var(--serif);text-align:center;padding-top:5px}
.trophy{margin:12px 0 0;position:relative;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#2c5a63 0%,#123139 70%,#0b2229 100%);border:1px solid var(--line)}
.trophy canvas{display:block;width:100%;height:190px;touch-action:none;cursor:grab}.trophy canvas:active{cursor:grabbing}
.trophy figcaption{position:absolute;right:10px;bottom:7px;font-size:10px;letter-spacing:.08em;color:rgba(220,235,230,.6);pointer-events:none}
.catch-line{font:italic 15px var(--serif);color:#d8e6df;margin:14px 0}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.stats div{background:rgba(0,0,0,.2);border-radius:9px;padding:9px 10px}.stats small{display:block;font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:800}.stats b{font-size:16px}
.catch-list{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:5px}
.catch-item{display:flex;justify-content:space-between;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px}.catch-item small{color:var(--muted)}
.empty{color:var(--muted);font-style:italic}
.code-box{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.code-box small{font-size:10px;color:var(--muted)}
.code-row{display:flex;gap:6px;margin:6px 0}.code-row code,.code-row input{flex:1;min-width:0;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:8px;padding:9px;color:var(--ink);font:12px ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis}
.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.settings label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--muted);text-transform:uppercase}
.settings select{width:100%;min-width:0;max-width:100%;text-overflow:ellipsis;background:#0a222b;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px;font-size:13px;letter-spacing:0;text-transform:none;font-weight:500}
.note{font-size:12px;color:#bdd2cb}
.toasts{position:fixed;left:50%;top:168px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(480px,calc(100% - 24px))}
.toast{background:#23473f;border:1px solid rgba(234,239,213,.3);border-radius:10px;padding:10px 16px;font-size:12.5px;text-align:center;box-shadow:0 13px 40px rgba(0,0,0,.3);animation:toast .35s ease;transition:opacity .3s}
@keyframes toast{from{opacity:0;transform:translateY(-6px)}}
.noscript{position:fixed;inset:auto 0 0;padding:16px;text-align:center;background:#300}
@media (max-width:760px){
  .brand,.chips{display:none}.topbar{padding:10px}.icon-btn span{display:none}
  .coach{top:104px;left:10px;right:124px;transform:none;max-width:none;font-size:12px;padding:6px 10px;text-align:left}.coach span{font-size:12px}
  .drive-stats{top:56px;left:10px;gap:5px}.stat{min-width:0;padding:5px 8px}.stat b{font-size:12.5px}
  .minimap-wrap{top:110px;right:10px;width:104px;padding:6px}#minimap{height:170px}.mini-hint{display:none}
  .zone-card{bottom:10px;padding:8px 8px 8px 12px}.zone-card span,.keys{display:none}.zone-card strong{font-size:13.5px}.zone-card .btn{padding:9px 12px;font-size:13px}
  .pad{bottom:150px}
  .fish-panel{top:auto;bottom:96px;left:10px;right:10px;width:auto;max-height:42vh;padding:8px}.fish-panel .hint,.float-card .row small{display:none}.tabs{margin-bottom:8px}.tab{padding:6px}.row{margin-bottom:6px}
  .fish-chips{top:62px;left:10px}.gesture-hint{top:auto;bottom:140px;left:10px;right:10px;max-width:none;font-size:10.5px;line-height:1.3;text-align:center}
  .action-bar{bottom:10px;gap:6px}.action-bar .big{min-width:0;flex:1;padding:12px 8px;font-size:13px}
  .fight-top{top:56px;padding:6px 10px 8px}.fight-hud .keys{display:none}
  .sonar-panel{left:10px;bottom:auto;top:56px;width:150px}#sonarCanvas{height:95px}
  #catchModal{place-items:end center}
}

/* Buttons on phones: labelled icons, equal action buttons, compact bite alert */
@media (max-width:760px){
  .topbar{padding:8px 10px}.top-actions{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px}.top-actions .hidden{display:none}
  .top-actions .icon-btn{flex-direction:column;gap:1px;padding:5px 2px;min-height:46px;font-size:16px;line-height:1}
  .top-actions .icon-btn span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.02em}
  .drive-stats{top:68px}.minimap-wrap{top:122px}.coach{top:118px}.fish-chips{top:68px}
  .sonar-panel{top:124px} /* under the second row of buttons, not behind it */
  #hud:has(.sonar-panel:not(.hidden)) .coach{top:282px;right:10px} /* the guide box under the open sonar */
  .toasts{top:200px}#hud[data-mode=drive]~.toasts{top:350px}
  #hud[data-mode=fight] .coach{display:none}
  .action-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;left:10px;right:10px;width:auto;transform:none;bottom:12px}
  .action-bar .big{min-width:0;height:64px;padding:6px 4px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bite-alert{top:42%;width:calc(100% - 32px);max-width:360px;gap:10px;padding:12px}
  .bite-alert b{font-size:19px}.bite-alert span{font-size:12px}.bite-alert .btn{padding:14px 12px;font-size:15px}
  .bite-signal{width:36px;height:36px;font-size:20px;flex:none}
  .drag button{width:40px;height:40px;font-size:18px}
  .fight-top{top:118px}.fight-line .reserve{display:none}
  .thumb{bottom:16px}.thumb-left{left:14px}.thumb-right{right:14px}
  .fish-panel{bottom:88px}
}

/* Sorpe-Wissen */
.wissen-card{width:min(760px,100%);max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));overflow:auto}
.wissen-seasons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 14px}.wissen-seasons button{padding:8px 4px;line-height:1.2}.wissen-seasons small{display:block;font-size:10px;opacity:.7;font-weight:500}
.wissen-top{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
.water-col{width:100%;height:auto;background:#081d25;border-radius:10px;border:1px solid var(--line)}
.water-col .wa{font:600 10px system-ui,sans-serif;fill:#9fb9b9}.water-col .wl{font:600 11px system-ui,sans-serif;fill:#f0e6b8}.water-col .ws{font:800 11px system-ui,sans-serif;fill:#eaf4ef}
.wissen-water small{font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--lime)}.wissen-water p{font-size:13.5px;line-height:1.5;color:#dbe9e3;margin:6px 0 0}
.wissen-fish{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.wf{background:rgba(0,0,0,.2);border-left:3px solid var(--c);border-radius:8px;padding:9px 11px;font-size:12.5px;line-height:1.45}
.wf b{display:block;color:var(--c);font-size:13px}.wf .where{display:block;font-weight:700;color:#e6f0ec;margin:3px 0}.wf p{margin:0 0 5px;color:#c9dbd5}.wf em{font-style:normal;color:#f0d98a}
.wissen-more{margin-top:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12.5px}
.wissen-more summary{cursor:pointer;font-weight:800;color:#e6f0ec}.wissen-more dl{display:grid;grid-template-columns:90px 1fr;gap:4px 10px;margin:8px 0 2px}.wissen-more dt{color:var(--muted);font-weight:800}.wissen-more dd{margin:0}.wissen-more ul{margin:8px 0 2px;padding-left:18px}.wissen-more a{color:var(--lime)}
@media (max-width:760px){.wissen-top{grid-template-columns:1fr}.water-col{max-width:360px;margin:0 auto;display:block}.wissen-fish{grid-template-columns:1fr}.wissen-seasons small{display:none}}

/* lure picker with drawings */
.lure-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:5px}
.lure-card{display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);border-radius:8px;padding:4px 2px 5px;font-size:11px;line-height:1.15;cursor:pointer}
.lure-card svg{width:100%;max-width:64px;height:26px}.lure-card b{font-size:11.5px}.lure-card small{font-size:9.5px;color:var(--muted);letter-spacing:0;white-space:nowrap;text-transform:none;font-weight:600}.lure-card b{letter-spacing:0}
.lure-card.small-lure{border-style:dashed}.lure-card.active{background:rgba(207,227,170,.18);border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
.lure-info{font-size:11.5px;line-height:1.4;color:#c9dbd5;margin:6px 0 0}.lure-info b{color:#e6f0ec}

/* underwater moments */
.uw-overlay{position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 40%,rgba(30,110,110,0) 40%,rgba(6,40,46,.55) 100%),linear-gradient(180deg,rgba(150,220,210,.18),rgba(0,30,35,.25));animation:uwIn .5s ease}
.uw-badge{position:fixed;left:50%;top:158px;transform:translateX(-50%);z-index:40;background:rgba(10,52,58,.85);color:#dff3ee;border:1px solid rgba(160,230,220,.45);border-radius:20px;padding:7px 14px;font-size:12.5px;font-weight:700}
@keyframes uwIn{from{opacity:0}}
@media (max-width:760px){.uw-badge{top:calc(208px + env(safe-area-inset-top,0))}} /* under the fight strip, clear of the thumb buttons */
.lure-group{margin-top:4px}.lure-group>span{display:block;font-size:9px;letter-spacing:.14em;font-weight:800;color:var(--muted);margin:4px 0 2px}
.lure-group .lure-grid{grid-template-columns:repeat(4,1fr)}
.lure-card img{width:100%;max-width:74px;height:32px;object-fit:contain;border-radius:4px;background:#f2f0ea}
.hcolor-seg{flex-wrap:wrap}.hcolor-seg button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:56px}.hcolor-seg i{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(255,255,255,.4)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#creditTap{cursor:default;user-select:none}
.settings-h{font-size:12px;letter-spacing:.14em;color:var(--lime);margin:16px 0 6px}
.msg-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:12.5px}.msg-list .check{display:flex;gap:7px;align-items:center;color:#d7e8e1;text-transform:none;letter-spacing:0;font-weight:500}
.msg-quick{display:flex;gap:8px;margin-top:8px}.msg-quick .btn{flex:1;padding:8px}
@media (max-width:760px){.msg-list{grid-template-columns:1fr}}
/* App: update notice, install guide */
.update-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0));z-index:70;display:flex;align-items:center;gap:12px;background:var(--panel-solid);border:1px solid var(--lime);border-radius:14px;padding:10px 12px 10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.4);width:max-content;max-width:calc(100% - 24px)}
.update-bar .btn{padding:9px 14px}
.install-steps{margin:8px 0 12px;padding-left:22px;line-height:1.7}
.app-row{flex-wrap:wrap}.app-row .btn.active{border-color:var(--lime)}

.link-btn{background:none;border:0;padding:0;color:var(--lime);font-size:11px;text-decoration:underline;text-underline-offset:2px}
.credits-card p{font-size:12.5px;line-height:1.55}.credits-card a{color:var(--lime)}
/* ---------- Phones held sideways (height ≤ 500 px): everything slim and at the edges, the lake in the middle ---------- */
@media (orientation:landscape) and (max-height:500px){
  .brand,.chips,.keys,.gesture-hint{display:none!important}
  .topbar{padding:6px 10px;justify-content:flex-end;background:linear-gradient(180deg,rgba(5,20,26,.55),rgba(5,20,26,0))}
  .top-actions{width:auto;display:flex;gap:5px}
  .top-actions .icon-btn{flex-direction:row;min-height:30px;padding:4px 9px;font-size:13px;gap:5px}
  .top-actions .icon-btn span{display:inline;font-size:11px}
  /* drive */
  .drive-stats{top:8px;left:10px;gap:5px}.stat{padding:4px 8px;min-width:0}.stat small{font-size:8px}.stat b{font-size:12px}
  .coach{top:48px;left:10px;right:auto;transform:none;max-width:min(330px,42vw);padding:5px 10px;text-align:left}
  .coach span{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .minimap-wrap{top:46px;right:10px;width:108px;padding:5px}#minimap{height:96px}.mini-hint{display:none}
  .pad{bottom:12px}.pad-left{left:12px}.pad-right{right:12px;flex-direction:row;align-items:flex-end}
  .pad button{width:54px;height:54px;font-size:18px}.pad button.small{width:40px;height:40px}
  .zone-card{bottom:8px;width:min(360px,calc(100% - 370px));padding:6px 10px}.zone-card span{display:none}.zone-card strong{font-size:13px}.zone-card small{font-size:8px} /* as wide as the room between the steering pads allows */
  .zone-card .btn{min-width:0;width:100%;padding:8px}
  .toasts{top:48px;width:min(360px,46vw);left:auto;right:10px;transform:none}.toast{font-size:12px;padding:7px 10px}
  /* fishing */
  .fish-chips{top:8px;left:10px}.fish-chips .icon-btn{min-height:30px;padding:4px 8px;font-size:12px}
  #hud[data-mode=fish] .coach{top:46px}
  .fish-panel{top:auto;bottom:62px;right:10px;left:auto;width:min(300px,44vw);max-height:calc(100% - 120px)}
  .action-bar{left:10px;right:auto;bottom:8px;transform:none;width:min(420px,56vw);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
  .action-bar .big{height:46px;min-width:0;padding:4px 6px;font-size:13px}
  .bite-alert{top:46%}
  /* fight */
  .fight-top{top:8px;left:10px;transform:none;width:min(380px,50vw);padding:5px 10px 7px}.fight-top b#fightText{font-size:14px;margin:1px 0 4px;min-height:0}
  .thumb{bottom:10px}.thumb-left{left:12px}.thumb-right{right:12px}
  .tension-ring{width:112px;height:112px;padding:7px}.thumb-btn.pump{width:76px;height:76px}.thumb-btn .ico{font-size:21px}
  .thumb .drag{padding:3px 4px}.drag button{width:32px;height:32px}
  .uw-badge{top:auto;bottom:12px;left:auto;right:10px;transform:none} /* bottom right under the panel: the action bar takes the left half */
  /* catch card: two columns, the button always in view */
  .catch-card{width:min(640px,100%);display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start;padding:14px 16px}
  .catch-card>*{grid-column:1}.catch-card .trophy{grid-column:2;grid-row:1 / span 5;margin:0}.catch-card .trophy canvas{height:190px}
  /* the right column: the fish, the line and the buttons, placed so the buttons stay on the screen (auto-placement put them under the left column) */
  .catch-card .trophy{grid-row:1 / span 3}.catch-card .trophy canvas{height:150px}.catch-card .catch-line{grid-column:2;grid-row:4;margin:6px 0}
  .catch-card .modal-actions{grid-column:2;grid-row:5 / span 3;align-self:start}.catch-card h2{font-size:24px;margin:4px 0 6px}
  .catch-grid{gap:5px}.catch-grid div{padding:5px 8px}
  .modal-card{max-height:calc(100dvh - 16px);padding:14px 16px}
}
/* the landing moment: the pump button turns into the net */
.thumb-btn.pump.land{background:var(--sa-amber);color:var(--sa-deep);animation:landPulse .6s ease-in-out infinite alternate}
@keyframes landPulse{to{box-shadow:0 0 0 10px rgba(204,224,171,.25),0 8px 24px rgba(0,0,0,.35)}}

/* depth chart */
.depth-card{width:min(720px,100%)}
.depth-wrap{position:relative;display:flex;gap:10px;align-items:stretch}
#depthMap{flex:1;min-width:0;height:min(68dvh,640px);display:block;border-radius:10px;background:#21352a;cursor:pointer}
.depth-legend{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;font-weight:700;color:var(--muted,#9bb)}
.depth-legend span{display:flex;align-items:center;gap:5px}.depth-legend span::before{content:"";width:14px;height:14px;border-radius:3px;background:var(--c);border:1px solid rgba(0,0,0,.25)}
@media (orientation:landscape) and (max-height:500px){#depthMap{height:calc(100dvh - 165px)}.depth-legend{padding-top:40px}.depth-card h2{display:none}.depth-card .note{display:none}}
.depth-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.depth-actions .btn{padding:8px 12px;font-size:14px}
#markDelete[aria-pressed=true]{background:var(--red);color:#2a0f08}
.depth-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-left:auto}
.journal-h{font:600 15px/1.2 var(--sans);margin:16px 0 8px;display:flex;justify-content:space-between;align-items:baseline}.journal-h small{color:var(--muted);font-weight:600}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.badge{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12px;line-height:1.25}
.badge i{font-style:normal;font-size:20px;filter:grayscale(1) opacity(.35)}.badge b{display:block;font-size:12.5px}.badge small{color:var(--muted)}
.badge.got{background:rgba(244,163,64,.12);border-color:rgba(244,163,64,.4)}.badge.got i{filter:none}
.catch-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:-4px 0 12px}.catch-badges span{background:rgba(244,163,64,.16);border:1px solid rgba(244,163,64,.5);border-radius:99px;padding:5px 11px;font-weight:700;font-size:13px}
.timelapse-pill{position:fixed;left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top));z-index:30;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:1px solid rgba(244,163,64,.5);background:rgba(8,29,38,.8);color:var(--ink);font-weight:700;font-size:14px;backdrop-filter:blur(8px)}
.timelapse-pill small{color:var(--lime);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10px;margin-left:4px}
#hudTime{cursor:pointer}
body.cinema .mode-hud,body.cinema .coach,body.cinema .sonar-panel,body.cinema #labels,body.cinema .toasts{opacity:0;pointer-events:none;transition:opacity .6s}

/* ---------- Sauerland Angelsimulator: start screen after the CI kit v1 (text and buttons are real DOM, the art is only background) ---------- */
.title{display:flex;flex-direction:column;overflow:hidden;color:var(--sa-cream);font-family:var(--sans);isolation:isolate}
.title-bg{position:absolute;inset:0;z-index:-2;background:#092A39 url('assets/brand/hero-desktop-1920.webp') center/cover no-repeat}
.title::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,31,43,.76) 0%,rgba(5,31,43,.52) 30%,rgba(5,31,43,.06) 68%),linear-gradient(0deg,rgba(4,26,40,.6),transparent 37%,rgba(6,32,48,.13))}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(20px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) 0 max(32px,env(safe-area-inset-left))}
.masthead-brand{display:flex;gap:8px;align-items:center;font-family:var(--font-brand);font-size:12px;font-weight:800;letter-spacing:.09em}
.masthead-brand .soft{font-weight:500;font-size:11px;letter-spacing:.15em;opacity:.78}
.brand-dot{width:8px;height:8px;display:inline-block;background:var(--sa-amber);border-radius:99px}
.sa-icon-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:rgba(9,42,57,.48);border:1px solid rgba(248,244,232,.25);color:var(--sa-cream);transition:background .17s ease,transform .17s ease}
.masthead-btns{display:flex;gap:10px}.sa-icon-btn img,.sa-icon-btn .ic{width:22px;height:22px}.sa-icon-btn:hover{background:rgba(13,59,82,.95);transform:translateY(-1px)}
.hero{flex:1;width:100%;max-width:1480px;margin:0 auto;display:flex;align-items:center;padding:clamp(12px,min(5vw,5vh),80px) clamp(28px,8vw,124px) clamp(12px,min(4vw,4vh),60px)}
.hero-content{width:100%;max-width:min(100%,640px)}
.title .eyebrow{color:#FFCB81;font-size:11px;letter-spacing:.21em;font-weight:750;margin:0 0 20px;cursor:default}
.brand-name{font-family:var(--font-brand);font-size:clamp(56px,min(7.6vw,12.5vh),108px);letter-spacing:-.06em;line-height:.95;font-weight:800;margin:0;text-shadow:0 2px 32px rgba(4,31,42,.25)}
.brand-category{margin:12px 0 0 3px;font-family:var(--font-brand);font-weight:500;font-size:clamp(13px,2vw,24px);letter-spacing:clamp(.18em,.36vw,.32em)}
.brand-subline{font-size:clamp(16px,1.7vw,20px);font-weight:500;margin:12px 0 0 3px}
.title-mood{max-width:400px;font-size:15px;line-height:1.6;opacity:.86;margin:24px 0 20px 3px}
.hero-actions{max-width:370px;display:flex;flex-direction:column;gap:10px}
.game-button{min-height:52px;width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:11px 18px;border-radius:14px;font-size:16px;font-weight:650;letter-spacing:-.015em;color:var(--sa-cream);transition:background .17s ease,border-color .17s ease,transform .17s ease;box-shadow:0 4px 14px rgba(7,28,40,.11)}
.game-button img{width:21px;height:21px;flex:none}.game-button .tail{margin-left:auto;font-size:24px;line-height:1;opacity:.67;font-weight:500}
.game-button--primary{background:rgba(9,42,57,.94);border:1px solid rgba(244,163,64,.62)}
.game-button--primary:hover:not(:disabled){background:#10465F;border-color:var(--sa-amber);transform:translateY(-1px)}
.game-button--secondary{background:rgba(8,37,52,.42);border:1px solid rgba(248,244,232,.25);backdrop-filter:blur(7px)}
.game-button--secondary:hover{background:rgba(9,42,57,.78);border-color:rgba(248,244,232,.57);transform:translateY(-1px)}
.game-button:disabled{opacity:.6;cursor:wait}
/* loading: the start button is the progress bar, filling from the left in amber */
#startBtn:disabled{opacity:1;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(244,163,64,.5) 0,rgba(244,163,64,.5) calc(var(--load,0)*100%),rgba(9,42,57,.94) calc(var(--load,0)*100%));font-variant-numeric:tabular-nums}
#startBtn:disabled .tail{visibility:hidden}
.game-button:focus-visible,.sa-icon-btn:focus-visible,.title-icons button:focus-visible,.lake-option:focus-visible{outline:3px solid var(--sa-amber);outline-offset:4px}
.lake-selected{display:flex;align-items:center;gap:7px;margin:16px 3px 0;color:rgba(248,244,232,.76);font-size:13px}.lake-selected strong{color:var(--sa-cream);font-weight:650}
.status-dot{width:6px;height:6px;border-radius:99px;background:var(--sa-amber)}
.title-icons{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;max-width:370px}
.title-icons button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:7px 12px;border-radius:12px;border:1px solid rgba(248,244,232,.25);background:rgba(8,37,52,.42);color:var(--sa-cream);font-size:13px;font-weight:600;backdrop-filter:blur(7px)}
.title-icons button:hover{background:rgba(9,42,57,.78)}
.title-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0;padding:0 max(32px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left));font-size:11px;font-weight:550;letter-spacing:.08em;color:rgba(248,244,232,.72)}
.link-btn{color:var(--sa-cream)}
/* Gewässer wählen */
.lake-options{display:grid;gap:8px;margin:14px 0}
.lake-option{width:100%;text-align:left;display:flex;flex-direction:column;padding:14px 16px;min-height:62px;border-radius:12px;color:var(--sa-cream);background:rgba(248,244,232,.06);border:1px solid rgba(248,244,232,.15)}
.lake-option strong{font-size:16px;font-weight:650}.lake-option span{font-size:12px;margin-top:4px;color:rgba(248,244,232,.62)}
.lake-option:hover,.lake-option[aria-pressed=true]{border-color:var(--sa-amber);background:rgba(244,163,64,.1)}
.lake-option.soon{opacity:.62}
/* tablets */
@media (min-width:681px) and (max-width:1300px){.title-bg{background-image:url('assets/brand/hero-tablet-1280.webp')}}
/* phones upright: own art, content centred, actions at the bottom */
@media (max-width:680px) and (orientation:portrait),(max-aspect-ratio:2/3){
  .title-bg{background-image:url('assets/brand/hero-mobile-1080x1920.webp');background-position:center}
  .title::before{background:linear-gradient(180deg,rgba(6,28,40,.66) 0%,rgba(6,28,40,.46) 31%,rgba(6,28,40,.16) 55%,rgba(6,28,40,.86) 100%)}
  .masthead{padding:calc(12px + env(safe-area-inset-top)) 18px 0}.masthead-brand .soft{display:none}
  .hero{padding:4vh 22px 10px;align-items:stretch;max-width:600px}
  .hero-content{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
  .brand-name{font-size:clamp(50px,13vw,72px)}.brand-category{font-size:clamp(12px,3.3vw,17px);letter-spacing:.2em}
  .brand-subline{font-size:clamp(14px,3.6vw,17px)}.title .eyebrow{font-size:10px;margin-bottom:14px}
  .title-mood{font-size:14px;max-width:320px;margin:16px auto 0}
  .hero-actions{width:100%;max-width:420px;margin-top:auto;padding-top:28px}
  .lake-selected,.title-icons{justify-content:center;margin-left:auto;margin-right:auto}
  .title-foot{justify-content:center;text-align:center;padding:4px 18px calc(10px + env(safe-area-inset-bottom))}
}
/* phones sideways and other low screens */
@media (max-height:590px) and (min-width:681px){
  .masthead{padding-top:max(10px,env(safe-area-inset-top))}
  .hero{padding-top:8px;padding-bottom:8px}
  .title .eyebrow,.title-mood{display:none}
  .brand-name{font-size:clamp(44px,9vh,70px)}.brand-subline{margin-top:6px}
  .hero-actions{margin-top:14px;gap:6px}.game-button{min-height:44px;padding:6px 14px}
  .title-icons{margin-top:10px}.title-icons button{min-height:34px;padding:4px 10px}
  .title-foot{padding-bottom:max(8px,env(safe-area-inset-bottom))}
}
/* phones held sideways: everything has to fit in about 330–430 px height */
@media (max-height:500px) and (orientation:landscape){
  .title .eyebrow,.title-mood{display:none}
  .masthead{position:absolute;top:0;right:0;left:0;padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
  .masthead-brand{visibility:hidden}.sa-icon-btn{width:40px;height:40px}
  .hero{padding:max(10px,env(safe-area-inset-top)) 24px 4px max(28px,env(safe-area-inset-left))}
  .brand-name{font-size:clamp(36px,11vh,52px)}.brand-category{margin-top:4px;font-size:12px}.brand-subline{font-size:14px;margin-top:4px}
  .hero-actions{flex-direction:row;max-width:520px;margin-top:12px}.game-button{min-height:44px;font-size:15px}
  .lake-selected{display:none}.title-icons{max-width:520px;margin-top:8px;flex-wrap:nowrap}
  .title-foot{padding-top:2px}
}
@media (prefers-reduced-motion:reduce){.game-button,.sa-icon-btn{transition:none}}
/* CI type in the game: brand headlines in Manrope, measured values in IBM Plex Mono */
body{font-family:var(--sans)}
.modal-card h2,.wissen-card h2{font-family:var(--font-brand);font-weight:800;letter-spacing:-.04em}
.stat b,#lineOut,#lineLeft,#dragVal,.catch-size b,#sonarCanvas+*,.sonar-panel small,.drive-stats b{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.brand{font-family:var(--font-brand);font-weight:800}
.brand .brand-dot{margin-right:4px;vertical-align:1px}.brand .soft{font-weight:500;opacity:.78;letter-spacing:.14em}
.lake-card,.credits-card{width:min(500px,100%)}
.foot-right{display:flex;gap:14px;align-items:center}#appVersion{opacity:.7;font-family:var(--font-num);letter-spacing:0}
.modal-card :focus-visible{outline:3px solid var(--sa-amber);outline-offset:3px}
@media (pointer:coarse){.link-btn{min-height:44px;padding:0 4px}}
@media (max-height:780px) and (min-width:681px) and (orientation:landscape){.title .eyebrow{margin-bottom:12px}.title-mood{margin:14px 0 14px 3px}.title-icons{margin-top:12px}}
/* wide screens: the small buttons go up beside the settings, so the pike in the water stays free (CI 6) */
@media (min-width:681px) and (orientation:landscape){
  .title-icons{position:absolute;top:max(20px,env(safe-area-inset-top));right:calc(max(28px,env(safe-area-inset-right)) + 118px);margin:0;max-width:none;flex-wrap:nowrap}
  .title-icons button{min-height:48px}
}
/* up there the row gets long: below laptop width the heart alone stands for „Unterstützen“ */
@media (min-width:681px) and (max-width:1099px) and (orientation:landscape){.title-icons .spende-label{display:none}}
/* tablets across (iPad): the install and push hints wait in the bottom right corner, over the water, so the column
   with the buttons keeps its full size */
@media (min-width:900px) and (min-height:600px) and (orientation:landscape){
  .install-hint{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 56px);width:400px;max-width:400px;margin:0}
  #pushHint:has(~#installHint:not(.hidden)){bottom:calc(max(18px,env(safe-area-inset-bottom)) + 160px)} /* both: one above the other */
}
.title-foot .link-btn{display:inline-flex;align-items:center} /* the links and the credits button on one line (the tall touch targets put the text at the top) */
.title-foot{align-items:center}
@media (max-height:500px) and (orientation:landscape){.title-icons{top:max(8px,env(safe-area-inset-top));right:calc(max(16px,env(safe-area-inset-right)) + 100px)}.title-icons button{min-height:40px}}
/* Für Jens: a polaroid on the start screen, the game was built for him first */
.jens-card{position:absolute;right:clamp(140px,27vw,520px);bottom:clamp(56px,10vh,120px);width:clamp(118px,11vw,176px);padding:8px 8px 6px;display:flex;flex-direction:column;gap:5px;background:#F8F4E8;color:#17323F;border-radius:3px;transform:rotate(4deg);box-shadow:0 16px 36px rgba(2,18,27,.45);transition:transform .2s ease}
.jens-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:1px}
.jens-card span{font-family:var(--font-brand);font-weight:750;font-size:clamp(12px,1.1vw,15px);letter-spacing:.01em;text-align:center}
.jens-card:hover{transform:rotate(1.5deg) translateY(-3px)}
.jens-card:focus-visible{outline:3px solid var(--sa-amber);outline-offset:4px}
.jens-modal{width:min(620px,100%)}
.jens-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 12px}
.jens-photos figure{margin:0}.jens-photos img{display:block;width:100%;height:auto;border-radius:10px}
.jens-photos figcaption{margin-top:6px;font-size:12px;text-align:center;opacity:.7}
.jens-modal p{font-size:14px;line-height:1.55}
@media (max-width:680px) and (orientation:portrait),(max-aspect-ratio:2/3){
  .title .hero-actions{padding-top:16px}.jens-card{position:static;width:76px;margin:10px auto 0;padding:4px 4px 3px;gap:3px;transform:rotate(-3deg)}.jens-card span{font-size:11px}
}
@media (max-width:680px) and (orientation:portrait) and (max-height:620px){.jens-card{display:none}}
@media (max-height:500px) and (orientation:landscape){
  .jens-card{right:max(22px,env(safe-area-inset-right));bottom:66px;width:80px;padding:5px 5px 4px}.jens-card span{font-size:11px}
  .jens-photos img{max-height:58vh;object-fit:cover}
}
/* on tablets and desktops the coach line sits below the driving stats instead of on top of them */
@media (min-width:761px) and (max-width:1400px) and (min-height:501px){#hud[data-mode=drive] .coach{top:118px}}
/* phones upright: one setting per row, so long choices stay readable and nothing slides off the screen */
@media (max-width:520px){.settings{grid-template-columns:minmax(0,1fr)}}
.toast-btn{pointer-events:auto;display:inline-block;margin:6px 0 0 6px;padding:5px 10px;border-radius:8px;border:1px solid var(--sa-amber);background:rgba(9,42,57,.9);color:var(--sa-cream);font-size:12px;font-weight:650}
/* phones: the guide box gets three lines at most (tap Wissen for more) */
@media (max-width:760px){.coach span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
/* phones upright: a compact catch card, so the button stays on the screen */
@media (max-width:760px) and (orientation:portrait){
  .catch-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.catch-grid div{padding:5px 7px}.catch-grid b{font-size:12px}
  .catch-size b{font-size:44px}.catch-card h2{margin:2px 0 4px}.trophy canvas{height:150px}.catch-line{margin:8px 0}
}
/* narrow minimap on phones: the four small buttons share its width instead of running over the edge */
@media (max-width:760px){.mini-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.mini-actions button{min-width:0;width:auto;padding:0;font-size:12px}}
/* the bell: messages collected instead of popping up */
.inbox-pill{position:fixed;left:16px;top:124px;z-index:55;display:flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:14px;backdrop-filter:blur(8px)}
.inbox-pill b{font:700 11px/1 var(--font-num);min-width:16px;padding:3px 4px;border-radius:99px;background:rgba(255,255,255,.08);text-align:center}
.inbox-pill:not(.unread) b{opacity:.55}.inbox-pill.unread b{background:var(--sa-amber);color:#10222b}
.inbox-card{width:min(460px,100%)}
.inbox-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:6px;max-height:55vh;overflow:auto}
.inbox-list li{display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:start;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.2);font-size:13px;line-height:1.4}
.inbox-list small{font:600 11px/1.6 var(--font-num);color:var(--muted)}
/* phones: messages as compact banners, like a chat app; a tap sends one away */
@media (max-width:760px){
  .inbox-pill{left:auto;right:10px;top:calc(66px + env(safe-area-inset-top,0px));height:30px;padding:0 9px;font-size:13px} /* fixed, so past the notch itself: beside the speed/course/depth row, under the buttons */
  .toasts{top:auto;bottom:calc(150px + env(safe-area-inset-bottom));gap:6px}#hud[data-mode=drive]~.toasts{top:200px;bottom:auto}
  .toast{pointer-events:auto;width:100%;text-align:left;font-size:12.5px;line-height:1.35;padding:9px 12px;border-radius:14px;background:rgba(14,40,50,.92);border-color:rgba(248,244,232,.18);box-shadow:0 8px 24px rgba(0,0,0,.35);backdrop-filter:blur(10px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;animation:toastUp .28s ease}
}
@media (max-height:500px) and (orientation:landscape){
  .inbox-pill{left:calc(50% - 58px);right:auto;top:max(8px,env(safe-area-inset-top));transform:none} /* just left of the centre, clear of the buttons on the right */
  .toasts{top:auto;bottom:70px;left:auto;right:12px;transform:none;width:min(360px,45vw)}
  .toast{pointer-events:auto;text-align:left;padding:7px 11px;border-radius:12px;font-size:12px}
}
@keyframes toastUp{from{opacity:0;transform:translateY(8px)}}
/* lakes: four methods in the tab row; the river keeps two (spinning and the river rigs) */
.tabs .tab small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.shore .lake-only{display:none}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}.tabs .tab{min-width:0;padding:6px 5px;font-size:12px}
/* trolling: a card while the lure runs behind the boat */
.troll-card{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(150px + env(safe-area-inset-bottom));z-index:6;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-radius:14px;background:var(--panel);border:1px solid rgba(214,64,52,.65);backdrop-filter:blur(8px);max-width:calc(100% - 24px)}
.troll-card small{display:block;font-size:9px;letter-spacing:.16em;font-weight:800;color:#ff8f80}.troll-card b{font-size:13px;white-space:nowrap}
.troll-flag{font-size:20px;color:#e24a3c}.troll-card .btn{min-height:36px;padding:6px 10px;font-size:12px}
.troll-card.biting{border-color:#ff5a4a;box-shadow:0 0 0 3px rgba(255,90,74,.35)}
@media (max-width:760px){.troll-card{bottom:calc(220px + env(safe-area-inset-bottom))}}

/* ---------- Start screen with character: a poster for a day at the water, not a landing page ----------
   Fraunces (soft, a little wonky) for the name, Barlow Condensed for the labels like on a fishing licence,
   Caveat for what a mate would scribble: today's conditions, "Für Jens", the Petri-Heil stamp. */
:root{--font-display:'Fraunces',Georgia,serif;--font-cond:'Barlow Condensed','Arial Narrow',sans-serif;--font-hand:'Caveat','Segoe Print',cursive}
.title-bg{animation:titleDrift 38s ease-in-out infinite alternate;transform-origin:62% 55%}
@keyframes titleDrift{from{transform:scale(1.02)}to{transform:scale(1.09) translate(-1%,-.6%)}}
@media (prefers-reduced-motion:reduce){.title-bg{animation:none}}
.title::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} /* a little paper grain over the photo */
.masthead-brand{font-family:var(--font-cond);font-size:15px;font-weight:700;letter-spacing:.14em}.masthead-brand .soft{font-size:14px;font-weight:500}
.title .eyebrow{font-family:var(--font-cond);font-size:15px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.title .eyebrow::before{content:"";width:34px;height:2px;background:currentColor;border-radius:2px}
.brand-name{font-family:var(--font-display);font-weight:900;font-variation-settings:'opsz' 144,'SOFT' 100,'WONK' 1;font-size:clamp(64px,min(9.6vw,15vh),150px);letter-spacing:-.035em;line-height:.88;text-shadow:0 3px 0 rgba(4,26,36,.35),0 10px 40px rgba(4,31,42,.45)}
.brand-category{font-family:var(--font-cond);font-weight:700;font-size:clamp(18px,2.3vw,30px);letter-spacing:.34em;color:var(--sa-amber);margin-top:10px;display:flex;align-items:center;gap:.5em}
.brand-category::after{content:"";flex:0 1 120px;height:2px;background:linear-gradient(90deg,var(--sa-amber),transparent)}
.brand-subline{font-family:var(--font-display);font-style:italic;font-weight:600;font-variation-settings:'opsz' 36,'SOFT' 100;font-size:clamp(18px,1.9vw,24px);margin-top:10px}
.title-note{max-width:430px;margin:20px 0 18px 3px;padding:10px 14px 10px 16px;border-left:3px solid var(--sa-amber);background:linear-gradient(90deg,rgba(5,31,43,.55),rgba(5,31,43,0));border-radius:0 10px 10px 0;transform:rotate(-.6deg)}
.note-label{display:block;font-family:var(--font-cond);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#FFCB81}
.title-note .title-mood{display:block;max-width:none;margin:2px 0 0;font-family:var(--font-hand);font-size:clamp(22px,2vw,27px);font-weight:500;line-height:1.15;opacity:1}
.game-button{font-family:var(--font-cond);font-size:20px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.game-button--primary:not(:disabled){background:linear-gradient(180deg,#F7B256,#E8902A);border-color:#FFD08F;color:#10222b;box-shadow:0 6px 0 #9c5a14,0 14px 28px rgba(7,28,40,.4)}
.game-button--primary:not(:disabled) img{filter:brightness(0) saturate(100%) invert(10%) sepia(20%) saturate(900%) hue-rotate(160deg)}
.game-button--primary:hover:not(:disabled){background:linear-gradient(180deg,#FFC06A,#F09A33);border-color:#FFE0B0;transform:translateY(-2px);box-shadow:0 8px 0 #9c5a14,0 18px 32px rgba(7,28,40,.45)}
.game-button--primary:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #9c5a14,0 8px 18px rgba(7,28,40,.4)}
.game-button--primary:not(:disabled){animation:startPulse 2.8s ease-in-out infinite}
@keyframes startPulse{0%,100%{filter:none}50%{filter:brightness(1.08) saturate(1.05)}}
@media (prefers-reduced-motion:reduce){.game-button--primary:not(:disabled){animation:none}}
/* while the water loads: a sheen runs over the bar. It moves on the compositor (transform), so it keeps going while
   the world is built and the page itself cannot answer: the screen never looks stuck */
#startBtn.loading::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,232,190,.22) 50%,transparent 70%);transform:translateX(-100%);animation:loadSheen 1.5s linear infinite;will-change:transform}
@keyframes loadSheen{to{transform:translateX(100%)}}
/* tapped before the game code was there (index.html): the arrow turns into a ring until the tap is carried out */
.waiting{pointer-events:none}
.hero-actions .waiting .tail,.waiting .tail{color:transparent;width:18px;height:18px;flex:none;border-radius:50%;border:2px solid rgba(248,244,232,.3);border-top-color:var(--sa-cream);animation:waitSpin .8s linear infinite}
.title-icons .waiting,.title-foot .waiting{opacity:.6}
@keyframes waitSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#startBtn.loading::after,.waiting .tail{animation:none}}
.lake-selected{font-family:var(--font-cond);font-size:15px;letter-spacing:.05em}
.title-icons button{font-family:var(--font-cond);font-size:16px;font-weight:600;letter-spacing:.04em}
.jens-card > span{font-family:var(--font-hand);font-size:clamp(19px,1.6vw,24px);font-weight:700;letter-spacing:0;line-height:1}
/* the stamp: as if pressed onto the poster by hand */
.petri-stamp{position:absolute;left:-96px;top:-70px;width:104px;height:104px;border-radius:50%;display:grid;place-content:center;text-align:center;font-style:normal;color:#FFCB81;border:3px solid rgba(255,203,129,.9);box-shadow:inset 0 0 0 6px rgba(255,203,129,0),inset 0 0 0 8px rgba(255,203,129,.5);background:radial-gradient(circle,rgba(5,31,43,.35),rgba(5,31,43,.1) 70%);transform:rotate(-16deg);pointer-events:none}
.petri-stamp span{font-family:var(--font-cond);font-weight:700;font-size:15px;letter-spacing:.3em;margin-left:.3em;text-transform:uppercase;color:#FFCB81}
.petri-stamp b{font-family:var(--font-hand);font-weight:700;font-size:36px;line-height:.85}
@media (max-width:900px),(max-height:620px){.petri-stamp{display:none}}
@media (max-width:680px) and (orientation:portrait),(max-aspect-ratio:2/3){
  .title .eyebrow{justify-content:center;font-size:13px}.title .eyebrow::before{display:none}
  .brand-category{justify-content:center;font-size:18px}.brand-category::after{display:none}
  .brand-name{font-size:clamp(34px,11.6vw,62px)} /* "Heimatwasser" has to fit the narrowest phones in one line */
  .title-note{margin:14px auto 6px;text-align:left;transform:none}.title-note .title-mood{font-size:22px}
  .game-button{font-size:18px}
}
@media (max-height:500px) and (orientation:landscape){
  .brand-name{font-size:clamp(46px,13vh,64px)}.brand-category{font-size:15px;margin-top:4px}.brand-subline{font-size:16px;margin-top:4px}
  .title .eyebrow{font-size:12px;margin-bottom:2px}.title-note{margin:8px 0 8px 3px;padding:5px 10px}.title-note .title-mood{font-size:19px}.note-label{font-size:11px}
  .game-button{font-size:17px}
}
/* Tagesaufgaben: a chip beside the fishing chips, a small list under it */
.tasks-btn b{font-family:var(--font-num);font-weight:600;font-size:12px;margin-left:2px}
.tasks-btn.all{border-color:var(--sa-amber);color:#FFCB81}
.tasks-btn.pop{animation:taskPop .9s ease}
@keyframes taskPop{0%{transform:scale(1)}30%{transform:scale(1.18);background:rgba(244,163,64,.35)}100%{transform:scale(1)}}
.tasks-card{position:absolute;left:16px;top:104px;z-index:30;width:min(320px,calc(100vw - 32px));padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.tasks-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tasks-head b{font-family:var(--font-cond);font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FFCB81}
.tasks-head small{font-size:11px;color:var(--muted)}
.tasks-card ul{list-style:none;margin:8px 0 6px;padding:0;display:grid;gap:6px}
.tasks-card li{display:grid;grid-template-columns:20px 1fr auto;gap:6px;align-items:center;font-size:13.5px;line-height:1.3}
.tasks-card li i{font-style:normal;font-weight:800;color:var(--muted);text-align:center}
.tasks-card li small{font-family:var(--font-num);font-size:11px;color:var(--muted)}
.tasks-card li.done span{text-decoration:line-through;text-decoration-color:rgba(244,163,64,.8);opacity:.75}.tasks-card li.done i{color:var(--sa-amber)}
.tasks-foot{display:block;font-size:11px;color:var(--muted)}
@media (max-width:760px),(max-height:500px){.tasks-card{left:10px;top:104px}.tasks-btn{padding:0 8px}}
@media (min-width:761px) and (max-width:1400px) and (min-height:501px){#hud[data-mode=fish] .coach{top:104px}} /* clear of the fishing chips on the left */
@media (max-height:500px) and (orientation:landscape){.fish-chips{gap:4px}.fish-chips .icon-btn{padding:0 8px;font-size:12px}.inbox-pill{left:auto;right:max(10px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 40px)}#hud[data-mode=drive] .inbox-pill{right:calc(max(10px,env(safe-area-inset-right)) + 126px)}} /* phones: the bell under the buttons on the right, beside the minimap when driving */
body:not(.shore) .shore-only{display:none}
@media (max-height:500px) and (orientation:landscape){#wadeBtn span{display:none}}
@media (max-height:500px) and (orientation:landscape){#hud[data-mode=fish]:has(#fishPanel:not(.collapsed)) .inbox-pill{display:none}} /* the open panel takes the right side; the bell comes back with it closed */
/* Konto: Anmelden mit Apple oder Google (Apple: schwarz mit Logo, Google: weiß mit dem bunten G, wie vorgegeben) */
.account-box{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.account-box small{font-size:10px;color:var(--muted)}
.account-why{font-size:13px;line-height:1.45;margin:6px 0 8px;color:var(--ink)}
.login-row{display:flex;gap:8px;flex-wrap:wrap}
.login-btn{flex:1 1 180px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 14px;border-radius:10px;font:600 15px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.login-btn svg{width:17px;height:17px;flex:none}
.login-btn.apple{background:#000;color:#fff;border:1px solid #000}
.login-btn.google{background:#fff;color:#1f1f1f;border:1px solid #747775}
.btn.danger{color:#ffb3a6;border-color:rgba(224,128,111,.5)}
.title-foot .foot-right a.link-btn{text-decoration:underline;text-underline-offset:2px}
/* Anglerstufe und Ausrüstung (Fangbuch), Sperren an Ködern und Methoden */
.angler-box{margin:10px 0 14px;padding:12px 14px;border-radius:12px;background:rgba(244,163,64,.08);border:1px solid rgba(244,163,64,.35)}
.angler-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.angler-head b{font-family:var(--font-display,serif);font-weight:900;font-size:22px}
.angler-head span{font-family:var(--font-cond,sans-serif);font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#FFCB81}
.xp-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);margin:8px 0 4px;overflow:hidden}.xp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#E8902A,#FFCB81);border-radius:99px;transition:width .6s ease}
#xpText{font-size:11px;color:var(--muted)}
.gear-rows{display:grid;gap:6px;margin-top:10px}
.gear-rows label{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font-size:13px}
.gear-rows select{min-width:0;background:rgba(0,0,0,.25);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 8px;font:inherit}
.next-unlock{font-size:12px;color:var(--muted);margin:8px 0 0}
.locked{position:relative;opacity:.45;filter:grayscale(.8)}
.locked::after{content:"🔒" attr(data-lock);position:absolute;right:3px;top:3px;padding:2px 4px;border-radius:6px;background:rgba(9,42,57,.9);font:700 10px/1 var(--font-num,monospace);color:#FFCB81;filter:none}
/* Fangkarte: was gilt, und zwei Wege: zurücksetzen oder entnehmen */
.catch-rule{display:grid;gap:2px;margin:6px 0 10px;padding:8px 10px;border-radius:10px;background:rgba(143,214,148,.1);border:1px solid rgba(143,214,148,.35)}
.catch-rule small{font-size:11px;color:var(--muted)}.catch-rule b{font-size:13px;color:#b5e6ad}
.catch-rule.bad{background:rgba(224,128,111,.12);border-color:rgba(224,128,111,.45)}.catch-rule.bad b{color:#ffb3a6}
.catch-actions{display:flex;gap:8px;flex-wrap:wrap}.catch-actions .btn{flex:1 1 140px}
.catch-actions small{opacity:.6;font-size:10px;margin-left:4px}
#catchKeep.warn{border-color:rgba(224,128,111,.6);color:#ffb3a6}
/* Die erste Runde: ein Kasten oben in der Mitte, mit Schritt, Titel und „Überspringen“ */
.tutorial{position:absolute;top:62px;left:50%;transform:translateX(-50%);z-index:40;width:min(520px,calc(100% - 24px));padding:10px 14px 12px;border-radius:14px;background:rgba(9,42,57,.94);border:1px solid var(--sa-amber);box-shadow:0 12px 30px rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.tut-head{display:flex;align-items:baseline;gap:10px}
.tut-head small{font-family:var(--font-num);font-size:11px;color:#FFCB81}
.tut-head b{flex:1;font-family:var(--font-cond);font-size:19px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tut-head .link-btn{font-size:12px;color:var(--muted);text-decoration:underline}
.tutorial p{margin:4px 0 0;font-size:14px;line-height:1.45}
.tutorial.done{border-color:#8fd694}.tutorial.done b{font-family:var(--font-display);font-size:22px}
/* on larger screens the tutorial sits under the top rows (drive stats, fishing chips) instead of over them; while
   fishing on the left, clear of the lure panel on the right */
@media (min-width:761px) and (min-height:501px){.tutorial{top:118px}#hud[data-mode=fish] .tutorial{left:16px;transform:none;width:min(470px,calc(100% - 340px))}#hud[data-mode=fight] .tutorial{top:248px;width:min(520px,calc(100% - 240px))}} /* fight: under the tension panel, between the rod buttons */
/* phones upright: the tutorial under the fishing chips and the bell (down to about 152 px), not over them */
@media (max-width:760px) and (orientation:portrait){#hud[data-mode=fish] .tutorial,#hud[data-mode=fight] .tutorial{top:160px}}
@media (max-height:500px) and (orientation:landscape){.tutorial{top:50px;padding:7px 12px 8px}.tutorial p{font-size:12.5px;line-height:1.35}}
.tutorial.done .close{margin-left:auto;background:none;border:0;color:var(--muted);padding:2px}
.tutorial.done #tutProfile{margin-top:10px;width:100%}
/* in the first round only what the step needs: no top buttons, chips, map, lure panel or bell; the button to press glows */
#hud.tut .top-actions > :not(.sound-btn),#hud.tut .chips,#hud.tut .fish-chips,#hud.tut #fishPanel,#hud.tut .gesture-hint,#hud.tut #jerkBtn,#hud.tut .minimap-wrap,#hud.tut .drive-stats,#hud.tut .zone-card,#hud.tut .pad,#hud.tut .tasks-card,#hud.tut .inbox-pill,#hud.tut .coach{display:none!important}
#hud.tut .tutorial{top:12px}
@media (min-width:761px) and (min-height:501px){#hud.tut[data-mode=fish] .tutorial{left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 24px))}#hud.tut[data-mode=fight] .tutorial{top:204px}} /* fight: under the fight strip and the underwater badge */
@media (max-width:760px) and (orientation:portrait){#hud.tut[data-mode=fish] .tutorial{top:64px}}
.tut-focus{position:relative;animation:tutFocus 1.1s ease-in-out infinite;z-index:41}
@keyframes tutFocus{0%,100%{box-shadow:0 0 0 2px var(--sa-amber),0 0 0 0 rgba(244,163,64,.6)}50%{box-shadow:0 0 0 3px var(--sa-amber),0 0 0 12px rgba(244,163,64,0)}}
@media (prefers-reduced-motion:reduce){.tut-focus{animation:none;box-shadow:0 0 0 3px var(--sa-amber)}}
.lake-option.card strong em{font-style:normal;font-family:var(--font-cond);font-size:13px;letter-spacing:.06em;color:#FFCB81;margin-left:6px}.card-card{width:min(460px,100%)}

/* the landing call in the fight: big, in the middle, with the time left */
.land-call{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:12;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 22px 12px;border-radius:16px;background:rgba(9,42,57,.9);border:2px solid var(--lime,#b9e36b);box-shadow:0 12px 34px rgba(0,0,0,.4);pointer-events:none;animation:landCallPulse .7s ease-in-out infinite alternate}
.land-call b{font-size:26px;color:#fff}.land-call span{font-size:13px;color:#cfe2dc}
.land-call>i{display:block;width:220px;height:6px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden}.land-call>i>i{display:block;height:100%;background:var(--lime,#b9e36b)}
@keyframes landCallPulse{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.04)}}
.creep{display:inline-flex;gap:4px}
#floatBtn{--p:0;background-image:linear-gradient(90deg,rgba(240,206,149,.6) calc(var(--p)*100%),transparent 0)} /* fills while held, like the cast button */

/* tension in the fight: one bar with the limits marked: where the brake slips (tick), where the hook tears (amber), where the line breaks (red) */
.tension{margin-top:7px}.tension-bar{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.tension-bar #tensionFill{position:absolute;left:0;top:0;bottom:0;width:0;background:#9fd3a5;border-radius:6px;transition:width .08s}
.tension-bar .zone{position:absolute;top:0;bottom:0;right:0}.tension-bar .zone.tear{background:rgba(240,206,149,.35)}.tension-bar .zone.snap{background:rgba(255,122,92,.5)}
.tension-bar .brake-tick{position:absolute;top:-2px;bottom:-2px;width:3px;margin-left:-1px;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.6)}
.tension-legend{display:flex;justify-content:space-between;gap:8px;margin-top:3px;font-size:10.5px;color:var(--muted);white-space:nowrap}.tension-legend b{color:var(--ink)}
.leg-tear{color:#f0ce95}.leg-snap{color:#ff9a80}
.drag-dots{display:block;font-style:normal;letter-spacing:2px;font-size:9px;color:var(--lime,#b9e36b);line-height:1}
@media (max-width:760px){.brake-note{display:none}}

/* reeling: the reel icon turns and the button glows, however it is reeled (button, R, mouse or finger in the picture) */
@keyframes reelSpin{to{transform:rotate(360deg)}}
.reeling .ico{display:inline-block;animation:reelSpin .55s linear infinite}
#reelBtn.reeling,.thumb-btn.reel.reeling{background:var(--sa-amber);color:var(--sa-deep);box-shadow:0 0 0 3px rgba(244,163,64,.35),0 8px 24px rgba(0,0,0,.35)}
#reelBtn .ico{font-size:15px;line-height:1}

/* phones (portrait): the buttons over the fishing view like the top bar: icon with a small label, equal width in one row;
   the message bell below them on the right */
@media (max-width:760px){
  .fish-chips{left:10px;right:10px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px}
  .fish-chips .icon-btn,.fish-chips .creep .icon-btn{flex-direction:column;justify-content:center;gap:1px;padding:5px 2px;min-height:46px;font-size:16px;line-height:1;min-width:0}
  .fish-chips .icon-btn span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .fish-chips .tasks-btn span b{font-size:9.5px}
  .fish-chips .creep{display:contents}
  #hud[data-mode=fish] .inbox-pill,#hud[data-mode=fight] .inbox-pill{top:calc(122px + env(safe-area-inset-top,0px))}
}

/* the sound switch: a small square, not a full button */
.sound-btn{padding:6px 9px;font-size:15px;justify-content:center}
@media (max-width:760px){.top-actions{display:flex}.top-actions .icon-btn{flex:1 1 0}.top-actions .sound-btn{flex:0 0 44px;font-size:17px}}
.home-quick{margin:4px 0 12px}

/* one reduced icon set: line icons from the sprite (src/icons.js), drawn in the text colour */
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;overflow:visible}
.pad button .ic{width:26px;height:26px;vertical-align:middle}.pad button.small .ic{width:20px;height:20px}
.mini-actions button .ic{width:17px;height:17px;vertical-align:middle}
.close{display:grid;place-items:center}.close .ic{width:16px;height:16px}
.thumb-btn .ico .ic{width:1em;height:1em;vertical-align:middle}
.title-icons button .ic{width:18px;height:18px;opacity:.9}
.sound-btn .ic,.top-actions .icon-btn .ic{width:18px;height:18px}
.fish-chips .icon-btn .ic{width:17px;height:17px}
.chips .ic{width:14px;height:14px;opacity:.85}
.troll-flag .ic{width:22px;height:22px}
.tab .ic{width:15px;height:15px}
/* how much line is still out while reeling in */
.meter{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;background:rgba(0,0,0,.28);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;line-height:1.5}
.thumb-btn .meter{margin:2px 0 0}

/* Beißzeit: an amber chip in the top bar (desktop) and a pill under the bell (phone) while the fish are on the feed */
.phase-chip,.phase-pill{background:rgba(244,163,64,.22)!important;border:1px solid var(--sa-amber)!important;color:var(--sa-cream);animation:phaseGlow 2.4s ease-in-out infinite}
.phase-chip .ic,.phase-pill .ic{width:15px;height:15px;margin-right:3px}
.phase-pill{display:none}
@keyframes phaseGlow{50%{box-shadow:0 0 0 4px rgba(244,163,64,.18)}}
@media (max-width:760px){
  #hud[data-mode=fish] .phase-pill:not(.hidden),#hud[data-mode=fight] .phase-pill:not(.hidden){display:flex;position:fixed;right:10px;top:204px;z-index:55;align-items:center;height:28px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:700}
}
@media (prefers-reduced-motion:reduce){.phase-chip,.phase-pill{animation:none}}

/* camera buttons on the PC (mouse): turn and zoom without the wheel or a drag; hidden on touch screens */
.cam-pad{display:none}
@media (pointer:fine) and (min-width:761px){
  #hud[data-mode=fish] .cam-pad,#hud[data-mode=fight] .cam-pad{display:flex;position:fixed;right:16px;bottom:16px;z-index:30;gap:6px}
  .cam-pad button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(8,29,38,.62);color:#d4e6de;display:grid;place-items:center;backdrop-filter:blur(8px);cursor:pointer}
  .cam-pad button:hover{background:rgba(16,70,95,.8)}.cam-pad button.held{background:var(--sa-amber);color:#10222b}
  .cam-pad .ic{width:20px;height:20px}
}

/* ---------- Fangbuch: tabs, summary, the species collection with medals, badge progress ---------- */
.jtabs{display:flex;gap:4px;margin:4px 0 12px;overflow-x:auto;scrollbar-width:none}.jtabs::-webkit-scrollbar{display:none}
.jtabs button{flex:1 0 auto;padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-weight:700;font-size:13px;white-space:nowrap}
.jtabs button.active{background:rgba(244,163,64,.18);border-color:var(--sa-amber);color:var(--sa-cream)}.jtabs small{opacity:.7;font-weight:600}
.jsummary{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 12px}.jsummary div{background:rgba(0,0,0,.2);border-radius:10px;padding:9px 10px}
.jsummary small{display:block;font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:800;text-transform:uppercase}.jsummary b{font-size:17px;line-height:1.3}
.mrow{display:inline-flex;align-items:center;gap:3px;font-size:14px}
.medal{display:inline-block;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.25);vertical-align:-1px}
.medal.m1{background:linear-gradient(135deg,#e2a26b,#9a5a2c)}.medal.m2{background:linear-gradient(135deg,#f1f4f6,#9aa4ab)}.medal.m3{background:linear-gradient(135deg,#ffe58a,#d19a1e)}
.medal.off{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.jgoal{margin:0 0 12px}.jgoal-h{display:block;font-size:9px;letter-spacing:.16em;color:var(--sa-amber);font-weight:800;margin-bottom:5px}
.goal-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px dashed rgba(244,163,64,.45);background:rgba(244,163,64,.07);margin-bottom:6px}
.goal-row .fish-art{width:64px;flex:none}.goal-row b{display:block;font-size:13.5px}.goal-row small{color:var(--muted);font-size:12px}
.jintro{color:var(--muted);font-size:12.5px;margin:0 0 10px}
.species-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.species-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:10px 8px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.species-card .fish-art{width:100%;max-width:120px;height:56px}.species-card b{font-size:13.5px}.species-card small{color:var(--muted);font-size:11px;line-height:1.3}
.species-card .nextm{color:var(--sa-amber)}.species-card.unseen b{color:var(--muted)}.species-card.unseen .nextm{color:var(--muted)}
.species-card.medal3{border-color:rgba(255,215,110,.7);background:radial-gradient(circle at 50% 0,rgba(255,215,110,.16),rgba(255,255,255,.03) 70%)}
.species-card.medal2{border-color:rgba(220,226,230,.5)}.species-card.medal1{border-color:rgba(205,135,80,.5)}
.catch-item{align-items:center}.catch-item .fish-art{width:52px;flex:none}.catch-item>div{flex:1}
.catch-item.rec{border-color:rgba(244,163,64,.55)}.catch-item em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#10222b;background:var(--sa-amber);border-radius:6px;padding:1px 5px;margin-left:4px}
.bprog{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:4px;overflow:hidden}.bprog i{display:block;height:100%;background:var(--sa-amber)}.bnum{font-size:10.5px}
.angler-box .next-unlock{font-weight:600;color:var(--sa-cream)}
.medal-chip{display:inline-flex;align-items:center;gap:5px}.medal-chip .medal{width:15px;height:15px}
@media (max-width:760px){.jsummary{grid-template-columns:repeat(2,1fr)}.species-grid{grid-template-columns:repeat(2,1fr)}}

/* a new angler level: a card in the middle with a little confetti */
.levelup{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(4,18,26,.55);backdrop-filter:blur(3px);animation:luIn .35s ease-out}
.levelup-card{position:relative;z-index:1;width:min(360px,calc(100vw - 32px));text-align:center;padding:22px 20px 18px;border-radius:18px;background:linear-gradient(180deg,#11475f,#0b2f40);border:1px solid rgba(244,163,64,.7);box-shadow:0 20px 60px rgba(0,0,0,.5);animation:luPop .5s cubic-bezier(.2,1.6,.4,1)}
.levelup-card small{letter-spacing:.2em;font-weight:800;color:var(--sa-amber);font-size:11px}
.lv-num{font:800 72px/1 var(--font-cond,inherit);color:var(--sa-cream);text-shadow:0 4px 0 #9c5a14,0 0 30px rgba(244,163,64,.5);margin:6px 0}
.lv-rank{display:block;font-size:18px;margin-bottom:10px}.levelup-card p{margin:8px 0 6px;color:var(--muted);font-size:12.5px}
.levelup-card ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:5px}.levelup-card li{padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.07);font-weight:700;font-size:13.5px}
.levelup-card li small{display:block;letter-spacing:.12em;font-size:9px;color:var(--muted)}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;top:-12px;left:var(--x);width:8px;height:12px;border-radius:2px;background:var(--c);animation:luFall 2.6s var(--d) ease-in forwards}
@keyframes luIn{from{opacity:0}}@keyframes luPop{from{transform:scale(.7);opacity:0}}
@keyframes luFall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){.levelup,.levelup-card,.confetti i{animation:none}.confetti{display:none}}
.jtabs button:focus-visible{outline:2px solid var(--sa-amber);outline-offset:-3px} /* inside: the scrolling tab row would cut it off */
/* Fangbuch: a catch in 3D at its real size */
#journalModal .modal-card{position:relative}
.f3d-btn{flex:none;font:inherit;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--sa-amber);background:rgba(244,163,64,.1);border:1px solid rgba(244,163,64,.45);border-radius:8px;padding:5px 8px;cursor:pointer}
.catch-item[data-f3d-i],.species-card[data-f3d-sp]{cursor:pointer}.catch-item[data-f3d-i]:hover,.species-card[data-f3d-sp]:hover{border-color:rgba(244,163,64,.45)}
.f3d-btn:hover{background:rgba(244,163,64,.22)}.f3d-btn:focus-visible{outline:2px solid var(--sa-amber);outline-offset:2px}
.species-card{position:relative}.species-card .f3d-btn{position:absolute;top:6px;right:6px;padding:3px 6px}
.fish3d{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;border-radius:inherit;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#2a4650,#0e1d24 75%)}
.fish3d canvas{flex:1;width:100%;min-height:0;touch-action:none;cursor:grab}.fish3d canvas:active{cursor:grabbing}
.fish3d-cap{padding:10px 16px 16px;text-align:center;font-size:14px}.fish3d-cap small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.fish3d-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.35);color:inherit;display:grid;place-items:center;cursor:pointer}
.fish3d-close .ic{width:20px;height:20px}
.settings input[type=range]{width:100%;accent-color:var(--sa-amber);margin:8px 0 2px}.settings label output{color:var(--sa-amber);letter-spacing:.06em;margin-left:4px}
/* Profile: the card on the Fangbuch overview; the profile screen itself further down */
.jprofile{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,rgba(244,163,64,.12),rgba(255,255,255,.03) 60%)}
.pf-avatar{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--display,inherit);font-size:22px;font-weight:800;color:#10222b;background:var(--sa-amber)}
.pf-avatar.empty{background:rgba(255,255,255,.08);color:var(--muted)}
.pf-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.pf-text b{font-size:16px}.pf-text small{color:var(--muted);font-size:12px;line-height:1.35}.pf-text em{font-size:12.5px;color:#d7e8e1}
.pf-edit{flex:none;font:inherit;font-size:12px;font-weight:700;color:var(--sa-amber);background:none;border:1px solid rgba(244,163,64,.45);border-radius:8px;padding:6px 10px;cursor:pointer}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-grid .wide{grid-column:1/-1}
.profile-grid label{display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--muted);text-transform:uppercase;min-width:0}
.profile-grid input,.profile-grid select{font:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:inherit;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
.profile-grid input:focus-visible,.profile-grid select:focus-visible{outline:2px solid var(--sa-amber);outline-offset:1px}
.profile-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}.pf-saved{color:#8fd694;font-size:13px}
@media (max-width:520px){.profile-grid{grid-template-columns:1fr}.jprofile{flex-wrap:wrap}.pf-text{flex-basis:calc(100% - 60px)}.pf-edit{flex-basis:100%;padding:9px}}
/* Drill: the side gauge (fish across, rod across) and the two rod buttons */
.side-gauge{margin-top:8px;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;text-align:center}
.side-gauge small{font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--muted);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.sg-cue{min-height:0;font-size:15px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.side-gauge.run .sg-cue{color:#ffb25c;animation:sgPulse .6s ease-in-out infinite alternate}.side-gauge.good .sg-cue{color:#8fd694;animation:none}
.sg-track{position:relative;width:100%;height:30px;border-radius:15px;background:rgba(10,24,30,.6);border:1px solid var(--line);backdrop-filter:blur(6px)}
.side-gauge.run .sg-track{border-color:rgba(255,178,92,.7)}.side-gauge.good .sg-track{border-color:rgba(143,214,148,.7)}
.sg-mid{position:absolute;left:50%;top:5px;bottom:5px;width:2px;background:rgba(255,255,255,.2)}
.sg-fish{position:absolute;top:50%;transform:translate(-50%,-50%);color:#fff;transition:left .12s linear}.sg-fish .ic{width:24px;height:24px}
.sg-rod{position:absolute;bottom:-5px;width:4px;height:16px;border-radius:2px;background:var(--sa-amber);transform:translateX(-50%);transition:left .1s linear}
.side-btn{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;width:84px;padding:12px 6px;border-radius:18px;border:1px solid var(--line);background:rgba(10,24,30,.55);color:#e6eef5;font:inherit;font-size:12.5px;font-weight:800;line-height:1.15;backdrop-filter:blur(8px);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.side-btn.left{left:16px}.side-btn.right{right:16px}.side-btn .ic{width:28px;height:28px}.side-btn small{font-size:10px;color:var(--muted);font-weight:700}
.side-btn.held{background:rgba(244,163,64,.35)}
.side-btn.want{border-color:#ffb25c;box-shadow:0 0 0 3px rgba(255,178,92,.35);animation:sgPulse .5s ease-in-out infinite alternate}
.side-btn.good{border-color:#8fd694;box-shadow:0 0 0 3px rgba(143,214,148,.35)}
.side-btn.wrong{border-color:#ff7a5c}
@keyframes sgPulse{from{opacity:1}to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.side-gauge.run .sg-cue,.side-btn.want{animation:none}}
@media (max-width:760px){.side-btn{width:70px;padding:10px 4px;top:58%}.side-btn small{display:none}.side-btn.left{left:8px}.side-btn.right{right:8px}}
/* phones held sideways: the screen is too low for the rod buttons between the fight panel and the thumbs; they sit in the
   bottom row beside them, left of the line numbers and right of them */
@media (max-height:500px) and (orientation:landscape){.fight-hud .side-btn{top:auto;bottom:10px;transform:none;width:70px;padding:8px 4px}.fight-hud .side-btn small{display:none}.fight-hud .side-btn.left{left:160px}.fight-hud .side-btn.right{right:134px}}
.sg-fish.flip .ic{transform:scaleX(-1)}.side-gauge:not(.run) .sg-cue:empty{display:none}
.rank-test{margin:10px 0 2px;padding:9px 12px;border-radius:10px;border:1px dashed rgba(244,163,64,.5);background:rgba(244,163,64,.06)}
.rank-test small{display:block;font-size:9.5px;letter-spacing:.14em;font-weight:800;color:var(--sa-amber);margin-bottom:5px}
.rank-test ul{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:12.5px}.rank-test li{display:flex;gap:7px;align-items:baseline}.rank-test li b{margin-left:auto;font-weight:700}
.rank-test li i{font-style:normal;color:var(--muted)}.rank-test li.done{color:var(--muted)}.rank-test li.done i{color:#8fd694}
.fps-meter{position:fixed;left:calc(8px + env(safe-area-inset-left,0));bottom:calc(8px + env(safe-area-inset-bottom,0));z-index:60;font:600 11px/1.2 ui-monospace,monospace;color:#d7f5e0;background:rgba(0,0,0,.55);border-radius:6px;padding:4px 7px;pointer-events:none}
/* In the game nothing over the 3D view blurs what is behind it: a backdrop blur has to be worked out anew in every
   frame over the moving picture, and with the big fishing panel, the hint box and the buttons it cost some GPUs
   most of their frame time in the fishing view (the water there moved in jumps). A little more opaque instead. */
.icon-btn,.chips span,.coach,.sonar-panel,.stat,.minimap-wrap,.zone-card,.fish-panel,.bite-alert,.fight-top,.thumb .drag,.timelapse-pill,.inbox-pill,.toast,.troll-card,.tasks-card,.tutorial,.cam-pad button,.sg-track,.side-btn{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.fish-panel,.coach,.zone-card,.fight-top,.troll-card,.tasks-card,.tutorial,.sonar-panel,.minimap-wrap{background-color:rgba(9,42,57,.86)}
.icon-btn,.chips span,.stat,.cam-pad button,.side-btn,.inbox-pill,.timelapse-pill,.thumb .drag{background-color:rgba(9,42,57,.8)}
/* phones held sideways: the fishing buttons under the top bar instead of over it, the guide box under them */
@media (max-height:500px) and (orientation:landscape){
  #hud[data-mode=fish] .fish-chips{top:calc(max(8px,env(safe-area-inset-top)) + 44px);right:auto}
  #hud[data-mode=fish] .fish-chips .icon-btn{min-height:34px;flex-direction:row;gap:4px;padding:0 8px}
  #hud[data-mode=fish] .coach{top:calc(max(8px,env(safe-area-inset-top)) + 86px)}
}

/* sonar title: the water temperature beside it without the title's wide letter spacing (it ran into the title) */
.sonar-panel .panel-title{flex-wrap:wrap;gap:0 6px}.sonar-panel .panel-title small{letter-spacing:.02em;white-space:nowrap}
/* title screen: the game also runs as an app (phones and tablets, not yet installed) */
.install-hint{display:flex;align-items:center;gap:10px;margin-top:14px;max-width:370px;padding:10px 8px 10px 12px;border-radius:14px;border:1px solid rgba(232,170,63,.55);background:rgba(8,37,52,.72);color:var(--sa-cream);backdrop-filter:blur(7px);text-align:left}
.install-hint.hidden{display:none}
.spende-info{max-width:370px;margin-top:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(248,244,232,.25);background:rgba(8,37,52,.72);color:var(--sa-cream);font-size:13px;line-height:1.5;text-align:left;backdrop-filter:blur(7px)}
.spende-info.hidden{display:none}.spende-info p{margin:0 0 10px}
.spende-link{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:var(--sa-amber);color:#082534;font-weight:700;font-size:14px;text-decoration:none}.spende-link .ic{width:18px;height:18px}
#spendeSet .note{margin:0 0 8px}
.install-hint>.ic{flex:none;width:26px;height:26px;color:var(--sa-amber)}
.install-hint div{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.3}
.install-hint b{font-size:14px}
.install-hint .btn{flex:none;padding:8px 12px;font-size:13px}
.install-hint .close{position:static;flex:none;width:30px;height:30px;padding:0;border:0;background:none;color:inherit;opacity:.75}
.version-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0 4px;font-size:13px}
@media (max-width:760px){.install-hint{margin-left:auto;margin-right:auto}}
/* phones held sideways and small phones: no room for the hint in the column (the whole start screen shrank for it); "Als App"
   by the settings does the same. The line above the name would run under those buttons */
@media (max-height:500px) and (orientation:landscape),(max-height:700px) and (orientation:portrait){#title .install-hint{display:none}}
@media (max-height:500px) and (max-width:960px) and (orientation:landscape){.title .eyebrow{display:none}}
.check.consent{display:block;margin:10px 0 4px;font-size:12.5px;line-height:1.4}
.check.consent a{color:var(--sa-amber)}

.lake-option .partner-line{color:#FFCB81;font-size:12px;margin-top:3px}
.region-h{font:700 13px/1 var(--font-cond,'Barlow Condensed'),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sa-amber);margin:10px 2px 0}
.partner-note b{color:var(--sa-cream)}.partner-note a{color:var(--sa-amber)}
/* Wochenfisch and Bestenliste */
.title-week{display:block;margin-top:6px;font-size:13px;font-family:var(--sans);color:#FFCB81}
.catch-badges .week-chip{border-color:var(--sa-amber);color:#FFCB81}
.board-list{list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-direction:column;gap:4px}
.board-list li{display:grid;grid-template-columns:2em 1fr auto;align-items:baseline;gap:2px 8px;padding:7px 10px;border-radius:10px;background:rgba(248,244,232,.05)}
.board-list li i{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.board-list li b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list li small{grid-column:2;color:var(--muted);font-size:12px}
.board-list li span{grid-column:3;grid-row:1;font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--sa-cream)}
.board-sp{margin:10px 0 2px;font-size:14px;color:var(--sa-cream)}
.profile-form>small.look-head{margin-top:16px}
.look-note{font-size:12px;color:var(--muted);margin:8px 0 0}
.photo-card{width:min(560px,100%)}
.photo-card .seg{max-width:220px;margin:8px auto 2px}
.photo-img{display:block;width:100%;height:auto;max-height:62vh;object-fit:contain;border-radius:10px;margin:10px 0 4px;background:#0003}
/* phones held sideways: the picture on the left at full height, title, format and buttons beside it */
@media (max-height:500px) and (orientation:landscape){.photo-card{width:min(760px,100%);display:grid;grid-template-columns:auto minmax(220px,1fr);grid-template-rows:auto auto auto 1fr;column-gap:18px;padding:14px 16px}.photo-card>.close{position:absolute;top:12px;right:12px;margin:0}.photo-card>:not(.close){grid-column:2;align-self:start}.photo-card .photo-img{grid-column:1;grid-row:1 / span 4;width:auto;max-width:56vw;max-height:calc(100dvh - 2 * max(16px,env(safe-area-inset-bottom)) - 30px);margin:0}.photo-card h2{margin:0 40px 6px 0}.photo-card .seg{margin:4px 0 10px}.photo-card .modal-actions{flex-wrap:wrap;justify-content:flex-start}}
.legend-box{border:1px solid rgba(201,162,39,.45);border-radius:12px;padding:12px 14px;margin:12px 0;background:rgba(201,162,39,.06)}
.legend-box>small{display:block;font-size:10px;letter-spacing:.14em;font-weight:800;color:#e3c565;margin-bottom:8px}
.legend-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.legend-list li{display:grid;grid-template-columns:28px 1fr;gap:2px 8px;align-items:start;font-size:13px;line-height:1.4}
.legend-list li>i{font-style:normal;font-size:18px;grid-row:span 2;text-align:center;color:#e3c565}.legend-list li.rumour>i{color:var(--muted)}
.legend-list li b{font-size:14px}.legend-list li small{color:var(--muted)}.legend-list li.caught b{color:#e3c565}
.legend-list li.resting b,.legend-list li.back b{color:#e3c565}.legend-list li.resting>i{opacity:.55}
.legend-waters{margin:0 0 10px;font-size:12px;color:var(--muted)}.legend-waters .done{color:#e3c565;font-weight:700}
.catch-badges .legend-chip{border-color:#c9a227;background:rgba(201,162,39,.22);color:#f3d77a}
.pf-pass{margin-left:6px}

/* Bigger dialogs: the Fangbuch and the Einstellungen get room, on phones they fill the screen */
.journal-card{width:min(980px,100%);min-height:min(720px,calc(100dvh - 32px))}
.journal-card .catch-list{max-height:none}
.settings-card{width:min(760px,100%);min-height:min(560px,calc(100dvh - 32px))}
.settings-card h2{margin-bottom:10px}
.settings-card section>.settings,.settings-card section>.msg-list{margin-top:4px}
.set-intro{margin:0 0 12px;color:var(--muted);font-size:13px}
.set-hint{font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted);line-height:1.35}
.set-link{align-self:flex-start;font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;padding:2px 0}
.settings-card .msg-quick{margin:14px 0 6px}
/* Title: the profile comes first; without one it is the big amber invitation */
.profile-cta{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:9px 16px 9px 10px;border-radius:14px;text-align:left;color:var(--sa-cream);background:rgba(8,37,52,.55);border:1px solid rgba(248,244,232,.28);backdrop-filter:blur(7px);transition:background .17s ease,transform .17s ease;box-shadow:0 4px 14px rgba(7,28,40,.11)}
.profile-cta:hover{background:rgba(9,42,57,.82);transform:translateY(-1px)}
.profile-cta .tail{margin-left:auto;font-size:24px;line-height:1;opacity:.67}
.pc-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:800 19px var(--font-brand);background:var(--sa-amber);color:var(--sa-deep)}
.pc-avatar .ic{width:22px;height:22px}
.pc-text{display:flex;flex-direction:column;min-width:0}.pc-text b{font-size:16px;font-weight:700;letter-spacing:-.015em}.pc-text small{font-size:12px;color:rgba(248,244,232,.75);line-height:1.3}
.profile-cta:focus-visible{outline:3px solid var(--sa-amber);outline-offset:4px}
@media (max-height:520px) and (orientation:landscape){.profile-cta{min-height:44px;padding:4px 12px 4px 6px}.pc-text small{display:none}.pc-avatar{width:32px;height:32px}}
/* The profile screen: the angler on a stage on the left, who he is and how he looks on the right */
#profileModal{place-items:center}
.profile-card{width:min(1180px,100%);height:min(820px,calc(100dvh - 32px));padding:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);overflow:hidden}
.profile-card>.close{position:absolute;float:none;margin:0;top:14px;right:14px;z-index:4}
.profile-stage{position:relative;min-height:0;background:radial-gradient(ellipse at 50% 35%,#24505c,#0b1e26 78%);border-right:1px solid var(--line)}
.profile-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}.profile-stage canvas:active{cursor:grabbing}
.stage-top{position:absolute;top:16px;left:18px;pointer-events:none}
.stage-wait{position:absolute;inset:0;margin:0;display:grid;place-items:center;color:var(--muted);font-size:14px;pointer-events:none;animation:stageWait 1.6s ease-in-out infinite alternate}
@keyframes stageWait{from{opacity:.45}to{opacity:1}}
.stage-rank{display:inline-block;padding:5px 11px;border-radius:999px;background:rgba(9,42,57,.75);border:1px solid rgba(244,163,64,.5);color:var(--sa-amber);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.stage-name{position:absolute;left:18px;right:18px;bottom:74px;display:flex;flex-direction:column;gap:2px;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.stage-name b{font:800 30px/1.05 var(--font-brand);letter-spacing:-.03em}.stage-name small{font-size:12.5px;color:#d5e3df;max-width:40em}
.figure-switch{position:absolute;left:18px;bottom:22px;display:flex;padding:3px;border-radius:12px;background:rgba(4,20,27,.7);border:1px solid var(--line)}
.figure-switch button{border:0;border-radius:9px;padding:8px 14px;background:none;color:var(--ink);font-weight:700;font-size:13px}
.figure-switch button[aria-checked="true"]{background:var(--sa-amber);color:var(--sa-deep)}
.stage-hint{position:absolute;right:18px;bottom:26px;margin:0;font-size:11px;color:rgba(220,235,230,.6);pointer-events:none;max-width:45%;text-align:right}
.profile-side{display:flex;flex-direction:column;min-height:0;padding:22px 24px 0}
.profile-side h2{margin:6px 48px 12px 0}
.profile-panes{flex:1;min-height:0;overflow:auto;padding:4px 2px 12px;margin:0 -2px}
.pf-h{font-size:10.5px;letter-spacing:.14em;font-weight:800;color:var(--muted);text-transform:uppercase;margin:16px 0 8px}
.pf-h small{letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink);font-size:12px;margin-left:6px}
.profile-panes section>.profile-grid:first-child{margin-top:2px}.profile-panes section>.profile-grid:last-child{margin-top:16px}
.profile-grid label.check{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;color:var(--ink)}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px}
.pf-chips button{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-weight:600;font-size:13px}
.pf-chips button:hover:not(:disabled){border-color:rgba(244,163,64,.6)}
.pf-chips button[aria-checked="true"]{background:rgba(244,163,64,.2);border-color:var(--sa-amber);color:var(--sa-cream)}
.pf-chips button:disabled{opacity:.45;cursor:not-allowed}.pf-chips .ic{width:13px;height:13px}
.fish-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.fish-pick button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-size:12px;font-weight:600}
.fish-pick button svg{width:72px;height:30px}
.fish-pick button[aria-checked="true"]{background:rgba(244,163,64,.2);border-color:var(--sa-amber)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{position:relative;width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:var(--c);padding:0;display:grid;place-items:center;color:#fff}
.swatch.original{background:conic-gradient(#3d5a80 0 25%,#55603a 0 50%,#c8b48a 0 75%,#3d5a80 0)}
.swatch[aria-checked="true"]{border-color:var(--sa-cream);box-shadow:0 0 0 3px var(--sa-amber)}
.swatch.locked,.swatch:disabled{opacity:.45;cursor:not-allowed}.swatch .ic{width:14px;height:14px;filter:drop-shadow(0 1px 2px #000)}
.look-row.off{opacity:.45}
.look-note{font-size:12px;color:var(--muted);margin:16px 0 0}
.profile-side .profile-actions{margin:0 -24px;padding:12px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel-solid);justify-content:flex-end}
.profile-side .profile-actions .btn{min-width:150px}
.profile-side .profile-actions .pf-saved{margin-right:auto}
@media (max-width:820px){
  #profileModal{padding:0}
  .profile-card{height:100dvh;border-radius:0;border:0;grid-template-columns:1fr;grid-template-rows:minmax(200px,34dvh) minmax(0,1fr)}
  .profile-stage{border-right:0;border-bottom:1px solid var(--line)}
  .stage-name{bottom:62px}.stage-name b{font-size:22px}.stage-name small{display:none}
  .figure-switch{bottom:12px;left:12px}.stage-hint{display:none}.stage-top{top:12px;left:12px}
  .profile-card>.close{top:max(10px,env(safe-area-inset-top));right:10px;background:rgba(0,0,0,.4)}
  .profile-side{padding:14px 16px 0}.profile-side h2{font-size:22px;margin:4px 0 8px}
  .profile-side .profile-actions{margin:0 -16px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .journal-card,.settings-card{min-height:calc(100dvh - 16px)}
}
@media (max-height:520px) and (orientation:landscape){
  .profile-card{height:100dvh;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:none}
  .profile-stage{border-right:1px solid var(--line);border-bottom:0}
}

/* The start screen fits the screen, it never scrolls: the water in the Revier button, the profile in one line once
   there is one, the Wochenfisch only where there is room; fitTitle() (main.js) shrinks what is still too tall */
.game-button .gb-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.game-button .gb-text small{font-family:var(--sans);font-size:12px;font-weight:550;letter-spacing:0;text-transform:none;opacity:.75;margin-top:2px}
.hero-actions .profile-cta{min-height:52px;padding:6px 16px 6px 8px}
.hero-actions .pc-avatar{width:36px;height:36px;font-size:17px}
.hero-actions .pc-text small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:760px){.title-week{display:none}}
.title-foot .link-btn{white-space:nowrap}
#loadState:empty{display:none}
@media (max-width:680px){
  /* the legal links in one short row: they are rarely needed, the screen belongs to the water */
  .foot-right{flex-wrap:wrap;justify-content:center;gap:0 8px;letter-spacing:0}
  .title-foot .link-btn{font-size:10px;min-height:30px;padding:0 1px;display:inline-flex;align-items:center}
  #appVersion{display:none}
}
@media (max-height:520px) and (orientation:landscape){.game-button .gb-text small{display:none}}

/* Dialogs with tabs: the head and the tabs stay, only the page under them scrolls (if it has to at all) */
.journal-card,.settings-card{display:flex;flex-direction:column;overflow:hidden}
.journal-card>.close,.settings-card>.close{position:absolute;float:none;margin:0;top:14px;right:14px}
.journal-card>[data-jpane],.settings-card>[data-spane]{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px 4px}
.journal-card h2,.settings-card h2{padding-right:44px}
/* the Fangbuch overview in two columns where there is room: profile across, the angler left, the numbers right */
@media (min-width:900px){
  .journal-card>[data-jpane="overview"]:not(.hidden){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 14px;align-content:start}
  [data-jpane="overview"]>.jprofile{grid-column:1/-1}
  [data-jpane="overview"]>#anglerBox{grid-column:1;grid-row:2/span 3;align-self:start}
  [data-jpane="overview"]>.jsummary,[data-jpane="overview"]>.jgoal,[data-jpane="overview"]>.stats{grid-column:2}
  [data-jpane="overview"]>.jsummary{grid-template-columns:repeat(2,1fr);margin-top:10px}
}
/* tab rows wrap instead of hiding tabs past the screen edge (there is no scrollbar to show they are there) */
.jtabs{flex-wrap:wrap;overflow:visible}
.jtabs button{flex:1 1 auto}
/* Wissen: wider where there is room (the fish in more columns), the season tabs and the title stay, the page scrolls */
.wissen-card{width:min(1060px,100%);display:flex;flex-direction:column;overflow:hidden}
.wissen-card>.close{position:absolute;float:none;margin:0;top:14px;right:14px}
.wissen-card h2{padding-right:44px}
#wissenBody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px 4px}
@media (min-width:761px){.wissen-fish{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
/* Catch card on any low screen (a 720p laptop too): two columns, so its buttons stay on the screen without scrolling */
@media (max-height:820px) and (min-width:600px){
  .catch-card{width:min(680px,100%);display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start}
  .catch-card>*{grid-column:1}
  .catch-card .trophy{grid-column:2;grid-row:1 / span 3;margin:0}.catch-card .trophy canvas{height:170px}
  .catch-card .catch-line{grid-column:2;grid-row:4;margin:6px 0}
  .catch-card .modal-actions{grid-column:2;grid-row:5 / span 3;align-self:start}
}
@media (max-height:500px) and (orientation:landscape){.catch-card .catch-grid{grid-template-columns:repeat(3,1fr)}.catch-card .trophy canvas{height:120px}.catch-card .catch-line{display:none}.catch-card .catch-badges{grid-column:2;grid-row:4;margin:6px 0 0}.catch-card .catch-size b{font-size:38px}.catch-card{padding-top:8px;padding-bottom:8px}}
/* the fishing panel on a computer: a little wider, the lures five abreast and down to just above the camera buttons */
@media (min-width:1000px){
  .fish-panel{width:340px;max-height:calc(100% - 128px)}
  .lure-group .lure-grid{grid-template-columns:repeat(5,1fr)}
}
/* the start button first, always ("Jetzt angeln" on the very first start); the profile follows */
.hero-actions #startBtn{order:-1}
.first-run .profile-cta .pc-text small{display:none}
/* the lessons after the first round: the same card, a little smaller and quieter; the button to try glows softly */
.tutorial.lesson{border-color:rgba(244,163,64,.55)}.tutorial.lesson .tut-head b{font-size:16px}.tutorial.lesson .link-btn+.link-btn{margin-left:2px}
#hud[data-mode=drive] .tutorial.lesson{top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px))}
@media (max-height:500px) and (orientation:landscape){#hud[data-mode=drive] .tutorial.lesson{bottom:auto;top:96px;width:min(420px,calc(100% - 280px))}}
.lesson-focus{animation:tutFocus 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.lesson-focus{animation:none;box-shadow:0 0 0 2px var(--sa-amber)}}
/* phones across, first round in the fight: the card goes down between Pumpen and Kurbeln, the fight panel stays readable */
@media (max-height:500px) and (orientation:landscape){#hud.tut[data-mode=fight] .tutorial{top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:min(440px,calc(100% - 300px))}}
@media (max-height:500px) and (orientation:landscape){#hud[data-mode=fish] .tutorial.lesson{top:94px;width:min(440px,calc(100% - 330px));left:12px;transform:none}} /* under the fishing chips, beside the lure panel */
/* Dein Weg (Fangbuch): the six ranks as stops on a line; done ones ticked, the current one in amber */
.rank-path{margin-top:12px}.rank-path>small{letter-spacing:.14em;font-weight:800;color:var(--muted);font-size:10.5px}
.rank-path ol{list-style:none;margin:8px 0 6px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;position:relative}
.rank-path ol::before{content:"";position:absolute;left:8%;right:8%;top:9px;height:2px;background:rgba(255,255,255,.15)}
.rank-path li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:0}
.rank-path li i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;background:#0b2f40;border:2px solid rgba(255,255,255,.25);z-index:1}
.rank-path li b{font-size:11px;line-height:1.15;font-weight:700;overflow-wrap:anywhere}.rank-path li span{font-size:10px;color:var(--muted)}
.rank-path li.done i{background:#8fd694;border-color:#8fd694;color:#0b2f40}.rank-path li.ahead b{opacity:.6}
.rank-path li.now i{background:var(--sa-amber);border-color:#FFD08F;box-shadow:0 0 0 4px rgba(244,163,64,.25)}.rank-path li.now b{color:#FFCB81}
.rank-path p{margin:4px 0 0;font-size:12.5px;color:var(--sa-cream)}
.rank-hint{margin:8px 0 0;font-size:12.5px;line-height:1.4;color:#FFCB81}
.tutorial.lesson.rank{border-color:#8fd3e8}.tutorial.lesson.rank .tut-head small{color:#8fd3e8}
.levelup-card .lv-try{color:var(--sa-cream);font-weight:600}
/* the first round's fight: only what the first fish needs. Its state line, the strength bar and the ring with
   "Kurbeln"; the net button only once he can be netted. Tension bar, side gauge, rod buttons and the brake come later */
#hud.tut #fightRod,#hud.tut .fight-hud .tension,#hud.tut .side-gauge,#hud.tut .side-btn,#hud.tut .fight-hud .drag,#hud.tut .ring-label,#hud.tut .fight-hud .keys,#hud.tut .fight-line .reserve,#hud.tut #pumpBtn:not(.land){display:none!important}
/* the tag on the button to press: Halten or Tippen, readable at a glance */
.tut-focus[data-tut-tag]::after{content:attr(data-tut-tag);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:3px 10px;border-radius:99px;background:var(--sa-amber);color:#10222b;font:800 12px/1.3 var(--font-cond,sans-serif);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.3);animation:tutBob 1.1s ease-in-out infinite}
@keyframes tutBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
@media (prefers-reduced-motion:reduce){.tut-focus[data-tut-tag]::after{animation:none}}
.action-bar .big.tut-focus{overflow:visible} /* the tag sits above the button */
/* while the water loads: one line under the buttons, what Jens is doing or a fact about the water */
.load-tip{max-width:420px;margin:10px 0 0;font:italic 500 14px/1.4 var(--font-body,Inter,sans-serif);color:var(--sa-cream);opacity:.9;min-height:2.8em;animation:tipIn .5s ease-out}
.load-tip b{display:block;font-style:normal;font-weight:700;color:var(--sa-amber);font-variant-numeric:tabular-nums} /* the stage and the time left above the sentence */
/* while the bar fills: pictures from the game, cross-faded, each with a line; the install hint makes room for them */
.load-pic{position:relative;width:100%;max-width:420px;margin:10px 0 0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(244,163,64,.45);background:#0b2d3c;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:tipIn .5s ease-out}
.load-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.load-pic img.on{opacity:1}
.load-pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;font:600 13.5px/1.3 var(--font-body,Inter,sans-serif);color:#fff;background:linear-gradient(180deg,rgba(5,20,26,0),rgba(5,20,26,.82));text-shadow:0 1px 2px rgba(0,0,0,.6)}
#title.loading .install-hint,#title.loading .load-tip span{display:none} /* the picture carries the sentences; the hint comes back after */
@media (max-width:760px){.load-pic{aspect-ratio:2/1}} /* a phone upright: lower, so the rest of the screen shrinks less */
@media (min-width:900px) and (min-height:600px) and (orientation:landscape){.load-pic{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 56px);width:min(460px,38vw);margin:0}} /* tablets and desktops: beside the column, where the install hint stands, so the column keeps its size */
@media (max-height:500px) and (orientation:landscape){.load-pic{display:none}#title.loading .load-tip span{display:inline}} /* no room sideways on a phone */
@keyframes tipIn{from{opacity:0;transform:translateY(4px)}to{opacity:.9;transform:none}}
@media (max-height:520px) and (orientation:landscape){.load-tip{margin-top:6px;font-size:12.5px}}
/* windows from 761 to 950 px (a tablet upright): the top buttons with their icons only, so the row fits beside the
   chips instead of running off the right edge (the names stay as tooltips) */
@media (min-width:761px) and (max-width:950px){.top-actions .icon-btn span{display:none}}

/* wading: a stick to walk in the river, any direction (riverrigs.js) */
.wade-pad{position:absolute;left:18px;bottom:calc(270px + env(safe-area-inset-bottom));width:116px;height:116px;border-radius:50%;background:radial-gradient(circle,rgba(18,40,58,.35) 0 55%,rgba(18,40,58,.6) 56% 100%);border:2px solid rgba(240,206,149,.55);touch-action:none;pointer-events:auto;--kx:0px;--ky:0px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.wade-knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(240,206,149,.9);box-shadow:0 2px 8px rgba(0,0,0,.35);transform:translate(var(--kx),var(--ky));pointer-events:none}
@media (min-width:900px) and (pointer:fine){.wade-pad{bottom:150px}}

/* the top bars while fishing: out of the way (by hand, or after the cast), back with the small arrow (main.js) */
.topbar,.fish-chips,.inbox-pill{transition:opacity .25s,transform .25s}
#hud[data-mode=fish].bars-off .topbar,#hud[data-mode=fish].bars-off .fish-chips,body.bars-off .inbox-pill{opacity:0;transform:translateY(-14px);pointer-events:none}
.bars-show{display:none;position:absolute;right:max(10px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)));z-index:5;width:40px;height:30px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:inherit;align-items:center;justify-content:center;pointer-events:auto;opacity:.85}
#hud[data-mode=fish].bars-off .bars-show{display:flex}
.bars-show .ic{width:18px;height:18px}
.set-btns{display:flex;gap:6px;flex-wrap:wrap}.set-btns .btn{flex:1 1 auto} /* Optionen › Spiel › Konto */
/* the lesson card while driving on touch screens: up top, never over the steering pads (on a phone it hid ▲ ◀ ▶) */
@media (pointer:coarse) and (min-height:501px){#hud[data-mode=drive] .tutorial.lesson{top:118px;bottom:auto;width:min(460px,calc(100% - 360px));left:12px;transform:none}} /* at the left, under the travel chips: the middle of the picture is the angler's */
@media (pointer:coarse) and (max-width:760px) and (min-height:501px){#hud[data-mode=drive] .tutorial.lesson{top:172px;left:10px;right:10px;width:auto;transform:none}} /* upright: the whole width, under the map button (beside it the title had no room) */

/* PC with a mouse: in the fight the four buttons (Pumpen/Keschern, Rute links, Rute rechts, Kurbeln) sit together
   at the bottom middle instead of in the far corners, so the mouse never has to cross the whole screen */
@media (pointer:fine) and (min-width:761px) and (min-height:501px){
  .fight-hud .thumb{bottom:66px}.fight-hud .thumb-left{left:calc(50% - 250px)}.fight-hud .thumb-right{right:calc(50% - 250px)}
  .fight-hud .side-btn{top:auto;bottom:66px;transform:none}.fight-hud .side-btn.left{left:calc(50% - 92px)}.fight-hud .side-btn.right{right:calc(50% - 92px)}
  .fight-hud .keys{bottom:8px;max-width:min(1000px,calc(100% - 40px))}
}
/* the first round on a phone: the card leaves the sound button free in the fight; the catch card speaks for itself
   (the tag on "Zurücksetzen" stays), and the tag sits on the button's edge, clear of the medals above it */
@media (max-width:760px){#hud.tut[data-mode=fight] .tutorial{left:auto;right:12px;transform:none;width:calc(100% - 78px)}}
@media (max-width:760px) and (orientation:portrait){#hud.tut[data-mode=fight] .fight-top{top:134px}} /* the card takes three lines there: the tension strip just below it */
body:has(#catchModal:not(.hidden)) #tutorial{display:none}
#catchOk.tut-focus[data-tut-tag]::after{bottom:calc(100% - 10px)}
/* in the fight the ring's colour is the message (green: reel, red: let go): no amber glow round it */
#fightReelBtn.tut-focus{animation:none;box-shadow:0 0 0 3px rgba(248,244,232,.55)}
/* short phones: the start screen scrolls, so the legal links at the foot stay reachable (the art stays put) */
@media (max-height:700px){.title{overflow-y:auto;-webkit-overflow-scrolling:touch}.title-bg,.title::before{position:fixed}}
.levelup-card li.lv-elsewhere{background:none;font-weight:600;font-size:12.5px;color:var(--muted)}
/* phones: a long label (Ausblenden, Losfahren) breaks onto a second line instead of being cut to "Ausbl…" */
@media (max-width:760px){.fish-chips .icon-btn span{white-space:normal;overflow:visible;text-overflow:clip;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;font-size:9px;line-height:1.05;text-align:center}}
/* phones held sideways: the sonar under the row of buttons and above the cast/reel bar, not behind it */
@media (max-height:500px) and (orientation:landscape){.sonar-panel{top:calc(max(8px,env(safe-area-inset-top)) + 84px);bottom:auto;width:min(260px,36vw);padding:6px}#sonarCanvas{height:max(70px,calc(100vh - 250px))}}
/* Bestenliste: the Wochenfisch as a card on top, the own row marked */
.wf-card{margin:4px 0 10px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(244,163,64,.18),rgba(244,163,64,.04));border:1px solid rgba(244,163,64,.45)}
.wf-card>small{display:block;font:800 11px/1.3 var(--font-cond,sans-serif);letter-spacing:.1em;color:#FFCB81}
.wf-card>b{display:block;font-family:var(--font-display,inherit);font-size:24px;line-height:1.15;margin-top:2px}
.wf-card>span{display:block;color:var(--muted);font-size:13px}
.wf-card .wf-you{margin:8px 0 0;font-size:14px}.wf-card .wf-where{margin:6px 0 0;font-size:12.5px;color:#FFCB81}
.board-list li.me{background:rgba(244,163,64,.18);outline:1px solid rgba(244,163,64,.5)}
.wf-last{margin:0 0 12px;font-size:13px;color:var(--sa-cream)}.wf-last small{display:block;font:800 10.5px/1.4 var(--font-cond,sans-serif);letter-spacing:.1em;color:var(--muted)}
/* the strike button runs down: the bar under it is the time left to strike, red at the end */
.bite-btn{position:relative;overflow:hidden}
.bite-btn::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:calc(var(--left,1) * 100%);background:#ffe08a;transition:width .08s linear}
.bite-alert.late .bite-btn::after{background:#ff5a3c}.bite-alert.late .bite-signal{animation-duration:.12s}
/* the line at a glance: distance, depth and water, also with the bars hidden */
.line-hud{position:absolute;z-index:11;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:14px;background:rgba(9,42,57,.78);border:1px solid rgba(248,244,232,.18);pointer-events:none;text-align:right}
.line-hud span{display:flex;flex-direction:column;line-height:1.05}
.line-hud small{font:800 9.5px/1.2 var(--font-cond,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.line-hud b{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:20px;color:var(--sa-cream)}
.line-hud span:first-child b{font-size:24px;color:#FFCB81}
#hud[data-mode=drive] .line-hud,#hud[data-mode=catch] .line-hud{display:none}
@media (max-height:500px) and (orientation:landscape){.line-hud{top:auto;bottom:96px;flex-direction:row;gap:12px;padding:6px 10px}.line-hud b{font-size:17px}.line-hud span:first-child b{font-size:19px}}
/* the bite has the stage to itself; in the fight the numbers sit low in the middle, between pump and reel */
body:has(#biteAlert:not(.hidden)) .line-hud{display:none}
/* phones upright, in the fight: one row under the fight panel, where the sky is free */
#hud[data-mode=fight] .line-hud{top:300px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);flex-direction:row;gap:14px;text-align:center}
@media (max-width:760px) and (min-height:501px){.fight-hud .side-btn{top:362px;transform:none}} /* the rod buttons just under that row (on a narrow phone they ran into it) */
/* phones sideways, in the fight: low in the middle, between pump and reel */
@media (max-height:500px) and (orientation:landscape){#hud[data-mode=fight] .line-hud{top:auto;bottom:10px}}
/* big screens: on the left in the middle, over open water, clear of the method panel and the fight buttons */
@media (min-width:761px) and (min-height:501px){.line-hud,#hud[data-mode=fight] .line-hud{left:16px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;text-align:left}}
.line-hud b{white-space:nowrap}
@media (min-width:761px) and (min-height:501px){.line-hud{padding:10px 14px}.line-hud b{font-size:24px}.line-hud span:first-child b{font-size:30px}.line-hud small{font-size:10.5px}}

/* Forellenteig */
.seg.dough-grid{display:grid;grid-template-columns:repeat(3,1fr)}.seg.dough-grid button{min-width:0;padding-left:4px;padding-right:4px}.dough-glitter{margin-top:6px;font-size:12px}
/* Tablets and small laptops (iPad across): the bars as icons only, so everything fits on one line and the picture stays
   free (the names are in the tooltips); the tasks keep their count. In the fight the line readout goes up under the
   bar, where nothing else is then, instead of lying on the left rod button. */
@media (min-width:761px) and (max-width:1300px){
  .top-actions .icon-btn span{display:none}
  .top-actions .icon-btn{min-width:44px;justify-content:center}
  #hud .fish-chips .icon-btn:not(.tasks-btn) span{display:none}
  #hud .fish-chips .icon-btn{min-width:44px;justify-content:center}
}
@media (min-width:761px) and (min-height:501px){#hud[data-mode=fight] .line-hud{top:70px;transform:none}}
/* Tablets (iPad): with the sonar open bottom left, the buttons and the zone card move right of it (the buttons narrow
   a little: four with the Hegene) and the steering buttons go up above it, instead of lying on it */
@media (min-width:761px) and (max-width:1400px) and (min-height:501px){
  #hud:has(#sonarPanel:not(.hidden)) .action-bar{left:calc(32px + min(300px,42vw));right:16px;width:auto;transform:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,140px);justify-content:center}
  #hud:has(#sonarPanel:not(.hidden)) .action-bar .big{min-width:0}
  #hud:has(#sonarPanel:not(.hidden)) .zone-card{left:calc(32px + min(300px,42vw));transform:none;width:min(600px,calc(100% - 48px - min(300px,42vw)))}
}
@media (min-width:761px) and (min-height:501px){#hud:has(#sonarPanel:not(.hidden)) .pad-left{bottom:240px}}
/* shorter tablets (iPad 1024 × 768 across): a smaller minimap without the hint, clear of the gas buttons under it */
@media (min-width:761px) and (min-height:501px) and (max-height:800px){.mini-hint{display:none}#minimap{height:210px}}
/* Angelshop: rods, floats and hooks for experience points, each drawn on its shelf */
.shop-card{width:min(880px,100%)}
.shop-card h2{padding-right:44px}
.shop-wallet{display:flex;align-items:center;gap:14px;margin:6px 0 12px;padding:12px 16px;border-radius:14px;background:linear-gradient(120deg,rgba(244,163,64,.22),rgba(244,163,64,.06) 60%);border:1px solid rgba(244,163,64,.45)}
.sw-star{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd48a,#F4A340 55%,#b86f1c);color:#3b2207;font-size:24px;box-shadow:0 0 18px rgba(244,163,64,.45)}
.sw-num{display:flex;flex-direction:column;line-height:1.05}
.sw-num b{font-family:var(--font-num);font-size:30px;color:var(--sa-amber)}
.sw-num small{font-size:12px;color:var(--ink);opacity:.85}
.sw-side{margin-left:auto;text-align:right;font-size:12px;color:var(--muted)}
.shop-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.shop-item{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:transform .15s,border-color .15s}
.shop-item:hover{transform:translateY(-2px);border-color:rgba(248,244,232,.32)}
.shop-item.using{border-color:var(--sa-amber);box-shadow:0 0 0 1px var(--sa-amber) inset,0 8px 24px rgba(244,163,64,.15)}
.shop-art{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,rgba(248,244,232,.12),transparent 65%),linear-gradient(180deg,#17414f,#0c2a36);border-bottom:3px solid var(--tier,#6e7d80)}
.shop-art svg{width:78%;height:100%}
.shop-item.tier1{--tier:#6fbf73}.shop-item.tier2{--tier:#4ea3e0}.shop-item.tier3{--tier:#c58bf0}
.shop-item.shop-locked .shop-art svg{filter:grayscale(1) brightness(.6)}
.shop-item.shop-locked .shop-text{opacity:.6}
.shop-badge{position:absolute;top:7px;right:7px;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:750;background:rgba(9,42,57,.85);border:1px solid var(--line)}
.shop-badge.price{color:#3b2207;background:var(--sa-amber);border-color:transparent;font-family:var(--font-num)}
.shop-badge.use{color:#3b2207;background:var(--sa-cream)}
.shop-badge.own{color:#bfe8c3;border-color:rgba(111,191,115,.6)}
.shop-text{flex:1;display:flex;flex-direction:column;gap:3px}
.shop-tier{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:750;color:var(--tier,#9aa6a8)}
.shop-text b{font-size:14px;line-height:1.25}
.shop-text p{margin:0 0 4px;color:var(--muted);font-size:12px;line-height:1.35}
.shop-bar{display:grid;grid-template-columns:72px 1fr 52px;align-items:center;gap:6px;font-size:11.5px}
.shop-bar span{color:var(--muted)}
.shop-bar i{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.shop-bar i b{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--tier,#8b9189),var(--sa-amber))}
.shop-bar em{font-style:normal;text-align:right;font-family:var(--font-num);font-size:11px}
.shop-item .btn{width:100%;white-space:nowrap}
.shop-item .btn:disabled{opacity:.6;cursor:default}
.shop-item.fresh{animation:shopPop .6s ease-out}
.shop-item.fresh .shop-art::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(244,163,64,.55),transparent 70%);animation:shopGlow 1.2s ease-out forwards}
@keyframes shopPop{0%{transform:scale(.94)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes shopGlow{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.shop-item,.shop-item.fresh,.shop-item.fresh .shop-art::after{animation:none;transition:none}}
@media (max-width:480px){.shop-list{grid-template-columns:1fr 1fr;gap:8px}.shop-bar{grid-template-columns:1fr 44px}.shop-bar i{grid-column:1/-1;grid-row:2}.sw-side{display:none}}
/* Phones with the fish panel open: the gesture hint makes way (it lay over the panel's text) */
@media (max-width:760px){body:has(#fishPanel:not(.collapsed)) #hud[data-mode=fish] .gesture-hint{display:none}}
/* The little map while driving or walking folds away to a button (remembered on this device; on phones folded
   at first). Folded, only the button with the map sign is left. */
.mini-fold{position:absolute;top:-9px;left:-9px;z-index:2;display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(9,42,57,.92);color:var(--sa-cream,#f8f4e8);cursor:pointer}
.mini-fold .ic{width:15px;height:15px}.mini-fold span{display:none}
#minimapWrap.folded{left:auto;width:auto;padding:0;background:none;border:0;backdrop-filter:none}
#minimapWrap.folded>:not(.mini-fold){display:none} /* the id: #minimap's own display:block must not win */
.minimap-wrap.folded .mini-fold{position:static;width:auto;height:44px;padding:0 12px;border-radius:12px;display:flex;gap:6px;font:inherit;font-size:13px;font-weight:700}
.minimap-wrap.folded .mini-fold .ic{width:18px;height:18px}.minimap-wrap.folded .mini-fold span{display:inline}
@media (max-width:760px){.minimap-wrap.folded .mini-fold span{display:none}.minimap-wrap.folded .mini-fold{width:44px;padding:0;justify-content:center}}
/* Phones: the bars as icons only too (the names are in the tooltips and the help), the tasks keep their count; the
   buttons get lower, more of the picture stays free */
@media (max-width:760px){
  .top-actions .icon-btn span,#hud .fish-chips .icon-btn:not(.tasks-btn) span{display:none}
  .top-actions .icon-btn,#hud .fish-chips .icon-btn{min-height:40px;padding:4px 2px;justify-content:center}
}
/* Beta-Feedback (Optionen › Feedback) */
.fb-form{display:grid;gap:12px}
.fb-form label{display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--muted);text-transform:uppercase}
.fb-form textarea,.fb-form input{width:100%;background:#0a222b;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px;font:500 13px/1.4 var(--font-body,Inter,sans-serif);letter-spacing:0;text-transform:none;resize:vertical}
.fb-form .note{margin:0}.fb-form .note a{color:var(--sa-amber)}
.fb-kind{display:grid;grid-template-columns:repeat(3,1fr)}
.fb-send{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.beta-link{color:var(--sa-amber)!important}
/* the Forellenteich is long and narrow: its minimap wide and low instead of tall */
.pond .minimap-wrap{width:230px}.pond #minimap{height:105px}
@media (max-width:760px){.pond .minimap-wrap{width:150px}.pond #minimap{height:70px}}
@media (max-height:500px) and (orientation:landscape){.pond .minimap-wrap{width:150px}.pond #minimap{height:60px}}
.chips .stock-chip.fresh{background:rgba(244,163,64,.22);border-color:rgba(244,163,64,.6);color:#FFCB81}
/* the bite view (biteview.js): the float or the rod tip close up while waiting. Desktop: right, under the collapsed
   panel; phone: left side above the panel (the line figures stand on the right there) */
.bite-view{position:absolute;z-index:11;right:max(16px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);margin:0;width:240px;height:160px;border-radius:14px;overflow:hidden;background:rgba(9,42,57,.78);border:2px solid rgba(248,244,232,.22);box-shadow:0 6px 20px rgba(0,0,0,.3);pointer-events:auto;transition:border-color .2s}
.bite-view canvas{display:block;width:100%;height:100%}
.bite-view figcaption{position:absolute;left:8px;top:6px;font:800 10px/1.2 var(--font-cond,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--sa-cream,#f8f4e8);text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
.bite-view-x{position:absolute;right:4px;top:4px;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(9,42,57,.7);color:var(--sa-cream,#f8f4e8);cursor:pointer;padding:0}
.bite-view-x .ic{width:14px;height:14px}
.bite-view.biting{border-color:var(--red,#e5533d);animation:biteViewPulse .5s ease-in-out infinite alternate}
@keyframes biteViewPulse{to{box-shadow:0 0 0 4px rgba(229,83,61,.45),0 6px 20px rgba(0,0,0,.3)}}
#hud:not([data-mode=fish]) .bite-view{display:none}
@media (max-width:760px){.bite-view{right:auto;left:max(10px,env(safe-area-inset-left));top:calc(122px + env(safe-area-inset-top,0px));transform:none;width:150px;height:104px}} /* under the chips, clear of the bite alert */
@media (max-height:500px) and (orientation:landscape){.bite-view{right:max(10px,env(safe-area-inset-right));left:auto;top:58px;transform:none;width:156px;height:100px}}
/* Forellen-Cup (cupui.js): the standings as a chip in the top bar, on phones as a pill under the bell; the Cup window */
.chips .cup-chip{cursor:pointer;background:rgba(201,162,39,.2);border-color:rgba(201,162,39,.6);color:#f3d77a}
.chips .cup-chip.lead,.cup-pill.lead{background:rgba(201,162,39,.36);border-color:#e6c04a;color:#fff1bf}
.cup-pill{display:none}
@media (max-width:760px),(max-height:500px){
  #hud[data-mode=fish] .cup-pill:not(.hidden),#hud[data-mode=fight] .cup-pill:not(.hidden),#hud[data-mode=drive] .cup-pill:not(.hidden){display:flex;gap:4px;position:fixed;right:10px;top:238px;z-index:55;align-items:center;height:28px;padding:0 10px;border-radius:99px;border:1px solid rgba(201,162,39,.6);background:rgba(9,42,57,.85);color:#f3d77a;font-size:12px;font-weight:700}
  .cup-pill .ic{width:14px;height:14px}
}
@media (max-height:500px) and (orientation:landscape){#hud .cup-pill:not(.hidden){top:calc(max(8px,env(safe-area-inset-top)) + 76px)}}
.cup-card{width:min(600px,100%)}
.cup-lead{margin:0 0 12px;line-height:1.5}
.cup-big{margin:0 0 12px;padding:9px 12px;border-radius:10px;background:rgba(201,162,39,.16);border:1px solid rgba(201,162,39,.45);color:#f3d77a}
.cup-rules{margin:0 0 14px;padding-left:18px;font-size:13px;line-height:1.5;color:#d7e8e1}
.cup-slots{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.cup-slots .btn{justify-content:flex-start;flex-wrap:wrap;text-align:left}
.cup-slots .btn small{flex-basis:100%;margin-left:26px;text-transform:none;letter-spacing:.02em;font-size:11px}
.cup-table{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 10px;font-variant-numeric:tabular-nums}
.cup-table th{font:800 10px/1.2 var(--font-cond,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.cup-table td{padding:6px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
.cup-table td:first-child{font-weight:800;color:#f3d77a;width:22px}
.cup-table td small{color:var(--muted)}
.cup-table .cup-how{display:block;font-size:11px}
.cup-table tr.me td{background:rgba(201,162,39,.14)}
@media (max-width:520px){.cup-table th:last-child,.cup-table td:last-child{display:none}}