/* 团花图腾创作器 — 深色基调 */
:root {
  --bg:        #14161a;
  --panel:     #1b1e24;
  --panel-2:   #23272f;
  --line:      #2e333d;
  --fg:        #e6e9ef;
  --fg-dim:    #9aa3b2;
  --accent:    #6ea8fe;
  --accent-dim:#2b4a7d;
  --radius:    10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", "PingFang SC",
        "Microsoft YaHei", sans-serif;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── 顶栏 ───────────────────────────────── */
#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.brand {
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--fg);
  margin-right: 4px;
}

.seg {
  display: flex;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg-dim);
  font: inherit;
  padding: 6px 12px;
  cursor: pointer;
  min-width: 40px;
  transition: background .12s, color .12s;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover:not(:disabled) { color: var(--fg); }

/* 被几何约束锁住的选项（如三角形模式下的非 4 分块） */
.seg button:disabled {
  opacity: .28;
  cursor: not-allowed;
}
.seg button.on {
  background: var(--accent-dim);
  color: #fff;
  font-weight: 600;
}

/* 修正强度滑块 */
.slider {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg-dim);
  font-size: 12px;
  user-select: none;
}

.slider input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 96px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  outline: none;
  cursor: pointer;
}

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel-2);
  cursor: pointer;
}

.slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--panel-2);
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.slider output {
  min-width: 2ch;
  text-align: right;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

button.ghost {
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg-dim);
  font: inherit;
  font-size: 16px;
  padding: 5px 11px;
  cursor: pointer;
}
button.ghost:hover { color: var(--fg); border-color: var(--accent-dim); }

/* ── 主区域 ─────────────────────────────── */
main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
  position: relative;          /* 提示条相对它定位 */
}

.pane-head {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: .04em;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.canvas-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
}

.canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;          /* 手机必需：否则浏览器吃掉手势 */
  cursor: crosshair;
}

/* 橡皮模式：换光标，让当前工具一眼可辨 */
.canvas-wrap canvas.erasing { cursor: cell; }
.canvas-wrap canvas.filling { cursor: copy; }
/* 填色工具悬停在已填区域上：光标提示这一下是改色而不是新填 */
.canvas-wrap canvas.recolor { cursor: pointer; }

