/* ============================================================
   Fishing Valley landing page — wooden-dock / deep-ocean theme,
   matching the in-game pixel art. The Phaser canvas lives inside
   the .cabinet frame; the rest is the token marketing site.
   ============================================================ */

:root {
  --ocean: #0a1f30;
  --ocean-2: #12314a;
  --water: #1d4b6b;
  --wood: #6b4a2b;
  --wood-dark: #432b16;
  --wood-light: #8a6038;
  --bevel-light: #b07e4a;
  --bevel-dark: #2e1c0d;
  --rope: #d8b169;
  --gold: #f6c453;
  --teal: #4fb9c9;
  --good: #7bd88f;
  --text: #fdf3df;
  --text-dim: #c9a87a;
  --text-dark: #2a1a0c;

  --font-head: "Press Start 2P", monospace;
  --font-body: "Silkscreen", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stop mobile browsers from auto-inflating our pixel-font sizes. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--ocean-2), transparent 70%),
    linear-gradient(180deg, var(--ocean) 0%, #071624 100%);
  background-attachment: fixed;
  /* faint pixel grid */
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 185, 201, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 185, 201, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* ============================ buttons ============================ */

.btn {
  --face: var(--wood);
  font-family: var(--font-head);
  font-size: 12px;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--face);
  border: 3px solid var(--bevel-dark);
  border-top-color: var(--bevel-light);
  border-left-color: var(--bevel-light);
  box-shadow: 0 4px 0 var(--bevel-dark), 0 6px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  user-select: none;
  transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.12s ease;
  image-rendering: pixelated;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--bevel-dark), 0 2px 5px rgba(0, 0, 0, 0.4);
  border-top-color: var(--bevel-dark);
  border-left-color: var(--bevel-dark);
  border-bottom-color: var(--bevel-light);
  border-right-color: var(--bevel-light);
}
.btn:focus-visible { outline: 3px solid var(--rope); outline-offset: 3px; }

.btn--buy { --face: var(--gold); color: var(--text-dark); }
.btn--ghost { --face: var(--wood-light); }

.is-pending { opacity: 0.65; }

/* ============================ nav ============================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(67, 43, 22, 0.96), rgba(46, 28, 13, 0.96));
  border-bottom: 4px solid var(--bevel-dark);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__logo { font-size: 22px; }
.nav__name {
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--text);
  letter-spacing: 1px;
}
.nav__ticker {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--ocean);
  background: var(--gold);
  padding: 4px 7px;
  border: 2px solid var(--bevel-dark);
}
.nav__links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nav__link {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 6px 4px;
  transition: color 0.12s ease;
}
.nav__link:hover { color: var(--rope); }
.nav__link--x { font-size: 16px; color: var(--text); }

/* X (Twitter) button in the nav: matched to the CA chip beside it — same
   wood-dark face, light top/left bevel, height and font — so they read as a
   pair. The glyph is centered so the tile stays square. */
.nav__x {
  --face: var(--wood-dark);
  font-size: 14px;
  padding: 9px 13px;
  justify-content: center;
  border-top-color: var(--wood-light);
  border-left-color: var(--wood-light);
}

/* contract-address chip */
.ca {
  font-family: var(--font-body);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: var(--text);
  background: var(--wood-dark);
  border: 3px solid var(--bevel-dark);
  border-top-color: var(--wood-light);
  border-left-color: var(--wood-light);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--bevel-dark);
  transition: transform 0.05s ease, filter 0.12s ease;
}
.ca:hover { filter: brightness(1.15); }
.ca:active { transform: translateY(3px); box-shadow: 0 0 0 var(--bevel-dark); }
.ca:focus-visible { outline: 3px solid var(--rope); outline-offset: 2px; }
.ca__label { color: var(--rope); }
.ca__addr { color: var(--text); letter-spacing: 0.5px; }
.ca__icon { color: var(--teal); }
.ca--block {
  width: 100%;
  justify-content: space-between;
  font-size: 16px;
  word-break: break-all;
  text-align: left;
}
.ca__addr--full { color: var(--gold); }

/* ============================ page ============================ */

