/* 镜面模拟器：冷静克制的灰黑色调。近黑灰底、浅灰标题条和镜面、暗红锤子、纯灰的刀和杯、白手套。
   所有尺寸用 calc(var(--u) * n)；--u、--btn / --btnh（基础钮的宽和高，压扁的圆角矩形）、--tool（工具包里一格套子的基准宽）、--cell（选择小框的格子）、--langh / --langw（中 / EN 的高和每半的宽）由壳按窗口算好写进来。 */
:root {
  --desk: #343434;
  --desk-side: #2a2a2a;

  /* 共用部件（弹窗、提示条）跟着这套色 */
  --bg: #2a2a2a;
  --surface: #3a3a3a;
  --surface-2: #4b4b4b;
  --field: #2f2f2f;
  --bar: #1f1f1f;
  --disc: #cfcfcf;
  --ink: #e8e8e8;
  --ink-2: #b9b9b9;
  --ink-3: #848484;
  --line: #151515;
  --accent: #c58f8f;
  --danger: #9b3a3a;
  --on-dark: #ececec;
}

html,
body {
  background-color: var(--desk-side);
  /* 整页都是玩的地方，手指在哪里都不能被当成滚动 */
  touch-action: none;
}

/* ---------- 画面框 ---------- */
.mt-frame {
  position: absolute;
  top: 0;
  background-color: var(--desk);
}

.mt-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

/* ---------- 标题条与中 / EN ---------- */
.mt-head {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  justify-content: center;
}

/* 条的行：和条一样大。中 / EN 不在这一行里（固定在画面框右上角）。 */
.mt-headrow {
  position: relative;
  width: calc(var(--u) * 65);
  height: calc(var(--u) * 13);
}

.mt-banner {
  display: block;
  width: 100%;
  height: 100%;
}

/* 标题字画在条里；这个 h1 只给读屏用，看不见 */
.mt-title-sr {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 中 / EN：小而扁的二选一分段钮，两半共用外框，中间没缝，选中的一半填色。固定在画面框右上角（上下和标题字对齐），点击范围比看到的大一圈。 */
.mt-lang {
  position: absolute;
  right: calc(var(--u) * 1.4);
  top: calc(var(--u) * 5.8 - var(--langh) / 2);
  z-index: 2;
  box-sizing: content-box;
  display: flex;
  height: var(--langh);
  border: calc(var(--u) * 0.4) solid #151515;
  border-radius: calc(var(--u) * 1.4);
  background: #d2d2d2;
}

.mt-lang-btn {
  position: relative;
  flex: none;
  width: var(--langw);
  height: 100%;
  padding: 0;
  font-size: var(--langfs);
  font-weight: 900;
  line-height: 1;
  color: #4a4a4a;
}

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

.mt-lang-btn:first-child {
  border-radius: calc(var(--u) * 1) 0 0 calc(var(--u) * 1);
}

.mt-lang-btn:last-child {
  border-radius: 0 calc(var(--u) * 1) calc(var(--u) * 1) 0;
}

.mt-lang-btn[aria-pressed='true'] {
  background: #262626;
  color: #ececec;
}

/* 音效开关：和中 / EN 同高同位置（左上角），开着深底浅字，关了浅底深字加删除线；点击范围比看到的大一圈。 */
.mt-sound {
  position: absolute;
  left: calc(var(--u) * 1.4);
  top: calc(var(--u) * 5.8 - var(--langh) / 2);
  z-index: 2;
  box-sizing: content-box;
  height: var(--langh);
  padding: 0 calc(var(--u) * 1.4);
  border: calc(var(--u) * 0.4) solid #151515;
  border-radius: calc(var(--u) * 1.4);
  background: #d2d2d2;
  font-size: var(--langfs);
  font-weight: 900;
  line-height: 1;
  color: #4a4a4a;
  text-decoration: line-through;
  white-space: nowrap;
}

.mt-sound::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: -11px;
  bottom: -11px;
}

.mt-sound[aria-pressed='true'] {
  background: #262626;
  color: #ececec;
  text-decoration: none;
}

/* ---------- 基础钮：压扁的圆角矩形，平涂，不带阴影 ---------- */
.mt-round {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn);
  height: var(--btnh);
  border-radius: calc(var(--btnh) * 0.42);
}

/* 看得见的只有压扁的一块；点击范围上下各扩 6 像素，高度不小于 44。 */
.mt-round::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  bottom: -6px;
}

.mt-round:disabled {
  cursor: default;
}

