/* ============================================================
   EVERY GUPPY — Design Tokens
   Palette:
     --deep-teal   #0B3D42  (pinakamadilim na tubig, background)
     --aqua        #17707C  (gitnang tubig)
     --seafoam     #7FE0CB  (liwanag sa tubig, highlights)
     --coral       #FF9D6C  (accent, buttons, warm contrast sa tubig)
     --sand        #FFF6E9  (UI panels, parang buhangin)
     --ink         #1F2B2A  (text)
   Type:
     Display: 'Baloo 2' (mabilog, friendly - para sa headers/numbers)
     Body: 'Nunito' (malinaw, magaan basahin)
   ============================================================ */

:root {
  --deep-teal: #0B3D42;
  --aqua: #17707C;
  --aqua-light: #2C93A0;
  --seafoam: #7FE0CB;
  --coral: #FF9D6C;
  --coral-dark: #E8804C;
  --sand: #FFF6E9;
  --sand-dim: #F3E6D0;
  --ink: #1F2B2A;
  --danger: #E8654C;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Nunito', sans-serif;
  color: var(--ink);
  background: var(--deep-teal);
}

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  /* BUG FIX: walang max-width dati - kung sakaling mas malapad ang
     na-report na viewport width (hal. sa loob ng Acode's WebView
     preview, o sa ilang fullscreen/PWA display quirks sa Android),
     basta dumudulas/lumalapad ang buong layout, kaya mukhang "lumiit"
     ang mga fixed-size na UI (hal. bottom nav) - malaki ang container
     nila pero pareho pa rin ang laki ng laman. I-cap sa isang
     makatuwirang mobile app width, i-center sa gitna (kulay-tubig
     lang ang makikita sa magkabilang gilid kung mas malapad pa rin) -
     karaniwang best practice ito para sa mobile-only web apps. */
  max-width: 520px;
  margin: 0 auto;
}

h1, h2, h3, .display-font {
  font-family: 'Baloo 2', sans-serif;
}

button {
  font-family: 'Nunito', sans-serif;
  border: none;
  cursor: pointer;
}

.hidden { display: none !important; }

/* ============ TOP BAR ============ */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--deep-teal), #0e4a51);
  color: var(--sand);
  z-index: 20;
  flex-shrink: 0;
}

.topbar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 15px;
}

#coin-display {
  background: rgba(255, 246, 233, 0.12);
  padding: 6px 12px;
  border-radius: 999px;
}

#coin-display .icon { font-size: 16px; }

/* ============ CURRENCY DISPLAY (Silver Coin + Gold Shell, Phase 2) ============ */
#currency-display {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.currency-row {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 246, 233, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  border: none;
  color: var(--sand);
}

.currency-row .icon { font-size: 12px; }
.currency-row span:not(.icon) { font-size: 12px; }

.currency-clickable {
  background: rgba(255, 214, 92, 0.18);
  cursor: pointer;
}

/* Totoong larawan na ng Silver Coin at Gold Shell (V9.4.3 UI Asset
   Refresh - standalone WebP files, hindi na base64/emoji). ONE
   canonical asset path per currency (assets/currency/silver.webp,
   assets/currency/goldshell.webp) - lahat ng markup na kailangan ay
   <span class="icon silver-icon-img"></span> /
   <span class="icon goldshell-icon-img"></span>, walang kailangang
   i-inline na background-image style kahit saan.
   SIZE: em-based na (sumusunod sa font-size ng paligid) sa halip na
   fixed-px, para pareho ang scale ng dalawang currency icon kahit
   saan sila lumabas (inline price, wallet, reward). */
.silver-icon-img {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-image: url(../assets/currency/silver.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.goldshell-icon-img {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-image: url(../assets/currency/goldshell.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Reusable sizing system (V9.4.3 Part 5) - both currencies share the
   same scale classes so future artwork changes never require editing
   individual render functions. Apply on top of .silver-icon-img /
   .goldshell-icon-img, e.g. class="icon silver-icon-img currency-icon--wallet". */
.currency-icon--small  { width: 0.95em; height: 0.95em; }
.currency-icon--medium { width: 1.1em;  height: 1.1em; }
.currency-icon--wallet { width: 1.3em;  height: 1.3em; }


/* ============ GOLD SHELL EXCHANGE MODAL ============ */
.goldshell-balances {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16px;
  margin: 10px 0;
}

.goldshell-rate {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 14px;
}

.goldshell-qty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 10px;
}

.goldshell-qty-row #goldshell-qty-display {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 20px;
  min-width: 40px;
}

.goldshell-qty-presets {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.goldshell-total {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}

#tank-name-display {
  font-size: 14px;
  opacity: 0.9;
}

.icon-btn {
  background: rgba(255, 246, 233, 0.12);
  color: var(--sand);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.topbar-icons {
  display: flex;
  gap: 8px;
}

/* Ang tank name/dropdown ay pinalitan na ng icon-only na button (parehong
   laki/hugis ng ibang topbar icons) - pindutin para buksan ang "My
   Aquariums" list kung saan makikita/mapipili ang pangalan ng bawat tangke.
   Nakatago na lang ang #tank-name text (class="hidden" sa index.html) -
   hindi na ito ipinapakita, pero itinatago pa rin ito ng UI.updateTankName()
   kung sakaling kailangan pa in the future. */
#tank-name-display {
  background: rgba(255, 246, 233, 0.12);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.tank-icon {
  line-height: 1;
}

/* V9.4.3 UI Asset Refresh Part 1: the six upper-nav icons (Aquarium,
   Settings, Hall of Fame, Missions, Journal, Mail) render supplied
   artwork instead of emoji. Sized to fit inside the existing 36x36px
   circular buttons with a small margin so nothing clips the round
   background, without stretching (object-fit: contain preserves
   aspect ratio). Slightly smaller at narrow widths per the asset-pass
   requirement, while keeping the buttons themselves at their existing
   36px touch-target size - only the artwork shrinks. */
.nav-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

@media (max-width: 360px) {
  .nav-icon {
    width: 22px;
    height: 22px;
  }
  .topbar-icons {
    gap: 5px;
  }
}

.notif-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FF5C5C;
  border: 1.5px solid var(--deep-teal);
}

/* ============ XP / LEVEL HUD ============ */
#xp-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: var(--deep-teal);
  flex-shrink: 0;
}

#player-level-badge {
  font-family: 'Baloo 2', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sand);
  background: rgba(255,246,233,0.15);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.xp-bar {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  overflow: hidden;
}

