/* tutorial.css —— 距骨骰 · 教学局浮层（由 function/tutorial.js 使用）
 *
 * ⚠ 尺寸只用 vmin / % / px。
 *   css/mobile.css 是由 style.css 里「所有含 vw/vh 的规则」派生出来的，
 *   这里一旦写 vw/vh，竖屏 rot90 时就会和别的界面不同步（历史踩坑）。
 *
 * 层级基准（与项目其它浮层对齐）：
 *   棋盘标记 9990~9999 / 结算黑幕 999997。
 *   教学卡片放在 9994，保证压在棋盘和骰子动画之上，又低于结算黑幕。
 */

/* ===================== 容器 ===================== */
.tut-layer {
  position: absolute;
  inset: 0;
  z-index: 9994;
  pointer-events: none;      /* 除了卡片本身，其余点击全部透传给棋盘 */
  font-family: "SimHei", "Heiti SC", sans-serif;
}

/* ===================== 卡片 ===================== */
.tut-card {
  position: absolute;
  left: 1.6%;
  top: 4.4%;
  width: 30%;
  min-width: 206px;
  max-width: 460px;
  box-sizing: border-box;
  padding: min(14px, 2.2vmin) min(15px, 2.4vmin) min(12px, 1.9vmin);
  pointer-events: auto;

  background:
    linear-gradient(180deg, rgba(28, 22, 15, .96), rgba(12, 9, 7, .97));
  border: 1px solid rgba(201, 169, 78, .42);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .85),
    0 min(10px, 1.6vmin) min(30px, 4.4vmin) rgba(0, 0, 0, .75),
    inset 0 1px 0 rgba(255, 235, 180, .08);

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.2, .8, .3, 1);
}
.tut-card.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* 左上角的小折角，弱化「网页弹窗」感 */
.tut-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: min(18px, 3vmin);
  height: min(18px, 3vmin);
  border-left: 1px solid rgba(201, 169, 78, .55);
  border-top: 1px solid rgba(201, 169, 78, .55);
  border-top-left-radius: 3px;
  pointer-events: none;
}

.tut-step {
  color: #8d7c55;
  font-size: clamp(9.5px, 1.35vmin, 11px);
  letter-spacing: .22em;
  margin-bottom: min(5px, .8vmin);
  min-height: 1em;
}

.tut-title {
  color: #e8d18a;
  font-size: clamp(12.5px, 1.75vmin, 15.5px);
  letter-spacing: .1em;
  line-height: 1.35;
  margin-bottom: min(7px, 1.1vmin);
}

