/* ─────────────────────────────────────────────────────────────────
   Whale Hunt styles
   Two sections: (1) the WalletHunt widget (HUD + celebration overlay, used over any
   WalletGraph) and (2) the /hunt arena page layout. Mobile-first: motion is transform/
   opacity only (animated CSS custom properties do not run on mobile Safari).
   ───────────────────────────────────────────────────────────────── */

/* ============ 1. WIDGET: celebration layer ============ */
.whc-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

/* A flying gold coin. JS sets the full transform (translate3d + scale) each frame, so
   CSS only paints + centers it (margin = -half) and never sets transform. */
.whc-coin {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 38% 30%, #7fe6c2 0%, #2bb588 44%, #1c7d5e 78%, #11543f 100%);
  box-shadow: 0 0 9px 2px rgba(43, 181, 136, .6), inset 0 0 0 1.5px rgba(196, 255, 232, .5);
  will-change: transform, opacity;
}
/* our in-house USDT mark on every coin (flying coins + the HUD) */
/* light lavender + a dark edge so the purple tether reads clearly on the green coin */
.whc-t { width: 62%; height: 62%; fill: #7c3aed; filter: drop-shadow(0 0 1.1px rgba(255, 255, 255, .75)); }

/* "+$0.02" rising off the cracked node. */
.whc-float {
  position: absolute;
  transform: translate(-50%, -4px);
  font: 800 15px/1 var(--mono, monospace);
  color: #ffe39a;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8), 0 0 14px rgba(255, 196, 73, .6);
  animation: whc-rise 1.1s ease-out forwards;
  white-space: nowrap;
}
@keyframes whc-rise {
  from { transform: translate(-50%, -4px); opacity: 0; }
  18% { opacity: 1; }
  to { transform: translate(-50%, -46px); opacity: 0; }
}

/* Tier banner ("Whale", "JACKPOT"). */
.whc-banner {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.2, 1.4, .35, 1), opacity .3s ease;
}
.whc-banner.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.whc-banner b {
  display: block;
  font: 900 30px/1 var(--font, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 18px rgba(255, 196, 73, .75), 0 1px 3px rgba(0, 0, 0, .8);
}
.whc-banner span {
  display: block;
  margin-top: 6px;
  font: 800 16px/1 var(--mono, monospace);
  color: #ffd76a;
}

/* Screen-edge gold flash; intensity comes from --whc-g (set per tier). */
.whc-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, transparent 52%, rgba(255, 184, 73, .9) 100%);
}
/* opacity is driven by JS (flashGlow) via a plain transition - kept out of @keyframes so it
   runs on mobile Safari. */

/* ============ 1b. WIDGET: the balance HUD pill ============ */
.whc-hud {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 15px;
  width: max-content;
  max-width: calc(100% - 24px);
  background: rgba(12, 16, 26, .82);
  border: 1px solid rgba(255, 196, 73, .26);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono, monospace);
  pointer-events: none;
}
.whc-hud--top { top: 12px; left: 50%; transform: translateX(-50%); }
.whc-hud--tr { top: 12px; right: 12px; }
.whc-hud-row { display: flex; align-items: center; gap: 7px; }
.whc-hud-bar { display: flex; align-items: center; gap: 8px; }

