/* ============================================================
   Clan Challenge — embedded polish (inside /clan/challenge)
   ============================================================ */

.xg-clan-page--challenge {
  max-width: 1220px;
  padding: 0 12px 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.xg-clan-page--challenge .clan-navigation {
  margin-bottom: 6px;
  flex-shrink: 0;
}

.cc-stage.cc-embedded {
  height: auto;
  min-height: 0;
  padding: 0;
  flex: 1 1 auto;
  overflow: hidden;
  align-items: stretch;
  display: flex;
  flex-direction: column;
}

.cc-stage.cc-embedded > .cc-modal {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.cc-stage.cc-embedded .cc-stage__glow,
.cc-stage.cc-embedded .cc-stage__grid,
.cc-stage.cc-embedded .cc-frame,
.cc-stage.cc-embedded .cc-shine {
  display: none !important;
}

.cc-modal--embed:not(.cc-modal--gop3):not(.cc-modal--nova):not(.cc-modal--aurelia):not(.cc-modal--orbit):not(.cc-modal--lumina):not(.cc-modal--nexus):not(.cc-modal--atlas):not(.cc-modal--pulse):not(.cc-modal--vesper):not(.cc-modal--aether):not(.cc-modal--beacon):not(.cc-modal--frost) {
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 12px;
  border: 1px solid rgba(100, 160, 255, 0.28);
  background:
    linear-gradient(165deg, rgba(18, 32, 54, 0.98) 0%, rgba(8, 14, 26, 0.98) 55%, rgba(6, 12, 22, 0.99) 100%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: none;
  overflow: hidden;
}

.cc-modal--embed.cc-modal--nova,
.cc-modal--embed.cc-modal--aurelia,
.cc-modal--embed.cc-modal--orbit,
.cc-modal--embed.cc-modal--lumina,
.cc-modal--embed.cc-modal--nexus,
.cc-modal--embed.cc-modal--atlas,
.cc-modal--embed.cc-modal--pulse,
.cc-modal--embed.cc-modal--vesper,
.cc-modal--embed.cc-modal--aether,
.cc-modal--embed.cc-modal--beacon,
.cc-modal--embed.cc-modal--frost {
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  animation: none;
  overflow: hidden;
}

.cc-modal--embed {
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  animation: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.cc-modal--embed:not(.cc-modal--gop3) .cc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.22);
  grid-template-columns: none;
}

.cc-modal--embed.cc-modal--nova .cc-head {
  /* nova topbar owns layout */
  grid-template-columns: none;
}

.cc-modal--embed .cc-brand {
  flex: 0 1 auto;
  min-width: 0;
}

.cc-modal--embed .cc-brand__mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.cc-modal--embed .cc-title {
  font-size: 15px;
  letter-spacing: 0.1em;
}

.cc-modal--embed .cc-tabs {
  flex: 1;
  justify-content: center;
  gap: 5px;
}

.cc-modal--embed .cc-tab {
  padding: 6px 12px;
  font-size: 9px;
  border-radius: 7px;
}

.cc-modal--embed .cc-timer {
  width: 108px;
  padding: 4px 8px;
}

.cc-modal--embed .cc-timer__val {
  font-size: 12px;
}

/* Body: slim rail + board */
.cc-modal--embed .cc-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  flex: 1;
}

.cc-modal--embed.cc-modal--gop3 .cc-sidebar {
  min-height: 0;
  overflow-y: auto;
}

.cc-modal--embed:not(.cc-modal--gop3):not(.cc-modal--nova):not(.cc-modal--aurelia):not(.cc-modal--orbit):not(.cc-modal--lumina):not(.cc-modal--nexus):not(.cc-modal--atlas):not(.cc-modal--pulse):not(.cc-modal--vesper):not(.cc-modal--aether):not(.cc-modal--beacon):not(.cc-modal--frost) .cc-sidebar {
  gap: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.28);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cc-side-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(91, 156, 255, 0.08);
  border: 1px solid rgba(91, 156, 255, 0.2);
}

.cc-side-hero .cc-shield {
  width: 42px;
  height: 48px;
  flex-shrink: 0;
}

.cc-side-hero .cc-shield span {
  font-size: 15px;
}

.cc-side-hero__text {
  min-width: 0;
  flex: 1;
}

