/* 墨契 · 教学层样式（js/tutorial.js 专用）
 * 只增不改：#tutorial-bar 的既有样式在 css/style.css 里，这里用更高优先级覆盖位置。
 */

/* 聚光层：目标区原亮度，四周压暗。大范围 box-shadow 是这里的全部戏法。 */
#ip-spotlight {
  /* 挂 #frame 直下、用视口坐标：left/top/宽高都由 js/tutorial.js 按 #wrap 的
     getBoundingClientRect() 换算后写入（不再跟着舞台的 transform 缩放走）。 */
  position: fixed;
  z-index: 22;
  pointer-events: none;
  border-radius: 8px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.55), /* [agent-4] 0.72 太黑，压到 0.55 */
    0 0 0 1.5px rgba(255, 210, 125, 0.55),
    0 0 22px 3px rgba(255, 190, 110, 0.28);
}
#ip-spotlight[hidden] { display: none; }

/* 信息条：视口底部居中。原先在顶部，盖住敌方血条与名字；
 * 挪到 #wrap 里又会随舞台缩放、被紧凑触控高度撑高盖住手牌，
 * 所以 tutorial.js 把它移到 #frame 直下，这里按真实 CSS px 定位。 */
body #tutorial-bar {
  position: fixed;
  left: 50%;
  right: auto;
  top: auto;
  /* 不加 !important：位置由 js/tutorial.js 的 fit() 统一裁定（避开右侧按钮列与手牌），
     它写内联 bottom；这里只是「尚未量过」时的默认贴底值。
     原先的 !important 会盖掉内联值，导致 fit() 抬条无效、条压住「结束回合」。 */
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(760px, calc(100% - 20px));
  max-width: none;
  /* 压在弹窗之下：#modal-detail 是 .modal(z-index 40)，长按看牌时卡面必须完整可见；
     仍高于牌桌画布与 UI 层（≤5）。#fade(60)/toast(70) 依旧在条之上。 */
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 3px;
  background: rgba(26, 36, 30, 0.96);
  border: 1px solid rgba(140, 170, 137, 0.85);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}
body #tutorial-bar[hidden] { display: none; }
/* #wrap 靠 transform 形成层叠上下文，条是 #frame 的子节点、永远画在整个 #wrap（含 .modal 40）
   之上，z-index 压不下去。所以详情/设置等弹窗一开就把条藏起来，保证卡面与正文完整可见。 */
body #tutorial-bar.ip-bar-hidden { display: none; }
/* 窄屏一行放不下正文，就让正文独占第二行（否则提示被挤成五行）。 */
body #tutorial-bar b { order: 0; flex: 0 0 auto; font-size: 12px; letter-spacing: 1px; }
body #tutorial-bar #tutorial-hint { order: 2; flex: 1 0 100%; min-width: 0; }
body #tutorial-bar #tutorial-replay { order: 1; margin-left: auto; }
body #tutorial-bar #tutorial-skip { order: 1; }
/* 条已在视口坐标系，紧凑模式的 --touch-min(126px 逻辑值) 在这里没有意义 */
body #tutorial-bar .btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 1px;
}

/* [agent-4] 归属：教程信息条方位。契约见 docs/pvp-interfaces.md
 * 按方位摆的时候由 js 写内联 left/top/width；这里把 CSS 的居中变换与贴底解除，
 * 否则 translateX(-50%) 会把「左上/左侧」这两档整体左移半个条宽。 */
body #tutorial-bar.ip-bar-placed {
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  transform: none;
  width: auto;
}

/* 紧凑档：舞台铺满视口（1280x720 等）时，常高条会盖住车道/手牌，
 * 换成贴底单行、正文最多两行截断、按钮压到 28px。 */
body #tutorial-bar.ip-bar-slim {
  flex-wrap: nowrap;
  gap: 6px 8px;
  padding: 4px 10px;
  font-size: 12px;
}
body #tutorial-bar.ip-bar-slim #tutorial-hint {
  order: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
body #tutorial-bar.ip-bar-slim #tutorial-replay { order: 1; margin-left: 0; }
body #tutorial-bar.ip-bar-slim #tutorial-skip { order: 2; }
body #tutorial-bar.ip-bar-slim .btn { min-height: 28px; padding: 0 10px; font-size: 12px; }

/* 出现动画 */
#ip-spotlight.ip-reveal { animation: ip-pop 0.3s ease-out both; }
#tutorial-bar.ip-reveal { animation: ip-fade 0.26s ease-out both; }
@keyframes ip-pop {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes ip-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 减少动态效果：只换位置，不做动画（style.css 里已有全局关闭，这里兜底） */
body.reduced #ip-spotlight,
body.reduced #tutorial-bar { animation: none !important; }