/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0a1520;
  --surface:    #0f2030;
  --surface2:   #162840;
  --border:     #1e3a50;
  --text:       #c8dde8;
  --text-muted: #5a8099;
  --accent:     #4ab3d4;

  --common:    #9aa8b2;
  --uncommon:  #4caf72;
  --rare:      #4a90d4;
  --legendary: #f0c040;
  --mythic:    #ff5fd1;

  --bite-glow: #ff6b35;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: contain;
}

body {
  /* Lock body scroll on touch so the layout doesn't bounce around when
     the player taps. Inner scrollers (#event-feed, #catch-list) still scroll. */
  overflow: hidden;
}

/* ─── Layout ────────────────────────────────────────────────── */
#app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* dvh tracks the dynamic viewport so iOS Safari's collapsing toolbar
     doesn't clip the layout. Old browsers fall back to 100vh above. */
  height: 100dvh;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
  /* Respect the iOS notch / home-indicator safe area. */
  padding-left:  max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

header {
  position: relative;
  padding: 14px 220px 10px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

header h1 {
  font-size: 1.5rem;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
}

#header-actions {
  position: absolute;
  top: 14px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 40;
}

#header-actions-menu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#header-menu-toggle,
#share-linkedin,
#how-to-play-toggle,
#history-toggle {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  color: var(--accent);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}

#header-menu-toggle {
  display: none;
}

#share-linkedin,
#how-to-play-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#share-linkedin:active,
#header-menu-toggle:active,
#how-to-play-toggle:active {
  transform: scale(0.97);
}

#history-toggle {
  display: none;
}

/* ─── Environment strip (location + weather) ────────────────── */
#env-bar {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text);
  letter-spacing: 0.5px;
  user-select: none;
  transition: color 0.35s ease;
}

#env-bar .env-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.35s ease, background 0.35s ease;
}

#env-bar .env-icon {
  font-size: 1rem;
  line-height: 1;
}

#env-bar .env-sep {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Location theming */
#env-bar[data-location="lake"]  .env-loc { border-color: rgba(74, 179, 212, 0.6); }
#env-bar[data-location="river"] .env-loc { border-color: rgba(76, 175, 114, 0.6); }
#env-bar[data-location="ocean"] .env-loc { border-color: rgba(255, 95, 209, 0.45); background: rgba(255, 95, 209, 0.06); }

/* Weather theming */
#env-bar[data-weather="clear"]  .env-wx  { border-color: rgba(240, 192, 64, 0.55); }
#env-bar[data-weather="cloudy"] .env-wx  { border-color: rgba(154, 168, 178, 0.6); }
#env-bar[data-weather="rain"]   .env-wx  { border-color: rgba(74, 144, 212, 0.65); background: rgba(74, 144, 212, 0.07); }
#env-bar[data-weather="storm"]  .env-wx  {
  border-color: rgba(255, 107, 53, 0.7);
  background: rgba(255, 107, 53, 0.08);
  animation: stormFlicker 4.5s ease-in-out infinite;
}
#env-bar[data-weather="night"]  .env-wx  {
  border-color: rgba(170, 190, 230, 0.6);
  background: rgba(60, 80, 130, 0.10);
}

@keyframes stormFlicker {
  0%, 92%, 100% { box-shadow: none; }
  93%, 95%      { box-shadow: 0 0 12px rgba(255, 107, 53, 0.55); }
  94%           { box-shadow: 0 0 18px rgba(255, 230, 200, 0.9); }
}

#status-bar {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 22px;
}

#status-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: color 0.3s;
}

#status-text.active { color: var(--accent); }
#status-text.bite   { color: var(--bite-glow); font-weight: bold; }

/* Bite countdown bar — now lives inside #bite-alert, fills remaining width */
#bite-timer-bar {
  flex: 1;
  height: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(255, 107, 53, 0.25);
}

#bite-timer-fill {
  height: 100%;
  width: 100%;
  background: var(--bite-glow);
  transform-origin: left;
  transition: transform linear;
  border-radius: 4px;
}

.hidden { display: none !important; }

/* ─── Main ──────────────────────────────────────────────────── */
main {
  display: flex;
  flex: 1;
  gap: 12px;
  overflow: hidden;
  padding: 12px 0;
}

/* Scene Panel */
#scene-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  touch-action: manipulation;
}

