/* ==========================================================================
   Draft: the after-round cards                       owner: the card pass (was P0-4, agent 2)
   docs/card-ia.md (the owner-approved anatomy) and docs/research/game-ui.md §2.1, §2.4, §2.9 (shape, colour jobs,
   reveal). A playing card, about 0.69 wide to tall, read in two seconds:
     frame, ribbon (◆ count), halo, shine          rarity only (--rc), never a god colour
     art window and seal                           the god (--gc and a pattern per god), bronze sand for the weapon,
                                                   paper laurel for general upgrades
     the one big number                            stat colour, three only: damage red, health green, coins gold;
                                                   every other number is bold ink
   Markup: ui/draft.js cardHTML. Everything is scoped to #cards / #scr-draft, so the older card rules in stats.css
   and progression.css never reach it.
   ========================================================================== */
#scr-draft{pointer-events:none;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
/* the draft is a full-screen layer over the HUD: clicks fall through its empty parts, so the HUD's pause, speed,
   sound and stats buttons and the upgrade chips keep working while choosing */
#scr-draft .screen-inner{margin:auto auto 0;max-width:1060px;pointer-events:auto}
.draft-panel{
  --cw:240px;--gap:18px;--nm:23px;--hs:16px;--ks:25px;--gold-ink:#98500a;
  display:grid;gap:14px;
  /* exactly as wide as the row of cards (the header adds no width of its own: contain), centred over it */
  width:max-content;max-width:100%;margin-inline:auto;
}
/* the backdrop's 'draft' state (ui/draft.js sets it over menu.js's 'none'): a light plum dim, deeper behind the cards,
   so the cards read and the winner above them stays the hero (research §2.1). Same 240 ms cross-fade as every state. */
body[data-backdrop="draft"] .bd-dim{
  opacity:1;background:linear-gradient(0deg,rgba(var(--bd-plum),.5) 0%,rgba(var(--bd-plum),.3) 42%,rgba(var(--bd-plum),.16) 100%);
}
/* the top HUD stays over that dim and soft focus, as the chips row does (stats.css): the backdrop sits between the arena
   (with the HUD) and the screens (owner, 2026-10-24: "this top menu shouldnt tuck behind overlay when choosing an
   upgrade") */
body[data-screen="draft"] #hud{z-index:var(--z-hud-over)}

/* ---------- the header: one block as wide as the cards (owner, 2026-10-21: the chips and Reroll/Heal "randomly show at
   the bottom top left"). The top line: the round's ribbon and result chips at the first card's left edge, Reroll and
   Heal at the last card's right edge; under it the title and the gods' line, centred. Named areas, so the gods' line
   (draft.js) and Reroll/Heal (shop.js), added later, always land in their own place. ---------- */
.draft-head{
  contain:inline-size;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:". title right" ". gods .";
  align-items:center;gap:6px 14px;
}
.draft-title{grid-area:title;justify-self:center}
#scr-draft .draft-head .gods-line{grid-area:gods;justify-self:center;margin:0}
.draft-title{
  margin:0;font:400 var(--t-display)/1 var(--f-display);letter-spacing:.01em;white-space:nowrap;
  color:#fff;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);
}
/* the round's result: the headline in the round badge's place, its rewards under it; it drops in from the top (draft.js).
   The badge itself hides while the cards are up (owner, 2026-10-25: "round won overlap is weird": with the top HUD over
   the dim, its wreath sat on the headline, and both said the round). On a phone the HUD's rows are taller and the badge
   sits to one side, so the result stays under them. */
body[data-screen="draft"] .hud-round{visibility:hidden}
.draft-result{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 16px);display:grid;justify-items:center;gap:10px;pointer-events:auto}
@media (max-width:700px){ .draft-result{top:calc(env(safe-area-inset-top,0px) + 106px)} }
.dr-won{
  margin:0;font:400 calc(var(--t-display) * 1.15)/1 var(--f-display);letter-spacing:.01em;white-space:nowrap;
  color:#ffd27a;-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);
}
.draft-result.in .dr-won{animation:dr-won-in .46s var(--pop) both}
.draft-result.in .draft-sub{animation:dr-sub-in .3s var(--out) .2s both}
@keyframes dr-won-in{from{opacity:0;transform:translateY(-22px) scale(.86)}}
@keyframes dr-sub-in{from{opacity:0;transform:translateY(-6px)}}
#scr-draft.picking .draft-result{transition:opacity .14s var(--out);opacity:0}
@media (prefers-reduced-motion:reduce){ .draft-result.in :is(.dr-won,.draft-sub){animation:none} }
.draft-sub{margin:0;display:flex;gap:6px}
.draft-sub .chip{gap:3px;padding:2px 9px 2px 3px;box-shadow:0 3px 0 var(--ink);cursor:default}
.draft-sub .chip .ic{width:20px;height:20px}
.draft-sub .chip b{font:400 var(--t-name-s)/1 var(--f-display);font-variant-numeric:tabular-nums}
#scr-draft .draft-extras{grid-area:right;justify-self:end;margin:0;gap:8px;flex-wrap:nowrap}
/* Reroll: an icon and its number, the words in its tip (shop.js), small enough to sit beside the title */
#scr-draft .btn.dx{min-height:42px;padding:0 7px 0 9px;font-size:var(--t-name-s);gap:5px}
#scr-draft .btn.dx>.ic{width:22px;height:22px}
#scr-draft .btn.dx-reroll{position:relative;width:46px;padding:0;justify-content:center}
#scr-draft .dx-n{position:absolute;top:-9px;right:-9px;min-width:23px;height:23px;padding:0 5px;box-sizing:border-box;display:grid;place-items:center;
  border-radius:999px;border:2.5px solid var(--ink);background:#fff;box-shadow:0 2px 0 var(--ink);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
