/* Lakeside Angler UI: "lantern glass". Dark walnut glass panels, fine gold hairline, parchment-cream ink.
   Dark translucent panels keep the bright painterly world readable around them and stay legible over
   sun-lit grass, sand and water alike (a parchment UI fought the sand/path colours). Gold trim = RS-ish
   reward language; lake teal = the one action colour. No backdrop-filter: blurring a live WebGL canvas
   every frame costs fill-rate on phones. */
@font-face { font-family: "Cinzel"; src: url("assets/fonts/cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("assets/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
:root {
  --glass: rgba(30, 23, 16, .82); --glass-2: rgba(58, 44, 30, .9); --well: rgba(12, 9, 6, .5);
  --line: rgba(233, 199, 128, .5); --line-soft: rgba(233, 199, 128, .2);
  --gold: #e9c780; --gold-2: #b98a3e; --ink: #f7eedb; --ink-2: #cbbb98; --ink-3: #9a8b6c;
  --teal: #3aa6b4; --teal-2: #257a8c; --good: #8cd067; --warn: #efb04a; --bad: #e8664c;
  --r-lg: 16px; --r-md: 12px; --r-sm: 9px;
  --shadow: 0 10px 28px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .25);
  --hi: inset 0 1px 0 rgba(255, 240, 205, .14);
  --display: "Cinzel", Georgia, serif; --ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); --sar: env(safe-area-inset-right);
  --i-rod: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021%2020%203%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%222.6%22/%3E%3Cpath%20d%3D%22M20%203v9%22%20stroke-width%3D%221.3%22/%3E%3Cpath%20d%3D%22M18.5%2012.5q1.5%202%200%203.5%22%20stroke-width%3D%221.6%22/%3E%3C/svg%3E");
  --i-bag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209h16l-1.6%2010.2a2%202%200%200%201-2%201.8H7.6a2%202%200%200%201-2-1.8z%22/%3E%3Cpath%20d%3D%22M8%209a4%204%200%200%201%208%200%22/%3E%3Cpath%20d%3D%22M8%2014h8%22%20stroke-width%3D%221.6%22/%3E%3C/svg%3E");
  --i-coin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Cpath%20d%3D%22M12%207.5v9M9.5%209.5h4a1.6%201.6%200%200%201%200%203.2h-3a1.6%201.6%200%200%200%200%203.2h4%22/%3E%3C/svg%3E");
  --i-bait: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202v12a5%205%200%200%201-10%200v-3l3%202%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%222.6%22%20r%3D%221.2%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M17%2017c2-1%204%200%204%202s-2%203-3%202%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22%20stroke-width%3D%222.8%22/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5%22%20stroke-width%3D%222.8%22/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; background: #8cc4ec; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  font: 700 15px/1.25 var(--ui); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font-family: var(--ui); }
canvas { display: block; position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
body > div { position: fixed; pointer-events: none; }
[hidden] { display: none !important; }
.panel { background: linear-gradient(180deg, rgba(48, 37, 25, .86), var(--glass)); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow), var(--hi), inset 0 0 0 1px rgba(0, 0, 0, .35); }

/* icons: inline SVG masks tinted by currentColor, so JS can keep writing textContent */
[class*="ico-"]::before { content: ""; display: inline-block; flex: none; width: 1.2em; height: 1.2em; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico-rod { --i: var(--i-rod); } .ico-bag { --i: var(--i-bag); } .ico-coin { --i: var(--i-coin); } .ico-bait { --i: var(--i-bait); }

/* buttons: secondary = glass chip with gold hairline; primary = lake teal */
#rodBtn, #rodList button, #baitBtn, #baitList button, #bagBtn, #shopBtn, .overlay button, #cardFull button {
  pointer-events: auto; min-height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(180deg, #4b3925, #382a1b); color: var(--ink); font: 800 15px/1 var(--ui);
  box-shadow: var(--hi), 0 2px 4px rgba(0, 0, 0, .25); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: transform .08s, filter .15s; }
#rodBtn:active, #baitBtn:active, #bagBtn:active, #shopBtn:active, .overlay button:active, #cardFull button:active { transform: scale(.96); filter: brightness(1.15); }
.primary, #shopBtn, #sellAll, .rod button.buy, #cardSwap, .tabs button.on, #rodList button.on, #baitList button.on {
  background: linear-gradient(180deg, #48b9c6, var(--teal-2)) !important; border-color: rgba(214, 248, 250, .55) !important; color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
#sellAll:disabled, .overlay button:disabled, #rodList button:disabled { opacity: .42; filter: saturate(.3); }

/* --- HUD */
#hud { top: calc(var(--sat) + 10px); left: calc(var(--sal) + 10px); padding: 10px; width: min(62vw, 268px); font-size: 14px; }
#lvl { display: flex; align-items: center; gap: 10px; }
#lvlBadge { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #5a4428, #241a10 70%); border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 8px rgba(233, 199, 128, .35); }
#lvlNum { font: 700 20px/1 var(--display); color: var(--gold); text-shadow: 0 1px 2px #000; }
#lvl .col { flex: 1; min-width: 0; }
#lvl .row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#lvl .lbl { font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); } /* Cinzel hints badly this small */
#lvlText { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
#xpBar { margin-top: 6px; height: 7px; border-radius: 4px; background: var(--well); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); overflow: hidden; }
#xpFill { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #6fbf4a, #b6e26c); box-shadow: 0 0 6px rgba(160, 230, 110, .6); transition: width .4s; }
#coins { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-size: 15px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.coin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff4b8, #e8b648 55%, #a7741f); box-shadow: 0 0 0 1px #6b4526, 0 1px 2px rgba(0, 0, 0, .5); }
#hudRow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#hudRow .chip { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hudRow .chip::before { color: var(--gold); }
#rodBtn { flex-grow: 1.6 !important; justify-content: flex-start !important; }
#rodBtn::after { content: ""; width: 14px; height: 14px; margin-left: auto; flex: none; background: var(--ink-3); -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; }
#bagBtn { font-variant-numeric: tabular-nums; }
/* rod condition: thin bar along the chip's foot (--c 0-1, --cc colour) */
#rodBtn { background: linear-gradient(var(--cc, var(--good)), var(--cc, var(--good))) 10px calc(100% - 5px) / calc((100% - 20px) * var(--c, 1)) 3px no-repeat,
  linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)) 10px calc(100% - 5px) / calc(100% - 20px) 3px no-repeat, linear-gradient(180deg, #4b3925, #382a1b); }
#baitBtn { flex: 1 1 100% !important; justify-content: flex-start !important; min-height: 38px; font-variant-numeric: tabular-nums; }
#baitBtn::after { content: ""; width: 14px; height: 14px; margin-left: auto; flex: none; background: var(--ink-3); -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; }
#baitList { pointer-events: auto; margin-top: 8px; display: grid; gap: 6px; }
#baitList button { width: 100%; justify-content: flex-start; white-space: nowrap; }
#baitList small { color: var(--ink-3); font-size: 12px; padding: 2px 4px; }
#hud:has(#baitList:not([hidden])) { width: min(80vw, 300px); }
#bagBtn.full { background: linear-gradient(180deg, #9a3a26, #6e2417); border-color: #ff9c7e; }
#rodList { pointer-events: auto; margin-top: 8px; display: grid; gap: 6px; }
#rodList button { width: 100%; justify-content: flex-start; white-space: nowrap; }
#hud:has(#rodList:not([hidden])) { width: min(80vw, 300px); }
#stats { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 8px; padding: 6px 0 0; border: 0; background: none; font: 700 12px/1.2 var(--ui); color: var(--ink-2); text-align: left; pointer-events: auto; cursor: default; -webkit-tap-highlight-color: transparent; }
#stats.has { cursor: pointer; } #stats.has::after { content: ""; margin-left: auto; border: 5px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
#stats.has[aria-expanded="true"]::after { transform: translateY(-3px) rotate(180deg); }
#log[hidden] { display: none; }
#log { margin: 4px 0 0; padding: 0; list-style: none; font-weight: 600; font-size: 12px; color: var(--ink-2); }
#log li { padding: 2px 0; border-top: 1px solid var(--line-soft); }
#log li small { float: right; margin-left: 8px; color: var(--ink-3); font-size: 11px; }
#log:empty { display: none; }
#log .pb { color: var(--gold); } #log .junk { opacity: .6; }

/* --- hint, toast, power */
#hint { left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 18px); white-space: nowrap; font-size: 16px; font-weight: 800;
  padding: 8px 16px; border-radius: 999px; background: rgba(30, 23, 16, .62); border: 1px solid var(--line-soft); }
#hint:empty { display: none; }
#hint.alert { color: #fff3a0; font: 700 26px/1.1 var(--display); background: rgba(30, 23, 16, .78); border-color: var(--gold); animation: pulse .25s infinite alternate; }
@keyframes pulse { to { transform: translateX(-50%) scale(1.1); } }
#toast { left: 50%; top: 28%; transform: translateX(-50%); font: 700 26px/1.1 var(--display); white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .75), 0 0 2px #000; opacity: 0; transition: opacity .2s; }
#toast.on { opacity: 1; } #toast.bad { color: #ffab92; }
#power { left: 50%; bottom: calc(var(--sab) + 60px); width: min(70vw, 320px); height: 16px; transform: translateX(-50%);
  border: 1px solid var(--line); border-radius: 999px; background: var(--glass); box-shadow: var(--shadow); overflow: hidden; opacity: 0; transition: opacity .15s; padding: 3px; }