#scene-art {
  padding: 16px 20px 10px;
  color: var(--accent);
  font-size: 0.78rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  white-space: pre;
  text-align: center;
  user-select: none;
}

#event-feed {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

.event-msg {
  padding: 3px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(30,58,80,0.4);
  animation: fadeIn 0.3s ease;
  line-height: 1.5;
}

.event-msg.ambient { color: var(--text-muted); }
.event-msg.action  { color: var(--text); }
.event-msg.bite    { color: var(--bite-glow); font-weight: bold; font-size: 1rem; }
.event-msg.escape  { color: #e06060; }
.event-msg.catch   { font-weight: bold; }
.event-msg.catch.common    { color: var(--common); }
.event-msg.catch.uncommon  { color: var(--uncommon); }
.event-msg.catch.rare      { color: var(--rare); }
.event-msg.catch.legendary { color: var(--legendary); text-shadow: 0 0 8px var(--legendary); }
.event-msg.catch.mythic    { color: var(--mythic); text-shadow: 0 0 10px var(--mythic); font-size: 1.05rem; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Ambient activity indicator ────────────────────────────── */
/* Persistent fishing-themed "alive" signal shown while waiting,
   so the player can tell the simulation hasn't frozen between
   ambient messages. */
#ambient-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-top: 1px dashed rgba(30, 58, 80, 0.6);
  background: rgba(10, 21, 32, 0.4);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  user-select: none;
}

#ambient-indicator .bobber {
  color: var(--accent);
  font-size: 0.9rem;
  display: inline-block;
  animation: bobberBob 1.8s ease-in-out infinite;
}

#ambient-indicator .ripple-line {
  color: var(--accent);
  opacity: 0.55;
  letter-spacing: 2px;
  animation: rippleDrift 2.6s ease-in-out infinite;
}

#ambient-indicator-label {
  transition: opacity 0.25s ease;
}

#ambient-indicator .indicator-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: -2px;
}

#ambient-indicator .indicator-dots span {
  display: inline-block;
  opacity: 0.25;
  animation: dotPulse 1.4s ease-in-out infinite;
}
#ambient-indicator .indicator-dots span:nth-child(2) { animation-delay: 0.18s; }
#ambient-indicator .indicator-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes bobberBob {
  0%, 100% { transform: translateY(2px); }
  50%      { transform: translateY(-3px); }
}

@keyframes rippleDrift {
  0%, 100% { opacity: 0.3; transform: translateX(-2px); }
  50%      { opacity: 0.7; transform: translateX(2px);  }
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1;   }
}

/* ─── Bite alert lane ───────────────────────────────────────── */
/* Occupies the same slot as #ambient-indicator. The two are mutually
   exclusive: ambient indicator during WAITING, bite alert during BITE. */
#bite-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid rgba(255, 107, 53, 0.55);
  background: rgba(40, 12, 0, 0.5);
  color: var(--bite-glow);
  font-weight: bold;
  font-size: 0.92rem;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  animation: biteAlertGlow 0.7s ease infinite alternate;
}

#bite-alert .bite-alert-icon {
  font-size: 1.1rem;
  display: inline-block;
  animation: biteIconWiggle 0.4s ease infinite alternate;
}

#bite-alert-text {
  flex-shrink: 0;
  text-shadow: 0 0 6px rgba(255, 107, 53, 0.4);
}

@keyframes biteAlertGlow {
  from { background: rgba(40, 12, 0, 0.5); box-shadow: inset 0 0 0 rgba(255, 107, 53, 0); }
  to   { background: rgba(70, 22, 0, 0.6); box-shadow: inset 0 0 14px rgba(255, 107, 53, 0.25); }
}

@keyframes biteIconWiggle {
  from { transform: rotate(-10deg) translateY(0); }
  to   { transform: rotate(12deg)  translateY(-2px); }
}

/* ─── Catch Log Sidebar ─────────────────────────────────────── */
#catch-log {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#catch-log h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#catch-stats {
  display: flex;
  justify-content: space-between;
  padding: 6px 14px;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#catch-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
}

#catch-list .empty-log {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 20px 10px;
  font-style: italic;
}

.catch-entry {
  padding: 7px 14px;
  border-bottom: 1px solid rgba(30,58,80,0.5);
  font-size: 0.8rem;
  animation: fadeIn 0.3s ease;
}

