/* ============================================================
   Dota 2 atmosphere — scoped to body.dt.

   RULE: this file dresses the PAGE SHELL only — background,
   hero, ambient light, marketing headings, section bands.
   It must never restyle the product mockups: cards, tabs,
   tables, tiles, dials, bars, the playstyle radar and hero
   profile stay exactly as the Supernova app renders them,
   and the brand nav, logo, buttons and progress bar stay brand.
   ============================================================ */

body.dt {
  background: #080a09
}

/* ---- ambient layers (behind the UI, never interactive) ---------------- */
#motes,
#mist,
#glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0
}

#motes {
  opacity: .85
}

/* the map diagonal: radiant light rising from the south-west,
   dire light bleeding from the north-east */
#mist {
  background:
    radial-gradient(ellipse 70% 55% at 6% 104%, rgba(93, 202, 165, .13), transparent 66%),
    radial-gradient(ellipse 66% 52% at 96% -6%, rgba(226, 84, 47, .12), transparent 66%);
  animation: tide 26s ease-in-out infinite alternate
}

@keyframes tide {
  from {
    opacity: .72;
    transform: translate3d(-1.2%, 1%, 0)
  }

  to {
    opacity: 1;
    transform: translate3d(1.2%, -1%, 0)
  }
}

/* lantern light follows your cursor */
#glow {
  background: radial-gradient(circle 340px at var(--tx, 50%) var(--ty, 40%), rgba(255, 206, 130, .12), rgba(240, 185, 94, .05) 45%, transparent 70%);
  mix-blend-mode: screen;
  transition: opacity .4s;
  opacity: 0
}

body.dt.lit #glow {
  opacity: 1
}

/* page content sits above the atmosphere */
body.dt .gswitch-bar,
body.dt header.hero,
body.dt .trust,
body.dt section,
body.dt footer {
  position: relative;
  z-index: 1
}

/* translucent bands so the motes and map light show through */
body.dt section.blk {
  background: transparent
}

body.dt section.blk.alt {
  background: rgba(24, 26, 30, .7)
}

/* .trust keeps the shared divider colour — its cells are opaque, so the
   atmosphere never showed through the strip anyway */

/* the video-backed section keeps its own treatment */
body.dt .secveil {
  background: linear-gradient(180deg, rgba(24, 26, 30, .95) 0%, rgba(12, 15, 14, .72) 22%, rgba(12, 15, 14, .72) 78%, rgba(24, 26, 30, .95) 100%)
}

/* ---- hero: the Ancient ------------------------------------------------- */
body.dt .hero {
  min-height: 700px
}

/* the Ancient's glow rising through the treeline */
body.dt .hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: min(760px, 78vw);
  height: 62%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 50% 60% at 50% 88%, rgba(120, 226, 180, .20), rgba(93, 202, 165, .07) 45%, transparent 70%);
  filter: blur(6px);
  animation: ancient 8s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none
}

@keyframes ancient {
  from {
    opacity: .68;
    transform: translateX(-50%) scaleY(.97)
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.04)
  }
}

body.dt .hero .veil {
  background:
    radial-gradient(ellipse 60% 66% at 50% 38%, rgba(8, 10, 9, 0) 0%, rgba(8, 10, 9, .5) 58%, rgba(8, 10, 9, .93) 100%),
    linear-gradient(180deg, rgba(8, 10, 9, .46), rgba(8, 10, 9, .10) 32%, rgba(8, 10, 9, .95))
}

body.dt .wordmark .game-logo {
  animation: runeGlow 5.5s ease-in-out infinite alternate
}

@keyframes runeGlow {
  from {
    filter: drop-shadow(0 0 18px rgba(226, 84, 47, .26)) drop-shadow(0 3px 12px rgba(0, 0, 0, .85))
  }

  to {
    filter: drop-shadow(0 0 34px rgba(255, 130, 70, .5)) drop-shadow(0 3px 12px rgba(0, 0, 0, .85))
  }
}

/* ---- marketing typography (page copy only, never widget chrome) ------- */
body.dt h1,
body.dt .sec-title,
body.dt .fcopy h2,
body.dt .cta h2 {
  font-family: 'Grenze', 'Work Sans', serif;
  font-weight: 700;
  letter-spacing: 1px
}

body.dt h1 {
  font-size: 46px;
  line-height: 1.18;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .85), 0 0 38px rgba(120, 226, 180, .18)
}

body.dt .sec-title {
  font-size: 32px;
  color: #eef3ef;
  text-transform: capitalize;
}

body.dt .fcopy h2 {
  font-size: 28px;
  color: #eef3ef;
  text-transform: capitalize;
}

body.dt .eyebrow {
  color: var(--gold);
  letter-spacing: 4px
}

body.dt .lede {
  font-family: 'Grenze', serif;
  font-size: 20px !important;
  color: #e4d9bf !important;
  line-height: 1.2;
}

body.dt .trust .n {
  font-family: 'Grenze', 'Work Sans', serif
}

/* rune rule under centred section titles */
body.dt .sec-title::after {
  content: "";
  display: block;
  width: 200px;
  height: 9px;
  margin: 15px auto 0;
  background:
    linear-gradient(90deg, transparent, rgba(240, 185, 94, .45) 22%, rgba(93, 202, 165, .45) 78%, transparent) center 4px/100% 1px no-repeat,
    conic-gradient(from 45deg, rgba(240, 185, 94, .95) 0 25%, transparent 0 100%) center/9px 9px no-repeat
}

