/* Refined Twitch prediction workspace */
.prediction-workspace {
  display: block;
}

.prediction-board {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: 1.1rem;
  align-items: start;
}

.prediction-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1.1rem;
}

.prediction-live-card,
.prediction-create-card,
.prediction-participants-card,
.prediction-overlay-card,
.prediction-templates-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .09);
  background: linear-gradient(145deg, rgba(20, 23, 39, .92), rgba(11, 12, 24, .96)), var(--gradient-card);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .035);
}

.prediction-live-card::before,
.prediction-create-card::before,
.prediction-participants-card::before,
.prediction-overlay-card::before,
.prediction-templates-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .72;
}

.prediction-live-card:hover,
.prediction-create-card:hover,
.prediction-participants-card:hover,
.prediction-overlay-card:hover,
.prediction-templates-card:hover {
  border-color: rgba(0, 229, 255, .2);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .23), 0 0 22px rgba(0, 229, 255, .04);
}

.prediction-card-heading { margin-bottom: 1.05rem; padding-bottom: .9rem; }
.prediction-card-heading h3 { font-size: 1.16rem; }
.prediction-card-note { margin-bottom: 1.05rem; }

.prediction-empty-state {
  display: grid;
  min-height: 185px;
  place-content: center;
  border: 1px dashed rgba(0, 229, 255, .15);
  border-radius: var(--radius-md);
  background: radial-gradient(circle at top, rgba(0, 229, 255, .045), transparent 62%);
}

.prediction-form .form-group { padding: .1rem 0; }
.prediction-create-card .form-group label { color: var(--text-primary); font-weight: 650; }
.prediction-create-card input,
.prediction-create-card select { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }

.prediction-predictor-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .85rem; }
.prediction-predictor-column { min-width: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--radius-md); background: rgba(0, 0, 0, .13); }
.prediction-predictor-column-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .72rem .78rem; border-bottom: 1px solid rgba(255, 255, 255, .075); background: rgba(255, 255, 255, .025); }
.prediction-predictor-column.blue .prediction-predictor-column-head { box-shadow: inset 3px 0 #3975df; }
.prediction-predictor-column.pink .prediction-predictor-column-head { box-shadow: inset 3px 0 #df159f; }
.prediction-predictor-column.purple .prediction-predictor-column-head { box-shadow: inset 3px 0 #9a6bff; }
.prediction-predictor-column.orange .prediction-predictor-column-head { box-shadow: inset 3px 0 #f29b38; }
.prediction-predictor-outcome-name { min-width: 0; overflow: hidden; color: var(--text-primary); font-size: .85rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.prediction-predictor-outcome-total { color: #ffd166; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.prediction-predictor-column-list { display: flex; flex-direction: column; gap: .38rem; max-height: 290px; overflow-y: auto; padding: .58rem; }
.prediction-predictor-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: .52rem; padding: .54rem; border-color: rgba(255, 255, 255, .065); background: rgba(255, 255, 255, .022); }
.prediction-predictor-rank { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; color: var(--accent); background: var(--accent-dim); font-size: .7rem; font-weight: 800; }
.prediction-predictor-copy { min-width: 0; }
.prediction-predictor-meta { margin-top: .08rem; }
.prediction-predictor-points { font-size: .74rem; }
.prediction-empty-column { padding: 1.15rem .65rem; color: var(--text-muted); font-size: .76rem; line-height: 1.45; text-align: center; }

.prediction-overlay-card .prediction-overlay-url-row { padding: .18rem; border: 1px solid rgba(0, 229, 255, .11); border-radius: var(--radius-md); background: rgba(0, 0, 0, .12); }

@media (max-width: 1180px) {
  .prediction-board {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .prediction-column { display: contents; }
  .prediction-live-card { grid-row: 1; }
  .prediction-create-card { grid-row: 2; }
  .prediction-participants-card { grid-row: 3; }
  .prediction-overlay-card { grid-row: 4; }
  .prediction-templates-card { grid-row: 5; }
}

@media (max-width: 620px) {
  .prediction-predictor-columns { grid-template-columns: 1fr; }
  .prediction-live-card,
  .prediction-create-card,
  .prediction-participants-card,
  .prediction-overlay-card,
  .prediction-templates-card { padding: 1.05rem; }
}