/* 「复位」：只在放大之后出现，所以不给默认状态添乱 */
.zoom-reset {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  min-width: 52px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 18px;
  background: rgba(20, 22, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #e8e8e8;
}

/* ── 主行动按钮（导出）────────────────────────────────────── */
button.primary {
  appearance: none;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: #0d1117;
  font: inherit;
  font-weight: 600;
  padding: 6px 15px;
  cursor: pointer;
  white-space: nowrap;
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.primary:disabled { opacity: .5; cursor: not-allowed; }

/* ── 导出面板 ────────────────────────────────────────────── */
.export-panel { width: min(420px, 100%); }

.field {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
}
.field-label {
  flex: 0 0 42px;
  color: var(--fg-dim);
  font-size: 13px;
}

.export-go {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  font-size: 15px;
}

.export-fallback {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.export-fallback p {
  margin: 0 0 8px;
  color: var(--fg-dim);
  font-size: 13px;
}
.export-fallback button { width: 100%; padding: 11px; }

/* ── 说明面板 ────────────────────────────────────────────── */
[hidden] { display: none !important; }

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 9, 12, .72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.help-panel {
  width: min(640px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.help-head h2 { margin: 0; font-size: 16px; font-weight: 600; }

.help-body {
  padding: 4px 18px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.help-body h3 {
  margin: 20px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .05em;
}

.help-lead {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--fg);
  line-height: 1.7;
}

.help-body dl { margin: 0; }
.help-body dt {
  margin-top: 12px;
  font-weight: 600;
  color: var(--fg);
}
.help-body dd {
  margin: 3px 0 0;
  color: var(--fg-dim);
  line-height: 1.7;
}
.help-body dd b { color: var(--fg); font-weight: 600; }

.help-body ul { margin: 6px 0 0; padding-left: 20px; color: var(--fg-dim); line-height: 1.8; }
.help-body ul b { color: var(--fg); font-weight: 600; }

/* ── 底部工具栏：纹样 / 配色两格 ────────────────────────────
   收纳的目的：不点开时底栏只占一行（56px），
   竖向空间几乎全留给创作区；点开某一格才把面板铺出来。
   两格互斥，点画布也会收起 —— 手在画布上时它们只会挡视线。 */
.toolbar {
  flex: 0 0 auto;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  max-height: 34vh;          /* 手机横屏等极矮的情形下别把画布挤没 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.toolbar-tabs {
  display: flex;
  gap: 0;
}

.tool-tab {
  flex: 1;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--fg-dim);
  background: transparent;
  border: 0;
  border-top: 0;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.tool-tab + .tool-tab { border-left: 1px solid var(--line); }
.tool-tab:hover { color: var(--fg); }
.tool-tab.on {
  color: var(--fg);
  background: var(--panel-2);
  box-shadow: inset 0 2px 0 var(--accent);
}

/* 「配色」标签上的当前颜色小方块 —— 折起来时也能一眼看到用的是什么色 */
.cur-color {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: #5d87b4;
}

/* 纹样缩略图 */
.tray .swatch {
  flex: 0 0 auto;
  appearance: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
  transition: border-color .12s, transform .08s;
}

.tray .swatch:hover { border-color: var(--accent); }
.tray .swatch:active { transform: scale(.94); }
.tray .swatch canvas { display: block; border-radius: 7px; }

.tray .color {
  flex: 0 0 auto;
  appearance: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform .08s, border-color .12s;
}
.tray .color:hover { border-color: var(--fg-dim); }
.tray .color:active { transform: scale(.9); }
.tray .color.on {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}

/* 观众自己调的颜色：同样式，虚线边框区分 */
.custom-colors {
  display: contents;      /* 不产生额外盒子，色块直接参与铺排 */
}
.custom-colors .color {
  border-style: dashed;
  border-color: var(--fg-dim);
}

/* 「＋」取色入口。
   外观是按钮，实际是个 <label> 包着原生 <input type="color"> ——
   原生控件在手机上会拉起系统取色器，比自己画色轮好用得多。 */
.tray .color-pick {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 2px dashed var(--fg-dim);
  color: var(--fg-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
}
.tray .color-pick:hover { border-color: var(--accent); color: var(--fg); }
.tray .color-pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;           /* 只借它的取色能力，不要它的小方块外观 */
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* 缩略图上的角标只在窄屏（预览收成缩略图时）出现。
   桌面端预览是并排的一栏，没有「点开/收起」这回事 ——
   不在这里默认隐藏的话，桌面会平白多出两行没样式的文字。 */
.preview-chip,
.preview-collapse { display: none; }

/* ── 预览：强制正方形 ──────────────────────────────────────
   导出成品是正方形，预览必须同比例，否则所见非所得。
   容器的可用高度未必够，所以用 cqmin 取宽高中的较小者，
   让正方形内接于面板，多出来的空间留白而不是拉伸。 */
.pane-preview .canvas-wrap {
  container-type: size;
  display: grid;
  place-items: center;
}

.pane-preview .canvas-wrap canvas {
  position: static;
  width: calc(100cqmin - 16px);
  height: calc(100cqmin - 16px);
}

/* 不支持容器查询单位时退回铺满（会多出左右留白，但不失真） */
@supports not (width: 1cqmin) {
  .pane-preview .canvas-wrap canvas {
    width: 100%;
    height: 100%;
  }
}

/* ── 窄屏（手机竖屏）───────────────────────────────────────
   顶栏原来是 flex-wrap，小屏上堆成 4~5 行，实测：
     390×844 顶栏 189px（占屏高 22%）
     360×640 顶栏 188px（29%）
     320×568 顶栏 234px（41%）→ 创作区只剩 320×101，没法画
   改成单行横向滚动，高度锁死在一行；触摸目标一律提到 44px
   （Apple HIG 的最小值，展会现场观众站着单手点）。
   ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* 底栏「收起时」的高度 = 只有标签行那一条。
     工具栏是 main 的**兄弟**元素，所以 main 的底边本来就在工具栏之上。 */
  :root { --bottom-bar-h: 52px; }

  main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;      /* ← 作画区独占全部竖向空间 */
    position: relative;           /* 预览缩略图的定位基准 */
  }
  .brand { display: none; }

  /* ── 预览收成右下角缩略图 ──────────────────────────────
     手机屏幕小，原来预览占掉 43% 的高度，作画区只剩一半。
     现在把预览做成悬浮缩略图：点一下展开全屏，再点收起。 */
  .pane-preview {
    position: absolute;
    right: 10px;
    bottom: 14px;
    width: 96px;
    height: 96px;
    z-index: 30;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
    background: var(--panel);
    cursor: pointer;
    transition: transform .12s;
  }
  .pane-preview:active { transform: scale(.96); }

  /* 展开：铺满整屏，压住一切（除了说明/导出弹窗） */
  .pane-preview.expanded {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    border: 0;
    z-index: 60;
    background: rgba(10, 11, 13, .97);
    cursor: zoom-out;
    transition: none;
  }
  .pane-preview.expanded:active { transform: none; }

  /* 缩略图上的「预览」角标 / 展开后的「点任意处收起」提示 */
  .preview-chip,
  .preview-collapse {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 0 4px;
    text-align: center;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--fg-dim);
    background: linear-gradient(transparent, rgba(20, 22, 26, .88) 60%);
    pointer-events: none;
  }
  .preview-collapse {
    display: none;
    top: 0;
    bottom: auto;
    padding: 10px 0 14px;
    font-size: 12px;
    background: linear-gradient(rgba(20, 22, 26, .88) 40%, transparent);
  }
  .pane-preview.expanded .preview-chip { display: none; }
  .pane-preview.expanded .preview-collapse { display: block; }

  /* 「复位」让到左下角 —— 右下角现在是预览缩略图 */
  .zoom-reset { right: auto; left: 10px; }

  #topbar {
    flex-wrap: nowrap;              /* ← 关键：不再换行 */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 6px 10px;
  }
  #topbar::-webkit-scrollbar { display: none; }
  #topbar > * { flex: 0 0 auto; }   /* 子项不被压扁，靠滚动露出 */

  /* 触摸目标：一律 ≥ 44px */
  .seg button {
    min-height: 44px;
    min-width: 44px;
    padding: 0 13px;
    font-size: 14px;
  }

  button.ghost {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 17px;
  }

  .slider {
    min-height: 44px;
    padding: 0 12px;
  }
  .slider input[type="range"] { width: 104px; }
  .slider input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; }
  .slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; }

  /* 底部工具栏：手机上触摸目标一律提到 44px（Apple HIG 的最小值） */
  .toolbar-tabs .tool-tab { min-height: var(--bottom-bar-h); font-size: 15px; }
  .tray { gap: 10px; padding: 10px; }
  .tray .color { width: 44px; height: 44px; }
  .tray .color-pick { width: 44px; height: 44px; font-size: 22px; }
  .tray .swatch canvas { width: 46px !important; height: 46px !important; }
  .cur-color { width: 20px; height: 20px; }

  /* 两行面板标题在手机上白占 56px 竖向空间；内容说明面板里都有 */
  .pane-head { display: none; }

  /* 说明面板在小屏上铺满 */
  .help-overlay { padding: 10px; }
  .help-panel { border-radius: 12px; }
  .help-body { padding: 4px 15px 18px; }
}