/* ============================================================
   WEBMASTERX — Fish Game CSS
   Matches main site design language (dark/cyberpunk/terminal)
   ============================================================ */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ── Custom Properties ──────────────────────────────────────── */
:root {
  --bg:          #0a0a0a;
  --bg2:         #0f0f0f;
  --bg3:         #141414;
  --bgc:         #111111;
  --green:       #00ff41;
  --cyan:        #00d4ff;
  --purple:      #7b2fff;
  --gold:        #ffcc00;
  --danger:      #ff3333;
  --text:        #e0e0e0;
  --text-dim:    #666666;
  --border:      #1e1e1e;
  --border-lit:  #2a2a2a;
  --glow-green:  rgba(0,255,65,.18);
  --glow-cyan:   rgba(0,212,255,.18);
  --glow-purple: rgba(123,47,255,.18);
  --glow-gold:   rgba(255,204,0,.22);
  --bg-panel:    #0f0f0f;
  --red:         #ff3333;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family:'JetBrains Mono','Fira Code','Courier New',monospace;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

body::before {
  content:'';
  position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(0,0,0,.08) 3px,rgba(0,0,0,.08) 4px);
  pointer-events:none; z-index:0;
}

a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; }
button { cursor:pointer; font-family:inherit; }

/* ── fg-app wrapper ─────────────────────────────────────────── */
.fg-app {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  height:100vh;
  overflow:hidden;
}

/* ── Header ─────────────────────────────────────────────────── */
.fg-header {
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1rem;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  flex-wrap:nowrap;
  flex-shrink:0;
}

@media (max-width: 768px) {
  .fg-header { flex-wrap: wrap; gap: .5rem; padding: .5rem; }
  .fg-logo { flex: 1; }
  .fg-player-bar { 
    width: 100%; 
    order: 3; 
    justify-content: center; 
    background: var(--bg3); 
    padding: .4rem; 
    border-radius: 4px;
    border: 1px solid var(--border);
  }
  .fg-header-actions { order: 2; gap: .25rem; }
  .fg-header-actions .fg-btn { padding: .3rem .5rem; font-size: .65rem; }
}

.fg-logo {
  font-size:.85rem; font-weight:700; letter-spacing:.08em;
  color:var(--green); text-decoration:none;
  text-shadow:0 0 8px var(--green);
}

.fg-player-bar {
  display:flex; align-items:center; gap:.45rem;
  font-size:.78rem; flex:1; flex-wrap:wrap;
}
.hdr-name  { color:var(--cyan);  font-weight:700; }
.hdr-sep   { color:var(--text-dim); }
.hdr-lbl   { color:var(--text-dim); }
.hdr-val   { color:var(--text); font-weight:600; }
.hdr-coins { color:var(--gold); }

.fg-header-actions { display:flex; gap:.4rem; flex-shrink:0; }

/* ── Buttons ─────────────────────────────────────────────────── */
.fg-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.35rem .75rem;
  background:transparent;
  border:1px solid var(--border-lit);
  color:var(--text);
  font-family:inherit; font-size:.75rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  border-radius:2px;
  transition:background .15s, border-color .15s, box-shadow .15s;
  /* Optimization for mobile */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.fg-btn:hover { background:var(--bg3); }
.fg-btn:disabled { opacity:.4; cursor:not-allowed; }

