/* Separate refined demo: original supplied wordmark, same title scale. */
h1{letter-spacing:normal;line-height:0;width:5.2em;max-width:none}
.event-wordmark{display:block;width:100%;height:auto}
.hero-copy{min-width:0}
.header{height:134px}
.bank-mark{transform:translateY(15px)}
.rockstar-logo{width:204px;clip-path:none}
.hero-action-slot{min-height:66px;padding-top:20px}
.hero-action-slot .complete-action{padding:0}
.announcement-button{border-radius:7px;min-height:44px;min-width:168px;padding:14px 24px}
.page-shell{padding-bottom:32px}
.frame-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:46px;padding-top:16px;position:relative}
.frame-status{position:static;display:grid;flex:none}
.frame-edition{position:static;font-size:6px;margin-left:auto;line-height:1.3}
.frame-tail{position:static;width:30px;height:18px;flex:none}
.poster-details .detail-cross{top:auto;bottom:auto}
.poster-details .cross-one,.poster-details .cross-three{top:12px}
.poster-details .cross-two,.poster-details .cross-four{bottom:12px}
.detail-squares{top:12px}
.corner-top{top:8px;left:8px}.corner-bottom{bottom:8px;right:8px}
.edge-left{left:8px}.edge-right{right:8px}
@media(min-width:1001px){
 .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;min-height:460px}
 .digital-art{height:460px;max-width:560px}
}
@media(min-width:701px) and (max-width:1000px){
 .header{height:120px}.rockstar-logo{width:180px}
 .hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px}
 h1{font-size:76px}
}
@media(max-width:700px){
 .header{height:94px}.page-shell{padding-bottom:28px}.rockstar-logo{width:130px}
 h1{width:min(5.2em,100%)}
 .hero-action-slot{min-height:58px;padding-top:14px}
 .announcement-button{width:100%;min-height:42px;padding:13px 20px}
 .frame-footer{min-height:35px;padding-top:10px;gap:14px}
 .frame-status{display:grid;grid-template-columns:7px 49px;gap:4px 6px}
 .frame-edition{font-size:5px}.frame-tail{width:24px;height:15px}
 .poster-details .cross-one,.poster-details .cross-three{top:9px}
 .poster-details .cross-two,.poster-details .cross-four{bottom:9px}
 .detail-squares{top:10px}
}

/* Only the primary action is rounded. Keys retain their supplied PNG art. */
.game-chips li{border-radius:0}
.key-a{top:auto;right:auto;bottom:6%;left:9%}
.key-s{top:auto;left:auto;bottom:12%;right:0}
.key-d{bottom:auto;left:auto;top:47%;right:0}
@media(min-width:701px) and (max-width:1000px){.key-a{left:0}}
@media(max-width:700px){
 .bank-mark{transform:translateY(10px)}
 .key-a{top:auto;right:auto;bottom:10%;left:3%}
 .key-s{top:auto;left:auto;bottom:7%;right:1%}
 .key-d{bottom:auto;left:auto;top:40%;right:0}
}

/* One spacing token keeps title, reveal group and action equally separated. */
.header{height:146px}
.bank-mark{transform:translateY(23px)}
.hero-copy{--copy-gap:40px;display:flex;flex-direction:column;gap:var(--copy-gap);padding:42px 0 0}
.hero-copy .game-reveals{margin:0;min-height:34px}
.hero-copy .hero-action-slot{padding:0;min-height:44px}
.game-chips li.is-unlocked{animation:chip-appear .45s ease both}
@keyframes chip-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.digital-art.is-entering .case-canvas{animation:none}
@media(min-width:701px) and (max-width:1000px){.header{height:132px}.hero-copy{--copy-gap:32px;padding-top:32px}}
@media(max-width:700px){
 .header{height:108px}.bank-mark{transform:translateY(18px)}
 .hero{padding-top:26px}
 .hero-copy{--copy-gap:30px;padding:0}
 .hero-copy .game-reveals{min-height:63px}
 .hero-copy .hero-action-slot{min-height:42px}
 .game-chips{gap:8px}
 .digital-art{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.game-chips li.is-unlocked{animation:none}}

.header-code{top:2px;line-height:10px}
@media(max-width:700px){.header-code{top:4px;line-height:8px}}

/* Keep mobile telemetry and its pixel marks in separate horizontal slots. */
@media(max-width:700px){
 .poster-details .detail-squares{display:none}
 .header-digital{width:116px;flex:none}
 .header-code{left:0;right:32px;justify-content:space-between;gap:7px}
 .header-pixels{right:14px}
}

/* Center the Alfa mark in the page while preserving the top-right telemetry. */
.header{position:relative}
.header .bank-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + 23px))}
@media(max-width:700px){
 .header .bank-mark{transform:translate(-50%,calc(-50% + 18px))}
 .header-cross{display:none}
}

/* One aligned row for both pairs of pixels and the telemetry labels. */
.poster-details .detail-squares{display:none}
.header-digital{width:166px}
.header-telemetry{position:absolute;right:0;top:0;height:12px;display:flex;align-items:center;gap:10px;white-space:nowrap}
.header-telemetry .header-code{position:static;display:flex;gap:10px;line-height:10px}
.header-telemetry .header-pixels{position:relative;inset:auto;display:block;flex:0 0 20px;width:20px;height:8px;background:none;box-shadow:none}
.header-telemetry .header-pixels:before,.header-telemetry .header-pixels:after{content:'';position:absolute;top:0;width:8px;height:8px;box-sizing:border-box}
.header-telemetry .header-pixels:before{left:0;background:var(--red)}
.header-telemetry .header-pixels:after{right:0;border:1px solid #9b2d24}
@media(max-width:700px){
 .header-digital{width:144px}
 .header-telemetry{gap:8px}
 .header-telemetry .header-code{gap:8px;line-height:8px}
 .header-telemetry .header-pixels{flex-basis:18px;width:18px;height:6px}
 .header-telemetry .header-pixels:before,.header-telemetry .header-pixels:after{width:6px;height:6px}
}