/* ============================================================
   LADANG TEPI PANTAI — STYLE LENGKAP v4.0
   ============================================================ */

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

:root {
  --brown-dark: #3e2723;
  --brown: #5d4037;
  --brown-light: #8d6e63;
  --green-dark: #1b5e20;
  --green: #388e3c;
  --green-light: #66bb6a;
  --gold: #fdd835;
  --gold-dark: #f9a825;
  --coin: #ffcc02;
  --tc: #a78bfa;
  --blue: #1565c0;
  --blue-light: #42a5f5;
  --panel-bg: rgba(20, 14, 6, 0.98);
  --panel-border: rgba(255,255,255,0.12);
  --ui-radius: 12px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* UI Canvas Scaler — scale toolbar/HUD proportionally with screen size */
  --ui-scale: 1;
  --tool-btn-size: 40px;
  --hud-btn-min: 44px;
  --hud-icon-sz: 1.20rem;
  --hud-label-sz: 0.58rem;
  --hud-gap: 2px;
}
/* ---- Scale With Screen Size (like Unity Canvas Scaler) ---- */
@media (max-width: 900px) and (max-height: 700px) {
  :root { --ui-scale: 0.88; --tool-btn-size: 36px; --hud-btn-min: 40px;
          --hud-icon-sz: 1.08rem; --hud-label-sz: 0.54rem; }
}
@media (max-width: 640px) {
  :root { --ui-scale: 0.82; --tool-btn-size: 34px; --hud-btn-min: 38px;
          --hud-icon-sz: 1.02rem; --hud-label-sz: 0.52rem; }
}
@media (max-width: 420px) {
  :root { --ui-scale: 0.72; --tool-btn-size: 30px; --hud-btn-min: 34px;
          --hud-icon-sz: 0.92rem; --hud-label-sz: 0.48rem; --hud-gap: 1px; }
}
@media (max-height: 540px) {
  :root { --ui-scale: 0.78; --tool-btn-size: 32px; --hud-btn-min: 36px;
          --hud-icon-sz: 0.96rem; --hud-label-sz: 0.50rem; }
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0a1628;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-size: 15px;
  color: #f5f0e8;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ============================================================
   LAYER UTILITY
   ============================================================ */
.layer-hidden { display: none !important; }

/* ============================================================
   SKY LAYER — z-index: 1, always visible, pure CSS animated sky
   ============================================================ */
#sky-layer {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
}
.sky-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #04060e 0%, #070f1e 8%, #0c1c38 20%,
    #112a58 35%, #1a4a8a 52%, #2470b8 68%,
    #3d94d0 82%, #6bbae0 93%, #9fd4ea 100%);
  animation: sky-time 120s ease-in-out infinite alternate;
}
@keyframes sky-time {
  0%   { filter: brightness(0.7) saturate(0.8); }
  30%  { filter: brightness(1.0) saturate(1.0); }
  60%  { filter: brightness(1.15) saturate(1.2) hue-rotate(8deg); }
  80%  { filter: brightness(0.95) saturate(1.1) hue-rotate(-4deg); }
  100% { filter: brightness(0.75) saturate(0.85); }
}
.sky-sun {
  position: absolute; top: 16%; right: 22%;
  width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle, #fffde7 25%, #ffe082 55%, rgba(255,200,50,0) 100%);
  box-shadow: 0 0 60px 28px rgba(255,220,80,0.28), 0 0 130px 65px rgba(255,170,40,0.12);
  animation: sky-sun-pulse 7s ease-in-out infinite;
}
@keyframes sky-sun-pulse {
  0%,100% { box-shadow: 0 0 60px 28px rgba(255,220,80,0.28), 0 0 130px 65px rgba(255,170,40,0.12); transform: scale(1); }
  50%      { box-shadow: 0 0 80px 40px rgba(255,230,90,0.38), 0 0 160px 80px rgba(255,190,50,0.18); transform: scale(1.04); }
}
.sky-moon {
  position: absolute; top: 12%; left: 18%;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle, #fef9e7 30%, #fdd835 70%, rgba(253,216,53,0) 100%);
  box-shadow: 0 0 30px 14px rgba(253,216,53,0.18);
  opacity: 0.25; /* subtle moon visible during day */
  animation: sky-moon-fade 120s ease-in-out infinite alternate;
}
@keyframes sky-moon-fade {
  0%,40% { opacity: 0.0; } 70%,100% { opacity: 0.4; }
}
/* Stars */
.sky-star {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  animation: sky-star-twinkle ease-in-out infinite;
}
.sky-s1 { width:3px;height:3px; top:8%;  left:12%;  animation-duration:2.1s; animation-delay:0s; }
.sky-s2 { width:2px;height:2px; top:5%;  left:38%;  animation-duration:3.4s; animation-delay:-1.2s; }
.sky-s3 { width:3px;height:3px; top:11%; left:55%;  animation-duration:2.8s; animation-delay:-0.6s; }
.sky-s4 { width:2px;height:2px; top:7%;  left:72%;  animation-duration:1.9s; animation-delay:-2.0s; }
.sky-s5 { width:4px;height:4px; top:4%;  left:82%;  animation-duration:3.1s; animation-delay:-0.3s; }
.sky-s6 { width:2px;height:2px; top:9%;  left:92%;  animation-duration:2.5s; animation-delay:-1.7s; }
@keyframes sky-star-twinkle {
  0%,100% { opacity:0.15; transform:scale(0.7); }
  50%      { opacity:1;    transform:scale(1.3); }
}
/* Sky clouds */
.sky-cloud {
  position: absolute; animation: sky-cloud-drift linear infinite;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); opacity: 0;
}
.sky-cl1 { top:8%;  font-size:3.2rem; animation-duration:70s;  animation-delay:0s;    }
.sky-cl2 { top:16%; font-size:2.2rem; animation-duration:90s;  animation-delay:-25s;  }
.sky-cl3 { top:5%;  font-size:2.8rem; animation-duration:80s;  animation-delay:-50s;  }
.sky-cl4 { top:20%; font-size:1.8rem; animation-duration:110s; animation-delay:-70s;  }
@keyframes sky-cloud-drift {
  0%   { transform: translateX(-15%); opacity: 0; }
  5%   { opacity: 0.65; }
  95%  { opacity: 0.65; }
  100% { transform: translateX(115vw); opacity: 0; }
}
/* Sky birds */
.sky-bird {
  position: absolute; animation: sky-bird-fly linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); font-size:1.1rem;
}
.sky-b1 { top:18%; animation-duration:28s; animation-delay:0s;   font-size:0.9rem; }
.sky-b2 { top:13%; animation-duration:38s; animation-delay:-14s; font-size:1.2rem; }
@keyframes sky-bird-fly {
  0%   { left:-5%;  opacity:0; transform:translateY(0); }
  4%   { opacity:1; }
  50%  { transform:translateY(-10px); }
  96%  { opacity:1; }
  100% { left:106%; opacity:0; transform:translateY(0); }
}
/* Bottom mist/fog */
.sky-mist {
  position: absolute; bottom: 0; left: 0; right: 0; height: 28%;
  background: linear-gradient(0deg,
    rgba(180,220,255,0.12) 0%,
    rgba(180,220,255,0.06) 50%,
    transparent 100%);
  pointer-events: none;
}

/* ============================================================
   START BG VIDEO — z-index: 2, shown during menu / loading
   ============================================================ */
#start-bg-video {
  position: fixed; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ============================================================
   GAME CANVAS — z-index: 10 (above sky/video, below frame/ui)
   ============================================================ */
#game-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
  pointer-events: auto;
  z-index: 10;
}

/* ============================================================
   NATURE FRAME LAYER — z-index: 20, transparent-hole frame
   Covers full screen. Transparent hole reveals canvas underneath.
   pointer-events: none so all clicks/taps reach the canvas.
   ============================================================ */
#nature-frame-layer {
  position: fixed; inset: 0; z-index: 20;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  /* Slight shadow to integrate frame with game world */
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.35));
}

/* Global touch improvement — all buttons respond immediately */
button, [role="button"], .hud-btn, .tool-btn, .mm-btn, .btn-menu,
.tile-menu-btn, .building-menu-btn, .sq-seed-btn, .sq-cancel,
.mine-btn, .sail-btn, .recipe-cook-btn, .upg-btn, .barn-upg-btn,
.avatar-option, .cargo-item, .npc-btn-accept, .npc-btn-reject {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Action menus sit above canvas — make sure they receive pointer events */
#tile-action-menu, #building-action-menu, #seed-quick-select {
  pointer-events: auto;
}

.hidden { display: none !important; }
.hide-sm { display: none; }
.hide-xs { display: none; }
@media (min-width: 600px) { .hide-sm { display: unset; } }
@media (min-width: 480px) { .hide-xs { display: unset; } }

/* ============================================================
   AUDIO UNLOCK
   ============================================================ */
#audio-unlock {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,22,40,0.95);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.audio-unlock-inner { text-align: center; }
.au-icon { font-size: 4rem; margin-bottom: 12px; }
#audio-unlock h2 { font-size: 1.8rem; color: #fff; margin-bottom: 8px; }
#audio-unlock p { color: #aac4ff; }

/* ============================================================
   LOADING SCREEN — REDESIGN ANIMASI
   ============================================================ */
#loading-screen {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ls-bg {
  position: absolute; inset: 0; overflow: hidden;
}
.ls-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0a1a35 0%, #1a4a7a 45%, #2d7fbf 70%, #4fc3f7 100%);
}
.ls-ocean {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, #1a5288 0%, #0d2a50 100%);
}
.ls-cloud {
  position: absolute; font-size: 2.2rem; opacity: 0.85; animation: ls-cloud-drift linear infinite;
}
.ls-cloud1 { top: 12%; left: -8%; animation-duration: 22s; animation-delay: 0s; }
.ls-cloud2 { top: 22%; left: -5%; animation-duration: 30s; animation-delay: -8s; font-size: 1.8rem; }
.ls-cloud3 { top: 8%;  left: -12%; animation-duration: 26s; animation-delay: -15s; font-size: 2.8rem; }
.ls-star { position: absolute; animation: ls-twinkle 2s ease-in-out infinite; }
.ls-star1 { top: 15%; right: 20%; font-size: 1.2rem; animation-delay: 0s; }
.ls-star2 { top: 30%; right: 35%; font-size: 0.9rem; animation-delay: 1s; }
.ls-bird {
  position: absolute; top: 20%; right: -5%; font-size: 1.4rem;
  animation: ls-bird-fly 18s linear infinite;
}
.ls-waves {
  position: absolute; bottom: 0; left: 0; right: 0; height: 80px; overflow: hidden;
}
.ls-wave {
  position: absolute; bottom: 0; left: -50%; width: 200%; height: 100%;
  background: radial-gradient(ellipse at 50% 100%, rgba(74,144,226,0.3) 0%, transparent 70%);
  border-radius: 45%;
}
.lsw1 { animation: ls-wave-anim 6s ease-in-out infinite; opacity: 0.5; }
.lsw2 { animation: ls-wave-anim 9s ease-in-out infinite reverse; opacity: 0.3; }

.ls-content {
  position: relative; z-index: 2; text-align: center;
  width: 100%; max-width: 380px; padding: 20px;
}
.ls-island-scene {
  position: relative; height: 80px; margin-bottom: 8px;
}
.ls-island-bg {
  font-size: 4.5rem; animation: ls-island-float 3s ease-in-out infinite;
  display: inline-block; filter: drop-shadow(0 8px 20px rgba(0,100,200,0.4));
}
.ls-farmer-walk {
  position: absolute; bottom: 0; left: 30%; font-size: 1.8rem;
  animation: ls-walk 4s steps(4) infinite;
}
.ls-boat {
  position: absolute; bottom: -4px; right: 15%; font-size: 1.6rem;
  animation: ls-boat-rock 3s ease-in-out infinite;
}
.ls-title-wrap { margin-bottom: 16px; }
.ls-title-icon { font-size: 2.5rem; animation: pulse 2s ease-in-out infinite; display: inline-block; margin-bottom: 4px; }
.ls-title {
  font-size: 1.9rem; font-weight: 900;
  background: linear-gradient(135deg, #ffe082, #ffa726, #ffe082);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(255,180,50,0.5));
  margin: 0; letter-spacing: 1px;
}
.ls-title-sub { font-size: 0.8rem; color: #90caf9; letter-spacing: 3px; text-transform: uppercase; margin-top: 2px; }
.ls-progress-wrap {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  background: rgba(0,0,0,0.3); border-radius: 20px; padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.1);
}
.ls-progress-track {
  flex: 1; height: 12px; background: rgba(255,255,255,0.1);
  border-radius: 8px; overflow: hidden; position: relative;
}
.ls-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #43a047, #66bb6a, #ffe082);
  border-radius: 8px; transition: width 0.4s ease;
}
.ls-progress-shine {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  animation: ls-shine 2s ease-in-out infinite;
}
.ls-progress-pct { font-size: 0.8rem; font-weight: 800; color: #ffe082; min-width: 32px; }
.ls-status { color: #90caf9; font-size: 0.85rem; margin-bottom: 10px; min-height: 1.2em; }
.ls-tip-box {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,220,100,0.2);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; text-align: left;
}
.ls-tip-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.ls-tip-text { font-size: 0.78rem; color: #ffe082; line-height: 1.4; }
.ls-features {
  display: flex; justify-content: center; gap: 16px;
}
.ls-feat { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.7rem; color: #90caf9; }
.ls-feat span:first-child { font-size: 1.3rem; }

@keyframes ls-cloud-drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 20%)); } }
@keyframes ls-twinkle { 0%,100%{opacity:0.3;transform:scale(0.8);} 50%{opacity:1;transform:scale(1.2);} }
@keyframes ls-bird-fly { from{right:-5%;} to{right:110%;} }
@keyframes ls-wave-anim { 0%,100%{transform:translateX(0) rotate(0);} 50%{transform:translateX(5%) rotate(1deg);} }
@keyframes ls-island-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@keyframes ls-walk { 0%{left:10%;} 100%{left:70%;} }
@keyframes ls-boat-rock { 0%,100%{transform:rotate(-4deg) translateY(0);} 50%{transform:rotate(4deg) translateY(-3px);} }
@keyframes ls-shine { 0%{transform:translateX(-200%);} 100%{transform:translateX(200%);} }

/* Legacy compatibility */
.loading-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #4caf50, #ffe082); border-radius: 8px; transition: width 0.3s ease; }
#loading-text { color: #90caf9; font-size: 0.9rem; }

/* ============================================================
   MAIN MENU — transparent container; start-bg-video is the background
   ============================================================ */
#main-menu {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: transparent;
}

/* ---- Background container — pointer-events: none so it never blocks clicks ---- */
.mm-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}

/* ---- Photo background — now replaced by #start-bg-video; kept as fallback ---- */
.mm-photo-bg {
  display: none; /* start-bg-video handles the background now */
}