.xp-hud-icon {
  width: 22px;
  height: 22px;
  font-size: 12px;
  flex-shrink: 0;
}

.xp-fill {
  height: 100%;
  width: 0%;
  background: #FFD37A;
  transition: width 0.4s ease;
}

/* ============ EVENT BANNER ============ */
#event-banner {
  padding: 6px 14px;
  background: linear-gradient(90deg, #FF9D6C, #FFC857);
  color: #4A2E12;
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  flex-shrink: 0;
}

/* ============ ENVIRONMENT HUD (Water Quality + Oxygen) ============ */
#env-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: #0e4a51;
  flex-shrink: 0;
  z-index: 19;
}

.env-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.env-icon { font-size: 12px; }

.env-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  overflow: hidden;
}

.env-fill {
  height: 100%;
  width: 100%;
  transition: width 0.5s ease, background 0.5s ease;
}
.env-fill.water { background: #7FE0CB; }
.env-fill.oxygen { background: #8FD1FF; }

#overcrowd-warning {
  font-size: 10.5px;
  font-weight: 800;
  color: #FFD37A;
  white-space: nowrap;
}

#eggs-incubating-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: #6A3FC9;
  background: rgba(228, 217, 250, 0.9);
  border: none;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.store-section-label {
  font-size: 12.5px;
  color: var(--aqua);
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ============ TANK VIEW ============ */
#tank-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#tank {
  position: absolute;
  inset: 0;
}

/* ============ BETTA BOWL VISUAL MODE ============ */
#tank.bowl-mode {
  inset: 8% 18%;
  border-radius: 45% 45% 50% 50% / 30% 30% 55% 55%;
  box-shadow: inset 0 0 40px rgba(255,255,255,0.18), 0 10px 26px rgba(0,0,0,0.35);
  overflow: hidden;
}

.bowl-mode #tank-water {
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.28), transparent 60%),
    linear-gradient(180deg, var(--aqua-light) 0%, var(--aqua) 55%, var(--deep-teal) 100%);
}

.bowl-mode .guppy {
  transform: scaleX(var(--facing)) scale(calc(2.3 * var(--gender-scale)));
}

#tank-water {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(127,224,203,0.18), transparent 55%),
    linear-gradient(180deg, var(--aqua-light) 0%, var(--aqua) 45%, var(--deep-teal) 100%);
  overflow: hidden;
}

/* Caustic light shimmer overlay - subtle animated light rays */
#tank-glass-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    100deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 60px
  );
  animation: shimmer 9s linear infinite;
  opacity: 0.5;
}

@keyframes shimmer {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(-120px) translateY(40px); }
}

/* Rising bubbles - ambient decoration */
#bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: -20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  animation: rise linear infinite;
}

@keyframes rise {
  0% { transform: translateY(0) translateX(0); opacity: 0.8; }
  100% { transform: translateY(-100vh) translateX(10px); opacity: 0; }
}

/* Empty tank message */
#empty-tank-msg {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--sand);
  z-index: 5;
}
#empty-tank-msg p { margin: 4px 0; font-family: 'Baloo 2', sans-serif; }
#empty-tank-msg .sub { font-family: 'Nunito', sans-serif; font-size: 13px; opacity: 0.75; }

/* ============ FISH SPRITE (rendered in tank) - realistic photo, tail/body rig ============ */
.guppy {
  position: absolute;
  --frame-w: 40px;
  --facing: 1;       /* -1 kapag facing-left (papalitan ng JS) */
  --gender-scale: 1; /* bahagyang mas malaki ang female (totoo sa totoong guppy) */
  width: var(--frame-w);
  height: var(--frame-w);
  cursor: pointer;
  transition-property: left, top;
  transition-timing-function: ease-in-out;
  /* transition-duration ay dynamic, in-a-set per-fish via JS (species swim personality) */
  z-index: 6;
  transform: scaleX(var(--facing)) scale(var(--gender-scale));
}

.guppy.facing-left { --facing: -1; }

.guppy.stage-fry { --frame-w: 18px; }
.guppy.stage-juvenile { --frame-w: 28px; }

/* ============================================================
   LEGENDARY GLOW
   Dating malaking bilog na "halo" - pinalitan ito ng makitid na
   "outline glow" na sumusunod mismo sa hugis/silhouette ng isda
   (drop-shadow filter, kinokontrol sa JS - tingnan ang
   UI.applySpriteStyle sa ui.js). Dito sa CSS, z-index lang ang
   idinadagdag para siguradong lumitaw ang Legendary sa harapan.
   ============================================================ */
.guppy.legendary-glow {
  z-index: 7; /* bahagyang mas mataas para lumitaw nang malinaw */
}

/* Maliit na "ring" sa Fish list at Bio Card thumbnails (bilog na
   avatar) - makitid lang ito, sumusunod sa gilid ng bilog. */
.legendary-glow-thumb {
  position: relative;
  box-shadow: 0 0 0 2px rgba(255,205,80,0.9), 0 0 4px 1px rgba(255,205,80,0.65);
  animation: legendary-pulse-thumb 1.7s ease-in-out infinite;
}
@keyframes legendary-pulse-thumb {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,205,80,0.75), 0 0 3px 1px rgba(255,205,80,0.45); }
  50%      { box-shadow: 0 0 0 2px rgba(255,221,110,1),   0 0 5px 2px rgba(255,205,80,0.7); }
}

/* Dalawang layer: body (static) at tail (umiikot sa sariling joint).
   Ang exact left/top/width/height/transform-origin ay in-a-set per-fish
   via JS (RIG_CONFIG, iba-iba bawat species) - % lang ito ng container
   kaya awtomatikong sumusunod sa --frame-w (fry/juvenile/adult sizing). */
.fish-tail,
.fish-body {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.fish-body { z-index: 2; }

.fish-tail {
  z-index: 1;
  --wag-angle: 11deg; /* mas malaki sa male (mas "showy"), mas maliit sa female */
  animation: tail-wag 0.9s ease-in-out infinite alternate;
}

@keyframes tail-wag {
  0%   { transform: scaleX(var(--sword-scale-x, 1)) scaleY(var(--sword-scale-y, 1)) rotate(calc(-1 * var(--wag-angle))); }
  100% { transform: scaleX(var(--sword-scale-x, 1)) scaleY(var(--sword-scale-y, 1)) rotate(var(--wag-angle)); }
}

/* Food pellets */
.food-pellet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  z-index: 4;
  animation: sink 4s linear forwards;
}

