/* 哐哐碎纸机：页面样式。尺寸一律是 --u（中心一列的列宽的百分之一）的倍数。
   颜色大多是 --ground / --band / --accent / --body 等变量，由 js/shell/shell.js 的 setPalette 按当前配色写进来。 */
:root {
  --u: 3.9px;
  --btn: 52px;
  --tile: 44px;
  --pill-h: 46px;
  --band-h: calc(var(--u) * 15);
  --cell-w: calc(var(--tile) + var(--u) * 6);
  --bar-h: calc(var(--tile) + var(--u) * 14);
  --dock-b: calc(var(--bar-h) + var(--u) * 3);
  --rb-h: 44px;
  --rb-vis: 30px;
  --rb-w: 58px;
  --buttons-top: calc(var(--band-h) + var(--u) * 2);
  --stage-top: calc(var(--buttons-top) + var(--rb-h) + var(--u) * 2);

  --ground: #dddbdb;
  --band: #8a4044;
  --accent: #732d2f;
  --body: #474747;
  --title: #b0b0b0;
  --icon: #b0b0b0;
  --ring: #732d2f;

  --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: var(--ground);
  color: var(--ink);
}

#app {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.side-bg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-size: 200px 200px;
}

.frame {
  position: absolute;
  overflow: hidden;
}

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

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

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

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

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

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

/* 中 / EN：扁的一小块，两半共用外框，选中的一半填色；按钮本身的触控区是 44 像素高，看得见的框只有 26 左右。 */
.lang-seg {
  position: absolute;
  right: calc(var(--u) * 2.4);
  top: calc((var(--band-h) - 44px) / 2);
  display: flex;
  align-items: center;
  height: 44px;
  background: transparent;
  color: var(--title);
}

.lang-box {
  display: flex;
  align-items: stretch;
  height: var(--lang-h);
  border: calc(var(--u) * 0.4) solid var(--title);
  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(--lang-fs);
  line-height: 1;
}

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

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

/* 换配色钮：在标题栏左侧，和右侧的中 / EN 对称；形状和基础四钮一样（压扁的小圆角条、点击区 44 高）。 */
.round-pal {
  position: absolute;
  left: calc(var(--u) * 2.4);
  top: calc((var(--band-h) - var(--rb-h)) / 2);
  margin: 0;
}

/* 基础四钮：压扁的小圆角条，没有阴影；点击区 44 高，看得见的形状只有 --rb-vis 高（画在上下缩进的画布里），图标不超过形状高的 0.6 倍。 */
.buttons {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--buttons-top);
  display: flex;
  justify-content: center;
}

.round {
  flex: none;
  width: var(--rb-w);
  height: var(--rb-h);
  color: var(--icon);
  background-color: transparent;
}

.buttons .round {
  position: relative;
  margin-left: calc(var(--u) * 0.9);
  margin-right: calc(var(--u) * 0.9);
}

.round .icon {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--rb-vis) * 0.58);
  height: calc(var(--rb-vis) * 0.58);
  margin-left: calc(var(--rb-vis) * -0.29);
  margin-top: calc(var(--rb-vis) * -0.29);
}

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

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

/* 舞台在标题栏和底部款式之间，左右留一列里的边。碎完的纸片留在这一层里，可以拖动。 */
.stage {
  position: absolute;
  left: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  top: var(--stage-top);
  bottom: var(--bar-h);
}

.has-hint .stage {
  bottom: calc(var(--bar-h) + 44px + var(--u) * 1.2);
}

.machine {
  position: absolute;
  z-index: 2;
  background-color: transparent;
}

.machine-canvas,
.paper-layer {
  display: block;
  pointer-events: none;
}

.paper-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.paper-layer.is-loose {
  z-index: 4;
}

.fall {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 「投入图片」提示在没有纸的时候出现，浮在底部款式上面，纯文字，没有底色和框。 */
.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--bar-h) + var(--u) * 1.2);
  height: 44px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background-color: transparent;
}

.has-hint .dock {
  display: flex;
}

.pill {
  position: relative;
  flex: none;
  height: 44px;
  padding-left: calc(var(--u) * 3);
  padding-right: calc(var(--u) * 3);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background-color: transparent;
}

.pill-text {
  position: relative;
  display: block;
  font-size: calc(var(--u) * 5);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: var(--ink-2);
  text-align: center;
}

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

/* 底部：一排碎纸机款式，方块下面写名字；选中的托起、底色提亮、右上角对勾角标（画在方块的画布里）。 */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--u) * 1.6);
}

.row {
  position: relative;
  display: flex;
  justify-content: center;
}

.cell {
  flex: none;
  width: var(--cell-w);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cell-label {
  display: block;
  margin-top: calc(var(--u) * 1);
  max-width: 100%;
  font-size: var(--label-fs);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
  color: var(--on-dark);
}

html[lang="en"] .cell-label {
  font-size: var(--label-fs-en);
}

.tile {
  position: relative;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  background-color: transparent;
}

.tile.is-on {
  transform: translateY(calc(var(--u) * -0.9));
}

/* 碎法、配色的弹窗：三列带名字的方块，内容多了可以下滚。 */
.modal-choice .modal-body {
  padding-top: calc(var(--u) * 1.5);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  row-gap: calc(var(--u) * 3.2);
  column-gap: calc(var(--u) * 1.5);
}

.choice-grid .cell {
  width: 100%;
}

.choice-grid .tile-big {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
  min-width: 52px;
  min-height: 52px;
}

.choice-grid .cell-label {
  color: var(--ink);
  font-size: var(--choice-fs);
}

html[lang="en"] .choice-grid .cell-label {
  font-size: var(--choice-fs-en);
}

/* 弹窗、悬浮层：和页面同一套，纸色的一块，边上一圈深色窄边，边角是手剪的。 */
.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 var(--surface-edge);
  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-close {
  color: var(--ink-2);
}

.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,
.btn-danger {
  background: var(--band);
  border-color: var(--band);
  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(--band);
}

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

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