.ai-match-recap[hidden] {
  display: none !important;
}

.ai-match-recap {
  position: relative;
  width: 100%;
  margin: 14px auto 8px;
  padding: 16px;
  border: 1px solid #35e5ff;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(12, 39, 67, .96), rgba(20, 8, 42, .96));
  box-shadow: inset 0 0 18px #00d9ff16, 0 0 18px #00d9ff24;
  color: #eaffff;
  text-align: left;
}

.ai-match-recap .ai-recap-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  width: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid #ff72cc;
  border-radius: 50%;
  background: #080d1ee8;
  color: #fff;
  font: 900 24px/1 system-ui, sans-serif;
  box-shadow: 0 0 10px #ff72cc66;
}

.ai-match-recap .ai-recap-close:active {
  transform: scale(.92);
}

.ai-recap-eyebrow {
  margin: 0 0 5px;
  color: #ff72cc;
  font: 900 9px/1.3 ui-monospace, monospace;
  letter-spacing: .12em;
}

.ai-match-recap h2 {
  margin: 0 42px 12px 0;
  color: #f2feff;
  font: 900 clamp(15px, 3vw, 20px)/1.15 ui-monospace, monospace;
  letter-spacing: .06em;
  text-shadow: 0 0 10px #35e5ffaa;
}

.ai-match-recap button {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 2px solid #a9ff58;
  border-radius: 7px;
  background: linear-gradient(135deg, #83df45, #50bb43);
  color: #061208;
  box-shadow: 0 0 14px #75ef7344;
  cursor: pointer;
  font: 900 11px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}

.ai-match-recap button:disabled {
  cursor: wait;
  opacity: .58;
}

.ai-recap-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: #a5edf7;
  font: 800 9px/1.45 ui-monospace, monospace;
  letter-spacing: .04em;
}

.ai-recap-status.error {
  color: #ff809d;
}

.ai-recap-output {
  margin: 13px 0 0;
  padding: 13px;
  border-left: 3px solid #ff72cc;
  border-radius: 5px;
  background: #ff55bc0d;
  color: #fff;
  font: 800 clamp(13px, 2.5vw, 16px)/1.5 system-ui, sans-serif;
}

.arena-card > .ai-match-recap {
  max-width: 600px;
}