/* 全新出土：项目自己的样式。尺寸用 --u（画面列宽的百分之一）；基础五钮固定 44 x 30、图标 16。 */
:root {
  /* 气泡要盖在弹窗上面 */
  --z-popover: 60;
  /* 场景是土色；弹窗和标签页是平涂的浅纸色，字是深棕，不描边 */
  --bg: #c0a28c;
  --surface: #efe3d6;
  --surface-2: #e3d2c1;
  --surface-3: #d3baa4;
  --field: #e3d2c1;
  --bar: #63301c;
  --ink: #4a2a1c;
  --ink-2: #7a5846;
  --ink-3: #8a6a58;
  --line: transparent;
  --accent: #e0a574;
  --danger: #a8362a;
  --on-dark: #fbeee2;
  /* 背包是一本摊开的书：土红封面，两页纸 */
  --cover: #9a5238;
  --paper: #efe3d6;
  --paper-edge: #e3d2c1;
  --paper-fold: #e3d2c1;
  --paper-cell: #e3d2c1;
  --paper-cell-on: #d3baa4;
  --paper-ink: #4a2a1c;
  --fs-name: 14px;
  --fs-small: 12px;
}

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;
}

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

.page-body,
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page {
  touch-action: none;
}

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

/* ---------- 标题牌 ---------- */
.sign {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign-title {
  margin: 0;
  font-weight: var(--title-weight);
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: #fdf1e4;
  white-space: nowrap;
}

/* 中 / EN：小而扁的分段钮，在标题牌右端里面，不单占一行 */
.lang {
  position: absolute;
  right: calc(var(--u) * 1.2);
  top: 50%;
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
  padding: 0;
}

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

.lang-half {
  display: block;
  padding: calc(var(--u) * 0.2) calc(var(--u) * 1.1);
  font-size: var(--fs-lang);
  line-height: 1.2;
  color: #fdf1e4;
}

.lang-half.is-on {
  box-shadow: inset 0 0 0 var(--lang-bd) #fdf1e4;
  border-radius: calc(var(--u) * 2);
}

/* ---------- 基础五钮：压扁的小钮，平涂无阴影（照镜面模拟器），深棕底在浅土色上边缘清楚 ---------- */
.bar {
  position: absolute;
  z-index: 2;
}

.bbtn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: #63301c;
  color: var(--on-dark);
  touch-action: manipulation;
}

.bbtn[disabled] {
  opacity: 0.35;
}

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

.bbtn .icon,
.bbtn svg {
  display: block;
  width: 16px;
  height: 16px;
}

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

/* ---------- 图案：画布铺满外框，外框的尺寸就是最终大小 ---------- */
.art {
  position: relative;
  display: block;
  box-sizing: border-box;
}

.art canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.page > .art-block {
  position: absolute;
}

.art-block canvas {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* ---------- 工具包：三格套子，选中的一格浅一档 ---------- */
.tray {
  position: absolute;
  z-index: 2;
}

.tool {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  border: 2px solid transparent;
  border-radius: calc(var(--u) * 2.6);
  background: transparent;
  touch-action: manipulation;
}

.tool.is-on {
  border-color: #e6d9cf;
}

.tool .tool-new {
  left: auto;
  right: calc(var(--u) * 0.6);
  top: calc(var(--u) * 0.6);
}

.tool .art {
  position: absolute;
}

.tool-label {
  position: absolute;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--fs-small);
  color: #e6d9cf;
  pointer-events: none;
}

/* ---------- 弹窗（叠在主页上） ---------- */
.modal-overlay {
  --u: var(--mu);
  background: rgba(74, 42, 28, 0.45);
}

.modal {
  border: 0;
  border-radius: calc(var(--u) * 2.4);
  background: var(--surface);
}

.btn {
  border: 0;
  background: #e3d2c1;
  color: #4a2a1c;
}

.btn-primary {
  background: #a74f2d;
  color: #fff4ea;
}

.btn-danger {
  background: #f1c4b8;
  color: #8a1f12;
}

.modal-title {
  font-weight: var(--title-weight);
}

.m-book {
  width: calc(var(--u) * 92);
  min-height: calc(var(--u) * 96);
  background: var(--cover);
}

.m-detail {
  width: calc(var(--u) * 88);
}

/* 详情：沙粒的浮层铺满内容区 */
.m-detail .modal-body {
  position: relative;
}

