/* ClashFarm Arena refresh — 2026.10.27 */

.arena-page {
  --arena-gold: #f1c968;
  --arena-gold-soft: #ffe7a7;
  --arena-ink: #071410;
  --arena-panel: rgba(13, 34, 30, .92);
  --arena-panel-soft: rgba(22, 53, 45, .88);
  --arena-red: #a94435;
  --arena-green: #4ca86b;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: var(--cf-viewport-height, 100dvh);
  color: #fff3d5;
  background: #050b09 !important;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.arena-page::-webkit-scrollbar,
.arena-content::-webkit-scrollbar,
.arena-after-battle-panel::-webkit-scrollbar,
.arena-detail-modal::-webkit-scrollbar,
.arena-log-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.arena-page::before {
  content: '';
  position: fixed;
  z-index: -2;
  inset: 0 auto 0 50%;
  width: min(100vw, var(--game-shell-width, 480px));
  pointer-events: none;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(5, 18, 15, .2), rgba(5, 16, 13, .5) 55%, rgba(3, 9, 7, .82)),
    url('/assets/arena-background-v20261021-1.webp') center top / cover no-repeat;
  box-shadow: 0 0 56px rgba(0, 0, 0, .72);
}

.arena-page::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: min(100vw, var(--game-shell-width, 480px));
  pointer-events: none;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(0, 6, 4, .45), transparent 13%, transparent 87%, rgba(0, 6, 4, .45)),
    radial-gradient(ellipse at 50% 17%, rgba(240, 188, 82, .09), transparent 48%);
}

.arena-frame {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, var(--game-shell-width, 480px)) !important;
  max-width: var(--game-shell-width, 480px) !important;
  min-height: var(--cf-viewport-height, 100dvh);
  margin: 0 auto;
  padding: 0 !important;
  background: transparent !important;
}

.arena-content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 10px clamp(10px, 3vw, 18px) calc(112px + var(--cf-safe-bottom, 0px)) !important;
}

.arena-top {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin: 0 0 9px;
}

.arena-back-button {
  min-width: 0;
  min-height: 48px;
  padding: 0 11px;
  color: var(--arena-gold-soft);
  background: linear-gradient(180deg, rgba(59, 88, 72, .98), rgba(18, 43, 35, .98));
  border: 1px solid rgba(250, 215, 134, .48);
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .38);
  font-size: 13px;
  font-weight: 900;
}

.arena-title-box {
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding: 7px 12px 7px 51px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(34, 73, 61, .96), rgba(12, 34, 29, .96));
  border: 1px solid rgba(248, 210, 124, .46);
  border-radius: 15px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 4px 13px rgba(0, 0, 0, .36);
  backdrop-filter: blur(5px);
}

.arena-title-box::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  background: url('/assets/profile-stat-skill-v20261025-1.webp') center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .48));
}

.arena-title {
  overflow: hidden;
  color: #ffdd89;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .66);
  font-size: clamp(19px, 4.8vw, 23px);
  font-weight: 950;
  line-height: 1.05;
}

.arena-subtitle {
  overflow: hidden;
  margin-top: 3px;
  color: rgba(255, 240, 203, .76);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 750;
}

.arena-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px;
  margin: 0 0 9px;
}

.arena-status-grid > div {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 7px 8px 7px 48px;
  text-align: left;
  background: linear-gradient(125deg, rgba(28, 66, 55, .93), rgba(10, 30, 25, .94));
  border: 1px solid rgba(246, 210, 126, .33);
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .075), 0 3px 10px rgba(0, 0, 0, .3);
}

.arena-status-grid > div::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 33px;
  height: 33px;
  transform: translateY(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .46));
}

.arena-status-grid > div:nth-child(1)::before { background-image: url('/assets/profile-stat-victories-v20261025-1.webp'); }
.arena-status-grid > div:nth-child(2)::before { background-image: url('/assets/arena-status-next-battle-v20261028-1.webp'); }
.arena-status-grid > div:nth-child(3)::before { background-image: url('/assets/profile-stat-glory-v20261025-1.webp'); }
.arena-status-grid > div:nth-child(4)::before { background-image: url('/assets/profile-stat-league-v20261025-1.webp'); }
.arena-status-grid > div:nth-child(5)::before { background-image: url('/assets/gold-CtioqrbS.png'); }
.arena-status-grid > div:nth-child(6)::before { background-image: url('/assets/diamond-DFkr_DXt.png'); }

.arena-status-grid span {
  grid-column: 2;
  min-width: 0;
  color: rgba(248, 234, 204, .72);
  opacity: 1;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.08;
}

.arena-status-grid b {
  grid-column: 2;
  min-width: 0;
  margin: 1px 0 0;
  color: #fff0ba;
  font-size: 13px;
  line-height: 1.08;
}

.arena-shield-box,
.arena-message {
  position: relative;
  box-sizing: border-box;
  min-height: 47px;
  margin: 0 0 9px;
  padding: 9px 10px 9px 48px;
  color: #fce7b4;
  background: linear-gradient(120deg, rgba(42, 79, 67, .94), rgba(16, 39, 32, .95));
  border: 1px solid rgba(244, 206, 119, .37);
  border-radius: 14px;
  box-shadow: 0 3px 11px rgba(0, 0, 0, .31);
  font-size: 11px;
  line-height: 1.32;
}

.arena-shield-box::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  background: url('/assets/profile-stat-protection-v20261025-1.webp') center / contain no-repeat;
}

.arena-message {
  min-height: 0;
  padding-left: 11px;
  color: #ffd9bf;
  background: linear-gradient(120deg, rgba(101, 43, 32, .94), rgba(43, 23, 18, .95));
  border-color: rgba(243, 135, 108, .4);
}

.arena-main-choice {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 7px !important;
  overflow: visible !important;
  background: rgba(8, 27, 22, .76);
  border: 1px solid rgba(244, 207, 120, .3);
  border-radius: 18px;
  box-shadow: inset 0 0 22px rgba(239, 189, 82, .035), 0 6px 18px rgba(0, 0, 0, .35);
  backdrop-filter: blur(5px);
}

.arena-main-choice button {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 92px;
  padding: 8px 6px 9px !important;
  color: #ffecbd;
  text-align: center !important;
  white-space: normal !important;
  background: linear-gradient(145deg, rgba(38, 81, 67, .96), rgba(13, 39, 32, .98));
  border: 1px solid rgba(248, 213, 132, .38);
  border-radius: 15px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), inset 0 -10px 20px rgba(0, 8, 5, .14), 0 4px 11px rgba(0, 0, 0, .31);
  font-size: 11px !important;
  font-weight: 900;
  line-height: 1.15;
}

.arena-main-choice button::before {
  content: '';
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .42));
}

.arena-main-choice button:nth-child(1)::before { background-image: url('/assets/profile-stat-level-v20261025-1.webp'); }
.arena-main-choice button:nth-child(2)::before { background-image: url('/assets/profile-stat-next-level-v20261025-1.webp'); }
.arena-main-choice button:nth-child(3)::before { background-image: url('/assets/profile-stat-next-level-v20261025-1.webp'); }
.arena-main-choice button:nth-child(4)::before { background-image: url('/assets/profile-stat-skill-v20261025-1.webp'); }
.arena-main-choice button:nth-child(5)::before { background-image: url('/assets/achievement-skrall-slayer-v20261015-8.png'); }
.arena-main-choice button:nth-child(6)::before { background-image: url('/assets/hotbar-search-v20261021-1.png'); }
.arena-main-choice button:nth-child(7) { grid-column: 1 / -1; min-height: 74px; flex-direction: row; }
.arena-main-choice button:nth-child(7)::before { background-image: url('/assets/profile-nav-statistics-v20261025-1.webp'); }

.arena-main-choice button:active:not(:disabled),
.arena-opponent-actions button:active:not(:disabled),
.arena-zone-buttons button:active:not(:disabled),
.arena-history-detail-button:active:not(:disabled) {
  transform: translateY(1px) scale(.985);
}

.arena-main-choice button:disabled {
  opacity: .43;
  filter: saturate(.55);
}

.arena-section,
.arena-fight-panel,
.arena-history-wrap {
  margin-top: 0;
}

.arena-search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin: 0 0 8px;
  padding: 7px;
  background: rgba(8, 27, 22, .78);
  border: 1px solid rgba(244, 207, 120, .3);
  border-radius: 15px;
}

.arena-search-box input {
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
  padding: 0 11px;
  color: #fff0cc;
  background: rgba(5, 18, 14, .82);
  border: 1px solid rgba(245, 211, 130, .34);
  border-radius: 11px;
  outline: none;
}

.arena-search-box button,
.arena-skrall-switches button,
.arena-pagination button {
  color: #ffe8ab;
  background: linear-gradient(180deg, rgba(72, 101, 70, .96), rgba(24, 57, 43, .98));
  border: 1px solid rgba(246, 212, 130, .42);
  border-radius: 11px;
  font-weight: 900;
}

.arena-search-box button {
  min-width: 84px;
  padding: 0 11px;
}

.arena-opponent-card,
.arena-history-card,
.arena-log-row,
.arena-fighter-card {
  box-sizing: border-box;
  color: #fff1d2;
  background: linear-gradient(140deg, rgba(18, 49, 41, .95), rgba(8, 27, 22, .96));
  border: 1px solid rgba(245, 210, 126, .34);
  border-radius: 17px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .075), 0 6px 18px rgba(0, 0, 0, .37);
  backdrop-filter: blur(5px);
}

.arena-opponent-card {
  padding: 9px;
}

.arena-versus-row {
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 6px;
  margin: 0 0 8px;
  padding: 6px 8px;
  background: rgba(6, 22, 18, .66);
  border: 1px solid rgba(244, 208, 122, .22);
  border-radius: 12px;
}

.arena-player-name {
  color: #ffe6a2;
  font-size: 12px;
}

.arena-vs {
  display: grid;
  place-items: center;
  width: 38px;
  height: 24px;
  color: #ffd56e;
  background: rgba(130, 65, 29, .52);
  border: 1px solid rgba(255, 216, 126, .35);
  border-radius: 999px;
  font-size: 11px;
}

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

