--bg: #0d0809; --panel: #160d0f; --line: #3a1c22; --red: #c3172b; --red2: #7a0d18; --gold: #d8ad55; --ink: #efe5d8; --dim: #a8968a;
  --ok: #49c37a; --bad: #ff5468;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: 'Noto Serif SC', serif; overflow: hidden; }
body { background: radial-gradient(1200px 700px at 50% 30%, #2a0e14 0%, #0d0809 70%); }
button, select { font-family: inherit; }

.top { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #1c0b0f, #120a0b); }
.brand { display: flex; gap: 14px; align-items: center; }
.brand .suit { font-size: 40px; color: var(--red); text-shadow: 0 0 18px #ff2a4a88; }
.brand h1 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: 2px; }
.brand h1 small { font-family: 'Cinzel Decorative', serif; color: var(--gold); font-size: 13px; margin-left: 8px; letter-spacing: 1px; }
.brand p { margin: 2px 0 0; color: var(--dim); font-size: 12px; }
.factions { display: flex; gap: 8px; }
.factions button { background: transparent; color: var(--dim); border: 1px solid var(--line); padding: 8px 18px; border-radius: 2px; cursor: pointer; font-size: 14px; letter-spacing: 1px; position: relative; }
.factions button.on { color: var(--ink); border-color: var(--fc); box-shadow: inset 0 -3px 0 var(--fc); background: #ffffff08; }
.factions button em { font-style: normal; font-size: 11px; opacity: 0.7; margin-left: 6px; }
.factions button:disabled { opacity: 0.45; cursor: not-allowed; }

.layout { display: grid; grid-template-columns: 270px 1fr 380px; height: calc(100% - 74px - 28px); }
.roster { overflow-y: auto; border-right: 1px solid var(--line); background: #0f090a; padding: 10px 8px; }
.roster .tier { color: var(--gold); font-size: 11px; letter-spacing: 3px; padding: 10px 8px 4px; opacity: 0.8; }
.unit { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 10px; margin: 3px 0; border: 1px solid transparent; cursor: pointer; border-radius: 3px; transition: 0.15s; }
.unit:hover { background: #ffffff07; border-color: var(--line); }
.unit.on { background: linear-gradient(90deg, #c3172b33, transparent); border-color: var(--red2); }
.unit .no { font-family: 'Cinzel Decorative', serif; color: var(--red); font-size: 18px; text-align: center; }
.unit .nm { font-size: 14px; font-weight: 600; }
.unit .tt { font-size: 11px; color: var(--dim); margin-top: 2px; }
.unit .badge { font-size: 10px; margin-left: 6px; padding: 1px 5px; border-radius: 2px; background: #49c37a22; color: var(--ok); }
.unit .badge.bad { background: #ff546822; color: var(--bad); }
.unit .badge.wait { background: #ffffff10; color: var(--dim); }

.stage { position: relative; overflow: hidden; }
#viewport { position: absolute; inset: 0; }
#viewport canvas { display: block; }
.stage-hud { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
.unit-head { display: flex; gap: 14px; align-items: center; }
.unit-head .rank { font-family: 'Cinzel Decorative', serif; font-size: 46px; color: var(--red); line-height: 1; text-shadow: 0 0 20px #ff1f3f66; }
.unit-head h2 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: 2px; }
.unit-head .sub { color: var(--gold); font-size: 13px; letter-spacing: 1px; margin-top: 4px; }
.toolbar { pointer-events: auto; max-width: 96%; display: flex; flex-wrap: wrap; gap: 8px; align-self: center; background: #0d0809cc; border: 1px solid var(--line); padding: 8px 10px; border-radius: 4px; backdrop-filter: blur(6px); }
.toolbar .grp { display: flex; gap: 4px; align-items: center; }
.toolbar .grp > span { font-size: 11px; color: var(--dim); margin: 0 4px 0 6px; }
.toolbar button, .toolbar select { background: #1d1214; color: var(--ink); border: 1px solid var(--line); padding: 5px 10px; font-size: 12px; cursor: pointer; border-radius: 2px; }
.toolbar button.on { background: var(--red2); border-color: var(--red); }
.toolbar button:hover { border-color: var(--gold); }
.status { position: absolute; top: 18px; right: 18px; font-size: 12px; color: var(--dim); text-align: right; max-width: 340px; }
.status .bar { height: 3px; background: var(--line); margin-top: 6px; overflow: hidden; }
.status .bar i { display: block; height: 100%; width: 30%; background: var(--red); animation: slide 1.2s infinite linear; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

.dossier { overflow-y: auto; border-left: 1px solid var(--line); background: #0f090a; padding: 18px; }
.card-art { display: flex; gap: 6px; margin-bottom: 12px; }
.card-art i { flex: 1; height: 8px; border-radius: 1px; }
.role { display: inline-block; font-size: 12px; color: var(--gold); border: 1px solid #d8ad5555; padding: 3px 10px; letter-spacing: 1px; }
.desc { font-size: 13.5px; line-height: 1.8; color: #dccfc2; margin: 12px 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 18px; }
.stats div { background: #1a1012; border: 1px solid var(--line); padding: 7px 8px; }
.stats b { display: block; font-size: 15px; color: var(--ink); font-family: Georgia, serif; }
.stats span { font-size: 10.5px; color: var(--dim); }

.report { border-top: 1px solid var(--line); padding-top: 14px; }
.rep-head { display: flex; justify-content: space-between; align-items: center; }
.rep-head h3 { margin: 0; font-size: 15px; letter-spacing: 2px; }
.score { font-family: Georgia, serif; font-size: 18px; color: var(--ok); }
.score.bad { color: var(--bad); }
.rep-src { font-size: 11px; color: var(--dim); margin: 4px 0 10px; }
.rgroup { margin: 10px 0 4px; font-size: 11px; color: var(--gold); letter-spacing: 2px; }
.ritem { border-left: 2px solid var(--ok); background: #ffffff05; padding: 6px 9px; margin: 4px 0; font-size: 12px; }
.ritem.bad { border-left-color: var(--bad); background: #ff546810; }
.ritem .t { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.ritem .v { color: #cbbcb0; margin-top: 3px; line-height: 1.55; font-size: 11.5px; }
.ritem .d { color: var(--dim); margin-top: 3px; font-size: 10.5px; line-height: 1.5; display: none; }
.ritem.open .d { display: block; }
.ritem { cursor: pointer; }
.fixlog { margin-top: 12px; font-size: 11.5px; color: var(--dim); }
.fixlog summary { cursor: pointer; color: var(--ink); }
.fixlog li { margin: 4px 0; line-height: 1.5; }
.foot { height: 28px; line-height: 28px; font-size: 11px; color: var(--dim); text-align: center; border-top: 1px solid var(--line); background: #0b0708; }
.foot code { color: var(--gold); }
.empty { color: var(--dim); font-size: 13px; padding: 30px 14px; line-height: 1.8; text-align: center; }

@media (max-width: 1100px) {
  html, body { overflow: auto; }
  .layout { grid-template-columns: 1fr; height: auto; }
  .stage { height: 70vh; }
  .roster { display: flex; overflow-x: auto; border-right: 0; }
  .roster .tier { display: none; }
  .unit { min-width: 200px; }
}