/* мобильный режим и симуляция телефона (html.layout-mobile-active) */

html.layout-mobile-active body.landing-with-marquee .preview-header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  min-height: 44px;
  flex-shrink: 0;
  z-index: 20;
}

html.layout-mobile-active body[data-i18n-page="getting_skin"] .site-top-bar,
html.layout-mobile-active body[data-i18n-page="index"] .site-top-bar {
  top: calc(var(--marquee-band-h) + 10px);
  left: 10px;
  right: 10px;
}

html.layout-mobile-active body[data-i18n-page="getting_skin"] .site-top-bar--lang-only,
html.layout-mobile-active body[data-i18n-page="index"] .site-top-bar--lang-only {
  justify-content: flex-end;
}

html.layout-mobile-active body[data-i18n-page="getting_skin"] .site-top-bar .lang-switcher,
html.layout-mobile-active body[data-i18n-page="index"] .site-top-bar .lang-switcher {
  position: relative;
  top: auto;
  right: auto;
}

html.layout-mobile-active .device-pick-page > .lang-switcher {
  top: 16px;
  right: 10px;
}

html.layout-mobile-active body.landing-with-marquee:not(.editor-page) .app-shell,
html.layout-mobile-active body.landing-with-marquee:not(.editor-page) .app-shell[style] {
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: center;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding-top: calc(var(--marquee-band-h) + 52px);
  padding-bottom: calc(var(--marquee-band-h) + 72px);
  padding-left: 12px;
  padding-right: 12px;
}

html.layout-mobile-active body[data-i18n-page="pack"] .app-shell,
html.layout-mobile-active body[data-i18n-page="pack"] .app-shell[style] {
  padding-top: calc(var(--marquee-band-h) + 52px);
  padding-bottom: calc(var(--marquee-band-h) + 72px);
}

html.layout-mobile-active #previewContainer.preview-step--form-only {
  width: 100%;
  max-width: 100%;
}

html.layout-mobile-active .controls-card--resource-pack {
  width: 100%;
  max-width: 100%;
  margin: auto 0;
}

html.layout-mobile-active .controls-card--resource-pack .pack-icon-preview-wrap,
html.layout-mobile-active .controls-card--resource-pack .pack-icon-thumb {
  width: 88px;
  height: 88px;
}

html.layout-mobile-active .export-card--done {
  margin: auto 0;
}

html.layout-mobile-active body[data-i18n-page="done"].landing-with-marquee {
  padding-top: var(--marquee-band-h);
  padding-bottom: var(--marquee-band-h);
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

html.layout-mobile-active body[data-i18n-page="done"] .app-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--marquee-band-h) + 16px) 12px calc(var(--marquee-band-h) + 16px);
  position: relative;
  z-index: 10;
}

html.layout-mobile-active body.export-ready--mobile .export-download-btn {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 12px;
  padding: 14px 16px 12px;
  font-size: 10px;
  box-sizing: border-box;
}

/* ленты поверх модалки (полосы остаются видимыми) */
html.layout-mobile-active .totem-marquee-band {
  z-index: 400;
}

html.layout-mobile-active body[data-i18n-page="getting_skin"] .totem-marquee-band {
  display: block;
}

html.layout-mobile-active body.landing-intro-page {
  --marquee-band-h: clamp(60px, 15vw, 88px);
  --marquee-band-item: clamp(46px, 12vw, 68px);
}

html.layout-mobile-active body.landing-intro-page.landing-with-marquee {
  padding-top: var(--marquee-band-h);
  padding-bottom: var(--marquee-band-h);
}

html.layout-mobile-active .landing-intro-title {
  font-size: clamp(8px, 2.6vw, 10px);
}

html.layout-mobile-active .landing-intro-body {
  font-size: 7px;
  line-height: 1.75;
  margin-bottom: 18px;
}

html.layout-mobile-active .intro-totems {
  gap: 8px;
  margin-bottom: 10px;
}

html.layout-mobile-active .landing-intro-start {
  font-size: 9px;
  min-height: 48px;
}

/* «Поддержать автора» — над нижней лентой тотемов (z-index лент 400) */
html.layout-mobile-active body[data-i18n-page="getting_skin"].has-site-support:not(.editor-page) .site-support-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--marquee-band-h) + 10px);
  width: auto;
  max-width: none;
  margin: 0;
  order: unset;
  transform: none;
  z-index: 450;
}

