/* 由 tools/flatten-css.mjs 从 app.src.css 生成，不要手改。 */
@font-face {
  font-family: "RunSans";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/run-bold.woff2") format("woff2"), url("../fonts/run-bold.ttf") format("truetype");
}

@font-face {
  font-family: "RunSans";
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/run-black.woff2") format("woff2"), url("../fonts/run-black.ttf") format("truetype");
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #24252b;
  color-scheme: only light;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  touch-action: none;
  font-family: "RunSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Droid Sans Fallback", sans-serif;
  font-weight: 700;
}

/* 按钮和输入框默认不继承字号，这里统一继承，em 才按界面字号算 */
button,
input {
  font-family: "RunSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Droid Sans Fallback", sans-serif;
  font-size: 1em;
  font-weight: 700;
}

#game {
  position: absolute;
  display: block;
  z-index: 1;
}

#ui {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  color: #fbf7ec;
  line-height: 1.5;
}

/* ---------- 全屏层 ---------- */

/* 每一层弹窗都是自己的层叠上下文（z-index: 1，后加的在上面）：
   下一层里带 z-index 的小东西（勾选圆标）不会盖到上一层弹窗上 */
.screen {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: table;
  table-layout: fixed;
}

.screen.is-dim {
  background: rgba(8, 8, 12, 0.6);
}

/* 弹窗外再叠别的浮层（金币徽章）时的外壳：不是表格，浮层不会被表格布局当成一列 */
.screen-stack {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.screen-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0 1.25em;
}

/* 小弹窗：确认、提示、输入名字 */
.panel {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 18.5em;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 1.4em 1.2em 1.25em;
  text-align: left;
  color: #16161a;
  background: #fbf7ec;
  border: 0.18em solid #16161a;
  border-radius: 1.1em;
}

.panel-title {
  margin: 0 0 0.8em;
  font-size: 1.45em;
  font-weight: 900;
  line-height: 1.25;
}

.panel-text {
  margin: 0 0 1.2em;
  font-size: 1.05em;
  line-height: 1.6;
}

/* ---------- 大弹窗：标题栏 + 滚动内容 + 底栏 ---------- */

.dialog {
  position: absolute;
  left: 0.75em;
  right: 0.75em;
  top: 1em;
  bottom: 1em;
  overflow: hidden;
  color: #fbf7ec;
  background: #24252b;
  border: 0.18em solid #16161a;
  border-radius: 1.1em;
}

/* 内容不多的弹窗（设置、编辑角色这类）：不撑满全屏，高度跟着内容走，只在极端情况下用
   max-height 兜底滚动——不能按屏幕比例定死高度，不然内容少也会拉出一个很长的空弹窗。
   是不是用这个由每处弹窗自己在代码里定（compact 选项），不是按内容量自动判断。 */
.dialog.is-compact {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  display: inline-block;
  width: 100%;
  max-width: 22em;
  max-height: 86%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  vertical-align: middle;
  text-align: left;
}

.dialog.is-compact .dialog-head {
  position: relative;
  height: auto;
  min-height: 3.6em;
}

.dialog.is-compact .dialog-title {
  line-height: 3.6em;
}

.dialog.is-compact .dialog-body {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  overflow: visible;
}

/* .dialog.has-foot .dialog-body 也设了 bottom，跟上面这条特异度打平、又排在后面会赢，
   这里专门再赢一次盖掉它，不然内容会被吸到底栏位置、盖住标题栏 */
.dialog.is-compact.has-foot .dialog-body {
  bottom: auto;
}

.dialog.is-compact .dialog-foot {
  position: relative;
  height: auto;
  padding: 0.75em 1em 1em;
}

.dialog-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3.6em;
  background: #2f3038;
  border-bottom: 0.18em solid #16161a;
}

.dialog-title {
  margin: 0;
  padding: 0 5.5em 0 1em;
  font-size: 1.2em;
  font-weight: 900;
  line-height: 2.95em;
  color: #fbf7ec;
}

.dialog-head.is-nested .dialog-title {
  padding: 0 1em 0 5.6em;
}

.dialog-close,
.dialog-back {
  position: absolute;
  top: 0.55em;
}

.dialog-close {
  right: 0.75em;
}

