/*
  demo-overrides.css — the only CSS written for the marketing port.

  Loaded LAST, after modes/<mode>.css, so it wins on the handful of rules that
  assume app chrome this page doesn't have. Everything else in this realm is a
  byte-for-byte copy of the app's stylesheets, which is what keeps the demo
  looking identical to the product.

  Three groups of change, all forced by the missing app shell:
    1. Vertical offsets. The app reserves ~72px for its real header; the demo's
       sticky topbar is shorter, so the mode row and widget grid move up.
    2. Icon-slot styling. The app injects these rules from overall.js at runtime
       (a `<style id="d2-icon-row-styles">` element). Static CSS is clearer here
       and means analytics.js never touches document.head.
    3. Character-card headers. The app paints a Bungie emblem background behind
       them; the marketing blob has no emblem art, so a per-element gradient
       stands in and the existing scrim still gives the text its contrast.
*/

/* --- 1. Offsets ---------------------------------------------------- */

/* App header is 72px; the demo topbar is ~57px and sticky. */
.widget-container {
    top: 40px;
}

.mode-tabs-row {
    top: 24px;
}

/* --- 2. Subclass / loadout icon rows ------------------------------- */
/* Mirrors the app's runtime-injected #d2-icon-row-styles exactly. */

.icon-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.icon-row .icon-slot {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.icon-row .icon-slot img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    display: block;
}

.icon-row .icon-slot--empty {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* --- 3. Character card headers ------------------------------------- */

.character-card .char-header {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.character-card .char-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.15));
    pointer-events: none;
}

.character-card .char-header > * {
    position: relative;
    z-index: 1;
}

/*
  Element pill borders — same palette the app uses. `data-element` is set by
  analytics.js from the character's subclass element.
*/
.tag[data-pill="element"] { border: 1px solid rgba(255, 255, 255, 0.18); }
.tag[data-pill="element"][data-element="arc"]        { border-color: #40ECF3; }
.tag[data-pill="element"][data-element="void"]       { border-color: #B580E1; }
.tag[data-pill="element"][data-element="strand"]     { border-color: #00E554; }
.tag[data-pill="element"][data-element="stasis"]     { border-color: #358AFF; }
.tag[data-pill="element"][data-element="solar"]      { border-color: #FF5600; }
.tag[data-pill="element"][data-element="prismatic"]  { border-color: #DB86D6; }

/*
  The header background is each character's real Bungie emblem, set inline by
  analytics.js from UserCharacter.emblemBackgroundPath — same as the app. The
  ::before scrim above is what keeps the name and power legible across emblems
  that run bright.

  Emblem art is 474x96 and the header is shorter than that, so it is pinned
  left rather than centred: emblems carry their motif on the left and their
  flat colour field on the right, which is where the text sits.
*/
.character-card .char-header {
    background-position: left center;
}

/* Tinted placeholder while the emblem loads, so the slot never flashes empty. */
.character-card .char-avatar {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    object-fit: cover;
}

/* --- Weapon cells --------------------------------------------------- */
/*
  Both table layouts render `.weapon-icon > img`. The app's weapon art is
  square Bungie manifest icons; sizing them here keeps the rows from growing to
  the image's natural height.
*/
.weapon-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    flex: 0 0 24px;
    background: rgba(255, 255, 255, 0.06);
}

.weapon-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.table-v1-col--name,
.table-v2-col--name,
.table-v2--name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.weapon-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
  NOT overridden, deliberately: Overall's Top Weapons table emits five cells
  (Weapon / Games / Kills / Headshots / HS%) against a four-column grid, which
  looks like an off-by-one until you find this in overall.css:

      .table-v2-header-row> :nth-child(2),
      .table-v2-row> :nth-child(2) { display: none; }

  The Games cell is hidden on purpose — the app's renderTopWeapons() notes
  per-weapon games data is frequently absent and falls back to 0 — so four
  columns for four visible cells is correct. The cell is still emitted and
  populated here, so deleting that rule upstream makes the column appear with
  real numbers behind it.
*/