.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; }
}

/* Odswiezona oprawa Wojen Gildii */
.wars-page {
  --war-red: #ff6b45;
  --war-red-dark: #9f291f;
  --war-gold: #ffd365;
  --war-green: #59ed9a;
  --war-panel: rgba(6, 22, 16, .95);
  --war-line: rgba(255, 211, 101, .18);
  background:
    radial-gradient(circle at 82% 5%, rgba(255, 92, 48, .11), transparent 30rem),
    radial-gradient(circle at 14% 28%, rgba(55, 220, 131, .08), transparent 32rem),
    #020b08;
}
.wars-page::before {
  opacity: .2;
  background-image:
    linear-gradient(rgba(255, 211, 101, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 211, 101, .035) 1px, transparent 1px);
}
.wars-page .topbar { border-color: rgba(255, 211, 101, .13); }
.wars-page .brand-logo { width: 58px; height: 58px; filter: drop-shadow(0 8px 18px rgba(255, 109, 42, .24)); }
.wars-page .brand small { color: var(--war-gold); }
.wars-page nav a::after { background: linear-gradient(90deg, var(--war-green), var(--war-gold)); }
.wars-page .server-address { border-color: rgba(255, 211, 101, .25); background: rgba(33, 29, 12, .6); }
.wars-page .server-address small { color: var(--war-gold); }
.wars-page .pulse { background: var(--war-green); box-shadow: 0 0 12px var(--war-green); }

