/* ============================================================
   SIMULATOR OVERLAY
   Desktop: 2-column grid (pitch | side panel with commentary,
   controls, log, narrative). Mobile: single column stack.
   The pitch always fits within available viewport height.
   ============================================================ */

.sim-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  animation: simFadeIn var(--duration-base) var(--ease-out-quart);
}

.sim-overlay[hidden] { display: none !important; }
.sim-overlay.is-open { display: flex; }

@keyframes simFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sim-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 380px);
  width: 96vw;
  max-width: 1320px;
  height: 94vh;
  max-height: 94vh;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid oklch(0.78 0.145 85 / 0.4);
  position: relative;
  box-shadow:
    0 30px 80px oklch(0 0 0 / 0.6),
    0 0 80px oklch(0.78 0.145 85 / 0.15);
  overflow: hidden;
  animation: simRise 420ms var(--ease-out-quart);
}

@keyframes simRise {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.sim-close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.5em;
  color: var(--text-muted);
  z-index: 100;
  background: oklch(0 0 0 / 0.6);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out-quart);
  line-height: 1;
}
.sim-close:hover {
  color: var(--text-primary);
  background: oklch(0 0 0 / 0.9);
  transform: scale(1.08);
}

/* ---------- Main column (pitch) ---------- */
.sim-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #1a5c28;
}

.sim-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-deep);
  border-left: 1px solid oklch(0.78 0.145 85 / 0.25);
}

/* ---------- Scoreboard ---------- */
.scoreboard {
  background: linear-gradient(180deg, var(--bg-deep), var(--bg-elevated-2));
  padding: 14px 16px 10px;
  text-align: center;
  border-bottom: 2px solid var(--gold);
  flex-shrink: 0;
}

.sb-phase {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  margin-bottom: 8px;
}

.sb-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.sb-team {
  text-align: center;
  flex: 1;
  max-width: 240px;
  min-width: 0;
}

.sb-team-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-team-name.is-mia { color: var(--gold); }

.sb-team-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid oklch(1 0 0 / 0.3);
}

.sb-score-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sb-score {
  font-family: 'Oswald', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  min-width: 44px;
  text-align: center;
  transition: transform var(--duration-base), color var(--duration-base);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sb-score.pulse {
  animation: scorePulse 0.8s var(--ease-out-quart);
  color: var(--gold-bright);
}

@keyframes scorePulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.6); color: #fff; text-shadow: 0 0 20px var(--gold); }
  100% { transform: scale(1); }
}

.sb-vs {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  color: var(--text-muted);
  letter-spacing: 0.18em;
}

.sb-time {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  color: var(--green-pitch);
  margin-top: 6px;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}
.sb-time.finished { color: var(--red-card); }

/* ---------- Field & SVG ---------- */
.field-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: #1a5c28;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.pass-trail {
  stroke-dasharray: 4 4;
  animation: dashMove 0.5s linear infinite;
}
@keyframes dashMove { to { stroke-dashoffset: -8; } }

.net-shake-svg { animation: netShake 1s ease 2; }
@keyframes netShake {
  0%, 100% { transform: scaleY(1); }
  20% { transform: translateX(-3px) scaleY(1.3); }
  40% { transform: translateX(3px)  scaleY(0.85); }
  60% { transform: translateX(-2px) scaleY(1.15); }
  80% { transform: translateX(2px)  scaleY(0.95); }
}

/* ---------- Slow-mo ---------- */
.slow-mo-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 46;
  background:
    radial-gradient(ellipse at center, transparent 0%, oklch(0 0 0 / 0.35) 80%),
    linear-gradient(180deg, oklch(1 0 0 / 0.05) 0%, transparent 50%, oklch(0 0 0 / 0.2) 100%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-quart);
  mix-blend-mode: multiply;
}
.slow-mo-overlay.active {
  opacity: 1;
  animation: slowMoFlicker 0.4s ease;
}
@keyframes slowMoFlicker {
  0% { opacity: 0; }
  20% { opacity: 1; filter: brightness(1.3); }
  40% { opacity: 0.7; }
  60% { opacity: 1; filter: brightness(1.1); }
  100% { opacity: 1; }
}

.slow-mo-banner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 700;
  color: oklch(1 0 0 / 0.95);
  text-shadow:
    0 0 30px oklch(0.78 0.145 85 / 0.8),
    0 4px 20px oklch(0 0 0 / 0.9);
  letter-spacing: 0.16em;
  z-index: 47;
  opacity: 0;
  pointer-events: none;
}
.slow-mo-banner.active { animation: slowMoText 1.8s ease; }
@keyframes slowMoText {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(2); letter-spacing: 0.6em; }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); letter-spacing: 0.16em; }
  80%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

