/* V2.0 — cinematic trailer and accessible media gallery.
   All imagery is sourced from studio-supplied design assets. */
:root{--gold-soft:#fff0c9;--focus:#f7d495}
.hero{min-height:680px}
.hero::before{background:linear-gradient(90deg,#070b13f7 0%,#080e18e8 29%,#090d15a0 58%,#090d1544 100%),url('/assets/screenshots/world-lore.webp') center/cover no-repeat}
.hero h1{text-wrap:balance;text-shadow:0 4px 30px #06091399}
.hero .lead{color:#e1e4ec;max-width:570px;text-wrap:pretty}
.hero-tag{box-shadow:0 0 32px #c29a4233}
.btn.primary{box-shadow:0 8px 32px #d39d5d30}
.section-title p{text-wrap:pretty}
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.trailer-section{position:relative;padding:92px 0 102px;overflow:hidden;background:linear-gradient(180deg,#090d15,#131b29 50%,#090d15)}
.trailer-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 68% 20%,#b68d4e15,transparent 55%)}
.trailer-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:26px}
.trailer-heading h2{font-size:clamp(30px,4vw,50px);margin:11px 0 12px;line-height:1.16}
.trailer-heading p{max-width:640px;color:#b7bfce;font-size:14px}
.trailer-runtime{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#e3c38f;border:1px solid #dfc08c5c;background:#0a101d;border-radius:40px;font-size:12px;padding:8px 14px;white-space:nowrap}
.trailer-frame{position:relative;border-radius:12px;overflow:hidden;background:#111724;border:1px solid #e9c69055;box-shadow:0 28px 85px #0009,0 0 0 5px #cbaa7533;aspect-ratio:16 / 9}
.trailer-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#05090fdc 0%,transparent 45%,#03081170 100%)}
.trailer-frame>img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.85) contrast(1.07)}
.trailer-frame .trailer-frame-label{position:absolute;z-index:1;top:24px;left:28px;background:#0d111ad9;border:1px solid #dfc18e88;border-radius:99px;padding:7px 14px;color:#f0d9aa;font-size:11px;letter-spacing:.1em;font-weight:800}
.trailer-frame .trailer-bottom{position:absolute;z-index:1;bottom:25px;left:29px;right:29px;display:flex;gap:15px;align-items:end;justify-content:space-between}
.trailer-frame .trailer-bottom strong{font-size:clamp(18px,2.8vw,32px);display:block;line-height:1.2}
.trailer-frame .trailer-bottom span{font-size:12px;color:#d4dae6;display:block;margin-top:7px}
.trailer-play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:94px;height:94px;display:flex;align-items:center;justify-content:center;border:1px solid #f0cc84;border-radius:50%;background:linear-gradient(135deg,#f5d797,#c28d50);box-shadow:0 0 0 14px #e4bd7826,0 14px 55px #05080ed1;color:#0e111a;font-size:34px;padding-left:8px;transition:transform .2s,box-shadow .2s}
.trailer-play:not(:disabled):hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 0 18px #e4bd7835,0 14px 55px #05080ed1}
.trailer-play:disabled{cursor:not-allowed;filter:saturate(.4);opacity:.78}
.trailer-status{display:inline-flex;align-items:center;gap:8px;padding-top:18px;color:#aeb8c7;font-size:12px;min-height:48px}
.trailer-status::before{content:"";width:6px;height:6px;border-radius:100%;background:#e5bd7b}
.trailer-section .trailer-subline{font-size:12px;color:#8591a2;max-width:770px}
.media-dialog[hidden],.gallery-dialog[hidden]{display:none!important}
.media-dialog,.gallery-dialog{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#05070cdd;backdrop-filter:blur(10px);padding:24px}
.media-dialog__surface,.gallery-dialog__surface{position:relative;width:min(100%,1040px);border:1px solid #efce934a;background:#080d16;border-radius:12px;box-shadow:0 20px 90px #000;overflow:hidden}
.media-dialog__top,.gallery-dialog__top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:20px;color:#f3e3c8;font-size:13px;font-weight:700}
.media-dialog__close,.gallery-dialog__close{color:#f3e3c8;background:#17202f;border:1px solid #efd49a55;width:38px;height:38px;border-radius:6px;font-size:24px;line-height:1}
.media-dialog video{display:block;width:100%;height:auto;max-height:min(72vh,680px);aspect-ratio:720/408;background:#05080e}
.media-dialog__footer{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-size:11px;color:#bfc3ca;gap:12px}
.media-dialog__footer a{color:var(--gold)}
.dialog-open{overflow:hidden}
.gallery-visual{position:relative}
.gallery-zoom{position:absolute;z-index:2;inset:0;width:100%;border:0;background:transparent;color:transparent;text-indent:-99999px}
.gallery-zoom::after{content:"↗";position:absolute;right:12px;bottom:12px;text-indent:0;display:grid;place-items:center;width:35px;height:35px;background:#080c15cc;color:#e6c48b;border:1px solid #e6c48b66;border-radius:50%;font-size:19px;opacity:.9}
.gallery-zoom:hover::after,.gallery-zoom:focus-visible::after{background:#e6c48b;color:#0b111b}
.gallery-dialog__visual{display:grid;place-items:center;padding:0 15px 15px;max-height:78vh}
.gallery-dialog__visual img{max-width:100%;max-height:72vh;object-fit:contain;border-radius:4px}
.gallery-dialog__caption{padding:0 18px 17px;color:#c8cdda;font-size:12px}
@media(max-width:700px){.hero{min-height:640px}.hero::before{background:linear-gradient(90deg,#070b13e9,#070b13a3),url('/assets/screenshots/world-lore.webp') 56% center/cover no-repeat}.trailer-section{padding:68px 0 74px}.trailer-heading{display:block}.trailer-heading h2{font-size:32px}.trailer-runtime{margin-top:20px;display:inline-block}.trailer-frame{aspect-ratio:16/10}.trailer-frame .trailer-frame-label{top:12px;left:12px;padding:4px 9px;font-size:9px}.trailer-frame .trailer-bottom{bottom:11px;left:13px;right:13px}.trailer-frame .trailer-bottom strong{font-size:15px}.trailer-frame .trailer-bottom span{font-size:10px;margin-top:2px}.trailer-play{width:62px;height:62px;font-size:22px;box-shadow:0 0 0 8px #e4bd7826}.media-dialog,.gallery-dialog{padding:10px}.media-dialog__top,.gallery-dialog__top{font-size:12px;padding:10px}.media-dialog__footer{font-size:10px;padding:10px;flex-wrap:wrap}.gallery-dialog__visual{padding:0 8px 8px}}
@media(prefers-reduced-motion:reduce){.trailer-play{transition:none}}

/* Curated home gallery: three strong images, all seven remain in the game detail page. */
@media(min-width:1000px){.showcase-grid--featured{grid-template-columns:repeat(3,minmax(0,1fr))}.showcase-grid--featured .gallery-card figcaption{min-height:91px}}
@media(min-width:701px) and (max-width:999px){.showcase-grid--featured{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.showcase-grid--featured{grid-template-columns:1fr}}