:root {
  --accent: #ffc21a;
  --accent-l: #ffd84d;
  --accent-d: #c98a00;
  --navy: #232b5e;
  --ink: #2b2d5c;
  --purple: #6b5bb8;
  --green: #2fc46e;
  --green-d: #1c9450;
  --gold: #ffc21a;
  --sky: #36b9f2;
  --display: 'Lilita One', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
  --colL: 0px;
  --colW: 100vw;
  --surface: 36vh;
  --k: .74;
  --hk: .74;
  --mk: 1;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--sky);
  overflow: hidden;
  font-family: var(--body);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
body.booting #ui { visibility: hidden; }
#bootScreen, #breakStatus {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center;
  gap: 16px; text-align: center; padding: 24px;
  background: #232b5e; color: white; font: 24px var(--display);
}
#breakStatus { background: rgba(12, 22, 70, .8); pointer-events: auto; }
#bootScreen button { background: #ffc21a; color: #232b5e; padding: 12px; border-radius: 12px; }
#saveNotice {
  position: fixed; bottom: max(6px, env(safe-area-inset-bottom)); left: 5%; width: 90%;
  z-index: 90; padding: 8px; border-radius: 8px; background: #232b5e; color: white;
  text-align: center; font: 14px system-ui, sans-serif; pointer-events: none;
}
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

#ui {
  position: fixed; top: 0; bottom: 0;
  left: var(--colL); width: var(--colW);
  container-type: inline-size;
  pointer-events: none;
}
#ui button, #ui .card { pointer-events: auto; }
.num { font-family: var(--display); font-weight: 700; letter-spacing: .02em; }

/* ---------- top HUD ---------- */
#hud {
  position: absolute; top: calc(3cqw + env(safe-area-inset-top));
  left: calc(max(3cqw, env(safe-area-inset-left)) - var(--colL));
  right: calc(max(3cqw, env(safe-area-inset-right)) - var(--colL));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  transition: opacity .3s, transform .3s;
}
#hud.dive #cashBox { opacity: 0; transform: translateY(-40%); }
#hud.dive #settingsBtn, #hud.dive #bestBox { opacity: 0; pointer-events: none; }
#playWrap, #cards, #fishNow { zoom: var(--k); }
.sq-btn, #bestBox { zoom: var(--hk); }
/* the left column scales as a whole (set in fitSide) so every tab keeps one size and it always fits the height */
.tab-group, .boost-group { zoom: var(--sideK, var(--hk)); }
#cashBox { zoom: calc(var(--k) + .12); }
#depthNow { zoom: calc(var(--k) + .1); }
.sq-btn {
  width: 11.5cqw; height: 11.5cqw; border-radius: 3.2cqw;
  background: #fff; color: #ffc21a;
  display: grid; place-items: center;
  box-shadow: 0 1cqw 0 #c9d3ee, 0 1.6cqw 3cqw rgba(16, 40, 110, .25);
  transition: transform .12s, box-shadow .12s, opacity .3s;
}
.sq-btn svg { width: 7cqw; height: 7cqw; }
.sq-btn:active { transform: translateY(.8cqw); box-shadow: 0 .2cqw 0 #c9d3ee, 0 .6cqw 1.5cqw rgba(16, 40, 110, .25); }
#cashBox {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  transition: opacity .3s, transform .3s;
}
.cash-label {
  font-family: var(--display); font-size: 3.6cqw; color: var(--accent); letter-spacing: .08em;
  }
#cash {
  font-size: 10.5cqw; color: #fff; margin-top: .4cqw;
  transition: transform .15s;
}
#cash.bump { animation: bump .28s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 40% { transform: scale(1.14); } }
#bestBox {
  justify-self: end; position: relative;
  display: flex; align-items: center; gap: 1.2cqw;
  background: #fff; border-radius: 99px; min-width: 22cqw; white-space: nowrap;
  padding: 1.4cqw 3.4cqw 1.4cqw 1.6cqw; margin-top: 2.8cqw;
  box-shadow: 0 1cqw 0 #c9d3ee, 0 1.6cqw 3cqw rgba(16, 40, 110, .22);
  transition: opacity .3s;
}
#bestBox .trophy { width: 6cqw; height: 6cqw; }
#best { font-size: 5.2cqw; color: var(--ink); line-height: 1; }
.best-tag {
  position: absolute; top: -2.6cqw; right: 1.4cqw; white-space: nowrap; line-height: 1.1;
  background: var(--accent); color: #fff; font-family: var(--display); font-size: 2.8cqw;
  padding: .5cqw 1.8cqw .3cqw; border-radius: 1.4cqw 1.4cqw 1.4cqw .4cqw; letter-spacing: .06em;
  transform: rotate(4deg);
  box-shadow: 0 .6cqw 0 var(--accent-d);
}

/* ---------- dive HUD ---------- */
#diveHud {
  position: absolute; top: calc(3cqw + env(safe-area-inset-top)); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqw;
  transition: opacity .3s, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
#diveHud.off { opacity: 0; transform: translateY(-50%); }
#depthNow {
  font-size: 13cqw; line-height: 1; color: #fff;
  }
#depthNow small { font-size: 7cqw; margin-left: .6cqw; }
#fishNow {
  display: flex; align-items: center; gap: 1.6cqw;
  background: #1d2566; border: .6cqw solid rgba(255, 255, 255, .7);
  color: #fff; border-radius: 99px; padding: 1cqw 3.6cqw 1cqw 2cqw;
  font-family: var(--display); font-size: 5.4cqw; line-height: 1;
}
#fishNow svg { width: 8cqw; height: 5.2cqw; flex: none; }
#fishNow.bump { animation: bump .25s cubic-bezier(.3, 1.8, .5, 1); }
#fishNow.full { background: #2fc46e; border-color: #fff; }

#zoneBanner {
  position: absolute; top: 36cqw; left: 50%;
  display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, -20%); opacity: 0;
  background: #fff; color: var(--ink); border-radius: 3cqw;
  padding: 1.4cqw 5cqw 1.6cqw; line-height: 1.05;
  box-shadow: 0 1cqw 0 rgba(20, 30, 90, .35);
}
#zoneBanner small { font-family: var(--body); font-weight: 700; font-size: 2.8cqw; color: var(--zc, var(--purple)); letter-spacing: .14em; }
#zoneBanner b { font-family: var(--display); font-weight: 700; font-size: 6.4cqw; white-space: nowrap; }
#zoneBanner.show { animation: zone 2.4s cubic-bezier(.3, 1.3, .5, 1) forwards; }
@keyframes zone {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  12%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -20%) scale(.95); }
}

#popText {
  position: absolute; left: 0; right: 0; top: 38%;
  text-align: center; pointer-events: none; opacity: 0;
  display: flex; flex-direction: column; align-items: center;
}
#popText b {
  font-family: var(--display); font-weight: 700; font-size: 14cqw; line-height: 1;
  color: #fff; }
