/* YUXI: a dark throne-room hero (the key art), then parchment and ink like the game's own pages, a seal-red accent and
   jade-and-gold for the brand. One deliberate look, light text on dark, ink on paper. */
:root {
  --night: #120b08;      /* the hero's ground, from the throne room */
  --paper: #f1e6cf;      /* parchment */
  --paper-2: #e6d6b6;
  --ink: #2a1f16;
  --ink-soft: #5c4a37;
  --seal: #a3261a;       /* the red seal */
  --seal-ink: #fff6ea;
  --gold: #d9a441;
  --jade: #b9d9a8;
  --display: "Cinzel", "Times New Roman", serif;
  --body: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brush: "Ma Shan Zheng", "Kaiti SC", "STKaiti", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--seal); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- hero */
.hero { position: relative; background: var(--night); color: var(--seal-ink); overflow: hidden; }
/* the key art as a band, the whole face in view; it fades into the night where the logo overlaps it */
.hero-art { display: block; position: relative; }
.hero-art img { width: 100%; aspect-ratio: 3840 / 1240; min-height: 230px; object-fit: cover; object-position: 50% 35%; }
.hero-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,11,8,0) 62%, rgba(18,11,8,0.75) 88%, var(--night) 100%); }
.hero-inner { position: relative; width: min(1080px, 100%); margin: -64px auto 0; padding: 0 20px 56px; display: grid; justify-items: center; text-align: center; gap: 10px; }
.logo { margin: 0; width: min(440px, 78vw); filter: drop-shadow(0 6px 20px rgba(0,0,0,0.7)); }
.tagline { font: 600 clamp(22px, 3.2vw, 32px)/1.25 var(--display); margin: 4px 0 0; text-wrap: balance; letter-spacing: 0.01em; }

