:root{
  --surface: #120C0E;
  --surface-container: #1D1317;
  --surface-container-high: #271A20;
  --on-surface: #E9DCBB;
  --on-surface-variant: #9D8E71;
  --accent: #C79B3B;
  --accent-ink: #1A1008;
  --line: #E9DCBB1F;
  --band: color-mix(in srgb, var(--surface) 96%, #fff);
  --band-2: color-mix(in srgb, var(--surface) 92%, #fff);
  --fr: color-mix(in srgb, var(--on-surface) 30%, var(--surface));
  --frt: color-mix(in srgb, var(--on-surface) 18%, var(--surface));
  --bev: color-mix(in srgb, var(--on-surface) 10%, transparent);
  --slot: color-mix(in srgb, var(--on-surface) 8%, var(--surface));
  --font-display: "Handjet", "Arial Narrow", sans-serif;
  --font-body: "Jersey 25", system-ui, sans-serif;
  --font-technical: "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --tier-gold: #FFD700;
  --tier-silver: #B2B2B2;
  --tier-bronze: #AD8A56;
  --tier-steel: #8A93A1;
  --accent-text: #C79B3B;
  --band-plate: 45%;
  --band-scrim-top: 23.6%;
  --band-scrim-bottom: 59.5%;
  --band-filter: saturate(0.261) brightness(0.688) contrast(0.919);
}
@font-face{font-family:"Handjet";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/handjet-400.woff2") format("woff2");}
@font-face{font-family:"Handjet";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/handjet-700.woff2") format("woff2");}
@font-face{font-family:"Jersey 25";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/jersey-25-400.woff2") format("woff2");}
@font-face{font-family:"VT323";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/vt323-400.woff2") format("woff2");}

*, *::before, *::after { box-sizing: border-box; }

.skip-link { position: absolute; left: -9999px; z-index: var(--z-skip, 200); padding: .6rem 1rem; background: var(--accent); color: var(--accent-ink); font-family: var(--font-body); }
.skip-link:focus-visible { left: .5rem; top: .5rem; }

.icon-sprite { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal.is-visible.d1 { transition-delay: .05s; }
  .reveal.is-visible.d2 { transition-delay: .1s; }
  .reveal.is-visible.d3 { transition-delay: .15s; }
  .reveal.is-visible.d4 { transition-delay: .2s; }
  .reveal.is-visible.d5 { transition-delay: .25s; }
}

.lang-menu, .profile-menu { position: relative; }

.lang-switch.lang-menu { overflow: visible; }

.lang-list, .profile-list { background: var(--surface); border: inherit; border-radius: inherit; }

.lang-trigger { background: none; border: 0; color: inherit; }

.lang-opt.lang-trigger { cursor: pointer; }

.lang-list, .profile-list { position: absolute; top: 100%; right: 0; margin: 0; padding: 0; list-style: none; min-width: 100%; width: max-content; z-index: 1; }

.lang-list li, .profile-list li { display: flex; }
.lang-list .lang-opt, .profile-list .profile-item { flex: 1; }

.lang-list[hidden], .profile-list[hidden] { display: none; }

.dash-shot-play[hidden] { display: none; }

.dash-about-plate-play { z-index: 1; }

.sec-idx { display: none; }

.dash-plate { min-width: 0; }
.profile-name { min-width: 0; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.footer-inner { width: var(--col); margin-inline: auto; display: flex;
                flex-direction: column; align-items: center; text-align: center; }
.footer-logos, .footer-socials, .footer-legal-links {
                display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

.footer { padding-block: 2.5rem; }
.footer-fineprint { max-width: 48rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.dash-title { margin: 0; display: flex; align-items: center; }
.dash-logo img { display: block; height: 44px; width: auto; }

.nav-logo img { height: 44px; width: auto; }

.footer-logos img { height: 24px; width: auto; }

.nav-actions { display: flex; align-items: center; gap: .75rem; }

@media (max-width: 560px) {
  .store-list:has(li:nth-child(2)) {
    width: 100%; display: flex; flex-direction: column; align-items: stretch;
  }
  .store-list:has(li:nth-child(2)) > li { width: 100%; }

  .store-list:has(li:nth-child(2)) > li > a { width: 100%; text-align: center; }
}

@media (max-width: 720px) {
  #cta [data-steam-swap="widget"] { display: none; }
}
@media not all and (max-width: 720px) {
  #cta [data-steam-swap="stores"] { display: none; }
}

.is-menu-open .nav { z-index: var(--z-burger); }

.nav-burger > span { display: contents; }
.nav-burger[aria-expanded="false"] .nav-burger-close,
.nav-burger[aria-expanded="true"] .nav-burger-open { display: none; }

.btn-icon { display: flex; }

.hero-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  margin-inline: var(--hero-actions-align, 0 auto);
}
.hero--left { --hero-actions-align: 0 auto; }
.hero--center { --hero-actions-align: auto; }
.hero--right { --hero-actions-align: auto 0; }
@media (max-width: 560px) {

  .hero-actions { grid-auto-flow: row; width: 100%; }
}

.dash-shot-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); display: block;
}

main { --rhythm: 8rem; }
main.dash-main { --rhythm: 5rem; }

.reveal.is-visible { opacity: 1; transform: none; }

.media-play { position: absolute; inset: 0; display: grid; place-items: center; --badge-pad: .27; }

.media-play[hidden] { display: none; }

.media-grid .media-tiles { justify-content: center; --media-tile-cap: 7; }

.media-tiles .media-play { --media-badge-tile: 40px; }
.media-play svg {
  width: var(--media-badge-tile);
  height: var(--media-badge-tile);
  padding: calc(var(--media-badge-tile) * var(--badge-pad));
}

.dash-about-plate .dash-shot-play { --media-badge-plate: 56px; }
.dash-shot .dash-shot-play { --media-badge-tile: 32px; }
.dash-shot-play svg {
  width: var(--media-badge-plate, var(--media-badge-tile));
  height: var(--media-badge-plate, var(--media-badge-tile));
}

.media-plate-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block;
}
.media-plate-video[hidden], .media-plate img[hidden] { display: none; }

.media-plate-fallback {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  --media-badge-tile: 56px;
  width: var(--media-badge-tile); height: var(--media-badge-tile);
}

.media-nav, .media-dots { display: none; }

.media-dot {
  width: .5rem; height: .5rem; padding: 0; border: 0;
  border-radius: var(--media-dot-radius, 50%);
  background: var(--on-surface-variant); cursor: pointer;
}
.media-dot[aria-current="true"] { background: var(--accent); }

.media-dot::after {
  content: ""; position: absolute; width: 44px; height: 44px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.media-dots li { position: relative; display: grid; place-items: center;
                 width: 44px; }

@media (max-width: 720px) {
  .media-gallery--live .media-tiles { display: none; }

  .media-gallery--live .media-dots {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 0;
    list-style: none; margin: .75rem 0 0; padding: 0;
  }

  .media-gallery--live .media-grid {
    display: grid; grid-template-columns: minmax(0, 1fr);
  }
  .media-gallery--live .media-plate,
  .media-gallery--live .dash-about-plate,
  .media-gallery--live .media-nav { grid-row: 1; grid-column: 1; }

  .media-gallery--live .media-nav {
    display: grid; place-items: center; align-self: center;
    width: 44px; height: 44px; padding: 0; margin: 0 .5rem;

    border: 1px solid var(--on-surface);
    border-radius: var(--media-arrow-radius, 50%);
    cursor: pointer; z-index: 1;

    background: var(--surface); color: var(--on-surface);
  }
  .media-gallery--live .media-nav--prev { justify-self: start; }
  .media-gallery--live .media-nav--next { justify-self: end; }

  .media-gallery--live .dash-about-strip { display: none; }

  .dash-about-media.media-gallery--live {
    display: grid; grid-template-columns: minmax(0, 1fr);
  }
}

.media-grid--gutters { --media-gutter: 6rem; }

@media (min-width: 721px) {
  .media-gallery--live .media-grid--gutters .media-nav {
    place-items: center; align-self: center; justify-self: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--on-surface); cursor: pointer;
  }

  .media-gallery--live .media-grid--gutters .media-nav svg { width: 40px; height: 40px; }

  .media-gallery--live .media-grid--gutters .media-tiles { flex-wrap: nowrap; }

  .media-gallery--live .media-grid--gutters .media-tiles > li {
    flex: 0 0 calc((100% - (var(--media-tile-cap) - 1) * var(--media-tile-gap, 0px))
                   / var(--media-tile-cap));
  }
}

@media (min-width: 721px) {
  [data-media-layout="static"] .media-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  [data-media-layout="static"] .media-plate { align-self: start; }

  [data-media-layout="static"] .media-tiles > li:first-child { display: none; }
  [data-media-layout="static"] .media-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }

  [data-media-layout="static"] .media-tiles > li { align-self: stretch; display: grid; }

  [data-media-layout="static"] .media-tile { width: auto; }
  [data-media-layout="static"] .media-tile { aspect-ratio: auto; }
  [data-media-layout="static"] .media-tile img { position: absolute; inset: 0; }

  [data-media-layout="static"] .media-tiles[data-static-shots="1"] > li:nth-child(2),
  [data-media-layout="static"] .media-tiles[data-static-shots="3"] > li:nth-child(2) {
    grid-column: 1 / -1;
  }
}

[data-media-layout="static"] .media-tile { cursor: auto; }

@media print {
  .media-gallery--live .media-grid.media-grid--gutters .media-nav { display: none; }
  .media-grid--gutters { --media-gutter: 0rem; }
}

.dash-about-plate-video { display: block; width: 100%; height: 100%; border: 0; }
.dash-about-plate-video[hidden], .dash-about-plate img[hidden] { display: none; }

.faq-item summary::-webkit-details-marker { display: none; }

.dash-bay-st--done { color: var(--accent-text); }

.dash-band { position: relative; overflow: hidden; isolation: isolate; }
.dash-band-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: var(--band-filter, none); z-index: 0;
}
.dash-band-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) var(--band-scrim-top, 40%), transparent),
    color-mix(in srgb, var(--surface) var(--band-scrim-bottom, 80%), transparent));
}
.dash-band-inner { position: relative; z-index: 2; }
.dash-band-plate {
  background: color-mix(in srgb, var(--surface) var(--band-plate, 100%), transparent);
  backdrop-filter: blur(6px);
}

