:root {
  color-scheme: dark;
  --night: #11191c;
  --night-2: #192328;
  --night-3: #202d31;
  --paper: #eee9de;
  --paper-2: #f7f3eb;
  --ink: #f3eee3;
  --muted: #aeb7b4;
  --line: #394449;
  --gold: #cfab70;
  --gold-bright: #e7c895;
  --teal: #9cbab4;
  --focus: #e7c895;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--night); color: var(--ink); }
button, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--gold-bright); text-underline-offset: .2em; }
a:hover { color: #fff0d4; }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible, [role="option"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

.shell { width: min(100% - 72px, 1386px); margin-inline: auto; }
.site-header { border-bottom: 1px solid #ffffff1d; background: #0d1518; }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; font: 600 1rem/1.2 Georgia, 'Times New Roman', serif; letter-spacing: .015em; }
.brand img { width: 40px; height: 40px; }
.brand strong { color: var(--gold-bright); font-weight: 400; }
.header-note, .eyebrow, .section-kicker, .result-context, .faction { color: var(--gold); font: 700 .7rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.header-note { color: #a6afa9; letter-spacing: .14em; }

main.shell { padding-bottom: 112px; }
.breadcrumbs { margin-top: 22px; font-size: .85rem; line-height: 1.6; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.breadcrumbs [aria-current="page"] { color: var(--muted); overflow-wrap: anywhere; }
.breadcrumb-separator { color: var(--gold); }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: end; gap: clamp(40px, 7vw, 116px); padding: 76px 0 48px; }
.eyebrow { margin: 0 0 21px; }
.intro h1 { max-width: 860px; margin: 0; font: 400 clamp(3.2rem, 6vw, 6.1rem)/.99 Georgia, 'Times New Roman', serif; letter-spacing: -.055em; text-wrap: balance; }
.tagline { display: block; margin-top: 24px; color: #bec8c2; font: 400 clamp(1.1rem, 1.8vw, 1.35rem)/1.45 Georgia, 'Times New Roman', serif; }
.intro-side { align-self: end; }
.milestone { padding: 23px 25px 20px; border: 1px solid #796e5b; background: #1b2529; box-shadow: inset 0 3px var(--gold); }
.milestone-status { margin: 0; color: var(--paper-2); font: 400 1.12rem/1.35 Georgia, 'Times New Roman', serif; }
.milestone-target { margin: 7px 0 17px; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.milestone-clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-variant-numeric: tabular-nums; }
.milestone-unit { min-width: 0; padding: 0 7px; border-left: 1px solid #4a514d; text-align: center; }
.milestone-unit:first-child { border-left: 0; }
.milestone-value { display: block; color: var(--gold-bright); font: 400 1.5rem/1 Georgia, 'Times New Roman', serif; }
.milestone-label { display: block; margin-top: 7px; color: var(--muted); font: 700 .58rem/1 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.milestone-note { margin: 16px 0 0; color: #9da8a5; font-size: .68rem; line-height: 1.45; }

.forge { display: grid; grid-template-columns: minmax(300px, 370px) minmax(0, 1fr); border: 1px solid #6e6c60; box-shadow: 0 24px 70px #0004; }
.controls { min-width: 0; padding: 34px 34px 30px; background: var(--night-2); border-right: 1px solid #6e6c60; }
.section-kicker { margin: 0 0 30px; }
.field { margin-bottom: 23px; }
.field label { display: block; margin-bottom: 9px; color: #e4e3dc; font: 700 .76rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .04em; }
.field select, .picker-trigger { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #68757a; border-radius: 2px; background: #101b20; color: var(--ink); font: .92rem Arial, Helvetica, sans-serif; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23cfab70' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 36px; }
.field select:hover, .picker-trigger:hover, .body-option:hover { border-color: var(--gold-bright); }
.picker { position: relative; }
.picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.picker-trigger:disabled, .body-option:disabled { opacity: .68; cursor: wait; }
.picker-value, .picker-option { display: flex; align-items: center; gap: 11px; min-width: 0; }
.picker-value img, .picker-option img, .card-identity img, .body-option img { width: 34px; height: 34px; flex: none; border: 1px solid #737e79; object-fit: cover; }
.picker-chevron { color: var(--gold); }
.picker-options { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow: auto; padding: 5px; border: 1px solid #7b8584; background: #121e22; box-shadow: 0 20px 35px #0009; }
.picker-option { min-height: 46px; padding: 5px 9px; font-size: .9rem; cursor: pointer; }
.picker-option:hover, .picker-option:focus, .picker-option[aria-selected="true"] { background: #2e393a; }
.picker-icon-empty { display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--gold); }
.field-help, .controls-foot { color: #abb6b3; font-size: .73rem; line-height: 1.5; }
.field-help { margin: 8px 0 0; }
.body-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.body-option { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 50px; padding: 7px; border: 1px solid #68757a; border-radius: 2px; background: #101b20; color: var(--ink); font-size: .78rem; font-weight: 700; text-align: left; }
.body-option[aria-pressed="true"] { border-color: var(--gold); background: #35403e; }
.generate { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 28px; padding: 10px 16px; border: 1px solid #d9b87f; border-radius: 2px; background: var(--gold); color: #192125; font-size: .82rem; font-weight: 700; letter-spacing: .035em; transition: background .16s, transform .16s; }
.generate:hover { background: var(--gold-bright); transform: translateY(-1px); }
.generate:disabled { opacity: .65; cursor: wait; }
.controls-foot { margin: 17px 0 0; }
.controls-foot + .controls-foot { margin-top: 8px; }

.results { min-width: 0; padding: 37px 42px 33px; background: var(--paper); color: #263035; container-type: inline-size; }
.results-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding-bottom: 22px; border-bottom: 2px solid #9b927f; }
.results h2 { margin: 0; font: 400 clamp(1.8rem, 2.5vw, 2.35rem)/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -.035em; }
.result-context { color: #655c4b; text-align: right; letter-spacing: .12em; }
.name-list { margin: 0; padding: 0; list-style: none; }
.name-row { padding: 20px 0; border-bottom: 1px solid #c9c4b8; }
.name-row-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
.name-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 17px; }
.name-part { display: block; min-width: 0; }
.part-caption { display: block; margin-bottom: 7px; color: #746f65; font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.part-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.name-part strong { flex: 1; min-width: 0; color: #263035; font: 400 clamp(1.15rem, 1.9vw, 1.4rem)/1.2 Georgia, 'Times New Roman', serif; overflow-wrap: anywhere; }
.part-controls { display: inline-flex; flex: none; gap: 4px; }
.name-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.part-action, .name-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 0 9px; border: 1px solid #a59e90; border-radius: 2px; background: transparent; color: #484d4d; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.part-action:hover, .name-action:hover { border-color: #273c3d; background: #e1dbcd; color: #202a2e; }
.part-action:disabled { opacity: .45; cursor: not-allowed; }
.part-reroll { color: #69512e; }
.part-action svg, .name-action svg { display: block; width: 15px; height: 15px; flex: none; }
.favorite-action.is-saved { border-color: #806334; color: #73531e; }
.favorite-action.is-saved svg { fill: currentColor; }
.more-row { margin-top: 24px; }
.more-row .generate { margin: 0; background: #27383c; border-color: #27383c; color: #f7f1e6; }
.more-row .generate:hover { background: #3c5052; }
.saved-panel { margin-top: 30px; padding-top: 20px; border-top: 1px solid #b6b0a4; }
.saved-panel summary { color: #57472f; cursor: pointer; font: 400 1.15rem/1.3 Georgia, 'Times New Roman', serif; }
.saved-list { margin: 15px 0; padding: 0; list-style: none; }
.saved-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #c9c4b8; font-size: .86rem; line-height: 1.4; }
.saved-list small { display: block; color: #726e65; }
.saved-actions { display: flex; gap: 8px; }
.results-tip { margin: 23px 0 0; color: #696b66; font-size: .76rem; line-height: 1.5; }
.load-error { padding: 22px 0; color: #565e5b; font-size: .9rem; line-height: 1.5; }

.link-section, .examples { padding-top: 81px; }
.link-section h2, .examples h2 { margin: 0 0 22px; font: 400 clamp(1.85rem, 3vw, 2.75rem)/1.14 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
.link-section h3 { margin: 30px 0 13px; color: var(--gold-bright); font: 400 1.4rem Georgia, 'Times New Roman', serif; }
.link-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.link-list a { display: block; padding: 11px 14px; border: 1px solid #596260; color: var(--ink); font-size: .79rem; text-decoration: none; }
.link-list a:hover { border-color: var(--gold); background: #263136; }
.landing-copy { max-width: 750px; margin: 0 0 20px; color: #b9c2bd; font-size: .94rem; line-height: 1.7; }
.landing-names { columns: 3; column-gap: 38px; max-width: 900px; margin: 18px 0 24px; padding: 0; list-style: none; }
.landing-names li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid #ffffff17; color: #e5e7df; font: .96rem/1.4 Georgia, 'Times New Roman', serif; }
.landing-names li::before { content: '·'; margin-right: 10px; color: var(--gold); }
.examples-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.examples-header .eyebrow { margin-bottom: 12px; }
.examples h2 { margin: 0; }
.examples-header > p { max-width: 250px; margin: 0 0 4px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.race-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid #56605c; background: #1a2528; transition: border-color .16s, background .16s; }
.race-card:hover { border-color: var(--gold); background: #202d30; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; margin-bottom: 19px; padding-bottom: 17px; border-bottom: 1px solid #ffffff29; }
.card-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.race-card h3 { margin: 0; font: 400 1.22rem/1.25 Georgia, 'Times New Roman', serif; }
.faction { font-size: .6rem; }
.race-card ul { margin: 0 0 12px; padding: 0; list-style: none; }
.race-card li { padding: 4px 0; color: #c1cac4; font: .82rem/1.45 Arial, Helvetica, sans-serif; }
.race-card li::before { content: '·'; margin-right: 10px; color: var(--gold); }
.race-card a, .sample-action { display: inline-block; align-self: flex-start; margin-top: auto; padding: 12px 0 0; border: 0; background: none; color: var(--gold-bright); font-size: .73rem; font-weight: 700; line-height: 1.4; letter-spacing: .045em; text-decoration: none; text-transform: uppercase; }
.race-card a:hover, .sample-action:hover { color: #fff0d4; text-decoration: underline; }
.ad-slot { margin: 32px auto; text-align: center; }
.affiliate-disclosure { margin: 18px 0 -8px; padding: 12px 16px; border-left: 3px solid #9a794b; background: rgba(255,255,255,.035); color: var(--muted, #a9adb4); font-size: .78rem; line-height: 1.55; }
.affiliate-placement { margin: 28px 0 36px; padding: 18px; border: 1px solid var(--line, #343b44); border-radius: 12px; }
.affiliate-label { margin: 0; font-size: .75rem; color: var(--muted, #a9adb4); }
.affiliate-label { letter-spacing: .04em; }
.affiliate-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); align-items: center; gap: 16px; margin: 12px 0; }
.affiliate-card { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 8px; background: rgba(255,255,255,.025); text-decoration: none; min-width: 0; }
.affiliate-card:hover { background: rgba(255,255,255,.06); }
.affiliate-card:focus-visible { outline: 2px solid #d8b467; outline-offset: 3px; }
.affiliate-card img { flex: 0 0 104px; width: 104px; height: 112px; object-fit: contain; background: #fff; border-radius: 5px; padding: 6px; }
.affiliate-banner { display: block; width: 320px; max-width: 100%; margin-inline: auto; border-radius: 5px; overflow: hidden; }
.affiliate-banner img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: contain; }
.affiliate-banner:focus-visible { outline: 2px solid #d8b467; outline-offset: 3px; }
.affiliate-copy { display: grid; gap: 5px; min-width: 0; }
.affiliate-copy strong { font-size: .95rem; line-height: 1.4; }
.affiliate-copy > span { font-size: .78rem; color: var(--muted, #a9adb4); }
.affiliate-copy .affiliate-action { color: #d8b467; margin-top: 4px; }
@media (max-width: 1050px) { .affiliate-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (max-width: 640px) { .affiliate-placement { padding: 14px; } .affiliate-banner { width: min(320px, 100%); } .affiliate-card img { flex-basis: 80px; width: 80px; height: 90px; } }
.ad-slot--banner { width: min(100%, 900px); min-height: 132px; }
.ad-slot--square { width: min(100%, 336px); min-height: 250px; }

.site-footer { padding: 33px 0 45px; border-top: 1px solid #ffffff26; background: #0d1518; color: #9da9a5; font-size: .75rem; line-height: 1.6; }
.footer-inner { display: flex; justify-content: space-between; gap: 28px; }
.site-footer p { max-width: 610px; margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 17px; max-width: 450px; }
.footer-nav a { color: #c4d1cb; }
.footer-projects { padding: 8px 12px; border: 1px solid var(--line); }

@container (max-width: 680px) {
  .name-row-content { grid-template-columns: 1fr; gap: 12px; }
  .name-actions { justify-content: flex-start; }
}
@container (max-width: 450px) {
  .name-parts { grid-template-columns: 1fr; gap: 13px; }
  .part-line { justify-content: space-between; }
}
@media (max-width: 980px) {
  .intro { grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; }
  .forge { grid-template-columns: minmax(270px, 315px) minmax(0, 1fr); }
  .controls { padding: 29px 24px; }
  .results { padding: 31px 27px; }
  .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 42px, 620px); }
  .header-inner { min-height: 72px; }
  .intro { grid-template-columns: 1fr; padding: 57px 0 34px; }
  .intro-side { width: min(100%, 410px); }
  .forge { grid-template-columns: 1fr; }
  .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; padding: 30px; border-right: 0; border-bottom: 1px solid #6e6c60; }
  .controls .section-kicker, .controls .generate, .controls .controls-foot { grid-column: 1 / -1; }
  .controls .section-kicker { margin-bottom: 25px; }
  .field { margin-bottom: 19px; }
  .results { padding: 31px; }
  .footer-inner { display: block; }
  .footer-nav { justify-content: flex-start; max-width: none; margin-top: 22px; }
}
@media (max-width: 540px) {
  .shell { width: min(100% - 32px, 440px); }
  .header-note { display: none; }
  .brand { font-size: .95rem; }
  .intro { padding: 43px 0 30px; gap: 31px; }
  .intro h1 { font-size: clamp(2.8rem, 12vw, 4.25rem); }
  .tagline { margin-top: 17px; }
  .milestone { padding: 20px; }
  .controls { display: block; padding: 25px 22px; }
  .results { padding: 28px 22px; }
  .results-head { display: block; }
  .result-context { display: block; margin-top: 9px; text-align: left; }
  .name-row { padding: 17px 0; }
  .name-actions { flex-wrap: wrap; }
  .part-action, .name-action { min-height: 44px; padding-inline: 11px; }
  .link-section, .examples { padding-top: 63px; }
  .examples-header { display: block; }
  .examples-header > p { max-width: none; margin-top: 10px; }
  .example-grid { grid-template-columns: 1fr; }
  .landing-names { columns: 2; }
  main.shell { padding-bottom: 75px; }
}
@media (max-width: 380px) {
  .landing-names { columns: 1; }
  .saved-list li { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .generate, .race-card { transition: none; }
}

/* Classic Azeroth: aged bronze, deep blue stone, and quest parchment. */
:root {
  --night: #080e14;
  --night-2: #17212b;
  --night-3: #27313a;
  --paper: #d9c7a4;
  --paper-2: #f1dfbb;
  --ink: #f2e6c8;
  --muted: #b4ac98;
  --line: #6e5632;
  --gold: #d8ad54;
  --gold-bright: #f3d78d;
  --teal: #b4c7cc;
  --focus: #ffe4a1;
}
body {
  background-color: var(--night);
  background-image:
    radial-gradient(ellipse 85% 530px at 50% 80px, #273e4e 0, #101b25 58%, transparent 100%),
    repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 4px);
}
.site-header {
  background: linear-gradient(#1e2a35, #0c141c);
  border-bottom: 3px double #997340;
  box-shadow: 0 4px 14px #0009;
}
.brand { color: #f4e4ba; font-size: 1.08rem; text-shadow: 0 2px 3px #000; }
.brand img { width: 43px; height: 43px; filter: drop-shadow(0 1px 4px #d3a65355); }
.brand strong { color: #f2c76f; }
.header-note { color: #d0b77b; }
.intro {
  position: relative;
  margin-top: 24px;
  padding: 58px 48px 52px;
  border: 1px solid #947448;
  background:
    radial-gradient(ellipse at 28% 10%, #284050b0, transparent 63%),
    linear-gradient(135deg, #172633, #101a25 70%, #1c2730);
  box-shadow: inset 0 0 0 5px #091219, inset 0 0 0 6px #6d593b, 0 18px 35px #0008;
}
.intro::before {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1px solid #caa3585c;
  pointer-events: none;
}
.eyebrow, .section-kicker, .faction { color: #dfb96e; }
.intro h1 { color: #f8e2ab; font-size: clamp(3rem, 5.4vw, 5.3rem); text-shadow: 0 3px 2px #000, 0 0 28px #d39c3d38; }
.title-row { display: flex; align-items: flex-start; gap: 20px; }
.title-row h1 { min-width: 0; }
.title-icons { display: inline-flex; align-items: center; gap: 7px; flex: none; margin-top: 12px; }
.title-icon-link { display: inline-flex; transition: transform .16s, filter .16s; }
.title-icon-link:hover { transform: translateY(-3px); filter: brightness(1.22); }
.title-icon { display: block; width: 52px; height: 52px; border: 2px solid #c49b54; object-fit: cover; box-shadow: 0 0 0 2px #0a1119, 0 0 0 3px #735a36, 0 5px 12px #000a; }
.title-chevron { margin-left: 6px; color: #e1bf73; font: 400 2.4rem/1 Georgia, 'Times New Roman', serif; text-shadow: 0 2px #000; }
.tagline { color: #e2d1aa; }
.milestone {
  position: relative;
  padding: 22px 23px 19px;
  border: 3px double #a78045;
  background: linear-gradient(145deg, #111b25, #26303a);
  box-shadow: inset 0 0 0 3px #111b23, 0 8px 17px #0007;
}
.milestone-status { color: #f3dfa9; }
.milestone-target, .milestone-note { color: #bdbaa9; }
.milestone-value { color: #f3d78d; text-shadow: 0 0 12px #e0a84f55; }
.milestone-unit { border-color: #786544; }
.forge {
  margin-top: 28px;
  border: 3px double #a17c42;
  box-shadow: 0 23px 44px #0009, inset 0 0 0 3px #362d21;
}
.controls {
  background:
    repeating-linear-gradient(135deg, #ffffff03 0 2px, transparent 2px 6px),
    linear-gradient(140deg, #29333a, #151e27 70%);
  border-right-color: #967446;
}
.section-kicker { font-family: Georgia, 'Times New Roman', serif; font-size: .98rem; font-weight: 400; letter-spacing: .12em; }
.field label { color: #e5d9bc; }
.field select, .picker-trigger, .body-option {
  border-color: #947b56;
  border-radius: 0;
  background-color: #0c1721;
  box-shadow: inset 0 2px 6px #0009, 0 1px #d1ae6552;
}
.picker-options { border: 2px solid #b3945d; border-radius: 0; background: #111d28; }
.picker-option:hover, .picker-option:focus, .picker-option[aria-selected="true"] { background: #3c4d57; }
.body-option[aria-pressed="true"] { border-color: #e8bc64; background: #3b382e; box-shadow: inset 0 0 0 1px #cfa65a; }
.generate {
  border: 2px solid #674515;
  border-radius: 0;
  background: linear-gradient(#f2d184, #ba8635);
  color: #2b1b0d;
  box-shadow: inset 0 1px #fff0c1, inset 0 -2px #815819, 0 3px 8px #0008;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.02rem;
  text-shadow: 0 1px #ffe6a4;
}
.generate:hover { background: linear-gradient(#ffe4a1, #c99a4b); }
.results {
  background:
    radial-gradient(circle at 75% 20%, #f4e7c088, transparent 54%),
    repeating-linear-gradient(0deg, #6e4e1907 0 2px, transparent 2px 6px),
    #d9c7a4;
  color: #342817;
  border-left: 1px solid #795d32;
  box-shadow: inset 0 0 0 5px #a8895540;
}
.results-head { border-bottom: 3px double #806439; }
.results h2 { color: #453019; font-size: clamp(1.7rem, 2.2vw, 2.1rem); text-shadow: 0 1px #fff3d2; white-space: nowrap; }
.result-context { color: #685738; }
.name-row { border-bottom-color: #a89470; }
.part-caption { color: #705a38; }
.name-part strong { color: #322818; }
.part-action, .name-action {
  border-color: #8e7247;
  border-radius: 0;
  background: #ead7aa99;
  color: #4b3c24;
  box-shadow: inset 0 1px #fff2d3;
}
.part-action:hover, .name-action:hover { border-color: #5d431e; background: #f5e4bc; }
.part-reroll, .favorite-action.is-saved { color: #765016; }
.more-row .generate { border-color: #514126; background: linear-gradient(#465057, #1f2d36); color: #f4dfaa; text-shadow: 0 1px #000; }
.more-row .generate:hover { background: linear-gradient(#53616a, #283942); }
.saved-panel { border-top-color: #9e855b; }
.saved-panel summary { color: #60431c; }
.saved-list li { border-top-color: #b3a078; }
.results-tip, .saved-list small { color: #665b46; }
.link-section h2, .examples h2 { color: #f0d18d; text-shadow: 0 2px #000; }
.link-section h3 { color: #e2bc6e; }
.link-list a {
  border: 1px solid #85683e;
  background: linear-gradient(#26313a, #162029);
  color: #e8d6aa;
  box-shadow: inset 0 1px #fff1ba1a;
}
.link-list a:hover { border-color: #dbb46b; background: #33414b; }
.landing-copy { color: #d2c7aa; }
.landing-names li { border-bottom-color: #e0be7230; color: #e9dcbd; }
.race-card {
  border: 3px double #83683f;
  background:
    radial-gradient(circle at 80% 0, #3a4c533d, transparent 55%),
    linear-gradient(#263039, #151f28);
  box-shadow: inset 0 0 0 4px #111920, 0 7px 17px #0005;
}
.race-card:hover { border-color: #cfaa67; background: linear-gradient(#30404a, #1b2a33); }
.card-top { border-bottom-color: #bc97535e; }
.race-card h3 { color: #efd396; }
.race-card li { color: #d2cbb7; }
.race-card a, .sample-action { color: #f0c872; }
.site-footer { background: #0a1219; border-top: 3px double #856739; color: #b6ae98; padding-bottom: max(100px, calc(90px + env(safe-area-inset-bottom))); }
.footer-nav a { color: #dfd0ac; }
@container (max-width: 720px) {
  .results-head { display: block; }
  .result-context { display: block; margin-top: 10px; text-align: left; }
  .results h2 { white-space: normal; }
}
@media (max-width: 760px) {
  .intro { padding: 42px 32px 36px; }
  .title-row { display: block; }
  .title-icons { margin: 0 0 16px; }
  .controls { border-bottom-color: #967446; }
}
@media (max-width: 540px) {
  .intro { margin-top: 14px; padding: 37px 22px 30px; }
  .intro h1 { font-size: clamp(2.45rem, 11vw, 3.65rem); }
  .title-icon { width: 44px; height: 44px; }
  .title-chevron { font-size: 2rem; }
  .milestone { padding: 18px 15px; }
  .forge { margin-top: 19px; }
  .results { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .title-icon-link { transition: none; }
}

/* Open choices: see the character's possibilities at a glance. */
.header-inner { gap: 20px; flex-wrap: wrap; padding-block: 14px; }
.header-nav, .header-actions { display: flex; align-items: center; gap: 20px; }
.header-nav { margin-left: auto; }
.header-nav a { color: #ded4bc; font-size: .88rem; text-decoration: none; }
.header-nav a:hover { color: #f4d187; }
.language-badge { color: #c4cbbc; font-size: .75rem; letter-spacing: .12em; border: 1px solid #5d685f; padding: 7px 9px; }
.intro { padding: 36px; gap: 32px; }
.intro h1 { font-size: clamp(2.5rem, 4.8vw, 4.8rem); }
.forge { display: block; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; padding: 30px 36px; border-right: 0; border-bottom: 3px double #947447; }
.controls > .section-kicker, #race-field, #class-field, #profession-field, .controls > .generate, .controls > .controls-foot { grid-column: 1 / -1; }
.controls > .section-kicker { margin: 0; }
.controls > .field { min-width: 0; margin: 0; padding: 0; border: 0; }
.controls legend { padding: 0; margin-bottom: 12px; color: #e5d9bc; font: 700 .7rem/1.4 Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.field .mobile-choice-select { display: none; }
.mobile-choice-wrapper { display: contents; }
@media (max-width: 760px) {
  .mobile-choice-wrapper { display: block; position: relative; }
  #race-options, #class-options { display: none; }
  .field .mobile-choice-select { display: flex; }
  .mobile-choice-select img { width: 26px; height: 26px; border-radius: 3px; }
  .mobile-choice--open #race-options, .mobile-choice--open #class-options { display: flex; flex-direction: column; flex-wrap: nowrap; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; gap: 0; padding: 4px; border: 1px solid #796544; background: #111d25; box-shadow: 0 8px 24px #0009; }
  .mobile-choice-wrapper .choice-option { flex: none; justify-content: flex-start; width: 100%; }
}
.choice-option { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 13px; border: 1px solid #655a47; border-radius: 3px; background: #0d1822; color: #d8d3c6; font-size: .84rem; }
.choice-option img { width: 28px; height: 28px; border-radius: 3px; }
.choice-option:hover { border-color: #dbb46b; background: #273740; }
.choice-option[aria-pressed="true"] { border-color: #f0c772; color: #fff0c9; background: #3d382a; box-shadow: inset 0 0 0 1px #cfa65a70; }
.choice-option:disabled { cursor: wait; opacity: .6; }
.controls > .generate { justify-self: start; min-width: 250px; }
.controls > .controls-foot { margin: 0; }
.body-options { max-width: 390px; }
.results { border-left: 0; padding: 30px 36px; }
.name-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.name-row { display: block; padding: 20px; border: 1px solid #aa916c; background: #f7e9c738; }
.name-row-content { display: block; }
.name-parts { gap: 14px; }
.name-actions { margin-top: 16px; }
.name-copy { display: block; padding: 0; border: 0; background: transparent; color: #322818; font: 700 1.2rem/1.25 Georgia, serif; text-align: left; overflow-wrap: anywhere; }
.name-copy:hover { color: #75521e; text-decoration: underline; text-underline-offset: 4px; }
.name-copy[data-copied="true"] { color: #326237; }
.name-meaning { margin: 12px 0 0; color: #665b46; font-size: .78rem; line-height: 1.5; }
.more-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#share-status { color: #60431c; font-size: .8rem; }
.guide-section { padding-top: 64px; }
.guide-section h2 { color: #f0d18d; font: 400 clamp(1.6rem, 3vw, 2.5rem)/1.2 Georgia, serif; }
.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.method-grid article { border-top: 1px solid #83683f; padding-top: 10px; }
.guide-section h3 { color: #dfc692; font: 400 1.2rem/1.4 Georgia, serif; }
.guide-section p { color: #c0c1b4; font-size: .92rem; line-height: 1.7; }
.guide-section details { padding: 17px 0; border-bottom: 1px solid #4c5049; }
.guide-section summary { cursor: pointer; color: #e4d2aa; line-height: 1.5; }
.footer-inner { display: block; }
.footer-inner > p { max-width: 700px; }
.footer-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.footer-directory nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-directory h2 { font: 400 1.25rem/1.4 Georgia, serif; color: #e3c486; margin: 0 0 7px; }
.footer-directory a { font-size: .85rem; text-decoration: none; }
.footer-directory a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .header-nav { order: 3; width: 100%; margin: 0; justify-content: center; }
  .header-actions { margin-left: auto; gap: 10px; }
  .method-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .header-inner { gap: 14px; }
  .header-actions { margin-left: 0; }
  .header-nav { justify-content: flex-start; gap: 16px; }
  .intro { padding: 28px 22px; }
  .controls { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
  .controls > * { grid-column: 1 !important; }
  .choice-option { padding: 8px 10px; font-size: .8rem; }
  .controls > .generate { width: 100%; min-width: 0; }
  .results { padding: 25px 20px; }
  .name-list { grid-template-columns: 1fr; }
  .name-row { padding: 16px; }
  .name-copy { font-size: 1.1rem; }
  .footer-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
}

.coffee-embed { display: flex; align-items: center; min-height: 60px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.launch-strip { background: #104957; border-bottom: 1px solid #7ca9ad; }
.launch-strip-inner { display: flex; align-items: center; gap: 12px 20px; padding-block: 14px; }
.launch-strip .milestone { flex: none; width: auto; margin: 0; padding: 6px 12px; border: 1px solid #8da7a5; background: #0c2d37; box-shadow: none; }
.launch-strip .milestone-status { margin: 0; color: #f4d083; font: 400 1.05rem/1.4 Georgia, serif; white-space: nowrap; }
.launch-timeline { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; color: #f2e5c9; font: 400 1rem/1.5 Georgia, serif; }
.launch-timeline span { white-space: nowrap; }
.launch-timeline span + span::before { content: '·'; margin-right: 16px; color: #d5ba7d; }
.launch-image { position: relative; isolation: isolate; height: clamp(340px, 33vw, 480px); overflow: hidden; background: radial-gradient(ellipse at center, #263c48, #101b23 75%); }
@media (max-width: 1100px) {
  .launch-strip-inner { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .launch-strip-inner { gap: 12px; padding-block: 12px; }
  .launch-strip .milestone-status { font-size: 1rem; }
  .launch-timeline { display: block; font-size: .9rem; line-height: 1.65; }
  .launch-timeline span { display: block; white-space: normal; }
  .launch-timeline span + span::before { display: none; }
  .launch-image { height: 300px; }
}

/* Compact navigation, illustrated countdown, and a two-sided character forge. */
html { scroll-padding-top: 110px; }
.site-header { position: sticky; top: 0; z-index: 50; box-shadow: 0 6px 20px #0005; }
.header-inner { padding-block: 10px; gap: 18px; }
.header-actions { gap: 14px; }
.coffee-embed { min-height: 40px; }
.coffee-embed > a, .coffee-embed .bmc-btn-container { zoom: .65; }
.launch-banner { position: relative; isolation: isolate; min-height: 0; overflow: hidden; border-bottom: 3px double #947447; background: #142027; }
.launch-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--art-position, 50% 40%); }
.launch-image::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #06101766, transparent 65%); }
.launch-art--portrait { width: 100%; object-fit: cover; object-position: 50% 12%; }
.launch-art--key-art { width: 100%; object-fit: contain; object-position: center; }
.art-credit { padding-top: 12px; font-size: .7rem; }
.site-footer p.art-credit { max-width: 1386px; margin-inline: auto; }
.intro { display: block; padding: 30px 0; margin-top: 0; border: 0; background: none; box-shadow: none; }
.intro::before { display: none; }
.intro h1 { font-size: clamp(2.1rem, 3.8vw, 3.6rem); max-width: none; }
.forge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.controls { display: flex; flex-direction: column; gap: 23px; padding: 30px; border-bottom: 0; border-right: 3px double #947447; }
.controls .body-options { max-width: none; }
.controls > .generate { align-self: stretch; min-width: 0; margin-top: 2px; }
.controls .choice-option { flex: 1 0 auto; font-size: .78rem; padding: 8px 10px; }
.controls .choice-option img { width: 26px; height: 26px; }
.controls .choice-grid { gap: 7px; }
.profession-select { width: 100%; min-height: 46px; padding: 10px 12px; color: #f2e5c9; border: 1px solid #9a794b; border-radius: 3px; background: #101a23; font: inherit; color-scheme: dark; }
.profession-select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.profession-select:disabled { opacity: .6; }
.results { padding: 30px; }
.results-head { display: block; }
.result-context { display: block; text-align: left; margin-top: 10px; line-height: 1.5; }
.name-list { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
.name-row { padding: 18px 20px; }
.name-parts { grid-template-columns: 1fr; gap: 12px; }
.part-line { justify-content: space-between; }
.name-copy { font-size: 1.35rem; }
.name-actions { margin-top: 12px; }
.footer-directory { display: flex; flex-direction: column; gap: 30px; margin-top: 0; }
.footer-directory nav { display: block; }
.footer-icon-list { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 12px 0 0; list-style: none; }
.footer-icon-list li { flex: 1 1 90px; }
.footer-icon-list a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 7px; border: 1px solid #6b5a3c; border-radius: 3px; background: #15212a; color: #e8d4a5; }
.footer-icon-list img { border-radius: 3px; border: 1px solid #9e8150; }
.footer-icon-list a:hover { background: #26343b; border-color: #c8a365; text-decoration: none; }
.footer-directory nav[aria-label="Useful links"] { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; gap: 12px 24px; }
.footer-directory nav[aria-label="Useful links"] h2 { flex-basis: 100%; }
.footer-inner > p { margin-top: 30px; padding-top: 20px; max-width: none; border-top: 1px solid #6b5a3c; }
@media (max-width: 900px) {
  .header-inner { gap: 8px 14px; }
  .header-nav { gap: 18px; }
  .forge { grid-template-columns: 1fr; }
  .controls { border-right: 0; border-bottom: 3px double #947447; }
  .intro { padding: 26px 0; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 140px; }
  .header-inner { justify-content: space-between; gap: 8px 12px; }
  .brand { font-size: .88rem; gap: 8px; }
  .brand img { width: 30px; height: 30px; }
  .header-actions { gap: 8px; }
  .language-badge { padding: 5px 6px; }
  .coffee-embed > a, .coffee-embed .bmc-btn-container { zoom: .45; }
  .header-nav { justify-content: center; }
  .launch-art { object-position: var(--art-position-mobile, var(--art-position, 50% 35%)); }
  .launch-art--portrait { width: 100%; height: 100%; object-position: 50% 12%; }
  .launch-art--key-art { width: 100%; height: 100%; object-position: center; }
  .controls, .results { padding: 24px 20px; }
  .footer-icon-list { gap: 8px; }
  .footer-icon-list li { flex: 1 1 90px; }
}

/* Keep the full generated set beside a compact options column. */
.forge { grid-template-columns: minmax(280px, 31%) minmax(0, 1fr); }
.controls { padding: 24px; gap: 18px; }
.controls > .generate { order: -1; }
.controls .choice-option { padding: 7px 8px; }
.results { padding: 24px; }
.name-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; }
.name-row { padding: 16px; margin: 0; }
.name-parts { gap: 8px; }
.name-copy { font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 400; }
.part-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.part-controls { flex: none; }
.part-reroll { min-width: 32px; min-height: 32px; padding: 0 7px; }
.part-reroll > span { display: none; }
.name-actions { justify-content: flex-start; margin-top: 10px; }
.name-meaning { margin-top: 8px; font-size: .72rem; line-height: 1.4; }
@media (max-width: 1100px) {
  .name-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .forge { grid-template-columns: 1fr; }
  .controls { border-right: 0; border-bottom: 3px double #947447; }
  .results { padding: 20px; }
  .name-row { padding: 14px; }
  .name-copy { font-size: 1.2rem; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .controls { border-right: 3px double #947447; border-bottom: 0; }
}
@media (max-width: 420px) {
  .results { padding: 14px; }
  .name-row { padding: 10px; }
  .name-actions { gap: 4px; }
  .name-actions .name-action { padding-inline: 6px; font-size: .65rem; }
}

/* Keep generating and sharing in equal halves of the result footer. */
.more-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 18px; }
.more-generate { min-width: 0; }
.more-generate .generate { width: 100%; min-width: 0; }
.share-panel { min-width: 0; border-left: 1px solid #aa916c; padding-left: 18px; }
.share-heading { margin: 0 0 9px; color: #60431c; font-size: .75rem; font-weight: 700; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.share-buttons .name-action { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 9px; border: 1px solid #aa916c; border-radius: 3px; background: #f7e9c7; color: #49391e; font: 700 .72rem/1.2 Arial, sans-serif; text-decoration: none; }
.share-buttons .name-action:hover { background: #ead29d; border-color: #75521e; }
#share-status { display: block; margin-top: 8px; }
#share-status:empty { display: none; }
@media (max-width: 480px) {
  .more-row { gap: 12px; }
  .share-panel { padding-left: 12px; }
  .more-generate .generate { padding: 12px 8px; font-size: .83rem; }
}

/* Warm charcoal and deep green keep the navigation within our gold palette. */
.site-header { background: linear-gradient(110deg, #162727, #222820 65%, #29251e); border-bottom: 1px solid #927548; }
.header-nav a { color: #e4d8b9; }
.header-nav a:hover { color: #ffdc8d; }
.launch-strip .launch-strip-inner { display: flex; justify-content: center; padding-block: 12px; }
.launch-strip .launch-timeline { display: flex; justify-content: center; gap: 24px; margin: 0; }
.compact-countdown { display: flex; align-items: center; gap: 12px; margin: 0; padding: 4px 0; }
.compact-countdown + .compact-countdown { border-left: 1px solid #b692574f; padding-left: 24px; }
.countdown-label { color: #cbbd9e; font-size: .74rem; letter-spacing: .04em; }
.compact-countdown time { color: #f4d696; font: 700 .83rem/1.4 Arial, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.footer-directory { gap: 20px; padding-top: 20px; border-top: 1px solid #92754866; }
.footer-directory nav[aria-label="Race generators"] h2, .footer-directory nav[aria-label="Class generators"] h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.footer-icon-list { justify-content: center; gap: 10px 24px; margin: 0; }
.footer-icon-list li { flex: 0 0 auto; }
.footer-icon-list a { flex-direction: row; gap: 8px; padding: 5px 3px; border: 0; border-radius: 0; background: transparent; color: #e2d4b5; font: 400 1rem/1.4 Georgia, serif; }
.footer-icon-list img { width: 20px; height: 20px; border-radius: 2px; border: 1px solid #826638; }
.footer-icon-list a:hover { background: transparent; color: #ffda87; text-decoration: underline; text-underline-offset: 5px; }
.footer-directory nav[aria-label="Class generators"] .footer-icon-list a { font-size: .92rem; }
.footer-directory nav[aria-label="Useful links"] { justify-content: center; margin-top: 6px; }
.footer-directory nav[aria-label="Useful links"] h2 { display: none; }
.footer-inner > p { margin-inline: auto; text-align: center; }
@media(max-width:600px) {
  .launch-strip .launch-timeline { gap: 14px; flex-wrap: wrap; }
  .compact-countdown { flex-direction: column; gap: 4px; }
  .compact-countdown + .compact-countdown { padding-left: 14px; }
  .footer-icon-list { gap: 10px 16px; }
  .footer-icon-list li { flex: 0 0 auto; }
  .footer-icon-list a { font-size: .9rem; }
}

/* Open crest links distinguish the footer while preserving its two rows. */
.footer-directory { gap: 32px; padding-top: 28px; }
.footer-directory nav[aria-label="Race generators"] h2,
.footer-directory nav[aria-label="Class generators"] h2 {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  margin: 0 0 20px; text-align: center; color: #d9bd82;
  font: 400 1.15rem/1.4 Georgia, serif; letter-spacing: .03em;
}
.footer-icon-list { gap: 16px 22px; }
.footer-icon-list li { --crest-accent: #b89e67; flex: 1 1 85px; max-width: 110px; }
.footer-icon-list a { flex-direction: column; gap: 12px; padding: 8px 4px 12px; position: relative; }
.footer-icon-list img {
  width: 38px; height: 42px; object-fit: cover; border-radius: 8px 8px 15px 15px;
  border: 2px solid var(--crest-accent); padding: 2px; background: #10191a;
  box-shadow: 0 3px 12px #0006; transition: filter .18s ease, box-shadow .18s ease;
}
.footer-icon-list a::after { content: ''; position: absolute; bottom: 2px; left: 30%; right: 30%; height: 1px; background: #e6c57c; transform: scaleX(0); transition: transform .18s ease; }
.footer-icon-list a:hover, .footer-icon-list a:focus-visible { color: #ffdc96; text-decoration: none; }
.footer-icon-list a:hover::after, .footer-icon-list a:focus-visible::after { transform: scaleX(1); }
.footer-icon-list a:hover img, .footer-icon-list a:focus-visible img { filter: brightness(1.2); box-shadow: 0 0 14px color-mix(in srgb, var(--crest-accent) 35%, transparent); }
.footer-icon-list [data-race="human"], .footer-icon-list [data-race="dwarf"], .footer-icon-list [data-race="gnome"], .footer-icon-list [data-race="night-elf"] { --crest-accent: #6f9abe; }
.footer-icon-list [data-race="orc"], .footer-icon-list [data-race="tauren"], .footer-icon-list [data-race="troll"], .footer-icon-list [data-race="undead"] { --crest-accent: #ba716c; }
.footer-icon-list [data-class="warrior"] { --crest-accent: #c79c6e; }
.footer-icon-list [data-class="paladin"] { --crest-accent: #f58cba; }
.footer-icon-list [data-class="hunter"] { --crest-accent: #abd473; }
.footer-icon-list [data-class="rogue"] { --crest-accent: #fff569; }
.footer-icon-list [data-class="priest"] { --crest-accent: #ddd; }
.footer-icon-list [data-class="shaman"] { --crest-accent: #448cdb; }
.footer-icon-list [data-class="mage"] { --crest-accent: #69ccf0; }
.footer-icon-list [data-class="warlock"] { --crest-accent: #9482c9; }
.footer-icon-list [data-class="druid"] { --crest-accent: #ff7d0a; }
@media (max-width: 600px) { .footer-icon-list { gap: 12px; } .footer-icon-list li { flex-basis: 75px; } }
@media (prefers-reduced-motion: reduce) { .footer-icon-list img, .footer-icon-list a::after { transition: none; } }

.share-buttons .name-action { width: 44px; height: 44px; padding: 10px; }
.share-buttons .name-action svg { width: 22px; height: 22px; }

/* A deeper landscape frame reveals more scenery with less vertical cropping. */
.launch-image { height: clamp(360px, 28vw, 420px); }
@media (max-width: 600px) {
  .launch-image { height: auto; aspect-ratio: var(--art-ratio, 16 / 9); }
  .launch-art { object-position: var(--art-position-mobile, var(--art-position, 50% 50%)); }
}

/* Give each countdown half of the available desktop timeline width. */
@media (min-width: 901px) {
  .launch-strip .launch-timeline { width: 100%; gap: 24px; }
  .launch-strip .compact-countdown { flex: 1 1 0; justify-content: center; gap: clamp(16px, 2.4vw, 36px); padding-block: 8px; }
  .launch-strip .countdown-label { font-size: .9rem; }
  .launch-strip .compact-countdown time { font-size: 1.05rem; }
}

/* The location image introduces the page, with a single title over the scenery. */
.launch-image { display: grid; align-items: center; }
.launch-image::after { background: linear-gradient(0deg, #061017 0%, #06101700 35%), linear-gradient(90deg, #061017ed 0%, #061017b8 35%, #0610173b 70%, #06101710 100%); }
.launch-banner { border-bottom: 0; }
.banner-intro { position: relative; z-index: 1; padding: 32px 0; margin-block: 0; }
.banner-intro > div { max-width: 1060px; }
.banner-intro .title-row { display: flex; flex-direction: row; align-items: center; gap: 18px; }
.banner-intro .title-icons { margin: 0; }
.banner-intro .title-chevron { display: none; }
.banner-intro h1 { font-size: clamp(2.4rem, 3.6vw, 3.5rem); line-height: 1.12; letter-spacing: -.035em; color: #ffe4ab; text-shadow: 0 2px 12px #0009; }
.banner-intro .eyebrow { color: #e5c58b; margin-bottom: 16px; }
.banner-intro .tagline { display: block; margin-top: 16px; max-width: 530px; color: #f4e8cd; font-size: 1.1rem; line-height: 1.6; }
main#top { padding-top: 20px; }
main#top .breadcrumbs { margin-top: 0; }
main#top .forge { margin-top: 20px; }
.results { background: radial-gradient(circle at 75% 20%, #e2cea044, transparent 54%), repeating-linear-gradient(0deg, #6e4e1907 0 2px, transparent 2px 6px), #c3af87; }
@media (max-width: 600px) {
  .launch-image { min-height: 280px; height: auto; aspect-ratio: auto; align-items: center; }
  .launch-image::after { background: linear-gradient(0deg, #061017f5 0%, #061017be 55%, #06101728 100%); }
  .banner-intro { padding-block: 32px; }
  .banner-intro h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); }
  .banner-intro .title-row { gap: 12px; }
  .banner-intro .title-icons { flex-shrink: 0; flex-wrap: wrap; max-width: 40px; }
  .banner-intro .title-icon { width: 40px; height: 40px; }
  .banner-intro .eyebrow { margin-bottom: 14px; font-size: .65rem; }
  .banner-intro .tagline { margin-top: 16px; font-size: 1rem; }
  main#top { padding-top: 20px; }
}

.banner-intro .eyebrow { white-space: normal; line-height: 1.6; }
.footer-inner > .footer-projects { margin-top: 16px; padding-top: 0; border-top: 0; font-size: .8rem; line-height: 1.8; color: #b9ad91; }
.footer-projects strong { color: #dbc38e; font-weight: 500; }
.footer-projects a { margin-inline: 5px; text-underline-offset: 4px; }
.footer-inner > .footer-projects { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.footer-projects img { display: block; width: 40px; height: 40px; border-radius: 8px; }
.footer-projects img.project-logo--wide { width: auto; height: 28px; max-width: 70px; object-fit: contain; border-radius: 0; }
.packtricia-wordmark { display: block; width: 104px; background: transparent; }
.footer-projects .packtricia-wordmark img { display: block; width: 104px; height: auto; max-width: 100%; border-radius: 0; }
.footer-projects a:hover .packtricia-wordmark { outline: 1px solid #dbc38e; outline-offset: 3px; }
.footer-projects a:hover .packtricia-wordmark img { outline: none; }
.footer-projects a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-projects a:hover img { outline: 1px solid #dbc38e; outline-offset: 3px; }

/* Shared charcoal surfaces, warm parchment, and selective antique gold. */
:root {
  --night: #0b141b;
  --night-2: #18252d;
  --night-3: #22313a;
  --paper: #cdbb98;
  --ink: #eee5d1;
  --muted: #bcb5a5;
  --line: #796544;
  --gold: #d8b467;
  --gold-bright: #e7c985;
  --focus: #ffe4a1;
}
.site-header { background: linear-gradient(110deg, #18252d, #111d25); border-bottom-color: #796544; }
.launch-strip { background: #173b43; border-bottom-color: #49636a; }
.launch-strip .milestone { background: #102b33; border-color: #607777; }
.launch-strip .countdown-label { color: #ded3b9; }
.launch-strip .compact-countdown time { color: #e7c985; }
.controls { background: repeating-linear-gradient(135deg, #ffffff02 0 2px, transparent 2px 6px), linear-gradient(140deg, #22313a, #18252d 70%); }
.forge { border-color: #796544; }
.choice-option, .field select, .body-option { border-color: #596269; background-color: #111d25; }
.choice-option[aria-pressed="true"], .body-option[aria-pressed="true"] { border-color: #d8b467; background: #38382c; box-shadow: inset 0 0 0 1px #d8b46755; }
.generate { background: linear-gradient(#e7c985, #ba9145); border-color: #8d6c32; }
.results { background: radial-gradient(circle at 75% 20%, #e9d8b244, transparent 54%), repeating-linear-gradient(0deg, #6e4e1905 0 2px, transparent 2px 6px), #cdbb98; color: #342817; box-shadow: inset 0 0 0 5px #79654426; }
.results h2 { color: #342817; text-shadow: none; }
.results-head { border-bottom-color: #8b7651; }
.result-context, .name-meaning, .results-tip, .saved-list small { color: #51432e; }
.part-reroll, .favorite-action.is-saved { color: #563b16; }
.part-action, .name-action { border-color: #8b7651; color: #342817; background: #e3d0a8; box-shadow: inset 0 1px #f2e3c5; }
.name-row { border-color: #9e8963; }
.link-list a { border-color: #796544; background: linear-gradient(#22313a, #18252d); }
.site-footer { background: #0b141b; }
.footer-directory, .footer-inner > p { border-color: #79654466; }

/* Let each location continue behind the forge before fading into charcoal. */
.launch-strip { background: linear-gradient(#18252d, #111d25); border-bottom: 1px solid #796544; }
.launch-strip .launch-strip-inner { padding-block: 10px; }
.launch-strip .launch-timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 20px; }
.launch-strip .compact-countdown { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 10px 16px; width: auto; border: 1px solid #79654488; background: #0b141b66; box-shadow: inset 0 1px #e7c9850d; }
.launch-strip .compact-countdown:first-child { border-color: #b19050; box-shadow: inset 0 1px #e7c98522, 0 0 14px #d8b4670c; }
.launch-strip .countdown-label { font-size: .78rem; color: #d2c7b1; letter-spacing: .06em; }
.launch-strip .compact-countdown time { display: flex; gap: 18px; color: #eee5d1; font: 600 1.7rem/1.05 Georgia, serif; font-variant-numeric: tabular-nums; }
.launch-strip #milestone-status { color: #e7c985; }
.timer-unit { display: flex; flex-direction: column; align-items: center; min-width: 36px; gap: 4px; }
.timer-caption { font: 400 .6rem/1.2 Arial, sans-serif; letter-spacing: .08em; color: #bcb5a5; text-transform: uppercase; }
.launch-timeline time span::before { content: none; }
.launch-timeline time .timer-unit { display: flex; }
.name-copy[data-name-part="surname"] { font-size: clamp(1rem, 1.5vw, 1.3rem); color: #59452a; }
.name-copy[data-name-part="surname"]:hover { color: #342817; }
.profession-picker { position: relative; }
.profession-trigger, .profession-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; color: #eee5d1; background: #111d25; border: 1px solid #596269; text-align: left; min-height: 44px; }
.profession-trigger::after { content: '▾'; margin-left: auto; color: #d8b467; }
.profession-picker img { width: 26px; height: 26px; border-radius: 3px; }
.profession-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; border: 1px solid #796544; background: #111d25; box-shadow: 0 8px 24px #0009; }
.profession-menu button { border: 0; }
.profession-picker--above .profession-menu { top: auto; bottom: calc(100% + 4px); }
.profession-menu button:hover, .profession-menu button:focus-visible { background: #22313a; outline-offset: -3px; }
.profession-menu button[aria-selected="true"] { color: #e7c985; background: #38382c; }
.footer-ancestry-groups { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); align-items: start; gap: 18px; }
.footer-ancestry-groups .footer-icon-list { gap: 8px; }
.footer-ancestry-groups .footer-icon-list li { flex: 1 1 0; min-width: 0; max-width: none; }
.footer-faction-mark { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 4px 12px; color: #c3b390; }
.footer-faction-mark img { border-color: #796544; }
.footer-faction-group[aria-label="Alliance races"] .footer-faction-mark { order: 1; }
.footer-shared-race { border-inline: 1px solid #79654466; }
@media (max-width: 1000px) {
  .footer-ancestry-groups { grid-template-columns: 1fr; gap: 18px; }
  .footer-ancestry-groups .footer-icon-list li { flex: 1 1 65px; max-width: 110px; }
  .footer-shared-race { border-inline: 0; }
}
.choice-option[aria-pressed="true"]::after, .body-option[aria-pressed="true"]::after { content: '✓'; color: #e7c985; font-size: .8rem; margin-left: 2px; }
@media (max-width: 600px) {
  .launch-strip .launch-timeline { gap: 8px; }
  .launch-strip .compact-countdown { padding: 10px 4px; gap: 8px; }
  .launch-strip .countdown-label { font-size: .64rem; letter-spacing: 0; }
  .launch-strip .compact-countdown time { gap: 5px; font-size: 1.25rem; }
  .timer-unit { min-width: 24px; }
  .timer-caption { font-size: .48rem; letter-spacing: .03em; }
}
.launch-banner, .launch-image { overflow: visible; }
.launch-image .launch-art { height: calc(100% + 420px); }
.launch-image::after {
  bottom: -420px;
  background: linear-gradient(0deg, #0b141b 0%, #0b141bf0 14%, #0b141b99 38%, transparent 70%), linear-gradient(90deg, #061017d9 0%, #0610179e 35%, #0610173b 70%, #06101710 100%);
}
main#top { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .launch-image .launch-art { height: calc(100% + 280px); }
  .launch-image::after { bottom: -280px; background: linear-gradient(0deg, #0b141b 0%, #0b141bf0 20%, #061017b8 55%, #06101728 100%); }
}

/* The home timeline and hero share one continuous cinematic backdrop. */
.launch-banner--cinematic { position: relative; isolation: isolate; }
.launch-banner--cinematic::before, .launch-banner--cinematic::after { content: ''; position: absolute; inset: 0 0 -420px; pointer-events: none; }
.launch-banner--cinematic::before { z-index: -2; background: var(--cinematic-art) center / cover no-repeat; }
.launch-banner--cinematic::after { z-index: -1; background: linear-gradient(0deg, #0b141b 0%, #0b141be6 12%, transparent 44%), linear-gradient(90deg, #061017a8, #06101752 60%, #06101738); }
.launch-banner--cinematic .milestone-timeline { background: transparent; border-bottom: 0; }
.launch-banner--cinematic .launch-image { background: transparent; }
.launch-banner--cinematic .launch-art { visibility: hidden; }
.launch-banner--cinematic .launch-image::after { background: none; }
.launch-banner--cinematic .timeline-copy { text-shadow: 0 2px 6px #000; }
@media (max-width: 600px) {
  .launch-banner--cinematic::before, .launch-banner--cinematic::after { bottom: -280px; }
}

/* Other pages keep their individual hero artwork. */
.milestone-timeline {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px) 0 34px;
  border-bottom: 1px solid #b59155a6;
  background-color: #11191c;
  background-image: linear-gradient(135deg, #172127 0%, #0c151a 54%, #1b241f 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.timeline-shell { max-width: 1452px; }
.timeline-heading { margin: 0 0 25px; text-align: center; }
.timeline-eyebrow, .timeline-step, .countdown-kicker { color: #dfbd79; font: 700 .67rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.timeline-eyebrow { margin: 0 0 6px; text-shadow: 0 1px 8px #000; }
.timeline-heading h2 { margin: 0; color: #f4e8cd; font: 400 clamp(1.55rem, 3vw, 2.15rem)/1.15 Georgia, 'Times New Roman', serif; text-shadow: 0 2px 14px #000b; }
.timeline-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.timeline-track { position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline-track::before { position: absolute; z-index: 2; top: var(--track-y, 28px); left: var(--track-x, 12.5%); width: var(--track-width, 75%); height: var(--track-height, 2px); transform: translateY(-50%); content: ''; background: linear-gradient(90deg, #efcf86 0 var(--timeline-progress, 0%), #776347 var(--timeline-progress, 0%) 100%); box-shadow: 0 0 10px #e0b85c55; }
.timeline-position { position: absolute; z-index: 4; left: var(--timeline-x, 12.5%); top: var(--timeline-y, 25px); width: 10px; height: 10px; margin: 0; padding: 0; border: 2px solid #fff0c3; border-radius: 50%; background: #d7a94f; box-shadow: 0 0 11px 3px #f4ce78a8; pointer-events: none; transform: translate(-50%, -50%); transition: left .7s linear, top .7s linear; }
.timeline-item { position: relative; min-width: 0; }
.timeline-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 190px; padding: 0 14px 12px; }
.timeline-icon { position: relative; z-index: 3; display: grid; width: 56px; height: 56px; flex: 0 0 56px; padding: 3px; place-items: center; border: 2px solid #9a8352; border-radius: 8px; background: #10191b; color: #c5b18a; transition: border-color .25s ease, box-shadow .25s ease; }
.timeline-icon img { display: block; width: 100%; height: 100%; border-radius: 3px; object-fit: cover; }
.timeline-copy { min-width: 0; padding: 0; margin: 0; text-align: center; }
.timeline-step { display: block; margin-bottom: 5px; color: #b5a47f; font-size: .56rem; letter-spacing: .13em; }
.timeline-copy h3 { margin: 0 0 6px; color: #f1dfb8; font: 400 clamp(.98rem, 1.25vw, 1.13rem)/1.22 Georgia, 'Times New Roman', serif; }
.timeline-copy time, .timeline-date { display: block; color: #e6c989; font: 600 .7rem/1.4 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
.timeline-copy p { margin: 7px 0 0; color: #d1ccbc; font-size: .72rem; line-height: 1.4; }
.timeline-cta { display: inline-flex; gap: 5px; align-items: center; margin-top: 9px; color: #f0cf89; font-size: .7rem; text-decoration-thickness: 1px; }
.timeline-item[data-state="complete"] .timeline-icon, .timeline-item[data-state="current"] .timeline-icon { border-color: #e6c477; color: #ffe0a0; box-shadow: 0 0 13px #e0b85c55, inset 0 0 10px #d9b46b20; }
.timeline-item[data-state="current"] .timeline-icon { animation: timeline-glow 2.8s ease-in-out infinite; }
.timeline-item[data-state="upcoming"] .timeline-icon { border-color: #82785f; color: #a9a08d; }
.timeline-item[data-state="upcoming"] .timeline-icon img { filter: saturate(.55); opacity: .72; }
.timeline-item[data-state="upcoming"] .timeline-copy h3 { color: #ded4bd; }
@keyframes timeline-glow { 50% { box-shadow: 0 0 22px #f2cb796f, inset 0 0 12px #d9b46b33; } }
.timeline-countdown { grid-column: var(--countdown-column, 2); position: relative; min-width: 0; margin-top: 20px; padding: 13px 14px 11px; border: 1px solid #d8b467a6; background: #0b141beF; box-shadow: inset 0 1px #f6dfa326, 0 8px 24px #0005; transition: border-color .3s ease, background-color .3s ease; }
.timeline-countdown::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 20px; background: #b59155; }
.countdown-heading { display: flex; gap: 8px; align-items: center; }
.countdown-pulse { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #f0d088; box-shadow: 0 0 9px #f0d088; }
.countdown-kicker { margin: 0; color: #efd596; font-size: .58rem; letter-spacing: .12em; }
.countdown-clock { display: flex; justify-content: space-between; gap: 5px; margin-top: 11px; font-variant-numeric: tabular-nums; }
.timeline-countdown .timer-unit { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; align-items: center; gap: 3px; padding: 0 3px; border-left: 1px solid #7d694880; }
.timeline-countdown .timer-unit:first-child { border-left: 0; }
.timeline-countdown .timer-digit { color: #f1d491; font: 400 1.35rem/1 Georgia, 'Times New Roman', serif; }
.timeline-countdown .timer-caption { color: #bdb49e; font: 600 .49rem/1.2 Arial, Helvetica, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.countdown-note { margin: 10px 0 0; color: #c2bdaF; font-size: .6rem; line-height: 1.35; }
.timeline-countdown[data-phase="reservations"] { border-color: #edcc80; }
.timeline-countdown[data-phase="released"] { grid-column: 2; }
.timeline-countdown[data-phase="released"] .countdown-clock { margin-top: 13px; }
.timeline-countdown[data-phase="released"] .countdown-live { color: #ffe0a0; font: 400 1.2rem/1.2 Georgia, 'Times New Roman', serif; }
@media (max-width: 760px) {
  .milestone-timeline { padding: 27px 0 26px; }
  .timeline-heading { margin-bottom: 20px; }
  .timeline-layout { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
  .timeline-track { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .timeline-track::before { transform: translateX(-50%); width: var(--track-width, 2px); height: var(--track-height, calc(100% - 56px)); left: var(--track-x, 28px); top: var(--track-y, 28px); background: linear-gradient(180deg, #efcf86 0 var(--timeline-progress, 0%), #776347 var(--timeline-progress, 0%) 100%); }
  .timeline-position { left: var(--timeline-x, 24px); top: var(--timeline-y, 24px); }
  .timeline-card { flex-direction: row; align-items: flex-start; gap: 20px; min-height: 0; padding: 0; }
  .timeline-copy { padding: 2px 0 0; margin: 0; text-align: left; }
  .timeline-step { margin-bottom: 3px; }
  .timeline-copy h3 { font-size: 1.05rem; }
  .timeline-copy p { margin-top: 4px; }
  .timeline-cta { margin-top: 6px; }
  .timeline-countdown, .timeline-countdown[data-phase="released"] { grid-column: 1; margin: 14px 0 0 76px; }
  .timeline-countdown .timer-digit { font-size: 1.3rem; }
}
@media (max-width: 390px) {
  .timeline-shell { width: min(100% - 32px, 1260px); }
  .timeline-track { gap: 24px; }
  .timeline-copy h3 { font-size: .98rem; }
  .timeline-countdown { margin-left: 76px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-item[data-state="current"] .timeline-icon { animation: none; }
  .timeline-icon, .timeline-position, .timeline-countdown { transition: none; }
  .timeline-track::before { transition: none; }
}

/* Keep the timeline legible over both the sky and the valley. */
.launch-banner--cinematic .timeline-heading { max-width: 600px; margin-inline: auto; padding: 10px 16px; border-radius: 12px; background: radial-gradient(ellipse, #07100dc9, #07100d80 65%, transparent 100%); }
.launch-banner--cinematic .timeline-heading h2,
.launch-banner--cinematic .timeline-copy h3 { color: #ffffff; text-shadow: 0 1px 2px #000, 0 2px 8px #000; }
.launch-banner--cinematic .timeline-eyebrow,
.launch-banner--cinematic .timeline-step { color: #fff0c4; }
.launch-banner--cinematic .timeline-copy { padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #07100dcc, #07100db8); text-shadow: 0 1px 2px #000; }
.launch-banner--cinematic .timeline-copy time,
.launch-banner--cinematic .timeline-date { color: #ffe5a0; }
.launch-banner--cinematic .timeline-copy p { color: #f7f6ed; }
.launch-banner--cinematic .timeline-cta { color: #ffe08a; font-weight: 700; }
.launch-banner--cinematic .timeline-cta:hover { color: #ffffff; }
.launch-banner--cinematic .timeline-track::before { background: linear-gradient(90deg, #ffd76b 0 var(--timeline-progress, 0%), #eee9d2 var(--timeline-progress, 0%) 100%); box-shadow: 0 0 0 1px #07100dcc, 0 2px 7px #000; }
.launch-banner--cinematic .timeline-position { border-color: #ffffff; background: #ffd76b; box-shadow: 0 0 0 2px #07100d, 0 0 12px 3px #ffd76ba6; }
.launch-banner--cinematic .timeline-item[data-state="upcoming"] .timeline-icon { border-color: #eee9d2; box-shadow: 0 2px 8px #000a; }
.launch-banner--cinematic .timeline-item[data-state="upcoming"] .timeline-icon img { filter: saturate(.85); opacity: .95; }
.launch-banner--cinematic .timeline-countdown { border-color: #ffe08a; background: #07100def; }
.launch-banner--cinematic .timeline-countdown::before { background: #ffe08a; box-shadow: 0 0 0 1px #07100d80; }
.launch-banner--cinematic .countdown-kicker { color: #ffe5a0; }
.launch-banner--cinematic .timeline-countdown .timer-digit { color: #ffffff; }
.launch-banner--cinematic .timeline-countdown .timer-caption,
.launch-banner--cinematic .countdown-note { color: #e9ede5; }

/* Keep each page's own header art visible from the countdown through its title. */
.launch-banner:not(.launch-banner--cinematic) .launch-image {
  position: static;
  isolation: initial;
  background: transparent;
}
.launch-banner:not(.launch-banner--cinematic) .launch-art { z-index: -2; }
.launch-banner:not(.launch-banner--cinematic)::after {
  position: absolute;
  z-index: -1;
  inset: 0 0 -420px;
  content: '';
  pointer-events: none;
  background: linear-gradient(0deg, #0b141b 0%, #0b141be6 12%, transparent 44%),
    linear-gradient(90deg, #061017a8, #06101752 60%, #06101738);
}
.launch-banner:not(.launch-banner--cinematic) .milestone-timeline {
  border-bottom: 0;
  background: transparent;
}
@media (max-width: 600px) {
  .launch-banner:not(.launch-banner--cinematic)::after { bottom: -280px; }
}
@media (max-width: 760px) {
  .launch-banner--cinematic .timeline-track::before { background: linear-gradient(180deg, #ffd76b 0 var(--timeline-progress, 0%), #eee9d2 var(--timeline-progress, 0%) 100%); }
}

/* A single entrance sequence follows the path from Today to launch. */
.timeline-animated .timeline-track::before { animation: timeline-draw 1.15s cubic-bezier(.22, 1, .36, 1) .1s both; }
.timeline-animated .timeline-heading { animation: timeline-rise .6s ease-out both; }
.timeline-animated .timeline-icon { animation: timeline-icon-arrive .65s cubic-bezier(.22, 1, .36, 1) var(--entry-delay, 0ms) both; transition: translate .2s ease, border-color .2s ease, box-shadow .2s ease; }
.timeline-animated .timeline-copy { animation: timeline-rise .65s ease-out calc(var(--entry-delay, 0ms) + 140ms) both; }
.timeline-animated .timeline-countdown { animation: timeline-rise .65s ease-out .85s both; }
.timeline-animated .timeline-position { animation: timeline-marker-arrive .4s ease-out 1s both; }
.timeline-animated .timeline-item[data-state="current"] .timeline-icon { animation: timeline-icon-arrive .65s cubic-bezier(.22, 1, .36, 1) var(--entry-delay, 0ms) both, timeline-glow 3.2s ease-in-out 1.3s infinite; }
@keyframes timeline-draw { from { clip-path: inset(-12px 100% -12px -12px); } to { clip-path: inset(-12px); } }
@keyframes timeline-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes timeline-icon-arrive { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes timeline-marker-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .timeline-animated .timeline-item:hover .timeline-icon,
  .timeline-animated .timeline-item:focus-within .timeline-icon { translate: 0 -3px; border-color: #fff0b9; }
}
@media (max-width: 760px) {
  .timeline-animated .timeline-track::before { animation-name: timeline-draw-vertical; }
}
@keyframes timeline-draw-vertical { from { clip-path: inset(-12px -12px 100% -12px); } to { clip-path: inset(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .timeline-animated .timeline-track::before,
  .timeline-animated .timeline-heading,
  .timeline-animated .timeline-icon,
  .timeline-animated .timeline-copy,
  .timeline-animated .timeline-countdown,
  .timeline-animated .timeline-position,
  .timeline-animated .timeline-item[data-state="current"] .timeline-icon { animation: none; transition: none; }
}

/* Image-led offers follow the generator without interrupting name selection. */
.forge { grid-template-columns: minmax(280px, 31%) minmax(0, 1fr); }
.adventure-offers { margin: 28px 0 18px; padding: 22px; border: 1px solid #806439; background: #142126; }
.adventure-offers-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.adventure-offers-heading h2 { margin: 0; color: #f1e4c6; font: 400 1.3rem/1.3 Georgia, serif; }
.offer-ad-label, .offer-disclosure { color: #b6beb9; font-size: .7rem; line-height: 1.6; }
.visual-offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.visual-offer { display: flex; flex-direction: column; min-width: 0; border: 1px solid #61706d; background: #1c2b2f; color: #f1e4c6; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.visual-offer:hover { border-color: #edcb85; box-shadow: 0 6px 20px #0003; }
.visual-offer:focus-visible { outline: 3px solid #f0cd83; outline-offset: 4px; }
.visual-offer-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 260px; overflow: hidden; }
.visual-offer--wow .visual-offer-art { background: radial-gradient(ellipse at center, #65623b, #26382f 60%, #152425); }
.visual-offer--wow img { display: block; height: 225px; width: auto; max-width: 80%; object-fit: contain; transform: rotate(-6deg); box-shadow: 8px 12px 25px #0007; }
.visual-offer-badge { position: absolute; bottom: 14px; left: 14px; padding: 6px 10px; background: #162522ed; border: 1px solid #b1975a; color: #f4d99b; font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.visual-offer--steam .visual-offer-art { gap: 16px; background: radial-gradient(ellipse at 30% 20%, #1c6e93, #101e32 80%); }
.visual-offer--steam img { width: 115px; height: 115px; filter: drop-shadow(0 8px 18px #0004); }
.steam-art-title { color: #fff; text-align: center; font-size: 1.7rem; font-weight: 700; letter-spacing: .12em; line-height: 1.25; }
.steam-art-title > span { display: block; color: #c7dfea; font-size: .7rem; letter-spacing: .22em; margin-top: 6px; }
.visual-offer--nord .visual-offer-art { padding: 26px; background: radial-gradient(ellipse at top left, #f7faff, #d4e4ff); }
.visual-offer--nord img { width: 100%; height: auto; }
.visual-offer-caption { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 18px; gap: 12px; }
.visual-offer-caption h3 { margin: 0; font: 400 1.1rem/1.3 Georgia, serif; }
.visual-offer-cta { display: inline-flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; margin-top: auto; color: #f2d391; font-size: .8rem; font-weight: 700; line-height: 1.4; }
.visual-offer--wow .visual-offer-cta { padding: 12px; background: #e4c17a; color: #182226; }
.visual-offer-caption small { color: #b4bdb6; font-size: .65rem; line-height: 1.5; }
.offer-disclosure { margin: 14px 0 0; }
.affiliate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .visual-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .forge { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .adventure-offers { padding: 14px; }
  .visual-offer-grid, .affiliate-grid { grid-template-columns: 1fr; }
  .visual-offer--wow { grid-column: auto; }
  .visual-offer-art { height: 210px; }
  .visual-offer--wow img { height: 185px; }
  .visual-offer--nord img { max-width: 240px; }
}

.visual-offer--g2a .visual-offer-art { background: #f5f5f5; }
.visual-offer--g2a img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }

.visual-offer--zygor .visual-offer-art { background: #101820; }
.visual-offer--zygor img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Give the names and primary action room without stretching the parchment. */
.launch-image { height: clamp(170px, 15vw, 230px); min-height: 0; aspect-ratio: auto; }
.banner-intro { padding-block: 24px; }
.banner-intro .tagline { margin-top: 10px; }
.forge { align-items: start; border: 0; background: transparent; box-shadow: none; }
.controls { gap: 15px; padding: 22px; border: 1px solid #796544; }
.results { position: relative; align-self: start; min-height: 0; border: 1px solid #796544; }
.results-head h2 { padding-right: 160px; font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
.result-context { letter-spacing: .1em; }
.saved-panel { margin: 0; padding: 0; border: 0; }
.saved-panel > summary { position: absolute; top: 26px; right: 24px; padding: 8px 10px; border: 1px solid #8b7651; border-radius: 4px; color: #49351a; background: #ead9b5; font: 700 .75rem/1.3 Arial, sans-serif; cursor: pointer; }
.saved-panel > summary:hover { background: #f4e5c6; }
.saved-panel[open] { margin-top: 14px; padding-bottom: 16px; border-bottom: 1px solid #aa916c; }
.saved-list { margin-top: 0; }
.name-list { gap: 10px; border: 0; }
.name-row { padding: 16px 14px; border: 1px solid #aa916c99; border-radius: 4px; background: #f7e9c726; }
.name-copy { font-size: clamp(1.3rem, 1.6vw, 1.55rem); line-height: 1.25; }
.name-copy[data-name-part="surname"] { font-size: clamp(1.15rem, 1.4vw, 1.35rem); }
.name-actions { gap: 12px; margin-top: 12px; }
.name-actions .name-action { min-height: 36px; padding: 6px 0; border: 0; background: transparent; box-shadow: none; font-size: .75rem; }
.name-actions .name-action:hover { color: #6e4714; background: transparent; text-decoration: underline; }
.name-actions .favorite-action.is-saved { color: #36532c; background: transparent; }
.part-reroll { min-width: 36px; min-height: 36px; border-color: transparent; background: transparent; box-shadow: none; opacity: .72; }
.part-reroll:hover, .part-reroll:focus-visible { opacity: 1; background: #f2e2bf; border-color: #aa916c; }
.more-row { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; }
.more-generate .generate { min-height: 54px; font-size: 1rem; box-shadow: 0 3px 8px #34281733, inset 0 1px #eed49e55; }
.share-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 0; border: 0; }
.share-heading { margin: 0; font-size: .72rem; font-weight: 400; }
.share-buttons { gap: 4px; }
.share-buttons .name-action { width: 36px; height: 36px; min-height: 36px; padding: 8px; border-color: transparent; background: transparent; }
.share-buttons .name-action svg { width: 18px; height: 18px; }
.results-tip { margin-bottom: 0; }
@media (max-width: 1100px) {
  .results-head h2 { padding-right: 0; }
  .saved-panel > summary { position: static; display: list-item; width: fit-content; margin-top: 12px; }
  .saved-panel[open] .saved-list { margin-top: 14px; }
}
@media (max-width: 760px) {
  .launch-image { height: auto; min-height: 160px; }
  .banner-intro { padding-block: 22px; }
  .banner-intro h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .controls { padding: 18px; gap: 14px; }
  .results { padding: 18px; width: 100%; }
  .name-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .name-row { padding: 12px 10px; }
  .name-copy { font-size: 1.3rem; }
  .name-copy[data-name-part="surname"] { font-size: 1.15rem; }
  .name-actions .name-action { min-height: 44px; }
  .part-reroll { min-width: 44px; min-height: 44px; }
  .share-buttons .name-action { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
  .name-list { grid-template-columns: 1fr; }
  .name-row { padding: 14px; }
  .share-panel { gap: 6px; }
  .more-generate .generate { font-size: .95rem; }
}

/* Keep the destination of every saved name visible. */
.results-head h2 { padding-right: 0; }
.saved-panel, .saved-panel[open] { margin: 16px 0 0; padding: 14px 16px; border: 1px solid #8b7651; border-radius: 4px; background: #eee0bf; }
.saved-panel > summary { position: static; display: list-item; width: fit-content; margin: 0; padding: 0; border: 0; background: transparent; font: 600 1rem/1.4 Georgia, serif; }
.saved-panel > summary:hover { background: transparent; color: #6e4714; }
.saved-panel .saved-list, .saved-panel[open] .saved-list { margin: 12px 0 0; }
.saved-list li:first-child { border-left: 3px solid #55724a; padding-left: 10px; }

/* Clear feedback and an easier return to character settings. */
.name-copy { position: relative; }
.name-copy[data-copy-feedback]::after { content: attr(data-copy-feedback); position: absolute; z-index: 3; left: 0; bottom: calc(100% + 5px); padding: 5px 8px; border-radius: 3px; background: #243e2b; color: #fff8e5; font: 700 .72rem/1.3 Arial, sans-serif; white-space: nowrap; pointer-events: none; }
.copy-action[data-copied="true"] { color: #294d2d; background: #d1dfbd; border-radius: 3px; padding-inline: 6px; }
.part-reroll { position: relative; }
.part-reroll:hover > span, .part-reroll:focus-visible > span { display: block; position: absolute; z-index: 4; bottom: calc(100% + 5px); right: 0; padding: 6px 8px; background: #26383c; color: #fff1ce; border-radius: 3px; font: 700 .7rem/1.3 Arial, sans-serif; white-space: nowrap; pointer-events: none; }
.saved-panel .saved-list { max-height: 272px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #806439 #ead9b5; padding-right: 6px; }
.saved-list:focus-visible { outline: 3px solid #806439; outline-offset: 3px; }
.controls .choice-option[aria-pressed="true"], .controls .body-option[aria-pressed="true"] { background: #435345; color: #fff4cb; border-color: #e5c477; box-shadow: inset 0 0 0 1px #e5c477, 0 0 0 1px #07110b; font-weight: 700; }
.mobile-settings-toggle { display: none; }
.results { scroll-margin-top: 100px; }
@media (max-width: 760px) {
  .mobile-settings-toggle { display: block; width: 100%; padding: 12px; border: 1px solid #d6b46e; border-radius: 3px; background: #263b35; color: #fff0c6; text-align: left; font-weight: 700; min-height: 44px; }
  .controls.settings-collapsed > :not(.mobile-settings-toggle) { display: none; }
  .controls.settings-collapsed { padding: 12px; }
}

/* Blizzard UI-CheckBox-Check texture for selected character options. */
.choice-option[aria-pressed="true"]::after,
.body-option[aria-pressed="true"]::after {
  content: '';
  display: inline-block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  background: url('/images/ui/wow-checkbox-check.png') center / contain no-repeat;
}

/* A larger Amazon collection, visually separate from the partner offer grid. */
.affiliate-placement { margin: 36px 0; padding: 28px; border: 3px double #947447; border-radius: 4px; background: radial-gradient(circle at 80% 0%, #eadbb566, transparent 55%), repeating-linear-gradient(0deg, #6e4e1905 0 2px, transparent 2px 6px), #cdbb98; color: #342817; }
.amazon-section-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 22px; }
.amazon-section-heading h2 { margin: 0; font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.25 Georgia, serif; color: #342817; }
.affiliate-placement .affiliate-label { color: #59482e; font-size: .72rem; }
.affiliate-placement .affiliate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 22px; margin: 0; }
.affiliate-placement .affiliate-card { align-items: center; gap: 22px; padding: 20px; border: 1px solid #aa916c; border-radius: 4px; background: #f5e8cb; color: #342817; }
.affiliate-placement .affiliate-card:hover { background: #fff2d6; border-color: #745321; box-shadow: 0 5px 16px #3428171a; }
.affiliate-placement .affiliate-card img { flex: 0 0 180px; width: 180px; height: 220px; padding: 12px; border-radius: 3px; background: #fff; }
.affiliate-placement .affiliate-copy { flex: 1; align-content: center; gap: 12px; }
.affiliate-placement .affiliate-copy strong { font: 600 1.25rem/1.35 Georgia, serif; color: #342817; }
.affiliate-placement .affiliate-copy > span { color: #5b4b33; font-size: .85rem; line-height: 1.5; }
.affiliate-placement .affiliate-copy .affiliate-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; margin-top: 6px; padding: 12px 16px; border: 1px solid #21352c; border-radius: 3px; background: #263b35; color: #fff0c6; font-weight: 700; font-size: .85rem; }
.affiliate-placement .affiliate-card:hover .affiliate-action { background: #365247; }
@media (max-width: 1100px) {
  .affiliate-placement .affiliate-card { flex-direction: column; align-items: stretch; }
  .affiliate-placement .affiliate-card img { flex: none; width: 100%; height: 230px; }
  .affiliate-placement .affiliate-copy { align-content: start; }
}
@media (max-width: 600px) {
  .affiliate-placement { padding: 18px; margin-block: 28px; }
  .affiliate-placement .affiliate-grid { grid-template-columns: 1fr; gap: 16px; }
  .affiliate-placement .affiliate-card { padding: 18px; gap: 18px; }
  .affiliate-placement .affiliate-card img { height: 240px; }
  .affiliate-placement .affiliate-copy strong { font-size: 1.2rem; }
}

/* Celebrate the reservation opening while retaining its key icon. */
.timeline-item[data-open="true"] .timeline-copy h3 { color: #ffe5a0; font-size: 1.3rem; }
.reservation-open-status { display: inline-block; margin-top: 8px; padding: 7px 10px; border: 1px solid #d8b467; background: #162522ed; color: #f4d99b; font: 700 .65rem/1.5 Arial, Helvetica, sans-serif; letter-spacing: .04em; }
.reservation-open-status[hidden], .timeline-item[data-open="true"] time[hidden] { display: none; }

/* Retained results keep the existing cards and grow in normal document flow. */
.generation-count { display: block; margin-top: 6px; color: #665538; font-size: .72rem; }
.results-toggle { margin: 8px 0 12px; min-height: 36px; }
.results-toggle[hidden], .name-row[hidden] { display: none; }
.generation-status { margin: 8px 0; font-size: .78rem; line-height: 1.5; color: #665538; }
.generation-status:empty { display: none; }
/* Disclosure navigation: one shared HTML link inventory, two-panel on desktop. */
.generator-nav { position: relative; }
#generators-toggle, .generator-race-button { color: #e4d8b9; background: transparent; border: 1px solid transparent; font: inherit; cursor: pointer; }
#generators-toggle { padding: 9px 0; font-size: .88rem; white-space: nowrap; }
#generators-toggle:hover, #generators-toggle[aria-expanded="true"] { color: #f4d187; }
.generators-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: grid; grid-template-columns: 155px minmax(0, 1fr); align-content: start; gap: 2px 14px; width: 570px; max-width: calc(100vw - 32px); max-height: min(70vh, 620px); overflow-y: auto; padding: 14px; background: #172125; border: 1px solid #947447; box-shadow: 0 12px 28px #0008; }
.generators-panel[hidden], .generator-race-panel[hidden] { display: none; }
.generator-race-group { display: contents; }
.generator-race-button { grid-column: 1; grid-row: var(--race-row); display: flex; align-items: center; justify-content: space-between; text-align: left; min-height: 42px; padding: 9px 12px; }
.generator-race-button[aria-expanded="true"] { background: #30413c; border-color: #947447; color: #ffe0a0; }
.generator-race-panel { grid-column: 2; grid-row: 1 / span 9; min-width: 0; padding: 6px 10px; border-left: 1px solid #94744766; }
.generator-race-heading { margin: 0 0 10px; color: #f4d187; font-family: Georgia, serif; }
.generator-race-panel ul { list-style: none; margin: 0; padding: 0; }
.generator-race-panel a { display: block; padding: 10px 6px; min-height: 42px; line-height: 1.5; overflow-wrap: anywhere; }
.generator-nav button:focus-visible, .generator-nav a:focus-visible { outline: 2px solid #f4d187; outline-offset: 2px; }
@media (max-width: 900px) {
  .header-nav { flex-wrap: wrap; gap: 4px 14px; }
  .generator-nav { position: static; }
  .generators-panel { top: 100%; left: 50%; right: auto; transform: translateX(-50%); display: block; width: min(620px, calc(100vw - 32px)); max-height: 65vh; }
  .generators-panel[hidden] { display: none; }
  .generator-race-group { display: block; }
  .generator-race-button { width: 100%; min-height: 44px; }
  .generator-race-panel { border-left: 1px solid #947447; margin: 4px 0 10px 12px; padding: 4px 8px; }
  .generator-race-panel a { min-height: 44px; }
}

.name-row { scroll-margin-top: 140px; scroll-margin-bottom: 16px; }

/* Match the generator's race/class portraits in navigation. */
.generator-race-label, .generator-nav-icons { display: flex; align-items: center; gap: 7px; min-width: 0; }
.generator-nav-icons { flex-shrink: 0; }
.generator-race-label img, .generator-nav-icons img { display: block; flex: 0 0 24px; width: 24px; height: 24px; object-fit: cover; border: 1px solid #947447; }
.generator-race-panel a { display: flex; align-items: center; gap: 9px; }
.generator-race-panel a > span:last-child { min-width: 0; }
/* The same two optional resources move below the forge on smaller screens. */
main.shell { container-type: inline-size; container-name: generator-page; }
.generator-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 20px 0 28px; }
main#top .generator-layout > .forge { width: 100%; min-width: 0; margin: 0; }
.partner-recommendations { --affiliate-sidebar: 0; align-self: start; padding: 16px; border: 1px solid #806439; background: #142126; min-width: 0; }
.partner-recommendations h2 { margin: 0; color: #f1e4c6; font: 400 1.12rem/1.35 Georgia, serif; }
.partner-disclosure { color: #b6beb9; margin: 8px 0 14px; font-size: .7rem; line-height: 1.5; }
.partner-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.partner-card { min-width: 0; padding: 12px; border: 1px solid #61706d; background: #1c2b2f; }
.partner-label { margin: 0 0 10px; color: #c2ccc7; font-size: .65rem; }
.partner-card a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; color: #f1e4c6; text-decoration: none; }
.partner-card a:focus-visible { outline: 3px solid #f0cd83; outline-offset: 4px; }
.partner-card img { display: block; width: 48px; height: auto; object-fit: contain; }
.partner-copy { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.partner-card h3 { margin: 0; font: 400 1rem/1.35 Georgia, serif; }
.partner-description { color: #c2ccc7; font-size: .76rem; line-height: 1.5; }
.partner-action { display: block; color: #f2d391; font-size: .78rem; font-weight: 700; line-height: 1.5; }
.partner-card a:hover .partner-action { color: #fff0c6; text-decoration: underline; }
@media (max-width: 600px) { .partner-card-list { grid-template-columns: 1fr; } }
/* 1386px unchanged forge + 24px gap + 256px rail + comfortable outer margins. */
@media (min-width: 1800px) {
  @container generator-page (min-width: 1386px) {
    .generator-layout:has(> .partner-recommendations) { grid-template-columns: minmax(0, 1386px) 256px; width: 1666px; margin-left: calc((100% - 1666px) / 2); align-items: start; }
    .partner-recommendations { --affiliate-sidebar: 1; }
    .partner-card-list { grid-template-columns: 1fr; }
  }
}

.partner-game-test { margin: 24px 0; }
#partner-recommendations .partner-card a { grid-template-columns: minmax(0, 1fr); }
#partner-recommendations .partner-card img { width: 100%; height: 170px; object-fit: contain; background: #101820; }
.partner-game-test .partner-card a { grid-template-columns: minmax(0, 1fr); }
.partner-game-test .partner-disclosure { margin-bottom: 0; }
.partner-game-test .partner-card a { grid-template-columns: minmax(0, 235px) minmax(0, 1fr); align-items: center; gap: 20px; }
.partner-game-test .partner-card .partner-game-image { width: 100%; max-width: 470px; height: auto; }
@media (max-width: 600px) { .partner-game-test .partner-card a { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
/* Local trial: one deals slider followed by two Amazon picks and one G2A pick. */
.game-deals { margin: 24px 0; padding: 18px; border: 1px solid #806439; background: #142126; min-width: 0; }
/* Keep measurable viewport geometry for the vendor's lazy loader, without
   reserving page space or exposing its empty frame while it initializes. */
.game-deals:not([data-widget-ready]) { position: fixed; top: 0; left: 0; width: min(100%, 900px); margin: 0; visibility: hidden; pointer-events: none; z-index: -1; }
.game-deals h2 { margin: 0 0 14px; color: #f1e4c6; font: 400 1.2rem/1.35 Georgia, serif; }
.game-deals-widget { min-height: 300px; min-width: 0; }
.game-deals-widget iframe { display: block; max-width: 100%; }
.affiliate-placement .affiliate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin-inline: auto; }
.affiliate-placement .affiliate-card { flex-direction: column; align-items: center; padding: 12px; gap: 10px; }
.affiliate-placement .affiliate-card img { flex: none; width: 136px; height: 136px; max-width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6px; }
.affiliate-placement .affiliate-copy { flex: 1; width: 100%; gap: 6px; }
.affiliate-placement .affiliate-copy strong { font-size: 1rem; }
.affiliate-placement .affiliate-copy > span { font-size: .76rem; }
.affiliate-placement .affiliate-copy .affiliate-action { min-height: 40px; padding: 8px 10px; margin-top: 2px; font-size: .76rem; }
@media (max-width: 640px) {
  .affiliate-placement .affiliate-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .affiliate-placement .affiliate-card { flex-direction: row; align-items: center; gap: 12px; padding: 10px; }
  .affiliate-placement .affiliate-card img { width: 88px; height: 88px; flex: 0 0 88px; padding: 4px; }
  .affiliate-placement .affiliate-copy { min-width: 0; }
  .game-deals { padding: 12px; }
}
/* Keep the entire product section compact, including its outer frame. */
.affiliate-placement { width: min(100%, 840px); max-width: 840px; margin: 18px auto; padding: 12px; }
.affiliate-placement .amazon-section-heading { margin-bottom: 10px; gap: 4px 12px; }
.affiliate-placement .amazon-section-heading h2 { font-size: 1.08rem; line-height: 1.3; }
.affiliate-placement .amazon-section-heading .affiliate-label { margin: 0; font-size: .65rem; }
.affiliate-placement .affiliate-grid { gap: 10px; }
@media (max-width: 640px) { .affiliate-placement { padding: 10px; margin-block: 16px; } }
/* Image-led campaign tiles: four compact squares, two columns on phones. */
.affiliate-placement { max-width: 840px; }
.affiliate-placement .affiliate-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.affiliate-placement .affiliate-card { flex-direction: column; align-items: stretch; gap: 7px; padding: 8px; }
.affiliate-placement .affiliate-card img { flex: none; width: 100%; height: auto; max-width: 100%; aspect-ratio: 1; object-fit: contain; padding: 3px; }
.affiliate-placement .affiliate-copy { flex: none; gap: 3px; }
.affiliate-placement .affiliate-copy strong { font-size: .8rem; line-height: 1.3; }
.affiliate-placement .affiliate-copy .affiliate-action { display: block; min-height: 0; padding: 0; margin: 0; border: 0; background: none; color: #345247; font-size: .7rem; }
@media (max-width: 640px) { .affiliate-placement .affiliate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A quiet gold fill tracks elapsed time from reservations opening to launch. */
.launch-progress { margin-top: 14px; }
.launch-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: #cabc9c; font: 600 .58rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .03em; }
#launch-progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 8px; overflow: hidden; border: 1px solid #947447; border-radius: 5px; background: #0b141b; color: #d8b467; }
#launch-progress::-webkit-progress-bar { background: #0b141b; border-radius: 5px; }
#launch-progress::-webkit-progress-value { background: linear-gradient(90deg, #8b632d, #e5c780); border-radius: 4px; }
#launch-progress::-moz-progress-bar { background: linear-gradient(90deg, #8b632d, #e5c780); border-radius: 4px; }

#partner-recommendations .partner-region-link { display: block; margin-top: 12px; }

/* A vertical comparison widget occupies the existing responsive resource rail. */
.top-games-sidebar{padding:12px;background:#142126;border-color:#796544}
.top-games-sidebar h2{color:#e7c985;margin-bottom:10px}
.top-games-sidebar>.partner-label{margin-bottom:12px}
.top-games-widget{width:100%;min-width:0;overflow:hidden;background:#142126}
.top-games-widget iframe{display:block;width:100%;border:0;color-scheme:light;background:transparent;visibility:hidden}
.top-games-status{font-size:.75rem;line-height:1.5;color:#c2ccc7}
.top-games-sidebar[data-widget-ready]>.top-games-status{display:none}
.top-games-sidebar[data-widget-failed] .top-games-widget{display:none}
.zygor-promotion.affiliate-placement{width:min(100%,728px);max-width:728px;margin:24px auto;padding:0;background:transparent;border:0;box-shadow:none}
.zygor-promotion .partner-label{color:#c2ccc7;margin:0 0 8px;font-size:.7rem}
.zygor-promotion>a{display:block}
.zygor-promotion img{display:block;width:100%;height:auto;aspect-ratio:728/90}
.zygor-promotion>a:hover{filter:brightness(1.06)}

/* The vendor document uses a light browser colour scheme with its own dark theme. */
.top-games-sidebar[data-widget-ready] .top-games-widget iframe{visibility:visible}