/* ── Scene Box (shared) ── */
.scene-box {
  position: relative;
  overflow: hidden;
  height: 320px;
  width: 100%;
}
.scene-center-icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  text-align: center; z-index: 3;
}

/* ── Mine Scene ── */
.mine-scene {
  background: linear-gradient(180deg, #2a1a0a, #3d2815 30%, #4a3020 60%, #352010);
}
.mine-scene::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(90,60,30,0.12) 14px, rgba(90,60,30,0.12) 16px),
    repeating-linear-gradient(90deg, transparent, transparent 22px, rgba(60,40,20,0.08) 22px, rgba(60,40,20,0.08) 23px);
  pointer-events: none;
}
.mine-ore { position: absolute; border-radius: 50%; pointer-events: none; animation: ore-glow 3s ease-in-out infinite; }
@keyframes ore-glow { 0%,100% { opacity: 0.3; } 50% { opacity: 0.8; } }
.mine-beam-v { position: absolute; top: 0; width: 6px; background: linear-gradient(90deg,#5a3a1a,#4a2a10,#5a3a1a); z-index: 1; }
.mine-beam-h { position: absolute; height: 6px; background: linear-gradient(180deg,#5a3a1a,#4a2a10); z-index: 1; }
.mine-torch { position: absolute; z-index: 2; }
.torch-flame {
  width: 8px; height: 14px;
  background: radial-gradient(circle at 50% 80%, #ff6600, #ff9900 40%, rgba(255,200,50,0.3) 70%, transparent);
  border-radius: 50% 50% 30% 30%;
  animation: torch-flicker 0.5s ease-in-out infinite alternate;
}
@keyframes torch-flicker { 0% { transform: scaleY(1) scaleX(1); } 100% { transform: scaleY(1.15) scaleX(0.85); } }
.torch-glow {
  position: absolute; top: -10px; left: -16px;
  width: 40px; height: 40px;
  background: radial-gradient(circle, rgba(255,150,30,0.15), transparent 70%);
  border-radius: 50%;
  animation: torch-glow-pulse 1.5s ease-in-out infinite;
}
@keyframes torch-glow-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.mine-track-line {
  position: absolute; bottom: 20px; left: 10%; right: 10%; height: 2px;
  background: rgba(120,100,80,0.4); z-index: 1;
}
.mine-cart-anim {
  position: absolute; bottom: 12px; font-size: 1.2rem; z-index: 2;
  animation: cart-move 8s ease-in-out infinite;
}
@keyframes cart-move { 0%,100% { left: 12%; } 50% { left: 82%; } }

/* ── Meadow Scene ── */
.meadow-scene { background: linear-gradient(180deg, #4a8ab5, #85c1e9 35%, #3a7a3a 35%, #2a6a2a 60%, #1a5a1a); }
.meadow-sky { position: absolute; top: 0; left: 0; right: 0; height: 35%; background: linear-gradient(180deg, #4a8ab5, #7ab8d8, #85c1e9); }
.meadow-tree { position: absolute; bottom: 35%; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.tree-crown { width: 50px; height: 55px; border-radius: 50%; order: -1; margin-bottom: -10px; }
.tree-trunk { width: 8px; height: 40px; background: linear-gradient(90deg,#5a3a1a,#4a2a10,#5a3a1a); border-radius: 2px; }
.meadow-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 65%; background: linear-gradient(180deg,#3a7a3a,#2a6a2a,#1a5a1a,#0d4a0d); }
.meadow-grass-row { position: absolute; bottom: 0; left: 0; right: 0; height: 50px; overflow: hidden; z-index: 2; }
.meadow-flowers { position: absolute; bottom: 50px; left: 0; right: 0; height: 40px; z-index: 2; }
.meadow-light {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,255,100,0.06), transparent);
  animation: meadow-light-pulse 5s ease-in-out infinite;
}
@keyframes meadow-light-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.8; } }

/* ── Bazaar Scene ── */
.bazaar-scene { background: linear-gradient(180deg, #3a2815, #4a3520, #3a2510); height: 100px; }
.bazaar-awning {
  position: absolute; top: 0; left: 10%; right: 10%; height: 40px;
  background: repeating-linear-gradient(90deg, #cc4444 0, #cc4444 30px, #eeeecc 30px, #eeeecc 60px);
  border-radius: 0 0 8px 8px;
}
.bazaar-counter {
  position: absolute; bottom: 20%; left: 15%; right: 15%; height: 30px;
  background: linear-gradient(90deg, #5a3a1a, #7a5030, #5a3a1a);
  border-radius: 4px;
}

/* ── Bank Scene ── */
.bank-scene { background: linear-gradient(180deg, #2a4a6a, #4a7090 45%, #3a5a3a 45%, #2a4a2a); height: 200px; }
.bank-building { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); text-align: center; z-index: 2; }
.bank-roof { width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 45px solid #8a7a60; margin: 0 auto; }
.bank-facade { width: 180px; background: linear-gradient(180deg, #d8d0b8, #c8c0a8); margin: 0 auto; padding: 6px 0 0; }
.bank-sign { font-weight: 800; font-size: 0.85rem; color: #4a3a20; text-align: center; margin-bottom: 4px; letter-spacing: 3px; }
.bank-columns-row { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 0 12px; }
.bank-column {
  width: 14px; height: 48px;
  background: linear-gradient(90deg, #f0e8d0, #d8d0b8 30%, #c8c0a0 70%, #d8d0b8);
  border-radius: 3px 3px 0 0;
  box-shadow: 1px 0 2px rgba(0,0,0,0.1);
  position: relative;
}
.bank-column::before { content: ''; position: absolute; top: 0; left: -1px; right: -1px; height: 4px; background: #c8c0a0; border-radius: 3px 3px 0 0; }
.bank-column::after { content: ''; position: absolute; bottom: 0; left: -2px; right: -2px; height: 3px; background: #b8b090; }
.bank-door { width: 26px; height: 40px; background: linear-gradient(180deg, #5a4a30, #3a2a10); border-radius: 12px 12px 0 0; box-shadow: inset 0 0 4px rgba(0,0,0,0.3); }
.bank-door-knob { width: 4px; height: 4px; background: var(--c-gold); border-radius: 50%; margin: 18px 0 0 17px; box-shadow: 0 0 4px rgba(255,215,0,0.4); }
.bank-steps { width: 180px; height: 8px; background: linear-gradient(180deg, #b0a890, #a09880); margin: 0 auto; }

/* ── House Scene ── */
.house-scene { background: linear-gradient(180deg, #4a7ab5, #85c1e9 50%, #3a6a3a 50%, #2a5a2a); height: 260px; }
.house-building { position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%); z-index: 2; }
.house-roof { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 35px solid #8b4513; margin: 0 auto; }
.house-body { width: 100px; height: 60px; background: linear-gradient(180deg, #d2b48c, #c4a87a); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; }
.house-window { width: 16px; height: 16px; background: linear-gradient(135deg, #87ceeb, #add8e6); border: 2px solid #5a3a1a; }
.house-door { width: 18px; height: 28px; background: linear-gradient(180deg, #5a3a1a, #3a2010); border-radius: 8px 8px 0 0; }
.house-label { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); color: var(--c-text-sub); font-size: 0.9rem; font-weight: 600; z-index: 3; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ── Profile Card ── */
.profile-card {
  background: rgba(12, 22, 38, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: 24px; margin-top: 10px;
}
.profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-avatar { font-size: 3rem; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: var(--c-accent-glow); border-radius: 50%; border: 2px solid rgba(77,184,255,0.2); }
.profile-identity { flex: 1; }
.profile-name { font-size: 1.3rem; font-weight: 700; color: var(--c-text-bright); }
.profile-title-text { font-size: 0.9rem; color: #7db8e0; margin-top: 4px; }
.profile-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.profile-stat { background: rgba(20,40,65,0.5); border-radius: 10px; padding: 10px; text-align: center; }
.profile-stat-label { font-size: 0.7rem; color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.profile-stat-value { font-size: 1.1rem; font-weight: 700; color: var(--c-text-sub); margin-top: 4px; font-variant-numeric: tabular-nums; }
.profile-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(30,60,100,0.2); }
.profile-section-label { font-size: 0.75rem; color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.profile-gear-list { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-best-text, .profile-quest-text { color: var(--c-text-secondary); font-size: 0.9rem; }

/* ── Aquarium Tank ── */
.aquarium-tank {
  position: relative; height: 400px; border-radius: var(--r-xl); overflow: hidden;
  border: 4px solid rgba(100,160,200,0.3);
  box-shadow: inset 0 0 30px rgba(0,80,160,0.1), 0 4px 20px rgba(0,0,0,0.3);
}
.aquarium-frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 3px solid rgba(140,180,200,0.15); border-radius: 12px; z-index: 5; pointer-events: none; }
.aquarium-water { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #1a6090, #1a5080, #144568, #0e3550, #0a2840); }
.aquarium-sand { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(180deg, #c2a878, #a89060, #8a7848); border-radius: 0 0 12px 12px; }
.aquarium-seaweed-row { position: absolute; bottom: 35px; left: 0; right: 0; height: 60px; z-index: 2; }
.aquarium-fish-area { position: absolute; top: 10%; left: 0; right: 0; bottom: 20%; z-index: 3; }
.aquarium-shimmer { position: absolute; width: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(150,210,255,0.15), transparent); animation: shimmer-move 6s linear infinite; }
.aquarium-counter {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  padding: 6px 14px; border-radius: var(--r-md); font-size: 0.85rem; color: var(--c-text-sub);
}
.aquarium-bubbler { position: absolute; bottom: 40px; left: 0; right: 0; height: 60%; z-index: 2; }
.aq-fish {
  position: absolute;
  animation: aq-swim linear infinite;
  z-index: 3;
  font-size: 1.3rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
@keyframes aq-swim {
  0% { transform: translateX(-30px) translateY(0); }
  25% { transform: translateX(25%) translateY(-10px); }
  50% { transform: translateX(50%) translateY(8px); }
  75% { transform: translateX(75%) translateY(-6px); }
  100% { transform: translateX(calc(100% + 30px)) translateY(0); }
}

/* ── Fishing Scene ── */
.fishing-scene {
  position: relative;
  width: 100%;
  height: calc(100vh - 340px);
  min-height: 200px;
  overflow: hidden;
}
.fishing-sky {
  position: absolute;
  top: 0; left: 0; right: 0; height: 38%;
  background: linear-gradient(180deg, #2980b9, #5dade2, #85c1e9, #aed6f1);
}
.fishing-sun {
  position: absolute;
  top: 10%; left: 45%;
  width: 60px; height: 60px;
  background: radial-gradient(circle, #fff5cc, #ffdd44, #ffaa00);
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(255,220,50,0.6), 0 0 100px rgba(255,180,0,0.3);
  animation: celestial-pulse 4s ease-in-out infinite;
  z-index: 1;
}
@keyframes celestial-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.fishing-mountains {
  position: absolute;
  top: 22%; left: 0; right: 0; height: 15%;
  pointer-events: none;
}
.fishing-mountain {
  position: absolute;
  bottom: 0;
  border-radius: 40% 50% 0 0;
  opacity: 0.4;
}
.fishing-waves {
  position: absolute;
  top: 36%; left: 0; width: 200%; height: 40px;
  z-index: 2;
}
.fishing-waves svg { width: 100%; height: 100%; }
.fishing-wave-anim-1 { animation: wave-move 6s ease-in-out infinite; }
.fishing-wave-anim-2 { animation: wave-move 8s ease-in-out infinite reverse; position: absolute; top: 4px; left: 0; width: 100%; opacity: 0.5; }
@keyframes wave-move { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-25%); } }
.fishing-water {
  position: absolute;
  top: 38%; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #1b6b93, #1f7ea8, #1a6a90, #155a78, #104a60);
}
.fishing-shimmer {
  position: absolute;
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,210,255,0.2), transparent);
  animation: shimmer-move 8s linear infinite;
}
@keyframes shimmer-move { 0% { transform: translateX(-50%); } 100% { transform: translateX(100%); } }
.fishing-seaweed {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 80px;
  overflow: hidden;
}
.sw-blade {
  position: absolute;
  bottom: 0;
  width: 4px;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  animation: sw-sway ease-in-out infinite;
}
@keyframes sw-sway {
  0%,100% { transform: rotate(-8deg) scaleY(1); }
  30% { transform: rotate(6deg) scaleY(1.03); }
  70% { transform: rotate(-5deg) scaleY(0.97); }
}
.fishing-bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(100,180,255,0.15);
  background: radial-gradient(circle at 30% 30%, rgba(150,200,255,0.1), transparent);
  animation: bubble-up linear forwards;
}
@keyframes bubble-up {
  0% { transform: translateY(0) scale(1); opacity: 0.6; }
  80% { opacity: 0.2; }
  100% { transform: translateY(-200px) scale(0.3); opacity: 0; }
}
.fishing-fish-bg {
  position: absolute;
  font-size: 1rem;
  opacity: 0.15;
  animation: fish-swim-bg linear infinite;
}
@keyframes fish-swim-bg {
  0% { transform: translateX(-50px) translateY(0); }
  25% { transform: translateX(25vw) translateY(-8px); }
  50% { transform: translateX(50vw) translateY(5px); }
  75% { transform: translateX(75vw) translateY(-6px); }
  100% { transform: translateX(100vw) translateY(0); }
}
.fishing-scene .fishing-action-overlay {
  position: absolute;
  bottom: 15%; left: 50%; transform: translateX(-50%);
  z-index: 4;
  text-align: center;
}

/* ── Player Boat ── */
.player-boat {
  position: absolute;
  z-index: 3;
  text-align: center;
  animation: boat-bob 3s ease-in-out infinite;
  transition: opacity 0.5s, left 2s ease;
}
.player-boat.hidden { opacity: 0; pointer-events: none; }
@keyframes boat-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.boat-body { position: relative; width: 52px; height: 18px; margin: 0 auto; }
.boat-hull {
  position: absolute; bottom: 0; left: 0; width: 52px; height: 12px;
  background: linear-gradient(180deg, #a0522d, #8B4513 40%, #6B3410);
  border-radius: 4px 4px 45% 45%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4), inset 0 2px 2px rgba(255,200,150,0.2);
  clip-path: polygon(5% 0%, 95% 0%, 100% 40%, 98% 100%, 2% 100%, 0% 40%);
}
.boat-hull::after {
  content: '';
  position: absolute; top: 5px; left: 14px;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,235,180,0.5);
  box-shadow: 10px 0 0 rgba(255,235,180,0.5), 20px 0 0 rgba(255,235,180,0.5);
}
.boat-mast {
  position: absolute; bottom: 11px; left: 50%;
  width: 2px; height: 26px;
  background: linear-gradient(180deg, #7a5a3a, #5a3a1a);
  transform: translateX(-50%); border-radius: 1px 1px 0 0;
}
.boat-sail {
  position: absolute; bottom: 14px; left: calc(50% + 1px);
  width: 16px; height: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,235,220,0.85) 60%, rgba(220,215,200,0.8));
  border-radius: 0 40% 30% 0;
  filter: drop-shadow(2px 1px 3px rgba(0,0,0,0.15));
  animation: sail-wave 4s ease-in-out infinite;
}
@keyframes sail-wave { 0%,100% { border-radius: 0 40% 30% 0; width: 16px; } 50% { border-radius: 0 35% 25% 0; width: 15px; } }
.boat-flag {
  position: absolute; top: -4px; left: 50%;
  width: 8px; height: 5px;
  background: var(--c-accent); border-radius: 0 2px 2px 0;
  animation: flag-flutter 2s ease-in-out infinite;
}
@keyframes flag-flutter { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(0.9) skewY(2deg); } }
.boat-rod {
  position: absolute; right: -8px; top: -24px;
  width: 2.5px; height: 26px;
  background: linear-gradient(180deg, #6B3410, #A0522D, #C4763C);
  border-radius: 1px; transform-origin: bottom center;
  transform: rotate(35deg); z-index: 12;
  animation: rod-idle 4s ease-in-out infinite;
}
@keyframes rod-idle { 0%,100% { transform: rotate(30deg); } 50% { transform: rotate(33deg); } }
.boat-line {
  position: absolute; top: -2px; left: 0; width: 2px; height: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(200,200,200,0.3));
  transform-origin: top center; transform: rotate(-25deg);
}
.boat-bobber {
  position: absolute; bottom: -5px; left: -2px;
  width: 6px; height: 6px;
  background: radial-gradient(circle, #ff4444, #cc0000);
  border-radius: 50%;
  animation: bobber-bob 2s ease-in-out infinite;
}
@keyframes bobber-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
.boat-name {
  font-size: 0.65rem; color: var(--c-text-bright); margin-top: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  white-space: nowrap;
}
.boat-bow-wave {
  position: absolute; bottom: -2px; left: -4px;
  width: 8px; height: 4px;
  background: rgba(255,255,255,0.3); border-radius: 50%;
  animation: bow-wave 1.5s ease-in-out infinite;
}
@keyframes bow-wave { 0%,100% { opacity: 0.3; transform: scaleX(1); } 50% { opacity: 0.6; transform: scaleX(1.3); } }

.player-boat.catching .boat-rod { animation: rod-pull 1.2s ease-in-out !important; }
@keyframes rod-pull {
  0% { transform: rotate(30deg); }
  30% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg) scaleY(0.95); }
  70% { transform: rotate(-30deg) scaleY(0.9); }
  100% { transform: rotate(30deg); }
}

/* ── Mine Panel ── */
#panel-mine {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 400px;
  background: linear-gradient(180deg, #2a1a0a 0%, #3d2815 30%, #4a3020 60%, #352010 100%);
}
#panel-mine::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(90,60,30,0.12) 14px, rgba(90,60,30,0.12) 16px),
    repeating-linear-gradient(90deg, transparent, transparent 22px, rgba(60,40,20,0.08) 22px, rgba(60,40,20,0.08) 23px);
  pointer-events: none;
}
#panel-mine .mine-ore {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: ore-glow 3s ease-in-out infinite;
}
#panel-mine .action-btn,
#panel-mine .btn-row,
#panel-mine .btn-sm,
#panel-mine .cooldown-timer,
#panel-mine .result-box {
  position: relative; z-index: 2;
}
#panel-mine .action-btn {
  background: linear-gradient(135deg, #8b5e34, #a67040, #8b5e34);
  box-shadow: 0 4px 20px rgba(139,94,52,0.4);
}
#panel-mine .result-box {
  background: rgba(30,18,8,0.8);
  border-color: rgba(139,94,52,0.3);
}
#panel-mine .btn-sm {
  background: rgba(40,24,10,0.7);
  border-color: rgba(100,70,40,0.3);
  color: #c8a878;
}
#panel-mine .btn-sm:hover { color: #e8c898; border-color: rgba(200,168,120,0.4); }

/* ── Gather Panel ── */
#panel-gather {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 400px;
  background: linear-gradient(180deg, #1a3a1a 0%, #153515 30%, #1a4020 50%, #0d2a0d 100%);
}
#panel-gather::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(100,180,60,0.06), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(60,140,80,0.05), transparent 50%);
  pointer-events: none;
}
#panel-gather .action-btn,
#panel-gather .btn-row,
#panel-gather .btn-sm,
#panel-gather .cooldown-timer,
#panel-gather .result-box {
  position: relative; z-index: 2;
}
#panel-gather .result-box {
  background: rgba(10,25,10,0.8);
  border-color: rgba(60,140,60,0.25);
}
#panel-gather .btn-sm {
  background: rgba(15,30,15,0.7);
  border-color: rgba(60,120,60,0.3);
  color: #90c890;
}
#panel-gather .btn-sm:hover { color: #b0e8b0; border-color: rgba(100,180,100,0.4); }

/* ── Bazaar Panel ── */
#panel-bazaar {
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(40,25,10,0.3), rgba(30,18,8,0.2));
  border: 1px solid rgba(180,130,60,0.1);
  padding: 20px;
}
#panel-bazaar .section-title { color: #d4a050; border-left-color: rgba(212,160,80,0.4); }

/* ── Bank Panel ── */
#panel-bank {
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(15,20,30,0.5), rgba(12,18,28,0.4));
  border: 1px solid rgba(180,160,100,0.1);
  padding: 20px;
}
#panel-bank .section-title { color: #c8b070; border-left-color: rgba(200,176,112,0.4); }

/* ── Potions Panel ── */
#panel-potions {
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(20,10,30,0.4), rgba(15,8,25,0.3));
  border: 1px solid rgba(140,80,200,0.1);
  padding: 20px;
}
#panel-potions .section-title { color: #b080e0; border-left-color: rgba(176,128,224,0.4); }

/* ── Garden & Expedition ── */
.garden-header { color: var(--c-accent-light); margin-bottom: 8px; font-size: 1rem; }
.garden-seeds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.garden-plots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.plot-ready { border-color: rgba(100,200,100,0.4) !important; background: rgba(50,120,50,0.1) !important; }
.plot-growing { border-color: rgba(77,184,255,0.2) !important; }
.empty-state { color: var(--c-text-dim); margin-bottom: 12px; }
.expedition-active { border-color: rgba(255,215,0,0.3) !important; width: 100%; text-align: left; }
.expedition-ready { color: #4caf50; margin-bottom: 8px; }
.expedition-timer { margin-bottom: 8px; }
.expedition-name { font-size: 1.1rem; margin-bottom: 4px; }
.location-card { width: 100%; text-align: left; margin: 6px 0; cursor: pointer; }
.location-card.disabled { opacity: 0.5; pointer-events: none; }
.location-name { font-size: 1.05rem; }
.location-meta { font-size: 0.8rem; color: #6090b0; margin-top: 4px; }
.loot-preview { font-size: 0.8rem; color: #4a7090; margin-top: 2px; }
.cooldown-text { color: #6090b0; margin-bottom: 12px; }
.btn-cancel { color: var(--c-danger); border-color: var(--c-danger-border); }
.harvest-btn { margin-bottom: 12px; }

/* ── Story ── */
.story-timeline { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.story-step { padding: 8px 12px; border-radius: var(--r-md); border: 1px solid rgba(26,48,80,0.4); background: rgba(10,22,40,0.4); font-size: 0.9rem; }
.story-step.done { border-color: rgba(100,200,100,0.3); color: #6a9a6a; }
.story-step.active { border-color: var(--c-accent-border); background: rgba(30,60,100,0.3); color: #c0dff0; }
.story-step.locked { opacity: 0.4; }
.story-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--c-accent-light); }
.story-difficulty { font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; background: rgba(240,160,48,0.15); color: #f0a030; }

/* ── Settings Tab ── */
.settings-providers { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.settings-provider {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  transition: border-color var(--ease);
}
.settings-provider:hover { border-color: rgba(77,184,255,0.2); }
.sp-icon { font-size: 1.5rem; width: 36px; text-align: center; font-weight: 800; }
.sp-info { flex: 1; }
.sp-name { font-weight: 600; font-size: 0.9rem; color: var(--c-text-sub); }
.sp-status { font-size: 0.8rem; color: var(--c-text-dim); margin-top: 2px; }
.settings-msg { text-align: center; font-size: 0.85rem; margin-top: 12px; min-height: 20px; }