.war-hero {
  min-height: 545px;
  grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
  align-items: center;
  margin-top: 18px;
  padding: 64px 58px;
  border-color: rgba(255, 211, 101, .22);
  border-radius: 27px;
  background-image:
    linear-gradient(90deg, rgba(2, 11, 8, .99) 0%, rgba(2, 11, 8, .93) 25%, rgba(2, 11, 8, .48) 50%, rgba(2, 11, 8, .08) 76%),
    linear-gradient(0deg, rgba(2, 11, 8, .7), transparent 48%),
    url('/wp-content/minefox-survival/wojny/assets/clan-wars-hero.webp?v=20261014-1');
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 32px 100px rgba(0,0,0,.35);
}
.war-hero::before {
  opacity: .18;
  background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, #000, transparent 56%);
}
.war-hero::after {
  width: 660px;
  height: 660px;
  right: -280px;
  top: -110px;
  border-color: rgba(255, 211, 101, .09);
  box-shadow: 0 0 0 80px rgba(255, 211, 101, .018), 0 0 0 160px rgba(255, 107, 69, .012);
}
.war-hero-copy { max-width: 650px; }
.war-kicker { color: var(--war-green) !important; }
.war-hero .war-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.war-hero .war-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--war-green); box-shadow: 0 0 15px var(--war-green); }
.war-hero h1 { margin-bottom: 19px; font-size: clamp(54px, 6.3vw, 94px); line-height: .86; letter-spacing: -.055em; }
.war-hero h1 span { color: var(--war-gold); text-shadow: 0 0 34px rgba(255, 211, 101, .17); }
.war-hero .lead { max-width: 600px; color: #c0cec6; font-size: 15px; }
.war-actions { gap: 20px; }
#copy-warp { border-color: #ffd365; background: linear-gradient(135deg, #ffe89c, #f5ad3d); box-shadow: 0 15px 38px rgba(239, 162, 49, .2); }
#copy-warp:hover { transform: translateY(-2px); filter: brightness(1.05); }
.schedule { padding: 8px 0; }
.schedule > span { background: var(--war-green); box-shadow: 0 0 16px var(--war-green); }
.schedule small { color: #8ba096; }
.schedule b { color: #fff; }
.arena-status {
  min-width: 245px;
  position: absolute;
  right: 28px;
  bottom: 26px;
  z-index: 3;
  padding: 14px 16px;
  border: 1px solid rgba(255, 211, 101, .28);
  border-radius: 15px;
  background: rgba(2, 13, 9, .76);
  box-shadow: 0 16px 45px rgba(0,0,0,.3);
  backdrop-filter: blur(12px);
}
.arena-status > small { display: block; margin-bottom: 9px; color: var(--war-gold); font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.arena-status > div { display: flex; align-items: center; gap: 11px; }
.arena-status > div > span { width: 48px; height: 54px; display: grid; place-items: center; clip-path: polygon(50% 0, 93% 18%, 84% 75%, 50% 100%, 16% 75%, 7% 18%); color: #17200b; background: linear-gradient(145deg, #fff0a8, #f0a33e); font: 800 12px Oxanium; }
.arena-status p { display: grid; gap: 3px; margin: 0; }
.arena-status b { font: 700 13px Oxanium; }
.arena-status em { color: #9fb1a7; font-size: 8px; font-style: normal; }

.month-bar { margin-top: 66px; }
.month-bar h2 { color: #f5fff9; }
.month-picker button { border-color: rgba(255,211,101,.15); color: #93aa9e; background: rgba(6,29,21,.82); }
.month-picker button:hover { border-color: rgba(255,211,101,.4); color: #fff; }
.month-picker button.active { color: #211803; border-color: var(--war-gold); background: var(--war-gold); }
.war-overview { gap: 10px; margin-bottom: 62px; padding: 10px; border: 1px solid var(--war-line); border-radius: 19px; background: rgba(3, 17, 12, .76); }
.war-overview article { min-height: 96px; border-color: rgba(91,237,151,.11); border-radius: 13px; background: linear-gradient(145deg, rgba(10,44,32,.9), rgba(4,23,17,.94)); }
.war-overview article > span { color: var(--war-gold); background: rgba(255,211,101,.09); }
.war-overview small { color: #809a8d; }

.champion-stage { position: relative; overflow: hidden; border-color: rgba(255,211,101,.25); background: linear-gradient(110deg, rgba(8,35,25,.97), rgba(18,25,15,.92)); }
.champion-stage::after { content: ""; position: absolute; inset: 0; opacity: .14; background: url('/wp-content/minefox-survival/wojny/assets/clan-wars-hero.webp?v=20261014-1') center 68% / cover; mask-image: linear-gradient(90deg, transparent 28%, #000); pointer-events: none; }
.champion-stage > * { position: relative; z-index: 1; }
.champion-copy > p:last-child { color: #9cb0a5; }
.champion-card { border-color: rgba(255,211,101,.34); background: linear-gradient(135deg, rgba(255,211,101,.12), rgba(40,104,68,.09)); backdrop-filter: blur(8px); }
.champion-card h3 { color: #fff; }
.champion-card p { color: #9db0a6; }

.leaderboard-panel, .last-final { border-color: rgba(255,211,101,.14); background: linear-gradient(145deg, rgba(6,28,20,.97), rgba(3,17,13,.98)); }
.panel-heading { border-color: rgba(255,211,101,.1); }
.live-label i { background: var(--war-green); box-shadow: 0 0 10px var(--war-green); }
.war-table th { color: #80998d; background: rgba(10,43,31,.76); }
.war-table td { border-color: rgba(91,237,151,.08); color: #bfd0c7; }
.war-table tr:first-child td { background: rgba(255,211,101,.045); }
.rate-track { background: rgba(91,237,151,.08); }
.rate-track i { background: linear-gradient(90deg, #2bcf7b, #8af4b8); }
.last-final { background: linear-gradient(160deg, rgba(45,31,11,.72), rgba(5,24,17,.97)); }
.battle-card { border-color: rgba(91,237,151,.11); background: linear-gradient(135deg, rgba(7,31,23,.92), rgba(4,20,15,.95)); }
.battle-card:hover { border-color: rgba(255,211,101,.35); }
.battle-time b { color: #dce8e1; }

.newcomer-guide { border-color: rgba(255,211,101,.2); background: linear-gradient(125deg, rgba(8,39,28,.92), rgba(4,20,15,.98)); }
.guide-intro > p, .guide-for-who p, .guide-flow p { color: #92a99e; }
.guide-for-who { border-color: rgba(255,211,101,.2); background: rgba(255,211,101,.05); }
.guide-for-who > span { background: var(--war-gold); }
.guide-flow article, .guide-facts > div { border-color: rgba(91,237,151,.11); background: rgba(1,13,9,.32); }
.guide-flow article:hover { border-color: rgba(255,211,101,.34); }
.guide-flow small { color: var(--war-green); }
.guide-cta { border-color: rgba(255,211,101,.25); background: linear-gradient(90deg, rgba(255,211,101,.07), rgba(62,219,137,.05)); }
.guide-cta > div b { color: var(--war-gold); }

@media (max-width: 1080px) {
  .war-hero { grid-template-columns: 1fr; min-height: 520px; padding-right: 38%; background-position: 62% center; }
}
@media (max-width: 820px) {
  .war-hero { min-height: 580px; align-items: end; padding: 255px 30px 34px; background-image: linear-gradient(0deg, rgba(2,11,8,.99) 0%, rgba(2,11,8,.9) 45%, rgba(2,11,8,.16) 79%), url('/wp-content/minefox-survival/wojny/assets/clan-wars-hero.webp?v=20261014-1'); background-position: 64% center; }
  .arena-status { top: 18px; right: 18px; bottom: auto; transform: scale(.9); transform-origin: top right; }
}
@media (max-width: 650px) {
  .wars-page .brand-logo { width: 52px; height: 52px; }
  .war-hero { min-height: 610px; padding: 280px 20px 28px; border-radius: 20px; background-position: 66% center; }
  .war-hero h1 { font-size: clamp(48px, 16vw, 68px); }
  .war-hero .lead { font-size: 12px; }
  .arena-status { right: 12px; top: 12px; min-width: 218px; }
  .war-overview { padding: 7px; }
}