/* 哐哐下饺子：项目自己的样式。尺寸都用 --u（画面宽的百分之一，竖画面）；按钮边长 --btn / --btn-lg / --btn-sm 至少 44 像素。 */
:root {
  --bg: #e4d0b9;
  --surface: #f6f1ea;
  --surface-2: #e6ddd2;
  --field: #fbf8f3;
  --bar: #b98a62;
  --disc: #f4e7e3;
  --ink: #4f4741;
  --ink-2: #7a6f66;
  --ink-3: #a99e93;
  --line: #8f857a;
  --accent: #cfa6a4;
  --on-dark: #fbf4e8;
  --band: #cdae92;
  --title: #fcf6ec;
}

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

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

.backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.frame {
  position: absolute;
}

/* 第一次排好之前先藏着，不在角落里闪一下 */
.frame:not(.is-ready) {
  visibility: hidden;
}

/* 整页抖动：画面、物件、按钮同一层；标题栏的字抖得轻一些 */
.dough-boil {
  filter: url(#dough-boil);
}

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

/* ---------- 标题栏 ---------- */
.titlebar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-group {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-top: calc(var(--u) * -0.6);
}

.title-text {
  margin: 0;
  font-weight: var(--title-weight);
  font-size: calc(var(--u) * 7.4);
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--title);
}

.title-mark {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  margin-left: calc(var(--u) * 1);
}

/* 中 / EN：一个整体的分段钮，两半共用外框，选中的一半填色 */
.lang {
  position: absolute;
  right: calc(var(--u) * 3);
  top: 50%;
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
  padding: 0;
}

.lang-pill {
  display: flex;
  border: var(--lang-bd) solid var(--title);
  border-radius: calc(var(--u) * 3);
  overflow: hidden;
}

.lang-half {
  display: block;
  padding: calc(var(--u) * 0.25) calc(var(--u) * 1.3);
  font-size: var(--fs-lang);
  line-height: 1.2;
  color: var(--title);
}

.lang-half.is-on {
  background: var(--title);
  color: #8a8075;
}

.lang.is-tight .lang-half {
  padding: calc(var(--u) * 0.2) calc(var(--u) * 1);
  font-size: var(--fs-lang-tight);
}

/* ---------- 页面区 ---------- */
.page-body {
  position: absolute;
  left: 0;
  top: calc(var(--header-h) + var(--toast-row));
  width: 100%;
  bottom: 0;
}

.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.zone {
  position: absolute;
  pointer-events: none;
}

/* ---------- 圆按钮 ---------- */
.rbtn,
.sqbtn,
.fillbar,
.basicbar,
.fold-label {
  z-index: 1;
}

.rbtn,
.sqbtn {
  position: absolute;
  width: var(--btn);
  height: var(--btn);
  touch-action: manipulation;
}

.rbtn-lg {
  width: var(--btn-lg);
  height: var(--btn-lg);
}

.rbtn-sm {
  width: var(--btn-sm);
  height: var(--btn-sm);
}

.rbtn-xl {
  width: var(--btn-xl);
  height: var(--btn-xl);
}

.btn-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 选中：外面多一圈同色系的深环 */
.rbtn .sel-ring {
  display: none;
}

.rbtn.is-on .sel-ring {
  display: inline;
}

.rbtn-ico,
.sqbtn-ico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}

.rbtn-ico.is-art {
  width: 74%;
  height: 74%;
}

.sqbtn-ico {
  width: 40%;
  height: 40%;
}

/* 加号钮：方底上的一张饺子皮 */
.sqbtn-dough {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
}

.sqbtn-dough .art-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.rbtn.is-hidden,
.fold-label.is-hidden {
  display: none;
}

/* 圆钮下面的字（让它看得出是按钮）：正文字在字框里水平居中，开头结尾的标点挂在外侧、不参与居中（KK.ui.hangLabel）；
   字底下一块实心浅底，手机浏览器强制深色时底和字一起反相，不会变成浅字压在画布上 */
.fold-label {
  position: absolute;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--fs-name);
  line-height: 1.25;
  color: #3f3631;
  pointer-events: none;
}

.rbtn-ico .icon,
.rbtn-ico svg,
.sqbtn-ico .icon,
.sqbtn-ico svg,
.art-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.ring-focus:focus-visible {
  box-shadow: none;
  outline: calc(var(--u) * 0.5) solid var(--accent);
  outline-offset: calc(var(--u) * 0.3);
  border-radius: 50%;
}

/* ---------- 二选一分段钮（页面里用的，和中 / EN 同一套样子） ---------- */
.seg {
  position: absolute;
  height: 44px;
  display: flex;
  align-items: center;
}

