/* 画弦String 的样式：牛皮纸底，深褐色的线和边，纸色的平涂方角件，只有琴弦和乐器带颜色。
   页面分成三个互不重叠的格子（.mt-page 是网格）：
     竖屏  上 .mt-chrome（标题、中 / EN、操作条）、中 .mt-mid（画布框）、下 .mt-dock（画笔盒、演奏盒）；
     横向  左 .mt-chrome、中 .mt-mid、右 .mt-dock。
   乐器面板挂在 .mt-mid 里，贴着画笔盒那一侧展开，不盖住画笔盒和演奏盒。
   所有尺寸用 calc(var(--u) * n)：--u 是画面单位；--toolh 字钮的高；--pad 页面四周留白；--gap 格与格的空隙；--sm 画布四周给抖动留的边；
   --col 横向时左右两栏的宽；--head 标题行的高；--card 乐器小卡的宽；--langh / --langw 中 / EN 的高和每半的宽。
   这些由 js/shell/frame.js 按窗口算出来写在 :root 上。 */
:root {
  --desk: #cdbfa6;
  --radius: 0;
  --radius-sm: 0;
  --script: 'Shadows Into Light Two', 'Noto Sans SC', var(--font);

  /* 共用部件（弹窗、提示条、按钮）读的颜色 */
  --bg: #e7ddc8;
  --surface: #f3ecdc;
  --surface-2: #e6dcc6;
  --field: #faf4e7;
  --bar: #4a3a2b;
  --disc: #f6efe0;
  --ink: #4a3a2b;
  --ink-2: #7b6749;
  --ink-3: #a28d6c;
  --line: #4a3a2b;
  --accent: #b4442f;
  --danger: #b4442f;
  --on-dark: #fbf5e7;
}

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

[hidden] {
  display: none !important;
}

/* ---------- 画面框和底 ---------- */
.mt-frame {
  position: absolute;
  top: 0;
}

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

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

.mt-label,
.mt-cell-label,
.mt-color-name,
.mt-card-label,
.mt-chip-text,
.mt-choice,
.mt-lang-btn {
  font-family: var(--script);
}

/* 画出来的底垫在按钮自己的文字下面 */
.mt-round,
.mt-color,
.mt-eraser,
.mt-round-btn,
.mt-mode,
.mt-cell,
.mt-choices,
.mt-choice,
.mt-card,
.mt-slider,
.mt-title,
.mt-settings,
.mt-chip {
  position: relative;
  isolation: isolate;
}

/* 按钮和标题里的字：页面里的字只管占位、读屏和换语言，颜色是透明的；看到的字画在同一位置的画布上（见 shell/skin.js 的 drawLabel）。
   这样强制深色的浏览器反转页面文字颜色时，画着底的按钮不会变成深底深字。 */
.mt-label,
.mt-cell-label,
.mt-card-label,
.mt-color-name,
.mt-title-text,
.mt-chip-text {
  color: transparent;
}

.mt-bg {
  z-index: -1;
}

/* ---------- 页面网格：三个互不重叠的格子 ---------- */
.mt-page {
  display: grid;
  box-sizing: border-box;
  padding: calc(var(--pad) + env(safe-area-inset-top, 0px)) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom, 0px));
}

.is-tall .mt-page {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-row-gap: var(--gap);
}

.is-land .mt-page {
  grid-template-columns: var(--col) minmax(0, 1fr) var(--col);
  grid-template-rows: minmax(0, 1fr);
  grid-column-gap: var(--gap);
}

.mt-chrome {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
}

.mt-mid {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}

.mt-dock {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
}

/* 竖屏上方：标题和中 / EN 一行，操作条一行 */
.is-tall .mt-chrome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'set head lang' 'basics basics basics';
  grid-column-gap: calc(var(--u) * 2);
  grid-row-gap: calc(var(--gap) * 0.7);
  align-items: center;
}

.is-tall .mt-settings {
  grid-area: set;
}

.is-tall .mt-head {
  grid-area: head;
}

.is-tall .mt-lang {
  grid-area: lang;
}

.is-tall .mt-basics {
  grid-area: basics;
}

/* 横向左栏：标题、中 / EN、操作条竖着排，从上往下 */
.is-land .mt-chrome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'set head' 'lang lang' 'basics basics';
  grid-row-gap: var(--gap);
  grid-column-gap: calc(var(--u) * 2);
  align-items: center;
  align-self: start;
}

/* 左右两栏会滚动（屏幕矮到放不下时）：上下各留一圈内边距收住按钮扩出去的点击范围，再用负外边距把内容摆回格子的顶 */
.is-land .mt-chrome,
.is-land .mt-dock {
  padding: 8px 0;
  margin: -8px 0;
  max-height: calc(100% + 16px);
}

.is-land .mt-settings {
  grid-area: set;
}

.is-land .mt-head {
  grid-area: head;
}

.is-land .mt-lang {
  grid-area: lang;
}

.is-land .mt-basics {
  grid-area: basics;
}

/* 盒子：纸片底画在自己的画布里 */
.mt-box {
  position: relative;
  isolation: isolate;
  min-width: 0;
}

