/* Team and player ability demo styles */
:root{
--bg:#eef1f5;--ink:#1b2028;--muted:#7d858f;--line:#e1e5ea;--gold:#d8ad00}
*{
box-sizing:border-box}
body{
margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",Arial;color:var(--ink)}
button{
font:inherit}
.page{
max-width:1220px;margin:auto;padding:28px 24px 60px}
.head{
display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}
.ey{
font-size:11px;color:#8b929c;letter-spacing:.12em}
.title{
font-size:28px;font-weight:800;margin-top:7px}
.switch{
display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px}
.switch button{
min-height:44px;border:0;background:none;border-radius:7px;padding:0 18px;color:#8b929c;font-weight:700;cursor:pointer}
.switch button.on{
background:#171a20;color:#fff}
.layout{
display:grid;grid-template-columns:430px 1fr;gap:18px;align-items:start}
.device{
background:#111319;border-radius:34px;padding:10px;box-shadow:0 18px 45px #2530422c;position:sticky;top:18px}
.screen{
height:780px;position:relative;background:#fff;border-radius:26px;overflow:auto;line-height:0}
.screen img{
display:block;width:100%;height:auto}
.right{
background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.right h2{
font-size:19px;margin:0}
.right .intro{
font-size:13px;color:#68717c;line-height:1.65;margin:7px 0 18px}
.rules{
display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.rule{
border:1px solid var(--line);border-radius:9px;padding:13px}
.rule h4{
margin:0 0 7px;font-size:12px}
.rule p{
margin:0;color:#4d5763;font-size:12px;line-height:1.65}
.rule.calc{
background:#eef9f1;border-color:#b6dfc0}
.rule.edge{
background:#fff7e9;border-color:#f1d28d}
.source{
margin-top:16px;background:#f7f8fa;border-radius:9px;padding:11px;font-size:11px;color:#78818b;line-height:1.55}
@media(max-width:860px){
.page{
padding:16px 10px}
.head{
display:block}
.switch{
margin-top:14px;width:max-content}
.layout{
grid-template-columns:1fr}
.device{
position:relative;top:0;max-width:430px;margin:auto}
.right{
padding:15px}
.rules{
grid-template-columns:1fr}
}

/* Always-visible ability module inserted between lossless source slices. */
#screen > .traits-module{position:relative;display:block;background:#fff;line-height:1.4;margin:0;border:0;border-top:8px solid #f7f7f7;border-bottom:8px solid #f7f7f7;padding:16px 12px 6px;box-shadow:none;border-radius:0}
.traits-header{position:relative;min-height:53px}
.traits-header h3{margin:0;font-size:16px;font-weight:700;color:#161616}


.traits-module svg{display:block;width:100%;height:auto;overflow:visible;margin-top:-18px}
.axis-label{font-family:Arial,'PingFang SC',sans-serif;font-size:11px;fill:#111}
.axis-score{font-family:Arial,sans-serif;font-size:12px;font-weight:700;fill:white}
.overall-score{display:inline-block;background:#ffe2e5;color:#f52838;font-size:19px;border-radius:20px;padding:1px 9px;margin-left:7px}
.traits-module.player svg{margin-top:-12px}
.screen > img{display:block;width:100%;height:auto;margin:0;padding:0}
.device{min-width:0;width:100%}
body.embedded{background:#f2f5f8}.embedded .head,.embedded .right{display:none}.embedded .page{padding:12px}.embedded .layout{display:block}.embedded .device{max-width:430px;margin:auto;position:relative;top:0}.embedded .screen{height:740px}

/* Source-faithful player chart and expanded requirement text */
.rules{grid-template-columns:1fr}.rule ul{padding-left:17px;margin:0}.rule li{font-size:12px;line-height:1.8;color:#4d5763;margin:0 0 7px;overflow-wrap:anywhere}.rule li:last-child{margin:0}
.traits-module.player .traits-header{min-height:54px;display:flex;align-items:flex-start;justify-content:space-between}.traits-module.player .traits-header h3{padding-top:7px}.traits-module.player svg{margin-top:-4px}.player .axis-label{font-size:10px}.player .axis-score{font-size:11px}
.more-ability,.share-ability{border:0;background:transparent;min-width:44px;min-height:44px;color:#777;font-size:12px;cursor:pointer;padding:0 3px}.more-ability span{font-size:22px;margin-left:2px}.share-ability{font-size:25px;color:#2167ff}
.detail-page{background:#f3f5f8;line-height:1.4;min-height:100%}.detail-nav{height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#fff;border-bottom:1px solid #e7e9ed;padding:0 12px;position:sticky;top:0;z-index:2;font-size:16px}.detail-nav button{border:0;background:none;min-height:44px;text-align:left;font-size:13px;cursor:pointer;padding:0}.detail-summary{margin:10px 8px;background:#fff;padding:12px}.detail-summary svg{display:block;width:100%;height:auto}.detail-stats{background:#fff;margin:8px;padding:16px}.stat-group{margin-bottom:26px}.stat-group:last-child{margin-bottom:8px}.stat-group h4{font-size:14px;margin:0 0 14px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.stat-item>div:first-child{display:flex;justify-content:space-between;font-size:11px;margin-bottom:5px}.stat-item b{font-weight:400}.stat-bar{height:4px;border-radius:4px;background:#eceef2;overflow:hidden}.stat-bar i{display:block;height:100%;border-radius:4px}.sample-note{font-size:11px;color:#6e7782;padding:10px;text-align:center;margin:0}

.traits-module.player .traits-header{min-height:42px}




/* Team strengths and weaknesses: user-provided four-row reference. */
.team-strengths{margin:10px 0 12px;padding:8px 12px;background:#fafbfe;border:1px solid #eef1f7;border-radius:13px;color:#354155}
.strength-row{display:grid;grid-template-columns:94px minmax(0,1fr);align-items:center;gap:7px;min-height:49px;padding:7px 0}
.strength-label{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.strength-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 23px;width:23px;height:23px;border-radius:50%;background:#32ad73;color:white;font-size:17px;font-weight:700;line-height:1}
.good .strength-icon{background:#6ac18e;font-size:21px;font-weight:400}.fair .strength-icon{background:#7da8d8}.weak .strength-icon{background:#ed6963}
.strength-tags{display:flex;flex-wrap:wrap;gap:5px}
.strength-tags span{display:inline-block;background:#f3f5f8;padding:6px 7px;border-radius:6px;font-size:11px;line-height:1.3;letter-spacing:.1px}
@media(max-width:430px){.strength-row{grid-template-columns:82px minmax(0,1fr);gap:4px}.strength-label{font-size:13px;gap:6px}.team-strengths{padding:7px 9px}.strength-tags span{font-size:10px;padding:6px}}

.team-overall-score{display:inline-block;vertical-align:middle;font-size:19px;border-radius:20px;padding:1px 9px;margin-left:7px;line-height:1.4}
.strength-row{grid-template-columns:136px minmax(0,1fr)}
.strength-label{font-size:12px;white-space:normal;line-height:1.35}.strength-label>span:last-child{max-width:102px}
@media(max-width:430px){.strength-row{grid-template-columns:122px minmax(0,1fr)}.strength-label{font-size:11px}.strength-label>span:last-child{max-width:90px}}

.site-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.document-link{font-size:13px;color:#2463d9;text-decoration:none}.head{gap:16px}@media(max-width:860px){.site-actions{align-items:flex-start;margin-top:14px}.site-actions .switch{margin-top:0}}