/* EliteLevel site styles: the Elite Level launcher's hellfire look. Deep blacks, blood reds, molten orange and lava
   glow; spiked iron frames with skulls; the launcher's skull-crested buttons; parchment for reading panels.
   Art: launcher pieces in img/theme/launcher, game-client UI in img/theme/client and img/ui, effects in img/theme/fx. */
@font-face { font-family: 'Exocet'; src: url('../fonts/exocet-light.otf') format('opentype'); font-display: swap; }

:root {
  --bg: #0a0302;
  --bg2: #170605;
  --iron: #3d2c23;
  --iron-hi: #7a5a40;
  --iron-lo: #140908;
  --line: rgba(255, 120, 50, 0.26);
  --gold: #f0c27a;
  --gold-hi: #ffe2a8;
  --gold-lo: #8a5a24;
  --ember: #ff6a1a;
  --lava: #ff3c0a;
  --blood: #7a0d06;
  --ink: #ecdcc4;
  --ink-dim: #a8927a;
  --ink-dark: #2a1b0e;
  --ink-dark-2: #5a3b1c;
  --top: var(--el-top);          /* the header's height (el/el.css) */
  --title: 'Exocet', 'Trajan Pro', 'Cinzel', Georgia, serif;
  --label: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --body: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); min-height: 100vh; overflow-x: hidden; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.dim { color: var(--ink-dim); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* big metallic-red gothic lettering (the launcher title's colours) */
.metal, .stage-title h1, .plain h1, .card h2 {
  background: linear-gradient(180deg, #fff1de 0%, #f6c9ad 20%, #d2482a 46%, #6a0904 54%, #b93318 74%, #ffb38a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.6px rgba(40, 4, 0, 0.7);
  filter: drop-shadow(0 2px 1px #000) drop-shadow(0 0 14px rgba(255, 50, 10, 0.45));
}

/* The header (logo, menu, phone menu) and the footer are shared with the Sanctuary Codex: el/el.css (site/shared/). */

/* ------------------------------------------------------------------ buttons: the launcher's skull-crested frames */
.btn {
  --w: 270px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--w);
  aspect-ratio: 560 / 308; padding: calc(var(--w) * 0.177) calc(var(--w) * 0.182) calc(var(--w) * 0.229) calc(var(--w) * 0.179);   /* the frame's label box */
  background: url('../img/theme/launcher/button-choice-blank-normal.webp') center / 100% 100% no-repeat;
  font: 700 calc(var(--w) * 0.066) / 1.04 var(--label); letter-spacing: 0.01em; text-align: center; color: #ffe7ba; cursor: pointer;
  text-shadow: 0 0 6px rgba(255, 140, 40, 0.85), 0 0 16px rgba(255, 70, 10, 0.55), 0 2px 2px #000;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); transition: filter .2s, transform .15s, color .2s; border: 0;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover, .btn:focus-visible { color: #fff6de; filter: brightness(1.14) saturate(1.1) drop-shadow(0 0 18px rgba(255, 90, 20, 0.7)); transform: translateY(-1px); }
.btn:active { background-image: url('../img/theme/launcher/button-choice-blank-pressed.webp'); transform: translateY(1px); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)); }
.btn.play { --w: 420px; aspect-ratio: 900 / 424; padding: calc(var(--w) * 0.187) calc(var(--w) * 0.178) calc(var(--w) * 0.159); font-size: calc(var(--w) * 0.074); background-image: url('../img/theme/launcher/button-play-blank-normal.webp'); }
.btn.play:active { background-image: url('../img/theme/launcher/button-play-blank-pressed.webp'); }
.btn.small { --w: 220px; }
.btn:focus-visible { outline: none; }

/* small actions: the game client's red metal buttons (9-slice) */
.mbtn, .back, .sibling a, .clips button, .opts button, .car {
  border-style: solid; border-width: 9px 16px; border-image: url('../img/theme/client/btn-red-up.webp') 20 34 fill / 9px 16px stretch;
  background: none; color: #e8cfa8; font: 13px/1 var(--title); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.9); transition: color .15s, filter .15s;
}
.mbtn:hover, .back:hover, .sibling a:hover, .clips button:hover, .opts button:hover, .car:hover {
  border-image-source: url('../img/theme/client/btn-red-over.webp'); color: var(--gold-hi); filter: drop-shadow(0 0 8px rgba(255, 80, 20, 0.5));
}
.mbtn:active, .clips button:active, .opts button:active { border-image-source: url('../img/theme/client/btn-red-down.webp'); }

/* ------------------------------------------------------------------ drifting embers (common.js fills .embers) */
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; mix-blend-mode: screen; }
.embers i {
  position: absolute; bottom: -24px; display: block; background: url('../img/theme/fx/ember.webp') center / contain no-repeat;
  opacity: 0; animation-name: ember-rise; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform, opacity;
}
@keyframes ember-rise {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  8% { opacity: 1; }
  45% { opacity: 0.55; }
  60% { opacity: 1; }
  100% { transform: translate3d(var(--dx, 40px), -92vh, 0) scale(0.4); opacity: 0; }
}

/* ------------------------------------------------------------------ home */
.home-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: max(640px, min(calc(100svh - var(--top)), 960px));
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px 20px 170px; background: var(--bg);
}
.hh-bg {
  position: absolute; inset: 0; z-index: -4;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(10, 3, 2, 0.25), rgba(8, 2, 1, 0.86) 82%),
    linear-gradient(180deg, rgba(10, 3, 2, 0.6), rgba(10, 3, 2, 0.3) 30%, rgba(10, 3, 2, 0.45) 70%, var(--bg) 99%),
    url('../img/theme/client/loading-act4-hell-hellfire.webp') center 30% / cover no-repeat;
}
.hh-demon {
  position: absolute; left: 50%; top: 0; z-index: -3; width: min(900px, 110vw); aspect-ratio: 680 / 450; transform: translateX(-50%);
  background: url('../img/theme/launcher/demon.webp') center / contain no-repeat; opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 45%, #000 30%, transparent 72%); mask-image: radial-gradient(ellipse 50% 50% at 50% 45%, #000 30%, transparent 72%);
  animation: demon-breathe 9s ease-in-out infinite alternate;
}
@keyframes demon-breathe { from { opacity: 0.3; transform: translateX(-50%) scale(1); } to { opacity: 0.46; transform: translateX(-50%) scale(1.04); } }
@keyframes banner-sway { from { transform: rotate(-1.4deg) skewX(0.6deg); } to { transform: rotate(1.2deg) skewX(-0.6deg); } }
.brazier { position: absolute; top: 0; z-index: -1; width: clamp(64px, 7vw, 130px); }
.brazier img { display: block; width: 100%; height: auto; animation: brazier-flicker 1.7s ease-in-out infinite alternate; }
.brazier::after {
  content: ''; position: absolute; left: -60%; right: -60%; top: 10%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 150, 60, 0.55), rgba(255, 70, 10, 0.18) 40%, transparent 68%); animation: glow-flicker 0.9s ease-in-out infinite alternate;
}
/* the fire in the painted cage: the client's torch flame flipbook (fx/flame-strip.webp, 24 frames in a row) stepped
   frame by frame (steps(), 20 frames a second), two copies out of phase, added onto the painting (screen blend) */
