/* ==============================================================
   水族箱 · 游戏专属样式
   选择器统一以 .g-aquarium 前缀限定
   ============================================================== */

.g-aquarium {
  gap: 10px;
}

/* ------------------------------ 金币 / HUD ------------------------------ */

.g-aquarium .aq-coins-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: linear-gradient(160deg, rgba(255, 233, 166, 0.14), rgba(255, 255, 255, 0.03));
  color: #ffe9a6;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.aq-coin {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c4, #f2d16b 55%, #c79a2e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 6px rgba(242, 209, 107, 0.4);
  flex: none;
}

.g-aquarium .aq-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: none;
}
.g-aquarium .aq-hud-i {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.g-aquarium .aq-k { font-size: 10px; color: var(--faint); letter-spacing: 0.04em; }
.g-aquarium .aq-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------ 水族箱画布 ------------------------------ */

.g-aquarium .aq-tank {
  position: relative;
  flex: 1;
  min-height: 300px;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(143, 196, 235, 0.24);
  background: #0a2133;
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.g-aquarium .aq-tank canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.g-aquarium .aq-tank::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 18px;
  box-shadow: inset 0 0 60px rgba(4, 18, 30, 0.45);
}

/* ------------------------------ 操作 ------------------------------ */

.g-aquarium .aq-ctrl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: none;
}
.g-aquarium .aq-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 600;
  transition: transform 0.08s, background 0.15s, border-color 0.15s;
  touch-action: manipulation;
}
.g-aquarium .aq-btn:active { transform: scale(0.96); background: var(--surface-2); border-color: var(--line-2); }
.g-aquarium .aq-btn-i { font-size: 13px; color: var(--accent); }

/* ------------------------------ 底部 sheet ------------------------------ */

.aq-sheet {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.aq-sheet-back {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 14, 0.56);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: aqFade 0.18s ease both;
}
.aq-sheet-panel {
  position: relative;
  width: min(100%, 560px);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #12202f, #0b1520 70%);
  border: 1px solid var(--line-2);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 14px 14px calc(14px + var(--safe-b));
  box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: aqUp 0.24s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.aq-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.aq-sheet-t { font-size: 16px; font-weight: 800; letter-spacing: 0.01em; }
.aq-sheet-coins {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: #ffe9a6;
  font-variant-numeric: tabular-nums;
}
.aq-sheet-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--dim);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  flex: none;
}
.aq-sheet-close:active { background: var(--surface-2); }
.aq-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 2px 4px;
}
.aq-sec-t {
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: 0.04em;
  margin: 4px 2px 8px;
}
.aq-sheet-body .divider { margin: 12px 0; }

/* 商店 / 图鉴卡片 */
.aq-grid { display: flex; flex-direction: column; gap: 8px; }
.aq-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.aq-preview {
  width: 64px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(88, 170, 255, 0.14), rgba(47, 111, 208, 0.06));
  border: 1px solid rgba(143, 196, 235, 0.16);
  flex: none;
}
.aq-card-mid { flex: 1; min-width: 0; }
.aq-card-n { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-card-p { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; color: #ffe9a6; font-weight: 700; }
.aq-card .btn { flex: none; }
.aq-card .btn.is-disabled { opacity: 0.4; pointer-events: none; }

.aq-decor-icon {
  width: 64px;
  height: 42px;
  border-radius: 10px;
  flex: none;
  border: 1px solid rgba(143, 196, 235, 0.16);
  background: linear-gradient(160deg, rgba(88, 170, 255, 0.12), rgba(47, 111, 208, 0.05));
  position: relative;
}
.aq-decor-icon::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.aq-decor-plant::after { content: "🌿"; }
.aq-decor-rock::after { content: "🪨"; }
.aq-decor-shell::after { content: "🐚"; }
.aq-decor-chest::after { content: "🧰"; }

.aq-codex { display: flex; flex-direction: column; gap: 8px; }
.aq-codex-card {
  display: flex;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px dashed var(--line-2);
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.65;
}
.aq-codex-card.got {
  opacity: 1;
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: linear-gradient(160deg, rgba(121, 184, 255, 0.08), rgba(255, 255, 255, 0.02));
}
.aq-codex-mid { flex: 1; min-width: 0; }
.aq-codex-sub { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.aq-fishlist { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.aq-fishrow { display: flex; align-items: center; gap: 7px; font-size: 10.5px; }
.aq-fishname { color: var(--dim); min-width: 44px; }
.aq-grow {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.aq-grow i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.aq-growp { color: var(--faint); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

/* ------------------------------ 动画 ------------------------------ */

@keyframes aqFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aqUp {
  from { transform: translateY(18px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

/* ------------------------------ 适配 ------------------------------ */

@media (max-height: 710px) {
  .g-aquarium { gap: 8px; }
  .g-aquarium .aq-btn { min-height: 42px; }
  .g-aquarium .aq-hud-i { min-height: 28px; }
  .g-aquarium .aq-tank { min-height: 240px; }
  .aq-sheet-panel { max-height: 84vh; }
}

@media (max-width: 365px) {
  .g-aquarium .aq-btn { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .aq-sheet-back, .aq-sheet-panel { animation: none; }
}