@keyframes sink {
  0% { transform: translateY(0); }
  100% { transform: translateY(60px); }
}

/* Plants & decorations (Phase 3) - sit along the bottom of the tank, behind guppies */
/* Ang "tank floor" - buhanginan sa ilalim ng tangke. Dito nilalagay ng
   player (via Inventory > "Put in Tank") ang mga plants/decorations niya,
   sa kahit anong pwesto na gusto nya (tap-to-place). */
#tank-decor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24%;
  background: linear-gradient(180deg, rgba(196,175,120,0) 0%, rgba(206,186,132,0.55) 20%, rgba(184,157,98,0.82) 100%);
  cursor: default;
  z-index: 2;
}

#tank-decor.placement-mode {
  cursor: crosshair;
  outline: 3px dashed rgba(255,255,255,0.85);
  outline-offset: -6px;
  animation: floor-pulse 1s ease-in-out infinite;
}

@keyframes floor-pulse {
  0%, 100% { background-color: rgba(255,255,255,0.06); }
  50% { background-color: rgba(255,255,255,0.16); }
}

.placed-decor-item {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  z-index: 3;
}

.placed-decor-icon {
  display: block;
  font-size: 30px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

/* Larawan-based na decor icon (hal. Cabomba, Amazon Sword) - background-image
   sa halip na text/emoji. Fixed na laki (hindi font-size-based) para
   consistent ang sukat kahit gaano kalaki ang pinagmulang larawan. */
.placed-decor-icon.image-icon {
  width: 52px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  transform: scale(var(--icon-scale, 1));
  transform-origin: bottom center;
}

.placed-decor-icon.plant-sway {
  animation: sway var(--sway-duration, 3.5s) ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes sway {
  0%, 100% { transform: scale(var(--icon-scale, 1)) rotate(-4deg); }
  50% { transform: scale(var(--icon-scale, 1)) rotate(4deg); }
}

/* ============ PLACEMENT BANNER (habang naglalagay/naglilipat ng decor) ============ */
#placement-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  background: linear-gradient(90deg, #6FA8DC, #7FE0CB);
  color: #0e3a3f;
  font-size: 11.5px;
  font-weight: 800;
  flex-shrink: 0;
}

#placement-cancel-btn {
  background: rgba(0,0,0,0.18);
  color: white;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  flex-shrink: 0;
}

/* ============ BOTTOM BAR ============ */
#bottombar {
  display: flex;
  background: var(--sand);
  flex-shrink: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  z-index: 20;
}

.tab-btn {
  flex: 1;
  background: transparent;
  padding: 9px 2px;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--ink);
  border-radius: var(--radius-md);
  opacity: 0.6;
  white-space: nowrap;
}

.tab-btn.active {
  opacity: 1;
  background: var(--sand-dim);
  color: var(--aqua);
}

/* ============ SLIDE-UP PANELS ============ */
.slide-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: var(--sand);
  border-radius: 22px 22px 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
  animation: slide-up 0.25s ease-out;
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
  flex-shrink: 0;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-action-btn {
  background: var(--sand-dim);
  color: var(--aqua);
  font-weight: 800;
  font-size: 11px;
  padding: 7px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.mini-action-btn.danger {
  background: #FDE2E2;
  color: #C0392B;
}

.select-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  background: var(--sand-dim);
  flex-shrink: 0;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.08);
}

.select-action-bar .danger-btn {
  flex: 1;
}
.select-action-bar .danger-btn:disabled {
  background: #ccc;
  opacity: 0.6;
}
.select-action-bar .move-btn {
  flex: 1;
  font-size: 11.5px;
  padding: 10px 8px;
  white-space: normal;
  text-align: center;
}
.select-action-bar .move-btn:disabled {
  background: #ccc;
  opacity: 0.6;
}

.guppy-list-item.selectable {
  cursor: pointer;
}

.guppy-list-item.selected {
  border: 2px solid var(--coral);
  background: #FFF3EB;
}

.select-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
}

.select-check.checked {
  background: var(--coral);
  border-color: var(--coral);
}

.panel-header h2 {
  margin: 0;
  color: var(--aqua);
}

.close-btn {
  background: var(--sand-dim);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--ink);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 18px 24px;
}

/* ============ STORE DRAWER (category grid + detail view) ============ */
/* Every Fish update: dating iisang mahabang scroll lang ang Store (Eggs,
   Food, Medicine, Equipment, Decor, Hourglasses lahat magkakasunod sa
   isang listahan) - sobrang haba na. Ngayon, dalawang "screen" na: 1)
   category grid (unang makikita), 2) detail view ng isang category lang
   (lumalabas pag pinindot ang isang tile, may "← Back" pabalik). */
.store-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 0;
}

.store-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: white;
  border-radius: var(--radius-md);
  padding: 18px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.store-category-icon {
  width: 64px;
  height: 64px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.store-category-label {
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
}

#store-back-btn {
  margin-bottom: 12px;
}

.store-category-section.hidden {
  display: none;
}

/* Store items */
.store-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
}

.store-item-icon { font-size: 28px; width: 40px; height: 40px; flex-shrink: 0; }
.store-item.locked-item { opacity: 0.55; }
.store-item-info { flex: 1; }
.store-item-name { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 15px; }
.store-item-desc { font-size: 12px; opacity: 0.65; margin-top: 2px; }

.buy-btn {
  background: var(--coral);
  color: white;
  font-weight: 800;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}

.buy-btn:active { background: var(--coral-dark); }
.buy-btn:disabled { background: #ccc; opacity: 0.6; }

/* Guppy list */
.guppy-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.guppy-list-thumb {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #EAF7F6;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.guppy-list-name { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 14px; }
.guppy-list-sub { font-size: 11px; opacity: 0.6; }

.mini-bar-wrap { display: flex; gap: 4px; margin-top: 4px; }
.mini-bar {
  width: 14px; height: 4px;
  border-radius: 2px;
  background: #e5e5e5;
  overflow: hidden;
}
.mini-bar-fill { height: 100%; background: var(--seafoam); }

/* ============ BIOGRAPHY CARD ============ */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 61, 66, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

#bio-card {
  background: var(--sand);
  width: 82%;
  max-width: 320px;
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

#bio-card .close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

#bio-avatar {
  width: 70px;
  height: 70px;
  margin: 4px auto 10px;
  border-radius: 50%;
  background-color: var(--aqua-light);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#bio-name {
  margin: 0 0 6px;
  color: var(--aqua);
}

#bio-species-name {
  font-size: 11.5px;
  font-style: italic;
  opacity: 0.6;
  margin: -4px 0 8px;
}

