:root{
  --bg:#0b1020;
  --text:#e9ecff;
  --muted:#aab2e8;
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);

  --panel:rgba(18,26,51,.85);
  --panelTop:rgba(18,26,51,.92);
  --panelSoft:rgba(15,22,48,.75);

  --accent1:rgba(124,92,255,1);
  --accent2:rgba(0,200,255,.85);

  --gold:#f1c550;
  --danger:#ff6b86;
  --ok:#49f2a6;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(0,200,255,.12), transparent 60%),
    var(--bg);
  min-height:100vh;
}

.page{
  width:min(1200px, 100%);
  margin:0 auto;
}

.topBanner{
  width:min(560px,100%);
  margin:0 auto 16px;
  background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,200,255,.75));
  border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  padding:12px 18px;
  text-align:center;
}

.topBanner .title{
  font-size:34px;
  font-weight:900;
  letter-spacing:.5px;
}

.topBanner .sub{
  font-size:14px;
  opacity:.92;
  margin-top:4px;
}

.board{
  background:var(--panel);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
}

.boardTop{
  background:rgba(18,26,51,.9);
  padding:16px 16px 0;
}

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

.tabLink{
  display:inline-block;
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:14px 14px 0 0;
  background:rgba(15,22,48,.7);
  color:var(--text);
  font-weight:900;
  font-size:18px;
  padding:12px 22px;
}

.tabLink.active{
  display:inline-block;
  text-decoration:none;
  border:5px solid var(--border);
  border-radius:14px 14px 0 0;
  background:rgba(30,22,48,.7);
  color:var(--text);
  font-weight:900;
  font-size:18px;
  padding:12px 22px;
}

