/* ── Prediction modal (#pre_popup) — light/dark cohesive design ── */

#pre_popup {
  --pre-accent: #39dbbf;
  --pre-accent-hover: #2ec9af;
  --pre-accent-soft: rgba(57, 219, 191, 0.12);
  --pre-accent-border: rgba(57, 219, 191, 0.45);
  --pre-bg: #151825;
  --pre-surface: #1a1d2e;
  --pre-surface-2: #1f2336;
  --pre-border: #252a40;
  --pre-text: #ffffff;
  --pre-text-2: #bfc3d4;
  --pre-muted: #8b90a8;
  --pre-btn-bg: #252a40;
  --pre-btn-hover: #2f354d;
  --pre-info-bg: rgba(57, 219, 191, 0.08);
  --pre-info-border: rgba(57, 219, 191, 0.25);
  --pre-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  --pre-radius: 16px;
  --pre-radius-sm: 12px;
}

html.light:not(.dark) #pre_popup {
  --pre-accent: #16ae94;
  --pre-accent-hover: #129a83;
  --pre-accent-soft: rgba(22, 174, 148, 0.1);
  --pre-accent-border: rgba(22, 174, 148, 0.4);
  --pre-bg: #ffffff;
  --pre-surface: #f8f9fc;
  --pre-surface-2: #f3f4f8;
  --pre-border: #e8eaf3;
  --pre-text: #0e1019;
  --pre-text-2: #3d4259;
  --pre-muted: #707488;
  --pre-btn-bg: #eef0f6;
  --pre-btn-hover: #e0e3ef;
  --pre-info-bg: rgba(22, 174, 148, 0.07);
  --pre-info-border: rgba(22, 174, 148, 0.22);
  --pre-shadow: 0 24px 64px rgba(14, 16, 25, 0.12);
}

/* Popup shell */
#pre_popup .popup-content.pre-popup,
#pre_popup .popup-content.event-comments {
  width: min(520px, 100%) !important;
  max-width: 520px;
  background: var(--pre-bg);
  border: 1px solid var(--pre-border);
  box-shadow: var(--pre-shadow);
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
}

#pre_popup .close-popup {
  top: 18px;
  left: 18px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pre-surface);
  border: 1px solid var(--pre-border);
  transition: background 0.2s, border-color 0.2s;
}

#pre_popup .close-popup:hover {
  background: var(--pre-surface-2);
  border-color: var(--pre-accent-border);
}

#pre_popup .close-popup path {
  fill: var(--pre-muted);
}

#pre_popup .close-popup:hover path {
  fill: #fc4d4d;
}

/* Header */
#pre_popup .pre-popup-header,
#pre_popup .player-popup-head.comment-replies {
  padding: 22px 24px 18px;
  padding-left: 56px;
  border-bottom: 1px solid var(--pre-border);
  background: var(--pre-bg);
}

#pre_popup .comment-item {
  margin: 0;
  padding: 0;
}

#pre_popup .comment-head {
  margin-bottom: 6px;
}

#pre_popup .commenter.match_image {
  display: flex;
  align-items: center;
  gap: 12px;
}

#pre_popup .commenter.match_image img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pre-border);
  flex-shrink: 0;
}

#pre_popup .commenter.match_image .text h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: var(--pre-text);
  line-height: 1.3;
}

#pre_popup .comment-text,
#pre_popup #comm_pop_info {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pre-muted);
}

#pre_popup .warning-hint {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--pre-radius-sm);
  background: rgba(252, 77, 77, 0.08);
  border: 1px solid rgba(252, 77, 77, 0.25);
  font-size: 13px;
  color: var(--pre-text-2);
}

/* Body */
#pre_popup .pre-popup-body,
#pre_popup .news-comments-wrapper {
  background: var(--pre-bg) !important;
  padding: 20px 24px 24px;
  margin: 0;
}

#pre_popup .prediction-step {
  display: none;
}

#pre_popup .prediction-step.active {
  display: block;
}

#pre_popup .prediction-step h2 {
  display: none;
}

/* Score panel */
#pre_popup .score-box {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: 0 0 20px;
  padding: 20px 16px;
  border-radius: var(--pre-radius);
  background: var(--pre-surface);
  border: 1px solid var(--pre-border);
}

#pre_popup .score-box .team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

#pre_popup .score-box .team img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin: 0;
  padding: 6px;
  border-radius: 50%;
  background: var(--pre-surface-2);
  border: 1px solid var(--pre-border);
}

#pre_popup .score-box .vs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--pre-muted);
  opacity: 1;
  align-self: center;
  margin-top: 28px;
}

#pre_popup .counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#pre_popup .counter button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--pre-border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  background: var(--pre-btn-bg);
  color: var(--pre-text);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#pre_popup .counter button:hover {
  background: var(--pre-btn-hover);
  border-color: var(--pre-accent-border);
  color: var(--pre-accent);
  opacity: 1;
}

#pre_popup .counter button:active {
  transform: scale(0.94);
}

#pre_popup .counter .score {
  width: 44px;
  min-width: 44px;
  border: 0;
  background: transparent;
  font-size: 32px;
  font-weight: 900;
  text-align: center;
  color: var(--pre-text);
  outline: none;
  padding: 0;
  margin: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}

#pre_popup .counter .score::-webkit-outer-spin-button,
#pre_popup .counter .score::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Knockout info banner */
#pre_popup .pre-knockout-banner {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--pre-radius-sm);
  background: var(--pre-info-bg);
  border: 1px solid var(--pre-info-border);
  text-align: center;
}