.seg-pill {
  display: flex;
  border: calc(var(--u) * 0.45) solid #b98a62;
  border-radius: calc(var(--u) * 2);
  overflow: hidden;
  background: #f8f3ec;
}

.seg-half {
  display: block;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.8);
  font-size: calc(var(--u) * 2.9);
  line-height: 1.25;
  color: #b98a62;
  white-space: nowrap;
}

.seg-half.is-on {
  background: #b98a62;
  color: #f8f3ec;
}

/* ---------- 浮出面板 ---------- */
.panel {
  position: absolute;
  width: max-content;
  z-index: var(--z-popover);
}

.panel.is-hidden {
  display: none;
}

.panel-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.panel-face svg {
  display: block;
  width: 100%;
  height: 100%;
}

.panel-body {
  position: relative;
  padding: calc(var(--u) * 5.4);
}

.panel-head {
  height: 27px;
}

/* 面板右上角的小 ×：按画面单位内收 4.8u，落在焦糖边内侧的奶油底上，每个尺寸都是同一个角。点击区用伪元素扩到 44px。 */
.panel-close {
  position: absolute;
  right: calc(var(--u) * 4.8);
  top: calc(var(--u) * 4.8);
  z-index: 4;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
}

/* 色盘里的「确认」和别的确认钮一样是按钮主色 */
.cp-confirm {
  background: var(--bar);
  border-color: var(--bar);
  color: var(--on-dark);
}

.cp-confirm .cp-dot {
  border-color: var(--on-dark);
}

/* 浮出层打开时盖住页面区里的四钮和底栏，标题栏在页面区外面，仍然看得见。 */
.page-scrim {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  display: none;
  background: rgba(58, 36, 24, 0.45);
}

.page-scrim.is-on {
  display: block;
}

.panel-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.panel-close-ico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  color: #3a2418;
}

.panel-close-ico .icon,
.panel-close-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 选皮面板：一格一种皮 */
.skin-grid {
  width: calc(var(--btn-sm) * 4 + var(--u) * 5.5);
}

.skin-grid::after {
  content: '';
  display: block;
  clear: both;
}

.skin-chip {
  position: relative;
  float: left;
  width: var(--btn-sm);
  height: var(--btn-sm);
  margin: calc(var(--u) * 0.75) calc(var(--u) * 1.5) calc(var(--u) * 0.75) 0;
}

.skin-chip:nth-child(4n) {
  margin-right: 0;
}

/* 提示条：实色底（奶油白）的圆角块，不要边框、不要投影；文字深棕；压在桌沿上也看得清 */
.toast {
  background: #fbf2e6;
  border: 0;
  box-shadow: none;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 3);
  margin-top: calc(var(--u) * -1.1);
  border-radius: calc(var(--u) * 2.4);
  width: max-content;
  max-width: calc(100% - var(--u) * 6);
  color: #4f4741;
  font-size: var(--fs-body);
  line-height: calc(var(--fs-body) * 1.35);
  text-align: center;
}

.toast-action {
  border: 0;
  background: none;
  color: #8f8278;
  text-decoration: underline;
}

/* ---------- 馅料条（底部一条，点开向上展开馅料抽屉） ---------- */
.fillbar {
  position: absolute;
  height: var(--btn);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  border-radius: calc(var(--u) * 2.4);
  background: #b98a62;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.7) #a97a54;
}

.fillbar-ico {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--btn) * 0.72);
  height: calc(var(--btn) * 0.72);
}

.fillbar-text {
  position: relative;
  margin: 0 calc(var(--u) * 1.6);
  font-size: var(--fs-name);
  line-height: 1.15;
  color: #fbf2e6;
  text-align: center;
}

.fillbar-arrow {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  color: #fbf2e6;
}

.fillbar-arrow svg,
.fillbar-ico canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.fill-item {
  width: calc(var(--u) * 22);
  margin-bottom: calc(var(--u) * 1.5);
  text-align: center;
}

.fill-item .rbtn {
  position: relative;
  display: block;
  margin: 0 auto;
}

.fill-name {
  display: block;
  margin-top: calc(var(--u) * 0.6);
  font-size: var(--fs-name);
  line-height: 1.25;
  color: #6f645d;
}

.hang-core {
  display: block;
}

.hang-shown {
  padding: 0 0.45em;
  border-radius: 0.7em;
  background: #f8f1e6;
}

.hang-ghost {
  visibility: hidden;
}

/* ---------- 刻印弹窗 ---------- */
.seg-inline {
  position: relative;
  height: auto;
}