@media (prefers-reduced-transparency: reduce) {
  .dash-band-plate { background: var(--surface); backdrop-filter: none; }
}

.dash-hero-row > :last-child { align-items: flex-start; text-align: left; }

html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: 77px; }

body {
  margin: 0; background: var(--surface); color: var(--on-surface);

  font-family: var(--font-body); font-size: 1.125rem; line-height: 1.55;
  display: flex; flex-direction: column; gap: 1rem;
}

main { display: flex; flex-direction: column; gap: 1rem; }

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; color: var(--on-surface-variant); }

:root {

  --z-skip: 200; --z-burger: 100; --z-overlay: 99; --z-nav: 50; --z-dash-header: 50; --chrome-h: 60px;

  --hero-bevel: 2px;

  --col-max: 1200px;
  --gutter: 1.5rem;
  --col: min(var(--col-max), 100% - var(--gutter) * 2);
}

.section { width: var(--col); margin-inline: auto; padding-block: calc((var(--rhythm) - 1rem) / 2); }

main:not(.dash-main) > section[data-idx="01"] { padding-top: calc(var(--rhythm) - 2rem - 8px); }
main:not(.dash-main) > section[data-idx]:last-child { padding-bottom: calc(var(--rhythm) - 1rem); }
h1, h2, h3, .btn { font-family: var(--font-display); }

