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

body {
  background: radial-gradient(ellipse at center, #1a0f0a 0%, #0a0505 100%);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: 'Georgia', serif;
  display: flex;
  flex-direction: column;
}

header {
  text-align: center;
  padding: 15px;
  color: #d4af37;
  background: rgba(0,0,0,0.4);
  z-index: 10;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

header h1 {
  font-size: 1.8em;
  letter-spacing: 2px;
  text-shadow: 0 0 15px rgba(212,175,55,0.6);
}

header p {
  font-size: 0.85em;
  color: #a89060;
  margin-top: 5px;
}

#stats {
  margin-top: 8px;
  font-size: 0.9em;
  color: #fff;
}

#grid-container {
  flex: 1;
  overflow: auto;
  padding: clamp(60px, 8vh, 80px) 0 clamp(20px, 4vh, 40px) 0;
  display: block;
}

#candle-grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(6px, 1vw, 10px);
  row-gap: clamp(30px, 5vh, 50px);
  justify-content: center;
  align-content: flex-start;
  width: 80%;
  margin: 0 auto;
}

.candle {
  width: 24px;
  height: 28px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.candle:hover { transform: scale(1.15); }

.candle-body {
  width: 10px;
  height: 22px;
  background: linear-gradient(#fdf6e3, #e8dcc0);
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 7px;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.flame {
  display: none;
  width: 10px;
  height: 16px;
  position: absolute;
  top: -12px;
  left: 7px;
  background: radial-gradient(ellipse at bottom, #fff7cc 0%, #ffcc33 40%, #ff8800 70%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: flicker 1s infinite alternate;
  filter: drop-shadow(0 0 6px #ffaa00);
}

.candle.lit .flame { display: block; }

.candle.lit .candle-body { box-shadow: 0 0 15px rgba(255, 170, 0, 0.6); }

.candle.lit.expiring .flame {
  animation: flicker-expiring 0.5s infinite alternate;
  filter: drop-shadow(0 0 4px #ff4400);
}

@keyframes flicker {
  0% { transform: scale(1) rotate(-2deg); opacity: 0.9; }
  50% { transform: scale(1.05) rotate(2deg); opacity: 1; }
  100% { transform: scale(0.95) rotate(-1deg); opacity: 0.85; }
}

@keyframes flicker-expiring {
  0% { transform: scale(0.85) rotate(-4deg); opacity: 0.5; }
  50% { transform: scale(1) rotate(3deg); opacity: 0.9; }
  100% { transform: scale(0.7) rotate(-3deg); opacity: 0.4; }
}

.tooltip {
  display: none;
  position: absolute;
  bottom: 40px;
  left: 50%;
  background: #1a1006;
  border: 1px solid #d4af37;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75em;
  max-width: 180px;
  width: max-content;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: center;
  z-index: 20;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  transform: translateX(-50%);
  pointer-events: none;
}

.tooltip.tooltip-bottom { top: 40px; bottom: auto; }

.candle.lit:hover .tooltip { display: block; }

.tooltip .tooltip-message {
  display: block;
  margin-bottom: 4px;
}

.tooltip .tooltip-timer {
  display: block;
  font-size: 0.85em;
  color: #d4af37;
  border-top: 1px solid rgba(212,175,55,0.3);
  padding-top: 4px;
  margin-top: 2px;
}

#overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 100;
  justify-content: center;
  align-items: center;
}

#overlay.active { display: flex; }

#modal {
  background: #1a0f0a;
  border: 1px solid #d4af37;
  border-radius: 10px;
  padding: 25px 30px;
  max-width: 400px;
  width: 90%;
  color: #fff;
  box-shadow: 0 0 30px rgba(212,175,55,0.4);
}

#modal h2 { color: #d4af37; margin-bottom: 5px; font-size: 1.3em; text-align: center; }

#modal-price {
  text-align: center;
  color: #a89060;
  font-size: 0.85em;
  margin-bottom: 15px;
}

#modal-price strong {
  color: #d4af37;
  font-size: 1.1em;
}

#modal input {
  width: 100%; padding: 10px; border-radius: 6px;
  border: 1px solid #d4af37; background: #0a0505; color: #fff;
  font-size: 0.95em; margin-bottom: 5px;
}

#char-count { text-align: right; font-size: 0.75em; color: #a89060; margin-bottom: 15px; }

#modal-buttons { display: flex; gap: 10px; justify-content: center; }

#modal-buttons button { 
  padding: 10px 20px; 
  border-radius: 6px; 
  border: none; 
  cursor: pointer; 
  font-size: 0.9em; 
  font-weight: bold; 
}

#confirm-btn { background: #d4af37; color: #1a0f0a; }
#confirm-btn:hover { background: #e8c766; }

#cancel-btn { background: #333; color: #fff; }
#cancel-btn:hover { background: #444; }