#bio-born-row {
  font-size: 11px;
  opacity: 0.6;
  margin: -6px 0 12px;
}

#bio-tags {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tag {
  background: var(--sand-dim);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--aqua);
}

.bio-stats { text-align: left; margin-bottom: 14px; }

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.stat-label {
  font-size: 12px;
  font-weight: 700;
  width: 78px;
  flex-shrink: 0;
}

.stat-bar {
  flex: 1;
  height: 8px;
  background: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  width: 50%;
  transition: width 0.4s ease;
}
.stat-fill.hunger { background: var(--coral); }
.stat-fill.happiness { background: #FFC857; }
.stat-fill.health { background: #6FCF97; }

#bio-biography {
  font-size: 12.5px;
  font-style: italic;
  opacity: 0.75;
  line-height: 1.4;
  margin-bottom: 14px;
}

.danger-btn {
  background: var(--danger);
  color: white;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  width: 100%;
}

.bio-action-row {
  display: flex;
  gap: 8px;
}
.bio-action-row .danger-btn { flex: 1; }

.move-btn {
  background: #6FA8DC;
  color: white;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}

/* ============ TOAST ============ */
#toast {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  z-index: 60;
  animation: toast-in 0.25s ease-out;
  white-space: nowrap;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ============ PREGNANCY BADGE (sa loob ng tangke) ============ */
.pregnant-badge {
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 12px;
  z-index: 3;
  animation: pulse-badge 1.2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* V10.0 Section X: sick-fish bubble - lightweight, same positioning
   convention as .pregnant-badge but on the opposite corner so the two
   can never overlap if a fish is somehow both at once. */
.sick-bubble {
  position: absolute;
  top: -10px;
  left: -6px;
  font-size: 12px;
  z-index: 3;
  animation: sick-bubble-float 1.6s ease-in-out infinite;
}

@keyframes sick-bubble-float {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* V10.0 Section O/N: aquarium floor drop pile. Bottom-of-tank layer,
   deliberately simple (no physics) - a tappable icon + optional ×N
   badge, positioned once server-side (floor_x/floor_y) and never
   rerolled on reload. Marble art is asset-mapped by item_type_id class
   suffix - see V10_0_IMPLEMENTATION_NOTES.md for the exact expected
   filenames; marble-icon--<item_type_id> falls back to a neutral
   placeholder background until final art is supplied.
   V10.2: `bottom` is no longer a single fixed value here - each pile
   gets its own inline bottom (js/ui.js, from the server's floor_y)
   so multiple drops in one aquarium settle at varied heights within
   this band instead of lining up in one row. This 4% is a fallback
   only, for the extremely unlikely case a pile is ever rendered
   before its inline bottom is set. */
.aquarium-drop-pile {
  position: absolute;
  bottom: 4%;
  transform: translateX(-50%);
  z-index: 4;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Part F: cosmetic-only fall animation for a brand-new canonical drop.
   .aquarium-drop-falling is the starting state (set inline near the source
   fish before the transition begins); .aquarium-drop-settling transitions
   `left` back to the normal bottom-anchored position over the same
   duration. Both classes are removed after the animation completes,
   leaving the pile in its normal static state. */
.aquarium-drop-pile.aquarium-drop-falling {
  transition: left 0.7s cubic-bezier(0.55, 0, 1, 0.45), top 0.7s cubic-bezier(0.55, 0, 1, 0.45);
}
.aquarium-drop-pile.aquarium-drop-settling {
  transition: left 0.7s cubic-bezier(0.55, 0, 1, 0.45), top 0.7s cubic-bezier(0.55, 0, 1, 0.45);
}

.aquarium-drop-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.aquarium-drop-qty {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ============ RARITY TAGS ============ */
.rarity-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 800;
  vertical-align: middle;
}
.rarity-common { background: #e5e5e5; color: #555; }
.rarity-uncommon { background: #D6F0E8; color: #1E7A5F; }
.rarity-rare { background: #E4D9FA; color: #6A3FC9; }
.rarity-legendary { background: linear-gradient(90deg, #FFD37A, #FF9D6C); color: #5A3200; }

/* Parehong palette, pero para sa mas malaking bio-avatar circle background
   (sa halip na kulay ng isda mismo, ang RARITY na ngayon ang nagtatakda
   ng background kulay sa likod ng sprite). */
#bio-avatar.rarity-bg-common, .rarity-bg-common { background-color: #E5E5E5; }
#bio-avatar.rarity-bg-uncommon, .rarity-bg-uncommon { background-color: #B9EAD9; }
#bio-avatar.rarity-bg-rare, .rarity-bg-rare { background-color: #D9C7F7; }
#bio-avatar.rarity-bg-legendary, .rarity-bg-legendary { background-color: #FFC96B; }

#bio-genetics-tags {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.stat-fill.pregnancy { background: #C77DE0; }

/* Food buff effect ngayon ay ipinapakita sa loob mismo ng hunger bar
   (iba't ibang kulay bawat tier) sa halip na hiwalay na bar. */
.stat-fill.hunger.foodbuff-regular { background: #7FBF6A; }
.stat-fill.hunger.foodbuff-premium { background: #E0A93E; }
.stat-fill.hunger.foodbuff-special { background: #9B59B6; }

.hunger-buff-label {
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.75;
}

/* ============ BREED PANEL ============ */
.breed-instructions {
  font-size: 12.5px;
  opacity: 0.7;
  margin: 0 0 14px;
  line-height: 1.4;
}

.breed-section-label {
  font-size: 13px;
  color: var(--aqua);
  margin: 14px 0 8px;
}

.breed-status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.breed-candidate-thumb {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #EAF7F6;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.breed-candidate-name { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 13.5px; }
.breed-status-meta { font-weight: 400; opacity: 0.6; font-size: 11.5px; }

.breed-status-line {
  font-size: 12px;
  margin-top: 2px;
  opacity: 0.85;
}
.breed-status-line.fertile { color: #1C9C6E; font-weight: 700; }
.breed-status-line.cooldown { opacity: 0.55; }
.breed-status-line.pregnant { color: var(--coral); font-weight: 700; }
.breed-status-line.incubating { color: #B8860B; font-weight: 700; }
.breed-status-line.done { opacity: 0.4; }

.breed-status-hourglass-btn {
  margin-top: 6px;
  background: var(--aqua-light);
  color: var(--aqua);
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

/* ============================================================
   NATURAL BREEDING: ❤️ mating heart animation
   Lumulutang paitaas mula sa gitna ng dalawang isda na nag-mate,
   tapos unti-unting nawawala (fade + scale).
   ============================================================ */
.mating-heart {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  z-index: 8;
  animation: mating-heart-float 1.3s ease-out forwards;
}
@keyframes mating-heart-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  15%  { opacity: 1; transform: translateY(-6px) scale(1.1); }
  80%  { opacity: 0.9; transform: translateY(-28px) scale(1); }
  100% { opacity: 0; transform: translateY(-38px) scale(0.8); }
}

.breed-confirm {
  margin-top: 16px;
}
.breed-confirm:disabled {
  background: #ccc;
  opacity: 0.7;
}

/* ============ RESEARCH LAB PANEL ============ */
#research-active {
  background: white;
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 16px;
}

.research-active-label {
  font-size: 11.5px;
  opacity: 0.6;
  margin: 0 0 4px;
}

.research-active-name {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--aqua);
  margin-bottom: 8px;
}

.research-active-time {
  font-size: 11px;
  opacity: 0.6;
  margin: 6px 0 0;
  text-align: right;
}

.stat-fill.research { background: #6FA8DC; }

/* (Dating ".research-project"/".research-project-info"/atbp. dito - HINDI
   na ginagamit (dating disease-cure/gene research project cards, inalis na
   ang buong PROJECTS list sa research.js). Iniwan na lang bilang dead CSS,
   walang epekto - tingnan ".roadmap-*" sa ibaba para sa BAGONG Research
   Roadmap na kapalit nito. */
.research-project {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
}

.research-project.completed {
  opacity: 0.5;
}

.research-project-info { flex: 1; }
.research-project-name { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 14px; }
.research-project-desc { font-size: 11.5px; opacity: 0.65; margin-top: 2px; }
.research-project-meta { font-size: 10.5px; opacity: 0.55; margin-top: 3px; }

/* ============ RESEARCH ROADMAP (totoong larawan, sequence hanggang Level 6) ============ */
/* PABABANG (vertical) na scrollable list - isang CARD bawat Research Level,
   larawan MUNA (malaki, TOTOONG retrato mula sa player - SPRITE_DATA_URIS_
   ROADMAP, background-removed na) sa itaas, tapos Level+checkmark, tapos
   ang unlock message sa ilalim. "Silhouette"/itim pa (CSS filter:
   brightness(0) opacity) hangga't hindi pa naa-unlock ang level na ito,
   nagiging KULAY (totoong itsura) pag naabot na. Kapag maraming species sa
   isang level (Lv.1: Molly+Swordtail, Lv.6: Cichlid+Flowerhorn+Blood
   Parrot), NAKAPATONG-PATONG (vertical stack) ang mga larawan nila. */
/* BUG FIX: dating may sariling max-height + overflow-y:auto ito (hiwalay
   na scroll region sa loob ng #research-roadmap mismo), pero nagdulot ito
   ng "nested scroll" conflict sa mobile - ang .panel-body (parent) ay MAY
   SARILI RING overflow-y:auto para sa BUONG panel, kaya nag-aagawan ang
   dalawang magkapatong na scrollable region, hindi na maabot ng touch
   scroll ang pinaka-ilalim (Level 6 cards). NAALIS na ang max-height/
   overflow-y dito - dumadaloy na lang ito nang normal bilang bahagi ng
   IISANG scroll region ng buong panel (.panel-body). */
#research-roadmap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 4px 4px 4px 2px;
  margin-bottom: 4px;
}

.roadmap-node {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 10px 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.03);
  min-width: 0;
}

.roadmap-node.roadmap-current {
  background: #FFF3EB;
  border: 2px solid var(--coral);
}

.roadmap-icon-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* V9.4 Part 5: grid tiles are smaller than the old single-column list
   (which used 136px circles) - the image itself is the main visual
   element on a 2-col mobile grid, so this is sized to still read
   clearly without dominating the card. Each species in a multi-unlock
   level (e.g. Lv.6: Cichlid/Flowerhorn/Blood Parrot) gets its OWN
   compact tile side-by-side rather than stacked vertically inside one
   tall node, per the brief. */
.roadmap-icon-wrap {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  background-color: rgba(0,0,0,0.06);
  border: 2px solid white;
  flex-shrink: 0;
  overflow: hidden;
}

.roadmap-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Silhouette/shadow effect - itim na siluweta ng totoong larawan, walang
   detalye, hanggang hindi pa naa-unlock ang level na ito. */
.roadmap-node.roadmap-locked .roadmap-icon-wrap img {
  filter: brightness(0) opacity(0.35);
}

.roadmap-node.roadmap-current .roadmap-icon-wrap img {
  filter: brightness(0) opacity(0.55);
}

.roadmap-node.roadmap-done .roadmap-icon-wrap img {
  filter: saturate(1.15) brightness(1.02);
}

.roadmap-info { min-width: 0; width: 100%; }

.roadmap-lv {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* V9.4 Part 5: compact status badge ("Researching" while the current
   level's timer is running, "Locked" for future levels not yet
   reached) shown under Lv.N, in addition to the existing checkmark
   for completed levels - detailed progression info (cost/duration)
   still only appears after tapping, per the brief. */
.roadmap-status {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
  margin-top: 2px;
}

.roadmap-node.roadmap-done .roadmap-status {
  background: #E3F5E1;
  color: #2E7D32;
}

.roadmap-node.roadmap-current .roadmap-status {
  background: #FFE7D6;
  color: var(--coral);
}

.roadmap-node.roadmap-locked .roadmap-status {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.45);
}

.roadmap-check {
  background: #4CAF50;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.roadmap-label {
  font-size: 11px;
  opacity: 0.65;
  line-height: 1.3;
  margin-top: 2px;
}

.roadmap-node.roadmap-locked .roadmap-label,
.roadmap-node.roadmap-locked .roadmap-lv {
  opacity: 0.4;
}

/* ============ EGG STORE GRID (V9.4 Part 4) ============ */
/* Replaces the old long vertical text-heavy list with a compact
   responsive grid, matching the Store main page's visual language -
   2 columns on typical mobile width. Card shows only the egg artwork
   (with its small fish preview baked into the same image) plus the
   real authoritative stock count; species name/description/Research
   sentence moved into the tap-to-open purchase popup. */
.egg-store-grid,
#egg-store-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 4px 2px;
}

.egg-store-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.03);
  border: none;
  cursor: pointer;
  min-width: 0;
}

.egg-store-card:disabled,
.egg-store-card.locked-item {
  opacity: 0.55;
  cursor: default;
}

.egg-store-icon-wrap {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  background-color: rgba(0,0,0,0.06);
  border: 2px solid white;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.egg-store-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.egg-store-card.locked-item .egg-store-icon-wrap img {
  filter: brightness(0) opacity(0.35);
}

.egg-store-stock {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
}

.egg-purchase-popup-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,0.05);
}

.egg-purchase-popup-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.research-btn {
  background: #6FA8DC;
  color: white;
  font-weight: 800;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
.research-btn:disabled { background: #ccc; opacity: 0.6; }

.research-btn.full-width {
  width: 100%;
  margin-top: 8px;
}

/* ============ ACCOUNT PANEL (Cloud Save - Log In / Sign Up) ============ */
.account-info-text {
  font-size: 13px;
  opacity: 0.75;
  line-height: 1.5;
  margin-bottom: 16px;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.account-input {
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  background: #FAF6EE;
}

.account-form .research-btn {
  width: 100%;
  padding: 11px;
  font-size: 14px;
  margin-top: 4px;
}

.account-error {
  color: #C1443C;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 2px;
}

.account-profile-card {
  text-align: center;
  padding: 20px;
  background: #FAF6EE;
  border-radius: 16px;
  margin-bottom: 16px;
}

.account-profile-icon { font-size: 40px; }
.account-username { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 18px; margin-top: 4px; }
.account-email { font-size: 12px; opacity: 0.6; }

.account-sync-status {
  text-align: center;
  font-size: 12px;
  opacity: 0.6;
  margin: 8px 0 16px;
}

.logout-btn { background: #C1443C; margin-top: 8px; }

/* ============ MARKET / STALL (Phase 2) ============ */
.market-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.market-subtab-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  background: #EFE7D8;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  font-size: 13px;
  color: var(--deep-teal);
  border: none;
}

.market-subtab-btn.active {
  background: var(--deep-teal);
  color: var(--sand);
}

.stall-form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.75;
  margin: 10px 0 4px;
}

#stall-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.stall-slot {
  aspect-ratio: 1;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  overflow: hidden;
  position: relative;
}

.stall-slot.empty {
  background: rgba(0,0,0,0.04);
  border: 2px dashed rgba(0,0,0,0.2);
  font-size: 26px;
  color: rgba(0,0,0,0.3);
}

.stall-slot.filled {
  background-color: #FAF6EE;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.stall-slot-thumb {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.stall-slot.filled .stall-slot-price {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 2px;
  text-align: center;
}

.stall-slot.filled .stall-slot-qty {
  position: absolute;
  top: 3px;
  right: 5px;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
}

#stall-list-modal-card, #stall-listing-detail-card {
  max-height: 80vh;
  overflow-y: auto;
}

#stall-picker-fish-list, #stall-picker-item-list {
  margin-bottom: 12px;
}

/* ============ MARKET BROWSE LISTINGS ============ */
.market-listing-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FAF6EE;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.market-listing-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.market-listing-info { flex: 1; min-width: 0; }
.market-listing-name { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 13.5px; }
.market-listing-sub { font-size: 11px; opacity: 0.65; }
.market-listing-seller { font-size: 10.5px; opacity: 0.5; }

.market-listing-icon-wrap { flex-shrink: 0; }

.market-listing-buy-btn {
  flex-shrink: 0;
  background: #6FA8DC;
  color: white;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  border: none;
}

/* ============ RESEARCH LEVEL LADDER CARD ============ */
#research-level-card {
  background: linear-gradient(135deg, #EAF7F6, #FFF3EB);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 18px;
  border: 2px solid #D9EDEA;
}

.research-level-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.research-level-badge {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 13px;
  background: var(--aqua);
  color: white;
  padding: 4px 10px;
  border-radius: 999px;
}

.research-level-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}

.research-level-req {
  font-size: 11.5px;
  opacity: 0.7;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* ============ HOURGLASS ITEMS ============ */
.hourglass-store-note {
  font-size: 11.5px;
  opacity: 0.65;
  margin: 0 0 10px;
  line-height: 1.4;
}

.hourglass-btn {
  margin-top: 8px;
  background: #E4D9FA;
  color: #6A3FC9;
  width: 100%;
}

/* V10.0: Marble speedup/UI buttons */
.marble-btn {
  margin-top: 8px;
  background: #D9F0FA;
  color: #1F7A9C;
  width: 100%;
}
.marble-use-btn {
  background: #D9F0FA;
  color: #1F7A9C;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.marble-use-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.stall-qty-quick-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.stall-qty-quick-btn {
  background: var(--sand-dark, #e8dcc4);
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#hourglass-card, .hourglass-card-style {
  background: var(--sand);
  width: 82%;
  max-width: 320px;
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

#hourglass-card h3, .hourglass-card-style h3 {
  margin: 4px 0 4px;
  color: var(--aqua);
}

.hourglass-sub {
  font-size: 12px;
  opacity: 0.65;
  margin: 0 0 14px;
  white-space: pre-line; /* para gumana ang \n sa mensahe (hal. multi-line na Confirm Modal detail) */
}

/* ============================================================
   SETTINGS PANEL (SFX / Music toggles)
   ============================================================ */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: white;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  text-align: left;
}
.settings-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-row-icon { font-size: 20px; }
.settings-row-title { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 13px; color: var(--aqua); }
.settings-row-sub { font-size: 11px; opacity: 0.6; margin-top: 1px; }

.toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: #CFCFCF;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 0;
}
.toggle-switch[aria-checked="true"] { background: var(--aqua); }
.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.toggle-switch[aria-checked="true"] .toggle-knob { transform: translateX(20px); }

.hourglass-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: white;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  text-align: left;
}

.hourglass-option-name {
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  font-size: 13.5px;
}

.hourglass-option-owned {
  font-size: 11px;
  opacity: 0.6;
}

.hourglass-use-btn {
  background: #6A3FC9;
  color: white;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
.hourglass-use-btn:disabled { background: #ccc; opacity: 0.6; }

.hourglass-option.option-blocked {
  opacity: 0.6;
}

/* ============ TANK FLOATING ACTION BUTTONS ============ */
#tank-action-buttons {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 15;
}

/* ============ FULLSCREEN MODE (bago, mas maaasahan) ============
   Ang native browser Fullscreen API ay hindi laging maaasahan sa
   mobile (kilalang buggy sa ilang Chrome Android version, at
   nangangailangan pa ng direktang user gesture bago pumayag - hindi
   ito gumagana kung tatawagin lang mula sa "orientationchange").
   Sa halip, ito ay PURONG CSS/JS class toggle na lang - garantisadong
   gumagana anuman ang browser, walang espesyal na permission na
   kailangan. Pinapalitan ang #tank-wrapper mula "flex child" (kasama
   ng ibang UI) papuntang "fixed, sumasakop sa buong screen" habang
   nakatago ang lahat ng ibang UI (header, XP bar, bottom nav, atbp). */
body.fake-fullscreen #topbar,
body.fake-fullscreen #xp-hud,
body.fake-fullscreen #event-banner,
body.fake-fullscreen #placement-banner,
body.fake-fullscreen #env-hud,
body.fake-fullscreen #bottombar {
  display: none !important;
}

body.fake-fullscreen #tank-wrapper {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 9999;
}

#tank-left-buttons {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 15;
}

#fullscreen-btn.fullscreen-active {
  background: rgba(127, 224, 203, 0.95);
}

.tank-fab {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 246, 233, 0.92);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.tank-fab:active {
  transform: scale(0.92);
}

/* ============ INVENTORY PANEL ============ */
.inventory-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
}

.inventory-row-icon {
  font-size: 24px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.inventory-row-name {
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  font-size: 13.5px;
}

.inventory-row-count {
  font-size: 11.5px;
  opacity: 0.6;
}

.clickable-row {
  cursor: pointer;
  transition: transform 0.1s ease;
}
.clickable-row:active {
  transform: scale(0.97);
}

/* ============ DECOR BIO CARD (plants/decorations popup) ============ */
#decor-bio-icon {
  font-size: 46px;
  width: 64px;
  height: 64px;
  margin: 0 auto 4px;
}

.decor-category-plant { background: #D6F0E8; color: #1E7A5F; }
.decor-category-decoration { background: #E4D9FA; color: #6A3FC9; }

#decor-bio-desc {
  font-size: 12.5px;
  opacity: 0.75;
  line-height: 1.4;
  margin: 10px 0;
}

#decor-bio-owned-row {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 10px;
}

#decor-bio-remove-btn {
  margin-top: 8px;
  width: 100%;
}

.reset-game-note {
  font-size: 11px;
  opacity: 0.6;
  line-height: 1.4;
  margin: 0 0 10px;
}

.cheat-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.cheat-buttons-grid .mini-action-btn {
  padding: 10px 8px;
  text-align: center;
  background: #E4D9FA;
  color: #6A3FC9;
}

/* ============ MISSIONS & ACHIEVEMENTS ============ */
.mission-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
}