.readout, .kicker, .idx { font-family: var(--font-technical, var(--font-body)); }
.kicker, .readout { font-size: 1rem; letter-spacing: .1em; }
.readout b { color: var(--accent-text); font-weight: 400; }

.quest .readout, .challenge .foot .readout, .tier .foot .readout { font-size: 1.25rem; color: var(--accent-text); }

.idx { display: block; color: var(--accent-text); font-size: 1rem;
  letter-spacing: .16em; margin-bottom: .35rem; }

.idx[data-idx]::before, .dash-about .sec-idx::before { content: "[" attr(data-idx) "]"; }
.dash-about .sec-idx { display: block; color: var(--accent-text);
  font-family: var(--font-technical, var(--font-body)); font-size: 1rem;
  letter-spacing: .16em; margin-bottom: -.4rem; }

.stamp { position: relative; display: grid; place-items: center; border: 1px solid var(--frt); background: var(--surface-container-high); color: var(--accent-text); margin-bottom: .9rem; width: 48px; height: 48px; }

.panel { position: relative; background: var(--surface-container); padding: 1.4rem 1.6rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .875rem; line-height: 1.25rem; letter-spacing: normal;
  border-radius: 0; padding: 1rem 2.5rem; text-decoration: none; border: 1px solid transparent;
  --ring: var(--frt);
  box-shadow:
    0 -3px 0 0 var(--ring), 0 3px 0 0 var(--ring),
    -3px 0 0 0 var(--ring), 3px 0 0 0 var(--ring);
  transition: transform .07s;
}

