* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #181a1f; color: #e7e7ea; }
header { padding: 16px 20px; border-bottom: 1px solid #2a2d35; background: #14161b; }
h1 { margin: 0 0 8px; font-size: 18px; letter-spacing: 0.04em; }
.controls { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.controls label { display: flex; gap: 6px; align-items: center; }
.controls select, .controls button { background: #232631; color: #e7e7ea; border: 1px solid #3a3d47; border-radius: 4px; padding: 4px 8px; font: inherit; cursor: pointer; }
.controls button:hover { background: #2c303d; }
#oct-label { display: inline-block; min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.status { margin-left: auto; color: #9aa0aa; font-size: 12px; }
.status.ready { color: #5dd58e; }
.status.error { color: #ff6b6b; }

main { padding: 24px 20px; max-width: 1100px; margin: 0 auto; }
.keyboard { position: relative; height: 220px; background: #0c0d11; border-radius: 8px; border: 1px solid #2a2d35; overflow: hidden; user-select: none; }
.key { position: absolute; top: 0; bottom: 0; cursor: pointer; }
.key.white { background: linear-gradient(#f6f6f6, #d9d9dc); border-right: 1px solid #c0c0c4; }
.key.white.active { background: linear-gradient(#dfe7ff, #b9c8ee); }
.key.black { background: linear-gradient(#1f2128, #0d0e12); width: 26px; height: 60%; border: 1px solid #000; border-radius: 0 0 4px 4px; z-index: 2; }
.key.black.active { background: linear-gradient(#3a4a7a, #1d2542); }
.key .label { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 10px; color: #555; }
.key.black .label { color: #ccc; }
.key.sampled .label { color: #2a8542; font-weight: 600; }
.key.black.sampled .label { color: #79e8a0; }

.help { color: #9aa0aa; font-size: 12px; margin-top: 12px; line-height: 1.6; }
kbd { background: #232631; border: 1px solid #3a3d47; border-radius: 3px; padding: 1px 6px; font-family: ui-monospace, monospace; font-size: 11px; }
.pack-info { margin-top: 16px; color: #9aa0aa; font-size: 11px; white-space: pre-wrap; background: #14161b; padding: 12px; border-radius: 6px; border: 1px solid #2a2d35; }

/* View navigation */
.view-tag { color: #9aa0aa; font-size: 12px; font-weight: 400; letter-spacing: 0.05em; margin-left: 6px; }
.view-nav { display: flex; gap: 0; border: 1px solid #3a3d47; border-radius: 4px; overflow: hidden; font-size: 12px; }
.view-nav a, .view-nav span { padding: 4px 10px; color: #c0c4cc; text-decoration: none; }
.view-nav a:hover { background: #2c303d; }
.view-nav .active { background: #3a8acf; color: #fff; cursor: default; }

/* Pads grid */
.pad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  background: #0c0d11;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #2a2d35;
}
.pad {
  position: relative;
  aspect-ratio: 1;
  background: var(--pad-bg, #232631);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  color: #e7e7ea;
  cursor: pointer;
  font: inherit;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  transition: background-color 80ms ease, transform 80ms ease, border-color 80ms ease;
  overflow: hidden;
}
.pad:hover { border-color: rgba(255,255,255,0.2); }
.pad.active {
  background: var(--pad-bg-active, #3a8acf);
  transform: scale(0.97);
  border-color: var(--pad-accent, #fff);
}
.pad-instrument {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pad-accent, #c0c4cc);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pad-note {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.pad-key {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  opacity: 0.7;
}

/* Quiz */
.status.ready { color: #5dd58e; }
.quiz-stage { display: flex; flex-direction: column; gap: 18px; }
.quiz-stage.hidden { display: none; }
.tier-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tier-cell {
  flex: 1 1 140px;
  background: #14161b;
  border: 1px solid #2a2d35;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: #9aa0aa;
}
.tier-cell.used { opacity: 0.45; }
.tier-cell.current {
  border-color: #3a8acf;
  background: #1a2536;
  color: #e7e7ea;
  box-shadow: 0 0 0 2px rgba(58,138,207,0.15);
}
.tier-num { font-weight: 600; font-size: 13px; }
.tier-points {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: #79b3e0;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.tier-cell.used .tier-points { color: #6a737a; }
.tier-cell.current .tier-points { color: #c8e0f5; }

.play-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.big-btn {
  background: #2c303d;
  border: 1px solid #3a3d47;
  color: #e7e7ea;
  padding: 12px 24px;
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.1s;
}
.big-btn:hover:not(:disabled) { background: #3a4055; }
.big-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.link-btn {
  background: none; border: none; color: #79b3e0; font: inherit; font-size: 13px;
  cursor: pointer; padding: 4px 0; text-decoration: underline;
}
.link-btn:hover:not(:disabled) { color: #a8d0ed; }
.link-btn:disabled { color: #4a5868; text-decoration: none; cursor: not-allowed; }

.choices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.choice-btn {
  padding: 16px 14px;
  background: #232631;
  border: 1px solid #3a3d47;
  color: #e7e7ea;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.1s, border-color 0.1s;
}
.choice-btn:hover:not(:disabled) { background: #2c303d; border-color: #79b3e0; }
.choice-btn:disabled { cursor: default; opacity: 0.7; }
.choice-btn.correct {
  background: #1f3d2a;
  border-color: #5dd58e;
  color: #c8f0d3;
}
.choice-btn.wrong {
  background: #3a1f1f;
  border-color: #d35d5d;
  color: #f0c8c8;
}

.round-result { font-size: 14px; min-height: 20px; }
.round-result.good { color: #5dd58e; }
.round-result.warn { color: #f6c177; }
.round-result.bad  { color: #d35d5d; }

.final-score { font-size: 36px; font-weight: 700; margin: 12px 0 24px; }

/* Quiz: guess input + autocomplete */
.guess-area { margin-top: 8px; }
.autocomplete-wrap { position: relative; max-width: 520px; }
#guess-input {
  width: 100%;
  background: #14161b;
  border: 1px solid #3a3d47;
  color: #e7e7ea;
  padding: 14px 16px;
  border-radius: 6px;
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.1s, background-color 0.2s;
}
#guess-input:focus { border-color: #79b3e0; }
#guess-input:disabled { opacity: 0.6; cursor: not-allowed; }
#guess-input.wrong-flash {
  animation: wrong-flash 0.35s ease;
  border-color: #d35d5d;
}
@keyframes wrong-flash {
  0% { background: #14161b; }
  30% { background: #3a1f1f; }
  100% { background: #14161b; }
}
.suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: #1a1d24;
  border: 1px solid #3a3d47;
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.suggestions.hidden { display: none; }
.suggestions li {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
}
.suggestions li:hover, .suggestions li.active {
  background: #2c303d;
  color: #c8e0f5;
}

/* Status pills */
.status.warn { color: #f6c177; }

/* Quiz: start screen grid (with scoreboards) */
.start-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 280px;
  grid-template-rows: auto auto;
  gap: 16px;
  align-items: start;
  margin-top: 24px;
}
.start-grid .start-card {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  margin: 0;
}
.start-grid .scoreboard-personal {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: none;  /* the personal sb actually goes left of the card on wide screens */
}
.start-grid .scoreboard-stack {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1100px) {
  .start-grid {
    grid-template-columns: 240px minmax(420px, 1fr) 280px;
  }
  .start-grid .scoreboard-personal {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: block;
  }
  .start-grid .start-card {
    grid-column: 2 / 3;
  }
  .start-grid .scoreboard-stack {
    grid-column: 3 / 4;
  }
}

/* Field (label + input) */
.field-label {
  display: block;
  color: #9aa0aa;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
#player-name {
  width: 100%;
  background: #14161b;
  border: 1px solid #3a3d47;
  color: #e7e7ea;
  padding: 10px 12px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  margin-bottom: 16px;
}
#player-name:focus { border-color: #79b3e0; outline: none; }

/* Scoreboards */
.scoreboard {
  background: #14161b;
  border: 1px solid #2a2d35;
  border-radius: 8px;
  padding: 14px 16px;
}
.scoreboard h3 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #79b3e0;
  text-transform: uppercase;
}
.scoreboard-sub {
  font-size: 10px;
  color: #6a737a;
  margin-top: -6px;
  margin-bottom: 8px;
}
.score-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.score-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid #2a2d35;
  font-size: 13px;
}
.score-list li:last-child { border-bottom: none; }
.score-list li.empty {
  color: #6a737a;
  font-style: italic;
  padding: 8px 0;
  font-size: 12px;
}
.score-points { font-weight: 600; color: #e7e7ea; font-variant-numeric: tabular-nums; min-width: 42px; display: inline-block; }
.score-meta { color: #6a737a; font-size: 11px; }
.score-leader {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}
.score-name {
  color: #c0c4cc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.big-score { display: flex; flex-direction: column; gap: 2px; }
.big-score-points {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #5dd58e;
}
.big-score-meta {
  font-size: 11px;
  color: #9aa0aa;
}
.big-score-empty {
  font-size: 24px;
  color: #3a3d47;
}

/* ----- Catalogue editor ----- */

.catalogue-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 0 12px;
  border-bottom: 1px solid #2a2d35;
  margin-bottom: 16px;
}
.catalogue-meta {
  margin-left: auto;
  color: #9aa0aa;
  font-size: 12px;
}
.ghost-btn {
  background: transparent;
  border: 1px solid #3a3d47;
  color: #c0c4cc;
  padding: 7px 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ghost-btn:hover { background: #232631; border-color: #79b3e0; color: #e7e7ea; }
.ghost-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.catalogue-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 100px;  /* room for sticky save bar */
}
.catalogue-card {
  background: #14161b;
  border: 1px solid #2a2d35;
  border-radius: 8px;
  overflow: hidden;
}
.catalogue-card.collapsed .card-body { display: none; }
.card-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  gap: 12px;
}
.card-header:hover { background: #1a1d24; }
.card-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.card-toggle { color: #6a737a; font-size: 11px; }
.card-title-display {
  font-weight: 600;
  font-size: 15px;
  color: #e7e7ea;
}
.card-tier-count, .card-status {
  font-size: 12px;
  color: #9aa0aa;
}
.card-pills { display: flex; gap: 6px; }
.card-body { padding: 6px 16px 16px; border-top: 1px solid #2a2d35; }
.card-body-inner { display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }

/* Card form fields */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.field { display: flex; flex-direction: column; }
.field-wide { grid-column: 1 / -1; }
.field input, .field select {
  background: #0c0d11;
  border: 1px solid #3a3d47;
  color: #e7e7ea;
  padding: 7px 10px;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}
.field input:focus, .field select:focus { border-color: #79b3e0; outline: none; }
.field input[readonly] { color: #6a737a; background: #14161b; cursor: not-allowed; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 7px 0;
}

fieldset.settings-fieldset, fieldset.tiers-fieldset, fieldset.log-fieldset {
  border: 1px solid #2a2d35;
  border-radius: 6px;
  padding: 12px 16px 16px;
  margin: 0;
}
fieldset legend {
  color: #79b3e0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 6px;
}

.prompts-section {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prompts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prompt-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 8px;
}
.prompt-row input {
  background: #0c0d11;
  border: 1px solid #3a3d47;
  color: #e7e7ea;
  padding: 6px 10px;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}
.prompt-row input:focus { border-color: #79b3e0; outline: none; }

/* Tier editor rows */
.tiers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tier-row-edit {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 12px;
  background: #0c0d11;
  border: 1px solid #2a2d35;
  border-radius: 4px;
  padding: 10px 12px;
}
.tier-row-num {
  font-size: 12px;
  color: #79b3e0;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tier-row-stems {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.stem-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #c0c4cc;
  cursor: pointer;
}
.stem-check input { accent-color: #3a8acf; }
.tier-row-controls {
  display: flex;
  gap: 4px;
}
.icon-btn {
  background: #1a1d24;
  border: 1px solid #3a3d47;
  color: #c0c4cc;
  padding: 4px 8px;
  border-radius: 3px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.icon-btn:hover { background: #2c303d; }
.icon-btn:disabled { opacity: 0.5; cursor: progress; }

/* Tier preview play/stop button — slightly more prominent than the
   reorder/delete icons so it reads as the primary tier action. */
.tier-preview {
  min-width: 32px;
  font-size: 12px;
  color: #79b3e0;
  border-color: #2d4a66;
}
.tier-preview:hover:not(:disabled) {
  background: #1a2536;
  border-color: #79b3e0;
  color: #c8e0f5;
}
.tier-preview.playing {
  background: #3a1f1f;
  border-color: #d35d5d;
  color: #f0c8c8;
  animation: pulse 1.6s infinite;
}

.ingestion-log {
  background: #0c0d11;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 0;
  font-size: 11px;
  color: #c0c4cc;
  overflow-x: auto;
  font-family: ui-monospace, Consolas, monospace;
  line-height: 1.5;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.card-action-spacer { flex: 1; }
.delete-song-btn { color: #d35d5d; }
.delete-song-btn:hover:not(:disabled) { color: #f5a4a4; }

/* Job log panel inside a card */
.job-log-panel {
  margin-top: 8px;
  background: #0c0d11;
  border: 1px solid #2a2d35;
  border-radius: 4px;
  padding: 8px 12px;
  max-height: 220px;
  overflow-y: auto;
}
.job-log-content {
  margin: 0;
  font-size: 11px;
  font-family: ui-monospace, Consolas, monospace;
  color: #c0c4cc;
  white-space: pre-wrap;
  word-break: break-word;
}
.job-log-toggle {
  cursor: pointer;
  color: #79b3e0;
  font-size: 12px;
  user-select: none;
}
.job-log-toggle:hover { color: #c8e0f5; }

/* Status pills (status of an ingest job per card) */
.status-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-pill-idle    { background: #232631; color: #9aa0aa; }
.status-pill-queued  { background: #3a2d11; color: #f6c177; }
.status-pill-running { background: #1a2536; color: #79b3e0; animation: pulse 1.5s infinite; }
.status-pill-done    { background: #1f3d2a; color: #5dd58e; }
.status-pill-failed  { background: #3a1f1f; color: #d35d5d; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* Sticky save bar */
.sticky-save {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #14161b;
  border-top: 1px solid #2a2d35;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.4);
  z-index: 5;
}
.save-status {
  color: #9aa0aa;
  font-size: 12px;
}

/* Quiz: start screen */
.start-card {
  background: #14161b;
  border: 1px solid #2a2d35;
  border-radius: 10px;
  padding: 32px 36px;
  max-width: 560px;       /* matches .reveal-box and .gridfire-banner */
  margin: 32px auto;
  text-align: left;
}
.start-card h2 { margin-top: 0; font-size: 22px; }
.start-card p { color: #c0c4cc; font-size: 14px; }
.start-rules { color: #9aa0aa; font-size: 13px; margin: 12px 0 24px; padding-left: 20px; }
.start-rules li { margin: 4px 0; }

/* Quiz: reveal box (above tier row) */
.reveal-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  background: #0c0d11;
  border: 1px solid #2a2d35;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reveal-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}
.reveal-placeholder.hidden { display: none; }
.reveal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: reveal-fade 0.45s ease;
}
.reveal-img.hidden { display: none; }
.reveal-box.revealed-no-image::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  color: #5dd58e;
  background: rgba(20, 50, 30, 0.35);
  pointer-events: none;
}
@keyframes reveal-fade {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1.0); }
}

/* Countdown timer overlay */
.timer-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  pointer-events: none;
}
.timer-wrap.hidden { display: none; }
.timer-ring {
  position: relative;
  width: 86px;
  height: 86px;
  background: rgba(12, 13, 17, 0.78);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.timer-ring svg {
  width: 100%; height: 100%; display: block;
}
.timer-track {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 7;
}
.timer-progress {
  fill: none;
  stroke: #5dd58e;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke 0.2s;
}
.timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e7e7ea;
  font-family: ui-monospace, monospace;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ----- Site footer / Gridfire banner ----- */

.site-footer {
  margin-top: 56px;
  padding: 0 0 24px;
  display: flex;
  justify-content: center;
}
/* On the catalogue page, the sticky save bar overlays the bottom of the
   viewport — give the footer extra clearance so the banner can be scrolled
   into view above it. */
body:has(.sticky-save) .site-footer {
  padding-bottom: 96px;
}
/* When the start screen is the visible quiz stage, constrain the footer's
   horizontal extent to mirror the start-card's column in .start-grid.
   Without this the banner (centered in main) would extend past the start
   card and cross into the right scoreboard's column on desktop. The game
   and end stages don't trigger this rule, so their banner stays centered
   under the reveal-box as before. */
@media (min-width: 1100px) {
  body:has(#start.quiz-stage:not(.hidden)) .site-footer {
    /* Skip left scoreboard column (240) + gap (16) on the left, right
       scoreboard column (280) + gap (16) on the right. */
    padding-left: 256px;
    padding-right: 296px;
  }
}
@media (min-width: 720px) and (max-width: 1099px) {
  body:has(#start.quiz-stage:not(.hidden)) .site-footer {
    /* 2-col layout: start-card spans column 1; reserve column 2 (scoreboards). */
    padding-right: 296px;
  }
}
.gridfire-banner {
  display: block;
  width: 100%;
  /* Matches .reveal-box and .start-card max-widths so all three line up
     on desktop (start screen, in-round screen, footer). */
  max-width: 560px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #2a2d35;
  background: #0c0d11;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.gridfire-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  border-color: #3a8acf;
}
.gridfire-banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* The "Also from this developer" tag now sits as a header bar ABOVE the
   image rather than overlaying it, so it never covers the artwork. */
.gridfire-banner .banner-tag {
  display: block;
  background: #14161b;
  color: #9aa0aa;
  padding: 7px 14px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid #2a2d35;
}

/* ----- Mobile-friendly layout ----- */

@media (max-width: 720px) {
  /* Header: tighter padding, allow pills to wrap onto multiple rows */
  header { padding: 12px 14px; }
  h1 { font-size: 16px; }
  .view-tag { font-size: 11px; }
  .controls { gap: 10px 12px; font-size: 12px; }
  .status, .status-pill { font-size: 11px; }
  /* Hide the verbose pills on mobile; keep score visible */
  #player-pill { display: none !important; }
  #progress    { display: none !important; }

  main { padding: 16px 14px; }

  /* Start screen: single column, scoreboards last */
  .start-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    margin-top: 12px;
  }
  .start-grid .start-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .start-grid .scoreboard-personal {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    display: block !important;
  }
  .start-grid .scoreboard-stack {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    /* keep the inner flex column intact */
  }
  .start-card {
    padding: 18px 18px;
    margin: 0;
  }
  .start-card h2 { font-size: 18px; }
  .start-rules { font-size: 12px; }

  /* Reveal box: smaller cap so the keyboard input fits above the fold */
  .reveal-box {
    aspect-ratio: 4 / 3;
    max-width: 100%;
    max-height: 280px;
  }
  .timer-ring { width: 64px; height: 64px; }
  .timer-text { font-size: 18px; }
  .reveal-box.revealed-no-image::after { font-size: 64px; }

  /* Tier row: grid that auto-wraps tighter on narrow viewports */
  .tier-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
  }
  .tier-cell {
    flex: none;
    padding: 8px 8px;
    font-size: 11px;
  }
  .tier-num { font-size: 11px; }
  .tier-points { font-size: 11px; }

  /* Guess input: bigger touch target */
  #guess-input {
    font-size: 16px;        /* avoid iOS zoom-on-focus */
    padding: 12px 14px;
  }
  .suggestions li { padding: 12px 14px; font-size: 14px; }

  /* Big buttons sized for thumbs */
  .big-btn {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
  }
  .play-row { flex-direction: column; align-items: stretch; }

  /* Keyboard view (admin, but make it usable too) */
  .keyboard { height: 160px; }

  /* Pads view: smaller cells */
  .pad-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; padding: 6px; }
  .pad-note { font-size: 18px; }
  .pad-instrument { font-size: 9px; }

  /* Final score screen */
  .final-score { font-size: 28px; }
  .pack-info { font-size: 10px; }

  /* Help footer: tone down */
  .help { font-size: 11px; }

  /* Footer / banner: smaller margins on phones */
  .site-footer { margin-top: 32px; padding-bottom: 16px; }
  .gridfire-banner { border-radius: 6px; }
  .gridfire-banner .banner-tag { font-size: 9px; padding: 3px 7px; top: 6px; left: 6px; }
}

/* Very small phones (iPhone SE and below) */
@media (max-width: 380px) {
  main { padding: 12px 10px; }
  header { padding: 10px 10px; }
  .reveal-box { max-height: 220px; }
  .tier-row { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
  .start-card { padding: 14px 14px; }
}