/* ==========================================================================
   Gods and powers                                      owner: the gods-and-powers package
   The gods row on the new-fighter card, the god / combo / evolution cards after a round, the power chips and set
   bonuses on the HUD, the powers section of the Stats panel, and a few pops. Loaded last (after nav.css).
   A god's colour comes in as --gc, a tag's as --tc, a card's rarity as --rc.
   ========================================================================== */

/* ---------- a god: the god's glyph on a disc of its colour ---------- */
.god-chip{
  display:inline-flex;align-items:center;gap:6px;min-width:0;padding:3px 10px 3px 3px;border:2.5px solid var(--ink);border-radius:999px;
  background:var(--paper);box-shadow:0 2px 0 var(--ink);font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink);white-space:nowrap;cursor:default;
}
.god-chip .ic{
  flex:none;width:26px;height:26px;padding:3px;box-sizing:border-box;border-radius:50%;border:2.5px solid var(--ink);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gc) 45%,#fff) 0 30%,var(--gc) 75%);
}
/* the new-fighter card: a label, then one row of three equal chips, the same height every life */
.rb-gods{display:grid;gap:7px;min-width:0}
.rbg-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-width:0}
.god-chip.big{padding:3px 8px 3px 3px;gap:7px;min-width:0}
.god-chip.big .ic{width:34px;height:34px;padding:4px}
.gc-txt{display:grid;gap:3px;min-width:0}
.gc-txt b{font:400 var(--t-name-s)/1 var(--f-display);color:var(--ink);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.gc-txt small{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- after-round cards: their look moved to styles/draft.css (the card pass). Colour jobs (research §2.4):
   rarity owns the frame, ribbon and gems; the god owns the patterned art window and the seal; the two never mix. ---------- */
/* tags as pills (the Stats panel's powers section) */
.tag-row{display:inline-flex;flex-wrap:wrap;gap:4px}
.tag{
  display:inline-block;padding:2px 7px 3px;border:2px solid var(--ink);border-radius:999px;font:var(--w-strong) var(--t-micro)/1 var(--f-ui);font-style:normal;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--ink);background:color-mix(in srgb,var(--tc) 32%,#fff);
}

/* ---------- HUD: power chips first, ringed in their god's colour ---------- */
.up-chip.pow{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--gc) 22%,#fff));outline:2.5px solid var(--gc);outline-offset:-8px}
.up-chip.pow.combo{background:linear-gradient(135deg,color-mix(in srgb,var(--gc) 30%,#fff) 50%,color-mix(in srgb,var(--gc2) 30%,#fff) 50%)}
.up-chip.pow .up-badge{background:color-mix(in srgb,var(--gc) 35%,#fff)}
.up-wpn.evo{box-shadow:0 0 0 3px var(--r3),0 3px 0 var(--ink);animation:evoGlow 1.8s ease-in-out infinite}
.up-wpn.evo .up-badge{background:var(--g-gold,#f2c94c);color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
@keyframes evoGlow{50%{box-shadow:0 0 0 3px #ffe9a0,0 0 14px 2px rgba(255,214,90,.7),0 3px 0 var(--ink)}}
/* status strip: a set bonus in its tag's colour; powers that are ready */
.st-chip.st-set{background:color-mix(in srgb,var(--tc) 35%,#fff)}
.st-shield{background:#dcefff}
.st-secondWind{background:#ece0ff}
.st-berserk,.st-fists{background:#ffe0c2}
/* pops: coins picked up, aura ticks */
.pop.coin{color:#ffd84a;font-size:24px;-webkit-text-stroke:5px var(--ink)}
.pop.coin::before{
  content:"";display:inline-block;width:.8em;height:.8em;margin-right:.08em;vertical-align:-.06em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='19' fill='%23f2c94c' stroke='%232a1a2e' stroke-width='5'/%3E%3Ccircle cx='24' cy='24' r='11' fill='none' stroke='%23db8720' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pop.aura{font-size:18px;color:#fff3c0;-webkit-text-stroke:4px var(--ink);text-shadow:none}
/* companions: a blue health bar with their name */
.ub.ally .ub-track>i{background:linear-gradient(180deg,#b7f0ff 0%,#4fc3e8 48%,#1f86b8 100%)}
.ub.ally .ub-tag{background:#dcf4ff}
/* the evolution banner */
.banner.evolve .banner-title{color:#ffe9a0}
.banner.evolve .banner-sub{background:var(--g-gold);color:var(--ink)}   /* one gold, no rainbow (owner, 2026-10-25) */

.set-chip{
  display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 3px;border:2.5px solid var(--ink);border-radius:999px;cursor:default;
  background:var(--paper);font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-2);opacity:.75;
}
.set-chip .ic{width:17px;height:17px}
.set-chip b{font:400 var(--t-tag)/1 var(--f-display);color:var(--ink)}
.set-chip.on{opacity:1;background:color-mix(in srgb,var(--tc) 35%,#fff);color:var(--ink);box-shadow:0 2px 0 var(--ink)}

/* ---------- gods v2: the god kits, the patron, the omen, favor rings and the divine moment ----------
   The kit (research §2.4): each god's art-window pattern as a variable, the same tiles as styles/draft.css .uc-art.g-*
   (the window's pattern tells a god from a rarity); the seal is the god's glyph on a disc of its colour. */
:root{
  --pat-mars:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 3px,transparent 3px 12px);
  --pat-jupiter: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;
  --pat-vulcan: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;
  --pat-neptune:radial-gradient(circle at 50% 100%,transparent 7px,rgba(255,255,255,.3) 8px 10px,transparent 11px) 0 0/24px 12px;
  --pat-diana: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;
  --pat-minerva: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;
  --pat-pluto: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;
  --pat-fortuna: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;
}
.g-mars{--gpat:var(--pat-mars)} .g-jupiter{--gpat:var(--pat-jupiter)} .g-vulcan{--gpat:var(--pat-vulcan)} .g-neptune{--gpat:var(--pat-neptune)}
.g-diana{--gpat:var(--pat-diana)} .g-minerva{--gpat:var(--pat-minerva)} .g-pluto{--gpat:var(--pat-pluto)} .g-fortuna{--gpat:var(--pat-fortuna)}
.crown{position:absolute;top:-13px;left:50%;width:22px;height:18px;transform:translateX(-50%) rotate(-6deg);pointer-events:none}
.crown .ic{width:22px;height:22px;display:block;filter:drop-shadow(0 2px 0 var(--ink))}

/* the new-fighter card: the three gods are buttons now; the patron wears a crown and a ring of light */
button.god-dot{appearance:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;position:relative}
.god-dot.patron{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 var(--ink),0 0 0 4px #fff6e4,0 0 0 6.5px var(--ink),0 0 14px 6px color-mix(in srgb,var(--gc) 55%,transparent);
}
.god-dot:not(.patron){opacity:.82;filter:saturate(.8)}
.god-dot:not(.patron):is(:hover,:focus-visible){opacity:1;filter:none}
.god-dot.just{animation:god-crowned .42s var(--pop)}
@keyframes god-crowned{0%{transform:scale(.8) rotate(-8deg)}60%{transform:scale(1.14) rotate(4deg)}}
/* the patron's two starting gifts: small power chips in the patron's colour; the picked one ticked */
.rbg-gift{display:flex;gap:6px}
.gift-chip{
  appearance:none;position:relative;width:36px;height:36px;padding:3px;box-sizing:border-box;border-radius:10px;cursor:pointer;
  border:var(--line-s) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 25%,#fff),color-mix(in srgb,var(--gc) 60%,#fff));
  opacity:.7;transition:transform .14s var(--out),opacity .14s var(--out);
}
.gift-chip .ic{width:100%;height:100%;display:block}
.gift-chip.on{opacity:1;transform:translateY(-1px)}
.gift-tick{
  position:absolute;right:-7px;top:-8px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;
  border:2px solid var(--ink);background:#6fbf45;color:#fff;font:var(--w-strong) var(--t-label)/1 var(--f-ui);
}
@media (hover:hover) and (pointer:fine){ .gift-chip:hover{opacity:1;transform:translateY(-2px)} }
/* the omen: a small banner in the bringing god's colour, the upside green and the downside red */
.rb-omen{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 7px 6px 6px;
  border:var(--line-s) solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc,#d6b4ff) 14%,#fff8ec),color-mix(in srgb,var(--gc,#d6b4ff) 30%,#fff8ec));
}
.rb-omen.none{background:var(--g-paper);grid-template-columns:auto minmax(0,1fr);opacity:.9}
.om-seal{
  width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:var(--line-s) solid var(--ink);box-sizing:border-box;cursor:default;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gc,#d6b4ff) 45%,#fff) 0 30%,var(--gc,#d6b4ff) 75%);box-shadow:inset 0 2px 0 rgba(255,255,255,.5);
}
.om-seal .ic{width:21px;height:21px}
.om-txt{display:grid;gap:2px;min-width:0;cursor:default}
.om-txt b{font:400 var(--t-name-s)/1.05 var(--f-display);font-weight:400;color:var(--ink)}
.om-txt b::before{content:"Omen · ";font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3);vertical-align:2px}
.rb-omen.none .om-txt b::before{content:none}
.om-txt small{font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.om-txt i{font-style:normal}
.om-txt i.up{color:#2f6a1c}
.om-txt i.down{color:#a3182a}
.om-acts{display:flex;gap:5px}
.om-btn{
  appearance:none;display:grid;justify-items:center;gap:1px;min-width:36px;padding:3px 4px 2px;border:2.5px solid var(--ink);border-radius:9px;cursor:pointer;
  background:var(--g-paper);box-shadow:0 2px 0 var(--ink);font:var(--w-strong) var(--t-label)/1 var(--f-ui);color:var(--ink);
}
.om-btn>.ic{width:17px;height:17px}
.om-btn span{display:flex;align-items:center;gap:1px}
.om-btn span .ic{width:11px;height:11px}
.om-btn:disabled{opacity:.45;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){ .om-btn:not(:disabled):hover{transform:translateY(-1px)} }

/* the HUD: the gods' favor rings by your name (the patron first, crowned); a full ring glows and can be tapped */
.hud-gods{flex:none;display:flex;align-items:center;gap:5px;padding-top:3px}
.hud-gods:empty{display:none}
.hg-ring{
  appearance:none;position:relative;width:26px;height:26px;padding:3px;box-sizing:border-box;border-radius:50%;cursor:pointer;pointer-events:auto;
  border:2.5px solid var(--ink);
  background:radial-gradient(circle,color-mix(in srgb,var(--gc) 30%,#fff) 0 56%,transparent 57%),conic-gradient(var(--gc) calc(var(--f,0) * 360deg),#4b3045 0);
  box-shadow:0 2px 0 var(--ink);
}
.hg-ring .ic{width:100%;height:100%;display:block}
.hg-ring.patron{width:30px;height:30px}
.hg-ring .crown{top:-11px;width:17px;height:14px}
.hg-ring .crown .ic{width:17px;height:17px}
.hg-ring.full{animation:hg-ready 1.3s ease-in-out infinite;box-shadow:0 2px 0 var(--ink),0 0 0 3px #fff6e4,0 0 12px 4px color-mix(in srgb,var(--gc) 70%,transparent)}
.hg-ring.used{opacity:.45;filter:grayscale(.6)}
.hg-ring.used::after{content:"✓";position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);background:#fff;font:var(--w-strong) var(--t-micro)/1 var(--f-ui);color:var(--ink)}
.hg-ring.pop{animation:hg-pop .42s var(--pop),hg-ready 1.3s ease-in-out .42s infinite}
.hg-ring.nudge{animation:hg-nudge .3s ease}
@keyframes hg-ready{50%{transform:translateY(-2px) scale(1.06)}}
@keyframes hg-pop{from{transform:scale(.6)}60%{transform:scale(1.3)}}
@keyframes hg-nudge{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
/* the call button: a ready god's moment at the bottom centre, the god's seal, its name and the moment, and its key
   (owner, 2026-10-24: "should be more prominent / obvious"); a soft ring in the god's colour breathes while it waits */
.hud-call{
  appearance:none;position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);z-index:var(--z-nav);
  display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border-radius:999px;cursor:pointer;pointer-events:auto;
  border:var(--line) solid var(--ink);background:var(--g-paper);color:var(--ink);text-align:left;
  box-shadow:var(--lip),var(--drop),0 0 0 3px color-mix(in srgb,var(--gc) 60%,transparent);
  animation:hc-breathe 1.6s ease-in-out infinite;
}
.hud-call[hidden]{display:none}
.hud-call .hc-ic{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--gc);border:2.5px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.hud-call .hc-ic .ic{width:27px;height:27px}
.hud-call .hc-t{display:grid;gap:2px}
.hud-call b{font:var(--w-strong) var(--t-name)/1 var(--f-ui);white-space:nowrap}
.hud-call small{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}
.hud-call kbd{margin-left:2px}
.hud-call.in{animation:hc-in .18s cubic-bezier(.2,.8,.2,1),hc-breathe 1.6s ease-in-out .18s infinite}
.hud-call:active{transform:translateX(-50%) scale(.97)}
@keyframes hc-in{from{opacity:0;transform:translate(-50%,6px) scale(.96)}}
@keyframes hc-breathe{50%{box-shadow:var(--lip),var(--drop),0 0 0 6px color-mix(in srgb,var(--gc) 45%,transparent)}}
@media (hover:none){.hud-call kbd{display:none}}
@media (max-width:700px){.hud-call{bottom:calc(env(safe-area-inset-bottom,0px) + 112px)}}
@media (prefers-reduced-motion:reduce){.hud-call,.hud-call.in{animation:none}}
/* the divine moment: a screen-wide flash in the god's colour under the banner */
.divine-flash{
  position:fixed;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--gc,#fff) 55%,#fff) 0%,color-mix(in srgb,var(--gc,#fff) 45%,transparent) 38%,transparent 72%),
    radial-gradient(ellipse at 50% 50%,transparent 50%,color-mix(in srgb,var(--gc,#fff) 40%,transparent) 100%);
  mix-blend-mode:screen;
}
.divine-flash.on{animation:divine-flash 1.4s ease-out}
@keyframes divine-flash{0%{opacity:0}8%{opacity:.95}30%{opacity:.6}100%{opacity:0}}
/* its Rive burst (ui/rive.js): a layer above the flash and under the HUD and banner, the canvas placed on the title */
.rive-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.rive-layer canvas{position:absolute;display:block}
.banner.divine .banner-title{font-size:clamp(50px,8vw,96px);animation:divine-title .6s var(--pop)}
.banner.divine .banner-sub{font-size:var(--t-lead);background:var(--gpat,linear-gradient(transparent,transparent)),linear-gradient(180deg,#fff8ec,#f3e3c2)}
.banner.divine.g-mars .banner-title{color:#ffb4a8}
.banner.divine.g-jupiter .banner-title{color:#fff1a0}
.banner.divine.g-vulcan .banner-title{color:#ffc58a}
.banner.divine.g-neptune .banner-title{color:#b8f0ff}
.banner.divine.g-diana .banner-title{color:#c6f2c0}
.banner.divine.g-minerva .banner-title{color:#d6dcff}
.banner.divine.g-pluto .banner-title{color:#e2ccff}
.banner.divine.g-fortuna .banner-title{color:#ffc6e0}
@keyframes divine-title{from{transform:scale(1.6) rotate(-4deg);opacity:0}}
/* the draft header: "Mars and Diana offer gifts", each name in its colour on a dark-ink pill */
.gods-offer{display:inline-flex;align-items:center;gap:4px;padding:3px 11px 4px;border-radius:999px;background:var(--ink);color:#fff6e4;font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);white-space:nowrap}
.gods-offer b{font:400 var(--t-name-s)/1 var(--f-display);font-weight:400;color:color-mix(in srgb,var(--gc) 65%,#fff)}
/* the Stats panel: the patron and the omen beside the gods */
.god-chip.patron{box-shadow:0 2px 0 var(--ink),0 0 0 2.5px color-mix(in srgb,var(--gc) 60%,#fff)}
.god-chip.omen{background:color-mix(in srgb,var(--gc) 18%,#fff)}
/* the status strip: the moments and the grounded powers in force */
.st-warCry{background:#ffd2c8}
.st-aegisMoment,.st-banner{background:#dfe3ff}
.st-hunger,.st-omenWind{background:#ece0ff}
@media (max-width:600px){
  .hud-gods{gap:3px;padding-top:2px}
  .hg-ring{width:18px;height:18px;padding:1.5px;border-width:2px;box-shadow:0 1.5px 0 var(--ink)}
  .hg-ring.patron{width:21px;height:21px}
  .hg-ring .crown{top:-9px;width:12px;height:10px}
  .hg-ring .crown .ic{width:12px;height:12px}
  .hg-ring.used::after{width:11px;height:11px;right:-4px;bottom:-4px;font-size:var(--t-micro)}
  .gods-offer{font-size:var(--t-label);padding:2px 8px 3px}
  .gods-offer b{font-size:var(--t-tag)}
}
@media (prefers-reduced-motion:reduce){
  .god-dot.just,.hg-ring.full,.hg-ring.pop,.hg-ring.nudge,.banner.divine .banner-title{animation:none}
  .divine-flash.on{animation:divine-flash-still 1.2s ease-out}
}
@keyframes divine-flash-still{0%,40%{opacity:.5}100%{opacity:0}}

/* ---------- small screens ---------- */
@media (max-height:820px) and (min-width:721px){
  /* a short screen: the label and the three gods on one line (the card must fit a 1366x768 screen) */
  .rb-gods{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
  #scr-rebirth .reveal{gap:11px}   /* the gap lives.css uses below 760 px, so the gods row costs no height */
  .rb-gods .rbw-label{font-size:0}
  .rb-gods .rbw-label::after{content:"Gods";font-size:var(--t-label)}
  .god-chip.big{padding:2px 7px 2px 2px;gap:5px}
  .god-chip.big .ic{width:26px;height:26px;padding:3px}
  .gc-txt{gap:2px}
  .gc-txt b{font-size:var(--t-name-s)}
  .gc-txt small{font-size:var(--t-micro)}
}
@media (max-width:600px){
  .rb-gods{gap:5px}
  .rbg-row{gap:5px}
  .god-chip.big{padding:2px 5px 2px 2px;gap:4px}
  .god-chip.big .ic{width:26px;height:26px;padding:3px}
  .gc-txt b{font-size:var(--t-tag)}
  .gc-txt small{font-size:var(--t-micro)}
}
@media (prefers-reduced-motion:reduce){
  .up-wpn.evo{animation:none}
}
/* the draft's gods line sits on its own row under the header, centred under the title */
.draft-head .gods-line{grid-column:1/-1;justify-self:center;margin:-2px 0 0;min-height:0}
.draft-head .gods-line:empty{display:none}

/* the evolution's progress (ui/evo.js): a row under the weapon paths in the Stats panel and the pause menu (its tip has
   the two steps), and the HUD's weapon chip once both are done (a star, a gold ring) */
.pv-evo > b{display:flex;align-items:center;gap:6px;min-width:0}
.pv-evo > b .ic,.pb-evo > .ic{flex:none;width:20px;height:20px;filter:drop-shadow(0 0 3px rgba(255,190,40,.9))}
.pv-evo > span,.pb-evo > small{justify-self:end;font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-2);white-space:nowrap}
.pv-evo.ready > span,.pb-evo.ready > small{color:#a86a00}
.up-wpn.evo-ready{box-shadow:0 0 0 3px #f2c94c,0 3px 0 var(--ink)}
.up-wpn.evo-ready .up-badge{background:var(--g-gold,#f2c94c);color:#fff;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}