.seg-lg .seg-half {
  padding: calc(var(--u) * 1.6) calc(var(--u) * 4);
  font-size: var(--fs-name);
}

/* 编辑画面在上，刻印方式、图片、「确定」在下。任何尺寸都是这一列，不改成横排，避免把画面和边拉变形。
   内边距上 7u、左右 5u、下 6u，让「确定」和画面落在面板里，角上的 × 不压画面。 */
.imprint-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--u) * 7) calc(var(--u) * 5) calc(var(--u) * 6);
}

/* 编辑画面的宽高比是 1.3（KK.art.imprintStage.aspect），高 = 宽 ÷ 1.3 */
.imprint-stage {
  flex: none;
  width: calc(var(--u) * 74);
  height: calc(var(--u) * 56.9);
}

.imprint-side {
  width: calc(var(--u) * 74);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.imprint-side > * {
  margin-top: calc(var(--u) * 3);
}

.imprint-side .seg-pill {
  width: 100%;
}

.imprint-side .seg-half {
  flex: 1 1 0;
  text-align: center;
}

.imprint-ok {
  align-self: center;
  min-width: calc(var(--u) * 24);
}

.stretch-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.stretch-face svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 馅料上拉面板：贴着馅料条从下往上展开，没有遮罩，不挡皮 ---------- */
.fillbar-arrow {
  transition: transform 0.16s;
}

.fillbar.is-open .fillbar-arrow {
  transform: rotate(180deg);
}

.sheet {
  position: absolute;
  z-index: var(--z-popover);
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8%);
  transition: opacity 0.16s, transform 0.16s, visibility 0s 0.16s;
}

.sheet.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.16s, transform 0.16s, visibility 0s;
}

.sheet-body {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: calc(var(--u) * 4.6) calc(var(--u) * 5.4);
}

.sheet-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sheet-chips {
  display: flex;
  flex: none;
  align-items: flex-start;
}

.sheet-chips .fill-item {
  flex: none;
  width: var(--chip-w);
  margin-bottom: 0;
}

/* 第二行：颜色条和用户图片叠在同一格里，只显示一个，高度不变 */
.sheet-row2 {
  display: grid;
  flex: none;
  margin-top: calc(var(--u) * 1);
}

.sheet-colors,
.sheet-photos {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: var(--sheet-tile);
}

.sheet-row2 .is-off {
  visibility: hidden;
}

.sheet-colors .eraser-chip {
  display: none;
}

.sheet-photos .imgs-grid {
  display: flex;
  flex-wrap: nowrap;
  padding: 2px;
}

.sheet-photos .imgs-cell {
  flex: none;
  margin-right: calc(var(--u) * 2);
}

.sheet-photos .imgtile {
  width: var(--sheet-tile);
  height: var(--sheet-tile);
}

/* ---------- 基础四钮：一行压扁（每钮 44×30、图标 17、整条高 32，任何屏幕都不变，平面无投影） ---------- */
.basicbar {
  position: absolute;
  display: flex;
  height: 32px;
  align-items: center;
}

.basicbar > * + * {
  margin-left: 4px;
}

.bbtn {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 30px;
  padding: 0;
  touch-action: manipulation;
  box-shadow: none;
}

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

.bbtn-ico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
}

.bbtn-ico .icon,
.bbtn-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bbtn.ring-focus:focus-visible {
  border-radius: 10px;
}

/* ---------- 刻印弹窗：图片全是用户自己的；第一格是导入，后面是导入过的图片 ---------- */
.imgs-scroll {
  width: 100%;
  max-height: calc(var(--u) * 36);
  padding: 2px;
}

.imgs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--btn-sm));
  grid-gap: calc(var(--u) * 2.4);
  justify-content: start;
}

.imgs-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imgtile {
  position: relative;
  display: block;
  width: var(--btn-sm);
  height: var(--btn-sm);
  padding: 0;
  border: 0;
  background: none;
  touch-action: manipulation;
}

.imgtile .tile-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.imgtile canvas.tile-pic {
  position: absolute;
  left: 9%;
  top: 9%;
  width: 82%;
  height: 82%;
  border-radius: 8%;
}

.imgtile .tile-ico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  transform: translate(-50%, -50%);
  color: #fbf2e6;
}

.imgtile .tile-ico .icon,
.imgtile .tile-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 选中：底色加深（不用虚线框） */
.imgtile.is-on .tile-sq {
  fill: #7a5538;
}

.imgtile.is-on .tile-sq-edge {
  stroke: #5a3f2a;
}

.tile-face svg {
  display: block;
  width: 100%;
  height: 100%;
}