/* Original Mongolian relic cards: carved wood, metal rim, oval hero, parchment.
   Gameplay data and portrait atlas clipping are shared with the existing renderer. */
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER){
 --card-metal:var(--clan,#d1c597);--card-metal-light:color-mix(in srgb,var(--clan,#d1c597) 60%,#fff1cb);
 --relic-rim:color-mix(in srgb,var(--clan,#d1c597) 68%,#c9ae79);--relic-edge:#26363a;--relic-ink:#35271b;
 --clan-frame-light:color-mix(in srgb,var(--clan,#d1c597) 85%,#f4e5bf);
 --clan-frame:color-mix(in srgb,var(--clan,#d1c597) 72%,#182629);
 --clan-frame-dark:color-mix(in srgb,var(--clan,#d1c597) 42%,#152529);
 --card-wood-light:var(--clan-frame-light);
 --card-wood:var(--clan-frame);
 --card-wood-dark:var(--clan-frame-dark);
 position:relative;display:flex;flex-direction:column;container-type:inline-size;
 height:auto;min-height:0;aspect-ratio:auto;padding:13px 12px 11px;
 border:3px solid var(--card-metal);border-radius:22px 22px 18px 18px;
 background:url("./assets/ui/card-corners.svg") center/100% 100% no-repeat,
  url("./assets/ui/card-wood-grain.svg?v=2") center/100% 100% no-repeat,
  radial-gradient(ellipse at 50% 9%,#ffffe030,transparent 52%),
  linear-gradient(145deg,var(--card-wood-light),var(--card-wood) 50%,var(--card-wood-dark));
 color:var(--relic-ink);box-shadow:0 9px 18px #0006,inset 0 0 0 2px #171f21,inset 0 0 0 4px #e8d8aa66,inset 0 0 18px #111b22a6;
}
.hero-card.hero-card.rarity-LEADER{--clan-frame-light:#9aaea8;--clan-frame:#506866;--clan-frame-dark:#263936;--relic-rim:#d1bd86;--card-gem:#8ed4df}
.hero-card.hero-card::before{z-index:3;inset:6px;opacity:.85;pointer-events:none}
.hero-card.hero-card::after{z-index:6;inset:5px;border-radius:16px 16px 12px 12px;pointer-events:none}
.hero-card.hero-card .portrait{
 flex:0 0 auto;align-self:center;width:84%;height:auto;min-height:0;aspect-ratio:.9;
 margin:26px auto 0;overflow:hidden;border:6px solid var(--relic-rim);border-radius:50%;
 background:#17262b;box-shadow:0 0 0 1px #f6e7b699,0 0 0 4px #142126,0 0 0 5px var(--card-metal),0 6px 15px #0008,inset 0 0 16px #09120ec0;
}
.hero-card.hero-card .portrait::before{
 content:"";position:absolute;z-index:2;inset:1px;border:1px solid #dccda17a;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle at 11% 23%,#ead8a0 0 1px,#403e32 2px,transparent 3px),
 radial-gradient(circle at 89% 23%,#ead8a0 0 1px,#403e32 2px,transparent 3px),
 radial-gradient(circle at 11% 77%,#ead8a0 0 1px,#403e32 2px,transparent 3px),
 radial-gradient(circle at 89% 77%,#ead8a0 0 1px,#403e32 2px,transparent 3px);
}
.hero-card.hero-card .portrait::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:50%;background:linear-gradient(0deg,#111e1970,transparent 34%);box-shadow:inset 0 0 14px #0d171a66}
.hero-card.hero-card .card-top{z-index:7;left:19px;right:19px;top:17px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none}
.hero-card.hero-card .card-top .cost{
 min-width:37px;min-height:30px;padding:5px 7px;border:1px solid #e6d19b;border-radius:9px 9px 15px 15px;
 background:linear-gradient(130deg,#677572,#2d4242 60%,#192b2f);box-shadow:0 2px 5px #0009,inset 0 0 0 2px #15262580;
 color:#fff0c3;font-size:15px;text-shadow:0 1px 2px #0b1518;
}
.hero-card.hero-card .card-top .level{padding:6px 7px;border-color:#bda979;background:linear-gradient(#485758,#25363c);color:#fff0ca;font-size:10px;border-radius:6px;box-shadow:0 2px 4px #0008}
.hero-card.hero-card .card-rarity-gem{width:29px;height:29px;flex-basis:29px;margin-top:-4px;border-radius:4px;border-width:2px;box-shadow:0 3px 8px #000b,0 0 0 3px #22313ccf,inset 0 0 0 1px #fff7d77a;pointer-events:auto}
.hero-card.hero-card .card-rarity-gem::after{width:12px;height:12px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(140deg,#ffffff90,#ffffff0a);border:0}
.hero-card.hero-card .rarity-label{display:none}
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-body{
 position:static;display:flex;flex-direction:column;flex:1 0 auto;min-height:0;width:100%;margin:-1px 0 0;padding:3px 4px;
 border:solid transparent;border-width:34px 28px 25px;
 border-image:url("./assets/ui/card-scroll.svg") 65 43 52 43 fill stretch;
 border-radius:0;background:none;
 color:var(--relic-ink);box-shadow:none;
}
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-name{
 order:0;position:relative;display:block;min-height:0;max-height:none;margin:0 0 9px;padding:0 0 10px;
 border:0;border-bottom:1px solid #80684566;border-radius:0;background:none;box-shadow:0 1px #fff8df55;
 color:#352518;text-shadow:none;text-align:center;font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-weight:700;
 font-size:clamp(18px,6.8cqw,24px);line-height:1.2;white-space:normal;overflow:visible;overflow-wrap:anywhere;-webkit-line-clamp:unset;
}
.hero-card.hero-card .card-stats{position:static;display:contents;margin:0;padding:0;border:0}
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-stats>div{
 position:absolute;z-index:5;top:calc(41cqw + 17px);width:51px;height:77px;
 display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;padding:5px 2px;
 border:2px solid var(--relic-rim);border-radius:9px 25px 25px 9px;
 background:linear-gradient(130deg,#7b8982,#3c4c4b 27%,#20363e 62%,#15232b);
 box-shadow:0 3px 7px #0007,inset 0 0 0 1px #dac58d66,inset 0 0 8px #101b2799;
}
.hero-card.hero-card .card-stats .stat-power{left:2px}
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-stats>div+div{background:linear-gradient(130deg,#7b8982,#3c4c4b 27%,#20363e 62%,#15232b);border-color:var(--relic-rim);box-shadow:0 3px 7px #0007,inset 0 0 0 1px #dac58d66,inset 0 0 8px #101b2799}
.hero-card.hero-card .card-stats .stat-damage{right:2px;border-radius:25px 9px 9px 25px!important}
.hero-card.hero-card .card-stats .stat-icon{display:block;position:static;width:18px;height:18px;border:0;border-radius:0;background:none;box-shadow:none;font-size:17px;line-height:18px;color:#d5e7db;text-shadow:0 1px #0b1c20}
.hero-card.hero-card .card-stats .stat-icon svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-card.hero-card .card-stats .stat-damage .stat-icon{color:#f2d092;background:none;border:0}
.hero-card.hero-card .card-stats b{display:block;position:static;font-family:Georgia,'Times New Roman',serif;font-size:31px;line-height:1;letter-spacing:-1px;color:#fff1cc;text-shadow:0 2px 2px #050e16;font-variant-numeric:tabular-nums}
.hero-card.hero-card .card-stats .stat-damage b{color:#ffe3a7}
.hero-card.hero-card .card-stats small{display:block;position:static;margin:0;color:#ede1c9;font-size:8px;line-height:1.2;font-weight:700;letter-spacing:0;white-space:nowrap}
.hero-card.hero-card .card-stats .stat-damage small{color:#eee0c7}
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-ability,
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-ability.card-bonus{
 order:2;display:block;min-height:0;margin:0;padding:0;border:0;box-shadow:none;background:none;color:#362a1d;overflow:visible;text-overflow:clip;white-space:normal;
}
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-ability.card-bonus{order:3;margin-top:12px;padding-top:9px;border-top:1px solid #826d4b4d}
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .ability-label,
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-bonus .ability-label{margin-bottom:4px;color:#674621;font-size:8.5px;line-height:1.4;letter-spacing:.35px}
.hero-card.hero-card .card-ability p{font-size:12px;line-height:1.5;overflow:visible;white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:unset;margin:0}
.hero-card.hero-card .card-bonus-state{max-width:100%;margin-top:5px;padding:2px 5px;font-size:7.5px;color:#536747;border-color:#6678535c;background:#5e76400c}
.hero-card.hero-card:is(.rarity-C,.rarity-R,.rarity-E,.rarity-L,.rarity-LEADER) .card-clan{
 order:4;display:flex;align-items:center;justify-content:center;gap:7px;margin:13px 0 0;padding:6px 2px 0;
 border-top:1px solid #826d4b4d;color:#5f482d;font-size:8.5px;line-height:1.25;letter-spacing:1px;
}
.card-clan-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:23px;height:23px;border:1px solid var(--clan,#d1c597);border-radius:50%;background:radial-gradient(circle at 30% 20%,var(--clan,#d1c597),color-mix(in srgb,var(--clan,#d1c597) 50%,#152529));color:#fff1d2;box-shadow:inset 0 0 0 2px #f0dec13d}
.card-clan-mark svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card-clan-name{min-width:0}.hero-card.hero-card .card-mini-info{display:none}
.hero-card.hero-card.selected,.card-click.selected .hero-card.hero-card{
 border-color:#ffe496;outline:2px solid #f5cf75;outline-offset:3px;box-shadow:0 0 0 5px #ffc35838,0 0 23px #ffcf6a88,0 9px 19px #0008;
}
.card-click:focus-visible{outline:3px solid #ffe29c;outline-offset:5px;border-radius:20px}
.modal .card-detail h2{font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-weight:700}
/* Fixed-height previews and compact hands keep the same card materials. */
.battle-board>.battle-side .hero-card.hero-card{height:100%}
.campaign-encounter .encounter-card .hero-card.hero-card{height:190px}
.battle-board>.battle-side .hero-card.hero-card,.campaign-encounter .encounter-card .hero-card.hero-card{
 display:flex;flex-direction:column;min-height:0;padding:4px 5px 3px;border-width:2px;border-radius:11px 11px 9px 9px;aspect-ratio:auto;
}
.battle-board>.battle-side .hero-card.hero-card .portrait,.campaign-encounter .encounter-card .hero-card.hero-card .portrait{
 flex:1 1 auto;width:78%;height:auto;min-height:0;aspect-ratio:auto;margin:12px auto 0;border-width:3px;box-shadow:0 0 0 1px #f6e7b67a,0 0 0 2px #142126,0 2px 6px #0009;
}
.battle-board>.battle-side .hero-card.hero-card .card-body,.campaign-encounter .encounter-card .hero-card.hero-card .card-body{
 display:flex;position:static;flex:0 0 auto;width:100%;min-height:0;padding:0 1px;margin:0;background:none;border:solid transparent;border-width:9px 6px 7px;border-image:url("./assets/ui/card-scroll.svg") 65 43 52 43 fill stretch;
}
.battle-board>.battle-side .hero-card.hero-card .card-name,.campaign-encounter .encounter-card .hero-card.hero-card .card-name{
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;white-space:normal;
 min-height:20px;max-height:27px;margin:0;padding:0;border:0;box-shadow:none;background:none;color:#39291b;
 font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-weight:700;font-size:10.5px;line-height:1.16;text-shadow:none;
}
.battle-board>.battle-side .hero-card.hero-card .card-clan,.battle-board>.battle-side .hero-card.hero-card .card-ability,
.campaign-encounter .encounter-card .hero-card.hero-card .card-clan,.campaign-encounter .encounter-card .hero-card.hero-card .card-ability{display:none}
.battle-board>.battle-side .hero-card.hero-card .card-stats,.campaign-encounter .encounter-card .hero-card.hero-card .card-stats{position:static;display:contents}
.battle-board>.battle-side .hero-card.hero-card .card-stats>div,.campaign-encounter .encounter-card .hero-card.hero-card .card-stats>div{
 top:30%;width:30px;height:43px;padding:2px 1px;border-width:1px;border-radius:6px 13px 13px 6px;gap:1px;
}
.battle-board>.battle-side .hero-card.hero-card .card-stats .stat-power,.campaign-encounter .encounter-card .hero-card.hero-card .card-stats .stat-power{left:1px}
.battle-board>.battle-side .hero-card.hero-card .card-stats .stat-damage,.campaign-encounter .encounter-card .hero-card.hero-card .card-stats .stat-damage{right:1px}
.battle-board>.battle-side .hero-card.hero-card .card-stats .stat-icon,.campaign-encounter .encounter-card .hero-card.hero-card .card-stats .stat-icon{width:11px;height:11px;font-size:11px;line-height:1;opacity:1}
.battle-board>.battle-side .hero-card.hero-card .card-stats b,.campaign-encounter .encounter-card .hero-card.hero-card .card-stats b{font-size:18px;line-height:1;letter-spacing:-.5px}
.battle-board>.battle-side .hero-card.hero-card .card-stats small,.campaign-encounter .encounter-card .hero-card.hero-card .card-stats small{font-size:5px;line-height:1.1}
.battle-board>.battle-side .hero-card.hero-card .card-mini-info,.campaign-encounter .encounter-card .hero-card.hero-card .card-mini-info{display:block;position:static;order:5;margin:1px -3px 0;padding:0;color:#654b2c;font-size:6.5px;line-height:1.2;text-align:center;white-space:nowrap}
.battle-board>.battle-side .hero-card.hero-card .card-top,.campaign-encounter .encounter-card .hero-card.hero-card .card-top{display:flex;left:4px;right:4px;top:4px;width:auto;height:auto;gap:3px}
.battle-board>.battle-side .hero-card.hero-card .card-top .cost,.campaign-encounter .encounter-card .hero-card.hero-card .card-top .cost{position:static;min-width:0;min-height:0;padding:2px 3px;border-radius:4px 4px 7px 7px;font-size:8px;gap:1px}
.battle-board>.battle-side .hero-card.hero-card .card-top .cost>span,.campaign-encounter .encounter-card .hero-card.hero-card .card-top .cost>span{font-size:5px}
.battle-board>.battle-side .hero-card.hero-card .card-top .level,.campaign-encounter .encounter-card .hero-card.hero-card .card-top .level{position:static;padding:2px 3px;font-size:7px}
.battle-board>.battle-side .hero-card.hero-card .card-rarity-gem,.campaign-encounter .encounter-card .hero-card.hero-card .card-rarity-gem{position:static;width:12px;height:12px;flex-basis:12px;margin-top:1px;border-width:1px;border-radius:2px;box-shadow:0 2px 4px #000a}
.battle-board>.battle-side .hero-card.hero-card .card-rarity-gem::after,.campaign-encounter .encounter-card .hero-card.hero-card .card-rarity-gem::after{width:5px;height:5px}
.battle-board>.battle-side .hero-card.hero-card .rarity-label,.campaign-encounter .encounter-card .hero-card.hero-card .rarity-label{display:none}
.campaign-encounter .encounter-card .hero-card.hero-card .card-name{font-size:10.5px;min-height:24px}
.campaign-encounter .encounter-card .hero-card.hero-card .card-stats>div{width:32px;height:46px}
/* On wide boards the crest and stats sit above two readable parchment rules. */
@media(min-width:1280px) and (min-height:900px){
 .battle-board>.battle-side .hero-card.hero-card{
  display:grid;grid-template-columns:min(68px,34%) minmax(0,1fr);grid-template-rows:76px 13px auto auto;
  align-content:start;gap:3px 6px;padding:7px;border-radius:13px 13px 9px 9px;
 }
 .battle-board>.battle-side .hero-card.hero-card .portrait{grid-column:1;grid-row:1;flex:none;width:100%;height:76px;margin:0;border-radius:50%;border-width:3px}
 .battle-board>.battle-side .hero-card.hero-card .card-body{display:contents;position:static;min-height:0;padding:0;margin:0;background:none;border:0;box-shadow:none}
 .battle-board>.battle-side .hero-card.hero-card .card-name{
  grid-column:2;grid-row:1;align-self:start;display:block;-webkit-line-clamp:unset;overflow:visible;min-height:0;max-height:none;
  padding:3px 4px 5px;margin:0;background:linear-gradient(110deg,#e1d0a8,#f2e5c7,#d4bc90);border:1px solid #ccb37f;border-radius:5px;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-weight:700;font-size:12px;line-height:1.2;
 }
 .battle-board>.battle-side .hero-card.hero-card .card-stats{display:grid;grid-column:2;grid-row:1;align-self:end;position:static;width:100%;gap:4px}
 .battle-board>.battle-side .hero-card.hero-card .card-stats>div{
  position:relative;top:auto;left:auto;right:auto;width:auto;height:32px;display:grid;grid-template-columns:12px minmax(0,1fr);grid-template-rows:19px 8px;
  align-content:center;column-gap:1px;row-gap:0;padding:1px 3px;gap:0 2px;border-width:1px;border-radius:6px!important;
 }
 .battle-board>.battle-side .hero-card.hero-card .card-stats .stat-icon{position:static;grid-column:1;grid-row:1;width:12px;height:12px}
 .battle-board>.battle-side .hero-card.hero-card .card-stats .stat-power,.battle-board>.battle-side .hero-card.hero-card .card-stats .stat-damage{left:auto;right:auto}
 .battle-board>.battle-side .hero-card.hero-card .card-stats b{grid-column:2;grid-row:1;font-size:22px;position:static;text-align:center}
 .battle-board>.battle-side .hero-card.hero-card .card-stats small{grid-column:1/-1;grid-row:2;font-size:6.5px;text-align:center}
 .battle-board>.battle-side .hero-card.hero-card .card-clan{
  display:flex;grid-column:1/-1;grid-row:2;margin:0;padding:0;border:0;gap:4px;font-size:7px;line-height:1.2;letter-spacing:.4px;color:#fff0d1;text-shadow:0 1px #0b181a;
 }
 .battle-board>.battle-side .card-clan-mark{width:12px;height:12px;border-width:.5px;box-shadow:none}.battle-board>.battle-side .card-clan-mark svg{width:8px;height:8px}
 .battle-board>.battle-side .hero-card.hero-card .card-ability{
  display:block;grid-column:1/-1;grid-row:3;align-self:start;position:relative;min-width:0;margin:0;padding:5px 7px;
  border:1px solid #b9a16c;border-radius:6px;background:linear-gradient(115deg,#e3d2aa,#f1e5c5 54%,#dcc296);color:#362a1d;box-shadow:inset 0 1px #fff2d990;
 }
 .battle-board>.battle-side .hero-card.hero-card .card-ability.card-bonus{grid-row:4;margin:0;padding:5px 7px;border:1px solid #97a479;background:linear-gradient(115deg,#dbd5ac,#ece5c6 54%,#d2c79e)}
 .battle-board>.battle-side .hero-card.hero-card .ability-label{font-size:8px;line-height:1.2;margin-bottom:2px;letter-spacing:.1px}
 .battle-board>.battle-side .hero-card.hero-card .card-bonus .ability-label{padding-right:42px}
 .battle-board>.battle-side .hero-card.hero-card .card-ability p{font-size:10px;line-height:1.25;white-space:normal;overflow:visible}
 .battle-board>.battle-side .hero-card.hero-card .card-bonus-state{position:absolute;right:5px;top:4px;width:auto;max-width:47px;margin:0;padding:1px 3px;font-size:7px;line-height:1.2}
 .battle-board>.battle-side .hero-card.hero-card .card-mini-info{display:none}
 .battle-board>.battle-side .hero-card.hero-card .card-top{display:block;left:10px;right:auto;top:9px;width:calc(min(68px,34%) - 5px);height:70px}
 .battle-board>.battle-side .hero-card.hero-card .card-top .cost{position:absolute;left:0;top:0;font-size:9px}
 .battle-board>.battle-side .hero-card.hero-card .card-top .level{position:absolute;right:0;bottom:0;font-size:7.5px}
 .battle-board>.battle-side .hero-card.hero-card .card-rarity-gem{position:absolute;right:0;top:2px;width:12px;height:12px}
 .battle-board>.battle-side .hero-card.hero-card.rarity-LEADER .card-skill{grid-row:3/5;min-height:78px}
}
@media(max-width:760px){
 .campaign-encounter .encounter-card .hero-card.hero-card{height:187px}
 .hero-card.hero-card{padding:13px 11px 10px}
 .hero-card.hero-card .card-ability p{font-size:12.5px}
 .hero-card.hero-card .card-name{font-size:22px}
 .battle-board>.battle-side .hero-card.hero-card{padding:3px 3px 2px;border-radius:8px;border-width:1px}
 .battle-board>.battle-side .hero-card.hero-card .portrait{width:77%;margin-top:9px;border-width:2px;box-shadow:0 0 0 1px #b5a278,0 1px 4px #0008}
 .battle-board>.battle-side .hero-card.hero-card .card-body{padding:0 1px;border-width:7px 4px 5px}
 .battle-board>.battle-side .hero-card.hero-card .card-name{font-size:9px;line-height:1.12;min-height:18px;max-height:23px}
 .battle-board>.battle-side .hero-card.hero-card .card-stats>div{width:30px;height:37px;top:27%;border-radius:5px 10px 10px 5px;gap:.5px}
 .battle-board>.battle-side .hero-card.hero-card .card-stats .stat-icon{width:7px;height:7px;font-size:7px}
 .battle-board>.battle-side .hero-card.hero-card .card-stats b{font-size:16px}
 .battle-board>.battle-side .hero-card.hero-card .card-stats small{font-size:5.5px}
 .battle-board>.battle-side .hero-card.hero-card .card-top{left:3px;right:3px;top:3px}
 .battle-board>.battle-side .hero-card.hero-card .card-top .cost,.battle-board>.battle-side .hero-card.hero-card .card-top .level{padding:1px 2px;font-size:6px}
 .battle-board>.battle-side .hero-card.hero-card .card-rarity-gem{width:9px;height:9px;flex-basis:9px}
 .battle-board>.battle-side .hero-card.hero-card .card-rarity-gem::after{width:3px;height:3px}
 .battle-board>.battle-side .hero-card.hero-card .card-mini-info{font-size:5.5px;line-height:1.1;margin-top:1px}
 .campaign-encounter .encounter-card .hero-card.hero-card .card-name{font-size:10px}
}
/* The inspect and replay portraits share the oval material without changing layout. */
.battle-board .battle-inspect-dock .inspect-portrait{border-radius:50%;border-color:#c5ac78;box-shadow:0 0 0 2px #203039,0 0 0 3px #c5ac784f,0 3px 8px #0009}
.replay-host .replay-portrait{border-radius:50%;border-color:#d4bc81;box-shadow:0 0 0 2px #1c2a30,0 2px 6px #0008}
@media(prefers-reduced-motion:reduce){.hero-card.hero-card,.card-click:hover .hero-card.hero-card{transition:none}}

/* Inactive bonuses retain their rules beneath a crisp state overlay. */
.hero-card.hero-card[data-bonus-active="false"] .card-bonus,
.selected-bonus[data-bonus-active="false"],.detail-bonus{position:relative;isolation:isolate}
.hero-card.hero-card[data-bonus-active="false"] .card-bonus>.ability-label,
.hero-card.hero-card[data-bonus-active="false"] .card-bonus>p,
.selected-bonus[data-bonus-active="false"]>strong,
.selected-bonus[data-bonus-active="false"]>p,
.selected-bonus[data-bonus-active="false"]>small,
.detail-bonus[data-bonus-active="false"]>h3,
.detail-bonus[data-bonus-active="false"]>p{filter:blur(2.5px);opacity:.48}
.hero-card.hero-card[data-bonus-active="false"] .card-bonus-state{visibility:hidden}
.bonus-inactive-overlay{
 position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:5px;
 border-radius:inherit;background:#cabf9c38;color:#55422b;font-family:Georgia,'Times New Roman',serif;
 font-size:22px;font-weight:900;line-height:1.15;letter-spacing:.8px;white-space:nowrap;
 text-shadow:0 1px 0 #fff6d8,0 0 8px #f8e9c78c;pointer-events:none;user-select:none;
}
.battle-board>.battle-side .hero-card.hero-card .card-bonus>.bonus-inactive-overlay{font-size:16px;letter-spacing:.4px}
.battle-board .selected-bonus>.bonus-inactive-overlay{font-size:22px}
.hero-card.hero-card[data-bonus-active="false"] .card-mini-info{color:#654a2c;font-weight:800}
.card-detail .detail-bonus{margin-top:22px;padding:12px;border:1px solid #baa57480;border-radius:6px;background:#eddfbc}
.card-detail .detail-bonus>h3{margin-top:0;color:#4c603d}
.card-detail .detail-bonus>.skill-line{color:#463721}
@media(max-width:760px){.bonus-inactive-overlay{font-size:20px}.battle-board .selected-bonus>.bonus-inactive-overlay{font-size:22px}}