/* ========================================================================== */
/* =================== START TOKENOMIC SECTION — SEND THIS =================== */
/* ========================================================================== */

.section__content--tokenomic {
  position: relative;
  width: min(100%, 1580px);
  height: 100%;
  margin: 0 auto;
  padding:
    clamp(82px, 7vh, 108px)
    clamp(22px, 2vw, 34px)
    clamp(82px, 7vh, 108px);
  transform: none;
  box-sizing: border-box;
}

.tokenomic-system {
  --tokenomic-main-rgb: 221, 114, 255;
  --tokenomic-secondary-rgb: 98, 195, 255;
  --tokenomic-green-rgb: 116, 255, 120;

  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(22px, 1.8vw, 34px);
  border: 1px solid rgba(255,255,255,0.075);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--tokenomic-main-rgb), 0.075), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(var(--tokenomic-secondary-rgb), 0.05), transparent 42%),
    linear-gradient(180deg, rgba(7,12,25,0.80), rgba(4,8,17,0.86));
  /* niente glow colorato sulla card globale: il glow resta solo nel container
     del testo (.tokenomic-center-display). Qui solo ombra neutra di profondità. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 0 24px rgba(0,0,0,0.22);
  isolation: isolate;
}

.tokenomic-system::before,
.tokenomic-system::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tokenomic-system::before {
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 72%);
  opacity: 0.38;
}

.tokenomic-system::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(255,255,255,0.045) 18.4%, transparent 18.8%),
    radial-gradient(circle at 50% 50%, transparent 0 31%, rgba(var(--tokenomic-secondary-rgb),0.10) 31.3%, transparent 31.8%),
    radial-gradient(circle at 50% 50%, transparent 0 43%, rgba(var(--tokenomic-main-rgb),0.09) 43.4%, transparent 43.9%);
  opacity: 0.75;
  animation: tokenomicRingsPulse 4.8s ease-in-out infinite;
}

.tokenomic-center-display {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 8;
  width: min(34vw, 520px);
  min-width: 360px;
  min-height: 310px;
  padding: clamp(24px, 2vw, 34px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: clamp(14px, 1.2vw, 20px);
  transform: translate(-50%, -50%);
  border-radius: clamp(22px, 1.8vw, 34px);
  border: 1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(8,12,25,0.78), rgba(3,6,14,0.86)),
    radial-gradient(circle at 50% 0%, rgba(var(--tokenomic-main-rgb), 0.14), transparent 46%),
    radial-gradient(circle at 50% 100%, rgba(var(--tokenomic-secondary-rgb), 0.10), transparent 48%);
  box-shadow:
    0 0 22px rgba(0,0,0,0.24),
    0 0 54px rgba(var(--tokenomic-main-rgb), 0.12),
    inset 0 0 0 1px rgba(255,255,255,0.025);
  overflow: hidden;
  opacity: 0.86;
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(.22,1,.36,1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.tokenomic-center-display.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.025);
  border-color: rgba(var(--tokenomic-main-rgb), 0.36);
  box-shadow:
    0 0 28px rgba(0,0,0,0.28),
    0 0 64px rgba(var(--tokenomic-main-rgb), 0.18),
    0 0 92px rgba(var(--tokenomic-secondary-rgb), 0.10),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.tokenomic-center-display::before,
.tokenomic-center-display::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.tokenomic-center-display::before {
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 48%, transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 30%);
  opacity: 0.55;
}

.tokenomic-center-display::after {
  inset: 12px;
  border: 1px solid rgba(255,255,255,0.055);
}

.tokenomic-center-display__scan {
  position: absolute;
  inset: -26% -34%;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      92deg,
      transparent 0%,
      transparent 40%,
      rgba(255,255,255,0.04) 47%,
      rgba(var(--tokenomic-main-rgb), 0.22) 50%,
      rgba(255,255,255,0.10) 53%,
      transparent 60%,
      transparent 100%
    );
  filter: blur(14px);
  mix-blend-mode: screen;
}

.tokenomic-center-display.is-switching .tokenomic-center-display__scan {
  animation: tokenomicCenterScan 720ms cubic-bezier(.16,.84,.22,1) 1;
}

.tokenomic-center-display__label,
.tokenomic-center-display__percent,
.tokenomic-center-display__text {
  position: relative;
  z-index: 2;
}

.tokenomic-center-display__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.48em 1em 0.38em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.035);
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.58rem, 0.52vw + 0.12vh, 0.86rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(229,238,255,0.86);
}

.tokenomic-center-display__percent {
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(3.6rem, 5.8vw, 7.8rem);
  line-height: 0.82;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(255,255,255,0.72),
    0 0 18px rgba(var(--tokenomic-main-rgb), 0.82),
    0 0 34px rgba(var(--tokenomic-main-rgb), 0.48),
    0 0 58px rgba(var(--tokenomic-secondary-rgb), 0.22);
}

.tokenomic-center-display__percent.is-percent-out {
  animation: tokenomicPercentOut 220ms ease forwards;
}

.tokenomic-center-display__percent.is-percent-in {
  animation: tokenomicPercentIn 520ms cubic-bezier(.16,.84,.22,1) forwards;
}

.tokenomic-center-display__text {
  width: min(100%, 430px);
  margin: 0;
  font-size: clamp(1rem, 0.72vw + 0.36vh, 1.26rem);
  line-height: 1.48;
  color: rgba(224,232,245,0.92);
  text-align: center;
  text-shadow: 0 0 16px rgba(0,0,0,0.32);
}

.tokenomic-center-display__text.is-fading-out {
  animation: tokenomicTextOut 260ms ease forwards;
}

.tokenomic-explanation-word {
  display: inline-block;
  opacity: 0;
  transform: translateX(var(--tokenomic-word-offset, 0px)) translateY(8px);
  filter: blur(8px);
  animation: tokenomicWordIn 560ms cubic-bezier(.16,.84,.22,1) forwards;
  animation-delay: var(--tokenomic-word-delay, 0ms);
  will-change: transform, opacity, filter;
}

.tokenomic-explanation-word.is-hot {
  color: rgba(255,255,255,0.98);
  text-shadow:
    0 0 6px rgba(var(--tokenomic-main-rgb), 0.62),
    0 0 14px rgba(var(--tokenomic-secondary-rgb), 0.28);
}

.tokenomic-card {
  position: absolute;
  z-index: 7;
  width: clamp(168px, 13.5vw, 240px);
  min-height: clamp(92px, 8.5vh, 128px);
  padding: clamp(14px, 1.1vw, 20px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
  border-radius: clamp(16px, 1.2vw, 22px);
  border: 1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    radial-gradient(circle at 50% 0%, rgba(var(--tokenomic-card-rgb, 221,114,255), 0.18), transparent 58%),
    rgba(5,9,20,0.76);
  box-shadow:
    0 0 18px rgba(0,0,0,0.20),
    0 0 36px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.10),
    inset 0 0 0 1px rgba(255,255,255,0.025);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transform:
    translate(-50%, -50%)
    translateZ(0)
    rotateX(var(--tokenomic-tilt-x, 0deg))
    rotateY(var(--tokenomic-tilt-y, 0deg));
  transition:
    transform 360ms cubic-bezier(.22,1,.36,1),
    opacity 260ms ease,
    filter 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    background 260ms ease;
}

.tokenomic-card::before,
.tokenomic-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.tokenomic-card::before {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,0.08) 46%,
      rgba(var(--tokenomic-card-rgb, 221,114,255), 0.18) 50%,
      transparent 58%
    );
  transform: translateX(-120%);
  opacity: 0;
}

.tokenomic-card::after {
  inset: 0;
  z-index: 1;
  padding: 1.5px;
  opacity: 0;
  background:
    conic-gradient(
      from var(--tokenomic-border-angle, 0deg),

      transparent 0deg,
      transparent 34deg,

      rgba(var(--tokenomic-card-rgb, 221,114,255), 0.95) 64deg,
      rgba(255,255,255,0.98) 78deg,
      rgba(var(--tokenomic-card-rgb, 221,114,255), 0.86) 96deg,

      transparent 126deg,
      transparent 214deg,

      rgba(var(--tokenomic-card-rgb, 221,114,255), 0.95) 244deg,
      rgba(255,255,255,0.98) 258deg,
      rgba(var(--tokenomic-card-rgb, 221,114,255), 0.86) 276deg,

      transparent 306deg,
      transparent 360deg
    );

  -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;

  filter:
    drop-shadow(0 0 6px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.36))
    drop-shadow(0 0 14px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.22));
}

/* Effetti attivati dal TAP/CLICK (is-focus-active), non più dall'hover:
   la barra luminosa che percorre i bordi è solo sul pulsante premuto. */