.btn:hover { transform: translate(1px, 2px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); --ring: var(--accent); }

.btn-surface { background: var(--surface-container-high); color: var(--on-surface); }
.btn-ghost { background: transparent; color: var(--on-surface); }
.btn-steam { background: #171A21; color: #FFFFFF; --ring: #171A21; }
.btn[disabled] { cursor: default; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.media-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
.btn-sm { height: 40px; padding: 0 1.25em; }
.btn svg { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s steps(4), transform .6s steps(4); }
}

@keyframes t4-meter-fill { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

.nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface-container); margin: 4px; border-bottom: 1px solid transparent; }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem;
  min-height: var(--chrome-h);
  padding-inline: max(var(--gutter), calc((100% - var(--col-max)) / 2)); }

.nav-logo { display: inline-flex; align-items: center; justify-self: start; }

.nav-logo img { display: block; }

.nav-links { display: flex; align-items: center; gap: 1.25rem; }
.nav-links a { color: var(--on-surface); text-decoration: none; font-family: var(--font-display);
  font-weight: 600; font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; }
.nav-links a:hover { color: var(--accent-text); }

.nav-actions { justify-self: end; }

.lang-switch { display: inline-flex; height: 40px; align-items: stretch; overflow: hidden; border: 0; margin: 4px; border-radius: 0; }
.lang-opt { display: flex; align-items: center; padding: 0 .875rem; font-family: var(--font-display); font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; line-height: 1; color: var(--on-surface-variant); background: var(--surface-container); text-decoration: none; cursor: default; }
.lang-opt--active { background: var(--accent); color: var(--accent-ink); }
.nav-burger { display: none; position: relative; z-index: var(--z-burger); background: none; border: none; color: var(--on-surface); }

.nav-burger svg { display: block; }
.nav-mobile { display: none; }

@media (max-width: 763px) {
  .nav-links, .nav-actions { display: none; }
  .nav-inner { display: flex; justify-content: space-between; }
  .nav-burger { display: block; }
  .nav-mobile { position: fixed; inset: 0; z-index: var(--z-overlay); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(8px); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; }
  .nav-mobile.is-open { display: flex; }
  .nav-mobile[hidden] { display: none; }

  .nav-mobile > a:not(.btn) { color: var(--on-surface); text-decoration: none; font-family: var(--font-display);
    font-weight: 600; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .06em; }
  .nav-mobile > a:not(.btn):hover { color: var(--accent-text); }
}

