/* ---------- 开场闪回：纯黑、文字、按住推车、点锤子 ---------- */
.flash {
  --fx-u: min(1svh, 1.7778vw);
  position: fixed;
  inset: 0;
  z-index: 290;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f2ede2;
  background: #000;
  opacity: 0;
  transition: opacity .4s linear;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
  cursor: default;
}
.flash * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.flash[hidden] { display: none; }
.flash.is-on { opacity: 1; }
.flash.is-black { background: #000; }

.flash__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: max(4svh, env(safe-area-inset-top)) 4vw max(4svh, env(safe-area-inset-bottom));
  transform: translateX(var(--shake, 0px));
}

/* 闪回的极简视觉标点：尘土、硝烟、枪火、红边 */
.flash__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.flash__dust,
.flash__smoke,
.flash__flash,
.flash__danger {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.flash__dust {
  background:
    radial-gradient(ellipse at 18% 76%, rgba(160, 112, 62, .18), transparent 22%),
    radial-gradient(ellipse at 78% 78%, rgba(146, 95, 45, .14), transparent 20%),
    radial-gradient(ellipse at 50% 90%, rgba(112, 76, 38, .12), transparent 30%);
  filter: blur(2px);
  transform: translateY(5%);
}
.flash.is-charge .flash__dust {
  opacity: 1;
  animation: flash-dust 4.8s linear infinite;
}

.flash__flash {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 236, 175, .84), rgba(213, 117, 38, .28) 24%, transparent 58%);
  mix-blend-mode: screen;
}
.flash.is-fire .flash__flash {
  animation: flash-fire .48s ease-out both;
}

.flash__smoke {
  background:
    radial-gradient(ellipse at 48% 52%, rgba(196, 190, 174, .2), transparent 48%),
    linear-gradient(180deg, transparent 30%, rgba(126, 118, 103, .12) 58%, transparent 88%);
  filter: blur(8px);
}
.flash.is-smoke .flash__smoke {
  animation: flash-smoke 2.4s ease-out both;
}

.flash__danger {
  background:
    radial-gradient(ellipse at center, transparent 32%, rgba(92, 8, 4, .14) 58%, rgba(70, 4, 2, .46) 100%);
  transition: opacity .55s linear;
}
.flash.is-danger .flash__danger { opacity: 1; }

.flash__line {
  width: min(38em, 84vw);
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(21px, 3.35svh, 37px);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .04em;
  text-align: center;
  color: #f2ede2;
  transition: opacity .5s linear, filter .5s linear;
}
.flash__line.is-shake { animation: flash-jitter .2s steps(2) 2; }
.flash__line.is-out { opacity: 0; }

.flash__line--mud { white-space: pre-line; }
.flash__line.is-sinking {
  transform: translateY(calc(4.44 * var(--fx-u)));
  filter: blur(calc(.22 * var(--fx-u)));
  opacity: .2;
  transition: transform 1.2s ease-in, filter 1.2s ease-in, opacity 1.2s ease-in;
}

/* 第二幕：同一行起步于画面下方，按住才升到正中 */
.flash__line--push {
  --travel: 19svh;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(38em, 84vw);
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;   /* 只有 .flash__half 的文字可以按住 */
  /* p=0 时中心在约 69svh，p=1 时升到屏幕正中；不再从最底边起 */
  transform: translate(-50%, calc(-50% + (1 - var(--p, 0)) * var(--travel)));
  filter: blur(calc((1 - var(--p, 0)) * .07em));
  opacity: calc(.72 + var(--p, 0) * .28);
  transition: none;
  animation: none;
}

/* 推车进度：不抢字，只在文字下方留一条很细的铜色受力线 */
.flash__prog {
  position: absolute;
  left: 50%;
  bottom: -1.2em;
  width: min(18em, 62vw);
  height: 1px;
  transform: translateX(-50%);
  background: rgba(200, 163, 90, .16);
  overflow: hidden;
}
.flash__prog i {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, rgba(200, 163, 90, .2), rgba(224, 184, 105, .9));
  box-shadow: 0 0 8px rgba(200, 163, 90, .35);
  transition: width .08s linear;
}
.flash__half {
  grid-area: 1 / 1;        /* 两半叠在同一行，避免看起来像两行字 */
  display: block;
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  pointer-events: auto;
  transition: transform .12s var(--ease-out), opacity .12s linear;
}
.flash__line--push.is-cracked .flash__half--l {
  transform: translateX(calc(-.89 * var(--fx-u)));
}
.flash__line--push.is-cracked .flash__half--r {
  transform: translateX(calc(.89 * var(--fx-u)));
}

