/* Short landscape viewports: phone browsers and the installed app.
   Keep this standalone so the same fix can be released without replacing game code. */
html body .app-header [data-tour="profile"] > div[style*="profileMenuIn"] {
  position: fixed !important;
  top: var(--su-profile-top, 72px) !important;
  right: max(12px, min(var(--su-profile-right, 12px), calc(100vw - 262px))) !important;
  left: auto !important;
  width: min(250px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - var(--su-profile-top, 72px) - 12px);
  overflow-y: auto !important;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}
.su-screen-button { display: none; }
.su-screen-help {
  position: fixed; z-index: 2400; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); overflow-y: auto;
  box-sizing: border-box; padding: 20px; border-radius: 18px; border: 1px solid #a855f7;
  background: #130f1b; color: #f5f0ff; box-shadow: 0 16px 80px #000a; font-family: Oswald, sans-serif;
}
.su-screen-help p { font-size: 16px; line-height: 1.5; }
.su-screen-help button { width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: #7c3aed; color: white; font: inherit; cursor: pointer; }
@media (max-width: 1100px) {
  html body .ref-top-row:has(.su-screen-button) { grid-template-columns: minmax(0, 1fr) auto !important; }
  html body .ref-top-row:has(.su-screen-button) .ref-logo,
  html body .ref-top-row:has(.su-screen-button) .ref-hotkeys { display: none !important; }
  html body .su-screen-button {
    display: inline-flex; align-items: center; justify-content: center; align-self: center;
    min-height: 44px; max-width: 140px; padding: 6px 12px; border: 1px solid #a855f780;
    border-radius: 12px; background: #241435; color: #eedfff; font: 600 13px Oswald, sans-serif; cursor: pointer;
  }
}
@media (orientation: landscape) and (min-width: 560px) and (max-width: 1100px) and (max-height: 500px) {
  html body .app-header {
    position: relative !important;
    flex-wrap: nowrap !important;
    padding: 5px max(12px, env(safe-area-inset-right)) 5px max(12px, env(safe-area-inset-left)) !important;
    gap: 8px !important;
    min-height: 48px;
  }
  html body .app-header nav, html body .app-header__counters { display: none !important; }
  html body .app-header__brand, html body .app-header__actions { min-width: 0; gap: 6px !important; }
  html body .app-header__brand > button { max-height: 44px; }
  html body .app-body > aside { display: none !important; }
  html body .app-main {
    min-width: 0;
    padding: 6px max(12px, env(safe-area-inset-right)) 76px max(12px, env(safe-area-inset-left)) !important;
  }
  html body .upgrader-grid { gap: 10px !important; }
  html body .ref-top-row { margin-bottom: 2px !important; min-height: 32px !important; }
  html body .ref-hotkeys, html body .ref-logo, html body .su-start { display: none !important; }
  html body .ref-top-row { grid-template-columns: minmax(0, 1fr) auto !important; }
  html body .ref-tool-btn { min-width: 44px; min-height: 32px; }
  html body .qp { animation: none !important; }
  html body .qp .ref-tool-btn { min-width: 44px; min-height: 44px; transform: none !important; }
  html body .qp-tile { transform: none !important; }
  html body .wheel-flanked-row {
    --phone-wheel: clamp(200px, calc(200dvh - 464px), 420px);
    grid-template-columns: minmax(0, 1fr) var(--phone-wheel) minmax(0, 1fr) !important;
    gap: 10px !important;
    height: var(--phone-wheel);
  }
  html body .wheel-flanked-row > .ref-wheel-col {
    grid-column: auto !important; order: 0 !important; margin: 0 !important; min-height: 0 !important;
  }
  html body .ref-wheel-col .su-wheel {
    width: var(--phone-wheel) !important;
    height: var(--phone-wheel) !important;
    zoom: 1 !important;
  }
  html body .ref-wheel-col .uw-idle-q { font-size: 28px !important; }
  html body .ref-wheel-col .uw-idle-l { font-size: 10px !important; letter-spacing: .5px !important; margin-top: 6px !important; }
  html body .ref-wheel-col .su-wheel > div > div[style*="tabular-nums"] { font-size: 32px !important; }
  html body .wheel-flanked-row .ref-side-card {
    min-width: 0; height: calc(var(--phone-wheel) / 2) !important; min-height: 0 !important; align-self: center;
    padding: 6px 8px !important; gap: 3px !important;
    transform: none !important;
  }
  html body .ref-card-title { font-size: 12px !important; }
  html body .ref-card-sub-empty, html body .su-stack-slots { display: none !important; }
  html body .ref-side-card > [data-stake-slot] { min-height: 0 !important; flex: 1; }
  html body .ref-side-card [data-stake-slot] > div { min-height: 0 !important; }
  html body .ref-side-card [data-stake-slot] img { max-height: 90px; object-fit: contain; }
  html body .ref-card-action { min-height: 28px; padding: 4px 8px !important; }
  html body .ref-controls-row {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 30%) minmax(0, 1fr) !important;
    gap: 10px !important; align-items: start !important; max-width: none !important;
    margin: 6px 0 0 !important;
  }
  html body .ref-stake { min-width: 0; padding: 6px 8px !important; }
  html body .ref-stake > div:first-child { flex-wrap: wrap; }
  html body .su-boost > div:first-child { flex-wrap: wrap; }
  html body .ref-controls-row > div:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body .ref-chance-btn { height: 44px !important; min-width: 0; padding: 4px !important; font-size: 13px !important; }
  html body .ref-upgrade-btn { height: 44px !important; min-height: 44px; font-size: 16px !important; padding: 6px !important; transform: none !important; scroll-margin-bottom: 76px; }
  html body .bottom-nav {
    display: flex !important; position: fixed; z-index: 700; bottom: 0; left: 0; right: 0;
    align-items: center; justify-content: space-around;
    padding: 2px max(12px, env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    background: #0d0d0f; border-top: 1px solid rgba(255,255,255,.08);
  }
  html body .bottom-nav__slot { display: flex; flex-direction: row !important; align-items: center; justify-content: center; gap: 6px; flex: 1; height: 44px !important; min-height: 44px !important; padding: 0 !important; border: 0; background: transparent; color: #aaa0c0; }
  html body .bottom-nav__slot.is-active { color: #c084fc; }
  html body .bottom-nav__center { display: flex; flex-direction: row !important; align-items: center; gap: 6px; height: 40px !important; width: auto !important; transform: none !important; margin: 0 !important; padding: 0 12px; border-radius: 12px; background: #f2c46d; color: #171019; }
  html body .bottom-nav__label, html body .bottom-nav__center-label { font-size: 12px !important; margin: 0 !important; }
  html body .bottom-nav__new { display: none; }
  html body .su-updock { display: none !important; }
  html body .su-toasts {
    top: max(6px, env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    left: auto !important; width: min(400px, 60vw) !important;
    max-height: 90px; overflow-y: auto;
  }
  html body .su-toast { max-height: 84px; overflow-y: auto; padding: 6px 8px; }
  html body .su-toast__title { font-size: 12px; }
  html body .su-toast__body { font-size: 11px; line-height: 1.25; }
  html body .se-greet { display: none !important; }
  html body .se-event, html body .se-music { display: none !important; }
  html body .support-fab, html body .sb-fab { bottom: calc(54px + env(safe-area-inset-bottom)) !important; width: 44px !important; height: 44px !important; }
  html body .support-panel, html body .sb-panel {
    top: max(6px, env(safe-area-inset-top)) !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    max-height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}
@media (orientation: landscape) and (min-width: 560px) and (max-width: 1100px) and (max-height: 350px) {
  html body .ref-card-action { display: none !important; }
  html body .ref-side-card img { max-height: 54px !important; object-fit: contain; }
  html body .ref-side-card svg[viewBox="0 0 60 86"] { height: 54px !important; }
}