.dialog-back {
  left: 0.75em;
}

.dialog-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 3.8em;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 滚动条跟着皮肤配色走，不用浏览器默认的灰条；手机上系统本来就不显示滚动条，这条只影响桌面浏览器 */
.dialog-body,
.dialog.is-compact,
.hscroll {
  scrollbar-width: thin;
  scrollbar-color: #ffc62e #2f3038;
}

.dialog-body::-webkit-scrollbar,
.dialog.is-compact::-webkit-scrollbar,
.hscroll::-webkit-scrollbar {
  width: 0.6em;
  height: 0.6em;
}

.dialog-body::-webkit-scrollbar-track,
.dialog.is-compact::-webkit-scrollbar-track,
.hscroll::-webkit-scrollbar-track {
  background: #2f3038;
}

.dialog-body::-webkit-scrollbar-thumb,
.dialog.is-compact::-webkit-scrollbar-thumb,
.hscroll::-webkit-scrollbar-thumb {
  background: #ffc62e;
  border-radius: 0.5em;
}

.dialog.has-foot .dialog-body {
  bottom: 4.6em;
}

.dialog-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.6em;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0.75em 1em 0;
  background: #2f3038;
  border-top: 0.18em solid #16161a;
}

/* ---------- 按钮：平的，按下变暗，不做厚度 ---------- */