.mission-entry.entry-ready {
  border: 2px solid var(--coral);
  background: #FFF3EB;
}

.mission-icon {
  font-size: 24px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.mission-name {
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  font-size: 13.5px;
}

.mission-desc {
  font-size: 11.5px;
  opacity: 0.65;
  margin-top: 2px;
}

.mission-progress {
  font-size: 10.5px;
  opacity: 0.55;
  margin-top: 3px;
  font-weight: 700;
}

.mission-claim-btn {
  background: var(--coral);
  color: white;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11.5px;
  white-space: nowrap;
  align-self: flex-end;
}

/* Bagong column sa kanan ng bawat mission/achievement entry - dito na
   ngayon nakalagay ang reward list (pwedeng mag-wrap sa loob ng
   max-width nito) at ang maliit na "Claim" button, nasa ILALIM ng
   reward text - hindi na kailangang mag-overflow palabas ng kahon ng
   mission dahil hiwalay na ito sa laki ng button (dating laman mismo
   ng button ang buong reward text, kaya lumalabas dati sa labas ng
   kahon kapag mahaba ang reward). */
.mission-reward-col {
  flex-shrink: 0;
  max-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.mission-rewards {
  font-size: 10px;
  opacity: 0.7;
  font-weight: 700;
  text-align: right;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

/* ============ HALL OF FAME PANEL ============ */
.hof-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 6px;
}

.hof-entry.hof-me {
  border: 2px solid var(--coral);
  background: #FFF3EB;
}

.hof-rank {
  font-size: 15px;
  font-weight: 800;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.hof-username {
  flex: 1;
  font-weight: 700;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hof-value {
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--aqua);
}

.hof-empty {
  font-size: 12px;
  opacity: 0.6;
  padding: 8px 4px;
}

/* Placeholder row para sa rank na wala pang naka-fill (hal. rank 3-5
   kapag 2 lang ang totoong laman ng leaderboard) - LAGING 5 row ang
   dapat makita, hindi lang basta bawasan ang listahan. */
.hof-entry-empty {
  opacity: 0.4;
}

/* ============ ENCYCLOPEDIA / WIKI PANEL ============ */
.wiki-section-label {
  font-size: 13px;
  color: var(--aqua);
  margin: 14px 0 8px;
}

/* ============ WIKI SPECIES SELECTOR ============ */
#wiki-species-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.wiki-species-chip {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sand-dim);
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0.7;
  border: 2px solid transparent;
}

.wiki-species-chip.active {
  background: var(--aqua);
  color: white;
  opacity: 1;
}

.wiki-species-chip.chip-locked {
  opacity: 0.45;
}

/* ============ WIKI SPECIES INFO CARD ============ */
#wiki-species-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.wiki-species-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.wiki-species-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.wiki-species-name {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
}

.wiki-species-scientific {
  font-style: italic;
  font-size: 12px;
  opacity: 0.6;
}

.wiki-species-difficulty {
  display: inline-block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sand-dim);
  color: var(--aqua);
}