.mt-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: var(--head);
}

/* 设置钮：左上角的方角字钮 */
.mt-settings {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--toolh);
  padding: 0 calc(var(--u) * 2.2);
  border-radius: 0;
  box-shadow: none;
}

.mt-settings .mt-label {
  position: relative;
  font-size: var(--btnfs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.mt-settings::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  bottom: -6px;
}

.mt-title {
  flex: none;
  position: relative;
  margin: 0;
  padding: 0.22em 0.12em 0.1em;
  font-family: 'Shadows Into Light Two', var(--font);
  font-weight: 400;
  font-size: calc(var(--head) * 0.72);
  line-height: 1.05;
}

.mt-title .mt-bg {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.mt-title-text {
  display: inline-block;
  white-space: nowrap;
}

.mt-lang {
  position: relative;
  z-index: 2;
  box-sizing: content-box;
  display: flex;
  height: var(--langh);
  border: calc(var(--u) * 0.4) solid var(--line);
  border-radius: 0;
  background: var(--disc);
}

.is-land .mt-lang {
  width: auto;
}

.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: var(--ink-2);
}

.is-land .mt-lang-btn {
  flex: 1 1 0;
  width: auto;
}

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

.mt-lang-btn:first-child,
.mt-lang-btn:last-child {
  border-radius: 0;
}

.mt-lang-btn[aria-pressed='true'] {
  background: var(--bar);
  color: var(--on-dark);
}

/* ---------- 操作条：一条框里并排纯文字格，格间一道细线 ---------- */
.mt-basics {
  display: flex;
  align-items: stretch;
  padding: 2px;
}

.mt-round {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--toolh);
  padding: 0 2px;
  border-radius: 0;
  box-shadow: none;
}

.mt-round:focus {
  box-shadow: none;
}

.mt-basics .mt-label {
  width: 100%;
  max-width: 100%;
  padding: 0;
  font-size: var(--btnfs);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

/* 点击范围只向上下各扩 6 像素，高度不小于 44 */
.mt-round::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  bottom: -6px;
}

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

.mt-basics .mt-round + .mt-round::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 1.5px;
  background: var(--ink-3);
}

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

.is-land .mt-basics .mt-round {
  flex: none;
  width: 100%;
}

.is-land .mt-basics .mt-round + .mt-round::before {
  left: 10%;
  right: 10%;
  top: 0;
  bottom: auto;
  width: auto;
  height: 1.5px;
}

/* ---------- 画布格：纸的四周留一圈边给抖动 ---------- */
.mt-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 录制 / 播放：纸的左上角里的一小行字 */
.mt-chip {
  position: absolute;
  left: calc(var(--sm) + var(--u) * 2.4);
  top: calc(var(--sm) + var(--u) * 2.4);
  display: flex;
  align-items: center;
  font-size: var(--namefs);
  line-height: 1;
  pointer-events: none;
}

.mt-chip-text {
  position: relative;
}

/* ---------- 画笔盒、演奏盒：竖屏在画布下面、横向在画布右边 ---------- */
.mt-dock {
  display: flex;
  flex-direction: column;
}

.mt-dock > .mt-box {
  flex: none;
}

.mt-dock > .mt-box + .mt-box {
  margin-top: calc(var(--gap) * 0.7);
}

.is-land .mt-dock {
  align-self: start;
}

.mt-brush,
.mt-playbox {
  padding: calc(var(--u) * 1.6);
}

.mt-row {
  position: relative;
  display: flex;
  align-items: center;
}

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

.mt-pair {
  flex: none;
  display: flex;
}

.mt-pair > * + * {
  margin-left: calc(var(--u) * 1.6);
}

.mt-color,
.mt-eraser,
.mt-round-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--toolh);
  padding: 0 calc(var(--u) * 1.6);
  border-radius: 0;
  box-shadow: none;
}

.mt-color-name,
.mt-eraser .mt-label,
.mt-round-btn .mt-label {
  position: relative;
  font-size: var(--namefs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* 画线 / 拨弦：一个方角框里两格，只有文字 */
.mt-mode {
  flex: none;
  display: flex;
  height: var(--toolh);
  padding: calc(var(--u) * 0.4);
  border-radius: 0;
}

.mt-cell {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 calc(var(--u) * 1.6);
}

.mt-label {
  position: relative;
}

.mt-cell-label {
  position: relative;
  font-size: var(--namefs);
  line-height: 1;
  white-space: nowrap;
}

/* 画出来的滑条：上面盖一个看不见的原生滑块负责拖动，滑块宽 = 画出来的方块两侧的留白，位置才对得上 */
.mt-slider {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--toolh);
}

.mt-range {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
}

.mt-range::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}

.mt-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--toolh) * 0.6);
  height: var(--toolh);
  border: 0;
  background: transparent;
}

.mt-range::-moz-range-thumb {
  width: calc(var(--toolh) * 0.6);
  height: var(--toolh);
  border: 0;
  background: transparent;
}

