:root{
  --bg:#130d0b;
  --bg-soft:#241814;
  --panel:rgba(34,22,17,.84);
  --panel-strong:rgba(23,15,12,.92);
  --stroke:rgba(255,223,186,.14);
  --stroke-strong:rgba(255,213,149,.28);
  --gold:#f0bb73;
  --jade:#7ce0d6;
  --ember:#d5623d;
  --text:#f9ecdb;
  --muted:#c6b09b;
  --shadow:0 26px 80px rgba(0,0,0,.42);
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 20%,rgba(214,106,62,.22),transparent 28%),
    radial-gradient(circle at 82% 16%,rgba(124,224,214,.14),transparent 24%),
    radial-gradient(circle at 50% 100%,rgba(255,187,98,.08),transparent 30%),
    linear-gradient(180deg,#2c1a14 0%,#18100d 48%,#0e0908 100%);
  color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
  padding:18px;
}

.shell{
  width:min(1420px,100%);
  margin:0 auto;
  display:grid;
  gap:16px;
}

.topbar{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  padding:22px 24px;
  border:1px solid var(--stroke);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(104,54,35,.95),rgba(30,21,16,.95)),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.topbar::before{
  content:"";
  position:absolute;
  inset:auto -90px -90px auto;
  width:280px;
  height:280px;
  background:radial-gradient(circle,rgba(255,194,131,.18),transparent 62%);
  pointer-events:none;
}

.title-wrap{display:grid;gap:8px;position:relative;z-index:1}
.eyebrow{
  margin:0;
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#f4c98a;
  opacity:.86;
}
.title-wrap h1{
  margin:0;
  font-size:clamp(30px,5vw,46px);
  letter-spacing:2px;
  color:#ffddad;
  text-shadow:0 4px 18px rgba(0,0,0,.24);
  font-family:"STKaiti","KaiTi","Kaiti SC","Microsoft YaHei",serif;
}

.subtitle{
  max-width:720px;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

.tagline{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.pill,.chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,226,194,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  color:#f5dcb8;
  font-size:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.layout{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(330px,420px);
  gap:16px;
  align-items:start;
}

.stage-card,.side-card{
  border:1px solid var(--stroke);
  border-radius:24px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.stage-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 18%),
    linear-gradient(180deg,rgba(53,35,28,.88),rgba(17,12,10,.88));
}

.side-card{
  padding:16px;
  display:grid;
  gap:12px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 18%),
    var(--panel-strong);
}

.stage-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 12px;
}

.stage-head strong{
  display:block;
  font-size:22px;
  color:#ffd59c;
}

.stage-head span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
}

.chips{display:flex;flex-wrap:wrap;gap:8px}

.canvas-wrap{
  position:relative;
  padding:0 14px 14px;
}

.canvas-wrap::after{
  content:"";
  position:absolute;
  inset:18px 32px 36px;
  border-radius:22px;
  background:
    radial-gradient(circle at 15% 18%,rgba(255,214,162,.08),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 34%),
    linear-gradient(120deg,transparent 0%,rgba(255,255,255,.03) 48%,transparent 96%);
  pointer-events:none;
}

.canvas-wrap::before{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:10px;
  bottom:24px;
  border-radius:20px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 20px 40px rgba(255,255,255,.02);
}

canvas{
  display:block;
  width:100%;
  border-radius:20px;
  border:1px solid rgba(255,232,203,.12);
  background:linear-gradient(180deg,#243442 0%,#1a2630 56%,#121915 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.battle-topline{
  padding:0 14px 12px;
  display:grid;
  gap:10px;
}

.rage-panel{
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
}

.rage-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:var(--muted);
}

.rage-head strong{
  color:#ffe2b7;
  font-size:15px;
}

.rage-bar{
  margin-top:10px;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
}

.rage-bar i{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#d75639 0%,#f0bb73 55%,#fff0b4 100%);
  box-shadow:0 0 24px rgba(240,187,115,.45);
}

.timer-panel,
.flow-panel{
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.06);
}

.timer-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:var(--muted);
}

.timer-head strong{
  color:#ffe2b7;
  font-size:15px;
}

.timer-bar{
  margin-top:10px;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
}

.timer-bar i{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#6ad7c5 0%,#f0c574 65%,#e16045 100%);
  box-shadow:0 0 20px rgba(106,215,197,.25);
}

.flow-panel strong{
  display:block;
  color:#ffe2b7;
  font-size:14px;
}

.flow-panel span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.stage-controls,.ult-panel{
  display:grid;
  gap:10px;
  padding:0 14px 16px;
}

.stage-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
.ult-panel{grid-template-columns:repeat(3,minmax(0,1fr))}

button{
  appearance:none;
  border:0;
  border-radius:15px;
  padding:12px 14px;
  font-size:14px;
  font-weight:700;
  color:#2a180e;
  background:linear-gradient(180deg,#f2c98c 0%,#d8a45a 100%);
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease,opacity .15s ease,box-shadow .15s ease;
  box-shadow:0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
}

button:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.04);
}

button:disabled{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
}

.skill-btn{
  color:#fff1da;
  background:linear-gradient(180deg,rgba(130,58,36,.96) 0%,rgba(78,30,19,.96) 100%);
  border:1px solid rgba(255,214,166,.12);
}

.secondary{
  color:#d9eff0;
  background:linear-gradient(180deg,#34656c 0%,#22464d 100%);
}

.danger{
  color:#ffe9e4;
  background:linear-gradient(180deg,#96412f 0%,#68271a 100%);
}

.ghost{
  color:#f7d6b0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,229,201,.1);
}

.stage-footer{padding:0 14px 18px}

.status-line{
  min-height:56px;
  padding:14px 16px;
  border-radius:16px;
  color:#fdebd3;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.05);
  font-size:13px;
  line-height:1.6;
}

.side-panel{display:grid;gap:16px}

.side-card h2{
  margin:0;
  font-size:16px;
  color:#ffd8a5;
  letter-spacing:1px;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.stat-box{
  padding:12px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.05);
}

.stat-box span{
  display:block;
  font-size:12px;
  color:var(--muted);
}

.stat-box strong{
  display:block;
  margin-top:6px;
  font-size:22px;
  color:#fff0d6;
}

.chapter-list,.roster,.upgrade-list{display:grid;gap:10px}

.chapter-btn,.roster-btn,.upgrade-btn{
  width:100%;
  text-align:left;
  padding:14px;
  border-radius:18px;
  color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
}

.chapter-btn strong,.roster-btn strong,.upgrade-btn strong{
  display:block;
  font-size:15px;
  color:#ffe2b7;
  margin-bottom:6px;
}

.chapter-btn span,.roster-btn span,.upgrade-btn span{
  display:block;
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}

.chapter-btn.active,.roster-btn.active{
  border-color:var(--stroke-strong);
  background:linear-gradient(180deg,rgba(145,92,42,.38),rgba(63,36,22,.38));
}

.upgrade-btn em{
  display:inline-block;
  margin-top:8px;
  font-style:normal;
  color:var(--jade);
  font-size:12px;
}

.notes{
  color:var(--muted);
  font-size:13px;
  line-height:1.72;
}

.compact-note{
  margin-top:-2px;
}

.notes strong{color:#ffe1b6}

.notes code{
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#ffe2b7;
}

@media (max-width:1080px){
  .layout{grid-template-columns:1fr}
}

@media (max-width:720px){
  body{padding:12px}
  .topbar{align-items:start;flex-direction:column}
  .tagline{justify-content:flex-start}
  .stage-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ult-panel{grid-template-columns:1fr}
}