#popText small {
  margin-top: 2cqw; font-family: var(--display); font-size: 5cqw; color: #fff;
  background: rgba(14, 22, 78, .5); padding: 1cqw 3.4cqw .8cqw; border-radius: 99px;
}
#popText.show { animation: popText 1.25s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes popText {
  0% { opacity: 0; transform: scale(.3) rotate(-8deg); }
  18% { opacity: 1; transform: scale(1.08) rotate(-3deg); }
  30%, 75% { opacity: 1; transform: scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translateY(-6cqw) scale(.95) rotate(-3deg); }
}

/* ---------- idle UI ---------- */
#idleUI {
  position: absolute; left: 0; right: 0; top: var(--surface); bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 1cqw 0 calc(4cqw + env(safe-area-inset-bottom));
  isolation: isolate;
}
#idleUI.away #playWrap { opacity: 0; transform: scale(.6); pointer-events: none; }
#idleUI.away #cards { opacity: 0; transform: translateY(70%); }
#idleUI.away #cards .card, #idleUI.away #playBtn { pointer-events: none; }
/* soft shade that anchors the upgrade cards to the bottom edge */
#idleUI::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--colL)); right: calc(-1 * var(--colL)); bottom: 0; height: 30%;
  background: linear-gradient(rgba(12, 30, 90, 0), rgba(12, 30, 90, .34));
  transition: opacity .3s;
}
#idleUI.away::before { opacity: 0; }

/* left-edge tabs */
#sideBtns {
  position: absolute; left: calc(-1 * var(--colL)); top: var(--sideTop, 24%);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; flex-direction: column; gap: 3cqw;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .25s, visibility 0s;
}
#sideBtns.away { transform: translateX(-120%); opacity: 0; pointer-events: none; }
body.ov #sideBtns { opacity: 0; pointer-events: none; }
.edge-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .6cqw; pointer-events: auto; }
.tab-group, .boost-group { --sal: calc(env(safe-area-inset-left, 0px) * .6 / var(--sideK, 1)); }
.edge-ico {
  position: relative; width: calc(14cqw + var(--sal, 0px)); height: 12cqw; border-radius: 0 4cqw 4cqw 0; background: #fff;
  padding-left: var(--sal, 0px);
  display: grid; place-items: center;
  box-shadow: 0 1cqw 0 #c3cdef, 0 1.6cqw 3cqw rgba(10, 30, 110, .22);
  transition: transform .12s;
}
.edge-btn:active .edge-ico { transform: translateX(-1cqw); }
.edge-ico svg { width: 8.6cqw; height: 8.6cqw; display: block; margin: auto; }
.edge-ico svg.navy { color: var(--navy); }
.edge-lbl {
  font-family: var(--display); font-size: 3.2cqw; color: #fff; letter-spacing: .04em; align-self: stretch; text-align: center; min-width: calc(14cqw + var(--sal, 0px));
  padding-left: var(--sal, 0px);
  }
.dot {
  position: absolute; top: -1.2cqw; right: -1.2cqw; width: 4cqw; height: 4cqw;
  border-radius: 99px; background: #ff3d4f; border: .7cqw solid #fff;
  animation: dotPulse 1.2s ease-in-out infinite;
}
@keyframes dotPulse { 50% { transform: scale(1.18); } }

/* PLAY: orange disc with the power arc on its rim */
#playWrap {
  position: relative; width: 29cqw; height: 29cqw; flex: none; margin-top: 4cqw;
  transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
#playBtn {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #ffe27a 0%, #ffc21a 55%, #f0a000 100%);
  box-shadow: 0 0 0 .9cqw #fff0b3, 0 1.4cqw 0 .9cqw #a86c00, 0 3cqw 3.5cqw rgba(10, 20, 70, .3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .1s;
}
#playBtn:active { transform: scale(.93); }
.arc {
  position: absolute; inset: 1.3cqw; border-radius: 50%;
  background: conic-gradient(from -82deg, #fff4c4 0deg, #ffe07a 70deg, #ff5a3a calc(82deg - var(--pz, 9deg)) calc(82deg + var(--pz, 9deg)), #ffe07a 97deg, #fff4c4 164deg, transparent 164deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5cqw), #000 calc(100% - 1.4cqw));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5cqw), #000 calc(100% - 1.4cqw));
  opacity: .95;
}
.g-min {
  position: absolute; top: 40%; font-family: var(--display); font-size: 2.3cqw; line-height: 1; color: #fff; opacity: .9;
}
.g-min.l { left: 3.6cqw; }
.g-min.r { right: 3.6cqw; }
.play-hook { position: relative; width: 11cqw; height: 11cqw; color: var(--navy); margin-top: 1cqw; }
.play-txt {
  position: relative; font-family: var(--display); font-size: 7.4cqw; line-height: 1; color: #fff; margin-top: -.6cqw;
  }
.g-max {
  position: absolute; top: -2.2cqw; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--display); font-size: 2.9cqw; line-height: 1; color: #fff; letter-spacing: .04em;
  background: #ff2d3f; padding: .6cqw 1.8cqw .4cqw; border-radius: 1.2cqw;
}
#needle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; transform: rotate(var(--a, 0deg)); }
#needle i {
  position: absolute; left: -2cqw; top: -18.4cqw; width: 4cqw; height: 3.6cqw; background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 .4cqw 0 rgba(20, 30, 90, .45));
}

