/* responsive-mobile.css — additive only, no overrides to logic */
html, body {
  width: 100%;
  height: 100%;
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
body { margin: 0; }

dialog::backdrop { background: rgba(0,0,0,.35); }
dialog .modal {
  max-width: min(720px, 96vw);
  width: min(720px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 16px;
}

#cardStack { margin: 0 auto; position: relative; }

#bottomRibbon, .bottom-ribbon, footer.sticky-bar {
  position: sticky;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(6px);
}

/* Tablet */
@media (max-width: 1024px) {
  #cardStack { width: min(92vw, 520px); height: min(76vh, 680px); }
  .right-rail, .left-rail { display: none !important; }
}

/* Large phones / portrait tablets */
@media (max-width: 768px) {
  header .nav, .sidebar { display: none !important; }
  #cardStack { width: min(94vw, 480px); height: min(70vh, 620px); }
  .legend, .swipe-legend {
    position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%;
    transform: translateX(-50%); z-index: 50;
  }
  dialog .modal { max-width: 96vw; width: 96vw; }
}

/* Small phones */
@media (max-width: 420px) {
  #cardStack { width: 96vw; height: 65vh; }
  .ticker { font-size: 12px; }
  .rankings-table { font-size: 12px; }
  .cta, button { min-height: 40px; }
}

/* Landscape phones */
@media (orientation: landscape) and (max-height: 480px) {
  #cardStack { width: 88vw; height: 70vh; }
  .legend, .swipe-legend { bottom: 8px; }
  dialog .modal { max-height: 86vh; }
}

img { max-width: 100%; height: auto; }