/* ---------- Event flash banner ---------- */
.event-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
}
.event-flash.active { animation: flashIn 2.4s ease; }
@keyframes flashIn {
  0%   { opacity: 0; transform: scale(0.5); }
  15%  { opacity: 1; transform: scale(1.1); }
  25%  { transform: scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

.event-flash-content {
  text-align: center;
  text-shadow: 2px 2px 30px oklch(0 0 0 / 0.95);
  padding: 16px 30px;
  background: oklch(0 0 0 / 0.55);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
  max-width: 86%;
}
.flash-icon { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; }
.flash-text {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 6px;
}
.flash-detail {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  color: var(--gold-bright);
  margin-top: 4px;
  letter-spacing: 0.05em;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Side panel: commentary ---------- */
.commentary {
  background: oklch(0 0 0);
  color: var(--green-pitch);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  padding: 12px 14px;
  text-align: center;
  letter-spacing: 0.04em;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid oklch(1 0 0 / 0.05);
  transition: color var(--duration-base);
  flex-shrink: 0;
}
.commentary.goal-flash {
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
  animation: commentaryGlow 0.6s ease-in-out 3;
}
@keyframes commentaryGlow {
  0%, 100% { text-shadow: 0 0 5px var(--gold); }
  50%      { text-shadow: 0 0 20px var(--gold-bright), 0 0 40px var(--gold); }
}

/* ---------- Controls ---------- */
.sim-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid oklch(0.30 0.014 80);
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

.sim-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 8px 16px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-out-quart);
  white-space: nowrap;
}
.sim-btn:hover:not(:disabled) {
  background: var(--gold);
  color: var(--bg-base);
}
.sim-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.sim-btn.primary {
  background: var(--gold);
  color: var(--bg-base);
}
.sim-btn.primary:hover:not(:disabled) { background: var(--gold-bright); }

.speed-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.speed-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 4px;
}

.speed-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 9px;
  border: 1px solid var(--line-default);
  background: transparent;
  color: var(--text-muted);
  border-radius: 3px;
  transition: all var(--duration-fast);
}
.speed-btn:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.speed-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: oklch(0.78 0.145 85 / 0.15);
}

/* ---------- Event log ---------- */
.event-log {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--bg-deep);
}

.event-log:empty::before {
  content: 'Sin eventos aún. Arrancá el partido para verlos aquí.';
  display: block;
  text-align: center;
  color: var(--text-faint);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  padding: 20px 0;
  letter-spacing: 0.05em;
}

.event-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.04);
  opacity: 0;
  transform: translateX(-12px);
  transition: all var(--duration-slow) var(--ease-out-quart);
}
.event-item.visible { opacity: 1; transform: translateX(0); }

.event-minute {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  color: var(--green-pitch);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.event-icon { font-size: 0.95rem; min-width: 20px; text-align: center; }
.event-desc {
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.event-desc .team-highlight {
  color: var(--gold);
  font-weight: 600;
}
.event-desc .narrative {
  color: var(--text-muted);
  font-style: italic;
  display: block;
  margin-top: 2px;
  font-size: 0.88em;
}

/* ---------- Narrative ---------- */
.narrative-panel {
  padding: 12px 14px;
  background: oklch(0.78 0.145 85 / 0.04);
  border-top: 1px solid oklch(0.40 0.060 82 / 0.3);
  flex-shrink: 0;
}
.narrative-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 6px;
}
.narrative-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ---------- Confetti ---------- */
.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 49;
  overflow: hidden;
}
@keyframes confettiFall {
  0%   { transform: translate(0, -40px) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--cx), 320px) rotate(720deg); opacity: 0; }
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 16px;
  animation: confettiFall var(--cd) ease-out forwards;
  border-radius: 2px;
}

/* ============================================================
   MOBILE / SMALL SCREENS — single column stack, scrollable
   ============================================================ */
@media (max-width: 900px) {
  .sim-overlay { padding: 0; }

  .sim-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    overflow-y: auto;
  }

  .sim-main {
    /* on mobile main collapses naturally */
    flex: 0 0 auto;
  }

  .field-wrap {
    /* enforce 16:10ish ratio on mobile so pitch isn't tiny */
    aspect-ratio: 16 / 10;
    flex: 0 0 auto;
    height: auto;
    min-height: 200px;
    max-height: 50vh;
  }

  .sim-side {
    border-left: none;
    border-top: 2px solid var(--gold);
    overflow: visible;
    flex: 1 1 auto;
  }

  .event-log {
    max-height: none;
    flex: 0 0 auto;
  }

  .scoreboard { padding: 10px 14px 8px; }
  .sb-team-name { font-size: 0.92rem; }
  .sb-score { font-size: 1.8rem; min-width: 36px; }
  .sb-time { font-size: 1.05rem; }
  .sb-phase { font-size: 0.62rem; letter-spacing: 0.22em; }
  .sb-teams { gap: 10px; }

  .sim-btn { padding: 7px 12px; font-size: 0.74rem; letter-spacing: 0.1em; }
  .speed-btn { font-size: 0.66rem; padding: 3px 7px; }
  .speed-label { font-size: 0.66rem; }
}

/* Small phone: tighter spacing */
@media (max-width: 480px) {
  .sb-team-name { font-size: 0.82rem; }
  .sb-score { font-size: 1.5rem; min-width: 30px; }
  .commentary { font-size: 0.82rem; padding: 10px 12px; min-height: 44px; }
  .narrative-text, .event-desc { font-size: 0.78rem; }
}