.whc-coin-ic {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #7fe6c2 0%, #2bb588 44%, #1c7d5e 78%, #11543f 100%);
  box-shadow: 0 0 8px 1px rgba(43, 181, 136, .55);
}
.whc-bal { font-weight: 800; font-size: 15px; color: #ffe7ab; letter-spacing: .01em; }
.whc-cap { font-size: 11px; color: rgba(255, 255, 255, .42); margin-left: -3px; }
/* cooldown ring: a depleting gold arc with the seconds left in its centre, sitting just below
   the balance pill (NOT inside it - the timer never stretches the pill). JS drives the offset. */
.whc-ring {
  position: absolute;
  z-index: 6;
  width: 39px; height: 39px;
  display: grid; place-items: center;
  pointer-events: none;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .5));
}
.whc-ring[hidden] { display: none; }
/* top-right, just left of the trophy (leaderboard) button - to the right of the centred pill */
.whc-ring--top { top: 13px; right: 58px; }
.whc-ring--tr { top: 60px; right: 16px; }
.whc-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.whc-ring-bg { fill: rgba(12, 16, 26, .92); stroke: rgba(255, 255, 255, .12); stroke-width: 3; }
.whc-ring-fg {
  fill: none; stroke: #ffc24a; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 119.38; stroke-dashoffset: 0;
  transition: stroke-dashoffset .25s linear;
  filter: drop-shadow(0 0 3px rgba(255, 194, 73, .7));
}
.whc-ring-s { position: relative; z-index: 1; font: 800 12px/1 var(--mono, monospace); color: #ffe7ab; }
/* lifetime progress to the cap - fills the bar row, shrinking only to make room for the countdown */
.whc-track {
  flex: 1 1 auto;
  min-width: 92px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.whc-track > i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffd76a, #ffb449);
  transition: transform .5s cubic-bezier(.3, 1, .4, 1);
}

/* charging (cooldown): the coin pulses to read as "filling up", not punitive waiting */
.whc-hud--cd .whc-coin-ic { animation: whc-charge 1s ease-in-out infinite; }
@keyframes whc-charge {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(43, 181, 136, .35); opacity: .7; }
  50% { box-shadow: 0 0 12px 3px rgba(43, 181, 136, .8); opacity: 1; }
}
/* coins-landed: the HUD coin pops (scale only, no translate compositing) */
.whc-coin-ic.pop { animation: whc-pop .42s cubic-bezier(.2, 1.5, .4, 1) 1; }
@keyframes whc-pop {
  0% { transform: scale(1); }
  42% { transform: scale(1.42); }
  100% { transform: scale(1); }
}
.whc-hud--max { border-color: rgba(255, 196, 73, .7); box-shadow: 0 0 22px rgba(255, 196, 73, .5); }

/* small contextual message under the pill (cap reached, etc.) */
.whc-toast {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(12, 16, 26, .92);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #e9edff;
  font: 600 12px/1.2 var(--font, sans-serif);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.whc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .whc-coin, .whc-float, .whc-banner, .whc-hud--cd .whc-coin-ic, .whc-coin-ic.pop {
    animation: none !important;
    transition: none !important;
  }
}

/* ============ 2. ARENA: the /hunt page ============ */
/* The arena is a fixed full-screen surface - the page itself must NEVER scroll. A stray vertical
   scroll pushed the in-flow top nav out of view; overlays/sheets scroll internally instead. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* Arena sits BELOW the 51px app nav (not inset:0) so the canvas/overlay can never paint over
   it - the nav was intermittently vanishing when the shell covered the full viewport and only
   won the nav back on z-index. */
