/* Progress and identity are readable through shape and state as well as color. */
#hud .right-tools{left:calc(50% + 270px);right:auto;width:202px;gap:10px;overflow:visible;align-items:stretch}
#hud .right-tools>button{flex:1 0 96px;width:96px!important;height:108px;pointer-events:auto;box-sizing:border-box}
#hud .right-tools>button{position:relative;isolation:isolate;overflow:visible}
#hud .right-tools #draw-button{align-items:center;gap:3px;padding:8px}
#hud .right-tools #draw-button>img{display:block;width:36px;height:36px;margin:0}
#hud #draw-button.draw-ready{border:2px solid #ffde86;background:linear-gradient(145deg,#73562d,#332718);color:#fff0b9;box-shadow:inset 0 0 14px #f0c97230,0 0 24px 5px #e6ba6670}
#draw-button.draw-ready:before,#draw-button.draw-ready:after{content:"";pointer-events:none;position:absolute;inset:-5px;border:3px solid #ffe19a;border-radius:14px;box-shadow:0 0 10px #f2c96988;animation:draw-halo 1.7s ease-out infinite}
#draw-button.draw-ready:after{inset:-1px;animation-delay:.85s}
@keyframes draw-halo{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}
#hud #draw-button>.draw-guide{position:absolute;left:50%;bottom:calc(100% + 38px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:186px;max-width:calc(100vw - 24px);padding:11px 12px;border:1px solid #f3d080;border-radius:8px;background:#302619f5;box-shadow:0 4px 18px #0009,0 0 18px #edc27344;color:#fff0b8;text-align:center;pointer-events:none;z-index:2}
#first-draw-guide b{font-size:16px;line-height:22px;white-space:nowrap}#first-draw-guide small{font-size:13px;line-height:18px;color:#e9d3a4}
#first-draw-guide svg{position:absolute;top:calc(100% + 5px);left:calc(50% - 14px);width:28px;height:30px;fill:#ffe09a;filter:drop-shadow(0 2px 4px #000a);animation:first-draw-arrow 1s ease-in-out infinite;transition:none}

