/* IMPAKT brand layer. Page layouts, game colors and interaction states remain
   owned by their components. Display type is reserved for editorial titles. */
body.ui-refined {
  --impakt-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --impakt-chalk: #f2f1ec;
  --impakt-carbon: #101112;
  --impakt-panel: #18191b;
  --impakt-edge: #ffffff17;
  --impakt-accent: #b9a0e9;
  --impakt-cut: url('/assets/impakt-cut.svg');
}

/* The cut is a supporting graphic, never a replacement for the main logo. */
.ui-refined .impakt-cut {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--impakt-cut) center / contain no-repeat;
  mask: var(--impakt-cut) center / contain no-repeat;
}
body.ui-refined :is(.hero h1,.hm-sec h2,.ln-heading h1,.shop-heading h1,.shop-hero h2,.shop-reward-card h2,.dr-heading h1,.ph-page-head h1,.cd-page-head h1,.auth-story h2),
body.ui-refined :is(.page-shell,.hud-experience) :is(.ln-heading h1,.shop-heading h1,.shop-hero h2,.shop-reward-card h2,.dr-heading h1,.ph-page-head h1,.cd-page-head h1) {
  font-family: var(--impakt-display);
  font-weight: 700;
  /* Legacy game-ui resets every descendant with !important. Only editorial
     titles opt out; form labels, player controls and user content stay as typed. */
  text-transform: uppercase !important;
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--impakt-chalk);
}
body.ui-refined.store-page.nv-ready :is(.shop-heading h1,.shop-hero h2,.shop-reward-card h2) {
  font-family: var(--impakt-display);
  letter-spacing: -.015em;
}
body.ui-refined.store-page.nv-ready .shop-heading h1 { font-size: clamp(40px,4.5vw,58px); }
body.ui-refined.store-page.nv-ready .shop-hero h2 { max-width: none; font-size: clamp(38px,4.1cqw,50px); }
body.ui-refined :is(.hero h1,.hm-join h2) { font-size: clamp(44px,5.6cqw,72px); }
body.ui-refined .hero h1 { max-width: none; flex-shrink: 0; }
body.ui-refined .hero h1 em { color: var(--impakt-chalk); }
body.ui-refined .hero h1 em::after {
  content: '';
  display: inline-block;
  width: .52em;
  height: .5em;
  margin-left: .18em;
  vertical-align: .015em;
  background: var(--impakt-accent);
  -webkit-mask: var(--impakt-cut) center / contain no-repeat;
  mask: var(--impakt-cut) center / contain no-repeat;
}
body.ui-refined :is(.nw-head h2,.hm-faq h2) { font-size: clamp(36px,4.3cqw,54px); }
body.ui-refined :is(.ln-heading h1,.shop-heading h1,.dr-heading h1,.ph-page-head h1) { font-size: clamp(40px,4.5vw,58px); }
body.ui-refined .cd-page-head h1 { font-size: 42px; gap: 12px; }
body.ui-refined .cd-page-head .cd-status { font-family: var(--font-ui); text-transform: none; letter-spacing: normal; }
body.ui-refined .auth-story h2 { font-size: clamp(56px,6vw,88px); line-height: .98; }
body.ui-refined .auth-story h2 span { color: var(--impakt-chalk); }

/* A quiet recurring marker makes section labels identifiable at small sizes. */
body.ui-refined :is(.nw-eyebrow,.ln-heading .ln-eyebrow,.shop-heading .shop-eyebrow,.dr-eyebrow,.ph-page-head .ph-eyebrow,.cd-page-head .cd-eyebrow,.auth-story .auth-eyebrow) {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #b5b5bd;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
}
body.ui-refined :is(.nw-eyebrow,.ln-heading .ln-eyebrow,.shop-heading .shop-eyebrow,.dr-eyebrow,.ph-page-head .ph-eyebrow,.cd-page-head .cd-eyebrow,.auth-story .auth-eyebrow)::before {
  content: '';
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 12px;
  background: var(--impakt-accent);
  -webkit-mask: var(--impakt-cut) center / contain no-repeat;
  mask: var(--impakt-cut) center / contain no-repeat;
}

