* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --gold: #ffd700;
  --gold-dark: #b8960f;
  --purple: #7b2ff7;
  --purple-dark: #5a1db8;
  --text: #fff;
  --text-muted: #b0a0d0;
  /* Container-relative unit: 1% of container width, capped at 420px */
  --w: min(1vw, 4.2px);
}

/* ===== Night Sky (fills entire screen behind canvas) ===== */
.night-sky {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg,
    #0a0825 0%, #0e1035 20%, #101845 40%,
    #142050 55%, #1a3058 70%, #1e4060 85%, #254a38 100%
  );
  z-index: 0;
  overflow: hidden;
}

.moon {
  position: absolute; top: 6%; right: 12%;
  width: 13vw; height: 13vw; max-width: 55px; max-height: 55px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e0 0%, #ffe680 40%, #ffcc00 100%);
  box-shadow: 0 0 20px rgba(255,230,100,0.5), 0 0 60px rgba(255,210,50,0.3);
  animation: moonGlow 4s ease-in-out infinite alternate;
}
@keyframes moonGlow {
  0% { box-shadow: 0 0 20px rgba(255,230,100,0.5), 0 0 60px rgba(255,210,50,0.3); }
  100% { box-shadow: 0 0 30px rgba(255,230,100,0.7), 0 0 80px rgba(255,210,50,0.4); }
}

.shooting-star {
  position: absolute; top: 12%; left: -5%;
  width: 80px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8), transparent);
  transform: rotate(-35deg); animation: shoot 6s ease-in 2s infinite; opacity: 0;
}
.shooting-star.s2 { top: 25%; width: 60px; animation: shoot 8s ease-in 5s infinite; transform: rotate(-25deg); }
@keyframes shoot {
  0% { opacity: 0; transform: translateX(0) rotate(-35deg); }
  5% { opacity: 1; }
  15% { opacity: 0; transform: translateX(400px) rotate(-35deg); }
  100% { opacity: 0; }
}

.cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(180,200,230,0.12) 0%, rgba(150,170,210,0.06) 50%, transparent 70%);
  filter: blur(6px); pointer-events: none;
}
.cloud.c1 { width: 48vw; height: 13vw; top: 10%; animation: driftRight 40s linear infinite; }
.cloud.c2 { width: 37vw; height: 10vw; top: 18%; opacity: 0.7; animation: driftRight 55s linear 8s infinite; }
.cloud.c3 { width: 53vw; height: 14vw; top: 6%; opacity: 0.5; animation: driftRight 70s linear 20s infinite; }
.cloud.c4 { width: 32vw; height: 9vw; top: 25%; opacity: 0.6; animation: driftRight 45s linear 12s infinite; }
@keyframes driftRight { 0% { left: -25%; } 100% { left: 110%; } }

/* ===== GAME CANVAS =====
   Fixed aspect ratio 2:3 (matches bg.png 1024x1536).
   Everything inside is positioned in % relative to this canvas.
   On any device, the canvas scales to fit — all elements stay aligned with the background.
*/
html, body {
  background: #0a0825;
  width: 100%; height: 100%;
  overflow: hidden;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  display: flex; justify-content: center;
}

#app {
  position: relative;
  width: 100%;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;

  /* Background anchored to bottom, width = 100%, height scales proportionally.
     Since bg.png is 2:3, height = width * 1.5. On all screens the trees/stumps
     are at the same relative position from bottom — wizard aligns with them. */
  background: none;
}

/* ===== Top Bar ===== */
.top-bar {
  display: flex; align-items: center;
  padding: 2.5% 4%;
  gap: 2.5%;
  z-index: 10;
}