#power.on { opacity: 1; }
#powerFill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #6fbf4a, #f1cf52 60%, #ef7d3a); }

/* --- Cast button: teal disc, gold ring */
#castBtn { position: fixed; right: calc(var(--sar) + 18px); bottom: calc(var(--sab) + 18px); width: 78px; height: 78px; border-radius: 50%;
  border: 3px solid var(--gold); background: radial-gradient(circle at 40% 30%, #5ccbd6, var(--teal-2) 75%); color: #fff; pointer-events: auto;
  font: 700 16px/1 var(--display); letter-spacing: .04em; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 4px rgba(30, 23, 16, .55), var(--shadow), inset 0 2px 0 rgba(255, 255, 255, .25); touch-action: none; -webkit-tap-highlight-color: transparent; }
#castBtn.held { transform: scale(.92); filter: brightness(.9); }
/* floating slingshot control: centred under the finger, the finger keeps the events */
#castBtn.float { right: auto; bottom: auto; transform: translate(-50%, -50%); pointer-events: none; opacity: .92; animation: popF .15s ease-out; }
@keyframes popF { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } }
#castBtn.alert { background: radial-gradient(circle at 40% 30%, #ffe08a, #d9952a 75%); color: #2b1a08; text-shadow: none; animation: pulse2 .25s infinite alternate; }
@keyframes pulse2 { to { transform: scale(1.1); } }

