/**
 * 新手教程 · 页面外壳。
 *
 * 牌桌本身的样式全部来自 `table.css`——教程用的是同一个 `Table`，不另画一套。
 * 这里只做两件事：画那块浮在桌面右侧的解说卡片，以及开场遮罩。
 *
 * **牌桌不缩。** 牌桌是 16:9，从右边切走一条会把宽度让掉，缩放从 0.9 掉到 0.65，
 * 手牌小到认不出牌名——而教程要讲「点这张大火球术」。
 *
 * 解说的位置是从桌面本身找出来的：1600×900 的牌桌，舞台 x > 1172 那段是空桌面
 * （弃牌堆到 1172 为止）。0.9 缩放下那是屏幕 1055 之后，正好摆一块纵向卡片。
 *
 * 卡片**不压手牌**：底下留到 724，而手牌从 788 才开始（舞台 826 × 0.9 + 45 的居中偏移）。
 * 右边留 12px，左边一路挨到弃牌堆——文字宽一点好读。
 *
 * 只有一处要配合：右下角的动作条本来贴着桌沿，会钻到卡片底下。这里把它往左挪到
 * 卡片外沿，`table.js` 的 `handRightEdge()` 读的正是动作条位置，所以手牌（静止态
 * 和展开态都算）会自动收在它左边，不会压到卡片。
 */

:root {
  /* 卡片按 1440×900（牌桌 0.9）那块屏幕量的，写的是**舞台坐标**：
     左边留 20px 给弃牌堆（它右沿在舞台 1172）。
     高度写死而不是靠 top+bottom——卡片要整体缩放（见下面 transform 的说明），
     用视口高度算出来的高再乘一次缩放系数，窗口一大就撑出屏幕。 */
  --tut-card-width: 378px;
  --tut-card-top: 12px;
  --tut-card-height: 628px;

  /* 字号都在这里改，改完刷新页面即可，不用重新构建。 */
  --tut-title-size: 24px;
  --tut-text-size: 16.5px;
  --tut-do-size: 15.5px;
  --tut-btn-size: 15px;
}

/* ── 解说卡片 ─────────────────────────────────────────── */

#tut-panel {
  /*
   * 卡片是 `#stage` 里的一块浮层，用的是舞台坐标（`position: absolute`）。
   *
   * 以前是 `position: fixed` 贴屏幕右上角、自己按窗口尺寸重算一次缩放——桌面端
   * 牌桌铺满视口，看着没毛病；一到手机上牌桌缩成一小块居中，卡片还钉在屏幕
   * 右上角，两者就各飘各的了。放进舞台之后，牌桌缩放、位移它都自动跟着走，
   * 和座位、牌堆、手牌是同一套坐标。
   */
  position: absolute;
  right: 11px;
  top: var(--tut-card-top);
  height: var(--tut-card-height);
  width: var(--tut-card-width);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 16px 24px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(30, 37, 33, 0.93), rgba(10, 13, 12, 0.96)),
    #0a0d0c;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(3px);
  /*
   * 抵消牌桌的 0.9 设计基准。
   *
   * 里面所有尺寸（宽高、字号、内边距）都是按 1440×900 那块屏幕写的，而舞台在
   * 那个尺寸下正好缩 0.9。除以 0.9 放回舞台坐标，桌面上看起来和以前一模一样；
   * 换个尺寸就跟着舞台一起缩放，不再各算各的。
   *
   * 以右上角为原点：右边缘和上边缘钉住不动，卡片朝左下长。
   */
  transform: scale(calc(1 / 0.9));
  transform-origin: 100% 0;
  /*
   * 压过顶栏（`table.css` 末尾把 `#topbar` 抬到了 800）。
   *
   * 顶栏是 `left: 30px; right: 30px` 的一条横向通栏，卡片右上角正好落在它的
   * 右端——层级不够时卡片画在上面，命中却归顶栏：右上角那颗 × 上半截点不动，
   * 下半截没事。这里抬到 850（低于掉血暗角 890 和弹窗 900）就对齐了。
   */
  z-index: 850;
}