.footer { border-top: 1px solid var(--frt); }
.footer-inner { gap: 1.5rem; }
.footer-logos, .footer-socials, .footer-legal-links { gap: 1rem; }

.footer-logos img { opacity: .9; }
.social-link { color: var(--accent-text); display: flex; }
.footer-legal-links { gap: 2rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .875rem; }

.powered { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .875rem;
  font-weight: 600; }

.powered a { color: var(--accent-text); text-decoration: none; }

.powered a::before { content: "[" / ""; margin-right: .7em; }
.powered a::after { content: "]" / ""; margin-left: .7em; }
.footer-legal-links a { color: var(--on-surface-variant); text-decoration: none; }

.footer-fineprint { font-size: .875rem; margin: 0; }
.pill { border: 1px solid var(--frt); padding: .35em 1em; color: var(--on-surface-variant); text-decoration: none; }

.hero {
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; min-height: 26rem;
  padding: 2rem; margin: 4px; background-color: var(--surface);
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; z-index: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to top, var(--surface) 8%,
      color-mix(in srgb, var(--surface) 50%, transparent) 45%, transparent 80%);

  box-shadow: inset 0 0 0 var(--hero-bevel) var(--bev); }

.hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; text-align: left;
  width: 100%; max-width: var(--col-max); margin-inline: auto; }

.hero-logo { max-height: 96px; width: auto; height: auto; }
.hero-h { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0; }

.hero-h .accent { color: var(--accent);  }
.hero-sub { max-width: 56ch; margin: 0; }
.hero-actions { gap: .8rem; }

.hero--center .hero-content { align-items: center; text-align: center; }
.hero--right .hero-content { align-items: flex-end; text-align: right; }

.seam { height: 8px; margin-inline: 4px; opacity: .5; background:
  conic-gradient(var(--accent) 25%, transparent 0 50%,
                 var(--accent) 0 75%, transparent 0) 0 0 / 8px 8px; }

.eyebrow { color: var(--accent-text); font-family: var(--font-technical, var(--font-body)); text-transform: uppercase; letter-spacing: .18em; font-size: 1rem; margin: .75rem 0 0; }
.sec-head { max-width: 70ch; margin-inline: auto; margin-bottom: 2.5rem; text-align: center; }

.sec-head h2 { font-size: 2rem; margin: 0; }

.step { position: relative; overflow: hidden; padding: 1.125rem;
  background: var(--surface-container); margin: 4px; }

.step > *:not(.stepnum) { position: relative; }

.step .name { font-size: 1.4rem; margin: .3rem 0 0; }

.stepnum { position: absolute; right: 14px; bottom: 8px; pointer-events: none;
  font: 700 5.25rem/1 var(--font-display);
  color: color-mix(in srgb, var(--on-surface) 16%, transparent); }
.step .name, .step .body { max-width: 72%; }

.tier { display: flex; flex-direction: column; gap: .5625rem;
  background: var(--surface-container); padding: 1rem; margin: 4px; min-width: 0; }
.tier .name { font-size: 1.25rem; margin: .2rem 0 0; }
.tier .body { margin: 0; }
.tier .note { margin: 0; font-size: .875rem; }

.progress { margin-top: auto; display: grid; gap: .5625rem; }
.meter { height: 12px; background: var(--slot); position: relative; margin: 3px; }

.meter > i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%);
  animation: t4-meter-fill .9s steps(6) both;
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px,
    color-mix(in srgb, var(--accent) 55%, var(--surface-container)) 10px 12px); }

.xp { max-width: 26rem; margin: 1.25rem auto 0; text-align: left; }
.xp-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }

.tier.featured .slot { background: color-mix(in srgb, var(--accent) 22%, var(--slot)); }

.challenge { display: flex; flex-direction: column; gap: .5625rem;
  background: var(--surface-container); padding: 1rem; margin: 4px; min-width: 0; }
