/* The store home on top of the design's own CSS (arcade-store.css): only what the design leaves to the page.
   Columns as the StoreV2 cards: 2 with the sidebar open, 3 with it collapsed, 1 on phones. */
.hc-grid{--hc-cols:2}
@media (min-width:900px){.sh.is-collapsed .hc-grid{--hc-cols:3}}
.hc-art{display:block}
/* The scoreboard's per-game bar cells (td.bar): store.css's old header rule .bar made them flex rows, so the bars
   shrank to nothing. A table cell again, as in the design. */
.bv-pergame td.bar{display:table-cell}
.hc-body h3 a{color:inherit;text-decoration:none}
.hc-body h3 a:hover{text-decoration:underline}
/* the top bar: the laptop one has Discord and Your stats (the sidebar has the logo); the phone one, as StoreV2Phone,
   the ☰ and the logo in the middle */
@media (min-width:900px){.st-top-logo,.st-top .sh-menu{display:none}}
@media (max-width:899px){.st-top-lap{display:none!important}.st-top .sp{display:flex;justify-content:center}}
/* The phone top bar as StoreV2Phone, with Andrew's changes (7 Oct 2026): ☰ on the left, the logo dead centre,
   the Discord button on the right where the card has Search. Three columns, so the logo stays centred whatever the
   buttons' widths. Below 414px Discord shows just its tile (its label stays for screen readers). */
@media (min-width:900px){.st-top-dc{display:inline-flex}}
@media (max-width:899px){
  .sh .st-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-2)}
  .sh .st-top .sh-menu{justify-self:start;width:auto;padding:0 12px;font-size:14px;gap:6px}
  .st-top .sp{grid-column:2}
  .st-top .st-top-logo{font-size:20px}
  .st-top .st-top-dc{grid-column:3;justify-self:end}
}
@media (max-width:413px){.st-dc-word{display:none}.sh .st-top .st-top-dc{padding:0 6px!important}}
.st-menu-word{display:none} /* the ☰ alone, no "Menu" word (Andrew, 7 Oct 2026) */
/* The hero's hi-score tiles on phones (Andrew, 7 Oct 2026): HI-SCORE across the full width, THIS WEEK and GAMES as two
   equal halves under it, so the edges line up at every phone width instead of GAMES wrapping alone */
@media (max-width:899px){
  .skin-store .st-hiscore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;align-self:stretch}
  .skin-store .st-hiscore .stat:first-child{grid-column:1 / -1}
}
.st-top .bv-btn.hidden{display:none}
/* Game card thumbnails move only while a mouse is over the card (Andrew, 7 Oct 2026), each with its game's own design
   animation: flames and the harbour lamp, the dice rolling under the bulbs, a coin dropping, the climber bobbing,
   the player bobbing while the robot thinks. Phones, touch and reduce motion see them still. */
.hc-art .sn-flame,.hc-art .sn-lamp,.hc-art .sn-beam,.hc-art .ac-bulbs{animation:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hc:hover .hc-art .sn-flame{animation:sn-flicker 500ms steps(1) infinite}
  .hc:hover .hc-art .sn-lamp,.hc:hover .hc-art .sn-beam{animation:sn-blink 1200ms steps(1) infinite}
  .hc:hover .hc-art .ac-bulbs{animation:ac-chase 600ms steps(1) infinite}
  .hc:hover .hc-art .th-die:not(.is-kept){animation:bv-tumble 700ms steps(4) infinite}
  .hc:hover .hc-art .th-four .th-slot:nth-child(3) .th-token{--fall:2;animation:f4-drop var(--dur-slow) steps(6) both}
  .hc:hover .hc-art .th-spr--h{animation:gc-bob 700ms steps(1) infinite}
  .hc:hover .hc-art .th-port--h .th-sprite{animation:gc-bob 700ms steps(1) infinite}
  .hc:hover .hc-art .rr-robot--idle{animation:sn-blink 900ms steps(1) infinite}
}
@keyframes bv-tumble{0%{transform:rotate(-200deg) scale(.7)}70%{transform:rotate(12deg) scale(1.05)}100%{transform:rotate(0) scale(1)}}
@keyframes f4-drop{0%{transform:translateY(calc(-112% * var(--fall,4)));animation-timing-function:cubic-bezier(.55,0,1,.45)}70%{transform:translateY(6%);animation-timing-function:ease-out}85%{transform:translateY(-5%);animation-timing-function:ease-in}100%{transform:translateY(0)}}
/* Not in the design but kept (set your agent up once, recent results): the design's square panel, so they sit with it.
   The panel and heading are the design's own .pg-band and .bv-scoreboard ones. */
#setup-card{margin:32px 3px 0;border-radius:0;background:#1B1035;box-shadow:0 0 0 3px var(--gc-ink),inset 0 0 0 2px #7A68A8}
#setup-card h2{font-family:var(--font-pixel)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:0!important;font-size:20px!important;line-height:24px!important;text-shadow:2px 2px 0 #120A26}
#setup-card .setup-msg{border-radius:0;box-shadow:inset 0 0 0 2px #3A2A63}
#recent.wide{border-radius:0;background:#1B1035;box-shadow:0 0 0 3px var(--gc-ink),inset 0 0 0 2px #3A2A63;margin:3px}
/* Wider than the design's 1280 laptop (Andrew, 7 Oct 2026): the words stay where the design puts them, and only the
   example game comes in from the right edge, to where it would sit if words and game were centred together (the
   design's 1.15fr + 420px pair, 1052px). The words' column ends where the game begins, so they never meet. The sun sits
   just left of the game, between it and the words, as PixelHeadings has it on the right of the words.
   cqw is the main column (.sh-main); the hero is 12px narrower and has 40px of padding each side. */