.btn {
  display: inline-block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  min-height: 2.9em;
  margin: 0;
  padding: 0.6em 1em;
  font-size: 1.05em;
  font-weight: 900;
  line-height: 1.3;
  color: #16161a;
  background: #fbf7ec;
  border: 0.18em solid #16161a;
  border-radius: 0.8em;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.btn:active,
.card-pic:active,
.slot-pic:active,
.side-tab:active,
.title-arrow:active,
.title-new:active {
  opacity: 0.72;
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-main {
  color: #16161a;
  background: #ffc62e;
}

.btn-danger {
  color: #16161a;
  background: #ff6b6b;
}

.btn-wide {
  display: block;
  width: 100%;
  margin-top: 0.7em;
}

.btn-small {
  min-height: 2.4em;
  padding: 0.3em 0.8em;
  font-size: 0.9em;
}

.btn-icon {
  width: 2.6em;
  min-height: 2.6em;
  padding: 0;
}

.btn-icon img {
  display: block;
  width: 1.7em;
  height: 1.7em;
  margin: 0 auto;
}

.btn-pair {
  overflow: hidden;
}

.btn-pair .btn {
  float: left;
  width: 48%;
}

.btn-pair .btn + .btn {
  float: right;
}

.panel .btn-pair {
  margin-top: 0.7em;
}

.btn-toggle.is-on {
  color: #16161a;
  background: #ffc62e;
}

.use-keys .is-focus {
  outline: 0.19em solid #7fd1ff;
  outline-offset: 0.2em;
}

/* 标签：写在名字旁边 */
.tag {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.5em;
  font-size: 0.72em;
  font-weight: 900;
  line-height: 1.6;
  vertical-align: 0.12em;
  color: #b9b5aa;
  border: 0.14em solid #b9b5aa;
  border-radius: 0.8em;
}

.tag.is-on {
  color: #16161a;
  background: #ffc62e;
  border-color: #16161a;
}

/* ---------- 标题 ---------- */

.title {
  display: block;
}

.title-coins {
  position: absolute;
  left: 0.75em;
  top: 0.75em;
  margin: 0;
  padding: 0.2em 0.85em 0.2em 0.35em;
  font-size: 1.05em;
  font-weight: 900;
  line-height: 1.6;
  color: #fbf7ec;
  background: #2f3038;
  border: 0.18em solid #16161a;
  border-radius: 1.2em;
}

.title-coins img {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.3em;
  vertical-align: -0.42em;
}

/* 取景框两侧切换角色的箭头：位置由脚本按取景框算，这里只管样子 */
.title-arrow {
  position: absolute;
  width: 2.4em;
  height: 2.4em;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 900;
  line-height: 2.1em;
  color: #16161a;
  background: #fbf7ec;
  border: 0.18em solid #16161a;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.title-new {
  position: absolute;
  height: 7em;
  margin: 0;
  padding: 0;
  color: #16161a;
  background: #fbf7ec;
  border: 0.18em dashed #16161a;
  border-radius: 0.8em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.title-new-plus {
  display: block;
  font-size: 2.4em;
  font-weight: 900;
  line-height: 1.1;
}

.title-new-text {
  display: block;
  font-size: 0.95em;
  font-weight: 900;
}

/* 标题牌：像贴在路上的一张贴纸 */
.title-sign {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

/* 英文标题长：字号小一档，不压到右边的竖排按钮 */
.title-sign.is-latin {
  right: 2.9em;
}

.title-sign.is-latin .title-name {
  font-size: 1.7em;
  letter-spacing: 0;
  padding: 0.12em 0.5em 0.18em;
}

.title-name {
  display: inline-block;
  margin: 0;
  /* 右边少留一个字距，抵消最后一个字后面多出来的字距 */
  padding: 0.12em 0.44em 0.18em 0.5em;
  font-size: 2.35em;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: #16161a;
  background: #fbf7ec;
  border: 0.09em solid #16161a;
  border-radius: 0.35em;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.title-best {
  display: block;
  margin: 0.9em 0 0;
}

.title-best span {
  display: inline-block;
  padding: 0.1em 0.8em;
  font-size: 0.95em;
  font-weight: 900;
  color: #16161a;
  background: #ffc62e;
  border: 0.18em solid #16161a;
  border-radius: 1em;
}

/* 右侧贴边的竖排按钮 */
.side-tabs {
  position: absolute;
  right: 0;
  top: 4.9em;
  width: 2.9em;
}

.side-tab {
  display: block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
  margin: 0 0 0.55em;
  padding: 0.55em 0 0.55em 0.18em;
  font-size: 1em;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  color: #16161a;
  background: #fbf7ec;
  border: 0.18em solid #16161a;
  border-right: none;
  border-radius: 0.8em 0 0 0.8em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.side-tab span {
  display: block;
}

/* 英文：整个单词转 90°，按钮高度由脚本按文字长度设 */
.side-tab.is-rotated {
  position: relative;
  height: 6em;
  padding: 0;
}

.side-tab .side-tab-word {
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  line-height: 1.2;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
}

.title-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.6em;
  text-align: center;
}

.btn-hero {
  display: block;
  width: 13.5em;
  min-height: 3.3em;
  margin: 0.65em auto 0;
  font-size: 1.2em;
  border-radius: 1.65em;
}

.btn-hero.btn-sub {
  width: 11.3em;
  min-height: 2.8em;
  font-size: 1em;
  border-radius: 1.4em;
}

/* ---------- 结束 ---------- */

.over .panel {
  text-align: center;
}

.crash-title {
  margin: 0 0 0.5em;
  font-size: 1.75em;
  font-weight: 900;
  line-height: 1.25;
}

/* 「新纪录」贴在「跑了多少m」这行的右上角，不单独占一行 */
.crash-row {
  position: relative;
  margin: 0 0 0.9em;
  padding-right: 0.1em;
}

.crash-line {
  margin: 0;
  font-size: 1.2em;
}

.crash-best {
  position: absolute;
  top: -0.65em;
  right: 0;
  padding: 0.12em 0.6em;
  font-size: 0.6em;
  font-weight: 900;
  white-space: nowrap;
  color: #16161a;
  background: #ffc62e;
  border: 0.18em solid #16161a;
  border-radius: 1em;
}

.btn-coin-icon {
  width: 1.1em;
  height: 1.1em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.2em;
}

/* ---------- 分区与卡片 ---------- */

.section {
  padding: 1em 0 0.4em;
}

.section-head {
  position: relative;
  min-height: 2.4em;
  margin: 0 1em 0.5em;
}

.section-title {
  margin: 0;
  font-size: 1.05em;
  font-weight: 900;
  line-height: 2.3em;
  color: #fbf7ec;
}

.section-head .btn,
.section-head .section-note {
  position: absolute;
  right: 0;
  top: 0;
}

.section-note {
  font-size: 0.9em;
  line-height: 2.6em;
  color: #b9b5aa;
}

.price img {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.15em;
  vertical-align: -0.28em;
}

/* 一排卡片左右滑动 */
.hscroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0.2em 0.75em 0.6em;
  white-space: nowrap;
  touch-action: auto;
}

/* 卡片网格：从左到右一排排铺满 */
.card-grid {
  padding: 0.8em 0.6em 1em;
}

.card-grid:after {
  content: '';
  display: table;
  clear: both;
}

.card {
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 8.2em;
  margin: 0 0.35em 0.7em;
  vertical-align: top;
  white-space: normal;
  text-align: left;
}

.hscroll .card {
  display: inline-block;
}

.card-grid .card {
  float: left;
}

.card-pic {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
  height: 8.2em;
  margin: 0;
  padding: 0.3em;
  overflow: hidden;
  background: #fbf7ec;
  border: 0.18em solid #16161a;
  border-radius: 0.7em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.card.is-active .card-pic {
  border: 0.24em solid #ffc62e;
}

.card-name {
  margin: 0.35em 0 0;
  font-size: 0.92em;
  line-height: 1.45;
  color: #fbf7ec;
  word-wrap: break-word;
}

.card-actions {
  overflow: hidden;
  margin-top: 0.35em;
}

.card-actions .btn {
  float: left;
  width: 48%;
  padding: 0.2em 0;
}

.card-actions .btn + .btn {
  float: right;
}

.card-actions.is-single .btn {
  float: none;
  width: 100%;
}

/* 分组里的海报：固定 3 个一排，宽度随屏幕缩放，不然格子少的时候留一大块空白很丑。
   间距不能用百分比 margin（绝对禁止），改成在格子外层用固定 em 内边距当缝隙，
   里面的图片/按钮再按 100% 铺满这圈内边距空出来的地方。 */
.card-grid.grid-3 .card {
  width: 33.333%;
  margin: 0 0 0.9em;
  padding: 0 0.35em;
}

.card-grid.grid-3 .card-pic,
.card-grid.grid-3 .card-add-inner {
  height: 10.6em;
}

/* 新建：虚线框 + 加号（单独用时自己就是格子；grid-3 里包在 .card 外壳内，见 .card-add-inner） */
.card-add {
  height: 8.2em;
  padding: 0;
  color: #fbf7ec;
  background: #2f3038;
  border: 0.18em dashed #b9b5aa;
  border-radius: 0.7em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.card-add-inner {
  display: block;
  width: 100%;
  height: 8.2em;
  padding: 0;
  color: #fbf7ec;
  background: #2f3038;
  border: 0.18em dashed #b9b5aa;
  border-radius: 0.7em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.card-add-plus {
  display: block;
  font-size: 2.2em;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.card-add-text {
  display: block;
  padding: 0 0.3em;
  font-size: 0.85em;
  text-align: center;
}

/* 可勾选的卡片（打包 APK 里选内容）：选中时右上角一个勾 */
.card-check.is-checked .card-pic:after {
  content: '✓';
  position: absolute;
  z-index: 2;
  right: 0.3em;
  top: 0.3em;
  width: 1.5em;
  height: 1.5em;
  font-size: 0.9em;
  font-weight: 900;
  line-height: 1.5em;
  text-align: center;
  color: #16161a;
  background: #ffc62e;
  border: 0.12em solid #16161a;
  border-radius: 50%;
}

/* 图片框：背景图按原比例完整放进去，不拉伸 */
.pic {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}

.pic.fill {
  width: 100%;
  height: 100%;
}

.pic-strip {
  display: block;
  height: 100%;
  overflow: hidden;
}

.pic.third {
  float: left;
  width: 33.333%;
  height: 100%;
}

/* 皮肤卡片：用那套皮肤自己的颜色画一小段路 */
.card-skin .card-pic {
  padding: 0;
}

.skin-swatch {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
}

/* 开盲盒：弹窗里一个正方形的「？」方块（复用卡片图片格的样式，宽度改成跟高度一样、居中），
   点方块本身才抖两下再翻开，直接在这个方块里露出这次抽到的皮肤，不轮播其他候选。
   顶部空出的距离要躲开弹窗右上角的关闭按钮，不然两个都是绝对定位，方块会盖住关闭键。 */
.card-pic.box-tile {
  width: 8.2em;
  margin: 2.4em auto 1em;
  -webkit-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
}

.card-pic.box-tile.is-shake-a {
  -webkit-transform: rotate(-6deg) scale(1.04);
  transform: rotate(-6deg) scale(1.04);
}

.card-pic.box-tile.is-shake-b {
  -webkit-transform: rotate(6deg) scale(1.04);
  transform: rotate(6deg) scale(1.04);
}

.card-pic.box-tile.is-flat {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: scale(0.08);
  transform: scale(0.08);
}

.card-pic.box-tile.is-pop {
  -webkit-transition: -webkit-transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

.panel-text.box-note {
  margin-bottom: 0;
  text-align: center;
}

/* line-height 放在外层（字号不放大，em 按容器算），字号放在内层的字上——
   字号和行高不能放在同一个元素上，不然行高会跟着字号一起放大，把字挤到裁切区外面看不见 */
.box-mark {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  line-height: 7.6em;
  text-align: center;
}

.box-mark span {
  font-size: 2.6em;
  font-weight: 900;
  /* 用 ink（面板上的字），不用 accent——accent 配 paper 底色在有些皮肤下对比度不够，「？」会看不清 */
  color: #16161a;
}

.skin-road {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18%;
  width: 64%;
}

.skin-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.22em;
}

.skin-dot {
  position: absolute;
  right: 0.35em;
  bottom: 0.35em;
  width: 1.3em;
  height: 1.3em;
  border: 0.14em solid;
  border-radius: 50%;
}

/* 锁角标：不整块盖住预览图（背景透明），图标靠描边阴影在任何底色上都看得清 */
.skin-lock {
  position: absolute;
  left: 0.3em;
  top: 0.3em;
}

.skin-lock img {
  display: block;
  width: 1.5em;
  height: 1.5em;
  -webkit-filter: drop-shadow(0 0.05em 0.15em rgba(0, 0, 0, 0.85));
  filter: drop-shadow(0 0.05em 0.15em rgba(0, 0, 0, 0.85));
}

.skin-frag {
  position: absolute;
  left: 0.3em;
  bottom: 0.3em;
  padding: 0 0.55em;
  font-size: 0.72em;
  font-weight: 900;
  line-height: 1.5;
  color: #16161a;
  background: #ffffff;
  border: 0.1em solid #16161a;
  border-radius: 0.8em;
}

/* ---------- 表单：名字、图片位 ---------- */

.form {
  padding: 1em;
}

.form-note {
  margin: 0.6em 0 0;
  font-size: 0.95em;
  color: #fbf7ec;
}

.text-input {
  display: block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
  height: 2.9em;
  margin: 0;
  padding: 0 0.7em;
  font-size: 1em;
  color: #16161a;
  background: #fbf7ec;
  border: 0.18em solid #16161a;
  border-radius: 0.8em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
}

/* 选中输入框：用皮肤的主色描边，不用浏览器默认的蓝框 */
.text-input:focus,
.num-input:focus {
  outline: none;
  border-color: #ffc62e;
  -webkit-box-shadow: 0 0 0 0.14em #ffc62e;
  box-shadow: 0 0 0 0.14em #ffc62e;
}

.slot-row {
  overflow: hidden;
  margin-top: 0.8em;
}

.slot {
  float: left;
  width: 48%;
}

.slot + .slot {
  float: right;
}

.slot-pic {
  display: block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
  height: 5em;
  margin: 0;
  padding: 0.3em;
  color: #fbf7ec;
  background: #2f3038;
  border: 0.18em dashed #b9b5aa;
  border-radius: 0.7em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.slot.has-image .slot-pic {
  background: #fbf7ec;
  border-style: solid;
  border-color: #16161a;
}

.slot-tall .slot-pic {
  height: 11em;
}

.slot-empty {
  font-size: 0.9em;
}

.slot-caption {
  display: block;
  margin-top: 0.25em;
  font-size: 0.85em;
  text-align: center;
  color: #b9b5aa;
}

.coin-row {
  margin-top: 1.1em;
}

.coin-row-label {
  margin: 0;
  font-size: 1em;
  font-weight: 900;
  color: #fbf7ec;
}

.coin-row .slot-row {
  margin-top: 0.35em;
}

.file-input {
  display: none;
}

/* ---------- 设置 ---------- */

.setting {
  margin-bottom: 1.2em;
}

.segmented {
  overflow: hidden;
  background: #2f3038;
  border: 0.18em solid #16161a;
  border-radius: 1.4em;
}

.segmented .btn {
  float: left;
  width: 50%;
  min-height: 2.5em;
  padding: 0.3em 0;
  color: #fbf7ec;
  background: none;
  border: none;
  border-radius: 1.4em;
}

.segmented .btn.is-on {
  color: #16161a;
  background: #ffc62e;
}

.credit-row {
  overflow: hidden;
  padding: 0.6em 0 0.4em;
}

.credit-avatar {
  float: left;
  width: 3em;
  height: 3em;
  margin-right: 0.8em;
  border-radius: 0.5em;
}

.credit-text {
  overflow: hidden;
  padding-top: 0.15em;
}

.credit-by {
  margin: 0 0 0.25em;
  font-size: 0.9em;
  color: #fbf7ec;
}

.credit-line {
  margin: 0;
  font-size: 0.85em;
  color: #fbf7ec;
}

.credit-line a {
  color: #fbf7ec;
  text-decoration: underline;
}

.apk-intro {
  margin: 1em 1em 0;
  font-size: 0.95em;
  line-height: 1.8;
  color: #fbf7ec;
}

.apk-intro-line {
  margin: 0 0 0.9em;
}

.apk-intro-line:last-child {
  margin-bottom: 0;
}

.dialog-foot .apk-status {
  position: absolute;
  left: 1em;
  top: 0.9em;
  right: 10.5em;
  margin: 0;
  font-size: 0.85em;
  line-height: 1.4;
  color: #fbf7ec;
}

.dialog-foot > .btn-wide {
  position: absolute;
  right: 1em;
  top: 0.75em;
  width: 9.5em;
  margin: 0;
}

/* ---------- 裁切 ---------- */

.dialog-crop .dialog-body {
  overflow: hidden;
}

.crop-area {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 7.2em;
}

.crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: move;
}

.crop-tools {
  position: absolute;
  left: 0.9em;
  right: 0.9em;
  bottom: 0.6em;
}

/* 一行：图标 | 拉条 | 数字框 单位 [| 转 90°] */
.tool-row {
  position: relative;
  height: 2.8em;
  margin-top: 0.4em;
}

.tool-icon {
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 2em;
  height: 2em;
}

.tool-row .slider-track {
  position: absolute;
  left: 2.5em;
  right: 5.4em;
  top: 0.65em;
}

.tool-row.has-extra .slider-track {
  right: 8.6em;
}

.num-input {
  position: absolute;
  right: 1.4em;
  top: 0.25em;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 3.6em;
  height: 2.3em;
  margin: 0;
  padding: 0;
  font-size: 0.95em;
  font-weight: 900;
  text-align: center;
  color: #16161a;
  background: #fbf7ec;
  border: 0.18em solid #16161a;
  border-radius: 0.6em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
}

.tool-row.has-extra .num-input {
  right: 4.4em;
}

.num-unit {
  position: absolute;
  right: 0.2em;
  top: 0;
  width: 1.1em;
  font-size: 0.95em;
  font-weight: 900;
  line-height: 2.9em;
  color: #fbf7ec;
}

.tool-row.has-extra .num-unit {
  right: 3.2em;
}

.tool-rot90 {
  position: absolute;
  right: 0;
  top: 0.1em;
}

/* 滑条：扁平的一条槽 + 圆点 */
.slider-track {
  display: block;
  height: 1.5em;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.slider-track::-webkit-slider-runnable-track {
  height: 0.3em;
  background: #b9b5aa;
  border-radius: 0.2em;
}

.slider-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.2em;
  height: 1.2em;
  margin-top: -0.45em;
  background: #ffc62e;
  border: 0.12em solid #16161a;
  border-radius: 50%;
  cursor: pointer;
}

.slider-track::-moz-range-track {
  height: 0.3em;
  background: #b9b5aa;
  border-radius: 0.2em;
}

.slider-track::-moz-range-thumb {
  width: 1em;
  height: 1em;
  background: #ffc62e;
  border: 0.12em solid #16161a;
  border-radius: 50%;
  cursor: pointer;
}