/* Roar Racers game page. Loads after styles.css. Same structure as cartwheel.css */
@font-face{font-family:'Bowlby One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bowlby-one-regular.ttf) format('truetype')}
.rr{
  --rr-red:#D8121A; --rr-red-d:#7C0A0F; --rr-red-hi:#F0242C; --rr-yellow:#FFC400; --rr-ink:#17110F; --rr-ink2:#544A45;
  --rr-cream:#FFF8EE; --rr-line:#F0E2CE; --rr-blue:#1667D9; --rr-green:#1F8A3B; --rr-orange:#C95400; --rr-purple:#7A3FE0;
  --rr-display:'Bowlby One',Impact,'Arial Black',sans-serif;
  --hazard:repeating-linear-gradient(-45deg,var(--rr-yellow) 0 22px,var(--rr-ink) 22px 44px);
  background:var(--rr-cream);color:var(--rr-ink)
}
.rr .site-header{background:rgba(23,17,15,.86);border-bottom-color:rgba(255,255,255,.14)}
.rr-display{font-family:var(--rr-display);font-weight:400;text-transform:uppercase;line-height:1.08;margin:0;color:var(--rr-ink)}
.rr-kicker{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--rr-red)}
.btn-rr{background:var(--rr-red);color:#fff;border:none;border-radius:12px;box-shadow:0 5px 0 var(--rr-red-d);font-size:16px;transition:transform .2s,box-shadow .2s,background .2s}
.btn-rr:hover{color:#fff;background:var(--rr-red-hi);transform:translateY(-2px);box-shadow:0 7px 0 var(--rr-red-d)}
.btn-rr:active{transform:translateY(3px);box-shadow:0 2px 0 var(--rr-red-d)}
.btn-rr-g{background:#fff;color:var(--rr-ink);border:none;border-radius:12px;box-shadow:0 5px 0 rgba(23,17,15,.45);font-size:16px;transition:transform .2s,box-shadow .2s}
.btn-rr-g:hover{color:var(--rr-ink);transform:translateY(-2px);box-shadow:0 7px 0 rgba(23,17,15,.45)}
.rr-hero .btn-rr{background:var(--rr-ink);box-shadow:0 5px 0 #000}
.rr-hero .btn-rr:hover{background:#2C2320;box-shadow:0 7px 0 #000}

/* Hero: the title screen's red sunburst */
.rr-hero{position:relative;overflow:hidden;isolation:isolate;background:repeating-conic-gradient(from 0deg at 72% 46%,#E0161E 0 9deg,#C40F16 9deg 18deg);padding:clamp(40px,6vw,84px) 0 clamp(64px,8vw,104px)}
.rr-hero:after{content:'';position:absolute;left:0;right:0;bottom:0;height:18px;background:var(--hazard);z-index:1}
.rr-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center;position:relative;z-index:2}
.rr-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.rr-logo{margin:0 0 0 -2%;width:min(540px,100%)}
.rr-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 24px rgba(23,17,15,.45))}
.rr-tag{margin:0;font-family:var(--sans);font-weight:600;font-size:clamp(20px,1.9vw,26px);line-height:1.32;color:#fff;text-shadow:0 2px 12px rgba(23,17,15,.45);max-width:560px}
.rr-chips{display:flex;gap:10px;flex-wrap:wrap}
.rr-chip{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:999px;background:rgba(23,17,15,.6);color:#fff;border:1px solid rgba(255,255,255,.35)}
.rr-chip.hot{background:#fff;color:var(--rr-red);border-color:#fff}
.rr-price{margin:-6px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.45;color:#fff;text-shadow:0 2px 10px rgba(23,17,15,.4)}
.rr-ctas{display:flex;gap:16px;flex-wrap:wrap;padding-bottom:6px}
.rr-hero-art{position:relative}
.rr-screen{border-radius:24px;overflow:hidden;border:8px solid #fff;background:#fff;box-shadow:0 30px 70px rgba(23,17,15,.45);transform:rotate(1.5deg)}
.rr-screen img{display:block;width:100%;height:auto}
.rr-hero-icon{position:absolute;right:-2%;bottom:-13%;width:clamp(84px,10vw,150px);height:auto;border-radius:22%;border:5px solid #fff;box-shadow:0 14px 30px rgba(23,17,15,.45);transform:rotate(-6deg)}

/* Sections */
.rr-sec{padding-top:clamp(72px,9vw,128px)}
.rr-head{display:flex;flex-direction:column;gap:14px;max-width:780px;margin-bottom:clamp(30px,4vw,48px)}
.rr-head-c{margin-inline:auto;text-align:center;align-items:center;max-width:960px}
.rr-head h2{font-size:clamp(32px,4vw,54px)}
.rr-head p{margin:0;font-size:18px;line-height:1.65;color:var(--rr-ink2)}

/* Moves */
.rr-moves{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.rr-moves li{--c:var(--rr-blue);background:#fff;border:3px solid var(--c);border-radius:18px;padding:18px 16px 20px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 0 var(--c);transition:transform .25s}
.rr-moves li:hover{transform:translateY(-4px) rotate(-1deg)}
.rr-moves .g{align-self:flex-start;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:#fff;background:var(--c);padding:6px 10px;border-radius:999px;white-space:nowrap}
.rr-moves b{font-family:var(--rr-display);font-weight:400;font-size:20px;line-height:1.15;text-transform:uppercase;color:var(--rr-ink);margin-top:4px}
.rr-moves .d{font-size:15px;line-height:1.5;color:var(--rr-ink2)}
.m-blue{--c:var(--rr-blue) !important}.m-red{--c:var(--rr-red) !important}.m-green{--c:var(--rr-green) !important}.m-orange{--c:var(--rr-orange) !important}.m-purple{--c:var(--rr-purple) !important}

/* Feature rows */
.rr-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:center}
.rr-feature-rev .rr-feature-copy{order:2}
.rr-feature-copy{display:flex;flex-direction:column;gap:16px}
.rr-feature-copy h2{font-size:clamp(32px,4vw,54px)}
.rr-feature-copy p{margin:0;font-size:18px;line-height:1.65;color:var(--rr-ink2)}
.rr-stack{display:grid;padding-bottom:10%}
.rr-frame{margin:0;border-radius:18px;overflow:hidden;border:6px solid #fff;background:#fff;box-shadow:0 22px 50px rgba(23,17,15,.22);transition:transform .35s}
.rr-frame img{display:block;width:100%;height:auto}
.rr-stack .rr-frame:nth-child(2){width:64%;margin-top:-20%;margin-left:auto;margin-right:-2%;box-shadow:0 30px 70px rgba(23,17,15,.32)}
.tilt-l{transform:rotate(-1.8deg)}
.tilt-r{transform:rotate(1.5deg)}
.rr-stack .rr-frame:hover{transform:rotate(0) scale(1.02)}
.rr-stats{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rr-stats li{background:#fff;border:2px solid var(--rr-line);border-radius:14px;padding:12px 14px;font-size:14px;color:var(--rr-ink2);display:flex;flex-direction:column}
.rr-stats b{font-family:var(--rr-display);font-weight:400;font-size:30px;line-height:1.15;color:var(--rr-red)}

/* Worlds */
.rr-worlds-sec{margin-top:clamp(72px,9vw,128px);padding:clamp(60px,8vw,104px) 0;background:var(--rr-ink);color:#fff}
.rr-worlds-sec .rr-kicker{color:var(--rr-yellow)}
.rr-worlds-sec h2{color:#fff}
.rr-worlds-sec .rr-head p{color:#D9D0C8}
.rr-map{margin:0 0 24px;border-radius:18px;overflow:hidden;border:6px solid #fff}
.rr-map img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.rr-worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rr-world{--c:var(--rr-green);background:#fff;border-radius:18px;border:3px solid var(--c);box-shadow:0 6px 0 var(--c);padding:18px 20px 20px;display:flex;flex-direction:column;gap:4px;transition:transform .25s}
.rr-world:hover{transform:translateY(-4px)}
.rr-world .n{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--c)}
.rr-world h3{margin:0;font-family:var(--rr-display);font-weight:400;font-size:24px;line-height:1.15;text-transform:uppercase;color:var(--rr-ink)}
.rr-world p{margin:0;font-size:15px;line-height:1.5;color:var(--rr-ink2)}
.w1{--c:var(--rr-green)}.w2{--c:var(--rr-purple)}.w3{--c:#0B7FA8}.w4{--c:var(--rr-red)}.w5{--c:var(--rr-blue)}.w6{--c:#3A3FB8}

/* Promise */
.rr-promise{padding:clamp(60px,8vw,104px) 0;background:var(--rr-red);background-image:radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.4px);background-size:24px 24px}
.rr-promise .rr-kicker{color:#fff}
.rr-promise h2{color:#fff}
.rr-promise .rr-head p{color:#FFECEC}
.rr-promises{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rr-promises li{background:#fff;border-radius:18px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 0 rgba(23,17,15,.28)}
.rr-promises b{font-family:var(--rr-display);font-weight:400;font-size:21px;line-height:1.2;text-transform:uppercase;color:var(--rr-ink)}
.rr-promises b:before{content:'✓';display:inline-grid;place-items:center;width:30px;height:30px;margin-right:10px;border-radius:50%;background:var(--rr-green);color:#fff;font-family:var(--sans);font-size:16px;vertical-align:3px}
.rr-promises span{font-size:16px;line-height:1.55;color:var(--rr-ink2)}
.rr-promise-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin:32px 0 0}
.rr-promise-links a{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;color:#fff;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.rr-promise-links a:hover{color:#FFECEC}

/* Signup */
.rr .signup-sec{padding-top:clamp(72px,9vw,128px)}
.rr .signup{background-color:var(--rr-ink);background-image:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.2px);background-size:22px 22px;border-radius:24px;border-bottom:14px solid var(--rr-yellow)}
.rr .signup h2{font-family:var(--rr-display);font-weight:400;text-transform:uppercase;color:#fff;font-size:clamp(32px,4.2vw,58px);line-height:1.05;margin:0}
.rr .signup p{color:#E8E0D8}
.rr .signup .fine{color:#CFC6BE}
.rr .signup .fine a{color:#fff}
.rr .signup label{color:#fff}
.rr .signup .rr-for{margin:0;font-weight:600;color:#fff}
.rr .field input{border-color:#fff;background:#fff;border-radius:12px 0 0 12px}
.rr .field button{background:var(--rr-red);border-color:#fff;color:#fff;border-radius:0 12px 12px 0}
.rr .field button:hover{color:#fff;background:var(--rr-red-hi)}
.rr .err{color:#FFD66B}
.rr .done{background:#2C2320;border-radius:16px}
.rr .done b{color:var(--rr-yellow)}
.rr .done span{color:#E8E0D8}

/* More games */
.rr .more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rr .more{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:24px;padding:28px;border-radius:18px;text-decoration:none;min-height:200px;border:2px solid transparent;transition:transform .3s,border-color .3s}
.rr .more:hover{transform:translateY(-4px)}
.rr .more img{width:min(240px,75%);height:auto;flex:none}
.rr .more span{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;color:#fff}
.rr .more-cc{background:linear-gradient(180deg,#2486D9 0%,#0F4F99 100%)}
.rr .more-cc:hover{border-color:#FFCC29}
.rr .more-tide{background:linear-gradient(180deg,#0F4C5C 0%,#0B2F3A 100%)}
.rr .more-tide:hover{border-color:#E9B949}
.rr .more-mtt{background:radial-gradient(ellipse at 30% 40%,#4A1010 0%,#1A0606 70%)}
.rr .more-mtt:hover{border-color:#F2C14E}
.rr .doc-footer{background:var(--rr-ink);border-top:none;margin-top:clamp(72px,9vw,128px)}
.rr .doc-footer .wrap{color:#B9AEA6}
.rr .doc-footer a{color:#F2EAE2}

@media (max-width:1200px){
  .rr-moves{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .rr-hero-grid{grid-template-columns:1fr}
  .rr-hero-copy{align-items:center;text-align:center}
  .rr-logo{margin:0;width:min(440px,92%)}
  .rr-chips,.rr-ctas{justify-content:center}
  .rr-hero-art{margin-top:8px;width:min(640px,100%);margin-inline:auto}
  .rr-feature{grid-template-columns:1fr}
  .rr-feature-rev .rr-feature-copy{order:0}
  .rr-stack .rr-frame:nth-child(2){width:70%}
  .rr-worlds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rr-promises{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rr .more-grid{grid-template-columns:1fr}
  .rr .more{flex-direction:row;align-items:center;min-height:0}
  .rr .more img{width:min(200px,50%)}
}
@media (max-width:600px){
  .rr-moves{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rr-moves li{padding:14px 14px 16px}
  .rr-moves b{font-size:18px}
  .rr-moves li:last-child{grid-column:1 / -1}
  .rr-promises{grid-template-columns:1fr}
  .rr-stats b{font-size:24px}
  .rr-ctas{flex-direction:column;width:100%}
  .rr-ctas .btn{width:100%}
  .rr .field{flex-direction:column;gap:10px}
  .rr .field input,.rr .field button{flex:none;width:100%;height:58px;border-radius:12px;border-right:2px solid #fff}
  .rr .more{flex-direction:column;align-items:flex-start}
  .rr .more img{width:70%}
  .rr-head p,.rr-feature-copy p{font-size:17px}
}