.catch-entry .fish-name  { font-weight: bold; display: block; }
.catch-entry .fish-info  { color: var(--text-muted); font-size: 0.74rem; }
.catch-entry .rarity-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; }

.catch-entry.common    .fish-name { color: var(--common); }
.catch-entry.uncommon  .fish-name { color: var(--uncommon); }
.catch-entry.rare      .fish-name { color: var(--rare); }
.catch-entry.legendary .fish-name { color: var(--legendary); text-shadow: 0 0 6px var(--legendary); }
.catch-entry.mythic    .fish-name { color: var(--mythic); text-shadow: 0 0 8px var(--mythic); animation: mythicPulse 2s ease infinite alternate; }
.catch-entry.miss      { opacity: 0.6; }
.catch-entry.miss .fish-name { color: var(--text-muted); font-style: italic; font-weight: normal; }

@keyframes mythicPulse {
  from { text-shadow: 0 0 6px var(--mythic); }
  to   { text-shadow: 0 0 14px var(--mythic), 0 0 24px var(--mythic); }
}

/* ─── Catch overlay: new-record adornments ──────────────────── */
#catch-card.record { box-shadow: 0 0 36px rgba(240, 192, 64, 0.7), 0 0 48px rgba(240, 192, 64, 0.35); }
#catch-card.record #catch-fish-name { animation: recordShine 1.6s ease infinite alternate; }
.record-tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--legendary);
  border-radius: 3px;
  color: var(--legendary);
  font-size: 0.66rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 4px var(--legendary);
}

@keyframes recordShine {
  from { text-shadow: 0 0 4px var(--legendary); }
  to   { text-shadow: 0 0 14px var(--legendary), 0 0 24px rgba(240, 192, 64, 0.6); }
}

/* ─── Footer ────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 8px 0 6px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

#audio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  color: var(--text-muted);
  opacity: 0.85;
}

#audio-controls .audio-sep { opacity: 0.4; }
#audio-controls b { color: var(--accent); font-weight: bold; }
#audio-controls b.off  { color: var(--text-muted); }
#audio-controls b.low  { color: var(--accent); }
#audio-controls b.high { color: var(--uncommon); }

#app-version {
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.45;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

kbd {
  display: inline-block;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 7px;
  font-family: inherit;
  font-size: 0.85em;
  color: var(--accent);
}

#action-hint.pulse {
  animation: pulse 0.8s ease infinite alternate;
}

@keyframes pulse {
  from { color: var(--bite-glow); }
  to   { color: #ff9966; }
}

/* ─── Bite Screen Flash ─────────────────────────────────────── */
body.bite-flash {
  animation: screenFlash 0.4s ease;
}

@keyframes screenFlash {
  0%   { background: var(--bg); }
  30%  { background: #1a0a00; }
  100% { background: var(--bg); }
}

/* ─── Mythic Catch Shake ────────────────────────────────────── */
#app.screen-shake {
  animation: screenShake 0.9s ease;
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10%      { transform: translate(-9px, 4px); }
  20%      { transform: translate(8px, -6px); }
  30%      { transform: translate(-7px, -3px); }
  40%      { transform: translate(6px, 7px); }
  50%      { transform: translate(-5px, 3px); }
  60%      { transform: translate(4px, -5px); }
  70%      { transform: translate(-3px, 4px); }
  80%      { transform: translate(2px, -2px); }
  90%      { transform: translate(-1px, 1px); }
}

/* ─── Catch Overlay ─────────────────────────────────────────── */
#catch-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 8, 16, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: overlayFadeIn 0.25s ease;
}

#catch-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 22px 32px 18px;
  text-align: center;
  max-width: 92vw;
  animation: cardScaleIn 0.35s cubic-bezier(0.2, 1.2, 0.3, 1);
  cursor: default;
}

#catch-card.common    { border-color: var(--common);    box-shadow: 0 0 24px rgba(154,168,178,0.4); }
#catch-card.uncommon  { border-color: var(--uncommon);  box-shadow: 0 0 26px rgba(76,175,114,0.5); }
#catch-card.rare      { border-color: var(--rare);      box-shadow: 0 0 30px rgba(74,144,212,0.6); }
#catch-card.legendary { border-color: var(--legendary); box-shadow: 0 0 36px rgba(240,192,64,0.7); }
#catch-card.mythic    { border-color: var(--mythic);    box-shadow: 0 0 44px rgba(255,95,209,0.85); }