.page {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

/* hero */
.hero { text-align: center; padding: 40px 0 28px; }
.hero__title {
  font-family: var(--font-head);
  font-size: clamp(28px, 6vw, 56px);
  margin: 0 0 18px;
  color: var(--text);
  text-shadow: 0 4px 0 var(--bevel-dark), 0 0 24px rgba(79, 185, 201, 0.4);
  letter-spacing: 2px;
}
.hero__tagline {
  font-size: clamp(14px, 2.4vw, 20px);
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 auto 26px;
  line-height: 1.6;
}
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================ game cabinet ============================ */

.play { padding: 24px 0 8px; }
.cabinet {
  width: min(960px, 100%);
  margin: 0 auto;
  background: var(--wood);
  border: 5px solid var(--bevel-dark);
  border-top-color: var(--bevel-light);
  border-left-color: var(--bevel-light);
  box-shadow: 0 10px 0 var(--bevel-dark), 0 26px 50px rgba(0, 0, 0, 0.55);
  padding: 8px;
}
.cabinet__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--wood-dark);
  border: 2px solid var(--bevel-dark);
  margin-bottom: 8px;
}
.cabinet__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bevel-light);
  box-shadow: inset 0 0 0 2px var(--bevel-dark);
}
.cabinet__dot:nth-child(1) { background: var(--good); }
.cabinet__dot:nth-child(2) { background: var(--gold); }
.cabinet__dot:nth-child(3) { background: var(--teal); }
.cabinet__title {
  margin-left: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.cabinet__screen {
  background: #071624;
  border: 3px solid var(--bevel-dark);
  overflow: hidden;
}
/* The Phaser canvas mounts here. Fixed 16:10 (960x600) so hit areas
   line up exactly with what the player sees. */
#game-root {
  width: 100%;
  aspect-ratio: 960 / 600;
  display: block;
  /* Own all touch gestures over the game: taps/holds drive fishing instead of
     scrolling or pinch-zooming the page. Kills the iOS tap-highlight flash too. */
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* In fullscreen, drop the fixed aspect-ratio and fill the screen so Phaser's
   Scale.FIT can scale the canvas up to the full display (centered). */
#game-root:fullscreen,
#game-root:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  background: #071624;
}
/* Let Phaser's Scale.FIT manage the canvas pixel + display size so input
   hit-testing matches what's drawn; we only style the rendering. */
#game-root canvas {
  display: block;
  touch-action: none;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
/* Floating music play/stop button, overlaid on the top-right of the canvas.
   Mounted into #game-root by src/audio/music.js so it survives fullscreen. */
#music-btn {
  position: absolute;
  /* top/right are set by repositionButton() in music.js, which measures the
     actual canvas bounds so the button tracks correctly at any scale and in
     fullscreen with letterboxing. These are safe fallbacks only. */
  top: 2%;
  right: 10%;
  z-index: 20;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  color: var(--rope);
  background: var(--wood-dark);
  border: 3px solid var(--bevel-dark);
  border-top-color: var(--bevel-light);
  border-left-color: var(--bevel-light);
  box-shadow: 0 3px 0 var(--bevel-dark);
  opacity: 0.8;
  transition: opacity 0.15s ease, transform 0.1s ease;
  user-select: none;
}
#music-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
}
#music-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--bevel-dark);
}
#music-btn.is-on {
  color: var(--good);
  border-color: var(--good);
  border-top-color: var(--bevel-light);
  border-left-color: var(--bevel-light);
}

.play__hint {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  margin: 16px 0 0;
}
.play__hint kbd {
  font-family: var(--font-head);
  font-size: 10px;
  background: var(--wood-dark);
  color: var(--rope);
  padding: 3px 6px;
  border: 2px solid var(--bevel-dark);
}

/* ============================ info cards ============================ */

.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 44px;
}
.card {
  background: var(--wood);
  border: 4px solid var(--bevel-dark);
  border-top-color: var(--bevel-light);
  border-left-color: var(--bevel-light);
  box-shadow: 0 6px 0 var(--bevel-dark);
  padding: 18px;
}
.card__h {
  font-family: var(--font-head);
  font-size: 13px;
  color: var(--rope);
  margin: 0 0 14px;
}
.card__note { font-size: 13px; color: var(--text-dim); margin: 12px 0 0; line-height: 1.5; }
.card__list { margin: 0; padding-left: 4px; list-style: none; font-size: 15px; line-height: 2; }

.socials { display: flex; flex-direction: column; gap: 10px; }
.social {
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  padding: 10px 12px;
  background: var(--wood-dark);
  border: 2px solid var(--bevel-dark);
  border-top-color: var(--wood-light);
  border-left-color: var(--wood-light);
  transition: filter 0.12s ease, transform 0.05s ease;
}
.social:hover { filter: brightness(1.18); }
.social:active { transform: translateY(2px); }

/* ============================ footer ============================ */

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px 24px;
  border-top: 3px solid var(--bevel-dark);
  color: var(--text-dim);
  font-size: 13px;
}
.foot__dim { opacity: 0.7; }

/* ============================ toast ============================ */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--wood-dark);
  color: var(--text);
  font-size: 14px;
  padding: 12px 18px;
  border: 3px solid var(--rope);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}
.toast--show { opacity: 1; transform: translate(-50%, 0); }

/* ============================ wallet ============================ */

.btn--wallet { --face: var(--teal); color: var(--text-dark); }
.btn--wallet.is-connected {
  --face: var(--wood-dark);
  color: var(--text);
  border-top-color: var(--wood-light);
  border-left-color: var(--wood-light);
}
.wallet-ico { margin-right: 7px; }