/* Neutral surfaces let game art, real streams and the logo carry the color. */
body.ui-refined :is(.hm-join,.hs-card,.cd-card,.cd-stat,.dr-card,.ph-card) {
  border-color: var(--impakt-edge);
  border-radius: 12px;
  background: var(--impakt-panel);
  box-shadow: none;
}
body.ui-refined .hm-join { border-top-color: var(--impakt-accent); }
body.ui-refined .hm-join h2 em { color: var(--impakt-chalk); }
body.ui-refined .hm-faq h2 em { color: #a6a7ad; }
body.ui-refined .hm-join-copy > p { color: #aaabb3; }
body.ui-refined.store-page.nv-ready :is(.shop-hero,.shop-reward-card) {
  background: var(--impakt-panel);
  border-color: var(--impakt-edge);
  border-radius: 12px;
}
body.ui-refined :is(.landing-button,.hs-cta,.cd-button,.shop-primary,.ph-button,.xp-button) { border-radius: 8px; }
body.ui-refined :is(.landing-button.is-primary,.hs-cta) {
  color: #141516;
  background: var(--impakt-chalk);
  border-color: transparent;
  box-shadow: none;
}
body.ui-refined .hero-frame-tabs button[aria-selected="true"] { background: #ffffff08; border-color: #ffffff24; }
body.ui-refined .hero-frame-tabs button[aria-selected="true"] > span { color: var(--impakt-accent); }
body.ui-refined :is(.ln-note-icon,.ln-empty-glyph) { color: var(--impakt-accent); }
body.ui-refined .ln-feature { background: var(--impakt-panel); border-radius: 12px; }
body.ui-refined .ln-feature-copy > a { background: var(--impakt-chalk); color: #141516; border-radius: 8px; }
body.ui-refined :is(.xp-profile-teaser,.xp-mission-summary) { background: var(--impakt-panel); border-color: var(--impakt-edge); border-radius: 12px; }
body.ui-refined .xp-profile-teaser > .impakt-cut { color: var(--impakt-accent); }

/* Stable navigation typography, including pages with tracked HUD labels. */
body.ui-refined.nv-ready .kk-top :is(button,.nv-search-trigger,.account-signout,.ar-tag,.ar-bal) { letter-spacing: normal; }
body.ui-refined.nv-ready .kk-nav.is-active { background: #ffffff06; color: var(--impakt-chalk); }

/* Crowdplay uses the same identity without moving the player or its controls. */
body.ui-refined .xp-surface { --xp-muted: #a9adb5; --xp-line: #ffffff19; }
body.ui-refined .xp-live-head .xp-tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--impakt-accent);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
body.ui-refined .xp-live h2 {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.25;
}
body.ui-refined .xp-live .xp-round-top .xp-eyebrow { font-family: var(--font-ui); font-size: 9px; letter-spacing: .065em; }
body.ui-refined .xp-live .xp-round-intro { font-size: 12px; line-height: 1.65; }
body.ui-refined .xp-surface .xp-primary { background: var(--impakt-chalk); color: #141516; border-color: transparent; }
body.ui-refined .xp-surface .xp-primary:hover:not(:disabled) { background: #fff; }
body.ui-refined .xp-live :is(.xp-button,.xp-text-button,.xp-segments button) { letter-spacing: normal; }
body.ui-refined .xp-live .xp-caption { font-size: 10px; line-height: 1.6; }
body.ui-refined .xp-live .xp-impact-receipt { border-radius: 10px; background: #ffffff05; border-color: var(--impakt-edge); }
body.ui-refined .xp-live-dock { border-radius: 12px; background: #151618f5; border-color: #ffffff24; box-shadow: 0 6px 24px #0004; letter-spacing: normal; }
body.ui-refined .xp-live-dock .xp-dock-mark { background: none; color: var(--impakt-accent); }
body.ui-refined .xp-live-dock .xp-dock-mark .impakt-cut { width: 22px; height: 20px; }
body.ui-refined .xp-live-dock small { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: .07em; color: var(--impakt-accent); }
body.ui-refined .xp-live-dock b { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
body.ui-refined .xp-live-dock > i { color: #d6d6dc; }

@media (max-width: 900px) {
  body.ui-refined .hero h1 { font-size: clamp(40px,5.6cqw,58px); }
}
@media (max-width: 600px) {
  body.ui-refined .hero h1 { font-size: clamp(40px,10.8cqw,52px); }
  body.ui-refined :is(.ln-heading h1,.shop-heading h1,.dr-heading h1,.ph-page-head h1) { font-size: 40px; }
  body.ui-refined .cd-page-head h1 { font-size: 36px; }
  body.ui-refined .hm-join h2 { font-size: 44px; }
  body.ui-refined.store-page.nv-ready .shop-hero p { max-width: 21ch; }
}
/* Compact embedded wallets and reward dialogs retain their original scale. */
html.is-embed body.ui-refined :is(.dr-heading h1,.shop-heading h1) { font-size: 30px; }