#catch-banner {
  font-size: 0.75rem;
  letter-spacing: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

#catch-card.legendary #catch-banner { color: var(--legendary); text-shadow: 0 0 4px var(--legendary); }
#catch-card.mythic    #catch-banner { color: var(--mythic);    text-shadow: 0 0 6px var(--mythic); }

#catch-art {
  font-size: 0.78rem;
  line-height: 1.15;
  color: var(--accent);
  margin: 0 0 16px 0;
  white-space: pre;
  text-align: left;
  display: inline-block;
  user-select: none;
}

#catch-card.common    #catch-art { color: var(--common); }
#catch-card.uncommon  #catch-art { color: var(--uncommon); }
#catch-card.rare      #catch-art { color: var(--rare); }
#catch-card.legendary #catch-art { color: var(--legendary); text-shadow: 0 0 6px rgba(240,192,64,0.6); }
#catch-card.mythic    #catch-art { color: var(--mythic);    text-shadow: 0 0 8px rgba(255,95,209,0.7); }

#catch-fish-name {
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--text);
  margin-bottom: 4px;
}

#catch-card.legendary #catch-fish-name { color: var(--legendary); text-shadow: 0 0 6px var(--legendary); }
#catch-card.mythic    #catch-fish-name { color: var(--mythic);    text-shadow: 0 0 8px var(--mythic); }

#catch-fish-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

#catch-fish-meta .rarity-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#catch-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 10px;
}

#catch-actions button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}

#catch-continue {
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
}

#catch-share {
  color: var(--accent);
  background: var(--surface2);
  border: 1px solid var(--border);
}

#catch-actions button:active {
  transform: scale(0.97);
}

#catch-dismiss-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ─── How to Play Overlay ───────────────────────────────────── */
#how-to-play-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 8, 16, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  animation: overlayFadeIn 0.25s ease;
}

#how-to-play-card {
  width: min(92vw, 520px);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 22px 28px 20px;
  animation: cardScaleIn 0.35s cubic-bezier(0.2, 1.2, 0.3, 1);
}

#how-to-play-card h2 {
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#how-to-play-card ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 18px;
  color: var(--text);
  line-height: 1.45;
}

#how-to-play-card li::marker {
  color: var(--accent);
}

#how-to-play-close {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 40px;
  margin-top: 18px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}

#how-to-play-close:active {
  transform: scale(0.98);
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cardScaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Weather visual enhancements ───────────────────────────── */
/* (1) Subtle background tint per weather — drives --bg so existing flash
       animations follow the tint automatically. */
body[data-weather="clear"]  { --bg: #0c1a26; }
body[data-weather="cloudy"] { --bg: #0a141d; }
body[data-weather="rain"]   { --bg: #081420; }
body[data-weather="storm"]  { --bg: #050d16; }
body[data-weather="night"]  { --bg: #04081a; }

/* (2) Scene-art color tint per weather. */
body[data-weather="clear"]  #scene-art { color: #6fcdd4; }
body[data-weather="cloudy"] #scene-art { color: #8ea4ae; }
body[data-weather="rain"]   #scene-art { color: #5fa0c8; }
body[data-weather="storm"]  #scene-art { color: #4a7a98; }
body[data-weather="night"]  #scene-art { color: #6b87b8; text-shadow: 0 0 6px rgba(140, 170, 220, 0.18); }

/* Weather effect overlay — sits above app content but below catch overlay. */
#weather-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

/* (3) Sun rays — soft warm radial gradient drifting in the top-right. */
.wfx-sunrays {
  position: absolute;
  top: -18vh;
  right: -12vw;
  width: 75vw;
  height: 85vh;
  background: radial-gradient(
    circle at 75% 25%,
    rgba(255, 220, 130, 0.13) 0%,
    rgba(255, 200, 100, 0.05) 28%,
    transparent 62%
  );
  filter: blur(4px);
  animation: sunPulse 9s ease-in-out infinite alternate;
}

@keyframes sunPulse {
  from { opacity: 0.65; transform: scale(1)    rotate(0deg); }
  to   { opacity: 1.00; transform: scale(1.06) rotate(2deg); }
}

/* (4) Drifting cloud-shadow band for cloudy weather. */
.wfx-cloud-band {
  position: absolute;
  top: 28%;
  left: -40%;
  width: 180vw;
  height: 28vh;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180, 200, 215, 0.04) 22%,
    rgba(180, 200, 215, 0.09) 50%,
    rgba(180, 200, 215, 0.04) 78%,
    transparent 100%
  );
  filter: blur(22px);
  animation: cloudDrift 34s linear infinite;
}

@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(50vw); }
}

/* (5) Falling raindrops — short translucent streaks. */
.wfx-raindrop {
  position: absolute;
  top: -22px;
  width: 1px;
  height: 13px;
  background: linear-gradient(to bottom, transparent, rgba(170, 200, 220, 0.55));
  animation: rainFall 1s linear infinite;
  will-change: transform;
}

.wfx-raindrop.heavy {
  width: 1.5px;
  height: 20px;
  background: linear-gradient(to bottom, transparent, rgba(180, 210, 230, 0.75));
}

@keyframes rainFall {
  from { transform: translateY(0); }
  to   { transform: translateY(112vh); }
}

/* (7) Night — twinkling stars + soft moon glow. */
.wfx-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(220, 230, 245, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(220, 230, 245, 0.55);
  animation: starTwinkle 3s ease-in-out infinite;
}

.wfx-star.bright {
  width: 3px;
  height: 3px;
  background: rgba(255, 250, 230, 0.95);
  box-shadow: 0 0 7px rgba(255, 250, 230, 0.7);
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 1.00; }
}