.fg-btn-green  { border-color:var(--green);  color:var(--green);  }
.fg-btn-green:hover  { background:var(--glow-green); box-shadow:0 0 8px var(--green); }
.fg-btn-cyan   { border-color:var(--cyan);   color:var(--cyan);   }
.fg-btn-cyan:hover   { background:var(--glow-cyan);  box-shadow:0 0 8px var(--cyan); }
.fg-btn-purple { border-color:var(--purple); color:var(--purple); }
.fg-btn-purple:hover { background:var(--glow-purple); box-shadow:0 0 8px var(--purple); }
.fg-btn-danger { border-color:var(--danger); color:var(--danger); }
.fg-btn-danger:hover { background:rgba(255,51,51,.15); }
.fg-btn-dim    { border-color:var(--border-lit); color:var(--text-dim); }
.fg-btn-cast   { font-size:1rem; padding:.55rem 1.4rem; border-color:var(--cyan); color:var(--cyan); }
.fg-btn-cast:hover { background:var(--glow-cyan); box-shadow:0 0 12px var(--cyan); }
.fg-btn-catch  { font-size:1rem; padding:.55rem 1.4rem; border-color:var(--green); color:var(--green); animation:pulse-catch .55s ease-in-out infinite alternate; }
.fg-btn-icon   { background:none; border:none; color:var(--text-dim); font-size:1rem; padding:.2rem .4rem; }

@keyframes pulse-catch {
  from { box-shadow:0 0 6px var(--green); }
  to   { box-shadow:0 0 18px var(--green), 0 0 30px var(--green); }
}

.w-full { width:100%; margin-top:.75rem; }