.tokenomic-card.is-focus-active::before {
  opacity: 1;
  animation: tokenomicCardSweep 900ms ease 1;
}

.tokenomic-card.is-focus-active::after {
  opacity: 1;
  animation:
    tokenomicBorderRotate 2.4s linear infinite,
    tokenomicBorderPulse 1.8s ease-in-out infinite;
}

.tokenomic-system.is-focusing .tokenomic-card {
  opacity: 0.52;
  filter: saturate(0.82) brightness(0.82);
}

.tokenomic-system.is-focusing .tokenomic-card.is-last-selected {
  opacity: 0.72;
  filter: saturate(0.95) brightness(0.95);
}

.tokenomic-system.is-focusing .tokenomic-card.is-focus-active {
  opacity: 1;
  filter: saturate(1.16) brightness(1.16) blur(0);
  border-color: rgba(var(--tokenomic-card-rgb, 221,114,255), 0.54);
  box-shadow:
    0 0 20px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.24),
    0 0 52px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.20),
    0 0 82px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.10),
    inset 0 0 0 1px rgba(255,255,255,0.055);
  transform:
    translate(-50%, -50%)
    translateZ(0)
    rotateX(var(--tokenomic-tilt-x, 0deg))
    rotateY(var(--tokenomic-tilt-y, 0deg))
    scale(1.08);
}

