/* 愈合：页面样式。尺寸一律是 --u（竖列时是列宽的百分之一，横屏时是窗口高的百分之一）的倍数。 */
:root {
  --u: 3.9px;
  --btn: 30px;
  --kw: 44px;
  --tile: calc(var(--u) * 11.3);
  --band-h: calc(var(--u) * 15);
  --bar-h: calc(var(--u) * 17.5);
  --header-bottom: calc(var(--u) * 17.2);

  --bg: #282725;
  --surface: #ddd0c1;
  --surface-2: #c6b7a5;
  --field: #efe6da;
  --bar: #2b2523;
  --disc: #f3d6d0;
  --ink: #2a2321;
  --ink-2: #66524a;
  --ink-3: #9b8878;
  --line: #5d463f;
  --accent: #bd2a27;
  --danger: #a8271f;
  --on-dark: #f3e6df;

  --thread: #a02925;
  --stitch: #f6e6df;
  --icon: #cdb9bb;
  --paper-ink: #fdf9f2;
  --paper-ink-edge: #a8968a;

  --font-weight: 700;
  --radius: calc(var(--u) * 2);
  --radius-sm: calc(var(--u) * 1.4);
  --border-w: calc(var(--u) * 0.5);
}

html,
body {
  background: #161514;
  color: var(--ink);
}

#app {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.side-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #161514;
  background-size: 200px 200px;
}

.frame {
  position: absolute;
  overflow: hidden;
  background: #282725;
}

.boil,
.frame-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.page-boil {
  filter: url(#page-boil);
}

.frame-bg {
  background-color: #282725;
  background-size: 200px 200px;
}

/* 宽屏时竖列两侧各一道缝线，像把这一列缝在桌布上。 */
.seam {
  display: none;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 0;
  bottom: 0;
  width: calc(var(--u) * 0.6);
  background-image: repeating-linear-gradient(to bottom, #6a1e1b 0, #6a1e1b calc(var(--u) * 2.6), transparent calc(var(--u) * 2.6), transparent calc(var(--u) * 4.8));
}

.seam-l {
  left: calc(var(--u) * 1.2);
}

.seam-r {
  right: calc(var(--u) * 1.2);
}

.frame[data-wide="1"] .seam {
  display: block;
}

/* 标题栏 */
.band {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: var(--band-h);
}

.stitches {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: var(--band-h);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 8.4);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  color: var(--thread);
  pointer-events: none;
}

html[lang="en"] .title {
  font-size: calc(var(--u) * 6.8);
  letter-spacing: 0.1em;
  padding-left: 0.1em;
}

html[lang="en"] .frame[data-mode="land"] .title {
  font-size: calc(var(--u) * 5.4);
}

html[lang="en"] .prompt {
  font-size: calc(var(--u) * 7.4);
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}

/* 中 / EN：右上角固定（离右 10、离上 8），小而扁；两半共用外框，选中的一半填色。 */
.lang-seg {
  position: absolute;
  right: 10px;
  top: 8px;
  display: flex;
  align-items: stretch;
  height: 22px;
  border: 2px solid var(--icon);
  border-radius: 6px;
  overflow: hidden;
  color: var(--icon);
  font-size: 12px;
  line-height: 1;
}

/* 点击区仍有 44px 高，用伪元素扩，不占版面。 */
.lang-seg::before {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: -11px;
  bottom: -11px;
}

.lang-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 7px;
  padding-right: 7px;
}

.lang-opt.is-on {
  background: var(--thread);
  color: var(--on-dark);
}

/* 基础五钮：一排扁扁的小块，每块高 30、宽 44，icon 18，没有阴影；点按区用伪元素扩到 44 高。 */
.buttons {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-bottom);
  height: var(--btn);
  display: flex;
  justify-content: center;
}

.basic {
  position: relative;
  flex: none;
  width: var(--kw);
  height: var(--btn);
  margin-left: 3px;
  margin-right: 3px;
  color: var(--icon);
  background-color: transparent;
}

.basic::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  bottom: -7px;
}

.patch-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.basic .icon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
}

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

.basic:disabled {
  opacity: 0.42;
  cursor: default;
}

