/* ══ $FISH ══════════════════════════════════════════════════
 * One screen, no scroll: the pond IS the app. A slim HUD above, a tab
 * bar below, and every list lives in a drawer that slides up over the
 * water. Night-ocean palette; the cyan→teal gradient marks things you
 * can act on; rarity is the only colour allowed to shout.
 * ══════════════════════════════════════════════════════════ */

:root {
  /* Solana's colours: purple #9945FF → green #14F195 on a violet-black night */
  --abyss:    #07040f;
  --deep:     #0e0820;
  --panel:    #140c2a;
  --line:     #2a1d4d;
  --line-hot: #4b2f8a;

  --ink:      #f1ecff;
  --muted:    #a99cc9;

  --cyan:     #14f195;      /* the accent (named for its old colour; now Solana green) */
  --teal:     #14f195;
  --purple:   #9945ff;
  --grad:     linear-gradient(110deg, #9945ff 0%, #6d63ff 45%, #14f195 100%);
  --grad-dim: linear-gradient(110deg, rgba(153,69,255,.2), rgba(20,241,149,.1));

  --common:    #4ade80;
  --rare:      #38bdf8;
  --epic:      #a78bfa;
  --legendary: #fbbf24;
  --mythical:  #fb7185;

  --hud-h: 58px;
  --tab-h: 60px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--abyss);
  overflow: hidden;                       /* the point: no page scroll */
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  display: flex; flex-direction: column;
}

a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); }

/* ── hud ───────────────────────────────────────────────── */

.hud {
  height: var(--hud-h); flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, var(--deep), rgba(16,9,36,.85));
  border-bottom: 1px solid var(--line);
  z-index: 5;
}

.brand { display: flex; align-items: center; gap: 9px; }
.brand svg { width: 30px; height: 30px; }
.brand .name { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }

.clock {
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--mono);
  padding: 5px 12px; border-radius: 10px;
  background: rgba(153,69,255,.06); border: 1px solid var(--line);
}
.clock .n {
  font-size: 1.25rem; font-weight: 800; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.clock .sep { color: var(--line-hot); font-weight: 700; }

.chips { display: flex; gap: 8px; margin-left: auto; }
.chip {
  font-size: .78rem; color: var(--muted);
  padding: 6px 11px; border-radius: 999px;
  background: rgba(153,69,255,.05); border: 1px solid var(--line);
  white-space: nowrap;
}
.chip b { color: var(--ink); font-family: var(--mono); font-weight: 700; }

/* ── buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-weight: 700;
  background: var(--grad); color: #fff; text-shadow: 0 1px 2px rgba(7,4,15,.45);
  box-shadow: 0 5px 18px rgba(153,69,255,.3);
}
.btn:hover { filter: brightness(1.08); }
.btn.sm { padding: 9px 15px; font-size: .82rem; }

/* ── stage ─────────────────────────────────────────────── */

.stage { position: relative; flex: 1; min-height: 0; }

canvas#world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
canvas#pond-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  /* the canvas is the rod: a held finger must not scroll, zoom or select */
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  cursor: pointer;
}

/** Everything that floats over the sky, stacked so no two ever overlap.
 *  Passive labels: taps fall through to the water. */
.float-stack {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; max-width: 92%; pointer-events: none;
}

