/* 落叶画画：深秋林子。灰褐色的底、深绿黑的树干、米白木牌、深紫褐的按钮、琥珀色的选中。
   界面平涂：不用阴影；按钮是整块底色，选中换底色。落叶本身的颜色是渐变的。
   摆放（left / top / width / height）由 js/page/main.js 按窗口算好写进元素；这里只管颜色和内部排法。 */
:root {
  --bg: #75685d;
  --surface: #efe5d6;
  --surface-2: #e2d5c0;
  --field: #f7f0e4;
  --bar: #5b4541;
  --ink: #3c302b;
  --ink-2: #6b564e;
  --ink-3: #a08c84;
  --line: #4a3733;
  --accent: #f0b779;
  --danger: #b0503b;
  --on-dark: #f4e8dd;

  --scene: #75685d;
  --sign-ink: var(--plum);
  --plum: #5b4541;
  --plum-ink: #f4e8dd;
  --chip: #e8d6ce;
  --chip-ink: #4a3733;
  --amber: #f0b779;
  --label: #efe0d4;
  --track: #cdbca6;
  --knob: #b0503b;
  --edge: #dcc7ba;
  --dock: #2e2d25;
  --dock-edge: #1b1a15;
}

html,
body {
  background: var(--scene);
}

.app {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--scene);
  color: var(--label);
}

.app canvas {
  display: block;
}

/* 整页抖动：滤镜在 js/ui/boil.js 里生成；弹窗和悬浮层在 .app 外面，挂同一个滤镜 */
.app.boil,
.has-boil .modal,
.has-boil .popover {
  filter: url(#page-boil);
}

.scene,
.trunk {
  position: absolute;
  left: 0;
  top: 0;
}

/* ---------- 舞台：铺满整个窗口，里面的世界（林子、落叶堆、落叶）固定不动，只有落叶被手势变换 ---------- */
.stage {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  overflow: hidden;
  touch-action: none;
}

.world {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.desk-strip {
  position: absolute;
  pointer-events: none;
}

/* 背景是图片或摄像头时，林子和接出去的树干、地面都不要，露出固定在窗口上的背景 */
.app[data-bg="camera"] .scene,
.app[data-bg="image"] .scene,
.app[data-bg="camera"] .desk-art,
.app[data-bg="image"] .desk-art {
  display: none;
}

/* 悬浮面板的底：实心，盖住下面的舞台 */
.dock {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  background: var(--dock);
}

.dock-bottom {
  border-top: 2px solid var(--dock-edge);
}

.dock-left {
  border-right: 2px solid var(--dock-edge);
}

.dock-right {
  border-left: 2px solid var(--dock-edge);
}

.app .finder {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: none;
  pointer-events: none;
}

.app .lasso {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  pointer-events: none;
}

.pile {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
}

.pile canvas,
.leaf canvas,
.sign-bg {
  width: 100%;
  height: 100%;
}

.leaf {
  position: absolute;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.leaf.is-fresh {
  opacity: 0;
  -webkit-transition: none;
  transition: none;
}

.art-tool {
  width: calc(var(--tile) * 0.84);
  height: calc(var(--tile) * 0.84);
}

.app[data-bg="camera"] .finder,
.app[data-bg="image"] .finder {
  display: block;
}

/* ---------- 木牌（标题） ---------- */
.sign {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign-bg {
  position: absolute;
  left: 0;
  top: 0;
}

.sign-text {
  position: relative;
  color: var(--sign-ink);
  font-weight: var(--title-weight);
  line-height: 1;
  white-space: nowrap;
}

/* ---------- 基础五钮：一行，整条压扁，平涂无阴影 ---------- */
.bar {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  border-radius: 14px;
  background: var(--dock);
}

.bbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--btn-w);
  height: var(--btn-h);
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: var(--plum);
  color: var(--plum-ink);
}

.bbtn::before {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: -3px;
  right: -3px;
}

.bbtn .icon {
  display: block;
  width: 16px;
  height: 16px;
}

.bbtn .icon svg {
  width: 100%;
  height: 100%;
}

.bbtn:disabled {
  opacity: 0.62;
  cursor: default;
}

/* ---------- 图鉴：左上角，小而扁 ---------- */
.gal-btn {
  position: absolute;
  z-index: 6;
  top: 6px;
  left: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: var(--plum);
  color: var(--plum-ink);
  font-size: 11px;
  font-weight: var(--title-weight);
  line-height: 18px;
  white-space: nowrap;
}

.gal-btn::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -8px;
  right: -4px;
}

/* ---------- 中 / EN：右上角，小而扁 ---------- */
.lang {
  position: absolute;
  z-index: 6;
  top: 6px;
  right: 8px;
  display: flex;
  height: 22px;
  padding: 0;
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: var(--plum);
}

.lang-half {
  position: relative;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  border-radius: 6px;
  color: var(--plum-ink);
  font-size: 11px;
  font-weight: var(--title-weight);
  line-height: 18px;
}

.lang-half::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -2px;
  right: -2px;
}