/* 舞台：标题栏下面的整块页面，桌面（底色和纹路）和纸都在里面，缩放平移作用在整个舞台上。
   基础五钮和工具栏是实心的块，悬浮在舞台上面；舞台自己接收按下和滚轮。 */
.paper-area {
  position: absolute;
  z-index: 1;
  touch-action: none;
  left: 0;
  right: 0;
  top: var(--band-h);
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #282725;
  background-size: 200px 200px;
}

.paper {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
}

/* 盖在纸上、不接收点按的一层。手不画在这里。 */
.hand-layer {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.prompt {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  font-size: calc(var(--u) * 8.4);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--paper-ink);
  text-shadow: calc(var(--u) * 0.35) 0 0 var(--paper-ink-edge), calc(var(--u) * -0.35) 0 0 var(--paper-ink-edge), 0 calc(var(--u) * 0.35) 0 var(--paper-ink-edge), 0 calc(var(--u) * -0.35) 0 var(--paper-ink-edge), calc(var(--u) * 0.25) calc(var(--u) * 0.25) 0 var(--paper-ink-edge), calc(var(--u) * -0.25) calc(var(--u) * -0.25) 0 var(--paper-ink-edge), calc(var(--u) * 0.25) calc(var(--u) * -0.25) 0 var(--paper-ink-edge), calc(var(--u) * -0.25) calc(var(--u) * 0.25) 0 var(--paper-ink-edge);
}

/* 工具栏 */
.toolbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  display: flex;
  align-items: flex-start;
  padding-top: calc(var(--u) * 3.6);
  padding-left: calc(var(--u) * 1.9);
  padding-right: calc(var(--u) * 1.9);
}

.tile {
  position: relative;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  margin-right: calc(var(--u) * 0.5);
  background-color: transparent;
}

/* 选中的方块往上抬一点，周围一圈实线。 */
.tile.is-on {
  transform: translateY(calc(var(--u) * -1.4));
}

.tile.is-on::after {
  content: '';
  position: absolute;
  left: calc(var(--u) * -0.9);
  top: calc(var(--u) * -0.9);
  right: calc(var(--u) * -0.9);
  bottom: calc(var(--u) * -0.9);
  border: calc(var(--u) * 0.5) solid var(--stitch);
  border-radius: calc(var(--u) * 1.8);
  pointer-events: none;
}

/* 颜色钮：和工具方块同一排、同样大小，靠右。 */
.blob {
  position: relative;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  margin-left: auto;
  background-color: transparent;
}

/* 选项条：浮在工具栏上方，实心纸色，一个小尖角指向当前工具方块。左边是款式，右边是预设颜色。 */
.styles {
  position: absolute;
  bottom: calc(var(--bar-h) + var(--u) * 2.2);
  display: flex;
  align-items: center;
  padding: calc(var(--u) * 1.6);
  z-index: 2;
}

.styles-chips {
  display: flex;
  flex: none;
}

.styles-chips + .styles-swatches {
  margin-left: calc(var(--u) * 2);
  padding-left: calc(var(--u) * 2);
  border-left: calc(var(--u) * 0.5) solid #c2b2a1;
}

.styles-swatches {
  display: flex;
  flex: none;
  align-items: center;
}

/* 款式多的工具（缝线四种、绳子两种）：竖屏时颜色另起一行，不把选项条拉出画面。 */
.frame:not([data-mode="land"]) .styles-stack {
  flex-direction: column;
  align-items: flex-start;
}

.frame:not([data-mode="land"]) .styles-stack .styles-chips + .styles-swatches {
  margin: calc(var(--u) * 1.6) 0 0;
  padding: calc(var(--u) * 1.6) 0 0;
  border-left: 0;
  border-top: calc(var(--u) * 0.5) solid #c2b2a1;
}

.swatch {
  position: relative;
  flex: none;
  width: calc(var(--tile) * 0.62);
  height: calc(var(--tile) * 0.62);
  margin: 0 calc(var(--u) * 0.6);
  padding: 0;
  border: calc(var(--u) * 0.6) solid #5a4a42;
  border-radius: 50%;
  box-shadow: none;
}

