/* 哐哐牌刮刀：页面样式。尺寸一律是 --u（竖列时是列宽的百分之一，横屏时是窗口高的百分之一）的倍数。 */
:root {
  --u: 3.9px;
  --btn: 52px;
  --row: 49px;
  --plus: 44px;
  --band-h: 47px;
  --lang-h: 24px;
  --fs-lang: 12px;
  --fs-label: 14px;
  --hit: 3px;
  --header-bottom: calc(var(--band-h) + var(--u) * 2);
  --gut: calc(var(--u) * 2);
  --pad: calc(var(--u) * 5);
  --art-h: calc(var(--u) * 21);
  --tube-w: calc(var(--art-h) * 0.22 + var(--u) * 2.2);
  --tube-gap: 0px;
  --tube-gap-w: 0px;
  --tool-w: calc(var(--u) * 12);
  --tools-h: calc(var(--u) * 26);

  --bg: #413c3c;
  --surface: #d8d5d3;
  --surface-2: #bdb9b7;
  --field: #e7e5e3;
  --bar: #262222;
  --disc: #0a0909;
  --ink: #262222;
  --ink-2: #5a5555;
  --ink-3: #8b8685;
  --line: #4a4545;
  --accent: #171414;
  --danger: #8e2b24;
  --on-dark: #e4e1df;

  --icon: #c4bfbe;
  --title: #c9c5c4;
  --stitch: #d9d4d2;
  --plus-ink: #3d3939;

  --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: #211e1e;
  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: #211e1e;
  background-size: 200px 200px;
}

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

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

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

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

/* 标题栏：黑色一块，浅灰色的标题居中；右上角一个扁扁的中 / EN 小框。 */
.band {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: var(--band-h);
}

.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) * 7.4);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  padding-left: 0.16em;
  color: var(--title);
  pointer-events: none;
}

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

/* 中 / EN：按钮是 44 像素高的点按区，里面一个扁扁的小框，两半共用外框，选中的一半填色。 */
.lang-seg {
  position: absolute;
  right: calc(var(--u) * 1.4);
  top: calc((var(--band-h) - 44px) / 2);
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 calc(var(--u) * 0.8);
  background: transparent;
  border: 0;
  color: var(--icon);
}

.lang-box {
  display: flex;
  align-items: stretch;
  height: var(--lang-h);
  border: calc(var(--u) * 0.4) solid var(--icon);
  border-radius: calc(var(--u) * 1.8) calc(var(--u) * 1.3) calc(var(--u) * 1.9) calc(var(--u) * 1.3);
  overflow: hidden;
  font-size: var(--fs-lang);
  line-height: 1;
}

.lang-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(var(--u) * 1.8);
  padding-right: calc(var(--u) * 1.8);
}

.lang-opt.is-on {
  background: var(--title);
  color: #0a0909;
}

/* 五个圆钮：整条一行，每钮高不超过 32，点按区用伪元素扩到 44 像素。 */
.buttons {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-bottom);
  display: flex;
  justify-content: center;
}

.round {
  position: relative;
  flex: none;
  width: var(--btn);
  height: var(--btn);
  margin-left: calc(var(--u) * 1.4);
  margin-right: calc(var(--u) * 1.4);
  color: var(--icon);
  background-color: transparent;
}

.round::after {
  content: '';
  position: absolute;
  left: calc(var(--hit) * -1);
  top: calc(var(--hit) * -1);
  right: calc(var(--hit) * -1);
  bottom: calc(var(--hit) * -1);
}

.round .icon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--btn) * 0.5);
  height: calc(var(--btn) * 0.5);
  margin-left: calc(var(--btn) * -0.25);
  margin-top: calc(var(--btn) * -0.25);
}

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

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

/* 画布：没有边框，直接是画布。 */
.paper-area {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: calc(var(--header-bottom) + var(--btn) + var(--gut));
  bottom: calc(var(--gut) * 3 + var(--row) + var(--tools-h));
  display: flex;
  align-items: center;
  justify-content: center;
}

.paper {
  position: relative;
  flex: none;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  touch-action: none;
  cursor: crosshair;
}

