#play-wrap { position: relative; }
#overlay { display: none; position: absolute; inset: 0; background: var(--overlay-bg); border-radius: 12px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; z-index: 10; padding: 16px 12px; }
#overlay.show { display: flex; }
#overlay-title { font-size: 36px; font-weight: 500; color: var(--text); }
#overlay-sub { font-size: 15px; color: var(--text-muted); text-align: center; max-width: 92%; line-height: 1.45; }
#score-result { font-size: 22px; font-weight: 600; color: var(--text); text-align: center; margin-top: 4px; }
#score-result[hidden] { display: none; }
#overlay-extra { width: 100%; max-width: 420px; }
#overlay-extra[hidden] { display: none; }
#overlay-dynamic:empty { display: none; }

#start-controls[hidden] { display: none; }
#start-controls { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.start-control-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); padding: 10px; }
.start-control-text { display: flex; flex-direction: column; gap: 2px; }
.start-control-title { font-size: 14px; font-weight: 600; color: var(--text); }
.start-control-sub { font-size: 12px; color: var(--text-muted); line-height: 1.35; }

.palette-list { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.palette-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); padding: 10px; cursor: pointer; }
.palette-option.active { box-shadow: inset 0 0 0 2px var(--match-border); }
.palette-name { font-size: 14px; font-weight: 600; min-width: 88px; text-align: left; }
.palette-preview { display: grid; grid-template-columns: repeat(3, 14px); grid-template-rows: repeat(3, 14px); gap: 3px; }
.preview-cell { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.2); }

#solution-btn,
#retry-btn,
#restart-btn,
#home-btn { margin-top: 8px; padding: 10px 24px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 15px; cursor: pointer; color: var(--text); }
#solution-btn { margin-top: 0; }
#solution-btn:hover,
#restart-btn:hover,
#home-btn:hover { background: var(--hover-bg); }

#restart-btn.primary {
  background: var(--n1-bg);
  color: #fff;
  border-color: color-mix(in srgb, var(--n1-bg), #000 15%);
  font-size: 17px;
  font-weight: 600;
  padding: 14px 36px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--n1-bg), transparent 55%);
}
#restart-btn.primary:hover { filter: brightness(1.08); background: var(--n1-bg); }

@media (max-width: 420px) {
  #overlay.show { position: static; justify-content: flex-start; }
  #play-wrap:has(#overlay.show) #play-area { display: none; }
  #overlay-extra { max-width: 100%; }
  #overlay-title { font-size: 28px; }
}