.wfx-moon {
  position: absolute;
  top: 7vh;
  left: 8vw;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 38%,
    rgba(245, 240, 215, 0.92) 0%,
    rgba(240, 235, 200, 0.5)  45%,
    rgba(240, 235, 200, 0.08) 75%,
    transparent 100%
  );
  filter: blur(0.5px);
  box-shadow: 0 0 32px rgba(240, 235, 200, 0.28);
}

/* (6) Storm lightning — brief screen flash, triggered from JS. */
body.lightning-flash {
  animation: lightningFlash 0.24s ease-out;
}

@keyframes lightningFlash {
  0%   { background: var(--bg); }
  18%  { background: #d4e0ec; }
  32%  { background: #1a2a38; }
  55%  { background: #b8c8d8; }
  100% { background: var(--bg); }
}

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ─── Touch action bar ──────────────────────────────────────── */
/* Hidden by default — only revealed on touch-primary devices via the
   media query below. Mirrors the keyboard inputs so the game stays
   fully playable without a physical keyboard. */
#touch-bar {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

#touch-primary {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 64px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(74, 179, 212, 0.35);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
  touch-action: manipulation;
}

#touch-primary:active {
  transform: scale(0.97);
}

#touch-primary:disabled {
  opacity: 0.5;
  cursor: default;
}

#touch-primary.is-tug {
  color: #fff;
  background: var(--bite-glow);
  border-color: var(--bite-glow);
  box-shadow: 0 0 22px rgba(255, 107, 53, 0.55);
  animation: tugPulse 0.7s ease infinite alternate;
}

#touch-primary.is-reel {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

@keyframes tugPulse {
  from { box-shadow: 0 0 18px rgba(255, 107, 53, 0.45); }
  to   { box-shadow: 0 0 28px rgba(255, 107, 53, 0.85); }
}

#touch-secondary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* Auto-cast OFF state — dim the icon + tint the border so the player can
   tell at a glance the rod won't recast itself. */
.touch-btn.is-off {
  opacity: 0.55;
  border-color: var(--text-muted);
}
.touch-btn.is-off .touch-icon  { filter: grayscale(1); }
.touch-btn.is-off .touch-label { color: var(--text-muted); }

.touch-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 4px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s ease, background 0.2s ease;
}

.touch-btn:active {
  transform: scale(0.96);
  background: var(--border);
}

