/* Keep the last action readable independently of optional rules and tall
   bubble controls. Sticky is scoped to the existing compact sidebar only;
   it neither covers the board nor creates another game-wide notification. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 560px),
       (orientation: portrait) and (max-width: 639px) {
  .stage[data-screen="manual"] .manual-sidebar > .manual-message {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 22px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    background: #f4e8c4;
    box-shadow: 0 2px 0 #b7a472;
  }
}

/* Bubble play has two 44px action rows plus an ammo preview. Spend vertical
   space on those actual targets, not padding, so feedback does not push the
   hint/swap row under the fold at the supported 844x390 short viewport. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 560px) {
  .stage[data-screen="manual"] .manual-sidebar:has(.manual-ammo) { gap: 2px; }
  .stage[data-screen="manual"] .manual-sidebar:has(.manual-ammo) .manual-objective { padding-bottom: 2px; }
  .stage[data-screen="manual"] .manual-sidebar:has(.manual-ammo) .manual-objective strong,
  .stage[data-screen="manual"] .manual-sidebar:has(.manual-ammo) .manual-objective label b { font-size: 20px; }
  .stage[data-screen="manual"] .manual-sidebar:has(.manual-ammo) .manual-objective progress { height: 4px; }
  .stage[data-screen="manual"] .manual-sidebar:has(.manual-ammo) .manual-essential-controls { gap: 2px; }
  .stage[data-screen="manual"] .manual-ammo { height: 24px; }
  .stage[data-screen="manual"] .manual-ammo > span { min-height: 24px; height: 24px; padding: 0 3px; line-height: 1.2; }
  .stage[data-screen="manual"] .manual-ammo .manual-tile-icon { width: 22px; height: 22px; }
}

/* The compact rules drawer intentionally replaces controls, not the latest
   action feedback. Its top follows measured text rather than a fixed height. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 560px),
       (orientation: portrait) and (max-width: 639px) {
  .stage[data-screen="manual"] .manual-sidebar .manual-details[open] {
    top: var(--manual-feedback-bottom, calc(var(--manual-objective-bottom, 48px) + 28px));
  }
}

/* Advice state is not an automatic action or a second button. */
.manual-operation-row .manual-button.is-recommended { outline: 3px solid #14b6b3; outline-offset: -3px; filter: brightness(1.12); }