/* One card face across battle, deck, shop and reward selections. Structural
   class names stay stable for drag/drop, text scrolling and module editing. */
body :is(#app .card,#panel .card,.card.drag-ghost),body #panel .card{--type-edge:var(--brass);--tc:var(--type-edge);position:relative;background:linear-gradient(#141a1c,#07090a);color:var(--bone);border:0;border-radius:0;padding:4px;box-shadow:inset 0 0 0 1.5px var(--tc),inset 0 0 0 3px #07090a,inset 0 0 0 4px color-mix(in srgb,var(--tc) 45%,transparent),inset 0 -40px 30px -24px color-mix(in srgb,var(--tc) 35%,transparent);overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);font-family:var(--serif)!important}
body :is(#app .card,#panel .card,.card.drag-ghost).Offense,body #panel .card.Offense{--type-edge:var(--off)}
body :is(#app .card,#panel .card,.card.drag-ghost).Defense,body #panel .card.Defense{--type-edge:var(--def)}
body :is(#app .card,#panel .card,.card.drag-ghost).Skill,body #panel .card.Skill{--type-edge:var(--skl)}
body :is(#app .card,#panel .card,.card.drag-ghost).Nexus,body #panel .card.Nexus{--type-edge:var(--nex)}
body :is(#app .card,#panel .card,.card.drag-ghost):before,body #panel .card:before{display:none}
body :is(#app .card,#panel .card,.card.drag-ghost):after,body #panel .card:after{content:'';position:absolute;right:0;bottom:0;inset:auto 0 0 auto;width:16px;height:16px;border:0;border-radius:0;background:var(--tc);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
body :is(#app .card,#panel .card,.card.drag-ghost) .card-art,body #panel .card .card-art{order:0;position:relative;height:40%;min-height:85px;flex:none;width:100%;margin:0;box-shadow:none;border:0;border-radius:0;border-bottom:1.5px solid var(--tc);clip-path:none;overflow:hidden}
body :is(#app .card,#panel .card,.card.drag-ghost) .card-art:after,body #panel .card .card-art:after{content:'';display:block;position:absolute;inset:8px 7px auto auto;width:10px;height:10px;transform:rotate(45deg);background:var(--tc);border:0;box-shadow:0 0 0 2px #07090a,0 0 8px var(--tc)}
body :is(#app .card,#panel .card,.card.drag-ghost) .cardhead,body #panel .card .cardhead{order:1;position:static;display:block;min-height:0;height:auto;padding:5px 3px 0;margin:0;background:none;border:0;box-shadow:none;flex:none}
body :is(#app .card,#panel .card,.card.drag-ghost) .card-type,body #panel .card .card-type{display:flex!important;align-items:baseline;justify-content:space-between;gap:4px;color:var(--tc);font:italic 600 10px/1.2 var(--num)!important;letter-spacing:.05em;text-align:left}
body :is(#app .card,#panel .card,.card.drag-ghost) .card-rank,body #panel .card .card-rank{font:italic 600 10px/1.2 var(--num)!important;text-transform:uppercase;letter-spacing:.03em;color:var(--common);margin:0;padding:0}
body :is(#app .card,#panel .card,.card.drag-ghost) .rarity-Rare,body #panel .card .rarity-Rare{color:var(--rare)}
body :is(#app .card,#panel .card,.card.drag-ghost) .rarity-Epic,body #panel .card .rarity-Epic{color:var(--epic)}
body :is(#app .card,#panel .card,.card.drag-ghost) .rarity-Legendary,body #panel .card .rarity-Legendary{color:var(--gold)}
body :is(#app .card,#panel .card,.card.drag-ghost) .cardcode,body #panel .card .cardcode{display:none}
body :is(#app .card,#panel .card,.card.drag-ghost) .cost,body #panel .card .cost{position:absolute;top:8px;left:8px;z-index:2;display:grid;place-items:center;width:28px;height:28px;min-width:0;margin:0;line-height:28px;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;font:italic 800 22px/28px var(--num)!important;isolation:isolate}
body :is(#app .card,#panel .card,.card.drag-ghost) .cost:before,body #panel .card .cost:before{content:'';position:absolute;inset:4px;z-index:-1;transform:rotate(45deg);background:var(--ui-ink);border:1px solid var(--brass);border-radius:0}
body :is(#app .card,#panel .card,.card.drag-ghost) .cost-higher,body #panel .card .cost-higher{color:#ff929c}
body :is(#app .card,#panel .card,.card.drag-ghost) .cost-lower,body #panel .card .cost-lower{color:#90e3a6}
body :is(#app .card,#panel .card,.card.drag-ghost) .cardbody,body #panel .card .cardbody{order:2;display:block;flex:1;min-height:0;padding:0;margin:2px 1px 0;background:linear-gradient(#f4ecd8,#e6dac0);color:var(--parch-ink);border:0;border-radius:0;box-shadow:none;text-align:left}
body :is(#app .card,#panel .card,.card.drag-ghost) .cardbody h3,body #panel .card .cardbody h3{display:block;-webkit-line-clamp:unset;margin:0;padding:4px 2px;background:linear-gradient(#efe5cc,#d9cba6);color:var(--parch-ink);border:0;border-radius:0;box-shadow:none;text-shadow:none;font:800 14px/1.2 var(--serif)!important;text-align:center;min-height:0;letter-spacing:0}
body :is(#app .card,#panel .card,.card.drag-ghost) .cardbody p,body #panel .card .cardbody p{display:block;margin:0;padding:5px 6px;color:var(--parch-ink);font:600 12px/1.5 var(--serif)!important;letter-spacing:0}
body :is(#app .card,#panel .card,.card.drag-ghost) .condition,body #panel .card .condition{display:block;margin:2px 5px;padding:0;color:#73613a;font:600 10px/1.4 var(--serif)!important}
body :is(#app .card,#panel .card,.card.drag-ghost) .cardslots,body #panel .card .cardslots{order:3;flex:none;display:flex;min-height:0;justify-content:center;align-items:center;gap:5px;margin:0;padding:8px 0;background:none;border:0;border-radius:0;box-shadow:none}
body :is(#app .card,#panel .card,.card.drag-ghost) .cardslots small,body #panel .card .cardslots small{display:none}
/* Show equipped module names in the card footer; empty slots remain compact. */
body :is(#app .card,#panel .card) .cardslots.has-modules,body #panel .card .cardslots.has-modules{flex-wrap:wrap;align-content:center;gap:3px;padding:5px 2px}
body :is(#app .card,#panel .card) .cardslots.has-modules small,body #panel .card .cardslots.has-modules small{display:block;width:100%;color:#f3e3bb;font:600 10px/1.3 var(--serif);text-align:center;overflow-wrap:anywhere}
body :is(#app .card,#panel .card,.card.drag-ghost) .cardslots .module-orb,body #panel .card .cardslots .module-orb{width:10px;height:10px;border-width:1px;margin:0;box-shadow:none}
body.battle-mode #app .pocket-battle .hand-rack .card .card-art{height:34%;min-height:0}
body.battle-mode #app .pocket-battle .hand-rack .card .cardbody{overflow:hidden;touch-action:none}
body.battle-mode #app .pocket-battle .hand-rack .card.reading-description .cardbody{overflow:auto;overscroll-behavior:contain}
body.battle-mode #app .pocket-battle .hand-rack .card .cardbody h3{font-size:14px!important}
body.battle-mode #app .pocket-battle .hand-rack .card .cardbody p{font-size:12px!important}
body.battle-mode #app .pocket-battle .hand-rack .card .cardslots{padding:7px 0}
body #app .deck-grid .card,body #panel .deck-grid .card{min-height:330px}
body #app .shop-cards .card .card-art,body #panel .card.compact .card-art{height:110px}
@media(max-height:720px){body.battle-mode #app .pocket-battle .hand-rack .card .card-art{height:30%}body.battle-mode #app .pocket-battle .hand-rack .card .cardbody p{font-size:11px!important}}

body .card.drag-ghost .card-art{height:88px;min-height:0}
body .card.drag-ghost .cardhead,body .card.drag-ghost .cardslots,body .card.drag-ghost .cardbody p,body .card.drag-ghost .condition{display:none}
body .card.drag-ghost .cardbody h3{font-size:12px!important}
body.battle-mode #app .pocket-battle .hand-rack .card{position:absolute}

body .card.drag-ghost{position:fixed!important}