/* ==========================================================================
   StableTree — «лес в сумерках»
   Новые компоненты написаны на чистом CSS (префикс .fx-), чтобы не зависеть
   от Tailwind CDN: hero-сцена, голографические карточки, сцена оплаты/рождения.
   ========================================================================== */

:root {
  --fx-night: #08140f;
  --fx-canopy: #0f2a22;
  --fx-teal: #17413a;
  --fx-moss: #4a9a62;
  --fx-fern: #7fd08a;
  --fx-firefly: #e4f58a;
  --fx-amber: #f0b56e;
  --fx-rose: #d98b6a;
  --fx-paper: #eef3e6;
  --fx-mist: #9db8a6;
  --fx-line: rgba(160, 210, 175, .16);
  --fx-display: 'Alegreya', Georgia, serif;
  --fx-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body.fx-body {
  font-family: var(--fx-sans);
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(31, 84, 70, .55), transparent 70%),
    var(--fx-night);
  color: var(--fx-paper);
}
body.fx-body .font-mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.fx-display, .font-display { font-family: var(--fx-display); }

[class*="fx-"], [class*="fx-"]::before, [class*="fx-"]::after { box-sizing: border-box; }

.fx-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--fx-amber); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 1rem/1 var(--fx-sans); text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.fx-btn:active { transform: scale(.98); }
.fx-btn--solid {
  background: #7fd08a; color: #07240f;
  box-shadow: 0 10px 30px rgba(127, 208, 138, .28);
}
.fx-btn--solid:hover { background: #9be3a4; }
.fx-btn--ghost {
  background: rgba(238, 243, 230, .08); color: var(--fx-paper);
  box-shadow: inset 0 0 0 1px rgba(238, 243, 230, .22);
}
.fx-btn--ghost:hover { background: rgba(238, 243, 230, .14); }

/* --------------------------------------------------------------------------
   HERO: сумеречный лес
   -------------------------------------------------------------------------- */
.fx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(700px, calc(100svh - 80px));
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #091a1c 0%, #0e2b2b 32%, #1a463d 58%, #46694a 76%, #c98f58 100%);
}
.fx-hero__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 46% at 68% 90%, rgba(247, 192, 120, .75), rgba(217, 139, 106, .28) 46%, transparent 74%),
    radial-gradient(1px 1px at 12% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, #dfeee4 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 19%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 6%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 12%, #dfeee4 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 21%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 7%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 33%, #dfeee4 50%, transparent 51%);
}
.fx-fireflies {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none;
}
.fx-ridge {
  position: absolute; left: 0; right: 0; bottom: -1px; width: 100%;
  height: clamp(150px, 13.5vw, 300px); display: block; pointer-events: none;
  will-change: transform;
}
.fx-ridge--back  { z-index: 1; }
.fx-ridge--mid   { z-index: 3; }
.fx-ridge--front { z-index: 4; }

.fx-hero__tree {
  position: relative; z-index: 2; width: 100%; height: 340px;
  margin-top: auto; pointer-events: none;
}
.fx-hero__tree svg { width: 100%; height: 100%; display: block; overflow: visible; }