.commit-float {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: .6rem; color: var(--muted);
  background: rgba(9,5,20,.55); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
  max-width: min(70vw, 460px); overflow: hidden;
}
.commit-float code { color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/** One line of live news floating over the water. */
.ticker {
  font-size: .78rem; color: var(--muted);
  background: rgba(9,5,20,.55); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .4s;
}
.ticker:empty { opacity: 0; }
.ticker b { font-family: var(--mono); }

/** Jackpot: the one banner allowed to be loud. */
.jackpot {
  font-size: .8rem; color: var(--legendary);
  background: rgba(251,191,36,.10); backdrop-filter: blur(6px);
  border: 1px solid rgba(251,191,36,.45); border-radius: 999px; padding: 7px 16px;
  white-space: nowrap; animation: pulse 2.4s ease-in-out infinite;
}
.jackpot b { font-family: var(--mono); }
@keyframes pulse { 50% { box-shadow: 0 0 22px rgba(251,191,36,.25); } }

.event-banner {
  font-size: .74rem; color: var(--ink);
  background: rgba(9,5,20,.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line-hot); border-radius: 999px; padding: 6px 14px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

.ghost-btn { background: rgba(153,69,255,.07); color: var(--ink); border: 1px solid var(--line-hot); box-shadow: none; }

/* portraits in ranked lists */
.ranks.portraits li { grid-template-columns: 18px 40px 1fr auto; }
.ranks.portraits .pfp {
  width: 40px; height: 50px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(180deg, #0b2740, #07182a);
}
.ranks.portraits .pfp canvas { width: 40px; height: 50px; display: block; }

/* the You pane */
.you-card {
  display: flex; gap: 16px; align-items: center; margin-bottom: 14px;
  padding: 14px; border-radius: 14px;
  background: var(--grad-dim); border: 1px solid rgba(153,69,255,.25);
}
.you-card canvas { width: 120px; height: 173px; flex: none; }   /* 150 × 216 design box, rod tip included */
.you-stats { display: grid; gap: 6px; font-size: .82rem; }
.you-addr { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.you-row b { font-family: var(--mono); }
.rung .act { justify-self: end; }
.rung .act button {
  background: var(--grad); border: 0; color: #fff; font-weight: 700;
  font-size: .64rem; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.item .act { margin-top: 8px; }
.item .act button {
  width: 100%; background: rgba(153,69,255,.10); border: 1px solid var(--line-hot);
  color: var(--ink); font-size: .68rem; padding: 6px; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.item .act button:hover { background: rgba(153,69,255,.18); }
.item .act button.primary { background: var(--grad); border: 0; color: #fff; font-weight: 700; }

/* ── drawer ────────────────────────────────────────────── */

.drawer[hidden] { display: none; }   /* display:flex below would defeat `hidden` */

.drawer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  max-height: 72%;
  display: flex; flex-direction: column;
  background: rgba(16,9,36, .92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-hot);
  border-radius: 18px 18px 0 0;
  animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translateY(30%); opacity: 0; } }

.drawer > header {
  flex: none; display: flex; align-items: center;
  padding: 13px 18px 9px;
}
.drawer h2 {
  margin: 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
#drawer-close {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1rem; padding: 4px 8px;
}
#drawer-close:hover { color: var(--ink); }

.drawer-body { overflow-y: auto; padding: 4px 18px 22px; }
.pane { display: none; }
.pane.on { display: block; }

.pane h3 {
  margin: 18px 0 10px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: flex;
}
.pane h3 .right { margin-left: auto; font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.hint { font-size: .72rem; color: var(--muted); }

/* ── tab bar ───────────────────────────────────────────── */

.tabbar {
  height: calc(var(--tab-h) + env(safe-area-inset-bottom)); flex: none;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; z-index: 5;
  background: linear-gradient(0deg, var(--deep), rgba(16,9,36,.9));
  border-top: 1px solid var(--line);
}
.tabbar button {
  flex: 1; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); font-family: inherit; font-size: .62rem; letter-spacing: .04em;
}
.tabbar button span { font-size: 1.15rem; line-height: 1; }
.tabbar button.on { color: var(--cyan); }
.tabbar button.on span { filter: drop-shadow(0 0 6px rgba(153,69,255,.6)); }

/* ── catch cards ───────────────────────────────────────── */

.catches { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; }
.catch {
  position: relative; padding: 14px 12px; border-radius: 13px; text-align: center;
  background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  border: 1px solid var(--line);
}
.catch .fish { font-size: 1.7rem; line-height: 1; margin-bottom: 7px; display: block; }
.catch .amt { font-size: .95rem; font-weight: 800; font-family: var(--mono); }
.catch .by { font-size: .62rem; color: var(--muted); margin-top: 4px; font-family: var(--mono); }
.catch .ago { font-size: .58rem; color: var(--muted); opacity: .65; margin-top: 2px; }
.catch .flag {
  position: absolute; top: 8px; left: 8px;
  font-size: .48rem; letter-spacing: .1em; font-weight: 800; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px;
}

.t-common    { color: var(--common); }
.t-rare      { color: var(--rare); }
.t-epic      { color: var(--epic); }
.t-legendary { color: var(--legendary); }
.t-mythical  { color: var(--mythical); }

.catch.t-common    { border-color: rgba(74,222,128,.34); }
.catch.t-rare      { border-color: rgba(56,189,248,.34); }
.catch.t-epic      { border-color: rgba(167,139,250,.38); box-shadow: 0 0 20px rgba(167,139,250,.10) inset; }
.catch.t-legendary { border-color: rgba(251,191,36,.42);  box-shadow: 0 0 22px rgba(251,191,36,.13) inset; }
.catch.t-mythical  { border-color: rgba(251,113,133,.46); box-shadow: 0 0 24px rgba(251,113,133,.15) inset; }

.flag.t-common    { background: rgba(74,222,128,.16); }
.flag.t-rare      { background: rgba(56,189,248,.16); }
.flag.t-epic      { background: rgba(167,139,250,.18); }
.flag.t-legendary { background: rgba(251,191,36,.18); }
.flag.t-mythical  { background: rgba(251,113,133,.20); }

/* ── ranked lists ──────────────────────────────────────── */

.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: r; }
.ranks li {
  display: grid; grid-template-columns: 18px 24px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 6px; border-radius: 9px; font-size: .82rem;
}
.ranks li:nth-child(odd) { background: rgba(255,255,255,.025); }
.ranks li::before {
  counter-increment: r; content: counter(r);
  font-family: var(--mono); font-size: .68rem; color: var(--muted);
}
.ranks .pfp {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--grad-dim); border: 1px solid var(--line); font-size: .74rem;
}
.ranks .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: .74rem; }
.ranks .amt { font-family: var(--mono); font-weight: 700; color: var(--teal); font-size: .78rem; }

.tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.tabs button {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
}
.tabs button.on { background: var(--grad); border-color: transparent; color: #fff; font-weight: 700; }

/* ── rod pane ──────────────────────────────────────────── */

.rod-now {
  display: flex; align-items: center; gap: 11px; margin-bottom: 12px;
  padding: 12px; border-radius: 12px;
  background: var(--grad-dim); border: 1px solid rgba(153,69,255,.25);
}
.rod-now .tier { font-size: .95rem; font-weight: 800; }
.rod-now .badge {
  margin-left: auto; font-size: .56rem; letter-spacing: .12em; font-weight: 800;
  padding: 4px 9px; border-radius: 6px; text-transform: uppercase;
  border: 1px solid currentColor;
}

.ladder { display: grid; gap: 3px; }
.rung {
  display: grid; grid-template-columns: 26px 84px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 10px; font-size: .78rem;
  border: 1px solid transparent;
}
.rung.on { background: var(--grad-dim); border-color: rgba(153,69,255,.28); }
.rung .lv { font-family: var(--mono); font-size: .62rem; color: var(--muted); }
.rung .nm { font-weight: 600; text-transform: capitalize; }
.rung .odds { font-family: var(--mono); font-size: .64rem; color: var(--muted); }
/* what the rod does to a fight (ROD_FIGHT), beside the draw odds */
.rung .fs { font-family: var(--mono); font-size: .62rem; color: var(--teal); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rung.on .fs { opacity: 1; }
.rung .cost { font-family: var(--mono); font-size: .66rem; color: var(--cyan); }

.tiers { display: grid; gap: 6px; }
.tier-row {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 11px; align-items: center;
  padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
}
.tier-row .nm { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tier-row .d  { font-size: .64rem; color: var(--muted); }
.tier-row .odds { font-family: var(--mono); font-size: .66rem; color: var(--muted); }

/* ── shop ──────────────────────────────────────────────── */

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }
.item {
  padding: 12px; border-radius: 12px; background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
}
.item .nm { font-size: .8rem; font-weight: 700; margin-bottom: 2px; }
.item .slot { font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.item .price { margin-top: 7px; font-family: var(--mono); font-size: .72rem; color: var(--cyan); }
.item .supply { font-size: .6rem; color: var(--muted); margin-top: 2px; }

/* ── fairness ──────────────────────────────────────────── */

.how { margin: 0 0 14px; padding-left: 18px; color: var(--muted); font-size: .78rem; }
.how li { margin-bottom: 7px; }
.how strong { color: var(--cyan); }

.verify-row { display: flex; gap: 8px; margin-bottom: 10px; }
.verify-row input {
  flex: 1; min-width: 0; background: rgba(0,0,0,.32); border: 1px solid var(--line);
  color: var(--ink); padding: 9px 12px; border-radius: 10px; font-family: var(--mono); font-size: .82rem;
}
.verify-row input:focus { outline: none; border-color: var(--cyan); }

#verify-out {
  background: rgba(0,0,0,.34); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px; font-family: var(--mono); font-size: .66rem; color: var(--muted);
  white-space: pre-wrap; margin: 0 0 14px; max-height: 220px; overflow: auto; line-height: 1.6;
}
.ok  { color: var(--teal); }
.bad { color: var(--mythical); }

.disclosure {
  font-size: .68rem; color: var(--muted); line-height: 1.6; margin: 0;
  border-left: 2px solid var(--line-hot); padding-left: 12px;
}
.disclosure strong { color: var(--legendary); }

/* ── small screens ─────────────────────────────────────── */

@media (max-width: 640px) {
  .chips { display: none; }
  .brand .name { display: none; }
  .drawer { max-height: 78%; }
}

/* the token half of a catch — rides inside .amt, quieter than the SOL */
.tok { font-size: 0.82em; opacity: 0.85; color: var(--mint, #7ef0c9); white-space: nowrap; }

/* ══ the play layer ═════════════════════════════════════════
 * Your angler, your line, your fish (play.js). The HUD pins to the top
 * corners, the prompt floats in the open sky above the far bank, the reel
 * gauges stand at the right edge where a thumb never covers them, and the
 * catch card rises over the water. Rarity colours still do all the shouting.
 * ══════════════════════════════════════════════════════════ */

.play-hud {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.play-hud > span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; color: var(--muted);
  background: rgba(9,5,20,.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
  white-space: nowrap;
}
.play-hud b { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.play-hud .xp {
  width: 54px; height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.08);
}
.play-hud .xp i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .5s ease-out; }
.play-hud.guest .lvl::after { content: 'guest'; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.play-hud .bait.empty { border-color: rgba(251,113,133,.5); }
.play-hud .bait.empty b { color: var(--mythical); }
.play-hud .cd { font-family: var(--mono); font-size: .66rem; color: var(--muted); }

.mute-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(9,5,20,.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line); color: var(--ink); font-size: .9rem; line-height: 1;
}
.mute-btn:hover { border-color: var(--line-hot); }
.light-btn { top: 52px; }
.help-btn { top: 94px; font-weight: 800; font-family: var(--mono); }

/** Today's pond, named for a few seconds after load and when the light is switched. */
.scene-tag {
  position: absolute; top: 14px; right: 54px; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: rgba(9,5,20,.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px;
  opacity: 0; transform: translateX(6px); transition: opacity .5s, transform .5s;
}
.scene-tag.on { opacity: 1; transform: none; }

/** The coach (coach.js). While you fish it is a bubble over your angler or
 *  your bobber, and it never takes a tap. After the first fish it becomes
 *  a card with buttons. */
.coach { position: absolute; left: 0; top: 0; z-index: 3; }
.coach[hidden] { display: none; }
.coach.tip {
  pointer-events: none; max-width: min(260px, 80vw); text-align: center;
  background: #fffdf5; color: #0b1a2c; border-radius: 16px; padding: 10px 16px 11px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 0 3px rgba(153,69,255,.55);
  animation: coach-in .25s ease-out;
}
.coach.tip::after {
  content: ''; position: absolute; bottom: -9px; left: var(--arrow, 50%); margin-left: -10px;
  border: 10px solid transparent; border-bottom: 0; border-top-color: #fffdf5;
}
.coach-step { font-family: var(--mono); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #0e8fa6; }
.coach-text { font-size: 1.1rem; font-weight: 900; line-height: 1.2; margin-top: 2px; }
.coach-sub { font-size: .76rem; color: #3d5670; margin-top: 3px; }
.coach-note { font-size: .74rem; font-weight: 700; color: #c2410c; margin-bottom: 5px; }
.coach.tip.hot { background: #fde047; box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 0 3px rgba(251,191,36,.9), 0 0 30px rgba(251,191,36,.7); animation: coach-in .15s ease-out, strike .32s ease-in-out infinite alternate; }
.coach.tip.hot::after { border-top-color: #fde047; }
.coach.tip.hot .coach-text { font-size: 1.6rem; letter-spacing: .04em; }
.coach.tip.hot .coach-step { color: #92400e; }
.coach.card {
  left: 50%; top: 14%; transform: translateX(-50%); width: min(340px, calc(100vw - 28px));
  background: rgba(14,8,32,.94); backdrop-filter: blur(8px); color: var(--ink);
  border: 1px solid var(--line-hot); border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5); animation: coach-card-in .3s ease-out;
}
.coach.card .coach-step { color: var(--muted); }
.coach-title { font-size: 1.15rem; font-weight: 800; margin: 4px 0 6px; }
.coach-body { font-size: .86rem; line-height: 1.45; color: #cfe3f3; margin: 0 0 14px; }
.coach-acts { display: flex; gap: 8px; justify-content: flex-end; }
.coach-acts .btn { padding: 9px 18px; font-size: .86rem; }
.clock.coach-glow { box-shadow: 0 0 0 2px var(--legendary), 0 0 24px rgba(251,191,36,.6); animation: pulse 1.2s ease-in-out infinite; }
/* the coach says what the prompt would, so the prompt steps aside */
body.coaching .play-prompt { visibility: hidden; }
@keyframes coach-in { from { opacity: 0; } }
@keyframes coach-card-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }

.net-pill {
  font-family: var(--mono); font-size: .56rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #1a1100; background: var(--legendary); border: 0; border-radius: 6px;
  padding: 3px 7px; cursor: pointer; line-height: 1.3;
}
.net-pill[hidden] { display: none; }
.net-pill.static { cursor: default; }

/** The prize banner: gold, and allowed to breathe. */
.golden-banner {
  font-size: .76rem; color: #fff3c4; text-align: center;
  background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(251,113,133,.14));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(251,191,36,.55); border-radius: 14px; padding: 7px 14px;
  max-width: min(92vw, 520px); white-space: normal;
  animation: pulse 2.4s ease-in-out infinite;
}

/** What to do right now — one short line in the open sky. */
.play-prompt {
  position: absolute; left: 14px; right: 14px; top: 36%; z-index: 2; text-align: center;
  pointer-events: none;
  font-size: .9rem; font-weight: 700; letter-spacing: .02em; color: var(--ink);
  /* the tight dark edge keeps it legible on a daytime sky too (scenes.js) */
  text-shadow: 0 0 3px rgba(3,10,20,.95), 0 1px 2px rgba(3,10,20,.9), 0 2px 12px rgba(0,0,0,.8), 0 0 18px rgba(153,69,255,.35);
}
.play-prompt[hidden] { display: none; }
.play-prompt.muted { color: var(--muted); font-weight: 600; }
.play-prompt.gold { color: var(--legendary); }
.play-prompt.strike, .play-prompt.warn {
  font-size: 1.9rem; font-weight: 900; letter-spacing: .06em;
  animation: strike .32s ease-in-out infinite alternate;
}
.play-prompt.strike { color: #fff; text-shadow: 0 0 22px rgba(251,191,36,.9), 0 2px 10px rgba(0,0,0,.8); }
.play-prompt.warn { font-size: 1.3rem; color: var(--mythical); text-shadow: 0 0 18px rgba(251,113,133,.8), 0 2px 10px rgba(0,0,0,.8); }
@keyframes strike { to { transform: scale(1.08); } }

/** The reel: tension (with its red "snap" zone) and line-in, side by side. */
.reel {
  position: absolute; right: 14px; bottom: 16px; z-index: 2;
  display: flex; gap: 12px; pointer-events: none;
  padding: 10px 10px 6px; border-radius: 14px;
  background: rgba(9,5,20,.55); backdrop-filter: blur(6px); border: 1px solid var(--line);
}
.reel[hidden] { display: none; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gauge .track {
  position: relative; width: 18px; height: min(34vh, 210px); border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-hot);
}
.gauge .fill {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
}
.g-tension .fill { background: linear-gradient(0deg, #14f195, #fbbf24 70%, #fb7185); }
.g-line .fill { background: var(--grad); }
.reel.gold .g-line .fill { background: linear-gradient(0deg, #f59e0b, #fde68a); }
.gauge .danger {
  position: absolute; left: 0; right: 0; top: 0; height: 20%; z-index: 1;
  background: repeating-linear-gradient(135deg, rgba(251,113,133,.55) 0 4px, rgba(251,113,133,.18) 4px 8px);
  border-bottom: 2px solid var(--mythical);
}
.gauge .lab { font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.reel.hot .g-tension .track { border-color: var(--mythical); animation: shake .09s linear infinite; }
.reel.tele { border-color: var(--mythical); box-shadow: 0 0 18px rgba(251,113,133,.4); }
@keyframes shake { 50% { transform: translateX(1.5px); } }

/** The catch card. */
.catch-card {
  position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 3;
  width: min(320px, calc(100% - 32px));
  padding: 14px 16px 16px; border-radius: 18px; text-align: center;
  background: rgba(16,9,36, .94); backdrop-filter: blur(14px);
  border: 1px solid var(--line-hot);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  animation: card-in .28s cubic-bezier(.2,1.3,.4,1);
}
.catch-card[hidden] { display: none; }
@keyframes card-in { from { transform: translateX(-50%) translateY(14px) scale(.94); opacity: 0; } }
.catch-card.t-common    { border-color: rgba(74,222,128,.45); }
.catch-card.t-rare      { border-color: rgba(56,189,248,.5); }
.catch-card.t-epic      { border-color: rgba(167,139,250,.55); box-shadow: 0 0 40px rgba(167,139,250,.2), 0 18px 50px rgba(0,0,0,.5); }
.catch-card.t-legendary { border-color: rgba(251,191,36,.6);  box-shadow: 0 0 44px rgba(251,191,36,.22), 0 18px 50px rgba(0,0,0,.5); }
.catch-card.t-mythical  { border-color: rgba(251,113,133,.65); box-shadow: 0 0 48px rgba(251,113,133,.26), 0 18px 50px rgba(0,0,0,.5); }
.catch-card.golden {
  border-color: rgba(251,191,36,.8);
  background: linear-gradient(170deg, rgba(60,40,6,.95), rgba(16,9,36,.95) 55%);
}
.cc-art { display: grid; place-items: center; }
.cc-fish { width: 100%; height: 128px; display: block; }
.cc-icon { font-size: 2.4rem; line-height: 1; margin: 6px 0 4px; }
.cc-badges { display: flex; gap: 6px; justify-content: center; margin: 2px 0 6px; }
.badge {
  font-size: .56rem; font-weight: 900; letter-spacing: .14em;
  padding: 3px 8px; border-radius: 6px; color: #04202a;
}
.badge.new { background: var(--teal); }
.badge.rec { background: var(--legendary); }
.badge.lvl { background: var(--epic); }
.cc-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.cc-sub { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.cc-sub b { color: var(--ink); font-family: var(--mono); }
.tier-tag { text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 800; }
.cc-xp { margin-top: 8px; font-family: var(--mono); font-weight: 800; color: var(--teal); font-size: .9rem; }
.cc-note { font-size: .74rem; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.cc-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.cc-actions .btn { padding: 11px 20px; font-size: .86rem; min-height: 44px; }
.cc-prize {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.4);
}
.pz-head { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--legendary); font-weight: 800; }
.pz-sol { font-family: var(--mono); font-size: 1.35rem; font-weight: 800; color: #fff3c4; margin-top: 2px; }
.pz-bonus { font-family: var(--mono); font-size: .8rem; color: var(--mint, #7ef0c9); }
.pz-link { display: inline-block; margin-top: 6px; font-size: .72rem; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.pz-queued { margin-top: 6px; font-size: .68rem; color: var(--muted); }

/* the dex */
.dex-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.dex-count { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.dex-count b { color: var(--ink); font-family: var(--mono); font-size: 1rem; }
.dex-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.dex-bar i { display: block; height: 100%; background: var(--grad); }
.dex-lvl { font-family: var(--mono); font-size: .66rem; color: var(--muted); white-space: nowrap; }
.dex-guest { margin: 6px 0 0; }
.dex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* the header, the tier rows and the tiles share one column: on a wide
   drawer the count and bar used to run to the far edge, past the grid */
#dex-root { max-width: 760px; }
.dex-tile {
  padding: 8px 6px 9px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
}
.dex-tile canvas { width: 100%; height: 56px; display: block; }
.dex-tile .nm { font-size: .7rem; font-weight: 700; margin-top: 3px; line-height: 1.25; }
.dex-tile:not(.got) .nm { color: var(--muted); letter-spacing: .2em; }
.dex-tile .st { font-family: var(--mono); font-size: .58rem; color: var(--muted); margin-top: 2px; }
.dex-tile.got.t-common    { border-color: rgba(74,222,128,.34); }
.dex-tile.got.t-rare      { border-color: rgba(56,189,248,.34); }
.dex-tile.got.t-epic      { border-color: rgba(167,139,250,.4); }
.dex-tile.got.t-legendary { border-color: rgba(251,191,36,.45); }
.dex-tile.got.t-mythical  { border-color: rgba(251,113,133,.5); }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--cyan); text-decoration: underline; text-underline-offset: 3px;
}

/* the dock board: fish thumbnails instead of portraits */
.ranks.fishes li { grid-template-columns: 18px 56px 1fr auto; }
.ranks.fishes .pfp { width: 56px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.ranks.fishes .pfp canvas { width: 56px; height: 34px; display: block; }
.ranks .sub { color: var(--muted); font-size: .66rem; }

/* testnet onboarding */
.testnet-card {
  margin-bottom: 14px; padding: 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(251,191,36,.10), rgba(153,69,255,.05));
  border: 1px solid rgba(251,191,36,.4);
}
.testnet-card[hidden] { display: none; }
.testnet-card.flash { animation: pulse 1.2s ease-in-out 2; }
.tn-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .86rem; }
.testnet-card .hint { margin: 8px 0 6px; }
.tn-steps { margin: 0 0 12px; padding-left: 18px; font-size: .76rem; color: var(--muted); }
.tn-steps li { margin-bottom: 4px; }
.tn-steps b { color: var(--ink); }
#faucet-go { padding: 10px 16px; font-size: .84rem; }
#faucet-go:disabled { opacity: .55; cursor: default; filter: none; }
.tn-out { font-size: .72rem; color: var(--muted); margin: 8px 0 0; word-break: break-word; }
.tn-out a { color: var(--cyan); text-decoration: underline; }

#buy .narrow { display: none; }

@media (max-width: 640px) {
  #buy .wide { display: none; }
  #buy .narrow { display: inline; }
  .hud { gap: 7px; }
  .hud .btn.sm { padding: 8px 9px; font-size: .76rem; }
  .brand svg { width: 24px; height: 24px; }
  .clock { padding: 5px 7px; }
  .clock .n { font-size: 1.05rem; }
  .net-pill { letter-spacing: .06em; padding: 3px 5px; }
  .float-stack { top: 52px; }
  .play-prompt { top: 34%; font-size: .82rem; }
  .play-prompt.strike { font-size: 1.7rem; }
  .play-hud > span { padding: 4px 9px; font-size: .7rem; }
  .play-hud .xp { width: 40px; }
  .reel { right: 10px; bottom: 12px; padding: 8px 8px 5px; gap: 9px; }
  .gauge .track { height: min(22vh, 140px); width: 14px; }
  /* the sealed hash moves out from under your angler's boots */
  .commit-float { left: auto; right: 10px; max-width: 40vw; }
  .catch-card { top: 94px; }
  .cc-fish { height: 110px; }
  .dex { gap: 6px; }
  .dex-tile { padding: 6px 3px 7px; }
  .dex-tile .nm { font-size: .64rem; }
  .dex-tile .st { font-size: .54rem; }
  .hud { padding: 0 10px; }
}

/* mid-fight, the gauges own the bottom-right corner */
.commit-float { transition: opacity .2s; }
body[data-phase="reeling"] .commit-float,
body[data-phase="landing"] .commit-float { opacity: 0; }

/* header buttons never wrap — a two-line "Connect" reads as broken */
.hud .btn { white-space: nowrap; }
/* a full wallet address must not push the Rod pane sideways on a phone */
.you-stats { min-width: 0; }
.you-addr { overflow-wrap: anywhere; }

/* the narrowest phones: the pill still says testnet, the logo steps aside */
@media (max-width: 360px) {
  .brand svg { display: none; }
  .hud { gap: 5px; padding: 0 8px; }
  .clock { padding: 4px 5px; }
  .clock .n { font-size: .95rem; }
  .hud .btn.sm { padding: 7px 7px; }
  .net-pill { letter-spacing: 0; }
}

/* ══ the live pond ══════════════════════════════════════════
 * Everyone else in the room (live.js), the draw as an event (drawshow.js)
 * and the news both make (toast.js). Same rules as the play layer: labels
 * never take a tap, and rarity colours do the shouting.
 * ══════════════════════════════════════════════════════════ */

.play-hud .live-count[hidden] { display: none; }
.play-hud .live-count { border-color: rgba(20,241,149,.3); }

/* toasts: one line of news each, stacked under the banners */
.toasts { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.toasts:empty { display: none; }
.toast {
  font-size: .76rem; color: var(--ink);
  background: rgba(9,5,20,.74); backdrop-filter: blur(6px);
  border: 1px solid var(--line-hot); border-radius: 999px; padding: 6px 14px;
  max-width: min(92vw, 520px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: toast-in .3s ease-out;
  transition: opacity .4s, transform .4s;
}
.toast b { font-family: var(--mono); }
.toast.gold { border-color: rgba(251,191,36,.65); color: #fff3c4; }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* the draw's winners: one stacked card */
.toast.draw {
  border-radius: 14px; white-space: normal; padding: 9px 14px 10px; width: min(340px, 88vw);
  background: linear-gradient(160deg, rgba(60,40,6,.92), rgba(16,9,36,.92));
  box-shadow: 0 0 30px rgba(251,191,36,.18);
}
.dt-head { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--legendary); font-weight: 800; text-align: center; margin-bottom: 5px; }
.dt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.dt-list li { display: grid; grid-template-columns: 74px 1fr auto; gap: 8px; align-items: baseline; font-size: .74rem; }
.dt-list .tier-tag { font-size: .58rem; }
.dt-list .who { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.dt-list .sol { font-family: var(--mono); font-weight: 700; color: #fff3c4; text-align: right; white-space: nowrap; }
.dt-list .tok { font-weight: 500; }
.dt-list li.me .who { color: var(--legendary); font-weight: 800; }
.dt-more { font-size: .62rem; color: var(--muted); text-align: center; margin-top: 5px; }

/* the countdown: the last 20 s of an epoch, big in the open sky */
.draw-show {
  position: absolute; left: 50%; top: 19%; transform: translateX(-50%); z-index: 2;
  pointer-events: none; text-align: center;
}
.draw-show[hidden] { display: none; }
.ds-label { font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); padding-left: .32em; }
.ds-count {
  font-family: var(--mono); font-size: 3.6rem; font-weight: 800; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(153,69,255,.45));
}
.ds-count.hot {
  background: linear-gradient(135deg, #fff3c4, #fbbf24); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 22px rgba(251,191,36,.6));
}
.ds-count.beat { animation: ds-beat .5s ease-out; }
.draw-show.drawing .ds-count { font-size: 1.7rem; letter-spacing: .04em; margin-top: 6px; animation: ds-breathe 1.6s ease-in-out infinite; }
@keyframes ds-beat { from { transform: scale(1.14); } }
@keyframes ds-breathe { 50% { opacity: .5; } }
/* while the pond holds still, the rest of the sky steps back */
.float-stack > :not(.toasts) { transition: opacity .6s; }
body.pond-still .float-stack > :not(.toasts) { opacity: .3; }

/* emotes: a row bottom-left on a desktop */
.emotes { position: absolute; left: 12px; bottom: 44px; z-index: 2; display: flex; align-items: flex-end; gap: 6px; }
.emotes[hidden] { display: none; }
.emote-toggle { display: none; }
.emote-row { display: flex; gap: 6px; }
.emotes button {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; padding: 0;
  font-size: 1.05rem; line-height: 1; font-family: inherit;
  background: rgba(9,5,20,.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line); color: var(--ink);
  transition: transform .12s, opacity .2s, border-color .2s;
}
.emotes button:hover { border-color: var(--line-hot); transform: translateY(-2px); }
.emotes button:active { transform: scale(.92); }
.emotes.resting .emote-row button { opacity: .35; pointer-events: none; }
body[data-phase="reeling"] .emotes, body[data-phase="landing"] .emotes { opacity: .5; }

/* no wallet: what to install, instead of an alert box */
.nowallet-card {
  margin-bottom: 14px; padding: 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(153,69,255,.10), rgba(20,241,149,.04));
  border: 1px solid rgba(153,69,255,.45);
}
.nowallet-card[hidden] { display: none; }
.nowallet-card.flash { animation: pulse-cyan 1.2s ease-in-out 2; }
@keyframes pulse-cyan { 50% { box-shadow: 0 0 22px rgba(153,69,255,.3); } }
.nw-head { font-weight: 700; font-size: .86rem; }
.nowallet-card .hint { margin: 8px 0 0; }
.nowallet-card .hint b { color: var(--ink); }
.nw-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.nw-phone { display: inline-block; margin-top: 8px; font-size: .74rem; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.nw-phone[hidden], .nw-devnet[hidden] { display: none; }

@media (max-width: 640px) {
  .play-hud .live-count .wide { display: none; }
  /* a phone folds the emotes into one button, bottom-left, clear of your angler */
  .emotes { left: 10px; bottom: 10px; flex-direction: column-reverse; align-items: center; }
  .emote-toggle { display: block; }
  .emote-row { display: none; flex-direction: column-reverse; }
  .emotes.open .emote-row { display: flex; }
  .draw-show { top: 21%; }
  .ds-count { font-size: 3rem; }
  /* the ladder's fight stats take their own line under the rod's name */
  .rung { grid-template-columns: 26px 1fr auto auto; row-gap: 2px; }
  .rung .fs { grid-column: 2 / -1; grid-row: 2; }
}

/* The 3D pond (world/view3d.js): the angler stands mid-frame, so the prompt
   lives in the open water below him instead of across his hat. */
body.pond-3d .play-prompt { top: 22%; bottom: auto; }
@media (max-width: 700px) { body.pond-3d .play-prompt { top: 24%; bottom: auto; } }

/* 3D pond: while the world loads, a calm sky and a bobbing float, not the old 2D pond */
.pond-loading {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: linear-gradient(#5fb8ef, #bfeafd 55%, #2cc5d8 56%, #15a3cc);
  color: #0b3a4a; font-weight: 700; font-size: .9rem; pointer-events: none; transition: opacity .6s;
}
.pond-loading[hidden] { display: none; }
.pond-loading.out { opacity: 0; }
body.night .pond-loading { background: linear-gradient(#081b33, #1d4a6e 55%, #0f4a66 56%, #0a2f4a); color: #cfe3f3; }
.pl-bob { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#f5f0e8 50%, #e84d4d 50%); animation: pl-bob 1.4s ease-in-out infinite; box-shadow: 0 6px 0 -3px rgba(255,255,255,.5); }
@keyframes pl-bob { 50% { transform: translateY(6px); } }

.pick-angler { margin: 0 0 14px; }
.pick-angler[hidden] { display: none; }
.pa-head { font-weight: 800; margin-bottom: 8px; }
.pa-row { display: flex; gap: 8px; }
.pa-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 12px; cursor: pointer;
  background: rgba(153,69,255,.07); color: var(--ink); border: 1px solid var(--line); font-weight: 700; }
.pa-btn span { font-size: 1.4rem; }
.pa-btn.on { border-color: var(--line-hot); background: rgba(153,69,255,.18); box-shadow: 0 0 0 2px rgba(153,69,255,.35); }

body.loading3d .play-prompt, body.loading3d .coach { visibility: hidden; }

/* the draw's countdown over the 3D pond: the sky can be bright, so the numbers get a
   white face and a dark edge instead of the night-only cyan glow */
body.pond-3d .ds-count { color: #fff; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 0 2px #04202a, 0 2px 0 #04202a, 0 0 18px rgba(4,32,42,.55), 0 0 28px rgba(153,69,255,.6); }
body.pond-3d .ds-count.hot { color: #fde047; -webkit-text-fill-color: #fde047; }
body.pond-3d .ds-label { color: #fff; text-shadow: 0 1px 2px #04202a, 0 0 8px rgba(4,32,42,.6); }

/* ── explore (world/explore.js) ─────────────────────────────── */
.walk-btn, .act-btn {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; cursor: pointer;
  font-weight: 800; font-size: .92rem; color: #fff; border: 0; text-shadow: 0 1px 2px rgba(7,4,15,.45);
  background: var(--grad); box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 0 3px rgba(255,255,255,.35);
}
.walk-btn { left: auto; right: 12px; transform: none; bottom: 56px; padding: 9px 14px; font-size: .82rem; background: rgba(14,8,32,.78); color: var(--ink); box-shadow: 0 0 0 1px var(--line-hot); backdrop-filter: blur(6px); }
.walk-btn[hidden], .act-btn[hidden], .walk-hint[hidden], .walk-stick[hidden], .angler-card[hidden] { display: none; }
.act-btn span, .walk-btn span { font-size: 1.1rem; }
.act-btn { animation: act-in .25s ease-out; }
@keyframes act-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
.walk-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 62px; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  font-size: .78rem; font-weight: 700; color: #fff; text-shadow: 0 0 3px rgba(3,10,20,.95), 0 1px 2px rgba(3,10,20,.9);
}
.walk-stick { position: fixed; z-index: 4; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.walk-stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255,255,255,.85); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.angler-card { position: fixed; z-index: 4; transform: translateX(-50%); min-width: 150px; text-align: center; padding: 10px 14px 12px; border-radius: 14px;
  background: rgba(14,8,32,.92); color: var(--ink); border: 1px solid var(--line-hot); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ac-name { font-weight: 800; }
.ac-sub { font-size: .74rem; color: var(--muted); margin: 3px 0 8px; }
/* while walking the fishing layer steps aside: no prompt, no coach, no reel gauges */
body.walking .play-prompt, body.walking .reel, body.walking .golden-banner { display: none !important; }
/* the coach speaks while you walk only during the intro's walk steps (coach.js sets .walkcoach) */
body.walking:not(.walkcoach) .coach { display: none !important; }

/* the draw's countdown owns the sky: the cast prompt steps aside for it */
.stage:has(#draw-show:not([hidden])) .play-prompt { visibility: hidden; }

/* travel (the signpost) */
.travel-card { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 28px));
  background: rgba(14,8,32,.95); color: var(--ink); border: 1px solid var(--line-hot); border-radius: 18px; padding: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.travel-card[hidden], .travel-fade[hidden] { display: none; }
.tc-head { font-weight: 800; font-size: 1.1rem; margin-bottom: 12px; text-align: center; }
.tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tc-pond { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border-radius: 12px; cursor: pointer;
  background: rgba(153,69,255,.07); color: var(--ink); border: 1px solid var(--line); }
.tc-pond.here { border-color: var(--line-hot); background: rgba(153,69,255,.18); }
.tc-icon { font-size: 1.8rem; }
.tc-pond i { font-style: normal; font-size: .68rem; color: var(--muted); min-height: 1em; }
.tc-close { display: block; margin: 12px auto 0; }
.travel-fade { position: absolute; inset: 0; z-index: 6; background: #06121f; opacity: 0; transition: opacity .45s; pointer-events: none; }
.travel-fade.on { opacity: 1; }

.no-3d { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center; color: var(--ink); max-width: 420px; margin: auto; }
.no-3d[hidden] { display: none; }
.no-3d span { color: var(--muted); font-size: .88rem; }
body.no3d .coach, body.no3d .play-prompt, body.no3d .walk-btn { display: none !important; }
body.coaching .walk-hint { display: none; }

/* ══ the harbour (harbourui.js) ═════════════════════════════
 * Coins and jobs on the plate, the bag grid, the jobs list, the
 * fishmonger's sell sheet and coin shop.
 * ══════════════════════════════════════════════════════════ */

.play-hud .coins b { color: #fde68a; }
.play-hud > button.jobs {
  pointer-events: auto; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; color: var(--muted);
  background: rgba(9,5,20,.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.play-hud > button.jobs b { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.play-hud > button.jobs.ready { border-color: rgba(253,224,71,.7); color: #fde68a; }
.play-hud > button.jobs.pulse { animation: jobpulse 1.2s ease-in-out 4; }
@keyframes jobpulse { 50% { box-shadow: 0 0 0 4px rgba(253,224,71,.35); } }

.cc-bag { margin-top: 6px; font-size: .72rem; color: var(--muted); }
.cc-bag b { color: #fde68a; }
.cc-bagn { font-family: var(--mono); opacity: .8; margin-left: 4px; }

.bag-head, .purse { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin: 6px 0 10px; }
.bag-head b, .purse b { color: var(--ink); font-family: var(--mono); }
.purse { justify-content: flex-start; gap: 6px; }
.purse b { color: #fde68a; }
.bag-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; max-width: 440px; }
.bag-slot {
  position: relative; aspect-ratio: 1.4; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.bag-slot.empty { border-style: dashed; opacity: .5; }
.bag-slot .bp { position: absolute; right: 4px; bottom: 2px; font: 700 .58rem var(--mono); color: #fde68a; }
.bag-slot.t-rare { border-color: color-mix(in srgb, var(--rare) 60%, transparent); }
.bag-slot.t-epic { border-color: color-mix(in srgb, var(--epic) 60%, transparent); }
.bag-slot.t-legendary { border-color: color-mix(in srgb, var(--legendary) 70%, transparent); }
.bag-slot.t-mythical { border-color: color-mix(in srgb, var(--mythical) 70%, transparent); }
.bag-slot canvas { max-width: 92%; }
.pane[data-pane="monger"] .btn[data-h="sell"], .pane[data-pane="bag"] .btn { width: 100%; max-width: 440px; }
.bag-head { max-width: 440px; }

.job { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: rgba(255,255,255,.02); }
.job.done { border-color: rgba(253,224,71,.6); }
.job.claimed { opacity: .6; }
.job-top, .job-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.job-label { font-size: .8rem; font-weight: 700; }
.job-reward { font: 600 .66rem var(--mono); color: #fde68a; white-space: nowrap; }
.job-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; margin: 8px 0 6px; }
.job-bar i { display: block; height: 100%; background: var(--grad); }
.job.done .job-bar i { background: linear-gradient(90deg, #fbbf24, #fde68a); }
.job-foot { font: .66rem var(--mono); color: var(--muted); min-height: 30px; }
.job-ok { color: var(--teal); font: 600 .7rem var(--mono); }
.guest-note { margin-top: 12px; }

.monger-tabs { margin-bottom: 4px; }
.coin-item { display: flex; flex-direction: column; gap: 2px; }
.coin-item .ci-act { margin-top: 8px; }
.coin-item .locked { font: 600 .7rem var(--mono); color: var(--muted); }
.float-sw {
  width: 22px; height: 22px; border-radius: 50%; margin-bottom: 6px;
  background: linear-gradient(180deg, var(--cap) 0 48%, #1d2b3a 48% 54%, var(--c) 54%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}
.title-sw {
  align-self: flex-start; margin-bottom: 6px; font: 600 .6rem var(--mono); letter-spacing: .06em;
  padding: 2px 8px; border-radius: 999px; background: rgba(253,224,71,.12); color: #fde68a;
  border: 1px solid rgba(253,224,71,.35);
}

/* ══ the pond's chat (chat.js) ══════════════════════════════
 * Desktop: a quiet log bottom-left that wakes on a new line and fades;
 * Enter opens the bar. Phone: 💬 opens a sheet, input above the keyboard.
 * ══════════════════════════════════════════════════════════ */

.chat {
  position: absolute; left: 10px; bottom: 44px; z-index: 4; width: min(360px, calc(100vw - 20px));
  display: flex; flex-direction: column; pointer-events: none;
  opacity: 0; transition: opacity .5s;
}
.chat.awake { opacity: 1; }
.chat-head { display: none; }
.chat-log {
  max-height: 168px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.chat-log::-webkit-scrollbar { display: none; }
.cl {
  align-self: flex-start; max-width: 100%;
  font-size: .76rem; line-height: 1.35; color: var(--ink);
  background: rgba(9,5,20,.62); backdrop-filter: blur(6px);
  border-radius: 10px; padding: 4px 9px; overflow-wrap: anywhere;
}
.cl.sys { color: var(--muted); font-style: italic; background: rgba(9,5,20,.45); }
.cl-name {
  background: none; border: 0; padding: 0 6px 0 0; font: 700 .74rem var(--sans); color: var(--cyan); cursor: pointer;
  pointer-events: auto;
}
.cl.guest .cl-name { color: var(--muted); }
.cl.mine .cl-name { color: #fde68a; }
.cl-lvl { font: 700 .6rem var(--mono); color: var(--abyss); background: var(--teal); border-radius: 5px; padding: 0 4px; margin-right: 5px; }
.cl-title { font: 700 .6rem var(--mono); color: #fde68a; margin-right: 5px; letter-spacing: .04em; }
.chat-bar { display: none; gap: 6px; margin-top: 6px; }
.chat-bar input {
  flex: 1; min-width: 0; font: 16px var(--sans);   /* 16px: iOS never zooms the page to focus it */
  color: var(--ink); background: rgba(9,5,20,.82); border: 1px solid var(--line-hot);
  border-radius: 12px; padding: 9px 12px; outline: none;
}
.chat-bar input:focus { border-color: var(--cyan); }
.chat-bar button {
  width: 42px; border-radius: 12px; border: 0; cursor: pointer; font-size: 1rem;
  background: var(--grad); color: #fff; font-weight: 800;
}
.chat.open { opacity: 1; pointer-events: auto; }
.chat.open .chat-bar { display: flex; }
.chat:not(.open) .cl-name { pointer-events: none; }
#chat-sheet-pad { height: 0; }

.chat-btn {
  position: absolute; left: 10px; bottom: 44px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.05rem;
  background: rgba(9,5,20,.66); backdrop-filter: blur(6px); border: 1px solid var(--line); color: var(--ink);
  display: none;
}
.chat-unread {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  background: var(--mythical); color: #fff; font: 800 .6rem/18px var(--mono);
}
.chat-mute {
  position: fixed; z-index: 30; display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line-hot); border-radius: 12px; padding: 8px 10px;
  font-size: .78rem; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.chat-mute[hidden] { display: none; }

@media (pointer: coarse) {
  .chat-btn { display: block; }
  .chat { bottom: 92px; }
  .chat:not(.open) .chat-log { max-height: 96px; }
  .chat.open {
    left: 0; right: 0; bottom: 0; width: auto; z-index: 20;
    background: rgba(16,9,36,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-hot); border-radius: 16px 16px 0 0; padding: 8px 10px 10px;
  }
  .chat.open .chat-head {
    display: flex; justify-content: space-between; align-items: center;
    font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  }
  .chat.open .chat-head button { background: none; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; }
  .chat.open .chat-log { max-height: 38vh; mask-image: none; }
}

/* ══ the game HUD (hud.js) ══════════════════════════════════
 * The plate top-left, the minimap top-right, the hotbar bottom-centre,
 * the area banner in the sky. Overrides the older single-row HUD above.
 * ══════════════════════════════════════════════════════════ */

.play-hud { flex-direction: column; align-items: flex-start; gap: 6px; }
.play-hud .plate-row { display: flex; gap: 6px; align-items: center; }
.play-hud .plate-row > span {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted);
  background: rgba(9,5,20,.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.play-hud .plate-row b { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.play-hud .plate-row .coins b { color: #fde68a; }
.play-hud button.jobs {
  pointer-events: auto; cursor: pointer; font: inherit; font-size: .74rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(9,5,20,.6); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px;
}
.play-hud button.jobs b { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.play-hud button.jobs.ready { border-color: rgba(253,224,71,.7); color: #fde68a; }
.play-hud button.jobs.pulse { animation: jobpulse 1.2s ease-in-out 4; }
.play-hud .lvl .xp { width: 76px; }
.play-hud .bait.empty { border-color: rgba(251,113,133,.5); }

/* top-right: minimap, presence, the small buttons */
.map-corner {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.minimap {
  width: 104px; height: 104px; border-radius: 50%; cursor: pointer; display: block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 0 4px rgba(9,5,20,.55), 0 6px 18px rgba(0,0,0,.35);
  background: #1c6f93;
}
body:not(.pond-3d) .minimap { visibility: hidden; }
.map-corner .live-count {
  font-size: .68rem; color: var(--muted); white-space: nowrap;
  background: rgba(9,5,20,.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(20,241,149,.3); border-radius: 999px; padding: 3px 9px;
}
.map-corner .live-count b { color: var(--ink); font-family: var(--mono); }
.map-corner .live-count .wide { display: none; }
.map-corner .live-count[hidden] { display: none; }
.side-btns { display: flex; gap: 6px; }
.side-btns .mute-btn { position: static; width: 30px; height: 30px; font-size: .8rem; }

/* the area banner: big letters in the sky, then gone */
.zone-banner {
  position: absolute; left: 50%; top: 17%; transform: translate(-50%, 6px); z-index: 2;
  pointer-events: none; text-align: center; opacity: 0; transition: opacity .5s, transform .5s;
  color: #fff; text-shadow: 0 2px 0 rgba(4,32,42,.6), 0 0 18px rgba(4,32,42,.55);
}
.zone-banner.on { opacity: 1; transform: translate(-50%, 0); }
.zone-banner b { display: block; font-size: 1.7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.zone-banner span { display: block; font: 700 .7rem var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .85; margin-top: 2px; }
.zone-banner b::after { content: ''; display: block; height: 2px; margin: 6px auto 0; width: 60%; background: linear-gradient(90deg, transparent, #fde68a, transparent); }

/* the full map */
.map-full { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; background: rgba(3,10,20,.55); backdrop-filter: blur(3px); }
.map-full[hidden] { display: none; }
.map-card { width: min(560px, 94vw); background: var(--panel); border: 1px solid var(--line-hot); border-radius: 18px; padding: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.map-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.map-head b { font-size: 1rem; letter-spacing: .06em; }
.map-head span { font: .66rem var(--mono); color: var(--muted); }
#map-canvas { width: 100%; aspect-ratio: 1.2; max-height: 68vh; border-radius: 12px; display: block; }
.map-key { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font: .66rem var(--mono); color: var(--muted); }
.map-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.k-you { background: #fde047; } .k-walk { background: #fff; } .k-fish { background: #14f195; }

/* the hotbar */
.hotbar {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 6px; padding: 5px; border-radius: 16px;
  background: rgba(9,5,20,.58); backdrop-filter: blur(8px); border: 1px solid var(--line);
}
body:not(.pond-3d) .hotbar { display: none; }
.hb {
  position: relative; width: 56px; height: 52px; border-radius: 11px; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--ink); font-family: inherit;
  transition: transform .1s, border-color .2s, background .2s;
}
.hb:hover { border-color: var(--line-hot); }
.hb:active { transform: scale(.94); }
.hb.on { border-color: var(--cyan); background: rgba(153,69,255,.16); }
.hb-ic { font-size: 1.2rem; line-height: 1.1; }
.hb-lb, .hb b { font-size: .58rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.hb b { font-family: var(--mono); color: var(--ink); }
#h-bag.full { border-color: rgba(251,113,133,.7); }
#h-bag.full b { color: var(--mythical); }
.hb-k { position: absolute; top: 2px; left: 4px; font: 700 .5rem var(--mono); font-style: normal; color: rgba(228,242,255,.4); }
@media (pointer: coarse) { .hb-k { display: none; } }
.hotbar .chat-unread { top: -5px; right: -5px; position: absolute; }
/* while a fish is on, the bar steps back so nothing competes with the reel */
body[data-phase="reeling"] .hotbar, body[data-phase="bite"] .hotbar, body[data-phase="landing"] .hotbar { opacity: .25; pointer-events: none; }
body.chatting .hotbar { opacity: .35; }

/* the old buttons the hotbar replaces */
.walk-btn { display: none !important; }
.chat-btn { display: none !important; }

/* contextual things sit above the bar */
.act-btn { bottom: 78px; }
.walk-hint { bottom: 76px; }
.emotes { left: 50%; bottom: 76px; transform: translateX(-50%); flex-direction: row; }
.emotes .emote-toggle { display: none !important; }
.emotes .emote-row { display: none; flex-direction: row; }
.emotes.open .emote-row { display: flex; }

/* the sealed commitment: bottom-right on a desktop, in the Fair tab on a phone */
.commit-float { left: auto; right: 12px; bottom: 12px; max-width: 300px; }
@media (pointer: coarse), (max-width: 760px) { .commit-float { display: none; } }

/* chat sits left of the bar on a desktop, above it on a phone */
.chat { bottom: 10px; }
@media (pointer: coarse), (max-width: 760px) {
  .chat { bottom: 74px; }
  .chat:not(.open) .chat-log { max-height: 84px; }
}

/* header: the contract address and X */
.ca-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font: 700 .7rem var(--mono); color: var(--muted);
  background: rgba(153,69,255,.06); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px;
}
.ca-chip code { color: var(--ink); }
.ca-chip:hover { border-color: var(--line-hot); }
.ca-chip[hidden], .x-btn[hidden] { display: none; }
.x-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: var(--ink); text-decoration: none; font-weight: 800;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
}
@media (max-width: 640px) {
  .ca-chip code { display: none; }
  .ca-chip { padding: 6px 8px; }
  .x-btn { display: none; }
  .minimap { width: 86px; height: 86px; }
  .play-hud .lvl .xp { width: 56px; }
  .play-hud .plate-row { gap: 4px; }
  .play-hud .plate-row > span, .play-hud button.jobs { padding: 4px 8px; font-size: .7rem; }
  /* the ticker and toasts drop below the plate, clear of the minimap column */
  .float-stack { top: 84px; left: 10px; right: 112px; transform: none; width: auto; max-width: none; }
  .toast { max-width: 100%; }
  .zone-banner { top: 24%; }
  .hb { width: 52px; height: 50px; }
  .zone-banner b { font-size: 1.3rem; }
}
@media (max-width: 360px) { .hb { width: 46px; } .hotbar { gap: 4px; } }

/* before launch: the HUD's buy button is a label, not a link */
#buy.soon { opacity: .7; cursor: default; pointer-events: none; }