/* ══ $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 {
  --abyss:    #050b16;
  --deep:     #081524;
  --panel:    #0c1e33;
  --line:     #1b3b5c;
  --line-hot: #2a5f8f;

  --ink:      #e4f2ff;
  --muted:    #7ea6c8;

  --cyan:     #2ad4ee;
  --teal:     #35e0c8;
  --grad:     linear-gradient(135deg, #2ad4ee 0%, #35e0c8 100%);
  --grad-dim: linear-gradient(135deg, rgba(42,212,238,.18), rgba(53,224,200,.10));

  --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(8,21,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(42,212,238,.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(42,212,238,.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: #04202a;
  box-shadow: 0 5px 16px rgba(42,212,238,.22);
}
.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(5,11,22,.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(5,11,22,.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(5,11,22,.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(42,212,238,.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(42,212,238,.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: #04202a; 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(42,212,238,.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(42,212,238,.18); }
.item .act button.primary { background: var(--grad); border: 0; color: #04202a; 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(8, 21, 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(8,21,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(42,212,238,.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: #04202a; 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(42,212,238,.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(42,212,238,.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(5,11,22,.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(5,11,22,.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(5,11,22,.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(42,212,238,.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(8,18,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(42,212,238,.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(5,11,22,.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, #35e0c8, #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(8, 21, 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(8,21,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(42,212,238,.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(53,224,200,.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(5,11,22,.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(8,21,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(42,212,238,.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(5,11,22,.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(42,212,238,.10), rgba(53,224,200,.04));
  border: 1px solid rgba(42,212,238,.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(42,212,238,.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(42,212,238,.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(42,212,238,.18); box-shadow: 0 0 0 2px rgba(42,212,238,.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(42,212,238,.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); }