/* SpintriX V2.9 Phase 3: World Tour, Boss Rush and visual arena presentation. */

.mode-btn > b {
  display: grid !important;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-sm);
  color: var(--sx-color-cyan);
  background: var(--sx-color-arena);
}
.mode-btn > b .sx-icon { width: 23px; height: 23px; }
.mode-btn[data-mode="boss"] > b { color: var(--sx-color-purple-highlight); }
.mode-btn.active[data-mode="tour"] { border-color: rgba(32, 231, 255, .72); background: var(--sx-color-cyan-soft); box-shadow: var(--sx-glow-ui); }
.mode-btn.active[data-mode="boss"] { border-color: rgba(155, 92, 255, .74); background: var(--sx-color-purple-soft); box-shadow: var(--sx-glow-purple); }

#campaignPanel {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-top: 2px solid var(--sx-color-cyan);
  background: var(--sx-color-surface);
}
#campaignPanel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 82px;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(32, 231, 255, .09), transparent 68%);
}
#campaignPanel[data-campaign-mode="boss"] {
  border-top-color: var(--sx-color-purple);
  background: #090b14;
}
#campaignPanel[data-campaign-mode="boss"]::before { background: linear-gradient(115deg, rgba(155, 92, 255, .14), rgba(255, 93, 115, .04) 56%, transparent); }
#campaignPanel > * { position: relative; }

.campaign-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; margin-bottom: 7px; }
.campaign-kicker { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--sx-color-cyan-highlight); font: 750 10px/1.2 var(--sx-font-display); text-transform: uppercase; }
.campaign-kicker .sx-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.campaign-kicker span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-progress { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--sx-color-text); font: 750 11px/1 var(--sx-font-mono); }
.campaign-progress > i { display: block; width: 70px; height: 4px; overflow: hidden; border-radius: var(--sx-radius-pill); background: var(--sx-color-surface-interactive); }
.campaign-progress > i > b { display: block; width: var(--campaign-progress, 0%); height: 100%; background: var(--sx-color-cyan); transition: width var(--sx-duration-base) var(--sx-ease-standard); }
#campaignPanel[data-campaign-mode="boss"] .campaign-kicker,
#campaignPanel[data-campaign-mode="boss"] .elo-rank { color: var(--sx-color-purple-highlight); }
#campaignPanel[data-campaign-mode="boss"] .campaign-progress > i > b { background: var(--sx-color-purple); }
#campaignPanel .title { min-height: 30px; }
#campaignPanel .title h2 { font-family: var(--sx-font-display); font-size: 21px; }
#campaignPanel .elo-rank { border: 1px solid currentColor; border-radius: var(--sx-radius-sm); padding: 4px 7px; color: var(--sx-color-cyan-highlight); font: 750 11px/1 var(--sx-font-mono); }
#campaignPanel .difficulty-row { align-items: stretch; }
#campaignPanel .country-badge { min-width: 0; border-color: var(--sx-color-border); border-radius: var(--sx-radius-sm); background: var(--sx-color-arena); }
#campaignPanel .country-badge .sx-icon { width: 25px; height: 25px; color: var(--sx-color-purple-highlight); }
#campaignPanel .country-badge span { min-width: 0; }
#campaignPanel .country-badge strong { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tourStatus { min-height: 34px; margin-top: 9px; padding: 8px 9px; border-left: 3px solid var(--sx-color-cyan); color: var(--sx-color-text-secondary); background: var(--sx-color-arena); }
#campaignPanel[data-campaign-mode="boss"] #tourStatus { border-left-color: var(--sx-color-danger); }