html.layout-mobile-active body[data-i18n-page="getting_skin"].has-site-support:not(.editor-page) {
  padding-bottom: calc(var(--marquee-band-h) + 64px);
}

/* модалка выбора кадров */
html.layout-mobile-active .frame-picker-modal {
  align-items: center;
  justify-content: center;
  padding: var(--marquee-band-h) 10px var(--marquee-band-h);
  box-sizing: border-box;
  z-index: 350;
}

html.layout-mobile-active .frame-picker-modal__backdrop {
  top: var(--marquee-band-h);
  bottom: var(--marquee-band-h);
  left: 0;
  right: 0;
}

html.layout-mobile-active .frame-picker-card {
  max-width: min(340px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 16px 14px 18px;
  margin: auto;
}

html.layout-mobile-active .frame-picker-card h2 {
  font-size: 10px;
  line-height: 1.5;
}

html.layout-mobile-active .frame-picker-card p {
  font-size: 7px;
  line-height: 1.6;
  margin-bottom: 12px;
}

html.layout-mobile-active .scene--frame-picker {
  width: min(200px, 72vw);
  height: min(200px, 52vw);
  margin: 0 auto 12px;
}

html.layout-mobile-active .scene--frame-picker #totemStack {
  width: 180px;
  height: 180px;
}

html.layout-mobile-active .frame-picker-value {
  font-size: 12px;
  margin-bottom: 12px;
}

html.layout-mobile-active .frame-picker-card .btn--mc-block {
  font-size: 8px;
  min-height: 40px;
  margin-bottom: 8px;
}

