/* Store bar look: pill. Scoped to :root[data-nav="pill"]; shared structure is in nav.css.
   A night-glass capsule floating over the sky that stays quiet so the pixel art leads.
   It hugs its content and centres: just the links and Buy at the top of the page.
   Two game touches: a gold pixel arrow marks the link you're on, and after the hero
   the pill widens and prints in a two-tone pixel logo. */
:root[data-nav="pill"]{
  --bar-gap:10px; --bar-h:56px; --bar-max:1180px; --nav-h:70px;
  --pill-pad:5px;                 /* + 1px border = inset that leaves 44px inner pills, concentric */
  --pill-lead:16px;               /* capsule edge to logo text */
  --pill-open:6px;                /* extra room at the capsule's left end, so the arrow never crowds the curve */
  --pill-glass:rgba(20,29,50,.74); --pill-solid:#141D32;
  --pill-edge:rgba(255,244,214,.16);
  --pill-hover:rgba(255,244,214,.08);
  --pill-ink:#FFF4D6;
  --pill-ease:cubic-bezier(.23,1,.32,1);
  --pill-logo:8px;                /* Press Start 2P draws on an 8px grid; 8px stays pixel-exact at 2x and 3x */
  /* Arrow sprite: 4x7 pixels of 1.5px (crisp at 2x), about the links' cap height. */
  --pill-cur:polygon(0 0,25% 0,25% 14.29%,50% 14.29%,50% 28.57%,75% 28.57%,75% 42.86%,100% 42.86%,100% 57.14%,75% 57.14%,75% 71.43%,50% 71.43%,50% 85.71%,25% 85.71%,25% 100%,0 100%);
  --pill-cur-x:4px
}
@media (max-width:599px){
  :root[data-nav="pill"]{--pill-cur-x:3px}
}
@media (max-width:389px){
  :root[data-nav="pill"]{--pill-lead:14px; --pill-cur-x:2px}
}
@media (min-width:600px){
  :root[data-nav="pill"]{--bar-gap:14px; --bar-h:54px; --pill-pad:4px; --pill-lead:18px; --nav-h:72px;
    --pill-logo:12px}             /* 12px: crisp at 2x */
}

/* Capsule: sized by its content and centred by nav.css's auto margins. */
:root[data-nav="pill"] .storebar__in{
  width:fit-content; gap:0; padding:var(--pill-pad); padding-left:calc(var(--pill-pad) + var(--pill-open));
  border:1px solid var(--pill-edge); border-radius:999px;
  background:var(--pill-solid); color:var(--pill-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px -14px rgba(9,14,34,.62), 0 2px 6px -2px rgba(9,14,34,.26);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale
}
/* brightness keeps white clouds from turning the glass grey as they drift behind it */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root[data-nav="pill"] .storebar__in{background:var(--pill-glass);
    -webkit-backdrop-filter:blur(16px) saturate(140%) brightness(.85); backdrop-filter:blur(16px) saturate(140%) brightness(.85)}
}
@media (prefers-reduced-transparency:reduce){
  :root[data-nav="pill"] .storebar__in{background:var(--pill-solid); -webkit-backdrop-filter:none; backdrop-filter:none}
}

/* Links and Buy share one pill shape and one motion */
:root[data-nav="pill"] .navlinks{gap:2px}
:root[data-nav="pill"] .navlinks a,
:root[data-nav="pill"] .navbuy,
:root[data-nav="pill"] .storebar__logo{
  border-radius:999px; -webkit-tap-highlight-color:rgba(255,244,214,.14)   /* iOS may skip :active, so taps flash the hover fill */
}
:root[data-nav="pill"] .navbuy{-webkit-tap-highlight-color:rgba(28,37,65,.14)}
:root[data-nav="pill"] .navlinks a{
  position:relative; padding:0 12px 0 16px; color:var(--pill-ink);
  font:500 14px/1 'Space Grotesk',system-ui,sans-serif; letter-spacing:.01em;
  transition:background-color 160ms ease, transform 160ms var(--pill-ease)
}
:root[data-nav="pill"] .navlinks a:active{transform:scale(.96)}

