/* 关卡页，按页面草稿排版 */

/* ---------- 顶部：标题 + 只显示能量的横条 ---------- */
/* 标题太长（窄屏英文）时，能量条整条换到下一行，不把数字挤没 */
.level__head {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.level__title {
  flex: none;
  margin: 0;
}
.level__energy {
  flex: 1 1 6.5rem;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-s);
}
.level__energy .hud__label {
  flex: none;
}
.level__energy .hud__bar {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
}
.level__energy .hud__num {
  font-size: var(--fs-s);
  line-height: 26px;
}

.board-box {
  flex: 1 1 auto;
  --sk-fill: var(--board);
  --sk-line: transparent;
  --sk-r: 28px;
  min-width: 0;
  min-height: 0;
}

/* ---------- 棋盘 ---------- */
/* 棋盘按盒子剩下的空间等比缩放，不撑开盒子 */
.board {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  bottom: var(--sp-2);
  left: var(--sp-2);
  width: calc(100% - 2 * var(--sp-2));
  height: calc(100% - 2 * var(--sp-2));
  overflow: visible;
  touch-action: manipulation;
  cursor: pointer;
}
.board.is-locked {
  cursor: default;
}

.fx-shadow {
  flood-color: var(--piece-shadow);
}

.layer[data-depth='0'] .piece rect {
  fill: var(--piece-top);
}
.layer[data-depth='1'] .piece rect {
  fill: var(--piece-mid);
}
.layer[data-depth='2'] .piece rect {
  fill: var(--piece-low);
}
.layer .piece.is-hot rect {
  fill: var(--round);
}

.piece__q {
  font-family: var(--font);
  font-size: 60px;
  font-weight: 700;
  fill: var(--piece-mark);
  pointer-events: none;
}
.layer[data-depth='1'] .piece__q,
.layer[data-depth='2'] .piece__q {
  fill: var(--board);
  opacity: 0.45;
}

.layer .piece.is-shroom rect {
  fill: var(--shroom);
}
.piece__shroom {
  color: var(--shroom-spot);
  --icon-bg: var(--shroom);
}

/* 检测标记 */
.mark--sure .mark__halo {
  fill: none;
  stroke: var(--shroom);
  stroke-width: 7;
}
.mark--sure .mark__icon {
  color: var(--shroom);
  --icon-bg: var(--piece-top);
}
.mark__tag {
  fill: var(--round);
  stroke: var(--ink);
  stroke-width: 4;
}
.mark__text {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 700;
  fill: var(--ink);
}

/* ---------- 道具：图标 + 名字，点了先确认 ---------- */
.tools {
  flex: none;
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
}
.tool {
  --sk-fill: var(--piece-top);
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 112px;
  min-height: 64px;
  padding: 8px 4px;
}
.tool__icon {
  width: 26px;
  height: 26px;
}
.tool__name {
  max-width: 100%;
  font-size: var(--fs-xs);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

/* ---------- 背包 ---------- */
.tray {
  --sk-fill: var(--tray);
  --sk-line: transparent;
  --sk-r: 8px;
  flex: none;
  margin: 0 calc(-1 * var(--sp-3));
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
}

/* 背包格子：只排一排、大小固定，放不下就左右滑动，露出半格就是提示。
   滚动条隐藏：有没有滚动条都不能改变背包高度（棋盘会跟着缩放） */
.bag {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--slot-size) + 10px);
  justify-content: start;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-bottom: var(--sp-1);
  scrollbar-width: none;
}
.bag::-webkit-scrollbar {
  display: none;
}
.bag .item__name {
  /* 按原字号留高：文字适配缩小字号时行高也不跟着变，背包高度始终不变 */
  min-height: calc(1.25 * var(--fs-xs));
  color: var(--ink);
}
/* 英文名字常排成两行：每格都留两行高 */
html[lang='en'] .bag .item__name {
  min-height: calc(2.5 * var(--fs-xs));
}

/* ---------- 提示位：标题下面、棋盘上面固定留一条，提示放在这里，不盖棋盘和收工按钮 ---------- */
/* 高度固定（英文提示常是两行，多留一行），提示变长时往上长，不推动下面的道具和背包 */
.toast-dock {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 34px;
  margin: calc(-1 * var(--sp-1)) 0;
  pointer-events: none;
}
html[lang='en'] .toast-dock {
  height: 48px;
}
/* 提示位空着时显示操作指引，有提示时让位 */
.toast-dock__hint {
  align-self: center;
  font-size: var(--fs-s);
  line-height: 1.3;
  color: var(--text-dim);
  text-align: center;
}
.toast-dock__hint:not(:only-child) {
  display: none;
}
.toast-dock .toast {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-s);
  line-height: 1.3;
}

/* ---------- 底部 ---------- */
.level__foot {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.finish {
  --sk-fill: var(--go);
  --sk-lw: 4px;
  min-width: 9rem;
  min-height: 52px;
  font-size: var(--fs-l);
}

/* ---------- 拿东西：翻面 → 飞进背包，原位留虚线空位 ---------- */
.fly {
  position: fixed;
  z-index: var(--z-fly);
  pointer-events: none;
}
.fly__icon {
  display: none;
}
.fly.is-open .fly__icon {
  display: block;
}
.fly.is-open .fly__q {
  display: none;
}

.gap {
  pointer-events: none;
}
.gap__edge rect {
  fill: none;
  stroke: var(--piece-mid);
  stroke-width: 10;
  stroke-dasharray: 22 16;
}
.gap__fill rect {
  fill: var(--board);
}
.fly__shape {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fly__shape .piece rect {
  fill: var(--piece-top);
}
.fly__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  max-width: 72px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--ink);
  --icon-bg: var(--piece-top);
}

/* 得到的东西单独框起来，和下面的经验、废料文字分开 */
.result__loot {
  gap: 0;
  padding: var(--sp-3);
}
.result__loot .items {
  padding-right: 0;
  padding-left: 0;
}
.result__loot .empty {
  margin: var(--sp-2) 0;
}
.result__sum {
  margin: var(--sp-4) 0 0;
  font-weight: 700;
}

/* ---------- 横屏手机：左边棋盘，右边标题、能量、道具、背包、收工 ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  .page[data-page='level'] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      'board head'
      'board msg'
      'board tools'
      'board tray'
      'board foot';
    column-gap: var(--sp-4);
  }
  .level__head {
    grid-area: head;
  }
  .board-box {
    grid-area: board;
  }
  .tools {
    grid-area: tools;
  }
  .tray {
    grid-area: tray;
    align-self: start;
    margin: 0;
  }
  .toast-dock {
    grid-area: msg;
    margin: 0;
  }
  .level__foot {
    grid-area: foot;
  }
  .tool {
    min-height: 56px;
    padding: 4px;
  }
}