.wiki-species-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.wiki-species-stat {
  background: var(--sand-dim);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.wiki-species-stat-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.55;
  font-weight: 700;
}

.wiki-species-stat-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
}

.wiki-species-fact {
  font-size: 12.5px;
  line-height: 1.5;
  background: #EAF7F6;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 4px;
}

.wiki-species-fact strong {
  color: var(--aqua);
}

.wiki-species-fact.compat-blocked {
  background: #FDE2E2;
}
.wiki-species-fact.compat-blocked strong { color: #C0392B; }

.wiki-species-fact.compat-risky {
  background: #FFF3D6;
}
.wiki-species-fact.compat-risky strong { color: #B8860B; }

.wiki-species-fact.compat-ok {
  background: #E4F7ED;
}
.wiki-species-fact.compat-ok strong { color: #2E8B57; }

/* ============ WIKI LOCKED SPECIES CARD ============ */
#wiki-species-locked {
  background: white;
  border-radius: var(--radius-lg);
  padding: 30px 20px;
  text-align: center;
  margin-bottom: 16px;
}

.wiki-locked-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.wiki-locked-title {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}

.wiki-locked-sub {
  font-size: 12.5px;
  opacity: 0.65;
}

.wiki-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.wiki-entry.locked { opacity: 0.45; }
.wiki-entry.undiscovered { opacity: 0.7; }

.wiki-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0,0,0,0.08);
}

