/* Shared visual foundation, taken from the sign-in page.
   Loaded after page styles so navigation between screens keeps one identity. */
:root {
  --ui-bg: #111113;
  --ui-surface: #19191c;
  --ui-raised: #222226;
  --ui-border: #2b2b30;
  --ui-input-border: #3c3c44;
  --ui-text: #f6f6f8;
  --ui-muted: #b3b3be;
  --ui-soft: #92929e;
  --ui-accent: #7477f5;
  --ui-accent-hover: #8689ff;
  --ui-accent-border: #777aff;
  --ui-accent-soft: #7477f51a;
  --ui-link: #c3c4ff;
  --ui-focus: #a4a6ff;
  --ui-card-radius: 24px;
  --ui-control-radius: 12px;
  --ui-shadow: 0 8px 32px #00000016;
  --ui-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-coin: url('/assets/currency/impakt-coin-icon.webp');
}

/* Legacy game wallets use the same coin as the shared account header. */
.wallet-currency { display: inline !important; margin-left: .2em; font-size: .72em; font-weight: 700; letter-spacing: .04em; }
.coin, .top-coins .coin, .chrome .chrome-coins .coin, .crowd-head .wallet .coin {
  display:inline-block;
  width:18px;
  height:18px;
  flex:none;
  border:0;
  border-radius:0;
  background:var(--ui-coin) center / contain no-repeat;
  box-shadow:none;
  vertical-align:-.2em;
}
.hm-how-coin .ar-coin {
  width:96px;
  height:96px;
  transform:none;
  background-image:url('/assets/currency/impakt-coin.webp');
}

/* Bridge existing page tokens to the shared palette. Game outcome and rarity
   colors keep their own roles; these tokens describe interface chrome. */
:root, body, body.app, body.season, body.watch-page .shell {
  --face: var(--ui-font);
  --display: var(--ui-font);
  --void: var(--ui-bg);
  --bg: var(--ui-bg);
  --ground: var(--ui-bg);
  --panel: var(--ui-surface);
  --card: var(--ui-surface);
  --tile: var(--ui-surface);
  --raised: var(--ui-raised);
  --line: var(--ui-border);
  --rule: var(--ui-border);
  --edge: var(--ui-input-border);
  --line-hard: var(--ui-input-border);
  --ink: var(--ui-text);
  --text: var(--ui-text);
  --mute: var(--ui-muted);
  --muted: var(--ui-muted);
  --dim: var(--ui-soft);
  --faint: var(--ui-soft);
  --soft: var(--ui-soft);
  --green: var(--ui-accent);
  --signal: var(--ui-accent);
  --signal-hi: var(--ui-accent-hover);
  --signal-dim: var(--ui-accent-soft);
  --signal-edge: var(--ui-accent-border);
  --green-dim: var(--ui-accent-soft);
  --green-edge: var(--ui-accent-border);
  --accent: var(--ui-accent);
  --accent-hi: var(--ui-accent-hover);
  --r-sm: var(--ui-control-radius);
  --r-md: var(--ui-card-radius);
  --r-lg: var(--ui-card-radius);
  --radius: var(--ui-card-radius);
  --radius-sm: var(--ui-control-radius);
  --kk-bg: var(--ui-bg);
  --kk-surface: var(--ui-surface);
  --kk-surface-2: var(--ui-raised);
  --kk-line: var(--ui-border);
  --kk-line-2: var(--ui-input-border);
  --kk-text: var(--ui-text);
  --kk-mute: var(--ui-muted);
  --kk-dim: var(--ui-soft);
  --kk-green: var(--ui-accent);
  --kk-green-ink: #fff;
  --ed-display: var(--ui-font);
  --ed-cream: var(--ui-text);
  --ed-ink: var(--ui-text);
  --ed-mute: var(--ui-muted);
  --ed-dim: var(--ui-soft);
  --ed-line: var(--ui-border);
  --ed-line-strong: var(--ui-input-border);
  --ed-card: var(--ui-surface);
  --ed-card-hover: var(--ui-raised);
  --ed-green: var(--ui-accent);
  --ed-green-ink: #fff;
  --ed-radius: var(--ui-card-radius);
  --ed-shadow: var(--ui-shadow);
  --ix-line: var(--ui-border);
  --ix-muted: var(--ui-muted);
  --ix-accent: var(--ui-accent);
  --ix-surface: var(--ui-surface);
}