.brazier .flame { position: absolute; left: 26%; top: 21%; width: 40%; aspect-ratio: 1; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.brazier .flame i { display: block; width: 2400%; height: 100%; background: url('../img/theme/fx/flame-strip.webp') 0 0 / 100% 100% no-repeat; animation: flame-play 1.2s steps(24) infinite; }
.brazier .flame.f2 { left: 29.5%; top: 26%; width: 33%; opacity: 0.8; }
.brazier .flame.f2 i { animation-duration: 1.35s; animation-delay: -0.55s; }
.hh-brazier-r .flame { left: 28%; top: 20%; }
.hh-brazier-r .flame.f2 { left: 31.5%; top: 25%; }
.hh-brazier-r .flame i { animation-delay: -0.3s; }
.hh-brazier-r .flame.f2 i { animation-delay: -0.9s; }
@keyframes flame-play { to { transform: translateX(-100%); } }
.hh-brazier-r img, .hh-brazier-r::after { animation-delay: -0.6s; }
@keyframes brazier-flicker { 0% { filter: brightness(0.92); } 40% { filter: brightness(1.12); } 70% { filter: brightness(0.98); } 100% { filter: brightness(1.18); } }
@keyframes glow-flicker { 0% { opacity: 0.65; transform: scale(0.96); } 50% { opacity: 0.95; } 100% { opacity: 0.8; transform: scale(1.05); } }
.home-hero-in { position: relative; z-index: 2; max-width: 1000px; }
.hh-title { margin: 0 auto -4px; line-height: 0; }
.hh-title img { width: min(860px, 94vw); height: auto; filter: drop-shadow(0 0 30px rgba(255, 50, 10, 0.45)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.9)); }
.eyebrow { font: 15px/1 var(--title); letter-spacing: 0.34em; text-transform: uppercase; color: #ffb27a; margin: 0 0 14px; text-shadow: 0 0 12px rgba(255, 70, 10, 0.8), 0 2px 3px #000; }
.lead { font-size: 19px; color: #ecdcc6; margin: 0 auto 18px; max-width: 680px; text-shadow: 0 2px 10px #000, 0 0 4px #000; }
.cta { display: flex; gap: 0 4px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: -60px; margin-bottom: 80px; position: relative; z-index: 3; }
.card {
  position: relative; display: flex; flex-direction: column; padding: 24px 22px 20px; color: var(--ink); border-radius: 2px;
  background: radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255, 60, 10, 0.2), transparent 70%), linear-gradient(#1c0b08, #0b0403);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #4d382b, inset 0 0 0 4px #150a07, inset 0 0 0 5px rgba(180, 100, 45, 0.35), 0 14px 30px rgba(0, 0, 0, 0.65);
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  transform: translateY(-3px); color: var(--ink);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #7a5238, inset 0 0 0 4px #150a07, inset 0 0 0 5px rgba(255, 140, 60, 0.6), 0 0 28px rgba(255, 70, 15, 0.35), 0 14px 30px rgba(0, 0, 0, 0.65);
}
.card .sigil { width: 58px; height: 58px; margin: -48px 0 10px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6a4a2e, 0 0 16px rgba(255, 90, 20, 0.35); }
.card h2 { font: 24px/1.1 var(--title); letter-spacing: 0.06em; margin: 0 0 10px; }
.card p { margin: 0 0 16px; color: #c9b8a2; font-size: 16px; flex: 1; }
.card .more { font: 13px/1 var(--title); letter-spacing: 0.14em; text-transform: uppercase; color: #ff9a5a; text-shadow: 0 0 8px rgba(255, 70, 10, 0.5); }
.card .more::after { content: ' \203A'; }

/* placeholder pages */
.plain-page {
  position: relative; isolation: isolate; overflow: hidden; min-height: 62vh;
  background: linear-gradient(180deg, rgba(10, 3, 2, 0.5), rgba(10, 3, 2, 0.72) 55%, var(--bg) 98%), url('../img/theme/client/loading-act5-pandemonium-hellfire.webp') center 25% / cover no-repeat;
}
.plain { position: relative; z-index: 2; padding: 80px 20px 100px; }
.plain h1 { font: clamp(40px, 6vw, 60px)/1.1 var(--title); letter-spacing: 0.05em; margin: 0 0 16px; display: inline-block; }
.plain .lead { margin-left: 0; }
.plain .btn { margin-top: 8px; margin-left: -18px; }

/* ------------------------------------------------------------------ 3D stage (lineup and class pages) */
.stage { position: relative; height: calc(100vh - var(--top)); height: calc(100svh - var(--top)); min-height: 520px; overflow: hidden; background: #140504; user-select: none; -webkit-user-select: none; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; outline: none; }
.stage::after {                      /* a burnt vignette over the scene */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 75% 70% at 50% 55%, transparent 55%, rgba(8, 2, 1, 0.55) 100%);
}
.veil { position: absolute; inset: 0; background: #060101; opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 30; }
.veil.on { opacity: 1; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 200, 150, 0.18); border-top-color: var(--c, var(--ember)); animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
.nogl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; z-index: 5; }
.gender {
  display: flex; gap: 6px; padding: 6px; border-radius: 40px;
  background: radial-gradient(circle at 50% 30%, #2a110b, #0b0303); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--iron), 0 0 0 3px #0e0605, 0 0 18px rgba(255, 70, 15, 0.35);
}
.gender .g {
  width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)); transition: transform .15s, filter .15s;
}
.gender .g:hover { transform: scale(1.06); filter: drop-shadow(0 0 8px rgba(255, 90, 20, 0.7)); }
.gender .g[aria-checked="true"] { filter: drop-shadow(0 0 10px rgba(255, 110, 30, 0.8)); }
.g-m { background-image: url('../img/ui/g-male.png'); }
.g-m:hover { background-image: url('../img/ui/g-male-over.png'); }
.g-m[aria-checked="true"] { background-image: url('../img/ui/g-male-on.png'); }
.g-f { background-image: url('../img/ui/g-female.png'); }
.g-f:hover { background-image: url('../img/ui/g-female-over.png'); }
.g-f[aria-checked="true"] { background-image: url('../img/ui/g-female-on.png'); }

/* lineup */
.lineup .stage-title { transition: opacity .25s; }
.lineup.has-hot:not(.carousel) .stage-title { opacity: 0; }
.lineup .stage-title { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 4; pointer-events: none; width: min(92%, 860px); }
.lineup .stage-title .codex-link { margin-top: 2px; font-size: 15px; }
.lineup .stage-title .codex-link a { pointer-events: auto; color: var(--gold); text-shadow: 0 0 8px rgba(255, 70, 10, 0.6), 0 1px 2px #000; }
.lineup .stage-title .codex-link a::after { content: ' \203A'; }
.lineup .stage-title::after {
  content: ''; display: block; width: min(534px, 80%); aspect-ratio: 534 / 54; margin: 2px auto 0;
  background: url('../img/theme/client/titlebreak-necro.webp') center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(255, 70, 10, 0.5));
}
.stage-title h1 { font: clamp(32px, 4.6vw, 58px)/1.05 var(--title); letter-spacing: 0.08em; margin: 0; display: inline-block; }
.stage-title .sub { margin: 6px 0 0; font-size: 16px; color: #e3c9aa; text-shadow: 0 2px 8px #000, 0 0 3px #000; }
.lineup .gender { position: absolute; top: 20px; right: 22px; z-index: 5; }
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hlabel {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; padding-top: 6px;
  font: 14px/1 var(--title); letter-spacing: 0.12em; text-transform: uppercase; color: #dcc6a6; text-shadow: 0 1px 4px #000, 0 0 10px #000, 0 0 3px #000;
  transition: opacity .3s, color .3s, text-shadow .3s;
}
.hlabel .spin { display: none; }
.hlabel.loading .spin { display: block; }
.hlabel.on { color: #fff0d0; text-shadow: 0 0 10px var(--c), 0 0 18px rgba(255, 80, 20, 0.8), 0 1px 3px #000; }
.hlabel.failed .nm::after { content: ' (could not load)'; text-transform: none; letter-spacing: 0; color: #f88; }
/* the hero plaque: the client's own frame (its own shape, nothing behind or around it), crest, class-coloured name.
   For the text, only the inside of the frame is darkened a little: a soft gradient that fades out well inside the border. */
.plaque {
  position: absolute; left: 50%; top: 40%; z-index: 6; width: 340px; padding: 30px 34px 26px; text-align: center; pointer-events: none;
  background: url('../img/ui/plaque.png') center/100% 100% no-repeat; transform: translate(-50%, calc(-100% - 6px)) scale(0.96);
  opacity: 0; transition: opacity .2s, transform .2s; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.8));
}
.plaque::before {
  content: ''; position: absolute; inset: 24% 10% 16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.3) 55%, transparent);
}
.plaque.on { opacity: 1; transform: translate(-50%, calc(-100% - 6px)); }
/* wide screens: a little smaller (lineup.js PL_SCALE), drawn up from the point over the hero's head */
.lineup:not(.carousel) .plaque { transform-origin: 50% 100%; transform: translate(-50%, calc(-100% - 6px)) scale(calc(var(--pl-s, 0.9) * 0.96)); }
.lineup:not(.carousel) .plaque.on { transform: translate(-50%, calc(-100% - 6px)) scale(var(--pl-s, 0.9)); }
.pl-crest { height: 70px; width: auto; margin: -64px auto 0; display: block; filter: drop-shadow(0 0 12px var(--c)); }
.pl-name { font: 26px/1.1 var(--title); letter-spacing: 0.08em; margin: 6px 0 6px; color: var(--c, var(--gold)); text-shadow: 0 0 14px rgba(0,0,0,0.9), 0 0 2px #000; }
.pl-sum { margin: 0 0 10px; font-size: 15px; line-height: 1.4; color: #e2d6c2; text-shadow: 0 1px 2px #000; }
.pl-hint { font: 11px/1 var(--title); letter-spacing: 0.18em; text-transform: uppercase; color: #b8a58c; }
/* the crest strip: iron sockets on a dark rail */
.hero-picks {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; justify-content: center; gap: 4px; z-index: 5; padding: 6px 8px;
  max-width: calc(100% - 20px); flex-wrap: wrap;
  background: linear-gradient(#1a0907, #080202); border-radius: 3px;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--iron), inset 0 0 0 3px #0e0605, 0 0 0 1px #000, 0 0 22px rgba(255, 60, 10, 0.25), 0 8px 20px rgba(0, 0, 0, 0.7);
}
.hero-pick {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; padding: 6px 4px 5px; border-radius: 2px;
  font: 11px/1.1 var(--title); letter-spacing: 0.1em; text-transform: uppercase; color: #bba48a; text-align: center;
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 70, 10, 0.12), transparent 70%), #0d0504;
  box-shadow: inset 0 0 0 1px #2a1c16, inset 0 8px 14px rgba(0, 0, 0, 0.7); transition: color .2s, box-shadow .2s, background .2s;
}
.hero-pick img { height: 34px; width: auto; opacity: 0.8; transition: opacity .2s, filter .2s; }
.hero-pick:hover, .hero-pick.on, .hero-pick:focus-visible {
  color: var(--gold-hi); background: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--c) 35%, transparent), transparent 75%), #1a0806;
  box-shadow: inset 0 0 0 1px #8a5a34, inset 0 0 12px rgba(255, 90, 20, 0.35), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent);
}
.hero-pick.on img, .hero-pick:hover img { opacity: 1; filter: drop-shadow(0 0 8px var(--c)); }
.car { display: none; }
.stage.no-gl .hero-picks { position: static; transform: none; margin: 120px auto 0; }