.wiki-entry-name { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 13.5px; }
.wiki-entry-sub { font-size: 11px; opacity: 0.65; margin-top: 2px; }

/* ============ DISEASE / TREATMENT (bio card) ============ */
#bio-disease-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.disease-tag {
  background: #FDE2E2;
  color: #C0392B;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
}

.treat-btn {
  background: #6FCF97;
  color: white;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
}

/* ============ JOURNAL PANEL ============ */
.journal-entry {
  background: white;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.journal-entry-text { font-size: 12.5px; line-height: 1.4; }
.journal-entry-time { font-size: 10px; opacity: 0.5; margin-top: 4px; }

/* ============ MAIL PANEL ============ */
.mail-message {
  background: white;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
}

.mail-message.claimed { opacity: 0.5; }

.mail-subject { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 14px; color: var(--aqua); }
.mail-body { font-size: 12px; opacity: 0.75; margin: 4px 0 8px; line-height: 1.4; }
.mail-reward { font-size: 11.5px; font-weight: 700; color: var(--coral-dark); margin-bottom: 8px; }

.claim-btn {
  background: var(--coral);
  color: white;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
}

/* V10.3-B-R6: Mail delete/archive - see mail.js's MAIL.canDelete() for
   the safety rule this UI reflects (claimed mail only). */
.mail-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mail-delete-btn {
  background: transparent;
  color: var(--coral-dark);
  opacity: 0.6;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 999px;
}

.mail-delete-all-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.mail-delete-all-btn {
  background: transparent;
  color: var(--coral-dark);
  opacity: 0.75;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: underline;
}

/* ============ TANKS PANEL ============ */
.tank-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
}

