/* =========================================================================
   STORE SCREEN
   Owned by js/screen-store.js. Every selector is scoped under .store so it
   cannot leak into anyone else's screen. Tokens only — no hard-coded colour,
   no second bordered container inside a panel, no ambient motion.
   ========================================================================= */

.store{
  flex:1;min-height:0;overflow-y:auto;
  padding:var(--s4);
}
.store-inner{
  max-width:1080px;margin:0 auto;
  display:flex;flex-direction:column;gap:var(--s3);
}

/* ---- header -------------------------------------------------------------- */
.store-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.store-head h1{
  font-family:var(--font-display);font-size:var(--t-2xl);font-weight:700;
  letter-spacing:-.02em;line-height:1.15;
}
.store-sub{color:var(--ink-2);font-size:var(--t-sm);max-width:56ch;text-wrap:pretty;margin-top:2px}

/* the one-line result of the last buy or equip */
.store-status .notice{width:100%}

/* ---- wallet -------------------------------------------------------------- */
.store-wallet-body{
  display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);
  gap:var(--s5);align-items:start;
}
.store-wallet-main{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.store-balance{display:flex;align-items:baseline;gap:var(--s2);line-height:1;flex-wrap:wrap}
.store-balance .num{font-size:calc(var(--t-2xl) * 1.5);color:var(--gold);line-height:1}
.store-balance-unit{
  font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);
}
.store-balance-out{font-family:var(--font-display);font-size:var(--t-xl);color:var(--ink-2);line-height:1.2}
.store-wallet-main .hint{max-width:34ch}
.store-facts{width:100%}

/* the rule people otherwise get wrong, said in one sentence and then itemised */
.store-earn{
  border-left:1px solid var(--line-soft);
  padding-left:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);
}
.store-earn-rule{font-size:var(--t-md);font-weight:600;color:var(--ink);text-wrap:pretty;max-width:60ch}
.store-earn-list{display:flex;flex-direction:column;gap:5px}
.store-earn-list li{
  position:relative;padding-left:14px;
  font-size:var(--t-sm);color:var(--ink-2);text-wrap:pretty;line-height:1.4;
}
.store-earn-list li::before{
  content:"";position:absolute;left:2px;top:.55em;
  width:4px;height:4px;border-radius:50%;background:var(--ink-3);
}

/* ---- catalogue ----------------------------------------------------------- */
.store-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:var(--s3);align-items:start;
}
.store-cats.is-single{grid-template-columns:minmax(0,1fr)}
/* the error / retry block: buttons keep their own width, not the panel's */
.store-cats .stack-lg{align-items:flex-start}
.store-cats .stack-lg .notice{width:100%}

.store-cat-head{min-width:0;line-height:1.25}
.store-cat-head h2{white-space:nowrap}
.store-cat-head small{
  display:block;font-size:var(--t-xs);color:var(--ink-3);
  text-transform:none;letter-spacing:0;font-weight:400;
}

.store-list{display:flex;flex-direction:column}
.store-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "prev copy act"
    ".    why  why";
  gap:var(--s1) var(--s3);
  align-items:center;
  padding:var(--s3) 0;
}
.store-item + .store-item{border-top:1px solid var(--line-soft)}
.store-item:first-child{padding-top:0}
.store-item:last-child{padding-bottom:0}

.store-cell-prev{grid-area:prev}
.store-copy{grid-area:copy;min-width:0;line-height:1.3}
.store-name{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.store-name strong{font-size:var(--t-md);font-weight:700}
.store-copy small{display:block;color:var(--ink-3);font-size:var(--t-xs);text-wrap:pretty;margin-top:1px}

.store-act{grid-area:act;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.store-act > .btn:not(.btn-quiet){min-width:92px}
.store-price{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.store-price .num{font-size:var(--t-md);color:var(--gold)}
.store-price .dim{font-size:var(--t-xs)}
.store-why{grid-area:why;margin:0}
.store-note{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line-soft)}

/* ---- previews ------------------------------------------------------------
   Token: the real sprite cell. Dice and board: the real shape, in neutral
   surfaces, because the finish is not something this screen can honestly
   draw. Title: the label itself. */
.store-prev{width:38px;height:38px;flex:none}
.store-prev-blank{
  display:block;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
}
.store .die.store-prev{width:38px;height:38px;padding:11%;gap:2px;border-radius:var(--r-sm)}
.store-prev-board{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:2px;padding:3px;
  background:var(--surface-3);
  border:1px solid var(--line);border-radius:var(--r-sm);
}
.store-prev-board i{background:var(--surface);border-radius:1px}
.store-prev-title{width:auto;height:auto;display:inline-flex;align-items:center}

/* ---- coin packs ----------------------------------------------------------
   A price list and a plain statement. There is deliberately no control here:
   nothing on this screen can take money. */
.store-packs-notice{width:100%}
.store-packs{display:flex;flex-direction:column;margin-top:var(--s3)}
.store-pack{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) 0;
}
.store-pack + .store-pack{border-top:1px solid var(--line-soft)}
.store-pack-coins{display:flex;align-items:baseline;gap:5px}
.store-pack-coins .num{font-size:var(--t-lg);color:var(--gold)}
.store-pack-coins .dim{font-size:var(--t-xs)}
.store-pack-price{font-size:var(--t-md)}
.store-packs-panel .hint{margin-top:var(--s3)}

/* ---- loading ------------------------------------------------------------- */
.store-sk{height:46px;border-radius:var(--r);background:var(--surface-2)}
.store-sk + .store-sk{margin-top:var(--s2)}

/* ---- narrow -------------------------------------------------------------- */
@media (max-width:760px){
  .store-wallet-body{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .store-earn{border-left:0;border-top:1px solid var(--line-soft);padding-left:0;padding-top:var(--s4)}
}
@media (max-width:560px){
  .store{padding:var(--s3)}
  .store-head h1{font-size:var(--t-xl)}
  .store-item{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "prev copy"
      "why  why"
      "act  act";
    align-items:start;
  }
  .store-act{
    flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;margin-top:var(--s1);
  }
  .store-act > .btn:not(.btn-quiet){flex:1}
}