/* --- Reel panel */
#reel { left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 50px); width: min(92vw, 500px); padding: 10px 14px 14px; }
#reelHead { display: flex; justify-content: center; align-items: center; margin-bottom: 9px; }
#reelTitle { font: 700 18px/1.1 var(--display); letter-spacing: .04em; color: var(--ink); text-shadow: 0 1px 2px #000; }
#reel.warn #reelTitle { color: var(--warn); animation: blink .2s infinite alternate; }
#reel.run #reelTitle, #reel.hi #reelTitle { color: var(--bad); }
#reel.run #bal { animation: shake .08s infinite alternate; }
#reel.tired { border-color: var(--good); box-shadow: var(--shadow), 0 0 18px rgba(140, 208, 103, .55); }
#reel.tired #reelTitle { color: #b6ef8f; }
#reel.tired #progFill { background: linear-gradient(90deg, #6fbf4a, #b6e26c); }
@keyframes blink { to { opacity: .45; } }
@keyframes shake { to { transform: translateX(3px); } }
#bal { position: relative; height: 28px; border-radius: 999px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 3px rgba(233, 199, 128, .18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .12)),
    linear-gradient(90deg, #c4442f 0 var(--l, 12%), #df9b33 var(--l, 12%) var(--gl, 30%), #5fb04a var(--gl, 30%) var(--gr, 70%),
    #df9b33 var(--gr, 70%) var(--r, 88%), #c4442f var(--r, 88%)); } /* red = lost, amber = line slips, green = reel */
#mark { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: linear-gradient(#ea3b2c 50%, #fbf6ea 50%); border: 2px solid #20150c; box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 2px 2px rgba(255, 255, 255, .4); }
#mark.danger { box-shadow: 0 0 0 3px #fff3a0, 0 0 12px #fff3a0; }
#prog { position: relative; height: 16px; margin-top: 13px; border-radius: 999px; background: #173a52; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .5); }
#progFill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2c8aa6, #5fd0dc); }
#progEnd { position: absolute; right: 0; top: 0; bottom: 0; width: 26px; border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #f7d873, #d29d32); color: #2a1a08; font-size: 16px; font-weight: 900; line-height: 13px; text-align: center; overflow: hidden; transition: background .2s, filter .2s; }
/* >> reacts to the fish on the blue bar: gaining = bright, nudging right (speed via --spd); holding = dim, still; slipping = << red, nudging left */
#progEnd i { display: inline-block; font-style: normal; }
#progEnd i::after { content: '\00bb'; }
#progEnd.hold { filter: saturate(.35) brightness(.7); }
#progEnd.gain { background: #ffe680; box-shadow: 0 0 10px #ffe680; }
#progEnd.gain i { animation: nudgeR var(--spd, .6s) ease-in-out infinite; }
#progEnd.slip { background: #e8892b; color: #fff; }
#progEnd.slip i::after { content: '\00ab'; }
#progEnd.slip i { animation: nudgeL .5s ease-in-out infinite; }
#reel.run #progEnd.slip { background: #d63a2b; box-shadow: 0 0 10px #ff5a3c; }
#reel.run #progEnd.slip i { animation-duration: .28s; }
@keyframes nudgeR { 0%, 100% { transform: translateX(-3px); opacity: .7; } 50% { transform: translateX(3px); opacity: 1; } }
@keyframes nudgeL { 0%, 100% { transform: translateX(3px); opacity: .7; } 50% { transform: translateX(-3px); opacity: 1; } }
#progFish { position: absolute; top: -5px; left: 0; width: 30px; height: 22px; margin-left: -12px; filter: drop-shadow(0 1px 1px #000); }
#tens { position: relative; height: 16px; margin-top: 10px; border-radius: 999px; background: var(--well); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .4); overflow: hidden; }
#tensFill { height: 100%; width: 0; background: linear-gradient(90deg, #6fbf4a, #f1cf52 60%, #ea4a2f); }
#tens span { position: absolute; inset: 0; font-size: 10px; font-weight: 900; line-height: 16px; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: .14em; text-transform: uppercase; }
#reel.hi #tens { box-shadow: 0 0 0 2px var(--bad), 0 0 10px var(--bad); animation: shake .06s infinite alternate; }

/* --- Level-up ribbon */
#lvlUp { left: 50%; bottom: calc(var(--sab) + 110px); transform: translateX(-50%); padding: 10px 26px 12px; text-align: center; white-space: nowrap;
  border-color: var(--gold); box-shadow: var(--shadow), 0 0 24px rgba(233, 199, 128, .45), var(--hi); animation: popX .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes popX { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
#lvlUp small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
#lvlUp b { display: block; font: 700 26px/1.15 var(--display); color: var(--gold); text-shadow: 0 1px 3px #000; }
#lvlUp span { display: block; margin-top: 4px; font-size: 13px; color: #b6ef8f; white-space: normal; max-width: 80vw; }

/* --- Catch card */
#card { left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; padding: 16px 26px 14px; min-width: 250px; max-width: 92vw;
  animation: pop .3s cubic-bezier(.2, 1.5, .4, 1); border-top: 3px solid var(--gold); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } }
