/* ==========================================================================
   Progression in everything and onboarding                     owner: progression (the pacing package; loaded last)
   The coach mark (ui/coach.js), the unlock reveal card and the Collection (ui/collection.js), the fresh-start sand wipe
   (ui/lineage.js), the title's next goal and quiet buttons, the Shop's milestone locks and "New!" ribbons, the weapon
   picker's mastery bars. The KayKit kit: paper, 3-4 px ink, hard drops, Lilita for names, Nunito for words.
   ========================================================================== */

/* ---------- the title: one big Play on the first launch; Settings and How to play share a row ---------- */
.title-body .actions.title-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.title-actions>.btn{grid-column:span 2}
.title-actions>.btn.half{grid-column:span 1;padding:0 10px 0 42px;font-size:var(--t-name);white-space:nowrap}
.title-actions>.btn.half .ic{left:12px;width:24px;height:24px;margin-top:-12px}
/* the first launch: Play is the one big thing; the rest stay, quieter (smaller, softer) until they matter */
.title-actions .btn.quiet{min-height:44px;font-size:var(--t-name);color:var(--ink-2);box-shadow:inset 0 3px 0 #fff,inset 0 -3px 0 rgba(120,80,40,.12),var(--drop-s);opacity:.9}
.title-actions .btn.quiet .ic{width:22px;height:22px;margin-top:-11px;opacity:.75}
.tb-badge{
  position:absolute;right:14px;top:50%;margin-top:-11px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;display:grid;place-items:center;
  border:var(--line-2,2px) solid var(--ink);border-radius:999px;background:var(--g-gold);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* the weight pass: the same small gold count as the Armory's tabs (gold: something to spend), and calm (no bob) */
.title-goal{
  all:unset;box-sizing:border-box;cursor:pointer;width:min(360px,100%);justify-self:center;display:grid;grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:7px 12px 8px 7px;background:var(--g-paper);border:var(--line-s) solid var(--ink);border-radius:16px;
  box-shadow:var(--lip),var(--drop-s);transition:transform .14s var(--out),box-shadow .14s var(--out);
}
.title-goal[hidden]{display:none}
@media (hover:hover) and (pointer:fine){ .title-goal:hover{transform:translateY(-2px);box-shadow:var(--lip),0 6px 0 var(--ink)} }
.title-goal:active{transform:translateY(2px);box-shadow:var(--lip),0 1px 0 var(--ink);transition-duration:.06s}
.title-goal:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.tg-ic{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:var(--line-xs) solid var(--ink);background:linear-gradient(180deg,#f7f1e4 0%,#e6d7b8 100%)}
.tg-ic .ic{width:30px;height:30px}
.title-goal.ok .tg-ic{background:linear-gradient(180deg,#fff3c4 0%,#efcf78 100%)}
.tg-main{display:grid;gap:5px;min-width:0}
.tg-line{font:var(--w-strong) var(--t-body)/1.2 var(--f-ui);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-line b{font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);font-weight:400}
.tg-cost{display:inline-flex;align-items:center;gap:4px;font:400 var(--t-name)/1 var(--f-display);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.tg-cost .ic{width:20px;height:20px}

/* the shared progress bar (title goal, Collection) */
.col-bar{position:relative;display:block;height:10px;overflow:hidden;border-radius:999px;border:var(--line-xs) solid var(--ink);background:#cdb07e;box-shadow:inset 0 2px 0 rgba(90,50,30,.25)}
.col-bar>i{position:absolute;left:0;top:0;bottom:0;background:var(--g-gold);border-right:2px solid var(--ink)}
.title-goal.ok .col-bar>i{border-right:0;width:100%!important}

/* ---------- the coach mark: a paper speech bubble with a seal, an arrow and Got it ---------- */
.coach{
  position:fixed;left:0;top:0;z-index:66;width:max-content;max-width:min(340px,calc(100vw - 32px));box-sizing:border-box;
  display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:8px;align-items:start;
  padding:10px 12px 10px 10px;background:var(--g-paper);border:var(--line-s) solid var(--ink);border-radius:18px;
  box-shadow:var(--lip),var(--drop-s);color:var(--ink);pointer-events:auto;will-change:transform;
}
.coach[hidden]{display:none}
.coach.in{animation:coach-in .32s var(--pop)}
.coach-who{
  grid-row:1/span 2;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:var(--line-xs) solid var(--ink);
  background:var(--g-terracotta);box-shadow:0 2px 0 var(--ink);
}
.coach.who-fortuna .coach-who{background:linear-gradient(180deg,#bfe6a0 0%,#59a85a 100%)}
.coach-who .ic{width:28px;height:28px}
.coach-txt{display:grid;gap:3px;font:var(--w-strong) var(--t-lead)/1.3 var(--f-ui);color:var(--ink);text-wrap:pretty}
.coach-txt small{font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.coach-ok{
  all:unset;box-sizing:border-box;cursor:pointer;justify-self:end;grid-column:2;min-height:30px;padding:3px 14px 4px;border-radius:999px;
  border:var(--line-xs) solid var(--ink);background:var(--g-gold);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 var(--ink);
  font:400 var(--t-name-s)/1 var(--f-display);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;letter-spacing:.02em;
  transition:transform .12s var(--out),box-shadow .12s var(--out);
}
.coach-ok:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 1px 0 var(--ink)}
.coach-ok:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
/* the arrow: a small paper diamond on the side facing the anchor, at --ax / --ay */
.coach-arrow{position:absolute;width:16px;height:16px;background:#f7ecd4;border:var(--line-s) solid var(--ink);border-radius:3px;transform:rotate(45deg);pointer-events:none}
.coach[data-side="top"] .coach-arrow{left:calc(var(--ax) - 8px);top:calc(100% - 7px);border-top:0;border-left:0}
.coach[data-side="bottom"] .coach-arrow{left:calc(var(--ax) - 8px);top:-10px;border-bottom:0;border-right:0;background:#fffaf0}
.coach[data-side="left"] .coach-arrow{top:calc(var(--ay) - 8px);left:calc(100% - 7px);border-bottom:0;border-left:0}
.coach[data-side="right"] .coach-arrow{top:calc(var(--ay) - 8px);left:-10px;border-top:0;border-right:0}
/* what the hint points at pulses gently (the death screen's Shop) */
.coach-pulse{animation:coach-pulse 1.6s ease-in-out infinite}

/* ---------- the unlock reveal card ---------- */
.unlock{
  position:fixed;inset:0;z-index:68;display:grid;place-items:center;padding:16px;
  background:radial-gradient(circle at 50% 45%,rgba(255,236,170,.22) 0,rgba(42,26,46,.62) 62%);
}
.unlock[hidden]{display:none}
.ul-card{
  position:relative;isolation:isolate;width:min(420px,100%);box-sizing:border-box;display:grid;justify-items:center;gap:8px;text-align:center;
  padding:30px 22px 20px;overflow:visible;
}
.unlock.in .ul-card{animation:ul-pop .5s var(--pop)}
.ul-rib{position:absolute;top:-16px;left:50%;transform:translateX(-50%);margin:0;font-size:var(--t-name)}
.unlock.in .ul-rib{animation:ul-drop .42s .1s var(--pop) both}
.ul-rays{
  position:absolute;left:50%;top:94px;width:300px;height:300px;margin:-150px 0 0 -150px;z-index:-1;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--uc) 55%,#fff) 0deg 9deg,transparent 9deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);opacity:.55;
  animation:ul-spin 18s linear infinite;
}
.unlock.soon .ul-rays{opacity:.18}
.ul-art{position:relative;height:128px;display:grid;place-items:center;margin-top:4px}
.ul-ic,.ul-god,.ul-num{
  width:112px;height:112px;display:grid;place-items:center;border-radius:28px;border:var(--line) solid var(--ink);position:relative;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.8) 0 14%,rgba(255,255,255,0) 15%),linear-gradient(180deg,#fff3c4 0%,#efcf78 100%);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.55),inset 0 -6px 0 rgba(40,20,40,.12),0 6px 0 var(--ink),0 0 0 7px color-mix(in srgb,var(--uc) 40%,transparent);
}
.ul-ic .ic{width:80px;height:80px}
.ul-god{border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55) 0 14%,rgba(255,255,255,0) 15%),var(--gc)}
.ul-god .ic{width:76px;height:76px}
.ul-num{font:400 64px/1 var(--f-display);color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill}
.ul-lv{
  position:absolute;right:-10px;bottom:-10px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:var(--line-s) solid var(--ink);
  background:var(--g-gold);font:400 var(--t-h)/1 var(--f-display);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;box-shadow:0 3px 0 var(--ink);
}
.ul-portrait{width:120px;height:120px;border-radius:26px;border:var(--line) solid var(--ink);box-shadow:0 6px 0 var(--ink),0 0 0 7px color-mix(in srgb,var(--uc) 40%,transparent);object-fit:cover;background:#e6d7b8}
.ul-rar{display:flex;gap:0}
.ul-rar i{width:52px;height:74px;border-radius:10px;border:var(--line-s) solid var(--ink);box-shadow:0 4px 0 var(--ink);background:var(--rc,var(--r2))}
.ul-rar i:nth-child(1){transform:rotate(-12deg) translate(14px,6px)}
.ul-rar i:nth-child(3){transform:rotate(12deg) translate(-14px,6px)}
.ul-rar i:nth-child(2){position:relative;z-index:1;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),var(--rc,var(--r2))}
.ul-rar.r2{--rc:var(--r-epic,#a052a0)}
.ul-rar.r3{--rc:var(--r3)}
.ul-name{margin:4px 0 0;font:400 var(--t-display)/1.02 var(--f-display);color:var(--ink);letter-spacing:.01em;text-wrap:balance}
.ul-sub{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.ul-line{margin:2px 0 0;max-width:34ch;font:var(--w-strong) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2);text-wrap:pretty}
.ul-foot{margin:0;font:var(--w-body) var(--t-body)/1.3 var(--f-ui);color:var(--ink-3)}
.ul-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.ul-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 4px;border:var(--line-xs) solid var(--ink);border-radius:999px;background:var(--paper);font:var(--w-strong) var(--t-caption)/1 var(--f-ui);box-shadow:0 2px 0 var(--ink)}
.ul-chip .ic{width:22px;height:22px;border-radius:50%;background:var(--gc)}
.ul-acts{justify-content:center;margin-top:6px;gap:12px}
.ul-acts .btn{min-width:150px}
.ul-more{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3)}

/* ---------- the fresh start: the screen wipes to sand, the crowd cheers, "A new beginning!" ---------- */
.fresh{position:fixed;inset:0;z-index:80;display:grid;place-items:center;overflow:hidden;pointer-events:auto}
.fresh[hidden]{display:none}
.fr-sand{
  position:absolute;inset:-6% -10%;
  background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.35) 0 1.5px,transparent 2px) 0 0/23px 19px,
    radial-gradient(circle at 70% 60%,rgba(140,90,40,.25) 0 1.5px,transparent 2px) 0 0/17px 21px,
    radial-gradient(ellipse at 50% 40%,#f6e2b6 0%,#ecd09c 55%,#d9b479 100%);
  clip-path:polygon(0 0,0 0,-8% 100%,-8% 100%);animation:fr-in .55s cubic-bezier(.6,0,.2,1) forwards;
}
.fr-words{position:relative;display:grid;justify-items:center;gap:10px;text-align:center;padding:0 16px;opacity:0;animation:fr-words .5s .45s var(--pop) forwards}
.fr-words .ribbon{justify-self:center}
.fr-title{margin:0;font:400 clamp(40px,8vw,76px)/1 var(--f-display);color:#fff;-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink);letter-spacing:.01em}
.fr-sub{margin:0;font:var(--w-strong) var(--t-lead)/1.3 var(--f-ui);color:var(--ink-2)}
.fresh.out .fr-sand{animation:fr-out .42s cubic-bezier(.6,0,.4,1) forwards}
.fresh.out .fr-words{animation:fr-wout .25s ease forwards}
.fresh.calm .fr-sand{clip-path:none;animation:fr-fade .25s ease forwards;opacity:0}
.fresh.calm .fr-words{animation:fr-fade .25s .1s ease forwards}
.fresh.calm.out{animation:fr-fadeout .2s ease forwards}

/* ---------- the Collection page ---------- */
#scr-collection .screen-inner{width:min(var(--menu-col,1180px),100%);margin:0 auto}
.col-head{display:grid;justify-items:center;gap:6px;text-align:center;margin-bottom:14px}
.col-head .ribbon{justify-self:center}
.col-head h2{margin:0;font:400 var(--t-title)/1 var(--f-display);color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.col-sum{margin:2px 0 0;display:grid;gap:6px;justify-items:center;font:var(--w-strong) var(--t-lead)/1 var(--f-ui);color:var(--ink);padding:8px 16px 10px;border:var(--line-s) solid var(--ink);border-radius:999px;background:var(--g-paper);box-shadow:var(--drop-s)}
.col-sum b{font:400 var(--t-btn)/1 var(--f-display);margin-right:2px}
.col-sum .col-bar{width:220px}
.col-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 16px}
.col-goal{
  display:grid;gap:4px;padding:10px 14px 11px;border:var(--line-s) solid var(--ink);border-radius:16px;background:var(--g-paper);box-shadow:var(--lip),var(--drop-s);min-width:0;
}
.col-gk{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--terracotta-lo)}
.col-goal b{font:400 var(--t-name)/1.05 var(--f-display);color:var(--ink)}
.col-goal small{font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.col-num{font-variant-numeric:tabular-nums;color:var(--ink-3)!important;justify-self:end}
.col-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.col-sec{padding:14px 14px 16px;min-width:0}
.col-sec.gods,.col-sec[data-sec="weapons"]{grid-column:1/-1}
.col-sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 10px}
.col-sh h3{margin:0;font:400 var(--t-h)/1 var(--f-display);color:var(--ink)}
.col-count{font:var(--w-strong) var(--t-body)/1 var(--f-ui);color:var(--ink-2);padding:4px 10px;border:var(--line-xs) solid var(--ink);border-radius:999px;background:var(--paper-2);font-variant-numeric:tabular-nums}
.col-grid{display:flex;flex-wrap:wrap;gap:10px}
.col-tile{
  position:relative;width:96px;box-sizing:border-box;display:grid;justify-items:center;align-content:start;gap:4px;padding:8px 5px 8px;text-align:center;
  border:var(--line-s) solid var(--ink);border-radius:14px;background:linear-gradient(180deg,#fffaf0 0%,#f3e3c2 100%);box-shadow:0 3px 0 var(--ink);outline:none;
}
.col-tile:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.col-tile.locked{background:linear-gradient(180deg,#eadcc0 0%,#dcc9a4 100%)}
.col-ic{width:52px;height:52px;display:grid;place-items:center}
.col-ic .ic{width:44px;height:44px}
.col-tile.locked .col-ic .ic{filter:brightness(0);opacity:.32}
.col-tile.locked .col-portrait{filter:grayscale(1) brightness(.62) contrast(.85);opacity:.75}
.col-portrait{width:56px;height:56px;border-radius:12px;border:var(--line-xs) solid var(--ink);object-fit:cover;background:#e6d7b8}
.col-name{font:400 var(--t-name-s)/1.05 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.col-tile.locked .col-name{color:var(--ink-2)}
.col-lock{display:inline-flex;align-items:center;justify-content:center;gap:3px;font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);color:var(--ink-2)}
.col-lock .ic{width:14px;height:14px;flex:none}
.col-lock.soonword{color:var(--imperial)}
.col-tile .col-bar{width:84%;height:7px}
.col-pips{display:flex;gap:3px}
.col-pips i{width:9px;height:9px;border:2px solid var(--ink);border-radius:50%;background:var(--paper-2)}
.col-pips i.on{background:var(--g-gold)}
.col-new{
  position:absolute;top:-9px;right:-8px;z-index:2;padding:2px 7px 3px;border:2.5px solid var(--ink);border-radius:8px;background:var(--g-red);transform:rotate(8deg);
  font:400 var(--t-tag)/1 var(--f-display);color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;box-shadow:0 2px 0 var(--ink);animation:ul-bob 2.4s ease-in-out infinite;
}
.col-god{
  position:relative;width:214px;box-sizing:border-box;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;row-gap:3px;align-items:center;
  padding:9px 10px 10px;border:var(--line-s) solid var(--ink);border-radius:16px;background:linear-gradient(180deg,#fffaf0 0%,#f3e3c2 100%);box-shadow:0 3px 0 var(--ink);outline:none;
}
.col-god:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.col-god.locked{background:linear-gradient(180deg,#eadcc0 0%,#dcc9a4 100%)}
.col-seal{grid-row:1/span 3;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:var(--line-s) solid var(--ink);background:var(--gc);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 3px 0 var(--ink)}
.col-seal .ic{width:38px;height:38px}
.col-god.locked .col-seal{background:#c8b590}
.col-god.locked .col-seal .ic{opacity:.55}
.col-gname{font:400 var(--t-name)/1 var(--f-display);color:var(--ink)}
.col-gsub{font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);color:var(--ink-2)}
.col-god .col-bar{height:7px}
.col-god .col-num{font:var(--w-strong) var(--t-label)/1 var(--f-ui)}
.col-pows{display:flex;gap:4px;flex-wrap:wrap}
.col-pow{position:relative;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:2.5px solid var(--ink);background:#d9c9a8;outline:none}
.col-pow .ic{width:20px;height:20px;filter:brightness(0);opacity:.3}
.col-pow.on{background:var(--gc)}
.col-pow.on .ic{filter:none;opacity:1}
.col-pow.new::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:#e2414a;border:2px solid var(--ink)}
.col-pow:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.col-sec.limits .col-grid{display:grid;gap:12px}
.col-limit{display:grid;gap:6px}
.col-limit>b{font:400 var(--t-name)/1 var(--f-display);color:var(--ink)}
.col-limit>small{font:var(--w-body) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.col-slots{display:flex;gap:6px}
.col-slots i{width:24px;height:24px;border-radius:50%;border:var(--line-xs) solid var(--ink);background:#d9c9a8;box-shadow:inset 0 2px 0 rgba(0,0,0,.08)}
.col-slots i.on{background:radial-gradient(circle at 35% 30%,#fff 0 16%,rgba(255,255,255,0) 18%),var(--g-blue);box-shadow:0 2px 0 var(--ink)}
.col-rars,.col-shops{display:flex;flex-wrap:wrap;gap:6px}
.col-rar,.col-shop{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 5px;border:var(--line-xs) solid var(--ink);border-radius:999px;background:#e3d3b2;
  font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3);outline:none;
}
.col-rar i{width:13px;height:18px;border-radius:4px;border:2px solid var(--ink);background:#bfae8c}
.col-rar.on,.col-shop.on{background:var(--paper);color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.col-rar.on.r0 i{background:var(--r1)} .col-rar.on.r1 i{background:var(--r2)} .col-rar.on.r2 i{background:var(--r-epic,#a052a0)} .col-rar.on.r3 i{background:var(--r3)}
.col-shop .ic{width:18px;height:18px}
.col-shop:not(.on) .ic{opacity:.6}
.col-rar:focus-visible,.col-shop:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.col-tile.boss .col-ic .ic{width:40px;height:40px}
.col-tile.soon{width:118px}

/* ---------- the Shop: a milestone lock instead of a price; New! ribbons; Reroll and Heal first ---------- */
.sh-gate{
  grid-column:2;justify-self:stretch;align-self:end;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:7px;row-gap:5px;align-items:center;
  padding:7px 11px 8px 8px;border:var(--line-s) solid var(--ink);border-radius:14px;background:#e9dcc2;color:var(--ink-2);
}
.sh-gate>.ic{width:22px;height:22px}
.sh-gate b{display:block;font:var(--w-strong) var(--t-body)/1.2 var(--f-ui);color:var(--ink)}
.sh-gate small{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-3)}
.sh-gate small .ic{width:13px;height:13px;vertical-align:-.15em}
.sh-gbar{grid-column:1/-1;position:relative;display:block;height:8px;overflow:hidden;border-radius:999px;border:2px solid var(--ink);background:#cdb07e}
.sh-gbar>i{position:absolute;left:0;top:0;bottom:0;background:var(--g-gold)}
.sh-card.gated .sh-icon .ic{filter:brightness(0);opacity:.35}
.sh-card.gated .sh-portrait{filter:brightness(.25) saturate(0)}
.sh-new{
  position:absolute;top:-11px;right:14px;z-index:2;padding:3px 9px 4px;border:2.5px solid var(--ink);border-radius:8px;background:var(--g-red);transform:rotate(4deg);
  font:400 var(--t-name-s)/1 var(--f-display);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;box-shadow:0 3px 0 var(--ink);
}
.sh-card.purse:not(.has) .sh-icon{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75) 0 14%,rgba(255,255,255,0) 15%),linear-gradient(180deg,#d6efb8 0%,#8fc760 100%)}
.sh-more{display:flex;align-items:center;gap:8px;font-size:var(--t-lead)!important;color:var(--ink-3)!important}
.sh-more .ic{width:22px;height:22px;flex:none}

/* ---------- the new-fighter card: a weapon's mastery along the bottom of its tile; a milestone lock badge ---------- */
/* five pips on a dark pill along the tile's bottom, the levels reached gold; no number (2026-10-22) */
.wt-m{position:absolute;left:50%;bottom:3px;z-index:2;transform:translateX(-50%);display:flex;gap:2px;padding:2px 3px;border-radius:999px;background:rgba(42,26,46,.78);pointer-events:none}
.wt-m i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}
.wt-m i.on{background:var(--gold-hi)}
.wt-price.gate{padding:1px 2px}
.wt-price.gate .ic{width:13px;height:13px}

/* ---------- motion ---------- */
@keyframes coach-in{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@keyframes coach-pulse{0%,100%{box-shadow:inset 0 3px 0 #fff,inset 0 -4px 0 rgba(120,80,40,.14),var(--drop),0 0 0 0 rgba(242,201,76,.7)}50%{box-shadow:inset 0 3px 0 #fff,inset 0 -4px 0 rgba(120,80,40,.14),var(--drop),0 0 0 9px rgba(242,201,76,0)}}
@keyframes ul-pop{0%{opacity:0;transform:scale(.55) rotate(-5deg)}60%{opacity:1}100%{transform:none}}
@keyframes ul-drop{from{opacity:0;transform:translate(-50%,-26px) rotate(-6deg)}to{opacity:1;transform:translateX(-50%)}}
@keyframes ul-spin{to{transform:rotate(360deg)}}
@keyframes ul-bob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-2px) rotate(var(--rot,0deg))}}
@keyframes fr-in{to{clip-path:polygon(0 0,118% 0,108% 100%,-8% 100%)}}
@keyframes fr-out{from{clip-path:polygon(0 0,118% 0,108% 100%,-8% 100%)}to{clip-path:polygon(118% 0,118% 0,108% 100%,108% 100%)}}
@keyframes fr-words{from{opacity:0;transform:scale(.7) translateY(14px)}to{opacity:1;transform:none}}
@keyframes fr-wout{to{opacity:0;transform:scale(1.06)}}
@keyframes fr-fade{to{opacity:1}}
@keyframes fr-fadeout{to{opacity:0}}
.col-new{--rot:8deg}

/* ---------- phones ---------- */
@media (max-width:600px){
  .title-actions .btn.quiet{min-height:42px;font-size:var(--t-name-s)}
  .title-actions>.btn.half{font-size:var(--t-name-s);padding:0 8px 0 38px}
  .title-actions>.btn.half .ic{left:10px}
  .tb-badge{right:10px;min-width:22px;height:22px;margin-top:-11px;font-size:var(--t-tag)}
  .title-goal{grid-template-columns:34px minmax(0,1fr) auto;padding:5px 10px 6px 5px;gap:8px}
  .tg-ic{width:34px;height:34px}
  .tg-ic .ic{width:26px;height:26px}
  .coach{max-width:calc(100vw - 32px);grid-template-columns:32px minmax(0,1fr);padding:8px 10px 8px 8px;border-radius:16px}
  .coach-who{width:32px;height:32px}
  .coach-who .ic{width:24px;height:24px}
  .coach-txt{font-size:var(--t-body)}
  /* in a fight the bubble keeps clear of the HUD's button column (coach.js place() reads the gutter) */
  body[data-screen=""] .coach{--coach-gr:68px;max-width:calc(100vw - 84px)}
  .ul-card{padding:26px 16px 16px}
  .ul-name{font-size:var(--t-btn-l)}
  .ul-line{font-size:var(--t-lead)}
  .ul-art{height:112px}
  .ul-ic,.ul-god,.ul-num{width:96px;height:96px;border-radius:24px}
  .ul-god{border-radius:50%}
  .ul-ic .ic{width:68px;height:68px}
  .ul-rays{top:86px}
  .col-head h2{font-size:var(--t-display)}
  .col-body{grid-template-columns:minmax(0,1fr)}
  .col-grid{gap:8px}
  .col-tile{width:calc((100% - 16px) / 3)}
  .col-tile.soon{width:calc((100% - 8px) / 2)}
  .col-god{width:100%}
  .col-next{grid-template-columns:minmax(0,1fr)}
  .sh-gate{grid-column:1/-1}
}
/* the card pick on a phone: one strip parked over the HUD's corner (coach.js --coach-dock), Got it on its line, so the
   round's result and the cards stay in view; the extra line and the seal wait for a wider screen */
@media (max-width:600px),(max-height:500px){
  body[data-screen="draft"] .coach{
    --coach-dock:corner;--coach-gr:68px;width:min(340px,calc(100vw - 84px));max-width:none;
    grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:8px 8px 8px 12px;
  }
  body[data-screen="draft"] :is(.coach-who,.coach-txt small,.coach-arrow){display:none}
  body[data-screen="draft"] .coach-txt{font-size:var(--t-caption);line-height:1.3}
  body[data-screen="draft"] .coach-ok{grid-column:2;grid-row:1}
}
@media (prefers-reduced-motion:reduce){
  .coach.in,.unlock.in .ul-card,.unlock.in .ul-rib,.coach-pulse{animation:none}
  .ul-rays,.tb-badge,.col-new{animation:none}
  .fr-sand{clip-path:none;animation:fr-fade .25s ease forwards;opacity:0}
}
/* a landscape phone: the strip stays left of the round's result, which is centred above the cards */
@media (max-height:500px) and (min-width:601px){ body[data-screen="draft"] .coach{width:min(290px,calc(50vw - 136px))} }