.tour-grid { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.tour-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 27px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 82px;
  padding: 7px 5px 6px;
  overflow: hidden;
  border: 1px solid var(--sx-color-border);
  border-radius: var(--sx-radius-sm);
  background: var(--sx-color-arena);
  color: var(--sx-color-text-secondary);
  text-align: center;
}
.tour-stage::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--sx-color-border-active); }
.tour-stage-marker { position: absolute; top: 5px; left: 5px; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--sx-color-border); border-radius: 50%; color: var(--sx-color-text-disabled); background: var(--sx-color-void); }
.tour-stage-marker .sx-icon { width: 10px; height: 10px; }
.tour-stage-identity { display: grid; place-items: center; width: 30px; height: 27px; margin: 0 auto; }
.tour-stage-flag { margin: 0 !important; font-size: 21px !important; line-height: 1; }
.tour-stage-boss-icon { width: 24px; height: 24px; color: var(--sx-color-purple-highlight); }
.tour-stage-copy { display: grid; min-width: 0; gap: 2px; }
.tour-stage-copy small { color: var(--sx-color-text-disabled); font: 650 9px/1.15 var(--sx-font-mono); text-transform: uppercase; }
.tour-stage-copy strong { overflow: hidden; color: var(--sx-color-text); font: 750 10px/1.15 var(--sx-font-display); text-overflow: ellipsis; white-space: nowrap; }
.tour-stage-copy em { display: flex; align-items: center; justify-content: center; gap: 2px; color: var(--sx-color-text-secondary); font: normal 650 8px/1.15 var(--sx-font-ui); }
.tour-stage-copy em .sx-icon { width: 9px; height: 9px; }
.tour-stage.completed { border-color: rgba(67, 217, 156, .26); }
.tour-stage.completed::after { background: var(--sx-color-success); }
.tour-stage.completed .tour-stage-marker { border-color: rgba(67, 217, 156, .55); color: var(--sx-color-success); }
.tour-stage.current { border-color: rgba(32, 231, 255, .72); background: rgba(32, 231, 255, .075); box-shadow: inset 0 0 0 1px rgba(32, 231, 255, .12); }
.tour-stage.current::after { width: 3px; background: var(--sx-color-cyan); }
.tour-stage.current .tour-stage-marker { border-color: var(--sx-color-cyan); color: var(--sx-color-cyan); }
.tour-stage.locked { opacity: .62; }
.tour-stage.locked .tour-stage-copy strong { color: var(--sx-color-text-secondary); }

.boss-mode-info { gap: 9px; }
.boss-intro-card { position: relative; overflow: hidden; padding: 13px; border: 1px solid rgba(155, 92, 255, .44); border-radius: var(--sx-radius-sm); background: linear-gradient(120deg, rgba(155, 92, 255, .13), rgba(255, 93, 115, .045) 62%, var(--sx-color-arena)); }
.boss-intro-card::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sx-color-danger); }
.boss-name-plate { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.boss-name-plate .boss-emblem { width: 35px; height: 35px; padding: 6px; border: 1px solid rgba(155, 92, 255, .46); border-radius: var(--sx-radius-sm); color: var(--sx-color-purple-highlight); background: var(--sx-color-void); }
.boss-name-plate span { min-width: 0; }
.boss-name-plate small { display: block; color: var(--sx-color-danger); font: 750 9px/1.2 var(--sx-font-mono); }
.boss-name-plate strong { display: block; overflow: hidden; color: var(--sx-color-text); font: 800 17px/1.2 var(--sx-font-display); text-overflow: ellipsis; white-space: nowrap; }
.boss-name-plate > b { margin: 0; padding: 4px 6px; border: 1px solid rgba(255, 93, 115, .36); border-radius: var(--sx-radius-sm); color: var(--sx-color-danger); font: 750 9px/1 var(--sx-font-mono); }
.boss-intro-card p { margin: 9px 0; color: var(--sx-color-text-secondary); font-size: 11px; line-height: 1.45; }
.boss-preview-status { display: flex; justify-content: space-between; color: var(--sx-color-text-secondary); font-size: 10px; }
.boss-preview-status strong { color: var(--sx-color-text); font-family: var(--sx-font-mono); }
.boss-preview-meter { height: 6px; margin-top: 5px; overflow: hidden; border-radius: var(--sx-radius-pill); background: var(--sx-color-surface-interactive); }
.boss-preview-meter i { display: block; height: 100%; background: var(--sx-color-danger); transition: width var(--sx-duration-fast) linear; }
.boss-roster-grid .tour-stage.current { border-color: rgba(155, 92, 255, .72); background: rgba(155, 92, 255, .1); }
.boss-roster-grid .tour-stage.current::after { background: var(--sx-color-purple); }
.boss-roster-grid .tour-stage.current .tour-stage-marker { border-color: var(--sx-color-purple); color: var(--sx-color-purple-highlight); }

.boss-alert { animation: none !important; filter: drop-shadow(0 0 8px rgba(255, 93, 115, .42)); }
.hud-rival[data-boss="true"] { border-color: rgba(255, 93, 115, .5); background: rgba(16, 7, 15, .82); }
.hud-boss-meter { display: none; width: 56px; height: 3px; margin-top: 3px; overflow: hidden; border-radius: var(--sx-radius-pill); background: rgba(255, 255, 255, .12); }
.hud-rival[data-boss="true"] .hud-boss-meter { display: block; margin-left: auto; }
.hud-boss-meter span { display: block; width: 100%; height: 100%; background: var(--sx-color-danger); }

.overlay[data-presentation^="boss-"] .menu { border-color: rgba(155, 92, 255, .55); background: linear-gradient(125deg, rgba(155, 92, 255, .13), var(--sx-color-surface) 56%); }
.overlay[data-presentation="boss-intro"] .menu { border-top: 3px solid var(--sx-color-danger); }
.overlay[data-presentation="boss-victory"] .menu { border-top: 3px solid var(--sx-color-purple-highlight); box-shadow: var(--sx-shadow-modal), var(--sx-glow-purple); }
.overlay[data-presentation$="defeat"] .menu { border-top: 3px solid var(--sx-color-danger); }
.overlay[data-presentation="tour-victory"] .menu { border-top: 3px solid var(--sx-color-cyan); box-shadow: var(--sx-shadow-modal), var(--sx-glow-cyan); }
.overlay[data-presentation^="boss-"] .menu h2 { color: var(--sx-color-purple-highlight); }

.arena-collection { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sx-color-border); }
.arena-collection-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arena-collection-head > span { display: grid; }
.arena-collection-head small { color: var(--sx-color-purple-highlight); font: 700 9px/1.2 var(--sx-font-mono); }
.arena-collection-head strong { color: var(--sx-color-text); font: 750 14px/1.25 var(--sx-font-display); }
#arenaThemeAuto { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 5px 8px; border-radius: var(--sx-radius-sm); font-size: 10px; }
#arenaThemeAuto.active { border-color: var(--sx-color-cyan); color: var(--sx-color-cyan-highlight); background: var(--sx-color-cyan-soft); }
.arena-theme-current { margin-top: 8px; padding: 9px 10px; border-left: 3px solid var(--sx-color-cyan); background: var(--sx-color-arena); }
.arena-theme-current > span { display: block; color: var(--sx-color-text-disabled); font-size: 9px; text-transform: uppercase; }
.arena-theme-current > strong { display: block; margin-top: 2px; color: var(--sx-color-cyan-highlight); font: 800 15px/1.25 var(--sx-font-display); }
.arena-theme-current p { margin: 4px 0; color: var(--sx-color-text-secondary); font-size: 10px; line-height: 1.35; }
.arena-theme-current small { color: var(--sx-color-purple-highlight); font: 650 9px/1.2 var(--sx-font-mono); }
.arena-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.arena-theme-option { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 1px 6px; min-height: 52px; padding: 7px; border-radius: var(--sx-radius-sm); text-align: left; }
.arena-theme-option .sx-icon { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--sx-color-text-secondary); }
.arena-theme-option span:not(.sx-icon) { overflow: hidden; color: var(--sx-color-text); font: 700 10px/1.2 var(--sx-font-display); text-overflow: ellipsis; white-space: nowrap; }
.arena-theme-option small { color: var(--sx-color-text-disabled); font: 650 8px/1 var(--sx-font-mono); }
.arena-theme-option.current { border-color: rgba(32, 231, 255, .48); }
.arena-theme-option.current .sx-icon { color: var(--sx-color-cyan); }
.arena-theme-option.selected { border-color: var(--sx-color-purple); background: var(--sx-color-purple-soft); }