html, body:not(.auth-page), body.app {
  background: var(--ui-bg) !important;
  color: var(--ui-text);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
body:not(.auth-page) :is(h1,h2,h3,.ar-title,.cr-title,.sn-title,.pf-handle,.ar-sec-title,.hm-head b,.ix-table-message) {
  font-family: var(--ui-font);
  font-weight: 700;
  letter-spacing: -.035em;
  text-transform: none;
  text-shadow: none;
}
body:not(.auth-page) :is(.ar-sub,.ar-kicker,.cr-kicker,.sn-num,.sn-meta,.pf-since,.cr-panel-head b,.cr-field label) {
  letter-spacing: 0;
  color: var(--ui-muted);
  font-size: 13px;
}
body :is(button,a,input,textarea,select):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 4px;
}

/* The header, navigation and content share the same neutral surfaces. */
.kk-top, .kk-side, .kick-head { background: var(--ui-bg); }
.kk-nav, .kk-ch, .kk-side-more, .kk-burger, .kk-top .ar-tag,
.kk-top #balance.ar-bal, .kk-top #tier.ar-bal { border-radius: var(--ui-control-radius); }
.kk-nav.is-on { background: var(--ui-raised); color: var(--ui-text); }
.kk-nav.is-on i { color: var(--ui-link); }
.kk-day { padding: 14px; border: 1px solid var(--ui-border); border-radius: 16px; }
body :is(.hm-lc,.hm-cc,.hm-tn,.hm-me,.hm-war,.pf-panel,.pf-head,.cr-panel,.sn-pass,.hm-promo,.hm-strip,.ar-tile,.gu-ob-card,.hm-fchip,.ix-demo,.ix-empty,.ix-economy,.ix-room-panel,.hm-stage-side,.panel,.age-box,.kick-card) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-card-radius) !important;
  box-shadow: var(--ui-shadow);
}
body :is(.hm-feature,.kk-thumb,.hm-game-art,.player-frame) { border-radius: 16px !important; }
.home-page .hm-feature.is-stage .hm-feat-foot { background: var(--ui-surface); }
.pf-stat { background: var(--ui-raised); border-color: var(--ui-border); border-radius: 16px; }
.pf-avatar { box-shadow: none; }
.pf-bar i, .kk-day .kk-bar i { background: var(--ui-accent); }

/* Same filled primary action and 12px corners as Continue on sign-in. */
body :is(.kk-signup,.hm-cta,.ar-buy,.sn-pass-buy,.pf-claim,.gu-ob-next,.ix-primary,.st-save,.cr-save,.ar-confirm,.nf-primary,.hm-try-cta,.age-yes,.btn-main),
body .ix-links a:first-child,
body.ix-practice-page .ix-links a[aria-current=page],
body.clip-page .cl .acts .go {
  background: var(--ui-accent);
  border: 1px solid var(--ui-accent-border);
  border-radius: var(--ui-control-radius) !important;
  color: #fff;
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background .15s, border-color .15s;
}
body :is(.kk-signup,.hm-cta,.ar-buy,.sn-pass-buy,.pf-claim,.gu-ob-next,.ix-primary,.st-save,.cr-save,.ar-confirm,.nf-primary,.hm-try-cta,.age-yes,.btn-main):hover:not(:disabled),
body .ix-links a:first-child:hover { background: var(--ui-accent-hover); filter: none; }
body :is(.ix-primary,.st-save,.cr-save,.ar-confirm,.pf-claim,.ar-buy,.btn-main):disabled {
  opacity: .5;
  cursor: default;
}
body :is(.ix-links a,.st-ghost,.nf-second,.pf-tab,.cr-pick,.btn-ghost,.hm-row-nav button,.ix-share-confirm,.age-no) {
  border-radius: var(--ui-control-radius);
  font-family: var(--ui-font);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
/* The age prompt keeps a matched surface/text pair in store and live themes. */
body .age-row .age-yes {
  background: #f6f6f8;
  border-color: #f6f6f8;
  color: #151517;
}
body .age-row .age-yes:hover:not(:disabled) {
  background: #e4e4e8;
  border-color: #e4e4e8;
  color: #151517;
}
body .age-row .age-yes:disabled {
  background: #d5d5dc;
  border-color: #d5d5dc;
  color: #414148;
  opacity: 1;
}
.pf-tab.is-on, .cr-pick.is-on { background: var(--ui-accent-soft); border-color: var(--ui-accent-border); color: var(--ui-link); }
body.ix-practice-page .ix-links a:not([aria-current=page]) { background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-border); }
body :is(.st-field input,.cr-field input,.cr-input,.field input,.field textarea,.field select,.gu-search input,.chat-compose input) {
  background: var(--ui-surface);
  border: 1px solid var(--ui-input-border);
  border-radius: var(--ui-control-radius);
  color: var(--ui-text);
  font-family: var(--ui-font);
}
body :is(.st-field input,.cr-field input,.cr-input,.field input,.field textarea,.field select) { min-height: 48px; }
/* Native popup menus need their own opaque colors on Windows; the select's
   dark background does not reliably carry into its option list. */