.tut-body {
  color: #c9bfab;
  font-size: clamp(11.5px, 1.55vmin, 14px);
  line-height: 1.72;
  letter-spacing: .02em;
  word-break: break-word;
}
.tut-body b { color: #f2e6c4; font-weight: 700; }
.tut-body em { color: #e8503a; font-style: normal; }
.tut-body br { line-height: 1.9; }

/* ===================== 按钮 ===================== */
.tut-actions {
  display: flex;
  gap: min(10px, 1.6vmin);
  margin-top: min(11px, 1.8vmin);
}
.tut-actions:empty { display: none; }

.tut-btn {
  appearance: none;
  cursor: pointer;
  padding: min(7px, 1.1vmin) min(18px, 2.9vmin);
  border: 1px solid rgba(232, 209, 138, .55);
  border-radius: 2px;
  background: linear-gradient(180deg, #9d1b1b, #6d0f0f);
  color: #f6e9c8;
  font-family: inherit;
  font-size: clamp(11.5px, 1.5vmin, 13.5px);
  letter-spacing: .14em;
  transition: filter .18s ease, transform .12s ease;
}
.tut-btn:hover { filter: brightness(1.14); }
.tut-btn:active { transform: translateY(1px) scale(.985); }

.tut-skip {
  appearance: none;
  cursor: pointer;
  position: absolute;
  right: min(12px, 2vmin);
  top: min(10px, 1.6vmin);
  padding: 2px 4px;
  border: 0;
  background: none;
  color: #7d735f;
  font-family: inherit;
  font-size: clamp(9.5px, 1.3vmin, 11px);
  letter-spacing: .1em;
  transition: color .18s ease;
}
.tut-skip:hover { color: #c9b98c; }

/* ===================== 高亮圈 ===================== */
.tut-ring {
  position: absolute;
  z-index: 9993;
  box-sizing: border-box;
  border: 2px solid rgba(255, 215, 106, .85);
  border-radius: 4px;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 min(18px, 2.6vmin) rgba(255, 200, 80, .55),
    inset 0 0 min(16px, 2.4vmin) rgba(255, 200, 80, .18);
  animation: tutRingPulse 1.6s ease-in-out infinite;
}
/* 虚线 = 「要打掉的目标那列」（在对面棋盘上） */
.tut-ring.is-src {
  border-style: dashed;
  border-color: rgba(255, 92, 72, .9);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 min(18px, 2.6vmin) rgba(220, 60, 40, .55),
    inset 0 0 min(16px, 2.4vmin) rgba(220, 60, 40, .18);
  animation-delay: .25s;
}

/* 实心强脉冲 = 「这一列就是你应该点的地方」。
   比默认圈更亮、更快，配合同一列上的下指箭头使用。 */
.tut-ring.is-target {
  border-width: 3px;
  border-color: rgba(255, 228, 132, 1);
  animation-duration: 1.05s;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, .72),
    0 0 min(26px, 3.8vmin) rgba(255, 210, 90, .9),
    inset 0 0 min(22px, 3.2vmin) rgba(255, 205, 85, .32);
}

/* 「放这里」的箭头：目标列的空格子上方，一个纯 CSS 三角，缓缓下点两下。
   原来是金底黑字的文字气泡 —— 压住列分数、还抢走全部注意力，所以只留箭头。
   rot90 竖屏下整页一起转，偏移方向与布局坐标一致，不用另写媒体查询。 */
.tut-arrow {
  position: absolute;
  z-index: 9994;
  width: 0;
  height: 0;
  transform: translate(-50%, 0);
  border-left: min(10px, 1.7vmin) solid transparent;
  border-right: min(10px, 1.7vmin) solid transparent;
  border-top: min(14px, 2.35vmin) solid #ffe084;
  /* 两层阴影：金色外发光负责醒目，深色投影负责在浅色骰面上也看得清 */
  filter: drop-shadow(0 0 min(6px, 1vmin) rgba(255, 205, 85, .95))
          drop-shadow(0 1px 2px rgba(0, 0, 0, .85));
  pointer-events: none;
  animation: tutArrowBob .82s ease-in-out infinite;
}

@keyframes tutArrowBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 4px); }
}

@keyframes tutRingPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.012); }
}

/* ===================== 对局内要禁用的入口 =====================
   教学局固定难度 1（拉陶）。右上角骰子会弹难度浮层，一旦改难度，
   「对手是拉陶」就不成立了 —— 教学期间直接屏蔽，避免玩家自己把自己教乱。 */
body.tut-on #cornerSlot,
body.tut-on #cornerSlot2,
body.tut-on #diffRow {
  pointer-events: none !important;
  opacity: .28;
}

/* 手机横屏（短边 ≤ 560px）：卡片更窄，字号压到 11.5px 仍要能读 */
@media (max-width: 560px), (max-height: 560px) {
  .tut-card {
    left: 1.2%;
    top: 3%;
    width: 31%;
    min-width: 178px;
    padding: 10px 11px 9px;
  }
  .tut-title { font-size: 12px; margin-bottom: 5px; }
  .tut-body { font-size: 11.5px; line-height: 1.62; }
  .tut-step { font-size: 9px; margin-bottom: 3px; }
  .tut-btn { padding: 5px 14px; font-size: 11.5px; }
}