/* ============================================
   mobile.css
   果赖蛋糕坊 - 移动端适配
   768px / 480px 媒体查询 · 横屏 · 安全区 · 手势
   ============================================ */

/* ============================================
   平板及以下 (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  :root {
    --header-h: 48px;
    --tabbar-h: 60px;
    --control-h: 48vh;
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs: 15px;
    --fs-md: 16px;
    --fs-lg: 19px;
    --btn-h: 46px;
  }

  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    overscroll-behavior: none;
  }

  /* ---------- Header 紧凑 ---------- */
  .header {
    padding: var(--safe-top) var(--space) 0;
    height: calc(var(--header-h) + var(--safe-top));
  }

  .header .logo {
    font-size: var(--fs-md);
    letter-spacing: 0;
  }

  .header-actions .btn-round {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    font-size: var(--fs-md);
  }

  /* ---------- Main 全宽 ---------- */
  .main-area {
    padding: 0;
  }

  .module-panel {
    padding: var(--space-sm);
    gap: var(--space-sm);
  }

  .canvas-toolbar {
    padding: var(--space-xs) var(--space-sm);
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .canvas-toolbar .btn-sm {
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--space-sm);
    font-size: var(--fs);
  }

  .canvas-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .canvas-wrapper canvas {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
  }

  /* ---------- Control Panel ---------- */
  .control-panel {
    max-height: var(--control-h);
    max-height: calc(var(--control-h) + var(--safe-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .control-content {
    padding: 0 var(--space) var(--space-lg);
    padding-bottom: calc(var(--space-lg) + var(--safe-bottom) + var(--tabbar-h));
  }

  .panel {
    padding: var(--space);
  }

  .panel-title {
    font-size: var(--fs);
    margin-bottom: var(--space-sm);
  }

  /* ---------- Tab Bar 固定底部 ---------- */
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--tabbar-h);
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    z-index: var(--z-tabbar);
  }

  .tab {
    min-height: var(--tabbar-h);
    padding: var(--space-xs) 0;
  }

  .tab .tab-icon {
    font-size: var(--fs-lg);
  }

  .tab .tab-label {
    font-size: 10px;
  }

  /* ---------- 按钮更大 ---------- */
  .btn {
    min-height: var(--btn-h);
    font-size: var(--fs);
    padding: 0 var(--space-md);
  }

  .btn-sm {
    min-height: 40px;
    min-width: 40px;
  }

  .btn-lg {
    min-height: 50px;
    font-size: var(--fs-md);
  }

  /* ---------- 色块 ---------- */
  .color-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: var(--space-sm);
  }

  .color-swatch {
    border-width: 3px;
  }

  /* ---------- 装饰网格 ---------- */
  .deco-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--space-sm);
  }

  .deco-btn {
    min-height: 72px;
  }

  .deco-btn .emoji,
  .deco-btn .icon {
    font-size: var(--fs-xl);
  }

  /* ---------- 滑块 ---------- */
  .slider-row {
    gap: var(--space-sm);
  }

  .slider-row input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .slider-row input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  /* ---------- 模态框 ---------- */
  .modal {
    padding: var(--space);
    align-items: flex-end;
  }

  .modal-content {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-lg) var(--space-md) calc(var(--space-lg) + var(--safe-bottom));
    animation: slideUp var(--t-bounce) var(--ease-bounce);
  }

  /* ---------- 蛋糕类型全屏 ---------- */
  .cake-type-overlay {
    padding: var(--space) var(--space);
    padding-top: calc(var(--space-lg) + var(--safe-top));
  }

  .cake-type-modal h2 {
    font-size: var(--fs-xl);
  }

  .cake-type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space);
  }

  .cake-type-card {
    min-height: 120px;
    padding: var(--space-md);
  }

  /* ---------- 烘焙流程 ---------- */
  .bake-flow-panel {
    padding: var(--space);
  }

  .bake-step .step-circle {
    width: 32px;
    height: 32px;
    font-size: var(--fs-sm);
  }

  .bake-step .step-label {
    font-size: 10px;
  }

  /* ---------- 食材网格 ---------- */
  .ingredient-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  /* ---------- 隐藏 hover 效果 ---------- */
  .btn:hover,
  .color-swatch:hover,
  .deco-btn:hover,
  .panel:hover,
  .cake-type-card:hover,
  .package-option:hover,
  .ingredient-item:hover,
  .replay-item:hover,
  .tab:hover {
    transform: none;
  }

  .btn:hover {
    box-shadow: var(--shadow);
  }

  /* ---------- touch-action 手势优化 ---------- */
  .canvas-wrapper canvas,
  .canvas-wrapper {
    touch-action: none;
  }

  .control-content {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .slider-row input[type="range"],
  .canvas-scale input[type="range"],
  .canvas-scale-row input[type="range"] {
    touch-action: pan-y;
  }

  /* ---------- 禁止文字选择 ---------- */
  .header,
  .tab-bar,
  .btn,
  .deco-btn,
  .tab,
  .panel-title,
  .panel-handle,
  .bake-step {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* 允许输入框选择 */
  input[type="text"],
  textarea {
    -webkit-user-select: text;
    user-select: text;
  }

  /* ---------- select 字号防止 iOS 缩放 ---------- */
  select,
  input[type="text"],
  textarea {
    font-size: 16px;
  }
}

/* ============================================
   手机 (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  :root {
    --header-h: 44px;
    --tabbar-h: 56px;
    --control-h: 50vh;
    --fs-xs: 10px;
    --fs-sm: 12px;
    --fs: 14px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --btn-h: 48px;
    --space: 10px;
    --space-md: 14px;
  }

  body {
    font-size: var(--fs);
  }

  /* ---------- Header ---------- */
  .header .logo {
    font-size: var(--fs-md);
  }

  .header-actions .btn-round {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    font-size: var(--fs-sm);
  }

  /* ---------- Canvas ---------- */
  .module-panel {
    padding: var(--space-xs);
    gap: var(--space-xs);
  }

  .canvas-toolbar {
    padding: var(--space-xs);
  }

  .canvas-toolbar .btn-sm {
    min-width: 36px;
    min-height: 36px;
    font-size: var(--fs-sm);
    padding: 0 var(--space-xs);
  }

  .canvas-scale {
    min-width: 60px;
  }

  /* ---------- Control Panel ---------- */
  .control-panel {
    max-height: var(--control-h);
    max-height: calc(var(--control-h) + var(--safe-bottom));
  }

  .control-content {
    padding: 0 var(--space-sm) var(--space-lg);
    padding-bottom: calc(var(--space-lg) + var(--safe-bottom) + var(--tabbar-h));
  }

  .panel {
    padding: var(--space-sm);
    border-radius: var(--radius);
  }

  .panel-title {
    font-size: var(--fs);
    margin-bottom: var(--space-xs);
  }

  /* ---------- Tab Bar ---------- */
  .tab-bar {
    height: var(--tabbar-h);
    height: calc(var(--tabbar-h) + var(--safe-bottom));
  }

  .tab {
    min-height: var(--tabbar-h);
  }

  .tab .tab-icon {
    font-size: var(--fs-md);
  }

  .tab .tab-label {
    font-size: 9px;
  }

  .tab.active::before {
    width: 22px;
    height: 3px;
  }

  /* ---------- 按钮 ---------- */
  .btn {
    min-height: var(--btn-h);
    font-size: var(--fs);
    padding: 0 var(--space);
    border-radius: var(--radius-full);
  }

  .btn-sm {
    min-height: 38px;
    min-width: 38px;
    font-size: var(--fs-sm);
  }

  /* ---------- 色块 ---------- */
  .color-grid {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: var(--space-xs);
  }

  .color-swatch {
    border-width: 2px;
  }

  /* ---------- 装饰网格 ---------- */
  .deco-grid {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: var(--space-xs);
  }

  .deco-btn {
    min-height: 64px;
    padding: var(--space-xs);
  }

  .deco-btn .emoji,
  .deco-btn .icon {
    font-size: var(--fs-lg);
  }

  .deco-btn .name,
  .deco-btn .label {
    font-size: var(--fs-xs);
  }

  /* ---------- 模式切换 ---------- */
  .mode-toggle button {
    min-height: 32px;
    font-size: var(--fs-sm);
    padding: 0 var(--space-sm);
  }

  /* ---------- 滑块 ---------- */
  .slider-row {
    gap: var(--space-xs);
  }

  .slider-row label {
    min-width: 40px;
    font-size: var(--fs-sm);
  }

  .slider-row input[type="range"]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
  }

  .slider-row .val {
    min-width: 28px;
    font-size: var(--fs-xs);
    padding: 2px var(--space-xs);
  }

  /* ---------- 模态框 ---------- */
  .modal {
    padding: var(--space-sm);
  }

  .modal-content {
    padding: var(--space-md) var(--space-sm) calc(var(--space-md) + var(--safe-bottom));
  }

  .modal-content h3,
  .modal-content h2 {
    font-size: var(--fs-md);
  }

  /* ---------- 包装 ---------- */
  .package-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }

  .package-option {
    min-height: 76px;
    padding: var(--space-sm) var(--space-xs);
  }

  .package-option .emoji {
    font-size: var(--fs-xl);
  }

  /* ---------- 蛋糕类型 ---------- */
  .cake-type-overlay {
    padding: var(--space);
    padding-top: calc(var(--space-md) + var(--safe-top));
  }

  .cake-type-modal h2 {
    font-size: var(--fs-lg);
  }

  .cake-type-modal p {
    font-size: var(--fs-sm);
    margin-bottom: var(--space);
  }

  .cake-type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .cake-type-card {
    min-height: 100px;
    padding: var(--space);
    border-radius: var(--radius-md);
  }

  .cake-type-card .emoji {
    font-size: var(--fs-xl);
  }

  .cake-type-card .name {
    font-size: var(--fs-sm);
  }

  /* ---------- 烘焙流程 ---------- */
  .bake-flow-panel {
    padding: var(--space-sm);
    border-radius: var(--radius);
  }

  .bake-steps {
    margin: var(--space-sm) 0;
  }

  .bake-step .step-circle {
    width: 28px;
    height: 28px;
    font-size: var(--fs-xs);
    border-width: 2px;
  }

  .bake-step .step-label {
    font-size: 9px;
  }

  .bake-progress-bar {
    height: 10px;
  }

  #bakeStepContent {
    padding: var(--space-sm);
    font-size: var(--fs-sm);
    min-height: 48px;
  }

  /* ---------- 食材网格 ---------- */
  .ingredient-grid {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: var(--space-xs);
    padding: var(--space-xs);
  }

  .ingredient-item {
    padding: var(--space-xs);
  }

  .ingredient-item .emoji {
    font-size: var(--fs-lg);
  }

  /* ---------- 创作记录 ---------- */
  .replay-item {
    padding: var(--space-xs) var(--space-sm);
  }

  .replay-item .thumb {
    width: 40px;
    height: 40px;
  }

  .replay-item .info .title {
    font-size: var(--fs-sm);
  }

  .replay-item .info .time {
    font-size: 9px;
  }

  /* ---------- Toast ---------- */
  .toast {
    font-size: var(--fs-sm);
    padding: var(--space-sm) var(--space-md);
    max-width: 92%;
  }

  /* ---------- select / input ---------- */
  select,
  input[type="text"] {
    padding: 8px var(--space-sm);
    font-size: var(--fs);
    border-radius: var(--radius-sm);
  }

  input[type="color"] {
    height: 32px;
  }

  /* ---------- 工具栏 ---------- */
  .toolbar {
    padding: var(--space-xs);
    gap: var(--space-xs);
  }
}

