/* ── Aetherscend runs its own theme: dark grey marble ground, gold trim,
        crystal blue glass, warm white marble type ── */
body:has(.aet) {
  --ae-ground: #14181c; --ae-line: rgba(201,162,74,0.2);
  --ae-gold: #c9a24a; --ae-gold-hi: #e8ce86;
  --ae-crystal: #7fc7e8;
  --ae-marble: #f4f1ea; --ae-marble-hi: #fbf8f1;
  --footer-from: #1a1f24; --footer-to: var(--ae-ground);
  /* the shared details and requirements in site.css */
  --game-line: var(--ae-line); --game-accent: var(--ae-gold-hi); --game-accent-alt: var(--ae-crystal);
  --game-text-rgb: 244 241 234;
  background: var(--ae-ground); }
.aet { background: var(--ae-ground); color: var(--ae-marble); --lightbox-accent: var(--ae-gold); --shell: 1180px; --gutter: 32px; }
body:has(.aet) ::selection { background: rgba(201,162,74,0.35); }

.aet-shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.aet-sec { position: relative; z-index: 2; padding: var(--space-6) 0; }

/* ── ambient: crystal and gold motes drifting up behind everything ── */
.aet-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* each mote's place, size and timing arrive as custom properties from index.php */
.aet-field i { position: absolute; bottom: -6vh; display: block; border-radius: 50%; opacity: 0;
  left: var(--x); width: var(--s); height: var(--s);
  animation-name: ae-mote; animation-timing-function: linear; animation-iteration-count: infinite;
  animation-duration: var(--t); animation-delay: var(--o); }
.aet-field i.c { background: #d8f1fb; box-shadow: 0 0 9px rgba(127,199,232,0.95); }
.aet-field i.g { background: #f0dca4; box-shadow: 0 0 9px rgba(201,162,74,0.85); }
@keyframes ae-mote {
  0%   { transform: translate3d(0,0,0) scale(0.85); opacity: 0; }
  10%  { opacity: 0.85; }
  80%  { opacity: 0.6; }
  100% { transform: translate3d(var(--dx),-140vh,0) scale(1.2); opacity: 0; }
}
.aet-aura { position: fixed; left: 50%; top: -16vh; width: min(1200px,120vw); height: 70vh;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center,rgba(127,199,232,0.14),rgba(127,199,232,0.04) 46%,transparent 72%);
  animation: ae-breathe 18s ease-in-out infinite; }
@keyframes ae-breathe { 0%,100% { opacity: 0.32; transform: translateX(-50%) scale(1); } 50% { opacity: 0.62; transform: translateX(-50%) scale(1.08); } }

/* ── hero ── */
.aet-hero { position: relative; z-index: 2; min-height: min(80vh,780px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); text-align: center; padding: 76px var(--gutter) var(--space-6); overflow: hidden; }
.aet-hero__art { position: absolute; inset: 0;
  background: url("../../img/aetherscend-hero-2560.webp") center 32%/cover no-repeat; }   /* relative to this sheet, so it needs no $BASE now the CSS is not PHP */
.aet-hero__wash { position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(20,24,28,0.55) 0%,rgba(20,24,28,0.58) 55%,var(--ae-ground) 100%); }
.aet-hero__in { position: relative; max-width: 960px; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.aet-hero__title { margin: 0; width: 100%; }
.aet-hero__in img { display: block; width: min(820px,100%); height: auto; margin-inline: auto; filter: drop-shadow(0 22px 60px rgba(0,0,0,0.75)); }
.aet-tag { margin: 0; font-family: var(--font); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: clamp(16px,2.5vw,29px); line-height: 1.25;
  color: var(--ae-marble); text-shadow: 0 4px 24px rgba(0,0,0,0.8); }

/* ── shared marble panel with gold trim ── */
.ae-plate { padding: 1px; background: linear-gradient(160deg,var(--ae-gold-hi),rgba(201,162,74,0.25) 34%,rgba(201,162,74,0.08) 62%,var(--ae-gold) 100%);
  box-shadow: 0 18px 40px rgba(4,8,12,0.5); }
.ae-plate__in { position: relative; height: 100%; overflow: hidden;
  background: linear-gradient(165deg,rgba(44,50,57,0.95) 0%,rgba(28,33,38,0.96) 46%,rgba(20,24,28,0.97) 100%); }
.ae-plate__in::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0)); }

/* ── trailer ── */
.aet-trailer { position: relative; aspect-ratio: 16/9; border: 1px solid rgba(201,162,74,0.4);
  background: rgba(28,33,38,0.72); box-shadow: 0 40px 110px rgba(4,8,12,0.7), inset 0 1px 0 rgba(255,255,255,0.08); }
