/* ui.css — layout & panel styles aligned with Figma layout */

.container {
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 16px;
}

.top-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.panel {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-6);
  overflow: hidden;
  padding: var(--space-4);
}

.play-panel {
  text-align: center;
  margin: var(--space-8) 0;
}

.years-panel {
  margin: var(--space-6) 0;
}

.answer-panel {
  margin: var(--space-6) 0;
}

.auth-panel,
.leaderboard-panel {
  flex: 1;
  min-width: 280px;
}

.auth-panel .panel-head,
.leaderboard-panel .panel-head {
  /* example styling for header inside auth/leaderboard panels */
  font-weight: bold;
  color: var(--brand);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 768px) {
  .top-row {
    flex-direction: column;
  }
}