/* Shared mobile layer. Keep this stylesheet after every route stylesheet.
   Desktop page-width tokens stay owned by the existing design system. */
:root {
  --salon-safe-top: env(safe-area-inset-top, 0px);
  --salon-safe-right: env(safe-area-inset-right, 0px);
  --salon-safe-bottom: env(safe-area-inset-bottom, 0px);
  --salon-safe-left: env(safe-area-inset-left, 0px);
  --salon-viewport-height: 100dvh;
  --salon-viewport-top: 0px;
  --salon-keyboard-inset: 0px;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:is(button, a, input, textarea, select, summary) { touch-action: manipulation; }
:is(.admin-table-wrap, .admin-sidebar, .room-menu, .ba-tabs, .bk-days) {
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
:is(.admin-table-wrap, .admin-content, .admin-panel, .admin-split,
  .booking-page, .bk-workspace, .lr-layout, .lr-main-column, .lr-side-column,
  .ch-page, .ch-admin, .dealer-page) { min-inline-size: 0; }
:is(.admin-table-wrap, .admin-table) { max-inline-size: 100%; }
.admin-table-wrap { overflow-x: auto; }
.admin-table-wrap:focus-visible { outline: 2px solid var(--accent, #d8b76d); outline-offset: 4px; }
:is(.save-state, .bk-status, .ba-form-status, .lr-form-status, .invitation-status,
  .game-avatar-status, .admin-notice) { overflow-wrap: anywhere; }

@media (pointer: coarse), (max-width: 900px) {
  :is(.button, .text-button, .mini-button, .icon-button, .beta-badge,
    .admin-nav-button, .room-editor-tabs button, .room-controls .button,
    .filter-pills button, .bk-button, .bk-slot, .ba-button, .ba-text-link,
    .dealer-button, .ch-button, .lr-button, .cinema-try, .invitation-preview) {
    min-block-size: 44px;
  }
  :is(.icon-button, .ba-icon-button, .ambient-control) {
    min-inline-size: 44px; min-block-size: 44px;
  }
  :is(.form-toggle, .bk-consent, .ba-check, .ch-checkbox, .game-check, .lr-checkbox) {
    min-block-size: 44px;
  }
  :is(.game-check input, .form-toggle input, .ba-check input, .lr-checkbox input) {
    min-inline-size: 20px; min-block-size: 20px;
  }
  :is(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]) {
    font-size: max(16px, 1em);
  }
  /* The canvas and hold-to-walk controls need uninterrupted pointer gestures. */
  .game-canvas, .game-touch-move button { touch-action: none; }
}

@media (max-width: 1100px) {
  .site-header .main-nav { display: none; }
  .site-header .mobile-menu { display: block; margin-inline-start: auto; }
  .site-header .mobile-menu summary { width: 44px; height: 44px; }
  .site-header { gap: 12px; }
  .mobile-menu nav {
    position: fixed;
    top: calc(var(--header-height, 78px) + var(--salon-safe-top) + 8px);
    right: max(12px, var(--salon-safe-right));
    left: max(12px, var(--salon-safe-left));
    width: auto;
    max-height: calc(var(--salon-viewport-height) - var(--header-height, 78px) - var(--salon-safe-top) - var(--salon-safe-bottom) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-menu nav a { min-height: 48px; overflow-wrap: anywhere; }
  .admin-content, .admin-sidebar { min-width: 0; }
  .ba-hours-row { grid-template-columns: minmax(100px, 1.2fr) minmax(85px, 1fr) minmax(85px, 1fr) 44px; }
  .ba-hours-row .ba-icon-button { width: 44px; height: 44px; }
}

@media (max-width: 900px), (max-height: 600px) and (pointer: coarse) {
  dialog:not(.salon-brand-splash) {
    max-width: calc(100% - max(12px, var(--salon-safe-left)) - max(12px, var(--salon-safe-right)));
    max-height: calc(var(--salon-viewport-height) - var(--salon-safe-top) - var(--salon-safe-bottom) - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 20px;
  }
  dialog:not(.salon-brand-splash)[open] {
    position: fixed;
    top: calc(var(--salon-viewport-top) + max(12px, var(--salon-safe-top)));
    bottom: auto;
    margin-block: 0;
  }
  .dialog-top, .game-dialog-heading { gap: 14px; }
  .dialog-top > div, .game-dialog-heading > div { min-width: 0; }
  .dialog-top .icon-button, .game-dialog-heading .game-icon {
    min-width: 44px; min-height: 44px; width: 44px; height: 44px; margin: 0;
  }
  .site-header, .home-mode .site-header {
    padding-top: var(--salon-safe-top);
    height: calc(var(--header-height, 78px) + var(--salon-safe-top));
    padding-left: max(18px, var(--salon-safe-left));
    padding-right: max(18px, var(--salon-safe-right));
  }
  .home-mode .site-header .beta-badge { min-height: 44px; }
  .filter-pills button { min-height: 44px; }
  .cinema-controls input[type=range] { min-height: 44px; }
  .cinema { padding-top: calc(var(--header-height, 62px) + var(--salon-safe-top)); }
  .cinema:fullscreen, .cinema.cinema-expanded { padding-top: 0; }
  .site-footer { padding-bottom: max(28px, var(--salon-safe-bottom)); }
  #toast { bottom: max(20px, calc(var(--salon-safe-bottom) + 12px)); overflow-wrap: anywhere; }
  body :is(.form-field input, .form-field textarea, .form-field select,
    .bk-field input, .bk-field textarea, .bk-field select,
    .ba-field input, .ba-field textarea, .ba-field select,
    .game-field input, .game-field select, .invitation-grid select,
    .invitation-link-label input, .live-room-page input, .live-room-page textarea,
    .live-room-page select, .ch-page input, .ch-page textarea, .ch-page select,
    .ch-admin input, .ch-admin textarea, .ch-admin select, .campaign-link input) {
    font-size: 16px;
  }
  :is(.game-dialog-copy, .game-privacy, .game-help-steps p, .game-history p,
    .game-avatar-provider p) { font-size: 14px; line-height: 1.65; }
  :is(.game-field, .game-check, .game-help-steps strong, .game-avatar-provider summary,
    .game-avatar-status, .game-import small, .game-avatar-provider small) {
    font-size: 13px;
  }
  .game-check { min-height: 44px; }
  .game-import small { line-height: 1.5; }
  .game-presets button small { font-size: 12px; line-height: 1.4; }
  .game-dialog > [data-game-avatar-reset] { font-size: 12px !important; min-height: 44px; }
  .game-dialog input:not([type=checkbox]):not([type=file]):not([type=range]), .game-dialog select { min-height: 48px; }
  .salon-game { min-height: 0; height: var(--salon-viewport-height); top: var(--salon-viewport-top); bottom: auto; }
  .game-header {
    padding: calc(12px + var(--salon-safe-top)) max(14px, var(--salon-safe-right)) 10px max(14px, var(--salon-safe-left));
    gap: 10px;
  }
  .game-header-actions { gap: 2px; flex-shrink: 0; }
  .game-header-actions .game-icon, .game-corner-controls .game-icon,
  .game-panel-heading .game-icon, .game-amount-field .game-icon {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  }
  .game-panel-heading .game-icon { margin: 0; }
  .game-panel-heading { gap: 8px; }
  .game-corner-controls .game-quality { min-width: 44px; min-height: 44px; }
  .game-location { top: calc(82px + var(--salon-safe-top)); }
  .game-engine-status { top: calc(82px + var(--salon-safe-top)); max-width: 45%; font-size: 10px; }
  .game-controls {
    left: max(12px, var(--salon-safe-left)); right: max(12px, var(--salon-safe-right));
    bottom: max(12px, var(--salon-safe-bottom));
  }
  .game-views button { min-width: 44px; min-height: 48px; font-size: 12px; }
  .game-text-button { min-height: 44px; font-size: 13px !important; }
  .game-primary { min-height: 48px; font-size: 14px !important; }
  .game-speech { font-size: 14px; line-height: 1.6; }
  .game-dealer strong { font-size: 14px; }
  .game-dealer > div > span { font-size: 11px; }
  .game-offer-form label, .game-budget, .game-current > span:last-child { font-size: 12px; }
  .game-offer-form label span, .game-current > span:first-child { font-size: 11px; }
  .game-offer-shortcuts button, .game-questions button { min-height: 44px; font-size: 12px; }
  .game-offer-form > .game-primary, .game-accept { min-height: 48px; font-size: 14px !important; }
  .game-questions summary { min-height: 44px; align-items: center; font-size: 13px; }
  .game-panel-footer { flex-wrap: wrap; gap: 8px; }
  .game-panel-footer .game-text-button { min-height: 44px; font-size: 12px !important; }
  .game-disclosure { font-size: 11px; line-height: 1.5; }
  .game-session-meta { flex-wrap: wrap; font-size: 11px; }
  .game-session-meta > span:first-child { font-size: 10px; }
  .game-touch-move {
    grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px;
    opacity: .9;
  }
  .game-touch-move button { min-width: 44px; min-height: 44px; }
  .game-negotiation {
    overscroll-behavior: contain; scroll-padding-block: 18px;
    max-height: calc(var(--salon-viewport-height) - 200px - var(--salon-safe-top) - var(--salon-safe-bottom));
  }
  .game-announcement { font-size: 13px; }
}

@media (max-width: 760px) {
  .site-footer > p, .site-footer small { font-size: 12px; line-height: 1.6; }
  .footer-navigation a, .footer-navigation button { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
  .footer-navigation { gap: 4px; }
  .admin-title { flex-wrap: wrap; }
  .admin-title > .button { font-size: 13px; min-height: 44px; }
  .admin-sidebar { padding-inline: max(14px, var(--salon-safe-left)); }
  .admin-nav-button { min-height: 44px; font-size: 13px; }
  .mini-button, .room-controls .button { min-height: 44px; font-size: 13px; }
  .admin-table { min-width: 560px; font-size: 14px; }
  .admin-table th { font-size: 12px; }
  .admin-table td { overflow-wrap: anywhere; }
  .admin-table td .mini-button { white-space: normal; }
  .admin-notice, .admin-panel > p, .form-field, .form-toggle { font-size: 14px; }
  .form-field small, .save-state { font-size: 12px; }
  .admin-panel { min-width: 0; }
  .ba-hours { padding-inline: 12px; }
  .ba-hours-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 10px; }
  .ba-hours-row > :first-child { grid-column: 1 / -1; }
  .ba-feature-flow { grid-template-columns: 1fr; gap: 12px; }
  .bk-days { grid-template-columns: repeat(7, minmax(44px, 1fr)); overflow-x: auto; gap: 6px; padding-bottom: 8px; }
  .bk-days > button > span { font-size: 11px; }
  .bk-days > button > i { font-size: 10px; }
  .bk-steps li { font-size: 12px; white-space: normal; }
  .bk-appointment-body { overflow-wrap: anywhere; }
  .bk-recap dl > div { grid-template-columns: minmax(70px, auto) minmax(0, 1fr); }
  .ch-demo { flex-wrap: wrap; }
  .ch-demo a { margin-inline-start: 0; }
  .ch-invitation-content { min-width: 0; }
  .ch-invitation-actions { flex-wrap: wrap; }
  .ch-invitation-actions > * { max-width: 100%; white-space: normal; }
  .lr-layout, .lr-side-column { min-width: 0; }
  .lr-controls .lr-button, .lr-scene-toolbar .lr-button,
  .lr-video-placeholder .lr-button, .lr-reactions .lr-button,
  .lr-face-framing .lr-controls .lr-button, .lr-stage-dock .lr-button {
    min-height: 44px; font-size: 13px;
  }
  .lr-scene-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .lr-world-navigation { width: 100%; margin-left: 0; gap: 8px; }
  .lr-world-navigation .lr-button { min-height: 44px; font-size: 12px; padding: 9px 10px; }
  .lr-world-modes, .lr-world-views { flex-wrap: wrap; gap: 6px; }
  .lr-world-status { top: 145px; left: 16px; right: 16px; }
  .lr-reactions { align-items: stretch; }
  .lr-reactions label { flex-wrap: wrap; font-size: 13px; }
  .lr-form-footer { flex-wrap: wrap; }
  .lr-form-footer .lr-button { min-height: 44px; font-size: 14px; }
  .lr-form-footer > span { max-width: 100%; font-size: 12px; }
  .lr-conversation, .lr-panel { min-width: 0; }
  .lr-shared-stage { min-height: min(550px, 76svh); height: 76svh; }
  .lr-shared-stage:fullscreen { height: var(--salon-viewport-height); min-height: 0; }
  .lr-shared-stage:fullscreen .lr-stage-dock {
    left: max(10px, var(--salon-safe-left)); right: max(10px, var(--salon-safe-right));
    bottom: max(10px, var(--salon-safe-bottom)); max-height: 40%; overflow-y: auto;
  }
  .lr-face-settings.lr-face-fullscreen { max-height: calc(var(--salon-viewport-height) - 200px); }
  .lr-face-settings summary { min-height: 44px; font-size: 14px; }
  .lr-face-framing input[type=range] { min-height: 44px; }
  .invitation-dialog { padding: 20px; }
  .invitation-note, .invitation-preview { font-size: 13px; }
  .cinema-caption .eyebrow, .cinema-service-note { font-size: 12px; }
  .cinema-caption h1 { overflow-wrap: break-word; }
  .cinema-entry-actions .cinema-cta { min-height: 48px; font-size: 14px; }
  .cinema-try { min-height: 44px; font-size: 14px; }
  .cinema-how-copy > .eyebrow, .cinema-service-grid .eyebrow { font-size: 12px; }
  .cinema-controls { grid-template-columns: repeat(5, minmax(44px, 1fr)) minmax(44px, 1fr); }
  .cinema-controls .cinema-control-invite { min-width: 44px; }
  .direction .brand-stage { min-width: 0; }
  .brand-notes dl > div { grid-template-columns: minmax(80px, 1fr) minmax(0, 1.7fr); }
  .brand-notes dd { margin-inline-start: 0; overflow-wrap: anywhere; }
  .roles { min-width: 0; }
}

@media (max-width: 600px) {
  .game-brand { min-width: 0; }
  .game-brand > span { font-size: 18px; letter-spacing: .1em; }
  .game-brand small { font-size: 6px; white-space: normal; }
  .game-brand img { width: 25px; height: 31px; }
  .game-intro, .has-cinematic-entry .game-intro {
    left: max(20px, var(--salon-safe-left)); right: max(20px, var(--salon-safe-right));
    max-width: none; bottom: calc(150px + var(--salon-safe-bottom));
  }
  .game-intro-actions .game-primary { min-height: 48px; font-size: 14px !important; }
  .game-intro-actions .game-text-button { min-height: 44px; font-size: 13px !important; }
  .game-views { max-width: none; }
  .game-views button { padding: 8px 5px; font-size: 11px; line-height: 1.4; white-space: normal; }
  .game-corner-controls { bottom: 72px; }
  .game-chapter, .has-cinematic-entry .game-chapter { top: calc(110px + var(--salon-safe-top)); }
  .has-cinematic-entry .game-chapter .game-text-button { min-height: 44px; font-size: 12px !important; }
  .game-negotiation {
    top: auto; left: max(12px, var(--salon-safe-left)); right: max(12px, var(--salon-safe-right));
    bottom: calc(86px + var(--salon-safe-bottom)); width: auto; padding: 16px 18px;
    max-height: calc(var(--salon-viewport-height) - 205px - var(--salon-safe-top) - var(--salon-safe-bottom));
  }
  .game-avatar-tag { top: calc(108px + var(--salon-safe-top)); }
  .game-return { top: calc(108px + var(--salon-safe-top)); min-height: 44px; font-size: 12px !important; }
  .is-playing .game-touch-move { top: calc(160px + var(--salon-safe-top)); }
  .is-playing:not(.is-panel-collapsed) .game-touch-move { display: none; }
  .is-playing:not(.is-panel-collapsed) .game-avatar-tag { display: none !important; }
  .game-tour { padding-left: max(20px, var(--salon-safe-left)); padding-right: max(20px, var(--salon-safe-right)); }
  .game-tour-caption > span { font-size: 11px; }
  .game-tour-skip { font-size: 13px !important; }
  .game-announcement { bottom: calc(92px + var(--salon-safe-bottom)); }
  .bk-appointment { grid-template-columns: minmax(95px, .65fr) minmax(0, 1.35fr); }
  .bk-appointment-body { padding: 20px 16px; }
  .ba-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .ba-tabs button { flex: 0 0 auto; min-height: 44px; font-size: 14px; }
  .ba-panel-heading { flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .site-header, .home-mode .site-header { gap: 8px; padding-inline: max(12px, var(--salon-safe-left)); }
  .site-header .beta-badge { min-width: 52px; padding-inline: 8px; }
  .game-header { gap: 6px; padding-inline: 10px; }
  .game-header-actions { gap: 0; }
  .game-brand { gap: 6px; }
  .game-brand > span { font-size: 16px; }
  .game-brand img { width: 21px; }
  .game-tour-actions { gap: 8px; }
  .game-tour-skip { min-width: 0; flex: 1; gap: 10px; }
  .bk-field-row, .bk-appointment, .bk-modes, .salon-calendar-providers { grid-template-columns: 1fr; }
  .bk-appointment-image { max-height: 180px; }
  .ch-pieces { gap: 5px; }
  .ch-piece > span { height: 95px; }
}

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .game-location, .game-engine-status { top: calc(70px + var(--salon-safe-top)); }
  .game-controls { justify-content: flex-start; bottom: max(8px, var(--salon-safe-bottom)); }
  .game-views { width: min(54%, 420px); }
  .game-views button { min-height: 44px; padding: 7px 9px; }
  .game-corner-controls { bottom: 0; right: 0; }
  .game-intro, .has-cinematic-entry .game-intro {
    top: calc(100px + var(--salon-safe-top)); bottom: 72px;
    max-width: 52%; overflow-y: auto; pointer-events: auto; padding-bottom: 8px;
  }
  .game-intro h1, .has-cinematic-entry .game-intro h1 { font-size: clamp(30px, 5vw, 44px); margin: 0 0 10px; }
  .game-intro-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .game-intro-line { font-size: 13px; margin-bottom: 12px; }
  .game-chapter, .has-cinematic-entry .game-chapter { top: 100px; bottom: auto; right: max(20px, var(--salon-safe-right)); }
  .game-negotiation {
    top: calc(76px + var(--salon-safe-top)); bottom: calc(62px + var(--salon-safe-bottom));
    right: max(12px, var(--salon-safe-right)); left: auto; width: min(46%, 390px);
    max-height: none; padding: 14px 18px;
  }
  .game-touch-move { display: none; }
  .game-avatar-tag { display: none !important; }
  .game-tour { padding-block: 24px max(16px, var(--salon-safe-bottom)); gap: 16px; }
  .game-tour-caption p { font-size: 25px; }
  .game-tour-caption > span { font-size: 10px; }
  .game-tour-skip { min-height: 44px; }
  .lr-shared-stage { min-height: 300px; height: 86svh; max-height: none; }
  .lr-shared-stage:fullscreen { height: var(--salon-viewport-height); min-height: 0; }
  .lr-shared-stage:fullscreen .lr-scene-toolbar { top: max(10px, var(--salon-safe-top)); }
}

@media (max-width: 900px) {
  html[data-salon-keyboard-open=true] .game-negotiation {
    top: calc(8px + var(--salon-safe-top)); bottom: 12px; max-height: none;
    z-index: 12;
  }
  html[data-salon-keyboard-open=true] .game-controls,
  html[data-salon-keyboard-open=true] .game-header,
  html[data-salon-keyboard-open=true] .game-avatar-tag,
  html[data-salon-keyboard-open=true] .game-return,
  html[data-salon-keyboard-open=true] .game-touch-move { visibility: hidden; }
}

/* Install and native avatar-photo surfaces use the existing gold/ink system. */
.app-install-dialog {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid #d8b76d66;
  border-radius: 4px;
  background: linear-gradient(135deg, #1b1e15, #0c0f09);
  color: #efe5cf;
  overflow-y: auto;
}
.app-install-dialog h2 {
  font-family: var(--brand-serif, 'Bodoni Moda', Georgia, serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 24px;
  color: #ebd5a5;
}
.app-install-dialog p { font-size: 16px; line-height: 1.7; margin: 0 0 18px; color: #d0c7b3; }
.app-install-dialog p + p { font-size: 14px; color: #b6ae9c; }
.app-install-dialog > button { min-height: 48px; margin-top: 8px; padding-inline: 24px; font-size: 15px; border-color: #d8b76d66; }
[data-install-app] { min-height: 44px; }
.game-photo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.game-photo-actions > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; flex: 1 1 150px; padding: 12px 16px;
  color: #e7d3a6; background: #d8b76d0b; border: 1px solid #d8b76d55;
  font-size: 14px !important; line-height: 1.5; white-space: normal;
}
.game-photo-actions > button:focus-visible { outline: 2px solid #ebd5a5; outline-offset: 4px; }
.game-dialog [data-game-photo-preview] {
  max-width: 100%; width: min(100%, 320px); height: auto; margin: 14px auto;
  padding: 12px; border: 1px solid #d8b76d55; background: #080a06;
}
.game-dialog [data-game-photo-image] { display: block; max-width: 100%; max-height: 320px; width: auto; height: auto; object-fit: contain; margin: 0 auto 12px; }
.game-dialog [data-game-photo-preview] figcaption { font-size: 14px; line-height: 1.6; }
.game-dialog [data-game-photo-preview] [data-game-photo-remove] { min-height: 44px; white-space: normal; }
@media (max-width: 360px) {
  .game-photo-actions > button { flex-basis: 100%; }
  .app-install-dialog > button { width: 100%; }
}

/* Narrow portrait: let the headline and actions stack without min-content overflow. */
@media (max-width: 420px) {
  .cinema-caption { flex-direction: column; align-items: stretch; }
  .cinema-caption > div { min-width: 0; }
  .cinema-entry-actions { margin-left: 0; width: 100%; }
  .cinema-entry-actions :is(.cinema-cta, .cinema-try) { min-height: 44px; justify-content: space-between; }
}

/* The accessible game uses the same touch and readable-input floor as the 3D UI. */
@media (max-width: 900px), (pointer: coarse) {
  .demo-camera-switch button, .demo-stage-offer, .demo-question-prompts button,
  .demo-offer-presets button, .demo-voice-button, .demo-exit-link,
  .demo-text-button, .demo-chapters button, .demo-scene { min-height: 44px; }
  .demo-topbar-actions .demo-icon-button, .demo-guide-label > .demo-icon-button,
  .demo-guide-transport .demo-icon-button, .demo-chat-form button {
    width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  }
  .demo-chat-form input { min-height: 44px; font-size: 16px; }
  .demo-offer-form input { font-size: max(16px, 1em); }
}
@media (max-width: 420px) {
  .demo-stage { min-height: 420px; }
  .demo-stage-copy { bottom: 153px; max-width: calc(100% - 44px); }
  .demo-stage-copy h2 { font-size: clamp(36px, 12vw, 49px); overflow-wrap: anywhere; }
  .demo-stage-bottom { flex-direction: column; align-items: stretch; gap: 6px; bottom: 30px; }
  .demo-camera-switch button { flex: 1; white-space: normal; font-size: 11px; padding-inline: 6px; }
  .demo-stage-offer { justify-content: space-between; width: 100%; font-size: 12px !important; }
}


/* Studio, movements and houses added after the initial mobile pass. */
:is(.as-head > div, .as-stage-bottom > div, .as-panel, .as-footer-copy,
  .sa-top > div, .sa-merchant, .sa-grid > *, .movement-admin-request,
  .movement-admin-request > header > div, .sp-heading > div, .sp-selection > div) {
  min-inline-size: 0;
}
:is(.as-model-name, .as-status, .as-job-note, .sa-preview-label, .sa-status,
  .sa-error, .sa-active-plan, .movement-admin-request h2,
  .movement-admin-request > header p) { overflow-wrap: anywhere; }
.sp-table-scroll { overscroll-behavior-inline: contain; }

@media (pointer: coarse), (max-width: 900px) {
  .avatar-studio :is(button, .as-upload, .as-consent) { min-height: 44px; }
  .avatar-studio :is(.as-close, .as-color, .as-color-input) {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  }
  .as-close { flex: 0 0 44px; }
  .avatar-studio :is(.as-input, .as-select, .as-textarea) {
    min-height: 48px; font-size: 16px;
  }
  .avatar-studio :is(.as-button, .as-upload, .as-text-link, .as-presets button,
    .as-choice-row button, .as-preview-controls button, .as-tabs button) { font-size: 13px; }
  .as-text-link { display: inline-flex; align-items: center; }
  .as-consent { font-size: 13px; }
  .as-consent input { width: 20px; height: 20px; flex-basis: 20px; }
  :is(.as-label, .as-small, .as-status, .as-job-note, .as-disabled-note,
    .as-job-history, .as-footer-copy small) { font-size: 13px; line-height: 1.6; }
  .as-presets small, .as-file-name, .as-model-kind { font-size: 12px; }
  .as-stage-bottom { flex-wrap: wrap; }
  .as-stage-bottom > div:first-child { flex: 1 1 140px; }
  .as-preview-controls { gap: 8px; }
  .as-preview-controls button { min-width: 44px; padding-inline: 10px; }
  .as-color-row { gap: 12px; }
  .game-avatar-studio-dialog .as-head {
    position: sticky; top: 0; z-index: 8; background: #111310;
  }
  .game-dialog.game-avatar-studio-dialog {
    max-height: calc(var(--salon-viewport-height) - var(--salon-safe-top) - var(--salon-safe-bottom) - 28px);
  }
  .movement-toggle, .movement-actors button, .movement-presence button,
  .movement-personality summary, .movement-bespoke { min-height: 44px; }
  .movement-heading .game-icon {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; flex: none;
  }
  .movement-toggle, .movement-actors button, .movement-presence button { font-size: 12px !important; }
  .movement-actors button { flex-wrap: wrap; }
  .movement-actors button span { font-size: 11px; }
  .movement-presence { font-size: 12px; }
  .movement-card > span { font-size: 13px; padding-right: 10px; overflow-wrap: anywhere; }
  .movement-card > small { font-size: 10px; }
  .movement-signature strong { font-size: 14px; }
  .movement-signature small { font-size: 11px; letter-spacing: .1em; }
  .movement-personality summary, .movement-personality .game-check,
  .movement-range, .movement-tomato > span, .movement-bespoke > span:nth-child(2) { font-size: 13px; }
  .movement-range input { min-height: 44px; }
  .movement-range output, .movement-tomato > small, .movement-bespoke small { font-size: 11px; }
  .movement-local-note, .movement-price-note p, .movement-request p { font-size: 12px; }
  .movement-price-note > span, .movement-request small { font-size: 11px; }
  .movement-request > div { flex-wrap: wrap; gap: 8px; }
  .movement-price-note { flex-wrap: wrap; gap: 8px; }
  body .movement-brief-dialog :is(input:not([type=checkbox]), textarea, select) {
    font-size: 16px; min-height: 48px;
  }
  dialog.movement-brief-dialog {
    max-height: calc(var(--salon-viewport-height) - var(--salon-safe-top) - var(--salon-safe-bottom) - 28px) !important;
  }
  .movement-admin-state { white-space: normal; overflow-wrap: anywhere; }
  .movement-admin-meta { font-size: 13px !important; }
  .studio-admin .sa-provider-list li { font-size: 14px; flex-wrap: wrap; }
  .studio-admin .sa-provider-list span, .studio-admin .sa-state { font-size: 12px; }
  .studio-admin .sa-form .ba-panel > p, .studio-admin .sa-status { font-size: 14px; }
  .studio-admin input[type=color] { min-height: 48px; }
  .studio-route-bar { flex-wrap: wrap; gap: 12px; }
  .studio-route-bar a { min-height: 44px; display: inline-flex; align-items: center; }
  .houses-directory :is(.ch-text-link, .ch-demo a, .houses-collection-meta .ch-text-link) { min-height: 44px; }
  .houses-directory :is(.ch-house-brand h3, .ch-house-brand p, .ch-mini-card > strong,
    .ch-mini-card > span, .ch-text-link, .ch-button) { overflow-wrap: anywhere; min-width: 0; }
}

@media (max-width: 700px) {
  .movement-studio {
    left: max(12px, var(--salon-safe-left)); right: max(12px, var(--salon-safe-right));
    bottom: calc(90px + var(--salon-safe-bottom));
    max-height: min(62svh, calc(var(--salon-viewport-height) - 200px - var(--salon-safe-top) - var(--salon-safe-bottom)));
  }
}
@media (max-width: 600px) {
  .studio-admin .sa-presets { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
  .studio-admin .sa-presets button { font-size: 12px; padding: 10px 6px; }
  .studio-admin .sa-merchant { min-width: 0; width: 100%; }
  .studio-admin .sa-preview-label { flex-wrap: wrap; gap: 6px; }
  .studio-admin .ba-actions, .movement-admin-request .form-actions { flex-wrap: wrap; }
  .movement-admin-request .form-grid { grid-template-columns: minmax(0, 1fr); }
  .movement-admin-request .form-actions > button { max-width: 100%; white-space: normal; }
}
@media (max-width: 480px) {
  .movement-brief-grid { grid-template-columns: minmax(0, 1fr); }
  .as-provider-bar { flex-wrap: wrap; gap: 8px; }
}
@media (max-height: 600px) and (max-width: 1100px) {
  .as-layout { min-height: 0; }
  .as-stage, .as-canvas { height: 260px; min-height: 260px; }
  .as-provider-frame, .as-provider-frame iframe { min-height: 0; height: 100%; }
}
@media (max-height: 600px) and (min-width: 701px) and (max-width: 1100px) {
  .movement-studio {
    left: max(12px, var(--salon-safe-left));
    top: calc(90px + var(--salon-safe-top)); bottom: calc(80px + var(--salon-safe-bottom));
    max-width: calc(100% - max(12px, var(--salon-safe-left)) - max(12px, var(--salon-safe-right)));
  }
}

/* These plans also appear inside the narrower admin column on wide screens. */
@container (max-width: 650px) {
  .sp-select, .sp-billing-link, .sp-comparison summary { min-height: 48px; font-size: 14px; }
  .sp-plan-title p, .sp-features li, .sp-heading-note p { font-size: 13px; }
  .sp-price-note, .sp-footnote, .sp-features small, .sp-selection p { font-size: 12px; }
  .sp-heading-note, .sp-selection { min-width: 0; }
  .sp-heading-note p, .sp-selection p { overflow-wrap: anywhere; }
}
@container (max-width: 400px) {
  .sp-features { grid-template-columns: minmax(0, 1fr); }
  .sp-plan-title { min-width: 0; overflow-wrap: anywhere; }
  .sp-price strong { white-space: normal; overflow-wrap: anywhere; }
  .sp-heading-note { flex-wrap: wrap; }
}

/* The houses shell has its own header height and mobile menu breakpoint. */
@media (max-width: 1350px) {
  .houses-page { --salon-houses-header-height: 88px; }
  .houses-page .site-header {
    min-height: calc(var(--salon-houses-header-height) + var(--salon-safe-top));
    padding-top: calc(18px + var(--salon-safe-top));
    padding-left: max(var(--page-gutter, 18px), var(--salon-safe-left));
    padding-right: max(var(--page-gutter, 18px), var(--salon-safe-right));
  }
  .houses-page .mobile-menu nav {
    position: fixed;
    top: calc(var(--salon-houses-header-height) + var(--salon-safe-top) + 8px);
    right: max(12px, var(--salon-safe-right)); left: max(12px, var(--salon-safe-left));
    width: auto;
    max-height: calc(var(--salon-viewport-height) - var(--salon-houses-header-height) - var(--salon-safe-top) - var(--salon-safe-bottom) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .houses-page .houses-language select { font-size: 16px; }
  .houses-page .site-footer { padding-bottom: max(28px, var(--salon-safe-bottom)); }
}
@media (max-width: 600px) {
  .houses-page { --salon-houses-header-height: 96px; }
  .houses-page .site-header {
    height: calc(var(--salon-houses-header-height) + var(--salon-safe-top));
    padding-top: var(--salon-safe-top); padding-bottom: 0;
  }
}