/* Scoped shared CSS layer for four mobile games */
/* Native system sans stack */
main, header, .hud, .eyebrow, h1, #start, #sound, #pause, #panel, #overlay {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Primary start button: 52px min height, 16px/700, 14px radius, inset highlight, 3px lower shadow */
#start {
  min-height: 52px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 0 rgba(0,0,0,0.12);
  transition: transform 0.1s ease;
}

#start:active {
  transform: translateY(1px);
}

/* Reduced motion: no transform on press */
@media (prefers-reduced-motion: reduce) {
  #start:active {
    transform: none;
  }
}

/* Pause and sound buttons: min 44px */
#pause, #sound {
  min-height: 44px;
  min-width: 44px;
}

/* HUD: small 11px min via clamp, tabular score numbers, no expanded margins */
.hud small {
  font-size: clamp(11px, 2.8vw, 12px);
  font-variant-numeric: tabular-nums;
}

/* Menu titles: balanced wrap, existing size preserved */
#panel h1, #overlay h1 {
  text-wrap: balance;
}

/* Menu copy: line-height 1.45 */
#panel p, #overlay p, #panel .eyebrow, #overlay .eyebrow {
  line-height: 1.45;
}

/* Focus-visible high contrast outline */
#start:focus-visible, #pause:focus-visible, #sound:focus-visible, #panel a:focus-visible, #overlay a:focus-visible {
  outline: 2px solid #fff1cf;
  outline-offset: 2px;
}

/* Hide footer only (decorative prototype branding) */
footer:not(:has(button)) {
  display: none;
}

/* Short viewport: primary min 44px, padding 10px 14px */
@media (max-height: 540px) {
  #start {
    min-height: 44px;
    padding: 10px 14px;
  }
}

/* #overlay and #panel: touch-action pan-y, overscroll-behavior contain */
#overlay, #panel {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Existing [hidden] rules remain effective; no overrides */
.hud strong{font-variant-numeric:tabular-nums}