/* Mobile width safety. Component constraints fix overflow before this final clip safeguard. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

.reminder-label-long {
  display: inline;
}

.reminder-label-short {
  display: none;
}

@media (max-width: 800px) {
  main,
  .site,
  .site-header,
  .game-topbar,
  .mode-header,
  .intro,
  .mode-intro,
  .game-layout,
  .mode-layout,
  .game-card,
  .mode-game,
  .radio-card,
  .mode-radio,
  .content,
  .mode-copy,
  .blog,
  .blog-hero,
  .blog-hub {
    min-width: 0;
    max-width: 100%;
  }

  .game-topbar,
  .mode-header {
    width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 52px;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas:
      "brand theme"
      "utilities utilities";
    align-items: center;
    column-gap: 8px;
    row-gap: 7px;
    padding: 8px 0;
  }

  .game-topbar > .brand,
  .mode-header > .brand {
    grid-area: brand;
    min-width: 0;
  }

  .game-topbar > .theme-toggle,
  .mode-header > .theme-toggle {
    grid-area: theme;
    justify-self: end;
  }

  .game-topbar .brand img,
  .mode-header .brand img {
    width: min(145px, 100%);
    height: 36px;
    max-height: none;
    object-fit: contain;
    object-position: left center;
  }

  .utility-controls,
  .mode-header .utility-controls,
  .blog-site .mode-header nav {
    grid-area: utilities;
    min-width: 0;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    margin: 0 !important;
  }

  .utility-controls .text-button,
  .mode-header .utility-controls .text-button,
  .blog-site .mode-header nav > a,
  .blog-site .mode-header nav > button:not(.theme-toggle) {
    flex: 0 0 auto;
    min-width: 0;
    padding: .34rem .34rem;
    font-size: .7rem;
    line-height: 1.2;
  }

  .utility-controls .reminder-desktop,
  .mode-header .utility-controls .reminder-desktop {
    display: inline-flex !important;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  .utility-controls > [data-open="how-to-play"],
  .utility-controls > [data-mode-how] {
    display: none !important;
  }

  .utility-controls > [data-reminder],
  .utility-controls > [data-mode-reminder] {
    order: 1;
  }

  .utility-controls > [data-stats],
  .utility-controls > [data-mode-stats] {
    order: 2;
  }

  .utility-controls > [data-share-result],
  .utility-controls > [data-mode-share] {
    order: 3;
  }

  .utility-controls > [data-support] {
    order: 4;
  }

  .reminder-label-long {
    display: none;
  }

  .reminder-label-short {
    display: inline !important;
  }

  .theme-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .mode-nav {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    padding: 0 12px 4px;
    margin: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .game-layout,
  .mode-layout {
    width: calc(100% - 24px) !important;
    max-width: 520px;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }

  .game-card,
  .mode-game,
  .radio-card,
  .mode-radio {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .game-meta,
  .mode-meta {
    flex-wrap: wrap;
    gap: 5px 8px;
  }

  .grid,
  .mode-grid {
    width: min(100%, 360px) !important;
    max-width: 100%;
    min-width: 0;
  }

  .mode-grid {
    --mode-grid-width: 100% !important;
  }

  .keyboard,
  .mode-keys,
  #keyboard,
  #mode-keys {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .key-row,
  .mode-key-row {
    width: 100%;
    min-width: 0;
    gap: clamp(3px, 1vw, 5px);
  }

  .key,
  .mode-key {
    min-width: 0;
    height: 44px;
    font-size: clamp(.66rem, 3vw, .78rem);
  }

  .key.wide,
  .mode-key.wide {
    min-width: 0;
    padding-inline: 2px;
    font-size: clamp(.61rem, 2.7vw, .72rem);
  }

  .radio-controls,
  .radio-row {
    min-width: 0;
  }

  .radio-card select,
  .mode-radio select,
  .volume,
  .volume-row {
    min-width: 0;
    max-width: 100%;
  }

  .intro,
  .mode-intro {
    width: calc(100% - 24px) !important;
    max-width: 100%;
  }

  .intro h1,
  .mode-intro h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .content,
  .mode-copy {
    width: calc(100% - 24px) !important;
  }

  .blog:not(.blog-hub),
  .blog-hero,
  .blog-hub {
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }
}