/* 第三幕：红底的盾 / 你见过这面盾 */
.flash__line--charge,
.flash__line--horse,
.flash__line--shield,
.flash__line--seen,
.flash__line--hammer,
.flash__line--black {
  opacity: 0;
}
.flash__line--charge.is-in,
.flash__line--horse.is-in,
.flash__line--shield.is-in,
.flash__line--seen.is-in,
.flash__line--hammer.is-in,
.flash__line--black.is-in {
  opacity: 1;
}
.flash__line--charge {
  font-size: clamp(20px, 3svh, 32px);
  transition: opacity .8s linear;
}
.flash__line--horse {
  font-size: clamp(20px, 3svh, 32px);
  color: rgba(242, 237, 226, .82);
  transition: opacity .8s linear;
}
.flash__line--shield {
  font-size: clamp(19px, 2.75svh, 30px);
  line-height: 1.95;
  transition: opacity 1.8s linear;
}
.flash__red { color: #a3231b; }
.flash__line--seen {
  font-size: clamp(15px, 2.15svh, 23px);
  color: rgba(242, 237, 226, .6);
  transition: opacity 1.2s linear;
}

/* 第四幕：锤子 */
.flash__line--hammer {
  font-size: clamp(28px, 4.15svh, 46px);
  letter-spacing: .08em;
  transition: opacity .7s linear;
}
.flash__word {
  display: inline-block;
  padding: 0 .1em .04em;
  font: inherit;
  font-size: 1.5em;
  font-weight: 700;
  color: #fff6dd;
  background: none;
  border: 0;
  border-bottom: 1px dotted rgba(200, 163, 90, .85);
  cursor: pointer;
  filter: brightness(1.2);
  text-shadow: 0 0 10px rgba(200, 163, 90, .5), 0 0 2px rgba(255, 240, 200, .7);
  transform-origin: 50% 60%;
}
.flash__word:hover { color: #fffdf2; text-shadow: 0 0 14px rgba(200, 163, 90, .75); }
.flash__word.is-breathing {
  animation: flash-breathe 1.2s ease-in-out 2;
}
.flash__word.is-slam {
  transform: translateY(calc(4.22 * var(--fx-u))) scale(1.35);
  filter: brightness(.55);
  transition: transform .09s cubic-bezier(.7, 0, .9, .4), filter .09s linear;
}

/* 第五幕：三行黑屏独白 */
.flash__line--black {
  font-size: clamp(23px, 3.35svh, 38px);
  line-height: 2.1;
  transition: opacity 1.2s linear;
}

/* 提示与跳过 */
.flash__hint {
  position: absolute;
  left: 50%;
  bottom: max(9svh, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.75svh, 20px);
  letter-spacing: .2em;
  color: rgba(169, 123, 50, .86);
  white-space: nowrap;
}
.flash__skip {
  position: absolute;
  top: max(2.4svh, env(safe-area-inset-top));
  right: max(2.4vw, env(safe-area-inset-right));
  z-index: 3;
  min-width: 64px;
  min-height: 40px;
  padding: .4svh .8em;
  font-family: var(--font-serif);
  font-size: clamp(11px, 1.1svh, 13px);
  letter-spacing: .16em;
  color: rgba(242, 237, 226, .46);
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(242, 237, 226, .16);
  cursor: pointer;
}
.flash__skip:hover { color: rgba(242, 237, 226, .8); border-color: rgba(242, 237, 226, .35); }

@keyframes flash-jitter {
  /* 用独立的 translate 属性，不要覆盖推车行本身的 transform：
     那一层 transform 负责居中 + --p 位移，被覆盖会让整行瞬间跳到屏幕边缘 */
  0% { translate: 0 0; }
  50% { translate: calc(.055 * var(--fx-u)) calc(-.055 * var(--fx-u)); }
  100% { translate: 0 0; }
}
@keyframes flash-dust {
  0% { transform: translate(0, 6%); opacity: .55; }
  50% { opacity: 1; }
  100% { transform: translate(1.5%, -5%); opacity: .55; }
}
@keyframes flash-fire {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes flash-smoke {
  0% { opacity: 0; }
  18% { opacity: .75; }
  100% { opacity: 0; }
}
@keyframes flash-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* 开场黑幕：标题 / 闪回 / 独白期间盖住内帐 */
.opening-veil {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #000;
  opacity: 1;
  pointer-events: none;
  transition: opacity .7s linear;
}
.opening-veil.is-off { opacity: 0; }
.opening-veil[hidden] { display: none; }

@media (orientation: portrait) {
  .flash__stage { padding: max(5svh, env(safe-area-inset-top)) 5vw max(5svh, env(safe-area-inset-bottom)); }
  .flash__line { width: min(34em, 88vw); font-size: clamp(21px, 3.2svh, 35px); line-height: 1.8; }
  .flash__line--shield { font-size: clamp(18px, 2.7svh, 28px); }
  .flash__line--seen { font-size: clamp(15px, 2.1svh, 22px); }
  .flash__line--hammer { font-size: clamp(28px, 4.0svh, 42px); }
  .flash__line--black { font-size: clamp(23px, 3.2svh, 35px); }
  .flash__hint { bottom: max(10svh, env(safe-area-inset-bottom)); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .flash__line { font-size: clamp(18px, 3.1svh, 28px); line-height: 1.65; }
  .flash__line--shield { font-size: clamp(16px, 2.5svh, 24px); }
  .flash__line--seen { font-size: clamp(14px, 2.0svh, 20px); }
  .flash__line--hammer { font-size: clamp(23px, 3.7svh, 35px); }
  .flash__line--black { font-size: clamp(21px, 3.1svh, 31px); }
  .flash__hint { bottom: max(4svh, env(safe-area-inset-bottom)); }
  .flash__skip { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .flash__line,
  .flash__line.is-shake,
  .flash__word.is-breathing { animation: none; }
  .flash__line.is-sinking { transition: opacity 1.2s linear; filter: none; }
  .flash__line--push { filter: none; }
  .flash.is-charge .flash__dust { animation: none; opacity: .35; }
  .flash.is-fire .flash__flash { animation: none; opacity: .35; }
  .flash.is-smoke .flash__smoke { animation: none; opacity: .2; }
  .flash__danger { transition: none; }
}

/* ---------- 内帐醒来后的伤口红边（整页） ---------- */
.wound {
  position: fixed;
  inset: 0;
  z-index: 2;             /* 在场景图和可交互光点（z:5）之下，只染边缘 */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s linear;
  background:
    radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0) 26%,
      rgba(92, 8, 4, .14) 50%,
      rgba(96, 5, 3, .62) 100%);
  box-shadow: inset 0 0 24vmin rgba(88, 4, 2, .76);
}
.wound.is-on {
  opacity: 1;
  animation: wound-pulse 2.4s ease-in-out infinite;
}
@keyframes wound-pulse {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wound.is-on { animation: none; opacity: .88; }
}