/* 背包：头部一行是标签、加号按钮和 ×，下面的格子区自己滚 */
.m-book .modal-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.book {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.m-book .modal-head {
  padding-left: 0;
}

.m-book .modal-close {
  color: var(--on-dark);
}

.book-head {
  --ink: #fbeee2;
  --ink-2: #ebd3c2;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}

/* 一排三个标签放不下时这一排左右滑动，加号按钮和 × 是实心底的固定列 */
.tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: calc(var(--u) * 2);
  overflow-x: auto;
  overscroll-behavior: contain;
  touch-action: pan-x;
  clip-path: inset(0);
}

.tab {
  flex: none;
  box-sizing: border-box;
  min-height: 44px;
  margin-right: calc(var(--u) * 0.6);
  padding: 0 calc(var(--u) * 1.8);
  border: 2px solid transparent;
  border-radius: calc(var(--u) * 2);
  font-size: var(--fs-name);
  color: var(--ink-2);
  white-space: nowrap;
}

.tab.is-on {
  border-color: var(--on-dark);
  color: var(--on-dark);
}

.book-add {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  padding: 0 calc(var(--u) * 0.8);
  background: var(--cover);
  font-size: var(--fs-small);
  color: var(--ink);
  white-space: nowrap;
}

.book-add-ico {
  width: 14px;
  height: 14px;
  margin-right: 3px;
}

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

/* 量书的高度时临时挂着的一份放满的页：脱离排版、看不见 */
.book-measure {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

.sizer-art {
  display: block;
}

.cell-name-short {
  white-space: nowrap;
}

.book-spread {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 calc(var(--u) * 2) calc(var(--u) * 1.4);
  border-left: calc(var(--u) * 0.8) solid var(--paper-edge);
  border-right: calc(var(--u) * 0.8) solid var(--paper-edge);
  border-bottom: calc(var(--u) * 0.6) solid var(--paper-edge);
  border-radius: calc(var(--u) * 1.2);
  background: var(--paper);
  overflow: hidden;
}

/* 书脊：两页中间一条深一档的纸色 */
.book-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(var(--u) * 2.4);
  margin-left: calc(var(--u) * -1.2);
  background: var(--paper-fold);
  z-index: 2;
  pointer-events: none;
}

.book-pages {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  perspective: 1400px;
}

/* 翻页：新进来的一页从书脊一侧掀开落下 */
@keyframes book-turn-next {
  from { transform: rotateY(-62deg); transform-origin: left center; opacity: 0.35; }
  to { transform: rotateY(0); transform-origin: left center; opacity: 1; }
}

@keyframes book-turn-prev {
  from { transform: rotateY(62deg); transform-origin: right center; opacity: 0.35; }
  to { transform: rotateY(0); transform-origin: right center; opacity: 1; }
}

.book-pages.flip-next .book-page-r {
  animation: book-turn-next 0.34s ease-out;
}

.book-pages.flip-prev .book-page-l {
  animation: book-turn-prev 0.34s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .book-pages.flip-next .book-page-r,
  .book-pages.flip-prev .book-page-l {
    animation: none;
  }
}

.book-page {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  grid-gap: calc(var(--u) * 1.2);
  align-content: start;
  justify-items: center;
  padding: calc(var(--u) * 2) calc(var(--u) * 1.2);
  backface-visibility: hidden;
}

/* 三个标签的页都一样：底下留出翻页条的位置，翻页条压在这一页的下沿 */
.book-page-own {
  position: relative;
  padding-bottom: calc(44px + var(--u) * 2.4);
}

.book-page-own.is-turning.book-page-r {
  animation: book-turn-next 0.34s ease-out;
}

.book-page-own.is-turning.book-page-l {
  animation: book-turn-prev 0.34s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .book-page-own.is-turning {
    animation: none;
  }
}

.book-pager {
  position: absolute;
  bottom: calc(var(--u) * 1.2);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-page-l .book-pager {
  right: calc(var(--u) * 1.2);
}

.book-page-r .book-pager {
  left: calc(var(--u) * 1.2);
}

.book-pager-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--on-dark);
}

.book-pager-btn[disabled] {
  opacity: 0.28;
}

.book-pager-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bar);
}

.book-pager-dot .icon,
.book-pager-dot svg {
  display: block;
  width: 16px;
  height: 16px;
}