.tank-card.active-tank {
  border-color: var(--aqua);
  background: #EAF7F6;
}

.tank-card-info { flex: 1; }
.tank-card-name { font-weight: 800; font-family: 'Baloo 2', sans-serif; font-size: 14px; }
.tank-card-sub { font-size: 11px; opacity: 0.6; margin-top: 2px; }

.switch-tank-btn {
  background: var(--aqua);
  color: white;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11.5px;
}
.switch-tank-btn:disabled { background: #ccc; opacity: 0.6; }

.add-tank-btn {
  width: 100%;
  margin-top: 8px;
}

.tank-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rename-tank-btn {
  background: var(--sand-dim);
  color: var(--aqua);
  font-weight: 800;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.rename-tank-btn:active { background: #dcd3c2; }

/* ============ CONFIRM MODAL / RENAME MODAL ============ */
.confirm-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.confirm-modal-actions .mini-action-btn,
.confirm-modal-actions .danger-btn,
.confirm-modal-actions .research-btn {
  flex: 1;
  width: auto;
}

.rename-aquarium-input {
  width: 100%;
  box-sizing: border-box;
  background: white;
  border: 2px solid var(--sand-dim);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  margin-bottom: 8px;
  text-align: center;
}
.rename-aquarium-input:focus {
  outline: none;
  border-color: var(--aqua);
}

.rename-aquarium-error {
  font-size: 11.5px;
  color: var(--danger);
  margin: -4px 0 10px;
}

/* ============ TANK CAPACITY UPGRADE ============ */
.tank-capacity-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sand-dim);
}

.capacity-badge {
  font-size: 10.5px;
  font-weight: 800;
  background: var(--sand-dim);
  color: var(--aqua);
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 6px;
}

.capacity-upgrade-btn {
  background: #6FA8DC;
  color: white;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  width: 100%;
}
.capacity-upgrade-btn:disabled { background: #ccc; opacity: 0.6; }

/* Maliit na "Upgrade" button (kasing-laki ng .switch-tank-btn), nasa
   ilalim ng level/capacity badge. Ang buong detalye (cost, susunod na
   level, dagdag na capacity, tagal) ay nasa Confirm Modal na lang
   lumalabas pag pinindot ito - tingnan handleRequestUpgradeTankCapacity()
   sa main.js. */
.capacity-upgrade-btn-small {
  background: #6FA8DC;
  color: white;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11.5px;
}
.capacity-upgrade-btn-small:disabled { background: #ccc; opacity: 0.6; }

.capacity-upgrade-progress {
  font-size: 10.5px;
  opacity: 0.65;
  margin-top: 4px;
}

/* ============ BETTA BOWL ============ */
.betta-bowl-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
}
.betta-bowl-card.active-tank {
  border-color: var(--aqua);
  background: #EAF7F6;
}
.betta-bowl-icon { font-size: 22px; }

/* V10.3-B: visible pending-state affordance for a guarded mutation
   (see UI.setActionPending() in ui.js). Correctness never depends on
   this - it is a UX cue only. */
.action-pending {
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* V10.3-C: small, restrained authority status banner - never a
   full-screen overlay, never blocks input (pointer-events left at
   default since it's a thin bar at the top, not covering gameplay). */
#authority-status-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: rgba(20, 20, 30, 0.88);
  color: #ffe8a3;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  padding: 5px 10px;
}