.avatar {
  width: 10%; height: 0; padding-bottom: 10%;
  border-radius: 50%;
  background: rgba(123, 47, 247, 0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 5.5vw;
  border: 2px solid var(--gold);
  position: relative;
}
.avatar span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.currency-group { display: flex; gap: 2%; flex: 1; }
.currency {
  display: flex; align-items: center; gap: 1%;
  background: rgba(0, 0, 0, 0.5);
  padding: 1.5% 3%;
  border-radius: 5%;
  font-size: clamp(11px, 3.5vw, 14px); font-weight: 600;
  backdrop-filter: blur(6px);
}
.currency .icon { font-size: clamp(13px, 4vw, 16px); }

.lang-btn {
  background: none; border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px; font-size: clamp(16px, 5vw, 20px);
  padding: 1% 2%; cursor: pointer;
}

/* ===== Game Area ===== */
.game-area {
  flex: 1; min-height: 0;
  padding: 0 4%;
  padding-bottom: 18%; /* space for nav */
  z-index: 5;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ===== Bottom Nav ===== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 420px; margin: 0 auto;
  display: flex;
  background: none;
  padding: 8vw 0 2vw;
  padding-bottom: max(2vw, env(safe-area-inset-bottom, 2vw));
  z-index: 50;
  min-height: 28vw;
}
/* Nav background as separate layer — full control over size */
.bottom-nav::before {
  content: '';
  position: absolute;
  bottom: 0; left: -2%; right: -2%;
  height: 32vw;
  background: url('nav-bg.png') center bottom / 104% auto no-repeat;
  z-index: -1;
  pointer-events: none;
}

.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 1%;
  background: none; border: none; color: var(--text-muted);
  font-size: clamp(8px, 2.5vw, 10px); cursor: pointer;
  padding: 1%; transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-item .nav-icon { font-size: clamp(18px, 5.5vw, 22px); line-height: 0; transition: transform 0.15s; }
.nav-item .nav-icon svg {
  display: block; width: clamp(24px, 8vw, 34px); height: clamp(24px, 8vw, 34px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.nav-item .nav-label {
  font-weight: 900; font-size: clamp(10px, 3.2vw, 13px); color: #fff;
  text-shadow:
    -2px -2px 0 #4a2a10, 2px -2px 0 #4a2a10,
    -2px  2px 0 #4a2a10, 2px  2px 0 #4a2a10,
    -3px 0 0 #4a2a10, 3px 0 0 #4a2a10,
    0 -3px 0 #4a2a10, 0 3px 0 #4a2a10;
}
.nav-item.active { color: var(--gold); }
.nav-item:active { opacity: 0.7; }
.nav-item.active .nav-icon { transform: scale(1.15); }
.nav-item.active .nav-icon svg { filter: drop-shadow(0 0 7px rgba(255, 215, 0, 0.75)); }

/* ===== Tab Panels ===== */
.tab-panel { display: none; flex-direction: column; gap: 3%; animation: fadeIn 0.18s ease; }
.tab-panel.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.panel-title {
  font-size: clamp(14px, 4.5vw, 18px); font-weight: 800;
  color: var(--gold); text-shadow: 0 0 20px rgba(255, 215, 0, 0.25);
}

/* ===== Cauldrons ===== */
.cauldrons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5%; }

.cauldron-card {
  background: rgba(18, 8, 38, 0.75);
  border: 1px solid rgba(123, 47, 247, 0.45);
  border-radius: clamp(10px, 4vw, 16px);
  padding: 10% 6% 8%;
  display: flex; flex-direction: column; align-items: center;
  gap: 6%; backdrop-filter: blur(6px); transition: border-color 0.2s;
}
.cauldron-card.locked { border-color: rgba(255, 255, 255, 0.1); opacity: 0.65; }
.cauldron-visual { line-height: 1; }
.cauldron-locked-icon { font-size: clamp(24px, 8vw, 34px); opacity: 0.5; }
.cauldron-name { font-size: clamp(10px, 3vw, 12px); font-weight: 700; color: var(--text-muted); }

.brew-btn, .unlock-btn {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  border: none; border-radius: clamp(6px, 2.5vw, 10px);
  color: #fff; font-size: clamp(9px, 2.8vw, 11px); font-weight: 700;
  padding: 8% 5%; cursor: pointer; width: 100%; text-align: center; line-height: 1.4;
  -webkit-tap-highlight-color: transparent; transition: opacity 0.15s, transform 0.1s;
}
.unlock-btn { background: linear-gradient(135deg, #4a3010, #2a1808); border: 1px solid var(--gold-dark); }
.brew-btn:active, .unlock-btn:active { opacity: 0.7; transform: scale(0.96); }
.brew-cost { display: block; font-size: clamp(8px, 2.5vw, 10px); opacity: 0.8; }

.brew-hint {
  font-size: clamp(9px, 2.8vw, 11px); color: var(--text-muted);
  text-align: center; padding: 1% 0;
}

/* Scene: bg.png as <img>, everything positioned relative to it.
   Container height = image height. % positions = % of image. Done. */
.scene {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
}
.scene-bg {
  display: block;
  width: 100%;
  height: auto;
}

.wizard-container {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 45%;
  transform: translateX(-50%);
  pointer-events: none;
}
.wizard-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 15px rgba(123, 47, 247, 0.5));
}

/* Cauldrons on stumps — glued to bg like wizard */
.stump-cauldron {
  position: absolute;
  width: 18%;
  z-index: 7;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.15s;
}
.stump-cauldron:active {
  transform: translateX(-50%) scale(0.92);
}
.cauldron-stump-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.4));
}