body[data-arena-theme="prism-reactor"] .arena-theme-current,
body[data-arena-theme="holo-coliseum"] .arena-theme-current { border-left-color: var(--sx-color-purple); }
body[data-arena-theme="pulse-foundry"] .arena-theme-current { border-left-color: var(--sx-color-danger); }
body[data-arena-theme="midnight-protocol"] .arena-theme-current { border-left-color: var(--sx-color-border-active); }

body[data-quality-effective="low"] :is(.mode-btn.active, .tour-stage.current, .overlay[data-presentation] .menu) { box-shadow: none; }
body[data-quality-effective="low"] :is(#campaignPanel::before, .boss-intro-card, .overlay[data-presentation^="boss-"] .menu) { background-image: none; }
body[data-quality-effective="low"] .boss-alert { filter: none; }
.performance-glow-off :is(.mode-btn.active, .tour-stage.current, .overlay[data-presentation] .menu) { box-shadow: none; }
.performance-glow-off .boss-alert { filter: none; }
.performance-post-off :is(#campaignPanel::before, .boss-intro-card, .overlay[data-presentation^="boss-"] .menu) { background-image: none; }
.performance-post-reduced :is(#campaignPanel::before, .boss-intro-card, .overlay[data-presentation^="boss-"] .menu) { background-image: none; }

@media (max-width: 860px), (pointer: coarse) {
  #campaignPanel { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .tour-stage { min-height: 78px; }
  .arena-theme-option, #arenaThemeAuto { min-height: 48px; }
}

@media (max-width: 430px) {
  .campaign-progress > i { width: 52px; }
  #campaignPanel .difficulty-row { grid-template-columns: minmax(0, 1fr); }
  .tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .tour-stage { min-height: 76px; padding-inline: 4px; }
  .tour-stage-copy strong { font-size: 10px; }
  .boss-name-plate { grid-template-columns: 34px minmax(0, 1fr); }
  .boss-name-plate > b { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-progress > i > b, .boss-preview-meter i { transition: none !important; }
}
.reduced-motion .campaign-progress > i > b,
.reduced-motion .boss-preview-meter i { transition: none !important; }