body select { color-scheme: dark; }
body select :is(option,optgroup) {
  color: var(--ui-text);
  background-color: var(--ui-raised);
}
body select option:disabled { color: var(--ui-muted); }
.account-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--ui-input-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-raised);
  color: var(--ui-text);
  font: 600 12px var(--ui-font);
  white-space: nowrap;
  cursor: pointer;
}
.account-signout:hover { border-color: var(--ui-focus); }
.account-signout:disabled { opacity: .65; cursor: wait; }
body :is(.st-field input,.cr-field input,.cr-input,.field input,.gu-search input,.chat-compose input)::placeholder { color: var(--ui-soft); }
body :is(.st-field input,.cr-field input,.cr-input,.field input,.gu-search input,.chat-compose input):focus {
  border-color: #8588ff;
  box-shadow: 0 0 0 3px #777bff1c;
}

/* Interactive panels keep the sign-in card's charcoal and restrained accent. */
.ix-table { background: var(--ui-bg); }
.ix-table-message, .ix-seat b { color: var(--ui-text); }
.ix-table-top, .ix-table-bottom, .ix-seat, .ix-feedback, .ix-choices small, .ix-share-help { color: var(--ui-muted); }
.ix-badge { background: var(--ui-accent-soft); border-color: var(--ui-input-border); color: var(--ui-link); border-radius: 8px; }
.ix-card-back { background: var(--ui-raised); border-color: var(--ui-accent-border); color: var(--ui-link); }
.ix-choices button { background: var(--ui-surface); border-color: var(--ui-input-border); color: var(--ui-text); border-radius: var(--ui-control-radius); }
.ix-choices button:hover:not(:disabled), .ix-choices button.is-selected { background: var(--ui-accent-soft); border-color: var(--ui-accent-border); }
.ix-feedback.is-result, .ix-room-tabs button[aria-selected=true], .ix-clip-status,
.ix-demo-next a, .ix-text-button, .ix-economy a, .ix-crowd-wait a, .ix-ice-help a,
body.ix-watch .lv-buycoins, .home-page #arcade .kk-meta small:last-child, .ix-clip-status a { color: var(--ui-link); }
body.ix-watch .crowd-dock, body.ix-watch .chat-compose { background: var(--ui-surface); border-color: var(--ui-border); }
body.ix-watch .chat-compose input { background: var(--ui-bg); }
body.ix-watch .title-bar h1 { color: var(--ui-text); font-weight: 700; }
.ix-share-confirm, .clip-page .cl .acts a, .clip-page .cl .acts button { background: var(--ui-raised); border-color: var(--ui-input-border); color: var(--ui-link); }
.ix-decision .ix-fine, .ix-foot-links a, .home-page .hm-head span { color: var(--ui-soft); }
.ix-eyebrow, .kk-day a { color: var(--ui-link); }
.hm-try { background: var(--ui-accent-soft); }
.hm-try-dot { animation: none; box-shadow: none; }
.hm-stage-side.is-nudging #crowd-poll button:not(:disabled) { animation: none; border-color: var(--ui-accent-border) !important; }
.kk-thumb-fill { background: var(--ui-raised); }
.hm-game-art { background: var(--ui-surface); }

/* Small standalone information pages belong to the same product. */
body.info-page a { color: var(--ui-link); }
body.info-page :is(p,li) { color: var(--ui-muted); }
body.info-page :is(header,footer,section,.card,.note) { border-color: var(--ui-border); }
body.info-page h2 { color: var(--ui-text); font-size: 20px; line-height: 1.4; }

/* Shared interaction feedback, using the existing colors on every screen. */
@media(prefers-reduced-motion:no-preference) {
  body :is(.kk-signup,.ix-primary,.hm-cta,.pf-claim,.st-save,.cr-save,.sn-pass-buy,.auth-continue) { transition:background .18s ease,transform .18s ease,box-shadow .18s ease; }
  body :is(.kk-signup,.ix-primary,.hm-cta,.pf-claim,.st-save,.cr-save,.sn-pass-buy,.auth-continue):active:not(:disabled) { transform:translateY(2px) scale(.98); }
  .kk-nav,.kk-ch { transition:background .18s ease,color .18s ease; }
  .kk-card .kk-thumb,.ix-choices button { transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
  @media(hover:hover) and (pointer:fine) {
    .kk-card:hover .kk-thumb { transform:translateY(-3px); box-shadow:0 10px 24px #0003; }
    .ix-choices button:hover:not(:disabled) { transform:translateY(-2px); }
  }
}