/* Word Derby phone shell.

   Loaded after every other stylesheet so the signed-in app shell can compact
   the lobby, settings, stats and finished-game surfaces at 600px and below
   without touching the desktop layout. The only new chrome is the bottom
   navigation: it ships display:none and is revealed by the phone media query,
   so wide viewports render exactly as before.

   Sizing note: the in-app Zoom control leaves html at zoom 0.8 for "100%" and
   zoom 1 for "120%". Chrome scales rendered geometry by that zoom, so a control
   that must stay a 44px tap target at 100% needs at least 55 CSS px. The bar
   and its links are 56/64 CSS px for that reason. */

.app-nav {
  display: none;
}

@media (max-width: 600px) {
  /* ------------------------------------------------------------- app shell */

  /* Reserve exactly the fixed bar's height (plus any home-indicator inset) at
     the end of the scroll column so the bar never covers the last content. */
  body.has-app-nav {
    --app-nav-height: 64px;
    --app-nav-space: calc(var(--app-nav-height) + env(safe-area-inset-bottom, 0px) + 8px);
    padding-bottom: var(--app-nav-space);
    /* Comfortable tap targets for the shell's controls. Chrome scales rendered
       geometry by the in-app html zoom, so 100% (zoom 0.8) needs 56 CSS px to
       still paint a 44px target while 120% (zoom 1) needs 48 CSS px. */
    --mobile-control-size: 48px;
  }

  html[data-app-zoom="0.8"] body.has-app-nav {
    --mobile-control-size: 56px;
  }

  .app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above the page, below the header dropdowns (50), the search overlay
       (20) it should never hide, the foreground notification (80) and the
       flash stack (90). */
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 4px max(8px, env(safe-area-inset-right, 0px))
             calc(4px + env(safe-area-inset-bottom, 0px))
             max(8px, env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(20px);
    border-top: 1px solid #d9d9df;
    box-shadow: none;
  }

  .app-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 56px;
    padding: 6px 4px;
    border-radius: 12px;
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .app-nav__link .ui-icon {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 1.35rem;
  }

  .app-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-nav__link[aria-current="page"] {
    color: var(--plum-deep);
    background: #f3edf6;
  }

  .app-nav__link[aria-current="page"] .ui-icon { color: var(--green-deep); }

  /* Keep the New Game destination visually light. */
  .app-nav__link--new { color: var(--teal); }
  .app-nav__link--new .ui-icon {
    box-sizing: content-box;
    width: 1.05rem;
    height: 1.05rem;
    font-size: 1.05rem;
    padding: 0.28rem;
    background: transparent;
    color: var(--teal);
  }

  .app-nav__link:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: -2px;
  }

  .app-nav__link:active { background: var(--cream-deep); }

  /* Phone shell: shared typography and one calm solid neutral background,
     using the shared racing green and gold palette. Scoped away from the
     board so its geometry and type never move. */
  body.has-app-nav:not(.game-page) {
    font-family: var(--font-friendly);
    font-size: 17px;
    font-weight: 400;
    background: #fffdf9;
    background-image: none;
    --paper: #fff;
    --ink-soft: #636366;
    --line: #dedee3;
  }

  /* Flashes, the foreground notification and the account panel all sit above
     the bar, so lift the fixed ones by the bar's height and shorten the
     dropdown so its last row never falls behind the bar. */
  body.has-app-nav .flash-stack {
    bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + var(--app-nav-space));
  }

  /* The foreground notification rides above the flash stack, so it adds the
     flash height on top of the bar space instead of sharing the flash line. */
  body.has-app-nav .notification-update:not([hidden]) {
    bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + var(--flash-banner-height, 0px) + var(--app-nav-space));
  }

  body.has-app-nav .header-menu .site-header__who {
    max-height: calc(100dvh - 4.5rem - var(--app-nav-space));
  }

  /* The header keeps the brand, the live My Games fragment, the bell and the
     account trigger; it only loses a little vertical breathing room and gains
     the notch inset the viewport now allows. */
  .header-menu .site-header__inner {
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    padding-bottom: 6px;
  }

  /* --------------------------------------------------- flatter, calmer page */

  .site-backdrop { display: none; }

  body.home-page .site-main {
    padding: 0.75rem var(--lobby-gutter, 1rem) 1.25rem;
  }

  .home-page .lobby-card,
  .home-page .game-card,
  .settings-page .settings__panel {
    box-shadow: none;
  }

  .home-page .home__empty-art { display: none; }
  .home__tagline-rule { display: none; }

  /* One small, consistent type scale for the lobby. */
  .home-page .home { --lobby-control: 56px; gap: 1.1rem; font-size: 1rem; }
  .home-page .home__frame { gap: 1.15rem; }
  .home-page .home__games-header { gap: 0.5rem; }
  .home-page .home__games-title,
  .home-page .home__title { font-size: 1.4rem; }
  .section-heading { margin-bottom: 0.35rem; font-size: 0.95rem; }

  /* Grouped phone lobby, with names and scores sharing the same row. */
  .home-page .home__games { gap: 0; }
  .home-page .home__active { margin-bottom: 1.5rem; }
  .home-page .home__games-header { flex-wrap: nowrap; }
  .home-page .home__games-title { font-size: 2.2rem; letter-spacing: -.03em; }
  .home-page .home__games-title > i { display: none; }
  .home-page .home__new-game { width: var(--mobile-control-size); min-height: var(--mobile-control-size); padding: 0; font-size: 2rem; box-shadow: none; }
  .home-page .home__new-game > span:last-child { display: none; }
  .home-page .game-list { gap: .8rem; }
  .game-list__heading { margin-top: .8rem; }
  .game-list__heading h2 { font-size: 1.1rem; }
  .home-page .game-card--active,
  .home-page .game-card--active:not(:has(.game-nudge)) {
    grid-template-columns: minmax(0, 1fr) 8rem;
    grid-template-areas: "identity scores";
    gap: .8rem .55rem;
    min-height: 0;
    padding: .85rem;
    border: 1px solid #e9e5df;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px #200e3005;
  }
  .home-page .game-card.game-card--invitation { grid-template-columns: minmax(0, 1fr) 8rem; grid-template-areas: "identity scores" "status status"; }

  .home-page .game-card__avatar,
  .home-page .game-card--finished .game-card__avatar { width: var(--mobile-control-size); height: var(--mobile-control-size); font-size: 1.65rem; }
  .home-page .game-card__avatar .computer-icon,
  .home-page .game-card--finished .game-card__avatar .computer-icon { width: 88%; height: 88%; }
  .home-page .game-card--active .game-card__title { font-size: 1.25rem; }
  .home-page .game-card__meta { font-size: 1rem; white-space: normal; }
  .home-page .game-card__scores { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: center; max-width: 100%; gap: .65rem; }
  .home-page .game-card__score dt { max-width: none; margin-bottom: .25rem; font-size: .85rem; white-space: normal; overflow: visible; overflow-wrap: anywhere; max-width: 4.5rem; }
  .home-page .game-card--active .game-card__score dd { font-size: 1.8rem; }
  .home-page .game-card__score + .game-card__score::before { left: -.325rem; }
  .home-page .game-card--active .game-card__status { width: 100%; max-width: none; min-height: var(--mobile-control-size); padding: .35rem .7rem; font-size: 1.2rem; box-shadow: none; border-radius: 10px; transition: background-color .15s; }
  .home-page .game-card--waiting .game-card__status--waiting { display: none; }
  .home-page .game-card--active .game-card__actions,
  .home-page .game-card--active:not(:has(.game-nudge)) .game-card__actions { display: contents; }
  .home-page .game-card--active .game-card__open { position: absolute; inset: 0; width: auto; height: auto; display: block; }
  .home-page .game-card--active .game-card__open .lobby-chevron { display: none; }
  .home-page .game-card__name { gap: 0; }
  .home-page .game-card--active .game-nudge { width: auto; }
  .home-page .game-card__name .game-nudge__button { width: var(--mobile-control-size); height: var(--mobile-control-size); padding: 0; font-size: 1.2rem; }
  .home-page .game-card__name .game-nudge__button > span { display: none; }
  .home-page .game-card__name .game-nudge__button > i { transform-origin: center bottom; }
  .home-page .game-card .game-nudge__button { min-height: var(--mobile-control-size); padding: .2rem .5rem; background: transparent; color: var(--green-deep); border: 0; box-shadow: none; font-size: 1rem; transition: color .15s; }
  .home-page .home__more-heading { display: block; margin: 0 0 .8rem; color: var(--ink-soft); font-size: 1.1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
  .home-page details.finished-games { padding: .6rem 1rem; background: #fff; border: 1px solid #e9e5df; border-radius: 12px 12px 0 0; }
  .home-page :is(.finished-games__summary, .pending-invitations__summary) { min-height: var(--mobile-control-size); font-size: 1.2rem; }
  .home-page #lobby-invites { padding: .5rem 0; background: transparent; border: 0; }
  .home-page .home__footer, .home-page .home__welcome { display: none; }
  .home-page .home__frame { gap: 0; }
  .home-page .home__invite { padding: 0; border: 1px solid #e9e5df; border-top: 0; border-radius: 0 0 12px 12px; background: #fff; box-shadow: none; }
  .home-page:not(:has(.finished-games)) .home__invite { border-top: 1px solid #e9e5df; border-radius: 12px; }
  .home-page .home__find-friend { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem; border: 0; border-bottom: 1px solid #e9e5df; background: transparent; color: var(--plum-deep); text-align: left; font: inherit; cursor: pointer; }
  .home__find-friend > i:first-child { width: 2.5rem; text-align: center; font-size: 1.8rem; color: var(--green-deep); }
  .home__find-friend > span { flex: 1; }
  .home__find-friend strong, .home__find-friend small { display: block; }
  .home__find-friend strong { font-size: 1.25rem; font-weight: 500; }
  .home__find-friend small { color: var(--ink-soft); font-size: 1rem; }
  .home-page .start-game-composer:not(.is-searching) .home__search { display: none; }
  .home-page .home__search, .home-page .home__share-invite { padding: .8rem; }

  /* Search stays a full-width field with a full-size icon target; the invite
     button below keeps its own full-width row with the icon inline and never
     stacks its label vertically. */
  .home-page .input { font-size: 1.2rem; }
  .home-page .player-result form,
  .home-page .player-result .onboarding__button { width: 100%; }
  .home-page .player-result .onboarding__button { min-height: 56px; }

  /* Keep the icon-only search submit, the header targets and the pending
     invitation actions at a full tap size at every zoom, not just the bar. */
  body.has-app-nav:not(.game-page) .start-game__search,
  body.has-app-nav:not(.game-page) .header-menu__toggle,
  body.has-app-nav:not(.game-page) .header-menu .notification-menu .notification-menu__toggle,
  body.has-app-nav:not(.game-page) .site-header__games,
  body.has-app-nav:not(.game-page) .pending-invites .button {
    min-height: var(--mobile-control-size);
    min-width: var(--mobile-control-size);
  }


  /* Give the URL the full phone width instead of squeezing it beside a button. */
  .home__share-invite { grid-template-columns: minmax(0, 1fr); row-gap: .6rem; }
  .invite-link__field,
  .invite-link__copy { grid-column: 1; }
  .invite-link__icon { width: 3.2rem; font-size: 1.3rem; }
  .home-page .invite-link__url { padding-left: 3.2rem; }
  .invite-link__copy { padding-inline: 1rem; font-size: 1.2rem; box-shadow: none; }
  .invite-link__copy span { min-width: 0; }
  .home__ponybot { padding: .8rem 1rem; gap: 1rem; justify-content: start; background: transparent; }
  .home__ponybot form { flex: 1; }
  .home__ponybot-action { width: 100%; gap: 1rem; justify-content: start; text-align: left; font-size: 1.2rem; }
  .home__ponybot-label { font-size: 1.2rem; }
  .home__ponybot-note { margin-top: .25rem; font-size: 1rem; font-weight: 400; }
  .home__ponybot-mascot { width: 3.5rem; height: 3.5rem; }
  .home-page .input { background: #fff; box-shadow: none; border-color: var(--line); border-radius: 12px; }
  .home-page .home__invite { margin-top: 0; }
  .home-page .home__choices { gap: 0; }
  /* Every More item uses the same leading icon, label and trailing action. */
  .home-page details.finished-games { padding: 0; }
  .home-page .finished-games__summary { padding: .85rem 1rem; gap: 1rem; font-size: 1.2rem; font-weight: 500; }
  .home-page .finished-games__summary > .ui-icon,
  .home__find-friend > i:first-child { width: var(--mobile-control-size); flex: none; text-align: center; }
  .home-page .home__find-friend { padding: .85rem 1rem; }
  .home__find-friend strong { font-size: 1.2rem; }
  .home__ponybot { padding: .85rem 1rem; border-bottom: 1px solid #e9e5df; }
  .home__ponybot-mascot { width: var(--mobile-control-size); height: var(--mobile-control-size); }
  .home__ponybot-copy { flex: 1; }
  .home__ponybot .home__ponybot-chevron { display: block; }
  .home-page .finished-games__summary > .lobby-chevron,
  .home__find-friend > .lobby-chevron,
  .home__ponybot-chevron { width: var(--mobile-control-size); flex: none; text-align: center; }
  .home-page .home__share-invite { display: grid; grid-template-columns: minmax(0, 1fr) var(--mobile-control-size); gap: 0; padding: .85rem 1rem; }
  .invite-link__field { display: grid; grid-template-columns: var(--mobile-control-size) minmax(0, 1fr); gap: 0 1rem; align-items: center; }
  .invite-link__icon { position: static; grid-column: 1; grid-row: 1 / 3; width: var(--mobile-control-size); font-size: 1.8rem; }
  .invite-link__mobile-label { display: block; grid-column: 2; font-size: 1.2rem; font-weight: 500; color: var(--plum-deep); }
  .home-page .invite-link__url { grid-column: 2; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 1.2rem; line-height: 1.4; }
  .home-page .invite-link__copy { grid-column: 2; align-self: center; width: var(--mobile-control-size); height: var(--mobile-control-size); min-height: var(--mobile-control-size); padding: 0; border: 0; background: transparent; color: var(--plum-deep); box-shadow: none; }
  .invite-link__copy > span { display: none; }
  .home-page:has(.home__suggested) .home__invite { border-bottom: 0; border-radius: 0; }
  .home-page:not(:has(.finished-games)):has(.home__suggested) .home__invite { border-radius: 12px 12px 0 0; }
  .home-page:has(.home__suggested) .home__share-invite { border-bottom: 1px solid #e9e5df; }
  .home-page .home__suggested { margin: 0; }
  .home-page .home__suggested .player-result { display: grid; grid-template-columns: var(--mobile-control-size) minmax(0, 1fr) auto; gap: 1rem; padding: .85rem 1rem; border: 1px solid #e9e5df; border-top: 0; border-radius: 0 0 12px 12px; background: #fff; }
  .home-page .home__suggested .player-result__name { font-size: 1.2rem; }
  .home-page .home__suggested .start-game__state { font-size: 1rem; }
  .home-page .home__suggested-actions { display: flex; grid-column: 3; gap: 0; width: auto; }
  .home-page .home__suggested-actions > form { width: auto; flex: none; }
  .home-page .home__suggested .button { width: var(--mobile-control-size); min-width: var(--mobile-control-size); min-height: var(--mobile-control-size); padding: 0; border: 0; background: transparent; color: var(--plum-deep); font-size: 1.2rem; box-shadow: none; }
  .home__suggested .suggested-label--desktop, .home__suggested .suggested-label--mobile { display: none; }

  @media (max-width: 360px) {
    .home-page .game-card--active,
    .home-page .game-card--active:not(:has(.game-nudge)) {
      grid-template-columns: minmax(0, 1fr) 7rem;
      padding: .65rem; column-gap: .35rem;
    }
    .home-page .game-card__identity { gap: .45rem; }
    .home-page .game-card__name { flex-wrap: wrap; }
    .home-page .game-card--active .game-card__open .lobby-chevron { display: none; }
  }

  /* ------------------------------------------------- phone-friendly settings */

  .settings-page .settings { gap: 14px; padding: 0 0 8px; }
  .settings-page .settings__title { font-size: 1.6rem; }
  .settings-page .settings__panel { padding: 16px 14px; border-radius: 16px; }
  .settings-page .settings__heading { font-size: 1.25rem; }
  .settings-page .settings__subheading { margin-top: 16px; font-size: 1.05rem; }
  .settings-page .settings__identity { gap: 14px; margin: 12px 0 18px; }
  .settings-page .settings__avatar-preview { width: 72px; height: 72px; font-size: 2rem; }
  .settings-page .settings__avatar-grid {
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 8px;
  }
  .settings-page .settings__avatar-option { min-height: 64px; padding: 10px 6px; }
  .settings-page .settings__avatar-label { font-size: 14px; white-space: normal; }
  .settings-page .settings__submit,
  .settings-page .settings__actions .button { width: 100%; }

  .stats-page .stats { gap: 16px; padding: 0 0 8px; }
  .stats-page .stats__panel,
  .stats-page .stats__empty { border-radius: 16px; }
  .stats-page .stats__title { font-size: 1.6rem; }

  /* ------------------------------------------ harmless postgame restyle only */

  .post-game__banner,
  .post-game__highlights,
  .post-game__card { border-radius: 14px; box-shadow: none; }
  .post-game__banner { background: #eaf8f1; }
  .post-game__highlights { padding: 0.85rem 0.9rem; }
  .post-game__banner-title { font-size: 1.6rem; }
  .post-game__card-score { font-size: 1.6rem; }
}