.tokenomic-card__index {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.045);
  font-family: "Orbitron", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.82);
}

.tokenomic-card__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(0.95rem, 0.92vw + 0.12vh, 1.42rem);
  line-height: 0.94;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #f4f7ff;
  transition:
    color 220ms ease,
    text-shadow 260ms ease,
    opacity 220ms ease;
  text-shadow:
    0 0 5px rgba(255,255,255,0.46),
    0 0 14px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.62),
    0 0 26px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.28);
}
.tokenomic-card.is-focus-active .tokenomic-card__title {
  color: rgb(var(--tokenomic-card-rgb, 221,114,255));

  text-shadow:
    0 0 6px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.95),
    0 0 14px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.78),
    0 0 28px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.55),
    0 0 48px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.32);
}

.tokenomic-card__line {
  position: relative;
  z-index: 2;
  width: 72%;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(var(--tokenomic-card-rgb, 221,114,255), 0.90),
      rgba(255,255,255,0.85),
      rgba(var(--tokenomic-card-rgb, 221,114,255), 0.90),
      transparent);
  box-shadow:
    0 0 8px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.54),
    0 0 16px rgba(var(--tokenomic-card-rgb, 221,114,255), 0.26);
}

/* ================= TOKENOMIC FINAL 10-BUTTON LAYOUT ================= */

.tokenomic-center-display {
  left: 50%;
  top: 50%;
  width: clamp(210px, 25vw, 420px);
  min-width: unset;
  min-height: clamp(220px, 30vh, 320px);
}

.tokenomic-card {
  width: clamp(210px, 25vw, 420px);
  min-height: clamp(58px, 8.2vh, 92px);
  padding: clamp(10px, 0.8vw, 14px) clamp(14px, 1vw, 18px);
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(10px, 0.9vw, 16px);
  row-gap: 7px;
  align-items: center;
  justify-items: stretch;
}

.tokenomic-card__index {
  grid-column: 1;
  grid-row: 1 / 3;
  min-width: 38px;
  height: 34px;
}

.tokenomic-card__title {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  justify-self: start;
  font-size: clamp(0.82rem, 0.78vw + 0.08vh, 1.22rem);
}

.tokenomic-card__line {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  justify-self: stretch;
}

/* izquierda */
.tokenomic-card--1 {
  --tokenomic-card-rgb: 98, 195, 255;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 18%;
  top: 16%;
}

