/* 墨线分镜 · 塔罗关卡加载（W2-A）。规格 S3：docs/superpowers/specs/2026-10-13-ink-panels-ui-design.md
 *
 * 覆盖方式：browser-main.js 的 showTarotLoadScreen 给 overlay 加 .ink-loading，
 * 这里所有规则都以 .tarot-load-overlay.ink-loading 起头，选择器比 styles.css 里同名旧规则
 * 多一个类且更晚加载，所以不用 !important。旧规则不删（W4 统一清理）。
 * 不动牌面：renderCardSVG / 牌图片原样，这里只换牌周边（底、轮盘配色、边框、HUD）。
 *
 * 几何前提：牌在屏幕上的位置只由 styles.css 的固定像素决定，与视口无关——
 *   正中那张牌放大 2.3 倍后约 221x354px，水平居中，纵向占 y=198..552，中心 y=375。
 *   所以速度线中心、牌名胶带位置都按这组数写死（--ink-load-cy）。
 *
 * 时间轴：本文件里的动效都由 .is-shown / .is-impact / .is-reddened 触发，
 * 触发时刻在 browser-main.js 的 tarotLoadLater 里，这里只定「播多久」，全部 <= 440ms。 */

.tarot-load-overlay.ink-loading {
  --ink-load-cy: 375px;
  background: #151515;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--font-cjk);
  color: var(--white);
  -webkit-user-select: none;
  user-select: none;
}
/* 精英 / 首领的旧规则会把底色染红（0,2,0），这里压回墨黑；红色改由贴纸、红条、网点层承担 */
.tarot-load-overlay.ink-loading.is-elite,
.tarot-load-overlay.ink-loading.is-boss {
  background: #151515;
}