@container (min-width:941px){
  .skin-store .st-hero{--crt-in:max(0px,calc((100cqw - 1144px) / 2))}
  /* with the sidebar collapsed the hero is wider, so the game sits a touch further right (Andrew) */
  .sh.is-collapsed .skin-store .st-hero,.skin-store.sh.is-collapsed .st-hero{--crt-in:max(0px,calc((100cqw - 1144px) / 2 - 72px))}
  .skin-store .st-hero .st-crt{position:relative;right:var(--crt-in)}
  .skin-store .st-hero .st-hero-txt{margin-right:var(--crt-in)}
  .skin-store .st-hero .gc-sun{left:calc(100cqw - 92px - 420px - var(--crt-in) - 110px)}
  /* the climber stands in front of the antenna building (skyline x 57 to 70, its bottom windows dark) and the robot in
     front of the next one (x 71 to 82). The skyline spans the hero (main column less 12px) at 160 units, so a unit is
     (100cqw - 12px) / 160; each sprite is 40px wide. */
  .skin-store .st-cast{left:calc((100cqw - 12px) * 63.5 / 160 - 12px);gap:calc((100cqw - 12px) * 13 / 160 - 56px)}
}
/* The climber and robot at the 40px the design's .st-cast-spr asks for (its .skin .gc-sprite rule outranks it), a
   touch off the buildings' centres (Andrew), standing on the ground: the foot of the skyline (the design's girder
   under them is drawn only in the Climb or Slide skin, so on the store they floated 24px up). The climber jumps like
   a platform game hero instead of the 2px bob: a quick rise, a moment at the top, a fall back down, a pause. */
.skin-store .st-cast{bottom:0}
.skin-store .st-cast .st-cast-spr{width:40px}
.skin-store .st-cast .st-cast-spr.is-active{animation:st-jump 1.8s infinite}
@keyframes st-jump{
  0%,45%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
  62%{transform:translateY(-40px);animation-timing-function:linear}
  66%{transform:translateY(-40px);animation-timing-function:cubic-bezier(.6,0,.8,.2)}
  83%,100%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.skin-store .st-cast .st-cast-spr.is-active{animation:none}}
/* The agent's line on the example table sits over the board's marks (the design has the misses on top of it) */
.st-crt .sh-bubble{z-index:3;animation:st-bubble 8.6s linear both}
/* and it pops up about 1.5 s after the page opens, stays about 7 s, then goes */
@keyframes st-bubble{0%,17.4%{opacity:0;visibility:hidden}17.6%,97.7%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
/* The design's laptop card is 1280 wide. When the main column is too narrow for the headline beside the table (a smaller
   laptop with the sidebar open), the hero stacks as the design's phone card does: words, then the table, then the cast. */
.sh-main{container-type:inline-size}
@container (max-width:940px){
  .skin-store .st-hero{grid-template-columns:1fr;padding-bottom:110px}
  .skin-store .st-hero .st-crt{max-width:560px}
  .skin-store .st-cast{left:50%;transform:translateX(-50%);gap:90px}
}
/* the laptop card's three steps in a row and its Discord band in a line; the phone card stacks both */
@media (min-width:900px){.st-steps{grid-template-columns:repeat(3,1fr)}.st-band{flex-direction:row;align-items:center}}
/* Laptop footer and Discord band, as the store had them (Andrew, 7 Oct 2026): the logo on the left with the menu on
   the same line to the right and "Games by BattleVS Studio" under the logo; the band's words on the left, its button
   at the right edge. */
@media (min-width:900px){
  .pg-foot{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--space-6)}
  .pg-foot nav{justify-content:flex-end}
  .pg-foot small{grid-column:1 / -1}
  .st-band p{flex:1}
}
/* A little more room either side of the main column on laptops (Andrew, 7 Oct 2026): 32px at 1280 up to 48px at 1920,
   where the design has 24px */
@media (min-width:900px){.sh-main{padding-left:clamp(32px,2.5vw,56px);padding-right:clamp(32px,2.5vw,56px)}}
/* Phones narrower than the design's 375 card (320 to 359px): the hero type steps down so "HUMANS VS" stays on one line */
@media (max-width:359px){
  .skin-store.sh .st-h1{font-size:30px!important;line-height:32px!important}
  .skin-store .st-hero .lead{font-size:15px;line-height:22px}
  /* the scoreboard's arcade digits and Your stats' achievement tiles fit the narrow screen */
  .skin-store .bv-scoreboard .bv-team .bv-big{font-size:36px;line-height:40px}
  .pg-achgrid{grid-template-columns:minmax(0,1fr)}
  /* a game card's Play and See the game wrap instead of running off the edge (the card keeps them on one line at 375) */
  .skin-store.sh .hc-actions{flex-wrap:wrap}
}
/* Play / Create (13 Oct 2026): /create's switch at the left of the home page's top menu (laptop and up) */
.st-top .st-mode{margin-left:0;flex:none}
.st-top .st-mode[hidden]{display:none!important}
/* The switch's own look (the same as /create's .cr-seg in create.css), for the pages that don't load create.css */
.st-top .st-mode{display:flex;gap:0;padding:3px;background:var(--bg-1);box-shadow:inset 0 0 0 1px var(--line-1)}
.st-top .st-mode a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;font-family:var(--font-arcade);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);text-decoration:none}
.st-top .st-mode a[aria-current="page"]{color:var(--accent);background:var(--bg-3);box-shadow:inset 0 0 0 1px #5A3F94,0 0 18px -6px rgba(255,79,184,.6)}
.st-top .st-mode a:hover{color:var(--text-1)}
.st-top .st-mode a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.st-top .st-mode .cr-ic{width:12px;height:12px;flex:none;image-rendering:pixelated}