.swatch.is-on::after {
  content: '';
  position: absolute;
  left: calc(var(--u) * -1.5);
  top: calc(var(--u) * -1.5);
  right: calc(var(--u) * -1.5);
  bottom: calc(var(--u) * -1.5);
  border: calc(var(--u) * 0.55) solid var(--thread);
  border-radius: 50%;
  pointer-events: none;
}

/* 透明度一行：名字、带进度的拉条、百分比。 */
.cp-row-alpha {
  grid-template-columns: auto minmax(0, 1fr) 62px;
}

.cp-num-wrap {
  display: flex;
  align-items: center;
}

.cp-num-wrap .cp-num {
  width: 40px;
}

.cp-unit {
  margin-left: 4px;
  color: var(--ink-2);
}

.style-chip {
  position: relative;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  margin-right: calc(var(--u) * 1.2);
  background-color: transparent;
}

.style-chip:last-of-type {
  margin-right: 0;
}

.style-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 0.9);
  text-align: center;
  white-space: nowrap;
  font-size: calc(var(--u) * 2.5);
  line-height: 1;
  color: var(--ink);
  pointer-events: none;
}

.style-chip.is-on::after {
  content: '';
  position: absolute;
  left: calc(var(--u) * -0.7);
  top: calc(var(--u) * -0.7);
  right: calc(var(--u) * -0.7);
  bottom: calc(var(--u) * -0.7);
  border: calc(var(--u) * 0.55) solid var(--thread);
  border-radius: calc(var(--u) * 1.6);
  pointer-events: none;
}

.styles-notch {
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: calc(var(--u) * -1.6);
  margin-top: calc(var(--u) * -0.4);
  border-left: calc(var(--u) * 1.6) solid transparent;
  border-right: calc(var(--u) * 1.6) solid transparent;
  border-top: calc(var(--u) * 1.8) solid #c2b2a1;
}

/* 横屏手机：标题栏左边一排基础五钮（一行，不竖排），右边一块工具，中间是纸。 */
.frame[data-mode="land"] {
  --band-h: calc(var(--u) * 11.6);
  --tile: calc(var(--u) * 11.3);
}

.frame[data-mode="land"] .title {
  font-size: calc(var(--u) * 6.2);
}

.frame[data-mode="land"] .buttons {
  left: 50%;
  right: auto;
  top: calc((var(--band-h) - var(--btn)) / 2 - var(--u) * 0.6);
  width: auto;
  transform: translateX(-50%);
  justify-content: center;
}

/* 横屏：五钮整组在屏幕正中，标题让到左边。 */
.frame[data-mode="land"] .title {
  right: auto;
  left: 14px;
  padding-left: 0;
  letter-spacing: 0.2em;
}

.frame[data-mode="land"] .toolbar {
  left: auto;
  top: calc(var(--band-h) + var(--u) * 2);
  right: 0;
  bottom: 0;
  width: calc(var(--tile) * 2 + var(--u) * 7.2);
  height: auto;
  display: grid;
  grid-template-columns: var(--tile) var(--tile);
  grid-gap: calc(var(--u) * 0.8);
  align-content: center;
  padding: 0 calc(var(--u) * 2.2) 0 calc(var(--u) * 4.2);
}

.frame[data-mode="land"] .tile {
  margin-right: 0;
}

.frame[data-mode="land"] .tile.is-on {
  transform: translateX(calc(var(--u) * -1.4));
}

.frame[data-mode="land"] .blob {
  margin-left: 0;
}

.frame[data-mode="land"] .styles {
  bottom: auto;
  right: calc(var(--tile) * 2 + var(--u) * 7.2 + var(--u) * 2.2);
  flex-direction: row;
}

.frame[data-mode="land"] .styles-chips {
  flex-direction: column;
}

.frame[data-mode="land"] .style-chip {
  margin-right: 0;
  margin-bottom: calc(var(--u) * 1.2);
}

.frame[data-mode="land"] .style-chip:last-of-type {
  margin-bottom: 0;
}

.frame[data-mode="land"] .styles-chips + .styles-swatches {
  margin-left: calc(var(--u) * 1.6);
  padding-left: calc(var(--u) * 1.6);
}