.book-pager-num {
  min-width: calc(var(--u) * 7);
  margin: 0 calc(var(--u) * 0.6);
  font-size: var(--fs-small);
  color: var(--paper-ink);
  text-align: center;
}

.book-page-l {
  padding-right: calc(var(--u) * 2.4);
}

.book-page-r {
  padding-left: calc(var(--u) * 2.4);
}

.m-book .cell-box {
  background: var(--paper-cell);
}

.m-book .cell-name {
  color: var(--paper-ink);
}

.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  min-width: 0;
}

.cell-box {
  position: relative;
  display: block;
  box-sizing: content-box;
  border: 2px solid transparent;
  padding: calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 2.6) calc(var(--u) * 2.2) calc(var(--u) * 2.8) calc(var(--u) * 2.4);
  background: var(--surface-2);
}

.cell.is-on .cell-box {
  border-color: var(--bar);
}

.cell-name {
  display: block;
  max-width: 100%;
  margin-top: calc(var(--u) * 0.6);
  font-size: var(--fs-small);
  color: var(--ink);
  text-align: center;
  overflow-wrap: break-word;
}

/* 图鉴两页各自的小标题 */
.book-cap {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--paper-ink);
}

.check-badge {
  position: absolute;
  right: calc(var(--u) * 0.2);
  top: calc(var(--u) * 0.2);
  width: calc(var(--u) * 5.2);
  height: calc(var(--u) * 5.2);
  padding: calc(var(--u) * 0.9);
  border-radius: 50%;
  background: var(--bar);
  color: var(--on-dark);
}

.check-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

.new-tag {
  position: absolute;
  left: calc(var(--u) * 0.2);
  top: calc(var(--u) * 0.2);
  padding: 0 calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 1.4);
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* ---------- 土块信息：预览图，右上角是还剩多少 ---------- */
.block-prev {
  position: relative;
  display: flex;
  justify-content: center;
  padding: calc(var(--u) * 3) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2.4);
  background: var(--surface-2);
}

.block-badge {
  position: absolute;
  right: calc(var(--u) * 1.2);
  top: calc(var(--u) * 1.2);
  padding: 0 calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 1.4);
  background: var(--bar);
  color: var(--on-dark);
  font-size: var(--fs-name);
  line-height: 1.6;
}

/* ---------- 清洁完成：图正中的四个大字，和礼花一起出现 ---------- */
@keyframes cheer-pop {
  0% { transform: scale(0.3); opacity: 0; }
  22% { transform: scale(1.18); opacity: 1; }
  34% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.06); opacity: 0; }
}

.detail-cheer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.detail-cheer-text {
  white-space: nowrap;
  font-size: calc(var(--u) * 13);
  font-weight: var(--title-weight);
  line-height: 1.2;
  color: var(--on-dark);
  text-shadow: calc(var(--u) * 0.6) 0 0 var(--bar), calc(var(--u) * -0.6) 0 0 var(--bar), 0 calc(var(--u) * 0.6) 0 var(--bar), 0 calc(var(--u) * -0.6) 0 var(--bar), calc(var(--u) * 0.45) calc(var(--u) * 0.45) 0 var(--bar), calc(var(--u) * -0.45) calc(var(--u) * 0.45) 0 var(--bar), calc(var(--u) * 0.45) calc(var(--u) * -0.45) 0 var(--bar), calc(var(--u) * -0.45) calc(var(--u) * -0.45) 0 var(--bar);
  animation: cheer-pop 2.2s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .detail-cheer-text {
    animation: none;
  }
}

/* ---------- 物品详情 ---------- */
.detail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-big {
  position: relative;
}

.detail-big .new-tag {
  left: calc(var(--u) * 1.2);
  top: calc(var(--u) * 1.2);
  font-size: var(--fs-name);
  padding: 0 calc(var(--u) * 1.8);
}

.detail-actions {
  display: flex;
  width: 100%;
  margin-top: calc(var(--u) * 3);
}

.detail-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 calc(var(--u) * 0.3);
  font-size: var(--fs-small);
}

.detail-btn[data-role="detail-delete"] {
  color: var(--danger);
}

/* ---------- 新增 / 编辑土块 ---------- */
.sec {
  margin-bottom: calc(var(--u) * 3);
}

