/**
 * PLAY MODE STATES - CSS
 * Estilos para transiciones suaves entre estados
 */

/* ===== FRIENDS PANEL STATES ===== */

.friends-state {
  display: none;
  opacity: 0;
  animation: tc-state-fade-out 200ms var(--tc-ease-out) forwards;
}

.friends-state.active {
  display: flex;
  animation: tc-state-fade-in 300ms var(--tc-ease-out) forwards;
}

/* ===== MATCH PANEL STATES ===== */

.match-state {
  display: none;
  opacity: 0;
  animation: tc-state-fade-out 200ms var(--tc-ease-out) forwards;
}

.match-state.active {
  display: flex;
  animation: tc-state-fade-in 300ms var(--tc-ease-out) forwards;
}

/* ===== STATE ANIMATIONS ===== */

@keyframes tc-state-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tc-state-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* ===== ROOM CODE STYLING ===== */

#roomCode {
  user-select: all;
  cursor: pointer;
  transition: color 150ms var(--tc-ease-out);
}

#roomCode:hover {
  color: var(--tc-accent-amber);
}

/* ===== SMOOTH TRANSITIONS FOR SUB-PANELS ===== */

.sub-panel {
  transition: opacity 200ms var(--tc-ease-out);
}

.sub-panel:not(.active) {
  opacity: 0;
  pointer-events: none;
}

.sub-panel.active {
  opacity: 1;
  pointer-events: auto;
}

/* Keep active play sub-panels visible without pushing content below the fold */
#panel-play,
#sub-friends,
#sub-match,
#sub-cpu {
  min-height: 0;
}

#sub-friends {
  overflow-y: auto;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  .friends-state,
  .match-state {
    padding: 1.5rem;
  }
  
  .tc-empty-icon {
    font-size: 3rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .tc-headline {
    font-size: 1.5rem !important;
  }
}

/* ===================================================
   CPU STATES (coherence update)
   =================================================== */

.cpu-state {
  display: none !important;
  width: 100%;
  height: 100%;
}

.cpu-state.active {
  display: flex !important;
}

#cpu-empty {
  justify-content: flex-start;
  padding-top: 2rem;
}

/* Match CPU "air" for Friends and Community states */
#friends-empty,
#friends-creating,
#friends-waiting,
#friends-joining,
#friends-starting,
#match-idle,
#match-searching,
#match-found {
  justify-content: flex-start;
  padding-top: 2rem;
}

/* CPU Loading spinner */
#cpu-loading .tc-spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--tc-gray-800);
  border-top-color: var(--tc-white-pure);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* CPU color selection active state */
#cpuColorWhite.active,
#cpuColorBlack.active {
  border-color: var(--tc-white-pure);
  background: var(--tc-gray-800);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}