/* ============================================================
   Оформление поверх основного стиля: глубина, свет, аккуратные состояния.
   Файл подключается последним в index.html и ничего не ломает, если его убрать —
   это и есть откат: удалить одну строку <link> из index.html.
   Полная копия прежнего вида лежит в backup/2026-08-29-before-polish/
   ============================================================ */

/* ---------- фон: мягкое свечение вместо плоской черноты ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -6%, rgba(255, 210, 0, .07), transparent 70%),
    radial-gradient(700px 500px at 8% 22%, rgba(75, 105, 255, .05), transparent 72%),
    radial-gradient(760px 540px at 94% 30%, rgba(211, 44, 230, .045), transparent 72%);
}

/* ---------- шапка: стекло и мягкая нижняя граница ---------- */
.hdr {
  background: linear-gradient(180deg, rgba(28, 28, 33, .92), rgba(20, 20, 24, .88));
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, .07);
  box-shadow: 0 10px 30px -22px #000;
}

/* ---------- панели: верхняя подсветка и настоящая тень ---------- */
.pane,
.panel,
.pcard,
.cases-promo,
.stake-box,
.pl-card,
.modal {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 140px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 24px 46px -34px #000;
}

.panel-head {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* панель цели, когда предмет выбран, — цвет редкости мягче и глубже */
.pane.has-target {
  background-image:
    radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--dc) 34%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 180px);
}

/* ---------- кнопки ---------- */
.btn-y,
.upgrade-btn:not(:disabled) {
  box-shadow: 0 10px 26px -12px rgba(255, 210, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-y:hover:not(:disabled),
.upgrade-btn:hover:not(:disabled) {
  box-shadow: 0 14px 32px -12px rgba(255, 210, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-y:active:not(:disabled) { transform: translateY(1px) }

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, .07);
  transition: border-color .18s, background .18s, color .18s;
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, .16) }

.pages button { transition: background .18s, color .18s, box-shadow .18s }
.pages button[aria-current="true"] { box-shadow: 0 6px 18px -8px rgba(255, 210, 0, .6) }

/* ---------- карточки предметов ---------- */
.items .item {
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s, filter .18s;
}
.items .item:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px -22px var(--dc, #000);
  z-index: 2;
}
.item-in { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) }
.item-img { transition: transform .18s cubic-bezier(.2, .8, .3, 1) }
.items .item:hover .item-img { transform: scale(1.06) }

/* ---------- лента дропов ---------- */
.drop { transition: filter .18s, transform .18s }
.drop:hover { filter: brightness(1.12) }
.drops-tabs button { transition: background .18s, color .18s }

/* ---------- колесо: аккуратный ореол ---------- */
.wheel::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 210, 0, .07), transparent 62%);
}

/* ---------- ввод ---------- */
input, select, textarea { transition: border-color .18s, background .18s, box-shadow .18s }
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(255, 210, 0, .12);
}

/* ---------- заголовки страниц ---------- */
.page-title { text-shadow: 0 14px 40px rgba(255, 210, 0, .16) }

/* ---------- подвал ---------- */
.foot {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .02));
  border-top-color: rgba(255, 255, 255, .06);
}
.foot a { transition: color .16s }

/* ---------- окна ---------- */
.scrim { backdrop-filter: blur(6px); background: rgba(6, 6, 8, .62) }
.modal { box-shadow: 0 40px 90px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .07) }

/* ---------- у кого выключена анимация ---------- */
@media (prefers-reduced-motion: reduce) {
  .items .item:hover { transform: none }
  .items .item:hover .item-img { transform: none }
}

/* ---------- пустая панель: знак вместо глухого квадрата ---------- */
.ghost { opacity: 1 }
.ghost .rmark {
  position: relative;
  background: none;
  color: rgba(255, 210, 0, .16);
  border: 2px dashed rgba(255, 210, 0, .16);
  border-radius: 22%;
  text-shadow: 0 0 34px rgba(255, 210, 0, .25);
}
.ghost .rmark::after {
  content: "";
  position: absolute;
  inset: -46%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 0, .09), transparent 62%);
  pointer-events: none;
}
.pane .ghost { transition: opacity .25s }
.pane:hover .ghost .rmark { border-color: rgba(255, 210, 0, .26); color: rgba(255, 210, 0, .24) }

/* ---------- метки на кольце ---------- */
.scale {
  background: rgba(20, 20, 24, .82);
  border: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(4px);
}

/* ---------- строка баланса под ставкой ---------- */
.stake-box { border: 1px solid rgba(255, 255, 255, .05) }
input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255, 210, 0, .18), 0 4px 10px -3px #000 }

/* ---------- кейсы: карточка живее ---------- */
.case { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 34px -28px #000 }

/* ---------- чат и выпадающие меню ---------- */
.menu, .chat {
  box-shadow: 0 30px 70px -34px #000, inset 0 1px 0 rgba(255, 255, 255, .06);
}