.fx-hero__inner {
  position: relative; z-index: 6;
  width: 100%; max-width: 80rem; margin: 0 auto;
  padding: 3.5rem 1.5rem 0;
}
.fx-hero__copy { max-width: 38rem; }
.fx-hero h1 {
  font-family: var(--fx-display); font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1.06; letter-spacing: -.012em;
  color: #f4f8ee; margin: 0 0 1.25rem; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(5, 18, 14, .5);
}
.fx-hero__lead {
  font-size: 1.15rem; line-height: 1.6; color: #c9dccd; margin: 0 0 1.75rem; max-width: 30rem;
}
.fx-hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.25rem; }
.fx-hero__trust { font-size: .9rem; line-height: 1.5; color: #a9c2b0; max-width: 28rem; margin: 0 0 2rem; }

.fx-stats { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin: 0; padding: 0; }
.fx-stats > div { min-width: 5.5rem; }
.fx-stats dd {
  margin: 0; order: 1;
  font: 700 2.3rem/1 var(--fx-display); color: #f4f8ee; font-variant-numeric: tabular-nums;
}
.fx-stats dt { order: 2; font-size: .85rem; color: #a9c2b0; margin-top: .3rem; }
.fx-stats > div { display: flex; flex-direction: column; }

@media (min-width: 1024px) {
  .fx-hero__inner { padding-top: 5rem; padding-left: 3rem; padding-right: 3rem; padding-bottom: clamp(140px, 14vw, 260px); }
  .fx-hero__tree {
    position: absolute; right: 2%; bottom: 1%; width: 54%; height: 90%; margin: 0;
  }
}
@media (max-width: 1023px) {
  .fx-hero__tree { height: 380px; margin-bottom: clamp(30px, 8vw, 80px); }
}
@media (max-width: 639px) {
  .fx-hero__inner { padding-top: 2rem; }
  .fx-hero__lead { font-size: 1rem; margin-bottom: 1.25rem; }
  .fx-hero__cta { gap: .6rem; margin-bottom: 1.5rem; }
  .fx-hero__cta .fx-btn { padding: .8rem 1.15rem; font-size: .95rem; }
  .fx-hero__trust { display: none; }
  .fx-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 .75rem; }
  .fx-stats > div { min-width: 0; }
  .fx-stats dd { font-size: 1.7rem; }
  .fx-stats dt { font-size: .72rem; }
  .fx-hero__tree { height: 300px; margin-bottom: 34px; }
}

/* --------------------------------------------------------------------------
   Дерево (SVG, рисуется в forest.js)
   -------------------------------------------------------------------------- */
.fx-tree { transform-box: fill-box; transform-origin: 50% 100%; }
.fx-tree--sway { animation: fx-sway 9s ease-in-out infinite alternate; }
@keyframes fx-sway { from { transform: rotate(-.7deg); } to { transform: rotate(.9deg); } }

.fx-tree .fx-branch {
  fill: none; stroke-linecap: round;
}
.fx-tree--grow .fx-branch {
  transition: stroke-dashoffset var(--dur, .8s) cubic-bezier(.3, .7, .25, 1) var(--delay, 0s);
}
.fx-tree--grow.is-growing .fx-branch { stroke-dashoffset: 0 !important; }

.fx-tree--grow .fx-leaf {
  opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: 50% 80%;
  transition: opacity .7s ease var(--delay, 0s), transform .9s cubic-bezier(.2, 1.3, .4, 1) var(--delay, 0s);
}
.fx-tree--grow.is-growing .fx-leaf { opacity: var(--op, .9); transform: scale(1); }
.fx-leaves { filter: drop-shadow(0 0 7px rgba(170, 235, 120, .32)); }
.fx-leaf--twinkle { animation: fx-twinkle 3.6s ease-in-out infinite; animation-delay: var(--tw, 0s); }
@keyframes fx-twinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7); } }

/* маленькое статичное дерево-иконка (карточки каталога) */
.fx-mini-tree { width: 100%; height: 120px; display: block; }

/* --------------------------------------------------------------------------
   Голографическая карточка дерева
   -------------------------------------------------------------------------- */
.fx-card {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --hot: 0;
  position: relative; width: 100%; aspect-ratio: 4 / 5.5;
  perspective: 1000px; touch-action: pan-y;
}
.fx-card__tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--ry)) rotateY(var(--rx));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.fx-card.is-tilting .fx-card__tilt { transition: transform .08s linear; }
.fx-card__inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.25, .85, .25, 1);
}
.fx-card.is-flipped .fx-card__inner { transform: rotateY(180deg); }

.fx-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 22px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #0d211a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(160, 210, 175, .18);
}
.fx-face--back { transform: rotateY(180deg); display: flex; flex-direction: column; }

/* рамка-«ранг» зависит от уровня поглощения CO₂ */
.fx-card[data-tier="medium"] .fx-face { box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(127, 208, 138, .55); }
.fx-card[data-tier="high"] .fx-face   { box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 34px rgba(240, 181, 110, .18), inset 0 0 0 1.5px rgba(240, 181, 110, .7); }

