/* Homepage "Sprinkles' Adventures" (26 Oct 2026): sequels sit side by side as numbered series (1 then 2), the single games
   share one tidy row, and the team shooter gets a wide strip. Builds on the base card styles in sprinkles-phase3.css. */
.adv-sub{margin:-4px 0 22px;color:var(--muted);font-size:15px;line-height:1.5;max-width:62ch}

/* ---------- series: two games that belong together ---------- */
.adv-series{display:grid;gap:26px}
.series{--sacc:#ff568b;position:relative;padding:20px 20px 22px;border-radius:28px;background:#1a1220;border:1px solid #ffffff1c;box-shadow:0 24px 60px #0007,inset 0 1px 0 #ffffff14}
@supports (background:color-mix(in srgb,red,blue)){
  .series{border-color:color-mix(in srgb,var(--sacc) 38%,transparent);background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--sacc) 16%,#1f1626) 0%,#1a1220 62%)}
}
.s-escape{--sacc:#feb300}
.series-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0 4px 16px}
.series-kicker{font:11px Mono,monospace;letter-spacing:2.4px;color:var(--sacc)}
.series-head h3{margin:0;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em}
.series-line{color:var(--muted);font-size:15px}
.adv-pair{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:stretch;gap:12px}
.adv-then{align-self:center;justify-self:center;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;font-size:22px;font-weight:800;color:#2d0818;background:linear-gradient(135deg,#ffd9a8,var(--sacc));box-shadow:0 0 0 5px #00000040,0 8px 22px #0006}

/* ---------- the cards ---------- */
.adv-card{--acc:#ff8fb1;border-radius:22px;background:#1f1626;border:1px solid #ffffff18}
.adv-media{position:relative;display:block;overflow:hidden;background:#0e1030}
.adv-media picture{display:block}
.adv-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.adv-media::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,#1f1626f0,#1f162600);pointer-events:none}
.adv-pair .adv-media img{aspect-ratio:16/10}
.adv-card:hover .adv-media img,.adv-card:focus-visible .adv-media img{transform:scale(1.06)}
.adv-card:hover,.adv-card:focus-visible{box-shadow:0 0 0 2px var(--acc),0 0 34px #ff568b55,0 24px 54px #000a}
@supports (background:color-mix(in srgb,red,blue)){
  .adv-card:hover,.adv-card:focus-visible{box-shadow:0 0 0 2px var(--acc),0 0 34px color-mix(in srgb,var(--acc) 45%,transparent),0 24px 54px #000a}
  .adv-go{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 55%,#fff),var(--acc))}
}
.adv-body small{color:var(--acc)}
.adv-body h3{font-size:clamp(20px,1.9vw,25px)}
.adv-go{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ffd9e2,var(--acc))}
.adv-go i{font-style:normal;transition:transform .2s}
.adv-card:hover .adv-go i,.adv-card:focus-visible .adv-go i{transform:translateX(5px)}
.adv-num{position:absolute;left:12px;top:12px;z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:800 25px/1 system-ui,sans-serif;color:#2d0818;background:linear-gradient(135deg,#fff,var(--acc));box-shadow:0 4px 14px #0008,inset 0 -3px 0 #0002}
.adv-flag{position:absolute;right:12px;top:12px;z-index:2;font:700 11px Mono,monospace;letter-spacing:1.5px;padding:5px 9px;border-radius:8px;box-shadow:0 4px 14px #0007}
.adv-flag.new{background:#88e7c0;color:#06281c}
.adv-flag.beta{background:#ffd46b;color:#2d0818}

/* ---------- more games, and the team shooter ---------- */
.adv-more-title{margin:36px 0 14px;font:400 11px Mono,monospace;letter-spacing:2.6px;color:var(--pink);text-transform:uppercase}
.adv-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.adv-more .adv-line{font-size:14px}
.adv-more .adv-body{padding:14px 16px 18px}
.adv-wide{flex-direction:row}
.adv-wide .adv-media{flex:0 0 min(480px,46%)}
.adv-wide .adv-media img{height:100%;aspect-ratio:auto;min-height:260px}
.adv-wide .adv-body{justify-content:center;padding:26px 34px}
.adv-wide .adv-body h3{font-size:clamp(24px,2.7vw,36px)}
.adv-wide .adv-line{font-size:17px;max-width:52ch}

@media (max-width:980px){.adv-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .series{padding:16px 14px 18px;border-radius:24px}
  .adv-pair{grid-template-columns:1fr;gap:10px}
  .adv-then{transform:rotate(90deg);width:40px;height:40px;font-size:19px}
  .adv-wide{flex-direction:column}
  .adv-wide .adv-media{flex:none}
  .adv-wide .adv-media img{height:auto;aspect-ratio:16/10;min-height:0}
  .adv-wide .adv-body{padding:18px 18px 22px}
}
@media (max-width:520px){.adv-more{grid-template-columns:1fr}}

/* the Android app is for phones: Run 2 is a beta for powerful computers, so the app lists Run 1 only */
.dn-app .adv-card[href="/run2/"],.dn-app .s-run .adv-then{display:none}
.dn-app .s-run .adv-pair{grid-template-columns:1fr}

@media (prefers-reduced-motion:reduce){
  .adv-card,.adv-media img,.adv-go i{transition:none}
  .adv-card:hover,.adv-card:focus-visible{transform:none}
  .adv-card:hover .adv-media img,.adv-card:focus-visible .adv-media img,.adv-card:hover .adv-go i{transform:none}
}
.adv-wide + .ts-ad,.adv-wide ~ .ts-ad{margin-top:22px}