/* Local campaign concept: goal, benefit, offer. Checkout styles stay shared. */
/* Roblox: a single campaign composition with a flat promotion ribbon. */
body[data-world=roblox] .campaign{margin-top:32px}
body[data-world=roblox] .game-hero{--promo-height:44px}
body[data-world=roblox] .game-hero>.hero-popout{translate:0 var(--promo-height)}
body[data-world=roblox] .promo-top{display:flex;align-items:center;justify-content:center;gap:25px;height:var(--promo-height);padding:9px 22px;background:#123c70;color:#f5fbff;border-bottom:1px solid #82b8f03d}
body[data-world=roblox] .promo-top-tag{flex:none;padding-right:25px;border-right:1px solid #82b8f059;color:#f5fbff;font-size:18px;font-weight:800;line-height:1.6;letter-spacing:1.8px;text-transform:uppercase}
body[data-world=roblox] .promo-top-clock{display:flex;align-items:flex-start;gap:7px;flex:none;font-variant-numeric:tabular-nums lining-nums}
body[data-world=roblox] .promo-top-clock .timer-unit{min-width:0;gap:3px}
body[data-world=roblox] .promo-top-clock b{display:block;width:45px;color:#91f5d9;font-size:31px;font-weight:800;line-height:1;letter-spacing:.8px;text-align:center}
body[data-world=roblox] .promo-top-clock small{margin:0;color:#bdd4ef;font-size:8px;font-weight:600;line-height:1.2;letter-spacing:.4px}
body[data-world=roblox] .promo-top-clock .timer-separator{display:flex;align-items:center;height:31px;font-size:24px;line-height:1;color:#9cbfe7}
@media(max-width:560px){
 body[data-world=roblox] .campaign{margin-top:25px}
 body[data-world=roblox] .promo-top{gap:16px;padding:9px 14px}
 body[data-world=roblox] .promo-top-tag{padding-right:16px;font-size:13px;letter-spacing:1.3px}
 body[data-world=roblox] .promo-top-clock{gap:4px}
 body[data-world=roblox] .promo-top-clock b{width:35px;font-size:26px;letter-spacing:.6px}
 body[data-world=roblox] .promo-top-clock .timer-separator{height:26px;font-size:20px}
 body[data-world=roblox] .promo-top-clock small{font-size:7px;letter-spacing:.15px}
}
@media(max-width:360px){
 body[data-world=roblox] .promo-top{gap:12px;padding:9px 10px}
 body[data-world=roblox] .promo-top-tag{padding-right:12px;font-size:12px;letter-spacing:1px}
 body[data-world=roblox] .promo-top-clock{gap:3px}
 body[data-world=roblox] .promo-top-clock b{width:32px;font-size:24px}
 body[data-world=roblox] .promo-top-clock .timer-separator{height:24px;font-size:18px}
}
.campaign{margin-top:52px}
.hero-frame{border-color:#7788ac4a;background:#0a102e}
.hero-scene{height:269px}
.hero-picture img{object-position:center center}
.hero-scene:after{background:linear-gradient(0deg,#0a102e 0%,#0a102e20 30%,transparent 60%)}
.game-label{font-size:12px;letter-spacing:.2px;background:#091023cc;backdrop-filter:blur(8px)}
.hero-offer{margin-top:-24px;padding:0 28px 24px}
.hero-offer h1{max-width:100%;width:auto;color:#fff;font-size:38px;font-weight:800;line-height:1.16;letter-spacing:-1.15px;text-transform:uppercase;text-wrap:balance}
.hero-offer h1 em{color:var(--accent);white-space:normal}
.hero-promise{max-width:540px;margin:10px auto 0;color:#c6cde2;font-size:15px;line-height:1.55;text-wrap:balance}
.offer-reading{margin-top:20px;gap:27px;padding:14px 25px;border:1px solid #ffffff24;border-radius:16px;background:#ffffff04;min-height:94px;letter-spacing:-.4px;transition:border-color .15s}
.offer-intro{font-size:18px;font-weight:600;line-height:1.4;white-space:normal;text-align:left}
.offer-intro>span{display:block;color:#bfc7df}
.offer-current{gap:17px}
.offer-current strong{display:inline-flex;align-items:baseline;font-size:64px;padding:0;border:0;border-radius:0;background:none;color:#fff;box-shadow:none;letter-spacing:-2.5px}
.offer-currency{margin-left:6px;font-size:.6em;letter-spacing:-1px}
.offer-was{font-size:23px;color:#d893a0}
.offer-was s{text-decoration-thickness:2px}
@media(hover:hover) and (pointer:fine){.offer-reading:hover{border-color:var(--accent)}}
.hero-popout-main{width:164px;top:-28px;right:-40px}
.hero-popout-secondary{width:105px;left:-33px;top:191px}
body[data-world=brawl] .hero-popout-main{width:158px}
.promo-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 29px;background:#ffffff04;border-top:1px solid #ffffff12}
.promo-label{display:flex;align-items:center;gap:10px}
.promo-label svg{width:21px;height:21px;flex:none;color:var(--accent)}
.promo-label span{display:block;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.promo-label small{display:block;font-size:10px;color:#929fbe;margin-top:3px}
.promo-countdown{display:flex;gap:6px;align-items:flex-start;font-variant-numeric:tabular-nums lining-nums;flex:none}
.timer-unit{display:flex;align-items:center;flex-direction:column;min-width:33px}
.timer-unit b{font-size:24px;line-height:1.1;letter-spacing:1px;font-weight:800;color:var(--accent)}
.timer-unit small{color:#919fbe;font-size:8px;line-height:1.3;margin-top:4px}
.timer-separator{font-size:21px;line-height:1.1;color:#65728f}
.timer-tenths{font-size:15px;line-height:1.3;margin-top:2px;padding-left:2px;color:#bac6df;min-width:15px}
.timer-tenths:before{content:'.';margin-right:1px}
@media(min-width:941px){.hero-offer h1{font-size:37px}}
@media(max-width:940px){
 .hero-popout-main{width:144px;right:-20px;top:-27px}
 .hero-popout-secondary{width:91px;left:-20px;top:186px}
 body[data-world=brawl] .hero-popout-main{width:142px}
 .hero-offer h1{font-size:clamp(26px,4.3vw,36px)}
}
@media(max-width:640px){
 .campaign{margin-top:39px}
 .hero-scene{height:211px}
 .hero-offer{padding:0 20px 20px;margin-top:-12px}
 .hero-offer h1{font-size:29px}
 .hero-promise{font-size:14px;max-width:410px}
 .offer-reading{gap:20px;padding:13px 19px;margin-top:17px}
 .offer-intro{font-size:17px}
 .offer-current strong{font-size:58px}
 .offer-was{font-size:21px}
 .hero-popout-main{width:118px;right:-16px;top:-23px}
 .hero-popout-secondary{width:74px;left:-14px;top:150px}
 body[data-world=brawl] .hero-popout-main{width:116px}
 .promo-strip{padding:12px 18px;gap:12px}
 .promo-label svg{display:none}
 .promo-label small{max-width:165px;line-height:1.4}
}
@media(max-width:560px){
 .hero-scene{height:178px}
 .hero-picture img{object-position:center}
 .game-label{left:auto;right:13px;top:auto;bottom:22px}
 body[data-world=roblox] .hero-picture img{object-position:35% center}
 body[data-world=roblox] .game-label{left:auto;right:13px;top:auto;bottom:22px}
 .hero-offer{padding:0 15px 18px;margin-top:-8px}
 .hero-offer h1{font-size:28px;max-width:100%;line-height:1.14;letter-spacing:-.65px}
 .hero-offer h1 em{display:block}
 .hero-promise{font-size:13px;line-height:1.5;margin-top:10px;max-width:315px}
 .offer-reading{width:100%;max-width:330px;flex-direction:column;gap:7px;padding:13px 12px 15px;margin-top:16px;letter-spacing:-.3px}
 .offer-intro{font-size:15px;text-align:center}
 .offer-intro>span{display:inline;color:inherit}
 .offer-current{gap:16px}
 .offer-current strong{font-size:58px;padding:0}
 .offer-was{font-size:21px}
 .hero-popout-main{width:93px;right:-13px;top:-23px}
 .hero-popout-secondary{width:64px;left:-16px;top:110px}
 body[data-world=brawl] .hero-popout-main{width:94px}
 .promo-strip{padding:13px 15px;gap:8px}
 .promo-label span{font-size:11px}
 .promo-label small{font-size:9px;max-width:140px;margin-top:2px}
 .promo-countdown{gap:3px}
 .timer-unit{min-width:26px}
 .timer-unit b{font-size:21px;letter-spacing:.4px}
 .timer-separator{font-size:18px}
 .timer-tenths{font-size:13px;min-width:12px;padding:0}
 .checkout-header h2{font-size:20px}
 .checkout-header .section-kicker{font-size:8px;letter-spacing:.7px}
}
@media(max-width:360px){
 .campaign{margin-left:22px;margin-right:22px}
 .hero-scene{height:157px}
 .hero-offer h1{font-size:25px}
 .hero-promise{font-size:12px}
 .promo-strip{padding:12px 10px}
 .promo-label small{max-width:110px}
 .timer-unit b{font-size:20px}
}

body[data-world=roblox] .promo-top-static .promo-top-tag{border:0;padding:0;font-size:13px;letter-spacing:2px;color:#91f5d9}

/* Each game has its own badge and timer palette; RUB prices remain white. */
/* Keep the hero, reviews and checkout on the same edges on phones as well. */
@media(max-width:560px){
 .checkout-card,.inside-card{margin-left:0;margin-right:0}
}
body[data-world=roblox] .game-hero{--accent:#79ebce;--badge-ink:#092e29}
body[data-world=standoff] .game-hero{--accent:#ffcb78;--badge-ink:#382309}
body[data-world=brawl] .game-hero{--accent:#e1acff;--badge-ink:#321047}
body[data-world=brawl]{--accent:#e1acff}
body[data-world=brawl] .pay-button{background:linear-gradient(105deg,#eccbff,#d7a1ff);color:#321047;border-color:#f4deff;box-shadow:0 3px 0 #85509f,0 7px 18px #0a0c2538}
body[data-world=brawl] .pay-button:hover:not(:disabled){box-shadow:0 5px 0 #85509f,0 10px 22px #0a0c2538}
body[data-world=brawl] .pay-button:active:not(:disabled){box-shadow:0 1px 0 #85509f}
body[data-world=brawl] .access-tag{background:#e1acff16;border-color:#e1acff42;color:#edceff}
body[data-world=brawl] .course-features li:before{border-color:#e1acff}
body[data-world=brawl] .all-access-icon{background:#e1acff10;border-color:#e1acff26;color:#e1acff}
body[data-world=brawl] .included-check{color:#e1acff}
.hero-offer h1{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}
.hero-offer .robux-goal,.hero-offer .game-goal{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#fff}
.robux-amount,.goal-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 6px;border-radius:10px;background:var(--accent);color:var(--badge-ink);font-size:38px;line-height:1.2;letter-spacing:-1px;white-space:nowrap}
.robux-amount svg,.goal-badge svg{width:31px;height:35px;flex:none;fill:currentColor;stroke:none}
.robux-name,.goal-name{white-space:nowrap}
.gold-symbol{display:inline-block;font-size:.86em;font-weight:800;font-style:italic;line-height:1;border-bottom:2px solid currentColor;letter-spacing:-2px;margin-right:2px}
.goal-badge-brawl{font-size:33px;letter-spacing:-.8px;padding-top:8px;padding-bottom:9px}
@media(max-width:640px){
 .robux-amount,.goal-badge{font-size:33px;padding:5px 9px 6px;gap:6px}
 .robux-amount svg,.goal-badge svg{width:27px;height:31px}
 .goal-badge-brawl{font-size:27px}
}
@media(max-width:560px){
 .hero-offer h1{flex-direction:column;gap:7px}
 .hero-offer .robux-goal,.hero-offer .game-goal{gap:8px;font-size:24px;letter-spacing:-.7px}
 .robux-amount,.goal-badge{font-size:30px;padding:5px 8px 6px}
 .robux-amount svg,.goal-badge svg{width:25px;height:28px}
 .goal-badge-brawl{font-size:24px;letter-spacing:-.6px;padding-top:8px;padding-bottom:9px}
}
@media(max-width:360px){
 .hero-offer .robux-goal,.hero-offer .game-goal{gap:6px;font-size:20px;letter-spacing:-.5px}
 .robux-amount,.goal-badge{font-size:27px;gap:5px;padding:5px 6px 6px}
 .robux-amount svg,.goal-badge svg{width:23px;height:26px}
 .goal-badge-brawl{font-size:20px;letter-spacing:-.5px;padding-top:8px;padding-bottom:9px}
}