/* 4 stumps — positioned in % of scene (= % of bg image) */
.stump-1 { top: 38%; left: 18%; }
.stump-2 { top: 38%; left: 82%; }
.stump-3 { top: 55%; left: 8%; }
.stump-4 { top: 52%; left: 92%; }

/* Cauldron animations */
@keyframes brewPulse {
  0%, 100% { transform: scale(1); border-color: rgba(100, 255, 100, 0.4); }
  50% { transform: scale(1.03); border-color: rgba(100, 255, 100, 0.8); }
}
.cauldron-card.brewing { animation: brewPulse 0.35s ease-in-out 2; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.cauldron-card.shake { animation: shake 0.4s ease-in-out; }
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-44px); } }

/* ===== Tasks ===== */
.panel-title-row { display: flex; align-items: baseline; justify-content: space-between; }
.tasks-reset-time { font-size: clamp(8px, 2.5vw, 10px); color: var(--text-muted); opacity: 0.7; }
.tasks-list { display: flex; flex-direction: column; gap: 2.5%; }

.task-item {
  background: rgba(18, 8, 38, 0.75);
  border: 1px solid rgba(123, 47, 247, 0.35);
  border-radius: clamp(10px, 3.5vw, 14px);
  padding: 3%; display: flex; gap: 2.5%; align-items: center;
  backdrop-filter: blur(6px); transition: opacity 0.3s;
}
.task-item.claimed { opacity: 0.45; }
.task-icon { font-size: clamp(20px, 6.5vw, 26px); flex-shrink: 0; }
.task-body { flex: 1; min-width: 0; }
.task-name { font-size: clamp(11px, 3.3vw, 13px); font-weight: 700; color: var(--text); }
.task-desc { font-size: clamp(8px, 2.5vw, 10px); color: var(--text-muted); margin-top: 1%; }
.task-progress { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-top: 2%; overflow: hidden; }
.task-progress-bar { height: 100%; background: linear-gradient(90deg, var(--purple), var(--gold)); border-radius: 3px; transition: width 0.35s ease; }
.task-progress-text { font-size: clamp(8px, 2.5vw, 10px); color: var(--text-muted); display: block; margin-top: 1%; }
.task-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4%; flex-shrink: 0; }
.task-reward { font-size: clamp(9px, 2.8vw, 11px); font-weight: 700; color: var(--gold); white-space: nowrap; }
.task-claim-btn {
  background: linear-gradient(135deg, #b87000, #7a4a00); border: none;
  border-radius: clamp(6px, 2vw, 8px); color: #fff;
  font-size: clamp(9px, 2.8vw, 11px); font-weight: 700;
  padding: 5% 8%; cursor: pointer; white-space: nowrap; transition: opacity 0.15s;
}
.task-claim-btn:active { opacity: 0.7; }
.task-done { font-size: clamp(9px, 2.8vw, 11px); color: #6afa6a; }

/* ===== Character Panel ===== */
.character-panel { display: flex; flex-direction: column; align-items: center; gap: 2.5%; padding: 1% 0 2%; }
.char-avatar { font-size: clamp(50px, 18vw, 72px); filter: drop-shadow(0 0 18px rgba(123,47,247,0.6)); animation: charFloat 3s ease-in-out infinite; }
@keyframes charFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.char-name { font-size: clamp(16px, 5vw, 20px); font-weight: 800; }
.char-level-title { font-size: clamp(10px, 3vw, 12px); font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.char-level-row { width: 100%; display: flex; justify-content: space-between; font-size: clamp(10px, 3vw, 12px); color: var(--text-muted); }
.char-xp-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
.char-xp-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--gold)); border-radius: 4px; transition: width 0.5s ease; }
.char-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5%; width: 100%; margin-top: 1%; }
.stat-item {
  background: rgba(18,8,38,0.75); border: 1px solid rgba(123,47,247,0.35);
  border-radius: clamp(10px, 3.5vw, 14px); padding: 3% 2%;
  display: flex; flex-direction: column; align-items: center; gap: 2%; backdrop-filter: blur(6px);
}
.stat-icon { font-size: clamp(18px, 5.5vw, 22px); }
.stat-value { font-size: clamp(14px, 4.5vw, 18px); font-weight: 800; color: var(--gold); }
.stat-label { font-size: clamp(8px, 2.5vw, 10px); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ===== Coming Soon Panel ===== */
.coming-soon-panel { display: flex; flex-direction: column; align-items: center; gap: 2.5%; padding: 7% 2% 4%; text-align: center; }
.cs-icon { font-size: clamp(40px, 15vw, 60px); opacity: 0.55; }
.coming-soon-panel h2 { font-size: clamp(18px, 5.5vw, 22px); font-weight: 800; color: var(--gold); }
.coming-soon-panel > p { font-size: clamp(11px, 3.3vw, 13px); color: var(--text-muted); }
.cs-preview {
  margin-top: 2%; background: rgba(18,8,38,0.75); border: 1px solid rgba(123,47,247,0.3);
  border-radius: clamp(10px, 3.5vw, 14px); padding: 1% 4%; width: 100%; backdrop-filter: blur(6px);
}
.cs-item { padding: 2.5% 0; font-size: clamp(11px, 3.3vw, 13px); color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.05); }
.cs-item:last-child { border-bottom: none; }