/* 横向右栏：盒子里的件竖着排，宽度撑满 */
.is-land .mt-row {
  flex-direction: column;
  align-items: stretch;
}

.is-land .mt-row > * + * {
  margin-left: 0;
  margin-top: calc(var(--u) * 1.6);
}

.is-land .mt-pair {
  display: flex;
}

.is-land .mt-pair .mt-color,
.is-land .mt-pair .mt-round-btn {
  flex: 1 1 auto;
}

.is-land .mt-row .mt-slider {
  flex: none;
  width: 100%;
  height: var(--toolh);
}

.is-land .mt-mode {
  width: 100%;
}

.is-land .mt-cell {
  flex: 1 1 0;
}

/* ---------- 乐器面板：挂在画布格里，贴着画笔盒那一侧向画布里展开 ---------- */
.mt-panel {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 1.4);
  border-radius: 0;
  min-height: 0;
}

/* 竖屏：乐器面板从下面（画笔盒那一侧）向上展开，设置面板从上面（设置钮那一侧）向下展开 */
.is-tall .mt-panel {
  left: calc(var(--sm) + 3px);
  right: calc(var(--sm) + 3px);
  max-height: calc(100% - var(--sm) * 2 - 6px);
}

.is-tall .mt-panel-inst {
  bottom: calc(var(--sm) + 3px);
}

.is-tall .mt-panel-set {
  top: calc(var(--sm) + 3px);
}

/* 横向：乐器面板贴右（画笔盒那一侧），设置面板贴左（设置钮那一侧） */
.is-land .mt-panel {
  top: calc(var(--sm) + 3px);
  width: calc(var(--card) * 3 + var(--u) * 8);
  max-width: calc(100% - var(--sm) * 2 - 6px);
  max-height: calc(100% - var(--sm) * 2 - 6px);
}

.is-land .mt-panel-inst {
  right: calc(var(--sm) + 3px);
}

.is-land .mt-panel-set {
  left: calc(var(--sm) + 3px);
}

.mt-panel-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.mt-strip {
  display: flex;
  align-items: center;
  width: 100%;
}

.mt-card {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  min-width: var(--card);
  height: calc(var(--card) * 0.9 + var(--namefs) * 1.3);
  padding: 0 4px;
}

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

.mt-card-label {
  position: relative;
  display: block;
  width: max-content;
  font-size: var(--namefs);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.mt-card-text {
  justify-content: center;
  height: calc(var(--toolh) * 1.1);
}

.mt-card-text .mt-card-label {
  display: block;
}

/* 选项放不下一行就折到下一行，不出滚动条 */
.mt-choices {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  max-width: 100%;
  min-height: calc(var(--toolh) * 1.1);
  padding: calc(var(--u) * 0.7);
}

.mt-choice {
  flex: none;
  width: auto;
  min-width: max-content;
  height: calc(var(--toolh) * 1.1 - var(--u) * 1.4);
  padding: 0 calc(var(--u) * 1.6);
  font-size: calc(var(--namefs) + 2px);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}

/* 横向：乐器小卡排成三列，上下滚 */
.is-land .mt-strip {
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-x: hidden;
}

.is-land .mt-card {
  margin: 0 calc(var(--u) * 1.4) calc(var(--u) * 1.4) 0;
}

.is-land .mt-card + .mt-card {
  margin-left: 0;
}

.is-land .mt-panel-body {
  align-items: flex-start;
}

/* 竖屏上下两块放得下，不开滚动（滚动类只给横向的左右栏兜底） */
.is-tall .mt-chrome,
.is-tall .mt-dock {
  overflow: visible;
}

/* ---------- 弹窗、按钮、提示条：同一套牛皮纸 ---------- */
.modal-overlay {
  background: rgba(59, 44, 30, 0.55);
}

.modal {
  border: calc(var(--u) * 0.6) solid var(--line);
  border-radius: 0;
  background-color: var(--surface);
  box-shadow: none;
}

/* 关闭：面板右上角的小 ×，视觉框 22 像素，点击区用伪元素扩到 44 像素 */
.modal-close {
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 0;
  border: calc(var(--u) * 0.4) solid var(--line);
  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: calc(var(--u) * 0.5) solid var(--line);
  border-radius: 0;
  background: var(--disc);
  color: var(--ink);
  box-shadow: none;
}

.btn-primary {
  background: var(--bar);
  border-color: var(--bar);
  color: var(--on-dark);
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-dark);
}

.toast,
.toast-action,
.chip {
  border-radius: 0;
}

.toast {
  background: var(--bar);
  color: var(--on-dark);
  box-shadow: none;
}

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

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

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

/* ---------- 设置面板：音阶、背景和声 ---------- */
.mt-set {
  width: 100%;
}

.mt-set-row + .mt-set-row {
  margin-top: calc(var(--u) * 2.4);
}

.mt-set-name {
  position: relative;
  isolation: isolate;
  height: calc(var(--namefs) * 1.5);
  margin-bottom: calc(var(--u) * 0.8);
}

.mt-set-name .mt-label {
  display: inline-block;
  vertical-align: top;
  font-size: var(--namefs);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
}