.challenge .name { font-size: 1.25rem; margin: .2rem 0 0; }
.challenge .body { margin: 0; }
.challenge .foot { margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: .625rem; flex-wrap: wrap; }
.rowtop { display: flex; align-items: flex-start; gap: .75rem; }

.slot { display: flex; flex: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: var(--slot); color: var(--accent-text); }

.store-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

ul.store-row { list-style: none; margin: 0; padding: 0; }

ul.store-row > li { display: flex; }

.steam-embed { display: block; margin-inline: auto; border: 0; max-width: 100%; }

.media-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; align-items: stretch; }

.media-grid, .dash-about-media { --media-arrow-radius: 0; --media-dot-radius: 0; }

.media-plate { position: relative; min-width: 0; aspect-ratio: 16/9;
  background-color: var(--surface-container); margin: 4px; }
.media-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.media-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; min-width: 0; }

ul.media-tiles { list-style: none; margin: 0; padding: 0; }

.media-tiles > li { min-width: 0; align-self: start; }

.media-tile { position: relative; aspect-ratio: 16/9;
  background-color: var(--surface-container);
  margin: 4px;
  display: block; width: 100%; padding: 0; border: none; cursor: pointer; }

.media-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 720px) {

  .media-tiles > li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}

.media-play[hidden] { display: none; }

.media-play svg { background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent),
    -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent); }
.faq-list { display: grid; gap: 1rem; max-width: 820px; margin-inline: auto; }

ul.faq-list { list-style: none; margin-block: 0; padding: 0; }

.faq-item summary { list-style: none; display: flex; align-items: baseline; gap: .8rem; cursor: pointer; }
.faq-item summary .faq-q { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; flex: 1; }
.faq-tick::before { content: "+"; font-family: var(--font-technical, ui-monospace, "Cascadia Mono", Consolas, monospace); color: var(--accent-text); }
.faq-item[open] .faq-tick::before { content: "x"; }
.faq-item > p { margin: .8rem 0 0; }

.dash-header { position: sticky; top: 0; z-index: var(--z-dash-header); border-bottom: 1px solid var(--frt); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); }
.dash-header-inner { width: var(--col); margin-inline: auto; min-height: var(--chrome-h); display: flex; align-items: center; justify-content: space-between; }

.dash-title { flex: none; }
.dash-header-actions { display: flex; align-items: center; gap: .75rem; }

.dash-plate { position: relative; display: flex; align-items: center; gap: .5rem; padding: .25rem .75rem .25rem .25rem; border: 0; margin: 4px; background: var(--surface-container); color: var(--on-surface); cursor: pointer; }
.profile-list { margin-top: 4px; right: 4px; background: var(--surface-container); }

.dash-main { width: var(--col); margin-inline: auto; padding-block: calc(var(--rhythm) - 1rem); display: grid; gap: var(--rhythm); }

.dash-hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 366px) {
  .dash-hero-row > .dash-tier-plate { order: -1; }
}
.dash-points { margin: .2rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: 3.2rem; line-height: 1; color: var(--on-surface); font-variant-numeric: tabular-nums; }

.dash-tier-plate { border: 1px solid var(--frt); padding: .55rem .9rem; display: flex; flex-direction: column; gap: .15rem; }

.dash-points-plate { padding: .55rem .9rem; }
.dash-tier-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }

.dash-band .dash-hero { background: none; }

.dash-band { margin: 4px; }
.dash-band .dash-band-scrim { box-shadow: inset 0 0 0 var(--hero-bevel) var(--bev); }

.dash-band .readout.dash-ro,
.dash-band .dash-tier-name,
.dash-band .foot { color: var(--on-surface); }

.dash-gauge.progress { margin: 2.1rem 0 0; padding-bottom: 1.6rem; }

.dash-gauge .foot { justify-self: start; padding: .25rem .75rem; }

.dash-section.section, .dash-main > .section { padding-block: 0; width: 100%; }

.quest { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr; column-gap: .875rem; row-gap: .625rem;
  padding: 1.125rem; background: var(--surface-container); margin: 4px; }
.quest .readout { grid-row: 1; }

