/* ==========================================================================
   hola blitz app styles
   shared styles for create, join, room, dashboard, recap pages
   ========================================================================== */

/* inherit variables from main styles.css */

/* ==========================================================================
   app layout
   ========================================================================== */

.app {
  min-height: 100vh;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}

.app__header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.app__header-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app__logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.app__logo:hover {
  color: var(--accent);
}

.app__main {
  flex: 1;
  padding: var(--space-lg) var(--space-md);
}

.app__container {
  max-width: 600px;
  margin: 0 auto;
}

.app__container--wide {
  max-width: 900px;
}

/* ==========================================================================
   page header
   ========================================================================== */

.page-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.page-header__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.page-header__subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto;
}

/* ==========================================================================
   card component
   ========================================================================== */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.card--highlight {
  border-color: var(--accent);
}

.card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.card__subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: calc(-1 * var(--space-sm));
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   form elements (extended)
   ========================================================================== */

.form-row {
  margin-bottom: var(--space-md);
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row--inline {
  display: flex;
  gap: var(--space-md);
}

.form-row--inline > * {
  flex: 1;
}

.form__hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* radio/option cards */
.option-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.option-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.option-card:hover {
  border-color: var(--accent-light);
}

.option-card.is-selected {
  border-color: var(--accent);
  background: var(--bg-surface);
}

.option-card__radio {
  margin-top: 0.25rem;
  accent-color: var(--accent);
}

.option-card__content {
  flex: 1;
}

.option-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.option-card__desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.option-card__icon {
  font-size: 1.5rem;
  margin-right: var(--space-xs);
}

/* number input with stepper */
.number-input {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.number-input__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.25rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.number-input__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.number-input__value {
  width: 60px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none;
}

.number-input__label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-left: var(--space-xs);
}

/* ==========================================================================
   share box - compact
   ========================================================================== */

.share-box {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}

.share-box__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.share-box__link {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.share-box__input {
  flex: 1;
  padding: 0.5rem;
  font-family: monospace;
  font-size: 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.share-box__qr {
  margin: var(--space-sm) auto;
}

.share-box__qr canvas {
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   prominent start button
   ========================================================================== */

.btn--start {
  background: var(--gradient-accent);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
  transition: all 0.2s ease;
}

.btn--start:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
  transform: translateY(-1px);
}

.btn--start:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* ==========================================================================
   lobby / waiting state
   ========================================================================== */

.lobby {
  text-align: center;
  padding: var(--space-xl) 0;
}

.lobby__icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

.lobby__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.lobby__subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.lobby__participants {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.lobby__participant {
  padding: 0.5rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   room / active blitz
   ========================================================================== */

.room {
  text-align: center;
  padding: var(--space-lg) 0;
}

.room__partner {
  margin-bottom: var(--space-lg);
}

.room__partner-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.room__partner-name {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.room__partner-intro {
  font-size: 1.125rem;
  color: var(--text-secondary);
  font-style: italic;
  max-width: 400px;
  margin: 0 auto;
}

.room__timer {
  margin: var(--space-xl) 0;
}

.room__timer-value {
  font-size: clamp(4rem, 15vw, 8rem);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.room__timer-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: var(--space-sm);
}

.room__timer--warning .room__timer-value {
  color: #ef4444;
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.room__progress {
  margin: var(--space-lg) 0;
}

.room__progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.room__progress-fill {
  height: 100%;
  background: var(--gradient-accent);
  transition: width 1s linear;
}

.room__progress-text {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.room__notes {
  margin-top: var(--space-lg);
  text-align: left;
}

.room__notes-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.room__notes-input {
  width: 100%;
  min-height: 100px;
  padding: var(--space-sm);
  font-family: var(--font-family);
  font-size: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  resize: vertical;
}

.room__notes-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* paused state */
.room--paused .room__timer-value {
  color: var(--text-muted);
}

.room__paused-message {
  padding: var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

/* round transition */
.room__transition {
  padding: var(--space-xl) 0;
  text-align: center;
}

.room__transition-message {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.room__transition-next {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   dashboard (organizer) - compact single column
   ========================================================================== */

.dashboard {
  max-width: 520px;
  margin: 0 auto;
}

.dashboard__controls {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.dashboard__controls .btn {
  flex: 1;
  min-width: 120px;
}

.dashboard__status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.dashboard__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.dashboard__status-dot--active {
  background: #22c55e;
  animation: pulse-dot 2s ease-in-out infinite;
}

.dashboard__status-dot--lobby {
  background: #f59e0b;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.dashboard__status-dot--paused {
  background: #f59e0b;
}

.dashboard__status-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.dashboard__round-info {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
}

/* attendee list */
.attendee-list {
  list-style: none;
}

.attendee-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.attendee-item:last-child {
  border-bottom: none;
}

.attendee-item__info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.attendee-item__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.attendee-item__status--active {
  background: #22c55e;
}

.attendee-item__status--dropped {
  background: #ef4444;
}

.attendee-item__name {
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.attendee-item__intro {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.attendee-item__actions {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.attendee-item:hover .attendee-item__actions {
  opacity: 1;
}

.attendee-item__remove {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: #ef4444;
  background: transparent;
  border: 1px solid #ef4444;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.attendee-item__remove:hover {
  background: #ef4444;
  color: white;
}

/* ==========================================================================
   recap page
   ========================================================================== */

.recap {
  max-width: 600px;
  margin: 0 auto;
}

.recap__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.recap__title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.recap__subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
}

.recap__stat {
  color: var(--accent);
  font-weight: 600;
}

.recap__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.recap__item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.recap__item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.recap__item-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.recap__item-round {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-primary);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.recap__item-intro {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.recap__item-notes {
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg-primary);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.recap__item-notes-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

/* powered by */
.powered-by {
  text-align: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.powered-by__badge {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.powered-by__cta {
  font-size: 1rem;
  color: var(--accent);
  font-weight: 500;
}

/* ==========================================================================
   utility classes
   ========================================================================== */

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

.hidden { display: none !important; }

/* loading spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

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

/* alert/message */
.alert {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  margin-bottom: var(--space-md);
}

.alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.alert--success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
}

@media (prefers-color-scheme: dark) {
  .alert--error {
    background: #450a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
  }
  
  .alert--success {
    background: #052e16;
    border-color: #166534;
    color: #86efac;
  }
}