.fx-art { position: absolute; inset: 0; }
.fx-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-art--empty {
  background:
    radial-gradient(circle at 50% 38%, rgba(127, 208, 138, .35) 0 16%, transparent 17%),
    linear-gradient(180deg, #17413a, #0b1c17);
}
.fx-face--front::after { /* затемнение под текстом */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 14, 10, .45) 0%, transparent 24%, transparent 48%, rgba(5, 14, 10, .92) 100%);
}

/* переливающаяся фольга, следует за курсором */
.fx-foil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  opacity: calc(var(--hot) * .34); mix-blend-mode: soft-light;
  transition: opacity .35s ease;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 244, 190, .95), transparent 42%),
    repeating-linear-gradient(115deg,
      rgba(95, 230, 160, .9) 0%, rgba(240, 181, 110, .9) 10%, rgba(214, 240, 130, .8) 17%,
      rgba(95, 230, 160, .9) 26%);
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, calc(var(--mx) * 1.2) calc(var(--my) * 1.2);
}
.fx-card[data-tier="high"] .fx-foil { opacity: calc(var(--hot) * .48); }
.fx-card[data-tier="low"] .fx-foil  { opacity: calc(var(--hot) * .22); }

.fx-top {
  position: absolute; z-index: 4; top: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.fx-token, .fx-status {
  font: 600 .72rem/1 var(--fx-sans); letter-spacing: .02em;
  padding: .45rem .7rem; border-radius: 999px;
  background: rgba(6, 18, 13, .62); backdrop-filter: blur(8px);
  color: #dbe9dc; box-shadow: inset 0 0 0 1px rgba(238, 243, 230, .14);
  font-variant-numeric: tabular-nums;
}
.fx-status { color: #f0d49a; }

.fx-info { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 18px; }
.fx-name {
  font: 700 1.65rem/1.1 var(--fx-display); color: #f4f8ee; margin: 0 0 .35rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.fx-region { margin: 0 0 .85rem; font-size: .88rem; color: #bcd2c1; display: flex; align-items: center; gap: .3rem; }
.fx-region .material-symbols-outlined { font-size: 17px; color: var(--fx-amber); }
.fx-meter { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: #cfe2d2; }
.fx-meter i {
  width: 22px; height: 6px; border-radius: 3px; background: rgba(238, 243, 230, .2); display: block;
}
.fx-meter i.is-on { background: var(--fx-fern); box-shadow: 0 0 10px rgba(127, 208, 138, .6); }
.fx-card[data-tier="high"] .fx-meter i.is-on { background: var(--fx-amber); box-shadow: 0 0 10px rgba(240, 181, 110, .65); }
.fx-meter span { margin-left: .4rem; }

.fx-flip {
  position: absolute; z-index: 5; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .8rem/1 var(--fx-sans); color: #07240f; background: var(--fx-fern);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transition: background-color .15s, transform .15s;
}
.fx-flip:hover { background: #a3e6ac; }
.fx-flip .material-symbols-outlined { font-size: 17px; }
.fx-face--front .fx-flip { bottom: auto; top: 56px; }
.fx-face--front .fx-info { right: 18px; }

/* оборот карточки */
.fx-back-body {
  flex: 1; overflow-y: auto; padding: 22px 20px 18px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
  scrollbar-color: rgba(127, 208, 138, .4) transparent;
}
.fx-back-body h3 { font: 700 1.4rem/1.15 var(--fx-display); color: #f4f8ee; margin: 0 0 .15rem; }
.fx-back-meta { font-size: .78rem; color: var(--fx-mist); margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.fx-story { font-size: .92rem; line-height: 1.6; color: #d3e2d6; margin: 0 0 1.1rem; }
.fx-back-body h4 { font: 700 .95rem/1 var(--fx-display); color: var(--fx-amber); margin: 1.1rem 0 .55rem; }
.fx-diary { border-left: 2px solid rgba(127, 208, 138, .45); padding-left: .75rem; margin: 0 0 .7rem; }
.fx-diary small { display: block; font-size: .72rem; color: var(--fx-mist); }
.fx-diary p { margin: .1rem 0 0; font-size: .85rem; line-height: 1.5; color: #c6d9ca; }
.fx-wallet { font-size: .72rem; color: var(--fx-mist); word-break: break-all; margin: .9rem 0 0; }
.fx-back-foot { padding: 12px 20px 18px; display: flex; justify-content: flex-end; }
.fx-back-foot .fx-flip { position: static; }
.fx-face--back::before { /* едва заметный «вензель» на обороте */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 8%, rgba(240, 181, 110, .14), transparent 45%);
}

.fx-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (prefers-reduced-motion: reduce) {
  .fx-card__tilt, .fx-card__inner { transition: none; transform: none !important; }
  .fx-face--back { transform: none; visibility: hidden; }
  .fx-card.is-flipped .fx-face--back { visibility: visible; }
  .fx-card.is-flipped .fx-face--front { visibility: hidden; }
  .fx-foil { display: none; }
  .fx-tree--sway, .fx-leaf--twinkle { animation: none; }
}

/* --------------------------------------------------------------------------
   Оплата и «рождение дерева»
   -------------------------------------------------------------------------- */
.fx-pay { max-width: 64rem; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
.fx-pay h1 { font: 700 clamp(2rem, 4vw, 2.8rem)/1.1 var(--fx-display); margin: 0 0 .4rem; color: #f4f8ee; }
.fx-pay__sub { color: var(--fx-mist); margin: 0 0 2rem; }

.fx-steps {
  list-style: none; margin: 0 0 2.25rem; padding: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 0; position: relative;
}
.fx-steps::before { /* линия-путь */
  content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 17px; height: 2px;
  background: rgba(160, 210, 175, .2);
}
.fx-steps::after { /* заполнение пути */
  content: ''; position: absolute; left: 12.5%; top: 17px; height: 2px; width: calc(75% * var(--p, 0));
  background: linear-gradient(90deg, var(--fx-moss), var(--fx-amber));
  transition: width .8s cubic-bezier(.3, .8, .3, 1);
}
.fx-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
.fx-step__dot {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #10261e; color: var(--fx-mist); box-shadow: inset 0 0 0 2px rgba(160, 210, 175, .25);
  transition: background-color .4s, color .4s, box-shadow .4s;
}
.fx-step__dot .material-symbols-outlined { font-size: 19px; }
.fx-step__label { font-size: .85rem; color: var(--fx-mist); max-width: 8.5rem; line-height: 1.3; transition: color .4s; }
.fx-step.is-active .fx-step__dot {
  background: #17332a; color: var(--fx-fern); box-shadow: inset 0 0 0 2px var(--fx-fern);
  animation: fx-pulse 2s ease-out infinite;
}
.fx-step.is-active .fx-step__label { color: #e6f0e4; }
.fx-step.is-done .fx-step__dot { background: var(--fx-fern); color: #07240f; box-shadow: none; }
.fx-step.is-done .fx-step__label { color: #cfe2d2; }
@keyframes fx-pulse {
  0% { box-shadow: inset 0 0 0 2px var(--fx-fern), 0 0 0 0 rgba(127, 208, 138, .5); }
  100% { box-shadow: inset 0 0 0 2px var(--fx-fern), 0 0 0 14px rgba(127, 208, 138, 0); }
}

.fx-pay__panel {
  display: grid; gap: 2rem; grid-template-columns: 1fr;
  background: linear-gradient(180deg, rgba(23, 65, 58, .45), rgba(13, 33, 26, .75));
  border-radius: 26px; padding: 1.75rem;
  box-shadow: inset 0 0 0 1px var(--fx-line), 0 30px 60px rgba(0, 0, 0, .35);
  transition: opacity .6s ease, transform .6s ease;
}
@media (min-width: 820px) { .fx-pay__panel { grid-template-columns: 1.25fr 1fr; padding: 2.25rem; } }
.fx-pay__panel.is-leaving { opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none; }

.fx-order-name { font: 700 1.5rem/1.15 var(--fx-display); margin: 0; color: #f4f8ee; }
.fx-order-region { color: var(--fx-mist); font-size: .9rem; margin: .2rem 0 1.5rem; }
.fx-field-label { font-size: .85rem; color: var(--fx-mist); margin: 0 0 .4rem; }
.fx-copyrow {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: rgba(6, 18, 13, .55); border-radius: 14px; padding: .7rem .8rem .7rem 1rem;
  box-shadow: inset 0 0 0 1px var(--fx-line); margin-bottom: 1.1rem;
}
.fx-copyrow code { font: 600 1rem/1.3 ui-monospace, Menlo, Consolas, monospace; color: #e8f1e6; word-break: break-all; }
.fx-copyrow--amount code { font-size: 1.5rem; color: var(--fx-firefly); font-variant-numeric: tabular-nums; }
.fx-copy {
  flex: none; border: 0; cursor: pointer; border-radius: 10px; padding: .5rem .75rem;
  background: rgba(127, 208, 138, .16); color: var(--fx-fern); font: 600 .8rem/1 var(--fx-sans);
  display: inline-flex; align-items: center; gap: .3rem; transition: background-color .15s;
}
.fx-copy:hover { background: rgba(127, 208, 138, .28); }
.fx-copy .material-symbols-outlined { font-size: 16px; }
.fx-copy.is-copied { background: var(--fx-fern); color: #07240f; }
.fx-warn {
  font-size: .85rem; line-height: 1.55; color: #f2c9a4; margin: 0;
  padding: .8rem 1rem; border-radius: 12px; background: rgba(217, 139, 106, .12);
  box-shadow: inset 0 0 0 1px rgba(217, 139, 106, .3);
}

.fx-qrbox { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.fx-qr {
  position: relative; width: 208px; height: 208px; padding: 12px; background: #f4f8ee; border-radius: 20px;
}
.fx-qr img { width: 100%; height: 100%; display: block; border-radius: 8px; }
.fx-qr::before, .fx-qr::after { /* кольца «слушаем блокчейн» */
  content: ''; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(127, 208, 138, .55); animation: fx-ripple 3.2s ease-out infinite;
}
.fx-qr::after { animation-delay: 1.6s; }
@keyframes fx-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.32); opacity: 0; } }
.fx-listen { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: #cfe2d2; }
.fx-listen__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fx-fern); animation: fx-blink 1.6s ease-in-out infinite; }
@keyframes fx-blink { 50% { opacity: .25; } }
.fx-elapsed { font-variant-numeric: tabular-nums; color: var(--fx-mist); font-size: .85rem; }

.fx-manual { grid-column: 1 / -1; border-top: 1px solid var(--fx-line); padding-top: 1.25rem; }
.fx-manual summary { cursor: pointer; font-weight: 600; color: #dbe9dc; list-style: none; display: flex; align-items: center; gap: .4rem; }
.fx-manual summary::-webkit-details-marker { display: none; }
.fx-manual summary::before { content: '▸'; color: var(--fx-fern); transition: transform .2s; }
.fx-manual[open] summary::before { transform: rotate(90deg); }
.fx-manual p { color: var(--fx-mist); font-size: .88rem; line-height: 1.55; margin: .7rem 0; }
.fx-manual form { display: flex; gap: .6rem; flex-wrap: wrap; }
.fx-manual input[type="text"] {
  flex: 1 1 14rem; padding: .75rem 1rem; border-radius: 12px; border: 0;
  background: rgba(6, 18, 13, .6); color: #f4f8ee; box-shadow: inset 0 0 0 1px var(--fx-line);
  font: 500 .9rem/1.2 ui-monospace, Menlo, Consolas, monospace;
}
.fx-manual input[type="text"]:focus { box-shadow: inset 0 0 0 2px var(--fx-fern); outline: none; }
.fx-err { color: #ffb4a8; font-size: .9rem; margin: .5rem 0 0; }
.fx-testbox { grid-column: 1 / -1; font-size: .82rem; color: var(--fx-mist); }
.fx-testbox button { margin-top: .5rem; }
.fx-btn.is-busy { opacity: .7; pointer-events: none; }

/* сцена рождения */
.fx-birth { display: none; position: relative; text-align: center; }
.fx-birth.is-visible { display: block; }
.fx-birth__stage {
  position: relative; display: grid; gap: 2.25rem; align-items: center; justify-items: center;
  padding: 2.5rem 1.5rem; border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, #0c2422 0%, #173e36 60%, #6a6a46 100%);
  box-shadow: inset 0 0 0 1px var(--fx-line), 0 30px 70px rgba(0, 0, 0, .45);
}
@media (min-width: 860px) {
  .fx-birth__stage { grid-template-columns: minmax(260px, 340px) 1fr; justify-items: stretch; text-align: left; padding: 3rem; gap: 3.5rem; }
}
.fx-birth__stage::before { /* вспышка света в момент рождения */
  content: ''; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1;
  border-radius: 50%; transform: translate(-50%, -50%) scale(.1); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 238, 170, .85), rgba(240, 181, 110, .35) 35%, transparent 65%);
}
.fx-birth.is-playing .fx-birth__stage::before { animation: fx-burst 2s ease-out forwards; }
@keyframes fx-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
.fx-birth__card { width: min(100%, 340px); position: relative; z-index: 1; opacity: 0; transform: translateY(18px) scale(.96); }
.fx-birth.is-playing .fx-birth__card { animation: fx-card-in 1.1s cubic-bezier(.2, .9, .3, 1) .15s forwards; }
.fx-birth.is-final .fx-birth__card { opacity: 1; transform: none; animation: none; }
@keyframes fx-card-in { to { opacity: 1; transform: none; } }

/* проявление картинки из тумана */
.fx-birth.is-playing .fx-img { animation: fx-unveil 2.8s cubic-bezier(.3, .6, .3, 1) .3s both; }
@keyframes fx-unveil {
  0% { filter: blur(26px) saturate(0) brightness(1.7); transform: scale(1.14); }
  100% { filter: none; transform: none; }
}
.fx-birth.is-playing .fx-face--front > .fx-fog {
  animation: fx-fog 2.8s ease-out .3s forwards;
}
.fx-fog {
  position: absolute; inset: -20%; z-index: 2; pointer-events: none; opacity: 0;
  background:
    radial-gradient(60% 40% at 30% 40%, rgba(238, 243, 230, .8), transparent 70%),
    radial-gradient(55% 45% at 72% 62%, rgba(238, 243, 230, .7), transparent 70%);
}
@keyframes fx-fog { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(14%); } }

.fx-birth__text { position: relative; z-index: 1; min-width: 0; }
.fx-birth__text h2 { font: 700 clamp(1.9rem, 3.6vw, 2.8rem)/1.1 var(--fx-display); color: #f4f8ee; margin: 0 0 .5rem; }
.fx-birth__token { display: inline-block; font-size: .85rem; color: #f0d49a; margin: 0 0 1.25rem; font-variant-numeric: tabular-nums; }
.fx-type {
  font: italic 500 1.2rem/1.65 var(--fx-display); color: #dcebdc; min-height: 8.5rem; margin: 0 0 1.75rem;
  max-width: 34rem; cursor: pointer;
}
.fx-type__cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--fx-amber); margin-left: 2px; vertical-align: -.15em; animation: fx-blink 1s steps(2) infinite; }
.fx-birth__actions { display: flex; flex-wrap: wrap; gap: .85rem; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; }
@media (max-width: 859px) { .fx-birth__actions { justify-content: center; } .fx-type { margin-left: auto; margin-right: auto; } }
.fx-birth.is-done .fx-birth__actions, .fx-birth.is-final .fx-birth__actions { opacity: 1; transform: none; }

.fx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

@media (prefers-reduced-motion: reduce) {
  .fx-step.is-active .fx-step__dot, .fx-qr::before, .fx-qr::after, .fx-listen__dot { animation: none; }
  .fx-birth.is-playing .fx-img, .fx-birth.is-playing .fx-fog, .fx-birth.is-playing .fx-birth__stage::before { animation: none; }
  .fx-birth__card { opacity: 1; transform: none; }
  .fx-birth__actions { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Прочее: карточки каталога
   -------------------------------------------------------------------------- */
.fx-species {
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 65, 58, .5), rgba(13, 33, 26, .8));
  box-shadow: inset 0 0 0 1px var(--fx-line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fx-species:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(127, 208, 138, .4), 0 18px 40px rgba(0, 0, 0, .35); }
.fx-species__art {
  background: linear-gradient(180deg, #0f2d2c 0%, #1d4a3f 70%, #7a7048 100%); padding: 10px 0 0;
}
@media (prefers-reduced-motion: reduce) { .fx-species, .fx-species:hover { transition: none; transform: none; } }

/* --------------------------------------------------------------------------
   Кнопка Google на формах входа/регистрации
   -------------------------------------------------------------------------- */
.fx-google {
  display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%;
  padding: .8rem 1rem; border-radius: 12px; text-decoration: none;
  background: #f4f8ee; color: #1b2a22; font: 600 .95rem/1 var(--fx-sans);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: background-color .15s ease, transform .15s ease;
}
.fx-google:hover { background: #fff; }
.fx-google:active { transform: scale(.99); }
.fx-or {
  display: flex; align-items: center; gap: .9rem; margin: 1.1rem 0;
  font-size: .8rem; color: var(--fx-mist);
}
.fx-or::before, .fx-or::after { content: ''; flex: 1; height: 1px; background: var(--fx-line); }

/* --------------------------------------------------------------------------
   Юридические страницы (Privacy Policy, Terms of Service)
   -------------------------------------------------------------------------- */
.fx-legal__hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 40% 90% at 82% 110%, rgba(247, 192, 120, .55), transparent 70%),
    linear-gradient(180deg, #0b1f21 0%, #153a35 60%, #3d6446 100%);
}
.fx-legal__heroin {
  max-width: 48rem; margin: 0 auto; padding: 3.5rem 1.5rem 3rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.fx-legal__kicker { margin: 0 0 .5rem; font-size: .9rem; color: var(--fx-amber); font-weight: 600; }
.fx-legal__hero h1 { margin: 0; font: 700 clamp(2.4rem, 5vw, 3.6rem)/1.05 var(--fx-display); color: #f4f8ee; }
.fx-legal__updated { margin: .8rem 0 0; font-size: .9rem; color: #b4cbb9; }
.fx-legal__tree { flex: none; width: 190px; height: 130px; margin-bottom: -.4rem; opacity: .95; }
@media (max-width: 640px) { .fx-legal__tree { display: none; } }

.fx-legal { max-width: 48rem; margin: 0 auto; padding: 2.75rem 1.5rem 5rem; color: #d3e2d6; font-size: 1.02rem; line-height: 1.75; }
.fx-legal__lead { font-size: 1.15rem; line-height: 1.7; color: #e6f0e4; margin: 0 0 2rem; }
.fx-legal h2 { font: 700 1.7rem/1.2 var(--fx-display); color: #f4f8ee; margin: 2.75rem 0 .8rem; scroll-margin-top: 6rem; }
.fx-legal h3 { font: 700 1.1rem/1.3 var(--fx-sans); color: #e6f0e4; margin: 1.5rem 0 .4rem; }
.fx-legal p { margin: 0 0 1rem; }
.fx-legal ul, .fx-legal ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.fx-legal li { margin: .35rem 0; padding-left: .2rem; }
.fx-legal li::marker { color: var(--fx-moss); }
.fx-legal strong { color: #f4f8ee; font-weight: 600; }
.fx-legal a { color: var(--fx-amber); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(240, 181, 110, .45); }
.fx-legal a:hover { text-decoration-color: var(--fx-amber); }
.fx-legal code { font: .9em ui-monospace, Menlo, Consolas, monospace; background: rgba(6, 18, 13, .6); padding: .1rem .4rem; border-radius: 6px; color: var(--fx-firefly); }

.fx-legal__summary {
  margin: 0 0 2rem; padding: 1.4rem 1.6rem 1rem; border-radius: 20px;
  background: linear-gradient(180deg, rgba(23, 65, 58, .55), rgba(13, 33, 26, .8));
  box-shadow: inset 0 0 0 1px var(--fx-line);
}
.fx-legal .fx-legal__summary h2 { margin: 0 0 .6rem; font-size: 1.35rem; }
.fx-legal__toc { margin: 0 0 1rem; padding: 1.2rem 1.5rem; border-radius: 20px; background: rgba(6, 18, 13, .45); box-shadow: inset 0 0 0 1px var(--fx-line); }
.fx-legal__toc p { margin: 0 0 .5rem; font-size: .85rem; color: var(--fx-mist); }
.fx-legal__toc ol { margin: 0; columns: 2; column-gap: 2rem; font-size: .95rem; line-height: 1.5; }
.fx-legal__toc li { break-inside: avoid; margin: .3rem 0; }
@media (max-width: 640px) { .fx-legal__toc ol { columns: 1; } }

/* футер: юридические ссылки */
.fx-footlinks { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: center; }
.fx-footlinks a { color: var(--fx-mist); text-decoration: none; transition: color .15s; }
.fx-footlinks a:hover { color: var(--fx-amber); text-decoration: underline; text-underline-offset: 3px; }

/* пометка о согласии на формах */
.fx-agree { margin: 1rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--fx-mist); }
.fx-agree a { color: var(--fx-amber); text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Игра: блок на главной и баннер в кабинете
   -------------------------------------------------------------------------- */
.fx-scale { transform-origin: 0px 0px; }

.fx-promo {
  position: relative; overflow: hidden; border-radius: 32px; display: grid; gap: 2rem; align-items: center;
  padding: 2.25rem 1.75rem 0;
  background: radial-gradient(ellipse 60% 70% at 78% 100%, rgba(247, 192, 120, .5), transparent 70%), linear-gradient(180deg, #0e2b2b 0%, #1a463d 60%, #46694a 100%);
  box-shadow: inset 0 0 0 1px var(--fx-line), 0 30px 60px rgba(0, 0, 0, .3);
}
@media (min-width: 900px) { .fx-promo { grid-template-columns: .85fr 1.3fr; padding: 3.25rem 3rem 0 3.5rem; gap: 1.5rem; } }
.fx-promo__copy { padding-bottom: 2.25rem; }
@media (min-width: 900px) { .fx-promo__copy { padding-bottom: 3.25rem; } }
.fx-promo__kicker { margin: 0 0 .6rem; font: 600 .9rem/1 var(--fx-sans); color: var(--fx-amber); }
.fx-promo h2 { margin: 0 0 .9rem; font: 700 clamp(2rem, 4vw, 3rem)/1.08 var(--fx-display); color: #f4f8ee; text-wrap: balance; }
.fx-promo__copy > p:not(.fx-promo__kicker):not(.fx-promo__note) { margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.65; color: #cfe2d2; max-width: 33rem; }
.fx-promo__note { margin: 1rem 0 0; font-size: .85rem; color: #b4cbb9; }
.fx-promo__grow { display: flex; align-items: flex-end; justify-content: center; gap: 0; min-height: 270px; position: relative; }
.fx-promo__grow::after { content: ''; position: absolute; left: -4%; right: -4%; bottom: 0; height: 30px; background: #071a14; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.fx-promo__grow figure { position: relative; z-index: 1; margin: 0 -1.5% 10px; flex: 1; text-align: center; }
.fx-promo__grow svg { width: 100%; height: 240px; display: block; overflow: visible; }
.fx-promo__grow figcaption { position: absolute; left: 0; right: 0; bottom: -6px; z-index: 2; font: 600 .78rem/1 var(--fx-sans); color: #cfe2d2; }

.fx-gamebanner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; text-decoration: none;
  margin: -.5rem 0 2rem; padding: 1.1rem 1.4rem; border-radius: 22px;
  background: radial-gradient(ellipse 50% 120% at 100% 50%, rgba(247, 192, 120, .28), transparent 70%), linear-gradient(90deg, rgba(23, 65, 58, .7), rgba(13, 33, 26, .85));
  box-shadow: inset 0 0 0 1px var(--fx-line); transition: box-shadow .2s;
}
.fx-gamebanner:hover { box-shadow: inset 0 0 0 1px rgba(240, 181, 110, .5); }
.fx-gamebanner__text { display: flex; flex-direction: column; gap: .2rem; color: #cfe2d2; font-size: .9rem; max-width: 36rem; }
.fx-gamebanner__text strong { font: 700 1.2rem/1.2 var(--fx-display); color: #f4f8ee; }