/* Card style: Collectible (collectible-cards.mjs). Every rule is scoped to .cf-on, which is only set in the
   collectible style, so the Classic look is untouched. Effect ghosts are clones, so they keep these rules. */
.cf-on{position:relative}
.cf-layer{position:absolute;inset:0;z-index:2;display:block;pointer-events:none;container-type:size;border-radius:inherit}
.cf-layer>*{position:absolute;z-index:2}
.cf-on .cf-layer>.cf-img,.cf-on .cf-layer>.cf-live-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;object-fit:fill!important;background:none!important;padding:0!important;margin:0!important;border:0!important;display:block;z-index:0;user-select:none;-webkit-user-drag:none}
.cf-layer.cf-pending{background:linear-gradient(160deg,#252c38,#0b0f16 55%,#1a1f28);clip-path:polygon(6% 0,94% 0,100% 4.3%,100% 95.7%,94% 100%,6% 100%,0 95.7%,0 4.3%)}
.cf-layer.cf-pending>.cf-img{visibility:hidden}

/* Hide the classic card content; its information lives on the face, the badges and the hover panel. */
.cf-on>img,.cf-on>.unit-name,.cf-on>.unit-types,.cf-on>.effect-rack,.cf-on>.unit-stats,.cf-on>.taunt-plate,.cf-on>.mana,.cf-on>.hand-name,.cf-on>.hand-text,.cf-on>.hand-stats{display:none!important}
.hand-card.cf-on,.unit.cf-on{background:transparent!important;border:0!important;border-radius:9px}
.hand .hand-card.cf-on{height:auto!important;min-height:0;max-height:none;aspect-ratio:.716;padding:0!important}
.unit.cf-on{display:block;aspect-ratio:.716;height:auto!important;min-height:0;max-height:none!important;width:min(100%,var(--cf-unit-w,100%));justify-self:center;align-self:center;padding:0;overflow:visible}

/* Face text: real DOM text over the bitmap (which holds no text), in container units so it scales with the card
   and stays sharp at any device pixel ratio or hover scale. A dark outline keeps it readable over busy art. */
.cf-layer>.cf-text{z-index:3;color:#fff;pointer-events:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.cf-name{transform:translateY(-50%) scaleX(var(--cf-sx,1));transform-origin:0 50%;font-family:Rajdhani,Bahnschrift,'Segoe UI',sans-serif;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 .12em #000,0 .06em .1em #000,0 0 .35em #000c}
.cf-name-board{text-align:center;transform-origin:50% 50%}
.cf-panel{display:block;font-family:Barlow,'Segoe UI',sans-serif;font-weight:400;text-align:left;background:linear-gradient(#04060e00,#04060ed6 var(--cf-fade),#04060ef0);text-shadow:0 1px 1px #000,0 0 2px #000}
.cf-panel>span{display:block;position:static;overflow-wrap:break-word}
.cf-type{display:flex!important;align-items:center;gap:.4em;font-weight:600;color:#d6def0d9;line-height:1.3;padding-bottom:2px;border-bottom:1px solid #ffffff24;margin-bottom:2px;white-space:nowrap}
.cf-type-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cf-rar{flex:none;width:.72em;height:.72em;margin-right:.2em;transform:rotate(45deg);background:var(--cf-rar);box-shadow:0 0 .5em var(--cf-rar)}
.cf-kw{font-weight:600;color:#ffd98a;line-height:1.22;margin-bottom:2px}
.cf-rules{color:#eef1f8;line-height:1.22;display:-webkit-box!important;-webkit-box-orient:vertical;overflow:hidden}
.cf-flavor{font-style:italic;color:#b0baceeb;text-align:center;line-height:1.2}

/* Live numbers on the badges (C1): Rajdhani with a dark outline, glowing in the stat colour. On the board the
   base value is white; buffs are green; damage and debuffs are red. */
.cf-num{transform:translate(-50%,-52%);font-family:Rajdhani,Bahnschrift,'Segoe UI',sans-serif;font-weight:700;line-height:1;white-space:nowrap;color:var(--cf-fill,#fff);-webkit-text-stroke:.085em #000d;paint-order:stroke fill;text-shadow:0 0 .22em var(--cf-glow),0 0 .5em var(--cf-glow),0 .05em .08em #000}
.cf-num.cf-live.cf-tone-base{color:#fff}
.cf-num.cf-tone-buff{color:#8dff7f;--cf-glow:#1fd140}
.cf-num.cf-tone-debuff,.cf-num.cf-tone-damaged{color:#ff6a6a;--cf-glow:#ff2626}

/* Armor pool: a blue shield above the Health badge. */
.cf-armor{transform:translate(-50%,-50%);aspect-ratio:1;display:grid;place-items:center}
.cf-armor svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 2px #000c)}
.cf-armor-rim{fill:#3f86c2;stroke:#d6efff;stroke-width:4}
.cf-armor-face{fill:#06182b}
.cf-armor b{position:relative;margin-top:-4%;font-family:Rajdhani,'Segoe UI',sans-serif;font-weight:700;line-height:1;color:#e2f4ff;-webkit-text-stroke:.08em #000c;paint-order:stroke fill;text-shadow:0 0 .3em #6fc3ff,0 0 .6em #6fc3ff}

/* Status cues: one row of pips at the top of the art window, always in the same order
   (Taunt, Shroud, Phase, Duelist, Vanguard, Stunned, Truce, Integrated, just deployed). */
.cf-status{left:50%;transform:translateX(-50%);display:flex;gap:1.6cqw;z-index:3}
.cf-pip{position:relative;display:grid;place-items:center;width:15cqw;height:15cqw;border-radius:50%;background:#1a2638f0;border:max(1px,.9cqw) solid #b9c9dd;box-shadow:0 0 0 max(1px,.5cqw) #000b,0 1px 4px #000,0 0 6px #b9c9dd55}
.cf-pip svg{width:70%;height:70%;fill:none;stroke:#eef4ff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cf-pip-taunt{background:#39475a;border-color:#dfe8f3}
.cf-pip-taunt-off{opacity:.6}
.cf-pip-shroud{border-color:#7fb7d9}.cf-pip-shroud svg{stroke:#bfe3ff}
.cf-pip-phase{border-color:#c9dce7;border-style:dashed}
.cf-pip-duelist{border-color:#ffcf6a}.cf-pip-duelist svg{stroke:#ffe2a6}
.cf-pip-vanguard{border-color:#ffb34f}.cf-pip-vanguard svg{stroke:#ffd49a}
.cf-pip-stunned{border-color:#9fe3ff;background:#0d2c40}.cf-pip-stunned svg{stroke:#cff4ff}
.cf-pip-truce{border-color:#f5f0d0}
.cf-pip-integrated{border-color:#a7b85a}.cf-pip-integrated svg{stroke:#dbe89a}
.cf-pip-sleeping{border-color:#9fc3ff;background:#1b2d4a;font:700 7.5cqw/1 Rajdhani,'Segoe UI',sans-serif;color:#d4e4ff;grid-auto-flow:column;align-items:end}
.cf-pip-sleeping b:first-child{font-size:.7em;margin-bottom:.25em}

/* Shroud: smoke over the art. Stunned: frost. Both sit under the numbers. */
.cf-layer.cf-shroud::after,.cf-layer.cf-stunned::after{content:'';position:absolute;inset:7%;z-index:1;border-radius:3%;pointer-events:none}
.cf-layer.cf-shroud::after{background:radial-gradient(ellipse at 50% 45%,#0000 20%,#1b2c3cb0 75%),repeating-linear-gradient(115deg,#9fc3df14 0 6px,#0000 6px 14px)}
.cf-layer.cf-stunned::after{background:linear-gradient(160deg,#bff0ff55,#3c8fd040 55%,#bff0ff44);box-shadow:inset 0 0 0 2px #cff4ffaa,inset 0 0 18px #9fe3ffaa}

/* Taunt: a steel wall ring around the frame. */
.unit.cf-on.has-taunt::before{inset:-2px;border:3px solid #d2dce8;border-radius:10px;clip-path:none;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,0 0 12px #c9d6e466;z-index:3}
.unit.cf-on.has-phase{outline-offset:3px}

/* Game-feel labels become pills between the top badges so they do not cover the Flux and rarity badges. */
.unit.cf-on .ready-strip{left:25%;right:25%;top:1.5%;border-radius:999px;padding:2px 3px;font-size:9px;letter-spacing:.05em;border:1px solid #14d12999;box-shadow:0 2px 6px #000b;z-index:6}
.unit.cf-on.ability-ready .ready-strip{border-color:#46c8dd99}
.arena.targeting .unit.cf-on.target::after{left:20%;right:20%;top:1.5%;border-radius:999px;padding:2px;font-size:9px;letter-spacing:.08em;z-index:6}
.unit.cf-on.attack-ready::after{border-radius:9px}

/* Inspector and hover panel. */
.cf-solo{position:relative;flex:none;border-radius:12px;filter:drop-shadow(0 10px 18px #000c)}
#inspect-content .cf-solo{margin:0 auto 10px}
#art-hover .cf-solo{align-self:flex-start}

/* Collection picker. */
.cf-picker{width:min(980px,calc(100vw - 32px));max-height:min(860px,calc(100dvh - 32px));overflow:auto}
.cf-picker .cf-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.cf-picker .cf-row-label{min-width:88px;font-weight:700;color:#aebdd2}
.cf-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #3a4d63;border-radius:999px;cursor:pointer;font-size:13px}
.cf-chip:has(input:checked){border-color:#6be2ef;background:#0f2a36}
.cf-counts{font-size:13px;color:#c9d4e4}
.cf-count{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;background:#131c28;border:1px solid #2f3f52}
.cf-count-copper{border-color:#b86a3f}.cf-count-silver{border-color:#dfe6f2}.cf-count-gold{border-color:#f0ad32}.cf-count-holographic{border-color:#ff4fd8}
.cf-factions button[aria-pressed=true]{border-color:#6be2ef;background:#0f2a36}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;margin-top:8px}
.cf-cell{margin:0;display:grid;gap:5px;justify-items:center}
.cf-thumb{width:128px;height:179px;border-radius:9px;background:#0b1119}
.cf-cell figcaption{font-size:12px;text-align:center;line-height:1.25}
.cf-cell small{display:block;color:#9fb0c6}
.cf-chain{margin-top:18px;padding:12px 14px;border:1px dashed #3a4d63;border-radius:10px;opacity:.75}