:root{--bg:#0b121a;--panel:#142030;--panel2:#1b2b3d;--line:#2a3d52;--text:#ece8e1;--sub:#8c9bab;--red:#ff4655;--blue:#4aa3ff;--win:#3dd6b0;--loss:#ff4655;--gold:#f0c45a;--stripe:rgba(255,255,255,.022);--num:"Rajdhani","Noto Sans TC",sans-serif}
@media (prefers-color-scheme: light){:root{--bg:#e9e6df;--panel:#fff;--panel2:#f3f0ea;--line:#d3cec4;--text:#0f1923;--sub:#5d6b7a;--red:#d93a49;--blue:#1f78d1;--win:#0e9a78;--loss:#d93a49;--gold:#b8860b;--stripe:rgba(0,0,0,.03)}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) repeating-linear-gradient(135deg,var(--stripe) 0 2px,transparent 2px 16px);color:var(--text);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
main{max-width:1080px;margin:0 auto;padding:0 16px 56px}
.sub,.meta,small{color:var(--sub)}.sub{margin:4px 0 0}.meta{font-size:.9rem}
.cut{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
/* 頁首 */
.site{display:flex;align-items:center;gap:16px;padding:28px 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.site .slash{width:14px;height:54px;background:var(--red);transform:skewX(-18deg);flex:none;box-shadow:10px 0 0 -4px var(--gold)}
.site h1{margin:0;font-size:2.1rem;letter-spacing:.06em;line-height:1.15}
h3{margin:34px 0 14px;font-size:1.15rem;letter-spacing:.04em;display:flex;align-items:center;gap:10px}
h3::before{content:"";width:8px;height:18px;background:var(--red);transform:skewX(-18deg)}
h4{margin:0 0 8px;font-size:.98rem}
/* 表單 */
.bar{display:flex;flex-wrap:wrap;gap:8px;background:var(--panel);padding:12px;border-top:2px solid var(--red)}
input,select,button{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:10px 12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#riot{flex:1;min-width:210px}
.go{background:var(--red);border-color:var(--red);color:#fff;font-weight:700;cursor:pointer;padding:10px 28px}
.go:disabled{opacity:.6;cursor:wait}
.more{display:block;margin:12px auto;cursor:pointer}
.cfg{margin:10px 0 18px;color:var(--sub);font-size:.9rem}.cfg summary{cursor:pointer}.cfg input{width:100%;margin-top:8px}
#msg{padding:12px 14px;border-left:4px solid var(--red);background:var(--panel);margin-bottom:16px}
.card{background:var(--panel);padding:16px;margin-bottom:12px;border-top:2px solid var(--line)}
/* 個人檔案 */
#profile{display:grid;grid-template-columns:auto 1fr auto auto;gap:20px;align-items:center;border-top-color:var(--red)}
#profile img.av{width:92px;height:92px;object-fit:cover;background:var(--line)}
#profile h2{margin:0;font-size:1.6rem}
.rk{display:flex;align-items:center;gap:12px;padding-left:20px;border-left:1px solid var(--line)}
.rk img{width:72px;height:72px;object-fit:contain}.rk.pk img{width:52px;height:52px}
.rk b{display:block;font-family:var(--num);font-size:1.35rem;line-height:1.2}
.rr{height:6px;background:var(--panel2);margin-top:6px;width:120px}.rr i{display:block;height:100%;background:var(--gold)}
img.tier{width:26px;height:26px;object-fit:contain;vertical-align:middle;margin-right:4px}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gauge{display:flex;align-items:center;gap:12px}.gauge svg{width:92px;height:92px;flex:none}
.gt{font-size:19px;font-weight:700;fill:var(--text);font-family:var(--num)}.gauge small{display:block}
.gauge b{font-size:1.05rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-top:16px}
.tiles div{background:var(--panel2);padding:8px 12px;border-left:3px solid var(--gold)}
.tiles b{display:block;font-family:var(--num);font-size:1.5rem;line-height:1.2}.tiles small{font-size:.78rem}
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--sub);font-size:.8rem;margin-bottom:8px}
.legend i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two>.card{margin-bottom:0}.two{margin-bottom:12px}
.strip{display:flex;gap:3px;flex-wrap:wrap;margin-top:14px}
.strip span{width:16px;height:16px;background:var(--sub);transform:skewX(-18deg)}.strip .w{background:var(--win)}.strip .l{background:var(--loss)}
.donut{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.donut svg{width:150px;height:150px;flex:none}
.donut .dl{display:grid;gap:4px;font-size:.85rem}.dl i{display:inline-block;width:10px;height:10px;margin-right:8px}
.dt{font-family:var(--num);font-size:24px;font-weight:700;fill:var(--text)}
/* 特務卡 */
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ag{background:var(--panel);padding:14px 12px;text-align:center;border-top:3px solid var(--red);position:relative}
.ag img{width:78px;height:78px;object-fit:contain}.ag>b{display:block;font-size:1.1rem}
.ag .st{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 4px;margin-top:10px;font-size:.8rem}
.ag .st b{font-family:var(--num);font-size:1.1rem;display:block}.ag .st small{display:block;font-size:.7rem}
.track{height:10px;background:var(--panel2);min-width:60px}.fill{height:100%}
/* 地圖卡 */
.maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.mapcard{position:relative;min-height:176px;background:var(--panel2) center/cover;color:#fff;display:flex;align-items:flex-end}
.mapcard::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,18,26,.96) 12%,rgba(11,18,26,.15))}
.mapcard>div{position:relative;width:100%;padding:12px 14px}
.mapcard h4{margin:0;font-size:1.25rem;letter-spacing:.04em}.mapcard .sm{color:#cdd6df;font-size:.8rem}
.mapcard .mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;font-family:var(--num);font-size:1.15rem;font-weight:700}
.mapcard .mini small{display:block;color:#aab6c3;font-weight:400;font-size:.7rem;font-family:"Noto Sans TC",sans-serif}
.mapcard .track{background:rgba(255,255,255,.2);margin-top:6px}
/* 列表 */
.filter{display:flex;align-items:center;gap:10px}.filter h3{margin:34px 0 14px}
a.m{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:12px;align-items:center;padding:10px 14px;background:var(--panel);margin-bottom:8px;border-left:5px solid var(--sub);transition:background .15s}
a.m:hover{background:var(--panel2)}a.m.w{border-color:var(--win)}a.m.l{border-color:var(--loss)}
.ag-s{display:flex;gap:10px;align-items:center}.ag-s img{width:42px;height:42px;object-fit:contain;background:var(--panel2)}
img.mt{width:68px!important;height:38px!important;object-fit:cover!important}
.big{font-family:var(--num);font-weight:700;font-size:1.1rem}.blk{display:block}.wl-w{color:var(--win)}.wl-l{color:var(--loss)}
/* 表格 */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:620px}
th{color:var(--sub);font-weight:500;text-align:right;padding:5px 6px;white-space:nowrap}
td{padding:6px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
tr.me td{background:var(--panel2);font-weight:700}
tr.clk{cursor:pointer}tr.clk:hover td{background:var(--panel2)}
td img{width:24px;height:24px;object-fit:contain;vertical-align:middle;margin-right:6px}
td img.tier{width:24px;height:24px}
.tt{display:flex;justify-content:space-between;margin:14px 0 4px;font-weight:700}
.red{color:var(--red)}.blue{color:var(--blue)}
/* 戰報 */
.hero{position:relative;background:var(--panel2) center/cover;color:#fff;padding:22px 22px;margin-bottom:12px;min-height:200px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,18,26,.96),rgba(11,18,26,.3))}
.hero>*{position:relative}.hero h2{margin:0;font-size:2rem;letter-spacing:.05em}.hero .meta{color:#cdd6df}
.hero .red{color:#ff6b78}.hero .blue{color:#6ab7ff}
.score{font-family:var(--num);font-size:3.4rem;font-weight:700;line-height:1;text-align:center}
.score small{display:block;font-size:.8rem;font-weight:400;color:#cdd6df;font-family:"Noto Sans TC",sans-serif}
.badge{display:inline-block;padding:2px 12px;font-weight:700;font-size:.85rem;margin-left:10px;color:#0b121a;vertical-align:middle}
.badge.w{background:var(--win)}.badge.l{background:var(--loss)}
.hls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.hl{background:var(--panel);padding:12px 14px;display:flex;gap:12px;align-items:center;border-top:3px solid var(--gold)}
.hl img{width:56px;height:56px;object-fit:contain;background:var(--panel2)}
.hl b{display:block;font-family:var(--num);font-size:1.9rem;line-height:1.05}.hl small{display:block}
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px 18px;font-size:.82rem;color:var(--sub);margin-top:12px}.gloss b{color:var(--text)}
.hg{display:grid;grid-template-columns:150px 1fr;gap:8px;margin-bottom:8px;align-items:center;font-size:.85rem}
.hn{display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hn img{width:22px;height:22px;object-fit:contain;flex:none}.hn.me{font-weight:800}
.hbr{display:grid;grid-template-columns:1fr 46px;gap:6px;align-items:center;margin:2px 0}.hbr b{text-align:right;font-family:var(--num)}
.vs{margin-bottom:12px}.vs .vl{display:block;text-align:center;color:var(--sub);font-size:.8rem}
.vs .rv{display:grid;grid-template-columns:64px 1fr 64px;gap:8px;align-items:center}
.vs .rv b{font-family:var(--num);font-size:1.15rem}.vs .rv b:last-child{text-align:right}
.vsb{display:flex;height:12px;background:var(--panel2)}.vsb i{display:block;transform:skewX(-18deg)}
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.sc{background:var(--panel2);padding:10px;cursor:pointer;border-top:2px solid var(--line)}.sc:hover{border-top-color:var(--gold)}
.sc .hn{margin-bottom:4px;font-weight:700}.sc svg{width:100%;height:auto;display:block}
.sil-t{font-family:var(--num);font-size:24px;font-weight:700;fill:var(--text)}
.rg{margin-bottom:10px}.rg .meta{margin-bottom:4px}
.rounds{display:flex;gap:3px;flex-wrap:wrap}
.rc{width:26px;height:32px;display:grid;place-items:center;font-size:.78rem;font-weight:700;color:#0b121a;transform:skewX(-12deg)}
.rc.red{background:var(--red)}.rc.blue{background:var(--blue)}
.key{display:inline-grid;place-items:center;width:20px;height:20px;background:var(--sub);color:#0b121a;font-size:.72rem;font-weight:700;margin-right:4px}
details.r{background:var(--panel);margin-bottom:6px}
details.r summary{cursor:pointer;padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px 16px}
.feed{padding:4px 14px 12px;font-size:.88rem}.feed div{padding:2px 0}.feed time{color:var(--sub);display:inline-block;width:48px}
/* 玩家詳情彈窗 */
dialog{width:min(960px,96vw);max-height:92vh;overflow:auto;background:var(--bg);color:var(--text);border:1px solid var(--line);padding:0}
dialog::backdrop{background:rgba(5,9,14,.75)}
.dh{display:flex;gap:16px;align-items:center;padding:18px;background:var(--panel);border-bottom:2px solid var(--red);position:sticky;top:0;z-index:2}
.dh img.pt{width:84px;height:84px;object-fit:contain;background:var(--panel2)}
.dh h2{margin:0;font-size:1.4rem}.dh .x{margin-left:auto;cursor:pointer}
.db{padding:16px}
.duel{display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:center;margin-bottom:6px;font-size:.85rem}
.duel .bx{display:flex;height:16px;background:var(--panel2)}.duel .bx i{display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#0b121a;font-weight:700}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span{background:var(--panel2);padding:6px 12px;border-left:3px solid var(--gold)}.chips b{font-family:var(--num);font-size:1.2rem;margin-left:6px}
footer{margin-top:44px;color:var(--sub);font-size:.8rem}
[hidden]{display:none!important}
@media(max-width:760px){#profile{grid-template-columns:auto 1fr}.rk{border:0;padding:0}.row,.two{grid-template-columns:1fr}a.m{grid-template-columns:1fr 1fr}.hg,.duel{grid-template-columns:100px 1fr}.score{font-size:2.6rem}}
/* 首頁 */
.homehero{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:56px 0 36px}
.brand{display:flex;align-items:center;gap:18px}
.brand .slash{width:20px;height:84px;background:var(--red);transform:skewX(-18deg);box-shadow:14px 0 0 -6px var(--gold)}
.brand h1{margin:0;font-family:var(--num);font-size:4.4rem;line-height:1;letter-spacing:.06em}
.brand h1 span{color:var(--red)}
.tag{color:var(--sub);font-size:1.05rem;margin:14px 0 22px;max-width:34em}
.recent{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.recent a{background:var(--panel2);padding:4px 12px;font-size:.88rem;border-left:3px solid var(--gold)}.recent a:hover{background:var(--panel)}
.demo{background:var(--panel);padding:14px 18px 10px;border-top:2px solid var(--red)}.demo small{display:block;text-align:right}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.ft{background:var(--panel);padding:16px;border-top:3px solid var(--red)}.ft:nth-child(even){border-top-color:var(--gold)}
.ft b{display:block;font-size:1.05rem;margin-bottom:4px}.ft span{color:var(--sub);font-size:.9rem}
@media(max-width:760px){.homehero{grid-template-columns:1fr;padding-top:32px}.brand h1{font-size:3rem}.brand .slash{height:56px}}