/* Picker modal (shown when disconnected) */
.wallet-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 12, 20, 0.66);
  padding: 20px;
}
.wallet-card {
  width: min(320px, 92vw);
  background: var(--wood);
  border: 5px solid var(--bevel-dark);
  border-top-color: var(--bevel-light);
  border-left-color: var(--bevel-light);
  box-shadow: 0 10px 0 var(--bevel-dark), 0 26px 50px rgba(0, 0, 0, 0.55);
  padding: 20px;
}
.wallet-card__h {
  font-family: var(--font-head);
  font-size: 14px;
  color: var(--rope);
  margin: 0 0 16px;
}
.wallet-card__note { font-size: 14px; color: var(--text-dim); margin: 0 0 12px; }
.wallet-opt {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  padding: 12px 14px;
  margin-top: 10px;
  background: var(--wood-dark);
  border: 3px solid var(--bevel-dark);
  border-top-color: var(--wood-light);
  border-left-color: var(--wood-light);
  transition: filter 0.12s ease, transform 0.05s ease;
}
.wallet-opt:hover { filter: brightness(1.18); }
.wallet-opt:active { transform: translateY(2px); }

/* Connected dropdown menu */
.wallet-menu {
  position: absolute;
  z-index: 60;
  min-width: 200px;
  background: var(--wood);
  border: 4px solid var(--bevel-dark);
  border-top-color: var(--bevel-light);
  border-left-color: var(--bevel-light);
  box-shadow: 0 8px 0 var(--bevel-dark), 0 18px 36px rgba(0, 0, 0, 0.5);
  padding: 6px;
}
.wallet-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  transition: background 0.12s ease;
}
.wallet-menu__item:hover { background: var(--wood-dark); }
.wallet-menu__item--static { cursor: default; color: var(--text-dim); }
.wallet-menu__item--static:hover { background: transparent; }
.wallet-menu__item--danger { color: #ff9a7a; }
.wallet-menu__hint { color: var(--teal); font-size: 13px; }

/* ============================ responsive ============================ */

@media (max-width: 720px) {
  .nav { justify-content: center; gap: 10px; }
  .nav__name { font-size: 13px; }
  .ca__label { display: none; }
  .foot { justify-content: center; text-align: center; }
}

/* ---- phones (portrait + small landscape) ---- */
@media (max-width: 560px) {
  /* Tighten the nav so the wallet/buy buttons don't wrap into a tall stack. */
  .nav { padding: 10px 12px; gap: 8px; }
  .nav__brand { gap: 7px; }
  .nav__name { font-size: 11px; letter-spacing: 0; }
  .nav__logo { font-size: 18px; }
  .nav__ticker { font-size: 9px; padding: 3px 5px; }
  .nav__links { gap: 7px; }
  .btn { font-size: 10px; padding: 10px 11px; }
  .ca { font-size: 12px; padding: 8px 9px; }

  /* Reclaim vertical space above the game so it's reachable without a long
     scroll, and let the cabinet run edge-to-edge. */
  .page { padding: 16px 10px 32px; }
  .hero { padding: 18px 0 14px; }
  .hero__tagline { margin-bottom: 18px; }
  .play { padding: 12px 0 8px; }
  .cabinet { border-width: 4px; padding: 5px; }
  .cabinet__bar { padding: 6px 8px; margin-bottom: 6px; }
  .cabinet__title { font-size: 11px; }
  .play__hint { font-size: 12px; line-height: 1.6; }
  .info { margin-top: 28px; gap: 14px; }
}

/* On a phone held LANDSCAPE, blow the cabinet up to fill the viewport so the
   in-canvas buttons (SHOP/BAG/fullscreen) are big enough to tap comfortably. */
@media (max-height: 560px) and (orientation: landscape) {
  .nav { position: static; }
  .hero { display: none; }
  .page { padding: 8px; }
  .play { padding: 0; }
  .cabinet { width: min(100%, calc((100vh - 40px) * 1.6)); }
  .play__hint { margin-top: 8px; font-size: 11px; }
}

/* Coarse pointers (touch): keep the music button fully opaque (there's no hover
   to reveal it). Its width/height/font-size are set inline by repositionButton()
   in music.js so it always matches the in-canvas fullscreen button's size. */
@media (pointer: coarse) {
  #music-btn { opacity: 0.95; }
}

/* ============================ cash-out (withdraw) ============================ */
/* Floating "Cash Out" button at the bottom-left of the game, + its modal.
   Mounted into #game-root by src/ui/withdrawPanel.js so both survive fullscreen. */
#cashout-btn {
  position: absolute;
  /* top / right / height / font-size are set by repositionCashout() */
  top: 2%;
  right: 32%;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  background: var(--wood);
  border: 3px solid var(--bevel-dark);
  border-top-color: var(--bevel-light);
  border-left-color: var(--bevel-light);
  box-shadow: 0 2px 0 var(--bevel-dark);
  padding: 0 10px;
  cursor: pointer;
  user-select: none;
  transition: filter 0.12s ease, transform 0.1s ease;
}
#cashout-btn:hover:not(:disabled) { background: var(--wood-light); transform: translateY(-1px); }
#cashout-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 var(--bevel-dark); }
#cashout-btn:disabled { filter: grayscale(0.6) brightness(0.7); cursor: not-allowed; opacity: 0.6; }