.dash-counter-meter { display: block; height: 8px; margin: .375rem 0 0;
  background: var(--slot); }
.dash-counter-meter > i { display: block; height: 100%; width: var(--fill, 0%);
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px,
    color-mix(in srgb, var(--accent) 55%, var(--surface-container)) 10px 12px); }
.quest .name { grid-row: 2; font-size: 1.25rem; margin: 0; }

.quest .dash-card-desc { grid-row: 3; margin: 0; }
.quest .foot { grid-row: 4; align-self: end; display: flex;
  justify-content: flex-start; padding-top: .5rem; }

.quest .foot > .dash-btn-pair, .quest .foot > .btn { flex: 1 1 100%; }

.quest.dash-card--earned {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-container));
}
.quest.dash-card--closed { background: var(--surface); }

.dash-btn-pair { display: flex; gap: .625rem; flex-wrap: wrap; }
.dash-btn-pair > .btn, .dash-btn-pair > .dash-btn { flex: 1 1 0; min-width: 0; }

@media (max-width: 480px) {
  .dash-btn-pair > .btn, .dash-btn-pair > .dash-btn { flex-basis: 100%; }
}

.dash-chip { font-size: .875rem; color: var(--accent-text); }
.dash-chip--gone { color: var(--on-surface-variant); }
.dash-chip--done { color: var(--accent-text); }

.dash-chip--done::before { content: "\2713 "; }
.dash-btn { width: 100%; }

.dash-btn.dash-btn--dl { width: auto; margin-top: .7rem; }

.dash-bay { position: relative; padding: 1.3rem 1.2rem 1.1rem; margin: 4px;
  background: color-mix(in srgb, var(--tier) 6%, var(--surface-container)); }