.frame[data-mode="land"] .styles-swatches {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: calc(var(--u) * 1.4) calc(var(--u) * 0.6);
}

.frame[data-mode="land"] .styles-notch {
  top: auto;
  left: 100%;
  margin-left: calc(var(--u) * -0.4);
  margin-top: calc(var(--u) * -1.6);
  border-top: calc(var(--u) * 1.6) solid transparent;
  border-bottom: calc(var(--u) * 1.6) solid transparent;
  border-left: calc(var(--u) * 1.8) solid #c2b2a1;
  border-right: 0;
}

/* 弹窗、色盘、悬浮层：和页面同一套，纸色的一块，边上一圈深色窄边，边角是手剪的。 */
.modal-overlay {
  background: rgba(14, 12, 12, 0.72);
}

.modal,
.popover {
  background-color: var(--surface);
  background-size: 200px 200px;
  border: calc(var(--u) * 0.7) solid #bba998;
  border-radius: calc(var(--u) * 2.4) calc(var(--u) * 1.6) calc(var(--u) * 2.8) calc(var(--u) * 1.8);
  color: var(--ink);
}

.modal {
  width: calc(var(--u) * 88);
  filter: url(#page-boil-soft);
}

.popover {
  filter: url(#page-boil-soft);
}

.modal-head {
  min-height: 0;
  padding: 3px 3px 3px var(--gap-3);
}

.modal-head-bare {
  justify-content: flex-end;
  border-bottom: 0;
  padding-bottom: 0;
}

.modal-close {
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 17px;
}

/* × 只是角上的小字形；点击区仍有 44px，用伪元素扩。 */
.modal-close::before {
  content: '';
  position: absolute;
  left: -11px;
  right: -11px;
  top: -11px;
  bottom: -11px;
}

.modal-untitled .modal-body > :first-child:not(.modal-stack),
.modal-untitled .modal-stack > :first-child {
  max-width: none;
}

.modal-text {
  font-size: calc(var(--u) * 4.2);
}

.btn {
  border-radius: calc(var(--u) * 1.4) calc(var(--u) * 1.1) calc(var(--u) * 1.5) calc(var(--u) * 1.1);
  border-color: var(--line);
  background: var(--field);
}

.btn-primary {
  background: var(--thread);
  border-color: var(--thread);
  color: var(--on-dark);
}

.btn-danger {
  background: var(--thread);
  border-color: var(--thread);
  color: var(--on-dark);
}

.modal-choices .btn {
  min-height: calc(var(--u) * 14);
  font-size: calc(var(--u) * 5.2);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.modal-preview,
.modal-progress {
  background: var(--surface-2);
}

.modal-progress::-webkit-progress-value {
  background: var(--thread);
}

.modal-progress::-moz-progress-bar {
  background: var(--thread);
}

.credit {
  border-top-color: var(--surface-2);
}

.cp-tab.is-on {
  background: var(--thread);
  border-color: var(--thread);
}

.cp-swatch {
  border-radius: calc(var(--u) * 1.2);
}

/* 选中物件时浮在纸上的删除钮和旋转钮：圆的部分 30 像素，点击区向外多 8 像素，位置由脚本按物件算。 */
.sel-btn {
  position: absolute;
  z-index: var(--z-float);
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 2px solid #231f1d;
  border-radius: 50%;
  background: #e6d8d0;
  color: #231f1d;
  touch-action: none;
}

.sel-btn::before {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: -8px;
  bottom: -8px;
}

.sel-btn .icon {
  display: block;
  width: 14px;
  height: 14px;
  margin: 6px;
}

.sel-btn .icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 6;
}

.export-reason {
  margin-top: var(--gap-2);
}

/* 舞台铺满整页：标题栏、五个按钮、工具栏悬浮在舞台的上面，桌面和纸从它们下面过去，不被切开；
   容器本身把点按放行给舞台，只有按钮自己接收点按。 */
.band,
.stitches,
.title,
.lang-seg,
.buttons,
.toolbar {
  z-index: 2;
}

.styles {
  z-index: 3;
}

.title,
.buttons {
  pointer-events: none;
}

.buttons > * {
  pointer-events: auto;
}

.lang-seg {
  pointer-events: auto;
}