/* upgrade cards */
#cards {
  position: relative; width: 80cqw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw;
  transition: opacity .25s, transform .4s cubic-bezier(.3, 1.3, .5, 1);
}
.card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  background: #fff; border-radius: 3.6cqw; padding: 2.2cqw 0 0;
  box-shadow: 0 1.2cqw 0 rgba(22, 38, 130, .28), 0 3cqw 5cqw rgba(10, 20, 90, .2);
  transition: transform .12s;
}
.card:active { transform: translateY(1cqw); }
.card.pop { animation: cardPop .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes cardPop { 40% { transform: scale(1.07) rotate(-1deg); } }
.c-title {
  font-family: var(--body); font-weight: 700; font-size: max(2.2cqw, calc(10px / var(--k))); letter-spacing: .02em;
  color: var(--accent-d); white-space: normal; line-height: 1.2;
  min-height: calc(24px / var(--k)); padding: 0 1cqw; display: grid; place-content: center;
}
.c-ico { position: relative; width: 14cqw; height: 10.5cqw; margin: 1cqw 0 .2cqw; }
.c-ico svg { width: 100%; height: 100%; }
.c-step {
  position: absolute; right: -2.6cqw; top: 0;
  font-family: var(--display); font-weight: 700; font-size: 3.4cqw; color: var(--accent);
}
.c-val { font-family: var(--display); font-size: 4.2cqw; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.c-price {
  margin-top: 1.6cqw; width: 100%; display: grid; place-items: center;
  background: linear-gradient(#ffd84d, #ffb300); color: #fff; border-radius: 0 0 3.6cqw 3.6cqw;
  box-shadow: inset 0 -1cqw 0 rgba(140, 80, 0, .35), inset 0 .5cqw 0 rgba(255, 245, 200, .5);
  padding: 1.8cqw 0 2.2cqw;
}
.c-price span {
  font-family: var(--display); font-size: 5.2cqw; line-height: 1;
  }
.c-up {
  position: absolute; top: -4cqw; right: -1.6cqw; width: 5.6cqw; height: 6.2cqw;
  animation: upBob .9s ease-in-out infinite;
}
.c-up svg { width: 100%; height: 100%; display: block; }
@keyframes upBob { 50% { transform: translateY(-1cqw); } }
.card.poor .c-up { display: none; }
.card.poor .c-price { background: linear-gradient(#bdb6d6, #a39cc0); box-shadow: inset 0 -1cqw 0 rgba(40, 30, 90, .25); }
.card.poor .c-ico, .card.poor .c-val { opacity: .7; }

/* ---------- hints ---------- */
.hint {
  display: flex; align-items: center; gap: 1.6cqw; white-space: nowrap;
  font-family: var(--display); font-size: 4.2cqw; color: #fff; letter-spacing: .03em; line-height: 1;
  background: rgba(14, 22, 78, .55); border: .5cqw solid rgba(255, 255, 255, .45);
  padding: 1.8cqw 4cqw 1.6cqw; border-radius: 99px; pointer-events: none;
}
.hint b { font-weight: 700; color: #ff4d6a; }
.hint svg { width: 4.6cqw; height: 4.6cqw; color: #ffe14a; }
#idleHint { animation: hintBob 1.4s ease-in-out infinite; }
@keyframes hintBob { 50% { transform: translateY(-1cqw); } }
#diveHint {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  opacity: 0; transition: opacity .3s;
}
#diveHint.show { opacity: 1; }
#diveHint.show svg:first-child { animation: nudgeL .8s ease-in-out infinite; }
#diveHint.show svg:last-child { animation: nudgeR .8s ease-in-out infinite; }
@keyframes nudgeL { 50% { transform: translateX(-1.2cqw); } }
@keyframes nudgeR { 50% { transform: translateX(1.2cqw); } }

/* ---------- summary ---------- */
#summary {
  position: absolute; left: 0; right: 0; top: 47%;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
#summary.live { opacity: 1; transform: scale(1); }
#summary.done { animation: sumDone 1.25s ease forwards; }
@keyframes sumDone {
  0% { opacity: 1; transform: scale(1); }
  16% { opacity: 1; transform: scale(1.2) rotate(-2deg); }
  30%, 76% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(-8cqw) scale(.9); }
}
#summary .s-total {
  font-family: var(--display); font-size: 16cqw; line-height: 1; color: #ffe14a;
  }
#summary .s-total.tick { animation: tick .2s ease-out; }
@keyframes tick { 40% { transform: scale(1.1); } }
#summary .s-sub {
  margin-top: 1.6cqw; font-family: var(--display); font-size: 5cqw; color: #fff;
  background: rgba(14, 22, 78, .5); padding: 1cqw 3.6cqw .8cqw; border-radius: 99px;
}
#summary .s-record {
  margin-bottom: 1cqw; font-family: var(--display); font-size: 5.2cqw; color: #fff;
  background: var(--accent); padding: 1cqw 3.6cqw .8cqw; border-radius: 1.6cqw;
  box-shadow: 0 .8cqw 0 var(--accent-d); transform: rotate(-4deg);
}

/* ---------- overlays ---------- */
#overlay > .panel, #overlay > .dialog { zoom: var(--mk, 1); }
#overlay {
  position: absolute; inset: 0 calc(-1 * var(--colL)); pointer-events: auto; z-index: 20;
  background: rgba(12, 22, 70, .5);
  display: grid; place-items: center;
  animation: fade .2s ease-out;
  place-items: unsafe center;
}
@keyframes fade { from { opacity: 0; } }
.dialog {
  width: min(74cqw, 420px); background: #fff; border-radius: 7cqw; padding: 7cqw 7cqw 6cqw;
  text-align: center; color: var(--ink);
  box-shadow: 0 2cqw 0 rgba(20, 30, 90, .25), 0 6cqw 12cqw rgba(0, 0, 40, .35);
  animation: pop .35s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.dialog h2 { font-family: var(--display); font-weight: 700; font-size: 8.4cqw; color: var(--accent); line-height: 1; letter-spacing: .03em; }
.dialog p { font-weight: 700; font-size: 4cqw; color: #7d7aa8; margin-top: 2.4cqw; line-height: 1.35; }
.row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 5cqw 2cqw 0;
}
.row > span { font-family: var(--display); font-size: 6.4cqw; color: var(--navy); letter-spacing: .03em; }
.toggle {
  position: relative; width: 15cqw; height: 7.8cqw; border-radius: 99px;
  background: #c7c0e6; transition: background .2s;
  box-shadow: inset 0 .8cqw 0 rgba(0, 0, 0, .1);
}
.toggle::after {
  content: ''; position: absolute; top: .9cqw; left: .9cqw; width: 6cqw; height: 6cqw; border-radius: 50%;
  background: #fff; box-shadow: 0 .6cqw 0 rgba(40, 30, 90, .25);
  transition: transform .22s cubic-bezier(.3, 1.5, .5, 1);
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(7.2cqw); }
.big-btn {
  display: block; margin: 6cqw auto 0; min-width: 36cqw; padding: 2.4cqw 7cqw 2cqw;
  background: linear-gradient(var(--accent-l), var(--accent)); border-radius: 4.4cqw; color: #fff;
  font-family: var(--display); font-size: 5.8cqw; line-height: 1; letter-spacing: .04em;
  box-shadow: 0 1.2cqw 0 var(--accent-d), inset 0 .7cqw 0 rgba(255, 255, 255, .3);
  transition: transform .1s, box-shadow .1s;
}
.big-btn:active { transform: translateY(1.2cqw); box-shadow: 0 .4cqw 0 var(--accent-d); }
.big-btn.green { background: linear-gradient(#45d985, var(--green)); box-shadow: 0 1.6cqw 0 var(--green-d), inset 0 .8cqw 0 rgba(255, 255, 255, .3); }
.big-btn.danger { background: linear-gradient(#ff6b7d, #ee3b52); box-shadow: 0 1.6cqw 0 #b01f35, inset 0 .8cqw 0 rgba(255, 255, 255, .3); }
.link-btn { margin-top: 5cqw; font-weight: 700; font-size: 3.4cqw; color: #e0445a; letter-spacing: .06em; text-decoration: underline; text-underline-offset: .8cqw; }
.ghost-btn { margin-top: 3.4cqw; font-weight: 700; font-size: 3.8cqw; color: #9a97c0; letter-spacing: .06em; }
.dialog.reward {
  position: relative; margin-top: 0; padding: 9cqw 6cqw 6cqw;
  background: radial-gradient(circle at 50% 38%, #fffbea 0%, #ffffff 45%, #eef3ff 100%);
  border: 1cqw solid #fff; box-shadow: 0 1.6cqw 0 #1d2566, 0 6cqw 12cqw rgba(0, 0, 40, .35);
}
.ribbon {
  position: absolute; top: -5.4cqw; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  font-family: var(--display); font-size: 6.4cqw; line-height: 1; letter-spacing: .04em; color: #fff;
  background: linear-gradient(#ffd84d, #ffb300); padding: 2.4cqw 6cqw 2.2cqw; border-radius: 2.6cqw;
  box-shadow: 0 0 0 .9cqw #fff, 0 1.3cqw 0 .9cqw #1d2566;
}
.burst { position: relative; width: 40cqw; height: 34cqw; margin: 0 auto -3cqw; display: grid; place-items: center; }
.burst::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 52cqw; height: 52cqw; margin: -26cqw 0 0 -26cqw; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 196, 30, .38) 0 11deg, rgba(255, 196, 30, 0) 11deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: spin 14s linear infinite;
}
.burst::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(#fff6c8, rgba(255, 246, 200, 0) 70%); }
@keyframes spin { to { transform: rotate(1turn); } }
.burst .offline-ico { position: relative; z-index: 1; width: 30cqw; height: 22.5cqw; }
.reward-amt {
  position: relative; font-family: var(--display); font-size: 10cqw; line-height: 1; color: #fff; white-space: nowrap;
  }
.dialog.reward .btn-row { flex-wrap: wrap; }
.dialog.reward .big-btn { max-width: 100%; padding-left: 4cqw; padding-right: 4cqw; }
.away-pill {
  display: inline-flex; align-items: center; gap: 1.4cqw; margin-top: 3.4cqw;
  background: #e6ecff; color: #6b74a8; border-radius: 99px; padding: 1.2cqw 3cqw 1cqw 1.4cqw;
  font-family: var(--display); font-size: 3.8cqw; line-height: 1; letter-spacing: .04em;
}
.away-pill svg { width: 4.6cqw; height: 4.6cqw; color: #8f98cc; }
.offline-amt {
  margin-top: 5cqw; display: inline-flex; align-items: center; gap: 2cqw;
  font-family: var(--display); font-size: 12cqw; color: var(--ink); line-height: 1;
}
.offline-amt svg { width: 16cqw; height: 12cqw; }

/* panels (fish, hooks) */
.panel {
  position: relative; width: 90cqw; max-height: none;
  display: flex; flex-direction: column;
  background: #eaf0ff; border: 1.2cqw solid #fff; border-radius: 6.5cqw;
  box-shadow: 0 2cqw 0 #1d2566, 0 6cqw 12cqw rgba(0, 0, 40, .4);
  animation: pop .35s cubic-bezier(.3, 1.6, .5, 1);
}
.panel-head {
  position: relative; flex: none; text-align: center; padding: 3.2cqw 0 3.8cqw;
  background: linear-gradient(#ffd84d, #ffb300); border-radius: 5.2cqw 5.2cqw 0 0;
  box-shadow: inset 0 -1.2cqw 0 rgba(140, 80, 0, .25);
}
.panel-head h2 {
  font-family: var(--display); font-weight: 700; font-size: 9cqw; line-height: 1; color: #fff; letter-spacing: .04em;
  }
.close-btn {
  position: absolute; top: -3.4cqw; right: -3.4cqw; width: 9.4cqw; height: 9.4cqw; border-radius: 50%;
  background: linear-gradient(#ff7088, #ff3d5e); color: #fff; display: grid; place-items: center;
  border: 1cqw solid #fff; box-shadow: 0 1cqw 0 #1d2566;
}
.close-btn svg { width: 4.4cqw; height: 4.4cqw; }
.close-btn:active { transform: translateY(.8cqw); box-shadow: none; }
.count-badge {
  position: absolute; left: 4cqw; top: 50%; transform: translateY(-55%);
  background: rgba(255, 255, 255, .92); color: #c98a00; font-family: var(--display); font-size: 4.2cqw;
  padding: 1.1cqw 2.6cqw .9cqw; border-radius: 99px;
}

.book { padding: 3.6cqw 4cqw 4.6cqw; overflow-y: auto; touch-action: pan-y; scrollbar-width: none; }
.book::-webkit-scrollbar { display: none; }
/* biome strip */
.btabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6cqw; margin-bottom: 3cqw; }
.btab {
  position: relative; height: 5.4cqw; border-radius: 99px; overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--zc) 28%, #ffffff); box-shadow: inset 0 0 0 .5cqw color-mix(in srgb, var(--zc) 55%, #ffffff);
}
.btab i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--zc); opacity: .55; }
.btab.done i { opacity: 1; }
.btab.on { box-shadow: inset 0 0 0 .7cqw var(--zc), 0 0 0 .7cqw #fff, 0 0 0 1.3cqw var(--zc); }
.btab.lk { background: #d7dcef; box-shadow: none; }
.btab.lk svg { position: relative; width: 3.2cqw; height: 3.2cqw; color: #8f96bf; }
.btab.lk.on { box-shadow: 0 0 0 .7cqw #fff, 0 0 0 1.3cqw #8f96bf; }
/* biome banner */
.biome {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2cqw;
  border-radius: 4.4cqw; padding: 2.6cqw 2.4cqw;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .18) 0 2.2cqw, transparent 2.3cqw),
    radial-gradient(circle at 84% 70%, rgba(255, 255, 255, .14) 0 1.4cqw, transparent 1.5cqw),
    var(--zc);
  box-shadow: inset 0 -1.2cqw 0 rgba(0, 0, 0, .16), inset 0 .6cqw 0 rgba(255, 255, 255, .22), 0 1cqw 0 rgba(20, 30, 90, .18);
}
.biome.lk { filter: saturate(.35) brightness(.95); }
.biome-mid { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; color: #fff; line-height: 1.05; min-width: 0; }
.biome-mid b {
  font-family: var(--display); font-weight: 700; font-size: 6.4cqw; white-space: nowrap;
  -webkit-text-stroke: 1.2cqw rgba(8, 14, 60, .55); paint-order: stroke fill; text-shadow: 0 .6cqw 0 rgba(8, 14, 60, .45);
}
.biome-prog { position: relative; width: 100%; max-width: 40cqw; height: 4.6cqw; border-radius: 99px; background: rgba(6, 14, 56, .38); overflow: hidden; }
.biome-prog i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(#ffe066, #ffb300); box-shadow: inset 0 -.6cqw 0 rgba(160, 90, 0, .35); }
.biome-prog span { position: relative; display: block; text-align: center; font-family: var(--display); font-size: 3.4cqw; line-height: 4.6cqw; color: #fff; -webkit-text-stroke: .8cqw rgba(8, 14, 60, .55); paint-order: stroke fill; }
.biome-req { font-family: var(--display); font-size: 3.6cqw; background: rgba(6, 14, 56, .38); padding: 1cqw 3cqw .8cqw; border-radius: 99px; }
.pager {
  width: 8.4cqw; height: 8.4cqw; border-radius: 50%; background: #fff; color: #1d2566;
  display: grid; place-items: center; box-shadow: 0 .9cqw 0 rgba(6, 14, 56, .35);
}
.pager svg { width: 4cqw; height: 4cqw; }
.pager svg.flip { transform: scaleX(-1); }
.pager:active { transform: translateY(.6cqw); box-shadow: none; }
/* fish cards: a little aquarium on top, a nameplate below, rarity on the edge */
.fish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6cqw; margin-top: 3.4cqw; }
.fish-tile {
  position: relative; display: flex; flex-direction: column; border-radius: 3.6cqw; overflow: hidden; text-align: center;
  background: #fff; box-shadow: 0 0 0 .55cqw var(--rc), 0 1.1cqw 0 .55cqw color-mix(in srgb, var(--rc) 70%, #1d2566);
}
.ft-tank {
  position: relative; padding: 1.4cqw 1cqw .6cqw;
  background:
    radial-gradient(circle at 80% 22%, rgba(255, 255, 255, .55) 0 .9cqw, transparent 1cqw),
    radial-gradient(circle at 88% 38%, rgba(255, 255, 255, .45) 0 .55cqw, transparent .65cqw),
    linear-gradient(180deg, color-mix(in srgb, var(--zw) 18%, #ffffff), color-mix(in srgb, var(--zw) 42%, #ffffff));
}
.fish-tile canvas { width: 100%; aspect-ratio: 150 / 96; display: block; filter: drop-shadow(0 .6cqw 0 rgba(6, 14, 56, .12)); }
.ft-count {
  position: absolute; right: 1cqw; top: 1cqw; font-family: var(--display); font-size: 2.8cqw; line-height: 1;
  color: #fff; background: rgba(6, 14, 56, .45); padding: .7cqw 1.4cqw .5cqw; border-radius: 99px;
}
.ft-plate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9cqw; padding: 1.6cqw 1.2cqw 2cqw; min-height: 11cqw; }
.fish-tile b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--display); font-weight: 700; font-size: 3.5cqw; color: var(--ink); line-height: 1.05;
}
.fish-tile.unknown { box-shadow: 0 0 0 .55cqw #c3cbe8, 0 1.1cqw 0 .55cqw #aab4dc; background: #eef1fb; }
.fish-tile.unknown .ft-tank { background: linear-gradient(180deg, color-mix(in srgb, var(--zw) 14%, #dfe4f4), color-mix(in srgb, var(--zw) 26%, #c3cbe8)); }
.fish-tile.unknown canvas { opacity: .8; }
.fish-tile.unknown b { color: #8f96bf; }
.depth-hint { display: block; font-family: var(--display); font-size: 2.8cqw; color: #8f96bf; letter-spacing: .02em; white-space: nowrap; }
.fish-tile.r-legendary:not(.unknown) { background: linear-gradient(#fffbe8, #ffe89a); }
.fish-tile.r-legendary:not(.unknown) .ft-tank { background: radial-gradient(circle at 50% 55%, #fff6c8 0%, #ffd84d 70%, #ffb300 100%); }
.stars { display: flex; justify-content: center; gap: .6cqw; }
.stars i {
  width: 3cqw; height: 3cqw; background: #d6dbef;
  clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 77%, 20% 100%, 30% 60%, 0 38%, 38% 35%);
}
.stars i.on { background: var(--rc); }
.fish-tile.r-common .stars i.on { background: #ffc21a; }
.perk-box {
  margin-top: 4.4cqw; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw;
  background: #fff; border-radius: 4cqw; padding: 2.6cqw 3cqw 3cqw; box-shadow: 0 1cqw 0 #c3cdef;
}
.perk-box b { font-family: var(--display); font-weight: 700; font-size: 5.4cqw; color: var(--ink); line-height: 1; letter-spacing: .03em; }
.perk-box .perk {
  display: inline-flex; align-items: center; gap: 1.2cqw;
  font-family: var(--display); font-size: 3.8cqw; line-height: 1; color: #fff; letter-spacing: .03em;
  background: linear-gradient(#45d985, var(--green)); padding: 1.3cqw 3cqw 1.1cqw; border-radius: 99px;
  box-shadow: 0 .7cqw 0 var(--green-d);
}
.perk-box .perk svg { width: 3.6cqw; height: 3.6cqw; }
.perk-box.locked .perk { background: linear-gradient(#b3bbdc, #9aa3c8); box-shadow: 0 .7cqw 0 #7d86ab; }
.hook-tile.peek { box-shadow: inset 0 0 0 1cqw #8f9cd8, 0 1.3cqw 0 #b8c3e6; }
.tile-price {
  position: absolute; left: 50%; bottom: -1.6cqw; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--display); font-size: 3.2cqw; line-height: 1; color: #fff; letter-spacing: .02em;
  background: #1d2566; padding: .9cqw 2cqw .7cqw; border-radius: 99px;
}
.hook-name { margin-top: 4cqw; text-align: center; font-family: var(--display); font-size: 4.6cqw; color: var(--ink); letter-spacing: .03em; }
.biome-locked { display: flex; flex-direction: column; align-items: center; gap: 3.4cqw; padding: 12cqw 0 10cqw; color: #8f96bf; }
.lock-disc { width: 20cqw; height: 20cqw; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--zw) 25%, #dde3f5); box-shadow: inset 0 -1.2cqw 0 rgba(6, 14, 56, .12); }
.lock-disc svg { width: 10cqw; height: 10cqw; color: #8f96bf; }
.biome-locked b { font-family: var(--display); font-weight: 700; font-size: 4.6cqw; }

.hooks { padding: 5cqw 5cqw 6cqw; overflow-y: auto; scrollbar-width: none; }
.hook-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.4cqw; }
.hook-tile {
  position: relative; aspect-ratio: 1; border-radius: 5cqw; background: #fff; display: grid; place-items: center;
  box-shadow: 0 1.3cqw 0 #c3cdef; transition: transform .12s;
}
.hook-tile canvas { width: 80%; height: 80%; min-width: 0; }
.hook-tile.sel { box-shadow: inset 0 0 0 1.1cqw #ffb300, 0 1.3cqw 0 #c98a00; background: #fff8dc; }
.hook-tile.locked { background: #dde4f7; box-shadow: 0 1.3cqw 0 #b8c3e6; }
.tile-lock { position: absolute; right: 1.8cqw; bottom: 1.8cqw; width: 4.4cqw; height: 4.4cqw; color: #8f96bf; }
.hook-tile.flash { box-shadow: inset 0 0 0 1.1cqw #ffc21a, 0 1.3cqw 0 #d99a00; transform: scale(1.06); }
.hook-tile.won { animation: won .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes won { 30% { transform: scale(1.18) rotate(-4deg); } }
.hook-tile:active { transform: scale(.95); }
.unlock-btn {
  display: flex; align-items: center; justify-content: center; gap: 2.4cqw; width: 70%; margin: 5cqw auto 0;
  padding: 2.4cqw 0 2cqw; border-radius: 4cqw; color: #fff;
  background: linear-gradient(#ffd84d, #ffb300);
  box-shadow: 0 1.6cqw 0 #a86c00, inset 0 .9cqw 0 rgba(255, 255, 255, .35);
  font-family: var(--display); font-size: 5.4cqw; line-height: 1; letter-spacing: .03em;
  }
.unlock-btn b { font-weight: 700; background: rgba(140, 80, 0, .3); padding: .9cqw 2.2cqw .6cqw; border-radius: 99px; font-size: 4.4cqw; }
.unlock-btn.poor { background: linear-gradient(#bcc4e0, #a3abcb); box-shadow: 0 1.6cqw 0 #7d86ab; }
.unlock-btn:active { transform: translateY(1.2cqw); box-shadow: 0 .4cqw 0 #a86c00; }
.offline-ico { width: 16cqw; height: 12cqw; }

/* Keep labels and touch controls readable in short embedded/mobile landscapes. */
@media (orientation: landscape) and (max-height: 480px) {
  #idleUI { flex-direction: row; align-items: flex-end; gap: 3cqw; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #playWrap { flex: none; }
  #cards { width: 74cqw; flex: none; }
  .c-title { font-size: 11px; white-space: normal; min-height: 26px; display: grid; place-content: center; }
  .dialog { max-height: calc(100dvh - 32px); overflow-y: auto; touch-action: pan-y; padding: 5cqw; }
  /* Measure the full reward before fitting it; a capped height hides COLLECT below the card. */
  .dialog.reward { max-height: none; overflow: visible; padding-top: 8cqw; }
  .dialog.reward .ribbon { position: relative; top: auto; left: auto; transform: none; margin-bottom: 2cqw; }
}

/* screenshot mode (dev scenes): no transitions so captures show the settled layout */
html.shot *, html.shot *::before, html.shot *::after { transition: none !important; animation: none !important; }

/* ---------- rewarded ads: boosts, x2 offers ---------- */
body.no-ads .rw-only { display: none !important; }
.tab-group, .boost-group { display: flex; flex-direction: column; align-items: flex-start; gap: 3cqw; }
.boost-group { align-items: center; padding-left: 2.6cqw; gap: 3.4cqw; margin-top: 1.6cqw; }
/* boost tabs: same shape and size as the other left tabs, in deep saturated colours, with an idle wobble and bubbles */
.boost-group { align-items: flex-start; padding-left: 0; }
.boost .edge-ico {
  background: linear-gradient(160deg, #16c257 0%, #0a8a3a 55%, #05672a 100%);
  box-shadow: 0 1cqw 0 #055c26, 0 1.6cqw 3cqw rgba(0, 60, 25, .35), inset 0 .6cqw 0 rgba(255, 255, 255, .28);
  animation: boostIdle 3.6s ease-in-out infinite; transform-origin: left center;
  --c1: #8dff5a; --c2: #d9ffc4; --c3: #043f18; --c4: #043f18;
}
#coinsBtn .edge-ico {
  background: linear-gradient(160deg, #ff8a1a 0%, #e25a00 55%, #b23f00 100%);
  box-shadow: 0 1cqw 0 #a84c00, 0 1.6cqw 3cqw rgba(90, 40, 0, .35), inset 0 .6cqw 0 rgba(255, 255, 255, .3);
  animation-delay: 1.8s;
  --coin: #ffd21f; --coinL: #fff39a; --coinD: #8a3a00; --coinInk: #8a3a00;
}
@keyframes boostIdle {
  0%, 70%, 100% { transform: scale(1) rotate(0); }
  76% { transform: scale(1.1) rotate(-4deg); }
  82% { transform: scale(1.05) rotate(3deg); }
  88% { transform: scale(1.08) rotate(-2deg); }
  94% { transform: scale(1) rotate(0); }
}
.boost .edge-ico::before, .boost .edge-ico::after {
  content: ''; position: absolute; left: 34%; bottom: 55%; width: 2.4cqw; height: 2.4cqw; border-radius: 50%;
  border: .5cqw solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .25); opacity: 0;
  animation: boostBubble 3.6s ease-out infinite; pointer-events: none;
}
.boost .edge-ico::after { left: 60%; width: 1.7cqw; height: 1.7cqw; animation-delay: .45s; }
#coinsBtn .edge-ico::before { animation-delay: 1.8s; }
#coinsBtn .edge-ico::after { animation-delay: 2.25s; }
@keyframes boostBubble {
  0%, 68% { opacity: 0; transform: translate(0, 0) scale(.4); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translate(1.4cqw, -11cqw) scale(1.1); }
}
.boost .edge-ico svg { width: 8.6cqw; height: 8.6cqw; filter: drop-shadow(0 .5cqw 0 rgba(0, 0, 0, .25)); }
.boost:active .edge-ico { transform: translateX(-1cqw); }
.boost .bx {
  position: absolute; right: -2.2cqw; top: -1.8cqw; z-index: 2; font-family: var(--display); font-weight: 700; font-size: 3.4cqw; line-height: 1;
  color: #fff; background: #ff2d55; padding: .7cqw 1.2cqw .5cqw; border-radius: 99px; border: .5cqw solid #fff;
  box-shadow: 0 .5cqw 0 #a8123a; transform: rotate(8deg);
}
.boost .vid-tag { position: absolute; right: -2.2cqw; bottom: -1.8cqw; z-index: 2; width: 6.6cqw; height: 6.6cqw; color: #ff2d55; background: #fff; border-radius: 1.8cqw; padding: .7cqw; box-shadow: 0 .6cqw 0 rgba(20, 30, 90, .35); display: block; }

.boost .vid-tag svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .3cqw 0 rgba(0, 0, 0, .25)); }
.boost.on .edge-ico { animation: boostOn 1.2s ease-in-out infinite; box-shadow: 0 0 0 .7cqw #ffe14a, 0 1cqw 0 .7cqw #c98a00, 0 0 5cqw rgba(255, 210, 60, .9); }
@keyframes boostOn { 50% { transform: scale(1.05); } }
.boost.on .vid-tag, .boost.cd .vid-tag { display: none; }
.boost.on .edge-lbl { color: #ffe14a; }
.boost.cd .edge-ico { background: #c3cbe6; box-shadow: 0 1cqw 0 #9aa3c8; animation: none; }
.boost.cd .edge-ico::before, .boost.cd .edge-ico::after, .boost.on .edge-ico::before, .boost.on .edge-ico::after { display: none; }
.boost.cd .edge-ico svg { opacity: .5; }
.boost.cd .bx { background: #9aa3c8; box-shadow: none; }
#boostChips { display: flex; gap: 1.6cqw; zoom: var(--k); }
#boostChips .chip {
  display: inline-flex; align-items: center; gap: 1cqw; background: #1d2566; color: #ffe14a; border: .6cqw solid rgba(255, 255, 255, .7);
  border-radius: 99px; padding: .8cqw 2.4cqw .8cqw 1.2cqw; font-family: var(--display); font-size: 4cqw; line-height: 1;
}
#boostChips .chip[hidden] { display: none; }
#boostChips .chip svg { width: 5cqw; height: 5cqw; }
#boostChips .chip span { color: #fff; }
#toast {
  position: absolute; left: 50%; top: 42%; z-index: 40; transform: translate(-50%, 20%); opacity: 0; pointer-events: none;
  white-space: nowrap; background: rgba(14, 22, 78, .88); color: #fff; border-radius: 99px; padding: 2cqw 4.4cqw 1.8cqw;
  font-family: var(--display); font-size: 4cqw; line-height: 1; letter-spacing: .03em; zoom: var(--k);
  transition: opacity .2s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.rw-btn {
  display: flex; align-items: center; justify-content: center; gap: 1.6cqw; width: 70%; margin: 3.4cqw auto 0;
  padding: 2cqw 0 1.8cqw; border-radius: 4cqw; color: #fff;
  background: linear-gradient(#45d985, var(--green)); box-shadow: 0 1.2cqw 0 var(--green-d);
  font-family: var(--display); font-size: 4.6cqw; line-height: 1; letter-spacing: .03em;
  }
.rw-btn[hidden] { display: none; }
.rw-btn svg { width: 5.4cqw; height: 5.4cqw; color: #1c9450; }
.rw-btn.poor { background: linear-gradient(#bcc4e0, #a3abcb); box-shadow: 0 1.2cqw 0 #7d86ab; }
.rw-btn.poor svg { color: #7d86ab; }
.rw-btn:active { transform: translateY(1cqw); box-shadow: none; }
.btn-row { display: flex; justify-content: center; gap: 3cqw; margin-top: 6cqw; }
.btn-row .big-btn { margin: 0; min-width: 0; }
.btn-row .big-btn.green { display: inline-flex; align-items: center; gap: 1.2cqw; padding-left: 4cqw; padding-right: 5cqw; }
.btn-row .big-btn.green svg { width: 6cqw; height: 6cqw; color: #1c9450; }
.btn-row .big-btn[disabled] { opacity: .5; }

/* ---------- score card after a catch ---------- */
#scorePanel {
  position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--colL)); right: calc(-1 * var(--colL)); z-index: 18;
  display: grid; place-items: center; background: rgba(12, 22, 70, .35); animation: fade .2s ease-out;
}
#scorePanel[hidden] { display: none; }
/* no card: title, fish, amount and buttons float over the dimmed scene */
#scorePanel { background: radial-gradient(ellipse at 50% 45%, rgba(10, 18, 70, .55) 0%, rgba(10, 18, 70, .25) 60%, rgba(10, 18, 70, .15) 100%); }
.score-card {
  position: relative; width: min(84cqw, 460px); zoom: var(--mk, 1); text-align: center; color: #fff;
  animation: pop .3s cubic-bezier(.3, 1.6, .5, 1);
}
.score-card .ribbon {
  position: static; transform: none; display: block; background: none; box-shadow: none; padding: 0;
  font-size: 11cqw; color: #fff; letter-spacing: .03em;
  }
.score-fish {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2cqw; min-height: 10cqw; margin-top: 3cqw;
}
.score-fish .sf { position: relative; display: block; }
.score-fish canvas { width: 14cqw; height: 9.8cqw; display: block; filter: drop-shadow(0 .6cqw 0 rgba(10, 18, 70, .45)); }
.score-fish .new {
  position: absolute; left: 50%; top: -1.8cqw; transform: translateX(-50%) rotate(-6deg);
  font-family: var(--display); font-weight: 700; font-size: 2.6cqw; line-height: 1; color: #1d2566;
  background: #ffe14a; padding: .5cqw 1.1cqw .3cqw; border-radius: 99px;
}
.score-fish .more { font-family: var(--display); font-weight: 700; font-size: 4cqw; color: #bcd0ff; }
.score-amt {
  position: relative; margin-top: 2cqw; font-family: var(--display); font-size: 17cqw; line-height: 1; color: #ffe14a;
  }
.score-amt.bump { animation: bump .35s cubic-bezier(.3, 1.8, .5, 1); }
.score-card .btn-row { position: relative; margin-top: 5cqw; justify-content: center; }
.score-card .big-btn[hidden] { display: none; }
.score-card .big-btn { display: inline-flex; align-items: center; justify-content: center; gap: 1.4cqw; padding: 2.4cqw 5cqw 2cqw; }
.score-card #scoreResume { min-width: 34cqw; letter-spacing: .02em; }
.score-card .big-btn.green svg { width: 7cqw; height: 7cqw; color: #16206a; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute; top: -24px; border-radius: 2px; opacity: .95;
  animation: confettiFall var(--d, 1.8s) cubic-bezier(.25, .6, .55, 1) forwards;
}
@keyframes confettiFall { to { transform: translate(var(--dx, 0), 110vh) rotate(var(--r, 360deg)); } }
html.shot .confetti i { top: calc(8% + var(--dx, 0px) * 4); }

/* score screen: title at the top, fish, amount and buttons spread evenly down the screen */
#scorePanel { display: flex; justify-content: center; align-items: stretch; }
.score-card {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: calc(4cqw + env(safe-area-inset-top)) 0 calc(6cqw + env(safe-area-inset-bottom));
}
.score-card .ribbon, .score-fish, .score-amt, .score-card .btn-row { margin: 0; }
.score-amt { font-size: 20cqw; }
.score-fish canvas { width: 17cqw; height: 11.9cqw; }
body.score #hud { opacity: 0; pointer-events: none; }

/* ---------- original outlined display lettering (Lilita One, white fill with a dark outline) ---------- */
#zoneBanner small, .c-title, .link-btn, .ghost-btn { font-weight: 900; }
.dialog p { font-weight: 800; }
.cash-label { -webkit-text-stroke: 1cqw var(--navy); paint-order: stroke fill; }
#cash { -webkit-text-stroke: 1.8cqw var(--navy); paint-order: stroke fill; text-shadow: 0 1.2cqw 0 var(--navy); }
#depthNow { -webkit-text-stroke: 2cqw var(--navy); paint-order: stroke fill; text-shadow: 0 1.2cqw 0 var(--navy); }
#popText b { -webkit-text-stroke: 2.2cqw var(--c, var(--accent)); paint-order: stroke fill; text-shadow: 0 1.4cqw 0 var(--cd, var(--accent-d)); }
.edge-lbl { -webkit-text-stroke: 1cqw var(--navy); paint-order: stroke fill; }
.play-txt { -webkit-text-stroke: 1.2cqw #a86c00; paint-order: stroke fill; text-shadow: 0 .8cqw 0 #a86c00; }
.c-price span { -webkit-text-stroke: 1.1cqw #1d2566; paint-order: stroke fill; text-shadow: 0 .5cqw 0 #1d2566; }
#summary .s-total { -webkit-text-stroke: 2.4cqw var(--navy); paint-order: stroke fill; text-shadow: 0 1.6cqw 0 var(--navy); }
.big-btn { -webkit-text-stroke: .9cqw rgba(170, 50, 0, .45); paint-order: stroke fill; }
.big-btn.green { -webkit-text-stroke-color: rgba(0, 90, 40, .45); }
.big-btn.danger { -webkit-text-stroke-color: rgba(140, 10, 30, .45); }
.ribbon { -webkit-text-stroke: 1.3cqw #1d2566; paint-order: stroke fill; text-shadow: 0 .7cqw 0 #1d2566; }
.reward-amt { -webkit-text-stroke: 2.2cqw #1d2566; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #1d2566; }
.panel-head h2 { -webkit-text-stroke: 1.6cqw #1d2566; paint-order: stroke fill; text-shadow: 0 1cqw 0 #1d2566; }
.unlock-btn { -webkit-text-stroke: .9cqw rgba(140, 80, 0, .5); paint-order: stroke fill; }
.unlock-btn b { -webkit-text-stroke: 0; }
.unlock-btn.poor { -webkit-text-stroke-color: rgba(50, 60, 110, .4); }
.rw-btn { -webkit-text-stroke: .8cqw rgba(0, 90, 40, .45); paint-order: stroke fill; }
.rw-btn.poor { -webkit-text-stroke-color: rgba(50, 60, 110, .4); }
.score-card .ribbon { -webkit-text-stroke: 2cqw #16206a; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #16206a; }
.score-amt { -webkit-text-stroke: 2.2cqw #16206a; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #16206a; }

/* short landscape phones: menus go wide instead of tall */
@media (orientation: landscape) and (max-height: 480px) {
  .panel { width: min(calc(100vw - 56px), 170cqw); }
  .hooks { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 5cqw; align-items: center; }
  .hooks > .hook-grid { grid-column: 1; grid-row: span 4; }
  .hooks > :not(.hook-grid) { grid-column: 2; }
  .hooks .perk-box { margin-top: 0; }
  .hooks .unlock-btn, .hooks .rw-btn { width: 100%; }
  .fish-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* menus: the fit-to-height scale (--fit, set in fitOverlay) also applies during the pop-in */
#overlay > .panel, #overlay > .dialog {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; /* stays centred even when taller than the screen before fitting */
  transform: scale(var(--fit, 1)); animation: popFit .3s cubic-bezier(.3, 1.3, .5, 1);
}
@keyframes popFit { from { transform: scale(calc(var(--fit, 1) * .7)); opacity: 0; } }

/* ---------- first-time tutorial: small dark hint pills in the style of the in-game hints ---------- */
body.tut-intro #sideBtns, body.tut-intro #cards, body.tut-intro #bestBox, body.tut-intro #settingsBtn { visibility: hidden; pointer-events: none; }
body.tut-intro #cards .card { pointer-events: none; }
.tut-tip {
  position: absolute; z-index: 6; pointer-events: none; white-space: nowrap; width: max-content;
  font-family: var(--display); font-size: 4cqw; line-height: 1; letter-spacing: .03em; color: #fff;
  background: rgba(14, 22, 78, .62); border-radius: 99px; padding: 1.7cqw 3.2cqw 1.5cqw;
  animation: tipBob 2.4s ease-in-out infinite;
}
.tut-tip::before {
  content: ''; position: absolute; left: 50%; width: 3.4cqw; height: 1.8cqw; margin-left: -1.7cqw; background: rgba(14, 22, 78, .62);
}
.tut-tip.up { top: calc(100% + 4.4cqw); left: 50%; translate: -50% 0; }
.tut-tip.up::before { bottom: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tut-tip.down { bottom: calc(100% + 6.6cqw); left: 50%; translate: -50% 0; animation-name: tipBobDown; }
.tut-tip.down::before { top: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tut-tip[hidden] { display: none; }
.tip-max {
  display: inline-block; font-style: normal; color: #fff; background: #ff2d3f; border-radius: 1cqw;
  padding: .4cqw 1.2cqw .25cqw; font-size: .9em; vertical-align: .05em;
}
@keyframes tipBob { 50% { margin-top: -.7cqw; } }
@keyframes tipBobDown { 50% { margin-bottom: .7cqw; } }
body.tut-intro #playWrap::after {
  content: ''; position: absolute; inset: -1.4cqw; border-radius: 50%; pointer-events: none;
  border: .5cqw solid rgba(255, 255, 255, .55); animation: tutRing 2.2s ease-out infinite;
}
@keyframes tutRing { from { transform: scale(.96); opacity: 1; } 70%, to { transform: scale(1.2); opacity: 0; } }
#idleUI.away .tut-tip { display: none; }

/* steering lesson: no dimming, one compact panel low on the screen; a tap anywhere continues */
#tutDrag {
  position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--colL)); right: calc(-1 * var(--colL)); z-index: 16;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 13vh; pointer-events: auto; cursor: pointer;
}
#tutDrag[hidden] { display: none; }
.tut-card { zoom: var(--k, 1); display: flex; justify-content: center; animation: fade .25s ease-out; }
/* just the steering gesture: a hook sliding left and right between two arrows */
.tut-track {
  position: relative; width: 60cqw; height: 13cqw; border-radius: 99px;
  background: rgba(14, 22, 78, .28); display: flex; align-items: center; justify-content: space-between; padding: 0 2.4cqw; color: #ffe14a;
}
.tut-track .tt-arr { width: 7cqw; height: 7cqw; filter: drop-shadow(0 .5cqw 0 rgba(14, 22, 78, .45)); }
.tut-track .tt-arr.l { animation: nudgeL .9s ease-in-out infinite; }
.tut-track .tt-arr.r { animation: nudgeR .9s ease-in-out infinite; }
.tt-knob {
  position: absolute; top: 50%; left: 50%; width: 11.5cqw; height: 11.5cqw; margin: -5.75cqw 0 0 -5.75cqw; border-radius: 50%;
  background: #fff; color: var(--navy); display: grid; place-items: center; box-shadow: 0 .9cqw 0 rgba(14, 22, 78, .45);
  animation: knob 1.8s ease-in-out infinite;
}
.tt-knob svg { width: 8cqw; height: 8cqw; }
@keyframes knob { 0%, 100% { translate: -17cqw 0; } 50% { translate: 17cqw 0; } }
@media (orientation: landscape) and (max-height: 480px) {
  .tut-tip.up { top: 50%; left: calc(100% + 4cqw); translate: 0 -50%; }
  .tut-tip.up::before { bottom: auto; top: 50%; left: auto; right: 100%; margin: -1.7cqw 0 0; width: 1.8cqw; height: 3.4cqw; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
  #tutDrag { padding-bottom: 6vh; }
}

/* ---------- performance: hidden UI neither animates nor paints ---------- */
#idleUI { transition: visibility 0s; }
#idleUI.away { visibility: hidden; transition: visibility 0s linear .45s; }
#sideBtns.away { visibility: hidden; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .25s, visibility 0s linear .35s; }
#idleUI.away *, #sideBtns.away *, body.ov #sideBtns *, body.score #sideBtns *, body.ov #idleUI *, body.score #idleUI * { animation-play-state: paused !important; }