/* Native MVP compositions: independent artwork, typography, crest and frame. */
.mvp-highlights { padding: 64px 0; scroll-margin-top: 100px; background: #080807; }
.mvp-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:32px; }
.mvp-heading h2 { margin:0 0 8px; color:#f7edd6; font:600 clamp(28px,3vw,42px)/1.15 'Fraunces',serif; }
.mvp-heading p { margin:0; color:#b6b1a4; font-size:14px; }
.mvp-season-mark { font-size:10px; letter-spacing:2px; color:#d4b364; white-space:nowrap; }
.mvp-timeline { display:grid; gap:28px; }
.mvp-feature { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) minmax(230px,.85fr); align-items:center; min-width:0; border:1px solid #6c552a; border-radius:16px; overflow:hidden; background:radial-gradient(ellipse at 35% 100%,#33200c 0,transparent 57%),#0f0e0b; }
.mvp-poster { position:relative; isolation:isolate; height:450px; overflow:hidden; background:#0a0b09; }
.mvp-poster::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:2; background:linear-gradient(0deg,#100d06 0%,transparent 35%),linear-gradient(90deg,#100c06 0,transparent 22%); box-shadow:inset 0 0 45px #100a04; }
.mvp-art { position:absolute; inset:0; }
.mvp-art-hero { position:absolute; max-width:none; width:78%; height:100%; object-fit:cover; }
.mvp-art-hero--1 { left:1%; z-index:1; object-position:53% 50%; clip-path:polygon(0 0,95% 0,70% 100%,0 100%); }
.mvp-art-hero--2 { right:-14%; object-position:58% 50%; }
.mvp-feature--1 .mvp-art-hero--1 { object-position:74% 50%; }
.mvp-feature--2 .mvp-art-hero--1 { object-position:48% 50%; }
.mvp-feature--2 .mvp-art-hero--2 { object-position:65% 50%; }
.mvp-feature--3 .mvp-art-hero--2 { object-position:39% 50%; }
.mvp-feature--4 .mvp-art-hero--1 { object-position:48% 50%; }
.mvp-feature--4 .mvp-art-hero--2 { object-position:62% 50%; }
.mvp-lettering { position:absolute; z-index:3; top:26px; left:12px; writing-mode:vertical-rl; transform:rotate(180deg); color:#f1ff16; font:900 67px/.9 'Plus Jakarta Sans',sans-serif; letter-spacing:-5px; text-shadow:0 0 18px #cdd70088; }
.mvp-poster-date { position:absolute; top:18px; right:16px; z-index:3; padding:5px 10px; color:#fff1c5; background:#090806d9; border:1px solid #b48b45; font-size:12px; font-weight:700; }
.mvp-nameplate { position:absolute; z-index:4; left:18px; right:18px; bottom:22px; min-height:78px; display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid #d3a343; border-radius:10px; background:linear-gradient(115deg,#100e09ed,#392509da); box-shadow:0 -1px #ffe0a0,0 8px 30px #000a; }
.mvp-nameplate::before { content:'◆'; position:absolute; color:#f4cd6e; font-size:18px; top:-17px; left:calc(50% - 9px); text-shadow:0 0 12px #f7a922; }
.mvp-team-logo { width:56px; height:56px; object-fit:contain; flex:none; }
.mvp-nameplate div { min-width:0; }
.mvp-nameplate span { display:block; font-size:11px; color:#dccda9; }
.mvp-nameplate .mvp-player-name { color:#fff9e9; font-size:clamp(18px,2vw,26px); font-weight:800; line-height:1.3; overflow-wrap:anywhere; }
.mvp-story { padding:28px 20px 28px 26px; min-width:0; }
.mvp-date { display:block; font-size:11px; font-weight:800; letter-spacing:1.2px; color:#e6bf61; }
.mvp-story h3 { font:600 clamp(26px,3vw,38px)/1.1 'Fraunces',serif; color:#fff2d3; margin:16px 0 10px; overflow-wrap:anywhere; }
.mvp-team-name { color:#ccc4b6; font-size:11px; line-height:1.6; letter-spacing:1px; margin:0; }
.mvp-story-rule { height:1px; width:48px; margin:26px 0; background:#b99547; }
.mvp-heroes-label { font-size:11px; color:#a8a08f; margin:0 0 7px; }
.mvp-heroes-names { color:#f0dab1; font-size:14px; font-weight:600; margin:0; }
.mvp-watch-note { margin:32px 0 0; color:#b6af9f; font-size:12px; }
.mvp-video { min-width:0; margin:24px 24px 24px 0; text-align:center; }
.mvp-video-screen { position:relative; width:100%; height:340px; overflow:hidden; background:#050504; border:1px solid #685333; border-radius:8px; }
.mvp-play { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; width:100%; height:100%; color:#fff4d5; text-decoration:none; isolation:isolate; }
.mvp-play img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.mvp-play::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(#0004,#0009); }
.mvp-play-icon { display:grid; place-items:center; padding-left:4px; width:62px; height:62px; border-radius:50%; color:#16110a; background:#edc565; box-shadow:0 0 0 8px #e8c45c22; font-size:23px; transition:transform .2s; }
.mvp-play-text { color:#fff; font-size:13px; font-weight:800; text-shadow:0 1px 4px #000; }
.mvp-play:hover .mvp-play-icon { transform:scale(1.08); }
.mvp-play:focus-visible { outline:3px solid #f4db91; outline-offset:-5px; }
.mvp-video-caption { display:block; margin-top:12px; font-size:11px; color:#afa796; }
.mvp-video iframe { width:100%; height:100%; border:0; background:#000; }
.mvp-video.is-playing .mvp-play { position:absolute; bottom:0; right:0; width:auto; height:auto; padding:7px 10px; background:#131008; z-index:2; font-size:11px; }
.mvp-video.is-playing .mvp-play::before { display:none; }
.mvp-video.is-playing .mvp-video-screen { padding-bottom:30px; }
.gp-tier + .gp-tier { margin-top:48px; }
.gp-tier--deidades .gp-cards-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.gp-tier .gp-section-label { font-size:22px; }
@media(max-width:1050px) {
  .mvp-feature { grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(210px,.9fr); }
  .mvp-poster { height:410px; }
  .mvp-story { padding:20px 15px; }
  .mvp-video { margin-right:15px; }
  .mvp-video-screen { height:310px; }
  .mvp-nameplate { left:10px; right:10px; padding:10px; }
}
@media(max-width:760px) {
  .mvp-feature { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .mvp-poster { grid-row:span 2; height:480px; }
  .mvp-story { padding:20px; }
  .mvp-story h3 { margin:8px 0; font-size:27px; }
  .mvp-story-rule,.mvp-watch-note { display:none; }
  .mvp-heroes-label { margin-top:12px; }
  .mvp-video { margin:0 20px 20px; }
  .mvp-video-screen { height:260px; }
  .mvp-season-mark { display:none; }
  .gp-tier--deidades .gp-cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:540px) {
  .mvp-highlights { padding:36px 0; }
  .mvp-highlights .container { padding-left:16px; padding-right:16px; }
  .mvp-feature { display:block; }
  .mvp-poster { height:410px; }
  .mvp-story { padding:22px 20px 18px; }
  .mvp-story h3 { font-size:32px; }
  .mvp-story .mvp-team-name { margin-bottom:12px; }
  .mvp-heroes-label,.mvp-heroes-names { display:inline; font-size:12px; }
  .mvp-heroes-label::after { content:': '; }
  .mvp-video-screen { height:300px; }
  .mvp-nameplate .mvp-player-name { font-size:24px; }
  .gp-tier--deidades .gp-cards-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .mvp-play-icon { transition:none; } }
