:root{--bg:#14171c;--panel:#1c2027;--line:#2f3540;--text:#e8dcb8;--dim:#8b8f98;--gold:#c9a45c;--bad:#c4554d;--warn:#d9a441}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 "Noto Serif TC",serif}
header{display:flex;gap:16px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line)}
header a{color:var(--gold);text-decoration:none}header a[aria-current=page]{color:var(--text);text-decoration:underline;text-underline-offset:5px}.sp{flex:1}#adminNav{display:flex;gap:16px}#adminNav[hidden]{display:none}header{flex-wrap:wrap}
main{max-width:1280px;margin:0 auto;padding:20px}
h2{font-size:17px;font-weight:600;margin:28px 0 8px}
input,select,button{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:5px 8px;font:inherit}
button{cursor:pointer;color:var(--gold)}button:disabled{opacity:.4;cursor:default}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.hint{color:var(--dim);font-size:13px;margin:6px 0}
.stage canvas{width:100%;border:1px solid var(--line);cursor:crosshair;touch-action:none;margin-top:8px}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th{color:var(--dim);font-weight:400;font-size:13px}
td:first-child,th:first-child{text-align:left}
td input{width:100%;min-width:58px;text-align:right;padding:3px 5px}
input.warn{border-color:var(--warn)}input.bad{border-color:var(--bad);background:#2a1a1a}
.meta{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0}
.sum{display:flex;gap:28px;flex-wrap:wrap;margin:16px 0}
.sum b{display:block;font-size:22px;color:var(--gold);font-weight:600}.sum span{color:var(--dim);font-size:13px}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:12px 0}
table.sortable th{cursor:pointer;user-select:none}table.sortable th:hover{color:var(--text)}
table.sortable td,table.sortable th{text-align:right}table.sortable td.text,table.sortable th.text{text-align:left}
.player-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin:12px 0 16px}
.player-head .sum{margin:0;flex:0 1 auto;min-width:0;max-width:100%}
.player-filters{display:flex;flex:none;flex-wrap:nowrap;align-items:center;gap:10px;white-space:nowrap}
button.primary{background:var(--gold);border-color:var(--gold);color:var(--bg);font-weight:600}
input[type=date]{color-scheme:dark}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:1;filter:sepia(1) saturate(2.2) brightness(.92)}
@media (max-width:640px){.player-filters{flex-wrap:wrap;flex:auto}}
.pager{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin:10px 0;color:var(--dim);font-size:13px}
.player-title{font-size:22px;display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline;margin:20px 0 0}
.chart-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,2.4fr);gap:16px;margin:16px 0}
.chart-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px;min-width:0}
.chart-card h3{font-size:15px;font-weight:600;margin:0 0 10px}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;font-size:13px}.chart-head h3{margin:0}
.chart-host{position:relative;min-width:0}.chart-host svg{display:block;max-width:100%}
.chart-axis{fill:var(--dim);font-size:11px}
.chart-tip{position:absolute;z-index:5;pointer-events:none;background:#0d0f13;border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:12px;min-width:150px;white-space:nowrap}
.chart-tip .hint{margin:0}
.tip-row{display:flex;gap:6px;align-items:center}.tip-row i,.chart-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none}
.tip-row span{flex:1}.tip-row b{font-weight:600}.tip-row em{font-style:normal;color:var(--dim);min-width:42px;text-align:right}
.chart-legend{list-style:none;padding:0;margin:0}
.rank-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.rank-legend button{display:inline-flex;gap:5px;align-items:center;padding:2px 8px;font-size:12px;color:var(--text);border-radius:12px;opacity:.45}
.rank-legend button[aria-pressed=true]{opacity:1;border-color:var(--dim)}
@media (max-width:760px){.chart-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.chart-label{fill:var(--text);font-size:12px}a .chart-label{fill:var(--gold)}
.bar-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;margin-bottom:8px}.bar-legend li{display:flex;gap:5px;align-items:center}
.title-link{margin-left:auto;font-size:13px;font-weight:400}
.chart-opts{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:flex-end}
.names{display:inline-block;white-space:normal;min-width:220px}
.war-charts{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.donut-box{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.donut{flex:none}.donut path,.donut circle{transition:opacity .15s}.donut.active path:not(.on),.donut.active circle:not(.on){opacity:.2}
.donut-label{fill:var(--dim);font-size:12px}.donut-value{fill:var(--gold);font-size:24px;font-weight:600}.donut-value.small{font-size:15px}
.donut-legend{scrollbar-width:thin;scrollbar-color:var(--dim) transparent;flex:1 1 130px;min-width:0;max-height:290px;overflow-y:auto;overscroll-behavior:contain;font-size:13px;position:relative}
.donut-legend li{display:flex;gap:6px;align-items:center;padding:2px 6px;border-radius:3px}.donut-legend li.on{background:var(--line)}
.donut-legend span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.donut-legend b{font-weight:600}.donut-legend em{font-style:normal;color:var(--dim);min-width:30px;text-align:right}
@media (max-width:880px){.donut-legend{flex-basis:100%;max-height:170px}}
.legend-below .donut-legend{flex-basis:100%}
@media (max-width:760px){.war-charts{grid-template-columns:minmax(0,1fr)}}
.search{position:relative;display:inline-block;max-width:100%}.search input{max-width:100%}
#sug{position:absolute;z-index:10;top:100%;left:0;right:0;margin:2px 0 0;padding:4px 0;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.4);max-height:280px;overflow-y:auto}
#sug[hidden]{display:none}
#sug li{padding:4px 10px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#sug li:hover,#sug li.on{background:var(--line)}#sug li.on{color:var(--gold)}
.alts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dr{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.dr-btn{display:inline-flex;align-items:center;gap:8px;color:var(--text);min-width:200px;padding-right:30px;text-align:left}
.dr-btn svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.4}
.dr-btn[aria-expanded=true]{border-color:var(--gold)}
.dr-val{flex:1}.dr .dim{color:var(--dim)}
.dr-chip{font-size:12px;line-height:1;padding:3px 7px;border-radius:9px;background:var(--line);color:var(--gold)}
.dr-x{position:absolute;right:3px;border:0;background:none;color:var(--dim);font-size:17px;line-height:1;padding:3px 7px}.dr-x:hover{color:var(--text)}
.dr-pop{position:absolute;z-index:20;top:calc(100% + 6px);left:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.5);padding:14px 16px 10px;white-space:normal;font-size:14px}
.dr-pop[hidden],.dr-scrim[hidden],.dr-x[hidden],.dr-chip[hidden]{display:none}
.dr-head{display:none}
.dr-months{display:flex;gap:28px}
.dr-title{text-align:center;font-weight:600;margin-bottom:8px;line-height:26px}
.dr-nav{position:absolute;top:14px;width:26px;height:26px;padding:0;border:0;background:none;font-size:20px;line-height:1}.dr-nav:hover:not(:disabled){color:var(--text)}
.dr-prev{left:14px}.dr-next{right:14px}
.dr-grid{display:grid;grid-template-columns:repeat(7,38px);row-gap:3px}
.dr-wd{text-align:center;font-size:12px;color:var(--dim);line-height:26px}.dr-wd.we{color:var(--gold)}
.dr-day{position:relative;height:36px;padding:0;border:0;border-radius:0;background:none;color:var(--text);font-variant-numeric:tabular-nums}
.dr-day.we{color:var(--gold)}
.dr-day:disabled{color:var(--line);cursor:default}
.dr-day.war::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}
.dr-day.today{text-decoration:underline;text-underline-offset:3px}
.dr-day:hover:not(:disabled){outline:1px solid var(--gold);outline-offset:-1px;border-radius:4px}
.dr-day.in{background:rgba(201,164,92,.16)}
.dr-day.preview{background:rgba(201,164,92,.1)}
.dr-day.start,.dr-day.end{background:var(--gold);color:var(--bg);font-weight:600;border-radius:4px}
.dr-day.start::after,.dr-day.end::after{background:var(--bg)}
.dr-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.dr-presets{display:flex;flex-wrap:wrap;gap:6px}.dr-presets button{font-size:12px;padding:2px 10px;border-radius:12px}.dr-presets button:hover{border-color:var(--gold)}
.dr-sum{font-size:13px}.dr-sum b{font-weight:600;color:var(--gold)}
.dr-scrim{position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.55)}
@media (max-width:640px){
  .dr{display:flex;width:100%}.dr-btn{flex:1}
  .dr-pop{position:fixed;top:auto;left:0;right:0;bottom:0;border-radius:12px 12px 0 0;padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
  .dr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:600}
  .dr-close{border:0;background:none;font-size:22px;line-height:1;padding:0 4px}
  .dr-nav{top:50px}.dr-prev{left:16px}.dr-next{right:16px}
  .dr-months{justify-content:center}.dr-grid{grid-template-columns:repeat(7,minmax(0,46px))}.dr-month{flex:1;max-width:322px}
  .dr-day{height:42px}
  .dr-foot{flex-direction:column-reverse;align-items:stretch}.dr-presets button{flex:1 1 auto;white-space:nowrap;padding:5px 8px}
}