/* 后室 · 设置面板（js/ui/settings.js）。只写 set- 前缀的选择器。
   z-index 见 WORKSHOP.md 第 9 节：和创意工坊编辑器一样是 58（gfx 淡入淡出 55 之上，结算/暂停 60 之下）。
   配色跟主页（css/home.css）同一套暖色调，纯粹为了两处视觉统一，不共用任何选择器。 */

.set-root {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 58;
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #f4ecd0;
  -webkit-tap-highlight-color: transparent;
}
.set-root[hidden] { display: none !important; }
.set-root button { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.set-backdrop {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(10, 8, 3, .58);
}

.set-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(440px, calc(100% - 32px));
  max-height: min(640px, calc(100% - 48px));
  display: flex; flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  border-radius: 16px;
  background: rgba(24, 20, 9, .95);
  border: 1px solid rgba(232, 197, 71, .3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

.set-head { display: flex; align-items: center; gap: 6px; margin: -2px -6px 8px; flex: none; }
.set-title { flex: 1; font-size: 19px; font-weight: 800; letter-spacing: .06em; padding: 0 4px; }
.set-close {
  min-width: 44px; min-height: 44px;
  border: 0; border-radius: 10px;
  background: transparent; color: #f4ecd0;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.set-close:hover { background: rgba(255, 240, 190, .08); }

.set-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.set-sep { height: 1px; margin: 4px 0 14px; background: rgba(232, 197, 71, .18); }

.set-field { margin: 0 0 16px; }
.set-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 15px; }
.set-field-label { font-weight: 700; }
.set-field-value { font-size: 13px; color: #f1d467; font-variant-numeric: tabular-nums; text-align: right; }
.set-range { display: block; width: 100%; height: 44px; margin: 0; accent-color: #e8c547; background: transparent; cursor: pointer; }
.set-note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: rgba(244, 236, 208, .68); }

.set-seg { display: flex; gap: 8px; margin-top: 6px; }
.set-seg-btn {
  flex: 1; min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(232, 197, 71, .35);
  background: rgba(255, 240, 190, .06);
  color: #f4ecd0; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.set-seg-btn.is-active { background: rgba(232, 197, 71, .28); border-color: #e8c547; color: #fff6d8; }

.set-actions { display: flex; margin-top: 6px; flex: none; }
.set-btn {
  flex: 1; min-height: 44px;
  padding: 0 18px;
  font-size: 15px; font-weight: 700;
  color: #f4ecd0;
  background: rgba(255, 240, 190, .06);
  border: 1px solid rgba(232, 197, 71, .35);
  border-radius: 10px;
  cursor: pointer;
}
.set-btn:hover { background: rgba(232, 197, 71, .14); }
.set-btn:focus-visible, .set-close:focus-visible, .set-seg-btn:focus-visible { outline: 2px solid #e8c547; outline-offset: 2px; }

/* 竖屏手机：改成底部抽屉，跟主页弹窗（css/home.css 里 .home-dialog）同一个断点 */
@media (max-aspect-ratio: 17/20) {
  .set-panel {
    left: 0; right: 0; bottom: 0; top: auto; transform: none;
    width: 100%;
    max-height: 78vh; max-height: 78dvh;
    border-radius: 16px 16px 0 0; border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .set-panel { animation: none; }
}