.arena-compare-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 8px;
  text-align: center;
  background: linear-gradient(145deg, rgba(36, 76, 63, .72), rgba(10, 32, 26, .84));
  border: 1px solid rgba(244, 211, 130, .28);
  border-radius: 14px;
}

.arena-compare-card:nth-child(2) {
  background: linear-gradient(145deg, rgba(85, 44, 35, .74), rgba(39, 20, 17, .86));
  border-color: rgba(234, 140, 113, .34);
}

.arena-compare-label {
  color: rgba(255, 239, 204, .72);
  opacity: 1;
  font-size: 10px;
}

.arena-avatar-wrap {
  width: clamp(66px, 19vw, 86px);
  height: clamp(66px, 19vw, 86px);
  margin: 6px auto;
  overflow: hidden;
  background: radial-gradient(circle, rgba(247, 217, 145, .12), rgba(4, 16, 13, .7));
  border: 2px solid rgba(246, 211, 128, .52);
  border-radius: 19px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .36), 0 4px 10px rgba(0, 0, 0, .34);
}

.arena-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arena-compare-name {
  min-height: 18px;
  color: #fff0c3;
  font-size: 12px;
  font-weight: 950;
}

.arena-compare-name-skrall {
  min-height: 29px;
}

.arena-compare-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 5px 0;
}

.arena-compare-meta span {
  min-width: 0;
  padding: 3px 2px;
  overflow: hidden;
  color: #edd9ae;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 226, 160, .07);
  border: 1px solid rgba(255, 221, 143, .11);
  border-radius: 7px;
  font-size: 8px;
}

.arena-compare-stats,
.arena-opponent-card .arena-compare-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  margin-top: auto;
  padding-top: 6px;
}

.arena-compare-stats div,
.arena-opponent-card .arena-compare-stats div {
  display: grid !important;
  grid-template-columns: 21px minmax(0, 1fr) auto;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 5px !important;
  min-width: 0;
  min-height: 27px;
  padding: 3px 5px !important;
  text-align: left !important;
  background: rgba(2, 13, 10, .34);
  border: 1px solid rgba(250, 221, 148, .1);
  border-radius: 8px;
}

.arena-compare-stats div::after {
  content: attr(title);
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  color: rgba(249, 235, 204, .72);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 800;
}

.arena-compare-stats div img,
.arena-opponent-card .arena-compare-stats div img {
  grid-column: 1;
  grid-row: 1;
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
}

.arena-compare-stats div b,
.arena-opponent-card .arena-compare-stats div b {
  grid-column: 3;
  grid-row: 1;
  color: #ffdfa0;
  font-size: 10px !important;
}

.arena-bonus-green,
.arena-bonus-red {
  margin-left: 2px;
  font-style: normal;
}

.arena-bonus-green { color: #6fe28c; }
.arena-bonus-red { color: #ff816d; }

.arena-compare-loading {
  min-height: 280px;
  place-items: center;
}

.arena-opponent-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.arena-opponent-actions button,
.arena-main-action,
.arena-history-detail-button {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 42px;
  padding: 7px 8px;
  color: #ffe9b1;
  background: linear-gradient(180deg, rgba(72, 103, 74, .98), rgba(23, 57, 43, .98));
  border: 1px solid rgba(247, 214, 133, .45);
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 3px 9px rgba(0, 0, 0, .31);
  font-size: 11px;
  font-weight: 950;
}

.arena-opponent-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.arena-opponent-actions button::before {
  content: '';
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  background: center / contain no-repeat;
}

.arena-opponent-actions button:first-child {
  background: linear-gradient(180deg, rgba(155, 76, 38, .98), rgba(82, 34, 20, .98));
}

.arena-opponent-actions button:first-child::before { background-image: url('/assets/profile-stat-skill-v20261025-1.webp'); }
.arena-opponent-actions button:last-child::before { background-image: url('/assets/profile-nav-back-v20261025-1.webp'); }

.arena-skrall-desc-box {
  display: grid;
  gap: 3px;
  margin: 0 0 8px;
  padding: 9px 11px;
  text-align: center;
  background: linear-gradient(120deg, rgba(69, 49, 29, .9), rgba(18, 38, 31, .92));
  border: 1px solid rgba(244, 207, 120, .33);
  border-radius: 14px;
}

.arena-skrall-desc-box b { color: #ffdc86; font-size: 14px; }
.arena-skrall-desc-box span { color: rgba(255, 240, 205, .8); opacity: 1; font-size: 10px; }

.arena-skrall-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.arena-skrall-switches button {
  min-height: 42px;
  padding: 7px 6px;
  font-size: 10px;
}

/* Live battle */
.arena-page.arena-battle-active {
  box-sizing: border-box;
  height: var(--cf-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

.arena-battle-active .arena-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.arena-battle-active .arena-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding-top: 6px !important;
  padding-bottom: calc(5px + var(--cf-safe-bottom, 0px)) !important;
  overflow: hidden;
}

.arena-battle-active .arena-top {
  flex: 0 0 auto;
  margin-bottom: 5px;
}

.arena-battle-active .arena-top .arena-back-button,
.arena-battle-active .arena-top .arena-title-box {
  min-height: 40px;
}

.arena-battle-active .arena-title-box { padding-block: 4px; }
.arena-battle-active .arena-title-box::before { width: 29px; height: 29px; }
.arena-battle-active .arena-title { font-size: 17px; }
.arena-battle-active .arena-subtitle { font-size: 8px; }

.arena-battle-active .arena-fight-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.arena-fight-title {
  flex: 0 0 auto;
  margin: 0 0 6px;
  color: #ffe29a;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .62);
  font-size: 18px;
  font-weight: 950;
}

.arena-fighters-row,
.arena-battle-active .arena-fighters-row {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.arena-fighter-card {
  min-width: 0;
  padding: 7px 8px;
}

.arena-fighter-card:nth-child(2) {
  background: linear-gradient(140deg, rgba(83, 42, 34, .94), rgba(38, 19, 16, .96));
  border-color: rgba(235, 137, 111, .4);
}

.arena-fighter-title {
  color: rgba(255, 238, 199, .72);
  text-align: center;
  font-size: 10px;
  font-weight: 900;
}

.arena-fighter-avatar-wrap {
  position: relative;
  width: clamp(94px, 24vw, 118px);
  height: clamp(94px, 24vw, 118px);
  margin: 5px auto 7px;
}

.arena-fighter-avatar {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid rgba(247, 214, 132, .58);
  border-radius: 19px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .34), 0 5px 11px rgba(0, 0, 0, .38);
}

.arena-fighter-pet-avatar {
  position: absolute;
  right: -7px;
  bottom: -7px;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  object-fit: cover;
  background: #153a30;
  border: 3px solid #f3cc72;
  border-radius: 50%;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .55);
}

.arena-fighter-name {
  min-width: 0;
  margin: 2px 0 0;
  overflow: hidden;
  color: #fff0c5;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 950;
}

.arena-battle-active .arena-fighter-meta,
.arena-battle-active .arena-fight-stats-one-col {
  display: none !important;
}

.arena-hp-line,
.arena-battle-active .arena-fighter-card .arena-hp-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  margin: 5px 0 0;
}

.arena-hp-bar {
  height: 10px;
  overflow: hidden;
  background: rgba(2, 11, 9, .62);
  border: 1px solid rgba(255, 229, 169, .15);
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .52);
}

.arena-hp-bar div {
  height: 100%;
  background: linear-gradient(90deg, #4fac6b, #8bd56f);
  box-shadow: 0 0 8px rgba(105, 218, 128, .34);
}

.arena-fighter-card:nth-child(2) .arena-hp-bar div {
  background: linear-gradient(90deg, #a63c32, #e57b59);
  box-shadow: 0 0 8px rgba(224, 90, 69, .32);
}

.arena-hp-line span,
.arena-battle-active .arena-fighter-card .arena-hp-line span {
  min-width: 50px;
  color: #fbe9bf;
  text-align: right;
  font-size: 9px;
  font-weight: 900;
}

.arena-battle-active .arena-round-controls {
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 6px;
}

.arena-zone-box {
  padding: 7px;
  background: linear-gradient(125deg, rgba(21, 55, 46, .93), rgba(8, 28, 23, .95));
  border: 1px solid rgba(245, 210, 126, .32);
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 4px 12px rgba(0, 0, 0, .31);
}

.arena-zone-title {
  margin: 0 0 6px;
  color: #f8e6bb;
  text-align: center;
  font-size: 10px;
  font-weight: 850;
}

.arena-zone-title b { color: #ffd66f; }

.arena-zone-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.arena-zone-buttons button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 58px;
  padding: 4px 3px;
  color: #fce8b8;
  background: linear-gradient(180deg, rgba(55, 88, 70, .96), rgba(19, 50, 39, .98));
  border: 1px solid rgba(246, 213, 132, .36);
  border-radius: 12px;
  font-size: 10px;
  font-weight: 950;
}

.arena-zone-buttons button::before {
  content: '';
  width: 36px;
  height: 36px;
  background: center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .43));
}

.arena-zone-buttons button:nth-child(1)::before { background-image: url('/assets/shop-category-helmet-v20261024-1.webp'); }
.arena-zone-buttons button:nth-child(2)::before { background-image: url('/assets/shop-category-armor-v20261024-1.webp'); }
.arena-zone-buttons button:nth-child(3)::before { background-image: url('/assets/shop-category-pants-v20261024-1.webp'); }

.arena-zone-buttons button.active {
  color: #fff3ca;
  background: linear-gradient(180deg, rgba(178, 91, 38, .98), rgba(89, 38, 20, .99));
  border-color: rgba(255, 224, 149, .75);
  box-shadow: 0 0 12px rgba(243, 164, 61, .18);
}

.arena-battle-active .arena-log-list {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  margin: 6px 0 0;
  overflow: hidden;
}

.arena-battle-active .arena-log-row {
  max-height: none;
  min-width: 0;
  padding: 7px 9px;
  overflow: hidden;
  font-size: 9px;
}

.arena-battle-active .arena-log-row:not(:first-child) { display: none; }
.arena-battle-active .arena-log-title { margin: 0 0 2px; font-size: 9px; }
.arena-battle-active .arena-log-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: rgba(255, 239, 205, .82);
  line-height: 1.25;
}