/*
 * 动作条**不动**，就在它本来的右下角。
 *
 * 曾经为了躲卡片把它挪到桌子中间，看着很怪。其实不需要：卡片底边在 724，
 * 手牌从 788 才开始，两者纵向就不重叠——手牌横向再怎么铺也压不到卡片。
 * 右下角那个位置离卡片底边还有一百多像素。
 */

/* ── 头部 ─────────────────────────────────────────────── */

#tut-head {
  display: flex;
  /*
   * 居中对齐而不是 baseline：右上角那颗 × 是个 48×48 的方盒子，baseline 对齐会让
   * 盒子和它画出来的字形错开——看着是「× 在按钮外头」，点下去却要偏一点才中。
   */
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  padding-bottom: 13px;
}

#tut-kicker {
  color: var(--gold);
}

#tut-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

#tut-quit {
  /*
   * 点击区和图案是同一个盒子：字形在盒子里居中，盒子也不再往右偏。
   *
   * 之前写的是 `margin: -12px -12px -12px 0`，横向那个 -12 把盒子推出内容区、
   * 和画出来的 × 错位——看着点的是 ×，实际命中点在旁边。
   */
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  /* 字形占到盒子的八成，四周留一圈边，看着和点着是同一块地方。 */
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  /* 只做纵向抵消：盒子在布局上仍占 24px，头部不会因为按钮变大而长高。 */
  margin: -12px 0;
}

#tut-quit:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

/* ── 进度 ─────────────────────────────────────────────── */

#tut-progress {
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-bottom: 14px;
}

#tut-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--green));
  transition: width 260ms ease;
}

/* ── 字幕 ─────────────────────────────────────────────── */

#tut-say {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 194, 122, 0.25) transparent;
  padding-right: 4px;
}

#tut-title {
  margin: 0 0 13px;
  font-size: var(--tut-title-size);
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

#tut-text {
  margin: 0;
  font-size: var(--tut-text-size);
  line-height: 1.8;
  color: #d9d1c1;
  /* 剧本里的 `\n` 是认真的：像「出牌操作」这种分条说明，一条一行才好扫。
   * `pre-line` 只认换行，普通段落里的多余空白照样合并，不影响别的步骤。 */
  white-space: pre-line;
}

/* 「该你动手了」：比普通字幕重一档，一眼能看见 */
.tut-do {
  display: block;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 9px;
  border-left: 2px solid var(--gold);
  background: rgba(231, 194, 122, 0.09);
  color: #f0e4c8;
  font-size: var(--tut-do-size);
  line-height: 1.6;
}

/* ── 按钮 ─────────────────────────────────────────────── */

/* 卡片矮，两个按钮横着排，省一整行高度 */
#tut-foot {
  display: flex;
  flex-direction: row;
  gap: 9px;
  padding-top: 12px;
}

#tut-foot button {
  flex: 1 1 0;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  font-size: var(--tut-btn-size);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 90ms ease;
}

#tut-foot button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--gold-soft);
}

#tut-foot button:active:not(:disabled) {
  transform: translateY(1px);
}

#tut-foot button:disabled {
  opacity: 0.32;
  cursor: default;
}

#tut-foot button.primary {
  border-color: transparent;
  background: linear-gradient(180deg, #e7c27a, #c9a25c);
  color: #1b1610;
  font-weight: 600;
}

#tut-foot button.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #f0cf8c, #d4ac63);
}

/* 卡片矮，这句提示不占位了（「上一步/下一步」本来就写着） */
#tut-tip {
  display: none;
}

.hint {
  color: var(--muted);
}

.error {
  color: #f09494;
  min-height: 1.4em;
}

/* ── 开场遮罩 ─────────────────────────────────────────── */

#tut-splash {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px;
  text-align: center;
  background: rgba(6, 8, 8, 0.9);
  backdrop-filter: blur(8px);
}

#tut-splash h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
}

#tut-splash p {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: #cfc7b7;
}

#tut-splash button {
  margin-top: 6px;
  min-width: 168px;
  padding: 13px 26px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #e7c27a, #c9a25c);
  color: #1b1610;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

#tut-splash button:disabled {
  opacity: 0.5;
  cursor: default;
}