/* The arcade store (design-system/battlevs-design-system-super-mario-donkey, 7 Oct 2026), stage 1: the store shell.
   Loaded after neon.css on the store pages. Look only: same pages, links, labels, ids and test ids (Andrew: look only,
   in stages). Pixel headings (Silkscreen Bold, ink drop shadow), a dusk-sky hero band, square ink frames, an arcade
   sidebar, and horizontal game cards with each game's pixel thumbnail. */
:root{--gc-ink:#120A26;--gc-frame:#3A2A63}

/* ---- pixel headings ---- */
.sechead h2,.ltitle h1{font-family:var(--font-pixel)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:0!important;text-shadow:3px 3px 0 var(--gc-ink)!important}
.sechead h2{font-size:32px!important;line-height:36px!important}
.ltitle h1{font-size:44px!important;line-height:46px!important}
@media (max-width:899px){.sechead h2{font-size:24px!important;line-height:28px!important}.ltitle h1{font-size:32px!important;line-height:34px!important}}

/* ---- square ink frames on the store's panels ---- */
.sb-card{border-radius:0;box-shadow:0 0 0 3px var(--gc-ink),0 0 0 6px var(--gc-frame)}

/* ---- a two-column grid on wide pages ---- */
/* not the page background's decorative grid (.bgfx), which shares the class name */
:not(.bgfx)>.grid{grid-template-columns:minmax(0,1fr);gap:18px;padding:6px}
@container (min-width:720px){:not(.bgfx)>.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}

/* ---- square tags and arcade buttons ---- */
/* only the store's tags: Your stats has achievement tiles with the same class name */
.badge:is(.soon,.new,.updated,.feat){border-radius:0;font:400 9px/1 var(--font-arcade)!important;letter-spacing:0;height:22px;padding:0 7px;box-shadow:2px 2px 0 var(--gc-ink)}
.badge.new{background:#FF4FB8;color:#2A0620}
.btn{border-radius:0!important}
.btn.play.small{font:400 10px/1 var(--font-arcade)!important;letter-spacing:0;text-transform:uppercase}
.btn.play:not(.small){font-family:var(--font-arcade)!important;font-weight:400!important;font-size:14px!important;letter-spacing:0;text-transform:uppercase}

/* ---- the arcade sidebar: a stepped edge with cabinet stripes, pixel captions, square items ---- */
.sh-side{background:#120A26;border-right:0;box-shadow:inset -3px 0 0 #2A1B52,inset -6px 0 0 #FF4FB8,inset -9px 0 0 #FFB547,inset -12px 0 0 #2FD6F5,inset -15px 0 0 var(--gc-ink);padding-right:22px}
.sh-cap{font:400 8px/16px var(--font-arcade)!important;letter-spacing:0!important;color:#FFE14D!important;padding-bottom:6px!important}
.sh-cap::before{content:"▸ ";color:#FF4FB8}
.sh-item{border-radius:0;gap:10px}
.sh-item .ic{width:18px;display:grid;place-items:center}
.px-ic{width:18px;height:18px;display:block;image-rendering:pixelated}
.sh-item.is-soon .ic{opacity:.7}
.sh-item:hover{background:#1F1440;box-shadow:inset 0 0 0 2px var(--gc-frame)}
.sh-item[aria-current="page"]{background:#261747;box-shadow:inset 0 0 0 2px #FFE14D;color:#FFE14D;font-weight:700}
.sh-item[aria-current="page"]::after{content:"◀";width:auto;height:auto;border-radius:0;background:none;color:#FFE14D;font-size:10px;right:8px;left:auto;animation:arcade-blink 900ms steps(1) infinite}
.sh-item .tag{border-radius:0;font:400 7px/1 var(--font-arcade);letter-spacing:0;padding:2px 4px;box-shadow:2px 2px 0 var(--gc-ink)}
.sh-collapse,.sh-close,.sh-menu{border-radius:0}
.sh-side .logo{font-size:24px}
.sh-promo{border-radius:0;background:#1B1035;box-shadow:0 0 0 3px var(--gc-ink),inset 0 0 0 2px #FF4FB8;margin:3px}
.sh-promo b{font:700 14px/16px var(--font-pixel);text-transform:uppercase}
.sh-promo .btn,.sh-promo .btn.play.small{font:400 9px/20px var(--font-arcade)!important;text-transform:uppercase}
.sh-promo .btn.play{--fill:var(--accent);background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.st-promo-top{display:flex;align-items:center;gap:8px}
.st-promo-spr{width:20px;height:auto;flex:none;image-rendering:pixelated}
@media (min-width:900px){ /* the collapsed rail is laptop only; phones use the drawer */
  /* 13 Oct (Andrew): keep the items clear of the edge stripes (15px, drawn inside the rail) when collapsed too; the rail
     is 14px wider so the items keep their width */
  .sh.is-collapsed{grid-template-columns:90px minmax(0,1fr)}
  .is-collapsed .sh-side{padding-right:21px}
  .is-collapsed .sh-cap::before{content:""}
  .is-collapsed .sh-cap{font-size:6px!important}
  .is-collapsed .sh-item[aria-current="page"]::after{content:""}
  .is-collapsed .sh-item .px-ic{width:20px;height:20px}
  .is-collapsed .sh-item .lb::after{font:700 9px/11px var(--font-pixel);text-transform:uppercase}
  .is-collapsed .st-promo-top b{display:none}
  .is-collapsed .sh-promo{margin:3px 0;padding:6px;background:#1B1035;box-shadow:0 0 0 3px var(--gc-ink),inset 0 0 0 2px #FF4FB8}
  .is-collapsed .st-promo-top{justify-content:center}
  .is-collapsed .sh-promo .btn{font-size:7px!important}
}
@keyframes arcade-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sh-item[aria-current="page"]::after{animation:none}}