/* phones: swipe carousel */
.lineup.carousel .plaque { left: 50%; top: auto; bottom: 86px; padding: 26px 26px 18px; transform: translate(-50%, 0); width: min(92vw, 360px); pointer-events: auto; }
.lineup.carousel .plaque.on { transform: translate(-50%, 0); }
.lineup.carousel .pl-crest { height: 54px; margin-top: -50px; }
.lineup.carousel .labels { display: none; }
.lineup.carousel .car {
  display: flex; align-items: center; justify-content: center; position: absolute; top: 40%; z-index: 6; width: 46px; height: 64px; padding: 0;
  border-width: 9px 12px; border-image-width: 9px 12px; font: 34px/1 var(--label); color: var(--gold-hi);
}
.car-prev { left: 6px; } .car-next { right: 6px; }
.lineup.carousel .hero-picks { gap: 2px; bottom: 8px; flex-wrap: nowrap; width: calc(100% - 16px); padding: 4px; }
.lineup.carousel .hero-pick { width: auto; flex: 1; padding: 4px 0; }
.lineup.carousel .hero-pick span { display: none; }
.lineup.carousel .hero-pick img { height: 28px; }
.lineup.carousel .stage-title { top: 10px; }
.lineup.carousel .stage-title .sub { display: none; }
.lineup.carousel .stage-title::after { width: min(300px, 70%); }
.lineup.carousel .gender { top: 12px; right: 10px; flex-direction: column; z-index: 7; padding: 4px; }
.lineup.carousel .gender .g { width: 38px; height: 38px; }
.lineup.carousel .stage-title h1 { font-size: 26px; padding: 0 50px; }
@media (max-width: 760px) {
  .lineup .gender { top: 70px; right: 12px; flex-direction: column; }
  .gender .g { width: 42px; height: 42px; }
}