.sec-title {
  display: block;
  margin-bottom: calc(var(--u) * 1);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* 种类和能出土的图：各是一排，靠左，左右滑动 */
.strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  touch-action: pan-x pan-y;
  clip-path: inset(0);
}

.strip > .cell {
  flex: none;
  margin-right: calc(var(--u) * 1.2);
}

/* 能出土的图：多选，每格右上角一个勾选框；没勾上是空心圈，勾上是实心带对钩 */
.pick .tick {
  box-sizing: border-box;
  border: 2px solid var(--ink-2);
  background: var(--surface);
  color: transparent;
}

.pick.is-on .tick {
  border-color: var(--bar);
  background: var(--bar);
  color: var(--on-dark);
}

/* 图和浮灰叠在同一格，浮灰在上面接手势 */
.detail-cv {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}

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

.art-dust {
  touch-action: none;
  cursor: pointer;
}

/* 气泡（在图鉴里点一张图冒出的「删除」）：它挂在页面上而不在弹窗里，尺寸变量用页面自己的 */
.popover {
  border: 2px solid var(--bar);
  border-radius: calc(var(--mu) * 2.4);
  background: var(--surface);
}

.popover-body {
  padding: calc(var(--mu) * 0.6);
}

.menu {
  min-width: 0;
}

.menu-item {
  min-height: 44px;
  padding: 0 calc(var(--mu) * 3);
  border-radius: calc(var(--mu) * 1.6);
  font-size: var(--fs-name);
  color: var(--ink);
  white-space: nowrap;
}

.menu-item.is-danger {
  color: var(--danger);
}

.toast {
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-name);
}

/* ---------- 新增土块：弹窗，头部一行是标题、导入钮和 ×，内容自己滚，底部固定「生成」 ---------- */
.m-edit {
  width: calc(var(--u) * 92);
  height: calc(var(--u) * 120);
}

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

.edit-head .modal-title {
  font-size: var(--fs-name);
  font-weight: var(--title-weight);
}

.edit-import {
  flex: none;
  min-height: 44px;
  padding: 0 calc(var(--u) * 1.6);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.sec:last-child {
  margin-bottom: 0;
}

/* ---------- 高级：出现概率 ---------- */
.adv-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 calc(var(--u) * 1.6);
  border: 0;
  border-radius: calc(var(--u) * 1.6);
  background: var(--field);
  color: var(--ink);
  font-size: var(--fs-small);
  text-align: left;
}

.adv-chev {
  flex: none;
  display: block;
  width: 20px;
  height: 20px;
  margin-left: calc(var(--u) * 1);
  transition: transform 0.2s;
}

.adv-chev .icon,
.adv-chev svg {
  display: block;
  width: 100%;
  height: 100%;
}

.adv-toggle.is-open .adv-chev {
  transform: rotate(180deg);
}

.adv-body {
  padding-top: calc(var(--u) * 2);
}

.adv-hint {
  margin: 0 0 calc(var(--u) * 1.4);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.adv-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: calc(var(--u) * 1);
}

.adv-row .art {
  flex: none;
  margin-right: calc(var(--u) * 1.4);
}

.adv-pct {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-small);
  color: var(--ink);
}

.adv-step {
  display: flex;
  flex: none;
  align-items: center;
}

/* 加减和「必然」都是字本身的按钮，不套圈；选中的「必然」描一圈方角边 */
.step {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: calc(var(--fs-name) * 1.5);
  line-height: 1;
}

.step:disabled {
  opacity: 0.35;
}

.step-val {
  min-width: calc(var(--u) * 6);
  text-align: center;
  font-size: var(--fs-name);
  color: var(--ink);
}

.must {
  box-sizing: border-box;
  min-height: 44px;
  margin-left: calc(var(--u) * 1.4);
  padding: 0 calc(var(--u) * 1.2);
  border: 2px solid transparent;
  border-radius: calc(var(--u) * 0.8);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.must.is-on {
  border-color: var(--bar);
  color: var(--ink);
}

/* ---------- 背包里没有土块：画面区中间的一页 ---------- */
.empty {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.empty-text {
  margin: 0 0 calc(var(--u) * 1.6);
  padding: 0 calc(var(--u) * 3);
  font-size: var(--fs-name);
  color: var(--on-dark);
}

.empty-btn {
  min-height: 44px;
  padding: 0 calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * 2.4);
  font-size: var(--fs-name);
  pointer-events: auto;
}