/* ---- the sign-up form */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; width: min(560px, 100%); }
.signup input[type=email] { min-width: 0; font: inherit; padding: 13px 16px; border: 2px solid var(--gold); background: #fffaf0; color: var(--ink); border-radius: 0; }
.signup button { font: 700 16px var(--body); letter-spacing: 0.02em; padding: 13px 20px; border: 0; background: var(--seal); color: var(--seal-ink); cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.signup button:hover { background: #8a1f15; }
.signup button[disabled] { opacity: 0.6; cursor: default; }
.signup .promise, .signup .status { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.hero .promise { color: #d8c8ad; }
.signup .status:empty { display: none; }
.signup .status.ok { color: var(--jade); font-weight: 600; }
.join .signup .status.ok { color: var(--jade); }
.signup .status.err { color: #ffb4a6; }
.join .signup .status.err { color: #ffb4a6; }
.signup.done input, .signup.done button { display: none; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.discord { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 18px; font-weight: 600; text-decoration: none;
  color: var(--seal-ink); background: #5865f2; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.discord:hover { background: #4752c4; }
.discord svg { width: 22px; height: 22px; flex: none; }

/* ---- the Blender band: the one claim the page makes loudly */
.blender { margin: 0; padding: 18px 20px; text-align: center; background: var(--seal); color: var(--seal-ink);
  font: 600 clamp(17px, 2.2vw, 22px)/1.3 var(--body); letter-spacing: 0.01em; }
.blender b { font: 800 1.15em var(--display); letter-spacing: 0.03em; margin-right: 6px; }

/* ---- the killing blows, caught mid-animation */
.shots { padding-inline: max(20px, calc((100% - 1320px) / 2)) !important; background: var(--paper) center / cover; }
.shots.lit { background-image: url(img/bg-ink.webp); }
.shot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.shot:first-child { grid-column: span 2; grid-row: span 2; }   /* Guan Yu large, the five around him */
.shot:first-child span { font-size: 22px; }
.shot { padding: 0; border: 0; background: none; cursor: zoom-in; display: grid; gap: 6px; text-align: left; font: inherit; color: inherit; }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 5px solid var(--paper-2); box-shadow: 0 8px 22px rgba(42,31,22,0.22);
  transition: transform 0.2s; }
.shot:hover img { transform: scale(1.02); }
.shot span { font: 600 17px var(--display); justify-self: start; padding: 2px 10px; background: rgba(241,230,207,0.92); }   /* (readable over the ink page's burnt edges) */

/* ---- parchment sections */
main > section { padding: 72px max(20px, calc((100% - 1120px) / 2)); content-visibility: auto; contain-intrinsic-size: auto 900px; }   /* full-bleed, for the backgrounds; the content 1120 wide; laid out only when near */
h2 { font: 800 clamp(28px, 4vw, 40px)/1.15 var(--display); margin: 0 0 10px; text-wrap: balance; }
h3 { font: 600 24px/1.2 var(--display); margin: 0 0 8px; }
.lead { color: var(--ink-soft); margin: 0 0 28px; max-width: 62ch; }



.roster { text-align: center; background: var(--paper) center / cover; }
.roster.lit { background-image: url(img/bg-ink2.webp); }
.roster .lead { margin-inline: auto; }
.busts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 18px 10px; }   /* 18 heroes: 2 full rows */
.busts li { display: grid; justify-items: center; gap: 6px; }
.busts img { height: 190px; width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(42,31,22,0.3)); transition: transform 0.2s; }   /* (shrunk to its column whole, never squeezed) */
.busts li:hover img { transform: translateY(-4px) rotate(-2deg); }
.busts span { font: 600 14px var(--body); }
.busts .ch { font: 400 22px/1 var(--brush); color: var(--seal); }

.bosses { color: var(--seal-ink); background: var(--night) center / cover; }
.bosses.lit { background-image: linear-gradient(rgba(18,11,8,0.35), rgba(18,11,8,0.7)), url(img/bg-hall.webp); }   /* (the Steam page background, the throne hall) */
.bosses h2 { width: min(1080px, 100%); margin: 0 auto 24px; }
.splashes { width: min(1080px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.splashes figure { margin: 0; }
.splashes img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.splashes figcaption { font: 600 18px var(--display); text-align: center; padding-top: 8px; color: var(--gold); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tiles button { padding: 0; border: 0; background: none; cursor: zoom-in; display: grid; text-align: left; color: inherit; font: inherit; }
.tiles img { aspect-ratio: 11 / 10; object-fit: cover; width: 100%; border: 4px solid var(--paper-2); }
.tiles span { font-size: 14px; color: var(--ink-soft); padding: 4px 2px 0; }
.tiles.short button:nth-child(n+13) { display: none; }
.more { margin-top: 18px; font: 600 15px var(--body); padding: 10px 18px; border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.more:hover { background: var(--paper-2); }

/* ---- the Lords at their muster and the first troops, on the night */
.lords { background: #1a110c; color: var(--seal-ink); text-align: center; }
.lords h3 { color: var(--gold); margin: 34px 0 14px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trio figure { margin: 0; }
.trio img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 4px solid #3a2a1c; }
.trio figcaption { font: 600 19px var(--display); color: var(--gold); padding-top: 8px; }

/* ---- the sign-up over the Jade Seal's stage, Sima Hui beside it */
.join { text-align: center; display: grid; justify-items: center; position: relative; overflow: hidden; color: var(--seal-ink);
  background: #1a110c center 40% / cover;
  padding-block: 110px !important; }
.join.lit { background-image: linear-gradient(rgba(18,11,8,0.55), rgba(18,11,8,0.88)), url(img/bg-seal.webp); }
.join h2 { text-shadow: 0 3px 14px rgba(0,0,0,0.7); }
.mentor { position: absolute; left: max(10px, calc((100% - 1120px) / 2 - 40px)); bottom: -6px; height: 400px; width: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6)); pointer-events: none; }
.join .signup { margin-bottom: 18px; }
.join .promise { color: #e3d4b8; }

footer { color: #cbb994; text-align: center; padding: 72px 20px 40px; font-size: 14px;
  background: #0b0d1c center 30% / cover; }
footer.lit { background-image: linear-gradient(rgba(8,8,20,0.25), rgba(8,6,10,0.85)), url(img/bg-night.webp); }
footer a { color: var(--gold); }
footer .seal { font: 34px/1 var(--brush); color: var(--seal); margin: 0 0 8px; }

.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1200px, 94vw); }
.lightbox::backdrop { background: rgba(10,6,4,0.88); }
.lightbox img { max-height: 88vh; width: auto; }
.lightbox button { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; font-size: 26px; border: 0; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; }

/* ---- phones */
@media (max-width: 1000px) {
  .busts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mentor { display: none; }   /* (no room beside the form) */
}
@media (max-width: 860px) {
  .shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot:first-child { grid-row: auto; }
  .splashes { gap: 8px; }   /* (three across: two left Cao Cao alone on a row) */
  .splashes figcaption { font-size: 13px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .signup { grid-template-columns: minmax(0, 1fr); }
      .busts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-inner { margin-top: -28px; }
  .busts img { height: 140px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-grid { grid-template-columns: minmax(0, 1fr); }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .shots.lit, .roster.lit { background-image: none; }   /* (on a phone the ink page's burnt edges swallow the names) */
  .shot:first-child { grid-column: auto; }
  main > section { padding-block: 52px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }