/* 页面结构、舞台、浮着的顶部和底部、各面板的样式。
   舞台（布面）铺满整个画面，顶部两排（布面、标题、语言 / 基础五钮）和底部三排操作区都是浮在舞台上的布框（.float-ui），框外手势直接到舞台。
   布框的底是亚麻织纹加一圈平针缝线（--weave、--frame-*、--stitch-*，由 panels/skin.js 用绣品同一套织布和绣线画出来）。
   尺寸一律是 --u 的倍数（--u 由 KK.layout 按窗口算好）；基础五钮是固定像素，整排永远一行；点按区至少 40 像素。
   弹窗、悬浮层、提示条共用的结构在 ui.css，这里只换成刺绣的材质和配色。 */

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

/* ---------- 画面框 ---------- */
.frame {
  position: absolute;
  overflow: hidden;
  visibility: hidden;
  background-color: var(--stage);
}

.frame.is-ready {
  visibility: visible;
}

/* 摆放图案时顶部和底部浮着的块只看不点。 */
.frame.is-placing .float-ui {
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- 浮着的布框 ---------- */
.float-top,
.float-bottom {
  position: absolute;
  z-index: var(--z-float);
  left: 0;
  right: 0;
  pointer-events: none;
}

/* 布框：酒红底、亚麻织纹、一圈浅色平针缝线（缝线盖在内容上面，不占位置，所以内边距要留出缝线的宽度）。 */
.float-ui {
  position: relative;
  pointer-events: auto;
  padding: var(--float-pad);
  border-radius: var(--frame-w, 10px);
  background-color: var(--olive);
  background-image: var(--weave, none);
  background-size: var(--weave-size, auto);
  color: var(--cream);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.float-ui::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: var(--frame-w, 10px) solid transparent;
  border-image-source: var(--frame-light, none);
  border-image-slice: var(--frame-slice, 10);
  border-image-width: var(--frame-w, 10px);
  border-image-repeat: round;
  pointer-events: none;
}

/* ---------- 顶部：布面 / 标题 / 语言，下面一排基础五钮 ---------- */
.float-top {
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--gap-2) + env(safe-area-inset-top, 0px)) var(--gap-2) 0;
}

/* 一排块：内容放不下时整排等比缩小（见 ui/fitRow.js），块和块之间永远留着间隙。 */
.fit-row {
  width: 100%;
}

.fit-row + .fit-row {
  margin-top: var(--gap-1);
}

/* 标题永远在正中：左右两列同宽，布面钮贴左、语言钮贴右。 */
.top-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--gap-2);
}

.head-fabric {
  justify-self: start;
}

.head-lang {
  justify-self: end;
}

.basics {
  display: flex;
  justify-content: center;
  height: 34px;
}

.basics .tool + .tool {
  margin-left: 6px;
}

/* 标题：深色布条，米色的字，两侧各一段走线。 */
.top-band {
  background-color: var(--maroon-deep);
  padding: var(--gap-1) calc(var(--float-pad) + var(--gap-3));
}

.title {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--cream);
  font-size: calc(var(--u) * 5.8);
  font-weight: var(--title-weight);
  line-height: 1.3;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 1px 1px 0 var(--maroon), 2px 2px 0 rgba(0, 0, 0, 0.25);
}

.title::before,
.title::after {
  content: '';
  display: block;
  flex: none;
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 1.2);
  border-top: 2px dashed var(--accent);
}

.title::before {
  margin-right: calc(var(--u) * 1.4);
}

.title::after {
  margin-left: calc(var(--u) * 1.4);
}

@media (max-width: 359px) {
  .title::before,
  .title::after {
    display: none;
  }
}

/* 基础钮：固定 44 × 34 的扁板，图标 20；点击区用透明伪元素扩到 44 像素高；里面一圈平针缝线（和布框同一套绣线图）。 */
.tool {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  border: 2px solid var(--maroon-deep);
  border-radius: calc(var(--frame-w, 10px) + 2px);
  background-color: var(--olive-light);
  color: var(--cream);
}

.tool::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: var(--frame-w, 10px) solid transparent;
  border-image-source: var(--frame-light, none);
  border-image-slice: var(--frame-slice, 10);
  border-image-width: var(--frame-w, 10px);
  border-image-repeat: round;
  pointer-events: none;
}

.tool::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -5px;
  bottom: -5px;
}

.tool:disabled {
  opacity: 0.4;
  cursor: default;
}