.touch-btn .touch-icon  { font-size: 1.2rem; line-height: 1; }
.touch-btn .touch-label {
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── Responsive ────────────────────────────────────────────── */
/* Touch-first devices: phones, tablets, anything without precise hover.
   We also gate on width so a touchscreen laptop keeps the desktop
   layout. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #touch-bar { display: flex; }

  #header-actions {
    top: 10px;
    flex-direction: column;
    align-items: flex-end;
  }

  #header-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
  }

  #header-menu-toggle[aria-expanded="true"] {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 14px rgba(74, 179, 212, 0.35);
  }

  #header-actions-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-width: 150px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }

  body.header-menu-open #header-actions-menu {
    display: flex;
  }

  #share-linkedin,
  #how-to-play-toggle,
  #history-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  #history-toggle {
    display: inline-flex;
  }

  #history-toggle[aria-expanded="true"] {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 14px rgba(74, 179, 212, 0.35);
  }

  #catch-log {
    display: none;
    position: absolute;
    top: 64px;
    right: 0;
    z-index: 30;
    width: min(100%, 340px);
    max-height: min(56vh, 420px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }

  body.history-open #catch-log {
    display: flex;
  }

  /* Hide the keyboard hints + the desktop-only audio key legend on touch. */
  #action-hint kbd,
  #audio-controls { display: none; }
  #action-hint { font-size: 0.78rem; opacity: 0.7; }
}

@media (max-width: 760px) {
  header { padding: 10px 54px 6px 0; }
  header h1 { font-size: 1.15rem; letter-spacing: 1.5px; }
  #env-bar  { font-size: 0.78rem; }
  #status-bar { min-height: 18px; margin-top: 4px; }
  #status-text { font-size: 0.78rem; }

  main {
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
  }

  #scene-panel { min-height: 0; }

  #scene-art {
    padding: 10px 12px 6px;
    font-size: clamp(0.42rem, 1.7vw, 0.78rem);
    line-height: 1.35;
    /* Allow horizontal scroll for the very widest mythic art rather than
       wrapping it — wrapping would destroy the ASCII alignment. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #event-feed { padding: 8px 12px; }
  .event-msg  { font-size: 0.82rem; line-height: 1.4; }

  #ambient-indicator,
  #bite-alert {
    padding: 7px 12px;
    font-size: 0.78rem;
    gap: 8px;
  }

  #catch-log {
    flex-shrink: 0;
  }
  #catch-log h2     { padding: 8px 12px 6px; font-size: 0.78rem; }
  #catch-stats      { padding: 4px 12px; font-size: 0.7rem; }
  .catch-entry     { padding: 6px 12px; }

  footer {
    padding: 6px 0 4px;
    font-size: 0.75rem;
    gap: 2px;
  }
  #app-version { font-size: 0.58rem; }

  /* Catch overlay tweaks — keep card readable on narrow screens. */
  #catch-card {
    padding: 18px 18px 14px;
    max-width: 94vw;
  }
  #catch-art       { font-size: clamp(0.5rem, 2.2vw, 0.78rem); }
  #catch-fish-name { font-size: 1.15rem; }
  #catch-fish-meta { font-size: 0.85rem; }
  #catch-actions   { flex-direction: column; gap: 8px; }
  #catch-actions button { width: 100%; }
  #catch-dismiss-hint { font-size: 0.68rem; }

  #how-to-play-card {
    padding: 18px 18px 16px;
  }
  #how-to-play-card h2 { font-size: 0.92rem; }
  #how-to-play-card ul {
    font-size: 0.82rem;
    gap: 8px;
  }
}

/* Very small screens (older phones, landscape): tighten further. */
@media (max-width: 380px) {
  header h1            { font-size: 1.0rem; letter-spacing: 1px; }
  #header-menu-toggle  { min-width: 38px; padding: 0 8px; }
  #header-actions-menu { min-width: 142px; }
  #touch-primary       { min-height: 56px; font-size: 1.2rem; letter-spacing: 2px; }
  .touch-btn           { min-height: 46px; }
  .touch-btn .touch-icon  { font-size: 1.05rem; }
  .touch-btn .touch-label { font-size: 0.62rem; }
  #catch-log           { max-height: min(54vh, 380px); }
}

/* Landscape phones — squeeze vertical space so the scene + bar fit. */
@media (orientation: landscape) and (max-height: 480px) {
  header           { padding: 4px 54px 2px 0; }
  #header-actions  { top: 4px; }
  header h1        { font-size: 0.95rem; }
  #env-bar         { font-size: 0.7rem; }
  #status-bar      { min-height: 0; margin-top: 2px; }
  main             { padding: 4px 0; gap: 6px; }
  #catch-log       { max-height: 48vh; }
  #touch-bar       { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); gap: 4px; }
  #touch-primary   { min-height: 48px; font-size: 1.05rem; }
  .touch-btn       { min-height: 40px; }
}