/* Finish layer. Loaded last. One visual system over the inherited V2 markup:
   pink is play (Calls, Evolve, rarity moments), green is money (staking, fees,
   jackpots, claims). No serif, no gold chrome, no purple gradients. Every rule
   here overrides an earlier one; nothing below changes markup or behaviour. */

:root {
  --ink: #0c0d15;
  --panel: #171929;
  --panel-raised: #1d1f31;
  --line: rgba(255,255,255,.085);
  --line-bright: rgba(255,255,255,.16);
  --cream: #f6f3ee;
  --text: #e9e8ef;
  --muted: #a7a9bb;
  --green: #7fdca6;
  --serif: var(--sans);
  --surface: linear-gradient(150deg, #1b1d2e, #13141f);
  --surface-soft: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  --radius-s: 12px;
  --radius: 18px;
  --radius-l: 24px;
  --shadow: 0 24px 60px rgba(0,0,0,.32);
}
.fallen-page { --serif: var(--sans); }
body { background: radial-gradient(ellipse at 18% -6%, rgba(240,123,197,.09), transparent 46rem), var(--ink); }
::selection { background: rgba(240,123,197,.35); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
h1, h2, h3 { font-style: normal; letter-spacing: -.02em; }
strong, b { font-variant-numeric: tabular-nums; }

/* Top bar: pill navigation, neutral chrome, one pink action. */
.topbar { min-height: 76px; padding: 0 24px; background: rgba(12,13,21,.9); border-bottom-color: var(--line); }
.brand strong { font: 850 17px/1.1 var(--sans); letter-spacing: -.3px; }
.brand small { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; }
.brand-mark { filter: none; }
.primary-nav { height: auto; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.035); }
.primary-nav > a, .nav-more > summary { height: 42px; padding: 0 14px; border-radius: 12px; color: var(--muted); font-size: 14px; font-weight: 700; }
.primary-nav > a:hover, .nav-more > summary:hover { color: var(--cream); background: rgba(255,255,255,.05); }
.primary-nav > a.active { color: var(--cream); background: rgba(240,123,197,.13); box-shadow: inset 0 0 0 1px rgba(240,123,197,.22); }
.primary-nav .staking-link { color: var(--green); }
.primary-nav .staking-link.active { background: rgba(127,220,166,.12); box-shadow: inset 0 0 0 1px rgba(127,220,166,.22); }
.primary-nav b { min-width: 18px; padding: 2px 6px; border-radius: 9px; color: #221226; background: var(--pink); font-size: 12px; font-weight: 800; }
.primary-nav .nav-call { height: 40px; margin: 0 4px; border: 0; border-radius: 12px; background: var(--pink); color: #221226; box-shadow: 0 6px 18px rgba(240,123,197,.22); }
.primary-nav > .evo-nav { border-radius: 12px; }
.icon-button, .wallet-button, .token-link { height: 44px; border: 1px solid var(--line-bright); border-radius: 12px; background: rgba(255,255,255,.05); color: var(--cream); }
.icon-button { width: 44px; border-radius: 50%; color: var(--muted); font: 700 17px var(--sans); }
.icon-button:hover { color: var(--cream); border-color: rgba(255,255,255,.3); }
.token-link { gap: 8px; padding: 0 14px; letter-spacing: .3px; }
.token-link::before { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); content: ""; }
.token-link:hover { border-color: rgba(127,220,166,.5); background: rgba(127,220,166,.08); }
.wallet-button { font-weight: 750; letter-spacing: .2px; }
.wallet-button.connected { border-color: rgba(127,220,166,.4); background: rgba(127,220,166,.08); }
.nav-more-menu { border-radius: 16px; background: #1b1d2d; box-shadow: var(--shadow); }
.mobile-nav { background: rgba(12,13,21,.96); backdrop-filter: blur(18px); }
.mobile-nav a.active { color: var(--pink); }

/* Notices */
.v3-migration-banner { padding: 10px 24px; background: #12241d; border-bottom-color: rgba(127,220,166,.25); font-size: 14px; }
.processing-strip { border-bottom-color: rgba(240,123,197,.25); background: rgba(19,14,28,.98); }
.processing-strip small { color: var(--pink); }
.processing-strip time { font: 800 22px var(--sans); }
.processing-strip > b { border-radius: 10px; border-color: rgba(240,123,197,.3); color: var(--pink); background: rgba(240,123,197,.07); }

/* Buttons: solid fills, one radius, 46px floor. */
.primary-button, .secondary-button, .ghost-button, .danger-button, .wide-button { min-height: 46px; padding: 0 18px; border-radius: var(--radius-s); font-size: 15px; font-weight: 750; letter-spacing: 0; }
.primary-button, .primary-button.gold { color: #221226; background: var(--pink); box-shadow: 0 6px 20px rgba(240,123,197,.18); }
.primary-button.green { color: #0d2418; background: var(--green); box-shadow: 0 6px 20px rgba(127,220,166,.18); }
.secondary-button { border-color: var(--line-bright); background: rgba(255,255,255,.06); color: var(--cream); }
.ghost-button { border-color: var(--line); color: var(--text); }
.primary-button:hover:not(:disabled), .secondary-button:hover:not(:disabled), .ghost-button:hover:not(:disabled), .danger-button:hover:not(:disabled) { transform: none; filter: brightness(1.07); }
.authority-chip, .staking-lock-pill { border-radius: 99px; border-color: var(--line-bright); color: var(--muted); background: rgba(255,255,255,.04); font-weight: 700; letter-spacing: .6px; }
.authority-chip.green, .staking-lock-pill { border-color: rgba(127,220,166,.32); color: var(--green); background: rgba(127,220,166,.06); }

/* Surfaces: alpha-on-dark gradients, rounded, quiet borders. */
.card, .metric-strip, .world-key-metrics, .staking-metrics-grid, .world-stat-grid, .toolbar, .herd-history,
.world-quick-metrics > div, .world-quick-metrics > a, .unicorn-card, .collector-card, .podium-card,
.stake-action-card, .reward-action-card, .stake-lots-card, .legacy-profile, .data-table-wrap, .about-table-wrap,
.workshop-recipes, .workshop-recipe, .workshop-project, .v3-pending-stakes, .v3-pending-transaction, .v3-activity, .idle-next-card, .legendary-showcase, .v3-qqq-pool, .stats-visual-grid .stat-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none;
}
.metric-strip, .world-key-metrics, .staking-metrics-grid, .world-stat-grid, .data-table-wrap, .about-table-wrap, .legacy-profile { overflow: hidden; }
.unicorn-card, .collector-card, .podium-card { transition: border-color .15s, transform .15s; }
.unicorn-card:hover, .collector-card:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.unicorn-card.rarity-LEGENDARY, .collector-card, .legendary-showcase, .world-quick-metrics .living-legendary-metric { border-color: rgba(239,197,106,.3); }
.world-quick-metrics .living-legendary-metric { background: linear-gradient(150deg, rgba(239,197,106,.12), transparent 60%), var(--surface); }
.toolbar { border-radius: 14px; }
.toolbar input, .toolbar select, .field input, .field select, .amount-input input { border-radius: 10px; }
.metric-strip strong, .world-key-metrics strong, .staking-metrics-grid strong, .world-stat-grid strong, .world-quick-metrics strong, .profile-money strong, .profile-record-grid strong, .profile-stat-band strong, .vital-row strong, .staking-pulse-metrics strong, .reveal-stat-grid strong { font-weight: 800; letter-spacing: -.02em; }
.metric-strip small, .world-key-metrics small, .staking-metrics-grid small, .world-stat-grid small, .world-quick-metrics small, .page-heading small, .modal-header small, .deck-kicker, .section-kicker, .objective-heading small, .eyebrow { font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; }
.objective-heading small, .world-inspector > strong, .site-footer > button, .site-footer nav button, .footer-product-links button, .welcome-art figcaption, .about-hero figcaption, .collector-section > header small, .about-section > p strong { color: var(--pink); }
.welcome-intro h2 em, .about-hero h1 em { color: var(--pink); }
.welcome-play { background: radial-gradient(ellipse at 92% 5%, rgba(240,123,197,.1), transparent 58%); }
.welcome-art, .about-hero figure { background: radial-gradient(ellipse, rgba(240,123,197,.14), transparent 68%); }
.welcome-art img, .about-hero img { border-radius: var(--radius); }

/* Empty states read as invitations, not placeholders. */
.empty-state { min-height: 300px; padding: 56px 24px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.empty-state i { color: var(--pink); font: normal 40px var(--sans); }
.empty-state h2 { font: 800 26px/1.15 var(--sans); letter-spacing: -.02em; }
.empty-state p { font-size: 16px; }

/* Progress and season clock */
.progress-track, .season-progress progress { height: 8px; border: 0; border-radius: 99px; background: rgba(255,255,255,.08); }
.progress-track::-webkit-progress-bar, .season-progress progress::-webkit-progress-bar { background: rgba(255,255,255,.08); border-radius: 99px; }
.progress-track::-webkit-progress-value, .season-progress progress::-webkit-progress-value { background: var(--pink); border-radius: 99px; box-shadow: 0 0 14px rgba(240,123,197,.45); }
.progress-track::-moz-progress-bar, .season-progress progress::-moz-progress-bar { background: var(--pink); border-radius: 99px; }

/* World HUD: glass chips, one prize card without gold trim. */
.glass-chip, .camera-controls button { border-radius: 12px; border-color: rgba(255,255,255,.14); background: rgba(12,13,21,.72); backdrop-filter: blur(14px); }
.weather-chip > i, .ritual-chip > i { color: var(--pink); font-family: var(--sans); }
.season-prize-card, .world-route .season-prize-card { border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(12,13,21,.78); box-shadow: 0 10px 30px rgba(0,0,0,.3); backdrop-filter: blur(14px); }
.season-prize-card::before, .season-prize-card::after { display: none; }
.season-prize-card:hover:not(:disabled) { filter: none; border-color: rgba(240,123,197,.5); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.season-prize-card > i { background: var(--pink); box-shadow: 0 0 16px rgba(240,123,197,.5); color: #221226; animation: none; font-family: var(--sans); }
.season-prize-card small { color: var(--muted); letter-spacing: 1px; }
.season-prize-card strong { color: var(--cream); text-shadow: none; }
.season-prize-card strong > b { font: 800 21px/1 var(--sans); letter-spacing: -.02em; text-shadow: none; }
.season-prize-card strong em { color: var(--muted); }
.season-prize-card .jackpot-share { border-left-color: var(--line-bright); }
.season-prize-card .jackpot-share > b { font: 800 17px var(--sans); }
.jackpot-explainer { border-radius: 10px; border-color: var(--line-bright); }
.world-stage { border-bottom: 0; }
.scene-hint { font-weight: 700; letter-spacing: .8px; color: rgba(255,255,255,.45); }
.world-call-card, .world-inspector, .evo-teaser { border-radius: 16px; }
.world-inspector h2 { font-weight: 800; }
.world-key-metrics span { color: var(--pink); }

/* Money is green, and the APR is a headline. */
.apr-metric > strong, .staking-pulse-metrics .apr strong, .world-staking-card > header strong { color: var(--green); }
.apr-metric > strong { font: 850 clamp(40px, 5vw, 60px)/1 var(--sans); letter-spacing: -.03em; margin: 10px 0 6px; }
.apr-breakdown > span:last-child b, .v3-qqq, .v3-call-split span:last-child b, .v3-staking-qqq strong, .staking-metrics-grid .claimable strong, .profile-money .net strong { color: var(--green) !important; }
.v3-staking-qqq { border-left-color: var(--green); }
.v3-qqq-pool { background: linear-gradient(150deg, rgba(127,220,166,.1), transparent 55%), var(--surface); border-color: rgba(127,220,166,.25); }
.world-bottom-grid .world-staking-tile { border-color: rgba(127,220,166,.25); background: linear-gradient(150deg, rgba(127,220,166,.1), transparent 55%), var(--surface); }
.world-bottom-grid .staking-promo-copy small { color: var(--green); }
.world-bottom-grid .world-staking-tile h2 { font-size: clamp(24px, 2.6vw, 32px); }
.world-bottom-grid .secondary-button { background: rgba(255,255,255,.08); }
.metric-help > button { width: 24px; height: 24px; font-size: 12px; }
.metric-help .metric-tooltip { border-color: var(--line-bright); background: #1b1d2d; }

/* Pages */
.page-shell { width: min(1360px, calc(100% - 48px)); }
.page-heading h1, .board-hero h1, .about-hero h1, .v3-tokenomics-heading h1, .v3-account-intro h1 { font-weight: 850; letter-spacing: -.035em; }
.page-heading p, .about-section > p, .about-section details p, .about-practical p, .v3-note p, .modal-header p, .staking-intro, .workshop-intro { font-size: 16px; line-height: 1.7; }
.page-heading small, .v3-tokenomics-heading > small, .v3-account-intro > small, .eyebrow { color: var(--pink); font: 750 12px/1.4 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; }
.v3-note-number, .v3-notes-nav { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.v3-notes-nav { padding: 22px 0 40px; border-top: 1px solid var(--line); }
.v3-tokenomics-heading h1 em { color: var(--pink); }
.v3-brand-banner { border-radius: var(--radius); }
.about-jump a, .board-scope button, .amount-presets button, .quantity-picker button { border-radius: 99px; }
.about-jump a:hover { border-color: var(--pink); }
.about-allocation div { border-radius: 16px; border-color: rgba(240,123,197,.35); background: rgba(240,123,197,.08); color: #f4c6e6; }
.about-allocation div:nth-child(2) { border-color: rgba(127,220,166,.35); background: rgba(127,220,166,.08); color: var(--green); }
.about-allocation div:nth-child(3) { border-color: var(--line-bright); background: rgba(255,255,255,.04); color: var(--cream); }
.about-price-track > b { color: var(--pink); }
.about-table-wrap td:last-child, .about-table-wrap th:last-child, .about-reference-wide td:nth-child(2), .about-reference-wide td:last-child { color: var(--cream); }
.collector-card > strong, .collector-rank, .legendary-showcase h2 b, .legendary-shelf strong, .call-grail > span, .legendary-preview h3 { color: var(--gold); }
.podium-card h2 { font-style: normal; }
.profile-hero-copy h1 { font-weight: 850; letter-spacing: -.035em; }
.profile-stripe { border-radius: 0; }
.evolution-retirement { border-radius: 14px; border-color: rgba(240,123,197,.35); background: rgba(240,123,197,.08); color: #f4c6e6; }
.unicorn-evolved { border-color: rgba(240,123,197,.45); }
.idle-next-card { border-color: var(--line); }

/* Modals and drawers */
.modal { border-radius: var(--radius-l); border-color: var(--line-bright); background: #161827; box-shadow: var(--shadow); }
.modal-layer.call-drawer .call-drawer-panel { border-radius: var(--radius-l) 0 0 var(--radius-l); }
.modal-close { width: 38px; height: 38px; border-radius: 50%; }
.modal-header h2 { font: 850 30px/1.1 var(--sans); letter-spacing: -.03em; }
.quote-summary, .race-buffer, .wallet-option, .call-grail, .v3-wallet-dialog { border-radius: 14px; }
.quote-total strong { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; }
.quantity-picker button.active { background: rgba(240,123,197,.14); border-color: rgba(240,123,197,.5); color: var(--cream); }
.toast { border-radius: 14px; }

/* Footer */
.site-footer { padding: 28px 24px 34px; background: #0a0b12; font-size: 13px; letter-spacing: .6px; }
.site-footer a:hover, .site-footer button:hover { color: var(--cream); }

@media (max-width: 1180px) {
  .topbar { min-height: 68px; }
  .mobile-nav > button { border-radius: 14px; background: var(--pink); }
}
@media (max-width: 640px) {
  .page-shell { width: min(1360px, calc(100% - 32px)); }
  .apr-metric > strong { font-size: 44px; }
  .empty-state { min-height: 240px; padding: 40px 20px; }
  .season-prize-card > i { background: var(--pink); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Prices are numbers, not treasure. */
.quote-total strong, .call-price b, .world-call-card .call-price, .about-price-track strong { color: var(--cream); }
.wallet-button, .token-link { white-space: nowrap; }
@media (max-width: 640px) {
  .brand small { display: none; }
  .top-actions .token-link { display: none; } /* still in the footer */
  .wallet-button, .icon-button { height: 42px; }
  .wallet-button { min-width: 0; padding: 0 12px; }
  .icon-button { width: 40px; }
}
.fallen-page h1, .fallen-page h2 { font-weight: 850; letter-spacing: -.035em; }
.primary-nav > .evo-nav { height: 42px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; }
.primary-nav > .evo-nav:hover:not(:disabled) { color: var(--cream); background: rgba(255,255,255,.05); }
@media (max-width: 370px) {
  .wallet-button { padding: 0 9px; }
  .icon-button { width: 36px; }
}

/* Guest strip: one line above the World for visitors without a wallet. */
.guest-strip { display: flex; align-items: center; gap: 16px; min-height: 64px; margin: 14px auto; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.guest-strip img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.guest-strip p { flex: 1; min-width: 0; margin: 0; color: var(--muted); }
.guest-strip p strong { color: var(--cream); }
.guest-strip-actions { display: flex; flex-shrink: 0; gap: 8px; }
.guest-strip-actions .primary-button, .guest-strip-actions .secondary-button { min-height: 44px; padding: 0 16px; }
@media (max-width: 800px) {
  .guest-strip { flex-wrap: wrap; gap: 10px; min-height: 0; margin: 10px auto; padding: 10px; }
  .guest-strip img { display: none; }
  .guest-strip p { flex-basis: 100%; }
  .guest-strip-more { display: none; }
  .guest-strip-actions { flex: 1 1 100%; }
  .guest-strip-actions > * { flex: 1; }
}
/* Quick guide: the thesis, the four pillars, the loop. */
.welcome-play { display: block; padding: 32px 32px 24px; }
.welcome-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.welcome-avatar { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.welcome-head h2 { margin: 6px 0 8px; font-size: clamp(28px, 3vw, 38px); }
.welcome-head p { max-width: 60ch; }
.welcome-pillars, .home-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.welcome-pillars li, .home-pillars li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); }
.welcome-pillars small, .home-pillars small { color: var(--pink); font-weight: 750; letter-spacing: 1px; }
.welcome-pillars li:nth-child(4) small, .home-pillars li:nth-child(4) small { color: var(--green); }
.welcome-pillars strong, .home-pillars strong { color: var(--cream); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.welcome-pillars span, .home-pillars span { color: var(--muted); line-height: 1.5; }
.welcome-loop { margin-top: 18px; }
.welcome-actions { margin-top: 18px; }
@media (max-width: 640px) {
  .welcome-play { padding: 24px 18px 18px; }
  .welcome-head { align-items: flex-start; gap: 14px; }
  .welcome-avatar { width: 56px; height: 56px; }
  .welcome-pillars { grid-template-columns: 1fr; }
}
/* Keep completed rewards available without pushing the herd down the page. */
.v3-rewards { padding: 16px 20px; }
.v3-rewards > header { padding: 0 0 12px; background: none; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
.v3-rewards > header h2 { margin: 0; font: 750 20px/1.3 var(--sans); }
.v3-rewards-complete { color: var(--green); font-size: 16px; }
.v3-rewards .v3-claim-row { padding: 12px 0; }
.v3-rewards .v3-claim-row > span { min-width: 0; gap: 6px; }
.v3-rewards .v3-claim-assets { gap: 6px 20px; }
.v3-rewards .v3-claim-assets strong { overflow-wrap: anywhere; }
.v3-rewards .v3-claim-breakdown { margin-top: 0; }
.v3-claimed-history > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--muted); font-size: 16px; list-style: none; }
.v3-claimed-history > summary::-webkit-details-marker { display: none; }
.v3-claimed-history > summary::before { content: '▸'; }
.v3-claimed-history[open] > summary::before { content: '▾'; }
.v3-claimed-history > summary > span { margin-left: auto; }
.v3-claimed-list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.v3-rewards .is-claimed > span { width: 100%; }
.v3-rewards .is-claimed .v3-claim-assets strong { font: 600 16px/1.5 var(--sans); margin: 0; }
.v3-rewards .is-claimed .v3-claim-breakdown { font-size: 16px; }
.v3-rewards .v3-claim-breakdown dl > div { flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 640px) { .v3-rewards { padding: 14px 16px; } }
.v3-rewards .v3-muted, .v3-inline-state { margin: 12px 0 0; color: var(--muted); line-height: 1.6; }
.v3-inline-state { padding: 18px 0 4px; }
.about-hero img { border-radius: 28px; }

/* Field guide chapters. */
.about-section .eyebrow b { margin-right: 10px; color: var(--muted); font-weight: 750; }
.about-thesis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0; }
.about-thesis > div { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.about-thesis small { color: var(--pink); font-size: 11px; font-weight: 750; letter-spacing: 1.4px; }
.about-thesis > div:nth-child(2) small { color: var(--green); }
.about-thesis strong { color: var(--cream); font-size: clamp(34px, 3.4vw, 46px); font-weight: 850; letter-spacing: -.03em; line-height: 1; }
.about-thesis > div:nth-child(2) strong { color: var(--green); }
.about-thesis span { color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 740px) { .about-thesis { grid-template-columns: 1fr; } }

/* Call reveal ceremony: charge (rarity-scaled), strike, then the Unicorn. */
.reveal-modal { --tier: var(--rarity); border-color: color-mix(in srgb, var(--tier) 45%, var(--line-bright)); }
.individual-reveal-stage { background: radial-gradient(circle at 26% 50%, color-mix(in srgb, var(--tier) 24%, transparent), transparent 46%), #0e0f18; }
.individual-reveal-art { isolation: isolate; border-right-color: var(--line); }
.reveal-rays { position: absolute; z-index: 0; inset: -45%; opacity: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg, var(--tier) 0deg 4deg, transparent 4deg 18deg); -webkit-mask-image: radial-gradient(circle, transparent 10%, #000 30%, transparent 62%); mask-image: radial-gradient(circle, transparent 10%, #000 30%, transparent 62%); mix-blend-mode: screen; animation: reveal-rays-turn 26s linear infinite; }
.individual-reveal-stage[data-tier="high"].waiting .reveal-rays { opacity: .1; }
.individual-reveal-stage[data-tier="high"].revealed .reveal-rays { opacity: .3; transition: opacity .9s ease-out; }
.reveal-halo { border-color: color-mix(in srgb, var(--tier) 60%, transparent); box-shadow: 0 0 90px color-mix(in srgb, var(--tier) 30%, transparent), inset 0 0 60px color-mix(in srgb, var(--tier) 12%, transparent); }
.individual-reveal-stage.waiting .reveal-halo { animation: reveal-charge 1.1s ease-in-out infinite alternate; }
.individual-reveal-stage.waiting .individual-reveal-art > img, .individual-reveal-stage.waiting .art-unavailable { opacity: .14; filter: blur(18px) saturate(0); transform: scale(.78); animation: reveal-breathe 1.4s ease-in-out infinite alternate; }
.individual-reveal-stage.revealed .individual-reveal-art > img, .individual-reveal-stage.revealed .art-unavailable { animation: reveal-strike 760ms cubic-bezier(.2, 1.35, .4, 1) both; }
.individual-reveal-stage.revealed .reveal-halo { animation: reveal-halo-pop 900ms cubic-bezier(.2, 1.2, .4, 1) both; }
.reveal-flash { position: absolute; z-index: 5; inset: 0; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--tier) 35%, #fff); }
.individual-reveal-stage.revealed .reveal-flash { animation: reveal-flash 720ms ease-out both; }
.reveal-sparks { position: absolute; z-index: 4; width: 320px; height: 320px; opacity: 0; pointer-events: none; background:
  radial-gradient(circle, var(--tier) 0 3px, transparent 4px) 12% 18% / 12px 12px no-repeat,
  radial-gradient(circle, #fff 0 2px, transparent 3px) 82% 22% / 10px 10px no-repeat,
  radial-gradient(circle, var(--tier) 0 2px, transparent 3px) 90% 64% / 10px 10px no-repeat,
  radial-gradient(circle, #fff 0 3px, transparent 4px) 70% 90% / 12px 12px no-repeat,
  radial-gradient(circle, var(--tier) 0 2px, transparent 3px) 22% 86% / 10px 10px no-repeat,
  radial-gradient(circle, #fff 0 2px, transparent 3px) 6% 54% / 10px 10px no-repeat,
  radial-gradient(circle, var(--tier) 0 3px, transparent 4px) 50% 4% / 12px 12px no-repeat,
  radial-gradient(circle, #fff 0 2px, transparent 3px) 44% 96% / 10px 10px no-repeat; }
.individual-reveal-stage.revealed .reveal-sparks { animation: reveal-sparks 1s ease-out both; }
.reveal-rarity { border-radius: 99px; right: auto; left: 50%; bottom: 22px; width: max-content; min-width: 150px; transform: translateX(-50%); letter-spacing: 1.6px; }
.individual-reveal-stage.revealed .individual-reveal-copy > * { animation: reveal-rise .55s cubic-bezier(.2, 1, .4, 1) both; }
.individual-reveal-stage.revealed .individual-reveal-copy > :nth-child(2) { animation-delay: 80ms; }
.individual-reveal-stage.revealed .individual-reveal-copy > :nth-child(3) { animation-delay: 160ms; }
.individual-reveal-stage.revealed .individual-reveal-copy > :nth-child(4) { animation-delay: 240ms; }
.individual-reveal-stage.revealed .individual-reveal-copy > :nth-child(n+5) { animation-delay: 320ms; }
.individual-reveal-copy h2 { font-weight: 900; letter-spacing: -.03em; }
.reveal-modal.rarity-LEGENDARY .individual-reveal-copy > h2 { color: var(--gold); text-shadow: 0 0 34px color-mix(in srgb, var(--gold) 55%, transparent); }
.reveal-modal.rarity-EPIC .individual-reveal-copy > h2 { color: #d9c6ff; text-shadow: 0 0 30px color-mix(in srgb, var(--purple) 55%, transparent); }
.reveal-modal.rarity-LEGENDARY { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), 0 30px 120px color-mix(in srgb, var(--gold) 22%, transparent); }
.reveal-stat-grid div { border-radius: 12px; }
.reveal-production-score strong { font-weight: 850; letter-spacing: -.02em; }
.reveal-actions .primary-button { min-width: 220px; }
@keyframes reveal-rays-turn { to { transform: rotate(360deg); } }
@keyframes reveal-charge { from { transform: scale(.88); opacity: .55; } to { transform: scale(1.06); opacity: 1; } }
@keyframes reveal-breathe { from { transform: scale(.76); } to { transform: scale(.82); } }
@keyframes reveal-strike { 0% { opacity: 0; filter: blur(16px) brightness(3); transform: scale(.55); } 45% { opacity: 1; filter: blur(0) brightness(1.7); transform: scale(1.08); } 100% { opacity: 1; filter: drop-shadow(0 25px 32px rgba(0,0,0,.46)); transform: none; } }
@keyframes reveal-halo-pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes reveal-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes reveal-sparks { 0% { opacity: 0; transform: scale(.35); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes reveal-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes reveal-deal { from { opacity: 0; transform: translateY(22px) scale(.9); } }
.call-pull-card { animation: reveal-deal .45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.call-pull-card.rarity-LEGENDARY { box-shadow: 0 0 34px color-mix(in srgb, var(--gold) 32%, transparent); }
.call-batch-reveal { border-color: var(--line-bright); background: radial-gradient(ellipse at top, rgba(240,123,197,.14), transparent 60%), #12131d; }
.call-batch-header > small { color: var(--pink); }
.individual-reveal-stage.waiting .individual-reveal-copy > h2 { color: var(--cream); text-shadow: none; }
.individual-reveal-stage.waiting .individual-reveal-copy > small { color: var(--muted); }
.individual-reveal-art > img { border-radius: 22px; }

/* Workshop: an outpost you can read at a glance. */
.workshop-overview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 22px 0 6px; padding: 0; list-style: none; }
.workshop-overview li { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.workshop-overview small { display: block; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: 1.3px; }
.workshop-overview strong { display: block; margin-top: 6px; color: var(--cream); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.workshop-overview em { color: var(--muted); font-size: 15px; font-style: normal; font-weight: 600; }
.workshop-page > .card, .workshop-recipes, .workshop-expeditions { padding: 24px; }
.workshop-message { border-color: rgba(240,123,197,.35); background: rgba(240,123,197,.08); border-radius: 14px; }
.workshop-message.error { border-color: rgba(239,123,139,.5); background: rgba(239,123,139,.08); }
.workshop-materials > div { border-radius: 12px; background: rgba(255,255,255,.035); border-color: var(--line); }
.workshop-materials strong { font-weight: 800; letter-spacing: -.02em; }
.workshop-project { padding: 16px 0; }
.workshop-project-state { color: var(--pink); font-size: 11px; font-weight: 750; letter-spacing: 1.3px; }
.workshop-project.is-queued .workshop-project-state { color: var(--muted); }
.workshop-project.is-done .workshop-project-state { color: var(--green); }
.workshop-progress { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.workshop-progress > i { display: block; height: 100%; border-radius: 99px; background: var(--pink); box-shadow: 0 0 12px rgba(240,123,197,.45); transition: width .6s ease; }
.workshop-project.is-done .workshop-progress > i { background: var(--green); box-shadow: 0 0 12px rgba(127,220,166,.45); }
.workshop-building-levels article { display: grid; gap: 8px; padding: 20px; }
.workshop-building-levels strong { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.workshop-building-levels p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.workshop-pips { display: flex; gap: 5px; }
.workshop-pips i { width: 26px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); }
.workshop-pips i.filled { background: var(--pink); box-shadow: 0 0 10px rgba(240,123,197,.4); }
.workshop-recipes { border-radius: var(--radius); background: var(--surface); }
.workshop-recipe { border-radius: 14px; background: rgba(255,255,255,.03); }
.workshop-recipe h3 { font-weight: 800; letter-spacing: -.01em; }
.workshop-cost > span { border-radius: 8px; background: rgba(255,255,255,.05); border-color: var(--line); font-size: 12px; }
.workshop-need > span.ok { border-color: rgba(127,220,166,.4); color: var(--green); }
.workshop-need > span.short { border-color: rgba(239,123,139,.35); color: #f2a6b1; }
.workshop-need b { font-weight: 800; }
.workshop-relics label { border-radius: 12px; }
.workshop-relics input { accent-color: var(--pink); }
.workshop-output { color: var(--green) !important; }
@media (max-width: 900px) { .workshop-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 500px) { .workshop-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workshop-building-levels article { display: grid; } }

/* Staking: global numbers first, then your position. */
.staking-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 40px; align-items: center; padding: 40px 0 28px; }
.staking-hero-copy h1 { margin: 12px 0 14px; color: var(--cream); font: 900 clamp(38px, 4.6vw, 62px)/1.02 var(--sans); letter-spacing: -.035em; }
.staking-hero-copy h1 em { color: var(--green); font-style: normal; }
.staking-hero-copy > p { max-width: 48ch; margin: 0; color: #c9c8d6; font-size: 18px; line-height: 1.6; }
.staking-hero-copy .v3-staking-qqq { margin: 18px 0 0; }
.staking-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.staking-hero-stats > article { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.staking-hero-stats > article > small, .staking-hero-stats .apr-metric > small { color: var(--muted); font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; }
.staking-hero-stats > article > strong { color: var(--cream); font-size: clamp(30px, 3vw, 42px); font-weight: 850; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.staking-hero-stats > article > strong em, .staking-hero-stats .apr-metric > span { color: var(--muted); font-size: 16px; font-style: normal; font-weight: 600; }
.staking-hero-stats > article > span { color: var(--muted); line-height: 1.5; }
.staking-hero-stats .stat-apr, .staking-hero-stats .stat-qqq { border-color: rgba(127,220,166,.3); background: linear-gradient(150deg, rgba(127,220,166,.12), transparent 60%), var(--surface); }
.staking-hero-stats .stat-qqq > strong { color: var(--green); }
.staking-hero-stats .apr-metric > strong { font-size: clamp(38px, 4vw, 56px); margin: 6px 0 2px; }
.staking-position { margin: 8px 0 24px; padding: 26px 28px; border: 1px solid rgba(127,220,166,.28); border-radius: var(--radius); background: linear-gradient(150deg, rgba(127,220,166,.08), transparent 55%), var(--surface); }
.staking-position > header { margin-bottom: 14px; }
.staking-position-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.staking-position-grid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); }
.staking-position-grid small { color: var(--muted); font-weight: 750; letter-spacing: 1.1px; text-transform: uppercase; }
.staking-position-grid strong { color: var(--cream); font-size: 26px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.staking-position-grid span { color: var(--muted); }
.v3-qqq-pool { padding: 24px 28px; }
.staking-page .empty-state { margin: 8px 0 24px; }
@media (max-width: 1000px) { .staking-hero { grid-template-columns: 1fr; } .staking-position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .staking-hero { padding: 20px 0 16px; } .staking-hero-stats { grid-template-columns: 1fr; } .staking-position { padding: 20px; } .staking-position-grid { grid-template-columns: 1fr; } }

/* Phone: the migration banner is two lines, not five. */
@media (max-width: 640px) {
  .v3-migration-banner { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px; }
  .v3-migration-banner > div > span { display: none; }
  .v3-migration-banner nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
}
.v3-staking-earned-grid.single { grid-template-columns: 1fr; }

/* Staking below the hero: one season line, your position, two actions. */
.staking-season { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 22px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--muted); }
.staking-season b { color: var(--cream); font-weight: 750; }
.staking-connect { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 24px; padding: 28px; }
.staking-connect h2 { margin: 8px 0 6px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 850; letter-spacing: -.03em; }
.staking-connect p { max-width: 52ch; margin: 0; color: var(--muted); }
.staking-position-grid > div strong em { color: var(--muted); font-size: 16px; font-style: normal; font-weight: 600; }
.staking-position-grid > div strong.qqq { color: var(--green); font-size: 22px; }
.staking-position-grid > div.ready { border-color: rgba(127,220,166,.35); background: rgba(127,220,166,.08); }
.staking-action-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 0 0 16px; }
.staking-action-grid > .card { margin: 0; }
.stake-action-card > header h2 { font-weight: 850; letter-spacing: -.02em; }
.stake-action-card > footer { display: flex; gap: 18px; color: var(--muted); }
.staking-action-grid .v3-rewards { display: flex; flex-direction: column; }
.staking-history-details { margin: 16px 0 0; padding: 0 24px; }
.staking-history-details > summary { padding: 20px 0; cursor: pointer; color: var(--pink); font-weight: 700; list-style: none; }
.staking-history-details > summary::-webkit-details-marker { display: none; }
.staking-history-details .v3-staking-history { margin: 0 0 20px; padding: 0; border: 0; background: none; }
.staking-history-details .v3-staking-history > header { display: none; }
@media (max-width: 900px) { .staking-action-grid { grid-template-columns: 1fr; } .staking-connect { flex-direction: column; align-items: flex-start; } }

/* About: a walkthrough, not a spec. */
.about-hero { min-height: 0; gap: 24px 48px; padding: 36px 0 24px; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about-hero p { margin-bottom: 24px; }
.about-hero img { width: min(100%, 380px); margin: 0 auto; }
.about-step { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px 56px; align-items: center; padding: 44px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.about-step:nth-child(even) .about-step-copy { order: 2; }
.about-step .eyebrow b { margin-right: 10px; color: var(--muted); }
.about-step h2 { margin: 10px 0 14px; color: var(--cream); font: 850 clamp(28px, 3.2vw, 42px)/1.1 var(--sans); letter-spacing: -.03em; }
.about-step p { max-width: 58ch; margin: 0 0 14px; color: #c9c8d6; line-height: 1.7; }
.about-step p strong { color: var(--cream); }
.about-step .about-note { color: var(--muted); }
.about-step .secondary-button { display: inline-flex; margin-top: 6px; }
.about-step-visual { min-width: 0; }
.about-step .about-price-track { padding: 0; }
.about-rarities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.about-rarities li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--rarity) 45%, transparent); border-radius: 99px; color: var(--rarity); font-weight: 700; }
.about-rarities i { width: 8px; height: 8px; border-radius: 50%; background: var(--rarity); box-shadow: 0 0 10px var(--rarity); }
.about-visual-art { display: block; width: min(100%, 300px); height: auto; margin: 0 auto; border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.about-evolve { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.about-evolve span { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--cream); font-size: clamp(36px, 4vw, 54px); font-weight: 900; letter-spacing: -.03em; }
.about-evolve small { color: var(--muted); font-weight: 600; letter-spacing: 0; }
.about-evolve b { color: var(--pink); font-size: 34px; }
.about-step .about-allocation { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-allocation.about-qqq div { border-color: rgba(127,220,166,.35); background: rgba(127,220,166,.08); color: var(--green); }
.about-allocation.about-qqq div:nth-child(2), .about-allocation.about-qqq div:nth-child(3) { border-color: var(--line-bright); background: rgba(255,255,255,.04); color: var(--cream); }
.about-burned { display: flex; flex-direction: column; gap: 8px; padding: 28px; border: 1px solid rgba(240,123,197,.35); border-radius: var(--radius); background: linear-gradient(150deg, rgba(240,123,197,.12), transparent 60%), var(--surface); }
.about-burned small { color: var(--pink); font-weight: 750; letter-spacing: 1.2px; }
.about-burned strong { color: var(--cream); font-size: clamp(48px, 6vw, 80px); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.about-burned span { color: var(--muted); }
.about-burned a { color: var(--cream); }
.about-start { padding: 44px 0 20px; border-top: 1px solid var(--line); }
.about-start h2 { margin: 10px 0 20px; color: var(--cream); font: 850 clamp(28px, 3.2vw, 42px)/1.1 var(--sans); letter-spacing: -.03em; }
.about-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.about-start-grid a { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color .15s, transform .15s; }
.about-start-grid a:hover { border-color: var(--pink); transform: translateY(-2px); }
.about-start-grid strong { color: var(--cream); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.about-start-grid span { color: var(--muted); }
.about-fineprint { margin-top: 24px; padding: 36px 0 60px; border-top: 1px solid var(--line); }
.about-fineprint h2 { margin: 10px 0 8px; color: var(--cream); font: 850 clamp(24px, 2.6vw, 32px)/1.1 var(--sans); letter-spacing: -.03em; }
.about-fineprint > .about-note { max-width: 70ch; margin: 0 0 18px; color: var(--muted); }
.about-fineprint details { margin-top: 10px; padding: 0 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }
.about-fineprint summary { padding: 18px 0; color: var(--text); font-weight: 700; cursor: pointer; }
@media (max-width: 900px) { .about-step { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; } .about-step:nth-child(even) .about-step-copy { order: 0; } .about-start-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .about-hero { padding-top: 16px; } .about-hero img { width: min(100%, 220px); } .about-step .about-allocation { grid-template-columns: 1fr; } }
.about-hero p a { color: var(--cream); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.about-hero p a:hover { text-decoration-color: var(--pink); }

/* Maturing payouts: a six-hour rest after settlement, shown as a countdown. */
.v3-maturing { display: flex; flex-direction: column; gap: 6px; min-width: 200px; color: var(--muted); }
.v3-maturing-label { display: block; }
.v3-maturing > b { color: var(--pink); font-weight: 750; letter-spacing: 1px; }
.v3-maturing-bar { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.v3-maturing-bar > b { display: block; height: 100%; border-radius: 99px; background: var(--pink); box-shadow: 0 0 10px rgba(240,123,197,.45); transition: width 1s linear; }

/* Tokenomics: a litepaper. Big numbers, one diagram per idea. */
.v3-tokenomics { max-width: 1120px; }
.v3-tokenomics-heading { padding: 36px 0 24px; }
.v3-brand-banner { margin-bottom: 36px; }
.v3-supply-block { margin: 0 0 40px; }
.v3-supply-block > .eyebrow { margin-bottom: 12px; }
.v3-live-supply { padding: 0; border: 0; background: none; }
.v3-supply-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v3-supply-tiles > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.v3-supply-tiles small { color: var(--muted); font-weight: 750; letter-spacing: 1.2px; }
.v3-supply-tiles strong { color: var(--cream); font-size: clamp(22px, 1.9vw, 27px); font-weight: 850; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.v3-supply-tiles span { color: var(--muted); line-height: 1.5; }
.v3-supply-tiles > div.burn { border-color: rgba(240,123,197,.35); background: linear-gradient(150deg, rgba(240,123,197,.12), transparent 60%), var(--surface); }
.v3-supply-tiles > div.burn strong { color: #ff5aa0; }
.v3-supply-tiles > div:has([data-supply="circulatingSupply"]) { border-color: rgba(34,229,138,.35); background: linear-gradient(150deg, rgba(34,229,138,.12), transparent 60%), var(--surface); }
.v3-supply-tiles [data-supply="circulatingSupply"] { color: #22e58a; }
.v3-supply-bar { display: flex; height: 14px; margin: 16px 0 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.v3-supply-bar i { display: block; flex: 0 0 0; height: 100%; transition: flex-basis .6s ease; }
.v3-supply-bar .burn, .v3-supply-legend .burn { background: #ff3d8a; }
.v3-supply-bar .staked, .v3-supply-legend .staked { background: #e8bc66; }
.v3-supply-bar .bank, .v3-supply-legend .bank { background: #5b7cff; }
.v3-supply-bar .circ, .v3-supply-legend .circ { background: #22e58a; }
.v3-supply-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; color: var(--muted); }
.v3-supply-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.v3-supply-legend i { width: 12px; height: 12px; border-radius: 4px; }
.v3-supply-legend b { color: var(--cream); font-weight: 700; }
.v3-supply-status { margin-left: auto; }
.v3-supply-status a { color: var(--cream); }
.v3-live-supply > .v3-note-detail { margin-top: 14px; }
.v3-live-supply details { margin-top: 6px; }
.v3-note { padding: 36px 0; }
.v3-note h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 850; letter-spacing: -.03em; margin-bottom: 20px; }
.v3-note p { color: #c9c8d6; max-width: 70ch; }
.v3-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.3fr; align-items: center; gap: 12px; margin: 0 0 14px; }
.v3-flow > i { color: var(--muted); font-size: 26px; font-style: normal; text-align: center; }
.v3-flow-col { display: grid; gap: 10px; }
.v3-flow-node { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.v3-flow-node small { color: var(--muted); font-weight: 750; letter-spacing: 1.2px; }
.v3-flow-node strong { color: var(--cream); font-size: 24px; font-weight: 850; letter-spacing: -.02em; }
.v3-flow-node span { color: var(--muted); line-height: 1.45; }
.v3-flow-node.muted { opacity: .7; }
.v3-flow-node.burn { border-color: rgba(240,123,197,.4); background: linear-gradient(150deg, rgba(240,123,197,.14), transparent 60%), var(--surface); }
.v3-flow-node.burn strong { color: var(--pink); }
.v3-flow-node.stake { border-color: rgba(127,220,166,.4); background: linear-gradient(150deg, rgba(127,220,166,.14), transparent 60%), var(--surface); }
.v3-flow-node.stake strong { color: var(--green); }
.v3-flow-split { display: flex; flex-direction: column; min-width: 0; padding: 14px 20px 6px; border: 1px solid rgba(127,220,166,.4); border-radius: 14px; background: linear-gradient(150deg, rgba(127,220,166,.14), transparent 60%), var(--surface); }
.v3-flow-split > small { color: var(--green); font-weight: 750; letter-spacing: 1.2px; margin-bottom: 4px; }
.v3-flow-split > div { display: grid; grid-template-columns: 74px 1fr; column-gap: 12px; align-items: baseline; padding: 10px 0 12px; border-top: 1px solid var(--line); }
.v3-flow-split > div:first-of-type { border-top: 0; }
.v3-flow-split strong { color: var(--green); font-size: 24px; font-weight: 850; letter-spacing: -.02em; line-height: 1; }
.v3-flow-split b { color: var(--cream); font-weight: 750; }
.v3-flow-split span { grid-column: 2; color: var(--muted); font-size: 13px; line-height: 1.45; }
.v3-flow-split > div.muted strong { color: var(--cream); opacity: .75; }
.v3-burn-flow { display: grid; grid-template-columns: 1fr auto 1.1fr; align-items: center; gap: 12px; margin: 0 0 14px; }
.v3-burn-flow > i { color: var(--muted); font-size: 26px; font-style: normal; text-align: center; }
.v3-burn-total { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 28px 24px; border: 1px solid rgba(240,123,197,.5); border-radius: 14px; background: linear-gradient(150deg, rgba(240,123,197,.2), transparent 65%), var(--surface); }
.v3-burn-total small { color: var(--pink); font-weight: 750; letter-spacing: 1.2px; }
.v3-burn-total strong { color: var(--pink); font-size: clamp(34px, 3.6vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.v3-burn-total b { color: var(--cream); font-weight: 750; }
.v3-burn-total span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.v3-burn-total a { margin-top: 6px; font-size: 13px; }
.v3-staking-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.v3-staking-dash > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px 24px; border: 1px solid rgba(34,229,138,.28); border-radius: 14px; background: linear-gradient(150deg, rgba(34,229,138,.10), transparent 60%), var(--surface); }
.v3-staking-dash small { color: var(--muted); font-weight: 750; letter-spacing: 1.2px; }
.v3-staking-dash strong { color: var(--cream); font-size: clamp(22px, 1.9vw, 27px); font-weight: 850; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.v3-staking-dash strong em { color: var(--green); font-style: normal; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.v3-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.v3-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.v3-facts strong { color: var(--green); font-size: clamp(28px, 3vw, 40px); font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.v3-facts span { color: var(--muted); line-height: 1.45; }
.v3-supply-list { max-width: 760px; }
.v3-supply-list dt { color: var(--muted); }
.v3-supply-list dd { color: var(--cream); font-weight: 700; }
.v3-contracts { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.v3-contracts table { width: 100%; border-collapse: collapse; }
.v3-contracts th, .v3-contracts td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.v3-contracts tr:last-child > * { border-bottom: 0; }
.v3-contracts th { color: var(--cream); font-weight: 800; white-space: nowrap; }
.v3-contracts th small { display: block; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.v3-contracts a { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; }
.v3-contracts a:hover { color: var(--cream); }
.v3-contracts code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.v3-note .secondary-button { display: inline-flex; }
@media (max-width: 900px) { .v3-supply-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3-flow { grid-template-columns: 1fr; } .v3-flow > i { transform: rotate(90deg); } .v3-burn-flow { grid-template-columns: 1fr; } .v3-burn-flow > i { transform: rotate(90deg); } .v3-facts, .v3-staking-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3-supply-legend > span { flex-basis: 100%; flex-wrap: wrap; row-gap: 2px; }
.v3-supply-status { margin-left: 0; } }
@media (max-width: 520px) { .v3-supply-tiles, .v3-facts, .v3-staking-dash { grid-template-columns: 1fr; } .v3-flow-split > div { grid-template-columns: 62px 1fr; } }
.v3-facts-qqq strong { color: var(--cream); }
.v3-facts-qqq > div:last-child strong { color: var(--green); }

.v3-tokenomics-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); gap: 24px 40px; align-items: center; max-width: none; padding: 30px 0 34px; }
.v3-tokenomics-heading > div { max-width: 640px; }
.v3-hero-art { margin: 0; }
.v3-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 100% 50%; border-radius: var(--radius-l); box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); }
@media (max-width: 800px) { .v3-tokenomics-heading { grid-template-columns: 1fr; } .v3-hero-art img { aspect-ratio: 16 / 10; } }
.v3-tokenomics, .about-page { scroll-margin-top: 92px; }

.v3-note p a { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.v3-note p a:hover { text-decoration-color: var(--green); }
.v3-contracts { max-width: 100%; }
.v3-contracts table { min-width: 560px; }
@media (max-width: 640px) { .v3-contracts th, .v3-contracts td { padding: 12px 14px; } }

.v3-qqq-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 18px 40px; }
.v3-qqq-row p { max-width: 62ch; margin: 0; }
@media (max-width: 640px) { .v3-qqq-row { grid-template-columns: minmax(0, 1fr); } }
/* Rankings: the Legendary spotlight and the production column. */
.board-page:not(.show-accounting) .board-table :is(th,td):nth-child(4), .board-page:not(.show-accounting) .board-table :is(th,td):nth-child(7), .board-page:not(.show-accounting) .board-table :is(th,td):nth-child(8) { display: table-cell; }
.board-page:not(.show-accounting) .board-table :is(th,td):nth-child(5), .board-page:not(.show-accounting) .board-table :is(th,td):nth-child(6), .board-page:not(.show-accounting) .board-table :is(th,td):nth-child(9), .board-page:not(.show-accounting) .board-table :is(th,td):nth-child(10) { display: none; }
.board-page:not(.show-accounting) .board-table thead { display: table-header-group; }
.board-production { color: var(--cream); font-weight: 800; font-variant-numeric: tabular-nums; }
.legendary-spotlight-section { margin: 12px 0 28px; }
.legendary-spotlight-section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.legendary-spotlight-section > header small { color: var(--gold); font-weight: 750; letter-spacing: 1.4px; }
.legendary-spotlight-section > header h2 { margin: 6px 0 0; color: var(--cream); font-size: clamp(26px, 3vw, 36px); font-weight: 850; letter-spacing: -.03em; }
.legendary-spotlight-section > header > span { color: var(--muted); }
.legendary-spotlight { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px 28px; padding: 22px; border: 1px solid rgba(239,197,106,.35); border-radius: var(--radius-l); background: radial-gradient(ellipse at 12% 30%, rgba(239,197,106,.16), transparent 55%), var(--surface); }
.spotlight-art { grid-row: 1 / 3; display: block; align-self: center; }
.spotlight-art img { display: block; width: 220px; height: 220px; object-fit: cover; border-radius: 22px; box-shadow: 0 0 0 1px rgba(239,197,106,.4), 0 0 48px rgba(239,197,106,.25), 0 24px 60px rgba(0,0,0,.45); transition: transform .3s; }
.spotlight-art:hover img { transform: scale(1.03); }
.spotlight-copy { min-width: 0; }
.spotlight-copy > small { color: var(--gold); font-weight: 750; letter-spacing: 1.3px; }
.spotlight-copy h3 { margin: 6px 0 12px; font-size: clamp(26px, 2.8vw, 36px); font-weight: 900; letter-spacing: -.03em; }
.spotlight-copy h3 a { color: var(--cream); text-decoration: none; }
.spotlight-numbers { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-bottom: 14px; }
.spotlight-numbers small { display: block; color: var(--muted); font-weight: 750; letter-spacing: 1.1px; }
.spotlight-numbers strong { color: var(--cream); font-size: 26px; font-weight: 850; letter-spacing: -.02em; }
.spotlight-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; max-width: 560px; }
.spotlight-stat { display: grid; grid-template-columns: 124px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.spotlight-stat small { white-space: nowrap; letter-spacing: .4px; }
.spotlight-stats { max-width: 640px; }
.spotlight-stat small { color: var(--muted); font-weight: 700; letter-spacing: .8px; }
.spotlight-stat i { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.spotlight-stat i b { display: block; height: 100%; border-radius: 99px; background: var(--gold); box-shadow: 0 0 10px rgba(239,197,106,.5); transition: width .5s ease; }
.spotlight-stat strong { color: var(--cream); text-align: right; font-weight: 800; }
.spotlight-holder { display: block; margin-top: 12px; color: var(--muted); }
.spotlight-roster { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.spotlight-roster button { width: 48px; height: 48px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; opacity: .6; transition: opacity .15s, border-color .15s; }
.spotlight-roster button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spotlight-roster button:hover, .spotlight-roster button.active { opacity: 1; border-color: var(--gold); }
.board-hero { margin-bottom: 14px; }
@media (max-width: 800px) { .legendary-spotlight { grid-template-columns: 1fr; padding: 16px; } .spotlight-art { grid-row: auto; justify-self: center; } .spotlight-art img { width: 180px; height: 180px; } .spotlight-stats { grid-template-columns: 1fr; } .spotlight-roster { grid-column: 1; } }

/* The moat: QQQ in the pool and QQQ earned from fees. */
.v3-moat-main, .v3-moat-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.v3-moat-main { justify-content: center; align-self: stretch; border-color: rgba(127,220,166,.4); background: linear-gradient(150deg, rgba(127,220,166,.14), transparent 60%), var(--surface); }
.v3-moat-stats { display: grid; gap: 10px; align-content: start; }
.v3-moat-main small, .v3-moat-stat small { color: var(--muted); font-weight: 750; letter-spacing: 1.2px; }
.v3-moat-main strong, .v3-moat-stat strong { color: var(--cream); font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.v3-moat-main strong { font-size: clamp(36px, 4vw, 52px); }
.v3-moat-main strong { color: var(--green); }
.v3-moat-main strong em, .v3-moat-stat strong em { color: var(--muted); font-size: 16px; font-style: normal; font-weight: 600; }
.v3-moat-main span, .v3-moat-stat span { color: var(--muted); line-height: 1.5; }
.stats-qqq { margin: 14px 0 0; padding: 22px 24px; border: 1px solid rgba(127,220,166,.35); border-radius: var(--radius-l); background: linear-gradient(150deg, rgba(127,220,166,.1), transparent 55%), var(--surface); }
.stats-qqq > header { margin-bottom: 14px; }
.stats-qqq > header small { color: var(--green); font-weight: 750; letter-spacing: 1.4px; }
.stats-qqq > header h2 { margin: 6px 0 0; color: var(--cream); font-size: clamp(24px, 2.6vw, 32px); font-weight: 850; letter-spacing: -.03em; }
.stats-qqq-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.stats-qqq-grid > article { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); }
.stats-qqq-grid small { color: var(--muted); font-weight: 750; letter-spacing: 1.1px; }
.stats-qqq-grid strong { color: var(--cream); font-size: 24px; font-weight: 850; letter-spacing: -.02em; overflow-wrap: anywhere; }
.stats-qqq-grid strong em { color: var(--muted); font-size: 15px; font-style: normal; font-weight: 600; }
.stats-qqq-grid span { color: var(--muted); line-height: 1.45; }
.stats-qqq-grid > .hero { border-color: rgba(127,220,166,.4); background: rgba(127,220,166,.08); }
.stats-qqq-grid > .hero strong { color: var(--green); font-size: clamp(30px, 2.6vw, 38px); white-space: nowrap; }
.stats-qqq-grid > .hero { grid-column: span 2; }
@media (max-width: 1000px) { .stats-qqq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-qqq-grid > .hero { grid-column: 1 / -1; } }
@media (max-width: 520px) { .stats-qqq-grid { grid-template-columns: 1fr; } }

.stats-qqq-grid > .sell { border-color: rgba(127,220,166,.35); }
.stats-qqq-grid > .sell strong { color: var(--green); }
.v3-moat-stat.sell strong { color: var(--green); }
.v3-moat-stat small .metric-help { margin-left: 6px; }
.v3-moat-stat small .metric-help .metric-tooltip { left: 0; right: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.board-hero aside strong { font-size: 22px; line-height: 1.2; }
.board-table th, .board-table td { padding: 12px 14px; white-space: nowrap; }
.board-table th:first-child, .board-table td:first-child { padding-left: 18px; width: 64px; }
.board-table td:nth-child(2) { white-space: normal; min-width: 220px; }
.board-table th:nth-child(3), .board-table td:nth-child(3) { width: 130px; text-align: left; }
.board-table th:nth-child(3) .board-sort-button { justify-content: flex-start; margin-left: 0; }
.board-table th:nth-child(4), .board-table td:nth-child(4) { width: 130px; text-align: right; }
.board-table th:nth-child(7), .board-table td:nth-child(7), .board-table th:nth-child(8), .board-table td:nth-child(8) { text-align: right; }
.board-table th:last-child, .board-table td:last-child { text-align: right; padding-right: 18px; }
.board-table th:nth-child(4) .board-sort-button, .board-table th:nth-child(7) .board-sort-button, .board-table th:nth-child(8) .board-sort-button, .board-table th:last-child .board-sort-button { justify-content: flex-end; width: 100%; }
.board-ledger .data-table-wrap { max-width: 100%; overflow-x: auto; }
@media (min-width: 1100px) {
  .board-page.show-accounting .board-table, .board-page.show-accounting .board-table :is(thead,tbody) { display: block; width: 100%; min-width: 0; }
  .board-page.show-accounting .board-table tr { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); border-top: 1px solid var(--line); }
  .board-page.show-accounting .board-table :is(th,td) { min-width: 0; width: auto; white-space: normal; border-top: 0; }
  .board-page.show-accounting .board-table :is(th,td):nth-child(1) { grid-column: span 1; }
  .board-page.show-accounting .board-table :is(th,td):nth-child(2) { grid-column: span 3; }
  .board-page.show-accounting .board-table :is(th,td):nth-child(3) { grid-column: span 1; }
  .board-page.show-accounting .board-table :is(th,td):nth-child(4) { grid-column: span 2; }
  .board-page.show-accounting .board-table :is(th,td):nth-child(5) { grid-column: span 2; }
  .board-page.show-accounting .board-table :is(th,td):nth-child(6) { grid-column: span 1; }
  .board-page.show-accounting .board-table :is(th,td):nth-child(7) { grid-column: span 2; }
  .board-page.show-accounting .board-table :is(th,td):nth-child(n+8) { grid-column: span 3; }
  .board-page.show-accounting .board-table td[colspan] { grid-column: 1 / -1; }
}
@media (max-width: 1000px) { .stats-qqq-grid > .hero { grid-column: 1 / -1; } }

.board-podium { gap: 12px; }
.podium-card { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; padding: 18px 20px; overflow: hidden; }
.podium-card > div { min-width: 0; }
.podium-card h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; }
.podium-card strong { font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.podium-card > b { right: 14px; font-size: 64px; opacity: .08; }
@media (max-width: 1000px) { .board-podium { grid-template-columns: 1fr; } }

.staking-position-grid.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.staking-position-grid > div.lifetime { border-color: rgba(127,220,166,.35); background: rgba(127,220,166,.08); }
.v3-claim-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 6px; }
.v3-claim-summary > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); }
.v3-claim-summary > div.ready { border-color: rgba(127,220,166,.35); background: rgba(127,220,166,.08); }
.v3-claim-summary small { color: var(--muted); font-weight: 750; letter-spacing: 1.1px; }
.v3-claim-summary strong { color: var(--cream); font-size: 20px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.v3-claim-summary strong.qqq { color: var(--green); font-size: 18px; }
.v3-claim-summary strong em { color: var(--muted); font-size: 14px; font-style: normal; font-weight: 600; }
.v3-claim-summary span { color: var(--muted); line-height: 1.45; }
@media (max-width: 1000px) { .staking-position-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .staking-position-grid.three > .lifetime { grid-column: 1 / -1; } }
@media (max-width: 640px) { .staking-position-grid.three, .v3-claim-summary { grid-template-columns: 1fr; } }

/* The moat: leaderboard beside the two moat numbers. */
.v3-moat-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 14px; align-items: start; }
.v3-pairs-card { min-width: 0; padding: 18px 20px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.v3-pairs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 8px; }
.v3-pairs-head > span { color: var(--cream); font-weight: 700; }
.v3-pairs-head b { color: var(--pink); }
.v3-pairs-head small { color: var(--muted); }
.v3-pairs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.v3-pairs th, .v3-pairs td { padding: 9px 8px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.v3-pairs th { color: var(--muted); font-weight: 700; letter-spacing: .6px; border-top: 0; }
.v3-pairs th:nth-child(-n+2), .v3-pairs td:nth-child(-n+2) { text-align: left; }
.v3-pairs td:first-child { color: var(--muted); width: 32px; }
.v3-pairs td a { color: var(--cream); font-weight: 700; text-decoration: none; }
.v3-pairs td a:hover { color: var(--pink); }
.v3-pairs tr.ours td { color: var(--cream); background: rgba(240,123,197,.1); }
.v3-pairs tr.ours td a { color: var(--pink); }
.v3-pairs-empty { padding: 24px 0 16px; color: var(--muted); }
@media (max-width: 900px) { .v3-moat-grid { grid-template-columns: 1fr; } .v3-moat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .v3-moat-stats { grid-template-columns: 1fr; } .v3-pairs-card { overflow-x: auto; } .v3-pairs { min-width: 440px; } .v3-pairs th, .v3-pairs td { padding: 8px 6px; } }

/* Season prize: the number, one info dot, the QQQ line. */
.season-prize-card, .world-route .season-prize-card { overflow: visible; grid-template-columns: 32px minmax(0, 1fr) 26px; min-width: 0; width: auto; max-width: min(340px, calc(100% - 44px)); min-height: 0; gap: 10px; padding: 10px 12px; }
.world-route .season-prize-card > i { width: 32px; height: 32px; font-size: 16px; }
.world-route .season-prize-card strong b { font-size: 24px; }
.season-prize-card > span > small { font-size: 12px; letter-spacing: .8px; }
.season-prize-card .jackpot-info { position: static; align-self: start; }
.season-prize-card:is(:hover, :focus-within) { z-index: 6; }
.season-prize-card .jackpot-info > [role=button] { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-bright); border-radius: 50%; color: var(--muted); font: 700 12px var(--sans); cursor: help; }
.season-prize-card .jackpot-info > [role=button]:is(:hover,:focus) + .metric-tooltip { display: block; }
.season-prize-card .jackpot-info .metric-tooltip { top: calc(100% + 10px); bottom: auto; right: 0; left: auto; width: 280px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.season-prize-card .jackpot-info .metric-tooltip b { display: block; margin-bottom: 4px; color: var(--cream); }
.season-prize-card > .v3-qqq-jackpot { padding-top: 7px; }
.season-prize-card > .v3-qqq-jackpot strong { font-size: 15px; }
@media (max-width: 640px) { .world-route .season-prize-card { max-width: calc(100% - 24px); grid-template-columns: 28px minmax(0, 1fr) 24px; padding: 10px 12px; } .world-route .season-prize-card strong b { font-size: 22px; } .season-prize-card .jackpot-info .metric-tooltip { width: min(280px, calc(100vw - 48px)); } }

/* Primary nav: Stake is the highlighted action; Call and Evolve live on World and My Herd. */
.primary-nav .nav-stake, .primary-nav > a.nav-stake.active { height: 40px; margin: 0 4px; padding: 0 16px; border-radius: 12px; background: var(--green); color: #0d2418; font-weight: 800; box-shadow: 0 6px 18px rgba(127,220,166,.22); }
.primary-nav .nav-stake:hover { color: #0d2418; background: var(--green); filter: brightness(1.06); }
.nav-more.active > summary { color: var(--cream); background: rgba(240,123,197,.13); box-shadow: inset 0 0 0 1px rgba(240,123,197,.22); }
.weather-row { position: absolute; z-index: 5; top: 20px; left: 22px; display: flex; align-items: center; gap: 8px; }
.weather-row .weather-chip { position: static; }
.music-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: var(--muted); cursor: pointer; transition: color .3s, box-shadow .6s, transform .3s; }
.music-toggle > i { position: relative; font: normal 19px/1 var(--sans); transform: translateY(-1px); }
.music-toggle > i::after { content: ''; position: absolute; top: -2px; left: 50%; width: 1.5px; height: 24px; border-radius: 1px; background: currentColor; transform: translateX(-50%) rotate(45deg); transition: transform .3s, opacity .3s; }
.music-toggle:hover { color: var(--cream); transform: translateY(-1px); }
.music-toggle[aria-pressed="true"] { color: var(--pink); box-shadow: 0 0 0 1px rgba(240,123,197,.28), 0 0 22px rgba(240,123,197,.22), 0 8px 22px rgba(0,0,0,.2); }
.world-focus-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: var(--muted); cursor: pointer; transition: color .3s, transform .3s; }
.world-focus-toggle > i { font: normal 17px/1 var(--sans); }
.world-focus-toggle:hover { color: var(--cream); transform: translateY(-1px); }
.world-focus-exit { display: none; }
/* Focus mode: the stage takes the viewport; every chip, card and control inside it hides. Only a faint × remains, plus Escape. */
.world-focus, .world-focus body { overflow: hidden; }
.world-focus .world-stage { position: fixed; inset: 0; z-index: 90; height: auto; min-height: 0; border: 0; }
.world-focus .world-stage > :is(.weather-row, .ritual-chip, .season-prize-card, .world-action-stack, .camera-controls, .scene-hint, .world-cast-chip, .world-inspector, .world-processing-card) { display: none; }
.world-focus .world-focus-exit { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); z-index: 6; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: rgba(255,255,255,.55); font: 300 30px/1 var(--sans); background: transparent; cursor: pointer; transition: color .3s, background .3s; }
.world-focus .world-focus-exit:hover, .world-focus .world-focus-exit:focus-visible { color: var(--cream); background: rgba(12,13,21,.45); outline: 0; }
.music-toggle[aria-pressed="true"] > i::after { opacity: 0; transform: translateX(-50%) rotate(45deg) scaleY(0); }
.music-toggle[aria-pressed="true"] > i { animation: music-sway 3.2s ease-in-out infinite; }
@keyframes music-sway { 0%, 100% { transform: translateY(-1px) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
@media (max-width: 700px) { .weather-row { top: 14px; left: 14px; gap: 6px; } .music-toggle { width: 34px; height: 34px; } }