.tool .icon,
.tool .icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* 选了排线方向时顶部下面的一句提示：浮着，不占位置，不挡手势。 */
.stage-hint {
  position: absolute;
  left: 50%;
  top: 100%;
  width: max-content;
  max-width: calc(100% - var(--u) * 6);
  margin: var(--gap-1) 0 0;
  padding: calc(var(--u) * 1.4) calc(var(--u) * 3);
  border: var(--border-w) solid var(--maroon-deep);
  border-radius: 999px;
  background-color: var(--cream);
  color: var(--maroon);
  font-size: var(--text-small);
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.stage-hint.is-shown {
  opacity: 1;
}

/* ---------- 舞台：铺满整个画面 ---------- */
.stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background-color: var(--stage);
  background-image: var(--weave, none);
  background-size: var(--weave-size, auto);
  touch-action: none;
  cursor: crosshair;
}

.stage.is-space {
  cursor: grab;
}

.stage.is-panning {
  cursor: grabbing;
}

/* 布面画布：位置和缩放全由脚本用 transform 写，原点在左上角。 */
.board {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* 跟手预览：套索圈、涂鸦笔迹、排线方向线。 */
.overlay {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* ---------- 摆放图案：盖在舞台上，按住任意位置拖动 ----------
   摆放层不设层级，三个钮（--z-knob）高于页面上任何东西（包括下面的设置面板），浮着的布框、提示条、悬浮层都盖不住它们。 */
.place {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.place-cv {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.place-knob {
  position: absolute;
  z-index: var(--z-knob);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--maroon-deep);
  border-radius: 50%;
  background-color: var(--cream);
  color: var(--maroon);
  touch-action: none;
}

.place-knob::before {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: -6px;
  bottom: -6px;
  border-radius: 50%;
}

.place-knob .icon,
.place-knob .icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.place-knob-ok {
  background-color: var(--olive);
  color: var(--cream);
}

/* 摆放时的设置面板：浮在图上、贴着舞台底边居中，和弹窗同一套布面材质；底部操作区这时整块收起，面板占它的位置。
   两页叠在同一格里，只显示当前页，面板高度不随页变。 */
.place-panel {
  position: absolute;
  z-index: var(--z-float);
  left: 50%;
  bottom: calc(var(--gap-2) + env(safe-area-inset-bottom, 0px));
  width: calc(var(--u) * 92);
  max-width: calc(100% - var(--gap-2) * 2);
  padding: calc(var(--frame-w, 10px) + 2px);
  touch-action: manipulation;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* 两页的页签：和同组内容一样框起来。 */
.place-panel > .seg {
  margin-bottom: var(--gap-1);
  padding: 2px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--field);
  background-image: var(--weave-fine, none);
  background-size: var(--weave-fine-size, auto);
}

.place-pages {
  display: grid;
}

/* 面板压得很紧，尽量少盖住布面：同组外框的内边距收小，每行压扁，分段钮的名字和选项排成一行，
   两个开关并排一行；几行拉条的名字同宽，拉条左端对齐。 */
.place-panel .group-box {
  padding: 2px var(--gap-2);
}

.place-panel .row {
  min-height: 34px;
  font-size: var(--text-small);
}

.place-panel .row + .row,
.place-panel .row-pair + .row {
  margin-top: 2px;
}

.place-panel .row-seg {
  flex-direction: row;
  align-items: center;
}

.place-panel .row-seg .row-label {
  flex: none;
  margin-right: var(--gap-2);
  min-width: 7em;
  white-space: nowrap;
}

.place-panel .row-seg .seg {
  flex: 1 1 auto;
  min-width: 0;
}

.place-panel .seg-btn {
  min-height: 30px;
  padding: 2px 0;
}

.place-panel .row-pair {
  display: flex;
}

.place-panel .row-pair .row {
  flex: 1 1 0;
  min-width: 0;
}

.place-panel .row-pair .row + .row {
  margin-top: 0;
  margin-left: var(--gap-3);
}

.place-panel .row-slider.is-inline .row-label {
  min-width: 7em;
}

.place-page {
  grid-area: 1 / 1;
  visibility: hidden;
}

.place-page.is-on {
  visibility: visible;
}

.frame.is-placing .float-bottom {
  visibility: hidden;
}

/* ---------- 底部操作区：三排浮着的布框，排与排之间留空，点按区不重叠 ---------- */
.float-bottom {
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gap-2) calc(var(--gap-2) + env(safe-area-inset-bottom, 0px));
}

.hud-row {
  display: flex;
  justify-content: space-between;
}

.hud-tools .hud-box + .hud-box {
  margin-left: var(--gap-2);
}

.fit-row + .hud-row,
.hud-row + .hud-row {
  margin-top: var(--gap-1);
}

.hud-box {
  flex: 1 1 0;
  min-width: 0;
}

/* 第一排：左右两个框各按内容宽，贴在两边。 */
.hud-tools .hud-box {
  flex: none;
}

.hud-colors {
  padding-top: 0;
  padding-bottom: 0;
}

/* 粗细这一排：名字和数字框离缝线远一点，不压在缝线上。 */
.hud-box .row-slider.is-inline {
  padding: 0 var(--gap-1);
}

/* 颜色条的色块缩小，点按区用透明的外延撑到 44 像素高。 */
.hud .color-chip {
  width: 34px;
  height: 34px;
}

.hud .color-chip::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: -5px;
  bottom: -5px;
}

.hud .color-list {
  padding-top: calc(var(--gap-1) + 2px);
  padding-bottom: calc(var(--gap-1) + 2px);
}

.hud .add-chip {
  font-size: calc(var(--u) * 5);
}
/* 随机：四色拼块，上面一颗骰子。 */
.random-chip {
  background-color: #d94f45;
  background-image: linear-gradient(135deg, #d94f45 0%, #d94f45 25%, #f2c14e 25%, #f2c14e 50%, #3f8a5a 50%, #3f8a5a 75%, #4f6fb5 75%, #4f6fb5 100%);
  color: var(--cream);
}

.random-chip .icon,
.random-chip .icon svg {
  display: block;
  width: 60%;
  height: 60%;
}

.random-chip .icon {
  -webkit-filter: drop-shadow(0 0 2px rgba(72, 30, 34, 0.9));
  filter: drop-shadow(0 0 2px rgba(72, 30, 34, 0.9));
}

/* ---------- 同组内容的外框（弹窗、悬浮层里用）：奶白底、细棉布织纹 ---------- */
.group-box {
  padding: var(--gap-2);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--field);
  background-image: var(--weave-fine, none);
  background-size: var(--weave-fine-size, auto);
}

.group-box + .group-box {
  margin-top: var(--gap-2);
}
/* ---------- 分段钮：n 选一和一组选项 ---------- */
.seg {
  display: flex;
}

.seg-btn {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 40px;
  padding: var(--gap-1) 0;
  border-radius: calc(var(--u) * 1.2);
  color: inherit;
  white-space: nowrap;
}

.seg-btn + .seg-btn {
  margin-left: var(--gap-1);
}

.seg-btn .icon,
.seg-btn .icon svg {
  display: block;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
}

.seg-cap {
  margin-top: calc(var(--u) * 0.4);
  font-size: calc(var(--u) * 2.7);
  line-height: 1.2;
}

/* 压扁的分段钮：图标和名字排成一行，高 34 像素；点按区用透明的外延撑到 44 像素高，上下两排之间的外延不重叠。 */
.seg-flat .seg-btn {
  flex: none;
  flex-direction: row;
  min-height: 34px;
  padding: 0 var(--gap-2);
}

.seg-flat .seg-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  bottom: -5px;
}