/* ---------- 底：速度线 / 放大一次的速度线 / 四角网点暗角 ---------- */
.tarot-load-overlay.ink-loading .ink-load-speed,
.tarot-load-overlay.ink-loading .ink-load-burst {
  position: absolute;
  left: 50%;
  top: var(--ink-load-cy);
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  pointer-events: none;
  /* 中心留一个洞（牌在洞里），向外淡出：线从牌后面「射」出来 */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 170px, #000 330px, rgba(0, 0, 0, .3) 640px, transparent 980px);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 170px, #000 330px, rgba(0, 0, 0, .3) 640px, transparent 980px);
}
.tarot-load-overlay.ink-loading .ink-load-speed {
  background: repeating-conic-gradient(from 3deg at 50% 50%, rgba(255, 255, 255, .22) 0 1.5deg, transparent 1.5deg 7deg);
}
.tarot-load-overlay.ink-loading .ink-load-burst {
  opacity: 0;
  background: repeating-conic-gradient(from 1deg at 50% 50%, rgba(255, 255, 255, .8) 0 1deg, transparent 1deg 5deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 150px, #000 260px, rgba(0, 0, 0, .35) 560px, transparent 860px);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 150px, #000 260px, rgba(0, 0, 0, .35) 560px, transparent 860px);
}
.tarot-load-overlay.ink-loading .ink-load-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .26) 26%, transparent 29%);
  background-size: 8px 8px;
  -webkit-mask-image:
    radial-gradient(circle at 0 0, #000 0, transparent 200px),
    radial-gradient(circle at 100% 0, #000 0, transparent 200px),
    radial-gradient(circle at 0 100%, #000 0, transparent 200px),
    radial-gradient(circle at 100% 100%, #000 0, transparent 200px);
  mask-image:
    radial-gradient(circle at 0 0, #000 0, transparent 200px),
    radial-gradient(circle at 100% 0, #000 0, transparent 200px),
    radial-gradient(circle at 0 100%, #000 0, transparent 200px),
    radial-gradient(circle at 100% 100%, #000 0, transparent 200px);
}

/* ---------- 轮盘：暖棕金色换成墨线（白圈、白刻度、黑底、纸色刻度带、红点缀） ----------
 * renderRouletteWheelSVG 的颜色都写在 fill/stroke 属性上（表现属性优先级为 0），
 * 这里用属性选择器逐色覆盖，不动 src/tarot-art.js。 */
.tarot-load-overlay.ink-loading .tarot-roulette-svg {
  filter: none; /* 旧规则是一团 36px 的暖黑模糊投影 */
}
.tarot-load-overlay.ink-loading .tarot-roulette-svg [stroke="url(#clock_gold)"] { stroke: #fff; }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [fill="url(#clock_gold)"] { fill: #fff; }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [fill="#DFBE79"] { fill: #fff; }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [fill="url(#wheel_clock_metal)"] { fill: #0c0c0c; }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [fill="url(#parchment_dial)"] { fill: var(--paper); }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [fill="url(#cinnabar_grad)"] { fill: var(--red); }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [fill="url(#flame_gold_grad)"] { fill: #fff; }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [fill="#C13A26"] { fill: var(--red); }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [stroke="#C13A26"] { stroke: var(--red); }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [fill="#8B2113"] { fill: var(--red-dk); }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [fill="rgba(245, 158, 11, 0.28)"] { fill: rgba(255, 212, 0, .55); }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [stroke="rgba(223, 190, 121, 0.55)"] { stroke: rgba(255, 255, 255, .7); }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [stroke="rgba(223, 190, 121, 0.45)"],
.tarot-load-overlay.ink-loading .tarot-roulette-svg [stroke="rgba(223, 190, 121, 0.35)"] { stroke: rgba(255, 255, 255, .55); }
.tarot-load-overlay.ink-loading .tarot-roulette-svg [stroke="rgba(193, 58, 38, 0.4)"] { stroke: rgba(232, 64, 47, .7); }
/* 几道主圆环加粗，墨线感；r 是 renderRouletteWheelSVG 里写死的半径 */
.tarot-load-overlay.ink-loading .tarot-roulette-svg circle[r="486"],
.tarot-load-overlay.ink-loading .tarot-roulette-svg circle[r="436"],
.tarot-load-overlay.ink-loading .tarot-roulette-svg circle[r="366"],
.tarot-load-overlay.ink-loading .tarot-roulette-svg circle[r="290"] { stroke-width: 6; }
/* 舞台四边各外扩 8px：冲击帧抖动（最大 6px）时不会在屏幕边缘露出一条底色。
 * 外扩后舞台左上角在 (-8,-8)，轮盘 top 同步 +8（78 -> 86），牌在屏幕上的位置不变。 */
.tarot-load-overlay.ink-loading .tarot-roulette-stage {
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
}
.tarot-load-overlay.ink-loading .tarot-roulette-wheel {
  top: 86px;
}
/* 揭面后轮盘整体退成背景：沿用旧的 1.2s 淡出，但不再糊（blur 在 1160px 的 SVG 上很贵） */
.tarot-load-overlay.ink-loading .tarot-roulette-wheel.has-spun .tarot-roulette-svg {
  opacity: .42;
  filter: none;
  transition: opacity 1.2s ease;
}

/* ---------- 牌的周边（不碰牌面）：白边 + 去掉金/朱砂光晕 ---------- */
.tarot-load-overlay.ink-loading .tarot-card-front,
.tarot-load-overlay.ink-loading .tarot-card-back {
  border: 1.2px solid #fff;
  box-shadow: none;
}
.tarot-load-overlay.ink-loading .tarot-load-card.is-cur .tarot-card-flipper.is-revealed {
  filter: none;
}
.tarot-load-overlay.ink-loading.is-reddened .tarot-load-card.is-cur .tarot-card-flipper.is-reversed {
  filter: none;
}

/* ---------- 逆位：红色滤镜改成红色网点叠层 ----------
 * 仍是 overlay 的第一个子节点、不写 z-index（理由见 styles.css 里 .tarot-load-red-filter 的注释）；
 * 仍由 .is-reddened 在落定前 0.1s 触发、0.1s 到满，时序不变。 */
.tarot-load-overlay.ink-loading .tarot-load-red-filter,
.tarot-load-overlay.ink-loading.is-elite .tarot-load-red-filter,
.tarot-load-overlay.ink-loading.is-boss .tarot-load-red-filter {
  background-color: transparent;
  background-image: radial-gradient(circle, var(--red) 30%, transparent 33%);
  background-size: 9px 9px;
}

/* ---------- 左上 HUD：关卡号、状态贴纸、加载条 ---------- */
.tarot-load-overlay.ink-loading .ink-load-hud {
  position: absolute;
  left: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100% - 32px);
}
.tarot-load-overlay.ink-loading .ink-load-title { padding: 2px 0 2px 4px; }
.tarot-load-overlay.ink-loading .ink-load-sfx {
  --sfx-size: clamp(38px, 11.4vw, 46px);
  --sfx-off: 4px;
}
.tarot-load-overlay.ink-loading .ink-load-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.tarot-load-overlay.ink-loading .ink-load-stageno {
  font-size: 17px;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--white);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill; /* 轮盘白圈转进来时压在字后面，黑描边保证读得清 */
}
.tarot-load-overlay.ink-loading.is-elite .ink-load-stageno { color: var(--red); }
/* 黑底红字贴纸：黑底在墨黑背景上要靠红边才站得住 */
.tarot-load-overlay.ink-loading .ink-load-tag {
  background: var(--ink);
  color: var(--red);
  border-color: var(--red);
  box-shadow: 3px 3px 0 rgba(232, 64, 47, .5);
  font-size: 12px;
  padding: 2px 8px;
}
.tarot-load-overlay.ink-loading .ink-load-barbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 4px;
}
.tarot-load-overlay.ink-loading .ink-load-bar {
  --bar-h: 16px;
  width: clamp(150px, 46vw, 190px);
  box-shadow: 0 0 0 2.5px var(--white); /* 黑框在墨黑底上靠白描边显形 */
}
.tarot-load-overlay.ink-loading .ink-load-bar > i {
  width: var(--v, 18%);
  transition: width .2s linear;
}
.tarot-load-overlay.ink-loading .ink-load-pct {
  min-width: 3.2em;
  font-size: 24px;
  line-height: 1;
  color: var(--white);
  letter-spacing: .04em;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}

/* ---------- 牌名黑胶带：揭牌冲击帧时从右侧拍入 ----------
 * 外层只负责定位和抖动，内层负责拍入动画，两个 transform 不打架。
 * 位置：贴着牌的右上角、牌顶（y=198）以上，不盖牌面。 */
.tarot-load-overlay.ink-loading .ink-load-tape-wrap {
  position: absolute;
  top: 148px;
  right: calc(50% - 114px);
  z-index: 26;
  pointer-events: none;
}
.tarot-load-overlay.ink-loading .ink-load-tape {
  opacity: 0;
  font-size: 17px;
  letter-spacing: .06em;
  padding: 5px 14px;
  box-shadow: 0 0 0 2px var(--white), 4px 4px 0 var(--red);
}

/* ---------- 判词：白底格 + 胶带 ---------- */
.tarot-load-overlay.ink-loading .ink-load-verdict {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(26px, 5.5vh, 50px);
  z-index: 25;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.tarot-load-overlay.ink-loading .ink-load-verdict__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 20px 8px;
  background: var(--white);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  box-shadow: 0 0 0 2px var(--white), 6px 6px 0 var(--red);
  transform: rotate(-1.2deg);
}
.tarot-load-overlay.ink-loading .ink-load-verdict__tape {
  position: absolute;
  top: -12px;
  left: -14px;
  font-size: 10px;
  padding: 1px 9px;
  transform: rotate(-8deg);
}
.tarot-load-overlay.ink-loading .ink-load-verdict__text {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .12em;
  padding-left: .12em;
  white-space: nowrap;
}
.tarot-load-overlay.ink-loading .ink-load-verdict__note {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .24em;
  padding-left: .24em;
  color: #555;
}
/* 牌底边固定在 y=552，判词格（连同突出 12px 的胶带）必须停在它下面。
 * 视口高度 >= 700 时底边留白充足；矮屏（如 360x640，牌下只剩 88px）收紧留白和行高，
 * 格高约 53px，贴底 10px，胶带顶在 y=577-12=565，离牌底边 13px。 */
.tarot-load-overlay.ink-loading .ink-load-verdict__text,
.tarot-load-overlay.ink-loading .ink-load-verdict__note { line-height: 1.15; }
@media (max-height: 699px) {
  .tarot-load-overlay.ink-loading .ink-load-verdict { bottom: 10px; }
  .tarot-load-overlay.ink-loading .ink-load-verdict__cell { padding: 7px 18px 6px; }
}

/* ---------- 首领关：底部红色斜条 ---------- */
.tarot-load-overlay.ink-loading .ink-load-bossband {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: clamp(58px, 9.5vh, 80px);
  z-index: 20;
  pointer-events: none;
  background: radial-gradient(circle, rgba(17, 17, 17, .4) 22%, transparent 25%) 0 0 / 7px 7px, var(--red);
  clip-path: polygon(0 52%, 100% 0, 100% 100%, 0 100%);
}
/* 红条上的判词格，投影改黑（红投影落在红底上就没了） */
.tarot-load-overlay.ink-loading.is-boss .ink-load-verdict__cell {
  box-shadow: 0 0 0 2px var(--white), 6px 6px 0 var(--ink);
}

/* ---------- 揭牌白闪 ---------- */
.tarot-load-overlay.ink-loading .ink-load-flash {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

/* ---------- 冲击帧：.is-impact 由 browser-main.js 在揭面缓动走到一半（flipDelay + 150ms）时加上 ----------
 * 白闪 80ms；抖动 280ms（振幅 6px）；速度线放大一次 420ms；胶带拍入 280ms。最长 420ms。 */
.tarot-load-overlay.ink-loading.is-impact .ink-load-flash { animation: ink-load-flash .08s linear both; }
.tarot-load-overlay.ink-loading.is-impact .tarot-roulette-stage,
.tarot-load-overlay.ink-loading.is-impact .ink-load-hud,
.tarot-load-overlay.ink-loading.is-impact .ink-load-tape-wrap,
.tarot-load-overlay.ink-loading.is-impact .ink-load-verdict { animation: ink-load-shake .28s linear both; }
.tarot-load-overlay.ink-loading.is-impact .ink-load-burst { animation: ink-load-burst .42s cubic-bezier(.2, .7, .3, 1) both; }
.tarot-load-overlay.ink-loading.is-impact .ink-load-tape { animation: ink-load-tape .28s cubic-bezier(.2, .9, .3, 1.15) both; }

@keyframes ink-load-flash { from { opacity: .7; } to { opacity: 0; } }
@keyframes ink-load-shake {
  0%, 100% { transform: translate(0, 0); }
  14% { transform: translate(-6px, 3px); }
  28% { transform: translate(6px, -4px); }
  42% { transform: translate(-5px, 3px); }
  57% { transform: translate(4px, -2px); }
  72% { transform: translate(-2px, 1px); }
  86% { transform: translate(1px, 0); }
}
@keyframes ink-load-burst {
  from { transform: scale(.55); opacity: .95; }
  to { transform: scale(1.7); opacity: 0; }
}
@keyframes ink-load-tape {
  0% { transform: translateX(130%) rotate(-3deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(0) rotate(-3deg); opacity: 1; }
}

/* 减少动态效果：不白闪、不抖、不放大速度线；胶带直接到位（时间轴本身不变，仍由脚本驱动） */
@media (prefers-reduced-motion: reduce) {
  .tarot-load-overlay.ink-loading .ink-load-flash,
  .tarot-load-overlay.ink-loading .ink-load-burst { display: none; }
  .tarot-load-overlay.ink-loading.is-impact .tarot-roulette-stage,
  .tarot-load-overlay.ink-loading.is-impact .ink-load-hud,
  .tarot-load-overlay.ink-loading.is-impact .ink-load-tape-wrap,
  .tarot-load-overlay.ink-loading.is-impact .ink-load-verdict { animation: none; }
  .tarot-load-overlay.ink-loading.is-impact .ink-load-tape { animation-duration: .01ms; }
}