/* Site extras: news-and-price chyron, partner ad slots and the ad manager
   link (site-extras.js). */

/* The chyron spans the top of the page and always scrolls (owner,
   2026-10-16): welcome and version, then markets, then credits, repeated. */
.site-chyron {
  --chyron-height: 34px;
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--chyron-height);
  background: linear-gradient(90deg, #070b17, #0c1530 50%, #070b17);
  border-bottom: 1px solid rgba(94, 160, 255, 0.22);
  color: var(--text-secondary, #c7d0e6);
  font: 600 13px/1 var(--font-ui, system-ui, sans-serif);
  overflow: hidden;
}
/* Its space is held from first paint, at its final height, until the ticker answers (2.10.0: every
   app page shifted 45 px on phones). styles.css, loaded later, hides [hidden] with !important, so the
   hold must outrank it; a ticker that fails gives the space back (data-chyron-off, site-extras.js). */
.site-chyron[hidden] { display: flex !important; visibility: hidden; }
.site-chyron[data-chyron-off] { display: none !important; }
/* styles.css lifts every button to 44 px here; the strip's controls (and so its height) match. */
@media (hover: none), (max-width: 1024px) { .site-chyron { --chyron-height: 45px; } .site-chyron__button { min-height: 44px; } }
.site-chyron__viewport { position: relative; width: 100%; overflow: hidden; display: flex; justify-content: center; }
.site-chyron__track { display: flex; align-items: center; width: max-content; }
.site-chyron__pass { display: flex; align-items: center; gap: 18px; padding-right: 18px; white-space: nowrap; }
.site-chyron--moving .site-chyron__viewport { justify-content: flex-start; }
.site-chyron--moving .site-chyron__track { animation: site-chyron-scroll var(--chyron-duration, 40s) linear infinite; }
/* A pointer resting on the strip or keyboard focus inside it holds the text still; a touch tap must
   not (a tapped link keeps focus and the strip would look stuck on phones). */
@media (hover: hover) {
  .site-chyron--moving:hover .site-chyron__track,
  .site-chyron--moving:focus-within .site-chyron__track { animation-play-state: paused; }
}
@keyframes site-chyron-scroll { from { transform: translateX(0); } to { transform: translateX(var(--chyron-distance, -50%)); } }
.site-chyron__group { display: inline-flex; align-items: baseline; gap: 16px; }
.site-chyron__label { color: var(--crypto-cyan, #4fe3ff); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.site-chyron__divider { color: rgba(94, 160, 255, 0.45); font-weight: 400; }
.site-chyron__welcome strong { color: var(--crypto-gold, #ffd35c); }
.site-chyron__version { color: var(--text-primary, #f4f7ff); text-decoration: none; }
.site-chyron__version:hover, .site-chyron__version:focus-visible { color: var(--crypto-cyan, #4fe3ff); text-decoration: underline; }
.site-chyron__item { display: inline-flex; align-items: baseline; gap: 6px; color: inherit; text-decoration: none; }
.site-chyron__item strong { color: var(--text-primary, #f4f7ff); letter-spacing: 0.03em; }
.site-chyron__price { color: var(--text-primary, #f4f7ff); font-variant-numeric: tabular-nums; }
.site-chyron__change--up { color: var(--crypto-green, #42f5a1); }
.site-chyron__change--down { color: var(--fiat-red, #ff5a6a); }
.site-chyron__note { color: var(--text-secondary, #9fb0d4); font-weight: 500; }
.site-chyron__link:hover strong, .site-chyron__link:focus-visible strong { color: var(--crypto-cyan, #4fe3ff); text-decoration: underline; }
.site-chyron__link:focus-visible, .site-chyron__version:focus-visible { outline: 2px solid var(--focus-ring, #4fe3ff); outline-offset: 2px; border-radius: 4px; }
.site-chyron__arrow { font-size: 11px; opacity: 0.7; }
.site-chyron__meta { gap: 10px; font-size: 11px; font-weight: 500; }
.site-chyron__credit { color: var(--text-secondary, #9fb0d4); }
.site-chyron__disclaimer { color: rgba(199, 208, 230, 0.65); }
@media (max-width: 640px) {
  .site-chyron { font-size: 12px; }
  /* Phones: the strip itself needs the width. Pause keeps its icon and aria-label, Markets its word. */
  .site-chyron__button[data-chyron-pause] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-chyron__button[data-chyron-pause] { position: relative; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-chyron--moving .site-chyron__track { animation: none; }
  .site-chyron__viewport { overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
}

/* Partner slots: a framed card with its "Partner" label and an "Advertise
   here" link. Each reserves its height so nothing jumps when an ad arrives. */
.partner-slot {
  --partner-frame: 13px;
  display: grid;
  justify-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(728px + 2 * var(--partner-frame) + 2px);
  margin: 16px auto;
  padding: 10px var(--partner-frame) var(--partner-frame);
  border: 1px solid rgba(94, 160, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 30, 62, 0.55), rgba(8, 12, 26, 0.35));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.partner-slot[data-partner-slot="top"] { min-height: calc(min(100vw - 32px, 728px) * 90 / 728 + 44px); }
@media (max-width: 727px) { .partner-slot[data-partner-slot="top"] { min-height: calc(min(100vw - 32px, 320px) * 100 / 320 + 44px); } }
.partner-slot[hidden] { display: none; }
.partner-slot__head { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.partner-slot__label,
.partner-slot__advertise {
  color: var(--text-secondary, #9fb0d4);
  font: 600 10px/1 var(--font-ui, system-ui, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.partner-slot__label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--crypto-gold, #ffd35c); vertical-align: 1px; }
.partner-slot__advertise { text-decoration: none; opacity: 0.75; }
.partner-slot__advertise:hover, .partner-slot__advertise:focus-visible { color: var(--crypto-cyan, #4fe3ff); opacity: 1; text-decoration: underline; }
.partner-ad { display: block; width: 100%; max-width: 100%; border-radius: 8px; line-height: 0; transition: transform 160ms ease, box-shadow 160ms ease; }
.partner-ad:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(79, 227, 255, 0.12); }
.partner-ad img { display: block; width: 100%; height: auto; aspect-ratio: var(--partner-ratio, auto); border-radius: 8px; }
.partner-ad:focus-visible { outline: 2px solid var(--focus-ring, #4fe3ff); outline-offset: 3px; }
.partner-slot[data-fit="mobile-banner"] { max-width: calc(320px + 2 * var(--partner-frame) + 2px); }
.partner-slot[data-fit="rectangle"] { max-width: calc(300px + 2 * var(--partner-frame) + 2px); }
.partner-slot[data-fit="skyscraper"] { max-width: calc(300px + 2 * var(--partner-frame) + 2px); }
@media (prefers-reduced-motion: reduce) { .partner-ad, .partner-ad:hover { transition: none; transform: none; } }

/* The rail: a 300px column beside wide layouts only (pages wrap content and rail in .partner-rail-layout). */
.partner-rail { display: none; }
@media (min-width: 1240px) {
  .partner-rail-layout { display: grid; grid-template-columns: minmax(0, 1fr) calc(300px + 28px); gap: 28px; align-items: start; }
  .partner-rail { display: block; position: sticky; top: 16px; }
}
.partner-slot[data-partner-slot="rail"] { margin: 0; }
.partner-slot[data-partner-slot="inline"] { margin: 28px auto; }
/* Mid-article slots stand in for the rail where it has no room. */
.partner-mid { display: block; }
@media (min-width: 1240px) { .partner-mid { display: none; } }
/* A partner card in a narrow column (home FAQ) sits at its start. */
.partner-slot--column { margin: 24px 0 0; justify-self: start; }
/* The slot placed between the profile or scoreboard panels spans the grid. */
.partner-slot--view { grid-column: 1 / -1; }
.partner-slot--view.partner-slot--cell { grid-column: auto; align-self: center; margin: 0 auto; }

/* Nothing distracts while a game is on screen. */
:root[data-game-on-screen] .site-chyron,
:root[data-game-on-screen] .partner-slot,
:root[data-game-on-screen] .ad-manager-link { display: none !important; }

/* Ad managers only: a small fixed button to the ad manager. */
.ad-manager-link {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1b6f86, #7a2a72);
  color: #fff;
  font: 700 12px/1 var(--font-ui, system-ui, sans-serif);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.ad-manager-link:hover, .ad-manager-link:focus-visible { outline: 2px solid var(--focus-ring, #4fe3ff); outline-offset: 2px; }

/* Profile (2.9.4): a skyscraper rail beside the profile on wide screens; the
   profile keeps about three quarters of the width. */
@media (min-width: 1240px) {
  .official-app[data-step="profile"] #officialArcadeFloor:has(> .partner-rail--view) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(300px + 28px);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 28px;
    align-items: start;
  }
  .official-app[data-step="profile"] #officialArcadeFloor:has(> .partner-rail--view) > * { grid-column: 1; min-width: 0; }
  .official-app[data-step="profile"] #officialArcadeFloor:has(> .partner-rail--view) > .arcade-walk-in { grid-column: 1 / -1; }
  .official-app[data-step="profile"] #officialArcadeFloor > .partner-rail--view { grid-column: 2; grid-row: 2 / 6; align-self: start; position: sticky; top: 16px; }
}

/* Scores (2.9.4): a compact 320×100 card in the filter panel's heading row. */
.leaderboard-filter-head:has(> .partner-slot--compact:not([hidden])) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; }
.partner-slot--compact { width: calc(320px + 2 * var(--partner-frame, 13px) + 2px); max-width: 100%; margin: 0; flex: 0 0 auto; }
/* Home FAQ: the compact card sits under "Need a hand?". */
.partner-slot--column[data-fit="mobile-banner"] { width: calc(320px + 2 * var(--partner-frame) + 2px); }

/* Facelift accessibility pass: the "Advertise here" link gets a 24 px target (WCAG 2.5.8). */
.partner-slot__advertise { display: inline-flex; align-items: center; min-height: 24px; }