/* страница предпросмотра / pack — ленты */
html.layout-mobile-active body[data-i18n-page="pack"].landing-with-marquee {
  padding-top: var(--marquee-band-h);
  padding-bottom: var(--marquee-band-h);
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

html.layout-mobile-active body[data-i18n-page="pack"].landing-with-marquee .totem-marquee-band {
  display: block;
}

html.layout-mobile-active body.editor-page .frame-picker-modal {
  padding: 12px 10px;
}

html.layout-mobile-active body.editor-page .frame-picker-modal__backdrop {
  top: 0;
  bottom: 0;
}

html.layout-mobile-active body.editor-page.has-site-support {
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

html.layout-mobile-active body.editor-page .editor-header--dock {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  flex-shrink: 0;
  z-index: 50;
  margin-top: 0;
}

html.layout-mobile-active body.editor-page .editor-body {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 0;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

html.layout-mobile-active .editor-page .editor-header .btn--ghost {
  font-size: 6px;
  padding: 5px 4px;
  line-height: 1.35;
  max-width: 48px;
}

html.layout-mobile-active body.editor-page .totem-marquee-band,
html.layout-mobile-active body.editor-page .totem-marquee-panel {
  display: none !important;
}

html.layout-mobile-active .editor-page .sidebar--dock {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: auto;
  padding: 0 0 10px;
  z-index: 25;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  box-sizing: border-box;
  overflow-x: hidden;
}

html.layout-mobile-active .editor-page .sidebar--dock .color-wheel {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin: 0;
}

html.layout-mobile-active .editor-page .sidebar--dock .color-wheel span {
  right: -4px;
  top: -4px;
  width: 11px;
  height: 11px;
  font-size: 8px;
  line-height: 8px;
}

html.layout-mobile-active .editor-page .sidebar--dock .active-colors {
  width: 32px;
  height: 32px;
  margin: 2px 0;
  flex-shrink: 0;
}

html.layout-mobile-active .editor-page .sidebar--dock .active-color {
  width: 22px;
  height: 22px;
}

html.layout-mobile-active .editor-page .sidebar--dock .palette {
  display: grid;
  grid-template-columns: repeat(2, 14px);
  gap: 5px 7px;
  margin: 0;
  padding: 2px 0;
  justify-content: center;
}

html.layout-mobile-active .editor-page .sidebar--dock .color-swatch {
  width: 14px;
  height: 14px;
}

html.layout-mobile-active .editor-page .sidebar--dock #zoomBtn,
html.layout-mobile-active .editor-page .sidebar--dock .tool-btn[data-tool="zoom"] {
  display: none !important;
}

html.layout-mobile-active .editor-page .sidebar--dock .tool-btn {
  width: 36px;
  height: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html.layout-mobile-active .editor-page .sidebar--dock .tool-btn.tool-btn--mini {
  width: 12px;
  height: 12px;
  min-height: 12px;
  font-size: 6px;
  border-width: 1px;
}

html.layout-mobile-active .editor-page .sidebar--dock .selection-tool-row {
  gap: 2px;
}

html.layout-mobile-active .editor-page .sidebar--dock .selection-tool-row > .tool-btn {
  width: 32px;
}

html.layout-mobile-active .editor-page .sidebar--dock .tool-btn img {
  width: 30px;
  height: 22px;
  object-fit: contain;
  object-position: center;
}

html.layout-mobile-active .editor-page .sidebar--dock .size-control {
  width: 44px;
  max-width: 100%;
  margin: 4px 0 0;
  padding: 0;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

html.layout-mobile-active .editor-page .sidebar--dock .size-control input[type="range"] {
  width: 40px;
  margin: 0;
}

html.layout-mobile-active .editor-page .sidebar-support-mobile {
  width: 36px;
  min-height: 88px;
  margin-top: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}

html.layout-mobile-active .btn-header-resource-pack__full {
  display: none;
}

html.layout-mobile-active .btn-header-resource-pack__short {
  display: inline;
}

html.layout-mobile-active .editor-page .editor-header .btn-header-resource-pack {
  font-size: 8px;
  padding: 8px 10px 6px;
  max-width: none;
  white-space: nowrap;
  line-height: 1.35;
}

html.layout-mobile-active .labels-column {
  display: none !important;
}

html.layout-mobile-active .editor-wrapper {
  justify-content: center;
  margin: 0 auto;
}

html.layout-mobile-active .editor-page .viewport {
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.layout-mobile-active .editor-page .viewport.viewport--with-sidebar {
  margin-left: var(--editor-sidebar-w);
  width: calc(100% - var(--editor-sidebar-w));
}

html.layout-mobile-active .editor-page .canvas-container {
  padding-top: 0;
  box-sizing: content-box;
  contain: layout paint;
  transform: translateZ(0);
  touch-action: pan-y;
}

html.layout-mobile-active .editor-page .editor-workspace {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html.layout-mobile-active .editor-page .editor-wrapper {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  justify-content: center;
}

html.layout-mobile-active .editor-page #editorCanvas {
  transform: translateZ(0);
}

html.layout-mobile-active .editor-page .frame-highlight {
  transform: translateZ(0);
  will-change: top;
}

html.layout-mobile-active .size-control label {
  font-size: 5px;
  letter-spacing: 0;
}

html.layout-mobile-active .size-control strong {
  font-size: 5px;
}

/* предпросмотр — последний «кадр» в ленте прокрутки */
html.layout-mobile-active .editor-preview-panel--frame-tail {
  position: relative;
  width: calc(100% - 8px);
  max-width: none;
  margin: 8px auto 0;
  flex-shrink: 0;
  padding: 12px 14px 14px;
  box-sizing: border-box;
  background: var(--editor-surface);
  border: 2px solid #000;
  outline: 2px solid #555;
  box-shadow: var(--mc-panel-inset), var(--shadow-lg);
  flex-shrink: 0;
}

html.layout-mobile-active .editor-preview-title {
  font-size: 7px;
  margin-bottom: 6px;
}

html.layout-mobile-active .scene--editor-preview {
  width: 100%;
  max-width: 100%;
  height: min(300px, 46vh);
  min-height: 280px;
  max-height: 320px;
  flex: 0 0 auto;
  margin: 0 auto 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.layout-mobile-active .scene--editor-preview #totemStack {
  width: 100%;
  height: 100%;
  max-width: 260px;
  max-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.layout-mobile-active .scene--editor-preview .totem-preview-host {
  transform: none;
  transform-origin: center center;
}

html.layout-mobile-active .scene--editor-preview .totem-preview-host canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

html.layout-mobile-active .editor-preview-panel--frame-tail .preview-speed-control {
  width: 100%;
  max-width: none;
  padding: 10px 8px 8px;
  gap: 8px;
  box-sizing: border-box;
}

html.layout-mobile-active .editor-preview-panel--frame-tail .preview-speed-control label {
  font-size: 6px;
}

html.layout-mobile-active .editor-preview-panel--frame-tail .preview-rotate-mode {
  display: none;
}