.aet-trailer video, .aet-trailer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aet-trailer__btn { position: absolute; inset: 0; width: 100%; height: 100%; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse at center,rgba(20,24,28,0.08),rgba(20,24,28,0.7));
  border: 0; cursor: pointer; color: var(--ae-marble); font: inherit; }
.aet-trailer__ring { width: 96px; height: 96px; border: 1.5px solid rgba(201,162,74,0.85); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(20,24,28,0.5);
  animation: ae-ring 3.4s ease-out infinite; }
@keyframes ae-ring {
  0%,100% { box-shadow: 0 0 0 0 rgba(127,199,232,0.4), 0 0 50px rgba(4,8,12,0.6); }
  55%     { box-shadow: 0 0 0 18px rgba(127,199,232,0), 0 0 50px rgba(4,8,12,0.6); }
}
.aet-trailer__btn span:last-child { font-family: var(--font); font-weight: 600;
  font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; }
/* Standing in for the trailer until the cut lands: the hero still under a
   scrim with the wordmark-styled label. The __btn/__ring rules above are
   left in place so dropping the video back in needs no CSS work. */
.aet-trailer__soon { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; pointer-events: none;
  background: radial-gradient(ellipse at center,rgba(20,24,28,0.25),rgba(20,24,28,0.78)); }
.aet-trailer__soon span { font-family: var(--font); font-weight: 600;
  font-size: clamp(20px,3.4vw,40px); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ae-marble-hi); text-shadow: 0 2px 30px rgba(4,8,12,0.85);
  padding-left: 0.3em; }   /* offsets the trailing letter-space so it reads centred */

/* ── buy card + description ── */
.aet-buyrow { display: grid; grid-template-columns: minmax(260px,340px) 1fr;
  gap: clamp(16px,2.2vw,26px); align-items: center; margin-bottom: clamp(16px,2.2vw,26px); }
/* no store page yet: the price box is not rendered, so the lede takes the row */
/* with no buy box, the lede stands alone and is centred */
.aet-buyrow--solo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.aet-buyrow--solo .aet-lede { max-width: 70ch; }
.aet-buy .ae-plate__in { padding: var(--space-5) var(--space-5) 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.aet-buy b { font-size: clamp(30px,4.4vw,42px); line-height: 1; letter-spacing: 0.01em;
  color: var(--ae-marble-hi); white-space: nowrap; }
.aet-buy small { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(244,241,234,0.6); }
.aet-lede { margin: 0; font-size: clamp(17px,1.9vw,21px); line-height: var(--lh-copy); color: rgba(244,241,234,0.94); }

.ae-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px;
  padding: 0 34px; background: linear-gradient(180deg,var(--ae-gold-hi),var(--ae-gold));
  color: #12181f; font-family: var(--font); font-weight: 600; font-size: 17px;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  border: 1px solid rgba(232,206,134,0.75);
  box-shadow: 0 14px 40px rgba(4,8,12,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  position: relative; overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) ease,
              filter var(--dur-base) ease, border-color var(--dur-base) ease; }
/* light sweeps across on hover, as the shared .btn does on every other page */
.ae-btn::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.45),rgba(255,255,255,0));
  transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); }
.ae-btn:is(:hover, :focus-visible) { transform: scale(1.06); filter: brightness(1.08);
  border-color: var(--ae-gold-hi);
  box-shadow: 0 18px 44px rgba(201,162,74,0.34), inset 0 1px 0 rgba(255,255,255,0.45); }
.ae-btn:is(:hover, :focus-visible)::after { transform: translateX(100%); }
.ae-btn:active { transform: scale(0.96); filter: brightness(0.93);
  box-shadow: 0 8px 20px rgba(4,8,12,0.5), inset 0 1px 0 rgba(255,255,255,0.35); }
.ae-btn:focus-visible { outline: 2px solid var(--ae-gold-hi); outline-offset: 3px; }
.ae-btn--block { width: 100%; }

/* ── feature cards ── */
.aet-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.2vw,26px); }
/* Same hover response as .aet-shot: the outline brightens, the card lifts and
   picks up the crystal glow.
   Declared on .ae-card__in rather than .ae-card on purpose: motion.js writes an
   inline transform:none onto every [data-reveal] element once it scrolls into
   view, and an inline style outranks any stylesheet rule, so a lift declared on
   the card itself is silently swallowed. The inner div carries no data-reveal. */
.ae-card:hover .ae-card__in { transform: translateY(-3px) scale(1.012);
  border-color: rgba(232,206,134,0.85);
  box-shadow: 0 22px 52px rgba(4,8,12,0.62), 0 0 26px rgba(127,199,232,0.18); }
.ae-card .ae-card__in { position: relative; height: 100%; overflow: hidden; padding: 28px var(--space-5) var(--space-6);
  border: 1px solid rgba(201,162,74,0.34);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) ease,
              border-color var(--dur-base) ease;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(165deg,rgba(44,50,57,0.95) 0%,rgba(28,33,38,0.96) 46%,rgba(20,24,28,0.97) 100%); }
