/* Shared card language. Categories are visual role groupings only. */
.unit-card, .reserve-card { --card-edge: #728e85; --card-glow: #6ca48c; }
.tier-specialist { --card-edge: #8195b6; --card-glow: #718eb5; }
.tier-elite { --card-edge: #b99b63; --card-glow: #b99b63; }
.unit-card { border-color: color-mix(in srgb, var(--card-edge) 65%, #172229); box-shadow: inset 0 0 0 3px #0b14185c, 0 6px 18px #0003; border-radius: 5px 5px 10px 10px; }
.unit-card::after { content: ''; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--card-edge) 26%, transparent); border-radius: 2px 2px 6px 6px; pointer-events: none; }
.unit-card:hover { border-color: var(--card-edge); box-shadow: 0 5px 24px #0007, 0 0 14px color-mix(in srgb, var(--card-glow) 12%, transparent); }
.unit-card .card-art { height: 190px; object-position: center 32%; }
.card-faction { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #b4c1b6; font-size: 8px; margin: 0 0 8px; }
.card-faction i { font-style: normal; color: var(--card-edge); font-size: 8px; }
.card-main-ability { display: flex; gap: 5px; align-items: center; margin-top: 10px; font-size: 10px; color: #d1bf9a; padding-top: 9px; border-top: 1px solid #a7af961c; }
.card-main-ability .icon { width: 12px; height: 12px; }
.card-experience { display: flex; justify-content: space-between; color: #9aaea5; font-size: 8px; letter-spacing: .7px; margin-top: 10px; }
.unit-tooltip { position: fixed; z-index: 210; width: 320px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; pointer-events: none; padding: 16px; border: 1px solid #9e8a5f; border-top: 2px solid #c6b07f; background: linear-gradient(135deg,#1d2b31f8,#0c151cfb); box-shadow: 0 12px 40px #000b; border-radius: 4px; font: 11px/1.65 var(--sans); }
.tip-heading { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; }
.tip-heading img { width: 44px; height: 55px; border: 1px solid #75684b; }
.tip-heading .small-label { font-size: 8px; letter-spacing: .6px; color: #c3ad7f; }
.tip-heading h3 { font: 20px/1.2 var(--serif); margin: 4px 0; }
.tip-heading p, .unit-tooltip p { font-size: 10px; color: #adbbb6; }
.tip-stats { padding: 10px 0; margin-bottom: 10px; border-block: 1px solid #b1b99726; color: #d8d5bd; }
.tip-stats .icon { width: 13px; height: 13px; color: #bca376; }
.tip-ability { margin-top: 12px; }
.tip-ability strong { font-weight: 500; color: #ddc797; font-size: 11px; }
.tip-ability small { color: #a1aaa5; font-size: 9px; }
.tip-lore { font-style: italic; border-top: 1px solid #a9b99e22; padding-top: 10px; margin-top: 12px; }
@media(max-width:600px) { .unit-card .card-art { height: 156px; } .card-faction { flex-wrap: wrap; } }
.unit-card .custom-card-frame, .reserve-card .custom-card-frame { position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:4;pointer-events:none;opacity:1; }
.preparation-build-summary{font:11px var(--sans);padding:9px;margin:5px;border:1px solid #a9b28344;border-radius:4px;line-height:1.7;color:#c4d1bc}.preparation-build-summary span{display:block;font-size:10px}.preparation-build-summary a{font-size:10px;color:#e2cc92}