/* Mobile overrides: max-width 700px and 360px layouts
   Load order matters: these stylesheets are ordered fragments of one cascade
   (see index.html). Mobile overrides live in responsive.css. */

@media (max-width: 700px) {
  .profile-screen {
    padding:
      max(0.65rem, env(safe-area-inset-top))
      max(0.65rem, env(safe-area-inset-right))
      max(0.8rem, env(safe-area-inset-bottom))
      max(0.65rem, env(safe-area-inset-left));
  }

  .profile-shell {
    min-height: calc(100dvh - 1.45rem);
  }

  .profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-preview {
    position: sticky;
    top: 4.8rem;
    z-index: 1;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    column-gap: 0.8rem;
    padding: 0.75rem;
    text-align: left;
  }

  .profile-avatar-preview {
    grid-row: 1 / 6;
    width: 5.5rem;
  }

  .profile-preview > p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-records {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-social-player {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-social-player > div {
    justify-content: stretch;
  }

  .profile-social-player > div button {
    flex: 1 1 7rem;
  }

  .account-home-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-home-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-home-actions button:only-child {
    grid-column: 1 / -1;
  }

  .public-rooms-screen {
    padding:
      max(0.65rem, env(safe-area-inset-top))
      max(0.65rem, env(safe-area-inset-right))
      max(0.8rem, env(safe-area-inset-bottom))
      max(0.65rem, env(safe-area-inset-left));
  }

  .public-rooms-shell {
    min-height: calc(100dvh - 1.45rem);
  }

  .public-room-filters,
  .public-room-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-room-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .public-room-toolbar button {
    width: 100%;
  }

  .moderation-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .moderation-toolbar button,
  .profile-report-form > div:last-child button,
  .moderation-report-actions button,
  .moderation-admin-tools form > div button {
    width: 100%;
  }

  .moderation-report-list {
    max-height: none;
    overflow: visible;
  }

  .account-session-list article {
    align-items: stretch;
    flex-direction: column;
  }

  .account-session-list button,
  .account-security-card > button,
  .account-security-card form button {
    width: 100%;
  }

  .account-security-events {
    max-height: none;
    overflow: visible;
  }

  .auth-popup {
    place-items: end center;
    padding-left: max(0.65rem, env(safe-area-inset-left));
    padding-right: max(0.65rem, env(safe-area-inset-right));
  }

  .auth-popup-panel {
    max-height: min(92dvh, 46rem);
    border-radius: 20px 20px 12px 12px;
  }

  .app {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom));
    align-content: start;
  }

  .panel,
  .game {
    border-radius: 20px;
  }

  .sandbox-setting {
    grid-template-columns: 1fr;
  }

  .sandbox-setting button {
    width: 100%;
  }

  .extra-settings-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .room-access-fields,
  .invite-link-actions,
  .invite-link-result {
    grid-template-columns: minmax(0, 1fr);
  }

  .invite-link-result button {
    width: 100%;
  }

  .quick-actions {
    right: max(0.65rem, env(safe-area-inset-right));
    bottom: calc(0.65rem + env(safe-area-inset-bottom));
    max-width: calc(100% - 1.3rem - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  .quick-actions-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.45rem);
    width: min(18rem, calc(100vw - 1.3rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-actions-menu .social-floating-button,
  .quick-actions-menu .players-floating-button,
  .quick-actions-menu .log-floating-button,
  .quick-actions-menu .device-floating-button,
  .quick-actions-menu .account-floating-button,
  .quick-actions-menu .pause-floating-button,
  .quick-actions-menu .reset-game-floating-button,
  .quick-actions-menu .end-sandbox-floating-button {
    left: auto;
    right: auto;
    bottom: auto;
    min-height: 2.8rem;
    padding: 0 0.35rem;
    font-size: 0.78rem;
  }

  .quick-actions-toggle {
    min-width: 4.5rem;
    min-height: 3rem;
    padding: 0 0.65rem;
    font-size: 0.86rem;
  }

  .game {
    align-self: start;
    min-height: 0;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 0.55rem;
    padding: 0.55rem;
  }

  .join-panel {
    background:
      radial-gradient(circle at 100% 0, rgba(108, 229, 255, 0.13), transparent 16rem),
      linear-gradient(150deg, rgba(27, 29, 61, 0.92), rgba(10, 12, 27, 0.96));
  }

  .home-hero h1 {
    font-size: clamp(2.7rem, 15vw, 4.25rem);
  }

  .game-preview {
    border-radius: 16px;
  }

  .table {
    min-height: 0;
    gap: 0.65rem;
    padding: 0.65rem;
    border-radius: 20px;
  }

  .game-flow-status {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.65rem;
    text-align: left;
  }

  .game-flow-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .game-flow-badge {
    grid-column: 2;
    justify-self: start;
    padding: 0.25rem 0.48rem;
  }

  .card {
    max-width: 7rem;
  }

  .deck .card {
    max-width: 5.75rem;
  }

  .reveal-card {
    max-width: 6.25rem;
  }

  .own-hand {
    padding-top: 0.55rem;
  }

  .own-cards.is-empty {
    min-height: 1.75rem;
  }

  .own-cards.is-empty .empty-hand {
    font-size: 0.9rem;
  }

  .bank-status {
    margin-top: 0.4rem;
  }

  .answer-controls {
    grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
    gap: 0.5rem;
  }

  .answer-controls button {
    min-height: 3rem;
    padding: 0.55rem;
  }

  .game.is-driving {
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .game.is-driving .table {
    gap: 0.45rem;
    padding: 0.45rem;
  }

  .game.is-driving .reveal-card {
    display: none;
  }

  .game.is-driving .busdriver-drive-panel {
    gap: 0.42rem;
  }

  .game.is-driving .pixel-road-scene {
    height: clamp(8.25rem, 19dvh, 9.75rem);
    border-width: 2px;
  }

  .game.is-driving .busdriver-pixel-bus {
    width: min(43%, 10rem);
  }

  .game.is-driving .busdriver-drive-info {
    gap: 0.35rem;
    padding: 0.48rem 0.55rem;
  }

  .game.is-driving .busdriver-drive-info > div:first-child {
    align-items: center;
    gap: 0.4rem;
  }

  .game.is-driving .busdriver-drive-info .eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
  }

  .game.is-driving .busdriver-drive-info strong {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .game.is-driving .busdriver-drive-progress {
    gap: 0.22rem;
  }

  .game.is-driving .busdriver-progress-stop {
    height: 0.48rem;
    border-width: 1px;
  }

  .game.is-driving .busdriver-drive-question {
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .game.is-driving .busdriver-card-history {
    gap: 0.28rem;
    padding: 0.42rem 0.5rem;
  }

  .game.is-driving .busdriver-card-history-header strong {
    font-size: 0.86rem;
  }

  .game.is-driving .busdriver-card-history-header span {
    font-size: 0.65rem;
  }

  .game.is-driving .busdriver-card-history-row {
    min-height: 2.65rem;
    gap: clamp(0.18rem, 1vw, 0.32rem);
  }

  .game.is-driving .busdriver-history-card {
    width: clamp(1.85rem, 8vw, 2.25rem);
    flex-basis: 2.25rem;
    border-width: 1px;
    font-size: 0.75rem;
  }

  .game.is-driving .busdriver-history-card span:last-child {
    font-size: 0.86rem;
  }

  .game.is-driving .game-flow-status {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.5rem 0.55rem;
  }

  .game.is-driving .game-flow-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    font-size: 1rem;
  }

  .game.is-driving .game-flow-status .eyebrow {
    font-size: 0.64rem;
  }

  .game.is-driving .game-flow-status strong {
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .game.is-driving #gameFlowDetail {
    overflow: hidden;
    display: -webkit-box;
    font-size: 0.75rem;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .game.is-driving .game-flow-badge {
    display: none;
  }

  .game.is-driving .controls {
    gap: 0.4rem;
  }

  .game.is-driving .answer-controls button {
    min-height: 2.9rem;
    font-size: 0.92rem;
  }

  .app:has(.game.is-driving) .quick-actions-toggle {
    min-width: 4rem;
    min-height: 2.75rem;
    padding-inline: 0.55rem;
    font-size: 0.78rem;
  }

  .give-controls {
    gap: 0.5rem;
  }

  .give-context,
  .give-targets,
  .give-submit {
    grid-column: 1 / -1;
  }

  .give-context {
    padding: 0.55rem 0.6rem;
  }

  .give-context-card {
    width: 2.75rem;
  }

  .give-targets {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    max-height: min(20rem, 48dvh);
    padding-right: 0.2rem;
  }

  .give-target {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
    min-height: 0;
    padding: 0.5rem 0.6rem;
  }

  .give-target-name {
    font-size: 0.92rem;
  }

  .give-counter {
    grid-template-columns: 2.75rem 1.65rem 2.9rem 2.75rem;
    gap: 0.2rem;
  }

  .give-counter .sip-count {
    min-width: 1.65rem;
  }

  .give-max-button {
    min-width: 2.9rem;
    padding-inline: 0.35rem;
  }

  .game[data-game-type="horse-racing"] .table {
    display: none;
  }

  .game[data-game-type="horse-racing"] .card {
    max-width: 6.8rem;
  }

  .game[data-game-type="horse-racing"] .deck .card {
    max-width: 5.4rem;
  }

  .game[data-game-type="horse-racing"] .own-hand {
    padding-top: 0.5rem;
  }

  .game[data-game-type="horse-racing"] .horse-racing-controls,
  .game[data-game-type="horse-racing"] .horse-track {
    gap: 0.45rem;
  }

  .horse-race-stage {
    gap: 0.6rem;
    min-height: 15rem;
    padding: 0.65rem;
  }

  .horse-race-stage-title > span {
    font-size: 2rem;
  }

  .horse-race-card {
    width: 3.4rem;
  }

  .pixel-horse-course {
    padding: 4.65rem 3px 3px;
  }

  .pixel-horse-lane {
    height: 3.1rem;
  }

  .pixel-race-scenery {
    height: 4.5rem;
  }

  .pixel-horse-sprite {
    top: 58%;
  }

  .horse-race-histories {
    grid-template-columns: minmax(0, 1fr);
  }

  .horse-race-history summary {
    min-height: 4.75rem;
    padding: 0.45rem 0.6rem;
  }

  .horse-win-celebration {
    grid-template-columns: auto minmax(0, auto);
    padding: 0.75rem;
  }

  .game[data-game-type="horse-racing"] .horse-lane {
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
  }

  .horse-lobby-lineup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game[data-game-type="horse-racing"] .primary-game-action {
    position: sticky;
    top: max(0.65rem, env(safe-area-inset-top));
    z-index: 8;
  }

  .log-floating-button,
  .players-floating-button,
  .social-floating-button {
    min-height: 3rem;
    font-size: 0.92rem;
  }
}

@media (max-width: 360px) {
  .give-target {
    grid-template-columns: 1fr;
  }

  .give-counter {
    justify-content: start;
  }
}