#scr-draft .btn.dx-reroll:disabled .dx-n{background:var(--paper-2);color:#b23a2a}

/* ---------- the row of cards: one size whatever the count, centred ---------- */
#cards{display:flex;justify-content:center;align-items:stretch;gap:var(--gap)}
#cards .card{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;isolation:isolate;min-width:0;
  flex:0 1 var(--cw);aspect-ratio:248/360;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(var(--cw) * .04) calc(var(--cw) * .045) 9px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 9%,#fffaf0) 0%,#fff6e4 48%,#f3e3c2 100%);
  border:var(--line) solid var(--ink);border-radius:20px;
  --ring:4px;--rx:0deg;--ry:0deg;
  box-shadow:inset 0 0 0 var(--ring) var(--rc),inset 0 0 0 calc(var(--ring) + 2px) rgba(255,255,255,.6),0 7px 0 var(--ink);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .14s var(--out),box-shadow .14s var(--out);
  animation:uc-deal .46s var(--pop) var(--dd,0s) backwards;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
#cards .card:nth-child(even){--dr:5deg}
/* the deal: from below, tilted, with an overshoot; 70 ms apart (ui/draft.js --dd) */
@keyframes uc-deal{0%{transform:perspective(900px) translateY(80px) rotate(var(--dr,-5deg)) scale(.86);opacity:0}55%{opacity:1}}
/* the rarity frame (research §2.9): a ring; a halo for Epic; a halo, a gold rim and a shine for Legendary */
#cards .card.q1{--ring:5px}
#cards .card.q2{--ring:5px;box-shadow:inset 0 0 0 var(--ring) var(--rc),inset 0 0 0 calc(var(--ring) + 2px) rgba(255,255,255,.6),0 0 0 3px #e6b6ef,0 7px 0 var(--ink)}
#cards .card.q3{--ring:6px;box-shadow:inset 0 0 0 var(--ring) var(--rc),inset 0 0 0 calc(var(--ring) + 2px) rgba(255,255,255,.7),0 0 0 3px var(--gold-hi),0 7px 0 var(--ink)}
#cards .card.q2::before,#cards .card.q3::before{
  content:"";position:absolute;inset:-16px;z-index:-1;border-radius:32px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 60%,transparent) 60%,transparent);opacity:.5;
  animation:uc-breathe 2.4s ease-in-out calc(var(--dd,0s) + .5s) infinite;
}
@keyframes uc-breathe{50%{opacity:.9}}
/* the shine lives in a clipped layer, so the ribbon can hang over the edge */
.uc-fx{position:absolute;inset:0;border-radius:16px;overflow:hidden;pointer-events:none;z-index:2}
.uc-fx::after{
  content:"";position:absolute;inset:-20% -60%;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);transform:translateX(-60%);
}
#cards .card.q1 .uc-fx::after{opacity:1;animation:uc-shine .9s ease-out calc(var(--dd,0s) + .35s) both}
#cards .card.q3 .uc-fx::after{opacity:1;animation:uc-shine-loop 3.2s ease-in-out calc(var(--dd,0s) + 1.1s) infinite}
@keyframes uc-shine{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
@keyframes uc-shine-loop{0%,55%{transform:translateX(-60%)}100%{transform:translateX(60%)}}

/* hover (a real pointer) and keyboard focus: lift and tilt; the tilt follows the cursor (ui/draft.js --rx/--ry) */
@media (hover:hover) and (pointer:fine){
  #cards .card:hover{transform:perspective(900px) translateY(-10px) rotate(-1deg) scale(1.03) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:inset 0 0 0 var(--ring) var(--rc),inset 0 0 0 calc(var(--ring) + 2px) rgba(255,255,255,.6),0 15px 0 var(--ink)}
  #cards .card.q2:hover{box-shadow:inset 0 0 0 var(--ring) var(--rc),inset 0 0 0 calc(var(--ring) + 2px) rgba(255,255,255,.6),0 0 0 3px #e6b6ef,0 15px 0 var(--ink)}
  #cards .card.q3:hover{box-shadow:inset 0 0 0 var(--ring) var(--rc),inset 0 0 0 calc(var(--ring) + 2px) rgba(255,255,255,.7),0 0 0 3px var(--gold-hi),0 15px 0 var(--ink)}
  #cards .card.tilt{transition:transform .08s linear,box-shadow .14s var(--out)}
  #cards .card:hover .uc-glyph{transform:translate(calc(var(--ry) * -1px),calc(var(--rx) * 1px)) rotate(-4deg) scale(1.05)}
  #cards .card:hover .uc-tag.adv{animation:uc-tag-pulse .5s var(--pop) 1}
}
/* focus: the lift plus a white and an ink ring, never the blue player ring (a focused Common must not read Rare) */
#cards .card:focus-visible,html.kbd-nav #cards .card:focus{
  outline:3px solid var(--ink);outline-offset:3px;
  transform:perspective(900px) translateY(-10px) rotate(-1deg) scale(1.03);
  box-shadow:inset 0 0 0 var(--ring) var(--rc),inset 0 0 0 calc(var(--ring) + 2px) rgba(255,255,255,.6),0 0 0 3px #fff,0 15px 0 var(--ink);
}
#cards .card:active{transform:perspective(900px) translateY(3px) scale(.98);box-shadow:inset 0 0 0 var(--ring) var(--rc),0 3px 0 var(--ink);transition-duration:.06s}

