/* The published MVP is a playable example, not an eagerly loaded game. */
.mvp-live { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 3vw, 48px); align-items: center; margin-top: 72px; padding: clamp(24px, 3vw, 44px); color: #fff5e8; background: #392235; border: 1px solid #bb8195; border-radius: 4px; box-shadow: 0 16px 36px #281b2624; }
.mvp-live .eyebrow { color: #ffd071; margin-bottom: 16px; }
.mvp-live h3 { max-width: 14ch; color: #fff5e8; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12; }
.mvp-live-copy > p:not(.eyebrow) { max-width: 43ch; margin-top: 20px; color: #e4cbd1; font-size: 15px; line-height: 1.7; }
.mvp-live .mvp-live-action { margin-top: 28px; background: #ffb854; border-color: #ffb854; color: #452337; }
.mvp-live .mvp-live-action:hover { background: #ffd071; }
.mvp-live-copy .text-link { display: flex; width: fit-content; margin-top: 18px; color: #ffd071; }
.mvp-live-copy .text-link:hover { color: #fff5e8; }
.mvp-live-screen { min-width: 0; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #65b9e4; border-radius: 4px; box-shadow: 0 4px 0 #190d18; }
.mvp-live-poster { position: absolute; inset: 0; display: block; overflow: hidden; }
.mvp-live-poster[hidden], .mvp-live-player[hidden] { display: none; }
.mvp-live-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #10304b1a 18%, #13244c00 55%, #10172a77 100%); pointer-events: none; }
.mvp-live-landscape { width: 100%; height: 100%; object-fit: cover; }
.mvp-live-logo { position: absolute; z-index: 1; width: clamp(130px, 31%, 260px); max-height: 57%; object-fit: contain; left: 50%; top: 43%; transform: translate(-50%, -50%); filter: drop-shadow(0 9px 13px #13244c66); }
.mvp-live-play { position: absolute; z-index: 2; left: 50%; bottom: 9%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 11px 19px; background: #ffb854; color: #452337; font: 700 14px/1.25 "Inter", sans-serif; border-radius: 4px; box-shadow: 0 4px 0 #452337; transition: transform 180ms ease, background 180ms ease; }
.mvp-live-poster:hover .mvp-live-play { transform: translate(-50%, -3px); background: #ffd071; }
.mvp-live-player { position: absolute; inset: 0; background: #163755; }
.mvp-live-player iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .mvp-live { grid-template-columns: minmax(0, 1fr); gap: 28px; } .mvp-live h3 { max-width: none; } }
@media (max-width: 600px) { .mvp-live { margin-top: 56px; padding: 20px; } .mvp-live-screen { aspect-ratio: 1.24; } .mvp-live-landscape { object-position: 50% 50%; } .mvp-live-logo { width: 46%; } .mvp-live-play { bottom: 8%; } .mvp-live .mvp-live-action { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .mvp-live-play { transition: none; } }