/* Original Mongolian card materials. Portrait SVG clipping is left untouched. */
.hero-card{
 --card-metal:var(--clan,#d1c597);--card-metal-light:color-mix(in srgb,var(--clan,#d1c597) 60%,#fff1cb);--card-gem:#9cad95;
 position:relative;display:flex;flex-direction:column;container-type:inline-size;
 height:auto;min-height:0;aspect-ratio:auto;padding:6px;border:2px solid var(--card-metal);
 border-radius:15px 15px 12px 12px;overflow:hidden;isolation:isolate;
 color:#342518;background:repeating-linear-gradient(8deg,#533621 0,#60412b 3px,#4e3425 6px,#573c28 9px);
 box-shadow:0 7px 17px #1a10062e,inset 0 0 0 1px #f3d28a50,inset 0 0 14px #1b1008c0;
 transition:transform .18s,border-color .18s,box-shadow .18s;
}
.hero-card.rarity-C{--card-gem:#6bd481}
.hero-card.rarity-R{--card-gem:#54bbff}
.hero-card.rarity-E{--card-gem:#bc76e8}
.hero-card.rarity-L{--card-gem:#ff9e20}
.hero-card.rarity-LEADER{--card-gem:#8ed4df}
.hero-card:after{content:"";position:absolute;inset:3px;border:1px solid #e7ca873d;border-radius:11px 11px 8px 8px;pointer-events:none;z-index:5}
.hero-card:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 8px 8px,#e6bf75 0 1px,#422813 2px,transparent 3px),radial-gradient(circle at calc(100% - 8px) 8px,#e6bf75 0 1px,#422813 2px,transparent 3px),radial-gradient(circle at 8px calc(100% - 8px),#e6bf75 0 1px,#422813 2px,transparent 3px),radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#e6bf75 0 1px,#422813 2px,transparent 3px)}
.hero-card .portrait{position:relative;flex:0 0 auto;aspect-ratio:1/1.03;height:auto;min-height:0;overflow:hidden;border:2px solid var(--card-metal);border-radius:24px 24px 4px 4px;background:#302f22;box-shadow:inset 0 0 15px #22180f80}
.hero-card .portrait:after{background:linear-gradient(0deg,#28190990,transparent 38%),linear-gradient(90deg,#2c1b1126,transparent 20%,transparent 80%,#2c1b1126)}
.hero-card .portrait-tile{display:block;width:100%;height:100%;overflow:hidden}
.hero-card .card-top{position:absolute;z-index:6;left:13px;right:13px;top:13px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hero-card .card-top .cost{position:relative;display:flex;align-items:center;justify-content:center;gap:3px;min-width:34px;min-height:29px;padding:4px 6px;border:1px solid #d5b975;border-radius:7px 7px 11px 11px;background:linear-gradient(#46665b,#1d3d35);box-shadow:0 2px 5px #09140c90,inset 0 0 0 2px #122d234d;color:#fff0c5;font-size:14px;line-height:1;font-weight:700;text-shadow:0 1px #10271e}
.hero-card .card-top .cost>span{font-size:9px;color:#f0d89a}
.hero-card .card-top .level{display:block;padding:5px 7px;border:1px solid #bd9c656b;border-radius:4px;background:#352719df;color:#eadab4;font-size:10px;font-weight:600;line-height:1.2;text-shadow:0 1px #1e160c;box-shadow:0 2px 5px #0a120a50}
.hero-card .card-rarity-gem{display:flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;margin-top:-1px;transform:rotate(45deg);border:2px solid #d7ba7c;border-radius:5px;background:radial-gradient(circle at 28% 25%,#fff6dc 0, var(--card-gem) 24%,color-mix(in srgb,var(--card-gem) 55%,#192b23) 75%);box-shadow:0 2px 6px #0a170d99,inset 0 0 0 1px #ffffff5c;color:transparent;font-size:0}
.hero-card .card-rarity-gem:after{content:"";width:8px;height:8px;border:1px solid #ffffff65;border-radius:2px;transform:rotate(0)}
.hero-card .rarity-label{position:absolute;z-index:5;top:48px;left:14px;display:block;width:max-content;max-width:calc(100% - 28px);margin:0;padding:3px 6px;border:1px solid var(--card-metal);border-radius:3px;background:#352618db;color:var(--card-metal-light);font-size:8px;line-height:1.25;letter-spacing:1px;text-shadow:0 1px #1e1409}
.hero-card .card-body{position:relative;display:flex;flex-direction:column;flex:1 0 auto;padding:0 10px 12px;min-height:0;border:1px solid #b7a26c;border-top:0;border-radius:0 0 6px 6px;background:radial-gradient(ellipse at 22% 0,#fff7dc7a,transparent 55%),repeating-linear-gradient(3deg,#c4a6790e 0,#c4a6790e 1px,transparent 1px,transparent 4px),linear-gradient(110deg,#e6d4a7,#f3e6c7 47%,#dec99a);color:#3b2a1b;box-shadow:inset 0 0 16px #a9804433}
.hero-card .card-name{position:relative;order:0;display:block;-webkit-line-clamp:unset;min-height:0;margin:-6px -12px 8px;padding:9px 10px 10px;overflow:visible;white-space:normal;overflow-wrap:anywhere;font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-size:19px;line-height:1.15;font-weight:700;letter-spacing:0;text-align:center;color:#f9e8bd;text-shadow:0 1px 2px #1d100c;border:1px solid var(--card-metal);border-radius:5px;background:linear-gradient(#725034,#543821 50%,#46301e);box-shadow:0 3px 5px #5b3d2740,inset 0 1px #dbc59542,inset 0 -1px #2c1a14c0}
.hero-card .card-clan{order:1;display:block;margin:0 0 8px;padding:0;text-align:center;font-size:9px;line-height:1.3;font-weight:700;letter-spacing:1.6px;color:#736340;white-space:normal}
.hero-card .card-stats{order:2;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px;padding:0;border:0}
.hero-card .card-stats>div{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:29px 13px;align-items:center;column-gap:7px;min-width:0;padding:5px 8px;border:1px solid #8d795454;border-radius:7px;background:#fff4d34d;box-shadow:inset 0 1px #fff6dd9c}
.hero-card .card-stats>div+div{border-left:1px solid #8d795454;padding-left:8px}
.hero-card .card-stats .stat-icon{grid-column:1;grid-row:1/3;display:flex;align-items:center;justify-content:center;width:31px;height:34px;border:1px solid #496d8b;border-radius:45% 45% 48% 48%;background:radial-gradient(circle at 30% 20%,#c7e7f4,#50829a 45%,#26475c);color:#eaf9ff;font-size:22px;line-height:1;text-shadow:0 1px 2px #082531;box-shadow:0 2px 3px #6751394d,inset 0 0 0 2px #edf9ff2b}
.hero-card .card-stats .stat-damage .stat-icon{border-color:#844028;background:radial-gradient(circle at 30% 20%,#f1c5a0,#b4693c 45%,#773821);color:#fff2da}
.hero-card .card-stats b{grid-column:2;grid-row:1;display:block;font-family:Georgia,'Times New Roman',serif;font-size:31px;font-weight:700;line-height:1;color:#285265;text-shadow:0 1px #fff5d6;font-variant-numeric:tabular-nums}
.hero-card .card-stats .stat-damage b{color:#8c462b}
.hero-card .card-stats small{grid-column:2;grid-row:2;display:block;margin:0;font-size:8px;line-height:1;font-weight:700;letter-spacing:.4px;color:#4b5b56;white-space:nowrap}
.hero-card .card-stats .stat-damage small{color:#794932}
.hero-card .card-ability{order:3;display:block;min-height:0;padding:9px 0 0;margin:0;white-space:normal;overflow:visible;text-overflow:clip;border-top:1px solid #9474444d;color:#382919;font-size:12px;line-height:1.45;box-shadow:inset 0 1px #fff6df80}
.hero-card .card-ability.card-bonus{order:4;margin-top:9px;padding-top:9px;color:#304e35;border-top-style:double;border-top-width:3px}
.hero-card .ability-label{display:flex;align-items:center;gap:5px;margin:0 0 4px;font-size:9px;line-height:1.3;font-weight:700;letter-spacing:.6px;color:#795831}
.hero-card .card-ability.card-bonus .ability-label{color:#526c40}
.hero-card .ability-label:before{content:"✦";font-size:11px;color:#947442}
.hero-card .card-bonus .ability-label:before{content:"⚑";color:#597746}
.hero-card.rarity-LEADER .card-skill .ability-label:before{content:"♛";color:#467787}
.hero-card .card-ability p{margin:0;font-size:12px;line-height:1.45;color:inherit;white-space:normal;overflow-wrap:anywhere}
.hero-card .card-mini-info{order:5;display:none}
.hero-card.selected,.card-click.selected .hero-card{outline:2px solid #e7bf72;outline-offset:3px;border-color:#ffe1a1;box-shadow:0 0 0 5px #d5ae6029,0 5px 19px #7f531640,0 0 22px #e2be7140;transform:translateY(-3px)}
.hero-card.played{filter:grayscale(.75);opacity:.48}
.card-click:hover .hero-card{transform:translateY(-3px);box-shadow:0 8px 25px #1a10063d,0 0 0 1px #dfc28e55}
.card-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:21px;align-items:start}
.card-grid>.card-click,.card-grid>div>.card-click{height:100%}
.card-grid .hero-card{height:100%}
.card-detail{grid-template-columns:minmax(260px,320px) minmax(0,1fr);align-items:start}
.card-detail .hero-card{max-width:none}
.home-heroes .hero-card{aspect-ratio:.66;padding:4px}
.home-heroes .hero-card .portrait{flex:1 1 auto;aspect-ratio:auto}
.home-heroes .hero-card .card-ability,.home-heroes .hero-card .card-mini-info{display:none}
.home-heroes .hero-card .card-body{flex:0 0 auto}
/* Hands and encounters retain a small, readable form and expose the full ability through their detail actions. */
.battle-board>.battle-side .hero-card,.campaign-encounter .encounter-card .hero-card{
 padding:3px;border:1px solid var(--card-metal);border-radius:8px;aspect-ratio:auto;min-height:0;
}
.battle-board>.battle-side .hero-card .portrait,.campaign-encounter .encounter-card .hero-card .portrait{flex:1 1 auto;aspect-ratio:auto;height:auto;min-height:0;border-width:1px;border-radius:10px 10px 2px 2px}
.battle-board>.battle-side .hero-card .card-body,.campaign-encounter .encounter-card .hero-card .card-body{flex:0 0 auto;padding:0 4px 4px;border-width:1px;border-radius:0 0 3px 3px;box-shadow:inset 0 0 8px #a97f3d26}
.battle-board>.battle-side .hero-card .card-name,.campaign-encounter .encounter-card .hero-card .card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:26px;margin:-3px -5px 4px;padding:4px 4px;font-family:'Segoe UI',Arial,sans-serif;font-size:11px;line-height:1.05;border-radius:3px;text-align:center}
.battle-board>.battle-side .hero-card .card-clan,.battle-board>.battle-side .hero-card .card-ability,.battle-board>.battle-side .hero-card .rarity-label,
.campaign-encounter .encounter-card .hero-card .card-clan,.campaign-encounter .encounter-card .hero-card .card-ability,.campaign-encounter .encounter-card .hero-card .rarity-label{display:none}
.battle-board>.battle-side .hero-card .card-stats,.campaign-encounter .encounter-card .hero-card .card-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0;padding:0;border:0}
.battle-board>.battle-side .hero-card .card-stats>div,.campaign-encounter .encounter-card .hero-card .card-stats>div{display:grid;grid-template-columns:13px minmax(0,1fr);grid-template-rows:17px 8px;column-gap:2px;padding:2px 2px;min-height:0;border:1px solid #8d79543b;border-radius:3px}
.battle-board>.battle-side .hero-card .card-stats>div+div,.campaign-encounter .encounter-card .hero-card .card-stats>div+div{border-left:1px solid #8d79543b;padding-left:2px}
.battle-board>.battle-side .hero-card .card-stats .stat-icon,.campaign-encounter .encounter-card .hero-card .card-stats .stat-icon{grid-column:1;grid-row:1;width:13px;height:15px;font-size:10px;box-shadow:inset 0 0 0 1px #ffffff20;border-width:.5px}
.battle-board>.battle-side .hero-card .card-stats b,.campaign-encounter .encounter-card .hero-card .card-stats b{grid-column:2;grid-row:1;font-size:18px;line-height:1;font-family:Georgia,'Times New Roman',serif}
.battle-board>.battle-side .hero-card .card-stats small,.campaign-encounter .encounter-card .hero-card .card-stats small{grid-column:1/3;grid-row:2;display:block;font-size:6px;letter-spacing:0;line-height:1;text-align:center;white-space:nowrap}
.battle-board>.battle-side .hero-card .card-mini-info,.campaign-encounter .encounter-card .hero-card .card-mini-info{display:block;text-align:center;margin:3px -2px 0;font-size:7px;line-height:1.15;font-weight:600;letter-spacing:0;color:#71512d;white-space:nowrap}
.battle-board>.battle-side .hero-card .card-top,.campaign-encounter .encounter-card .hero-card .card-top{left:7px;right:7px;top:7px;gap:3px}
.battle-board>.battle-side .hero-card .card-top .cost,.campaign-encounter .encounter-card .hero-card .card-top .cost{min-width:0;min-height:0;padding:2px 3px;border-radius:3px;font-size:8px;gap:1px}
.battle-board>.battle-side .hero-card .card-top .cost>span,.campaign-encounter .encounter-card .hero-card .card-top .cost>span{font-size:5px}
.battle-board>.battle-side .hero-card .card-top .level,.campaign-encounter .encounter-card .hero-card .card-top .level{padding:2px 3px;font-size:7px;border-radius:3px}
.battle-board>.battle-side .hero-card .card-rarity-gem,.campaign-encounter .encounter-card .hero-card .card-rarity-gem{width:10px;height:10px;flex-basis:10px;border-width:1px;border-radius:2px;margin-top:1px}
.battle-board>.battle-side .hero-card .card-rarity-gem:after,.campaign-encounter .encounter-card .hero-card .card-rarity-gem:after{width:3px;height:3px}
.campaign-encounter .encounter-card .hero-card{height:190px;max-height:none;width:100%}
.campaign-encounter .encounter-card .hero-card .card-name{font-size:11px;min-height:20px}
.campaign-encounter .encounter-card .hero-card .card-stats b{font-size:19px}
/* Existing battle dimensions remain owned by battle-game.css. */
.battle-board>.battle-side .hero-card:after,.campaign-encounter .encounter-card .hero-card:after{inset:2px;border-radius:5px}
.battle-board>.battle-side .hero-card.selected{outline:2px solid #f1cd89;outline-offset:2px;box-shadow:0 0 0 4px #d5ad5830,0 0 19px #d5ac6080}
/* Compact badge labels retain semantic text even on narrow phone hands. */
@media(max-width:1100px){.battle-board>.battle-side .hero-card .card-name{font-size:10px;min-height:24px}.battle-board>.battle-side .hero-card .card-stats b{font-size:16px}.battle-board>.battle-side .hero-card .card-mini-info{font-size:6px}}
@media(max-width:760px){
 .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
 .card-detail{grid-template-columns:1fr;gap:25px}.card-detail>div:first-child{width:min(100%,340px);margin:0 auto}.card-detail .hero-card{width:100%}
 .battle-board>.battle-side .hero-card{padding:2px;border-radius:6px}
 .battle-board>.battle-side .hero-card .card-body{padding:0 3px 3px}
 .battle-board>.battle-side .hero-card .card-name{font-size:8.5px;line-height:1.08;min-height:21px;max-height:27px;padding:3px 2px;margin:-2px -4px 2px}
 .battle-board>.battle-side .hero-card .card-stats{gap:2px}
 .battle-board>.battle-side .hero-card .card-stats>div{grid-template-columns:10px minmax(0,1fr);grid-template-rows:15px 7px;column-gap:1px;padding:1px 1px}
 .battle-board>.battle-side .hero-card .card-stats>div+div{padding-left:1px}
 .battle-board>.battle-side .hero-card .card-stats .stat-icon{width:10px;height:12px;font-size:8px}
 .battle-board>.battle-side .hero-card .card-stats b{font-size:16px}
 .battle-board>.battle-side .hero-card .card-stats small{font-size:5px}
 .battle-board>.battle-side .hero-card .card-mini-info{font-size:5.5px;margin:2px -2px 0}
 .battle-board>.battle-side .hero-card .card-top{left:5px;right:5px;top:5px}
 .battle-board>.battle-side .hero-card .card-top .cost,.battle-board>.battle-side .hero-card .card-top .level{font-size:6px;padding:2px}
 .battle-board>.battle-side .hero-card .card-rarity-gem{width:8px;height:8px;flex-basis:8px}
 .battle-board>.battle-side .hero-card .card-rarity-gem:after{width:2px;height:2px}
 .campaign-encounter .encounter-card .hero-card{height:187px}
}
@media(max-width:540px){.card-grid{grid-template-columns:1fr;gap:24px}.card-grid>div,.card-grid>.card-click,.card-grid>.listing-card{width:min(100%,350px);margin-left:auto;margin-right:auto}.hero-card .card-name{font-size:22px}.hero-card .card-clan{font-size:10px}.hero-card .card-ability p{font-size:13px}.hero-card .ability-label{font-size:10px}.hero-card .card-stats b{font-size:35px}.hero-card .card-stats>div{grid-template-rows:32px 14px}.hero-card .card-stats small{font-size:9px}.home-heroes .hero-card .card-name{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero-card,.card-click:hover .hero-card{transition:none;transform:none}}

.hero-card .card-bonus-state{display:block;width:max-content;max-width:100%;margin-top:6px;padding:3px 6px;border:1px solid #78926345;border-radius:3px;color:#66734a;background:#7892630c;font-size:8px;line-height:1.3}
.hero-card[data-bonus-active="true"] .card-bonus-state{background:#47764419;color:#2f673b;border-color:#567e4a80}
.hero-card[data-bonus-active="false"] .card-bonus-state{color:#81613f;background:#aa744d12;border-color:#aa744d5c}
.hero-card[data-bonus-active="true"] .card-mini-info{color:#3b683a}
.hero-card[data-bonus-active="false"] .card-mini-info{color:#7c6442}
.battle-board .battle-skill-content .selected-ability,.battle-board .battle-skill-content .selected-bonus{padding:0;margin:0}
.battle-board .battle-skill-content .selected-ability>strong,.battle-board .battle-skill-content .selected-bonus>strong{display:flex;align-items:center;gap:6px;margin:0 0 5px;color:#dfc183;font-size:9px;line-height:1.4;letter-spacing:.6px}
.battle-board .battle-skill-content .selected-ability>strong:before{content:"✦";font-size:12px;color:#f2d797}
.battle-board .battle-skill-content .selected-bonus>strong:before{content:"⚑";font-size:12px;color:#bad0a0}
.battle-board .battle-skill-content .selected-bonus{margin-top:12px;padding-top:11px;border-top:1px solid #c4a66a4a}
.battle-board .battle-skill-content .selected-bonus>strong{color:#bed1a3}
.battle-board .battle-skill-content .selected-ability>p,.battle-board .battle-skill-content .selected-bonus>p{margin:0;color:#eadcc0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.battle-board .battle-skill-content .selected-bonus>small{display:block;margin-top:7px;font-size:10px;line-height:1.4;color:#bb9e7c}
.battle-board .battle-skill-content .selected-leader{display:block;margin-top:12px;padding-top:10px;border-top:1px solid #a8915d40;color:#c6b884;font-size:10px;line-height:1.4}
@media(max-width:760px){
 .battle-board .battle-skill-content .selected-ability>strong,.battle-board .battle-skill-content .selected-bonus>strong{font-size:10px}
 .battle-board .battle-skill-content .selected-ability>p,.battle-board .battle-skill-content .selected-bonus>p{font-size:13px;line-height:1.6}
 .battle-board>.battle-side .hero-card .card-mini-info{font-size:6.5px}
 .battle-board>.battle-side .hero-card .card-stats small{font-size:6px}
}