.controls{
  background:rgba(18,26,51,.88);
  padding:12px;
  display:grid;
  gap:10px;
  align-items:center;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.ctrl,
.search{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  font-weight:800;
  color:var(--text);
  background:rgba(15,22,48,.9);
  outline:none;
}

.refreshBtn,
.btn{
  border:none;
  border-radius:12px;
  padding:12px 14px;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#071022;
  font-weight:900;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.refreshBtn:active,
.btn:active{
  transform:translateY(1px);
}

.statBtn{
  border:1px solid var(--border);
  border-radius:14px;
  padding:11px 14px;
  background:rgba(15,22,48,.8);
  color:var(--text);
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}

.statBtn.active{
  background:linear-gradient(180deg, rgba(255,224,141,.95), rgba(244,195,66,.92));
  color:#4b3200;
}

.loading,
.empty,
.error{
  border-radius:18px;
  padding:24px;
  text-align:center;
  font-size:18px;
  font-weight:900;
}

.loading,
.empty{
  color:var(--text);
  background:rgba(15,22,48,.75);
  border:1px solid var(--border);
}

.error{
  color:#ffd7de;
  background:rgba(120,20,40,.35);
  border:1px solid rgba(255,107,134,.35);
}

@media (max-width: 980px){
  .controls{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 560px){
  .topBanner .title{
    font-size:28px;
  }
}

/* ===== Shared card / row softening ===== */

/* leaderboard rows */
.row{
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
  border-radius: 20px !important;
  transition: all .2s ease;
}

.row:hover{
  background: rgba(255,255,255,0.065) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* soften top 3 */
.row.top1{
  background: linear-gradient(180deg, rgba(255,214,102,0.35), rgba(255,214,102,0.18)) !important;
  color:#fff !important;
}

.row.top2{
  background: linear-gradient(180deg, rgba(220,226,235,0.25), rgba(220,226,235,0.12)) !important;
  color:#fff !important;
}

.row.top3{
  background: linear-gradient(180deg, rgba(225,170,120,0.28), rgba(225,170,120,0.12)) !important;
  color:#fff !important;
}


/* ===== war compare cards ===== */

.baseCard{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
  border-radius: 18px !important;
  color: var(--text) !important;
}

/* remove harsh win/lose backgrounds */
.baseCard.win,
.baseCard.lose,
.baseCard.draw{
  background: rgba(255,255,255,0.05) !important;
}

/* VS middle */
.midVs{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
}

/* ===== Summary panels: make them match the dark app ===== */

.summary,
.summaryCard{
  background: rgba(18,26,51,.96) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.20) !important;
}

.infoGrid{
  background: rgba(15,22,48,.72) !important;
  border: 1px solid rgba(255,255,255,.06);
}

.infoCell{
  border-right: 1px solid rgba(255,255,255,.08) !important;
}

.infoLabel{
  color: var(--muted) !important;
}

.infoValue,
.infoSub{
  color: var(--text) !important;
}

/* war compare summary bits */
.vsBox,
.badgeBox{
  background: linear-gradient(135deg, var(--accent1), var(--accent2)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
}

.sideSub,
.summaryText .desc{
  color: var(--muted) !important;
}

/* war compare inner stat cards */
.stat,
.detailCard,
.summaryBox{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

.stat .label,
.detailTitle,
.summaryTitle{
  color: var(--muted) !important;
}

.stat .value,
.summaryStats,
.attackName{
  color: var(--text) !important;
}

.attackMeta,
.noData,
.summaryStat span{
  color: var(--muted) !important;
}

/* detail section darker too */
.warDetailRow{
  background: rgba(15,22,48,.68) !important;
  border: 1px solid rgba(255,255,255,.06);
}

/* ===== Better top 3 styling ===== */

.row.top1{
  background: linear-gradient(135deg, rgba(255,215,100,0.55), rgba(255,185,60,0.25)) !important;
  border: 1px solid rgba(255,215,120,0.45) !important;
  box-shadow: 0 8px 28px rgba(255,200,80,0.25) !important;
}

.row.top2{
  background: linear-gradient(135deg, rgba(200,210,230,0.35), rgba(160,175,200,0.15)) !important;
}

.row.top3{
  background: linear-gradient(135deg, rgba(205,140,90,0.35), rgba(160,100,60,0.15)) !important;
}

/* ===== clearer win / lose compare highlight ===== */

.baseCard.win{
  background: linear-gradient(135deg, rgba(70,190,110,.18), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(70,190,110,.35) !important;
  box-shadow: 0 0 0 1px rgba(70,190,110,.15) inset, 0 8px 22px rgba(0,0,0,.18) !important;
}

.baseCard.lose{
  background: linear-gradient(135deg, rgba(220,90,90,.16), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(220,90,90,.28) !important;
  box-shadow: 0 0 0 1px rgba(220,90,90,.12) inset, 0 8px 22px rgba(0,0,0,.18) !important;
}

.baseCard.draw{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* make the winning completion stat pop more */
.baseCard.win .stat:first-child{
  background: rgba(70,190,110,.18) !important;
  border: 1px solid rgba(70,190,110,.28) !important;
}

.baseCard.lose .stat:first-child{
  background: rgba(220,90,90,.14) !important;
  border: 1px solid rgba(220,90,90,.22) !important;
}

/* ===== Compact war compare cards ===== */

.baseCard{
  padding:10px !important;
  border-radius:16px !important;
}

.baseTop{
  gap:8px !important;
}

.rankBox{
  width:38px !important;
  height:38px !important;
  font-size:18px !important;
  border-radius:12px !important;
}

.baseCard .avatar{
  width:42px !important;
  height:42px !important;
  font-size:15px !important;
}

.baseCard .thDot{
  min-width:20px !important;
  height:20px !important;
  font-size:10px !important;
  padding:0 5px !important;
}

.name{
  font-size:16px !important;
  line-height:1.05 !important;
}

.tag{
  margin-top:2px !important;
  font-size:11px !important;
}

.attackTicksTop{
  gap:4px !important;
}

.tick{
  width:24px !important;
  height:24px !important;
  font-size:15px !important;
  border-radius:7px !important;
}

.stats{
  gap:6px !important;
  margin-top:10px !important;
}

.stat{
  padding:8px 8px !important;
  border-radius:12px !important;
}

.stat .label{
  font-size:10px !important;
}

.stat .value{
  margin-top:4px !important;
  font-size:13px !important;
}

/* buttons side by side */
.baseCard .expandBtn,
.baseCard .planBtn{
  margin-top:0 !important;
  width:auto !important;
  flex:1 1 0 !important;
  padding:8px 10px !important;
  font-size:12px !important;
  border-radius:10px !important;
}

.baseCard .planBtn{
  min-width:0;
}

.baseCard .expandBtn{
  min-width:0;
}

/* put both buttons on one line */
.baseCard .expandBtn + .planBtn{
  margin-left:8px;
}

.baseCard{
  display:flex;
  flex-direction:column;
}

.baseCard .stats + .expandBtn{
  margin-top:8px !important;
}

.baseCard .expandBtn,
.baseCard .planBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* wrap the two buttons onto one row visually */
.baseCard .expandBtn,
.baseCard .planBtn{
  box-sizing:border-box;
}

.baseCard .expandBtn{
  width:calc(50% - 4px) !important;
}

.baseCard .planBtn{
  width:calc(50% - 4px) !important;
}

/* make them sit next to each other */
.baseCard .expandBtn{
  float:left;
}

.baseCard .planBtn{
  float:right;
}

/* clear floats after buttons */
.baseCard::after{
  content:"";
  display:block;
  clear:both;
}

/* ===== Proper compact war action row ===== */

.actionRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}

.actionRow .expandBtn,
.actionRow .planBtn{
  width:100% !important;
  margin-top:0 !important;
  padding:8px 10px !important;
  font-size:12px !important;
  border-radius:10px !important;
}

/* compact card sizing */
.baseCard{
  padding:10px !important;
}

.baseTop{
  gap:8px !important;
}

.rankBox{
  width:36px !important;
  height:36px !important;
  font-size:16px !important;
}

.baseCard .avatar{
  width:40px !important;
  height:40px !important;
  font-size:14px !important;
}

.baseCard .thDot{
  min-width:20px !important;
  height:20px !important;
  font-size:10px !important;
  padding:0 5px !important;
}

.baseCard .name{
  font-size:14px !important;
  line-height:1.05 !important;
}

.baseCard .tag{
  margin-top:2px !important;
  font-size:11px !important;
}

.tick{
  width:22px !important;
  height:22px !important;
  font-size:14px !important;
}

.stats{
  gap:6px !important;
  margin-top:8px !important;
}

.stat{
  padding:7px 8px !important;
}

.stat .label{
  font-size:10px !important;
}

.stat .value{
  margin-top:3px !important;
  font-size:12px !important;
}
/* ===== compact filter row ===== */

.filterRow{
  display:grid;
  grid-template-columns:1fr 1fr; /* 50 / 50 */
  gap:10px;
  align-items:center;
}

/* make inputs same height */
.filterRow .ctrl,
.filterRow .search{
  width:100%;
  height:42px;
}

/* move refresh to full width below */
.filterRow .btn{
  grid-column:1 / -1; /* span full row */
  height:42px;
}

@media (max-width:700px){
  .filterRow{
    grid-template-columns:1fr;
  }
}