.seg-flat .seg-btn .icon,
.seg-flat .seg-btn .icon svg {
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
}

.seg-flat .seg-cap {
  margin: 0 0 0 var(--gap-1);
  font-size: calc(var(--u) * 3);
}

/* 语言：中 / EN 二选一，文字居中，同样压扁。 */
.lang-seg .seg-btn {
  flex: none;
  width: calc(var(--u) * 9);
  min-height: 34px;
  padding: 0;
  font-size: calc(var(--u) * 3.4);
  font-weight: 900;
  line-height: 1;
}

.lang-seg .seg-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  bottom: -5px;
}

.seg-btn.is-on {
  background-color: var(--cream);
  color: var(--maroon);
}

.seg-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- 面板里的一行行控件 ---------- */
.row {
  display: flex;
  align-items: center;
  min-height: var(--touch);
}

.row + .row {
  margin-top: var(--gap-1);
}

.row.is-off {
  opacity: 0.45;
}

.row-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.5;
}

/* 分段钮行：名字一行，下面是分段钮。 */
.row-seg {
  flex-direction: column;
  align-items: stretch;
}

.row-seg .row-label {
  flex: none;
}

/* 拉条行：名字一行，下面是拉条和数字框。 */
.row-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 20);
  align-items: center;
}

.row-slider .row-label {
  grid-column: 1 / 3;
}

.row-slider .num-box {
  display: flex;
  align-items: center;
  margin-left: var(--gap-2);
}

/* 一行的拉条（浮在底部的粗细）：名字、拉条、数字框排成一行，整行压扁。 */
.row-slider.is-inline {
  grid-template-columns: auto minmax(0, 1fr) calc(var(--u) * 19);
  min-height: 36px;
}