.tokenomic-card--4 {
  --tokenomic-card-rgb: 255, 216, 77;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 18%;
  top: 38%;
}

.tokenomic-card--6 {
  --tokenomic-card-rgb: 70, 240, 220;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 18%;
  top: 62%;
}

.tokenomic-card--8 {
  --tokenomic-card-rgb: 180, 107, 255;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 18%;
  top: 84%;
}

/* arriba y abajo del central */
.tokenomic-card--2 {
  --tokenomic-card-rgb: 221, 114, 255;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 50%;
  top: 16%;
}

.tokenomic-card--10 {
  --tokenomic-card-rgb: 255, 138, 43;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 50%;
  top: 84%;
}

/* derecha */
.tokenomic-card--5 {
  --tokenomic-card-rgb: 255, 104, 204;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 82%;
  top: 16%;
}

.tokenomic-card--3 {
  --tokenomic-card-rgb: 116, 255, 120;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 82%;
  top: 38%;
}

.tokenomic-card--7 {
  --tokenomic-card-rgb: 255, 255, 255;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 82%;
  top: 62%;
}

.tokenomic-card--9 {
  --tokenomic-card-rgb: 70, 180, 255;
  --tokenomic-tilt-x: 0deg;
  --tokenomic-tilt-y: 0deg;
  left: 82%;
  top: 84%;
}

/* orden de entrada */
.tokenomic-card--1 { --tokenomic-intro-order: 1; }
.tokenomic-card--2 { --tokenomic-intro-order: 2; }
.tokenomic-card--5 { --tokenomic-intro-order: 3; }
.tokenomic-card--4 { --tokenomic-intro-order: 4; }
.tokenomic-card--3 { --tokenomic-intro-order: 5; }
.tokenomic-card--6 { --tokenomic-intro-order: 6; }
.tokenomic-card--7 { --tokenomic-intro-order: 7; }
.tokenomic-card--8 { --tokenomic-intro-order: 8; }
.tokenomic-card--10 { --tokenomic-intro-order: 9; }
.tokenomic-card--9 { --tokenomic-intro-order: 10; }
#tokenomic.is-active .tokenomic-system {
  animation: tokenomicSystemIntro 1.1s cubic-bezier(.22,1,.36,1) both 0.04s;
}

#tokenomic.is-active .tokenomic-card {
  animation: tokenomicCardIntro 760ms cubic-bezier(.22,1,.36,1) backwards;
  animation-delay: calc(0.08s + (var(--tokenomic-intro-order, 1) * 0.045s));
}
@keyframes tokenomicSystemIntro {
  0% {
    opacity: 0;
    transform: translateY(34px) scale(0.97);
    filter: blur(12px) brightness(1.12);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes tokenomicCardIntro {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translateY(34px)
      rotateX(var(--tokenomic-tilt-x, 0deg))
      rotateY(var(--tokenomic-tilt-y, 0deg))
      scale(0.9);
    filter: blur(10px) brightness(1.25);
  }
  100% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translateY(0)
      rotateX(var(--tokenomic-tilt-x, 0deg))
      rotateY(var(--tokenomic-tilt-y, 0deg))
      scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes tokenomicRingsPulse {
  0%, 100% {
    opacity: 0.52;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.025);
  }
}

@keyframes tokenomicCenterScan {
  0% {
    opacity: 0;
    transform: translateX(-38%) rotate(10deg);
  }
  18% {
    opacity: 0.96;
  }
  100% {
    opacity: 0;
    transform: translateX(38%) rotate(10deg);
  }
}

@keyframes tokenomicCardSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes tokenomicBorderRotate {
  0% {
    --tokenomic-border-angle: 0deg;
  }

  100% {
    --tokenomic-border-angle: 360deg;
  }
}

@keyframes tokenomicBorderPulse {
  0%, 100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

@keyframes gameBorderRotate {
  0% {
    --game-border-angle: 0deg;
  }

  100% {
    --game-border-angle: 360deg;
  }
}

@keyframes gameBorderPulse {
  0%, 100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

@keyframes tokenomicTextOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(7px);
  }
}

@keyframes tokenomicWordIn {
  0% {
    opacity: 0;
    transform: translateX(var(--tokenomic-word-offset, 0px)) translateY(8px);
    filter: blur(8px);
  }
  64% {
    opacity: 1;
    transform: translateX(0) translateY(0);
    filter: blur(0.7px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
    filter: blur(0);
  }
}

@keyframes tokenomicPercentOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    filter: blur(10px);
  }
}