.ae-card__in::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.3),rgba(255,255,255,0)); }
.ae-card__head { position: relative; display: flex; align-items: center; gap: 16px; }
.ae-card__icon { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg,rgba(127,199,232,0.24),rgba(127,199,232,0.06));
  border: 1px solid rgba(201,162,74,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 20px rgba(127,199,232,0.18); }
.ae-card__icon svg { width: 24px; height: 24px; }
.ae-card h3 { flex: 1; margin: 0; font-family: var(--font); font-size: 18px; font-weight: 700;
  line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ae-marble-hi); }
.ae-card p { position: relative; margin: 0; font-size: 14px; line-height: var(--lh-copy); color: rgba(238,240,236,0.66); }

/* ── screenshots: each spans --span of the six columns, set per shot in index.php ── */
.aet-shot { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 16/9;
  grid-column: span var(--span, 2);
  border: 1px solid rgba(201,162,74,0.34); background: rgba(28,33,38,0.72); overflow: hidden;
  cursor: zoom-in; transition: border-color var(--dur-base) ease, transform var(--dur-base) var(--ease); }
.aet-shot:is(:hover, :focus-visible) { border-color: rgba(232,206,134,0.85); transform: translateY(-3px);
  box-shadow: 0 0 26px rgba(127,199,232,0.18); }
.aet-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aet-shots { display: grid; grid-template-columns: repeat(6,1fr); gap: clamp(16px,2.2vw,26px); }

/* ── details, requirements, faq ── */
/* Details takes only the width its rows need and the requirements get the rest; this
   replaces the shared .game-details grid on the same element. Every requirement stays on
   one line: the two tiers sit side by side only when both fit, and in a tier narrower than
   the longest line (about 25em) the text shrinks a little instead of wrapping. */
.aet-two { display: grid; --aet-gap: var(--space-6);
  grid-template-columns: max-content minmax(0,1fr);
  gap: var(--aet-gap); align-items: start; }
.aet .reqs { grid-template-columns: repeat(auto-fit, minmax(min(340px,100%),1fr)); }
.aet .reqs > div { container-type: inline-size; }
.aet .reqs__item { white-space: nowrap; font-size: 14px; font-size: min(14px, 4cqi); }
/* headings here are smaller and lighter than the other game pages', the shared
   details headings included */
.aet-h, .aet .game-details__title { margin: 0 0 14px; font-family: var(--font); font-weight: 600; font-size: var(--fs-heading-3);
  letter-spacing: 0.08em; text-transform: uppercase; color: inherit; }

.aet-faqs { border-top: 1px solid var(--ae-line); }
.ae-faq { border-bottom: 1px solid var(--ae-line); }
.ae-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-family: var(--font); font-weight: 600; font-size: 18px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ae-marble);
  transition: color var(--dur-fast) ease; }
.ae-faq summary::-webkit-details-marker { display: none; }
.ae-faq summary:is(:hover, :focus-visible) { color: var(--ae-crystal); }
.ae-faq summary i { flex: none; position: relative; width: 14px; height: 14px; }
.ae-faq summary i::before, .ae-faq summary i::after { content: ""; position: absolute; background: var(--ae-gold-hi);
  transition: transform 220ms var(--ease); }
.ae-faq summary i::before { left: 0; right: 0; top: 6px; height: 2px; }
.ae-faq summary i::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.ae-faq[open] summary i::after { transform: scaleY(0); }
/* no max-width: the answer runs the full width of the row, finishing on the
   same 4px inset as the +/- marker in the summary above it */
.ae-faq p { margin: 0; padding: 0 4px var(--space-5); font-size: 15px; line-height: var(--lh-copy); color: rgba(244,241,234,0.7); }

.aet-legal { padding: var(--space-5) 0 0; border-top: 1px solid rgba(201,162,74,0.16);
  display: flex; flex-direction: column; gap: 7px; }
.aet-legal span { font-size: 11px; letter-spacing: 0.04em; color: rgba(244,241,234,0.55); }

@media (prefers-reduced-motion: reduce) {
  .aet-field i, .aet-aura, .aet-trailer__ring { animation: none; }
  .aet-aura { opacity: 0.45; }   /* its resting brightness rather than the animation's peak */
}

@media (max-width: 1080px) { .aet-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 820px) {
  .aet { --gutter: 20px; }
  .aet-cards, .aet-buyrow, .aet-two { grid-template-columns: 1fr; }
  .aet-two { --aet-gap: 34px; }   /* stacked: 10px is a column gap, not a row gap */
  .aet-shots { grid-template-columns: 1fr; }
  .aet-shot { grid-column: auto; }
  .aet-hero { padding: 56px var(--gutter) var(--space-6); }
}