.home-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-actions > :not(.secondary) { grid-column: 1 / -1; }
.home-actions > .secondary {
  min-width: 0;
  padding-inline: clamp(10px, 3vw, 18px);
  font-size: clamp(13px, 4.2vw, 17px);
  gap: 5px;
  white-space: nowrap;
}
.home-actions > .secondary b { color: var(--cov-mint); font-size: 19px; }
.home-actions > [data-mode="tutorial"] {
  background: #142932f5;
  box-shadow: inset 3px 0 var(--cov-gold), inset 0 0 0 1px #5a655f;
}
.home-actions > [data-mode="tutorial"] b { color: var(--cov-gold); }

.app[data-tutorial] :is(#scoreboard, #play-hud, #control-hint) { display: none !important; }
#tutorial-panel {
  --tutorial-accent: var(--cov-mint);
  position: absolute;
  z-index: 4;
  top: calc(var(--safe-top) + 8px);
  left: max(calc(var(--safe-left) + 9px), calc(50% - 255px));
  right: max(calc(var(--safe-right) + 61px), calc(50% - 200px));
  padding: 3px 10px 7px;
  border: 1px solid var(--cov-rim);
  border-left: 3px solid var(--tutorial-accent);
  border-radius: 5px;
  background: #0b1b22f5;
  box-shadow: 0 4px 15px #07151b69;
  color: var(--cov-paper);
  pointer-events: none;
}
#tutorial-panel[data-state="ready"] { --tutorial-accent: var(--cov-gold); }
#tutorial-panel[data-state="retry"] { --tutorial-accent: #ffa68f; }
.tutorial-heading { display: flex; justify-content: space-between; align-items: start; gap: 9px; }
.tutorial-heading-text { min-width: 0; padding-block: 3px; }
.tutorial-skips { flex: none; display: grid; gap: 4px; }
#tutorial-progress {
  display: block;
  color: var(--tutorial-accent);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
#tutorial-title { margin: 1px 0 0; font-size: 17px; line-height: 1.2; }
#tutorial-panel p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
#tutorial-panel #tutorial-hint { color: var(--cov-muted); }
#tutorial-panel[data-state="ready"] #tutorial-hint { color: #fff1c8; font-weight: 750; }
#tutorial-panel[data-state="retry"]:has(#tutorial-feedback:not(:empty)) #tutorial-hint { display: none; }
#tutorial-panel #tutorial-feedback { color: var(--tutorial-accent); font-weight: 750; }
#tutorial-panel p:empty { display: none; }
.tutorial-actions { display: flex; gap: 6px; }
#tutorial-panel button {
  min-height: 44px;
  border: 1px solid #5e807e;
  border-radius: 4px;
  padding: 0 8px;
  color: var(--cov-paper);
  background: var(--cov-control);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  pointer-events: auto;
}
#tutorial-panel #tutorial-skip { color: var(--cov-muted); background: #102831; }
.tutorial-actions button { flex: 1; margin-top: 6px; }
#tutorial-panel #tutorial-next, #tutorial-panel #tutorial-retry {
  background: var(--tutorial-accent);
  color: var(--cov-ink);
  border-color: var(--tutorial-accent);
}
#tutorial-panel[data-state="active"][data-ready] #tutorial-hint {
  color: #adfff0;
  font-weight: 800;
}
@media (orientation: landscape) {
  #tutorial-panel {
    left: calc(var(--safe-left) + 9px);
    right: auto;
    width: min(365px, 39vw);
  }
  .home-actions > .secondary { padding-inline: clamp(7px, 1.4vw, 16px); }
}