/* field.css — фон: материал + смок. Сетки/полосы/геометрия забракованы. */

/* канва смока */
#field,
.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 🔴 забракованные владельцем слои */
.floor,
.scanline,
.haze {
  display: none !important;
}

/* ровный тёмный базовый фон — без линий и сеток */
body,
.hero,
.stage {
  background: #06070c;
}

/* зерно поверх смока */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* виньетка — затемняет края, держит текст читаемым */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 42%, rgba(4,5,9,0.55) 78%, rgba(3,4,7,0.85) 100%);
}

/* мягкая центральная подсветка (цвет редкости) */
.center-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--rarity, #8847ff) 16%, transparent) 0%,
    color-mix(in srgb, var(--rarity, #8847ff) 6%, transparent) 45%,
    transparent 70%);
  filter: blur(12px);
  transition: opacity 0.7s ease;
}

/* вспышка при успехе */
.flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.14) 30%,
    transparent 62%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.flash.on { opacity: 1; transition: opacity 0.06s; }

/* цветовой ореол редкости по краям */
.ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at 50% 118%,
    color-mix(in srgb, var(--rarity, #8847ff) 10%, transparent) 0%,
    transparent 55%);
}

@media (max-width: 768px) {
  .center-glow { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
}

@media (prefers-reduced-motion: reduce) {
  .center-glow,
  .flash { transition: opacity 0.3s ease; }
}

/* канва рисуется в низком разрешении и растягивается композитором */
.field{image-rendering:auto}
.field-sharp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}