/* Cozy Winter Shiba Cafe styles */
:root{
  --panel-bg: rgba(255,255,255,0.85);
  --accent: #f59e0b; /* amber-500 */
}

html,body,#app{height:100%;}

/* Prevent image selection/highlighting */
img {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

/* Re-enable pointer events for clickable images */
button img {
  pointer-events: auto;
}

/* Make the play area feel cozy with a subtle vignette and snow */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(1200px 600px at 50% 10%, rgba(255,255,255,0.55), transparent 20%),
              linear-gradient(to bottom, rgba(250,250,255,0.6), rgba(226,232,240,0.25));
  mix-blend-mode: overlay;
}

/* Animated snow layer */
.snow-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -10px;
  color: #ffffff;
  font-size: 2em;
  user-select: none;
  animation: fall linear infinite;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  filter: brightness(2) saturate(0);
}

@keyframes fall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

#sidePanel {
  backdrop-filter: blur(6px) saturate(120%);
}

/* Floating text for gains */
.floating-text{
  position:absolute;
  pointer-events:none;
  font-weight:900;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color:#facc15;
  -webkit-text-stroke: 2px #854d0e;
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.9), 
               0 0 40px rgba(250, 204, 21, 0.7),
               0 4px 8px rgba(0, 0, 0, 0.5);
  transform:translateY(0) scale(1);
  transition:transform 900ms cubic-bezier(.2,.9,.1,1), opacity 900ms;
  z-index: 60;
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.8));
}

.coin-visual{
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#7c2d12;
  background: linear-gradient(180deg,#fef3c7,#fbbf24);
  box-shadow: 0 6px 18px rgba(15,23,42,0.12);
  border:2px solid rgba(0,0,0,0.06);
}

/* Coin drop visual */
.coin-drop{
  width: 4vw;
  height: 4vw;
  min-width: 40px;
  min-height: 40px;
  max-width: 256px;
  max-height: 256px;
  border-radius: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translate(0,0) scale(1);
  transition: transform 1100ms cubic-bezier(.2,.9,.1,1), opacity 1100ms;
  opacity: 1;
  z-index: 50;
  /* No background - PNG image will show with transparency */
}

.coin-drop.clickable{ cursor: pointer; pointer-events: auto; }

/* Firework particle effect for coin collect */
.fw-container{ position:fixed; width:0; height:0; pointer-events:none; z-index:70 }
.fw-particle{
  position:absolute;
  width: clamp(2px, 0.3vw, 3px);
  height: clamp(25px, 3vw, 40px);
  border-radius:2px;
  background: linear-gradient(180deg, #fffbeb 0%, #fbbf24 50%, transparent 100%);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.9),
              0 0 40px rgba(251, 191, 36, 0.6);
  filter: brightness(1.5);
  opacity: 1;
  transform: translate(0,0) scale(1) rotate(0deg);
  transition: transform 400ms cubic-bezier(.2,.9,.1,1), opacity 400ms;
  transform-origin: top center;
}

/* Make the main shiba button feel tactile */
#mainClick:active{ transform: translateY(2px) scale(.98); }

/* Small responsive tweaks */
@media (max-width:900px){
  #sidePanel{ right: 12px; top: 14px; width: calc(100% - 36px); max-height: 35vh; }
}

/* Worker slots inside the cafe */
#workerPanel button{ font-weight:700; }
.worker-slot{ display:flex; align-items:center; justify-content:center; }
.worker-slot .worker{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:10px; }
.worker.dropper{ /* No background - image will show */ }
.worker.collector{ /* No background - image will show */ }

/* Ensure worker slots are above floor visually and have inner padding */
#dropperSlots, #collectorSlots{ z-index: 14; padding-left: 28px; padding-right: 28px; gap: 16px }

/* Collector progress bar shown ABOVE the worker image */
.collector-bar{ position:absolute; top:-1px; left:0; right:0; height:16px; background: rgba(0,0,0,0.15); border-radius:6px; overflow:hidden; }
.collector-bar-fill{ width:0%; height:100%; background: linear-gradient(90deg,#10b981,#34d399); transition: width 900ms linear; }

/* Ensure worker elements position relative for bar placement */
.worker{ position:relative; }

/* Transition overlay for smooth upgrades */
.transition-overlay {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.transition-overlay.active {
  transform: translateY(0);
}

.transition-text {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  color: black;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease-out 0.3s, transform 0.4s ease-out 0.3s;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.transition-overlay.active .transition-text {
  opacity: 1;
  transform: scale(1);
}