/*
 * Phone-only presentation layer.
 *
 * The default desktop and tablet layout remains in styles.css. Keep every
 * rule in this file inside the phone media query so disabling this stylesheet
 * restores the original presentation without affecting game behavior.
 */
@media (max-width: 600px), (orientation: landscape) and (max-width: 960px) and (max-height: 500px) {
  /*
   * Keep the desktop header design, but consolidate secondary destinations on
   * phones so the navigation remains on one line. The desktop-only links stay
   * in the document and are hidden here; More uses the existing Learn menu
   * interaction and visual language.
   */
  #top-support-btn,
  .top-nav > button[data-app-tab="profile"],
  #signout-btn {
    display: none;
  }

  .mobile-more-menu {
    display: inline-flex;
  }

  /* Daily already exposes the saved-table Resume Game control when there is
     a regular game to return to. On phones, remove the redundant New Game
     action so Resume Game and More both fit on the shared header row. */
  body.daily-challenge-table #new-game-btn {
    display: none;
  }

  .top-actions {
    width: 100%;
    max-width: none;
  }

  .top-nav {
    width: 100%;
    max-width: none;
    justify-content: space-between;
    gap: clamp(0.24rem, 1.8vw, 0.7rem);
    overflow: visible;
  }

  /* On touch screens, visibility follows the explicit open state controlled
     by the shared click handler instead of sticky hover/focus emulation. */
  .learn-menu:hover .learn-dropdown,
  .learn-menu:focus-within .learn-dropdown {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.3rem);
  }

  .learn-menu.open .learn-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .learn-menu:hover .account-caret,
  .learn-menu:focus-within .account-caret {
    color: inherit;
    transform: none;
  }

  .learn-menu.open .account-caret {
    color: var(--sage-dark);
    transform: translateY(-0.02rem) rotate(180deg);
  }

  .mobile-more-support {
    gap: 0.4rem;
  }

  .mobile-more-support span[aria-hidden="true"] {
    color: var(--tile-red);
    font-size: 1.12em;
    line-height: 1;
  }

  /* The support card inherits a wide two-column composition from the desktop
     dashboard. Stack and center it on phones so the artwork and copy use the
     portrait canvas without leaving an empty column beside the content. */
  .profile-side-stack .profile-support-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "visual"
      "copy"
      "action";
    justify-items: center;
    align-content: start;
    row-gap: clamp(1rem, 4.5vw, 1.35rem);
    width: 100%;
    min-height: 0;
    padding: clamp(1.4rem, 6vw, 2rem) clamp(1.15rem, 5vw, 1.7rem);
  }

  .profile-side-stack .profile-support-visual {
    grid-area: visual;
    justify-self: center;
    width: min(70vw, 15rem);
    min-height: 0;
    padding: 0;
  }

  .profile-side-stack .profile-support-logo {
    width: 100%;
    max-height: 15rem;
  }

  .profile-side-stack .profile-support-copy {
    grid-area: copy;
    justify-self: center;
    width: min(100%, 28rem);
    text-align: center;
  }

  .profile-side-stack .profile-support-copy strong {
    max-width: 15ch;
    margin-inline: auto;
    font-size: clamp(1.65rem, 8vw, 2.2rem);
    line-height: 1.08;
  }

  .profile-side-stack .profile-support-copy p {
    width: min(100%, 30rem);
    margin-inline: auto;
    font-size: clamp(0.94rem, 4.1vw, 1.08rem);
    line-height: 1.5;
  }

  .profile-side-stack .profile-support-link {
    grid-area: action;
    justify-self: center;
    width: min(100%, 20rem);
    min-height: 3.35rem;
    padding-inline: 1.25rem;
    font-size: 0.98rem;
  }

  /*
   * Keep the Recommended label in normal flow on phones. The desktop badge is
   * absolutely positioned, which lets the shorter mobile card pull its title
   * underneath the badge. Giving each item its own grid row guarantees that
   * the label, title, and description cannot overlap at either orientation.
   */
  .assist-mode-grid #teacher-mode-btn {
    grid-template-rows: auto auto auto;
  }

  .assist-mode-grid #teacher-mode-btn .mode-choice-badge {
    position: static;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    margin-bottom: 0.12rem;
  }

  .assist-mode-grid #teacher-mode-btn .mode-choice-icon {
    grid-row: 1 / span 3;
  }

  .assist-mode-grid #teacher-mode-btn .mode-choice-heading {
    grid-row: 2;
  }

  .assist-mode-grid #teacher-mode-btn small {
    grid-row: 3;
  }

  /*
   * Keep Compass's complete pinned-hand wording inside the phone card. Each
   * semantic wrapper owns a normal row so long official patterns and notes can
   * wrap without enlarging the grid or colliding with the status controls.
   */
  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    .pinned-hand-meta-block {
    gap: 0.48rem;
  }

  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    .pinned-hand-meta-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.46rem;
  }

  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    .pinned-hand-meta-summary {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 0.28rem 0.54rem;
    width: 100%;
  }

  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    .pinned-hand-status-row {
    justify-content: flex-start;
    min-width: 0;
  }

  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    .pinned-hand-name-pill {
    min-width: 0;
    max-width: 100%;
  }

  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    .pinned-official-pattern {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    .pinned-official-note-line {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    p.pinned-primary-pattern {
    font-size: clamp(1.02rem, 5.3vw, 1.28rem);
    overflow-wrap: anywhere;
  }

  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    .pinned-variation-annotation {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0.3rem 0 0;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.help-teacher:not(.table-tour-active)
    .pinned-hand-callout:not(.is-empty)
    .pinned-info-note {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /*
   * Free Play's pinned hand is reference-only, so give its card line the
   * whole phone width instead of squeezing it beside both action buttons.
   * The existing markup remains shared with desktop; only the phone layout
   * assigns the name/action row and the reference/pattern row explicitly.
   */
  body.help-solo .free-play-reference-callout:not(.is-empty) .pinned-hand-meta-line {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "hand-name unpin"
      "reference reference";
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.58rem;
  }

  body.help-solo .free-play-reference-callout:not(.is-empty) .pinned-hand-status-row {
    display: contents;
  }

  body.help-solo .free-play-reference-callout:not(.is-empty) .pinned-hand-name-pill {
    grid-area: hand-name;
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.help-solo .free-play-reference-callout:not(.is-empty) .free-play-unpin-btn {
    grid-area: unpin;
    justify-self: end;
  }

  body.help-solo .free-play-reference-callout:not(.is-empty) .pinned-hand-meta-summary {
    grid-area: reference;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 0.28rem 0.62rem;
    width: 100%;
  }

  body.help-solo .free-play-reference-callout:not(.is-empty) .pinned-official-pattern {
    min-width: 0;
  }

  /*
   * Keep opening-setup instructions out of the interactive table on phones.
   * The existing message, controls, and event targets are unchanged; only
   * their presentation moves into the space between the table and step rail.
   * Dice layouts and other table visuals intentionally remain on the mat.
   */
  .opening-deal-overlay
    .opening-table-panel:has(
      :where(.opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card))
    ),
  .opening-deal-overlay
    .opening-table-panel:has(
      :where(.opening-table-wrap > .opening-wind-assignment-card)
    ) {
    --phone-opening-message-space: 5.75rem;
    margin-bottom: var(--phone-opening-message-space);
    overflow: visible;
  }

  .opening-deal-overlay
    .opening-table-panel:has(.opening-table-wrap > .opening-break-card) {
    --phone-opening-message-space: 7.25rem;
  }

  .opening-deal-overlay
    .opening-table-panel:has(.opening-table-wrap .opening-build-choice-controls) {
    --phone-opening-message-space: 4.75rem;
  }

  .opening-deal-overlay
    .opening-table-panel:has(.opening-table-wrap > .opening-turn-card) {
    --phone-opening-message-space: 4.75rem;
  }

  .opening-deal-overlay
    .opening-table-panel:has(.opening-table-wrap > .opening-wind-assignment-card) {
    --phone-opening-message-space: 4.5rem;
  }

  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card),
  .opening-deal-overlay
    .opening-table-wrap > .opening-wind-assignment-card {
    top: calc(100% + 0.55rem);
    left: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    padding: 0.68rem 0.8rem;
    border-radius: 14px;
    transform: none;
  }

  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: stretch;
    column-gap: 0.7rem;
    row-gap: 0.3rem;
    text-align: left;
  }

  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card) h3,
  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card)
    > .opening-mat-action-copy {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }

  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card) h3 {
    grid-row: 1;
    font-size: clamp(1rem, 4.7vw, 1.2rem);
    line-height: 1.08;
  }

  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card)
    > .opening-mat-action-copy {
    grid-row: 2;
    margin: 0;
    font-size: clamp(0.66rem, 3.2vw, 0.78rem);
    line-height: 1.28;
  }

  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card)
    > :is(.opening-action-row, .opening-build-controls, .opening-break-dice) {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
    min-width: 6.75rem;
    margin: 0;
  }

  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card)
    .opening-primary-btn,
  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card)
    .opening-autofill-btn,
  .opening-deal-overlay
    .opening-table-wrap > .opening-mat-roll-action:not(.opening-table-intro-card)
    .opening-turn-btn {
    min-height: 2.75rem;
    margin: 0;
    padding: 0.5rem 0.72rem;
    font-size: 0.78rem;
  }

  .opening-deal-overlay
    .opening-table-wrap > .opening-break-card > .opening-break-result {
    grid-column: 2;
    grid-row: 3;
    margin: -0.12rem 0 0;
  }

  .opening-deal-overlay
    .opening-table-wrap > .opening-wind-assignment-card {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    text-align: center;
  }

  /*
   * Use a shallow, single-line seat pill on phones. This leaves more of the
   * mat's horizontal edges available for the two side racks without changing
   * the desktop label treatment or the underlying seat/wind copy.
   */
  .opening-deal-overlay .opening-seat {
    display: flex;
    width: max-content;
    min-width: 0;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
  }

  .opening-deal-overlay .opening-seat span:not(:empty)::before {
    content: "\00a0-\00a0";
  }

  /*
   * Seat the two vertical labels on the outer table border so they do not
   * consume space inside the playable mat. Top and bottom labels stay put.
   */
  .opening-deal-overlay .opening-table-wrap {
    --phone-opening-seat-border-inset: clamp(0.9rem, 1.8vw, 1.45rem);
  }

  .opening-deal-overlay .opening-seat-left {
    --seat-transform: translate(-50%, -50%) rotate(-90deg);
    left: var(--phone-opening-seat-border-inset);
  }

  .opening-deal-overlay .opening-seat-right {
    --seat-transform: translate(50%, -50%) rotate(90deg);
    right: var(--phone-opening-seat-border-inset);
  }

  .opening-deal-overlay .opening-seat-across {
    --seat-transform: translate(-50%, -50%);
    top: var(--phone-opening-seat-border-inset);
  }

  .opening-deal-overlay .opening-seat-you {
    --seat-transform: translate(-50%, 50%);
    bottom: var(--phone-opening-seat-border-inset);
  }

  /* Keep the Back label visually paired with its arrow on phone screens. */
  .opening-deal-overlay .opening-history-back-btn {
    grid-template-columns: max-content max-content;
    justify-content: center;
    width: max-content;
    min-width: 5.25rem;
    column-gap: 0.22rem;
    padding-inline: 0.55rem 0.62rem;
  }

  @media (max-width: 600px) {
    /*
     * Fit the four phone walls to one centered square track. Keeping a shared
     * track length prevents the horizontal and vertical rows from crossing by
     * several stacks, while the slightly narrower stacks retain their height
     * and intentionally meet with a small amount of overlap at each corner.
     */
    .opening-deal-overlay .opening-table-wrap {
      --phone-opening-wall-track-length: clamp(12rem, 54vw, 13.75rem);
      --phone-opening-side-shift: clamp(1.2rem, 5vw, 1.25rem);
      --phone-opening-side-rack-gap: 1.55rem;
      --phone-opening-horizontal-rack-gap: 1.8rem;
    }

    .opening-deal-overlay .opening-wall {
      --opening-wall-track-length: var(--phone-opening-wall-track-length);
      --opening-wall-horizontal-track-length: var(--phone-opening-wall-track-length);
      gap: 0.04rem;
      padding: 0.18rem;
    }

    .opening-deal-overlay :is(.opening-wall-you, .opening-wall-across) {
      left: 50%;
    }

    .opening-deal-overlay .opening-wall-you {
      bottom: calc((100% - var(--phone-opening-wall-track-length)) / 2);
    }

    .opening-deal-overlay .opening-wall-across {
      top: calc((100% - var(--phone-opening-wall-track-length)) / 2);
    }

    .opening-deal-overlay :is(.opening-wall-left, .opening-wall-right) {
      top: 50%;
    }

    .opening-deal-overlay .opening-wall-left {
      left: calc(
        (100% - var(--phone-opening-wall-track-length)) / 2
        - var(--phone-opening-side-shift)
      );
    }

    .opening-deal-overlay .opening-wall-right {
      right: calc(
        (100% - var(--phone-opening-wall-track-length)) / 2
        - var(--phone-opening-side-shift)
      );
    }

    .opening-deal-overlay .opening-rack-line-you {
      bottom: max(
        1.6rem,
        calc(
          (100% - var(--phone-opening-wall-track-length)) / 2
          - var(--phone-opening-horizontal-rack-gap)
        )
      );
    }

    .opening-deal-overlay .opening-rack-line-across {
      top: max(
        1.6rem,
        calc(
          (100% - var(--phone-opening-wall-track-length)) / 2
          - var(--phone-opening-horizontal-rack-gap)
        )
      );
    }

    .opening-deal-overlay .opening-rack-line-left {
      left: max(
        1.75rem,
        calc(
          (100% - var(--phone-opening-wall-track-length)) / 2
          - var(--phone-opening-side-shift)
          - var(--phone-opening-side-rack-gap)
        )
      );
    }

    .opening-deal-overlay .opening-rack-line-right {
      right: max(
        1.75rem,
        calc(
          (100% - var(--phone-opening-wall-track-length)) / 2
          - var(--phone-opening-side-shift)
          - var(--phone-opening-side-rack-gap)
        )
      );
    }

    .opening-deal-overlay .opening-wall-you.east-pushed {
      bottom: calc((100% - var(--phone-opening-wall-track-length)) / 2 + 0.6rem);
    }

    .opening-deal-overlay .opening-wall-across.east-pushed {
      top: calc((100% - var(--phone-opening-wall-track-length)) / 2 + 0.6rem);
    }

    .opening-deal-overlay .opening-wall-left.east-pushed {
      left: calc(
        (100% - var(--phone-opening-wall-track-length)) / 2
        - var(--phone-opening-side-shift)
        + 0.6rem
      );
    }

    .opening-deal-overlay .opening-wall-right.east-pushed {
      right: calc(
        (100% - var(--phone-opening-wall-track-length)) / 2
        - var(--phone-opening-side-shift)
        + 0.6rem
      );
    }

    .opening-deal-overlay .opening-wall .opening-tile-stack {
      width: 0.72rem;
      height: 1.05rem;
    }

    /* Keep the loose supply compact and fully inside the completed walls. */
    .opening-deal-overlay .opening-center-pile {
      width: min(42%, 9rem);
      height: min(32%, 7rem);
      min-height: 0;
    }

    .opening-deal-overlay .opening-center-pile-stacks {
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
      overflow: hidden;
    }

    .opening-deal-overlay .opening-loose-tile {
      width: 0.72rem;
      height: 1.05rem;
      border-radius: 3px;
    }

    .opening-deal-overlay
      .opening-pile-loose:not(.used):not(.being-used) {
      transform: translate(-50%, -50%) rotate(var(--loose-rotate, 0deg));
    }

    .opening-deal-overlay .opening-center-count {
      bottom: -2rem;
      min-width: 9rem;
      min-height: 1.65rem;
      padding-inline: 0.6rem;
      font-size: 0.66rem;
      white-space: nowrap;
    }

    /* A corner can overlap visually, but the wall being counted must stay on top. */
    .opening-deal-overlay .opening-wall:has(.opening-tile-stack.next) {
      z-index: 7;
    }

    /* The visible stack can stay compact without making its tap target tiny. */
    .opening-deal-overlay .opening-tile-stack.next::after {
      content: "";
      position: absolute;
      inset: -0.45rem;
    }
  }

  /* Keep the regular-play workspace hidden until the Game on transition ends. */
  body.play-transition-gated:not(.table-tour-active)
    #game-view.board-layout
    .board-bottom-grid {
    visibility: hidden;
  }

  /* Let the rack use the phone width without widening the other panels. */
  body.rack-unframed #game-view.board-layout .board-hand-slot {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  body.rack-unframed #game-view.board-layout .board-hand-slot .hero-hand-panel {
    padding-inline: 0;
  }

  /*
   * Size the phone rack around the 14 tiles a player can actually hold. The
   * shared renderer still owns each tile's logical rack slot; the phone-only
   * flex presentation keeps the rendered tiles continuous so a Charleston
   * pass cannot strand a real tile in one of the off-screen spare slots.
   */
  body.rack-unframed #game-view.board-layout .rack-stage {
    --phone-rack-seat-ratio: 0.8857142857;
    --phone-rack-front-ledge-ratio: 0.96;
    --phone-rack-outer-gutter: clamp(6px, 1.8cqw, 9px);
    --rack-gutter: 0px;
    --rack-hand-gap: clamp(0px, 0.18cqw, 1px);
    --rack-stage-overhang: 0px;
    --rack-art-inset: var(--phone-rack-outer-gutter);
    --rack-art-width: calc(100cqw - (2 * var(--phone-rack-outer-gutter)));
    --rack-seat-width: calc(var(--rack-art-width) * var(--phone-rack-seat-ratio));
    --phone-rack-visible-hand-width: calc(var(--rack-art-width) * var(--phone-rack-front-ledge-ratio));
    --rack-tile-scale: 1;
    --rack-slot-width: calc((var(--phone-rack-visible-hand-width) - (13 * var(--rack-hand-gap))) / 14);
    --rack-tile-width: var(--rack-slot-width);
    --rack-tile-height: calc(var(--rack-tile-width) * 1.36);
    --rack-exposure-gap: var(--rack-hand-gap);
    --rack-exposure-width: calc((var(--rack-seat-width) - (13 * var(--rack-exposure-gap))) / 14);
    --rack-exposure-height: calc(var(--rack-exposure-width) * 1.36);
    --rack-hand-track-width: var(--phone-rack-visible-hand-width);
    --rack-front-shelf-seat: clamp(1px, 0.45cqw, 2px);
    --phone-rack-tile-lift: clamp(2px, 0.55cqw, 3px);
    min-height: max(150px, calc(var(--rack-tile-height) + var(--rack-exposure-height) + 58px));
  }

  /*
   * Leave the same 29% wood lip in front so concealed tiles visibly sit in
   * the rack. A short background viewport avoids keeping a clipped, full-size
   * SVG layer over every tile, which can repaint unreliably in iPhone Safari.
   */
  body.rack-unframed #game-view.board-layout .rack-stage::after {
    height: calc(var(--rack-art-height) * 0.29);
    background-position: center bottom;
    background-size: var(--rack-art-width) var(--rack-art-height);
    clip-path: none;
  }

  body.rack-unframed #game-view.board-layout .rack-stage .hand-row,
  body.rack-unframed #game-view.board-layout .board-hand-slot .hero-hand-panel .rack-stage .hand-row {
    display: flex;
    width: var(--rack-hand-track-width);
    justify-self: center;
    justify-content: center;
    gap: var(--rack-hand-gap);
    padding-bottom: calc(var(--rack-front-shelf-bottom) + var(--phone-rack-tile-lift));
    overflow: visible;
    transform: none;
  }

  body.rack-unframed #game-view.board-layout .rack-stage .hand-row > .tile {
    flex: 0 0 var(--rack-tile-width);
    order: var(--rack-visual-order, 0);
  }

  body.rack-unframed #game-view.board-layout .rack-stage .rack-exposure-shelf {
    width: var(--rack-seat-width);
  }

  body.rack-unframed #game-view.board-layout .rack-stage .exposure-row {
    gap: var(--rack-exposure-gap);
    overflow: visible;
  }

  /* Keep the drawn tile seated on the same front shelf as the rest of the hand. */
  body.rack-unframed #game-view.board-layout .rack-stage .hand-row .tile.drawn-rack-tile,
  body.rack-unframed #game-view.board-layout .rack-stage .hand-row .tile.drawn-rack-tile:hover {
    transform: none;
  }

  /*
   * In regular play, flatten only the right-column wrapper so the existing
   * Declare, Action Center, and Discard History can precede the Hand Card.
   * The panels, IDs, controls, and event targets themselves are unchanged.
   */
  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-right {
    display: contents;
  }

  /*
   * Reserve a compact controls band above Compass Coach during live play.
   * The existing turn-status element and Declare button remain the same DOM
   * nodes, so their state, labels, click handlers, and announcements are
   * unchanged; only their phone presentation moves into this band.
   */
  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-grid:has(#table-location-status:not(.hidden)) {
    --phone-action-tools-height: 5.2rem;
    --phone-action-tools-gap: 0.8rem;
    position: relative;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-right > #right-declare-slot {
    order: 1;
    position: static;
    z-index: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    justify-self: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-inline: clamp(0.5rem, 3vw, 0.9rem);
    pointer-events: none;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-grid:has(#table-location-status:not(.hidden))
    .board-bottom-right > #right-declare-slot {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    height: var(--phone-action-tools-height);
  }

  /*
   * Opponent exposures are the first row of the phone workspace. When the
   * Declare control is visible, keep its shared action band in normal flow as
   * the next row instead of pinning it over those tiles. The location compass
   * still rises into the left side of this same band from the panel below.
   */
  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-grid:has(> .bot-exposure-rail:not(.hidden)):has(#right-declare-slot:not(.hidden))
    .board-bottom-right > #right-declare-slot {
    position: static;
    height: var(--phone-action-tools-height);
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-grid:has(> .bot-exposure-rail:not(.hidden)):has(#right-declare-slot:not(.hidden))
    .board-bottom-right > #draw-panel:has(#table-location-status:not(.hidden)) {
    margin-top: 0;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-right > #right-declare-slot.hidden {
    display: none;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-right > #right-declare-slot #declare-btn {
    --diamond-min-width: 142px;
    --diamond-min-height: 2.75rem;
    --diamond-padding: 0.55rem 0.9rem;
    --diamond-font-size: 0.82rem;
    width: auto;
    max-width: 100%;
    margin: 0;
    border-radius: 12px;
    pointer-events: auto;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-right > #draw-panel:not(.hidden) {
    order: 2;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-right > #draw-panel:has(#table-location-status:not(.hidden)) {
    position: relative;
    margin-top: calc(var(--phone-action-tools-height) + var(--phone-action-tools-gap));
  }

  /* Let ordinary Compass Coach content determine the panel height on phones. */
  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-right > #draw-panel:not(.hidden):not(:has(.round-result-card)) {
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-rows: auto auto auto;
    align-content: start;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  /* Round-result titles can include the winner, hand, and win method. Keep
     that complete message readable instead of applying the desktop one-line
     treatment, and let the result panel grow to fit the wrapped heading. */
  #draw-panel:has(.round-result-card):not(.hidden) {
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-rows: auto;
    overflow: hidden;
    scrollbar-gutter: auto;
  }

  #draw-panel:has(.round-result-card) #strategy-title {
    display: block;
    min-width: 0;
    padding-block: 0.5rem;
    font-size: clamp(1rem, 4.6vw, 1.22rem);
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    #draw-panel:has(#table-location-status:not(.hidden))
    .right-strategy-panel.has-table-location-status {
    position: static;
    padding-right: 0;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    #draw-panel:has(#table-location-status:not(.hidden))
    #table-location-status:not(.hidden) {
    position: absolute;
    top: calc(-1 * (var(--phone-action-tools-height) + var(--phone-action-tools-gap)));
    left: clamp(0.5rem, 3vw, 0.9rem);
    right: auto;
    z-index: 5;
    justify-self: auto;
    width: 5rem;
    min-width: 5rem;
    gap: 0.14rem;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    #table-location-status:not(.hidden)
    .table-location-map {
    width: 4.9rem;
    height: 4.36rem;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    #table-location-status:not(.hidden)
    .table-location-seat {
    width: 1.55rem;
    height: 1.55rem;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    #table-location-status:not(.hidden)
    .table-location-seat strong {
    font-size: 0.62rem;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    #table-location-status:not(.hidden)
    .table-location-seat em {
    bottom: -0.34rem;
    width: 0.76rem;
    height: 0.76rem;
    font-size: 0.42rem;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    #table-location-status:not(.hidden)
    .table-location-copy {
    min-height: 1rem;
    padding: 0.14rem 0.3rem;
    font-size: 0.54rem;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    #table-location-status:not(.hidden)
    .table-location-copy::before {
    font-size: 0.56rem;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-left {
    order: 4;
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    .board-bottom-right > #turn-lane-panel:not(.hidden) {
    order: 3;
    height: clamp(10rem, 20dvh, 10.75rem);
  }

  body:not(.charleston-active):not(.table-tour-active)
    #game-view.board-layout:has(#turn-lane-panel:not(.hidden))
    #discard-history-row.discard-pool {
    padding-top: clamp(0.15rem, 0.45dvh, 0.3rem);
  }

  /*
   * The focused discard-history element is an unrounded inner wrapper on
   * phones, so the shared focus shadow appears as a rectangular outline.
   * Keep the game state unchanged while suppressing only that phone visual.
   */
  #discard-history-panel.action-focus {
    border-color: transparent;
    box-shadow: none;
  }

  /*
   * Each Charleston lane must hold all three tiles on one line. The default
   * phone tile size is wider than half of this two-column panel, which caused
   * tile three to wrap underneath the pass button. Flex sizing keeps all three
   * visible without changing the tile elements or Charleston behavior.
   */
  body.charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    .charleston-simple-row {
    --phone-charleston-tile-gap: clamp(3px, 1vw, 5px);
    flex-wrap: nowrap;
    gap: var(--phone-charleston-tile-gap);
  }

  body.charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    .charleston-simple-row > .tile {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 52px;
    height: auto;
    aspect-ratio: 1 / 1.36;
  }

  /* The shared compact layout pulls this action upward; phones keep it below
     the complete Incoming/Pass rows so neither tiles nor directions collide. */
  body.charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    #charleston-inline-actions.charleston-action-center-controls {
    margin-top: clamp(0.35rem, 1.8vw, 0.6rem);
  }

  /*
   * On phones, let Charleston guidance and tile lanes use their actual content
   * height instead of the desktop layout's reserved rows. Everything stays in
   * normal flow, so longer directions expand before the tiles rather than
   * being clipped or covered.
   */
  body.charleston-active:not(.table-tour-active)
    #game-view.board-layout:has(#draw-panel.charleston-incoming-panel:not(.hidden))
    .board-bottom-right > #draw-panel.charleston-incoming-panel:not(.hidden) {
    grid-template-rows: auto auto auto auto;
    min-height: 0;
  }

  body:is(.help-teacher, .help-solo).charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    .right-strategy-panel.charleston-coach-panel {
    align-self: start;
    min-height: 0;
    height: auto;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  body.help-teacher.charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    .right-strategy-panel.charleston-coach-panel
    .draw-decision-hint {
    min-height: 0;
  }

  body:is(.help-teacher, .help-solo).charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    .right-table-preview,
  body:is(.help-teacher, .help-solo).charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    #draw-slot,
  body:is(.help-teacher, .help-solo).charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    .charleston-simple-split {
    align-self: start;
    align-content: start;
    min-height: 0;
    height: auto;
  }

  body:is(.help-teacher, .help-solo).charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    #draw-slot {
    margin-top: 0;
  }

  body:is(.help-teacher, .help-solo).charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    .charleston-simple-col {
    grid-template-rows: auto auto;
    align-content: start;
  }

  body:is(.help-teacher, .help-solo).charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    .charleston-simple-row,
  body:is(.help-teacher, .help-solo).charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    .swap-empty-hint {
    min-height: 0;
    height: auto;
    align-items: flex-start;
  }

  /* Keep the complete round title readable on a single phone-width line. */
  body.charleston-active:not(.table-tour-active)
    #draw-panel.charleston-incoming-panel
    #draw-panel-title.charleston-round-title {
    font-size: clamp(0.8rem, 4.15vw, 1.05rem);
    line-height: 1.15;
    letter-spacing: -0.04em;
    white-space: nowrap;
  }

  /* The live Charleston workspace comes before its reference Hand Card. */
  body.charleston-active:not(.table-tour-active)
    #game-view.board-layout:has(#draw-panel.charleston-incoming-panel:not(.hidden))
    .board-bottom-right {
    order: 1;
  }

  body.charleston-active:not(.table-tour-active)
    #game-view.board-layout:has(#draw-panel.charleston-incoming-panel:not(.hidden))
    .board-bottom-left {
    order: 2;
  }
}

@media (max-width: 899px) {
  .bot-exposure-rail {
    order: 0;
    padding: 0.1rem clamp(0.35rem, 2.5vw, 0.75rem) 0.25rem;
  }

  .bot-exposure-groups {
    gap: clamp(0.4rem, 2.5vw, 0.8rem);
  }

  .bot-exposure-group {
    min-width: 0;
    max-width: 100%;
  }

  .bot-exposure-rail[data-exposed-bots="2"] .bot-exposure-group {
    flex: 0 1 47%;
    max-width: 47%;
  }

  .bot-exposure-rail[data-exposed-bots="3"] .bot-exposure-group {
    flex: 0 1 31%;
    max-width: 31%;
  }

  .bot-exposure-wind {
    font-size: 0.54rem;
  }

  .bot-exposure-sets {
    width: 100%;
    row-gap: 0.08rem;
    column-gap: 0.2rem;
  }

  .tile.bot-exposure-tile,
  .tile.bot-exposure-tile:hover,
  .bot-exposure-rail[data-exposed-bots="2"] .tile.bot-exposure-tile,
  .bot-exposure-rail[data-exposed-bots="3"] .tile.bot-exposure-tile {
    width: clamp(15px, 4.2vw, 18px);
    height: clamp(21px, 5.7vw, 25px);
  }
}

@media (max-width: 600px), (orientation: landscape) and (max-width: 960px) and (max-height: 500px) {
  /* Keep the approved badge treatment on the redesigned chooser. */
  #pre-game-modal .assist-mode-grid #teacher-mode-btn {
    grid-template-rows: auto auto;
  }

  #pre-game-modal .assist-mode-grid #teacher-mode-btn .mode-choice-badge {
    position: absolute;
    inset: -0.7rem auto auto 0.6rem;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    align-self: auto;
    margin: 0;
  }

  #pre-game-modal .assist-mode-grid #teacher-mode-btn .mode-choice-icon {
    grid-row: 1;
  }

  #pre-game-modal .assist-mode-grid #teacher-mode-btn .mode-choice-heading {
    grid-column: 2;
    grid-row: 1;
  }

  #pre-game-modal .assist-mode-grid #teacher-mode-btn small {
    grid-column: 2;
    grid-row: 2;
  }
}