/* Gachi stylesheet: responsive.css. Global @media (max-width: 560px / 360px) overrides incl. :root token overrides and iOS bottom-bar rules. */
/* Extracted verbatim from index.html. Load order is significant; see styles/README.md. */

@media (max-width: 560px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  :root {
    --shell-gutter: 0px;
    --screen-padding-x: 14px;
    --screen-padding-y: 16px;
    --hero-padding-x: 18px;
    --hero-padding-y: 24px;
    --floater-top: max(32%, calc(var(--safe-top) + 220px));
  }

  .page {
    position: fixed;
    inset: 0;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
  }

  body.is-ios-installed-web-app .page {
    bottom: calc(-1 * var(--ios-installed-bottom-reach));
  }

  .card {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .screen {
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: max(var(--screen-padding-y), calc(var(--safe-top) + 8px));
    padding-bottom: max(20px, calc(var(--screen-padding-y) + var(--safe-bottom)));
  }

  .screen[data-screen="step-1"],
  .screen[data-screen="step-2"],
  .screen[data-screen="step-3"],
  .screen[data-screen="step-5"],
  .screen[data-screen="step-6"],
  .screen[data-screen="official-challenges"],
  .screen[data-screen="official-summary"] {
    overscroll-behavior-y: contain;
  }

  .screen[data-screen="step-1"] > .progress-block,
  .screen[data-screen="step-2"] > .progress-block,
  .screen[data-screen="step-3"] > .progress-block,
  .screen[data-screen="step-5"] > .progress-block,
  .screen[data-screen="official-challenges"] > .progress-block {
    --create-progress-top-inset: max(var(--screen-padding-y), calc(var(--safe-top) + 8px));
  }

  .invite-screen {
    padding-bottom: calc(160px + var(--safe-bottom) + var(--viewport-bottom-offset) + var(--native-bottom-reserve));
  }

  .form-actions,
  .invite-response-block,
  #summary-response-block {
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    padding-left: calc(var(--screen-padding-x) + var(--safe-left));
    padding-right: calc(var(--screen-padding-x) + var(--safe-right));
  }

  .step-1-form {
    min-height: auto;
    padding-bottom: calc(104px + var(--safe-bottom) + var(--native-bottom-reserve));
  }

  .step-1-demo-block {
    margin-top: clamp(0px, 0.6svh, 6px);
    margin-bottom: 8px;
  }

  .step-1-demo-block:not([hidden]) + #step-1-note.is-negotiation-locked-note {
    margin-top: clamp(-24px, -2.3svh, -18px);
  }

  .screen.has-bottom-nav {
    padding-bottom: var(--bottom-nav-scroll-reserve);
  }

  .dashboard-screen.has-bottom-nav {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 4px;
    overflow: hidden;
    padding-top: max(4px, calc(var(--safe-top) - 2px));
    padding-bottom: 0;
  }

  .dashboard-screen[data-screen="dashboard"].has-bottom-nav {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 0;
    padding-top: 0;
  }

  .dashboard-screen[data-screen="challenges"].has-bottom-nav {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0;
    padding-top: 0;
  }

  .dashboard-screen.has-bottom-nav > .dashboard-panel {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    padding-bottom: var(--bottom-nav-scroll-reserve);
  }

  .dashboard-screen.has-bottom-nav > .dashboard-panel::-webkit-scrollbar,
  .hero-card.has-bottom-nav > .hero-main::-webkit-scrollbar,
  .screen::-webkit-scrollbar {
    display: none;
  }

  .dashboard-screen.has-bottom-nav > .dashboard-actions {
    margin-top: 0;
    padding-top: 0;
  }

  .hero-card.has-bottom-nav {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    justify-content: stretch;
    align-items: stretch;
    overflow: hidden;
    padding-bottom: 0;
  }

  .hero-card.has-bottom-nav > .dashboard-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--viewport-bottom-offset);
    transform: translateY(var(--bottom-nav-y-offset));
    width: 100%;
    margin: 0;
    --bottom-bar-underfill: 0px;
    padding-bottom: max(10px, calc(var(--safe-bottom) + var(--viewport-bottom-offset) + var(--native-bottom-reserve) + 8px));
  }

  .hero-card.has-bottom-nav > .hero-main {
    min-height: 0;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: none;
    padding: var(--home-hero-top-space) 0 calc(
      88px
      + var(--bottom-action-gap)
      + var(--native-bottom-reserve)
      + max(20px, var(--home-hero-bottom-space))
    );
  }

  .dashboard-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--viewport-bottom-offset);
    width: 100%;
    margin: 0;
    padding-top: var(--bottom-nav-top-padding);
    padding-left: calc(var(--screen-padding-x) + var(--safe-left));
    padding-right: calc(var(--screen-padding-x) + var(--safe-right));
    padding-bottom: max(10px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 8px));
    transform: translateY(var(--bottom-nav-y-offset));
    box-shadow: none;
  }

  body.is-ios-installed-web-app .dashboard-screen[data-screen="dashboard"] > .dashboard-bottom-nav,
  body.is-ios-installed-web-app .dashboard-screen[data-screen="challenges"] > .dashboard-bottom-nav,
  body.is-ios-installed-web-app:not(.is-text-entry-active) .form-actions.create-bottom-actions,
  body.is-ios-installed-web-app:not(.is-text-entry-active) .invite-response-block:not(#summary-response-block),
  body.is-ios-installed-web-app:not(.is-text-entry-active) [data-screen="step-6"]:not(.has-summary-response) #summary-response-block {
    bottom: calc(var(--viewport-bottom-offset) - var(--ios-installed-bottom-reach));
  }

  body.is-ios-installed-web-app:not(.is-text-entry-active) .form-actions.create-bottom-actions,
  body.is-ios-installed-web-app:not(.is-text-entry-active) .invite-response-block:not(#summary-response-block),
  body.is-ios-installed-web-app:not(.is-text-entry-active) [data-screen="step-6"]:not(.has-summary-response) #summary-response-block {
    transform: translateY(var(--bottom-nav-y-offset));
  }

  body.is-ios-installed-web-app:not(.is-text-entry-active) .form-actions.detail-actions {
    bottom: calc(var(--viewport-bottom-offset) + max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px)) - var(--ios-installed-bottom-reach));
    transform: translateY(var(--bottom-nav-y-offset));
  }

  body.is-ios-browser-web-app:not(.is-text-entry-active) .form-actions.create-bottom-actions,
  body.is-ios-browser-web-app:not(.is-text-entry-active) .invite-response-block:not(#summary-response-block),
  body.is-ios-browser-web-app:not(.is-text-entry-active) [data-screen="step-6"]:not(.has-summary-response) #summary-response-block,
  body.is-ios-browser-web-app:not(.is-text-entry-active) .form-actions.detail-actions {
    transform: translateY(var(--bottom-nav-y-offset));
  }

  @supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
      .dashboard-screen[data-screen="dashboard"] > .dashboard-bottom-nav,
      .dashboard-screen[data-screen="challenges"] > .dashboard-bottom-nav,
      body:not(.is-text-entry-active) .form-actions.create-bottom-actions,
      body:not(.is-text-entry-active) .invite-response-block:not(#summary-response-block),
      body:not(.is-text-entry-active) [data-screen="step-6"]:not(.has-summary-response) #summary-response-block {
        bottom: calc(var(--viewport-bottom-offset) - var(--ios-installed-bottom-reach));
      }

      body:not(.is-text-entry-active) .form-actions.create-bottom-actions,
      body:not(.is-text-entry-active) .invite-response-block:not(#summary-response-block),
      body:not(.is-text-entry-active) [data-screen="step-6"]:not(.has-summary-response) #summary-response-block {
        transform: translateY(var(--bottom-nav-y-offset));
      }

      body:not(.is-text-entry-active) .form-actions.detail-actions {
        bottom: calc(var(--viewport-bottom-offset) + max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px)) - var(--ios-installed-bottom-reach));
        transform: translateY(var(--bottom-nav-y-offset));
      }
    }
  }

  .task-grid {
    gap: 8px;
    padding: 7px;
  }

  .task-card {
    min-height: 88px;
    padding: 10px 8px;
    border-radius: var(--radius-lg);
  }

  .task-card.is-placeholder {
    min-height: 88px;
  }

  .task-card .task-card-top {
    flex: 0 0 auto;
  }

  .dashboard-floater-card {
    width: min(calc(100% - 20px), var(--floater-max-width));
    padding-bottom: 14px;
    max-height: min(72svh, 620px);
    max-height: min(72dvh, 620px);
  }

  .dashboard-floater-intro {
    width: min(calc(100% - 20px), var(--floater-max-width));
  }

  #invite-intro-floater {
    top: max(calc(var(--safe-top) + 10px), 3svh);
    left: 0 !important;
    right: 0;
    margin-inline: auto;
    width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 28px), 360px);
    transform: none !important;
  }

  #invite-intro-floater .dashboard-floater-card {
    max-height: calc(100svh - max(calc(var(--safe-top) + 10px), 3svh) - max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px)));
    max-height: calc(100dvh - max(calc(var(--safe-top) + 10px), 3svh) - max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.is-native-app.is-invite-intro-entry-active #invite-intro-floater {
    top: max(calc(var(--safe-top) + 10px), 3svh);
    transform: none !important;
  }

  body.is-native-app.is-invite-intro-entry-active #invite-intro-floater .dashboard-floater-card {
    max-height: calc(var(--app-height) - max(calc(var(--safe-top) + 10px), 3svh) - var(--keyboard-overlay-inset) - max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px)));
  }

  .dashboard-floater,
  .stake-overlay,
  .share-floater {
    position: fixed;
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: translateY(-50%);
  }

  .share-floater {
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: translateY(-50%);
  }

  #detail-standings-floater,
  #detail-completion-floater,
  #detail-diploma-floater {
    left: 0 !important;
    right: 0;
    margin-inline: auto;
  }

  #detail-standings-floater {
    width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 20px), var(--floater-max-width));
  }

  #detail-completion-floater,
  #detail-diploma-floater {
    width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 24px), var(--floater-max-width));
  }

  #detail-standings-floater {
    top: max(calc(var(--safe-top) + 34px), 8svh) !important;
    transform: none !important;
  }

  #detail-completion-floater,
  #detail-diploma-floater {
    top: max(calc(var(--safe-top) + 10px), 3svh) !important;
    transform: none !important;
  }

  #detail-completion-floater .dashboard-floater-card,
  #detail-diploma-floater .dashboard-floater-card {
    max-height: calc(100svh - max(calc(var(--safe-top) + 10px), 3svh) - max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px)));
    max-height: calc(100dvh - max(calc(var(--safe-top) + 10px), 3svh) - max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px)));
  }

  #detail-standings-floater .dashboard-floater-card {
    width: 100%;
  }

  #detail-day-floater {
    top: max(calc(var(--safe-top) + 34px), 8svh) !important;
    left: 0 !important;
    right: 0 !important;
    margin-inline: auto !important;
    transform: none !important;
    width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 20px), var(--floater-max-width)) !important;
  }

  #detail-day-floater .dashboard-floater-card {
    width: 100%;
    max-height: calc(100svh - max(calc(var(--safe-top) + 34px), 8svh) - max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px)));
    max-height: calc(100dvh - max(calc(var(--safe-top) + 34px), 8svh) - max(12px, calc(var(--safe-bottom) + var(--native-bottom-reserve) + 10px)));
  }

  .dashboard-floater {
    width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 20px), var(--floater-compact-max-width));
  }

  .dashboard-floater-intro {
    width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 20px), var(--floater-max-width));
  }

  .share-floater {
    width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 20px), var(--floater-max-width));
  }

  .stake-overlay {
    width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 20px), 340px);
  }

  #display-name-floater,
  #custom-goal-floater,
  #stake-overlay {
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: translateY(-50%);
  }

  #display-name-floater {
    left: 50%;
    right: auto;
    top: var(--floater-top);
    margin-inline: 0;
    transform: translate(-50%, -50%);
  }

  #custom-goal-floater {
    width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 20px), 340px);
  }

  .dashboard-floater-intro .dashboard-floater-card,
  #dashboard-response-floater .dashboard-floater-card {
    padding: 18px 16px;
  }

  #dashboard-response-floater .dashboard-floater-card {
    gap: 10px;
    padding-bottom: 24px;
  }

  #install-guide-floater,
  #about-gachi-floater,
  #feedback-floater {
    top: max(calc(var(--safe-top) + 12px), 4svh);
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: none;
  }

  #install-guide-floater .dashboard-floater-card,
  #about-gachi-floater .dashboard-floater-card,
  #feedback-floater .dashboard-floater-card {
    gap: 18px;
  }

  #dashboard-response-floater .dashboard-response-emoji {
    font-size: 5.2rem;
  }

  #dashboard-response-floater .dashboard-floater-title,
  #dashboard-response-floater .dashboard-floater-subtitle,
  #dashboard-response-floater .dashboard-floater-note {
    max-width: none;
  }

  .dashboard-floater-actions,
  .invite-intro-actions {
    flex-direction: column;
  }

  .dashboard-floater-actions > *,
  .invite-intro-actions > * {
    width: 100%;
  }

  #display-name-confirm,
  #invite-intro-confirm,
  #invite-resume-confirm {
    width: min(100%, 280px);
    max-width: 280px;
    align-self: center;
  }

  #dashboard-response-floater .dashboard-floater-actions {
    flex-direction: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .share-floater-actions {
    flex-direction: row;
  }

  .share-floater-actions > * {
    width: auto;
  }

  .detail-chat-input {
    min-height: 44px;
  }

  .primary-button,
  .secondary-link {
    min-height: 44px;
  }

  .detail-stat-row {
    flex-direction: column;
    gap: 6px;
  }

  .detail-stat-value {
    text-align: left;
  }

  .detail-stat-value.is-list,
  .detail-detail-copy {
    text-align: left;
  }

  .detail-task-list {
    justify-items: start;
  }

  .detail-duel-card {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    padding: 14px 12px;
  }

  .detail-duel-card.is-together {
    grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

[data-screen="challenges"] .challenge-list {
  padding-top: 7px;
}

  .detail-duel-side {
    min-width: 0;
  }

  .detail-duel-divider {
    margin: 0;
    align-self: center;
    transform: translateY(2px);
  }
}

@media (max-width: 360px) {
  :root {
    --shell-gutter: 0px;
    --screen-padding-x: 12px;
    --hero-padding-x: 14px;
    --screen-padding-y: 14px;
    --floater-top: max(28%, calc(var(--safe-top) + 200px));
  }

  .dashboard-floater-card {
    gap: 9px;
    padding-inline: 12px;
  }

  #dashboard-response-floater .dashboard-response-emoji {
    font-size: 4.8rem;
  }

  .install-guide-list {
    font-size: 0.9rem;
    gap: 6px;
  }

  .mode-grid {
    gap: 10px;
  }

  .mode-card {
    min-height: 110px;
    padding: 10px 12px;
  }

}

@media (min-width: 700px) and (max-height: 920px) {
  .screen[data-screen="step-1"] {
    padding-bottom: calc(132px + var(--safe-bottom) + var(--native-bottom-reserve));
  }

  .step-1-form {
    padding-bottom: calc(132px + var(--safe-bottom) + var(--native-bottom-reserve));
  }

  .step-1-demo-block {
    margin-bottom: 24px;
  }
}