.wars-page {
  --war-red: #ff655f;
  --war-red-dark: #b82c36;
  --war-gold: #ffc764;
  --war-ink: #160b0c;
  background:
    radial-gradient(circle at 82% 4%, rgba(255, 83, 73, .13), transparent 28rem),
    radial-gradient(circle at 10% 38%, rgba(255, 183, 74, .06), transparent 32rem),
    #080707;
}
.wars-page .brand-mark {
  color: #2a0b0b;
  background: linear-gradient(145deg, #ffd27e, #f05454);
  box-shadow: 0 10px 30px rgba(240, 84, 84, .22);
}
.wars-page .brand small, .wars-page .war-kicker { color: var(--war-red); }
.wars-page nav a:hover, .wars-page nav a.active { background: rgba(255, 101, 95, .09); }
.wars-page .server-address { border-color: rgba(255, 101, 95, .25); background: rgba(255, 101, 95, .08); }
.wars-page .pulse { background: var(--war-red); box-shadow: 0 0 0 5px rgba(255, 101, 95, .1); }

.war-hero {
  min-height: 480px;
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 40px;
  margin-top: 22px;
  padding: 58px;
  overflow: hidden;
  border: 1px solid rgba(255, 141, 109, .2);
  border-radius: 32px;
  background:
    linear-gradient(90deg, rgba(15, 8, 8, .98) 0%, rgba(29, 10, 12, .91) 54%, rgba(11, 7, 7, .96) 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 32px 100px rgba(0,0,0,.24);
}
.war-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 75% 50%, #000, transparent 70%);
}
.war-hero::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -80px;
  border: 1px solid rgba(255, 101, 95, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255, 101, 95, .025), 0 0 0 140px rgba(255, 101, 95, .02);
}
.war-hero-copy { position: relative; z-index: 3; }
.war-kicker { margin: 0 0 10px; font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.war-hero h1 { max-width: 760px; font-size: clamp(45px, 6vw, 78px); }
.war-hero h1 span {
  color: var(--war-gold);
  text-shadow: 0 0 34px rgba(255, 199, 100, .2);
}
.war-hero .lead { color: #cbb4b2; }
.war-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
#copy-warp {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 199, 100, .35);
  border-radius: 14px;
  color: #27100d;
  background: linear-gradient(135deg, #ffe39d, #f5a548);
  cursor: pointer;
  box-shadow: 0 14px 35px rgba(245,165,72,.14);
}
#copy-warp b { font: 700 14px Oxanium, sans-serif; }
#copy-warp span { padding-left: 13px; border-left: 1px solid rgba(39,16,13,.2); font-size: 9px; font-weight: 800; }
.schedule { display: flex; align-items: center; gap: 10px; color: #cbb4b2; }
.schedule > span { width: 9px; height: 9px; border-radius: 50%; background: var(--war-red); box-shadow: 0 0 16px var(--war-red); animation: war-pulse 2s infinite; }

.newcomer-guide { margin: 0 0 90px; padding: 44px; overflow: hidden; position: relative; border: 1px solid rgba(255, 141, 109, .18); border-radius: 28px; background: linear-gradient(125deg, rgba(46,18,19,.88), rgba(16,9,10,.96)); }
.newcomer-guide::before { content: ""; width: 420px; height: 420px; position: absolute; right: -190px; top: -210px; border: 1px solid rgba(255,199,100,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,199,100,.018), 0 0 0 140px rgba(255,199,100,.012); pointer-events: none; }
.guide-intro { max-width: 860px; position: relative; z-index: 1; }
.guide-intro > h2 { margin-bottom: 13px; font: 700 clamp(32px, 4vw, 48px) Oxanium, sans-serif; }
.guide-intro > p { max-width: 780px; margin-bottom: 25px; color: #b79c98; font-size: 14px; line-height: 1.8; }
.guide-for-who { display: flex; align-items: flex-start; gap: 15px; padding: 18px 20px; border: 1px solid rgba(255,199,100,.2); border-radius: 17px; background: rgba(255,199,100,.055); }
.guide-for-who > span { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 11px; color: #2a100c; background: var(--war-gold); }
.guide-for-who b { display: block; margin-bottom: 5px; color: #fff3dd; font: 700 14px Oxanium, sans-serif; }
.guide-for-who p { margin: 0; color: #bca5a0; font-size: 11px; line-height: 1.65; }
.guide-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 28px 0 14px; }
.guide-flow article { min-height: 215px; position: relative; display: grid; align-content: start; gap: 16px; padding: 22px; border: 1px solid rgba(255,141,109,.13); border-radius: 19px; background: rgba(255,255,255,.027); transition: transform .18s, border-color .18s; }
.guide-flow article:hover { transform: translateY(-3px); border-color: rgba(255,199,100,.3); }
.guide-flow article:not(:last-child)::after { content: "›"; position: absolute; right: -9px; top: 50%; z-index: 2; color: var(--war-gold); font-size: 23px; transform: translateY(-50%); }
.guide-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--war-gold); background: rgba(255,199,100,.09); font-size: 20px; }
.guide-flow article > div { display: grid; gap: 7px; }
.guide-flow small { color: var(--war-red); font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.guide-flow h3 { margin: 0; color: #fff4ef; font: 700 15px/1.25 Oxanium, sans-serif; }
.guide-flow p { margin: 0; color: #947d79; font-size: 10px; line-height: 1.65; }
.guide-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.guide-facts > div { display: flex; align-items: flex-start; gap: 11px; padding: 15px 17px; border: 1px solid rgba(255,141,109,.1); border-radius: 14px; background: rgba(8,5,5,.32); }
.guide-facts > div > span { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 50%; color: #13261c; background: #72e5a0; font-size: 11px; font-weight: 900; }
.guide-facts p { display: grid; gap: 4px; margin: 0; }
.guide-facts b { color: #f2dfdb; font-size: 11px; }
.guide-facts small { color: #8b7471; font-size: 9px; line-height: 1.55; }
.guide-cta { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 19px 17px 22px; border: 1px solid rgba(255,199,100,.22); border-radius: 17px; background: linear-gradient(90deg, rgba(255,199,100,.08), rgba(255,91,75,.055)); }
.guide-cta > div { display: grid; gap: 4px; }
.guide-cta > div small { color: #9a817d; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.guide-cta > div b { color: #ffe1a0; font: 700 15px Oxanium, sans-serif; }
.guide-cta button { display: grid; gap: 3px; padding: 11px 17px; border: 1px solid rgba(255,199,100,.35); border-radius: 12px; color: #2a100b; background: linear-gradient(135deg, #ffe39d, #f5a548); cursor: pointer; text-align: left; }
.guide-cta button span { font: 700 12px Oxanium, sans-serif; }
.guide-cta button small { font-size: 8px; font-weight: 800; opacity: .7; }

.schedule div { display: grid; gap: 3px; }
.schedule small { color: #8f7472; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.schedule b { color: #f7e7e4; font-size: 11px; }

.arena-emblem {
  width: min(100%, 430px);
  aspect-ratio: 1;
  position: relative;
  z-index: 2;
  justify-self: center;
  display: grid;
  place-items: center;
}
.arena-emblem::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255, 199, 100, .2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 95, 73, .19), rgba(255, 95, 73, .02) 48%, transparent 70%);
  box-shadow: inset 0 0 70px rgba(255, 75, 61, .08), 0 0 80px rgba(255, 75, 61, .08);
}
.shield {
  width: 190px;
  height: 220px;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 48px;
  clip-path: polygon(50% 0, 94% 17%, 86% 72%, 50% 100%, 14% 72%, 6% 17%);
  color: #26100e;
  background: linear-gradient(145deg, #ffe5a8 0%, #f8b752 45%, #d65a43 100%);
  filter: drop-shadow(0 28px 25px rgba(0,0,0,.4));
}
.shield::before {
  content: "";
  position: absolute;
  width: 158px;
  height: 187px;
  top: 108px;
  clip-path: inherit;
  background: linear-gradient(145deg, rgba(70,17,15,.12), rgba(255,255,255,.08));
}
.shield > * { position: relative; z-index: 2; }
.shield small { font-size: 9px; font-weight: 900; letter-spacing: .23em; }
.shield b { max-width: 150px; overflow: hidden; font: 700 47px/1.1 Oxanium, sans-serif; text-overflow: ellipsis; }
.shield span { max-width: 135px; font-size: 10px; font-weight: 800; text-align: center; }
.blade {
  width: 24px;
  height: 310px;
  position: absolute;
  z-index: 1;
  border-radius: 90% 90% 8px 8px;
  background: linear-gradient(90deg, #7e858c, #fff, #8b8c8c);
  box-shadow: 0 0 25px rgba(255,255,255,.11);
}
.blade::after { content: ""; width: 84px; height: 16px; position: absolute; left: -30px; bottom: 47px; border-radius: 7px; background: linear-gradient(#f3bd5a, #8a3a25); }
.blade-left { transform: rotate(-43deg); }
.blade-right { transform: rotate(43deg); }
.spark { width: 6px; height: 6px; position: absolute; border-radius: 50%; background: var(--war-gold); box-shadow: 0 0 18px var(--war-gold); animation: float-spark 3s ease-in-out infinite; }
.spark-a { left: 12%; top: 30%; }.spark-b { right: 11%; top: 24%; animation-delay: -1s; }.spark-c { right: 20%; bottom: 18%; animation-delay: -2s; }

.month-bar { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin: 64px 0 18px; }
.month-bar h2 { margin: 0; font: 700 clamp(28px, 4vw, 42px) Oxanium, sans-serif; }
.month-picker { display: flex; gap: 8px; max-width: 60%; overflow-x: auto; padding-bottom: 4px; }
.month-picker button {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid rgba(255, 141, 109, .16);
  border-radius: 11px;
  color: #a9908e;
  background: rgba(32, 15, 16, .72);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.month-picker button.active { color: #2b120d; border-color: var(--war-gold); background: var(--war-gold); }

.war-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 74px; }
.war-overview article {
  min-height: 105px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 141, 109, .14);
  border-radius: 19px;
  background: rgba(28, 13, 14, .82);
}
.war-overview article > span { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border-radius: 13px; color: var(--war-gold); background: rgba(255, 199, 100, .09); font-size: 20px; }
.war-overview article div { min-width: 0; display: grid; gap: 5px; }
.war-overview small { color: #8d7472; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.war-overview strong { overflow: hidden; font: 700 21px Oxanium, sans-serif; text-overflow: ellipsis; }

.champion-stage {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  align-items: center;
  gap: 50px;
  margin-bottom: 72px;
  padding: 42px;
  border: 1px solid rgba(255, 199, 100, .18);
  border-radius: 28px;
  background: linear-gradient(115deg, rgba(43, 20, 15, .85), rgba(16, 10, 10, .95));
}
.champion-copy h2 { margin-bottom: 10px; font: 700 clamp(30px, 4vw, 46px) Oxanium, sans-serif; }
.champion-copy > p:last-child { margin: 0; color: #a98e8a; line-height: 1.7; }
.champion-card { min-height: 178px; position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 24px; padding: 27px; overflow: hidden; border: 1px solid rgba(255, 199, 100, .26); border-radius: 23px; background: linear-gradient(135deg, rgba(255,199,100,.12), rgba(255,78,70,.05)); }
.champion-card::after { content: ""; position: absolute; width: 230px; height: 230px; right: -100px; border: 1px solid rgba(255,199,100,.12); border-radius: 50%; }
.champion-crown { position: absolute; right: 23px; top: 18px; color: rgba(255,199,100,.22); font-size: 58px; }
.champion-mark, .mini-shield {
  display: grid;
  place-items: center;
  color: #2c110c;
  background: linear-gradient(145deg, #ffe19b, #e96848);
  font: 700 21px Oxanium, sans-serif;
  clip-path: polygon(50% 0, 94% 17%, 86% 72%, 50% 100%, 14% 72%, 6% 17%);
}
.champion-mark { width: 90px; height: 104px; }
.champion-card small { color: var(--war-gold); font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.champion-card h3 { margin: 6px 0; font: 700 24px Oxanium, sans-serif; }
.champion-card p { margin: 0; color: #ac908d; font-size: 11px; }

.war-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); gap: 16px; align-items: start; }
.leaderboard-panel, .last-final {
  overflow: hidden;
  border: 1px solid rgba(255, 141, 109, .15);
  border-radius: 24px;
  background: rgba(24, 12, 13, .88);
}
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 25px 27px; border-bottom: 1px solid rgba(255, 141, 109, .11); }
.panel-heading h2, .last-final h2 { margin: 0; font: 700 25px Oxanium, sans-serif; }
.live-label { color: #927b79; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.live-label i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--war-red); box-shadow: 0 0 10px var(--war-red); }
.war-table-wrap { overflow-x: auto; }
.war-table { min-width: 720px; }
.war-table th { color: #866f6d; background: rgba(255,255,255,.018); }
.war-table th:first-child, .war-table td:first-child { width: 84px; }
.war-table td { border-color: rgba(255, 141, 109, .08); color: #d9c5c2; }
.war-table tr:first-child td { background: rgba(255, 199, 100, .035); }
.war-rank { color: var(--war-gold); font: 700 15px Oxanium, sans-serif; }
.war-identity { display: flex; align-items: center; gap: 11px; }
.war-identity .mini-shield { width: 43px; height: 49px; flex: 0 0 43px; font-size: 11px; }
.war-identity span:last-child { display: grid; gap: 3px; }
.war-identity b { color: #fff5f2; }
.war-identity small { color: #806b69; font-size: 9px; }
.trophy-count { color: var(--war-gold); font-weight: 800; }
.win-count { color: #72e5a0; font-weight: 800; }
.rate-track { width: 92px; height: 5px; display: inline-block; margin-right: 8px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.07); vertical-align: middle; }
.rate-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--war-red), var(--war-gold)); }
.war-loading { height: 190px; color: #8f7774 !important; text-align: center !important; }
.war-empty { padding: 50px 20px; text-align: center; color: #927b79; }
.war-empty span { display: block; margin-bottom: 10px; color: var(--war-gold); font-size: 34px; }
.war-empty b { display: block; color: #f8e9e6; }
.war-empty p { margin: 6px 0 0; font-size: 11px; }

.last-final { padding: 27px; }
.last-final h2 { margin-bottom: 30px; }
.final-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; }
.final-duel > div { min-width: 0; display: grid; justify-items: center; gap: 10px; }
.mini-shield { width: 60px; height: 70px; font-size: 13px; }
.final-duel b { max-width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.final-duel > strong { color: #705b59; font: 700 13px Oxanium, sans-serif; }
.final-winner { display: grid; gap: 4px; margin: 28px 0 13px; padding: 15px; border: 1px solid rgba(255,199,100,.18); border-radius: 14px; text-align: center; background: rgba(255,199,100,.06); }
.final-winner small { color: #8f7672; font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.final-winner b { color: var(--war-gold); font: 700 18px Oxanium, sans-serif; }
.final-meta { margin: 0; color: #8d7472; font-size: 10px; line-height: 1.65; text-align: center; }

.history-section { margin: 80px 0; }
.history-section > .panel-heading { padding-left: 0; padding-right: 0; border: 0; }
.history-section .panel-heading p:last-child { margin: 7px 0 0; color: #927b79; font-size: 12px; }
.battle-list { display: grid; gap: 11px; }
.battle-card {
  display: grid;
  grid-template-columns: 150px 1fr 120px;
  align-items: center;
  gap: 25px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 141, 109, .12);
  border-radius: 18px;
  background: rgba(24, 12, 13, .75);
  transition: transform .18s, border-color .18s;
}
.battle-card:hover { transform: translateY(-2px); border-color: rgba(255,199,100,.28); }
.battle-time { display: grid; gap: 4px; }
.battle-time b { color: #e8d8d4; font-size: 12px; }
.battle-time small { color: #826d6a; font-size: 9px; }
.battle-versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.battle-guild { min-width: 0; display: flex; align-items: center; gap: 10px; }
.battle-guild.right { justify-content: flex-end; text-align: right; }
.battle-guild .mini-shield { width: 42px; height: 49px; flex: 0 0 42px; font-size: 10px; }
.battle-guild > span:last-child { min-width: 0; display: grid; gap: 2px; }
.battle-guild b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-guild small { color: #846f6c; font-size: 9px; }
.battle-guild.winner b { color: var(--war-gold); }
.battle-vs { color: #715b59; font: 700 11px Oxanium, sans-serif; }
.battle-result { display: grid; gap: 5px; text-align: right; }
.battle-result b { color: #70dfa0; font-size: 11px; }
.battle-result small { color: #806a68; font-size: 8px; }
.final-badge { color: var(--war-gold) !important; }

.war-rules {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 55px;
  align-items: center;
  margin: 0 0 90px;
  padding: 42px;
  border: 1px solid rgba(255, 141, 109, .15);
  border-radius: 27px;
  background: linear-gradient(125deg, rgba(44,17,18,.75), rgba(17,10,10,.92));
}
.war-rules h2 { margin-bottom: 12px; font: 700 clamp(29px, 4vw, 44px) Oxanium, sans-serif; }
.war-rules > div:first-child > p:last-child { margin: 0; color: #a78d89; line-height: 1.75; }
.rule-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rule-cards article { display: grid; align-content: start; min-height: 155px; padding: 19px; border: 1px solid rgba(255,141,109,.12); border-radius: 17px; background: rgba(255,255,255,.025); }
.rule-cards span { margin-bottom: 18px; color: var(--war-gold); font-size: 22px; }
.rule-cards b { margin-bottom: 7px; font-size: 11px; }
.rule-cards small { color: #866f6c; font-size: 9px; line-height: 1.55; }

@keyframes war-pulse { 50% { opacity: .45; box-shadow: 0 0 5px var(--war-red); } }
@keyframes float-spark { 50% { transform: translateY(-15px); opacity: .4; } }

@media (max-width: 1080px) {
  .war-hero { grid-template-columns: 1fr .7fr; padding: 42px; }
  .arena-emblem { transform: scale(.82); }
  .war-grid { grid-template-columns: 1fr; }
  .last-final { max-width: none; }
  .war-rules { grid-template-columns: 1fr; }
  .guide-flow { grid-template-columns: repeat(2, 1fr); }
  .guide-flow article:nth-child(2)::after { display: none; }
}
@media (max-width: 820px) {
  .war-hero { grid-template-columns: 1fr; min-height: 430px; }
  .arena-emblem { position: absolute; right: -120px; opacity: .27; }
  .war-hero-copy { max-width: 650px; }
  .month-bar { align-items: stretch; flex-direction: column; }
  .month-picker { max-width: 100%; }
  .war-overview { grid-template-columns: repeat(2,1fr); }
  .champion-stage { grid-template-columns: 1fr; gap: 22px; }
  .battle-card { grid-template-columns: 110px 1fr; }
  .battle-result { grid-column: 2; text-align: left; }
}
@media (max-width: 650px) {
  .war-hero { min-height: 0; padding: 34px 22px; border-radius: 22px; }
  .war-hero h1 { font-size: 41px; }
  .arena-emblem { display: none; }
  .war-actions { align-items: stretch; flex-direction: column; }
  #copy-warp { justify-content: center; }
  .war-overview { gap: 8px; margin-bottom: 50px; }
  .war-overview article { min-height: 90px; padding: 13px; gap: 9px; }
  .war-overview article > span { width: 37px; height: 37px; flex-basis: 37px; }
  .war-overview strong { font-size: 15px; }
  .champion-stage { margin-bottom: 50px; padding: 24px 18px; }
  .champion-card { grid-template-columns: auto 1fr; gap: 14px; padding: 18px; }
  .champion-crown { display: none; }
  .champion-mark { width: 64px; height: 76px; font-size: 15px; }
  .champion-card h3 { font-size: 17px; }
  .panel-heading { align-items: start; flex-direction: column; padding: 20px; }
  .battle-card { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .battle-versus { gap: 8px; }
  .battle-result { grid-column: auto; text-align: left; }
  .battle-guild b { font-size: 10px; }
  .history-section { margin: 55px 0; }
  .war-rules { margin-bottom: 60px; padding: 27px 20px; }
  .newcomer-guide { margin-bottom: 60px; padding: 28px 19px; }
  .guide-flow, .guide-facts { grid-template-columns: 1fr; }
  .guide-flow article { min-height: 0; grid-template-columns: auto 1fr; }
  .guide-flow article::after { display: none; }
  .guide-cta { align-items: stretch; flex-direction: column; }
  .guide-cta button { width: 100%; text-align: center; }
  .rule-cards { grid-template-columns: 1fr; }
  .rule-cards article { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .schedule > span, .spark { animation: none; }
}