/* Prematch-specific polish layer on top of the shared app-base foundation. */

#prematch {
  --panel-accent: 255, 255, 255 !important;
  --panel-accent-2: 198, 210, 222 !important;
}

#prematch .dashboard-tool-layout {
  width: min(980px, 100%) !important;
  max-width: none !important;
  margin: 0 auto !important;
}

#prematch .tool-page-panel,
#prematch .tool-page-panel--prematch {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#prematch .tool-page-panel::before,
#prematch .tool-page-panel::after {
  display: none !important;
  content: none !important;
}

#prematch .dashboard-section-head {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
}

#prematch .dashboard-section-head::after {
  display: none !important;
}

#prematch .dashboard-section-head .dashboard-kicker,
#prematch .dashboard-kicker {
  display: none !important;
}

#prematch .prematch-toolbar {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#prematch .prematch-toolbar .field-compact,
#prematch .prematch-toolbar .dashboard-toolbar-actions {
  display: none !important;
}

#prematch .prematch-toolbar .field {
  gap: 10px;
}

#prematch .field span,
#prematch .prematch-toolbar .field span {
  color: rgba(255, 255, 255, 0.42) !important;
}

#prematch .prematch-toolbar .field span {
  display: none !important;
}

#prematch #prematch-target {
  min-height: 72px !important;
  padding: 0 22px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(14, 18, 24, 0.96), rgba(8, 11, 16, 0.94)),
    rgba(4, 6, 10, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 48px rgba(0, 0, 0, 0.28) !important;
  font-size: clamp(20px, 1.45vw, 26px) !important;
}

#prematch #prematch-target:focus {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.04),
    0 22px 52px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#prematch .tool-empty-stage {
  display: none !important;
  min-height: 280px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background:
    radial-gradient(720px 240px at 14% 0%, rgba(255, 255, 255, 0.06), transparent 56%),
    linear-gradient(180deg, rgba(12, 16, 22, 0.88), rgba(7, 10, 15, 0.78)) !important;
}

#prematch .tool-orbit {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 58%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.14) 0 2deg, transparent 2deg 18deg) !important;
}

#prematch .tool-orbit b {
  width: 72px;
  height: 72px;
  font-size: 0 !important;
  background: url("/site/static/energybot-icon.svg") center / contain no-repeat;
  filter: drop-shadow(0 10px 20px rgba(255, 255, 255, 0.12));
  animation: prematchGlyphPulse 2.4s ease-in-out infinite;
}

#prematch .tool-empty-copy strong {
  font-size: clamp(28px, 3.2vw, 50px);
}

#prematch .tool-empty-copy span {
  color: rgba(204, 214, 224, 0.64);
}

#prematch #prematch-result-status {
  display: none !important;
}

#prematch .dashboard-tool-result {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#prematch #prematch-result-section {
  margin-top: 18px !important;
}

#prematch .result-browser {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 26px;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}

@media (max-width: 980px) {
  #prematch .tool-empty-stage {
    grid-template-columns: 1fr !important;
  }
}

@keyframes prematchGlyphPulse {
  0%, 100% {
    transform: translate3d(-50%, -50%, 48px) scale(0.94) !important;
    filter: drop-shadow(0 10px 20px rgba(255, 255, 255, 0.08));
  }

  50% {
    transform: translate3d(-50%, -50%, 48px) scale(1) !important;
    filter: drop-shadow(0 14px 28px rgba(255, 255, 255, 0.16));
  }
}