/* ============================================
   横屏适配 (landscape)
   ============================================ */
@media (orientation: landscape) and (max-width: 900px) {
  :root {
    --header-h: 40px;
    --tabbar-h: 50px;
    --control-h: 40vh;
  }

  body {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .header {
    width: 100%;
    height: calc(var(--header-h) + var(--safe-top));
    padding-top: var(--safe-top);
  }

  .main-area {
    flex: 1 1 auto;
    width: 60%;
    height: calc(100% - var(--header-h) - var(--safe-top));
  }

  .control-panel {
    flex: 0 0 40%;
    width: 40%;
    height: calc(100% - var(--header-h) - var(--tabbar-h) - var(--safe-top));
    max-height: none;
    border-radius: var(--radius-xl) 0 0 0;
    border-top: none;
    border-left: 1px solid var(--border);
    box-shadow: -6px 0 24px rgba(180, 140, 170, 0.18);
  }

  .control-panel.collapsed {
    max-height: none;
    transform: translateX(100%);
  }

  .control-content {
    padding-bottom: var(--space-md);
  }

  .tab-bar {
    width: 100%;
    height: var(--tabbar-h);
    height: calc(var(--tabbar-h) + var(--safe-bottom));
  }

  .module-panel {
    padding: var(--space-sm);
  }

  .canvas-wrapper canvas {
    max-height: calc(100vh - var(--header-h) - var(--tabbar-h) - var(--safe-top) - var(--safe-bottom) - 60px);
  }
}

/* ============================================
   iPhone 安全区深度适配
   ============================================ */
@supports (padding: env(safe-area-inset-top)) {
  .header {
    padding-top: var(--safe-top);
    height: calc(var(--header-h) + var(--safe-top));
  }

  .tab-bar {
    padding-bottom: var(--safe-bottom);
    height: calc(var(--tabbar-h) + var(--safe-bottom));
  }

  .control-content {
    padding-bottom: calc(var(--space-lg) + var(--safe-bottom) + var(--tabbar-h));
  }

  .modal-content {
    padding-bottom: calc(var(--space-lg) + var(--safe-bottom));
  }

  .toast {
    top: calc(var(--header-h) + var(--safe-top) + var(--space));
  }
}

/* ============================================
   大屏桌面优化 (min-width: 769px)
   ============================================ */
@media (min-width: 769px) {
  body {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: var(--shadow-lg);
    border-radius: 0;
  }

  .header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* ============================================
   禁止双击缩放 / 输入聚焦缩放
   ============================================ */
@supports (-webkit-touch-callout: none) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* 防止 iOS 输入聚焦自动放大 */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ============================================
   动态视口高度 (dvh) 兼容
   ============================================ */
@supports (height: 100dvh) {
  body {
    height: 100dvh;
  }
}

/* ============================================
   暗色模式适配（可选）
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2a2438;
    --bg-gradient-start: #3a2e4a;
    --bg-gradient-mid: #2e2440;
    --bg-gradient-end: #243042;
    --text: #f0e6f5;
    --text-light: #b8a8c8;
    --border: #4a3e5a;
    --border-strong: #5a4e6a;
    --cream: #322a42;
  }
}

/* ============================================
   减弱动画 (prefers-reduced-motion)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}