*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #1a1a2e;
  color: #e0e0e0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 2rem 1rem;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 420px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

h1 {
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: #a0c4ff;
}

.n-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.n-control select {
  background: #16213e;
  color: #e0e0e0;
  border: 1px solid #334;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}

.n-control select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Grid */
#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 360px;
}

.cell {
  aspect-ratio: 1;
  background: #16213e;
  border: 2px solid #334;
  border-radius: 10px;
  transition: background 0.1s, border-color 0.1s;
}

.cell.active {
  background: #4a9eff;
  border-color: #7bbfff;
  box-shadow: 0 0 18px #4a9eff88;
}

.cell-empty {
  aspect-ratio: 1;
}

/* Response buttons */
#buttons {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  max-width: 300px;
}

.response-btn {
  flex: 1;
  padding: 1rem 0.5rem;
  background: #16213e;
  color: #e0e0e0;
  border: 2px solid #334;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
}

.response-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.response-btn:not(:disabled):hover {
  border-color: #556;
}

.btn-icon {
  font-size: 2rem;
  line-height: 1;
}

.key-hint {
  font-size: 1.1rem;
  font-weight: bold;
  color: #a0c4ff;
}

.response-btn.pressed {
  background: #1e3a5f;
  border-color: #4a9eff;
}

.response-btn.correct {
  background: #1a3d2b;
  border-color: #4caf50;
  box-shadow: 0 0 12px #4caf5066;
}

.response-btn.incorrect {
  background: #3d1a1a;
  border-color: #e57373;
  box-shadow: 0 0 12px #e5737366;
}

/* Trial info */
#trial-info {
  font-size: 0.9rem;
  color: #888;
}

/* Scoreboard */
#scoreboard {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.85rem;
}

.score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.score-label {
  color: #888;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.score-row {
  display: flex;
  gap: 0.6rem;
}

.score-row span { color: #ccc; }

.score-divider {
  width: 1px;
  height: 36px;
  background: #334;
}

/* Results */
#results {
  width: 100%;
  background: #16213e;
  border: 1px solid #334;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

#results h2 {
  margin-bottom: 0.75rem;
  color: #a0c4ff;
}

#btn-restart {
  width: 100%;
  padding: 0.85rem;
  background: #4a9eff;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  transition: background 0.15s;
}

#btn-restart:hover { background: #3a8eef; }
#btn-restart:active { background: #2a7edf; }

#results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#results-table th, #results-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #223;
}

#results-table th {
  color: #888;
  font-weight: normal;
  font-size: 0.8rem;
  text-transform: uppercase;
}

#results-table td:first-child { text-align: left; color: #a0c4ff; }
#results-table td:last-child { font-weight: bold; }

/* Trial log */
#trial-log {
  margin-top: 1.25rem;
  border-top: 1px solid #334;
  padding-top: 0.75rem;
}

#log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

#log-table th {
  color: #888;
  font-weight: normal;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #334;
}

#log-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #1a2040;
  text-align: center;
}

.log-letter { font-weight: bold; color: #a0c4ff; }
.log-pos    { color: #ccc; }

.outcome-hit     { color: #4caf50; font-weight: bold; }
.outcome-miss    { color: #e57373; }
.outcome-fa      { color: #ffb74d; }
.outcome-cr      { color: #445; }
.outcome-warmup  { color: #445; font-style: italic; }

.hidden { display: none; }

/* Start button */
#controls { width: 100%; max-width: 300px; }

#btn-start {
  width: 100%;
  padding: 0.85rem;
  background: #4a9eff;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.15s;
}

#btn-start:hover { background: #3a8eef; }
#btn-start:active { background: #2a7edf; }