/* A cinematic game stage, in Revolving's own colors. */
body[data-page=index] .hero{display:block;padding:0;overflow:hidden;background:#0d152b;border-radius:30px}
.hero-carousel{position:relative;isolation:isolate;min-height:560px;height:clamp(480px,47vw,650px);overflow:hidden;touch-action:pan-y;background:#101b30}
.hero-scene{position:absolute;inset:0;z-index:-3;background:#10182d}.hero-scene[hidden]{display:none}.hero-scene img{display:block;position:absolute;inset:0 0 0 auto;width:79%;height:100%;object-fit:cover;object-position:center}
.hero-carousel:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b1329f5 2%,#0b1329e8 23%,#0b132977 46%,#0b132900 77%),linear-gradient(0deg,#0b1329f0 0%,#0b132900 55%)}
.hero-copy{position:absolute;inset:auto auto 78px 58px;width:min(610px,65%);text-align:start}.hero-copy .eyebrow{color:#c3fa70;font-size:12px;letter-spacing:2px;margin:0 0 12px}.hero-copy #hero-game-title{font-size:clamp(44px,5.8vw,78px);line-height:1;letter-spacing:-3px;margin:0 0 20px;font-weight:900;color:#f5f5ff}.hero-copy #hero-game-tagline{font-size:18px;line-height:1.5;max-width:380px;color:#d9e4f4;margin:0 0 22px;min-height:27px}
body[data-page=index] .hero-carousel .hero-actions{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin:0}
body[data-page=index] .hero-carousel .hero-actions>a{font-family:inherit;font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap;display:inline-flex;gap:5px;align-items:center;justify-content:center;width:auto;min-width:142px;min-height:48px;border-radius:12px;margin:0!important;padding:14px 18px;text-decoration:none;text-transform:uppercase;color:#10213b;border:1px solid #ffffff55;letter-spacing:.2px}
body[data-page=index] .hero-carousel #hero-random{background:#c4fa72;box-shadow:0 4px 0 #718d48}body[data-page=index] .hero-carousel #hero-secondary{background:#55c8ec;box-shadow:0 4px 0 #33768d}body[data-page=index] .hero-carousel #hero-game-play{background:#ff8879;box-shadow:0 4px 0 #a45056}
.hero-carousel .hero-actions>a:hover{filter:brightness(1.1)}.hero-carousel .micro{margin:20px 0 0;font-size:12px;color:#abb9d0}.hero-arrow{position:absolute;inset-block-start:45%;width:40px;height:64px;border:0;border-radius:10px;background:#0a14275e;color:#eef5ff;font-size:36px;cursor:pointer}.hero-prev{left:8px}.hero-next{right:8px}.hero-arrow:hover{background:#0a1427bb}.hero-pagination{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:2px}.hero-pagination button{width:36px;height:32px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}.hero-pagination span{width:8px;height:8px;border-radius:50%;background:#afbfdb66}.hero-pagination [aria-pressed=true] span{background:#fff;width:25px;border-radius:8px}.hero-carousel :focus-visible{outline:3px solid #c4fa72;outline-offset:4px}
body[data-page=index] .hero>.hero-live-rank{margin:0;padding:30px 36px;border-top:1px solid #35425c}
/* Mobile copy stays in normal flow so translated text cannot collide with controls. */
@media(max-width:700px){
 body[data-page=index]>header{padding-inline:16px}
 body[data-page=index]>main{padding:12px 16px 0}
 body[data-page=index] .hero{border-radius:24px}
 .hero-carousel{height:auto;min-height:0;padding:clamp(178px,52vw,260px) 20px 60px}
 .hero-scene img{width:100%;height:340px;max-height:75%;object-fit:cover;object-position:center top;mask-image:linear-gradient(#000 55%,transparent 100%)}
 .hero-carousel:before{background:linear-gradient(0deg,#0b1329 0%,#0b1329 18%,#0b1329e8 39%,#0b132959 69%,#0b132900 100%)}
 .hero-copy{position:relative;inset:auto;width:100%;min-width:0}
 .hero-copy #hero-game-title{font-size:clamp(34px,10vw,42px);letter-spacing:-1.5px;margin:0 0 12px;overflow-wrap:anywhere}
 .hero-copy #hero-game-tagline{font-size:15px;line-height:1.5;margin:0 0 20px;max-width:none;min-height:45px}
 .hero-copy .eyebrow{font-size:10px;letter-spacing:1.5px;margin:0 0 10px}
 body[data-page=index] .hero .hero-carousel .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin:0;align-items:stretch}
 body[data-page=index] .hero .hero-carousel .hero-actions>a{box-sizing:border-box;width:100%;max-width:none;min-width:0;min-height:48px;padding:12px 8px;font-size:12px;line-height:1.3;letter-spacing:0;border-radius:13px;white-space:normal;text-align:center;overflow-wrap:anywhere}
 body[data-page=index] .hero .hero-carousel #hero-game-play{grid-column:1/-1;font-size:14px}
 body[data-page=index] .hero .hero-carousel .micro{font-size:11px!important;line-height:1.5;margin:20px 0 0;max-width:none}
 .hero-arrow{top:110px;height:44px;width:30px;font-size:28px}
 .hero-prev{left:6px}.hero-next{right:6px}
 .hero-pagination{bottom:14px}
 body[data-page=index] .hero>.hero-live-rank{padding:22px 14px}
 .hero-carousel .hero-kids-link{top:16px;right:16px;padding:9px 13px;font-size:12px}
}
@media(prefers-reduced-motion:no-preference){.hero-scene{animation:hero-appear .35s ease-out}@keyframes hero-appear{from{opacity:.5}to{opacity:1}}}
html[dir=rtl] .hero-copy{text-align:right}

.hero-kids-link{position:absolute;right:28px;top:24px;display:inline-flex;gap:8px;align-items:center;padding:10px 16px;border-radius:999px;background:#ffe3a6;color:#17284a;font-size:13px;font-weight:850;text-decoration:none;text-transform:uppercase;box-shadow:0 3px 0 #ab8150}.hero-kids-link span[aria-hidden]{color:#855bd2}.hero[data-game=kids] .hero-carousel{background:#3e3263}