/* The token: MHDG's facts and contract, its loop in the game, and the tokenomics wallets. */

.token { background: radial-gradient(ellipse 50% 40% at 78% 22%, #ffa43a1c, transparent 70%), var(--night); }
.token-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 64px; }
.token-copy { min-width: 0; }
.token .lead { max-width: 480px; }

.token-facts { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 36px; }
.token-facts > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.token-facts dt { margin-bottom: 6px; color: var(--dim); font-size: 13px; }
.token-facts dd { font: 34px/1 var(--display); }

.address-box { max-width: 600px; margin-top: 30px; padding: 16px 16px 16px 20px; background: var(--plate); box-shadow: inset 3px 0 0 var(--torch), inset 0 0 0 2px #4a4232; clip-path: var(--corners); }
.address-label { display: block; margin-bottom: 8px; color: #d6b67a; font-size: 13px; }
.token-actions { display: flex; gap: 14px; margin-top: 26px; }
.token-warning { max-width: 520px; margin-top: 20px; color: var(--dim); font-size: 14px; }

.token-art { position: relative; display: grid; place-items: center; min-height: 480px; }
.token-halo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #ffa43a2e, transparent 56%); }
.token-halo::after { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; content: ""; border: 1px solid #ffa43a26; transform: translate(-50%, -50%) rotate(45deg); }
.token-coin { position: relative; width: 320px; height: 320px; image-rendering: auto; filter: drop-shadow(0 0 30px #ff9d3540); animation: token-float 4.5s ease-in-out infinite; }
@keyframes token-float { 50% { translate: 0 -8px; } }

.token-loop { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--line); }
.token-loop li { display: flex; align-items: flex-start; gap: 14px; padding-right: 32px; }
.token-loop li + li { padding-left: 32px; border-left: 1px solid var(--line); }
.token-loop .loop-number { padding-top: 6px; }
.token-loop h3 { margin-bottom: 6px; font-size: 30px; }
.token-loop p { color: var(--muted); font-size: 16px; }

/* ---------- Tokenomics ---------- */
.tokenomics { display: grid; grid-template-columns: 340px 1fr; gap: 64px; margin-top: 112px; padding-top: 72px; border-top: 1px solid var(--line); }
.tokenomics-copy h3 { margin-bottom: 16px; font-size: 44px; line-height: .95; }
.tokenomics-copy p { color: var(--muted); font-size: 16px; }
.allocation { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 48px; }
.allocation-chart { position: relative; display: grid; place-items: center; align-content: center; width: 240px; height: 240px; }
.allocation-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.allocation-total { font: 56px/1 var(--display); }
.allocation-label { color: var(--dim); font-size: 13px; }
.allocation-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "mark name share" ". wallet wallet"; align-items: center; gap: 12px 14px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.allocation-row:first-child { border-top: 1px solid var(--line); }
.allocation-row::before { grid-area: mark; width: 10px; height: 10px; content: ""; background: var(--share); }
.allocation-row h4 { grid-area: name; font-size: 28px; }
.allocation-row > strong { grid-area: share; color: var(--share); font: 44px/1 var(--display); font-weight: 400; }
.allocation-row > strong > span { font-size: 24px; }
.wallet-row { grid-area: wallet; padding: 8px 8px 8px 16px; background: #161a23; box-shadow: inset 3px 0 0 var(--share), inset 0 0 0 2px var(--line); clip-path: var(--corners-small); }
.wallet-row code { font-size: 14px; }

@media (max-width: 1199px) {
  .token-grid { gap: 40px; }
  .token-coin { width: 260px; height: 260px; }
  .tokenomics { grid-template-columns: 1fr; gap: 40px; }
  .tokenomics-copy { max-width: 560px; }
}
@media (max-width: 959px) {
  .token-grid { grid-template-columns: 1fr; }
  .token-art { grid-row: 1; min-height: 300px; }
  .token-coin { width: 220px; height: 220px; }
  .token-halo::after { width: 230px; height: 230px; }
  .allocation { grid-template-columns: 1fr; justify-items: center; gap: 32px; }
  .allocation-rows { width: 100%; }
}
@media (max-width: 719px) {
  .token-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 16px; }
  .token-facts > div + div { padding-left: 16px; }
  .token-facts dd { font-size: 28px; }
  .token-actions .button { width: 100%; }
  .token-loop { grid-template-columns: 1fr; margin-top: 40px; padding-top: 8px; }
  .token-loop li, .token-loop li + li { padding: 18px 0; border-left: 0; }
  .token-loop li + li { border-top: 1px solid var(--line); }
  .tokenomics { margin-top: 72px; padding-top: 56px; }
  .allocation-chart { width: 200px; height: 200px; }
  .allocation-row h4 { font-size: 25px; }
  .allocation-row > strong { font-size: 38px; }
}