/* Battle — Chinggis vs Jamukha. Frontend-only redesign; existing IDs stay intact. */
.battle-page { background: radial-gradient(circle at 58% 28%, rgba(36,72,120,.13), transparent 36%); }
.battle-layout { align-items: stretch; gap: 24px; }
.battle-sidebar { width: 330px; min-width: 330px; }
.battle-main { min-width: 0; }
.battle-sidebar .sidebar-block,
.battle-shell { background: #07111f; border: 1px solid #20344e; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; }
.battle-sidebar .sidebar-block { height: 100%; }
.battle-sidebar .bet-component { min-height: 100%; }
.battle-sidebar .bet-form { padding: 20px; }
.battle-sidebar .form-label { color:#f4f7fc; margin-bottom:10px; }
.battle-sidebar .input-field { background:#040a11; border-color:#30445f; color:#fff; }
.battle-sidebar .buttons-group { background:linear-gradient(90deg,#125784,#4fbde2); }

.battle-team-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; padding:0; border:0; }
.battle-team-picker .btn-bet { position:relative; display:flex; flex-direction:column; width:100%; min-height:290px; padding:0; margin:0; overflow:hidden; border:1px solid; border-radius:12px; background:#0a1422; color:#fff; opacity:.78; text-align:center; transition:.22s ease; }
.battle-team-picker .btn-bet:hover,.battle-team-picker .btn-bet.isActive { opacity:1; transform:translateY(-2px); }
.battle-team-picker .bet-red { border-color:#8e2432; box-shadow:inset 0 -80px 80px rgba(80,0,10,.42); }
.battle-team-picker .bet-blue { border-color:#205895; box-shadow:inset 0 -80px 80px rgba(0,36,88,.45); }
.battle-team-picker .bet-red.isActive { box-shadow:0 0 0 2px #ff4353,0 0 26px rgba(255,45,63,.45),inset 0 -80px 80px rgba(80,0,10,.5); }
.battle-team-picker .bet-blue.isActive { box-shadow:0 0 0 2px #2a8fff,0 0 26px rgba(42,143,255,.45),inset 0 -80px 80px rgba(0,36,88,.52); }
.team-card-art { display:block; width:100%; height:150px; background-image:url('/img/battle-custom/chinggis-jamukha-arena.png'); background-size:307px 205px; background-repeat:no-repeat; border-bottom:1px solid rgba(255,255,255,.08); }
.team-card-art-red { background-position:left top; }
.team-card-art-blue { background-position:right top; }
.team-card-name { margin-top:10px; font-size:14px; font-weight:800; white-space:nowrap; }
.team-card-percent { margin-top:8px; font-size:24px; font-weight:900; }
.bet-red .team-card-percent { color:#ff6671; }
.bet-blue .team-card-percent { color:#56a5ff; }
.team-card-tickets { margin:4px 0 9px; color:#a7b3c6; font-size:12px; }
.battle-team-picker .bet-text { margin-top:auto; width:100%; height:44px; border-top:1px solid rgba(255,255,255,.08); font-size:18px; }
.battle-place-bet { height:58px; border-radius:10px!important; background:linear-gradient(#ffd45d,#c77b06)!important; color:#121212!important; font-weight:800; box-shadow:0 12px 28px rgba(225,146,8,.24); }
.battle-sidebar .bet-footer { padding-bottom:20px; }

.game_Wheel.battle-shell { width:100%; display:flex; flex-direction:column; }
.battle-meta { position:relative; z-index:6; height:auto; min-height:58px; }
.battle-meta .progress-item { background:rgba(5,12,22,.88); border-color:#956d16; }
.battle-stage { width:100%; height:auto; min-height:610px; padding:8px 18px 12px; display:flex; align-items:center; justify-content:center; }
.battle-arena { position:relative; width:min(100%,940px); aspect-ratio:3/2; overflow:hidden; border-radius:8px; background:#02050a; isolation:isolate; }
.battle-art { position:absolute; inset:0; z-index:1; background:url('/img/battle-custom/chinggis-jamukha-arena.png') center/cover no-repeat; }
.battle-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.12) 62%,rgba(0,0,0,.72) 100%); }
.battle-ring { position:absolute; z-index:2; width:78%; height:auto; left:50%; top:50%; transform:translate(-50%,-51%); overflow:visible; filter:drop-shadow(0 0 10px rgba(255,60,70,.7)) drop-shadow(0 0 10px rgba(45,140,255,.55)); pointer-events:none; }
.battle-ring #circle { transform-origin:center; transform-box:fill-box; }
/* Reference-style battle pointer: a slim, long golden spear/needle. */
.battle-pointer {
  position:absolute;
  z-index:7;
  left:50%;
  top:0;
  width:42px;
  height:146px;
  transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(255,197,55,.42));
}
.battle-pointer::before {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:28px;
  height:118px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#8c5708 0%,#e6ad32 18%,#fff0a2 48%,#f4c65b 66%,#8f5707 100%);
  clip-path:polygon(50% 0,63% 54%,78% 70%,62% 82%,50% 100%,38% 82%,22% 70%,37% 54%);
  box-shadow:inset 0 0 0 1px rgba(92,50,0,.7);
}
.battle-pointer::after {
  content:"";
  position:absolute;
  left:50%;
  top:66px;
  width:22px;
  height:26px;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#ffe88a,#b66d05);
  border:1px solid rgba(103,57,0,.85);
  box-shadow:0 0 5px rgba(255,205,74,.45);
}
.battle-pointer span {
  position:absolute;
  left:50%;
  top:92px;
  width:16px;
  height:54px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#8a5205 0%,#f7c84d 42%,#fff0a0 55%,#a76306 100%);
  clip-path:polygon(50% 100%,0 0,50% 18%,100% 0);
}
.battle-vs { position:absolute; z-index:6; left:50%; top:48%; transform:translate(-50%,-50%); width:104px; height:104px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#ffd36a; font:900 40px/1 Exo 2,sans-serif; background:radial-gradient(circle,#332211 0,#131519 62%,#05070a 100%); border:3px solid #b87415; box-shadow:0 0 25px rgba(238,153,22,.5), inset 0 0 18px rgba(255,201,76,.16); }
.battle-bank { position:absolute; z-index:6; top:55%; transform:translateY(-50%); min-width:150px; text-align:center; text-shadow:0 3px 16px #000; }
.battle-bank-red { left:22%; color:#ff4a55; }
.battle-bank-blue { right:22%; color:#3394ff; }
.battle-bank-label { display:none; }
.battle-bank strong { font:900 46px/1 Exo 2,sans-serif; }
.battle-time { position:absolute; z-index:6; left:50%; bottom:5%; transform:translateX(-50%); width:320px; height:110px; }
.battle-time .block { position:static; width:100%; height:100%; border-radius:16px; background:linear-gradient(180deg,rgba(3,8,14,.25),rgba(3,8,14,.82)); backdrop-filter:blur(2px); }
.battle-time .block .title { color:#f2f3f5; font-size:16px; font-weight:500; }
.battle-time .block .value { color:#e8a914; font-size:58px; line-height:64px; font-weight:800; text-shadow:0 4px 20px rgba(0,0,0,.85); }

.history_wrapper { width:100%; height:auto; min-height:34px; padding:9px 20px; background:#07111f; }
.history_history { display:flex; width:100%; align-items:center; overflow:hidden; }
.history_item { width:7.14%; height:6px; border-radius:5px; margin-right:10px; cursor:pointer; }
.history_item.history_red { background:#ff4a55; box-shadow:0 0 9px rgba(255,74,85,.4); }
.history_item.history_blue { background:#3394ff; box-shadow:0 0 9px rgba(51,148,255,.4); }
.history_isAnimate { animation:shiftFromLeft .3s linear; }
.hash { width:100%; min-height:44px; padding:10px; display:flex; align-items:center; justify-content:center; background:#111c2b; border-radius:0 0 12px 12px; }
.hash .title { color:#f0b52b; font-weight:800; }

.battle-bets-section .game-stats { border-radius:14px; overflow:hidden; border:1px solid #1d3048; background:#07111f; }
.bet-type { font-weight:700; }
.bet-type.bet_blue { color:#4986f5; }
.bet-type.bet_red { color:#e86376; }

@media (max-width:1170px) {
  .battle-layout { gap:14px; }
  .battle-sidebar { width:300px; min-width:300px; }
  .battle-stage { min-height:520px; padding:6px; }
  .battle-bank-red { left:20%; } .battle-bank-blue { right:20%; }
}
@media (max-width:900px) {
  .battle-layout { flex-direction:column; }
  .battle-sidebar { width:100%; min-width:0; }
  .battle-team-picker .btn-bet { min-height:255px; }
  .team-card-art { height:145px; background-size:360px 240px; }
  .battle-stage { min-height:0; }
  .battle-bank strong { font-size:36px; }
  .battle-time { bottom:3%; }
}
@media (max-width:620px) {
  .battle-page .container,.battle-bets-section .container { padding-left:8px; padding-right:8px; }
  .battle-sidebar .bet-form { padding:12px; }
  .battle-team-picker { gap:8px; }
  .battle-team-picker .btn-bet { min-height:225px; }
  .team-card-art { height:120px; background-size:300px 200px; }
  .team-card-name { font-size:12px; }
  .battle-arena { aspect-ratio:4/5; }
  .battle-art { background-size:auto 100%; background-position:center; }
  .battle-ring { width:105%; }
  .battle-vs { width:72px; height:72px; font-size:28px; top:47%; }
  .battle-bank { top:57%; min-width:90px; }
  .battle-bank-red { left:10%; } .battle-bank-blue { right:10%; }
  .battle-bank strong { font-size:30px; }
  .battle-time { bottom:2%; width:230px; height:90px; }
  .battle-time .block .value { font-size:44px; line-height:50px; }
}
.battle-arena.is-spinning .battle-ring { animation:battlePulse .65s ease-in-out infinite alternate; }
.battle-arena.winner-red::after,.battle-arena.winner-blue::after { content:""; position:absolute; inset:0; z-index:5; pointer-events:none; animation:winnerFlash 1.8s ease-out both; }
.battle-arena.winner-red::after { background:radial-gradient(circle at 25% 48%,rgba(255,45,60,.5),transparent 46%); }
.battle-arena.winner-blue::after { background:radial-gradient(circle at 75% 48%,rgba(45,135,255,.5),transparent 46%); }
@keyframes battlePulse { from{filter:drop-shadow(0 0 7px rgba(255,60,70,.55)) drop-shadow(0 0 7px rgba(45,140,255,.45));} to{filter:drop-shadow(0 0 18px rgba(255,60,70,.9)) drop-shadow(0 0 18px rgba(45,140,255,.8));} }
@keyframes winnerFlash { 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }

/* === Battle layout hotfix 2026-07-21: full ring + true centered timer === */
.battle-stage {
  overflow: visible !important;
}

.battle-arena {
  /* Keep the entire circular SVG inside the arena instead of sizing from width. */
  overflow: hidden !important;
}

.battle-arena .battle-ring {
  width: auto !important;
  height: 88% !important;
  max-width: 88% !important;
  max-height: 88% !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow: visible !important;
}

.battle-arena .battle-pointer {
  left: calc(50% + 4px) !important;
  top: 1.5% !important;
  transform: translateX(-50%) !important;
}

/* Override legacy .time/.block positioning from the original theme. */
.battle-arena .battle-time.time {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 68% !important;
  bottom: auto !important;
  width: min(320px, 54%) !important;
  height: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

.battle-arena .battle-time.time .block {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  margin: 0 !important;
  padding: 10px 18px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(2,7,13,.18), rgba(2,7,13,.82)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
}

.battle-arena .battle-time.time .block .title {
  position: static !important;
  width: auto !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  text-align: center !important;
}

.battle-arena .battle-time.time .block .value,
.battle-arena #timer {
  position: static !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .battle-arena .battle-ring {
    height: 84% !important;
    max-height: 84% !important;
    max-width: 96% !important;
  }
  .battle-arena .battle-time.time {
    top: 70% !important;
    width: min(280px, 62%) !important;
  }
}

@media (max-width: 620px) {
  .battle-arena .battle-ring {
    width: 94% !important;
    height: auto !important;
    max-width: 94% !important;
    max-height: 72% !important;
  }
  .battle-arena .battle-time.time {
    top: 72% !important;
    width: min(230px, 66%) !important;
  }
  .battle-arena .battle-time.time .block {
    min-height: 82px !important;
    padding: 7px 12px 9px !important;
  }
}

/* === Battle ring split-shadow fix 2026-07-21 ===
   Keep the red glow only on the red SVG path and the blue glow only on the
   blue SVG path. Applying both drop-shadows to the entire SVG caused the red
   halo to appear behind the blue half. */
.battle-arena .battle-ring {
  filter: none !important;
}

.battle-arena .battle-ring #red {
  filter: drop-shadow(0 0 7px rgba(255, 74, 85, .82));
}

.battle-arena .battle-ring #blue {
  filter: drop-shadow(0 0 7px rgba(47, 143, 255, .82));
}

/* Pulse each coloured path independently while the existing spin logic runs. */
.battle-arena.is-spinning .battle-ring {
  animation: none !important;
}

.battle-arena.is-spinning .battle-ring #red {
  animation: battleRedPathPulse .65s ease-in-out infinite alternate;
}

.battle-arena.is-spinning .battle-ring #blue {
  animation: battleBluePathPulse .65s ease-in-out infinite alternate;
}

@keyframes battleRedPathPulse {
  from { filter: drop-shadow(0 0 5px rgba(255, 74, 85, .55)); }
  to   { filter: drop-shadow(0 0 15px rgba(255, 74, 85, .95)); }
}

@keyframes battleBluePathPulse {
  from { filter: drop-shadow(0 0 5px rgba(47, 143, 255, .55)); }
  to   { filter: drop-shadow(0 0 15px rgba(47, 143, 255, .95)); }
}

/* === Mobile battle-pointer vertical alignment fix 2026-07-21 ===
   On tall mobile arenas the ring is centered lower than the arena top.
   Move only the pointer down so it remains aligned with the ring. */
@media (max-width: 620px) {
  .battle-arena .battle-pointer {
    top: 7% !important;
  }
}

/* === Mobile full-character framing fix 2026-07-22 ===
   Match the arena to the source artwork ratio on phones so Chinggis and
   Jamukha are both shown completely instead of being cropped at the sides. */
@media (max-width: 620px) {
  .battle-arena {
    aspect-ratio: 1484 / 1060 !important;
  }

  .battle-arena .battle-art {
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .battle-arena .battle-ring {
    width: auto !important;
    height: 91% !important;
    max-width: 91% !important;
    max-height: 91% !important;
  }

  .battle-arena .battle-pointer {
    top: 0 !important;
    transform: translateX(-50%) scale(.72) !important;
    transform-origin: top center !important;
  }

  .battle-arena .battle-vs {
    top: 48% !important;
    width: 62px !important;
    height: 62px !important;
    font-size: 24px !important;
  }

  .battle-arena .battle-bank {
    top: 57% !important;
  }

  .battle-arena .battle-time.time {
    top: 75% !important;
    width: min(220px, 58%) !important;
  }

  .battle-arena .battle-time.time .block {
    min-height: 72px !important;
    padding: 5px 10px 7px !important;
  }

  .battle-arena .battle-time.time .block .title {
    font-size: 13px !important;
  }

  .battle-arena .battle-time.time .block .value {
    font-size: 38px !important;
    line-height: 42px !important;
  }
}