#cardRarity { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--well); border: 1px solid currentColor;
  font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
#cardName { font: 700 28px/1.1 var(--display); margin: 8px 0 2px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
#cardKg { font-size: 26px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
#cardPb { margin-top: 8px; display: inline-block; padding: 4px 12px; border-radius: 999px; background: linear-gradient(180deg, #f7d873, #d29d32); color: #2b1a08; font-size: 13px; font-weight: 900; }
#cardXp { margin-top: 8px; color: #b6ef8f; font-size: 15px; font-weight: 900; }
#cardBag { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.tap { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
#cardFull { margin-top: 10px; color: #ffab92; font-size: 14px; pointer-events: auto; }
#cardFull b { color: var(--bad); font: 700 18px var(--display); display: block; }
#cardFull div { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
#cardFull button { min-width: 112px; }
#card:has(#cardFull:not([hidden])) { pointer-events: auto; }
svg.Uncommon { filter: drop-shadow(0 0 2px #8cd067); } svg.Rare { filter: drop-shadow(0 0 2.5px #74bfff); } svg.Legendary { filter: drop-shadow(0 0 3px #ffbb55); } /* species tint, rarity glow */
.Common { color: #d6dccb; } .Uncommon { color: #8cd067; } .Rare { color: #74bfff; } .Legendary { color: #ffbb55; } .Junk { color: #b8a58a; }

/* --- Shop button, overlays (bag, shop) */
#shopBtn { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 64px); min-height: 52px; padding: 0 26px;
  font: 700 18px/1 var(--display); letter-spacing: .04em; box-shadow: var(--shadow), var(--hi); animation: popX .2s ease-out; }
#shopBtn:active { transform: translateX(-50%) scale(.96); }
.overlay { background: linear-gradient(180deg, #33281b, #1f1810) !important; } /* modals are opaque: nothing bleeds through */
body:has(.overlay:not([hidden])) :is(#hud, #hint, #castBtn, #shopBtn, #power) { visibility: hidden; }
body:has(.overlay:not([hidden])) #toast { z-index: 6; padding: 8px 18px; border-radius: 999px; background: rgba(30, 23, 16, .92); border: 1px solid var(--line); font-size: 20px; }
.overlay { pointer-events: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 420px); max-height: calc(100% - var(--sat) - var(--sab) - 16px);
  overflow: auto; padding: 12px 14px 14px; z-index: 5; animation: rise .2s ease-out; }
@keyframes rise { from { transform: translate(-50%, -46%); opacity: 0; } }
.ohead { display: flex; align-items: center; gap: 10px; margin: -2px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.ohead b { display: inline-flex; align-items: center; gap: 8px; font: 700 20px/1 var(--display); color: var(--ink); letter-spacing: .03em; }
.ohead b::before { color: var(--gold); }
.ohead span { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-size: 14px; font-weight: 800; margin-right: auto; font-variant-numeric: tabular-nums; }
.overlay .x { width: 44px; min-width: 44px; padding: 0; border-radius: 50%; }
.overlay .x::before { content: ""; width: 16px; height: 16px; background: var(--ink); -webkit-mask: var(--i-x) center / contain no-repeat; mask: var(--i-x) center / contain no-repeat; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot { position: relative; min-height: 62px; padding: 4px 2px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--r-sm) !important; background: radial-gradient(circle at 50% 35%, rgba(70, 54, 36, .9), rgba(20, 15, 10, .9)) !important;
  border: 1px solid rgba(233, 199, 128, .22) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5) !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.1 !important; overflow: hidden; gap: 0 !important; }
.slot:has(svg.Uncommon) { border-color: rgba(140, 208, 103, .6) !important; } .slot:has(svg.Rare) { border-color: rgba(116, 191, 255, .7) !important; }
.slot:has(svg.Legendary) { border-color: rgba(255, 187, 85, .85) !important; box-shadow: inset 0 0 10px rgba(255, 187, 85, .3) !important; }
.slot svg { width: 34px; height: 17px; margin-bottom: 3px; }
.slot .kg { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.slot .nm { text-align: center; line-height: 1.1; color: var(--ink); } .slot .nm.long { font-size: 0.8em; }
.slot .v { position: absolute; top: 3px; right: 4px; font-size: 10px; color: var(--gold); }
.slot.sel { border-color: #fff !important; box-shadow: 0 0 0 2px var(--teal), inset 0 0 10px rgba(92, 203, 214, .35) !important; }
.slot:empty, .slot.empty { opacity: .4; }
.info { min-height: 54px; margin-top: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--well); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  font-size: 13px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.info b { color: var(--ink); }
.info .grow { flex: 1; min-width: 140px; }
.big { min-height: 48px !important; font-size: 16px !important; }
#sellAll { width: 100%; margin-top: 10px; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; padding: 4px; border-radius: var(--r-md); background: var(--well); }
.tabs button { flex: 1; background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--ink-2) !important; }
.tabs button.on { box-shadow: var(--hi), 0 2px 4px rgba(0, 0, 0, .3) !important; }
.rod { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px; border-radius: var(--r-md); background: rgba(12, 9, 6, .35); border: 1px solid var(--line-soft); font-size: 15px; font-weight: 800; }
.rod::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--gold); -webkit-mask: var(--i-rod) center / contain no-repeat; mask: var(--i-rod) center / contain no-repeat; }
.rod .grow { flex: 1; }
.rod small { display: block; margin-top: 2px; color: var(--ink-3); font-weight: 700; font-size: 12px; }
.rod small.why { color: #ffab92; }
.rod small.cond { position: relative; padding-bottom: 6px; color: var(--ink-2); }
.rod small.cond::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; max-width: 140px; border-radius: 2px;
  background: linear-gradient(var(--cc), var(--cc)) 0 0 / calc(100% * var(--c)) 100% no-repeat, rgba(0, 0, 0, .45); }
.rod button.fix { min-width: 0; padding: 0 12px; white-space: nowrap; gap: 5px; }
.rod.bait::before { -webkit-mask-image: var(--i-bait); mask-image: var(--i-bait); }
.rod.bait b { color: var(--gold); font-variant-numeric: tabular-nums; }
.note { margin: 0 0 8px; font-size: 13px; color: var(--ink-3); }
/* overlays: header + tabs fixed, the list under them scrolls (touch: pan-y + momentum; the global touchmove block skips .overlay) */
.overlay:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
.overlay > * { flex: none; }
#shopSell, #shopRods, #shopBait, #shopFloats, #shopStyle, #paneRec, #paneLake, #paneRiver, #bagGrid { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.overlay [hidden] { display: none !important; }
.tabs button { padding: 0 4px !important; min-width: 0; font-size: 14px !important; }
.rod.flt::before { -webkit-mask: none; mask: none; width: 14px; height: 26px; margin: 0 4px; border-radius: 50% 50% 45% 45% / 30% 30% 70% 70%;
  background: linear-gradient(180deg, var(--f0) 0 40%, var(--f1) 40% 72%, var(--f2) 72%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.rod.sw::before { -webkit-mask: none; mask: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255, 240, 210, .25), 0 1px 2px rgba(0, 0, 0, .4); }
.note.sub { margin: 10px 0 6px; color: var(--gold); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.note.sub:first-child { margin-top: 0; }
.rod button { min-width: 96px; }

/* narrow screens: lift centred UI above the Cast button */
@media (max-width: 700px) { #lvlUp { bottom: calc(var(--sab) + 170px); } #shopBtn { bottom: calc(var(--sab) + 150px); } #hint { bottom: calc(var(--sab) + 112px); } #reel { bottom: calc(var(--sab) + 156px); } #power { bottom: calc(var(--sab) + 142px); } }
@media (max-width: 500px) { #hint { font-size: 14px; } #hint.alert { font-size: 22px; } #cardName { font-size: 24px; } #toast { font-size: 22px; } }
@media (max-height: 450px) { #reel { top: calc(var(--sat) + 10px); bottom: auto; left: auto; right: calc(var(--sar) + 12px); transform: none; width: min(46vw, 380px); padding: 6px 12px 10px; }
  #hint { bottom: calc(var(--sab) + 10px); font-size: 14px; } #power { bottom: 50px; } #card { top: 50%; padding: 8px 20px 8px; } #cardName { font-size: 21px; margin: 4px 0 0; } #cardKg { font-size: 20px; } #cardPb, #cardXp { margin-top: 4px; } #cardBag { margin-top: 2px; } .tap { margin-top: 6px; }
  #card:has(#cardFull:not([hidden])) .tap { display: none; } #cardFull { margin-top: 6px; } #cardFull b { font-size: 15px; } #cardFull div { margin-top: 5px; } #cardFull .big { min-height: 44px !important; } #lvlUp { bottom: auto; top: calc(var(--sat) + 8px); }
  #hud { padding: 8px; } #lvlBadge { width: 40px; height: 40px; } #hudRow { margin-top: 8px; } #stats, #log { display: none; } }

/* short landscape phones: 7×4 bag grid so the whole shop/bag fits without scrolling */
@media (max-height: 450px) { .overlay { width: min(94vw, 660px); padding: 6px 10px 8px; } .grid { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .slot { min-height: 40px; } .slot svg { width: 26px; height: 13px; margin-bottom: 1px; } .ohead { margin-bottom: 5px; padding-bottom: 5px; } .tabs { margin-bottom: 5px; padding: 3px; }
  .tabs button, .overlay .x, #sellAll { min-height: 40px !important; } .overlay .x { width: 40px; min-width: 40px; } .info { min-height: 40px; margin-top: 5px; padding: 4px 8px; } .rod { padding: 3px 8px; margin-bottom: 3px; } }

/* iOS haptic trick: must stay rendered (not display:none) but invisible and untouchable */
#haptic { position: fixed; left: -100px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }

/* e20: clock chip, lake log, specimen board */
#clock { margin-left: auto; margin-right: 6px; font-size: 11px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#clock.dawn, #clock.dusk { color: #ffc07a; } #clock.night { color: #a9bff0; }
#cardLog { margin-top: 6px; color: #9fd8ff; font-size: 13px; font-weight: 900; }
.tabs button { font-size: 13px !important; }
.llog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 6px; }
.llog span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: var(--r-sm); background: rgba(12, 9, 6, .35);
  border: 1px solid var(--line-soft); font-size: 11px; font-weight: 800; line-height: 1.1; text-align: center; color: var(--ink-3); opacity: .55; }
.llog span svg { width: 30px; height: 15px; color: #000; opacity: .6; }
.llog span small { font-size: 10px; color: var(--ink-3); }
.llog span.got { opacity: 1; color: var(--ink); } .llog span.got svg { color: var(--gold); opacity: 1; }
.llog span.got.Uncommon { border-color: rgba(140, 208, 103, .6); } .llog span.got.Rare { border-color: rgba(116, 191, 255, .7); } .llog span.got.Legendary { border-color: rgba(255, 187, 85, .85); }
.board div { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 7px 10px; margin-bottom: 5px; border-radius: var(--r-md); background: rgba(12, 9, 6, .35); border: 1px solid var(--line-soft); font-size: 14px; }
.board span { color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; }
.board small { grid-column: 1 / -1; color: var(--ink-3); font-size: 11px; font-weight: 700; }
.board .Uncommon { color: #a6e27f; } .board .Rare { color: #8fcaff; } .board .Legendary { color: #ffc46b; }
/* toasts wrap on phones; over a catch card they sit low as a pill so the card stays readable */
@media (max-width: 500px) { #toast { white-space: normal; width: max-content; max-width: 90vw; text-align: center; } }
body:has(#card:not([hidden])) #toast { top: auto; bottom: calc(var(--sab) + 150px); max-width: 86vw; white-space: normal; text-align: center; font-size: 17px; padding: 8px 16px; border-radius: 16px; background: rgba(30, 23, 16, .92); border: 1px solid var(--line); }
/* e21: notice board pin, Old Tom's dialogue, quest HUD line */
.pin { margin: 0 0 10px; padding: 9px 12px; border-radius: var(--r-md); background: #e9dcb8; color: #3a2a1a; font-weight: 800; font-size: 14px; transform: rotate(-.6deg); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.pin small { display: block; margin-top: 3px; font-weight: 700; font-size: 12px; color: #6a5236; }
#talk { width: min(94vw, 380px); }
#talkText { margin: 0 0 10px; font-size: 15px; line-height: 1.4; color: var(--ink); font-style: italic; }
#talkQuest { display: grid; gap: 2px; margin-bottom: 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--well); }
#talkQuest b { color: var(--gold); font-size: 15px; } #talkQuest span { font-weight: 800; font-size: 14px; } #talkQuest small { color: var(--ink-3); font-size: 12px; font-weight: 700; }
#talkBtns { display: flex; gap: 8px; } #talkBtns button { flex: 1; }
#questLine { margin-top: 6px; padding: 4px 8px; border-radius: var(--r-sm); background: rgba(12, 9, 6, .35); font: 700 12px/1.25 var(--ui); color: var(--ink-2); }
#questLine::before { content: "! "; color: var(--gold); font-weight: 900; }
#questLine.ready { color: #a6e27f; } #questLine.ready::before { content: ""; }