/* 我活在你的阴影之下：近黑的底、深灰卷轴标题、浅灰圆钮、黑色效果栏。整套只有灰、黑，红只出现在效果格的一个点上。 */
:root {
  color-scheme: only light;
  --bg: #0a0a0a;
  --surface: #2e2e2e;
  --surface-2: #1a1a1a;
  --field: #1d1d1d;
  --bar: #d4d4d4;
  --disc: #bcbcbc;
  --ink: #d6d6d6;
  --ink-2: #a2a2a2;
  --ink-3: #6a6a6a;
  --line: #050505;
  --accent: #bcbcbc;
  --danger: #a51c1c;
  --on-dark: #0d0d0d;
  --radius: calc(var(--u) * 1.4);
  --radius-sm: calc(var(--u) * 1.2);
  --border-w: calc(var(--u) * 0.6);
}

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

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

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

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

/* ---------- 画面框：场景铺满整个窗口；按钮、标题条、效果栏是浮在场景上的一层，不占布局 ---------- */
.frame {
  --m: calc(var(--u) * 3);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #121212;
  color: var(--ink);
}

.surface {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  pointer-events: none;
}

.scene {
  z-index: 0;
}

/* 场景上的拖动、缩放都落在这一层：整个窗口，不可见，在场景之上、按钮之下。 */
.hit {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 这一层永远是居中的一列（竖屏、横屏、电脑都一样）；里面的东西都不挡住场景（只有自己能点）。 */
.ui {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--ux);
  width: var(--uw);
  pointer-events: none;
}

/* 这一层本身不接收点击（空处的拖动要落到下面的触摸层），上面真正要点的面板单独打开。 */
.bar,
.strip,
.compose-pop {
  pointer-events: auto;
}

/* ---------- 标题和语言 ---------- */
.header {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  right: 0;
  height: calc(var(--st) + var(--u) * 15);
  pointer-events: none;
}

.banner {
  position: absolute;
  top: calc(var(--st) + var(--u) * 2.4);
  left: calc(var(--lang-w) + 22px);
  right: calc(var(--lang-w) + 22px);
  height: calc(var(--u) * 11);
}

.banner-text {
  position: absolute;
  left: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-weight: var(--title-weight);
  color: #0b0b0b;
  text-align: center;
}

.banner-line {
  display: block;
  font-size: calc(var(--u) * 5);
  line-height: 1.12;
}

:lang(en) .banner-line {
  font-size: calc(var(--u) * 3.9);
  line-height: 1.1;
}

.lang {
  position: absolute;
  z-index: 6;
  top: calc(var(--st) + 8px);
  right: calc(var(--sr) + 14px);
  display: flex;
  width: var(--lang-w);
  height: var(--lang-h);
  pointer-events: auto;
}

.lang::before {
  content: '';
  position: absolute;
  left: -14px;
  right: -14px;
  top: -10px;
  bottom: -10px;
}

.lang-half {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
  color: #a8a8a8;
  font-size: var(--lang-font);
  font-weight: 900;
  line-height: 1;
}

.lang-half:first-child {
  border-radius: 12px 0 0 12px;
}

.lang-half:last-child {
  border-radius: 0 12px 12px 0;
}

.lang-half.is-on {
  background: #d4d4d4;
  color: #0d0d0d;
}

/* ---------- 圆钮 ---------- */
.rbtn {
  position: relative;
  flex: none;
  width: var(--btn);
  height: var(--btn);
  border-radius: 50%;
  pointer-events: auto;
}

.rbtn[disabled] {
  cursor: default;
}

.basic {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: calc(var(--st) + var(--u) * 14.8);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* 横扁钮：第二排居中的四个基础钮，比圆钮小一圈；点击区用伪元素扩到 44 像素高。 */
.fbtn {
  position: relative;
  flex: none;
  width: var(--fw);
  height: var(--fh);
  border-radius: calc(var(--fh) / 2);
  pointer-events: auto;
}

.fbtn::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: calc((var(--fh) - 44px) / 2);
  bottom: calc((var(--fh) - 44px) / 2);
}

.fbtn[disabled] {
  cursor: default;
}

.basic .fbtn + .fbtn {
  margin-left: 8px;
}

.tools {
  position: absolute;
  z-index: 4;
  left: var(--m);
  top: calc(var(--st) + var(--u) * 14.8 + var(--fh) + var(--tool-gap));
}

.tool-wrap {
  position: relative;
  width: var(--btn);
  height: var(--btn);
}

.tool-wrap + .tool-wrap {
  margin-top: var(--tool-gap);
}

/* ---------- 构图小面板 ---------- */
.compose-pop {
  position: absolute;
  z-index: 6;
  left: calc(var(--btn) + var(--u) * 2.6);
  top: calc(var(--btn) / 2 - var(--u) * 12.4);
  padding: calc(var(--u) * 2.4);
}

.compose-row {
  position: relative;
  display: flex;
}

.preset {
  position: relative;
  flex: none;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 20);
}

.preset + .preset {
  margin-left: calc(var(--u) * 2);
}

/* ---------- 底部效果栏：贴近安全区下沿；最前面是固定的叉，后面左右滑动 ---------- */
.bar {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: var(--bar-w);
  bottom: calc(var(--sb) + var(--gap));
  height: var(--bar-h);
  display: flex;
  align-items: center;
}

.bar-pin {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: calc(var(--u) * 2.4);
  padding-right: calc(var(--u) * 1.8);
}

.bar-scroll {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.bar-scroll::after {
  content: '';
  flex: none;
  width: calc(var(--u) * 2);
  height: 1px;
}

.bar-sep {
  position: relative;
  flex: none;
  width: calc(var(--u) * 0.9);
  height: calc(var(--tile) * 0.62);
  margin-bottom: calc(var(--name-h) + var(--u) * 0.6);
  border-radius: calc(var(--u) * 0.5);
  background: #2e2e2e;
}

.bar > .bar-sep {
  margin-right: calc(var(--u) * 1.8);
}

.bar-scroll > * + * {
  margin-left: var(--e-gap);
}

.ecell {
  position: relative;
  flex: none;
  width: var(--tile);
  height: calc(var(--tile) + var(--name-h) + var(--u) * 0.6);
}

.etile {
  position: relative;
  display: block;
  width: var(--tile);
  height: var(--tile);
  border-radius: calc(var(--u) * 2);
}

.etile.is-open {
  outline: calc(var(--u) * 0.5) solid #e4e4e4;
}

/* 图案下面写着名字：单行、居中，比图案格略宽一点但不超过相邻的间隙。 */
.ename {
  position: absolute;
  left: calc(var(--u) * -1);
  right: calc(var(--u) * -1);
  bottom: 0;
  height: var(--name-h);
  font-size: var(--name-font);
  font-weight: 900;
  line-height: var(--name-h);
  text-align: center;
  white-space: nowrap;
  color: #d8d8d8;
  pointer-events: none;
}

.ecell.is-on .ename {
  color: #ffffff;
}

/* 选中的效果右上角的小 ×：视觉 18 像素，点击区伪元素扩到约 32 像素（只向格子内侧和相邻间隙里扩）。 */
.ecell-x {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  z-index: 1;
}

.ecell-x::before {
  content: '';
  position: absolute;
  top: -8px;
  right: -4px;
  left: -10px;
  bottom: -10px;
}

.strip {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: var(--bar-w);
  bottom: calc(var(--sb) + var(--gap) * 2 + var(--bar-h));
  height: var(--strip-h);
}

.strip-row {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 2.6);
}

.stile {
  position: relative;
  flex: none;
  width: var(--stile);
  height: var(--stile);
}

.stile[disabled] {
  cursor: default;
}

.stile + .stile {
  margin-left: calc(var(--u) * 2);
}

.slider {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--stile);
  margin-left: calc(var(--u) * 3);
}

/* ---------- 弹窗：和页面同一套（黑粗边、深灰底、浅灰按钮） ---------- */
.modal-overlay {
  background: rgba(5, 5, 5, 0.74);
}

.modal {
  width: calc(var(--u) * 88);
  border: calc(var(--u) * 0.9) solid #050505;
  border-radius: calc(var(--u) * 1.4);
  background: #2e2e2e;
  color: #d6d6d6;
}

/* 标题行不为 × 留位；× 离面板右上角约 6 像素（弹窗边框 + 这里的偏移）。 */
.modal-head {
  padding-right: var(--gap-3);
}

.modal-close {
  --close-off: calc(6px - var(--u) * 0.9);
  top: var(--close-off);
  right: var(--close-off);
  color: #bcbcbc;
}

/* 点击区：伪元素只到弹窗内边距框的边（再往外点不到），向左下扩到总共 44 像素。 */
.modal-close::before {
  top: calc(var(--close-off) * -1);
  right: calc(var(--close-off) * -1);
  left: calc(var(--close-off) - 24px);
  bottom: calc(var(--close-off) - 24px);
}

.modal-foot,
.credit {
  border-top-color: #1a1a1a;
}

.modal .btn {
  border: calc(var(--u) * 0.7) solid #050505;
  border-radius: calc(var(--u) * 1.4);
  background: #d4d4d4;
  color: #0d0d0d;
  font-weight: 900;
}

.modal .btn-danger {
  background: #d4d4d4;
  color: #0d0d0d;
}

.btn-format {
  min-height: calc(var(--u) * 14);
  font-size: calc(var(--u) * 4.4);
}

.credit-link {
  color: #d6d6d6;
}