/* Results, tabs and detailed battle data */
.arena-result {
  margin: 0 0 8px;
  padding: 10px;
  text-align: center;
  background: linear-gradient(140deg, rgba(17, 49, 40, .96), rgba(8, 27, 22, .97));
  border: 1px solid rgba(245, 210, 126, .34);
  border-radius: 16px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 5px 15px rgba(0, 0, 0, .36);
}

.arena-result.win { background: linear-gradient(140deg, rgba(25, 83, 54, .93), rgba(9, 40, 29, .96)); border-color: rgba(105, 218, 132, .43); }
.arena-result.lose { background: linear-gradient(140deg, rgba(104, 39, 32, .93), rgba(47, 20, 17, .96)); border-color: rgba(239, 116, 91, .43); }
.arena-result.draw { background: linear-gradient(140deg, rgba(84, 65, 32, .93), rgba(42, 31, 16, .96)); }

.arena-summary-title { margin: 0 0 3px; font-size: 17px; }
.arena-result.win .arena-summary-title { color: #7de49a; }
.arena-result.lose .arena-summary-title { color: #ff8b76; }
.arena-summary-reason { margin: 0 0 7px; color: rgba(255, 239, 204, .78); font-size: 10px; }

.arena-summary-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 7px;
  text-align: left;
  background: rgba(3, 15, 12, .28);
  border: 1px solid rgba(255, 224, 150, .11);
  border-radius: 10px;
  font-size: 10px;
}

.arena-summary-section > b {
  flex: 1 0 100%;
  color: #ffdfa0;
  font-size: 10px;
}

.arena-summary-section > span:not(.arena-reward-chip) {
  flex: 1 1 calc(50% - 5px);
  box-sizing: border-box;
  min-width: 0;
  padding: 4px 6px;
  color: #fff0ce;
  background: rgba(250, 225, 164, .07);
  border-radius: 7px;
  font-weight: 800;
}

.arena-damage-breakdown .pet-damage {
  color: #aee8a8 !important;
  background: rgba(92, 170, 94, .12) !important;
}

.arena-reward-chip {
  display: inline-grid;
  grid-template-columns: 25px auto auto;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 2px 7px 2px 3px;
  color: #fff0c9;
  background: rgba(251, 224, 157, .08);
  border: 1px solid rgba(253, 225, 158, .12);
  border-radius: 999px;
}

.arena-reward-chip img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .38));
}

/* Keep native resource artwork from stretching the battle result card. */
.arena-page .arena-result .arena-summary-section > .arena-reward-chip {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
}

.arena-page .arena-result .arena-summary-section > .arena-reward-chip > img {
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

.arena-reward-chip em { color: rgba(255, 242, 211, .75); font-size: 9px; font-style: normal; }
.arena-reward-chip b { color: #fff0ba; font-size: 11px; }
.arena-reward-chip.lost { border-color: rgba(235, 122, 101, .2); background: rgba(128, 43, 32, .15); }

.arena-summary-actions,
.arena-detail-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.arena-summary-actions button,
.arena-detail-tabs button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 39px;
  margin: 0;
  padding: 5px 7px;
  color: #f6e2b5;
  text-align: left;
  white-space: normal;
  background: linear-gradient(180deg, rgba(48, 79, 64, .96), rgba(17, 46, 36, .98));
  border: 1px solid rgba(244, 210, 128, .33);
  border-radius: 11px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
}

.arena-summary-actions button::before,
.arena-detail-tabs button::before {
  content: '';
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.arena-summary-actions .arena-main-action::before,
.arena-detail-tabs .arena-main-action::before { background-image: url('/assets/profile-nav-back-v20261025-1.webp'); }
.arena-summary-actions .arena-back-history::before { transform: rotate(180deg); }
.arena-summary-actions .arena-history-detail-button:nth-of-type(2)::before,
.arena-detail-tabs button:nth-last-child(4)::before { background-image: url('/assets/profile-nav-statistics-v20261025-1.webp'); }
.arena-summary-actions .arena-history-detail-button:nth-of-type(3)::before,
.arena-detail-tabs button:nth-last-child(3)::before { background-image: url('/assets/profile-nav-inventory-v20261025-1.webp'); }
.arena-summary-actions .arena-history-detail-button:nth-of-type(4)::before,
.arena-detail-tabs button:nth-last-child(2)::before { background-image: url('/assets/profile-nav-training-v20261025-1.webp'); }
.arena-summary-actions .arena-history-detail-button:nth-of-type(5)::before,
.arena-detail-tabs button:nth-last-child(1)::before { background-image: url('/assets/profile-nav-tasks-v20261025-1.webp'); }

.arena-summary-actions button.active,
.arena-detail-tabs button.active {
  color: #fff1c4;
  background: linear-gradient(180deg, rgba(167, 82, 35, .98), rgba(82, 34, 19, .99));
  border-color: rgba(255, 223, 145, .64);
}

.arena-after-battle-panel {
  box-sizing: border-box;
  min-height: 0;
  margin-top: 8px;
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(5, 21, 17, .72);
  border: 1px solid rgba(244, 209, 124, .28);
  border-radius: 14px;
  scrollbar-width: none;
}

.arena-battle-active .arena-result {
  flex: 0 0 auto;
  overflow: visible;
}

.arena-battle-active .arena-after-battle-panel {
  flex: 1 1 auto;
}

.arena-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px;
}

.arena-detail-side {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 7px;
  background: linear-gradient(140deg, rgba(23, 59, 49, .86), rgba(7, 27, 22, .9));
  border: 1px solid rgba(245, 210, 126, .23);
  border-radius: 13px;
}

.arena-detail-side:nth-child(2) {
  background: linear-gradient(140deg, rgba(76, 39, 32, .84), rgba(34, 18, 15, .91));
  border-color: rgba(231, 131, 108, .25);
}

.arena-detail-fighter {
  box-sizing: border-box;
  min-width: 0;
  padding: 8px;
  background: rgba(3, 16, 13, .32);
  border: 1px solid rgba(247, 216, 140, .16);
  border-radius: 11px;
}

.arena-detail-fighter-title {
  margin: 0 0 5px;
  color: #ffdc88;
  text-align: center;
  font-size: 11px;
  font-weight: 950;
}

.arena-detail-name { color: #fff0c4; text-align: center; font-size: 12px; font-weight: 950; }
.arena-detail-meta { margin: 2px 0 5px; color: rgba(255, 238, 201, .66); text-align: center; font-size: 9px; }

.arena-detail-stat-line {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  margin-top: 4px;
  padding: 3px 7px 3px 3px;
  background: rgba(250, 225, 162, .065);
  border: 1px solid rgba(251, 220, 145, .1);
  border-radius: 9px;
}

.arena-detail-stat-line img { width: 29px; height: 29px; object-fit: contain; }
.arena-detail-stat-line > span { min-width: 0; color: rgba(255, 241, 209, .78); font-size: 10px; }
.arena-detail-stat-line b { color: #ffe3a3; font-size: 11px; }

.arena-detail-equipment-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px;
}

.arena-detail-item,
.arena-detail-equipment-list.inventory-mode-expanded .arena-detail-item {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 78px;
  padding: 6px;
  background: linear-gradient(110deg, rgba(49, 75, 59, .8), rgba(9, 28, 22, .82));
  border: 1px solid rgba(247, 214, 133, .2);
  border-radius: 11px;
}

.arena-detail-item-icon,
.arena-detail-equipment-list.inventory-mode-expanded .arena-detail-item-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: radial-gradient(circle, rgba(251, 225, 158, .14), rgba(3, 14, 11, .48));
  border: 1px solid rgba(247, 214, 132, .27);
  border-radius: 11px;
}

.arena-detail-item-icon img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .43)); }
.arena-detail-item-main { display: grid; gap: 4px; min-width: 0; }
.arena-detail-item-main > b { color: #ffe7aa; font-size: 11px; line-height: 1.2; }

.arena-detail-item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.arena-detail-item-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 25px;
  padding: 2px 6px 2px 3px;
  background: rgba(2, 14, 11, .45);
  border: 1px solid rgba(246, 212, 132, .13);
  border-radius: 8px;
}