/* ------------------------------------------------------------------ class page */
.hero-page {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  background: radial-gradient(ellipse 60% 40% at 75% 0%, rgba(255, 60, 10, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(10, 3, 2, 0.8), rgba(10, 3, 2, 0.94) 40%, var(--bg)), url('../img/theme/client/loading-act3-arreat-hellfire.webp') right top / 1100px auto no-repeat, var(--bg);
}
.hero-stage { position: sticky; top: var(--top); }
.hero-stage canvas { touch-action: none; cursor: grab; }
.hero-stage canvas:active { cursor: grabbing; }
.loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px; align-items: center; z-index: 31;
  font: 14px/1 var(--title); letter-spacing: 0.14em; text-transform: uppercase; color: #e0b894; text-shadow: 0 0 10px rgba(255, 70, 10, 0.6); }
.loading[hidden] { display: none; }
.stage-top { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.back { display: inline-block; padding: 3px 6px; font-size: 13px; }
.stage-bottom { position: absolute; left: 12px; right: 12px; bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 5; pointer-events: none; }
.clips, .opts {
  display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; pointer-events: auto; padding: 6px 8px; border-radius: 3px;
  background: linear-gradient(#1a0907, #080202);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--iron), inset 0 0 0 3px #0e0605, 0 0 18px rgba(255, 60, 10, 0.22), 0 8px 18px rgba(0, 0, 0, 0.7);
}
.clips button, .opts button { min-height: 36px; padding: 2px 6px; font-size: 12.5px; }
.clips button.on {
  color: #fff3d6; border-image-source: url('../img/theme/client/btn-red-over.webp');
  text-shadow: 0 0 8px rgba(255, 150, 60, 0.95), 0 0 16px rgba(255, 70, 10, 0.7), 0 1px 2px #000; filter: drop-shadow(0 0 8px rgba(255, 80, 20, 0.55));
}
.clips button:disabled { opacity: 0.35; cursor: default; border-image-source: url('../img/theme/client/btn-red-disabled.webp'); }
.opts button[aria-pressed="false"] { border-image-source: url('../img/theme/client/btn-red-disabled.webp'); color: #b8a590; }
.opts button[aria-pressed="true"] { color: var(--gold-hi); }
.sibling { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: space-between; padding: 0 18px; z-index: 5; pointer-events: none; }
.sibling a { pointer-events: auto; padding: 2px 6px; font-size: 12.5px; }

/* the class banner: the game's player banner on its stand, dressed per class (js/classbanner.js draws it in 3D; the
   flat cloth picture in three slices stands in until then). --cw is the cloth width; the slices are rows of the
   512 x 1024 cloth picture: the top (trim, accent behind the crest) 266 rows, --hem the hem's rows, --padb the rows
   below the text (the field ends above them). */
.class-side { min-width: 0; padding: 12px 22px 40px 10px; container-type: inline-size; }
.class-banner {
  --cw: min(640px, 80cqw); --hw: 0.08; --q: 0.62; --hem: 455; --padb: 314; --padx: 0.176; --ink: #f0e0c0; --ink-2: #d8c098; --head: #ffe2a8; --rule: rgba(255, 220, 160, 0.3); --shade: rgba(0, 0, 0, 0.75);
  position: relative; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--cw) * 0.2);
}
.cb-cloth {
  position: relative; z-index: 1; width: var(--cw); box-sizing: border-box; min-height: calc(var(--cw) * (266 + var(--hem) * var(--q)) / 512);
  padding: calc(var(--cw) * 70 / 512) calc(var(--cw) * var(--padx)) calc(var(--cw) * var(--padb) / 512);
  border-image-source: var(--cloth); border-image-slice: 266 0 var(--hem) 0 fill; border-image-repeat: stretch;
  border-image-width: calc(var(--cw) * 266 / 512) 0 calc(var(--cw) * var(--hem) * var(--q) / 512) 0; border-style: solid; border-width: 0;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6));
}
.class-banner.cb-3d .cb-cloth { border-image-source: none; filter: none; }
.cb-cloth::before, .cb-cloth::after { content: none; }
.cb-foot { position: relative; width: 100%; height: calc(var(--cw) * 0.34); pointer-events: none; }
.cb-foot::after {                     /* the ground the stand is planted on */
  content: ''; position: absolute; left: 50%; bottom: calc(var(--cw) * -0.02); width: calc(var(--cw) * 0.9); height: calc(var(--cw) * 0.12); transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.5) 45%, transparent), radial-gradient(closest-side, rgba(255, 80, 20, 0.28), rgba(255, 60, 10, 0.08) 70%, transparent);
}
.cb-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.class-banner.cb-3d .cb-canvas { opacity: 1; }
.cb-text { color: var(--ink); font-size: max(14.5px, calc(var(--cw) * 0.027)); line-height: 1.5; text-shadow: 0 1px 2px var(--shade); }
.cb-text a { color: var(--head); }
/* the header: the class emblem standing on its gold rule (the client's hero-creation crest) as the banner's sigil */
.class-head { text-align: center; margin: 0 0 calc(var(--cw) * 0.02); }
.class-head .crest { display: block; width: calc(var(--cw) * 0.6); max-width: none; height: auto; margin: 0 auto calc(var(--cw) * 0.02); filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55)); }
.cname { font: max(28px, calc(var(--cw) * 0.062))/1 var(--title); letter-spacing: 0.1em; text-align: center; margin: 0 0 10px; color: var(--head); text-shadow: 0 2px 3px var(--shade), 0 0 18px var(--shade); }
.summary { text-align: center; font-style: italic; color: var(--ink-2); margin: 0 auto; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0 0 14px; padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts div { display: flex; flex-direction: column; align-items: center; }
.facts span { font: 10px/1.2 var(--title); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.facts b { font: 16px/1.3 var(--title); color: var(--head); font-weight: normal; letter-spacing: 0.04em; }
.desc p { margin: 0 0 10px; }
.links { display: flex; flex-wrap: nowrap; gap: 0 4px; justify-content: center; margin: 8px 0 0; }
.cb-text .btn { --w: calc(var(--cw) * (0.5 - var(--padx)) - 3px); color: #ffe7ba; text-shadow: none; }
.cb-text .btn:hover { color: #fff6de; }
/* each class's banner: its cloth picture, its slices, its inks */
.class-banner[data-slug="crusader"] { --cloth: url('../img/theme/fx/class-banner-crusader.webp'); --hem: 455; --padb: 314; --padx: 0.176;
  --ink: #2a1b0e; --ink-2: #5a3b1c; --head: #3a1608; --rule: rgba(110, 70, 20, 0.4); --shade: rgba(255, 250, 235, 0.55); }
.class-banner[data-slug="crusader"] .cb-text a:not(.btn) { color: #6a1d0c; }
.class-banner[data-slug="barbarian"] { --cloth: url('../img/theme/fx/class-banner-barbarian.webp'); --hem: 432; --padb: 291; --padx: 0.207; }
.class-banner[data-slug="demon-hunter"] { --cloth: url('../img/theme/fx/class-banner-demon-hunter.webp'); --hem: 361; --padb: 251; --padx: 0.183; --head: #ffd0b8; }
.class-banner[data-slug="monk"] { --cloth: url('../img/theme/fx/class-banner-monk.webp'); --hem: 388; --padb: 259; --padx: 0.164; --head: #ffe7b0; }
.class-banner[data-slug="necromancer"] { --cloth: url('../img/theme/fx/class-banner-necromancer.webp'); --hem: 316; --padb: 226; --padx: 0.140; --head: #eee6c8; --ink-2: #c8c4a4; }
.class-banner[data-slug="witch-doctor"] { --cloth: url('../img/theme/fx/class-banner-witch-doctor.webp'); --hem: 353; --padb: 239; --padx: 0.160; --head: #e6f0c0; --ink-2: #c2d0a8; }
.class-banner[data-slug="wizard"] { --cloth: url('../img/theme/fx/class-banner-wizard.webp'); --hem: 396; --padb: 270; --padx: 0.183; --head: #e4e8ff; --ink-2: #c8c4e8; }

/* the skills under the banner, in an iron frame */
.class-skills {
  position: relative; padding: 18px 26px 26px; border-radius: 3px; color: var(--ink);
  background: radial-gradient(ellipse 80% 30% at 50% 0%, rgba(255, 60, 10, 0.14), transparent 70%), linear-gradient(#1b0a07, #0a0302);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #4d382b, inset 0 0 0 6px #150a07, inset 0 0 0 7px rgba(180, 100, 45, 0.45), inset 0 0 40px rgba(0, 0, 0, 0.8),
    0 0 0 1px #000, 0 0 36px rgba(255, 60, 10, 0.2), 0 18px 50px rgba(0, 0, 0, 0.7);
}
.class-skills h2 { font: 24px/1.1 var(--title); letter-spacing: 0.08em; color: var(--gold-hi); margin: 18px 0 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(200, 140, 70, 0.35); }
.class-skills h2 small { font-size: 15px; color: #b08a5c; }
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.skill { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 3px; color: var(--ink); border: 1px solid transparent; transition: background .15s, border-color .15s; }
.class-skills a.skill { color: var(--ink); }
.skill:hover { background: rgba(255, 120, 40, 0.08); border-color: rgba(200, 140, 70, 0.3); }
.sic {
  --s: 46px; flex: none; width: var(--s); height: var(--s); border-radius: 3px; background-repeat: no-repeat;
  background-size: calc(var(--s) * 10) auto; background-position: calc(var(--x) * var(--s) * -1) calc(var(--y) * var(--s) * -1);
  box-shadow: 0 0 0 1px #3b2410, 0 0 0 2px #b08a4a, 0 2px 6px rgba(0,0,0,0.5);
}
.passive .sic { border-radius: 50%; }
.sbody { display: flex; flex-direction: column; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.sbody b { font: 16px/1.2 var(--title); letter-spacing: 0.04em; color: var(--gold-hi); font-weight: normal; }
.kind { font-style: normal; font: 10.5px/1.4 var(--title); letter-spacing: 0.14em; text-transform: uppercase; color: #c08a50; }
.sd { color: #d8c8b0; margin-top: 2px; }
.flavor { display: block; margin-top: 4px; font-size: 12.5px; font-style: italic; color: #a88a68; quotes: '\201C' '\201D'; }
.runes { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: #b89a78; }
.rn { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.4); }
.rn-a { background: #d33; } .rn-b { background: #d8c237; } .rn-c { background: #2d79d8; } .rn-d { background: #8a3dc7; } .rn-e { background: #3aa54a; }

@media (max-width: 980px) {
  .hero-page { grid-template-columns: 1fr; background-size: auto, auto, 900px auto, auto; }
  .hero-stage canvas { touch-action: pan-y; }
  .hero-stage { position: relative; top: 0; height: 68vh; height: 68svh; min-height: 440px; }
  .class-side { padding: 10px 8px 30px; }
  .class-banner { --cw: min(560px, 84cqw); --hw: 0.065; }
  .stage-bottom { bottom: 54px; }
  .clips button, .opts button { font-size: 11.5px; }
  .home-hero { padding-bottom: 130px; }
  .cta .btn { --w: 230px; }
  .cta .btn.play { --w: 360px; order: -1; }
}
@media (max-width: 760px) {
  .hh-demon { top: 6%; }
  .brazier { display: none; }
  .lead { font-size: 17px; }
  .eyebrow { font-size: 12px; letter-spacing: 0.22em; }
}
@media (max-width: 520px) {
  .cname { font-size: 26px; }
  .skills { grid-template-columns: 1fr; }
  .gender .g { width: 40px; height: 40px; }
  .clips button, .opts button { padding: 1px 1px; font-size: 10px; letter-spacing: 0.04em; border-width: 7px 8px; border-image-width: 7px 8px; min-height: 32px; }
  .clips, .opts { padding: 4px; gap: 2px; }
  #turn { display: none; }                               /* dragging turns the hero on a phone; keep the armour switch */
  .cta .btn { --w: 44vw; }
  .cta .btn.play { --w: 84vw; }
  .class-skills { padding: 14px 12px 20px; }
  .class-banner { --cw: 96cqw; --hw: 0.055; }
  .cb-cloth { padding-left: calc(var(--cw) * (var(--padx) - 0.02)); padding-right: calc(var(--cw) * (var(--padx) - 0.02)); }
  .cb-text { font-size: 14px; }
  .links { flex-wrap: wrap; }
  .cb-text .btn { --w: 210px; }
  .facts { gap: 4px 14px; }
  .facts b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .brazier .flame i { animation: none !important; }
}