.hunt-shell { position: fixed; top: 51px; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; background: #06060d; }
.hunt-stage { position: absolute; inset: 0; }
.hunt-graph, .hunt-overlay { position: absolute; inset: 0; }
.hunt-overlay { pointer-events: none; z-index: 3; }
.hunt-graph .wg-canvas { width: 100%; height: 100%; display: block; }

/* top controls (help + leaderboard); the shell already starts below the nav, so just a small inset */
.hunt-top {
  position: absolute;
  top: 12px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 7;
  pointer-events: none;
}
.hunt-iconbtn {
  pointer-events: auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #cdd6f4;
  background: rgba(12, 16, 26, .72);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform .12s ease, color .12s ease, border-color .12s ease;
}
.hunt-iconbtn:hover { color: #fff; border-color: rgba(255, 196, 73, .5); transform: translateY(-1px); }
.hunt-iconbtn:active { transform: scale(.94); }

/* Compact 2-row HUD on the same top line as the controls: it is narrow enough to sit between
   the left help/info cluster and the right trophy without crowding them. */
.hunt-overlay .whc-hud--top { top: 12px; }

/* bottom hub: the recently-discovered feed with the biggest-move spotlight stacked under it */
.hunt-bottom {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--bottom-nav-h, 0px) + 10px);
  z-index: 7;
  padding: 0 10px;
  display: flex; flex-direction: column; gap: 8px;
  perspective: 700px;   /* 3D depth for the spotlight flip */
}
/* recently-discovered feed: a horizontal strip */
.hunt-feed { min-width: 0; }
.hunt-feed-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 4px 6px;
}
.hunt-feed-title { font: 800 12px/1 var(--font, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: #e9edff; }
.hunt-feed-hint { font: 600 11px/1 var(--font, sans-serif); color: rgba(255, 255, 255, .4); }
.hunt-feed-row {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.hunt-feed-row::-webkit-scrollbar { display: none; }
.hunt-chip {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 116px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(14, 18, 28, .82);
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 3px solid var(--ct, #7fd1c0);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer; text-align: left;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.hunt-chip:active { transform: scale(.96); }
.hunt-chip--active, .hunt-chip:hover { background: rgba(22, 28, 42, .92); }
.hunt-chip--active { box-shadow: 0 0 0 1px var(--ct, #7fd1c0); }
.hunt-chip-tier { font: 800 10px/1 var(--font, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--ct, #7fd1c0); }
.hunt-chip-addr { font: 700 12px/1 var(--mono, monospace); color: #e9edff; }
.hunt-chip-vol { font: 700 11px/1 var(--mono, monospace); color: rgba(255, 255, 255, .55); }
.hunt-chip--minnow { --ct: #7fd1c0; } .hunt-chip--fish { --ct: #5ec8e0; }
.hunt-chip--shark { --ct: #7c9cff; } .hunt-chip--whale { --ct: #b78bff; }
.hunt-chip--leviathan { --ct: #ffd76a; }

/* status line over the graph while loading / indexing */
.hunt-status {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(12, 16, 26, .8);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #cdd6f4; font: 600 13px/1 var(--font, sans-serif);
}
.hunt-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd76a; animation: hunt-blink 1s ease-in-out infinite; }
@keyframes hunt-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* spotlight: a thin live hook (biggest recent move) under the discoveries feed, into the scanner */
.hunt-spotlight {
  align-self: center; max-width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(12, 16, 26, .82); border: 1px solid rgba(124, 92, 255, .32);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(233, 237, 255, .85); font: 600 12px/1 var(--font, sans-serif);
  text-decoration: none; white-space: nowrap; overflow: hidden;
  transform-origin: center; transition: transform .24s ease, opacity .24s ease; will-change: transform;
}
.hunt-spotlight[hidden] { display: none; }
.hunt-spotlight.flip { transform: rotateX(-90deg); opacity: .15; }   /* flap to the next biggest move */
.hunt-spot-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #ff5d6c; animation: hunt-blink 1.1s ease-in-out infinite; }
.hunt-spot-txt { overflow: hidden; text-overflow: ellipsis; }
.hunt-spot-txt b { color: #fff; }
.hunt-spot-cta { flex: 0 0 auto; color: var(--accent, #9b7cff); font-weight: 800; }
/* Forming-signal variant: a purple (intel) dot instead of the red move dot + a met/total badge. */
.hunt-spot-dot.sig { background: #9b7cff; }
.hunt-spot-prog { font: 800 10px/1 var(--mono, monospace); color: #9b7cff; opacity: .9; }

/* node inspector popup (bottom card; sits over the feed slot while a node is selected) */
.hunt-inspect {
  position: absolute; left: 10px; right: 10px;
  bottom: calc(var(--bottom-nav-h, 0px) + 10px);
  z-index: 9;
  padding: 13px 14px;
  border-radius: 14px;
  background: rgba(12, 16, 26, .95);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hunt-inspect-x { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; display: grid; place-items: center; border: none; background: none; color: rgba(255, 255, 255, .5); cursor: pointer; }
.hunt-inspect-x:hover { color: #fff; }
.hunt-inspect-addr { font: 800 14px/1.2 var(--mono, monospace); color: #fff; padding-right: 30px; }
.hunt-inspect-stats { margin-top: 4px; font: 600 12px/1.4 var(--font, sans-serif); color: rgba(233, 237, 255, .6); }
.hunt-inspect-stats b { color: #cdd6f4; }
.hunt-inspect-bonus { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 13px/1.4 var(--font, sans-serif); color: #e9edff; }
.hunt-inspect-bonus b { color: #ffe7ab; }
.hunt-inspect-coin { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #7fe6c2, #2bb588 60%, #11543f); box-shadow: 0 0 7px rgba(43, 181, 136, .5); }
.hunt-inspect-you { font: 700 12px/1 var(--mono, monospace); color: #9ad0ff; }
.hunt-inspect-open { display: inline-block; margin-top: 12px; font: 700 13px/1 var(--font, sans-serif); color: var(--accent, #9b7cff); text-decoration: none; }
.hunt-inspect-open:hover { text-decoration: underline; }
.hunt-inspect-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.hunt-inspect-actions .hunt-inspect-open { margin-top: 0; }
.hunt-inspect-follow {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  font: 700 13px/1 var(--font, sans-serif); color: #cdd6f4;
  background: rgba(124, 92, 255, .14); border: 1px solid rgba(124, 92, 255, .45);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.hunt-inspect-follow:hover { background: rgba(124, 92, 255, .24); color: #fff; }
.hunt-inspect-follow.is-following { background: rgba(124, 92, 255, .32); border-color: var(--accent, #9b7cff); color: #fff; }

/* [hidden] must beat the flex/grid display rules below, or the sheet + funnel can't be
   dismissed (the attribute's UA display:none loses to .hunt-sheet{display:flex}). */
.hunt-sheet[hidden], .hunt-intro[hidden] { display: none !important; }
.hunt-intro:not(.show) { pointer-events: none; }

/* leaderboard sheet */
.hunt-sheet {
  position: fixed; inset: 0; z-index: 200;   /* above the z-100 nav: sheets are top-level modals */
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4, 6, 12, .6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.hunt-sheet-card {
  width: 100%; max-width: 520px;
  max-height: 72vh; overflow: hidden;
  display: flex; flex-direction: column;   /* fixed head + a scrolling body, so Close never scrolls away */
  background: #0c1018;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.hunt-sheet-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* the only scroller inside the sheet - the head above it stays put */
.hunt-board-list, .hunt-limits-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.hunt-sheet-head b { font: 800 16px/1 var(--font, sans-serif); color: #fff; }
.hunt-sheet-x { padding: 8px 12px; margin: -8px -8px -8px 0; background: none; border: none; color: rgba(255, 255, 255, .7); font: 700 13px/1 var(--font, sans-serif); cursor: pointer; }
.hunt-sheet-x:hover { color: #fff; }
/* one clean line per hunter: rank | name (truncates) | finds | volume - never wraps */
.hunt-board-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.hunt-board-row.is-you { background: rgba(255, 196, 73, .08); border-radius: 8px; }
.hunt-board-rank { font: 800 14px/1 var(--mono, monospace); color: #ffd76a; text-align: center; }
.hunt-board-name { font: 700 13px/1.2 var(--font, sans-serif); color: #e9edff; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hunt-board-name em { font-style: normal; font-size: 10px; color: #ffd76a; margin-left: 4px; }
.hunt-board-finds { font: 700 12px/1 var(--mono, monospace); color: #cdd6f4; white-space: nowrap; }
.hunt-board-vol { font: 700 12px/1 var(--mono, monospace); color: rgba(255, 255, 255, .5); white-space: nowrap; text-align: right; }
.hunt-board-empty { text-align: center; color: rgba(255, 255, 255, .5); padding: 24px 8px; font: 600 13px/1.5 var(--font, sans-serif); }

/* competitive "your standing" banner (rank + the rival to catch) */
.hunt-stand { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 11px 14px; border-radius: 11px; background: rgba(124, 92, 255, .14); border: 1px solid rgba(124, 92, 255, .42); }
.hunt-stand-rank { flex: 0 0 auto; font: 800 17px/1 var(--mono, monospace); color: #c4b5ff; }
.hunt-stand-gap { font: 600 13px/1.3 var(--font, sans-serif); color: #e9edff; }
.hunt-stand--lead { background: rgba(255, 196, 73, .14); border-color: rgba(255, 196, 73, .5); }
.hunt-stand--lead .hunt-stand-rank { color: #ffd76a; }
.hunt-stand--new { justify-content: center; text-align: center; color: rgba(233, 237, 255, .82); }
/* medal podium: rank 1 stays gold (default), 2 silver, 3 bronze + a subtle left wash */
.hunt-board-row.medal--2 .hunt-board-rank { color: #cfd6e6; }
.hunt-board-row.medal--3 .hunt-board-rank { color: #e0a36b; }
.hunt-board-row.medal--1 { background: linear-gradient(90deg, rgba(255, 196, 73, .13), transparent 70%); }
.hunt-board-row.medal--2 { background: linear-gradient(90deg, rgba(207, 214, 230, .10), transparent 70%); }
.hunt-board-row.medal--3 { background: linear-gradient(90deg, rgba(224, 163, 107, .12), transparent 70%); }
.hunt-board-row.is-you { background: rgba(255, 196, 73, .12); }   /* the player wins the row tint, even on the podium */

/* "add your nickname" CTA under the standing card + the nickname sheet */
.hunt-name-cta {
  display: block; width: 100%; margin-top: 10px;
  padding: 11px 14px; border-radius: 10px; border: none; cursor: pointer;
  font: 800 13px/1 var(--font, sans-serif); color: #fff;
  background: linear-gradient(135deg, var(--accent, #9b7cff), #6d5cff);
  box-shadow: 0 8px 20px rgba(124, 92, 255, .35);
}
.hunt-name-cta:active { transform: scale(.98); }
.hunt-name-cta--edit { background: none; box-shadow: none; border: 1px solid rgba(255, 255, 255, .15); color: rgba(233, 237, 255, .8); font-size: 12px; }
.hunt-nick-body { display: flex; flex-direction: column; gap: 12px; }
.hunt-nick-hint { margin: 0; font: 500 13px/1.5 var(--font, sans-serif); color: rgba(233, 237, 255, .72); }
.hunt-nick-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: 11px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  color: #fff; font: 700 15px/1 var(--mono, monospace);
}
.hunt-nick-input:focus { outline: none; border-color: var(--accent, #9b7cff); }
.hunt-nick-err { min-height: 15px; font: 600 12px/1.3 var(--font, sans-serif); color: #ff7a8a; }

/* top-left control cluster (help + rewards/limits info) */
.hunt-top-l { display: flex; gap: 8px; }

/* rewards & limits sheet (the on-canvas upsell legend) */
.hunt-limits-body { display: flex; flex-direction: column; }
.hunt-lim-intro { margin: 0 0 4px; font: 500 13px/1.5 var(--font, sans-serif); color: rgba(233, 237, 255, .85); }
.hunt-lim-sec { margin: 14px 0 4px; font: 800 11px/1 var(--font, sans-serif); letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.hunt-lim-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.hunt-lim-tier { font: 800 10px/1 var(--font, sans-serif); letter-spacing: .05em; text-transform: uppercase; color: var(--ct, #7fd1c0); }
.hunt-lim-vol { font: 700 12px/1 var(--mono, monospace); color: #cdd6f4; }
.hunt-lim-rew { font: 700 12px/1 var(--mono, monospace); color: #ffd76a; }
.hunt-plan-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 8px; }
.hunt-plan-row.is-you { background: rgba(124, 92, 255, .12); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .4); }
.hunt-plan-name { font: 700 13px/1 var(--font, sans-serif); color: #e9edff; }
.hunt-plan-name em { font-style: normal; font-size: 10px; color: var(--accent, #9b7cff); margin-left: 5px; }
.hunt-plan-cd { font: 700 12px/1 var(--mono, monospace); color: #9ad0ff; }
.hunt-plan-cap { font: 700 12px/1 var(--mono, monospace); color: #ffd76a; }
.hunt-lim-note { margin: 12px 0 0; font: 500 11.5px/1.5 var(--font, sans-serif); color: rgba(255, 255, 255, .45); }

/* 2-page intro (how it works -> rewards & limits) */
.hunt-intro-card { max-height: 88vh; overflow-y: auto; }
.hunt-intro-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 14px; }
.hunt-intro-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .2s; }
.hunt-intro-dots i.on { background: var(--accent, #9b7cff); }
.hunt-intro-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.hunt-intro-actions .hunt-cta { flex: 1; }
.hunt-cta-ghost { padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: none; color: rgba(233, 237, 255, .85); font: 700 14px/1 var(--font, sans-serif); cursor: pointer; transition: border-color .12s ease; }
.hunt-cta-ghost:hover { border-color: rgba(255, 255, 255, .32); }

/* node legend (intro "what pays" page): SVG swatches mirror the real canvas nodes */
.hunt-guide-row { display: flex; align-items: center; gap: 14px; padding: 11px 2px; border-bottom: 1px solid rgba(255, 255, 255, .05); text-align: left; }
.hunt-guide-node { flex: 0 0 auto; width: 46px; height: 46px; position: relative; }
.hg-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hg-cell { fill: #0c1220; stroke: rgba(124, 209, 176, .55); stroke-width: 1.3; }
.hg-cell-ent { fill: #1a1410; stroke: rgba(255, 186, 73, .55); }
.hg-wg { fill: #6fdcc0; }
.hg-ring { fill: none; }
.hunt-guide-node.fresh .hg-ring { fill: #ffc24a; filter: drop-shadow(0 0 5px rgba(255, 194, 73, .55)); transform-box: fill-box; transform-origin: center; animation: hunt-gpulse 1.2s ease-in-out infinite; }
@keyframes hunt-gpulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
.hunt-guide-node.known { opacity: .42; }

/* inline USDT credit coin - used instead of "$" on all bonus / credit amounts */
.usdt-ic {
  display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em;
  margin-right: .14em; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 38% 30%, #7fe6c2, #2bb588 58%, #11543f);
  box-shadow: inset 0 0 0 1px rgba(196, 255, 232, .4);
}
.usdt-ic::after { content: "\20AE"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 .66em/1 var(--font, sans-serif); color: #7c3aed; text-shadow: 0 0 1.2px rgba(255, 255, 255, .8); }

/* Hunt LOG - a small top-left button (clear of the centred HUD + right-side ring/trophy) that opens
   a scrolling list of recent outcomes, so a toast that flashed by in ~2s can be read back. */
.whc-logbtn {
  position: absolute; z-index: 7; top: 12px; left: 12px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(12, 16, 26, .92); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .8); box-shadow: 0 5px 14px rgba(0, 0, 0, .5);
  transition: color .15s, border-color .15s;
}
.whc-logbtn:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.whc-logbtn--new::after {
  content: ''; position: absolute; top: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ffc449; box-shadow: 0 0 0 2px rgba(12, 16, 26, .92);
}
.whc-log {
  position: absolute; z-index: 8; top: 52px; left: 12px;
  width: min(280px, calc(100vw - 24px));
  max-height: min(46vh, 360px); overflow-y: auto;
  background: #0c1018; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 8px; box-shadow: 0 12px 36px rgba(0, 0, 0, .55);
  -webkit-overflow-scrolling: touch;
}
.whc-log[hidden] { display: none; }
.whc-log-head { font: 800 11px/1 var(--font, sans-serif); letter-spacing: .4px; text-transform: uppercase; color: rgba(255, 255, 255, .55); padding: 4px 6px 8px; }
.whc-log-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-top: 1px solid rgba(255, 255, 255, .05); }
.whc-log-tx { flex: 1 1 auto; font: 600 12px/1.35 var(--font, sans-serif); color: #e9edff; }
.whc-log-tm { flex: 0 0 auto; font: 700 10px/1 var(--mono, monospace); color: rgba(255, 255, 255, .4); }
.whc-log-row.win .whc-log-tx { color: #ffd76a; }
.whc-log-row.miss .whc-log-tx { color: rgba(233, 237, 255, .72); }
.whc-log-empty { padding: 12px 6px; text-align: center; color: rgba(255, 255, 255, .45); font: 600 12px/1.4 var(--font, sans-serif); }

/* centred flash message (cooldown / no catch / cap) - more visible than a corner toast */
.whc-flash {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.9);
  z-index: 7; pointer-events: none; max-width: 78%;
  padding: 12px 18px; border-radius: 13px; text-align: center;
  background: rgba(12, 16, 26, .9); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  color: #eef1ff; font: 700 14px/1.35 var(--font, sans-serif);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.whc-flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hunt-guide-txt b { display: block; font: 800 13px/1.2 var(--font, sans-serif); color: #fff; }
.hunt-guide-txt p { margin: 3px 0 0; font: 500 12px/1.45 var(--font, sans-serif); color: rgba(233, 237, 255, .7); }

/* intro / funnel / tutorial overlay */
.hunt-intro {
  position: fixed; inset: 0; z-index: 200;   /* above the nav */
  display: grid; place-items: center;
  padding: 20px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(124, 92, 255, .2), rgba(4, 6, 12, .97) 60%);
  opacity: 0; transition: opacity .28s ease;
}
.hunt-intro.show { opacity: 1; }
.hunt-intro-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #151c2e, #0c1018 55%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  text-align: center;
}
.hunt-h { margin: 0 0 8px; font: 900 26px/1.1 var(--font, sans-serif); color: #fff; letter-spacing: -.01em; }
.hunt-p { margin: 0 0 18px; font: 500 14px/1.55 var(--font, sans-serif); color: rgba(233, 237, 255, .82); }
.hunt-steps { list-style: none; margin: 0 0 20px; padding: 0; text-align: left; display: grid; gap: 11px; }
.hunt-steps li { display: flex; align-items: center; gap: 11px; font: 600 13.5px/1.35 var(--font, sans-serif); color: #dfe5f7; }
.hunt-step-n {
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; font: 800 13px/1 var(--mono, monospace);
  color: #ffe7ab; background: rgba(255, 196, 73, .14); border: 1px solid rgba(255, 196, 73, .4);
}
.hunt-cta {
  display: block; width: 100%;
  padding: 13px 18px; border: none; border-radius: 12px;
  font: 800 15px/1 var(--font, sans-serif); color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--accent, #9b7cff), #6d5cff);
  box-shadow: 0 10px 26px rgba(124, 92, 255, .42);
  transition: transform .12s ease, box-shadow .12s ease;
}
.hunt-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(124, 92, 255, .55); }
.hunt-cta:active { transform: scale(.98); }
.hunt-fine { margin: 12px 0 0; font: 500 11.5px/1.45 var(--font, sans-serif); color: rgba(255, 255, 255, .42); }

/* Top Hunters: a TALL bottom sheet (90vh), not a true full-screen card. The full-screen
   version pushed the close button under the z-100 nav bar, so the board could not be closed.
   At 90vh the close button + a backdrop strip stay above the fold and tappable. */
/* dvh keeps the card (and its Close) inside the visible area when the mobile URL bar shows.
   margin-bottom lifts it above the mobile tab bar (.ark-tabbar, z-400) - the sheet sits at z-200,
   so without this the bar covered the LAST leaderboard row (reported: "can't see the last player").
   --bottom-nav-h is 0 on desktop, so this is a no-op there. */
#hunt-board .hunt-sheet-card {
  max-height: 90vh;
  max-height: calc(100dvh - 64px - var(--bottom-nav-h, 0px));
  margin-bottom: var(--bottom-nav-h, 0px);
}

@media (min-width: 760px) {
  .hunt-sheet { align-items: center; }
  .hunt-sheet-card { border-radius: 16px; }
  #hunt-board .hunt-sheet-card { max-height: 80vh; }
  .hunt-chip { min-width: 128px; }
}