/* ============================================================================
   cardgen.ru — атмосфера и общие компоненты v2
   ----------------------------------------------------------------------------
   Слой между токенами и экранами: зерно плёнки, свет, виньетка, золотые
   волосяные рамки, карты, фишки, кнопки, панели, поля ввода, тосты.

   Идея: интерфейс должен выглядеть как освещённый стол в тёмной комнате —
   свет идёт сверху, края уходят в темноту, поверхности ловят блик.
   ========================================================================== */

/* ============================================================================
   1. Зерно и виньетка
   ========================================================================== */

/* Плёночное зерно. Один SVG-шум, наложенный поверх всего экрана.
   Не мешает кликам, не влияет на layout, почти не грузит GPU. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Виньетка: края уходят в темноту, центр подсвечен. */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 88;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(4, 6, 10, .55) 78%, rgba(4, 6, 10, .92) 100%),
    linear-gradient(to bottom, rgba(4, 6, 10, .45) 0%, transparent 18%, transparent 82%, rgba(4, 6, 10, .6) 100%);
}

/* Свет сверху: конус от лампы над столом. */
.spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 30%, rgba(226, 197, 137, .085) 0%, transparent 68%),
    radial-gradient(80% 60% at 50% 44%, rgba(20, 98, 74, .10) 0%, transparent 72%);
}

/* ============================================================================
   2. Золото: линии, рамки, фольга
   ========================================================================== */

/* Волосяная рамка с золотым градиентом и «дышащим» блеском. */
.gold-frame {
  position: relative;
  isolation: isolate;
}

.gold-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(226, 197, 137, .55) 0%,
    rgba(226, 197, 137, .10) 22%,
    rgba(226, 197, 137, .04) 50%,
    rgba(226, 197, 137, .12) 78%,
    rgba(226, 197, 137, .42) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Панель: не «карточка с рамкой», а утопленная поверхность со светом сверху. */
.panel {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .028) 0%, transparent 32%),
    var(--ink-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    var(--shadow-2);
}

/* Стеклянная панель: размытие + подсветка границы. */
.glass {
  background: rgba(11, 15, 20, .72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 20px 50px rgba(0, 0, 0, .55);
}

/* ============================================================================
   3. Кнопки
   ========================================================================== */

.btn {
  --btn-bg: var(--ink-3);
  --btn-fg: var(--ivory);
  --btn-line: rgba(255, 255, 255, .09);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: .72em 1.25em;
  border-radius: var(--radius);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .04), transparent 60%), var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .015em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px var(--btn-line),
    0 6px 16px rgba(0, 0, 0, .35);
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    background-color var(--t-med) var(--ease-out),
    opacity var(--t-fast) linear;
}

.btn:hover:not(:disabled) {
  --btn-line: rgba(226, 197, 137, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px var(--btn-line),
    0 10px 26px rgba(0, 0, 0, .45);
}

.btn:active:not(:disabled) {
  transform: translateY(1px) scale(.994);
}

.btn:disabled {
  opacity: .38;
  filter: saturate(.4);
}

/* Главная кнопка: золотая фольга, тёмный текст. */
.btn--primary {
  --btn-fg: #14100A;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .38), transparent 52%),
    linear-gradient(168deg, var(--gold-200) 0%, var(--gold-300) 42%, var(--gold-500) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 10px 30px rgba(176, 138, 70, .26);
  font-weight: 700;
  letter-spacing: .02em;
}

.btn--primary:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 14px 38px rgba(176, 138, 70, .38);
}

/* Опасное действие: сухой бордо, не «красная кнопка». */
.btn--danger {
  --btn-fg: #F0D6D2;
  --btn-bg: #2A1513;
  --btn-line: rgba(196, 85, 75, .34);
}

.btn--danger:hover:not(:disabled) {
  --btn-line: rgba(196, 85, 75, .6);
}

/* Призрачная кнопка: только текст и линия. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-line: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px var(--btn-line);
}

.btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, .035);
}

/* ============================================================================
   4. Поля ввода
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: .45em;
}

.field__label {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ivory-3);
}

.input {
  width: 100%;
  min-height: 48px;
  padding: .8em 1em;
  border: 0;
  border-radius: var(--radius);
  background: rgba(4, 6, 10, .55);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 1rem;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 2px 8px rgba(0, 0, 0, .45);
  transition: box-shadow var(--t-med) var(--ease-out);
}

.input::placeholder { color: rgba(169, 162, 148, .6); }

.input:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(226, 197, 137, .5),
    inset 0 2px 8px rgba(0, 0, 0, .45),
    0 0 0 4px rgba(226, 197, 137, .09);
}

/* ============================================================================
   5. Микролейблы и числа
   ========================================================================== */

/* Подпись: капс, разрядка, приглушённая. */
.mlabel {
  display: block;
  font-family: var(--font-sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ivory-3);
  white-space: nowrap;
}

/* Число-герой: антиква, табличные цифры. */
.figure {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.015em;
  line-height: 1;
}

/* ============================================================================
   6. Переключатель звука
   ========================================================================== */

.snd-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ivory-3);
  background: rgba(11, 15, 20, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  transition: color var(--t-med), box-shadow var(--t-med), background var(--t-med);
}