.dash-bay--gold { --tier: var(--tier-gold, #FFD700); }
.dash-bay--silver { --tier: var(--tier-silver, #B2B2B2); }
.dash-bay--bronze { --tier: var(--tier-bronze, #AD8A56); }
.dash-bay--steel { --tier: var(--tier-steel, #8A93A1); }

.dash-bay--open { background: color-mix(in srgb, var(--tier) 14%, var(--surface-container)); }

.dash-bay-lbl { display: block; margin-bottom: .55rem; font-family: var(--font-technical, ui-monospace, "Cascadia Mono", Consolas, monospace); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tier); }
.dash-stamp { color: var(--tier); }
.dash-bay-name { font-size: 1.25rem; letter-spacing: .05em; color: var(--tier); margin: 0 0 .3rem; }

.dash-bay-tier { margin: 0; color: var(--on-surface); }
.dash-bay-note { font-size: .875rem; margin: .3rem 0 0; }

.dash-bay-st { margin: .7rem 0 0; letter-spacing: .1em; }

.dash-bay-st--done::before { content: "[x] "; }
.dash-dl-note { margin: .5rem 0 0; }

.hero, .dash-band, .fr, .media-plate {
  box-shadow:
    0 -4px 0 0 var(--fr), 0 4px 0 0 var(--fr),
    -4px 0 0 0 var(--fr), 4px 0 0 0 var(--fr),
    inset 0 0 0 var(--hero-bevel) var(--bev);
}

.quest.dash-card--closed, .lang-switch, .dash-plate, .profile-list, .fr-thin, .media-tile {
  box-shadow:
    0 -3px 0 0 var(--frt), 0 3px 0 0 var(--frt),
    -3px 0 0 0 var(--frt), 3px 0 0 0 var(--frt);
}

.quest.dash-card--earned, .media-tile.is-selected, .fr-accent {
  box-shadow:
    0 -4px 0 0 var(--accent), 0 4px 0 0 var(--accent),
    -4px 0 0 0 var(--accent), 4px 0 0 0 var(--accent),
    inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.steps, .tiers, .challenges, .quests, .dash-rewards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem;
}

.challenges, .quests {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

ol.steps, ul.tiers, ul.challenges, ul.quests, ul.dash-rewards { list-style: none; margin: 0; padding: 0; }

@media print {
  .nav, .nav-mobile, .nav-mobile.is-open, .nav-burger, .skip-link, .lang-switch, .profile-menu { display: none; }
  .hero-bg, .hero-scrim { display: none; }
  .dash-header { position: static; }
  * { box-shadow: none; }

  body { background: #fff; color: #000; }

  .reveal { opacity: 1; transform: none; }

  body {
    --on-surface: #000;
    --on-surface-variant: #333;
    --accent-text: #000;
    --accent-ink: #000;

    --surface: #fff;
    --surface-container: #fff;
    --surface-container-high: #fff;
    --band: #fff;
    --band-2: #fff;
    --card-from: #fff;
    --card-to: #fff;
    --line: #767676;
    --tier-gold: #000;
    --tier-silver: #000;
    --tier-bronze: #000;
    --tier-steel: #000;
  }

  .btn-steam { color: #000; background: none; }

  .btn-primary { background: none; }
}

.nav-burger:not([aria-expanded="true"])::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

.profile-avatar { width: 28px; height: 28px; object-fit: cover; }
.profile-name { font-family: var(--font-display); font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; line-height: 1; }
.profile-item { display: flex; align-items: center; padding: .625rem .875rem; background: var(--surface-container); color: var(--on-surface-variant); font-family: var(--font-display); font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.profile-item:hover { color: var(--accent-text); }

.dash-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem;
  position: relative; background: var(--surface-container); padding: 1.4rem 1.6rem;

  margin: 4px;
  box-shadow:
    0 -4px 0 0 var(--fr), 0 4px 0 0 var(--fr),
    -4px 0 0 0 var(--fr), 4px 0 0 0 var(--fr),
    inset 0 0 0 var(--hero-bevel) var(--bev); }
.dash-about-col { min-width: 0; }
.dash-about-text { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.dash-about-h, .dash-about-blurb { margin: 0; }
.dash-about-h { font-size: 2rem; }
.dash-about-media { display: block; }

.dash-about-stores, .dash-about-strip { list-style: none; margin: 0; padding: 0; }

.dash-about-stores { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }

.dash-about-stores:has(li:nth-child(2)) {
  width: 100%; align-self: stretch;
  display: grid; grid-template-columns: repeat(2, 1fr);
}
.dash-about-stores:has(li:nth-child(2)) .btn { width: 100%; justify-content: center; }
.dash-about-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
   gap: .875rem; }
.dash-about-strip > li { min-width: 0; }
.dash-about-stores .btn { background: var(--surface-container-high); color: var(--on-surface);
  padding: .7rem 1.4rem; }

.dash-shot, .dash-shot--trailer { position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden; margin: 4px;
  background-color: var(--surface-container);
  box-shadow:
    0 -3px 0 0 var(--frt), 0 3px 0 0 var(--frt),
    -3px 0 0 0 var(--frt), 3px 0 0 0 var(--frt); }

.dash-shot--trailer {
  box-shadow:
    0 -4px 0 0 var(--fr), 0 4px 0 0 var(--fr),
    -4px 0 0 0 var(--fr), 4px 0 0 0 var(--fr); }
.dash-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dash-shot[data-action="gallery"] { appearance: none; -webkit-appearance: none; padding: 0; width: 100%; cursor: pointer; }
.dash-about-plate { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; margin: 4px 4px calc(.75rem + 4px); background-color: var(--surface-container);
  box-shadow:
    0 -4px 0 0 var(--fr), 0 4px 0 0 var(--fr),
    -4px 0 0 0 var(--fr), 4px 0 0 0 var(--fr); }
.dash-shot[data-action="gallery"].is-selected {
  box-shadow:
    0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent),
    -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent); }
.dash-about-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dash-shot-play svg { display: block; padding: 8px;
  background: var(--accent); color: var(--accent-ink); }

.dash-about-plate .dash-shot-play svg { padding: 16px;
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent),
    -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent); }