/* V1.56 hidden-information commitment feedback: embedded in stable status space. */
html body:not(.maintenance-mode) .opponent-commitment {
  --commit-rgb: 224, 116, 104;
  position: relative;
  isolation: isolate;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: 23px minmax(0, auto) !important;
  grid-template-rows: auto auto !important;
  place-content: center !important;
  align-items: center !important;
  column-gap: 9px !important;
  row-gap: 1px !important;
  padding: 5px 12px !important;
  overflow: visible !important;
  border: 1px solid rgba(var(--commit-rgb), 0.58) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(105deg, rgba(var(--commit-rgb), 0.18), rgba(6, 10, 15, 0.9) 42%, rgba(5, 8, 13, 0.94)),
    #080c12 !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.32),
    0 0 16px rgba(var(--commit-rgb), 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  color: #fff5e8 !important;
  -webkit-text-fill-color: #fff5e8 !important;
  font-size: clamp(11px, 0.88vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.06em !important;
  text-align: left !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
  pointer-events: none;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) .opponent-commitment[data-commitment-tone="ally"] {
  --commit-rgb: 104, 195, 224;
}

html body:not(.maintenance-mode) .opponent-commitment[data-commitment-tone="unknown"] {
  --commit-rgb: 194, 148, 224;
}

html body:not(.maintenance-mode) .opponent-commitment::before {
  content: "";
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 20px;
  height: 17px;
  margin-top: 4px;
  border: 2px solid rgba(255, 236, 199, 0.9);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 58%, #fff0c8 0 1.5px, transparent 1.7px),
    linear-gradient(180deg, rgba(var(--commit-rgb), 0.64), rgba(var(--commit-rgb), 0.18));
  box-shadow:
    0 -7px 0 -4px rgba(255, 236, 199, 0.92),
    0 0 12px rgba(var(--commit-rgb), 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform-origin: center;
}

html body:not(.maintenance-mode) .opponent-commitment::after {
  content: attr(data-commitment-detail);
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  color: rgba(226, 234, 239, 0.72);
  -webkit-text-fill-color: rgba(226, 234, 239, 0.72);
  font-size: clamp(9px, 0.7vw, 10px);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  text-shadow: none;
}

html body:not(.maintenance-mode) .opponent-commitment.action-committed::before {
  animation: opponent-commitment-breathe 2.6s ease-in-out infinite;
}

html body:not(.maintenance-mode) .opponent-commitment.action-commitment-arrived {
  animation: opponent-commitment-arrive 0.72s cubic-bezier(0.18, 0.88, 0.3, 1.08) both;
}

html body:not(.maintenance-mode) .opponent-commitment.action-commitment-arrived::after {
  animation: opponent-commitment-detail-arrive 0.74s 0.08s ease-out both;
}

html body:not(.maintenance-mode) .team-choice.opponent-commitment {
  min-height: 30px !important;
  grid-template-columns: 17px minmax(0, auto) !important;
  padding: 3px 7px !important;
  border-radius: 7px !important;
  column-gap: 6px !important;
  font-size: clamp(8px, 0.68vw, 10px) !important;
  letter-spacing: 0.025em !important;
}

html body:not(.maintenance-mode) .team-choice.opponent-commitment::before {
  width: 14px;
  height: 12px;
  margin-top: 2px;
  border-width: 1.5px;
  box-shadow:
    0 -5px 0 -3px rgba(255, 236, 199, 0.92),
    0 0 8px rgba(var(--commit-rgb), 0.4);
}

html body:not(.maintenance-mode) .team-choice.opponent-commitment::after {
  display: none;
}

.opponent-commitment-announcer {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes opponent-commitment-arrive {
  0% { opacity: 0; transform: translateY(-7px) scale(0.96); filter: brightness(1.6); }
  48% { opacity: 1; transform: translateY(1px) scale(1.015); filter: brightness(1.18); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes opponent-commitment-detail-arrive {
  0% { opacity: 0; transform: translateX(-5px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes opponent-commitment-breathe {
  0%, 100% { filter: brightness(0.94); }
  50% { filter: brightness(1.13) drop-shadow(0 0 5px rgba(var(--commit-rgb), 0.46)); }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #oppChoice.opponent-commitment {
    min-height: 34px !important;
    grid-template-columns: 18px minmax(0, auto) !important;
    padding: 4px 8px !important;
    column-gap: 6px !important;
    font-size: 10px !important;
    letter-spacing: 0.025em !important;
  }

  html body:not(.maintenance-mode) #oppChoice.opponent-commitment::before {
    width: 15px;
    height: 13px;
    margin-top: 1px;
    border-width: 1.5px;
    box-shadow:
      0 -5px 0 -3px rgba(255, 236, 199, 0.92),
      0 0 8px rgba(var(--commit-rgb), 0.4);
  }

  html body:not(.maintenance-mode) #oppChoice.opponent-commitment::after,
  html body:not(.maintenance-mode) .team-choice.opponent-commitment::after {
    display: none;
  }

  html body:not(.maintenance-mode) .team-choice.opponent-commitment {
    min-height: 24px !important;
    grid-template-columns: 14px minmax(0, auto) !important;
    padding: 2px 5px !important;
    column-gap: 4px !important;
    font-size: 8px !important;
  }

  html body:not(.maintenance-mode) .team-choice.opponent-commitment::before {
    width: 11px;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) .opponent-commitment.action-committed::before,
  html body:not(.maintenance-mode) .opponent-commitment.action-commitment-arrived,
  html body:not(.maintenance-mode) .opponent-commitment.action-commitment-arrived::after {
    animation: none !important;
  }
}