:root {
  --gold: #e5c36c;
  --parchment: #f5efe0;
  --ink: #3f3527;
  --panel-bg: rgba(30, 22, 12, 0.88);
  --c-red: #ef4444; --c-orange: #f97316; --c-green: #22c55e;
  --c-purple: #a855f7; --c-yellow: #eab308; --c-blue: #3b82f6; --c-white: #f5f5f0;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0704; overflow: hidden; }

.lavka-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

.lavka-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.9s ease;
}

.lavka-bg--overlay {
  opacity: 0;
  pointer-events: none;
}

.lavka-bg--overlay.visible {
  opacity: 1;
}

.lavka-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}

.lavka-flash.fire {
  animation: flashPulse 0.6s ease;
}

@keyframes flashPulse {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

.crystal-spot {
  position: absolute;
  width: 6.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  padding: 0;
}

.crystal-spot::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(255,255,255,0);
  transition: box-shadow 0.4s ease;
}

.crystal-spot:hover::before {
  box-shadow: 0 0 28px 10px var(--glow, rgba(255,255,255,0.5));
}

.crystal-spot[data-color="red"] { --glow: var(--c-red); }
.crystal-spot[data-color="orange"] { --glow: var(--c-orange); }
.crystal-spot[data-color="green"] { --glow: var(--c-green); }
.crystal-spot[data-color="purple"] { --glow: var(--c-purple); }
.crystal-spot[data-color="yellow"] { --glow: var(--c-yellow); }
.crystal-spot[data-color="blue"] { --glow: var(--c-blue); }
.crystal-spot[data-color="white"] { --glow: var(--c-white); }

.crystal-spot.charging::before {
  animation: charge 3s ease-in-out forwards;
}

@keyframes charge {
  0% { box-shadow: 0 0 0 0 var(--glow); transform: rotate(0deg) scale(1); }
  50% { box-shadow: 0 0 40px 14px var(--glow); }
  100% { box-shadow: 0 0 90px 30px var(--glow); transform: rotate(300deg) scale(1.15); }
}

.crystal-spot.activated::after {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  box-shadow: 0 0 22px 6px var(--glow);
  animation: idleGlow 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes idleGlow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.crystal-spot.locked {
  cursor: not-allowed;
  opacity: 0.001; /* хотспот скрыт, но крупный кристалл виден на фоне тусклым */
}

.crystal-spot.locked::before,
.crystal-spot.locked::after { display: none; }

.artifact-panel {
  position: absolute;
  top: 4%;
  right: 3%;
  width: min(30vw, 360px);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid rgba(229, 195, 108, 0.4);
  border-radius: 18px;
  padding: 20px 20px 16px;
  color: var(--parchment);
  z-index: 15;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.6s ease;
  backdrop-filter: blur(4px);
}

.artifact-panel.open {
  transform: translateX(0);
  opacity: 1;
}

.artifact-panel-close {
  position: absolute;
  top: 10px; right: 14px;
  background: none; border: none;
  color: var(--gold);
  font-size: 22px;
  cursor: pointer;
}

.artifact-panel h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--gold);
  font-family: Georgia, serif;
}

.artifact-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(245, 239, 224, 0.7);
}

.artifact-tasks { display: grid; gap: 8px; }

.task-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.task-row.done { opacity: 0.5; text-decoration: line-through; }

.task-row .points { color: var(--gold); font-weight: 700; white-space: nowrap; }

.prize-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; background: rgba(255,255,255,0.05); border-radius: 10px; font-size: 13px;
}

.prize-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }

.prize-row button {
  margin-left: auto;
  padding: 6px 12px; border-radius: 8px; border: none;
  background: var(--gold); color: #2a1f10; font-weight: 700; cursor: pointer; font-size: 12px;
}

.lavka-hint {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--parchment);
  background: rgba(20, 14, 6, 0.55);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.3px;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

@media (max-width: 720px) {
  /* На вертикальном экране показываем всю картину целиком, а не центральный обрез */
  html { overflow-x: hidden; overflow-y: auto; height: auto; }
  body {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .lavka-stage {
    width: 100vw;
    height: auto;
    aspect-ratio: 1672 / 941;   /* совпадает с картинкой — обрезки нет, видны все 7 кристаллов */
    min-height: 56vw;           /* запас на случай отсутствия aspect-ratio */
    flex: none;
  }

  .lavka-bg { object-fit: cover; }   /* пропорции совпали — просто заполняет */

  .crystal-spot { width: 11%; }      /* крупнее для пальца (~44px) */

  .lavka-hint { bottom: 2%; font-size: 12px; padding: 6px 14px; max-width: 88vw; text-align: center; }

  /* Панель заданий — выезжает снизу как шторка */
  .artifact-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 74vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(110%);
  }
  .artifact-panel.open { transform: translateY(0); }
}