.arena-detail-item-stat img { width: 21px; height: 21px; object-fit: contain; }
.arena-detail-item-stat b { color: #ffe1a0; white-space: nowrap; font-size: 10px; }
.arena-forge-bonus { margin-left: 2px; color: #78e398; font-size: 9px; font-style: normal; }
.arena-detail-item-description { color: rgba(255, 240, 206, .75); font-size: 9px; line-height: 1.3; }

.arena-bonus-source {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding: 6px;
  background: rgba(3, 16, 13, .27);
  border: 1px solid rgba(246, 213, 134, .11);
  border-radius: 9px;
}

.arena-bonus-source > b { color: #ffda82; font-size: 10px; }
.arena-bonus-source-values { display: flex; flex-wrap: wrap; gap: 4px; }
.arena-bonus-source-values > span { min-height: 26px; padding: 2px 6px 2px 3px; background: rgba(250, 226, 164, .07); border-radius: 8px; }
.arena-bonus-source-values img { width: 21px; height: 21px; }
.arena-bonus-source-values em { color: #7de29a; font-size: 9px; }
.arena-bonus-source-values small { color: rgba(255, 239, 203, .65); font-size: 8px; }
.arena-bonus-note { margin-top: 6px; padding: 6px; color: #bde9b7; background: rgba(69, 133, 77, .13); border-radius: 8px; }

.arena-log-list {
  display: grid;
  gap: 6px;
  margin-top: 0;
}

.arena-log-row {
  padding: 8px 9px;
  font-size: 10px;
}

.arena-log-title { margin: 0 0 4px; color: #ffdc82; font-size: 10px; font-weight: 950; }
.arena-log-text { margin: 0; color: rgba(255, 241, 210, .8); line-height: 1.35; }
.arena-log-text > div { padding: 2px 0; }

.arena-ring-log-line {
  position: relative;
  margin: 3px 0;
  padding: 6px 7px 6px 36px !important;
  color: #ffe5a0;
  background: linear-gradient(100deg, rgba(111, 73, 26, .42), rgba(21, 51, 41, .3));
  border: 1px solid rgba(247, 198, 89, .27);
  border-radius: 9px;
  font-weight: 850;
}

.arena-ring-log-line::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  background: url('/assets/shop-category-ring-v20261024-1.webp') center / contain no-repeat;
}

/* History */
.arena-subtabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 7px;
  padding: 5px;
  overflow: visible;
  background: rgba(7, 25, 20, .76);
  border: 1px solid rgba(244, 207, 120, .26);
  border-radius: 14px;
}

.arena-subtabs button {
  min-width: 0;
  min-height: 40px;
  padding: 6px;
  color: #ead7ad;
  white-space: normal;
  background: linear-gradient(180deg, rgba(45, 75, 61, .88), rgba(15, 43, 34, .94));
  border: 1px solid rgba(246, 212, 131, .25);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
}

.arena-subtabs button.active {
  color: #fff0c0;
  background: linear-gradient(180deg, rgba(159, 79, 35, .97), rgba(78, 33, 19, .98));
  border-color: rgba(255, 221, 143, .57);
}

.arena-history-count { margin: 6px 0; color: rgba(255, 238, 200, .7); text-align: center; font-size: 10px; }
.arena-history-list { display: grid; gap: 7px; margin-top: 0; }

.arena-history-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 5px 8px;
  padding: 9px 9px 9px 48px;
  overflow: hidden;
}

.arena-history-card::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 10px;
  width: 33px;
  height: 33px;
  background: center / contain no-repeat;
}

.arena-history-card.win::before { background-image: url('/assets/profile-stat-victories-v20261025-1.webp'); }
.arena-history-card.lose::before { background-image: url('/assets/profile-stat-defeats-v20261025-1.webp'); }
.arena-history-card.lose { background: linear-gradient(140deg, rgba(76, 38, 31, .93), rgba(34, 18, 15, .96)); border-color: rgba(232, 129, 105, .3); }

.arena-history-top {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 7px;
  margin: 0;
}

.arena-history-top b { color: #ffe29a; font-size: 11px; }
.arena-history-top span { color: rgba(255, 239, 203, .58); opacity: 1; font-size: 8px; }
.arena-history-opponent { min-width: 0; overflow-wrap: anywhere; color: #fff0ca; font-size: 11px; font-weight: 900; }

.arena-history-rewards {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  opacity: 1;
}

.arena-history-rewards span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px 2px 2px;
  color: rgba(255, 240, 207, .78);
  background: rgba(249, 224, 162, .07);
  border: 1px solid rgba(248, 217, 143, .09);
  border-radius: 999px;
  font-size: 8px;
}

.arena-history-rewards img { width: 20px; height: 20px; object-fit: contain; }
.arena-history-rewards b { color: #ffe0a0; }
.arena-history-card > .arena-history-detail-button { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; min-height: 42px; margin: 0; }

.arena-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 9px;
}

.arena-pagination button { min-width: 33px; height: 33px; padding: 0 7px; }
.arena-pagination button.active { color: #fff0bd; background: linear-gradient(180deg, #a95626, #592618); }

.arena-detail-overlay {
  z-index: 999;
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  padding: 10px;
  background: rgba(0, 8, 6, .82);
  backdrop-filter: blur(5px);
}

.arena-detail-modal,
.arena-detail-inline {
  box-sizing: border-box;
  width: min(100%, var(--game-shell-width, 480px));
  max-height: 90dvh;
  padding: 9px;
  overflow-y: auto;
  color: #fff1d1;
  background: linear-gradient(150deg, rgba(20, 54, 44, .98), rgba(6, 24, 19, .99));
  border: 1px solid rgba(247, 211, 128, .4);
  border-radius: 17px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .58);
  scrollbar-width: none;
}

.arena-detail-inline { max-height: none; }

.arena-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.arena-detail-top b { color: #ffe098; font-size: 15px; }
.arena-detail-top button { width: 34px; height: 34px; color: #ffe6ad; background: #6b3024; border: 1px solid rgba(248, 194, 126, .42); border-radius: 10px; }

.arena-level-row {
  display: flex;
  gap: 5px;
  margin: 0 0 7px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.arena-level-row::-webkit-scrollbar { display: none; }
.arena-level-row button { min-width: 38px; padding: 7px; }

@media (min-width: 421px) {
  .arena-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .arena-main-choice button { min-height: 96px; }
  .arena-history-card { grid-template-columns: minmax(0, 1fr) 104px; }
}

@media (max-width: 350px) {
  .arena-content { padding-inline: 7px !important; }
  .arena-top { grid-template-columns: 66px minmax(0, 1fr); gap: 6px; }
  .arena-title-box { padding-left: 43px; }
  .arena-title-box::before { left: 8px; width: 29px; height: 29px; }
  .arena-subtitle { display: none; }
  .arena-main-choice button { min-height: 84px; font-size: 10px !important; }
  .arena-main-choice button::before { width: 42px; height: 42px; flex-basis: 42px; }
  .arena-status-grid > div { padding-left: 42px; }
  .arena-status-grid > div::before { left: 6px; width: 30px; height: 30px; }
  .arena-compare-card { padding: 6px; }
  .arena-compare-stats div::after { font-size: 7px; }
  .arena-history-card { grid-template-columns: minmax(0, 1fr) 78px; }
}

@media (max-height: 720px) {
  .arena-battle-active .arena-top { margin-bottom: 3px; }
  .arena-battle-active .arena-top .arena-title-box { display: none; }
  .arena-battle-active .arena-top { grid-template-columns: 72px; }
  .arena-battle-active .arena-back-button { min-height: 34px; }
  .arena-battle-active .arena-fight-title { margin-bottom: 3px; font-size: 15px; }
  .arena-battle-active .arena-fighter-card { padding: 4px 6px; }
  .arena-battle-active .arena-fighter-avatar-wrap { width: 90px; height: 90px; margin-block: 3px 5px; }
  .arena-battle-active .arena-fighter-pet-avatar { width: 39px; height: 39px; }
  .arena-battle-active .arena-fighter-name { font-size: 11px; }
  .arena-battle-active .arena-zone-buttons button { min-height: 50px; }
  .arena-battle-active .arena-zone-buttons button::before { width: 30px; height: 30px; }
  .arena-battle-active .arena-log-text { -webkit-line-clamp: 2; line-clamp: 2; }
}

@media (max-height: 560px) {
  .arena-battle-active .arena-log-list { display: none; }
  .arena-battle-active .arena-fighter-avatar-wrap { width: 68px; height: 68px; }
  .arena-battle-active .arena-fighter-pet-avatar { width: 31px; height: 31px; border-width: 2px; }
  .arena-battle-active .arena-hp-line { margin-top: 3px; }
  .arena-battle-active .arena-zone-buttons button { min-height: 44px; flex-direction: row; }
  .arena-battle-active .arena-zone-buttons button::before { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .arena-main-choice button,
  .arena-opponent-actions button,
  .arena-zone-buttons button,
  .arena-history-detail-button { transition: none !important; }
}

/* Arena forged theme — 2026.10.28 */
.arena-page {
  --arena-gold: #d7a64b;
  --arena-gold-soft: #f2d891;
  --arena-iron: #222a30;
  --arena-iron-deep: #11171b;
  --arena-wood: #5a341d;
  --arena-wood-deep: #2c1911;
  --arena-blue-side: #1c344b;
  --arena-red-side: #55251f;
  --arena-parchment: #f1dfb5;
  --arena-panel: rgba(29, 25, 22, .95);
  --arena-panel-soft: rgba(45, 37, 30, .94);
  color: var(--arena-parchment);
  background: #140d09 !important;
}

.arena-page::before {
  background:
    linear-gradient(180deg, rgba(28, 17, 10, .12), rgba(25, 16, 11, .38) 55%, rgba(12, 8, 6, .78)),
    url('/assets/arena-background-v20261021-1.webp') center top / cover no-repeat;
}

.arena-page::after {
  background:
    linear-gradient(90deg, rgba(14, 8, 5, .5), transparent 13%, transparent 87%, rgba(14, 8, 5, .5)),
    radial-gradient(ellipse at 50% 16%, rgba(230, 168, 67, .13), transparent 52%);
}

.arena-back-button {
  color: #f4dc9d;
  background: linear-gradient(180deg, rgba(111, 65, 34, .98), rgba(52, 29, 19, .99));
  border-color: rgba(225, 174, 80, .64);
  box-shadow: inset 0 2px rgba(255, 226, 155, .12), inset 0 -6px 12px rgba(28, 12, 6, .25), 0 4px 12px rgba(0, 0, 0, .42);
}

.arena-title-box {
  background:
    linear-gradient(90deg, rgba(76, 45, 26, .97), rgba(35, 29, 26, .97) 55%, rgba(62, 33, 22, .97));
  border-color: rgba(218, 163, 70, .62);
  box-shadow: inset 0 1px rgba(255, 229, 166, .12), inset 0 -8px 18px rgba(12, 7, 5, .2), 0 4px 13px rgba(0, 0, 0, .42);
}

.arena-title { color: #f3d482; }
.arena-subtitle { color: rgba(244, 224, 184, .75); }

.arena-status-grid > div {
  background:
    linear-gradient(140deg, rgba(45, 53, 58, .97), rgba(22, 27, 31, .98));
  border-color: rgba(202, 151, 69, .48);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -8px 15px rgba(0, 0, 0, .16), 0 3px 10px rgba(0, 0, 0, .36);
}

.arena-status-grid > div:nth-child(2n) {
  background: linear-gradient(140deg, rgba(75, 47, 30, .97), rgba(35, 24, 19, .98));
}

.arena-status-grid span { color: rgba(238, 220, 186, .76); }
.arena-status-grid b { color: #f6dc9a; }

.arena-shield-box {
  color: #f0ddb5;
  background: linear-gradient(135deg, rgba(42, 49, 55, .96), rgba(22, 26, 30, .98));
  border-color: rgba(204, 154, 72, .45);
}

.arena-message {
  color: #f1c9b8;
  background: linear-gradient(135deg, rgba(94, 38, 31, .96), rgba(43, 22, 19, .98));
  border-color: rgba(198, 101, 76, .52);
}

.arena-main-choice,
.arena-search-box {
  background: linear-gradient(145deg, rgba(41, 31, 24, .9), rgba(21, 18, 17, .94));
  border-color: rgba(205, 151, 67, .48);
  box-shadow: inset 0 0 24px rgba(222, 160, 61, .035), 0 6px 18px rgba(0, 0, 0, .4);
}

.arena-main-choice button {
  min-height: 104px;
  color: #f3ddb0;
  background:
    linear-gradient(145deg, rgba(62, 69, 73, .98), rgba(27, 31, 34, .99));
  border-color: rgba(209, 158, 76, .52);
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), inset 0 -12px 22px rgba(0, 0, 0, .2), 0 4px 11px rgba(0, 0, 0, .38);
}

.arena-main-choice button:nth-child(2n) {
  background: linear-gradient(145deg, rgba(92, 54, 30, .98), rgba(42, 26, 19, .99));
}

.arena-main-choice button::before {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}

.arena-main-choice button:nth-child(7) {
  min-height: 80px;
  background: linear-gradient(145deg, rgba(61, 47, 36, .98), rgba(29, 24, 21, .99));
}

.arena-search-box input {
  color: #f2dfbb;
  background: rgba(17, 18, 19, .9);
  border-color: rgba(208, 157, 74, .48);
}

.arena-search-box button,
.arena-skrall-switches button,
.arena-pagination button {
  color: #f2d791;
  background: linear-gradient(180deg, rgba(102, 62, 34, .98), rgba(48, 29, 20, .99));
  border-color: rgba(216, 165, 78, .55);
}

.arena-opponent-card,
.arena-history-card,
.arena-log-row,
.arena-fighter-card {
  color: #f1dfb9;
  background: linear-gradient(145deg, rgba(40, 46, 50, .97), rgba(20, 24, 27, .98));
  border-color: rgba(203, 151, 69, .48);
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), inset 0 -10px 20px rgba(0, 0, 0, .15), 0 6px 18px rgba(0, 0, 0, .42);
}

.arena-versus-row {
  background: linear-gradient(90deg, rgba(26, 50, 73, .84), rgba(40, 29, 23, .9) 50%, rgba(83, 34, 29, .84));
  border-color: rgba(205, 153, 70, .44);
}

.arena-player-name { color: #f2d68e; }

.arena-vs {
  color: #f4d583;
  background: linear-gradient(180deg, #79451f, #3f2417);
  border-color: rgba(231, 178, 84, .56);
}

.arena-compare-card {
  background:
    linear-gradient(155deg, rgba(33, 59, 84, .94), rgba(16, 31, 44, .98));
  border-color: rgba(109, 151, 185, .56);
}

.arena-compare-card:nth-child(2) {
  background: linear-gradient(155deg, rgba(94, 39, 33, .94), rgba(45, 21, 20, .98));
  border-color: rgba(186, 92, 73, .58);
}

.arena-compare-label { order: 1; color: rgba(242, 222, 184, .74); }
.arena-compare-name {
  order: 2;
  margin-top: 4px;
  color: #f5ddb0;
  font-size: 14px;
}
.arena-avatar-wrap {
  order: 3;
  width: clamp(106px, 25vw, 138px);
  height: clamp(106px, 25vw, 138px);
  margin: 7px auto 8px;
  background: radial-gradient(circle at 50% 34%, rgba(211, 160, 73, .2), rgba(18, 18, 19, .86));
  border: 3px solid #c8913e;
  border-radius: 24px;
  box-shadow: inset 0 0 0 2px rgba(255, 232, 168, .12), inset 0 0 18px rgba(0, 0, 0, .42), 0 5px 12px rgba(0, 0, 0, .4);
}
.arena-compare-meta { order: 4; }
.arena-compare-stats { order: 6; }

.arena-compare-meta span {
  color: #dfcba5;
  background: rgba(231, 195, 126, .08);
  border-color: rgba(226, 180, 95, .18);
}

.arena-compare-stats div,
.arena-opponent-card .arena-compare-stats div {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  min-height: 34px;
  background: rgba(8, 10, 12, .38);
  border-color: rgba(224, 176, 89, .15);
}

.arena-compare-stats div img,
.arena-opponent-card .arena-compare-stats div img {
  width: 25px !important;
  height: 25px !important;
}

.arena-compare-stats div::after { color: rgba(239, 222, 189, .78); font-size: 9px; }
.arena-compare-stats div b,
.arena-opponent-card .arena-compare-stats div b { color: #f2d188; font-size: 11px !important; }

.arena-opponent-actions button,
.arena-main-action,
.arena-history-detail-button {
  min-height: 48px;
  color: #f2dba6;
  background: linear-gradient(180deg, rgba(61, 70, 76, .98), rgba(29, 34, 38, .99));
  border-color: rgba(208, 157, 74, .58);
}

.arena-opponent-actions button:first-child {
  background: linear-gradient(180deg, rgba(143, 55, 35, .98), rgba(73, 29, 22, .99));
}

.arena-opponent-actions button:last-child {
  background: linear-gradient(180deg, rgba(43, 76, 103, .98), rgba(24, 44, 61, .99));
}

.arena-opponent-actions button::before {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.arena-skrall-desc-box {
  background: linear-gradient(130deg, rgba(91, 53, 29, .96), rgba(33, 29, 27, .97));
  border-color: rgba(209, 157, 72, .5);
}

/* Battle composition: nickname, then large portrait, never beside it. */
.arena-fighter-card,
.arena-battle-active .arena-fighter-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 11px;
}

.arena-fighter-card:first-child {
  background: linear-gradient(155deg, rgba(31, 57, 81, .97), rgba(14, 29, 42, .99));
  border-color: rgba(101, 148, 184, .62);
}

.arena-fighter-card:nth-child(2) {
  background: linear-gradient(155deg, rgba(91, 37, 32, .97), rgba(43, 20, 19, .99));
  border-color: rgba(188, 88, 70, .62);
}

.arena-fighter-title {
  order: 1;
  color: rgba(239, 219, 180, .72);
  font-size: 10px;
}

.arena-fighter-name {
  order: 2;
  margin: 3px 0 0;
  color: #f5db9e;
  font-size: clamp(15px, 4vw, 19px);
}

.arena-fighter-avatar-wrap {
  order: 3;
  width: clamp(118px, 30vw, 152px);
  height: clamp(118px, 30vw, 152px);
  margin: 8px auto 10px;
}

.arena-fighter-avatar {
  background: radial-gradient(circle at 50% 34%, rgba(218, 166, 77, .17), rgba(16, 17, 18, .9));
  border: 3px solid #c9933f;
  border-radius: 24px;
  box-shadow: inset 0 0 0 2px rgba(255, 231, 165, .1), inset 0 0 18px rgba(0, 0, 0, .38), 0 6px 13px rgba(0, 0, 0, .44);
}

.arena-fighter-pet-avatar {
  right: -8px;
  bottom: -8px;
  z-index: 2;
  width: 52px;
  height: 52px;
  background: #2d2420;
  border: 3px solid #d0a14c;
}

.arena-battle-active .arena-fighter-card .arena-hp-line {
  order: 4;
  margin-top: 0;
}

.arena-hp-bar {
  height: 12px;
  background: rgba(8, 10, 12, .65);
  border-color: rgba(226, 177, 92, .22);
}

.arena-fighter-card:first-child .arena-hp-bar div {
  background: linear-gradient(90deg, #3975a4, #71b6df);
  box-shadow: 0 0 8px rgba(91, 164, 210, .35);
}

.arena-fighter-card:nth-child(2) .arena-hp-bar div {
  background: linear-gradient(90deg, #8b312c, #dd7259);
  box-shadow: 0 0 8px rgba(210, 92, 70, .32);
}

.arena-zone-box {
  padding: 9px;
  background: linear-gradient(145deg, rgba(66, 45, 31, .96), rgba(28, 24, 22, .98));
  border-color: rgba(208, 157, 73, .54);
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 4px 12px rgba(0, 0, 0, .38);
}

.arena-zone-title { color: #eeddb8; font-size: 11px; }
.arena-zone-title b { color: #f0c96f; }

.arena-zone-buttons { gap: 8px; }

.arena-zone-buttons button {
  min-height: 96px;
  gap: 5px;
  color: #f3ddb1;
  background: linear-gradient(160deg, rgba(59, 67, 72, .98), rgba(27, 31, 34, .99));
  border-color: rgba(210, 158, 74, .56);
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -12px 20px rgba(0, 0, 0, .18);
  font-size: 13px;
}

.arena-zone-buttons button::before {
  width: 56px;
  height: 56px;
}

.arena-zone-buttons button.active {
  color: #ffe7a7;
  background: linear-gradient(160deg, rgba(132, 61, 34, .99), rgba(67, 30, 22, .99));
  border-color: rgba(235, 181, 87, .82);
  box-shadow: 0 0 14px rgba(219, 150, 54, .2), inset 0 1px rgba(255, 255, 255, .1);
}

.arena-battle-active .arena-log-row,
.arena-log-row {
  background: linear-gradient(145deg, rgba(39, 43, 46, .96), rgba(18, 21, 23, .98));
  border-color: rgba(192, 141, 64, .38);
}

.arena-result {
  background: linear-gradient(145deg, rgba(43, 47, 50, .97), rgba(20, 23, 25, .99));
  border-color: rgba(207, 156, 73, .52);
}

.arena-result.win {
  background: linear-gradient(145deg, rgba(77, 48, 27, .97), rgba(31, 28, 25, .99));
  border-color: rgba(222, 171, 82, .65);
}

.arena-result.lose {
  background: linear-gradient(145deg, rgba(91, 35, 31, .97), rgba(41, 19, 18, .99));
  border-color: rgba(190, 83, 67, .62);
}

.arena-result.draw {
  background: linear-gradient(145deg, rgba(49, 57, 64, .97), rgba(23, 28, 32, .99));
}

.arena-result.win .arena-summary-title { color: #f0ca70; }
.arena-result.lose .arena-summary-title { color: #ec8b74; }

.arena-summary-section {
  background: rgba(12, 13, 14, .3);
  border-color: rgba(216, 166, 83, .16);
}

.arena-summary-section > span:not(.arena-reward-chip),
.arena-bonus-source-values > span {
  background: rgba(232, 198, 132, .07);
}

.arena-summary-actions button,
.arena-detail-tabs button {
  color: #f2dba7;
  background: linear-gradient(180deg, rgba(66, 73, 77, .98), rgba(29, 34, 37, .99));
  border-color: rgba(205, 154, 73, .52);
}

.arena-summary-actions button.active,
.arena-detail-tabs button.active {
  color: #f8e1a5;
  background: linear-gradient(180deg, rgba(132, 61, 34, .99), rgba(64, 30, 22, .99));
  border-color: rgba(230, 178, 88, .7);
}

.arena-after-battle-panel,
.arena-detail-fighter,
.arena-bonus-source,
.arena-detail-modal,
.arena-detail-inline {
  background: linear-gradient(145deg, rgba(40, 44, 47, .97), rgba(18, 21, 23, .99));
  border-color: rgba(201, 150, 69, .44);
}

.arena-detail-side:first-child,
.arena-detail-fighter:first-child {
  background: linear-gradient(155deg, rgba(29, 52, 74, .94), rgba(15, 28, 40, .98));
  border-color: rgba(99, 143, 177, .5);
}

.arena-detail-side:nth-child(2),
.arena-detail-fighter:nth-child(2) {
  background: linear-gradient(155deg, rgba(86, 35, 30, .94), rgba(41, 20, 19, .98));
  border-color: rgba(180, 83, 67, .5);
}

.arena-detail-stat-line,
.arena-detail-item,
.arena-detail-equipment-list.inventory-mode-expanded .arena-detail-item {
  background: rgba(9, 11, 12, .34);
  border-color: rgba(215, 166, 83, .15);
}

.arena-forge-bonus,
.arena-bonus-source-values em { color: #e9bd63; }
.arena-bonus-note {
  color: #dbc897;
  background: rgba(127, 84, 39, .18);
}

.arena-ring-log-line {
  color: #f3d88f !important;
  background: linear-gradient(90deg, rgba(119, 69, 29, .4), rgba(32, 28, 24, .5));
  border-color: rgba(226, 173, 80, .4);
}

.arena-subtabs {
  background: linear-gradient(145deg, rgba(48, 37, 29, .94), rgba(23, 20, 18, .97));
  border-color: rgba(205, 153, 70, .42);
}

.arena-subtabs button {
  color: #dbc59c;
  background: rgba(27, 29, 30, .72);
  border-color: rgba(204, 153, 72, .24);
}

.arena-subtabs button.active {
  color: #f3d68b;
  background: linear-gradient(180deg, rgba(121, 66, 31, .98), rgba(57, 32, 21, .99));
  border-color: rgba(225, 173, 81, .62);
}

.arena-history-card.lose {
  background: linear-gradient(145deg, rgba(84, 34, 30, .96), rgba(38, 18, 17, .99));
}

.arena-detail-overlay { background: rgba(12, 8, 6, .8); }

@media (max-height: 720px) {
  .arena-battle-active .arena-fighter-avatar-wrap {
    width: 108px;
    height: 108px;
    margin-block: 5px 7px;
  }

  .arena-battle-active .arena-fighter-pet-avatar {
    width: 44px;
    height: 44px;
  }

  .arena-battle-active .arena-zone-buttons button {
    min-height: 82px;
  }

  .arena-battle-active .arena-zone-buttons button::before {
    width: 47px;
    height: 47px;
  }
}

@media (max-height: 560px) {
  .arena-battle-active .arena-fighter-avatar-wrap {
    width: 86px;
    height: 86px;
  }

  .arena-battle-active .arena-fighter-pet-avatar {
    width: 36px;
    height: 36px;
  }

  .arena-battle-active .arena-zone-buttons button {
    min-height: 68px;
  }

  .arena-battle-active .arena-zone-buttons button::before {
    width: 38px;
    height: 38px;
  }
}

/* Arena approved icon set and full battle portraits — 2026.10.28 */
.arena-title-box::before {
  background-image: url('/assets/profile-stat-victories-v20261025-1.webp');
}

.arena-status-grid > div:nth-child(1)::before {
  background-image: url('/assets/profile-stat-victories-v20261025-1.webp');
}

.arena-status-grid > div:nth-child(2)::before {
  background-image: url('/assets/arena-status-next-battle-v20261028-1.webp');
}

.arena-status-grid > div:nth-child(3)::before {
  background-image: url('/assets/profile-stat-glory-v20261025-1.webp');
}

.arena-status-grid > div:nth-child(4)::before {
  background-image: url('/assets/profile-stat-league-v20261025-1.webp');
}

.arena-status-grid > div:nth-child(5)::before {
  background-image: url('/assets/gold-CtioqrbS.png');
}

.arena-status-grid > div:nth-child(6)::before {
  background-image: url('/assets/diamond-DFkr_DXt.png');
}

.arena-shield-box::before {
  background-image: url('/assets/profile-stat-protection-v20261025-1.webp');
}

.arena-main-choice button:nth-child(1)::before {
  background-image: url('/assets/profile-stat-level-v20261025-1.webp');
}

.arena-main-choice button:nth-child(2)::before {
  background-image: url('/assets/profile-stat-next-level-v20261025-1.webp');
  transform: rotate(180deg);
}

.arena-main-choice button:nth-child(3)::before {
  background-image: url('/assets/profile-stat-next-level-v20261025-1.webp');
}

.arena-main-choice button:nth-child(4)::before {
  background-image: url('/assets/profile-stat-skill-v20261025-1.webp');
}

.arena-main-choice button:nth-child(5)::before {
  background-image: url('/assets/achievement-skrall-slayer-v20261015-8.png');
}

.arena-main-choice button:nth-child(6)::before {
  background-image: url('/assets/hotbar-search-v20261021-1.png');
}

.arena-main-choice button:nth-child(7)::before {
  background-image: url('/assets/profile-nav-statistics-v20261025-1.webp');
}

.arena-opponent-actions button:first-child::before {
  background-image: url('/assets/profile-stat-skill-v20261025-1.webp');
}

.arena-opponent-actions button:last-child::before,
.arena-summary-actions .arena-main-action::before,
.arena-detail-tabs .arena-main-action::before {
  background-image: url('/assets/profile-nav-back-v20261025-1.webp');
  transform: rotate(180deg);
}

.arena-summary-actions .arena-back-history::before {
  transform: none;
}

.arena-summary-actions .arena-history-detail-button:nth-of-type(2)::before,
.arena-detail-tabs button:nth-last-child(4)::before {
  background-image: url('/assets/profile-nav-statistics-v20261025-1.webp');
}

.arena-summary-actions .arena-history-detail-button:nth-of-type(3)::before,
.arena-detail-tabs button:nth-last-child(3)::before {
  background-image: url('/assets/profile-nav-inventory-v20261025-1.webp');
}

.arena-summary-actions .arena-history-detail-button:nth-of-type(4)::before,
.arena-detail-tabs button:nth-last-child(2)::before {
  background-image: url('/assets/profile-nav-training-v20261025-1.webp');
}

.arena-summary-actions .arena-history-detail-button:nth-of-type(5)::before,
.arena-detail-tabs button:nth-last-child(1)::before {
  background-image: url('/assets/profile-nav-tasks-v20261025-1.webp');
}

.arena-ring-log-line::before {
  background-image: url('/assets/shop-category-ring-v20261024-1.webp');
}

.arena-history-card.win::before {
  background-image: url('/assets/profile-stat-victories-v20261025-1.webp');
}

.arena-history-card.lose::before {
  background-image: url('/assets/profile-stat-defeats-v20261025-1.webp');
}

.arena-zone-buttons button:nth-child(1)::before {
  background-image: url('/assets/shop-category-helmet-v20261024-1.webp');
}

.arena-zone-buttons button:nth-child(2)::before {
  background-image: url('/assets/shop-category-armor-v20261024-1.webp');
}

.arena-zone-buttons button:nth-child(3)::before {
  background-image: url('/assets/shop-category-pants-v20261024-1.webp');
}

.arena-title-box::before,
.arena-status-grid > div::before,
.arena-shield-box::before,
.arena-main-choice button::before,
.arena-opponent-actions button::before,
.arena-summary-actions button::before,
.arena-detail-tabs button::before,
.arena-ring-log-line::before,
.arena-history-card::before,
.arena-zone-buttons button::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
}

/* The DOM order now mirrors opponent matching: label, nickname, full portrait, HP. */
.arena-battle-active .arena-fighter-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    'fighter-title'
    'fighter-name'
    'fighter-portrait'
    'fighter-health' !important;
  justify-items: stretch;
}

.arena-battle-active .arena-fighter-title {
  grid-area: fighter-title;
}

.arena-battle-active .arena-fighter-name {
  grid-area: fighter-name;
  min-height: 23px;
  margin: 3px 0 0 !important;
  font-size: clamp(14px, 3.8vw, 18px) !important;
  line-height: 1.15;
}

.arena-battle-active .arena-fighter-avatar-wrap {
  grid-area: fighter-portrait;
  display: block !important;
  width: clamp(98px, 23vw, 124px) !important;
  height: clamp(98px, 23vw, 124px) !important;
  margin: 7px auto 9px !important;
}

.arena-battle-active .arena-fighter-avatar {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 21px;
}

.arena-battle-active .arena-fighter-pet-avatar {
  right: -7px;
  bottom: -7px;
  width: clamp(36px, 9vw, 44px) !important;
  height: clamp(36px, 9vw, 44px) !important;
  object-fit: cover !important;
}

.arena-battle-active .arena-fighter-card .arena-hp-line {
  grid-area: fighter-health;
}

@media (max-height: 640px) {
  .arena-battle-active .arena-fighter-avatar-wrap {
    width: 88px !important;
    height: 88px !important;
    margin-block: 5px 7px !important;
  }

  .arena-battle-active .arena-fighter-pet-avatar {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-height: 500px) {
  .arena-battle-active .arena-fighter-avatar-wrap {
    width: 72px !important;
    height: 72px !important;
  }
}

/* Keep full battle portraits inside their fighter cards. */
.arena-battle-active .arena-fighters-row {
  min-height: 190px !important;
  align-items: stretch !important;
}

.arena-battle-active .arena-fighter-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 190px !important;
  height: auto !important;
  overflow: hidden;
}

.arena-battle-active .arena-fighter-title,
.arena-battle-active .arena-fighter-name,
.arena-battle-active .arena-fighter-avatar-wrap,
.arena-battle-active .arena-fighter-card .arena-hp-line {
  grid-area: auto !important;
  order: initial !important;
  flex: 0 0 auto;
}

.arena-battle-active .arena-fighter-avatar-wrap {
  width: clamp(88px, 20vw, 108px) !important;
  height: clamp(88px, 20vw, 108px) !important;
  margin: 6px auto 8px !important;
}

.arena-battle-active .arena-fighter-pet-avatar {
  right: 2px;
  bottom: 2px;
  width: clamp(31px, 7.5vw, 38px) !important;
  height: clamp(31px, 7.5vw, 38px) !important;
}

.arena-battle-active .arena-fighter-card .arena-hp-line {
  width: 100%;
  margin-top: auto !important;
}

@media (max-height: 640px) {
  .arena-battle-active .arena-fighters-row,
  .arena-battle-active .arena-fighter-card {
    min-height: 158px !important;
  }

  .arena-battle-active .arena-fighter-avatar-wrap {
    width: 78px !important;
    height: 78px !important;
    margin-block: 4px 6px !important;
  }

  .arena-battle-active .arena-fighter-pet-avatar {
    width: 29px !important;
    height: 29px !important;
  }
}

@media (max-height: 500px) {
  .arena-battle-active .arena-fighters-row,
  .arena-battle-active .arena-fighter-card {
    min-height: 136px !important;
  }

  .arena-battle-active .arena-fighter-avatar-wrap {
    width: 62px !important;
    height: 62px !important;
  }
}

/* Arena viewport and battle clarity pass — 2026.10.28.5 */

/* Opponent matching always occupies the remaining game viewport without page scroll. */
.arena-page.arena-opponent-active {
  box-sizing: border-box;
  height: var(--cf-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

.arena-opponent-active .arena-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.arena-opponent-active .arena-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding-top: 6px !important;
  padding-bottom: calc(6px + var(--cf-safe-bottom, 0px)) !important;
  overflow: hidden;
}

.arena-opponent-active .arena-top {
  flex: 0 0 auto;
  margin-bottom: 6px;
}

.arena-opponent-active .arena-top > * {
  min-height: 42px;
}

.arena-opponent-active .arena-status-grid {
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px;
  margin-bottom: 6px;
}

.arena-opponent-active .arena-status-grid > div {
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 43px;
  padding: 4px 5px 4px 36px;
  border-radius: 11px;
}

.arena-opponent-active .arena-status-grid > div::before {
  left: 5px;
  width: 27px;
  height: 27px;
}

.arena-opponent-active .arena-status-grid span {
  font-size: 7.5px;
  line-height: 1.04;
}

.arena-opponent-active .arena-status-grid b {
  font-size: 11px;
}

.arena-opponent-active .arena-shield-box {
  flex: 0 0 auto;
  min-height: 34px;
  margin-bottom: 5px;
  padding-block: 6px;
  font-size: 9px;
}

.arena-opponent-active .arena-section {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.arena-opponent-active .arena-level-row,
.arena-opponent-active .arena-search-box,
.arena-opponent-active .arena-skrall-desc-box {
  flex: 0 0 auto;
  margin-bottom: 5px;
}

.arena-opponent-active .arena-opponent-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 6px;
  overflow: hidden;
}

.arena-opponent-active .arena-versus-row {
  flex: 0 0 auto;
  min-height: 29px;
  margin-bottom: 5px;
  padding: 3px 7px;
}

.arena-opponent-active .arena-compare-grid {
  flex: 1 1 auto;
  min-height: 0;
  gap: 6px;
  overflow: hidden;
}

.arena-opponent-active .arena-compare-card {
  min-height: 0;
  padding: 5px 6px;
  overflow: hidden;
  border-radius: 12px;
}

.arena-opponent-active .arena-compare-label {
  font-size: 8px;
}

.arena-opponent-active .arena-compare-name {
  min-height: 17px;
  margin-top: 2px;
  font-size: 11px;
}

.arena-opponent-active .arena-avatar-wrap {
  position: relative;
  width: clamp(78px, 14vh, 112px);
  height: clamp(78px, 14vh, 112px);
  margin: 4px auto 5px;
  overflow: visible;
  border-radius: 20px;
}

.arena-opponent-active .arena-avatar-wrap > img,
.arena-opponent-active .arena-avatar-placeholder {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}

.arena-opponent-active .arena-compare-meta {
  gap: 2px;
  margin: 3px 0 1px;
}

.arena-opponent-active .arena-compare-meta span {
  padding: 2px 3px;
  font-size: 7px;
}

.arena-opponent-active .arena-compare-stats,
.arena-opponent-active .arena-opponent-card .arena-compare-stats {
  gap: 3px !important;
  margin-top: auto;
  padding-top: 3px;
}

.arena-opponent-active .arena-compare-stats div,
.arena-opponent-active .arena-opponent-card .arena-compare-stats div {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-height: clamp(24px, 3.35vh, 29px);
  padding: 2px 4px !important;
}

.arena-opponent-active .arena-compare-stats div img,
.arena-opponent-active .arena-opponent-card .arena-compare-stats div img {
  width: 21px !important;
  height: 21px !important;
}

.arena-opponent-active .arena-compare-stats div::after {
  font-size: 7px;
}

.arena-opponent-active .arena-compare-stats div b,
.arena-opponent-active .arena-opponent-card .arena-compare-stats div b {
  font-size: 9px !important;
}

.arena-opponent-active .arena-opponent-actions {
  flex: 0 0 auto;
  gap: 6px;
  margin-top: 5px;
}

.arena-opponent-active .arena-opponent-actions button {
  min-height: 43px;
  padding-block: 4px;
}

.arena-opponent-active .arena-opponent-actions button::before {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
}

/* The streak is an overlay inside the portrait and cannot move either comparison card. */
.arena-avatar-wrap .arena-streak {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  min-height: 28px;
  margin: 0;
  padding: 1px 7px 1px 2px;
  color: #ffe19a;
  white-space: nowrap;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(82, 39, 20, .94), rgba(30, 20, 17, .97));
  border: 1px solid rgba(235, 179, 82, .76);
  border-radius: 999px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .58);
  font-size: 10px;
  line-height: 1;
}

.arena-avatar-wrap .arena-streak i {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  background: url('/assets/arena-streak-v20261028-1.webp') center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}

.arena-avatar-wrap .arena-streak b {
  color: #ffe5a6;
  font-size: 11px;
}

/* Lock both live-battle portraits to the true centre of equally structured cards. */
.arena-battle-active .arena-fighters-row {
  align-items: stretch !important;
}

.arena-battle-active .arena-fighter-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  justify-items: center !important;
  align-content: start !important;
  min-height: 202px !important;
}

.arena-battle-active .arena-fighter-title,
.arena-battle-active .arena-fighter-name {
  width: 100%;
  justify-self: stretch !important;
}

.arena-battle-active .arena-fighter-title { grid-row: 1; }
.arena-battle-active .arena-fighter-name { grid-row: 2; }

.arena-battle-active .arena-fighter-avatar-wrap {
  grid-row: 3;
  align-self: center !important;
  justify-self: center !important;
  width: clamp(96px, 22vw, 116px) !important;
  height: clamp(96px, 22vw, 116px) !important;
  margin: 6px auto 8px !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

.arena-battle-active .arena-fighter-card .arena-hp-line {
  grid-row: 4;
  justify-self: stretch !important;
  width: 100%;
  margin-top: 0 !important;
}

/* New target artwork with a readable lower-left curved attack arrow. */
.arena-zone-buttons button {
  min-height: 112px;
  gap: 5px;
  font-size: 14px;
}

.arena-zone-buttons button::before {
  width: 74px;
  height: 74px;
}

.arena-zone-buttons button:nth-child(1)::before {
  background-image: url('/assets/arena-zone-head-v20261028-1.webp');
}

.arena-zone-buttons button:nth-child(2)::before {
  background-image: url('/assets/arena-zone-body-v20261028-1.webp');
}

.arena-zone-buttons button:nth-child(3)::before {
  background-image: url('/assets/arena-zone-legs-v20261028-1.webp');
}

/* Each side owns its damage and remaining HP, so hero and pet values cannot be confused. */
.arena-summary-title {
  font-size: 21px;
}

.arena-summary-reason {
  font-size: 11px;
}

.arena-summary-section.arena-combat-summary {
  display: block;
  padding: 8px;
}

.arena-combat-summary > b {
  display: block;
  margin: 0 0 7px;
  color: #f2d58b;
  font-size: 12px;
}

.arena-combat-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.arena-combatant-summary {
  min-width: 0;
  padding: 8px;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(155deg, rgba(31, 57, 81, .96), rgba(14, 28, 41, .99));
  border: 1px solid rgba(102, 151, 187, .62);
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 3px 8px rgba(0, 0, 0, .28);
}

.arena-combatant-summary.enemy {
  background: linear-gradient(155deg, rgba(91, 37, 32, .96), rgba(42, 20, 19, .99));
  border-color: rgba(188, 88, 70, .62);
}

.arena-combatant-role {
  color: rgba(239, 220, 183, .7);
  text-transform: uppercase;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .06em;
}

.arena-combatant-name {
  min-height: 28px;
  margin: 2px 0 6px;
  overflow: hidden;
  color: #f6d992;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.08;
}

.arena-combatant-row {
  position: relative;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 33px;
  margin-top: 4px;
  padding: 3px 5px 3px 2px;
  background: rgba(8, 10, 12, .38);
  border: 1px solid rgba(224, 176, 89, .14);
  border-radius: 8px;
}

.arena-combatant-row::before {
  content: '';
  width: 27px;
  height: 27px;
  background: url('/assets/profile-stat-power-v20261025-1.webp') center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .42));
}

.arena-combatant-row.health::before {
  background-image: url('/assets/profile-stat-health-v20261025-1.webp');
}

.arena-combatant-row.pet {
  background: rgba(151, 111, 48, .11);
}

.arena-combatant-row span {
  min-width: 0;
  color: rgba(242, 226, 194, .82);
  overflow-wrap: anywhere;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.12;
}

.arena-combatant-row b {
  color: #ffe09a;
  font-size: 14px;
  font-weight: 950;
}

.arena-combatant-row.health b {
  color: #efc87c;
}

@media (max-height: 720px) {
  .arena-opponent-active .arena-avatar-wrap {
    width: clamp(70px, 12vh, 86px);
    height: clamp(70px, 12vh, 86px);
  }

  .arena-opponent-active .arena-compare-stats div,
  .arena-opponent-active .arena-opponent-card .arena-compare-stats div {
    min-height: 23px;
  }

  .arena-battle-active .arena-fighter-card {
    min-height: 174px !important;
  }

  .arena-battle-active .arena-fighter-avatar-wrap {
    width: 84px !important;
    height: 84px !important;
  }

  .arena-zone-buttons button {
    min-height: 82px;
    font-size: 11px;
  }

  .arena-zone-buttons button::before {
    width: 58px;
    height: 58px;
  }
}

@media (max-height: 560px) {
  .arena-battle-active .arena-fighter-card {
    min-height: 148px !important;
  }

  .arena-battle-active .arena-fighter-avatar-wrap {
    width: 68px !important;
    height: 68px !important;
  }

  .arena-zone-buttons button {
    min-height: 64px;
    flex-direction: row;
  }

  .arena-zone-buttons button::before {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 350px) {
  .arena-opponent-active .arena-status-grid span {
    font-size: 6.5px;
  }

  .arena-opponent-active .arena-status-grid > div {
    padding-left: 31px;
  }

  .arena-opponent-active .arena-status-grid > div::before {
    width: 23px;
    height: 23px;
  }

  .arena-combatant-summary {
    padding: 6px;
  }

  .arena-combatant-row {
    grid-template-columns: 23px minmax(0, 1fr) auto;
    gap: 3px;
    padding-right: 3px;
  }

  .arena-combatant-row::before {
    width: 23px;
    height: 23px;
  }

  .arena-combatant-name {
    font-size: 11px;
  }
}

/* Arena readability pass — 2026.10.28.6 */
.arena-opponent-active .arena-status-grid > div {
  min-height: 49px;
  padding-left: 40px;
}

.arena-opponent-active .arena-status-grid > div::before {
  left: 6px;
  width: 30px;
  height: 30px;
}

.arena-opponent-active .arena-status-grid span {
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1.08;
}

.arena-opponent-active .arena-status-grid b {
  font-size: 13px;
  line-height: 1.1;
}

.arena-opponent-active .arena-versus-row {
  min-height: 34px;
}

.arena-opponent-active .arena-player-name {
  font-size: 13px;
}

.arena-opponent-active .arena-vs {
  font-size: 12px;
}

.arena-opponent-active .arena-compare-label {
  font-size: 10px;
}

.arena-opponent-active .arena-compare-name {
  min-height: 21px;
  font-size: 14px;
  line-height: 1.12;
}

.arena-opponent-active .arena-compare-meta {
  gap: 3px;
  margin-top: 4px;
}

.arena-opponent-active .arena-compare-meta span {
  padding: 3px 4px;
  font-size: 9px;
  font-weight: 850;
}

.arena-opponent-active .arena-compare-stats,
.arena-opponent-active .arena-opponent-card .arena-compare-stats {
  gap: 4px !important;
  padding-top: 5px;
}

.arena-opponent-active .arena-compare-stats div,
.arena-opponent-active .arena-opponent-card .arena-compare-stats div {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  min-height: 34px;
  padding: 3px 6px 3px 4px !important;
}

.arena-opponent-active .arena-compare-stats div img,
.arena-opponent-active .arena-opponent-card .arena-compare-stats div img {
  width: 25px !important;
  height: 25px !important;
}

.arena-opponent-active .arena-compare-stats div::after {
  font-size: 9.5px;
  font-weight: 850;
}

.arena-opponent-active .arena-compare-stats div b,
.arena-opponent-active .arena-opponent-card .arena-compare-stats div b {
  font-size: 11px !important;
}

.arena-opponent-active .arena-opponent-actions button {
  min-height: 47px;
  font-size: 13px;
}

.arena-fighter-title {
  font-size: 11px;
}

.arena-battle-active .arena-fighter-card .arena-hp-line span {
  min-width: 62px;
  font-size: 10.5px;
}

.arena-zone-title {
  font-size: 13px;
}

.arena-battle-active .arena-log-title {
  font-size: 11px;
}

.arena-battle-active .arena-log-text {
  font-size: 10.5px;
  line-height: 1.3;
}

.arena-summary-section {
  font-size: 11px;
}

.arena-summary-section > b {
  font-size: 11px;
}

.arena-combat-summary > b {
  font-size: 13px;
}

.arena-combatant-role {
  font-size: 8.5px;
}

.arena-combatant-name {
  min-height: 31px;
  font-size: 15px;
}

.arena-combatant-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 38px;
  gap: 6px;
}

.arena-combatant-row::before {
  width: 30px;
  height: 30px;
}

.arena-combatant-row span {
  font-size: 10px;
}

.arena-combatant-row b {
  font-size: 16px;
}

.arena-summary-actions button,
.arena-detail-tabs button {
  font-size: 11px;
}

@media (max-height: 720px) {
  .arena-opponent-active .arena-status-grid > div {
    min-height: 44px;
  }

  .arena-opponent-active .arena-status-grid span {
    font-size: 8.5px;
  }

  .arena-opponent-active .arena-compare-stats div,
  .arena-opponent-active .arena-opponent-card .arena-compare-stats div {
    min-height: 29px;
  }

  .arena-opponent-active .arena-compare-stats div::after {
    font-size: 8.5px;
  }
}

@media (max-width: 350px) {
  .arena-opponent-active .arena-status-grid span {
    font-size: 8px;
  }

  .arena-opponent-active .arena-status-grid > div {
    padding-left: 34px;
  }

  .arena-opponent-active .arena-status-grid > div::before {
    width: 25px;
    height: 25px;
  }

  .arena-opponent-active .arena-compare-name {
    font-size: 12px;
  }

  .arena-opponent-active .arena-compare-stats div::after {
    font-size: 8px;
  }

  .arena-combatant-row span {
    font-size: 9px;
  }
}


/* Opponent cards, Skralls and league emblems — 2026.10.28.7 */
.arena-opponent-active .arena-opponent-card {
  flex: 0 1 auto;
}

.arena-opponent-active .arena-compare-grid {
  flex: 0 1 auto;
  align-items: stretch;
  overflow: visible;
}

.arena-opponent-active .arena-compare-card {
  justify-content: flex-start;
  height: 100%;
}

/* Keep the stats directly under portrait metadata instead of stretching them to the card bottom. */
.arena-opponent-active .arena-compare-stats,
.arena-opponent-active .arena-opponent-card .arena-compare-stats {
  margin-top: 4px !important;
}

/* Level and glory retain their values; the repeated words become visual game icons. */
.arena-opponent-active .arena-compare-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 39px;
  margin-bottom: 1px;
}

.arena-opponent-active .arena-compare-meta span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 39px;
  padding: 1px 3px;
  overflow: visible;
}

.arena-opponent-active .arena-compare-meta span img {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .48));
}

.arena-opponent-active .arena-compare-meta span b {
  color: #f6d892;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.arena-opponent-active .arena-compare-meta .arena-compare-meta-league img {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

/* The status tile also reflects the player's actual league emblem. */
.arena-status-league-cell::before {
  content: none !important;
}

.arena-status-league-cell .arena-status-league-badge {
  position: absolute;
  left: 4px;
  top: 50%;
  width: 34px;
  height: 34px;
  object-fit: contain;
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

.arena-status-league-cell b em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* All three Skrall tiers stay visible above the preview, including the active tier. */
.arena-opponent-active .arena-skrall-section .arena-skrall-switches {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 5px;
  margin: 0 0 5px;
}

.arena-opponent-active .arena-skrall-section .arena-skrall-switches button {
  min-width: 0;
  min-height: 38px;
  padding: 5px 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
}

.arena-opponent-active .arena-skrall-section .arena-skrall-switches button.active {
  color: #ffe39b;
  opacity: 1;
  background: linear-gradient(180deg, rgba(146, 75, 35, .99), rgba(69, 34, 21, .99));
  border-color: rgba(238, 183, 83, .78);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 0 10px rgba(211, 141, 49, .18);
  filter: none;
}

.arena-opponent-active .arena-skrall-section .arena-skrall-desc-box {
  min-height: 31px;
  padding: 5px 8px;
}

.arena-opponent-active .arena-skrall-section .arena-skrall-desc-box b {
  display: none;
}

.arena-opponent-active .arena-skrall-section .arena-skrall-desc-box span {
  font-size: 9.5px;
  font-weight: 800;
}

/* The tier bar and card already identify the Skrall; remove the third duplicate heading. */
.arena-opponent-active .arena-skrall-opponent-card .arena-versus-row {
  display: none;
}

.arena-opponent-active .arena-skrall-opponent-card .arena-compare-name-skrall {
  min-height: 17px;
  height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Skralls have no league row, so reserve its height to keep both stat lists aligned. */
.arena-opponent-active .arena-compare-card-skrall::after {
  content: "";
  display: block;
  order: 4;
  flex: 0 0 47px;
  min-height: 47px;
  margin: 3px 0 1px;
  pointer-events: none;
}

@media (max-height: 780px) {
  .arena-opponent-active .arena-avatar-wrap {
    width: clamp(72px, 12vh, 92px);
    height: clamp(72px, 12vh, 92px);
  }

  .arena-opponent-active .arena-compare-stats div,
  .arena-opponent-active .arena-opponent-card .arena-compare-stats div {
    min-height: 29px;
  }

  .arena-opponent-active .arena-compare-meta,
  .arena-opponent-active .arena-compare-meta span {
    min-height: 34px;
  }

  .arena-opponent-active .arena-compare-card-skrall::after {
    flex-basis: 42px;
    min-height: 42px;
  }

  .arena-opponent-active .arena-compare-meta span img {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .arena-opponent-active .arena-compare-meta .arena-compare-meta-league img {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
  }
}

@media (max-width: 380px) {
  .arena-opponent-active .arena-compare-meta span {
    gap: 1px;
    padding-inline: 1px;
  }

  .arena-opponent-active .arena-compare-meta span img {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .arena-opponent-active .arena-compare-meta .arena-compare-meta-league img {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .arena-opponent-active .arena-compare-meta span b {
    font-size: 9.5px;
  }

  .arena-opponent-active .arena-skrall-section .arena-skrall-switches button {
    font-size: 8px;
  }
}