.hero-choice{display:flex;align-items:center;gap:10px}
.hero-avatar{display:block;flex:0 0 58px;width:58px;height:74px;border:1px solid #d8bd7755;border-radius:10px;background-image:var(--portrait-sheet,url(./hero-portraits.webp));background-size:400% 300%;background-position:var(--portrait-x) var(--portrait-y);background-repeat:no-repeat;box-shadow:0 4px 12px #0005}
.hero-avatar.featured-avatar{flex:0 0 clamp(150px,18vw,220px);width:clamp(150px,18vw,220px);height:clamp(195px,25vw,285px);border-radius:16px;box-shadow:0 16px 36px #0008,inset 0 0 0 1px #fff2}
.portrait-extra-1{--portrait-sheet:url(./hero-portraits-extra-1.webp)}
.portrait-extra-2{--portrait-sheet:url(./hero-portraits-extra-2.webp)}
.portrait-extra-3{--portrait-sheet:url(./hero-portraits-extra-3.webp)}
.portrait-extra-4{--portrait-sheet:url(./hero-portraits-extra-4.webp)}
.portrait-single{background-image:var(--portrait-image)!important;background-size:100% 100%!important;background-position:center!important}
.portrait-xiaoqiao{background-image:url(./xiaoqiao-portrait.png)!important;background-size:cover!important;background-position:center 28%!important}
.portrait-zhangfei{background-size:428% 300%!important}
@media(max-width:760px){.hero-avatar.featured-avatar{flex-basis:clamp(150px,31vw,205px);width:clamp(150px,31vw,205px);height:clamp(195px,40vw,260px)}}
@media(max-width:430px){.hero-avatar.featured-avatar{flex-basis:132px;width:132px;height:174px}}
.hero-copy{min-width:0}
.hero-copy b,.hero-copy small{display:block}
.hero-copy small{line-height:1.45}
.seat-identity{display:flex;align-items:center;gap:7px;min-width:0}
.seat-avatar{flex-basis:38px;width:38px;height:48px;border-radius:8px}
.seat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat-role{flex:0 0 auto}
.hero-detail{display:grid;grid-template-columns:minmax(88px,.32fr) 1fr;gap:10px;align-items:center;min-height:54px;margin-top:10px;padding:10px 12px;border:1px solid #c6a86335;border-radius:9px;background:#101a19aa}
.hero-detail strong{color:#e6c979;font-size:.78rem;line-height:1.45}
.hero-detail p{margin:0;color:#b8c6bf;font-size:.76rem;line-height:1.55}
.duel-opponent{margin-top:13px;padding:12px;border:1px solid #77a99544;border-radius:10px;background:#10201c99}
.duel-opponent label{gap:12px}
.duel-opponent select{max-width:65%}
.duel-preview{display:flex;align-items:center;gap:10px;margin-top:10px}
.duel-preview .hero-avatar{flex-basis:48px;width:48px;height:62px}
.duel-preview>div{min-width:0}
.duel-preview b{display:block;color:#e6d5a6;font-size:.8rem}
.duel-preview p{margin:3px 0 0;color:#aebcb5;font-size:.72rem;line-height:1.5}
.hand{min-height:158px;align-items:flex-start}
.card{flex-basis:116px;height:166px;padding:10px 9px;flex-shrink:0}
.card .card-icon{font-size:1.5rem;line-height:1.15}
.card b{font-size:.92rem;line-height:1.35;margin-top:6px}
.card small{display:block;font-size:1rem;line-height:1.45;color:#26342c;font-weight:600;margin-top:6px;overflow:visible;white-space:normal}
.help-card{max-height:calc(100dvh - 36px);overflow:auto}
.help-section{margin:12px 0;padding:11px 13px;border:1px solid #829b8330;border-radius:9px;background:#111c1baa}
.help-section h3{margin:0 0 7px;color:#e6c979;font-size:.92rem}
.help-section p,.help-section li{color:#c5d0c8;font-size:.86rem;line-height:1.7}
.help-section p{margin:0 0 7px}
.help-section ul,.help-section ol{margin:6px 0 0;padding-left:21px}
.help-section b{color:#f0dfb1}
.hero-rules{margin:12px 0;border:1px solid #c7a55b55;border-radius:9px;background:#111b1c}
.hero-rules>summary{padding:11px 12px;color:#e8cf91;font-weight:800;cursor:pointer}
.hero-rules>summary::marker{color:#dabd72}
.hero-rule-list{display:grid;gap:7px;padding:0 9px 10px}
.hero-rule{padding:9px 10px;border:1px solid #89a69a24;border-radius:7px;background:#1a2523}
.hero-rule h3{margin:0;color:#e7d6a7;font-size:.8rem}
.hero-rule h3 span{color:#c1aa6a;font-weight:600}
.hero-rule p{margin:4px 0 0;color:#c1cbc4;font-size:.76rem;line-height:1.55}
@media(max-width:430px){
  .hero-choice{gap:7px;padding:8px}
  .hero-avatar{flex-basis:42px;width:42px;height:55px}
  .hero-copy small{font-size:.58rem}
  .duel-opponent{padding:10px}
  .duel-opponent label{gap:6px;font-size:.76rem}
  .duel-opponent select{max-width:62%;font-size:.72rem}
  .duel-preview .hero-avatar{flex-basis:42px;width:42px;height:55px}
  .duel-preview p{font-size:.68rem}
  .seat-identity{gap:5px}
  .seat-avatar{flex-basis:32px;width:32px;height:41px}
  .seat-role{max-width:62px;overflow:hidden;text-overflow:ellipsis}
  .hand{min-height:156px}
  .card{flex-basis:112px;height:160px;padding:9px}
  .card small{font-size:.95rem;line-height:1.45}
  .my-banner{flex-wrap:wrap;align-items:flex-start}
  .my-banner>div:first-child{white-space:normal;flex-wrap:wrap}
  .skill-info{text-align:left;max-width:none;width:100%}
}
@media(max-width:760px){
  .setup-copy::before{left:50%;transform:translateX(-50%)}
}