/* ==========================================================================
   Progression: the weapon picker on the new-fighter card, the Shop, the victory, Reroll and Heal
   owner: progression (agent 1). Loads last. Same kit as the rest: paper stickers, thick ink, hard drops,
   Lilita numbers, palette gradients (base.css tokens).
   ========================================================================== */

/* ---------- title: one even stack, Play on top, then Shop, Past Lives, Settings, How to play (P0-2 nav) ---------- */
.title-body .actions.title-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:min(360px,100%);justify-self:center}
.title-actions .btn{width:100%;min-width:0}
.title-actions .btn.ghost{min-height:54px;font-size:var(--t-btn)}
.title-actions .btn .ic,.death-side .actions .btn .ic{width:24px;height:24px}
.title-actions .btn.ghost .ic{width:28px;height:28px}

/* ---------- the new-fighter card: favorite weapon, the weapon picker ---------- */
.rb-class .rb-fav{display:block;margin-top:3px;font:var(--w-strong) var(--t-body)/1.3 var(--f-ui);color:var(--ink-2)}
.rb-fav .ic{width:18px;height:18px;margin:0 3px 0 2px;vertical-align:-.25em}
.rb-fav strong{font-weight:var(--w-strong);color:var(--ink)}
.rb-weapons{display:grid;gap:8px;min-width:0}
.rbw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.rbw-label{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.rbw-name{display:flex;align-items:center;gap:5px;min-width:0;font:400 var(--t-btn)/1 var(--f-display);color:var(--ink);white-space:nowrap}
.rbw-name .ic{width:20px;height:20px}
.rbw-row{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 8px}
.wt{
  all:unset;box-sizing:border-box;position:relative;flex:none;width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  border:3px solid var(--ink);border-radius:12px;background:var(--paper-2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 3px 0 var(--ink);
  transition:transform .12s var(--out),box-shadow .12s var(--out);
}
.wt .wt-ic{width:30px;height:30px}
@media (hover:hover) and (pointer:fine){
  .wt:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 5px 0 var(--ink)}
}
.wt:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 1px 0 var(--ink)}
.wt:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
/* the pick: the same paper gap and gold ring as the fighter strip's pick (.ft.on, nav.css) */
.wt.on{
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.8) 0 12%,rgba(255,255,255,0) 13%),linear-gradient(180deg,#fff3b8 0%,#f2c94c 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),var(--ring-pick),0 3px 0 var(--ink);
}
.wt-star{position:absolute;top:-9px;right:-9px;width:20px;height:20px}
.wt.locked{background:#e9dcc2;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 var(--ink)}
.wt.locked .wt-ic{filter:grayscale(1) contrast(.8) brightness(1.2);opacity:.5}
.wt.locked .wt-star{filter:grayscale(1);opacity:.6}
.wt-price{
  position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:1px;
  padding:1px 5px 1px 1px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);
  font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.wt-price .ic{width:13px;height:13px}
.rbw-desc{margin:0;min-height:1.4em;display:flex;align-items:flex-start;gap:6px;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
.rbw-desc .ic{width:20px;height:20px;flex:none;margin-top:-1px}
.rbw-desc b{font-weight:var(--w-strong);color:var(--ink)}

/* ---------- after a round: Reroll and Heal for coins; four cards with Lucky ---------- */
.draft-extras{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:2px}
.btn.dx{min-height:42px;padding:0 10px 0 12px;font-size:var(--t-name);gap:7px}
.btn.dx>.ic{width:22px;height:22px}
/* can't afford it (or full health): a flat, darker paper and muted words, not a see-through button; the price pill
   says why in red (.sh-price.short) */
.btn.dx:disabled{cursor:not-allowed;filter:none;opacity:1;transform:none;color:var(--ink-3);background:linear-gradient(180deg,#f7efe0 0%,#eadbbf 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(120,80,40,.1),var(--drop)}
.btn.dx:disabled>.ic{filter:grayscale(1);opacity:.55}
.dx-price.free{
  display:inline-flex;align-items:center;padding:3px 9px 4px;border:2.5px solid var(--ink);border-radius:999px;background:#dcf1c2;
  font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:#2f6a1c;-webkit-text-stroke:0;
}
@media (min-width:601px){
  .cards:has(>.card:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .cards:has(>.card:nth-child(4)) .card .name{font-size:var(--t-btn)}
}

/* ---------- a coin price (Shop buttons, Reroll, Heal) and the coin chip ---------- */
.sh-price{
  display:inline-flex;align-items:center;gap:3px;padding:2px 9px 2px 3px;border:2.5px solid var(--ink);border-radius:999px;background:#fffaf0;
  font:400 var(--t-name)/1 var(--f-display);color:var(--ink);-webkit-text-stroke:0;letter-spacing:0;font-variant-numeric:tabular-nums;
}
.sh-price .ic{width:20px;height:20px}
.sh-price.short{color:var(--enemy)}
.coin-chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 15px 6px 6px;border:var(--line-s) solid var(--ink);border-radius:999px;
  background:var(--g-paper);box-shadow:inset 0 2px 0 #fff,var(--drop-s);
}
.coin-chip .ic{width:32px;height:32px}
/* the coin count: gold Lilita with an ink stroke, like the round badge (gold-lo on paper was 2.6:1) */
.coin-chip b{font:400 var(--t-btn-l)/1 var(--f-display);color:var(--gold);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;font-weight:400;font-variant-numeric:tabular-nums}
/* a purchase: the count ticks down (ui/shop.js tickCoins), the chip bumps and the coin flips once */
.coin-chip.bump{animation:coinBump .42s var(--out)}
.coin-chip.bump .ic{animation:coinFlip .5s var(--out)}
@keyframes coinBump{35%{transform:scale(1.1) rotate(-3deg)}70%{transform:scale(.97) rotate(1deg)}}
@keyframes coinFlip{to{transform:rotateY(360deg)}}
.coin-chip span{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}

/* ---------- the victory: round 25 won ---------- */
#scr-victory{background:linear-gradient(90deg,rgba(42,26,46,.22) 0%,rgba(42,26,46,0) 50%)}
#scr-victory .screen-inner{max-width:1200px;display:grid}
.victory{
  position:relative;width:min(500px,100%);display:grid;gap:13px;padding:32px 24px 22px;
  box-shadow:inset 0 0 0 4px #f7ed9a,inset 0 3px 0 rgba(255,255,255,.55),var(--drop);
  animation:vicIn .55s var(--pop) backwards;
}
@keyframes vicIn{from{transform:translateY(30px) scale(.94);opacity:0}}
.vic-crown{position:absolute;top:-30px;right:22px;width:64px;height:64px;transform:rotate(8deg)}
.vic-title{margin:0;font:400 clamp(36px,3.8vw,48px)/1 var(--f-display);color:var(--ink);text-wrap:balance}
.vic-sub{margin:0;font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2)}
.vic-note{margin:0;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
.victory .actions{margin-top:2px}

/* ---------- the Shop ---------- */
#scr-shop{background:linear-gradient(180deg,rgba(240,214,164,.96),rgba(226,186,128,.98))}
#scr-shop .screen-inner{max-width:var(--menu-col,1180px);margin:0 auto}
.shop-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 18px;margin:12px 0 22px}
.shop-title{display:grid;gap:4px}
.shop-title h2{
  margin:6px 0 0;font:400 clamp(44px,5vw,64px)/1 var(--f-display);
  color:#fff;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);
}
.shop-side{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.shop-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.tab{
  all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px 0 12px;
  border:var(--line-s) solid var(--ink);border-radius:999px;background:var(--g-paper);
  box-shadow:inset 0 2px 0 #fff,var(--drop-s);font:400 var(--t-name)/1 var(--f-display);color:var(--ink);
  transition:transform .12s var(--out),box-shadow .12s var(--out);
}
.tab .ic{width:24px;height:24px}
.tab small{padding:2px 7px 3px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--ink-2);-webkit-text-stroke:0}
@media (hover:hover) and (pointer:fine){ .tab:hover{transform:translateY(-2px)} }
.tab:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.tab[aria-selected="true"]{background:var(--g-gold);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),var(--drop-s)}
.tab[aria-selected="true"]:is(:hover,:active){transform:none}
/* a press: the tab sinks onto its drop like the buttons */
.tab:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--ink);transition-duration:.06s}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px 16px;align-items:stretch}
.sh-card{
  position:relative;min-width:0;display:grid;grid-template-columns:62px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:14px;row-gap:12px;
  padding:16px 16px 16px 14px;background:var(--g-paper);border:var(--line) solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--lip),var(--drop);
}
.sh-card.has{background:linear-gradient(180deg,#fbf5e8 0%,#efe3c8 100%)}
.sh-icon{
  grid-row:1/span 2;width:62px;height:62px;display:grid;place-items:center;border-radius:16px;border:var(--line-s) solid var(--ink);
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75) 0 14%,rgba(255,255,255,0) 15%),linear-gradient(180deg,#fff3c4 0%,#efcf78 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(40,20,40,.12),0 4px 0 var(--ink);
}
.sh-icon .ic{width:44px;height:44px}
.sh-card.has .sh-icon{background:linear-gradient(180deg,#f7f1e4 0%,#e6d7b8 100%)}
.sh-main{display:grid;align-content:start;gap:5px;min-width:0}
/* Fighters tab: a portrait of the fighter type instead of an icon, plus one line saying what unlocking does */
.shop-grid[data-tab="fighters"] .sh-card{grid-template-columns:96px minmax(0,1fr)}
.sh-portrait{grid-row:1/span 2;width:96px;height:96px;border-radius:18px;border:var(--line-s) solid var(--ink);box-shadow:0 4px 0 var(--ink);object-fit:cover;background:#e6d7b8}
.sh-card:not(.has) .sh-portrait{filter:saturate(.35) brightness(.92)}
.sh-explain{grid-column:1/-1;margin:0 0 2px;font:var(--w-strong) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2)}
.sh-name{font:400 var(--t-h)/1 var(--f-display);color:var(--ink)}
.sh-line{font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
.sh-line b{font-weight:var(--w-strong);color:var(--gold-ink)}
.sh-now{display:block;font:var(--w-strong) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-2)}
.sh-now b{font-weight:var(--w-strong);color:var(--gold-ink)}
.sh-now .ic{width:16px;height:16px;margin-right:4px;vertical-align:-.2em}
.sh-tip{font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3)}
.sh-pips{display:flex;flex-wrap:wrap;gap:4px;margin:1px 0 2px}
.sh-pips i{width:14px;height:14px;border:2.5px solid var(--ink);border-radius:50%;background:var(--paper-2)}
.sh-pips i.on{background:radial-gradient(circle at 35% 30%,#fff 0 18%,rgba(255,255,255,0) 20%),var(--g-gold)}
.btn.sh-buy{grid-column:2;justify-self:start;align-self:end;min-height:44px;padding:0 6px 0 16px;font-size:var(--t-name);gap:9px}
.btn.sh-buy.short{background:var(--g-paper);color:var(--ink-3);-webkit-text-stroke:0;cursor:not-allowed;box-shadow:inset 0 3px 0 #fff,var(--drop-s)}
.btn.sh-buy.short:hover{transform:none;filter:none}
.sh-owned{
  grid-column:2;justify-self:start;align-self:end;display:inline-flex;align-items:center;gap:5px;padding:5px 13px 6px 7px;
  border:var(--line-s) solid var(--ink);border-radius:999px;background:#dcf1c2;color:#2f6a1c;font:var(--w-strong) var(--t-body)/1 var(--f-ui);
}
.sh-owned .ic{width:20px;height:20px}
.sh-card.just{animation:shBuy .55s var(--pop)}
@keyframes shBuy{0%{transform:scale(1)}40%{transform:scale(1.05) rotate(-.8deg)}100%{transform:scale(1)}}
.sh-card.nope{animation:shNope .32s ease}
@keyframes shNope{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shop-foot{margin:28px 0 8px;font:var(--w-strong) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-2)}

/* photo mode captures everything at rest */
.shot .victory,.shot .sh-card,.shot .coin-chip,.shot .coin-chip .ic{animation:none}

@media (max-height:780px) and (min-width:721px){
  .rb-weapons{gap:6px}
  .wt{width:38px;height:38px;border-radius:11px}
  .wt .wt-ic{width:27px;height:27px}
  .rbw-desc{font-size:var(--t-body)}
}
@media (max-width:720px),(max-aspect-ratio:4/5){
  #scr-victory{background:none}
  #scr-victory .screen-inner{margin:auto auto 0;max-width:600px}
  .victory{width:100%;gap:10px;padding:28px 16px 16px}
  .vic-crown{top:-26px;right:16px;width:52px;height:52px}
  .vic-title{font-size:30px}
  .vic-sub{font-size:var(--t-body);line-height:1.4}
  .vic-note{font-size:var(--t-caption);line-height:1.4}
  .victory .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .victory .actions .btn{width:100%}
  .rb-class .rb-fav{font-size:var(--t-caption)}
  .rb-weapons{gap:6px}
  .rbw-name{font-size:var(--t-name)}
  /* one row that scrolls sideways, fading out at the right edge */
  .rbw-row{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:-8px -16px -2px;padding:12px 16px 11px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .rbw-row::-webkit-scrollbar{display:none}
  .wt{width:40px;height:40px}
  .wt .wt-ic{width:28px;height:28px}
  .rbw-desc{font-size:var(--t-caption);line-height:1.35}
  .rbw-desc .ic{width:18px;height:18px}
}
@media (max-width:600px){
  .title-body .actions.title-actions{gap:10px;width:100%}
  .title-actions .btn.ghost{min-height:48px;font-size:var(--t-name)}
  .title-actions .btn .ic,.death-side .actions .btn .ic,.title-actions .btn.ghost .ic{width:22px;height:22px}
  .death-side .actions .btn.ghost{padding:0 16px}
  .shop-head{margin:4px 0 16px;align-items:center}
  .shop-title h2{font-size:var(--t-title);-webkit-text-stroke:8px var(--ink);text-shadow:0 5px 0 var(--ink)}
  .shop-side{width:100%;gap:8px}
  .shop-side .coin-chip{margin-right:auto}
  .coin-chip{padding:4px 12px 5px 5px}
  .coin-chip .ic{width:26px;height:26px}
  .coin-chip b{font-size:var(--t-h);-webkit-text-stroke:4px var(--ink)}
  .shop-side .btn{min-height:44px;padding:0 16px;font-size:var(--t-name)}
  .shop-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:14px}
  .tab{justify-content:center;flex-direction:column;gap:3px;min-height:58px;padding:6px 4px;border-radius:16px;font-size:var(--t-name-s);-webkit-text-stroke:0}
  .tab[aria-selected="true"]{-webkit-text-stroke:3.5px var(--ink)}
  .tab .ic{width:22px;height:22px}
  .tab small{display:none}
  .shop-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .sh-card{grid-template-columns:50px minmax(0,1fr);column-gap:12px;row-gap:9px;padding:13px 13px 13px 11px;border-radius:16px}
  .sh-icon{width:50px;height:50px;border-radius:13px}
  .sh-icon .ic{width:36px;height:36px}
  .shop-grid[data-tab="fighters"] .sh-card{grid-template-columns:72px minmax(0,1fr)}
  .sh-portrait{width:72px;height:72px;border-radius:14px}
  .sh-explain{font-size:var(--t-lead)}
  .sh-name{font-size:var(--t-btn)}
  .sh-line{font-size:var(--t-body)}
  .sh-pips i{width:12px;height:12px;border-width:2px}
  .btn.sh-buy{min-height:40px;font-size:var(--t-name)}
  .draft-extras{gap:8px;margin-top:4px}
  .btn.dx{min-height:38px;font-size:var(--t-name-s);padding:0 8px 0 10px;-webkit-text-stroke:0}
  .btn.dx>.ic{width:19px;height:19px}
  .btn.dx .sh-price{font-size:var(--t-name-s);padding:1px 7px 1px 2px}
  .btn.dx .sh-price .ic{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .wt,.tab{transition:none}
  .wt:hover,.tab:hover{transform:none}
  .victory,.sh-card.just,.sh-card.nope,.coin-chip.bump,.coin-chip.bump .ic{animation:none}
}

/* ---- progression additions go below ---- */

/* ---------- the Shop's "Next goal" strip (docs/research/game-ui.md §2.5; ui/shop.js renderGoal) ---------- */
.shop-goal{
  all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;
  margin:-6px 0 20px;padding:10px 16px 12px 10px;background:var(--g-paper);border:var(--line) solid var(--ink);border-radius:var(--r-panel);
  box-shadow:var(--lip),var(--drop);transition:transform .14s var(--out),box-shadow .14s var(--out);
}
.shop-goal[hidden]{display:none}
@media (hover:hover) and (pointer:fine){ .shop-goal:hover{transform:translateY(-2px)} }
.shop-goal:active{transform:translateY(2px);transition-duration:.06s}
.shop-goal:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.sg-ic{
  width:52px;height:52px;display:grid;place-items:center;border-radius:14px;border:var(--line-s) solid var(--ink);
  background:linear-gradient(180deg,#f7f1e4 0%,#e6d7b8 100%);box-shadow:0 3px 0 var(--ink);
}
.sg-ic .ic{width:36px;height:36px}
.shop-goal.ok .sg-ic{background:linear-gradient(180deg,#fff3c4 0%,#efcf78 100%)}
.sg-main{display:grid;gap:7px;min-width:0}
.sg-line{font:var(--w-strong) var(--t-lead)/1.2 var(--f-ui);color:var(--ink-2);overflow-wrap:anywhere}
.sg-line b{font:400 var(--t-name)/1 var(--f-display);color:var(--ink);font-weight:400}
.sg-bar{position:relative;height:14px;overflow:hidden;border-radius:999px;border:var(--line-xs) solid var(--ink);background:#cdb07e;box-shadow:inset 0 3px 0 rgba(90,50,30,.25)}
.sg-bar>i{position:absolute;left:0;top:0;bottom:0;background:var(--g-gold);border-right:2px solid var(--ink)}
.shop-goal.ok .sg-bar>i{border-right:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 45%,transparent 60%) -200% 0/300% 100% no-repeat,var(--g-gold);animation:sg-shine 4s ease-in-out 1s infinite}
@keyframes sg-shine{0%,70%{background-position:-200% 0,0 0}100%{background-position:200% 0,0 0}}
.sg-cost{display:inline-flex;align-items:center;gap:6px;font:400 var(--t-btn)/1 var(--f-display);color:var(--ink);white-space:nowrap}
.sg-cost .ic{width:26px;height:26px}
.shop-goal:not(.ok) .sg-cost{font:var(--w-strong) var(--t-lead)/1 var(--f-ui);color:var(--ink-2)}
.sh-card.goal{animation:shBuy .55s var(--pop);outline:4px solid var(--gold);outline-offset:3px}
@media (max-width:720px){
  .shop-goal{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:8px 12px 10px 8px;margin:-8px 0 14px}
  .sg-ic{width:40px;height:40px;border-radius:12px}
  .sg-ic .ic{width:28px;height:28px}
  .sg-line{font-size:var(--t-body)}
  .sg-line b{font-size:var(--t-name-s)}
  .sg-cost{font-size:var(--t-name)}
  .sg-cost .ic{width:20px;height:20px}
  .shop-goal:not(.ok) .sg-cost{font-size:var(--t-caption)}
}
@media (prefers-reduced-motion:reduce){ .shop-goal.ok .sg-bar>i,.sh-card.goal{animation:none} }