/* ── Layout ─────────────────────────────────────────────────── */
.fg-layout {
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:0;
  flex:1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.fg-sidebar {
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  width: 260px;
  min-height: 0;
  overflow:hidden;
}

.fg-tabs {
  display:flex;
  flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.fg-tab {
  flex:1 1 auto; min-width:max-content; padding:.4rem .35rem;
  background:none; border:none;
  color:var(--text-dim);
  font-family:inherit; font-size:.62rem; font-weight:600;
  letter-spacing:.05em;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.fg-tab.active { color:var(--cyan); border-bottom-color:var(--cyan); }
.fg-tab:hover:not(.active) { color:var(--text); }

.fg-panel {
  padding:.75rem;
  overflow-y:auto;
  overflow-x:hidden;
  flex:1;
  width: 100%;
}
.fg-panel.hidden { display:none; }

/* Stats */
.stat-group { margin-bottom:.75rem; width: 100%; }
.stat-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.25rem 0;
  border-bottom:1px solid var(--border);
  font-size:.73rem;
  width: 100%;
}
.stat-lbl { color:var(--text-dim); }
.stat-val { color:var(--text); font-weight:600; }

.xp-bar-wrap { margin:.6rem 0; }
.xp-bar-lbl  { display:flex; justify-content:space-between; font-size:.68rem; color:var(--text-dim); margin-bottom:.3rem; }
.xp-bar-bg   { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.xp-bar-fill { height:100%; background:var(--purple); border-radius:3px; transition:width .4s ease; }

/* Shop */
.shop-section { margin-bottom:1rem; }
.shop-title { font-size:.72rem; color:var(--cyan); letter-spacing:.08em; margin-bottom:.4rem; }

.shop-items { display:flex; flex-direction:column; gap:.3rem; }
.shop-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:.35rem .5rem;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:2px;
  font-size:.7rem;
}
.shop-item.owned   { border-color:var(--green); }
.shop-item.current { border-color:var(--cyan); background:rgba(0,212,255,.07); }
.shop-item-name  { color:var(--text); font-weight:600; }
.shop-item-cost  { color:var(--gold); }
.shop-item-locked{ color:var(--text-dim); font-size:.65rem; }

/* Quests */
.quest-heading { font-size:.72rem; color:var(--green); letter-spacing:.08em; margin-bottom:.6rem; }
.quest-list { display:flex; flex-direction:column; gap:.5rem; }
.quest-item {
  padding:.4rem .5rem;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:2px;
}
.quest-item.done { border-color:var(--green); opacity:.6; }
.quest-label { font-size:.7rem; margin-bottom:.3rem; }
.quest-progress-bar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.quest-progress-fill { height:100%; background:var(--purple); border-radius:2px; transition:width .3s; }
.quest-item.done .quest-progress-fill { background:var(--green); }
.quest-reward { font-size:.65rem; color:var(--gold); margin-top:.25rem; }
.quest-reset-note { font-size:.62rem; color:var(--text-dim); margin-top:.75rem; text-align:center; }

/* ── Main area ───────────────────────────────────────────────── */
.fg-main {
  display:flex; flex-direction:column;
  padding:.75rem;
  gap:.75rem;
  overflow-y:auto;
  min-width: 0;
}

/* Zone bar */
.zone-bar {
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.zone-btn {
  padding:.35rem .8rem;
  background:transparent;
  border:1px solid var(--border-lit);
  color:var(--text-dim);
  font-family:inherit; font-size:.72rem; font-weight:600;
  letter-spacing:.06em;
  border-radius:2px;
  transition:all .15s;
}
.zone-btn:hover:not(.locked):not(.active) { color:var(--text); border-color:var(--text-dim); }
.zone-btn.active { border-color:var(--cyan); color:var(--cyan); background:var(--glow-cyan); }
.zone-btn.locked { opacity:.35; cursor:not-allowed; }

/* Fishing scene */
.fishing-scene {
  height:320px;
  flex-shrink:0;
  background:var(--bgc);
  border:1px solid var(--border-lit);
  border-radius:3px;
  padding:1.25rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; gap:.75rem;
  /* Prevent scrolling/zooming/selection inside the playfield */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.scene-state { display:flex; flex-direction:column; align-items:center; gap:.75rem; width:100%; }
.scene-state.hidden { display:none; }

/* Water animation */
.water-anim {
  position:relative; width:100%; height:40px; overflow:hidden;
  margin-bottom:.25rem;
}
.wave {
  position:absolute; bottom:0; left:-100%;
  width:300%; height:60px;
  background:linear-gradient(transparent 60%, rgba(0,180,255,.12) 100%);
  border-radius:43% 57% 0 0 / 20px 20px 0 0;
  animation:wave-move 3s linear infinite;
}
.wave.w2 { animation-duration:4.2s; animation-delay:-.8s; opacity:.6; }
.wave.w3 { animation-duration:5.5s; animation-delay:-1.5s; opacity:.4; }
@keyframes wave-move {
  from { transform:translateX(0); }
  to   { transform:translateX(33.33%); }
}

/* Catch banner */
.catch-banner {
  position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
  padding:.3rem .8rem;
  background:var(--bg2);
  border-radius:2px;
  font-size:.75rem; font-weight:700;
  letter-spacing:.08em;
  animation:banner-pop .3s ease;
  z-index:5;
}
.catch-banner.hidden { display:none; }
.catch-banner.cb-miss    { border:1px solid var(--danger); color:var(--danger); }
.catch-banner.cb-catch   { border:1px solid var(--green);  color:var(--green);  }
.catch-banner.cb-perfect { border:1px solid var(--gold);   color:var(--gold);   box-shadow:0 0 10px var(--gold); }
.catch-banner.cb-full    { border:1px solid var(--danger); color:var(--danger); }
@keyframes banner-pop {
  from { transform:translateX(-50%) scale(.8); opacity:0; }
  to   { transform:translateX(-50%) scale(1);  opacity:1; }
}

/* Bobber */
.bobber-wrap { position:relative; width:60px; height:60px; margin:0 auto; }
.bobber {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ff4444, #aa0000);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  animation:bobber-bob 1.2s ease-in-out infinite;
}
.splash-ring {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:40px; height:10px; border-radius:50%;
  border:2px solid rgba(0,180,255,.3);
  animation:ring-pulse 1.2s ease-in-out infinite;
}
@keyframes bobber-bob {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(-6px); }
}
@keyframes ring-pulse {
  0%,100% { transform:translateX(-50%) scaleX(1); opacity:.4; }
  50%      { transform:translateX(-50%) scaleX(.7); opacity:.2; }
}
.casting-text { font-size:.8rem; color:var(--text-dim); }

/* Bite alert */
.bite-alert {
  font-size:1.1rem; font-weight:700; color:var(--green);
  letter-spacing:.1em;
  text-shadow:0 0 12px var(--green);
  animation:bite-flash .4s ease-in-out infinite alternate;
}
@keyframes bite-flash {
  from { opacity:.6; }
  to   { opacity:1; text-shadow:0 0 20px var(--green), 0 0 40px var(--green); }
}

/* Minigame bar */
.minigame-wrap { width:100%; max-width:500px; padding:.5rem 0; }
.mg-bar {
  position:relative;
  width:100%; height:28px;
  background:rgba(255,51,51,.15);
  border:1px solid rgba(255,51,51,.3);
  border-radius:4px;
  overflow:hidden;
}
.mg-zone { position:absolute; top:0; height:100%; border-radius:0; }
.mg-green { background:rgba(0,255,65,.25); border-left:2px solid var(--green); border-right:2px solid var(--green); }
.mg-gold  { background:rgba(255,204,0,.4);  border-left:2px solid var(--gold);  border-right:2px solid var(--gold); }
.mg-indicator {
  position:absolute; top:0; height:100%; width:3px;
  background:white;
  box-shadow:0 0 8px white, 0 0 16px white;
  border-radius:1px;
}

/* Result card */
.result-card {
  text-align:center; padding:.5rem;
}
.rc-emoji  { font-size:2.5rem; line-height:1; margin-bottom:.3rem; }
.rc-name   { font-size:1rem; font-weight:700; margin-bottom:.15rem; }
.rc-rarity {
  display:inline-block;
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  padding:.15rem .45rem; border-radius:2px; margin-bottom:.4rem;
}
.rc-stats { display:flex; gap:1rem; justify-content:center; font-size:.78rem; color:var(--text-dim); }
.rc-stat span { color:var(--text); font-weight:600; }
.rc-badges { display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-top:.4rem; }
.rc-badge  { font-size:.65rem; font-weight:700; padding:.15rem .4rem; border-radius:2px; letter-spacing:.08em; }
.rc-badge-shiny   { background:rgba(255,204,0,.2); color:var(--gold); border:1px solid var(--gold); }
.rc-badge-perfect { background:rgba(0,255,65,.15); color:var(--green); border:1px solid var(--green); }
.rc-badge-record  { background:rgba(0,212,255,.15); color:var(--cyan);  border:1px solid var(--cyan); }
.rc-badge-level   { background:rgba(123,47,255,.2); color:var(--purple);border:1px solid var(--purple); }

/* Rarity colours */
.rar-0 { background:rgba(170,170,170,.15); color:#aaa; border:1px solid #555; }
.rar-1 { background:rgba(30,255,0,.15);   color:#1eff00; border:1px solid #1eff00; }
.rar-2 { background:rgba(0,112,221,.2);   color:#0070dd; border:1px solid #0070dd; }
.rar-3 { background:rgba(163,53,238,.2);  color:#a335ee; border:1px solid #a335ee; }
.rar-4 { background:rgba(255,128,0,.2);   color:#ff8000; border:1px solid #ff8000; }
.rar-5 { background:rgba(255,64,64,.2);   color:#ff4040; border:1px solid #ff4040; text-shadow:0 0 8px #ff4040; }

/* ── Inventory ───────────────────────────────────────────────── */
.inv-section { display:flex; flex-direction:column; gap:.5rem; }
.inv-header  { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.inv-title   { font-size:.8rem; font-weight:700; letter-spacing:.07em; flex:1; }
.inv-count   { font-size:.75rem; color:var(--text-dim); }
.inv-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:.4rem;
}
.inv-empty { font-size:.72rem; color:var(--text-dim); text-align:center; padding:.75rem; }

.inv-card {
  padding:.4rem .5rem;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:2px;
  font-size:.68rem;
  position:relative;
}
.inv-card-emoji  { font-size:1.2rem; display:block; text-align:center; margin-bottom:.2rem; }
.inv-card-name   { font-size:.68rem; text-align:center; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-card-rarity { font-size:.6rem; text-align:center; margin:.15rem 0; }
.inv-card-val    { font-size:.65rem; text-align:center; color:var(--gold); }
.inv-shiny-badge {
  position:absolute; top:2px; right:2px;
  font-size:.55rem; background:var(--gold); color:#000; padding:0 .25rem; border-radius:1px;
}

/* ── Modals ──────────────────────────────────────────────────── */
.fg-modal {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.8);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.fg-modal.hidden { display:none; }

.fg-modal-box {
  background:var(--bg2);
  border:1px solid var(--border-lit);
  border-radius:4px;
  padding:1.5rem;
  max-width:420px; width:100%;
  display:flex; flex-direction:column; gap:.75rem;
}
.fg-modal-wide { max-width:900px; }

.fg-modal-box h2 { font-size:.95rem; color:var(--green); letter-spacing:.1em; }
.fg-modal-box p  { font-size:.78rem; color:var(--text-dim); }
.fg-modal-box input {
  width:100%; padding:.5rem .6rem;
  background:var(--bg3); border:1px solid var(--border-lit);
  color:var(--text); font-family:inherit; font-size:.85rem;
  border-radius:2px; outline:none;
}
.fg-modal-box input:focus { border-color:var(--cyan); }
.fg-modal-actions { display:flex; gap:.5rem; }
.fg-modal-head { display:flex; justify-content:space-between; align-items:center; }

/* Leaderboard */
.lb-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.lb-cat-title { font-size:.75rem; color:var(--cyan); margin-bottom:.5rem; letter-spacing:.08em; }
.lb-table { width:100%; border-collapse:collapse; font-size:.7rem; }
.lb-table th { color:var(--text-dim); text-align:left; padding:.3rem .4rem; border-bottom:1px solid var(--border); }
.lb-table td { padding:.3rem .4rem; border-bottom:1px solid var(--border); }
.lb-table tr:hover td { background:var(--bg3); }
.lb-rank-1 td:first-child { color:var(--gold); font-weight:700; }
.lb-rank-2 td:first-child { color:#c0c0c0; }
.lb-rank-3 td:first-child { color:#cd7f32; }

/* ── Footer ──────────────────────────────────────────────────── */
.fg-footer {
  border-top:1px solid var(--border);
  padding:.6rem 1rem;
  font-size:.68rem; color:var(--text-dim);
  text-align:center;
  flex-shrink:0;
}

/* ── Notification toast ─────────────────────────────────────── */
.fg-toast {
  position:fixed; bottom:1.25rem; right:1.25rem;
  background:var(--bg2); border:1px solid var(--border-lit);
  color:var(--text);
  padding:.5rem .9rem;
  font-size:.75rem; font-weight:600;
  border-radius:3px;
  z-index:200;
  animation:toast-in .3s ease;
  max-width:280px;
}
.fg-toast.toast-success { border-color:var(--green); color:var(--green); }
.fg-toast.toast-error   { border-color:var(--danger); color:var(--danger); }
.fg-toast.toast-info    { border-color:var(--cyan);   color:var(--cyan);  }
.fg-toast.toast-gold    { border-color:var(--gold);   color:var(--gold);  }
@keyframes toast-in {
  from { transform:translateX(120%); opacity:0; }
  to   { transform:translateX(0);    opacity:1; }
}

.hidden { display:none !important; }

/* ── Visual Juice: Screen Shakes ───────────────────────────── */
.shake-light { animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both; }
.shake-heavy { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); }

/* ── Catch Ticker ─────────────────────────────────────────── */
.catch-ticker-wrap {
  width: 100%;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  height: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.ticker-content {
  white-space: nowrap;
  position: absolute;
  left: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--cyan);
  text-transform: uppercase;
  font-weight: 700;
  animation: ticker-scroll 30s linear infinite;
  will-change: transform;
}

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ── Visual Juice: Particles ───────────────────────────────── */
.particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 10;
}
.p-gold { background: var(--gold); box-shadow: 0 0 4px var(--gold); }
.p-green { background: var(--green); box-shadow: 0 0 4px var(--green); }
.p-cyan { background: var(--cyan); box-shadow: 0 0 4px var(--cyan); }

@keyframes particle-fade-out {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ── Visual Juice: Weather Overlays ────────────────────────── */
.weather-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 1s ease;
  opacity: 0;
}

.weather-rain-overlay {
  background: linear-gradient(to bottom, rgba(0,20,50,0.2) 0%, rgba(0,0,0,0) 100%);
  opacity: 1;
}
.weather-rain-drops {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 80%, rgba(100,150,255,0.1) 85%, transparent 90%);
  background-size: 2px 100px;
  animation: rain-fall 0.4s linear infinite;
}

.weather-fog-overlay {
  background: radial-gradient(circle, transparent 30%, rgba(150,150,160,0.15) 100%);
  backdrop-filter: blur(1px);
  opacity: 1;
}

.weather-storm-overlay {
  background: rgba(40,0,0,0.1);
  animation: lightning-flash 8s infinite;
  opacity: 1;
}

@keyframes rain-fall {
  from { background-position: 0 0; }
  to { background-position: 0 100px; }
}

@keyframes lightning-flash {
  0%, 94%, 96%, 100% { background: rgba(0,0,0,0); }
  95% { background: rgba(255,255,255,0.1); }
}

/* ── Glow Animations ────────────────────────────────────────── */
.glow-gold { filter: drop-shadow(0 0 8px var(--gold)); }
.glow-perfect { animation: glow-pulse-perfect 1.5s infinite alternate; }

@keyframes glow-pulse-perfect {
  from { filter: drop-shadow(0 0 2px var(--green)); }
  to   { filter: drop-shadow(0 0 10px var(--green)); }
}
@media (max-width:768px) {
  .fg-app { height: auto; min-height: 100vh; overflow: visible; }
  .fg-layout { grid-template-columns:1fr; height: auto; overflow: visible; }
  .fg-sidebar { width: 100%; border-right:none; border-bottom:1px solid var(--border); max-height:400px; flex-shrink: 0; }
  .fg-main { overflow: visible; height: auto; }
  .fishing-scene { height: auto; min-height: 260px; }
  .mg-bar-boss { height: 140px; }
  .lb-grid { grid-template-columns:1fr; }
  .inv-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
}

/* ── Name auth (name modal) ──────────────────────────────────── */

.name-input-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.name-input-row input[type="text"],
.name-input-row input[type="text"]:focus {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 0.7rem;
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  width: 100%;
}

.name-lock-icon {
  font-size: 1rem;
  min-width: 1.4rem;
  text-align: center;
  cursor: default;
}

/* ── Pearl Shop ─────────────────────────────────────────────── */
.pearl-upgrade-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem .6rem;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:4px;
  margin-bottom:.4rem;
  gap:.5rem;
}
.pearl-upgrade-info { flex:1; }
.pearl-upgrade-name { font-size:.75rem; color:var(--purple); font-weight:700; margin-bottom:.15rem; }
.pearl-upgrade-desc { font-size:.65rem; color:var(--text-dim); }
.pearl-upgrade-level { font-size:.62rem; color:var(--cyan); margin-top:.15rem; }

/* ── Encyclopedia ───────────────────────────────────────────── */
.enc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
  gap:.35rem;
}
.enc-card {
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.4rem .3rem;
  text-align:center;
  position:relative;
  transition:border-color .2s;
}
.enc-card.enc-golden { border-color:var(--gold); box-shadow:0 0 6px rgba(255,200,0,.3); }
.enc-golden-mark {
  position:absolute;
  top:.2rem;right:.2rem;
  font-size:.6rem;
  color:var(--gold);
}
.enc-emoji { font-size:1.4rem; display:block; }
.enc-name  { font-size:.58rem; color:var(--text); margin:.15rem 0 .1rem; }
.enc-zone  { font-size:.55rem; }
.enc-stats { display:flex; justify-content:space-between; font-size:.58rem; color:var(--text-dim); margin-top:.2rem; }
.enc-unknown { opacity:.5; }

/* ── Golden fish inventory card ─────────────────────────────── */
.inv-card.inv-golden {
  border-color:var(--gold);
  box-shadow:0 0 8px rgba(255,200,0,.35);
}
.inv-golden-badge {
  position:absolute;
  top:.2rem; left:.2rem;
  font-size:.55rem;
  background:var(--gold);
  color:#000;
  padding:.05rem .25rem;
  border-radius:2px;
  font-weight:700;
  letter-spacing:.03em;
  white-space:nowrap;
}

/* ── Golden result card glow ────────────────────────────────── */
.rc-golden-glow { filter:drop-shadow(0 0 8px gold); }
.rc-badge-golden { background:rgba(255,200,0,.15); color:var(--gold); border-color:var(--gold); }

/* ── Boss minigame bar ──────────────────────────────────────── */
.mg-bar-boss { height: 200px; border-color:var(--red); }
.mg-bar-boss .mg-indicator { background:var(--red); }

/* ── Boss result card ───────────────────────────────────────── */
.result-card-boss { border-color:var(--red); box-shadow:0 0 12px rgba(255,60,60,.3); }

/* ── Pulse animation for boss alert ────────────────────────── */
@keyframes pulse {
  from { opacity:.6; }
  to   { opacity:1; }
}

/* ════════════════════════════════════════════════════════════
   WEATHER STRIP
   ════════════════════════════════════════════════════════════ */
.weather-strip {
  display:flex;align-items:center;gap:.4rem;
  padding:.3rem .6rem;border-radius:4px;margin-bottom:.5rem;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.35);
}
.weather-icon { font-size:.9rem; }
.weather-label { color:var(--cyan); }
.weather-desc  { color:var(--text-dim);font-weight:400;font-size:.62rem; }

.weather-cond-rain   { border-color:rgba(80,140,255,.4);background:rgba(20,40,90,.5); }
.weather-cond-fog    { border-color:rgba(180,180,180,.3);background:rgba(50,50,60,.5); }
.weather-cond-storm  { border-color:rgba(255,80,80,.4);background:rgba(80,20,20,.5); }
.weather-cond-night  { border-color:rgba(130,80,200,.4);background:rgba(20,10,50,.5); }
.weather-cond-clear  { border-color:rgba(255,220,50,.2);background:rgba(30,25,5,.3); }

.rc-badge-weather { background:rgba(80,140,255,.25);color:#7aaeff;border-color:rgba(80,140,255,.4); }

/* ════════════════════════════════════════════════════════════
   WEEKLY TAB PANEL
   ════════════════════════════════════════════════════════════ */
.weekly-reset-timer {
  font-size:.62rem;color:var(--text-dim);font-family:var(--font);
  background:rgba(0,0,0,.3);padding:.15rem .4rem;border-radius:3px;
  border:1px solid var(--border);white-space:nowrap;
}
.weekly-claim-btn {
  font-size:.58rem!important;padding:.15rem .4rem!important;
  margin-left:.3rem;flex-shrink:0;
}
.quest-claimed { opacity:.55; }
.weekly-lb-list { font-size:.65rem; }

/* ════════════════════════════════════════════════════════════
   ENCYCLOPEDIA SUB-TABS
   ════════════════════════════════════════════════════════════ */
.enc-subtabs {
  display:flex;gap:.3rem;margin-bottom:.7rem;
  border-bottom:1px solid var(--border);padding-bottom:.4rem;
}
.enc-subtab {
  background:transparent;border:1px solid var(--border);
  color:var(--text-dim);font-family:var(--font);font-size:.68rem;
  padding:.25rem .6rem;border-radius:3px;cursor:pointer;transition:all .15s;
}
.enc-subtab.active  { background:var(--cyan);color:var(--bg);border-color:var(--cyan); }
.enc-subtab:hover:not(.active) { border-color:var(--cyan);color:var(--cyan); }

/* ════════════════════════════════════════════════════════════
   ZONE MASTERY PANEL
   ════════════════════════════════════════════════════════════ */
.mastery-panel {
  background:rgba(0,0,0,.25);border:1px solid var(--border);
  border-radius:6px;padding:.7rem .8rem;margin-bottom:.7rem;
}
.mastery-panel.mastery-mastered {
  border-color:var(--gold);box-shadow:0 0 10px rgba(255,200,50,.18);
}
.mastery-goal { margin-bottom:.45rem; }
.mastery-goal.mastery-goal-done .mastery-progress-fill { background:var(--green); }
.mastery-progress-bar {
  height:5px;background:rgba(255,255,255,.08);border-radius:3px;
  margin-top:.2rem;overflow:hidden;
}
.mastery-progress-fill {
  height:100%;background:var(--cyan);border-radius:3px;transition:width .4s;
}
.mastery-stamp {
  font-size:.7rem;font-weight:700;color:var(--gold);
  background:rgba(255,200,50,.12);border:1px solid var(--gold);
  border-radius:4px;padding:.1rem .4rem;
}

/* ════════════════════════════════════════════════════════════
   LEADERBOARD TOGGLE
   ════════════════════════════════════════════════════════════ */
.lb-toggle-group {
  display:flex;gap:0;border:1px solid var(--border);border-radius:4px;overflow:hidden;
}
.lb-toggle {
  background:transparent;border:none;color:var(--text-dim);
  font-family:var(--font);font-size:.65rem;padding:.2rem .55rem;
  cursor:pointer;transition:all .15s;
}
.lb-toggle.active  { background:var(--cyan);color:var(--bg);font-weight:700; }
.lb-toggle:hover:not(.active) { color:var(--cyan); }

/* ════════════════════════════════════════════════════════════
   MILESTONE PANEL
   ════════════════════════════════════════════════════════════ */
.ms-row {
  display:grid;grid-template-columns:1fr auto auto auto;
  align-items:center;gap:.4rem;
  padding:.4rem .2rem;border-bottom:1px solid var(--border);
  font-size:.7rem;
}
.ms-row.ms-claimed { opacity:.6; }
.ms-label  { color:var(--text); }
.ms-reward { color:var(--gold);font-weight:700;min-width:2.5rem;text-align:right; }
.ms-prog-wrap {
  width:64px;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;
}
.ms-prog-bar { height:100%;border-radius:3px;transition:width .3s; }
.ms-bar-progress { background:var(--cyan); }
.ms-bar-done     { background:var(--gold); }
.ms-prog-text { color:var(--text-dim);min-width:5rem;text-align:right;white-space:nowrap; }

/* ── Legendary Aura ────────────────────────────────────────── */
.legendary-name {
  color: var(--gold) !important;
  font-weight: 800;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  animation: aura-pulse 2s infinite alternate;
}

@keyframes aura-pulse {
  from { text-shadow: 0 0 2px rgba(255, 215, 0, 0.3); }
  to   { text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); }
}

/* ── Oyster Reveal ────────────────────────────────────────── */
.oyster-reveal-box {
  width: 300px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.oyster-sprite {
  font-size: 4rem;
  animation: oyster-shake 0.5s infinite;
}
@keyframes oyster-shake {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.oyster-reward-text {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.4;
}
.reveal-shimmer {
  position: relative;
  display: inline-block;
  padding: 1rem;
  animation: reveal-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes reveal-pop {
  0% { transform: scale(0); }
  100% { transform: scale(1.2); }
}