/* ---- closing sections ------------------------------------------------- */
body.dt .cta {
  background: #151019 url('https://files.supernova-analytics.com/supernova-app-assets/Dota%202/Realm/Dota_Realm_Image.png') center 38% / cover no-repeat
}

body.dt footer {
  background: linear-gradient(180deg, rgba(12, 14, 13, .9), rgba(6, 8, 7, .96))
}

/* sections resolve out of the dark */
body.dt .reveal {
  filter: blur(5px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s ease
}

body.dt .reveal.in {
  filter: blur(0)
}

/* ---- motion / small screens ------------------------------------------- */
@media(prefers-reduced-motion:reduce) {

  body.dt .hero::before,
  body.dt .wordmark .game-logo,
  #mist {
    animation: none
  }

  body.dt .reveal {
    filter: none
  }

  #motes,
  #glow {
    display: none
  }
}

@media(max-width:820px) {
  body.dt h1 {
    font-size: 32px
  }

  body.dt .sec-title {
    font-size: 24px
  }

  #glow {
    display: none
  }
}
/* the game switcher follows the page under the fixed site header (sticky, as
   in styles.css); the block above sets it relative to lift it over the
   atmosphere, so restate sticky here — it still stacks above the effects */
body.dt .gswitch-bar {
  position: sticky;
  top: 0;
  z-index: 1000
}

@media(max-width:620px) {
  body.dt .gswitch-bar {
    position: relative
  }
}

/* Career Stats: responds to its own width the way the Destiny career card
   does, not to the screen. The two dials stay side by side (the shared 820px
   rule stacked them by viewport); as the card narrows the legends under each
   dial stack into label-left / number-right rows, the footer cells become
   label / value rows, and only the narrowest cards stack the two dials. */
body.dt .card:has(> .cs-foot) {
  container: dtcs / inline-size;
}

body.dt .cs-grid {
  grid-template-columns: 1fr 1fr;
}

body.dt .cs-col + .cs-col {
  border-top: none;
  border-left: 1px solid var(--line);
}

body.dt .cs-foot .cf .l,
body.dt .cs-foot .cf .n {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ~410px card: the three-stat KDA legend no longer fits across */
@container dtcs (max-width: 380px) {
  body.dt .cs-col .lgd {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  body.dt .cs-col .lg {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 10px;
    text-align: left;
  }

  body.dt .cs-col .lg .bar {
    grid-column: 1 / -1;
  }

  body.dt .cs-col .lg .n {
    text-align: right;
  }

  /* footer: one label / value row per stat */
  body.dt .cs-foot {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  body.dt .cs-foot .cf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: left;
  }

  body.dt .cs-foot .cf .n {
    justify-content: flex-end;
  }
}

/* narrowest cards: Win Rate above KDA, the divider turned horizontal */
@container dtcs (max-width: 300px) {
  body.dt .cs-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.dt .cs-col + .cs-col {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 10px;
  }
}

/* Match tabs: each card sizes against its own width. Before a table runs
   out of room the less important columns drop out — Combat loses Tower
   Damage and Healing (Hero Damage and Damage Taken stay), Overview loses
   Level and GPM (Player, K/D/A and Net Worth stay) — and the item build's
   purchase rows wrap instead of running off the card. */
body.dt .subpane[data-g="mh"] > .card {
  container: dtmh / inline-size;
}

@container dtmh (max-width: 440px) {
  body.dt .sb.dmg th:nth-child(3),
  body.dt .sb.dmg td:nth-child(3),
  body.dt .sb.dmg th:nth-child(4),
  body.dt .sb.dmg td:nth-child(4) {
    display: none;
  }

  body.dt .iline {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

@container dtmh (max-width: 400px) {
  body.dt table.sb:not(.dmg) th:nth-child(2),
  body.dt table.sb:not(.dmg) td:nth-child(2),
  body.dt table.sb:not(.dmg) th:nth-child(5),
  body.dt table.sb:not(.dmg) td:nth-child(5) {
    display: none;
  }
}

/* Teamfights table on a narrow card: the player gets its own line across the
   row and Damage / Healing / Gold Δ / XP Δ sit in four columns beneath it;
   the header keeps just the four metric labels over those columns */
@container dtmh (max-width: 440px) {
  body.dt .tfhr,
  body.dt .tfrow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 6px;
  }

  body.dt .tfhr > span:first-child {
    display: none;
  }

  body.dt .tfrow > .tfp {
    grid-column: 1 / -1;
  }
}

/* Top Heroes: long hero names end in an ellipsis instead of wrapping (the
   name track can shrink below its text), and at 400px and below the name
   drops out entirely — the hero portrait carries the row */
body.dt .thead,
body.dt .thr {
  grid-template-columns: 18px minmax(0, 1fr) 56px 56px 56px;
}

body.dt .thr .tht {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 400px) {
  body.dt .thr .tht {
    display: none;
  }
}

/* Signature heroes: one per row at 400px and below */
@media (max-width: 400px) {
  body.dt .sigrow {
    grid-template-columns: minmax(0, 1fr);
  }
}