.row-slider.is-inline .row-label {
  grid-column: auto;
  margin-right: var(--gap-2);
  font-size: var(--text-small);
  white-space: nowrap;
}

.row-slider.is-inline .num {
  min-height: 32px;
  color: var(--ink);
}

.row-unit {
  flex: none;
  margin-left: var(--gap-1);
  color: var(--ink-2);
  font-size: var(--text-small);
}

.range {
  background-image: linear-gradient(to right, var(--olive-light) 0, var(--olive-light) var(--fill, 0%), transparent var(--fill, 0%));
}

.range:disabled {
  opacity: 0.6;
}

.num {
  min-width: 0;
}

.num:disabled {
  opacity: 0.6;
}

/* 开关 */
.switch {
  position: relative;
  flex: none;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 7);
  border: var(--border-w) solid var(--line);
  border-radius: 999px;
  background-color: var(--surface-2);
}

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

.switch-knob {
  position: absolute;
  left: calc(var(--u) * 0.6);
  top: calc(var(--u) * 0.6);
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  border-radius: 50%;
  background-color: var(--maroon);
  -webkit-transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
}

.switch.is-on {
  background-color: var(--olive-light);
}

.switch.is-on .switch-knob {
  background-color: var(--cream);
  -webkit-transform: translateX(calc(var(--u) * 6));
  transform: translateX(calc(var(--u) * 6));
}

.switch:disabled {
  opacity: 0.6;
  cursor: default;
}

.row-color .color-button {
  flex: none;
}

/* ---------- 针脚、布面的悬浮气泡 ---------- */
.thread-panel,
.bg-panel {
  width: calc(var(--u) * 78);
  max-width: 100%;
}

.bg-panel .fab-list + .row {
  margin-top: var(--gap-2);
}

/* ---------- 布面气泡 ---------- */
.fab-list {
  display: flex;
}

.fab-tile {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--gap-1);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--cream-2);
  color: var(--ink);
}

.fab-tile + .fab-tile {
  margin-left: var(--gap-1);
}

.fab-tile.is-on {
  border-color: var(--maroon);
  background-color: var(--maroon);
  color: var(--cream);
}

.fab-cv {
  width: 100%;
  height: auto;
  border-radius: calc(var(--u) * 0.8);
}

.fab-name {
  display: block;
  margin-top: var(--gap-1);
  font-size: calc(var(--u) * 2.9);
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

/* ---------- 弹窗、悬浮层、提示条：同一套布面材质（奶白底、细棉布织纹、一圈深色平针缝线） ---------- */
.modal,
.popover,
.place-panel {
  border: var(--border-w) solid var(--maroon-deep);
  border-radius: calc(var(--frame-w, 10px) + var(--border-w));
  background-color: var(--surface);
  background-image: var(--weave-fine, none);
  background-size: var(--weave-fine-size, auto);
}

.modal::after,
.popover::after,
.place-panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: var(--frame-w, 10px) solid transparent;
  border-image-source: var(--frame-dark, none);
  border-image-slice: var(--frame-slice, 10);
  border-image-width: var(--frame-w, 10px);
  border-image-repeat: round;
  pointer-events: none;
}
.modal-overlay {
  background-color: rgba(58, 24, 28, 0.7);
}

.modal-head,
.modal-foot {
  border-color: var(--surface-2);
}

.btn {
  position: relative;
  border-color: var(--maroon-deep);
  border-radius: calc(var(--frame-w, 10px) + var(--border-w));
  background-color: var(--cream-2);
  color: var(--maroon);
}

/* 文字按钮里面一圈平针缝线：浅底用深线，深底（主要、危险）用浅线。 */
.btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: var(--frame-w, 10px) solid transparent;
  border-image-source: var(--frame-dark, none);
  border-image-slice: var(--frame-slice, 10);
  border-image-width: var(--frame-w, 10px);
  border-image-repeat: round;
  pointer-events: none;
}

.btn-primary::after,
.btn-danger::after {
  border-image-source: var(--frame-light, none);
}

.btn-primary {
  border-color: var(--maroon-deep);
  background-color: var(--maroon);
  color: var(--cream);
}

.btn-danger {
  border-color: var(--maroon-deep);
  background-color: var(--danger);
  color: var(--cream);
}

.toast {
  top: auto;
  bottom: var(--toast-bottom, var(--gap-3));
  border: var(--border-w) solid var(--maroon-deep);
  background-color: var(--maroon);
}

.color-chip.is-on {
  box-shadow: 0 0 0 2px var(--olive-light), 0 0 0 4px var(--cream);
}

button:focus-visible {
  box-shadow: 0 0 0 var(--border-w) var(--accent);
}