.snd-toggle:hover { color: var(--gold-300); box-shadow: inset 0 0 0 1px rgba(226, 197, 137, .35); }
.snd-toggle[data-on="1"] { color: var(--gold-300); }

.snd-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  fill-rule: evenodd;
}

.snd-toggle .snd-wave,
.snd-toggle .snd-x {
  fill: none;
}

.snd-toggle[data-on="0"] .snd-wave { display: none; }
.snd-toggle[data-on="1"] .snd-x { display: none; }

/* ============================================================================
   7. Тосты и сообщения
   ========================================================================== */

.toast-host {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: min(92vw, 420px);
}

.toast {
  padding: .7em 1.1em;
  border-radius: var(--radius);
  background: rgba(11, 15, 20, .94);
  color: var(--ivory);
  font-size: .86rem;
  line-height: 1.4;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 16px 40px rgba(0, 0, 0, .6);
  backdrop-filter: blur(12px);
  animation: toast-in 260ms var(--ease-out) both;
}

.toast--bad {
  color: #F3D9D5;
  box-shadow:
    inset 0 0 0 1px rgba(196, 85, 75, .45),
    0 16px 40px rgba(0, 0, 0, .6);
}

.toast--ok {
  color: #D8F0E7;
  box-shadow:
    inset 0 0 0 1px rgba(79, 191, 160, .4),
    0 16px 40px rgba(0, 0, 0, .6);
}

.toast.is-out { animation: toast-out 220ms var(--ease-in-out) both; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(-6px) scale(.98); }
}

/* ============================================================================
   8. Появление экрана
   ========================================================================== */

/* Сцена мягко проявляется при загрузке — без «прыжка» контента. */
body > #stage,
body > .screen {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

body.is-ready > #stage,
body.is-ready > .screen {
  opacity: 1;
  transform: none;
}

/* Каскадное появление: элементы с задержкой. */
.is-stagger-in {
  animation: stagger-in 520ms var(--ease-out) both;
  animation-delay: var(--deal-delay, 0ms);
}

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* Встряска при ошибке. */
.is-shake {
  animation: shake 420ms var(--ease-in-out) both;
}

@keyframes shake {
  10%, 90% { transform: translateX(-1.5px); }
  20%, 80% { transform: translateX(2.5px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* Золотая пыль победы. */
.dust-host {
  position: fixed;
  inset: 0;
  z-index: 75;
  pointer-events: none;
  overflow: hidden;
}

.dust {
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 6px rgba(226, 197, 137, .8);
  animation: dust-fly 1300ms var(--ease-out) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes dust-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}

/* Пульсация банка. */
@keyframes pot-up {
  0% { transform: scale(1); }
  28% { transform: scale(1.075); filter: brightness(1.28); }
  100% { transform: scale(1); filter: brightness(1); }
}

.is-pulse-up { animation: pot-up 640ms var(--ease-out); }
.is-pulse-down { animation: pot-up 640ms var(--ease-out); filter: saturate(.7); }

/* Вспышка выигрыша. */
.is-win {
  animation: win-flash 2000ms var(--ease-out);
}

@keyframes win-flash {
  0% { box-shadow: 0 0 0 0 rgba(226, 197, 137, .0); }
  16% { box-shadow: 0 0 0 2px rgba(226, 197, 137, .75), 0 0 48px rgba(226, 197, 137, .5); }
  100% { box-shadow: 0 0 0 0 rgba(226, 197, 137, 0); }
}