.rb-overview-hero { position: relative; min-height: min(790px, calc(100svh - var(--ttg-nav-height, 69px) - 52px)); display: grid; align-items: end; overflow: hidden; padding: 92px 0 32px; }
.rb-overview-hero > picture,
.rb-overview-hero > picture img { position: absolute; inset: -1%; width: 102%; height: 102%; }
.rb-overview-hero > picture img { display: block; object-fit: cover; filter: saturate(1.08) contrast(1.08) brightness(.59); animation: rb-hero-breathe 14s ease-in-out infinite alternate; }
.rb-overview-hero:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,15,.96) 0%, rgba(7,10,15,.69) 47%, rgba(7,10,15,.18) 100%), linear-gradient(0deg, #0a0c12 0%, transparent 42%); }
.rb-overview-hero .wrap { position: relative; z-index: 1; width: 100%; }
.rb-overview-copy { max-width: 780px; padding-bottom: 70px; }
.rb-overview-copy .mono { display: block; margin-bottom: 18px; }
.rb-overview-copy h1 { margin: 0; font-size: clamp(64px, 11vw, 150px); line-height: .8; letter-spacing: -.075em; font-weight: 900; text-shadow: 0 22px 70px rgba(0,0,0,.55); }
.rb-overview-copy p { max-width: 660px; margin: 27px 0 0; color: rgba(244,242,238,.79); font-size: 20px; line-height: 1.58; text-wrap: pretty; }
.rb-overview-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rb-overview-facts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 860px; margin-left: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); gap: 1px; box-shadow: 0 18px 40px rgba(0,0,0,.24); }
.rb-overview-facts > span { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: rgba(14,14,16,.82); backdrop-filter: blur(12px); }
.rb-overview-facts b { font-size: 32px; line-height: 1; }
.rb-overview-facts i { color: var(--muted); font: normal 10px/1.3 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.rb-loop-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
.rb-loop-steps { display: grid; gap: 0; }
.rb-loop-steps article { display: grid; grid-template-columns: 60px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); transition: transform .25s ease; }
.rb-loop-steps article:hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.rb-loop-steps b { color: var(--accent); font: 700 16px 'IBM Plex Mono', monospace; }
.rb-loop-steps h3 { font-size: 22px; }
.rb-loop-steps p { color: var(--muted); margin: 8px 0 0; line-height: 1.58; }
.rb-video-panel { position: relative; overflow: hidden; border-radius: 15px; background: #050609; box-shadow: 0 28px 70px rgba(0,0,0,.42); }
.rb-video-panel video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #050609; }
.rb-trailer-play { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; width: 100%; cursor: pointer; border: 0; background: linear-gradient(90deg, rgba(8,10,15,.62), rgba(8,10,15,.1) 55%, rgba(8,10,15,.42)); color: var(--text); transition: opacity .28s ease; }
.rb-trailer-play > span { display: grid; width: 68px; height: 68px; place-items: center; margin: 0 auto; padding-left: 4px; border: 1px solid rgba(247,222,153,.76); border-radius: 50%; background: rgba(13,15,22,.78); color: var(--rb-gold); font-size: 25px; box-shadow: 0 0 0 10px rgba(216,180,94,.08), 0 16px 34px rgba(0,0,0,.32); }
.rb-trailer-play b { font-size: 16px; }
.rb-trailer-play i { color: rgba(245,240,229,.7); font: normal 10px 'IBM Plex Mono', monospace; letter-spacing: .11em; }
.rb-trailer-play:hover { background: linear-gradient(90deg, rgba(8,10,15,.44), rgba(8,10,15,.04) 55%, rgba(8,10,15,.3)); }
.rb-video-panel.is-playing .rb-trailer-play { opacity: 0; pointer-events: none; }
.rb-trailer-status { position: absolute; z-index: 3; right: 16px; bottom: 13px; margin: 0; color: var(--rb-ivory); font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .05em; text-shadow: 0 2px 12px #000; }
.rb-faction-teasers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.rb-faction-teaser { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; padding: 23px; background: linear-gradient(145deg, rgba(255,255,255,.045), transparent 55%), rgba(255,255,255,.02); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.rb-faction-teaser::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.rb-faction-teaser:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.26); box-shadow: 0 20px 38px rgba(0,0,0,.24); }
.rb-faction-teaser:hover::after { transform: scaleX(1); }
.rb-faction-teaser img { width: 28px; height: 28px; object-fit: contain; }
.rb-faction-teaser h3 { margin: 16px 0 8px; font-size: 22px; }
.rb-faction-teaser p { color: var(--muted); margin: 0; line-height: 1.55; font-size: 14px; }
.rb-map-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 46px; align-items: center; }
.rb-map-notes { display: grid; gap: 1px; margin-top: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.rb-map-notes > span { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 16px; background: rgba(9,11,17,.78); }
.rb-map-notes b { color: var(--rb-ivory); font-size: 14px; }
.rb-map-notes i { color: var(--muted); font: normal 9px 'IBM Plex Mono', monospace; letter-spacing: .07em; text-align: right; text-transform: uppercase; }
.rb-map-media { min-height: 420px; margin: 0; overflow: hidden; border-radius: 14px; }
.rb-map-media picture,
.rb-map-media img { width: 100%; height: 100%; }
.rb-map-media img { display: block; min-height: 420px; object-fit: cover; }
.rb-map-media figcaption { position: absolute; z-index: 3; right: 26px; bottom: 24px; left: 26px; color: var(--rb-ivory); font-size: 14px; line-height: 1.5; text-shadow: 0 2px 15px rgba(0,0,0,.8); }
.rb-map-media::selection { background: transparent; }
.rb-trailer-section { scroll-margin-top: calc(var(--ttg-nav-height, 69px) + 62px); }
@media (max-width: 900px) { .rb-loop-grid, .rb-map-grid { grid-template-columns: 1fr; } .rb-faction-teasers { grid-template-columns: 1fr; } .rb-map-media { min-height: 320px; } .rb-map-media img { min-height: 320px; } }
@media (max-width: 600px) { .rb-overview-hero { min-height: 660px; padding-top: 68px; } .rb-overview-copy { padding-bottom: 50px; } .rb-overview-copy p { font-size: 16px; } .rb-overview-facts { grid-template-columns: 1fr; max-width: 100%; } .rb-overview-facts > span { padding: 12px 14px; } .rb-overview-facts b { font-size: 25px; } .rb-trailer-play > span { width: 58px; height: 58px; font-size: 21px; } .rb-map-media, .rb-map-media img { min-height: 240px; } .rb-map-media figcaption { right: 17px; bottom: 16px; left: 17px; font-size: 13px; } }
@media (prefers-reduced-motion: no-preference) { @keyframes rb-hero-breathe { from { transform: scale(1); } to { transform: scale(1.025); } } }
@media (prefers-reduced-motion: reduce) { .rb-overview-hero > picture img { animation: none; } .rb-loop-steps article, .rb-faction-teaser, .rb-faction-teaser::after, .rb-trailer-play { transition: none; } }