/* ===== Menu Panel ===== */
.menu-list { display: flex; flex-direction: column; gap: 2.5%; }
.menu-item {
  background: rgba(18,8,38,0.75); border: 1px solid rgba(123,47,247,0.3);
  border-radius: clamp(8px, 3vw, 12px); padding: 3.5% 4%;
  display: flex; justify-content: space-between; align-items: center;
  font-size: clamp(12px, 3.5vw, 14px); backdrop-filter: blur(6px);
}
.menu-value { color: var(--text-muted); font-size: clamp(11px, 3.3vw, 13px); }
.menu-reset-btn {
  background: rgba(200,30,30,0.15); border: 1px solid rgba(200,30,30,0.4);
  border-radius: clamp(8px, 3vw, 12px); color: #ff7070;
  font-size: clamp(12px, 3.5vw, 14px); font-weight: 600;
  padding: 3.5% 4%; cursor: pointer; text-align: left; width: 100%;
  -webkit-tap-highlight-color: transparent; transition: background 0.2s;
}
.menu-reset-btn:active { background: rgba(200,30,30,0.3); }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.7); display: flex;
  align-items: center; justify-content: center;
  z-index: 100; backdrop-filter: blur(4px);
}
.modal-content {
  background: linear-gradient(135deg, #2d1b69, #1a0a2e);
  border: 1px solid rgba(123,47,247,0.5);
  border-radius: 20px; padding: 7% 6%;
  max-width: 320px; width: 85%; text-align: center;
}
.modal-content h3 { font-size: clamp(14px, 4.5vw, 18px); margin-bottom: 3%; color: var(--gold); }
.modal-content p { font-size: clamp(12px, 3.5vw, 14px); color: var(--text-muted); margin-bottom: 5%; line-height: 1.5; white-space: pre-line; }
.modal-close {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  border: none; padding: 3% 10%; border-radius: 12px; color: white;
  font-size: clamp(12px, 3.5vw, 14px); font-weight: 600; cursor: pointer;
}

/* ===== Toast ===== */
/* ===== Admin Debug Panel ===== */
.admin-toggle {
  position: fixed; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,215,0,0.9); color: #1a0a2e;
  font-size: 20px; line-height: 36px; text-align: center;
  z-index: 200; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.admin-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-height: 40vh;
  background: transparent;
  border-top: none;
  z-index: 200;
  border-radius: 16px 16px 0 0;
}
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 14px; font-weight: 700; color: var(--gold);
}
.admin-save {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  border: none; border-radius: 8px; color: #000;
  padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.admin-close {
  background: none; border: none; color: #ff7070;
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.admin-scroll {
  overflow-y: auto; max-height: 32vh;
  padding: 8px 14px 20px;
}
.admin-group {
  margin-bottom: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 10px;
}
.admin-group-title {
  font-size: 12px; font-weight: 700; color: var(--gold);
  margin-bottom: 8px;
}
.admin-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.admin-row label {
  font-size: 11px; color: #aaa; width: 55px; flex-shrink: 0;
}
.admin-row input[type="range"] {
  flex: 1; accent-color: #7b2ff7; height: 20px;
}
.admin-row .admin-val {
  font-size: 11px; color: var(--gold); font-weight: 700;
  width: 40px; text-align: right; flex-shrink: 0;
}

.toast {
  position: fixed; bottom: 18%; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(16,6,32,0.96); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 2.5% 5%;
  font-size: clamp(11px, 3.3vw, 13px); font-weight: 600; color: var(--text);
  z-index: 500; opacity: 0; transition: opacity 0.2s, transform 0.2s;
  max-width: 280px; text-align: center; pointer-events: none;
  backdrop-filter: blur(10px); white-space: nowrap;
}
.toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.toast-error { border-color: rgba(255,80,80,0.55); }
.toast.toast-success { border-color: rgba(80,220,80,0.55); }