/* Site layout only. The canvas remains the original 800 x 400 logical world. */
body { flex-direction: column; min-height: 100%; height: auto; }
.site-header { flex: 0 0 auto; font-size: 16px; }
.cabinet { flex: 0 0 auto; margin: auto; }
.arcade-return { margin: 0 0 12px; font-size: 18px; }
.arcade-return a { color: var(--feather); text-underline-offset: 3px; }
.lbEntry[hidden] { display: none; }
#lbStatus { font-size: 16px; }
#lbStatus:empty { display: none; }
#lbList { touch-action: pan-y; }
#lbCard::after { content: 'Weekly scores · resets Monday (UTC)'; font-size: 15px; opacity: .75; }
/* Overlays must fit even when the portrait canvas is only 170px tall. */
@media (max-width: 640px) {
  #overCard:not([hidden]), #lbCard:not([hidden]) {
    position: fixed; z-index: 60; inset: 0;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    overflow-y: auto; justify-content: safe center; touch-action: pan-y; background: rgba(29,20,20,.97);
  }
  #startCard { padding: 10px; gap: 8px; }
  #startCard .startText { gap: 6px; }
  #startCard h2 { font-size: 26px; }
  #startCard .cta { font-size: 22px; padding: 6px 22px; margin-top: 2px; }
}
/* Same short-landscape intent as Whack-a-Rooster. Desktop keeps site navigation. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1000px),
       (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .site-header, .arcade-return, .cabinet > h1, .hint { display: none; }
  .cabinet .keys { display: none; }
  #startCard h2 { font-size: 34px; }
  .cabinet {
    --dash-pad-height: 0px;
    width: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 60px - var(--dash-pad-height)) * 2 + 24px));
    padding: 4px max(6px, env(safe-area-inset-right)) 8px max(6px, env(safe-area-inset-left));
  }
  .hud { gap: 4px 10px; margin-bottom: 4px; flex-wrap: nowrap; }
  .stat { gap: 5px; font-size: 17px; }
  .stat b { font-size: 24px; }
  .ghost { font-size: 16px; padding: 3px 8px; }
  .pad { margin-top: 6px; gap: 12px; }
  .pad button { height: 44px; font-size: 23px; }
  #overCard, #lbCard { gap: 5px; padding: 8px; overflow-y: auto; }
  #overCard:not([hidden]), #lbCard:not([hidden]) { position: fixed; z-index: 60; inset: 0; justify-content: safe center; touch-action: pan-y; background: rgba(29,20,20,.97); }
  #overCard h2, #lbCard h2 { font-size: 28px; }
  #overCard .big { font-size: 34px; }
  #overCard p { font-size: 17px; }
  .lbEntry { gap: 4px; }
  .ctaRow { margin-top: 0; }
  .ctaRow .cta { font-size: 20px; padding: 5px 18px; }
  #lbCard .lbList { flex: 1; min-height: 0; }
  #lbCard > .cta { font-size: 20px; padding: 4px 20px; }
}
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .cabinet { --dash-pad-height: 50px; }
}

/* Phone portrait only: remove flex auto-margin centering and give the start
   copy the frame's full width, including phones wider than the old 640px cut-off. */
@media (orientation: portrait) and (max-width: 760px) {
  .cabinet { margin: 6px auto 0; padding: 4px 10px 8px; }
  .arcade-return { margin-bottom: 5px; font-size: 16px; line-height: 1.2; }
  .cabinet > h1 { font-size: clamp(26px, 4.8vw, 34px); line-height: 1.1; margin-bottom: 7px; }
  .hud { gap: 4px 12px; margin-bottom: 6px; }
  #startCard { padding: 6px 10px; gap: 0; }
  #startCard .hero, #startCard .keys { display: none; }
  #startCard .startText { width: 100%; max-width: 440px; gap: 5px; }
  #startCard h2 { font-size: clamp(20px, 4vw, 28px); line-height: 1.1; }
  #startCard p { font-size: clamp(13px, 2.4vw, 17px); line-height: 1.15; }
  #startCard .cta { min-height: 44px; margin-top: 2px; padding: 6px 20px; font-size: 22px; line-height: 1.1; flex-shrink: 0; }
  .pad { margin-top: 8px; }
  .hint { margin-top: 7px; font-size: 14px; line-height: 1.2; text-wrap: balance; }
}

/* Touch landscape: budget actual viewport space, including safe areas. */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  html { height: 100dvh; padding: 0; overflow: hidden; }
  body {
    height: 100dvh; min-height: 0; overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .cabinet {
    --landscape-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    width: 100%; height: var(--landscape-height); margin: 0; padding: 2px 4px;
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 28px minmax(0, 1fr) 44px; gap: 4px;
  }
  .hud { width: 100%; max-width: 800px; justify-self: center; margin: 0; gap: 4px; line-height: 1; }
  .stat { font-size: 15px; gap: 4px; }
  .stat b { font-size: 22px; }
  .ghost { font-size: 15px; line-height: 1; padding: 4px 7px; }
  .stage {
    width: min(100%, calc((var(--landscape-height) - 88px) * 2 + 4px));
    align-self: center; justify-self: center; border-width: 2px; outline: none;
  }
  .pad { display: flex; margin: 0; gap: 8px; }
  .pad button { height: 44px; min-width: 0; font-size: 22px; line-height: 1; }
  #jumpBtn, #duckBtn { box-shadow: none; }
  .cabinet > .sr-only { grid-column: 1; }
}
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) and (min-aspect-ratio: 2/1) {
  .cabinet { grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: 28px minmax(0, 1fr); }
  .hud { grid-column: 1 / -1; grid-row: 1; }
  .stage { grid-column: 2; grid-row: 2; width: min(100%, calc((var(--landscape-height) - 40px) * 2 + 4px)); }
  .pad { display: contents; }
  .pad button { grid-row: 2; width: 56px; height: 64px; align-self: end; font-size: 20px; }
  #jumpBtn { grid-column: 1; }
  #duckBtn { grid-column: 3; }
}