/* ---------- the face ---------- */
/* rarity ribbon: centred over the top edge, the word plus ◆ / ◆◆ / ◆◆◆ (the colour-blind channel) */
.uc-ribbon{
  position:absolute;top:-13px;left:50%;z-index:6;transform:translateX(-50%);display:flex;align-items:center;gap:5px;
  padding:4px 11px 5px;border:3px solid var(--ink);border-radius:8px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),var(--rc);box-shadow:0 3px 0 var(--ink);
  font:400 var(--t-tag)/1 var(--f-display);letter-spacing:var(--ls-caps);text-transform:uppercase;color:#fff;-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;
}
.uc-ribbon s{text-decoration:none;font-size:.75em;letter-spacing:.12em}
#cards .key{
  position:absolute;top:calc(var(--cw) * .04 + 6px);right:calc(var(--cw) * .045 + 6px);z-index:4;min-width:26px;height:26px;padding:0 5px;box-sizing:border-box;display:grid;place-items:center;
  border:3px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:0 3px 0 var(--ink);font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);
}
/* the art window (about 42% of the card): the owner's colour and pattern, the icon big in the middle */
.uc-art{
  position:relative;flex:none;width:100%;height:calc(var(--cw) * .58);box-sizing:border-box;border-radius:14px;border:3px solid var(--ink);
  display:grid;place-items:center;isolation:isolate;
  --win:#f2d39b;--win2:#d9a35c;
  background:var(--pat,linear-gradient(transparent,transparent)),linear-gradient(180deg,var(--win) 0%,var(--win2) 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -6px 0 rgba(42,26,46,.14);
}
.uc-glyph{display:grid;place-items:center;transition:transform .2s var(--pop)}
/* a weapon version's art (src/versions.js): the weapon itself in its colours, in the art window */
.uc-img{position:absolute;inset:6% 7%;width:86%;height:88%;object-fit:contain;z-index:0;filter:drop-shadow(0 4px 0 rgba(42,26,46,.28));transition:transform .2s var(--pop)}
@media (hover:hover) and (pointer:fine){ #cards .card:hover .uc-img{transform:rotate(-4deg) scale(1.06)} }
.uc-glyph .ic{width:calc(var(--cw) * .42);height:calc(var(--cw) * .42);filter:drop-shadow(0 -2px 0 rgba(255,255,255,.75)) drop-shadow(0 4px 0 rgba(42,26,46,.32))}
/* the weapon's paths: bronze sand */
.uc-art.w-path{--win:#f6e2b8;--win2:#d8a463;--pat:radial-gradient(circle at 25% 30%,rgba(120,70,20,.14) 0 1.5px,transparent 2px) 0 0/14px 14px,radial-gradient(circle at 70% 75%,rgba(255,255,255,.24) 0 1.5px,transparent 2px) 0 0/18px 18px}
/* general upgrades: paper and laurel */
.uc-art.w-boon{--win:#fff6e2;--win2:#ead2a0;--pat:radial-gradient(ellipse 4px 7px at 50% 50%,rgba(111,174,60,.2) 98%,transparent) 0 0/24px 24px,radial-gradient(ellipse 4px 7px at 50% 50%,rgba(111,174,60,.14) 98%,transparent) 12px 12px/24px 24px}
/* the evolution: a gold sunburst */
.uc-art.w-evo{--win:#fff1b8;--win2:#f2c94c;--pat:repeating-conic-gradient(from 0deg at 50% 55%,rgba(255,255,255,.34) 0deg 10deg,transparent 10deg 30deg)}
/* a god: its colour, lightened, plus its own pattern (research §2.4: the pattern tells a god from a rarity) */
.uc-art.w-god{--win:color-mix(in srgb,var(--gc) 30%,#fff);--win2:color-mix(in srgb,var(--gc) 76%,#fff)}
.uc-art.g-mars{--pat:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 3px,transparent 3px 12px)}
.uc-art.g-jupiter{--pat:linear-gradient(135deg,rgba(255,255,255,.3) 25%,transparent 25%) -12px 0/24px 24px,linear-gradient(225deg,rgba(255,255,255,.3) 25%,transparent 25%) -12px 0/24px 24px,linear-gradient(315deg,rgba(255,255,255,.3) 25%,transparent 25%) 0 0/24px 24px,linear-gradient(45deg,rgba(255,255,255,.3) 25%,transparent 25%) 0 0/24px 24px}
.uc-art.g-vulcan{--pat:radial-gradient(circle,rgba(255,236,170,.55) 0 2px,transparent 2.5px) 0 0/24px 24px,radial-gradient(circle,rgba(255,236,170,.35) 0 1.5px,transparent 2px) 12px 14px/24px 24px}
.uc-art.g-neptune{--pat:radial-gradient(circle at 50% 100%,transparent 7px,rgba(255,255,255,.3) 8px 10px,transparent 11px) 0 0/24px 12px}
.uc-art.g-diana{--pat:radial-gradient(circle,rgba(255,255,255,.45) 0 1.5px,transparent 2px) 0 0/24px 24px,radial-gradient(ellipse 3px 6px,rgba(255,255,255,.26) 98%,transparent) 12px 12px/24px 24px}
.uc-art.g-minerva{--pat:radial-gradient(ellipse 3px 6px at 40% 50%,rgba(255,255,255,.3) 98%,transparent) 0 0/24px 24px,radial-gradient(ellipse 3px 6px at 60% 50%,rgba(255,255,255,.2) 98%,transparent) 12px 12px/24px 24px}
.uc-art.g-pluto{--pat:radial-gradient(ellipse 14px 6px,rgba(255,255,255,.24),transparent) 0 0/36px 30px,radial-gradient(ellipse 10px 5px,rgba(255,255,255,.16),transparent) 18px 15px/36px 30px}
.uc-art.g-fortuna{--pat:repeating-conic-gradient(from 0deg at 50% 52%,rgba(255,255,255,.22) 0deg 8deg,transparent 8deg 30deg),radial-gradient(circle,rgba(255,226,140,.5) 0 3px,transparent 3.5px) 0 0/28px 28px}
/* a combo: split between the two gods */
.uc-art.w-combo{background:repeating-linear-gradient(135deg,rgba(255,255,255,.2) 0 2px,transparent 2px 14px),linear-gradient(135deg,color-mix(in srgb,var(--gc) 50%,#fff) 0 50%,color-mix(in srgb,var(--gc2) 50%,#fff) 50% 100%)}
/* the seal: the owner's mark, overlapping the window's bottom-left corner (gods, the weapon; none on general cards) */
.uc-seal{
  position:absolute;left:-10px;bottom:-10px;z-index:2;width:44px;height:44px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;
  border:3px solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 var(--ink);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--sc,var(--gc)) 40%,#fff) 0 30%,var(--sc,var(--gc)) 78%);
}
.uc-seal .ic{width:30px;height:30px}
.uc-seal.two{left:auto;right:-10px;--sc:var(--gc2)}
.uc-seal.wpn{--sc:#e9c88c}
.uc-seal.gold{--sc:#f2c94c}
.uc-seal.evo b{position:absolute;right:-7px;top:-9px;font:400 var(--t-name)/1 var(--f-display);color:#fff;-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill}
/* the sticker: NEW (and FINAL, COMBO, EVOLVE, DROP), slapped on the window's top-left after the card lands */
.uc-sticker{
  position:absolute;left:-9px;top:9px;z-index:3;padding:3px 8px 4px;border:2.5px solid var(--ink);border-radius:7px;transform:rotate(-8deg);
  background:var(--enemy);box-shadow:0 3px 0 var(--ink);font:400 var(--t-name-s)/1 var(--f-display);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  animation:uc-stick .34s var(--pop) calc(var(--dd,0s) + .32s) backwards;
}
.uc-sticker.s-final{background:var(--g-gold)}
.uc-sticker.s-combo{background:linear-gradient(90deg,var(--gc),var(--gc2,var(--gc)))}
.uc-sticker.s-evolve{background:var(--g-gold)}   /* one gold, no rainbow (owner, 2026-10-25: "i dont like the rainbow on the evolve stuff") */
@keyframes uc-stick{from{transform:rotate(-24deg) scale(1.7);opacity:0}}
/* the name: one line, its font shrunk to fit (ui/draft.js fitNames); a balanced two lines only when it would get too small */
.uc-name{
  width:100%;height:calc(var(--nm) * 1.42);margin-top:calc(var(--cw) * .05);display:grid;place-items:center;
  font:400 var(--fs,var(--nm))/1 var(--f-display);color:var(--ink);letter-spacing:.005em;
}
.uc-name>span{white-space:nowrap}
#cards .uc-name>.name{font-size:inherit}   /* progression.css sizes .card .name for four cards */
.uc-name.two>span{white-space:normal;text-wrap:balance;line-height:1}
/* the headline: at most two lines, one big number (ui/draft.js marks it .big) in its stat colour */
.uc-head{width:100%;min-height:calc(var(--hs) * 2.75);display:grid;place-items:center;margin-top:1px}
.uc-head>span{font:var(--w-strong) var(--hs)/1.3 var(--f-ui);color:var(--ink-2);text-wrap:balance}
.uc-head .n{font:var(--w-strong) var(--hs)/1 var(--f-ui);color:var(--ink);white-space:nowrap}
.uc-head .hs{display:inline-block}
.uc-head .n.big{font:400 var(--ks)/1 var(--f-display);letter-spacing:.01em;vertical-align:-1px}
.n.big:is(.k-dmg,.k-bleed,.k-fire,.k-area){color:var(--enemy)}   /* damage, bleeding, burning, area hits */
.n.big.k-heal{color:var(--laurel-lo)}
.n.big.k-coin{color:var(--gold-ink)}
/* the delta (only for more of something held): "Lv 2 → 3 · +1 blade"; a warning when the powers are full */
.uc-mid{width:100%;min-height:28px;display:grid;place-items:center;margin-top:3px}
.uc-delta{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:26px;box-sizing:border-box;padding:2px 10px 2px 3px;
  border:2.5px solid var(--ink);border-radius:999px;background:#e3f4cf;box-shadow:0 2px 0 var(--ink);
  font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:#2b5e19;white-space:nowrap;
}
.uc-delta i{font-style:normal;padding:3px 8px 4px;border-radius:999px;background:#2b5e19;color:#fff;font:var(--w-strong) var(--t-label)/1 var(--f-ui)}
.uc-delta b{font-weight:var(--w-strong)}
.uc-delta .n{font:var(--w-strong) 1em/1 var(--f-ui);color:inherit}
.uc-delta.warn{background:#ffe1da;color:#a3182a}
.uc-delta.warn i{background:#a3182a}
/* the footer: level or path pips on the left, tag dots on the right; the context line under it */
.uc-foot{
  width:100%;margin-top:auto;padding-top:7px;min-height:24px;display:flex;align-items:center;justify-content:space-between;gap:6px;
  border-top:2.5px dashed color-mix(in srgb,var(--ink) 20%,transparent);
}
.uc-pips{display:inline-flex;align-items:center;gap:4px;padding-left:3px}
.uc-pips i{width:10px;height:10px;box-sizing:border-box;border:2.5px solid var(--ink);background:#e9d6b2;transform:rotate(45deg)}
.uc-pips i.on{background:var(--gold)}
.uc-pips i.next{background:#fff;box-shadow:0 0 0 2px var(--gold-hi),0 0 7px 2px rgba(255,196,60,.85)}
.uc-pips.path i{border-radius:50%;transform:none;width:11px;height:11px}
.uc-pips.path i.fin{border-radius:2px;transform:rotate(45deg)}
.uc-tags{display:inline-flex;align-items:center;gap:4px}
.uc-tag{
  position:relative;width:22px;height:22px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;font-style:normal;
  border:2.5px solid var(--ink);background:color-mix(in srgb,var(--tc) 30%,#fff);
}
.uc-tag .ic{width:15px;height:15px}
/* moves a set bonus on: a steady glow in the tag's colour (one pulse when the card is hovered); switches it on: a gold "!" */
.uc-tag.adv{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--tc),0 0 10px 3px color-mix(in srgb,var(--tc) 70%,transparent)}
.uc-tag.done::after{
  content:"!";position:absolute;right:-6px;top:-7px;width:13px;height:13px;display:grid;place-items:center;border-radius:50%;
  border:2px solid var(--ink);background:var(--g-gold);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink);
}
@keyframes uc-tag-pulse{50%{transform:scale(1.3)}}
.uc-evo{display:grid;place-items:center;width:22px;height:22px;font-style:normal}
.uc-evo .ic{width:20px;height:20px;filter:drop-shadow(0 0 4px rgba(255,200,60,.95))}
/* never cut short (briefs.js ctxOf keeps every line short); if a window is narrower still, it wraps, balanced */
.uc-ctx{margin-top:5px;max-width:100%;font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);letter-spacing:.02em;color:var(--ink-3);white-space:normal;text-wrap:balance}
.uc-ctx span+span::before{content:" · "}

/* ---------- Epic and Legendary: dealt face down with a rarity glow on the edge, then a flip (ui/draft.js reveal) ---------- */
.uc-back{display:none}
#cards .card.down .uc-back{
  display:grid;place-items:center;position:absolute;inset:0;z-index:5;border-radius:16px;
  background:radial-gradient(circle at 50% 46%,rgba(255,236,170,.22) 0 22%,transparent 23%),
             repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 6px,transparent 6px 18px),
             linear-gradient(180deg,#5a3f52 0%,#3d2a3f 100%);
  box-shadow:inset 0 0 0 5px var(--rc),inset 0 0 24px 8px color-mix(in srgb,var(--rc) 80%,transparent);
  animation:uc-glow .2s ease-out calc(var(--dd,0s) + .3s) backwards;
}
.uc-back .ic{width:46%;height:46%;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--rc) 90%,transparent))}
#cards .card.down>:not(.uc-back,.uc-ribbon,.key){visibility:hidden}
@keyframes uc-glow{from{box-shadow:inset 0 0 0 5px var(--rc),inset 0 0 0 0 transparent}}
/* a legendary card: eight gold rays burst behind its art once, as it turns over (or lands, when it never flips) */
#cards .card.q3 .uc-art::after{
  content:"";position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;z-index:-1;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 8deg,rgba(240,160,30,.9) 0deg 13deg,rgba(255,200,60,0) 13deg 45deg);
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 71%);mask-image:radial-gradient(circle,#000 30%,transparent 71%);opacity:0;
}
#cards .card.q3.shown .uc-art::after{animation:uc-rays .6s var(--out) both}
@keyframes uc-rays{from{transform:scale(.6) rotate(-10deg);opacity:1}to{transform:scale(1.2) rotate(6deg);opacity:0}}

/* ---------- the pick: the chosen card stamps, the others drop; then a copy flies into its HUD chip (ui/draft.js) ---------- */
#scr-draft.picking{pointer-events:none}
#scr-draft.picking .card{animation:uc-drop .16s var(--out) forwards;transition:none}
#scr-draft.picking .card:nth-child(2){animation-delay:.03s}
#scr-draft.picking .card:nth-child(3){animation-delay:.06s}
#scr-draft.picking .card:nth-child(4){animation-delay:.09s}
#scr-draft.picking .card.chosen{animation:uc-stamp .14s var(--out) forwards;z-index:1}
#scr-draft.picking .card.chosen.gone{visibility:hidden}
@keyframes uc-drop{to{transform:translateY(30px);opacity:0}}
@keyframes uc-stamp{50%{transform:scale(1.07) rotate(-1deg)}100%{transform:scale(1.04) rotate(-1deg)}}
#scr-draft.picking .draft-head{transition:opacity .14s var(--out);opacity:0}
/* the flying copy (a child of body, above the HUD) and the chip a card upgrades (lit while the card is hovered) */
.uc-fly{position:fixed !important;z-index:var(--z-tip);margin:0 !important;pointer-events:none;transform-origin:50% 50%;animation:none !important;transition:none !important}
.uc-fly *{animation:none !important}
#hud-boons .uc-wait{opacity:0}
#hud-boons .uc-hl{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold-hi),0 3px 0 var(--ink);animation:uc-bob .28s var(--pop)}
@keyframes uc-bob{50%{transform:translateY(-4px)}}

/* ---------- the drop picker (powers full): the held powers as small cards ---------- */
#cards.drop{flex-wrap:wrap;--cw:150px;--nm:17px;--hs:13px;--ks:17px}
#cards.drop .card{aspect-ratio:auto;flex-basis:var(--cw)}
#cards.drop .uc-art{height:96px}
#cards.drop .uc-glyph .ic{width:62px;height:62px}
#cards.drop .uc-seal{width:34px;height:34px}
#cards.drop .uc-seal .ic{width:22px;height:22px}
#cards.drop .uc-mid{display:none}
#cards.drop .drop-head{flex-basis:100%;margin:0 0 4px;text-align:center;font:var(--w-strong) var(--t-lead)/1.3 var(--f-ui);color:#fff;text-shadow:0 2px 0 var(--ink)}
#cards.drop .drop-head b{font-weight:var(--w-strong);color:var(--gold-hi)}
#cards.drop .drop-back{margin-top:6px}

/* photo mode: the dealt cards at rest, face up, nothing moving */
.shot #cards .card,.shot #cards .card *,.shot #cards .card::before,.shot #cards .card::after{animation:none !important}
.shot #cards .card.q3 .uc-art::after{opacity:0}

/* ---------- sizes ---------- */
/* big screens: the same card, scaled */
@media (min-width:1800px) and (min-height:1000px){ #scr-draft .screen-inner{max-width:1240px} .draft-panel{zoom:1.16} }
@media (min-width:2400px) and (min-height:1300px){ #scr-draft .screen-inner{max-width:1500px} .draft-panel{zoom:1.38} }
/* a short screen (1366x768): 224 px cards, four side by side with no scroll */
@media (max-height:820px) and (min-width:601px){
  #scr-draft{padding-top:16px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
  .draft-panel{--cw:224px;--gap:16px;--nm:21px;--hs:14.5px;--ks:23px;gap:12px}
  .draft-title{font-size:var(--t-btn-l);-webkit-text-stroke:7px var(--ink);text-shadow:0 4px 0 var(--ink)}
  .uc-seal{width:40px;height:40px}
  .uc-seal .ic{width:27px;height:27px}
}
/* a narrow window: the same block, closer cards */
@media (max-width:1000px) and (min-width:601px){
  .draft-panel{--gap:12px}
}
@media (pointer:coarse){ #cards .key{display:none} }
/* phones: a 2x2 grid of the same cards, the header in two short rows */
@media (max-width:600px){
  /* the cards start under the HUD and the round's result, never behind them (owner, 2026-10-25: "mobile UI needs some
     love in general", the title under the HUD's fighter card): a tall offer scrolls instead */
  #scr-draft{padding-top:calc(env(safe-area-inset-top,0px) + 186px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
  /* the title and the gods' line say again what the round's result and each card's label say: on a phone their height
     goes to the third card (the title stays for screen readers) */
  .draft-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #scr-draft .draft-head .gods-line{display:none}
  .draft-panel{--cw:calc((100vw - 32px - 12px) / 2);--gap:12px;--nm:17px;--hs:12.5px;--ks:18px;gap:10px}
  .draft-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "gods" "right";justify-items:center;gap:8px}
  .draft-panel{width:auto}
  .draft-title{font-size:var(--t-h);-webkit-text-stroke:6px var(--ink);text-shadow:0 4px 0 var(--ink)}
  #scr-draft .draft-extras{justify-self:center}
  #scr-draft .btn.dx{min-height:36px;font-size:var(--t-name-s)}
  #cards{flex-wrap:wrap;row-gap:16px}
  #cards .card{flex:0 0 var(--cw);aspect-ratio:auto;padding:7px;border-radius:16px;--ring:4px;box-shadow:inset 0 0 0 var(--ring) var(--rc),0 5px 0 var(--ink)}
  #cards .card.q0{--ring:3px}
  #cards .card.q2{box-shadow:inset 0 0 0 var(--ring) var(--rc),0 0 0 2px #e6b6ef,0 5px 0 var(--ink)}
  #cards .card.q3{box-shadow:inset 0 0 0 var(--ring) var(--rc),0 0 0 2px var(--gold-hi),0 5px 0 var(--ink)}
  .uc-fx,#cards .card.down .uc-back{border-radius:12px}
  .uc-art{height:calc(var(--cw) * .5);border-radius:11px}
  .uc-glyph .ic{width:calc(var(--cw) * .36);height:calc(var(--cw) * .36)}
  .uc-seal{width:32px;height:32px;left:-7px;bottom:-7px;border-width:2.5px}
  .uc-seal.two{right:-7px}
  .uc-seal .ic{width:21px;height:21px}
  .uc-ribbon{top:-11px;padding:3px 8px 4px;font-size:var(--t-tag);border-width:2.5px;-webkit-text-stroke:3px var(--ink)}

  .uc-sticker{font-size:var(--t-tag);padding:2px 6px 3px;left:-6px;top:6px}
  .uc-name{margin-top:6px}
  .uc-mid{min-height:24px;margin-top:3px}
  .uc-delta{min-height:22px;font-size:var(--t-label);padding:1px 7px 1px 2px;gap:4px}
  .uc-delta i{font-size:var(--t-micro);padding:2px 6px 3px}
  .uc-foot{padding-top:5px;min-height:20px}
  .uc-pips{gap:3px}
  .uc-pips i{width:8px;height:8px;border-width:2px}
  .uc-pips.path i{width:9px;height:9px}
  .uc-tag{width:19px;height:19px;border-width:2px}
  .uc-tag .ic{width:13px;height:13px}
  .uc-ctx{font-size:var(--t-micro);margin-top:3px}
  .uc-ctx .w{display:none}
  .uc-ctx span+span::before{content:""}
  #cards.drop{--cw:calc((100vw - 32px - 24px) / 3)}
  #cards.drop .uc-art{height:64px}
  #cards.drop .uc-glyph .ic{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  #cards .card,#cards .card *,#cards .card::before,#cards .card::after{animation:none !important;transition:none !important}
  #cards .card:hover,#cards .card:focus-visible{transform:none}
  #cards .card.q3 .uc-art::after{opacity:0}
  #scr-draft.picking .card{animation:none}
}

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

/* ---------- redesign part B (docs/redesign-ia.md §4): the kind label, the "why take it" line, fewer dots ----------
   Top to bottom: the kind label (WEAPON, GOD POWER · Neptune, FIGHTER, GENERAL; on the drop picker, just the god) with
   the key cap at its right, the art window, the name, one headline with the big number, the delta (more of something
   held), and at the foot the "why take it" lines (a set, a path, the evolution, the signature) or the level pips. */
#cards .card{padding-top:12px}
#cards .key{top:9px;right:10px;min-width:24px;height:24px;font-size:var(--t-name-s);border-width:2.5px;box-shadow:0 2px 0 var(--ink)}
.uc-kind{
  align-self:stretch;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:5px;min-height:18px;margin:0 30px 7px 3px;text-align:left;
  font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-2);
}
.uc-kind b{font-weight:var(--w-strong);color:var(--kc,var(--ink))}
.uc-kind span::before{content:"·";margin-right:5px;color:var(--ink-3)}
.uc-kind.k-path{--kc:#8a541a}
.uc-kind.k-god{--kc:color-mix(in srgb,var(--gc) 62%,var(--ink))}
.uc-kind.k-combo{--kc:color-mix(in srgb,var(--gc) 50%,var(--ink))}
.uc-kind.k-sig{--kc:color-mix(in srgb,var(--gc) 55%,var(--ink))}
.uc-kind.k-boon{--kc:var(--laurel-lo)}
.uc-kind.k-evo{--kc:#a8620c}
/* a ribbon (Rare and up) hangs over the top edge: the label starts under it */
#cards .card:is(.q1,.q2,.q3) .uc-kind{margin-top:5px}
.uc-art{height:calc(var(--cw) * .5)}
.uc-glyph .ic{width:calc(var(--cw) * .38);height:calc(var(--cw) * .38)}
.uc-name{margin-top:calc(var(--cw) * .045)}
/* the foot: the "why take it" lines (or the level pips); nothing at all when the card builds on nothing */
.uc-foot{flex-direction:column;justify-content:flex-end;align-items:stretch;gap:5px;padding-top:8px;min-height:0}
.uc-foot:empty{display:none}
.uc-foot>.uc-pips{align-self:center}
.uc-why{display:grid;gap:4px}
.uc-why>span{
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:24px;box-sizing:border-box;padding:3px 8px 3px 6px;border-radius:9px;
  background:color-mix(in srgb,var(--tc,var(--gold)) 15%,#fffaf0);border:2px solid color-mix(in srgb,var(--tc,var(--gold-lo)) 45%,transparent);
  font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink);text-align:left;
}
.uc-why>span>.ic{flex:none;width:17px;height:17px}
.uc-why>span>b{font-weight:var(--w-strong);min-width:0}
.uc-why .uc-pips{flex:none;padding:0}
.uc-why .w-path{--tc:#c98b3a}
.uc-why .w-evo{--tc:#f0a020;background:linear-gradient(90deg,#fff1b8,#ffe08a);border-color:#d99a20}
.uc-why .w-evo>.ic{filter:drop-shadow(0 0 3px rgba(255,190,40,.9))}
.uc-why .w-done{background:color-mix(in srgb,var(--tc) 28%,#fff);border-color:var(--tc);box-shadow:0 0 0 2px #fff,0 0 8px 1px color-mix(in srgb,var(--tc) 60%,transparent)}
.uc-why .w-patron{--tc:#e3b341;font-weight:var(--w-strong)}
.uc-why .w-patron b{font-weight:var(--w-strong);color:var(--ink-2)}
.uc-ctx,.uc-tags{display:none}
@media (hover:hover) and (pointer:fine){ #cards .card:hover .uc-why .w-done{animation:uc-tag-pulse .5s var(--pop) 1} }
@media (max-height:820px) and (min-width:601px){
  .uc-kind{font-size:var(--t-micro);margin-bottom:5px}
  .uc-why>span{font-size:var(--t-caption);min-height:22px}
}
@media (max-width:600px){
  #cards .card{padding-top:8px}
  .uc-kind{font-size:var(--t-micro);letter-spacing:.06em;margin:0 0 5px 1px;min-height:0}
  #cards .card:is(.q1,.q2,.q3) .uc-kind{margin-top:7px}
  /* a lower art window, so two rows of cards fit under the round's result on a phone */
  .uc-art{height:calc(var(--cw) * .36)}
  .uc-glyph .ic{width:calc(var(--cw) * .27);height:calc(var(--cw) * .27)}
  .uc-why>span{font-size:var(--t-label);padding:2px 5px 2px 4px;gap:4px;min-height:20px}
  .uc-why>span>.ic{width:14px;height:14px}
  .uc-foot{padding-top:6px}
}
/* the delta never runs off the card: its words wrap under the "Lv 1 → 2" stamp, centred */
.uc-delta{white-space:normal;flex-wrap:wrap;justify-content:center;row-gap:2px;text-align:center;border-radius:13px;padding:3px 9px 3px 3px;line-height:1.15}
.uc-delta i{flex:none;white-space:nowrap}

/* the champion in the spotlight behind the cards (owner, 2026-10-22): the backdrop's soft focus and pool on the winner
   (nav.css .bd-spot, which ui/rebirth.js keeps on the fighter), with the plum dim deeper round them and under the cards */
body[data-backdrop="draft"] .bd-spot{opacity:1}
body[data-backdrop="draft"] .bd-dim{
  background:
    radial-gradient(ellipse calc(var(--bd-r,320px) * 1.1) calc(var(--bd-r,320px) * .95) at var(--bd-hero,50% 30%),rgba(var(--bd-plum),0) 35%,rgba(var(--bd-plum),.28) 100%),
    linear-gradient(0deg,rgba(var(--bd-plum),.5) 0%,rgba(var(--bd-plum),.22) 45%,rgba(var(--bd-plum),.1) 100%);
}