:root{color-scheme:dark;--bg:#0c1015;--panel:#121920;--line:#29343f;--text:#e4ebf1;--muted:#96a7b7;--cyan:#74cbd8;--warm:#e1a47c;--border-hover:#647787;--cyan-light:#a0e4ec;font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:wait;opacity:.45}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.topbar{min-height:88px;border-bottom:1px solid var(--line);padding:20px max(24px,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:18px}
.brand-mark{font-family:Georgia,serif;font-size:27px;letter-spacing:-2px;color:var(--cyan);padding-right:18px;border-right:1px solid var(--line)}
.brand strong{font-size:16px;letter-spacing:.12em}
.subtitle{display:block;color:var(--muted);font-size:11px;letter-spacing:.24em;margin-top:5px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:10px 18px;background:#18232c;border:1px solid #3a505e;border-radius:3px;transition:background .15s,border-color .15s}
.button:hover:not(:disabled){background:#233540;border-color:var(--cyan)}
.button svg{width:19px;height:19px}
.primary{background:var(--cyan);color:#0c2028;border-color:var(--cyan);font-weight:650;min-width:180px}
.primary:hover:not(:disabled){background:var(--cyan-light)}
main{max-width:1280px;padding:0 24px 24px;margin:auto;min-height:calc(100vh - 88px)}
.status-line{font-size:12px;color:var(--muted)}
#status{display:block;overflow-wrap:anywhere}
#status:not(:empty){padding:20px 0}
body[data-state="error"] #status{color:#f0ac90}
body[data-state="busy"] #status{color:var(--cyan)}
.empty{min-height:440px;height:calc(100vh - 245px);max-height:720px;border:1px dashed #3a4a58;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;background:var(--panel)}
.empty[hidden]{display:none}
h1{font-size:28px;font-weight:600;letter-spacing:.03em;margin:14px 0}
h2,p{margin:0}
.empty-note{font-size:11px;color:var(--muted);margin-top:22px}
body.dragging main{outline:2px dashed var(--cyan);outline-offset:-6px}
body.dragging .empty{border-color:var(--cyan);background:#17262e}
.replay-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0 26px}
.replay-header>div:first-child{min-width:0}
.replay-header h1{font-size:25px;margin:9px 0}
.muted{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.duration{text-align:right;flex-shrink:0}
.duration span{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.duration strong{display:block;font-size:25px;overflow-wrap:anywhere}
.rosters{--lineup-size:64px;display:flex;align-items:flex-start;justify-content:center;gap:12px;margin-bottom:22px;min-width:0}
.team-list{display:grid;grid-template-columns:repeat(var(--team-size),minmax(0,1fr));align-items:center;justify-items:center;flex:1;gap:4px;min-width:0;max-width:calc((100% - 28px)/2);color:var(--cyan)}
.lineup-vs{flex:none;display:flex;align-items:center;height:var(--lineup-size);font-size:11px;font-weight:600;color:var(--muted)}
.income{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11px;min-width:0;overflow-wrap:anywhere}
.income .gas-label{display:inline-flex;flex:none}
.income .game-icon{width:18px;height:18px}
.income strong{font-weight:600;min-width:0}
.team-income{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;min-width:0;margin-top:6px}
.team-income .income{display:flex;flex-wrap:nowrap;gap:2px;min-width:0}
.team-income .income strong{overflow-wrap:anywhere}
.team-income .game-icon{width:18px;height:18px;flex:none}
.player-card{display:flex;align-items:center;justify-content:center;flex:none;width:var(--lineup-size);max-width:100%;height:var(--lineup-size);padding:0;background:var(--panel);border:1px solid var(--line);border-radius:2px}
.player-card:hover{border-color:var(--border-hover)}
.player-card[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.game-icon{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.player-card .game-icon{display:block;width:100%;height:100%}
.player-panel{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid var(--line);background:var(--panel);padding:20px 24px;margin-bottom:18px}
.player-identity{display:flex;align-items:center;gap:16px;min-width:0}
.player-identity>.game-icon{width:58px;height:58px}
.identity-text{min-width:0}
.name-line{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.name-line h2{font-size:21px;overflow-wrap:anywhere}
.result{font-size:11px;color:var(--muted);border:1px solid var(--line);padding:3px 8px}
.result.victory{color:var(--cyan);border-color:#31545d}
.result.defeat{color:var(--warm);border-color:#654a39}
.unit-label{color:var(--muted);margin-top:7px;font-size:12px}
.player-name{max-width:100%}
.upgrade-list{display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:60%}
.upgrade{position:relative;flex:none;width:36px;height:36px;padding:0}
.upgrade .game-icon{display:block;width:100%;height:100%}
.production-level{position:absolute;right:0;bottom:0;color:var(--text);background:#0c1015d9;font-size:12px;line-height:1.1;font-variant-numeric:tabular-nums;pointer-events:none}
.settlements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.settlement{min-width:0;background:var(--panel);border:1px solid var(--line);padding:22px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.section-heading h2{font-size:16px;font-weight:600}
.earned h2{color:var(--cyan)}
.lost h2{color:var(--warm)}
.chart-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:30px;min-height:208px;padding:20px 0}
.pie{width:154px;height:154px;border-radius:50%;flex-shrink:0;border:1px solid #344450;position:relative;background:#202b35}
.pie:after{content:"";position:absolute;inset:29%;border-radius:50%;background:var(--panel);border:1px solid #344450}
.totals{display:grid;gap:18px;min-width:0}
.metric span{display:flex;gap:5px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:5px}
.metric strong,.duration strong{font-size:28px;font-weight:500;font-variant-numeric:tabular-nums}
.metric .game-icon,.list-head .game-icon{width:18px;height:18px}
.entry-list{list-style:none;margin:0;padding:0}
.list-head,.entry{display:grid;grid-template-columns:minmax(0,1fr) 60px 90px;gap:10px;align-items:center}
.list-head{color:var(--muted);font-size:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.list-head span:not(:first-child),.entry>.number{text-align:right}
.list-head .gas-label{display:flex;justify-content:flex-end}
.entry{min-height:49px;border-bottom:1px solid #232e38;font-size:12px}
.entry:last-child{border-bottom:0}
.entry-name{display:flex;align-items:center;gap:8px;min-width:0}
.entry-name .game-icon{width:29px;height:29px}
.entry-label{overflow-wrap:anywhere}
.swatch{width:6px;height:20px;flex-shrink:0;background:var(--slice)}
.number{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.empty-list{padding:24px 0;text-align:center;color:var(--muted);font-size:12px}
.skip{position:fixed;top:-100px;left:20px;z-index:10;background:var(--cyan);color:#10222b;padding:12px}
.skip:focus{top:10px}
@media(max-width:850px){
  .rosters{--lineup-size:min(64px,calc(10vw - 13px))}
  .player-panel{align-items:flex-start;flex-direction:column;gap:18px}
  .upgrade-list{max-width:100%}
  .chart-summary{gap:18px}
  .pie{width:124px;height:124px}
  .metric strong{font-size:24px}
  .settlement{padding:17px}
}
@media(max-width:640px){
  .topbar{padding:16px;gap:10px}
  .brand{gap:10px}
  .brand-mark{font-size:23px;padding-right:10px}
  .brand strong{font-size:13px}
  .button{padding:9px 12px}
  .topbar .button{font-size:12px}
  main{padding:0 16px 24px}
  #status:not(:empty){padding:12px 0}
  .empty{min-height:350px;padding:30px 14px}
  .empty h1{font-size:23px}
  .replay-header{align-items:flex-start}
  .replay-header h1{font-size:21px;overflow-wrap:anywhere}
  .duration strong{font-size:21px}
  .rosters{--lineup-size:clamp(24px,7.18vw,28px);gap:6px}
  .team-list{gap:2px}
  .lineup-vs{font-size:10px}
  .team-income{gap:1px}
  .team-income .income{gap:1px;font-size:10px;flex-wrap:wrap;align-content:center}
  .team-income .game-icon{width:14px;height:14px}
  .team-income .income strong{max-width:100%;word-break:normal}
  .settlements{grid-template-columns:minmax(0,1fr)}
  .player-panel{padding:18px}
  .chart-summary{gap:32px}
  .pie{width:148px;height:148px}
  .metric strong{font-size:28px}
  .list-head,.entry{grid-template-columns:minmax(0,1fr) 45px 75px;gap:7px}
  .topbar{flex-wrap:wrap}
  .brand{min-width:0}
  .replay-header{flex-wrap:wrap}
  .chart-summary{gap:20px}
  .player-identity{gap:10px}
  .player-identity>.game-icon{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}