/* ---- Warm sunlight vignette — gives depth & focuses eye on menu card ---- */
.mm-sun-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgba(10,20,40,0.38) 100%),
    linear-gradient(180deg, rgba(255,220,100,0.06) 0%, transparent 40%, rgba(10,30,60,0.28) 100%);
}

/* ---- Animated floating clouds ---- */
.mm-anim-cloud {
  position: absolute;
  opacity: 0;
  animation: mm-cloud-float linear infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.mm-ac1 { top: 7%;  font-size: 3.2rem; left: -12%; animation-duration: 55s; animation-delay: 0s;    opacity: 0; }
.mm-ac2 { top: 14%; font-size: 2.2rem; left: -8%;  animation-duration: 72s; animation-delay: -18s; }
.mm-ac3 { top: 5%;  font-size: 2.8rem; left: -15%; animation-duration: 64s; animation-delay: -38s; }
.mm-ac4 { top: 20%; font-size: 1.8rem; left: -6%;  animation-duration: 88s; animation-delay: -52s; }
.mm-ac5 { top: 10%; font-size: 2.4rem; left: -10%; animation-duration: 78s; animation-delay: -28s; }

/* ---- Flying birds ---- */
.mm-bird {
  position: absolute;
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  animation: mm-bird-soar linear infinite;
}
.mm-bird1 { top: 16%; animation-duration: 22s; animation-delay: 0s;   font-size: 1.1rem; }
.mm-bird2 { top: 22%; animation-duration: 30s; animation-delay: -9s;  font-size: 0.9rem; }
.mm-bird3 { top: 11%; animation-duration: 26s; animation-delay: -16s; font-size: 1.3rem; }

/* ---- Sea sparkle dots ---- */
.mm-sparkle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 6px 2px rgba(200,240,255,0.8);
  animation: mm-sparkle-flash ease-in-out infinite;
}
/* Positioned in the sea/water area of the image (bottom 25–45%) */
.mm-sp1 { width:5px; height:5px; left:18%; bottom:34%; animation-duration:2.4s; animation-delay:0s;    }
.mm-sp2 { width:4px; height:4px; left:28%; bottom:30%; animation-duration:3.1s; animation-delay:-0.8s; }
.mm-sp3 { width:6px; height:6px; left:42%; bottom:28%; animation-duration:2.0s; animation-delay:-1.5s; }
.mm-sp4 { width:4px; height:4px; left:56%; bottom:32%; animation-duration:2.8s; animation-delay:-0.4s; }
.mm-sp5 { width:5px; height:5px; left:68%; bottom:35%; animation-duration:3.4s; animation-delay:-2.1s; }
.mm-sp6 { width:3px; height:3px; left:78%; bottom:29%; animation-duration:2.2s; animation-delay:-1.0s; }

