/* Stack 5 sections under the game on /game (theme of the week, your matches, coming up, how to play). Adapted from the game-pivot preview (css/play.css). Uses the brand variables in styles.css. */
.s5-hero{position:relative;overflow:hidden;padding:26px 0 8px;background:radial-gradient(120% 80% at 85% 0%,#b69cff26,transparent 60%),radial-gradient(90% 70% at 0% 100%,#7ce7ff1f,transparent 60%)}
.s5-inner{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:center}
.s5-kicker{margin:0;color:var(--accent);font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em}
.s5-title{margin:4px 0 4px;font-size:clamp(2.7rem,13vw,4.6rem);line-height:.95}
.s5-tag{margin:0 0 8px;font-weight:800;font-size:1.05rem;color:var(--accent)}
.s5-pitch{margin:0 0 14px;color:var(--muted);font-size:.93rem;max-width:34em}
.s5-play{min-height:56px;font-size:1.12rem;padding:0 26px;box-shadow:0 10px 28px #ffcb3d4d;border-radius:14px;gap:8px}
.s5-count{margin:10px 0 0;color:var(--muted);font-size:.8rem}.s5-count b{color:var(--text)}
.s5-art{position:relative;width:112px;height:165px;align-self:start;margin-top:14px}
.s5-art .fp-mini{width:80px}.s5-art .fp-vs{left:52px;top:40px}
.section.s5-sec{padding-top:22px;padding-bottom:8px}
.s5-h{margin:0 0 2px;font-size:1.45rem;font-weight:900;letter-spacing:-.01em}
.s5-sub{margin:0 0 12px;color:var(--muted);font-size:.9rem}

/* Theme of the week */
.tw-card{--a:#ffcb3d;--b:#b69cff;--bg1:#1a1530;--bg2:#120f20;position:relative;padding:16px;border-radius:22px;background:linear-gradient(150deg,var(--bg1),var(--bg2));border:2px solid color-mix(in srgb,var(--a) 45%,transparent);box-shadow:0 0 40px color-mix(in srgb,var(--a) 20%,transparent);overflow:hidden}
.tw-card::after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--b) 35%,transparent),transparent 70%);pointer-events:none}
.tw-spooky{--a:#ff8a1f;--b:#b46cff;--bg1:#2a1440;--bg2:#120a1c}
.tw-fire{--a:#ff6a3d;--b:#ffcb3d}.tw-water{--a:#4fc3ff;--b:#7ce7ff}.tw-electric{--a:#ffe14d;--b:#fff1a0}.tw-mega{--a:#ff7ad9;--b:#7ce7ff}
.tw-k{margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.78rem}
.tw-badge{background:var(--a);color:#160c02;font-weight:900;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:.2rem .6rem;font-size:.7rem}
.tw-dates{color:#e6dcf5;font-weight:700}
.tw-main{display:flex;align-items:center;gap:12px}
.tw-emoji{font-size:3rem;line-height:1;filter:drop-shadow(0 4px 10px #0008)}
@media (prefers-reduced-motion:no-preference){.tw-emoji{animation:tw-bob 2.8s ease-in-out infinite}}
@keyframes tw-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
.tw-t{min-width:0}
.tw-t h2{margin:0;font-size:clamp(1.8rem,9vw,2.5rem);line-height:1.05;font-weight:900;color:var(--a)}
.tw-note{margin:3px 0 0;font-weight:700;font-size:.9rem}
.tw-blurb{margin:10px 0 14px;font-size:.98rem;color:#e6dcf5}
.tw-play{position:relative;z-index:1;width:100%;min-height:58px;font-size:1.12rem;font-weight:900;color:#1a0b00;border:0;background:linear-gradient(135deg,#ff9a2e,#ff6a00);box-shadow:0 8px 24px #ff8a1f55}
.tw-play:hover{filter:brightness(1.08)}
.tw-cd{margin-top:14px;text-align:center;position:relative;z-index:1}
.tw-cd-k{margin:0 0 6px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#d9c8f0}
.tw-cd-v{display:flex;justify-content:center;gap:8px}
.cd-u{display:grid;min-width:58px;padding:7px 4px;border-radius:12px;background:#0007;border:1px solid #ffffff14}
.cd-u b{font-size:1.45rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.cd-u small{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tw-link{margin:12px 0 0;text-align:center;position:relative;z-index:1}.tw-link a{color:#ffb347;font-weight:800}

/* Your matches */
.ms-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ms-box{display:grid;justify-items:center;padding:12px 4px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:center}
.ms-box b{font-size:1.6rem;font-weight:900;font-variant-numeric:tabular-nums}
.ms-box small{font-size:.72rem;color:var(--muted);font-weight:700}
.ms-box.p1 b{color:var(--accent2)}.ms-box.p2 b{color:var(--pink)}

/* Coming up (teasers) */
.gc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gc-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--a,var(--accent))}
.gc-e{font-size:1.6rem;flex:none}
.gc-t{min-width:0;display:grid;flex:1}.gc-t b{font-weight:800}.gc-t small{color:var(--muted);font-size:.8rem}
.gc-d{flex:none;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--a,var(--accent));white-space:nowrap;border:1px solid currentColor;border-radius:999px;padding:.2rem .55rem}

/* How to play */
.s5-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.s5-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.gs-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--holo);color:#140c1e}
.s5-steps b{font-weight:800}.s5-steps p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.s5-easy{margin:0 0 14px;padding:12px;border-radius:14px;background:#6be37a14;border:1px solid #6be37a40;font-size:.92rem}
.s5-cta{margin:4px 0 14px}

/* Theme card hint (the play button lives under the cards) */
.tw-hint{position:relative;z-index:1;margin:4px 0 0;padding:10px 12px;border-radius:12px;background:#0005;border:1px solid #ffffff14;font-size:.92rem;color:#e6dcf5}
.tw-hint a{color:#ffb347;font-weight:800}
.pf-alt-btn.pf-alt-glow{box-shadow:0 0 0 4px #ff8a1f88,0 8px 26px #b46cff66}

@media (min-width:600px){
  .s5-inner{grid-template-columns:minmax(0,1fr) 220px;gap:28px}
  .s5-art{width:220px;height:210px;margin-top:0;align-self:center}.s5-art .fp-mini{width:120px}.s5-art .fp-vs{left:96px;top:56px}
  .tw-card{padding:24px 28px}.tw-play{width:auto;padding:0 32px}
  .s5-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .s5-hero{padding:48px 0 18px}
  .tw-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:center}
  .tw-card>.tw-k,.tw-card>.tw-main,.tw-card>.tw-blurb,.tw-card>.tw-hint{grid-column:1}
  .tw-card>.tw-cd{grid-column:2;grid-row:1/5;margin-top:0}.tw-card>.tw-link{grid-column:1/-1;text-align:left}
  .s5-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
}