#pre_popup .pre-knockout-banner__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--pre-text);
  margin-bottom: 4px;
}

#pre_popup .pre-knockout-banner__desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pre-muted);
}

/* Fallback for unwrapped span/p in step 2 */
#pre_popup .prediction-step[data-step="2"] > span:not(.pre-knockout-banner__title) {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--pre-text);
  margin-bottom: 4px;
  padding: 14px 16px 0;
  text-align: center;
}

#pre_popup .prediction-step[data-step="2"] > p:not(.pre-knockout-banner__desc) {
  margin: 0 0 16px;
  padding: 0 16px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pre-muted);
  text-align: center;
  border-bottom: 1px solid var(--pre-border);
}

#pre_popup .pre-knockout-banner + .winner-select {
  margin-top: 0;
}

/* Winner selection */
#pre_popup .winner-select {
  display: flex;
  gap: 12px;
  margin: 0 0 16px;
}

#pre_popup .winner-card {
  flex: 1;
  padding: 18px 12px;
  border-radius: var(--pre-radius);
  cursor: pointer;
  text-align: center;
  border: 2px solid var(--pre-border);
  background: var(--pre-surface);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}

#pre_popup .winner-card:hover {
  border-color: var(--pre-accent-border);
  background: var(--pre-accent-soft);
}

#pre_popup .winner-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0;
}

#pre_popup .winner-card.active {
  border-color: var(--pre-accent);
  background: var(--pre-accent-soft);
  box-shadow: 0 0 0 3px var(--pre-accent-soft);
}

#pre_popup .winner-card:active {
  transform: scale(0.98);
}

/* Advanced collapse */
#pre_popup .collapse-item-wrap.match-info-collapse {
  margin-bottom: 16px;
}

#pre_popup .collapse-item-wrap .collapse-header.match-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--pre-radius-sm);
  background: var(--pre-surface);
  border: 1px solid var(--pre-border);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

#pre_popup .collapse-item-wrap .collapse-header.match-collapse:hover {
  border-color: var(--pre-accent-border);
}

#pre_popup .collapse-item-wrap .collapse-header.match-collapse.active {
  border-color: var(--pre-accent-border);
  background: var(--pre-accent-soft);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#pre_popup .match-info-collapse .match-collapse .title {
  flex: 1;
  width: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pre-text-2) !important;
  line-height: 1.4;
}

#pre_popup .collapse-header.match-collapse .content {
  display: none;
}

#pre_popup .collapse-header.match-collapse svg {
  flex-shrink: 0;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  margin-right: auto !important;
  fill: none;
  stroke: var(--pre-accent);
  color: var(--pre-accent);
  transition: transform 0.25s ease;
}

#pre_popup .collapse-header.match-collapse.active svg {
  transform: rotate(45deg);
}

#pre_popup .collapse-content {
  padding: 16px;
  border: 1px solid var(--pre-border);
  border-top: none;
  border-radius: 0 0 var(--pre-radius-sm) var(--pre-radius-sm);
  background: var(--pre-surface);
}

#pre_popup .collapse-content .score-box {
  margin: 0;
  padding: 16px 12px;
  background: var(--pre-surface-2);
}

/* Save button */
#pre_popup .btn-save,
#pre_popup .submit-prediction {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--pre-radius-sm);
  cursor: pointer;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 900;
  background: var(--pre-accent);
  color: #0e1019;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(57, 219, 191, 0.25);
}

html.light:not(.dark) #pre_popup .btn-save,
html.light:not(.dark) #pre_popup .submit-prediction {
  box-shadow: 0 4px 14px rgba(22, 174, 148, 0.2);
}

#pre_popup .btn-save:hover,
#pre_popup .submit-prediction:hover {
  background: var(--pre-accent-hover);
  opacity: 1;
}

#pre_popup .btn-save:active {
  transform: scale(0.98);
}

#pre_popup .warning-hint a {
  display: inline-block;
  margin-top: 8px;
  color: var(--pre-accent);
  font-weight: 700;
  text-decoration: none;
}

#pre_popup .warning-hint a:hover {
  text-decoration: underline;
}

/* Popup overlay */
#pre_popup.popup-item.active {
  background: rgba(14, 16, 25, 0.72);
  backdrop-filter: blur(4px);
}

html.light:not(.dark) #pre_popup.popup-item.active {
  background: rgba(14, 16, 25, 0.45);
}

[dir="ltr"] #pre_popup .close-popup {
  left: auto;
  right: 18px;
}

[dir="ltr"] #pre_popup .pre-popup-header,
[dir="ltr"] #pre_popup .player-popup-head.comment-replies {
  padding-left: 24px;
  padding-right: 56px;
}

[dir="ltr"] #pre_popup .collapse-header.match-collapse svg {
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* Mobile */
@media (max-width: 575px) {
  #pre_popup .popup-content.pre-popup,
  #pre_popup .popup-content.event-comments {
    border-radius: 16px;
  }

  #pre_popup .pre-popup-header,
  #pre_popup .player-popup-head.comment-replies {
    padding: 18px 18px 14px;
    padding-left: 50px;
  }

  #pre_popup .pre-popup-body,
  #pre_popup .news-comments-wrapper {
    padding: 16px 18px 20px;
  }

  #pre_popup .score-box {
    padding: 16px 10px;
  }

  #pre_popup .score-box .team img {
    width: 48px;
    height: 48px;
  }

  #pre_popup .counter button {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  #pre_popup .counter .score {
    font-size: 28px;
    width: 36px;
    min-width: 36px;
  }

  #pre_popup .winner-card img {
    width: 52px;
    height: 52px;
  }
}