/* The store page. Separate from style.css on purpose: the game sets
     html, body { overflow: hidden }, which is exactly wrong for a page that
     scrolls.

     Two states. The landing is the title, the purse and three buttons, all
     centred; the shop is a full-screen panel over it holding the roster. The
     roster is in the DOM either way — one WebGL context feeds every card, and
     a display:none stage reports a zero-size rect, which is what makes the
     draw loop skip them all while the shop is shut.

     Each .stage is an ordinary 2D canvas that store.js blits a rendered frame
     into, so there is nothing delicate about the stacking here — backgrounds,
     z-index and overflow all behave normally. */
  :root {
    --ink: #cfe8ff;
    --deep: #140d2e;
    --panel: #1b1440;
    --gold: #ffd166;
    --mint: #2dd4bf;
    --slate: #3b3b6b;
    --ease: cubic-bezier(.22, .9, .3, 1);
  }
  html, body { background: var(--deep); color: var(--ink); margin: 0; min-height: 100%;
               font-family: "DynaPuff", "Comic Sans MS", "Segoe UI", Arial, sans-serif; }
  body.shopping { overflow: hidden; }

  /* ---------------------------------------------------------- the landing -- */
  .landing { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
             align-items: center; justify-content: center; gap: 4px; text-align: center;
             padding: 40px 24px; box-sizing: border-box; }
  h1 { font-family: "Fascinate Inline", cursive; font-size: clamp(52px, 12vw, 132px); font-weight: 400;
       margin: 0; line-height: 1.02; letter-spacing: 2px;
       background: linear-gradient(90deg, #ffd166, #ff8c42, #ff4d6d, #9b5de5);
       -webkit-background-clip: text; background-clip: text; color: transparent;
       filter: drop-shadow(0 0 34px rgba(255,140,66,0.55)); }
  .tag { margin: 10px 0 0; opacity: 0.7; font-size: clamp(14px, 1.7vw, 18px); }

  .purse { margin: 30px 0 34px; }
  .purse__count { font-size: clamp(46px, 8vw, 76px); font-weight: 800; color: var(--gold);
                  line-height: 1; filter: drop-shadow(0 0 22px rgba(255,209,102,0.35)); }
  .purse__count.bump { animation: pop 0.35s ease-out; }
  .purse__note { margin: 8px 0 0; font-size: 14px; letter-spacing: 2px;
                 text-transform: uppercase; opacity: 0.5; }

  .bar { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
  .btn { font: inherit; font-weight: 800; text-decoration: none; border: none; cursor: pointer;
         letter-spacing: 0.5px; display: inline-block; border-radius: 16px;
         font-size: clamp(17px, 2.2vw, 22px); padding: 14px 34px;
         transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease); }
  .btn--play { background: var(--mint); color: #04211d; box-shadow: 0 0 26px rgba(45,212,191,0.45);
               font-size: clamp(20px, 3vw, 30px); padding: 18px 52px; }
  .btn--play:hover { background: #4fe6d3; }
  .btn--shop { background: var(--gold); color: #2a1c00; box-shadow: 0 0 22px rgba(255,209,102,0.34); }
  .btn--shop:hover { background: #ffdf90; }
  .btn--alt { background: var(--slate); color: var(--ink); }
  .btn--alt:hover { background: #4b4b84; }

  .padhint { margin: 30px 0 0; font-size: 13px; opacity: 0.55; }

  /* --------------------------------------------------------- the shop ------ */
  .shop { position: fixed; inset: 0; z-index: 10; overflow-y: auto; overscroll-behavior: contain;
          background: #100a24; padding: 0 24px 48px; box-sizing: border-box;
          opacity: 0; transition: opacity 0.16s var(--ease); }
  .shop[hidden] { display: none; }
  .shop.is-open { opacity: 1; }

  .shop__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 16px;
               max-width: 1180px; margin: 0 auto; padding: 20px 0 16px;
               background: linear-gradient(#100a24 72%, rgba(16,10,36,0)); }
  .shop__title { font-family: "Fascinate Inline", cursive; font-weight: 400; font-size: clamp(20px, 4vw, 40px);
                 margin: 0; color: var(--gold); letter-spacing: 1px;
                 white-space: nowrap; }
  .shop__bar .chip { margin-left: auto; font-size: 25px; font-weight: 800; color: var(--gold);
                     background: rgba(20,13,46,0.75); border: 1px solid rgba(255,209,102,0.45);
                     border-radius: 12px; padding: 5px 16px; white-space: nowrap; }
  .shop__bar .chip.bump { animation: pop 0.35s ease-out; }
  .shop__close { font-size: 17px; padding: 10px 24px; }
  /* Below this the bar cannot hold all three without truncating the title into
     nonsense, so it goes; the dialog's aria-label still names it, and the purse
     takes the left with Close still on the right. */
  @media (max-width: 440px) {
    .shop__title { display: none; }
    .shop__bar .chip { margin-left: 0; }
    .shop__close { margin-left: auto; }
  }
  .shop__note { max-width: 1180px; margin: 30px auto 0; text-align: center; font-size: 13px; opacity: 0.55; }

  .grid { max-width: 1180px; margin: 0 auto;
          display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }

  /* The entrance. Cards start low, small and blank, and the stagger is one
     custom property per card so the whole sequence is CSS. --i is set in
     store.js at build time and never changes. */
  .card { background: var(--panel); border: 2px solid rgba(120,200,255,0.16); border-radius: 16px;
          padding: 12px; display: flex; flex-direction: column; gap: 8px;
          transition: border-color 0.2s, opacity 0.2s, box-shadow 0.2s; }
  .shop .card { opacity: 0; transform: translateY(26px) scale(0.94); }
  .shop.is-open .card { opacity: 1; transform: none;
                        transition: opacity 0.26s var(--ease) calc(var(--i) * 34ms),
                                    transform 0.34s var(--ease) calc(var(--i) * 34ms),
                                    border-color 0.2s, box-shadow 0.2s; }

  .stage { display: block; width: 100%; height: 240px; border-radius: 11px; background: #241a52; }
  .card h3 { margin: 0; font-size: 22px; color: #fff; }
  .card .blurb { margin: 0; font-size: 13px; line-height: 1.45; opacity: 0.72; min-height: 56px; }
  .card .act { font: inherit; font-size: 16px; font-weight: 800; border: none; border-radius: 10px;
               padding: 9px 0; width: 100%; cursor: pointer; background: var(--mint); color: #04211d; }
  .card .act:disabled { cursor: default; }
  .card.locked { opacity: 0.82; }
  .card.locked .act { background: var(--gold); color: #2a1c00; }
  .card.locked.poor .act { background: var(--slate); color: #9aa7c7; }
  .card.owned .act { background: var(--slate); color: var(--ink); }
  .card.equipped .act { background: var(--mint); color: #04211d; }
  .card.equipped { box-shadow: 0 0 22px rgba(45,212,191,0.30); }

  /* ------------------------------------------------------- the pad cursor -- */
  /* A gamepad is not a keyboard, so :focus-visible never fires for it. The
     cursor class is what store.js moves, and it is styled the same as a real
     keyboard focus so there is only one thing to recognise. */
  .btn:focus-visible, .card:focus-visible, .act:focus-visible,
  .is-cursor { outline: 3px solid #8fdcff; outline-offset: 4px; }
  .card.is-cursor { transform: translateY(-4px) scale(1.02); }
  .card:focus { outline: none; }

  @keyframes pop { 0% { transform: scale(0.2); opacity: 0; } 80% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .purse__count.bump, .shop__bar .chip.bump { animation: none; }
    .shop, .shop.is-open .card, .card, .btn { transition: none !important; }
    .shop .card { opacity: 1; transform: none; }
    .card.is-cursor { transform: none; }
  }