/* Buy: gold with a hard 2px lip, the hero's stepped shadow as a button edge; pressing sinks it 1px. */
:root[data-nav="pill"] .navbuy{
  gap:10px; margin-left:6px; padding:0 18px;
  background:#FFD166; color:#1C2541;
  font:700 14px/1 'Space Grotesk',system-ui,sans-serif; letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 #E0A92E;
  transition:background-color 160ms ease, transform 160ms var(--pill-ease), box-shadow 160ms var(--pill-ease)
}
:root[data-nav="pill"] .navbuy-price{font-weight:500; color:rgba(28,37,65,.8); padding-left:10px; border-left:1px solid rgba(28,37,65,.22)}
:root[data-nav="pill"] .navbuy:active{transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* Hover only where a pointer can hover, so taps never leave a stuck fill. */
@media (hover:hover){
  :root[data-nav="pill"] .storebar__logo:hover{background:var(--pill-hover)}
  :root[data-nav="pill"] .navbuy:hover{background:#FFC23D}
}
/* The game-menu arrow. It rests on the section you're reading (Product before any
   section is current) and keeps flashing, like a title-screen cursor. Pointing at or
   tabbing to a link snaps it there. It lives in the link's left padding, so moving it
   never shifts the text. Split rules keep the resting arrow working without :has(). */
:root[data-nav="pill"] .navlinks a::before{
  content:""; position:absolute; left:var(--pill-cur-x); top:calc(50% - 5.25px);
  width:6px; height:10.5px; background:#FFD166; clip-path:var(--pill-cur); visibility:hidden
}
:root[data-nav="pill"] .navlinks a.on::before{visibility:visible; animation:navpill-blink 1.1s steps(1,end) infinite}
:root[data-nav="pill"] .navlinks:where(:not(:has(a.on))) a:first-child::before{visibility:visible; animation:navpill-blink 1.1s steps(1,end) infinite}
@keyframes navpill-blink{0%{opacity:1}60%{opacity:0}}
:root[data-nav="pill"] .storebar__in:where(:has(.navlinks a:focus-visible)) .navlinks a::before{visibility:hidden}
:root[data-nav="pill"] .navlinks a:focus-visible::before{visibility:visible; animation:navpill-blink 1.1s steps(1,end) infinite}
@media (hover:hover){
  :root[data-nav="pill"] .storebar__in:where(:has(.navlinks a:hover)) .navlinks a::before{visibility:hidden}
  :root[data-nav="pill"] .navlinks a:hover::before{visibility:visible; animation:navpill-blink 1.1s steps(1,end) infinite}
}

/* Focus rings sit inside each pill, so they never collide with the capsule's rounded ends.
   Buy is gold itself, so its ring is navy (about 10:1). */
:root[data-nav="pill"] .storebar__in :focus-visible{outline:2px solid #FFD166; outline-offset:-2px}
:root[data-nav="pill"] .navbuy:focus-visible{outline-color:#1C2541; outline-offset:-4px}

/* Mini logo: the hero title in miniature. Hard colour stops sit on the font's pixel rows
   (2 cream, 3 colour, 2 lower band, like the hero), so the bands stay crisp at this size.
   Tracking and shadow are one font pixel (.125em), so both stay on the grid. */
:root[data-nav="pill"] .storebar__logo{
  display:inline-flex; align-items:center; column-gap:1em; min-height:44px; margin-right:4px;
  padding:0 calc(var(--pill-lead) - var(--pill-pad)) 0 calc(var(--pill-lead) - var(--pill-pad) - var(--pill-open));
  font:400 var(--pill-logo)/1 'Press Start 2P',monospace; letter-spacing:.125em;
  transition:opacity 160ms ease, visibility 0s linear 160ms, background-color 160ms ease
}
:root[data-nav="pill"] .storebar__logo span{
  display:block; color:transparent; -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(.125em .125em 0 #69419A);
  clip-path:inset(0 100% 0 0); transition:clip-path 0s linear 160ms
}
:root[data-nav="pill"] .storebar__logo-pocket{background-image:linear-gradient(#FFF4D6 0 25%, #FFD166 25% 62.5%, #FF6B72 62.5%)}
:root[data-nav="pill"] .storebar__logo-pixel{background-image:linear-gradient(#FFF4D6 0 25%, #62D8E8 25% 62.5%, #9D6BFF 62.5%)}
/* The morph: the pill widens (nav.css), then the name prints in one letter per step,
   like an RPG text box reopening. It waits for the bar to be on screen (it is usually hidden
   when the hero passes), and clears only after the bar has slid away, so each return retypes.
   Each step is exactly one tracked glyph cell, so no letter is ever cut. */
:root[data-nav="pill"] .storebar.is-past-hero .storebar__logo{
  transition:opacity 0s, visibility 0s, background-color 160ms ease
}
:root[data-nav="pill"] .storebar.is-hidden .storebar__logo span{transition-delay:300ms}
:root[data-nav="pill"] .storebar.is-past-hero:not(.is-hidden) .storebar__logo span{clip-path:inset(0)}
:root[data-nav="pill"] .storebar.is-past-hero:not(.is-hidden) .storebar__logo-pocket{transition:clip-path 240ms steps(6,start) 200ms}
:root[data-nav="pill"] .storebar.is-past-hero:not(.is-hidden) .storebar__logo-pixel{transition:clip-path 200ms steps(5,start) 500ms}
@media (prefers-reduced-motion:reduce){
  :root[data-nav="pill"] .storebar__logo span{transition:none !important}
  :root[data-nav="pill"] .navlinks a::before{animation:none !important}
  :root[data-nav="pill"] .navlinks a:active,
  :root[data-nav="pill"] .navbuy:active{transform:none}
}

/* Phone: the logo stacks on two lines like the hero title. */
@media (max-width:599px){
  :root[data-nav="pill"] .navlinks a{padding:0 8px 0 12px}
  :root[data-nav="pill"] .navbuy{padding:0 16px}
  /* 2px gap: an 18px block centres on a whole pixel in the 44px slot */
  :root[data-nav="pill"] .storebar__logo{flex-direction:column; align-items:flex-start; justify-content:center; row-gap:2px}
  :root[data-nav="pill"] .storebar__logo-pixel{margin-left:.5em}
}
@media (max-width:389px){
  :root[data-nav="pill"] .storebar__logo{margin-right:2px}
  :root[data-nav="pill"] .navlinks a{padding:0 6px 0 10px}
  :root[data-nav="pill"] .navbuy{margin-left:2px; padding:0 14px}
}

/* Wider: a hairline splits the logo from the links; it opens and closes with the logo's slot. */
@media (min-width:600px){
  :root[data-nav="pill"] .storebar__logo{margin-right:6px}
  :root[data-nav="pill"] .storebar__slot-in::after{content:""; flex:0 0 1px; height:20px; margin-right:8px; background:var(--pill-edge)}
  :root[data-nav="pill"] .navbuy{margin-left:10px}
}
/* Until the price fits beside the logo and links, Buy carries the label alone (as on phones). */
@media (min-width:600px) and (max-width:679px){
  :root[data-nav="pill"] .navbuy-price{display:none}
}