body:has(dialog[open]) #first-draw-guide,body:not([data-mode="game"]) #first-draw-guide{display:none!important}
body:has(dialog[open]) #draw-button.draw-ready:before,body:has(dialog[open]) #draw-button.draw-ready:after{display:none}
#hud .inventory{position:relative;overflow:visible}
#hud .inventory>.hud-side-tools{position:absolute;left:calc(100% + 10px);right:auto;top:10px;transform:none;display:flex;flex-direction:column;gap:8px;width:76px;zoom:1;pointer-events:none}
#hud .hud-side-tools #bond-view-button{width:76px;min-height:78px;padding:8px 5px;pointer-events:auto;box-shadow:inset 0 0 0 2px #10251d,0 4px 16px #0006}
#hud #bond-view-button{margin:0;width:100%;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:linear-gradient(#263a38,#152322);border:1px solid #84b6a1;border-radius:9px;color:#d5eadd;font-size:13px}
#bond-view-button img{width:32px;height:32px;border:1px solid #879b7e}
#bond-view-dialog .growth-rail{position:static;display:flex;flex-wrap:wrap;gap:10px;width:auto;max-height:none;transform:none;margin:18px 0 0;padding:12px;border-top:1px solid #526653;zoom:1}
#bond-view-dialog .bond-tooltip{left:0;top:100%;max-width:calc(100vw - 60px);pointer-events:auto}
#bond-view-dialog .growth-rail[hidden]{display:none}
#hud #opening-status,#hud #run-status{display:none}
#hud #upgrade-button{position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none;display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;margin:0;padding:6px 2px 8px;gap:3px;border:1px solid #637e8d;background:linear-gradient(#263541,#14232d);border-radius:10px;color:#c7e6ef}
#upgrade-button kbd{position:absolute;right:4px;top:4px;font-size:10px}
#upgrade-button .charge-dial{position:relative;width:58px;height:58px;display:grid;place-items:center}
.charge-dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.charge-dial circle{fill:none;stroke-width:4}.charge-track{stroke:#0e171e}.charge-fill{stroke:#73d7ed;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .35s ease}
#upgrade-button .charge-dial img{width:35px;height:35px;border-radius:50%;filter:saturate(.7);margin:0}
#upgrade-button .charge-awards{position:absolute;right:-2px;bottom:0;background:#f1cf7b;color:#241d10;border:2px solid #463820;border-radius:50%;min-width:22px;min-height:22px;line-height:18px}
#upgrade-button .charge-label{font-size:12px}#upgrade-button #upgrade-count{font-size:11px;color:#bbd3df}
#upgrade-button.charge-near .charge-fill{stroke:#c3f7ff;filter:drop-shadow(0 0 3px #69dcff)}
#hud #upgrade-button.ready{border-color:#f4ce78;box-shadow:0 0 14px #f4ce7850;color:#ffe4a4}
#upgrade-button.ready .charge-dial:after{content:"";position:absolute;inset:0;border:2px solid #f4ce78;border-radius:50%;animation:draw-halo 1.6s infinite}
#upgrade-button .charge-source{display:none}
#upgrade-button #upgrade-count{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kill-charge-mote{position:fixed;width:9px;height:9px;border-radius:50%;background:#e2fbff;box-shadow:0 0 9px 3px #64d9ff;z-index:80;pointer-events:none}
.card-family-badge{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;border-bottom:1px solid var(--family-color,#c6b98c);color:var(--family-color,#c6b98c);background:#111b1bcc;font-size:12px;letter-spacing:1px;font-weight:800}
.card-family-badge img{width:20px;height:20px}
[data-card-family="preparation"]{--family-color:#9fd78c}[data-card-family="basic"]{--family-color:#c6b98c}[data-card-family="strength"]{--family-color:#f39969}[data-card-family="sword"]{--family-color:#72d9e9}[data-card-family="summon"]{--family-color:#b4a0fa}[data-card-family="agility"]{--family-color:#75e6b8}[data-card-family="hero"]{--family-color:#f5cf73}
button.info-card[data-card-family]{border-top:4px solid var(--family-color);background:linear-gradient(155deg,color-mix(in srgb,var(--family-color) 13%,#17221f),#101915 65%)}
button.info-card[data-card-family="hero"]{border:3px double #f5cf73;border-top:7px double #f5cf73;box-shadow:inset 0 0 35px #ecc66e18,0 0 22px #c7913930;border-radius:20px 20px 8px 8px}
[data-card-family="hero"] .choice-main-icon{border:3px double #f5cf73;border-radius:50%;box-shadow:0 0 22px #e2b55f55}
button.held-card[data-card-family]{border-top:3px solid var(--family-color)}
.hero-bars .health-bar{height:18px;background:#101a12;border:1px solid #91a38b;box-shadow:inset 0 0 0 1px #060c08;border-radius:2px;overflow:hidden}
.hero-bars .health-bar i{background:linear-gradient(#dbf7cb88,transparent 45%,#164b2a66),var(--health-color,#65d873);transition:width .16s linear}
.hero-bars .health-bar span{color:#fff;font-size:12px;font-weight:800;text-shadow:0 1px 2px #000,1px 0 2px #000}
.damage-number.pet b{color:#c6b0ff;text-shadow:0 0 7px #592d9c,0 2px 2px #111}
.damage-number.pet .damage-owner{font-size:10px;margin-right:3px;color:#dacbff}
@media(prefers-reduced-motion:reduce){#draw-button:before,#draw-button:after,#upgrade-button.ready .charge-dial:after,#first-draw-guide svg{animation:none!important}.charge-fill{transition:none}#draw-button.draw-ready:before{opacity:.7}#draw-button.draw-ready:after{display:none}}
@media(max-height:720px){#hud .right-tools{gap:6px}#hud #bond-view-button{min-height:55px}#bond-view-button img{width:25px;height:25px}#upgrade-button .charge-dial{width:44px;height:44px}#upgrade-button .charge-dial img{width:26px;height:26px}}
@media(max-width:850px){#hud .inventory>.hud-side-tools{left:calc(100% + 6px);width:56px}#hud .hud-side-tools #bond-view-button{width:56px;min-height:68px}}
@media(max-width:700px){#hud #draw-button>.draw-guide{width:174px;padding:9px}}
@media(max-height:480px){#hud #draw-button>.draw-guide{bottom:calc(100% + 24px);padding:6px 9px;gap:0}#first-draw-guide b{font-size:14px}#first-draw-guide small{font-size:12px}}

/* Match the actual dialog selectors: the old #draw-dialog rules outranked the
   generic .info-card rules. Colour now covers the art, frame and name plaque. */
[data-card-family="preparation"]{--family-panel:#23432b;--family-deep:#11251c}
[data-card-family="basic"]{--family-panel:#514731;--family-deep:#26231c}
[data-card-family="strength"]{--family-panel:#793d2c;--family-deep:#301a18}
[data-card-family="sword"]{--family-panel:#245666;--family-deep:#102b35}
[data-card-family="summon"]{--family-panel:#59417e;--family-deep:#241b3b}
[data-card-family="agility"]{--family-panel:#1b6655;--family-deep:#102d28}
[data-card-family="hero"]{--family-panel:#796023;--family-deep:#322612}
#draw-dialog .choice-card[data-card-family],#evolution-dialog .evolution-card[data-card-family]{
 border:2px solid var(--family-color);border-top:5px solid var(--family-color);border-radius:10px;
 background:linear-gradient(var(--family-panel) 0 38%,var(--family-deep) 52%);
 box-shadow:inset 0 0 0 3px #090e1288,0 6px 16px #000b;
}
#draw-dialog .choice-card[data-card-family]::after,#evolution-dialog .evolution-card[data-card-family]::after{border-color:var(--family-color)}
#draw-dialog [data-card-family] .card-family-badge,#evolution-dialog [data-card-family] .card-family-badge{
 flex:0 0 33px;box-sizing:border-box;padding:5px 8px;background:var(--family-color);color:#111820;font-size:13px;border:0;border-radius:5px 5px 0 0;letter-spacing:1px;
}
#draw-dialog [data-card-family] .choice-set-title,#evolution-dialog [data-card-family] .choice-set-title{
 top:36px;left:10%;width:80%;height:28px;font-size:16px;color:var(--family-color);border:0;background:none;box-shadow:none;
}
#draw-dialog [data-card-family] .choice-art,#evolution-dialog [data-card-family] .choice-art{
 background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--family-color) 35%,transparent),transparent 75%);border-radius:0;padding-top:28px;
}
#draw-dialog [data-card-family] .choice-art .info-tags,#evolution-dialog [data-card-family] .choice-art .info-tags{top:30px;left:7px;max-width:70px}
#draw-dialog [data-card-family] .choice-main-icon,#evolution-dialog [data-card-family] .choice-main-icon{border-color:var(--family-color);box-shadow:0 0 0 3px var(--family-deep),0 0 18px color-mix(in srgb,var(--family-color) 30%,transparent)}
#draw-dialog [data-card-family] .choice-name,#evolution-dialog [data-card-family] .choice-name{color:#fff6e8;background:var(--family-panel);border-color:var(--family-color);font-weight:700}
#draw-dialog [data-card-family] .choice-name::before,#draw-dialog [data-card-family] .choice-name::after,#evolution-dialog [data-card-family] .choice-name::before,#evolution-dialog [data-card-family] .choice-name::after{color:var(--family-color)}
#draw-dialog [data-card-family] .choice-copy strong,#draw-dialog [data-card-family] .choice-section-label,#evolution-dialog [data-card-family] .choice-copy strong{color:var(--family-color)}
#draw-dialog .choice-card[data-card-family="basic"]{border-radius:4px;border-top-width:2px}
#draw-dialog .choice-card[data-card-family="hero"],#evolution-dialog .evolution-card[data-card-family="hero"]{border:5px double var(--family-color);border-radius:28px 28px 10px 10px;box-shadow:inset 0 0 28px #e6c66c22,0 0 20px #e6c66c44,0 6px 16px #000b}
#draw-dialog [data-card-family="hero"] .card-family-badge,#evolution-dialog [data-card-family="hero"] .card-family-badge{border-radius:22px 22px 0 0}
#draw-dialog [data-card-family="hero"] .choice-main-icon,#evolution-dialog [data-card-family="hero"] .choice-main-icon{border:3px double var(--family-color);border-radius:50%}
#draw-dialog .choice-card[data-card-family]:is(:hover,.pointer-hover,:focus-visible),#evolution-dialog .evolution-card[data-card-family]:is(:hover,.pointer-hover,:focus-visible){border-color:var(--family-color);outline:2px solid var(--family-color);outline-offset:3px;box-shadow:0 0 24px color-mix(in srgb,var(--family-color) 35%,transparent)}
#hud .held-card[data-card-family]{border:2px solid var(--family-color);background:linear-gradient(var(--family-panel),var(--family-deep))}
#hud .held-card[data-card-family="hero"]{border:3px double var(--family-color);border-radius:14px 14px 4px 4px}
#card-dialog[data-card-family]:not([data-card-family="item"]){border:2px solid var(--family-color);background:linear-gradient(145deg,var(--family-panel),var(--family-deep))}
@media(max-height:780px){#draw-dialog [data-card-family] .card-family-badge,#evolution-dialog [data-card-family] .card-family-badge{flex-basis:27px;font-size:11px}#draw-dialog [data-card-family] .choice-set-title,#evolution-dialog [data-card-family] .choice-set-title{top:28px;height:24px;font-size:14px}}

/* Names remain distinct from the set subtitle; longer copy stays in its existing scroll area. */
#draw-dialog [data-card-family] .choice-name,#evolution-dialog [data-card-family] .choice-name{font-size:26px;line-height:1.2;min-height:38px;height:auto;padding-block:5px;font-weight:800;text-shadow:0 2px 3px #000a}
#draw-dialog [data-card-family] .choice-copy p,#evolution-dialog [data-card-family] .choice-copy p{font-size:16px;line-height:1.48}
#draw-dialog [data-card-family] .choice-section-label,#evolution-dialog [data-card-family] .choice-section-label{font-size:16px;font-weight:700}
#draw-dialog [data-card-family] .choice-copy .choice-link,#evolution-dialog [data-card-family] .choice-copy .choice-link{font-size:14px}
#hud .card-slots>.held-card>span{font-size:15px!important;line-height:19px;max-height:38px;font-weight:800;color:#fff5dd;text-shadow:0 1px 3px #000}
#hud .card-slots>.held-card>small{font-size:11px!important;right:2px;max-width:calc(100% - 4px);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;overflow:visible;text-overflow:clip}
@media(max-height:780px){#draw-dialog [data-card-family] .choice-name,#evolution-dialog [data-card-family] .choice-name{font-size:23px;min-height:35px}#draw-dialog [data-card-family] .choice-copy p,#evolution-dialog [data-card-family] .choice-copy p,#draw-dialog [data-card-family] .choice-section-label,#evolution-dialog [data-card-family] .choice-section-label{font-size:15px}#draw-dialog [data-card-family] .choice-copy .choice-link,#evolution-dialog [data-card-family] .choice-copy .choice-link{font-size:13px}}

/* Completion rewards charge by kills, independently of their consumed set. */
[data-card-family="heroReward"]{--family-color:#ffd784;--family-edge:#ffd784;--family-glow:#c9833b;--family-bg:#3b281b;--family-panel:#4e3521;--family-deep:#201a14}
.held-card[data-card-family="heroReward"]{border-color:#ffd784;background:linear-gradient(#4e3521,#201a14)}
.held-card[data-card-family="heroReward"] small{color:#ffe3a5}
.hero-reward-title h3{color:#ffe3a5}
.hero-reward-progress{position:relative;isolation:isolate;overflow:hidden;margin:14px 0 9px;padding:8px 12px;border:1px solid #d7b773;border-radius:5px;background:#211c16;color:#ffedbc;text-align:center}
.hero-reward-progress>i{position:absolute;inset:0 auto 0 0;z-index:-1;background:linear-gradient(90deg,#7b552f,#ad814b)}
.hero-reward-progress>b{font-size:16px;line-height:1.4;text-shadow:0 1px 2px #000}

/* Skill identity, real damage and current cadence remain readable at a glance. */
.info-damage.skill-readouts{padding:0;border:0;background:none}
.skill-readouts>.skill-readout,.choice-skill>.skill-readout{display:block;padding:8px 10px;margin-top:6px;border:1px solid #879a9e70;border-radius:4px;background:#080e12f5;box-shadow:inset 0 1px 0 #ffffff0a;color:#eef2ed;font-size:14px;line-height:1.35}
.skill-readout-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 9px}
.skill-readout-heading>b{min-width:0;font-size:14px;font-weight:700;color:#f0f0e4;overflow-wrap:anywhere}
.skill-cooldown{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;font-size:13px;font-variant-numeric:tabular-nums;color:#f6dc91;white-space:nowrap}
.skill-clock{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skill-readout-damage{margin-top:4px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.skill-readout[data-damage-type="physical"]>.skill-readout-damage{color:#ffcf82}
.skill-readout[data-damage-type="magic"]>.skill-readout-damage{color:#80dcff}
.skill-readout-trigger{margin-top:3px;font-size:12px;color:#c9d3cc}

#hud #draw-button>.draw-guide[hidden]{display:none!important}
#hud #draw-button.first-draw,#hud #draw-button.first-draw:hover,#hud #draw-button.first-draw.pointer-hover{transform:none}
#hud #draw-button.first-draw:before,#hud #draw-button.first-draw:after{animation:none;opacity:.35;transform:none}
#hud #draw-button.first-draw:after{display:none}

@keyframes first-draw-arrow{50%{transform:translateY(6px)}}
#hud #draw-button>.draw-guide{animation:none!important;transition:none!important}