.lang-half.is-on {
  background: var(--chip);
  color: var(--chip-ink);
}

/* ---------- 工具：刀 笔刷 涂改笔 ---------- */
.tools {
  position: absolute;
  z-index: 4;
}

.tools-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  color: var(--label);
}

.tile .face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile);
  height: var(--tile);
  border: 2px solid var(--edge);
  border-radius: 14px;
  background: var(--plum);
  color: var(--plum-ink);
}

.tile .face::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -8px;
  right: -8px;
}

.tile .face .icon {
  display: block;
  width: calc(var(--tile) * 0.46);
  height: calc(var(--tile) * 0.46);
}

.tile .face .icon svg {
  width: 100%;
  height: 100%;
}

.tile-label {
  margin-top: 3px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--plum);
  color: var(--label);
  font-size: var(--lfs);
  line-height: 1.25;
  white-space: nowrap;
}

.tile[aria-pressed="true"] .face {
  background: var(--amber);
}

.tile[aria-pressed="true"] .tile-label {
  color: var(--amber);
}

.shutter-ring {
  display: block;
  width: calc(var(--tile) * 0.52);
  height: calc(var(--tile) * 0.52);
  border: 4px solid var(--chip);
  border-radius: 50%;
  background: var(--plum);
}

.tile.shutter .face {
  background: var(--chip);
}

.app[data-mode="wide"] .tools-main {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* ---------- 工具选项 ---------- */
.opts {
  position: absolute;
  z-index: 5;
  display: flex;
}

.strip {
  display: none;
  min-width: 0;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
}

.app[data-tool="knife"] .strip-knife,
.app[data-tool="brush"] .strip-brush,
.app[data-tool="eraser"] .strip-eraser {
  display: flex;
}

.app[data-mode="port"] .strip {
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
}

.app[data-mode="wide"] .opts {
  flex-direction: column;
  justify-content: center;
}

.app[data-mode="wide"] .strip {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 10px;
  border-radius: 14px;
}

.brush-colors {
  flex: 1 1 auto;
  min-width: 0;
}

.brush-colors .color-bar {
  width: 100%;
}

.opt-field {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  font-size: 13px;
}

.app[data-mode="port"] .strip-brush .opt-field {
  flex: 0 0 118px;
}

/* 刀的选项：几组二选一排成一行，放不下时这一行左右滑动；放得下时居中 */
.app[data-mode="port"] .strip-knife {
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
}

.strip-knife::-webkit-scrollbar {
  display: none;
}

.app[data-mode="port"] .strip-knife > * {
  flex: none;
  margin-right: 6px;
}

.app[data-mode="port"] .strip-knife > :first-child {
  margin-left: auto;
}

.app[data-mode="port"] .strip-knife > :last-child {
  margin-right: auto;
}

.app[data-mode="port"] .strip-knife .opt-field {
  flex: 0 0 118px;
  height: 100%;
}

.app[data-mode="port"] .strip-knife .range {
  height: 100%;
}

.app[data-mode="port"] .strip-knife .opt-half::before {
  top: -4px;
  bottom: -4px;
}

.app[data-mode="wide"] .strip-knife {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.app[data-mode="wide"] .strip-knife > * + * {
  margin-top: 8px;
}

.app[data-mode="wide"] .strip-knife .opt-field {
  margin-top: 8px;
}

.opt-field.is-off {
  opacity: 0.45;
}

.opt-name {
  flex: none;
  margin: 0 8px 0 4px;
  color: var(--ink-2);
  white-space: nowrap;
}

.app[data-mode="wide"] .opt-field {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  margin-top: 8px;
}

.app[data-mode="wide"] .opt-name {
  margin: 0 0 0 2px;
}

.range {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.app[data-mode="wide"] .range {
  height: 30px;
}

.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
}

.range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: var(--knob);
  -webkit-appearance: none;
}

.range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
}

.range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--knob);
}

.opt-seg {
  display: flex;
  flex: none;
  padding: 2px;
  border-radius: 12px;
  background: #ddd0bd;
}

.app[data-mode="wide"] .opt-seg {
  flex-direction: column;
}

.opt-half {
  position: relative;
  height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--bar);
  font-size: 12px;
  line-height: 32px;
  white-space: nowrap;
}

.opt-half::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  right: 0;
}