/* 底部（竖屏）：一行大小，下面一整条盒子：左边颜料管并排摆，右端是刮刀位和笔刷位，三样一样高、底边对齐。 */
.dock {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: var(--gut);
  display: flex;
  flex-direction: column;
}

.rail-bg {
  display: none;
}

.size-row {
  display: flex;
  align-items: center;
  height: var(--row);
  margin-bottom: var(--gut);
}

.size {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.size-label {
  flex: none;
  margin-right: calc(var(--u) * 1.6);
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--title);
}

.slider {
  touch-action: none;
  flex: 1 1 auto;
  min-width: 36px;
  height: 44px;
  background-color: transparent;
}

.tools {
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--tools-h);
}

.tray {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* 加号：盒子最左边的一格，没有自己的框。 */
.tray-plus {
  position: absolute;
  left: calc(var(--u) * 1);
  top: 0;
  bottom: 0;
  width: var(--plus);
  color: var(--plus-ink);
  background-color: transparent;
}

.tray-plus .icon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  margin-left: calc(var(--u) * -3);
  margin-top: calc(var(--u) * -3);
}

.tray-plus .icon svg {
  width: 100%;
  height: 100%;
}

.tray-scroll {
  position: absolute;
  left: calc(var(--plus) + var(--u) * 1);
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: calc(var(--u) * 2.5);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.tray-scroll::-webkit-scrollbar {
  display: none;
}

/* 颜料管：一支一个按钮，细长，和刮刀位、笔刷位同高。 */
.tube {
  position: relative;
  flex: none;
  width: var(--tube-w);
  height: var(--art-h);
  margin: 0 var(--tube-gap) 0 0;
  padding: 0;
  background-color: transparent;
  isolation: isolate;
}

/* 正在用的颜色那支探出头（朝盖子的方向抬一截）；颜料管是手上的工具时，探出头的那支再垫一块深一点的底（和选中的工具位同一种）。 */
.tube {
  transition: transform 0.12s ease-out;
}

.tube.is-current {
  transform: translateY(calc(var(--u) * -2));
}

.tube.is-active {
  background-color: #a8a3a1;
  border-radius: calc(var(--u) * 1.4);
}

/* 刮刀位和笔刷位：自己一盒，和颜料盘之间留一条缝，颜料管滑不到它下面。 */
.rack {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
  margin-left: calc(var(--u) * 1.6);
  padding: 0 calc(var(--u) * 1.4) calc(var(--u) * 2.5) calc(var(--u) * 1.4);
}

.tool {
  position: relative;
  flex: none;
  display: block;
  width: var(--tool-w);
  height: var(--art-h);
  margin-left: calc(var(--u) * 0.6);
  padding: 0;
  background-color: transparent;
  isolation: isolate;
}

.tool-art {
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transform: scale(var(--tool-scale, 1));
  transform-origin: 50% 100%;
}

/* 选中的工具位：垫一块深一点的底。 */
.tool.is-on::before,
.head.is-on::before {
  content: '';
  position: absolute;
  left: calc(var(--u) * -0.4);
  right: calc(var(--u) * -0.4);
  top: calc(var(--u) * -0.8);
  bottom: calc(var(--u) * -0.8);
  z-index: -1;
  background: #a8a3a1;
  border: calc(var(--u) * 0.4) solid #716c6a;
  border-radius: calc(var(--u) * 1.8) calc(var(--u) * 1.3) calc(var(--u) * 1.9) calc(var(--u) * 1.4);
}

/* 换头悬浮窗里的一排头。 */
.heads {
  display: flex;
  align-items: center;
  padding: calc(var(--u) * 1) calc(var(--u) * 0.6);
}

.head {
  position: relative;
  flex: none;
  display: block;
  width: var(--tool-w);
  height: var(--art-h);
  margin: 0 calc(var(--u) * 0.6);
  padding: 0;
  background-color: transparent;
  isolation: isolate;
}

/* 宽屏（横屏、电脑）：画布在左边和中间当主角，所有工具集中在右边一栏。 */
.frame[data-mode="wide"] {
  --header-bottom: calc(var(--band-h) + var(--u) * 1.5);
  --gut: calc(var(--u) * 2);
  --rail-r: calc(var(--u) * 30);
  --in: calc(var(--u) * 1.6);
  --tube-len: calc(var(--u) * 19);
  --tube-t: calc(var(--tube-len) * 0.22 + var(--u) * 0.5);
  --art-h: calc(var(--u) * 13.5);
  --tool-w: calc(var(--u) * 11.4);
  --plus-h: calc(var(--in) + var(--u) * 9.9);
  --tube-gap-w: 0px;
  --lx: var(--gut);
}

/* 窗口够高时（右栏里放得下）颜料管和工具放大，把右栏填满，不留大块空白。 */
.frame[data-mode="wide"][data-roomy="1"] {
  --tube-len: calc(var(--u) * 26);
  --art-h: calc(var(--u) * 20);
  --tool-w: calc(var(--u) * 11.4);
}

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

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

/* 五个圆钮在横屏下跨整个屏幕，落在整屏正中，不跟着画布偏。 */
.frame[data-mode="wide"] .buttons {
  left: 0;
  right: 0;
  top: var(--header-bottom);
}

.frame[data-mode="wide"] .paper-area {
  left: var(--lx);
  right: calc(var(--gut) * 2 + var(--rail-r));
  top: calc(var(--header-bottom) + var(--btn) + var(--gut));
  bottom: var(--gut);
}

.frame[data-mode="wide"] .dock {
  left: auto;
  right: var(--gut);
  top: var(--header-bottom);
  bottom: var(--gut);
  width: var(--rail-r);
}

.frame[data-mode="wide"] .rail-bg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.frame[data-mode="wide"] .tools {
  order: 1;
  flex: 1 1 auto;
  flex-direction: column;
  height: auto;
  min-height: 0;
}

.frame[data-mode="wide"] .size-row {
  order: 2;
  position: relative;
  margin: 0 var(--in) calc(var(--in) * 0.5);
}

.frame[data-mode="wide"] .size-label {
  color: var(--ink);
}

.frame[data-mode="wide"] .tray {
  flex: 1 1 auto;
  min-height: 0;
}

.frame[data-mode="wide"] .tray-plus {
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  width: auto;
  height: var(--plus-h);
}

.frame[data-mode="wide"] .tray-plus .icon {
  top: calc(50% + var(--in) / 2);
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  margin-left: calc(var(--u) * -2.5);
  margin-top: calc(var(--u) * -2.5);
}

.frame[data-mode="wide"] .tray-scroll {
  left: 0;
  right: 0;
  top: var(--plus-h);
  bottom: 0;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding-bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}

.frame[data-mode="wide"] .tube {
  width: var(--tube-len);
  height: var(--tube-t);
  margin: 0 0 var(--tube-gap-w) 0;
}

.frame[data-mode="wide"] .tube.is-current {
  transform: translateX(calc(var(--u) * -2));
}

.frame[data-mode="wide"] .rack {
  justify-content: center;
  margin: 0 var(--in) var(--in);
  padding: var(--in) var(--in) calc(var(--in) * 0.6);
}

.frame[data-mode="wide"] .tool {
  margin: 0 calc(var(--u) * 0.6);
}

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

.modal,
.popover {
  background-color: var(--surface);
  background-size: 200px 200px;
  border: calc(var(--u) * 0.7) solid #a8a3a1;
  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);
}

/* 关闭：面板右上角的小 ×，看得见的部分 22 像素、离角不到 10 像素，点按区用伪元素扩到 44 像素，不占标题条右侧的位置。 */
.modal-close {
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 22px;
}

.modal-close::after {
  content: '';
  position: absolute;
  left: -11px;
  top: -11px;
  right: -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: #0a0909;
  border-color: #0a0909;
  color: var(--on-dark);
}

.btn-danger {
  background: #0a0909;
  border-color: #0a0909;
  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: #0a0909;
}

.modal-progress::-moz-progress-bar {
  background: #0a0909;
}

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

.cp-tab.is-on {
  background: #0a0909;
  border-color: #0a0909;
}

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