/* BOOM! Circus Knockdown product page. Layout comes from cw.css (the shared
   app-page components); this file re-tints them for the game's big-top red
   and cream palette and adds the steps, acts gallery, offer and play button. */
.boom-page .ai-orb-1 { background:#eb5a32; opacity:.32; }
.boom-page .ai-orb-2 { background:#5a1f17; opacity:.6; }
.boom-page .ai-orb-3 { background:#f2b84b; opacity:.14; }
.boom-page main { position:relative; }
.boom-page .cw-hero .container { gap:5rem; }
.boom-page .cw-hero h1 { max-width:16ch; }
.boom-red { color:#ff7a52; }
.boom-app-subtitle { display:block; margin-top:.2rem; font-size:.95rem; font-weight:400; color:#c4c4c4; }
.boom-page .cw-hero-stage { width:280px; aspect-ratio:660/1434; }
.boom-page .cw-hero-stage::before { background:radial-gradient(ellipse,#eb5a3244,#f2b84b26 45%,transparent 70%); }
.boom-page .cw-hero-slide img { border-color:#ff9d7a44; }
/* A raised red control, like the game's own Play button, makes the launch stand out from text links. */
.boom-play { display:inline-flex; align-items:center; justify-content:center; gap:14px; box-sizing:border-box; min-height:64px; padding:16px 30px 16px 24px; border:1px solid #ff9f80; border-radius:12px; background:linear-gradient(180deg,#f2714a,#d94a26); color:#fff8ee; font-family:inherit; font-size:19px; line-height:1.25; font-weight:800; text-decoration:none; cursor:pointer; box-shadow:inset 0 1px 0 #ffb497,0 4px 0 #8f2b14,0 10px 28px #0005; transition:transform .15s,box-shadow .15s,background .15s; }
.boom-play:hover { background:linear-gradient(180deg,#ff835c,#e55531); color:#fff8ee; transform:translateY(-2px); box-shadow:inset 0 1px 0 #ffc2aa,0 6px 0 #8f2b14,0 12px 32px #eb5a3233; }
.boom-play:active { transform:translateY(3px); background:linear-gradient(180deg,#e2653f,#cc4321); box-shadow:inset 0 2px 4px #8f2b1426,0 1px 0 #8f2b14,0 4px 12px #0004; }
.boom-play:focus-visible { outline:3px solid #ffd2c1; outline-offset:7px; }
.boom-play-icon { display:block; width:26px; height:26px; flex:none; }
.boom-note,.boom-platforms { font-size:.9375rem; line-height:1.6; color:#c9bfb4; }
.boom-actions .boom-note { margin-top:1rem; }
.boom-page .cw-store-row { margin:1.75rem 0 0; }
.boom-platforms { margin-top:1.25rem; color:#f2c78a; }
.boom-how,.boom-gallery-section,.boom-offer,.boom-end { max-width:1200px; padding-top:5rem; padding-bottom:5rem; }
.boom-how,.boom-offer { border-top:1px solid #eb5a3233; }
.boom-section-heading { margin-bottom:2.5rem; max-width:760px; }
.boom-kicker { font-size:.875rem; letter-spacing:.15em; color:#f2a27f; margin-bottom:1rem; }
.boom-section-heading h2,.boom-end h2 { font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.22; font-weight:700; margin-bottom:1rem; text-wrap:balance; }
.boom-section-heading>p:last-child { font-size:1.125rem; color:#c4c4c4; }
.boom-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.boom-steps article { padding:1.75rem 0; border-top:1px solid #eb5a3244; }
.boom-step-number { color:#f2a27f; font-size:.9375rem; }
.boom-steps h3 { font-size:1.375rem; font-weight:650; margin:1rem 0 .75rem; }
.boom-steps p { font-size:1rem; color:#c4c4c4; }
.boom-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; max-width:1120px; margin:auto; }
.boom-gallery figure { margin:0; min-width:0; }
.boom-gallery img { display:block; width:100%; height:auto; border-radius:24px; border:1px solid #ff9d7a3b; box-shadow:0 18px 50px #0006; }
.boom-gallery figcaption { margin-top:1.25rem; font-size:.9375rem; color:#c4c4c4; text-align:center; }
.boom-gallery figcaption strong { display:block; margin-bottom:.25rem; font-size:.8125rem; letter-spacing:.12em; font-weight:600; color:#f2a27f; }
/* The offer: what is free and what Big Top Pass opens, beside the stage picker. */
.boom-offer-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:4rem; align-items:center; }
.boom-offer-list { display:grid; gap:1.5rem; }
.boom-offer-list article { padding:1.5rem 0 0; border-top:1px solid #eb5a3244; }
.boom-offer-list h3 { font-size:1.25rem; font-weight:650; margin-bottom:.6rem; }
.boom-offer-list p { font-size:1rem; color:#c4c4c4; }
.boom-offer-shot img { display:block; width:100%; height:auto; border-radius:24px; border:1px solid #ff9d7a3b; box-shadow:0 18px 50px #0006; }
.boom-end { text-align:center; border-top:1px solid #eb5a3233; padding-bottom:6rem; }
.boom-end .boom-play { margin:1.1rem 0 1.5rem; }
.boom-end p { color:#c4c4c4; font-size:1rem; line-height:1.65; max-width:44rem; margin:0 auto .75rem; text-wrap:pretty; }
.boom-end a:not([class]),.boom-offer a:not([class]) { color:#ff8a63; text-decoration:none; border-bottom:1px solid #ff8a6355; transition:color .15s,border-color .15s; }
.boom-end a:not([class]):hover,.boom-offer a:not([class]):hover { color:#ffb092; border-color:#ffb092; }
.boom-end .boom-end-legal { margin-top:2rem; font-size:.875rem; }
.boom-end .boom-end-legal a { color:#a19a92; border-color:#a19a9255; }
.boom-end .boom-end-legal a:hover { color:#f2c78a; border-color:#f2c78a; }
@media(max-width:1000px) {
  .boom-page .cw-hero .container { gap:3rem; }
  .boom-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:620px; }
  .boom-offer-grid { grid-template-columns:minmax(0,1fr) 240px; gap:2.5rem; }
}
/* The shared site's mobile root is 10px. Keep this page's copy comfortably readable. */
@media(max-width:768px) {
  .boom-page main { font-size:16px; }
  .boom-page .cw-app-name { font-size:2.4rem; }
  .boom-app-subtitle,.boom-note,.boom-platforms,.boom-gallery figcaption { font-size:1.5rem; }
  .boom-gallery figcaption strong { font-size:1.2rem; }
  .boom-page .cw-hero .lead { font-size:1.8rem; }
  .boom-steps { grid-template-columns:1fr; gap:1rem; }
  .boom-section-heading h2,.boom-end h2 { font-size:3rem; }
  .boom-section-heading>p:last-child,.boom-steps p,.boom-offer-list p,.boom-end p { font-size:1.6rem; }
  .boom-end .boom-end-legal { font-size:1.4rem; }
  .boom-steps h3,.boom-offer-list h3 { font-size:2rem; }
  .boom-kicker,.boom-step-number { font-size:1.4rem; }
  .boom-gallery { gap:1.75rem; }
  .boom-offer-grid { grid-template-columns:1fr; }
  .boom-offer-shot { max-width:280px; margin:0 auto; }
}
@media(max-width:590px) {
  .boom-page .cw-hero h1 { font-size:4.2rem; }
  .boom-page .cw-hero-stage { width:250px; }
  .boom-page .cw-hero-copy { text-align:center; }
  .boom-gallery { grid-template-columns:1fr; max-width:280px; gap:3.5rem; }
  .boom-how,.boom-gallery-section,.boom-offer,.boom-end { padding-top:4rem; padding-bottom:4rem; }
}
@media(prefers-reduced-motion:reduce) { .boom-play { transition:none; } }