/* Scoped repair: retain the original palette and shape artwork. */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
canvas { touch-action: none; }
button, a, input { touch-action: manipulation; }
button, #toolbar a { min-height: 44px; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid #facc15; outline-offset: 2px; }
#toolbar { position: fixed; z-index: 15; inset: 8px 10px auto; display: flex; align-items: center; justify-content: center; gap: 8px; }
#toolbar button, #toolbar a, #pieceButtons button { border: 1px solid var(--border); border-radius: 12px; background: #17243b; color: var(--text); padding: 8px 10px; font: inherit; font-weight: 750; }
#toolbar a { display: inline-flex; align-items: center; text-decoration: none; }
#roundLabel { font-size: 14px; white-space: nowrap; }
#hud { top: 60px; width: max-content; max-width: calc(100% - 20px); overflow: visible; padding: 8px; gap: 6px; font-size: 14px; }
.pill { padding: 6px; gap: 4px; }
.pill strong { font-size: 16px; }
#msg { display: none; }
#placementControls { position: fixed; z-index: 12; bottom: max(10px, env(safe-area-inset-bottom)); left: 12px; right: 12px; text-align: center; }
#pieceButtons { display: flex; gap: 8px; max-width: 520px; margin: auto; }
#pieceButtons button { flex: 1; min-width: 0; font-size: 14px; }
#pieceButtons button[aria-pressed="true"] { border: 2px solid #facc15; background: #334155; }
button:disabled { opacity: .45; cursor: default; }
#inputHelp, #placementStatus { margin: 7px auto 0; max-width: 580px; line-height: 1.35; font-size: 12px; }
#placementStatus { min-height: 34px; color: #fef08a; }
body:not(.playing) #placementControls { display: none; }
.overlay { overflow-y: auto; padding: 16px; touch-action: pan-y; }
.popup { max-height: 100%; overflow-y: auto; }
.popup h2 { font-size: 24px; }
.popup p { line-height: 1.45; margin-bottom: 12px; }
.popup .controlHint { font-size: 13px; }
.soundChoice { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-bottom: 12px; font-size: 14px; }
.soundChoice input { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 350px) {
  #toolbar { gap: 5px; }
  #toolbar button, #toolbar a { padding: 7px; font-size: 13px; }
  #roundLabel { font-size: 12px; }
  #hud { font-size: 12px; }
  .pill strong { font-size: 14px; }
  .chip { font-size: 13px; padding: 6px 8px; }
  .popup { padding: 14px; }
}
@media (orientation: landscape) and (min-width: 620px) and (max-height: 600px) {
  #placementControls { left: 55%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}