#cashout-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none; /* toggled to flex by JS */
  align-items: center;
  justify-content: center;
  background: rgba(4, 12, 20, 0.72);
  padding: 16px;
}
#cashout-card {
  position: relative;
  width: min(380px, 94%);
  max-height: 92%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wood);
  border: 5px solid var(--bevel-dark);
  border-top-color: var(--bevel-light);
  border-left-color: var(--bevel-light);
  box-shadow: 0 10px 0 var(--bevel-dark), 0 24px 50px rgba(0, 0, 0, 0.55);
  padding: 14px 16px 16px;
  color: var(--text);
}
#cashout-card h2 {
  font-family: var(--font-head);
  font-size: 14px;
  color: var(--gold);
  margin: 0 0 6px;
}
#cashout-x {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  background: var(--wood-dark);
  color: var(--text);
  border: 2px solid var(--bevel-dark);
  border-top-color: var(--wood-light);
  border-left-color: var(--wood-light);
  cursor: pointer;
  font-size: 13px;
}
.cashout-sub { font-size: 11px; color: var(--text-dim); line-height: 1.3; margin: 0 0 8px; }
.cashout-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 3px 0; border-bottom: 1px dashed var(--bevel-dark);
}
.cashout-row span { color: var(--text-dim); }
.cashout-row b { color: var(--text); }
.cashout-label {
  display: block; margin: 8px 0 4px;
  font-family: var(--font-head); font-size: 10px; color: var(--rope);
}
.cashout-input-row { display: flex; gap: 8px; }
#cashout-amount {
  flex: 1;
  background: var(--ocean);
  border: 3px solid var(--bevel-dark);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 7px 10px;
}
#cashout-amount:focus { outline: none; border-color: var(--rope); }
#cashout-max {
  font-family: var(--font-head); font-size: 10px;
  color: var(--text); background: var(--wood-dark);
  border: 3px solid var(--bevel-dark);
  border-top-color: var(--wood-light); border-left-color: var(--wood-light);
  padding: 0 12px; cursor: pointer;
}
.cashout-est { font-size: 12px; color: var(--good); margin: 6px 0 8px; }
.cashout-est b { color: var(--gold); }
#cashout-submit {
  width: 100%;
  font-family: var(--font-head); font-size: 12px;
  color: var(--text-dark); background: var(--gold);
  border: 3px solid var(--bevel-dark);
  border-top-color: var(--bevel-light); border-left-color: var(--bevel-light);
  box-shadow: 0 4px 0 var(--bevel-dark);
  padding: 9px; cursor: pointer;
  transition: filter 0.12s ease, transform 0.05s ease;
}
#cashout-submit:hover:not(:disabled) { filter: brightness(1.1); }
#cashout-submit:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--bevel-dark); }
#cashout-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.cashout-msg { min-height: 14px; font-size: 11px; margin: 6px 0 0; line-height: 1.3; }
.cashout-msg.ok   { color: var(--good); }
.cashout-msg.warn { color: var(--gold); }
.cashout-h3 {
  font-family: var(--font-head); font-size: 10px; color: var(--rope);
  margin: 8px 0 6px; border-top: 1px solid var(--bevel-dark); padding-top: 8px;
  flex-shrink: 0;
}
.cashout-history { display: flex; flex-direction: column; gap: 5px; flex: 1; min-height: 0; overflow-y: auto; }
.cashout-empty { font-size: 12px; color: var(--text-dim); }
.cashout-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  font-size: 12px;
  padding: 8px 10px;
  background: var(--wood-dark);
  border-left: 3px solid var(--bevel-dark);
}
.cashout-item-main { color: var(--text); }
.cashout-item-status { color: var(--text-dim); text-align: right; }
.cashout-item-status a { color: var(--teal); }
.cashout-item-date { grid-column: 1 / -1; color: var(--bevel-light); font-size: 10px; }
.cashout-item.cashout-dispersed { border-left-color: var(--good); }
.cashout-item.cashout-validated { border-left-color: var(--teal); }
.cashout-item.cashout-pending   { border-left-color: var(--gold); }
.cashout-item.cashout-rejected  { border-left-color: var(--bad); }
.cashout-item.cashout-refunded  { border-left-color: var(--rope); }