.opt-half.is-on {
  background: var(--bar);
  color: var(--on-dark);
}

.opt-half:disabled {
  opacity: 0.45;
}

/* 颜色条：平涂，选中的色块换成琥珀色粗边，不用阴影 */
.strip .eraser-chip {
  display: none;
}

.strip .color-list {
  padding: 4px;
  overflow-x: auto;
}

.strip .color-chip {
  width: 30px;
  height: 30px;
  border-width: 3px;
  border-color: transparent;
}

.strip .color-chip.add-chip {
  border-color: var(--line);
  font-size: 18px;
}

.strip .color-chip.is-on {
  border-color: var(--amber);
  box-shadow: none;
}

.strip .color-chip::before {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: -3px;
  right: -3px;
}

.app[data-mode="wide"] .brush-colors .color-list {
  flex-wrap: wrap;
  overflow: visible;
}

.app[data-mode="wide"] .brush-colors .color-list > * {
  margin: 0 4px 4px 0;
}

.app[data-mode="wide"] .brush-colors .color-bar {
  flex-wrap: wrap;
}

/* ---------- 弹窗：标题行不为关闭 × 留位；选项 ---------- */
.modal-head {
  padding-right: var(--gap-3);
}

.choice-list {
  display: flex;
  flex-direction: column;
}

.choice-list .btn {
  width: 100%;
  margin-top: 8px;
}

.choice-list .btn:first-child {
  margin-top: 0;
}

.choice-note {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: var(--text-small);
}

button:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 导出：范围二选一在上，三个格式一排，原因写在下面一行（一直占位）；
   没有标题的弹窗里内容整体绕开右上角 ×（右边让出 ×），左边留同样宽，保持对称 */
.export-scope {
  margin-left: calc(var(--touch) - var(--gap-3));
}

.export-scope .opt-half {
  flex: 1 1 0;
  height: 40px;
  line-height: 40px;
  font-size: var(--text);
  text-align: center;
}

.export-formats {
  margin-left: calc(var(--touch) - var(--gap-3));
}

.export-formats .btn {
  min-width: 0;
  padding: 0 var(--gap-1);
}

.export-reason {
  min-height: 1.5em;
  margin-left: calc(var(--touch) - var(--gap-3));
  color: var(--ink-2);
  font-size: var(--text-small);
}

/* ---------- 选叶：整个页面铺满落叶堆 ---------- */
.picker {
  position: fixed;
  z-index: var(--z-float);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #5f4630;
  -webkit-transform-origin: 50% 90%;
  transform-origin: 50% 90%;
  -webkit-transition: opacity 0.24s, -webkit-transform 0.24s;
  transition: opacity 0.24s, transform 0.24s;
  touch-action: none;
}

.picker.is-entering {
  opacity: 0;
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}

.picker-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.picker-back {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--edge);
  border-radius: 50%;
  background: var(--plum);
  color: var(--plum-ink);
}

.picker-back .icon {
  display: block;
  width: 20px;
  height: 20px;
}

.picker-back .icon svg {
  width: 100%;
  height: 100%;
}

.picker-caption {
  position: absolute;
  left: 50%;
  top: 14px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--plum);
  color: var(--plum-ink);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.picker-fly {
  position: fixed;
  pointer-events: none;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.picker-fly canvas {
  width: 100%;
  height: 100%;
}

/* ---------- 图鉴：缩略图网格，从左上角开始一排排铺；一排 --cols 格（默认 3），格宽 = 弹窗宽度按格数均分，格高由 galleryView.js 量出格宽后写进 --cell（正方形） ---------- */
.gal-body {
  min-height: calc(var(--u) * 24);
}

.gal-grid {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-gap: var(--gap-2);
}

.gal-cell {
  position: relative;
  height: var(--cell, 0);
  border-radius: var(--radius-sm);
  background: var(--scene);
}

.gal-open {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: var(--radius-sm);
}

.gal-open img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gal-del {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--plum-ink);
}

.gal-add {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 2px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--plum);
  color: var(--plum-ink);
}

.gal-add .icon {
  display: block;
  width: 40%;
  height: 40%;
}

.gal-add .icon svg {
  width: 100%;
  height: 100%;
}

.gal-del::before {
  content: "";
  position: absolute;
  top: -9px;
  bottom: -9px;
  left: -9px;
  right: -9px;
}

.gal-del .icon {
  display: block;
  width: 12px;
  height: 12px;
}

.gal-del .icon svg {
  width: 100%;
  height: 100%;
}

.gal-note {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text);
  line-height: 1.5;
}

.btn-note {
  display: block;
  margin-top: 2px;
  font-size: var(--text-small);
  font-weight: 400;
  opacity: 0.8;
}