/* Shared mobile layer loaded after each page stylesheet. */
@media (max-width: 760px) {
  html, body { min-width: 0; overflow-x: hidden; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .site-nav { width: 100% !important; }
  .site-brand { min-width: 0; max-width: calc(100% - 54px); }
  .site-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero h1, .catalog-heading h1, .album-heading h1, .posts-heading h1, .account-heading h1, .admin-heading h1, .economy-heading h1 { max-width: 100%; overflow-wrap: anywhere; }
  .catalog-page, .album-page, .posts-page, .account-page, .admin-page, .mines-page, .economy-page { width: 100%; }
  .catalog-toolbar, .post-filters, .account-actions, .toolbar { min-width: 0; }
  .catalog-toolbar input, .catalog-toolbar select, .post-filters input, .post-filters select, .toolbar input { max-width: 100%; }
  .catalog-status, .results-line { flex-wrap: wrap; line-height: 1.5; }
  .account-grid { gap: 9px; }
  .account-card { min-width: 0; overflow: hidden; }
  .game-layout { min-width: 0; }
  .board-card, .control-card { min-width: 0; }
  .board { width: min(100%, 430px); }
  .chart-panel { min-width: 0; }
  .chart-toolbar h2 { overflow-wrap: anywhere; }
  .chart-current-value, .chart-live-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chart-zoom-controls { top: 7px; right: 7px; }
  .chart-zoom-controls button { min-width: 27px; padding-inline: 6px; }
  .chart-extremes { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; scrollbar-width: none; }
  .chart-extremes::-webkit-scrollbar { display: none; }
  .crypto-trade { overflow: hidden; }
  .sql-layout { min-width: 0; }
  .sql-browser-top, .sql-toolbar { min-width: 0; }
  .sql-toolbar { flex-wrap: wrap; white-space: normal; }
  .logout-dialog, dialog { width: min(calc(100vw - 24px), 430px); max-width: calc(100vw - 24px); }
  dialog form, .post-form { width: 100%; min-width: 0 !important; }
  .logout-actions { flex-wrap: wrap; }
  .logout-actions button, .submit-post, .new-post-button, .discord-invite { min-height: 42px; }
  .catalog-pagination button, .album-pagination button, .pagination button { min-height: 40px; }
}
@media (max-width: 480px) {
  .site-nav-links { grid-template-columns: 1fr 1fr; }
  .catalog-grid, .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .catalog-card, .album-card { padding: 7px; }
  .account-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .mines-page, .catalog-page, .album-page, .posts-page, .account-page, .admin-page, .economy-page { padding-left: 12px; padding-right: 12px; }
  .board { gap: 6px; }
  .cell { border-radius: 8px; }
  .chart-panel { padding: 12px; }
  .chart-viewport { min-height: 275px !important; }
  .chart-viewport svg { height: 315px !important; }
  .chart-legend { gap: 7px 10px; font-size: 9px; }
  .chart-extreme-item { white-space: nowrap; }
  .sql-sidebar { max-height: 220px; }
  .hero { gap: 18px; }
  .hero h1 { font-size: clamp(52px, 19vw, 72px); }
  .hero p:not(.eyebrow) { margin-top: 16px; font-size: 13px; }
  .board-head { align-items: flex-start; }
  .board-head h2 { max-width: 60vw; overflow-wrap: anywhere; }
  .multiplier strong { font-size: 21px; }
  .game-footer { align-items: stretch; flex-direction: column; }
  .game-footer .secondary { align-self: flex-start; }
  .owner-tools { right: 8px; bottom: 8px; }
}
@media (max-width: 360px) {
  .site-nav-links { width: calc(100vw - 24px); }
  .site-nav-links a { font-size: 10px; padding-inline: 7px; }
  .balance-card { padding: 14px 15px; }
  .control-card, .board-card { padding: 13px; }
  .board { gap: 4px; }
  .cell { font-size: 11px; }
  .chart-zoom-controls button { min-width: 25px; padding-inline: 4px; }
}