.cc-modal--embed .cc-clan-name-box {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.cc-modal--embed .cc-slogan {
  text-align: left;
  font-size: 10px;
  margin-top: 2px;
}

.cc-modal--embed .cc-bank {
  padding: 7px 8px;
  border-radius: 9px;
}

.cc-modal--embed .cc-bank-value {
  font-size: 12px;
}

.cc-modal--embed .cc-mvp {
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(232, 184, 106, 0.18);
  margin: 0;
}

.cc-modal--embed .cc-members {
  flex: 1;
  min-height: 0;
  max-height: none;
  gap: 3px;
}

.cc-modal--embed .cc-member {
  padding: 4px 6px;
  font-size: 11px;
}

.cc-modal--embed .cc-bonus {
  padding: 7px 8px;
  border-radius: 9px;
  animation: none;
}

.cc-modal--embed .cc-bonus-plus {
  width: 24px;
  height: 24px;
  font-size: 14px;
  border-radius: 7px;
}

.cc-modal--embed .cc-bonus-copy strong {
  font-size: 9px;
}

.cc-modal--embed .cc-bonus-copy span {
  font-size: 9px;
}

.cc-modal--embed .cc-btn {
  height: 34px;
  font-size: 9px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(66, 135, 245, 0.22);
}

.cc-modal--embed .cc-help[hidden] {
  display: none !important;
}

/* Main board */
.cc-modal--embed:not(.cc-modal--gop3):not(.cc-modal--nova):not(.cc-modal--aurelia):not(.cc-modal--orbit):not(.cc-modal--lumina):not(.cc-modal--nexus):not(.cc-modal--atlas):not(.cc-modal--pulse):not(.cc-modal--vesper):not(.cc-modal--aether):not(.cc-modal--beacon):not(.cc-modal--frost) .cc-main {
  background: rgba(0, 0, 0, 0.1);
  min-height: 0;
  overflow: hidden;
}

.cc-modal--embed .cc-panel[data-panel="challenge"] {
  padding: 10px;
  gap: 10px;
  overflow: hidden;
}

.cc-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.cc-modal--embed:not(.cc-modal--gop3):not(.cc-modal--nova):not(.cc-modal--aurelia):not(.cc-modal--orbit):not(.cc-modal--lumina):not(.cc-modal--nexus):not(.cc-modal--atlas):not(.cc-modal--pulse):not(.cc-modal--vesper):not(.cc-modal--aether):not(.cc-modal--beacon):not(.cc-modal--frost) .cc-progress-top {
  flex: 1.25 1 auto;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(12, 22, 38, 0.72);
  border: 1px solid rgba(100, 160, 255, 0.18);
  display: flex;
  flex-direction: column;
}

.cc-modal--embed .cc-section-head {
  margin-bottom: 10px;
  align-items: center;
}

.cc-modal--embed .cc-section-head h2,
.cc-modal--embed .cc-clan-progress h2,
.cc-modal--embed .cc-top h2 {
  font-size: 14px;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.cc-modal--embed .cc-points {
  font-size: 12px;
  color: rgba(230, 240, 255, 0.92);
}

.cc-modal--embed .cc-carousel {
  flex: 1;
  min-height: 0;
  gap: 6px;
}

.cc-modal--embed .cc-nav-arrow {
  width: 28px;
  height: 52px;
  font-size: 22px;
  border-radius: 8px;
}

.cc-modal--embed .cc-chests {
  gap: 8px;
  min-height: 156px;
  align-items: end;
  padding-top: 4px;
}

.cc-modal--embed .cc-chest {
  padding: 18px 2px 4px;
  border-radius: 12px;
}

.cc-modal--embed .cc-chest-glow {
  width: 114px;
  height: 108px;
}

.cc-modal--embed .cc-chest-img {
  width: 108px;
  height: 104px;
}

.cc-modal--embed .cc-chest-name {
  font-size: 10px;
  margin-top: 2px;
  color: #d0e4ff;
}

.cc-modal--embed .cc-track {
  margin-top: 4px;
}

.cc-modal--embed .cc-track-bar {
  height: 11px;
}

.cc-modal--embed .cc-carousel-meta {
  margin-top: 6px;
}

/* Lumina owns its board/team layout — don't force embed team-block box */
.cc-modal--embed.cc-modal--lumina .cc-team-block,
.cc-modal--embed.cc-modal--nexus .cc-team-block,
.cc-modal--embed.cc-modal--atlas .cc-team-block,
.cc-modal--embed.cc-modal--pulse .cc-team-block,
.cc-modal--embed.cc-modal--vesper .cc-team-block,
.cc-modal--embed.cc-modal--aether .cc-team-block,
.cc-modal--embed.cc-modal--beacon .cc-team-block,
.cc-modal--embed.cc-modal--frost .cc-team-block {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.cc-modal--embed.cc-modal--lumina .cc-panel[data-panel="challenge"],
.cc-modal--embed.cc-modal--nexus .cc-panel[data-panel="challenge"],
.cc-modal--embed.cc-modal--atlas .cc-panel[data-panel="challenge"],
.cc-modal--embed.cc-modal--pulse .cc-panel[data-panel="challenge"],
.cc-modal--embed.cc-modal--vesper .cc-panel[data-panel="challenge"],
.cc-modal--embed.cc-modal--aether .cc-panel[data-panel="challenge"],
.cc-modal--embed.cc-modal--beacon .cc-panel[data-panel="challenge"],
.cc-modal--embed.cc-modal--frost .cc-panel[data-panel="challenge"] {
  padding: 0;
  gap: 0;
}

.cc-modal--embed .cc-progress-bottom {
  flex: 0 0 auto;
}

.cc-modal--embed.cc-modal--lumina .cc-progress-bottom {
  flex: none;
}

.cc-modal--embed .cc-team-block {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(200px, 0.9fr);
  gap: 0 20px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(12, 22, 38, 0.72);
  border: 1px solid rgba(100, 160, 255, 0.18);
  align-items: stretch;
}

.cc-modal--embed .cc-clan-progress,
.cc-modal--embed .cc-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cc-modal--embed .cc-clan-total {
  font-size: 12px;
  color: rgba(230, 240, 255, 0.9);
}

.cc-modal--embed .cc-mini-bar {
  height: 26px;
  border-radius: 999px;
  border-width: 2px;
}

.cc-modal--embed .cc-mini-label {
  font-size: 12px;
}

.cc-modal--embed .cc-next-size {
  font-size: 11px;
  color: rgba(200, 220, 240, 0.85);
}

.cc-modal--embed .cc-top-list li {
  padding: 7px 0;
  font-size: 12px;
}

.cc-modal--embed .cc-actions {
  margin-top: auto;
  justify-content: flex-end;
  padding-top: 6px;
}

.cc-modal--embed .cc-btn--chat {
  min-width: 100px;
  height: 32px;
  width: auto;
}

/* Reward modal — wide & short */
.cc-reward-modal--wide {
  width: min(560px, calc(100vw - 24px));
  max-height: min(78vh, 560px);
  padding: 18px 18px 16px;
  gap: 10px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(91, 156, 255, 0.16), transparent 55%),
    rgba(8, 14, 24, 0.98);
  border: 1px solid rgba(120, 170, 255, 0.3);
}

.cc-reward-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
  padding-right: 28px;
}

.cc-reward-modal--wide .cc-reward-chest {
  width: auto;
  height: auto;
  margin: 0;
  flex-shrink: 0;
}

.cc-reward-modal--wide .cc-chest-glow:has(.cc-chest-img--reward) {
  width: 92px;
  height: 88px;
}

.cc-reward-modal--wide .cc-chest-img--reward {
  width: 84px;
  height: 84px;
}

/* Reward modal: match selected tier glow */
.cc-reward-chest.bronze .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 190, 120, 0.75) 0%, rgba(180, 100, 40, 0.3) 50%, transparent 78%);
}
.cc-reward-chest.silver .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(210, 230, 255, 0.8) 0%, rgba(120, 160, 210, 0.32) 50%, transparent 78%);
}
.cc-reward-chest.gold .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 230, 120, 0.85) 0%, rgba(220, 160, 40, 0.34) 50%, transparent 78%);
}
.cc-reward-chest.diamond .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(160, 245, 255, 0.9) 0%, rgba(60, 180, 255, 0.38) 50%, transparent 78%);
}
.cc-reward-chest.ruby .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 140, 160, 0.8) 0%, rgba(200, 40, 70, 0.32) 50%, transparent 78%);
}
.cc-reward-chest.emerald .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(140, 255, 190, 0.8) 0%, rgba(30, 170, 100, 0.32) 50%, transparent 78%);
}
.cc-reward-chest.sapphire .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(160, 180, 255, 0.8) 0%, rgba(70, 90, 220, 0.32) 50%, transparent 78%);
}
.cc-reward-chest.opal .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(210, 230, 255, 0.8) 0%, rgba(140, 180, 255, 0.3) 50%, transparent 78%);
}
.cc-reward-chest.amber .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 200, 120, 0.85) 0%, rgba(230, 140, 30, 0.34) 50%, transparent 78%);
}
.cc-reward-chest.amethyst .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 160, 240, 0.8) 0%, rgba(180, 50, 180, 0.32) 50%, transparent 78%);
}
.cc-reward-chest.black .cc-chest-glow::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(180, 230, 255, 0.85) 0%, rgba(80, 160, 255, 0.34) 50%, transparent 78%);
}

.cc-reward-modal--wide h2 {
  margin: 0;
  font-size: 15px;
  text-align: left;
}

.cc-reward-modal--wide .cc-reward-sub {
  margin: 4px 0 0;
  text-align: left;
}

.cc-reward-modal--wide .cc-reward-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-height: min(220px, 38vh);
  gap: 7px;
  margin: 2px 0 4px;
}

.cc-reward-modal--wide .cc-reward-card {
  padding: 7px 4px;
  border-radius: 9px;
}

.cc-reward-modal--wide .cc-reward-img {
  width: 36px;
  height: 36px;
}

.cc-reward-modal--wide .cc-reward-card .lbl {
  font-size: 9px;
}

.cc-reward-modal--wide .cc-reward-card .amt {
  font-size: 11px;
}

.cc-reward-modal--wide .cc-btn--claim {
  max-width: 220px;
  height: 40px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .cc-modal--embed .cc-body {
    grid-template-columns: 1fr;
  }
  .cc-modal--embed .cc-sidebar {
    max-height: 180px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cc-modal--embed .cc-members {
    width: 100%;
    max-height: 70px;
  }
  .cc-modal--embed .cc-team-block {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cc-reward-modal--wide .cc-reward-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}