/* ---- Falling leaves ---- */
.mm-leaf {
  position: absolute; top: -6%;
  font-size: 1.1rem;
  opacity: 0;
  animation: mm-leaf-drift linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.mm-lf1 { left: 8%;  animation-duration: 14s; animation-delay: 0s;   font-size: 1.0rem; }
.mm-lf2 { left: 22%; animation-duration: 18s; animation-delay: -5s;  font-size: 0.9rem; }
.mm-lf3 { left: 88%; animation-duration: 16s; animation-delay: -10s; font-size: 1.1rem; }

/* ---- Small sailboat drifting across the sea ---- */
.mm-sail-boat {
  position: absolute;
  font-size: 1.8rem;
  bottom: 30%;
  left: -6%;
  filter: drop-shadow(0 4px 8px rgba(0,0,30,0.4));
  animation: mm-boat-drift 45s linear infinite;
}

/* ---- Main card — dark glass effect, premium look ---- */
.mm-card {
  position: relative; z-index: 10;
  pointer-events: auto;
  background: linear-gradient(155deg,
    rgba(5, 15, 35, 0.82) 0%,
    rgba(10, 30, 65, 0.78) 50%,
    rgba(8, 22, 50, 0.82) 100%);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1.5px solid rgba(255,220,120,0.32);
  border-radius: 24px;
  padding: 28px 28px 20px;
  width: 100%; max-width: 390px;
  box-shadow:
    0 12px 50px rgba(0,0,0,0.60),
    0 0 0 1px rgba(255,255,255,0.07) inset,
    0 0 80px rgba(255,180,50,0.12),
    0 -1px 0 rgba(255,220,100,0.15) inset;
  overflow: hidden;
}
.mm-card-shine {
  position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: mm-card-shine 6s ease-in-out infinite;
  pointer-events: none;
}

/* ---- Title ---- */
.mm-title-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 4px;
}
.mm-title-icon { font-size: 2.2rem; animation: mm-icon-bob 3s ease-in-out infinite; }
.mm-title-icon:last-child { animation-delay: -1.5s; }
.mm-title-text { text-align: center; }
.mm-title-main {
  font-size: 2.4rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #ffe082 0%, #ffd740 40%, #ffab40 70%, #ffe082 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(255,180,50,0.6));
  letter-spacing: 3px;
  animation: mm-title-glow 4s ease-in-out infinite;
}
.mm-title-sub-text {
  font-size: 1.05rem; letter-spacing: 4px; color: #90caf9; font-weight: 600; margin-top: -2px;
}
.mm-tagline { color: #a0c8a0; font-size: 0.8rem; text-align: center; margin-bottom: 20px; letter-spacing: 1px; }

/* ---- Buttons ---- */
.mm-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mm-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px; border: none;
  font-size: 1rem; font-weight: 800; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
  letter-spacing: 0.5px; position: relative; overflow: hidden;
}
.mm-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%); transition: transform 0.4s;
}
.mm-btn:hover::after { transform: translateX(100%); }
.mm-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.mm-btn:active { transform: scale(0.97); }
.mm-btn-icon { font-size: 1.4rem; }
.mm-btn-label { flex: 1; text-align: left; }
.mm-btn-arrow { font-size: 1.1rem; opacity: 0.7; }
.mm-btn-new {
  background: linear-gradient(135deg, #2e7d32, #4caf50, #66bb6a);
  color: #fff; box-shadow: 0 4px 20px rgba(76,175,80,0.45);
}
.mm-btn-load {
  background: linear-gradient(135deg, #0d47a1, #1976d2, #42a5f5);
  color: #fff; box-shadow: 0 4px 20px rgba(25,118,210,0.45);
}
.mm-btn-settings {
  background: rgba(255,255,255,0.1); color: #ddd;
  border: 1.5px solid rgba(255,255,255,0.18);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ---- Feature badges ---- */
.mm-badges {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px;
}
.mm-badge {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 3px 10px; font-size: 0.72rem; color: #b0c8e0;
}

.mm-version { color: #455a75; font-size: 0.72rem; text-align: center; }

/* ---- Menu Animations ---- */

/* Cloud floats from left to right across the full screen width */
@keyframes mm-cloud-float {
  0%   { transform: translateX(0);              opacity: 0; }
  5%   { opacity: 0.7; }
  95%  { opacity: 0.7; }
  100% { transform: translateX(calc(110vw + 18%)); opacity: 0; }
}

/* Birds soar from left to right */
@keyframes mm-bird-soar {
  0%   { left: -6%;   opacity: 0; transform: translateY(0); }
  4%   { opacity: 0.9; }
  50%  { transform: translateY(-8px); }
  96%  { opacity: 0.9; }
  100% { left: 106%;  opacity: 0; transform: translateY(0); }
}

/* Sea sparkle flicker */
@keyframes mm-sparkle-flash {
  0%,100% { opacity: 0;   transform: scale(0.6); }
  50%      { opacity: 0.95; transform: scale(1.4); }
}

/* Leaf drift down with sway */
@keyframes mm-leaf-drift {
  0%   { transform: translateY(-2vh) rotate(0deg) translateX(0);      opacity: 0; }
  8%   { opacity: 0.85; }
  50%  { transform: translateY(50vh)  rotate(180deg) translateX(30px); opacity: 0.85; }
  92%  { opacity: 0.6; }
  100% { transform: translateY(105vh) rotate(360deg) translateX(-10px); opacity: 0; }
}

/* Sailboat moves slowly across sea from left */
@keyframes mm-boat-drift {
  0%   { left: -6%;  transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { left: 106%; transform: translateY(0); }
}

/* Card shine sweep */
@keyframes mm-card-shine { 0%{left:-60%;} 100%{left:120%;} }
/* Title glow pulse */
@keyframes mm-title-glow { 0%,100%{filter:drop-shadow(0 2px 12px rgba(255,180,50,0.6));} 50%{filter:drop-shadow(0 2px 20px rgba(255,210,80,0.9));} }
/* Icon bob */
@keyframes mm-icon-bob { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-5px) scale(1.05);} }
/* Kept for compatibility */
@keyframes mm-sway { 0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);} }
@keyframes mm-cloud-move { from{transform:translateX(0);} to{transform:translateX(calc(100vw + 20%));} }

/* ---- Media queries — responsive layout ---- */

/* Tablet portrait: shrink card slightly */
@media (max-width: 600px) {
  .mm-card {
    max-width: 340px;
    padding: 22px 18px 16px;
    border-radius: 20px;
  }
  .mm-title-main { font-size: 2rem; letter-spacing: 2px; }
  .mm-sparkle { display: none; }
}

/* Mobile (narrow): card fills width with margin, photo background repositions */
@media (max-width: 440px) {
  .mm-photo-bg {
    background-position: 55% center;
  }
  .mm-card {
    max-width: calc(100vw - 28px);
    padding: 18px 14px 14px;
    border-radius: 18px;
  }
  .mm-title-main { font-size: 1.75rem; letter-spacing: 1px; }
  .mm-tagline { font-size: 0.72rem; }
  .mm-btn { padding: 12px 14px; font-size: 0.92rem; }
  .mm-anim-cloud { font-size: 1.8rem !important; }
  .mm-bird { display: none; }
}

/* Very short screens (landscape mobile): tighten vertical spacing */
@media (max-height: 500px) {
  .mm-card { padding: 14px 18px 10px; }
  .mm-title-row { margin-bottom: 2px; }
  .mm-tagline { margin-bottom: 10px; }
  .mm-buttons { gap: 7px; margin-bottom: 10px; }
  .mm-btn { padding: 10px 14px; }
  .mm-badges { display: none; }
  .mm-version { display: none; }
}

/* Large desktop: show more of the scene */
@media (min-width: 1200px) {
  .mm-photo-bg { background-position: center 30%; }
}

/* Keep old classes for compatibility */
.menu-content { position: relative; z-index: 1; text-align: center; padding: 24px; max-width: 380px; width: 100%; }
.menu-title { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 6px; }
.menu-title span { font-size: 2rem; }
.menu-title h1 { font-size: 1.9rem; font-weight: 800; color: #ffe082; }
.menu-subtitle { color: #a0c8a0; font-size: 0.9rem; margin-bottom: 28px; }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; }
.btn-menu {
  padding: 14px 24px; border-radius: 14px; border: none;
  font-size: 1.05rem; font-weight: 700; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s; letter-spacing: 0.3px;
}
.btn-menu:active { transform: scale(0.96); }
.btn-primary { background: linear-gradient(135deg, #4caf50, #2e7d32); color: #fff; box-shadow: 0 4px 16px rgba(76,175,80,0.4); }
.btn-secondary { background: linear-gradient(135deg, #1976d2, #0d47a1); color: #fff; box-shadow: 0 4px 16px rgba(25,118,210,0.4); }
.btn-tertiary { background: rgba(255,255,255,0.12); color: #ddd; border: 1px solid rgba(255,255,255,0.2); }
.menu-version { color: #666; font-size: 0.75rem; margin-top: 16px; }

/* ============================================================
   NAME SCREEN
   ============================================================ */
#name-screen {
  position: fixed; inset: 0; z-index: 800;
  background: linear-gradient(135deg, #0a1628, #1b3a5c);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
}
.name-content {
  text-align: center; padding: 20px 24px; width: 100%; max-width: 520px;
}
.name-content h2 { font-size: 1.5rem; color: #ffe082; margin-bottom: 10px; }
.name-avatar-preview {
  font-size: 4rem; margin: 8px auto;
  width: 76px; height: 76px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,220,100,0.4);
  box-shadow: 0 0 20px rgba(255,220,100,0.2);
}
.avatar-section-label { font-size: 0.82rem; color: #aaa; margin: 8px 0; }
.avatar-picker {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  margin-bottom: 14px; max-height: 210px; overflow-y: auto;
  background: rgba(255,255,255,0.04); border-radius: 12px; padding: 10px;
}
@media (min-width: 480px) { .avatar-picker { grid-template-columns: repeat(8, 1fr); } }
.avatar-option {
  background: rgba(255,255,255,0.08); border: 2px solid transparent;
  border-radius: 10px; padding: 6px 4px; cursor: pointer;
  transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #ddd;
}
.avatar-option .av-icon { font-size: 1.8rem; display: block; }
.avatar-option .av-name { font-size: 0.58rem; text-align: center; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.avatar-option:hover { background: rgba(255,220,100,0.2); border-color: rgba(255,220,100,0.5); }
.avatar-option.selected { background: rgba(76,175,80,0.3); border-color: #66bb6a; box-shadow: 0 0 10px rgba(76,175,80,0.4); }
.name-content input[type="text"] {
  width: 100%; padding: 12px 16px; margin: 6px 0;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1); color: #fff; font-size: 1rem;
  outline: none; transition: border-color 0.2s;
}
.name-content input[type="text"]:focus { border-color: #66bb6a; }
.name-content input[type="text"]::placeholder { color: rgba(255,255,255,0.38); }
.start-currency-info {
  display: flex; gap: 20px; justify-content: center; align-items: center;
  margin: 10px 0; padding: 10px 16px; background: rgba(255,255,255,0.06); border-radius: 10px;
  font-size: 0.92rem; font-weight: 800;
}
.start-currency-info span:first-child { color: var(--coin); }
.start-currency-info span:last-child { color: var(--tc); }
.name-content .btn-menu { margin-top: 8px; }

/* ============================================================
   TOP BAR
   ============================================================ */
#top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  background: linear-gradient(180deg, rgba(10,15,25,0.98) 0%, rgba(20,28,45,0.92) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 4px 8px;
  padding-top: calc(4px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 6px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  flex-wrap: nowrap; overflow: hidden;
}

.avatar-disp {
  font-size: 1.5rem; min-width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border-radius: 50%;
  cursor: pointer; border: 2px solid rgba(255,220,100,0.3);
  transition: border-color 0.2s; flex-shrink: 0;
}
.avatar-disp:hover { border-color: rgba(255,220,100,0.8); }

#farm-info {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.76rem; min-width: 0; flex-shrink: 1; overflow: hidden;
}
#farm-name-display { color: #ffe082; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
#day-display { color: #a5d6a7; font-weight: 600; white-space: nowrap; }
#season-display { color: #e0f2f1; }
#weather-display { font-size: 1.05rem; }

#resources {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.resource-item {
  display: flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,0.07); border-radius: 18px;
  padding: 3px 8px; font-size: 0.8rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.08); white-space: nowrap;
}
.coin-res { color: var(--coin); border-color: rgba(255,200,0,0.25); background: rgba(255,200,0,0.08); }
.tc-res   { color: var(--tc);   border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.1); }
.res-icon { font-size: 0.95rem; }

#level-area {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
#level-badge {
  background: linear-gradient(135deg, #ff9800, #f44336);
  color: #fff; border-radius: 18px; padding: 3px 9px;
  font-size: 0.78rem; font-weight: 800;
  box-shadow: 0 2px 8px rgba(255,152,0,0.35); white-space: nowrap;
}
#xp-bar-wrap {
  width: 64px; height: 7px;
  background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;
}
#xp-bar { height: 100%; background: linear-gradient(90deg, #ff9800, #fdd835); border-radius: 4px; transition: width 0.5s; }
#xp-bar-text { display: none; }

#time-area { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
#clock-display { color: #e0f7fa; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
#time-bar-wrap { width: 44px; height: 5px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; }
#time-bar { height: 100%; background: linear-gradient(90deg, #1565c0, #e3f2fd); border-radius: 3px; transition: width 0.5s; }

.icon-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 5px 8px; cursor: pointer; font-size: 1.05rem;
  color: #ddd; transition: background 0.15s; flex-shrink: 0;
}
.icon-btn:hover { background: rgba(255,255,255,0.18); }

/* ============================================================
   BOTTOM BAR
   ============================================================ */
#bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: linear-gradient(0deg, rgba(10,15,25,0.99) 0%, rgba(20,28,45,0.95) 100%);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: var(--hud-gap); padding: 4px 5px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
#bottom-bar::-webkit-scrollbar { display: none; }

.hud-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 5px 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px; cursor: pointer; position: relative;
  min-width: var(--hud-btn-min); flex-shrink: 0; transition: background 0.12s, transform 0.1s;
}
.hud-btn:hover, .hud-btn:active { background: rgba(255,255,255,0.16); transform: scale(1.05); }
.hud-icon { font-size: var(--hud-icon-sz); line-height: 1; }
.hud-label { font-size: var(--hud-label-sz); color: #bbb; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; }
.badge {
  position: absolute; top: -4px; right: -4px;
  background: #f44336; color: #fff; border-radius: 10px;
  padding: 1px 5px; font-size: 0.58rem; font-weight: 800;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ============================================================
   TOOL BAR
   ============================================================ */
#tool-bar {
  position: fixed; right: 8px; top: 50%; transform: translateY(-50%);
  z-index: 200;
  background: rgba(12,17,30,0.97);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
  padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tool-label { font-size: 0.52rem; color: #666; font-weight: 700; letter-spacing: 1px; margin-bottom: 2px; }
.tool-btn {
  width: var(--tool-btn-size); height: var(--tool-btn-size);
  border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.07); cursor: pointer;
  font-size: calc(var(--tool-btn-size) * 0.50); display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.tool-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); }
.tool-btn.active {
  background: linear-gradient(135deg, rgba(76,175,80,0.4), rgba(33,150,83,0.4));
  border-color: #66bb6a; box-shadow: 0 0 10px rgba(76,175,80,0.4);
}
#active-seed-display { font-size: 1.15rem; text-align: center; filter: drop-shadow(0 0 4px rgba(255,255,100,0.6)); }

/* ============================================================
   SEED SELECTOR
   ============================================================ */
#seed-selector {
  position: fixed; right: 58px; top: 50%; transform: translateY(-50%);
  z-index: 300;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 12px; max-height: 60vh; overflow-y: auto; min-width: 155px;
}
#seed-selector .panel-title { font-size: 0.82rem; color: #ffe082; margin-bottom: 8px; font-weight: 700; }
.seed-option {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; cursor: pointer;
  color: #eee; font-size: 0.8rem; margin-bottom: 4px; transition: all 0.12s;
}
.seed-option:hover { background: rgba(76,175,80,0.3); border-color: #66bb6a; }
.seed-option.active { background: rgba(76,175,80,0.4); border-color: #66bb6a; color: #a5d6a7; }
.seed-option span { margin-left: auto; color: #888; font-size: 0.76rem; }

/* ============================================================
   TILE ACTION MENU — Mobile-first, touch-friendly
   ============================================================ */
.tile-action-menu {
  position: fixed; z-index: 500;
  background: rgba(10, 16, 28, 0.98);
  border: 1.5px solid rgba(255,220,100,0.4);
  border-radius: 20px; padding: 10px;
  min-width: 200px; max-width: min(290px, 92vw);
  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 24px rgba(255,220,100,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: popIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
  touch-action: manipulation;
  /* Prevent text selection on rapid taps */
  user-select: none; -webkit-user-select: none;
}
.tile-menu-header {
  font-size: 0.82rem; color: #ffe082; font-weight: 700;
  padding: 4px 8px 10px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-menu-btn {
  display: block; width: 100%;
  /* Minimum 44px tall for touch accessibility */
  padding: 12px 16px; min-height: 44px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 11px; color: #eee; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; text-align: left; margin-bottom: 5px;
  transition: background 0.12s, transform 0.1s;
  touch-action: manipulation;
}
.tile-menu-btn:hover:not(:disabled),
.tile-menu-btn:active:not(:disabled) { background: rgba(76,175,80,0.38); border-color: #66bb6a; color: #fff; transform: translateX(3px); }
.tile-menu-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.tile-menu-btn.tile-menu-harvest { background: rgba(255,193,7,0.2); border-color: rgba(255,193,7,0.45); color: #ffe082; }
.tile-menu-btn.tile-menu-harvest:hover,
.tile-menu-btn.tile-menu-harvest:active { background: rgba(255,193,7,0.42); }
.tile-menu-btn.tile-menu-cancel { background: rgba(255,255,255,0.03); color: #666; border-color: rgba(255,255,255,0.06); }
.tile-menu-btn.tile-menu-cancel:hover,
.tile-menu-btn.tile-menu-cancel:active { background: rgba(244,67,54,0.22); color: #ef9a9a; border-color: rgba(244,67,54,0.4); }

/* ============================================================
   BUILDING ACTION MENU — Mobile-first, touch-friendly
   ============================================================ */
.building-action-menu {
  position: fixed; z-index: 500;
  background: rgba(10, 16, 28, 0.98);
  border: 1.5px solid rgba(100,200,255,0.35);
  border-radius: 20px; padding: 10px;
  min-width: 200px; max-width: min(290px, 92vw);
  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 20px rgba(100,200,255,0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: popIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.building-menu-header {
  font-size: 0.86rem; color: #80deea; font-weight: 700;
  padding: 4px 8px 10px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 8px;
}
.building-menu-btn {
  display: block; width: 100%;
  padding: 12px 16px; min-height: 44px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 11px; color: #eee; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; text-align: left; margin-bottom: 5px;
  transition: background 0.12s, transform 0.1s;
  touch-action: manipulation;
}
.building-menu-btn.primary { background: rgba(33,150,243,0.22); border-color: rgba(33,150,243,0.48); color: #90caf9; }
.building-menu-btn:hover:not(.cancel),
.building-menu-btn:active:not(.cancel) { background: rgba(33,150,243,0.42); color: #fff; transform: translateX(3px); }
.building-menu-btn.cancel { background: rgba(255,255,255,0.03); color: #666; border-color: rgba(255,255,255,0.06); }
.building-menu-btn.upgrade { background: rgba(255,160,0,0.18); border-color: rgba(255,180,0,0.45); color: #ffd54f; }
.building-menu-btn.upgrade:hover { background: rgba(255,160,0,0.38); color: #fff; }
.bmenu-level { font-size:0.72rem; background:rgba(100,200,255,0.18); color:#80deea; border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
.bm-max { background:rgba(255,213,0,0.28); color:#ffe000; }

/* ===================== BUILDING UPGRADE PANEL ===================== */
.bupg-currency { text-align:center; font-size:0.88rem; color:#ffe082; padding:4px 0 10px; }
.bupg-level-track {
  display:flex; align-items:center; justify-content:center; gap:4px;
  background:rgba(0,0,0,0.30); border-radius:14px; padding:10px 8px; margin-bottom:14px; flex-wrap:wrap;
}
.bupg-step { display:flex; flex-direction:column; align-items:center; gap:2px; }
.bupg-step-icon { font-size:1.3rem; opacity:0.4; transition:opacity 0.2s; }
.bupg-step-label { font-size:0.64rem; color:#888; }
.bupg-step.done .bupg-step-icon { opacity:0.7; }
.bupg-step.current .bupg-step-icon { opacity:1; filter: drop-shadow(0 0 6px #ffd700); }
.bupg-step.current .bupg-step-label { color:#ffd700; font-weight:700; }
.bupg-step-arrow { color:#555; font-size:0.85rem; line-height:1; margin-top:-8px; }

.bupg-cards { display:flex; gap:10px; margin-bottom:14px; }
@media(max-width:480px){ .bupg-cards { flex-direction:column; } }

.bupg-card {
  flex:1; border-radius:14px; padding:12px 10px;
  background:rgba(255,255,255,0.04); border:1.5px solid rgba(255,255,255,0.10);
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.bupg-card.current-card { border-color:rgba(100,200,100,0.30); background:rgba(0,100,0,0.12); }
.bupg-card.next-card    { border-color:rgba(255,165,0,0.40);  background:rgba(100,60,0,0.16); }
.bupg-card.max-card     { border-color:rgba(255,213,0,0.40);  background:rgba(80,60,0,0.25); align-items:center; justify-content:center; }

.bupg-card-badge { font-size:0.62rem; font-weight:700; letter-spacing:0.08em; color:#66bb6a; }
.next-badge { color:#ffa726; }
.bupg-card-icon { font-size:2rem; text-align:center; }
.bupg-card-name { font-size:0.88rem; font-weight:700; color:#fff; text-align:center; }
.bupg-card-desc { font-size:0.75rem; color:#bbb; line-height:1.4; }
.bupg-bonus-list { margin-top:4px; }
.bupg-bonus-line { font-size:0.76rem; color:#90caf9; padding:1px 0; }

.bupg-cost-box { margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.10); }
.bupg-cost-title { font-size:0.72rem; color:#aaa; margin-bottom:4px; }
.bupg-cost-coin { font-size:0.82rem; font-weight:700; }
.bupg-cost-coin.ok  { color:#ffe082; }
.bupg-cost-coin.err { color:#ef9a9a; }
.bupg-mats-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.bupg-mat { font-size:0.72rem; padding:2px 7px; border-radius:8px; background:rgba(0,0,0,0.30); }
.bupg-mat.have { color:#a5d6a7; border:1px solid rgba(100,200,100,0.30); }
.bupg-mat.need { color:#ef9a9a; border:1px solid rgba(240,100,100,0.30); }

.btn-bupg-upgrade {
  margin-top:10px; width:100%; padding:12px 8px; border-radius:12px;
  background:linear-gradient(135deg, #f57c00, #ff8f00);
  border:none; color:#fff; font-size:0.9rem; font-weight:700;
  cursor:pointer; transition:transform 0.12s, opacity 0.12s;
  touch-action:manipulation;
}
.btn-bupg-upgrade:hover:not(.disabled) { transform:scale(1.03); }
.btn-bupg-upgrade.disabled { background:rgba(100,100,100,0.35); color:#666; cursor:not-allowed; }

.bupg-max-badge { font-size:1.5rem; text-align:center; }
.bupg-max-msg { font-size:0.82rem; color:#ffe082; text-align:center; margin-top:8px; }

.bupg-all-levels { background:rgba(0,0,0,0.25); border-radius:12px; padding:10px 12px; }
.bupg-all-title { font-size:0.78rem; font-weight:700; color:#80deea; margin-bottom:8px; }
.bupg-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:0.8rem; color:#999; }
.bupg-row.row-done { color:#66bb6a; }
.bupg-row.row-curr { color:#fff; font-weight:700; }
.bupg-row-icon { font-size:1rem; flex-shrink:0; }
.bupg-row-name { flex:1; }
.bupg-row-state { flex-shrink:0; }
.building-menu-btn.cancel:hover,
.building-menu-btn.cancel:active { background: rgba(244,67,54,0.2); color: #ef9a9a; }

/* ============================================================
   SEED QUICK SELECT — Mobile-first, touch-friendly
   ============================================================ */
.seed-quick-select {
  position: fixed; z-index: 500;
  background: rgba(10, 16, 28, 0.98);
  border: 1.5px solid rgba(100,220,100,0.35);
  border-radius: 20px; padding: 12px;
  min-width: 240px; max-width: min(320px, 94vw);
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: popIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.sq-title { font-size: 0.84rem; color: #a5d6a7; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 10px; text-align: center; }
.sq-empty { color: #888; font-size: 0.82rem; padding: 12px; text-align: center; }
.sq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.sq-seed-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px; min-height: 64px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  cursor: pointer; transition: background 0.12s, transform 0.1s;
  font-size: 1.25rem; color: #eee;
  touch-action: manipulation;
}
.sq-seed-btn:hover,
.sq-seed-btn:active { background: rgba(76,175,80,0.38); border-color: #66bb6a; transform: scale(1.05); }
.sq-name { font-size: 0.65rem; color: #bbb; text-align: center; line-height: 1.2; }
.sq-qty { font-size: 0.65rem; color: #ffe082; font-weight: 700; }
.sq-cancel {
  width: 100%; padding: 10px; min-height: 44px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; color: #888; font-size: 0.84rem;
  cursor: pointer; transition: background 0.12s;
  touch-action: manipulation;
}
.sq-cancel:hover,
.sq-cancel:active { background: rgba(244,67,54,0.2); color: #ef9a9a; }

/* ============================================================
   PLACING / MOVING HINT
   ============================================================ */
#placing-hint {
  position: fixed; top: 68px; left: 50%; transform: translateX(-50%);
  z-index: 350;
  background: rgba(255,193,7,0.96); color: #1a1a00;
  font-size: 0.8rem; font-weight: 700;
  padding: 8px 18px; border-radius: 20px;
  box-shadow: 0 4px 16px rgba(255,193,7,0.5);
  pointer-events: none; text-align: center;
  animation: bounceDown 0.3s ease; white-space: nowrap;
}

/* ============================================================
   PANEL OVERLAY
   ============================================================ */
#panel-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#active-panel {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 20px 20px 0 0; width: 100%; max-width: 600px;
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.8);
}
#panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--panel-border); flex-shrink: 0;
}
#panel-title { font-size: 1.02rem; font-weight: 800; color: #ffe082; }
.btn-close {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 5px 11px; cursor: pointer; color: #ddd; font-size: 1rem;
  transition: background 0.15s;
}
.btn-close:hover { background: rgba(244,67,54,0.3); color: #fff; }
#panel-body { overflow-y: auto; padding: 12px 14px; flex: 1; }

/* ============================================================
   SHARED PANEL COMPONENTS
   ============================================================ */
.panel-currency-row {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 10px; padding: 8px 12px;
  background: rgba(255,255,255,0.04); border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
}
.cur-koin { color: var(--coin); font-weight: 800; font-size: 0.88rem; }
.cur-tc   { color: var(--tc);   font-weight: 800; font-size: 0.88rem; }

.section-title {
  font-size: 0.8rem; font-weight: 700; color: #ffe082;
  margin: 10px 0 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.no-items { color: #888; font-size: 0.86rem; text-align: center; padding: 24px 16px; line-height: 1.6; }

/* ============================================================
   SHOP PANEL
   ============================================================ */
.shop-tabs {
  display: flex; gap: 4px; flex-wrap: nowrap;
  margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  padding: 6px 11px; border-radius: 18px; font-size: 0.76rem; font-weight: 700;
  border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.06);
  color: #bbb; cursor: pointer; white-space: nowrap; transition: all 0.15s; flex-shrink: 0;
}
.shop-tab.active { background: rgba(76,175,80,0.38); border-color: #66bb6a; color: #a5d6a7; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.shop-item {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 10px; text-align: center; transition: background 0.15s;
}
.shop-item:hover { background: rgba(255,255,255,0.09); }
.shop-item.locked { opacity: 0.5; }
.shop-item.premium-item { border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.06); }
.shop-item-icon { font-size: 2rem; margin-bottom: 4px; display: block; }
.shop-item-icon.premium-glow { filter: drop-shadow(0 0 8px rgba(167,139,250,0.8)); }
.shop-item-name { font-size: 0.78rem; font-weight: 700; color: #eee; margin-bottom: 3px; }
.shop-item-desc { font-size: 0.67rem; color: #999; margin-bottom: 5px; line-height: 1.35; }
.shop-item-buff { font-size: 0.67rem; color: #90caf9; padding: 2px 0; }
.shop-item-price { color: var(--coin); font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; }
.shop-item-price.tc-price { color: var(--tc); }
.shop-item-price.unmet { color: #ef5350; }
.shop-item-unlock { color: #f44336; font-size: 0.72rem; padding: 4px 0; }
.shop-buy-btn {
  width: 100%; padding: 6px 10px; border-radius: 8px;
  background: linear-gradient(135deg, #4caf50, #2e7d32); color: #fff;
  border: none; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  transition: transform 0.1s, opacity 0.1s;
}
.shop-buy-btn:hover:not(:disabled) { transform: scale(1.03); }
.shop-buy-btn.tc-btn { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.shop-buy-btn.disabled, .shop-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.premium-tag {
  display: inline-block; background: linear-gradient(90deg, #7c3aed, #a78bfa);
  color: #fff; border-radius: 5px; padding: 1px 5px; font-size: 0.58rem; font-weight: 800;
  vertical-align: middle; margin-left: 3px;
}
.tc-price-label { color: var(--tc); }
.premium-info-box {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.3);
  border-radius: 10px; padding: 10px; margin-bottom: 10px;
  font-size: 0.8rem; color: #c4b5fd; line-height: 1.5; grid-column: 1 / -1;
}
.shop-item-meta { font-size: 0.64rem; color: #aaa; margin-bottom: 2px; line-height: 1.3; }
.shop-item-meta2 { font-size: 0.63rem; color: #88aacc; margin-bottom: 4px; }
.rarity-badge {
  display: inline-block; border-radius: 4px; padding: 1px 5px;
  font-size: 0.55rem; font-weight: 800; vertical-align: middle; margin-left: 2px;
}
.rarity-badge.langka { background: linear-gradient(90deg,#1e88e5,#42a5f5); color:#fff; }
.rarity-badge.premium { background: linear-gradient(90deg,#f9a825,#ffd54f); color:#333; }
.premium-info-box > span { font-size: 1.4rem; flex-shrink: 0; }

/* ============================================================
   INVENTORY PANEL
   ============================================================ */
.inv-barn-info {
  font-size: 0.78rem; color: #ffe082; font-weight: 700; margin-bottom: 4px; text-align: center;
}
.inv-capacity { margin-bottom: 10px; }
.inv-capacity span { font-size: 0.73rem; color: #aaa; }
.inv-cap-bar-wrap { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.inv-cap-bar { height: 100%; border-radius: 3px; transition: width 0.4s; }
.inv-category-label {
  font-size: 0.67rem; font-weight: 800; color: #ffe082; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 8px 0 3px; grid-column: 1 / -1;
}
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.inv-slot {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 8px 4px; text-align: center; cursor: pointer; transition: all 0.12s;
}
.inv-slot:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,220,100,0.4); transform: scale(1.04); }
.item-icon { font-size: 1.55rem; }
.item-name { font-size: 0.6rem; color: #ccc; margin-top: 2px; line-height: 1.2; }
.item-qty { font-size: 0.7rem; color: var(--gold); font-weight: 700; }
.item-price { font-size: 0.56rem; color: #888; }
.inv-empty { color: #888; font-size: 0.84rem; text-align: center; padding: 24px; grid-column: 1/-1; }

/* ============================================================
   ORDERS PANEL
   ============================================================ */
.orders-tip {
  font-size: 0.74rem; color: #a78bfa; margin-bottom: 10px;
  padding: 6px 10px; background: rgba(124,58,237,0.09); border-radius: 8px;
}
.order-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 12px; margin-bottom: 8px;
}
.order-card.completed { opacity: 0.5; }
.order-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 6px; }
.order-name { font-size: 0.86rem; font-weight: 700; color: #ffe082; }
.order-reward { font-size: 0.72rem; color: #a5d6a7; text-align: right; flex-shrink: 0; }
.order-items { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.order-item { font-size: 0.76rem; padding: 3px 8px; border-radius: 18px; }
.order-item.met { background: rgba(76,175,80,0.22); color: #a5d6a7; }
.order-item.unmet { background: rgba(244,67,54,0.18); color: #ef9a9a; }
.order-complete-btn {
  width: 100%; padding: 9px; border-radius: 9px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14);
  color: #bbb; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.order-complete-btn.ready { background: linear-gradient(135deg, #4caf50, #2e7d32); color: #fff; border-color: #4caf50; }
.order-complete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.order-done { color: #66bb6a; font-size: 0.8rem; margin-top: 6px; }

/* ============================================================
   MARKET PANEL
   ============================================================ */
.market-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.market-tab {
  flex: 1; padding: 7px; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.06);
  color: #bbb; cursor: pointer; transition: all 0.15s;
}
.market-tab.active { background: rgba(76,175,80,0.33); border-color: #66bb6a; color: #a5d6a7; }
.sell-all-btn {
  width: 100%; padding: 11px; border-radius: 10px; margin-bottom: 10px;
  background: linear-gradient(135deg, #ff9800, #f57c00); color: #fff;
  border: none; font-size: 0.86rem; font-weight: 800; cursor: pointer;
}
.market-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; margin-bottom: 5px;
}
.market-item.masakan-item { border-color: rgba(255,152,0,0.28); background: rgba(255,152,0,0.04); }
.market-item-icon { font-size: 1.45rem; flex-shrink: 0; }
.market-item-info { flex: 1; min-width: 0; }
.market-item-name { font-size: 0.8rem; font-weight: 700; color: #eee; }
.market-item-price { font-size: 0.7rem; color: var(--coin); }
.market-btns { display: flex; gap: 4px; flex-shrink: 0; }
.market-sell-btn {
  padding: 5px 9px; border-radius: 7px; font-size: 0.7rem; font-weight: 700;
  background: rgba(76,175,80,0.28); border: 1px solid rgba(76,175,80,0.38); color: #a5d6a7;
  cursor: pointer; transition: background 0.12s;
}
.market-sell-btn:hover { background: rgba(76,175,80,0.5); }
.price-category-label {
  font-size: 0.7rem; font-weight: 800; color: #ffe082; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 8px 4px 4px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 6px;
}

/* ============================================================
   ANIMALS PANEL
   ============================================================ */
.animal-buffs-row {
  background: rgba(33,150,243,0.08); border: 1px solid rgba(33,150,243,0.2);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 10px;
}
.animal-buff-badge {
  display: inline-block; background: rgba(33,150,243,0.18); color: #90caf9;
  border-radius: 18px; padding: 2px 7px; font-size: 0.68rem; margin: 2px;
}
.animal-grid { display: flex; flex-direction: column; gap: 10px; }
.animal-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 12px;
}
.animal-card.adult { border-color: rgba(76,175,80,0.28); }
.animal-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.animal-stage-icon { font-size: 2.2rem; }
.animal-name { font-size: 0.88rem; font-weight: 700; color: #eee; }
.animal-stage-badge {
  display: inline-block; border-radius: 18px; padding: 1px 8px;
  font-size: 0.62rem; font-weight: 800; color: #fff; margin-left: 5px; vertical-align: middle;
}
.animal-hearts { font-size: 0.78rem; margin-top: 2px; }
.animal-stats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.stat-row { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; }
.stat-row span:first-child { min-width: 66px; color: #aaa; }
.stat-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.stat-bar { height: 100%; border-radius: 3px; transition: width 0.4s; }
.stat-row span:last-child { min-width: 28px; text-align: right; color: #bbb; }
.animal-growth-label { font-size: 0.7rem; color: #aaa; margin-bottom: 3px; }
.animal-growth-bar-wrap {
  height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;
  position: relative; margin-bottom: 4px;
}
.animal-growth-bar { height: 100%; background: linear-gradient(90deg, #ff9800, #fdd835); border-radius: 4px; transition: width 0.4s; }
.animal-growth-pct { position: absolute; right: 4px; top: -2px; font-size: 0.62rem; color: #ffe082; }
.produce-bar-wrap { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.produce-bar { height: 100%; background: linear-gradient(90deg, #4fc3f7, #0288d1); border-radius: 3px; transition: width 0.4s; }
.produce-time { font-size: 0.7rem; color: #90caf9; margin-bottom: 6px; }
.animal-collect-btn {
  width: 100%; padding: 8px; border-radius: 9px;
  background: linear-gradient(135deg, #ff9800, #f57c00); color: #fff;
  border: none; font-size: 0.8rem; font-weight: 700; cursor: pointer; margin-bottom: 6px;
  animation: pulse 1.5s infinite;
}
.feed-section { margin-top: 6px; }
.feed-label { font-size: 0.7rem; color: #aaa; margin-bottom: 4px; }
.feed-options { display: flex; flex-wrap: wrap; gap: 4px; }
.feed-btn {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 1.05rem; transition: all 0.12s;
}
.feed-btn span { font-size: 0.6rem; color: #ffe082; margin-top: 1px; }
.feed-btn:hover { background: rgba(76,175,80,0.32); border-color: #66bb6a; }
.animal-buff-note {
  font-size: 0.68rem; color: #a78bfa; margin-top: 6px;
  padding: 4px 8px; background: rgba(124,58,237,0.1); border-radius: 6px;
}

/* ============================================================
   COOKING PANEL
   ============================================================ */
.cooking-tip {
  font-size: 0.76rem; color: #aaa; padding: 7px 10px;
  background: rgba(255,152,0,0.07); border: 1px solid rgba(255,152,0,0.2);
  border-radius: 8px; margin-bottom: 10px; line-height: 1.5;
}
.cooking-queue-section { margin-bottom: 12px; }
.cooking-queue-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 5px;
}
.cooking-queue-item.ready { border-color: rgba(76,175,80,0.5); background: rgba(76,175,80,0.08); animation: pulse 1.5s infinite; }
.cq-icon { font-size: 1.55rem; flex-shrink: 0; }
.cq-info { flex: 1; min-width: 0; }
.cq-name { font-size: 0.8rem; font-weight: 700; color: #eee; margin-bottom: 3px; }
.cq-ready { font-size: 0.74rem; color: #66bb6a; font-weight: 800; }
.cq-bar-wrap { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-bottom: 2px; }
.cq-bar { height: 100%; background: linear-gradient(90deg, #ff9800, #fdd835); border-radius: 3px; transition: width 0.5s; }
.cq-time { font-size: 0.68rem; color: #aaa; }
.cq-collect-btn {
  padding: 6px 12px; border-radius: 8px;
  background: linear-gradient(135deg, #4caf50, #2e7d32); color: #fff;
  border: none; font-size: 0.76rem; font-weight: 700; cursor: pointer;
}
.recipe-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 10px; margin-bottom: 7px;
}
.recipe-card.can-cook { border-color: rgba(76,175,80,0.38); }
.recipe-card.locked { opacity: 0.5; }
.recipe-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px; }
.recipe-icon { font-size: 1.75rem; flex-shrink: 0; }
.recipe-name { font-size: 0.84rem; font-weight: 700; color: #ffe082; }
.recipe-sell { font-size: 0.7rem; color: #a5d6a7; margin-top: 1px; }
.recipe-time { font-size: 0.68rem; color: #aaa; }
.tc-bonus-badge {
  display: inline-block; background: linear-gradient(90deg, #7c3aed, #a78bfa);
  color: #fff; border-radius: 5px; padding: 1px 5px; font-size: 0.6rem; font-weight: 800;
  vertical-align: middle; margin-left: 3px;
}
.recipe-inputs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.recipe-ing { font-size: 0.7rem; padding: 2px 7px; border-radius: 10px; }
.recipe-ing.met { background: rgba(76,175,80,0.22); color: #a5d6a7; }
.recipe-ing.unmet { background: rgba(244,67,54,0.18); color: #ef9a9a; }
.recipe-locked { font-size: 0.73rem; color: #f44336; padding: 4px 0; }
.recipe-cook-btn {
  width: 100%; padding: 7px; border-radius: 8px;
  background: linear-gradient(135deg, #4caf50, #2e7d32); color: #fff;
  border: none; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: transform 0.1s;
}
.recipe-cook-btn:hover:not(.disabled):not(:disabled) { transform: scale(1.02); }
.recipe-cook-btn.disabled, .recipe-cook-btn:disabled {
  background: rgba(255,255,255,0.09); color: #888; cursor: not-allowed; transform: none;
}

/* ============================================================
   BARN UPGRADE PANEL
   ============================================================ */
.barn-current {
  text-align: center; padding: 14px;
  background: rgba(255,220,100,0.07); border: 1px solid rgba(255,220,100,0.2);
  border-radius: 12px; margin-bottom: 10px;
}
.barn-cur-icon { font-size: 2.5rem; }
.barn-cur-name { font-size: 0.88rem; font-weight: 800; color: #ffe082; margin-top: 4px; }
.barn-cur-cap { font-size: 0.76rem; color: #aaa; margin-top: 2px; }
.barn-upg-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 10px; margin-bottom: 8px;
}
.barn-upg-card.done { opacity: 0.52; }
.barn-upg-card.available { border-color: rgba(255,220,100,0.38); }
.barn-upg-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.barn-upg-icon { font-size: 1.75rem; flex-shrink: 0; }
.barn-upg-name { font-size: 0.86rem; font-weight: 700; color: #ffe082; }
.barn-upg-desc { font-size: 0.7rem; color: #aaa; margin-top: 2px; }
.barn-done-badge {
  margin-left: auto; background: rgba(76,175,80,0.28); color: #66bb6a;
  border-radius: 18px; padding: 2px 9px; font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
.barn-upg-cost { font-size: 0.76rem; color: #ccc; margin-bottom: 7px; }
.barn-upg-cost .cost-unmet { color: #ef5350; }
.barn-upg-btn {
  width: 100%; padding: 8px; border-radius: 9px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: #bbb; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.barn-upg-btn.active { background: linear-gradient(135deg, #ffd600, #ff9800); color: #1a1200; border-color: #ffd600; }
.barn-upg-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.barn-access-btn {
  width: 100%; padding: 10px; border-radius: 10px; margin-bottom: 12px;
  background: rgba(255,220,100,0.12); border: 1px solid rgba(255,220,100,0.28);
  color: #ffe082; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.barn-access-btn:hover { background: rgba(255,220,100,0.28); }

/* ============================================================
   BUILD & UPGRADES PANEL
   ============================================================ */
.build-tip {
  font-size: 0.76rem; color: #90caf9; padding: 7px 10px;
  background: rgba(33,150,243,0.07); border: 1px solid rgba(33,150,243,0.2);
  border-radius: 8px; margin-bottom: 10px;
}
.upg-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px; margin-bottom: 8px;
}
.upg-card.maxed { opacity: 0.52; }
.upg-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px; }
.upg-icon { font-size: 1.75rem; flex-shrink: 0; }
.upg-name { font-size: 0.86rem; font-weight: 700; color: #ffe082; }
.upg-desc { font-size: 0.7rem; color: #aaa; margin-top: 2px; }
.upg-stars { margin-top: 4px; font-size: 0.78rem; }
.star-filled { color: #fdd835; }
.star-empty { color: #555; filter: grayscale(1); }
.upg-level { font-size: 0.68rem; color: #888; margin-left: 4px; }
.upg-maxed { color: #66bb6a; font-size: 0.78rem; padding: 4px 0; }
.upg-btn {
  width: 100%; padding: 7px; border-radius: 8px;
  background: linear-gradient(135deg, #1976d2, #0d47a1); color: #fff;
  border: none; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: transform 0.1s;
}
.upg-btn:hover:not(.disabled):not(:disabled) { transform: scale(1.01); }
.upg-btn.disabled, .upg-btn:disabled { background: rgba(255,255,255,0.08); color: #888; cursor: not-allowed; }

/* ============================================================
   QUESTS PANEL
   ============================================================ */
.quest-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px; margin-bottom: 7px;
}
.quest-card.completed { opacity: 0.5; }
.quest-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.quest-icon { font-size: 1.45rem; flex-shrink: 0; }
.quest-info { flex: 1; min-width: 0; }
.quest-name { font-size: 0.84rem; font-weight: 700; color: #ffe082; }
.quest-desc { font-size: 0.7rem; color: #aaa; }
.quest-reward { margin-left: auto; text-align: right; font-size: 0.7rem; color: #a5d6a7; white-space: nowrap; }
.quest-progress-wrap { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.quest-progress-bar { height: 100%; background: linear-gradient(90deg, #ff9800, #fdd835); border-radius: 3px; }
.quest-progress-text { font-size: 0.68rem; color: #888; }
.achievement-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 5px;
}
.achievement-card.earned { border-color: rgba(255,215,0,0.28); background: rgba(255,215,0,0.05); }
.ach-icon { font-size: 1.45rem; flex-shrink: 0; }
.ach-info { flex: 1; }
.ach-name { font-size: 0.8rem; font-weight: 700; color: #ffe082; }
.ach-desc { font-size: 0.68rem; color: #aaa; }
.ach-earned { margin-left: auto; font-size: 1.05rem; }

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
#notification-area {
  position: fixed; top: 68px; right: 8px;
  z-index: 800; display: flex; flex-direction: column; gap: 5px;
  pointer-events: none; max-width: 300px;
}
.notification {
  padding: 8px 13px; border-radius: 10px;
  font-size: 0.78rem; font-weight: 600; color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: none; word-break: break-word;
}
.notification-success { background: rgba(27,94,32,0.97); border-left: 3px solid #66bb6a; }
.notification-error   { background: rgba(183,28,28,0.97); border-left: 3px solid #ef5350; }
.notification-warn    { background: rgba(230,81,0,0.97);  border-left: 3px solid #ffa726; }
.notification-info    { background: rgba(13,71,161,0.97); border-left: 3px solid #42a5f5; }

/* Floating rewards */
#floating-rewards { position: fixed; inset: 0; pointer-events: none; z-index: 700; overflow: hidden; }
.floating-reward {
  position: absolute; font-size: 1.15rem; font-weight: 900;
  animation: floatUp 1.9s cubic-bezier(0.22,1,0.36,1) forwards;
  white-space: nowrap; pointer-events: none;
  letter-spacing: 0.02em;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}
.floating-coin    { color: var(--coin);    text-shadow: 0 0 12px rgba(255,200,0,0.9), 0 1px 4px rgba(180,120,0,0.7); }
.floating-tc      { color: var(--tc);      text-shadow: 0 0 12px rgba(167,139,250,0.9), 0 1px 4px rgba(100,60,200,0.6); }
.floating-item    { color: #fff;           text-shadow: 0 0 10px rgba(255,255,255,0.7), 0 1px 4px rgba(0,0,0,0.6); }
.floating-spend   { color: #ff6060;        text-shadow: 0 0 10px rgba(244,67,54,0.8), 0 1px 4px rgba(180,0,0,0.5); }
.floating-success { color: #88ee90;        text-shadow: 0 0 12px rgba(76,200,80,0.9), 0 1px 4px rgba(0,100,0,0.5); }
.floating-xp      { color: #ffe082;        text-shadow: 0 0 12px rgba(255,200,0,0.8), 0 1px 4px rgba(180,120,0,0.6); }

/* ============================================================
   CONTEXT MENU
   ============================================================ */
#context-menu {
  position: fixed; z-index: 700;
  background: rgba(18,22,38,0.99); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; overflow: hidden; min-width: 165px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.75);
}
.ctx-header { padding: 7px 12px; font-size: 0.76rem; color: #888; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ctx-item { padding: 9px 14px; font-size: 0.8rem; cursor: pointer; color: #eee; transition: background 0.1s; }
.ctx-item:hover { background: rgba(76,175,80,0.22); color: #fff; }
.ctx-item-info { color: var(--tc); cursor: default; font-size: 0.73rem; }

/* ============================================================
   DAILY REWARD
   ============================================================ */
#daily-reward {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
}
.reward-content {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 20px; padding: 28px 24px; text-align: center; max-width: 280px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8); animation: popIn 0.35s ease;
}
.reward-icon { font-size: 3.5rem; margin-bottom: 10px; }
.reward-content h3 { font-size: 1.2rem; color: #ffe082; margin-bottom: 6px; }
.reward-content p { font-size: 0.84rem; color: #aaa; margin-bottom: 12px; }
.reward-items { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.reward-items span {
  font-size: 0.88rem; font-weight: 800; padding: 5px 14px;
  background: rgba(255,255,255,0.1); border-radius: 18px; color: #ffe082;
}

/* ============================================================
   LEVEL UP
   ============================================================ */
#level-up-screen {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,0.82); display: flex; align-items: center; justify-content: center;
}
.level-up-content {
  background: var(--panel-bg); border: 1px solid rgba(255,200,0,0.4);
  border-radius: 20px; padding: 28px 24px; text-align: center; max-width: 300px;
  box-shadow: 0 8px 40px rgba(255,200,0,0.3);
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lu-star { font-size: 3rem; animation: spin 1s linear infinite; display: inline-block; }
.level-up-content h2 { font-size: 1.6rem; color: #fdd835; font-weight: 900; margin: 8px 0; }
.lu-level { font-size: 1.05rem; color: #ffe082; margin-bottom: 12px; }
#lu-unlocks { margin-bottom: 14px; font-size: 0.82rem; }

/* ============================================================
   TUTORIAL
   ============================================================ */
#tutorial-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.48);
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.tutorial-box {
  background: rgba(12,18,32,0.99); border: 1.5px solid rgba(255,220,100,0.4);
  border-radius: 20px 20px 0 0; padding: 18px 20px;
  width: 100%; max-width: 500px; pointer-events: all;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.7);
}
.tut-step-indicator { display: flex; gap: 5px; margin-bottom: 10px; justify-content: center; }
.tut-dot { width: 6px; height: 6px; background: rgba(255,255,255,0.2); border-radius: 50%; transition: background 0.2s; }
.tut-dot.active { background: #ffe082; }
.tut-icon { font-size: 2.1rem; text-align: center; margin-bottom: 5px; }
.tutorial-box h3 { font-size: 0.98rem; font-weight: 800; color: #ffe082; text-align: center; margin-bottom: 6px; }
.tutorial-box p { font-size: 0.82rem; color: #ccc; text-align: center; line-height: 1.6; margin-bottom: 12px; }
.tut-buttons { display: flex; gap: 8px; }
.btn-tut-skip {
  flex: 1; padding: 9px; border-radius: 10px; font-size: 0.84rem;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  color: #888; cursor: pointer;
}
.btn-tut-next {
  flex: 2; padding: 9px; border-radius: 10px; font-size: 0.84rem; font-weight: 700;
  background: linear-gradient(135deg, #4caf50, #2e7d32); color: #fff; border: none; cursor: pointer;
}
.btn-tut-next:active { transform: scale(0.97); }

/* ============================================================
   SETTINGS PANEL
   ============================================================ */
#settings-panel {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
}
.settings-content {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 20px; padding: 22px; max-width: 340px; width: 92%;
  max-height: 90vh; overflow-y: auto;
}
.settings-content h2 { font-size: 1.05rem; color: #ffe082; margin-bottom: 16px; text-align: center; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.setting-row label { font-size: 0.84rem; color: #ddd; }
.setting-controls { display: flex; align-items: center; gap: 8px; }
.toggle-wrap { position: relative; }
.toggle-wrap input[type="checkbox"] { display: none; }
.toggle {
  display: block; width: 38px; height: 20px; background: #555;
  border-radius: 10px; cursor: pointer; transition: background 0.25s; position: relative;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.25s;
}
.toggle-wrap input:checked + .toggle { background: #4caf50; }
.toggle-wrap input:checked + .toggle::after { transform: translateX(18px); }
.vol-slider { width: 78px; accent-color: #4caf50; }
.settings-content select {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px; padding: 5px 10px; color: #eee; font-size: 0.84rem;
}
.settings-btns { display: flex; gap: 10px; margin-top: 16px; }
.settings-btns button { flex: 1; }

/* ============================================================
   MOBILE HINT
   ============================================================ */
#mobile-zoom-hint {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%);
  z-index: 300; background: rgba(0,0,0,0.72); color: #aaa;
  padding: 6px 14px; border-radius: 18px; font-size: 0.73rem;
  pointer-events: none; animation: fadeInOut 4.2s ease forwards; white-space: nowrap;
}

/* ============================================================
   AVATAR MODAL (IN-GAME)
   ============================================================ */
.avatar-modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.78); display: flex; align-items: center; justify-content: center;
}
.avatar-modal {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 18px; padding: 20px; max-width: 400px; width: 92%;
  max-height: 85vh; overflow-y: auto; animation: popIn 0.25s ease;
}
.avatar-modal h3 { font-size: 0.98rem; color: #ffe082; margin-bottom: 12px; text-align: center; }
.avatar-modal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes popIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes floatUp {
  0%   { transform: translateY(0)    scale(1);   opacity: 1; }
  80%  { transform: translateY(-60px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-90px) scale(0.9); opacity: 0; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%  { transform: scale(1.04); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes slideInNotif {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes bounceDown {
  from { transform: translateX(-50%) translateY(-10px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes fadeInOut {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================================
   STAMINA DISPLAY (Mining)
   ============================================================ */
.stamina-res { color: #ffab40 !important; }
.stamina-res .res-icon { color: #ff8f00; }

/* ============================================================
   MARKET EVENT TICKER & BANNER
   ============================================================ */
#market-event-ticker {
  position: fixed; top: 52px; left: 0; right: 0; z-index: 500;
  background: linear-gradient(90deg, #b71c1c, #d32f2f, #b71c1c);
  color: #fff; font-size: 0.78rem; font-weight: 700;
  padding: 4px 16px; text-align: center;
  animation: ticker-scroll 0.3s ease-in;
  letter-spacing: 0.5px;
}
#market-event-banner {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  z-index: 600; width: calc(100% - 32px); max-width: 420px;
}
.meb-inner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(20,30,50,0.95), rgba(40,20,60,0.95));
  border: 1.5px solid rgba(255,200,50,0.4);
  border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  animation: slide-down 0.3s ease;
}
.meb-icon { font-size: 2rem; flex-shrink: 0; }
.meb-text { flex: 1; }
.meb-title { font-size: 0.9rem; font-weight: 800; color: #ffe082; }
.meb-desc { font-size: 0.78rem; color: #b0c4de; margin-top: 2px; }
.meb-close { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 0.8rem; }
@keyframes slide-down { from{opacity:0;transform:translateX(-50%) translateY(-10px);} to{opacity:1;transform:translateX(-50%) translateY(0);} }
@keyframes ticker-scroll { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} }

/* ============================================================
   PANEL TAMBANG (MINING)
   ============================================================ */
.mining-area-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px;
}
.mining-area-card {
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 10px; cursor: pointer;
  transition: all 0.15s; text-align: center;
}
.mining-area-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,180,50,0.4); transform: translateY(-2px); }
.mining-area-card.active { border-color: #ffa726; background: rgba(255,167,38,0.12); }
.mining-area-card.locked { opacity: 0.5; cursor: not-allowed; }
.mining-area-icon { font-size: 2rem; margin-bottom: 4px; }
.mining-area-name { font-size: 0.8rem; font-weight: 700; color: #eee; }
.mining-area-desc { font-size: 0.65rem; color: #888; margin-top: 2px; }
.mining-area-lock { font-size: 0.65rem; color: #ef5350; margin-top: 2px; }

.stamina-bar-section { margin-bottom: 12px; }
.stamina-label { font-size: 0.78rem; color: #ffab40; font-weight: 700; margin-bottom: 4px; }
.stamina-bar-wrap { height: 10px; background: rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden; }
.stamina-bar-fill { height: 100%; background: linear-gradient(90deg, #ff8f00, #ffd54f); border-radius: 6px; transition: width 0.3s; }

.mining-btn-row { display: flex; gap: 8px; margin-bottom: 14px; }
.mine-btn {
  flex: 1; padding: 12px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #5d4037, #8d6e63); color: #fff;
  font-size: 0.9rem; font-weight: 800; cursor: pointer;
  transition: all 0.15s;
}
.mine-btn:hover:not(:disabled) { transform: scale(1.03); filter: brightness(1.1); }
.mine-btn:active:not(:disabled) { transform: scale(0.97); }
.mine-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mine-btn.gold { background: linear-gradient(135deg, #f57f17, #ffa726); }
.mine-btn.diamond { background: linear-gradient(135deg, #0d47a1, #1565c0); }

.mining-result-box {
  background: rgba(0,0,0,0.3); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 12px; min-height: 50px;
}
.mining-result-title { font-size: 0.78rem; color: #aaa; margin-bottom: 6px; font-weight: 700; }
.mining-result-items { display: flex; flex-wrap: wrap; gap: 6px; }
.mining-result-item {
  background: rgba(255,255,255,0.08); border-radius: 8px; padding: 4px 8px;
  font-size: 0.78rem; display: flex; align-items: center; gap: 4px;
}
.mining-result-item.rare { background: rgba(63,81,181,0.25); border: 1px solid rgba(63,81,181,0.4); }
.mining-result-item.premium { background: rgba(124,58,237,0.25); border: 1px solid rgba(124,58,237,0.4); }

.mining-treasure-btn {
  width: 100%; padding: 10px; border-radius: 10px; border: 2px dashed rgba(255,215,0,0.4);
  background: rgba(255,215,0,0.08); color: #ffd700; font-weight: 700;
  font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.mining-treasure-btn:hover { background: rgba(255,215,0,0.15); border-color: rgba(255,215,0,0.6); }

.smelting-section { margin-top: 14px; }
.smelting-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.smelting-card {
  background: rgba(255,87,34,0.1); border: 1px solid rgba(255,87,34,0.25);
  border-radius: 10px; padding: 8px; cursor: pointer; transition: all 0.15s;
}
.smelting-card:hover:not(.locked) { background: rgba(255,87,34,0.18); transform: scale(1.02); }
.smelting-card.locked { opacity: 0.5; cursor: not-allowed; }
.smelting-icon { font-size: 1.6rem; margin-bottom: 3px; }
.smelting-name { font-size: 0.75rem; font-weight: 700; color: #eee; }
.smelting-req { font-size: 0.62rem; color: #aaa; margin-top: 2px; }
.smelting-price { font-size: 0.72rem; color: var(--coin); margin-top: 2px; }

.crafting-section { margin-top: 14px; }
.crafting-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.crafting-card {
  background: rgba(0,188,212,0.1); border: 1px solid rgba(0,188,212,0.25);
  border-radius: 10px; padding: 8px; cursor: pointer; transition: all 0.15s;
}
.crafting-card:hover:not(.locked) { background: rgba(0,188,212,0.18); transform: scale(1.02); }
.crafting-card.locked { opacity: 0.5; cursor: not-allowed; }

.smelting-queue-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.06); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px;
}
.smq-icon { font-size: 1.4rem; }
.smq-info { flex: 1; }
.smq-bar-wrap { height: 6px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.smq-bar { height: 100%; background: linear-gradient(90deg, #ff7043, #ffd54f); border-radius: 4px; }
.smq-collect { background: linear-gradient(135deg, #43a047, #66bb6a); border: none; color: #fff; border-radius: 8px; padding: 4px 10px; font-size: 0.75rem; font-weight: 700; cursor: pointer; }

/* ============================================================
   PANEL PELABUHAN & PELAYARAN
   ============================================================ */
.sailing-hero {
  background: linear-gradient(135deg, rgba(13,71,161,0.4), rgba(21,101,192,0.3));
  border: 1px solid rgba(33,150,243,0.3); border-radius: 12px;
  padding: 12px; margin-bottom: 12px; text-align: center;
}
.sailing-hero-icon { font-size: 3rem; margin-bottom: 4px; }
.sailing-hero-title { font-size: 1rem; font-weight: 800; color: #90caf9; }
.sailing-hero-desc { font-size: 0.75rem; color: #78909c; margin-top: 2px; }

.ship-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.ship-card {
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px; cursor: pointer; transition: all 0.15s; position: relative;
}
.ship-card.owned { border-color: rgba(33,150,243,0.5); background: rgba(33,150,243,0.1); }
.ship-card.active-ship { border-color: #42a5f5; box-shadow: 0 0 12px rgba(66,165,245,0.3); }
.ship-card.locked { opacity: 0.5; cursor: not-allowed; }
.ship-icon { font-size: 2.2rem; margin-bottom: 4px; }
.ship-name { font-size: 0.8rem; font-weight: 700; color: #eee; }
.ship-stats { font-size: 0.63rem; color: #90caf9; margin-top: 3px; line-height: 1.5; }
.ship-buy-btn {
  width: 100%; margin-top: 6px; padding: 5px; border-radius: 8px;
  background: linear-gradient(135deg, #1565c0, #1976d2); border: none;
  color: #fff; font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
.ship-select-badge {
  position: absolute; top: 5px; right: 5px;
  background: #42a5f5; color: #fff; border-radius: 6px;
  font-size: 0.55rem; font-weight: 800; padding: 2px 5px;
}

.route-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.route-card {
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 12px; cursor: pointer; transition: all 0.15s;
}
.route-card:hover:not(.locked) { background: rgba(255,255,255,0.08); border-color: rgba(255,180,50,0.4); }
.route-card.locked { opacity: 0.5; cursor: not-allowed; }
.route-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.route-island-icon { font-size: 2rem; }
.route-island-info { flex: 1; }
.route-island-name { font-size: 0.88rem; font-weight: 800; color: #ffe082; }
.route-island-desc { font-size: 0.7rem; color: #90caf9; }
.route-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.route-tag {
  background: rgba(255,255,255,0.08); border-radius: 6px;
  padding: 2px 7px; font-size: 0.63rem; color: #b0c4de;
}
.route-tag.tc { color: var(--tc); background: rgba(124,58,237,0.2); }
.route-wanted { font-size: 0.68rem; color: #888; margin-top: 5px; }

.voyage-section { margin-bottom: 14px; }
.voyage-card {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(33,150,243,0.3);
  border-radius: 10px; padding: 10px; margin-bottom: 6px; display: flex; gap: 10px;
}
.voyage-icon { font-size: 2rem; flex-shrink: 0; }
.voyage-info { flex: 1; }
.voyage-title { font-size: 0.82rem; font-weight: 700; color: #ffe082; }
.voyage-bar-wrap { height: 7px; background: rgba(255,255,255,0.1); border-radius: 5px; overflow: hidden; margin: 5px 0; }
.voyage-bar { height: 100%; background: linear-gradient(90deg, #1976d2, #42a5f5); border-radius: 5px; transition: width 0.5s; }
.voyage-time { font-size: 0.68rem; color: #90caf9; }
.voyage-collect { background: linear-gradient(135deg, #43a047, #66bb6a); border: none; color: #fff; border-radius: 8px; padding: 5px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; flex-shrink: 0; align-self: center; }

.cargo-section { margin-bottom: 14px; }
.cargo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.cargo-item {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 6px; text-align: center; cursor: pointer;
  transition: all 0.12s; position: relative;
}
.cargo-item:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,180,50,0.4); }
.cargo-item.selected { border-color: #66bb6a; background: rgba(76,175,80,0.15); }
.cargo-item-icon { font-size: 1.4rem; }
.cargo-item-name { font-size: 0.6rem; color: #aaa; margin-top: 2px; }
.cargo-item-qty { font-size: 0.62rem; color: #ffe082; font-weight: 700; }
.cargo-selected-count { position: absolute; top: 2px; right: 2px; background: #66bb6a; color: #fff; border-radius: 4px; font-size: 0.5rem; font-weight: 800; padding: 1px 3px; }
.cargo-summary { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: 0.78rem; color: #90caf9; }
.sail-btn {
  width: 100%; padding: 12px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #0d47a1, #1565c0, #1976d2);
  color: #fff; font-size: 0.95rem; font-weight: 800; cursor: pointer;
  transition: all 0.15s; box-shadow: 0 4px 16px rgba(13,71,161,0.4);
}
.sail-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }
.sail-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   PERLUASAN LAHAN
   ============================================================ */
.land-intro { padding: 4px 8px 8px; font-size: 0.82rem; color: #b0bec5; }
.land-area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 4px; }
.land-area-card { background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 5px; transition: all 0.2s; }
.land-area-card.unlocked { border-color: #4caf50; background: rgba(76,175,80,0.12); }
.land-area-card.affordable { border-color: #ffb300; background: rgba(255,179,0,0.10); }
.land-area-card.locked { opacity: 0.7; }
.land-area-card:hover { transform: translateY(-2px); }
.area-card-icon { font-size: 2rem; text-align: center; }
.area-card-name { font-size: 0.88rem; font-weight: 700; color: #e0f2f1; text-align: center; }
.area-card-desc { font-size: 0.73rem; color: #90a4ae; text-align: center; line-height: 1.3; }
.area-bonus-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.area-bonus-tag { font-size: 0.65rem; background: rgba(100,221,180,0.2); color: #80cbc4; border-radius: 8px; padding: 2px 7px; }
.area-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.area-cost { font-size: 0.8rem; color: #ffcc02; font-weight: 700; }
.area-cost-free { font-size: 0.8rem; color: #4caf50; font-weight: 700; }
.area-btn-buy { background: linear-gradient(135deg,#4caf50,#388e3c); color: #fff; border: none; border-radius: 8px; padding: 5px 10px; font-size: 0.75rem; cursor: pointer; font-weight: 700; }
.area-btn-buy:hover { background: linear-gradient(135deg,#66bb6a,#43a047); }
.area-btn-unlocked, .area-btn-locked { background: rgba(255,255,255,0.1); color: #90a4ae; border: none; border-radius: 8px; padding: 5px 10px; font-size: 0.75rem; cursor: not-allowed; }
.area-btn-unlocked { color: #4caf50; }
.cur-level { background: rgba(255,193,7,0.2); color: #ffe082; border-radius: 8px; padding: 3px 10px; font-size: 0.8rem; font-weight: 700; }

/* ============================================================
   TOKO PRIBADI
   ============================================================ */
.shop-rep-header { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.07); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.shop-rep-icon { font-size: 1.8rem; }
.shop-rep-info { flex: 1; min-width: 0; }
.shop-rep-name { font-size: 0.9rem; font-weight: 700; color: #fff; }
.shop-rep-bar-wrap { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin: 3px 0; overflow: hidden; }
.shop-rep-bar { height: 100%; background: linear-gradient(90deg,#ffb300,#ff8f00); border-radius: 3px; transition: width 0.5s; }
.shop-rep-stats { font-size: 0.7rem; color: #90a4ae; }
.shop-status-badge { padding: 4px 10px; border-radius: 10px; font-size: 0.78rem; font-weight: 700; }
.shop-status-badge.open { background: rgba(76,175,80,0.2); color: #81c784; }
.shop-status-badge.closed { background: rgba(239,83,80,0.2); color: #ef9a9a; }
.pshop-sellable, .pshop-active-list { display: flex; flex-direction: column; gap: 8px; padding: 4px; max-height: 400px; overflow-y: auto; }
.pshop-item-row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 10px; }
.psi-icon { font-size: 1.6rem; min-width: 32px; text-align: center; }
.psi-info { flex: 1; }
.psi-name { font-size: 0.85rem; font-weight: 700; color: #e0f2f1; }
.psi-meta { font-size: 0.7rem; color: #78909c; }
.psi-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.psi-list-btn { background: linear-gradient(135deg,#1976d2,#1565c0); color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer; font-weight: 700; }
.psi-list-btn:hover { background: linear-gradient(135deg,#1e88e5,#1976d2); }
.pshop-listing-card { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.07); border-radius: 10px; padding: 8px 10px; border: 1px solid rgba(100,221,100,0.2); }
.plc-icon { font-size: 1.5rem; }
.plc-info { flex: 1; }
.plc-name { font-size: 0.85rem; font-weight: 700; }
.plc-price { font-size: 0.75rem; color: #a5d6a7; }
.plc-remove-btn { background: rgba(239,83,80,0.15); color: #ef9a9a; border: 1px solid rgba(239,83,80,0.3); border-radius: 8px; padding: 5px 10px; font-size: 0.75rem; cursor: pointer; }
.plc-remove-btn:hover { background: rgba(239,83,80,0.3); }
.pshop-info-panel { padding: 8px; }
.pshop-info-panel h3 { margin: 0 0 8px; font-size: 0.9rem; }
.pshop-info-panel ul { margin: 0; padding-left: 16px; font-size: 0.8rem; line-height: 1.6; color: #b0bec5; }
.rep-level-table { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.rep-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 5px 8px; background: rgba(255,255,255,0.05); border-radius: 8px; font-size: 0.75rem; color: #b0bec5; }
.rep-row.current { background: rgba(255,193,7,0.15); color: #ffe082; border: 1px solid rgba(255,193,7,0.3); }

/* ============================================================
   FESTIVAL MUSIMAN
   ============================================================ */
.festival-inactive { padding: 16px; text-align: center; }
.fest-season-icon { font-size: 3rem; margin-bottom: 8px; }
.festival-inactive h3 { margin: 0 0 8px; color: #fff; font-size: 1rem; }
.festival-inactive p { color: #b0bec5; font-size: 0.85rem; margin-bottom: 12px; }
.fest-seasons-preview { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 12px; }
.fest-season-card { background: rgba(255,255,255,0.07); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.8rem; }
.fest-season-card.current { border: 1.5px solid #ffb300; background: rgba(255,179,0,0.12); }
.festival-header { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.15); }
.fest-header-icon { font-size: 2.2rem; }
.fest-header-info { flex: 1; }
.fest-header-name { font-size: 1rem; font-weight: 800; color: #263238; }
.fest-header-desc { font-size: 0.75rem; color: #546e7a; margin-top: 2px; }
.fest-token-badge { font-size: 0.95rem; font-weight: 800; background: rgba(255,193,7,0.3); color: #ff8f00; border-radius: 12px; padding: 6px 12px; white-space: nowrap; }
#fest-body { padding: 2px; max-height: 400px; overflow-y: auto; }
.fest-mission-card { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; transition: all 0.2s; }
.fest-mission-card.done { background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.3); }
.fmc-check { font-size: 1.2rem; }
.fmc-info { flex: 1; }
.fmc-name { font-size: 0.84rem; font-weight: 700; color: #e0f2f1; }
.fmc-progress-wrap { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; margin: 3px 0; overflow: hidden; }
.fmc-progress-bar { height: 100%; background: linear-gradient(90deg,#29b6f6,#0288d1); border-radius: 3px; transition: width 0.3s; }
.fmc-count { font-size: 0.7rem; color: #90a4ae; }
.fmc-reward { font-size: 0.85rem; font-weight: 700; color: #ffd54f; background: rgba(255,213,79,0.15); border-radius: 8px; padding: 4px 8px; white-space: nowrap; }
.fest-token-info { font-size: 0.88rem; color: #ffd54f; padding: 6px 4px 8px; font-weight: 700; }
.fest-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.fest-shop-item { background: rgba(255,255,255,0.07); border-radius: 12px; padding: 10px 8px; text-align: center; border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s; }
.fest-shop-item.buyable { border-color: #ffd54f; background: rgba(255,213,79,0.10); }
.fest-shop-item.bought { opacity: 0.5; }
.fsi-icon { font-size: 1.8rem; margin-bottom: 4px; }
.fsi-name { font-size: 0.73rem; color: #e0f2f1; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.fsi-cost { font-size: 0.8rem; color: #ffd54f; font-weight: 700; margin-bottom: 6px; }
.fsi-buy-btn { background: linear-gradient(135deg,#ff8f00,#e65100); color: #fff; border: none; border-radius: 8px; padding: 4px 10px; font-size: 0.73rem; cursor: pointer; font-weight: 700; width: 100%; }
.fsi-buy-btn:disabled { background: rgba(255,255,255,0.1); color: #78909c; cursor: not-allowed; }
.fsi-buy-btn:not([disabled]):hover { background: linear-gradient(135deg,#ffa000,#ef6c00); }
.fest-recipe-grid { display: flex; flex-direction: column; gap: 8px; }
.fest-recipe-card { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 10px; border: 1px solid rgba(255,193,7,0.2); }
.frc-icon { font-size: 1.8rem; min-width: 36px; text-align: center; }
.frc-info { flex: 1; }
.frc-name { font-size: 0.85rem; font-weight: 700; color: #fff; }
.frc-desc { font-size: 0.72rem; color: #90a4ae; }
.frc-inputs { font-size: 0.7rem; color: #b0bec5; margin: 3px 0; }
.frc-meta { font-size: 0.72rem; color: #ffd54f; }
.frc-cook-btn { background: linear-gradient(135deg,#ff8f00,#e65100); color: #fff; border: none; border-radius: 8px; padding: 6px 12px; font-size: 0.78rem; cursor: pointer; font-weight: 700; }
.frc-cook-btn:hover { background: linear-gradient(135deg,#ffa000,#ef6c00); }

/* ============================================================
   FESTIVAL BANNER (overlay atas game)
   ============================================================ */
#festival-banner { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 1200; pointer-events: auto; transition: all 0.3s; }
#festival-banner.hidden { opacity: 0; pointer-events: none; }
.fest-banner-content { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg,#ff8f00,#e65100); color: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); min-width: 280px; max-width: 90vw; }
.fest-banner-icon { font-size: 1.8rem; }
.fest-banner-info { flex: 1; }
.fest-banner-title { font-size: 0.9rem; font-weight: 800; }
.fest-banner-desc { font-size: 0.72rem; opacity: 0.9; }
.fest-banner-open { background: rgba(255,255,255,0.25); color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer; font-weight: 700; }
.fest-banner-open:hover { background: rgba(255,255,255,0.4); }
.fest-banner-close { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 1rem; cursor: pointer; padding: 2px 6px; }

/* ============================================================
   KEMBANG BIAK
   ============================================================ */
.breeding-header { background: rgba(255,255,255,0.07); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.breed-info-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 0.82rem; }
.breed-requirements { display: flex; flex-wrap: wrap; gap: 6px; }
.breed-requirements span { font-size: 0.7rem; color: #90a4ae; background: rgba(255,255,255,0.06); border-radius: 8px; padding: 2px 8px; }
#breed-animal-list { max-height: 280px; overflow-y: auto; margin-bottom: 10px; }
.breed-type-section { margin-bottom: 10px; }
.breed-type-title { font-size: 0.82rem; font-weight: 700; color: #b0bec5; padding: 4px 0 6px; }
.breed-animal-row { display: flex; flex-wrap: wrap; gap: 8px; }
.breed-animal-card { background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 8px 10px; text-align: center; cursor: pointer; transition: all 0.2s; min-width: 90px; }
.breed-animal-card.jantan { border-color: rgba(33,150,243,0.3); }
.breed-animal-card.betina { border-color: rgba(233,30,99,0.3); }
.breed-animal-card.selected { background: rgba(255,193,7,0.2); border-color: #ffd54f; transform: scale(1.05); }
.breed-animal-card:hover { transform: translateY(-2px); }
.bac-icon { font-size: 1.6rem; }
.bac-gender { font-size: 0.72rem; margin: 2px 0; }
.bac-name { font-size: 0.75rem; font-weight: 600; color: #e0f2f1; }
.bac-stats { font-size: 0.68rem; margin-top: 3px; }
.bac-stats.ready { color: #81c784; }
.bac-stats.not-ready { color: #ef9a9a; }
.bac-pregnant { font-size: 0.68rem; color: #ce93d8; font-weight: 700; }
.bac-special { font-size: 0.65rem; color: #ffd54f; }
.breed-pair-section { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 12px; }
.breed-selected { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.breed-slot { flex: 1; background: rgba(255,255,255,0.06); border: 1.5px dashed rgba(255,255,255,0.2); border-radius: 10px; padding: 8px; text-align: center; min-height: 60px; display: flex; flex-direction: column; justify-content: center; }
.slot-label { font-size: 0.7rem; color: #90a4ae; font-weight: 700; margin-bottom: 4px; }
.slot-empty { font-size: 0.72rem; color: #546e7a; }
.slot-selected { font-size: 0.82rem; color: #e0f2f1; }
.breed-heart { font-size: 1.5rem; flex-shrink: 0; }
.breed-start-btn { width: 100%; background: linear-gradient(135deg,#e91e63,#ad1457); color: #fff; border: none; border-radius: 10px; padding: 10px; font-size: 0.88rem; cursor: pointer; font-weight: 700; transition: all 0.2s; }
.breed-start-btn:hover:not(:disabled) { background: linear-gradient(135deg,#f06292,#e91e63); transform: scale(1.02); }
.breed-start-btn:disabled { background: rgba(255,255,255,0.1); color: #546e7a; cursor: not-allowed; transform: none; }
.breed-pregnant-list { margin-top: 8px; }
.breed-section-title { font-size: 0.8rem; color: #ce93d8; font-weight: 700; margin-bottom: 6px; }
.pregnant-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; background: rgba(206,147,216,0.1); border-radius: 8px; padding: 6px 10px; margin-bottom: 4px; }
.preg-bar-wrap { flex: 1; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.preg-bar { height: 100%; background: linear-gradient(90deg,#ce93d8,#ab47bc); border-radius: 3px; transition: width 0.3s; }

/* ============================================================
   PERDAGANGAN HEWAN
   ============================================================ */
.trade-header { background: rgba(255,255,255,0.07); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.trade-animal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 4px; max-height: 400px; overflow-y: auto; }
.trade-animal-card { background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.tac-icon { font-size: 1.8rem; }
.tac-name { font-size: 0.78rem; font-weight: 700; color: #e0f2f1; }
.tac-stage { font-size: 0.7rem; color: #90a4ae; }
.tac-special { font-size: 0.68rem; color: #ffd54f; }
.tac-price { font-size: 0.8rem; font-weight: 700; color: #81c784; }
.tac-sell-btn { background: linear-gradient(135deg,#ef5350,#c62828); color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-size: 0.75rem; cursor: pointer; font-weight: 700; width: 100%; }
.tac-sell-btn:hover { background: linear-gradient(135deg,#f44336,#e53935); }
.tac-adopt-btn { background: linear-gradient(135deg,#4caf50,#2e7d32); color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-size: 0.75rem; cursor: pointer; font-weight: 700; width: 100%; }
.tac-adopt-btn:hover { background: linear-gradient(135deg,#66bb6a,#43a047); }
.tac-select-hint { font-size: 0.65rem; color: #78909c; font-style: italic; }
.breed-animal-card.barter-select.selected { border-color: #ff8f00; background: rgba(255,143,0,0.15); }
.barter-item-title { font-size: 0.82rem; color: #ffd54f; font-weight: 700; margin: 8px 4px 6px; }
.barter-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.barter-item-btn { background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,193,7,0.3); border-radius: 10px; color: #ffe082; padding: 8px 4px; font-size: 0.8rem; cursor: pointer; text-align: center; transition: all 0.2s; }
.barter-item-btn:hover { background: rgba(255,193,7,0.15); transform: scale(1.05); }

/* ============================================================
   DIALOG TAMU NPC
   ============================================================ */
#npc-dialog-overlay { position: fixed; bottom: 130px; left: 50%; transform: translateX(-50%); z-index: 1500; pointer-events: auto; max-width: 420px; width: calc(100vw - 32px); transition: all 0.3s; }
#npc-dialog-overlay.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }
.npc-dialog { background: linear-gradient(145deg,#1a2a32,#0d1b24); border: 1.5px solid rgba(100,221,180,0.25); border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.7); }
.npc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; }
.npc-avatar { font-size: 2.4rem; background: rgba(255,255,255,0.08); border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.npc-info { flex: 1; }
.npc-name { font-size: 1rem; font-weight: 800; color: #e0f2f1; }
.npc-type-badge { font-size: 0.7rem; color: #80cbc4; background: rgba(0,188,212,0.15); border-radius: 8px; padding: 2px 8px; display: inline-block; margin-top: 2px; }
.npc-timer-bar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 48px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.npc-timer-bar::after { content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(to bottom,#4caf50,#ffb300,#f44336); transition: none; }
.npc-speech { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 8px 12px; font-size: 0.82rem; color: #b0bec5; font-style: italic; margin-bottom: 10px; border-left: 3px solid rgba(100,221,180,0.4); }
.npc-offer-box { background: rgba(255,255,255,0.07); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.npc-offer-item { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.npc-item-icon { font-size: 1.4rem; }
.npc-item-name { font-size: 0.9rem; font-weight: 700; color: #e0f2f1; flex: 1; }
.npc-item-qty { font-size: 0.85rem; color: #80cbc4; font-weight: 700; }
.npc-offer-price { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: #ffd54f; }
.npc-offer-total { font-weight: 800; font-size: 0.9rem; color: #81c784; }
.npc-counter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; background: rgba(255,255,255,0.04); border-radius: 8px; padding: 6px 8px; }
.npc-btn-counter { background: rgba(255,193,7,0.2); color: #ffd54f; border: 1px solid rgba(255,193,7,0.4); border-radius: 8px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer; font-weight: 700; }
.npc-btn-counter:hover { background: rgba(255,193,7,0.35); }
.npc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.npc-btn-accept { background: linear-gradient(135deg,#4caf50,#2e7d32); color: #fff; border: none; border-radius: 10px; padding: 10px; font-size: 0.88rem; cursor: pointer; font-weight: 800; transition: all 0.2s; }
.npc-btn-accept:hover { background: linear-gradient(135deg,#66bb6a,#388e3c); transform: scale(1.02); }
.npc-btn-reject { background: rgba(239,83,80,0.15); color: #ef9a9a; border: 1px solid rgba(239,83,80,0.3); border-radius: 10px; padding: 10px; font-size: 0.88rem; cursor: pointer; font-weight: 700; transition: all 0.2s; }
.npc-btn-reject:hover { background: rgba(239,83,80,0.3); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  #top-bar { padding: 3px 5px; gap: 4px; }
  .avatar-disp { font-size: 1.3rem; min-width: 28px; height: 28px; }
  #farm-name-display { max-width: 55px; font-size: 0.7rem; }
  #day-display { font-size: 0.7rem; }
  .resource-item { padding: 2px 6px; font-size: 0.76rem; }
  #level-badge { font-size: 0.72rem; padding: 3px 7px; }
  #clock-display { font-size: 0.7rem; }
  .hud-btn { min-width: 40px; padding: 4px 5px; }
  .hud-icon { font-size: 1.1rem; }
  .hud-label { font-size: 0.54rem; }
  #tool-bar { right: 4px; }
  .tool-btn { width: 36px; height: 36px; font-size: 1rem; }
  .tile-action-menu, .building-action-menu { min-width: 155px; max-width: 90vw; }
  .avatar-picker { grid-template-columns: repeat(4, 1fr); }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .avatar-modal-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 360px) {
  #farm-name-display { display: none; }
  #day-display { font-size: 0.68rem; }
  .resource-item { padding: 2px 5px; }
  .hud-btn { min-width: 36px; padding: 3px 4px; }
}

/* ============================================================
   BALAI PRESTASI PANEL
   ============================================================ */
.ach-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0; min-height: 300px;
}
.ach-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px 0;
}
.ach-action-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  border: none; border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.ach-action-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.ach-action-btn:active { transform: translateY(1px); }
.ach-action-btn.danger { background: rgba(183,28,28,0.35); border-color: rgba(229,57,53,0.4); color: #ff8a80; }
.ach-action-btn.danger:hover { background: rgba(183,28,28,0.55); }

.ach-tab-bar {
  display: flex; overflow-x: auto; gap: 4px;
  padding: 4px 12px;
  scrollbar-width: none;
}
.ach-tab-bar::-webkit-scrollbar { display: none; }
.ach-tab {
  flex-shrink: 0; padding: 6px 11px;
  border: none; border-radius: 20px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.ach-tab:hover { background: rgba(255,255,255,0.16); color: #fff; }
.ach-tab.active { background: linear-gradient(135deg,#f9a825,#ff6f00); color: #fff; box-shadow: 0 2px 8px rgba(249,168,37,0.4); }

.ach-tab-body {
  padding: 8px 12px 14px;
  display: flex; flex-direction: column; gap: 7px;
  min-height: 140px;
}
.ach-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s;
}
.ach-row.highlight {
  background: rgba(249,168,37,0.12);
  border-color: rgba(249,168,37,0.3);
}
.ach-row-icon { font-size: 1.4rem; flex-shrink: 0; }
.ach-row-info { flex: 1; min-width: 0; }
.ach-row-label { font-size: 0.82rem; color: #ddd; font-weight: 600; }
.ach-row-sub   { font-size: 0.72rem; color: #aaa; margin-top: 2px; }
.ach-row-val   { font-size: 0.85rem; font-weight: 700; color: #ffe082; text-align: right; flex-shrink: 0; }
.ach-empty { text-align: center; color: rgba(255,255,255,0.4); padding: 30px 0; font-size: 0.85rem; }

/* ============================================================
   TOAST NOTIFIKASI AREA (toasts from Modal.toast)
   ============================================================ */
#modal-toast-area {
  top: 64px !important;
}
@media (max-width: 600px) {
  .ach-action-btn span { display: none; }
  .ach-action-btn { padding: 7px 9px; font-size: 1rem; }
  .ach-tab { font-size: 0.7rem; padding: 5px 8px; }
  .ach-row-label { font-size: 0.76rem; }
  .ach-row-val { font-size: 0.76rem; }
}

/* ============================================================
   FULLSCREEN & LANDSCAPE MODE
   ============================================================ */

/* Fullscreen button — main menu */
.mm-fs-row {
  display: flex; justify-content: center; padding: 8px 0 4px;
}
.mm-fs-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #e0d8c8;
  padding: 7px 22px; border-radius: 20px;
  font-size: 0.82rem; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.2s, transform 0.15s;
}
.mm-fs-btn:hover { background: rgba(255,255,255,0.15); transform: scale(1.04); }
.mm-fs-btn .fs-icon { font-size: 1rem; }

/* Fullscreen button — HUD top bar icon */
#btn-fullscreen-hud {
  font-size: 1rem; opacity: 0.75; transition: opacity 0.2s, transform 0.15s;
}
#btn-fullscreen-hud:hover { opacity: 1; transform: scale(1.1); }

/* Fullscreen button — settings panel */
.snd-btn { padding: 8px 16px !important; font-size: 0.82rem !important; }
.settings-row-btns { flex-wrap: wrap; gap: 8px; }
.settings-row-btns .snd-btn { flex: 1; text-align: center; }

/* Settings section divider */
.settings-section-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
  padding: 10px 0 4px; border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 6px;
}
.settings-section-title:first-of-type { border-top: none; margin-top: 0; }
.setting-hint { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-left: 4px; }

/* Fullscreen body class */
body.fs-mode #top-bar { font-size: 0.82rem; padding: 4px 8px; }
body.fs-mode #top-bar .stat-label { display: none; }
body.fs-mode #top-bar .coin-count,
body.fs-mode #top-bar .tc-count { font-size: 0.88rem; }
body.fs-mode #bottom-bar { padding: 4px 4px calc(4px + var(--safe-bottom)); gap: 2px; }
body.fs-mode .hud-btn { padding: 5px 8px; min-width: 44px; }
body.fs-mode .hud-icon { font-size: 1.1rem; }
body.fs-mode .hud-label { font-size: 0.6rem; }
body.fs-mode #tool-bar { bottom: 58px; gap: 4px; }

/* Landscape layout improvements (fullscreen + normal) */
@media (orientation: landscape) and (max-height: 500px) {
  #bottom-bar { padding: 3px 4px; gap: 2px; }
  .hud-btn { padding: 4px 7px; min-width: 40px; }
  .hud-icon { font-size: 1rem; }
  .hud-label { font-size: 0.58rem; }
  #top-bar { padding: 3px 8px; }
}

/* ============================================================
   PORTRAIT OVERLAY
   ============================================================ */
#portrait-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(5,12,28,0.92);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
#portrait-overlay.hidden { display: none !important; }
.portrait-content {
  text-align: center; color: #fff; padding: 36px 28px;
  max-width: 320px;
}
.portrait-phone {
  font-size: 4rem; margin-bottom: 8px;
  animation: portraitRock 1.8s ease-in-out infinite;
}
.portrait-arrow {
  font-size: 2.5rem; color: #fdd835; margin-bottom: 16px;
  animation: portraitSpin 1.8s ease-in-out infinite;
}
.portrait-content p {
  font-size: 1rem; line-height: 1.5; color: #c5d8f0; margin-bottom: 20px;
}
.portrait-content strong { color: #ffe082; }
.portrait-exit-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #e0d8c8; padding: 10px 20px; border-radius: 20px;
  font-size: 0.85rem; cursor: pointer;
  transition: background 0.2s;
}
.portrait-exit-btn:hover { background: rgba(255,255,255,0.22); }
@keyframes portraitRock { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(12deg)} }
@keyframes portraitSpin { 0%,100%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(-90deg) scale(1.2)} }

/* ============================================================
   MENU SETTINGS MODAL
   ============================================================ */
.msm-overlay {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(0, 8, 22, 0.78);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  pointer-events: auto;
  animation: fadeIn 0.18s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.msm-panel {
  background: linear-gradient(160deg, rgba(8,20,42,0.98) 0%, rgba(16,36,70,0.97) 100%);
  border: 1.5px solid rgba(255,220,100,0.3);
  border-radius: 22px;
  width: 100%; max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 18px 52px rgba(0,0,0,0.75), 0 0 44px rgba(255,180,50,0.09);
  animation: popIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
  /* Smooth scrollbar */
  scrollbar-width: thin; scrollbar-color: rgba(255,220,100,0.2) transparent;
}
.msm-panel::-webkit-scrollbar { width: 4px; }
.msm-panel::-webkit-scrollbar-thumb { background: rgba(255,220,100,0.2); border-radius: 2px; }

.msm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  position: sticky; top: 0;
  background: linear-gradient(160deg, rgba(8,20,42,0.99) 0%, rgba(16,36,70,0.98) 100%);
  z-index: 1; border-radius: 22px 22px 0 0;
}
.msm-title { font-size: 1.1rem; font-weight: 800; color: #ffe082; }
.msm-close-btn {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%; color: #bbb; font-size: 0.92rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.msm-close-btn:hover, .msm-close-btn:active { background: rgba(244,67,54,0.32); color: #fff; transform: scale(1.1); }

.msm-body { padding: 14px 20px 22px; }

.msm-section {
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.msm-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.msm-sec-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
  margin-bottom: 12px;
}

.msm-row { margin-bottom: 12px; }
.msm-row:last-child { margin-bottom: 0; }
.msm-row-flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msm-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

.msm-label {
  display: block; font-size: 0.88rem; color: #c0d0e0;
  margin-bottom: 7px; font-weight: 600;
}
.msm-row-flex .msm-label { margin-bottom: 0; flex-shrink: 0; }

/* Sliders */
.msm-slider-wrap { display: flex; align-items: center; gap: 10px; }
.msm-slider {
  flex: 1; height: 5px;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.14); border-radius: 3px;
  outline: none; cursor: pointer; touch-action: manipulation;
}
.msm-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe082, #ffab40);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  cursor: pointer;
}
.msm-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #ffe082, #ffab40);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45); cursor: pointer;
}
.msm-val {
  font-size: 0.82rem; color: #ffe082; font-weight: 700;
  min-width: 40px; text-align: right;
}

/* Select */
.msm-select {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #eee; font-size: 0.86rem; padding: 7px 11px;
  border-radius: 10px; cursor: pointer; outline: none;
  touch-action: manipulation;
}
.msm-select:focus { border-color: rgba(255,220,100,0.5); }

/* Action buttons */
.msm-action-btn {
  padding: 9px 14px; min-height: 40px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 11px; color: #ddd; font-size: 0.84rem; font-weight: 600;
  cursor: pointer; transition: background 0.14s, transform 0.1s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.msm-action-btn:hover, .msm-action-btn:active { background: rgba(255,255,255,0.18); transform: scale(1.02); }
.msm-btn-export { color: #90caf9; border-color: rgba(33,150,243,0.35); background: rgba(33,150,243,0.11); }
.msm-btn-export:hover, .msm-btn-export:active { background: rgba(33,150,243,0.26); }
.msm-btn-import { color: #a5d6a7; border-color: rgba(76,175,80,0.35); background: rgba(76,175,80,0.11); }
.msm-btn-import:hover, .msm-btn-import:active { background: rgba(76,175,80,0.26); }

/* Danger button */
.msm-danger-btn {
  width: 100%; padding: 11px; min-height: 44px;
  background: rgba(244,67,54,0.11); border: 1px solid rgba(244,67,54,0.3);
  border-radius: 11px; color: #ef9a9a; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: background 0.14s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.msm-danger-btn:hover, .msm-danger-btn:active { background: rgba(244,67,54,0.3); color: #fff; }

/* About text */
.msm-about { text-align: center; padding-top: 4px; }
.msm-about-text { font-size: 0.8rem; color: rgba(255,255,255,0.3); }
.msm-about-sub { font-size: 0.74rem; color: rgba(255,255,255,0.22); margin-top: 4px; }

/* Landscape / small screen adjustments */
@media (max-height: 600px) {
  .msm-panel { max-height: 96vh; border-radius: 14px; }
  .msm-header { padding: 10px 16px 8px; }
  .msm-body { padding: 10px 16px 14px; }
  .msm-section { margin-bottom: 12px; padding-bottom: 10px; }
  .msm-row { margin-bottom: 8px; }
}

/* Export assets button in settings */
.msm-btn-export-assets {
  width: 100%; color: #ffd54f;
  border-color: rgba(255,213,79,0.38); background: rgba(255,180,30,0.12);
  font-size: 0.9rem;
}
.msm-btn-export-assets:hover, .msm-btn-export-assets:active {
  background: rgba(255,180,30,0.26); color: #fff;
}
.msm-hint {
  font-size: 0.72rem; color: rgba(255,255,255,0.32);
  margin-top: 6px; line-height: 1.4;
}

/* ============================================================
   EXPORT ASSETS PANEL
   ============================================================ */
.exp-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.exp-panel {
  background: linear-gradient(160deg, rgba(10,20,42,0.97) 0%, rgba(18,36,70,0.96) 100%);
  border: 1.5px solid rgba(255,213,79,0.28);
  border-radius: 22px;
  width: 100%; max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05) inset;
  animation: popIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.exp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  position: sticky; top: 0; z-index: 2;
  background: rgba(10,20,42,0.98);
  border-radius: 22px 22px 0 0;
}
.exp-title { font-size: 1.05rem; font-weight: 800; color: #ffd54f; }
.exp-close-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: #bbb; font-size: 0.88rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; touch-action: manipulation;
}
.exp-close-btn:hover { background: rgba(244,67,54,0.3); color: #fff; }

.exp-body { padding: 18px 20px 24px; }

.exp-desc {
  font-size: 0.86rem; color: #b0c8e0; line-height: 1.5;
  margin-bottom: 16px; padding: 10px 14px;
  background: rgba(255,255,255,0.05); border-radius: 10px;
  border-left: 3px solid rgba(255,213,79,0.5);
}

/* Folder tree preview */
.exp-folder-tree {
  margin-bottom: 18px;
  background: rgba(0,0,0,0.25); border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
}
.exp-tree-title {
  font-size: 0.76rem; font-weight: 700; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.exp-tree { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 3px; }
.exp-tree-item {
  font-size: 0.8rem; color: #c8d8e8; font-family: 'Courier New', monospace;
  padding: 2px 0;
}
.exp-tree-child { padding-left: 18px; color: #90aac0; }

/* Progress bar */
.exp-progress-wrap {
  margin-bottom: 16px;
  background: rgba(0,0,0,0.2); border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09); padding: 12px 14px;
}
.exp-progress-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.exp-status { font-size: 0.82rem; color: #b0d0f0; flex: 1; }
.exp-pct { font-size: 0.82rem; font-weight: 800; color: #ffd54f; min-width: 38px; text-align: right; }
.exp-progress-track {
  height: 10px; background: rgba(255,255,255,0.1);
  border-radius: 6px; overflow: hidden;
}
.exp-bar-fill {
  height: 100%; width: 0%; border-radius: 6px;
  background: linear-gradient(90deg, #43a047, #66bb6a, #ffd54f);
  transition: width 0.35s ease;
  box-shadow: 0 0 8px rgba(102,187,106,0.5);
}

/* Warning note */
.exp-note {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(255,160,30,0.1); border: 1px solid rgba(255,180,30,0.3);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 18px;
  font-size: 0.78rem; color: #ffe0a0; line-height: 1.45;
}
.exp-note-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* Action buttons */
.exp-actions { display: flex; gap: 10px; }
.exp-btn {
  flex: 1; padding: 13px 18px; border-radius: 13px; border: none;
  font-size: 0.95rem; font-weight: 800; cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.exp-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.exp-btn:active { transform: scale(0.97); }
.exp-btn:disabled { opacity: 0.5; pointer-events: none; }
.exp-btn-start {
  background: linear-gradient(135deg, #f57f17, #ffd54f, #ffb300);
  color: #1a1000;
  box-shadow: 0 4px 16px rgba(255,180,30,0.4);
}
.exp-btn-cancel {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #aaa;
}
.exp-btn-cancel:hover { background: rgba(244,67,54,0.25); color: #fff; border-color: rgba(244,67,54,0.4); }

@media (max-width: 480px) {
  .exp-panel { border-radius: 16px; max-height: 95vh; }
  .exp-body { padding: 14px 14px 18px; }
  .exp-actions { flex-direction: column; }
}

/* ============================================================
   V3 VISUAL + RESPONSIVE FIX — exact replacement backgrounds
   ============================================================ */
html, body { width: 100%; min-height: 100%; min-height: 100dvh; overflow: hidden; }
#start-bg-video {
  width: 100vw;
  height: 100dvh;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.08) contrast(1.03) brightness(.88);
  background: #173b67 url('/gambar/backgrounds/start_background_clean.png') center/cover no-repeat;
}
#main-menu { min-height: 100dvh; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
#main-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,19,41,.08), rgba(0,12,29,.24)), radial-gradient(circle at center, transparent 18%, rgba(0,15,32,.32) 100%);
}
.mm-card {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,220,255,.45) transparent;
  background: linear-gradient(155deg, rgba(3,22,42,.91), rgba(6,48,69,.88) 52%, rgba(3,27,47,.93));
  border-color: rgba(255,220,120,.5);
  box-shadow: 0 18px 64px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.mm-btn { min-height: 56px; }
.mm-btn:focus-visible, .btn-fullscreen:focus-visible { outline: 3px solid #7ee8ff; outline-offset: 3px; }
#game-canvas { width: 100vw; height: 100dvh; background: #032341; }
#nature-frame-layer { height: 100dvh; filter: hue-rotate(82deg) saturate(.9) drop-shadow(0 0 20px rgba(0,0,0,.35)); opacity: .72; }
#top-bar { padding-top: max(6px, env(safe-area-inset-top)); }
#bottom-bar { padding-bottom: max(6px, env(safe-area-inset-bottom)); }

@media (max-width: 600px) {
  #main-menu { align-items: center; }
  .mm-card { width: min(94vw, 360px); max-width: none; padding: 18px 15px 14px; border-radius: 20px; }
  .mm-title-row { gap: 8px; }
  .mm-title-icon { font-size: 1.45rem; }
  .mm-title-main { font-size: clamp(1.55rem, 8vw, 2rem); }
  .mm-title-sub-text { letter-spacing: .28em; }
  .mm-tagline { line-height: 1.45; margin-bottom: 12px; }
  .mm-buttons { gap: 9px; }
  .mm-btn { min-height: 52px; padding: 11px 13px; }
  .mm-badges { gap: 5px; }
  .mm-badge { padding: 3px 8px; font-size: .66rem; }
  .mm-version { font-size: .64rem; }
  #tool-bar { right: max(6px, env(safe-area-inset-right)); }
}

@media (orientation: landscape) and (max-height: 560px) {
  #main-menu { align-items: center; }
  .mm-card { width: min(390px, 48vw); max-height: calc(100dvh - 12px); padding: 12px 16px 10px; }
  .mm-title-main { font-size: 1.65rem; }
  .mm-title-sub-text { font-size: .7rem; }
  .mm-tagline { margin-bottom: 7px; font-size: .66rem; }
  .mm-buttons { gap: 6px; margin-bottom: 7px; }
  .mm-btn { min-height: 42px; padding: 7px 12px; }
  .mm-badges, .mm-version { display: none; }
  .mm-fs-row { padding: 5px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  #start-bg-video { display: none; }
  #main-menu { background: #173b67 url('/gambar/backgrounds/start_background_clean.png') center/cover no-repeat; }
  .mm-anim-cloud, .mm-bird, .mm-sparkle, .mm-leaf, .mm-sail-boat, .mm-card-shine { animation: none !important; }
}