@keyframes tokenomicPercentIn {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(1.08);
    filter: blur(12px) brightness(1.6);
  }
  58% {
    opacity: 1;
    transform: translateY(0) scale(0.985);
    filter: blur(1px) brightness(1.16);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) brightness(1);
  }
}

@media (max-width: 1180px) {
  .tokenomic-center-display {
    width: min(42vw, 500px);
    min-width: 320px;
  }

  .tokenomic-card {
    width: clamp(148px, 15vw, 210px);
  }

  .tokenomic-card--4 { left: 14%; }
  .tokenomic-card--5 { left: 86%; }
}

@media (max-width: 860px) {
  .section__content--tokenomic {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .tokenomic-system {
    overflow: auto;
    min-height: 900px;
  }

  .tokenomic-center-display {
    width: min(86%, 520px);
    min-width: 0;
    top: 48%;
  }

  .tokenomic-card {
    width: min(38vw, 210px);
  }

  .tokenomic-card--1 { left: 25%; top: 13%; }
  .tokenomic-card--2 { left: 75%; top: 13%; }
  .tokenomic-card--3 { left: 25%; top: 28%; }
  .tokenomic-card--4 { left: 75%; top: 28%; }
  .tokenomic-card--5 { left: 25%; top: 76%; }
  .tokenomic-card--6 { left: 75%; top: 76%; }
  .tokenomic-card--7 { left: 50%; top: 91%; }
}

@media (max-height: 760px) {
  .section__content--tokenomic {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .tokenomic-center-display {
    min-height: 250px;
    padding: 22px;
  }

  .tokenomic-card {
    min-height: 82px;
  }

  .tokenomic-center-display__percent {
    font-size: clamp(3rem, 5vw, 6.2rem);
  }

  .tokenomic-center-display__text {
    font-size: clamp(0.88rem, 0.62vw + 0.28vh, 1.06rem);
    line-height: 1.34;
  }
}
/* ================= TOKENOMIC ACTIVE COLOR SYNC — KEEP THIS ================= */

.tokenomic-system {
  --tokenomic-active-rgb: 221, 114, 255;
}

.tokenomic-center-display {
  box-shadow:
    0 0 22px rgba(0,0,0,0.28),
    0 0 26px rgba(var(--tokenomic-active-rgb), 0.10),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* glow contenuto sul container del testo (alone ravvicinato, non si espande
   fino a invadere la card globale) */
.tokenomic-center-display.is-active {
  border-color: rgba(var(--tokenomic-active-rgb), 0.44);
  box-shadow:
    0 0 24px rgba(0,0,0,0.30),
    0 0 24px rgba(var(--tokenomic-active-rgb), 0.30),
    0 0 44px rgba(var(--tokenomic-active-rgb), 0.16),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

.tokenomic-center-display__percent {
  text-shadow:
    0 0 6px rgba(255,255,255,0.72),
    0 0 18px rgba(var(--tokenomic-active-rgb), 0.86),
    0 0 36px rgba(var(--tokenomic-active-rgb), 0.55),
    0 0 64px rgba(var(--tokenomic-active-rgb), 0.28);
}
/* ===== TOKENOMIC CENTER AUTO-FIT BETWEEN BUTTONS — FIX ===== */

.tokenomic-system {
  --tokenomic-card-w: clamp(210px, 25vw, 420px);
  --tokenomic-card-h: clamp(58px, 8.2vh, 92px);
  --tokenomic-side-x: 18%;
  --tokenomic-center-gap-x: clamp(18px, 2.2vw, 44px);
  --tokenomic-center-gap-y: clamp(16px, 2vh, 34px);
}

.tokenomic-card {
  width: var(--tokenomic-card-w);
  min-height: var(--tokenomic-card-h);
}

.tokenomic-center-display {
  width: clamp(
    190px,
    calc(
      (100% - (2 * var(--tokenomic-side-x)))
      - var(--tokenomic-card-w)
      - (2 * var(--tokenomic-center-gap-x))
    ),
    420px
  );

  min-width: 0;

  min-height: clamp(
    150px,
    calc(
      60% - var(--tokenomic-card-h) - (2 * var(--tokenomic-center-gap-y))
    ),
    260px
  );

  padding: clamp(18px, 1.7vw, 34px);
}

.tokenomic-center-display__percent {
  font-size: clamp(3.2rem, 6.4vw, 6.8rem);
}

.tokenomic-center-display__text {
  font-size: clamp(0.9rem, 0.72vw + 0.22vh, 1.18rem);
  line-height: 1.36;
}

@media (max-width: 1180px) {
  .tokenomic-system {
    --tokenomic-card-w: clamp(190px, 25vw, 330px);
    --tokenomic-center-gap-x: clamp(14px, 1.8vw, 28px);
  }

  .tokenomic-center-display {
    width: clamp(
      170px,
      calc(
        (100% - (2 * var(--tokenomic-side-x)))
        - var(--tokenomic-card-w)
        - (2 * var(--tokenomic-center-gap-x))
      ),
      380px
    );
  }
}
/* ===== TOKENOMIC — ESTRECHAR BOTONES CENTRALES LATERALES ===== */

/* izquierda: MARKETING + ECOSYSTEM */
.tokenomic-card--4,
.tokenomic-card--6 {
  width: clamp(170px, 20vw, 330px);
}

/* derecha: REWARDS + BURN */
.tokenomic-card--3,
.tokenomic-card--7 {
  width: clamp(170px, 20vw, 330px);
}

.tokenomic-center-display__percent.is-small-percent {
  font-size: clamp(2.7rem, 5.2vw, 5.8rem);
}
/* ========================================================================== */
/* ==================== END TOKENOMIC SECTION — SEND THIS ==================== */

/* ==========================================================================
   MOBILE (≤768px) — TOKENOMIC: dal layout radiale a stack verticale.
   Center display in cima, card impilate sotto (l'hover non c'è su touch).
   ========================================================================== */
@media (max-width: 768px) {
  /* Il contenuto centra verticalmente il sistema: niente più spazio vuoto in alto.
     Solo un po' di padding-top per stare sotto la barra HUD. */
  .section__content--tokenomic {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(54px, 8vh, 70px) 0 16px !important;
  }

  /* Dal layout radiale a una griglia tipo "how to play": 10 pulsanti in 2 colonne
     (5 righe) e la card del contenuto in basso a tutta larghezza. Il div si adatta
     al contenuto (height:auto) ed è centrato nello schermo → nessuno spazio vuoto
     sopra i pulsanti. */
  .tokenomic-system {
    height: auto !important;
    max-height: 100%;
    min-height: 0 !important;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, minmax(34px, auto)) auto;
    gap: 7px;
    padding: 14px 12px;
  }
  .tokenomic-system::before,
  .tokenomic-system::after {
    display: none;   /* griglia + anelli radiali non servono in stack */
  }

  /* i 10 pulsanti riempiono automaticamente le prime 5 righe, stessa altezza */
  .tokenomic-card {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 8px !important;
  }

  /* testi dei pulsanti più piccoli e responsive: non si tagliano, si adattano allo
     schermo; vanno a capo agli spazi (non a metà parola) e spezzano solo se serve */
  .tokenomic-card__title {
    font-size: clamp(0.44rem, 2.3vw, 0.78rem) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  /* card 8: su mobile testo abbreviato "CEX STRATEGY" */
  .tk-title-full { display: none !important; }
  .tk-title-short { display: inline !important; }
  .tokenomic-card__index {
    min-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 0.6rem !important;
  }

  /* card del contenuto in basso (come how to play), a tutta larghezza.
     align-self:end → la card è dimensionata sul contenuto e ancorata in basso, così
     l'eventuale spazio libero finisce SOPRA (tra i bottoni e la card), non dentro. */
  .tokenomic-center-display {
    position: static !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    /* contenuto centrato verticalmente: stesso spazio sopra e sotto.
       righe content-sized + align-content:center → il gruppo è centrato. */
    align-self: stretch !important;
    align-content: center !important;
    justify-content: center !important;
    grid-template-rows: auto auto auto !important;
    min-height: clamp(190px, 34vh, 280px) !important; /* dimensione comoda, non ridotta */
    grid-column: 1 / -1;
    grid-row: 6;
    overflow: hidden;
    margin: 0 !important;
  }
  .tokenomic-center-display__text {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 22vh;
  }
}

/* Card 8: di default (desktop) mostra il testo completo, nasconde quello corto */
.tk-title-short { display: none; }

/* ===== GLOW CONTENITORE TESTO (desktop + mobile) =====
   Quando è attivo, il container del testo (#tokenomicCenterDisplay) ha lo stesso
   contorno gradiente che "si rincorre" del pulsante selezionato, dello stesso
   colore (--tokenomic-active-rgb impostato dal JS). Il glow resta sul container
   del testo, NON sulla card globale (#tokenomicSystem). */
/* bordo originale su ::after (conic @property animato = main thread): DISATTIVATO,
   sostituito da .tokenomic-center-display__border in COMPOSITOR (sotto). */
.tokenomic-center-display.is-active::after { display: none; }

/* Bordo neon COMPOSITOR del center-display (elemento iniettato via JS): conic FISSO
   ruotato via transform sul ::before; pulse di sola opacità. Visibile solo quando attivo.
   Colore = --tokenomic-active-rgb (impostato dal JS sulla selezione). */
.tokenomic-center-display__border {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  padding: 1.6px;
  overflow: hidden;
  -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;
}
/* drop-shadow STATICO con specificità+!important per battere il `filter:none` mobile
   di mobile-perf su `.tokenomic-center-display *` (così il glow del bordo resta). */
.tokenomic-center-display .tokenomic-center-display__border {
  filter:
    drop-shadow(0 0 6px rgba(var(--tokenomic-active-rgb), 0.42))
    drop-shadow(0 0 14px rgba(var(--tokenomic-active-rgb), 0.26)) !important;
}
.tokenomic-center-display.is-active .tokenomic-center-display__border {
  display: block;
  animation: tokenomicBorderPulse 1.8s ease-in-out infinite;   /* opacity → compositor */
}
.tokenomic-center-display__border::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320%;
  height: 320%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, transparent 34deg,
    rgba(var(--tokenomic-active-rgb), 0.95) 64deg,
    rgba(255,255,255,0.98) 78deg,
    rgba(var(--tokenomic-active-rgb), 0.86) 96deg,
    transparent 126deg, transparent 214deg,
    rgba(var(--tokenomic-active-rgb), 0.95) 244deg,
    rgba(255,255,255,0.98) 258deg,
    rgba(var(--tokenomic-active-rgb), 0.86) 276deg,
    transparent 306deg, transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: tokenomicCenterBorderSpin 4s linear infinite;
  will-change: transform;
}
@keyframes tokenomicCenterBorderSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ===== GLITCH SUI NUMERI DEI PULSANTI (sfalsato, gestito da JS) ===== */
.tokenomic-card__index.is-index-glitch {
  animation: tokenomicIndexGlitch 400ms steps(2, end) 1;
}

@keyframes tokenomicIndexGlitch {
  0%, 100% {
    transform: translate(0, 0);
    text-shadow: 0 0 4px rgba(255,255,255,0.40);
  }
  20% {
    transform: translate(-1.6px, 1px);
    text-shadow: 1.6px 0 rgba(255,60,168,0.9), -1.6px 0 rgba(54,189,255,0.9);
  }
  40% {
    transform: translate(1.6px, -1px);
    text-shadow: -1.6px 0 rgba(255,60,168,0.9), 1.6px 0 rgba(54,189,255,0.9);
  }
  55% {
    transform: translate(-1px, 0);
    opacity: 0.68;
  }
  70% {
    transform: translate(1px, 1px);
    text-shadow: -1.4px 0 rgba(255,60,168,0.85), 1.4px 0 rgba(54,189,255,0.85);
  }
  85% {
    transform: translate(-0.5px, -0.5px);
    opacity: 1;
  }
}