/* ---------- 基础五钮 ---------- */
.mt-basics {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  justify-content: center;
  margin-top: calc(var(--u) * 2.2);
}

.mt-basics .mt-round + .mt-round {
  margin-left: calc(var(--u) * 3.1);
}

/* ---------- 镜子 ---------- */
.mt-mid {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.mt-stagewrap {
  position: absolute;
  pointer-events: none;
}

/* 整页画布：铺满窗口，是内容物（镜子、碎片）所在的一层，在所有页面件下面；自己不接指针；敲、切、拖由 game.js 在整页上接。
   标题条、基础钮、工具包、选择小框、中 / EN、音效钮、弹窗、提示条都浮在它上面（--ui-z 起），碎片飞到它们底下会被盖住。 */
.mt-stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 底部：工具包 ---------- */
/* 包里四格套子（工具位）一样大、间隔一样窄；每格里的工具整个在格内，不凸出。 */
/* 包是浮在画面里的一个物件：四周留空，底下不贴到画面底。 */
.mt-low {
  flex: none;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--u) * 3) calc(var(--u) * 6 + env(safe-area-inset-bottom, 0px));
}

.mt-tray {
  position: relative;
}

.mt-tray-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mt-tools {
  position: relative;
  display: flex;
  padding: calc(var(--tool) * 0.12);
}

.mt-toolbtn + .mt-toolbtn {
  margin-left: calc(var(--tool) * 0.07);
}

.mt-toolbtn {
  position: relative;
  flex: none;
  display: block;
  width: var(--tool);
  height: calc(var(--tool) * 1.12);
}

.mt-toolbtn .mt-art,
.mt-bcell .mt-art,
.mt-bcell .mt-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- 选择小框 ---------- */
.mt-bubble {
  position: absolute;
  z-index: 5;
  display: block;
  padding: calc(var(--u) * 2.4);
}

.mt-bubble[hidden] {
  display: none;
}

.mt-bubble.is-down {
  padding-bottom: calc(var(--u) * 5);
}

.mt-bubble.is-right {
  padding-right: calc(var(--u) * 5);
}

.mt-bubble-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mt-bubble-row {
  position: relative;
  display: flex;
}

.mt-bcell {
  position: relative;
  flex: none;
  display: block;
  width: var(--cell);
  height: var(--cell);
}

.mt-bcell + .mt-bcell {
  margin-left: calc(var(--u) * 1.4);
}

/* ---------- 横向：左栏基础钮、中栏标题条 + 镜子、右栏工具包 ---------- */
.is-land .mt-page {
  flex-direction: row;
}

.mt-left {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--btn) + var(--u) * 6);
}

.is-land .mt-basics {
  flex-direction: column;
  margin-top: 0;
}

.is-land .mt-basics .mt-round + .mt-round {
  margin-left: 0;
  margin-top: calc(var(--u) * 3);
}

.mt-center {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mt-right {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--tool) * 1.24 + var(--u) * 5);
}

.is-land .mt-low {
  padding: 0;
}

.is-land .mt-tools {
  flex-direction: column;
}

.is-land .mt-toolbtn + .mt-toolbtn {
  margin-left: 0;
  margin-top: calc(var(--tool) * 0.07);
}

/* ---------- 弹窗和提示条：同一套灰黑 ---------- */
.modal {
  border: calc(var(--u) * 0.6) solid var(--line);
  border-radius: calc(var(--u) * 1.4);
  background-color: var(--surface);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.9) #333333;
}

/* 关闭：面板右上角的小 ×，看得见的只有 22 像素，贴角 6 像素，不占标题行右侧的位置；点击范围用透明伪元素扩到 44 像素。 */
.modal-close {
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
}

.modal-close::after {
  content: '';
  position: absolute;
  left: -11px;
  right: -11px;
  top: -11px;
  bottom: -11px;
}

/* 弹窗里的按钮：浅灰平涂底，不带阴影；确认钮是暗红底。 */
.btn {
  border: 0;
  border-radius: calc(var(--u) * 1.6);
  background: #cfcfcf;
  color: #262626;
  box-shadow: none;
}

.btn-primary {
  background: var(--danger);
  color: #f2e8e8;
  box-shadow: none;
}

.btn-danger {
  background: var(--danger);
  color: #f2e8e8;
  box-shadow: none;
}

/* 提示条：只有文字，没有底和边，在标题条下方。 */
.toast {
  background: transparent;
  border: 0;
  color: var(--on-dark);
}

.is-boiling .modal {
  filter: url(#boil-soft);
}

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

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