@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Yomogi&display=swap");
.chapter-memory-back{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid rgba(180,130,195,.45);border-radius:999px;background:rgba(255,255,255,.88);color:#875b9e;font:700 11px "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;letter-spacing:.04em;white-space:nowrap;cursor:pointer}
.chapter-memory-back[hidden]{display:none}
.chapter-memory-back:hover{background:#fff6fc;border-color:#c78ccc}
.chapter-memory-back:focus-visible{outline:3px solid #a56ec5;outline-offset:2px}
@media(max-width:560px){.chapter-label{min-width:0}#chapter-month{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chapter-memory-back{min-height:38px;padding:0 8px;flex:none;font-size:clamp(9px,2.5vw,11px)}}
.game-header{position:relative;z-index:60}
.sound-control{position:relative;flex:none}
.sound-panel{position:absolute;right:0;top:calc(100% + 11px);width:min(272px,calc(100vw - 24px));padding:15px 16px 16px;border:1px solid rgba(184,128,196,.38);border-radius:16px;background:rgba(255,250,255,.98);box-shadow:0 12px 30px rgba(75,45,99,.18);color:#62496e;font:700 12px "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif}
.sound-panel[hidden]{display:none}
.sound-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:14px}
.sound-master-toggle{min-height:32px;padding:5px 12px;border:1px solid #ce9acf;border-radius:999px;background:#fbe4f4;color:#844d91;font:700 11px "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;cursor:pointer}
.sound-master-toggle[aria-pressed="true"]{background:#f3eef5;color:#8d8191;border-color:#d9c9df}
.sound-volume-row{display:block;margin-top:12px}
.sound-volume-row>span{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sound-volume-row output{min-width:38px;text-align:right;color:#a35daf;font-variant-numeric:tabular-nums}
.sound-volume-row input{display:block;width:100%;height:26px;margin:4px 0 0;accent-color:#c177be;cursor:pointer}
.sound-toggle:focus-visible,.sound-master-toggle:focus-visible,.sound-volume-row input:focus-visible{outline:3px solid #a56ec5;outline-offset:2px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{position:relative;font-family:"Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;background:linear-gradient(145deg,#fff4fb 0%,#f5efff 45%,#fff7fc 100%);color:#473b52}body::before{content:"";position:fixed;inset:-8%;pointer-events:none;opacity:0;background-image:url("../assets/images/memory_select_bg.png");background-position:center;background-repeat:no-repeat;background-size:cover;filter:blur(28px) saturate(.92) brightness(.92);transform:scale(1.14);transition:opacity .45s ease;z-index:0}body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.08) 0 22%,rgba(255,255,255,.04) 38%,transparent 62%),linear-gradient(180deg,rgba(56,36,82,.16),rgba(111,86,150,.08) 28%,rgba(255,255,255,.02) 62%,rgba(91,68,129,.12) 100%);transition:opacity .45s ease;z-index:0}body.memory-select-open::before,body.memory-select-open::after,body.chapter-active::before,body.chapter-active::after{opacity:1}body.chapter-active::before{filter:blur(24px) saturate(.95) brightness(.88);transform:scale(1.12)}body.chapter-active::after{background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.18) 0 16%,rgba(255,255,255,.07) 32%,transparent 58%),linear-gradient(180deg,rgba(59,40,83,.28),rgba(121,95,163,.14) 28%,rgba(255,255,255,.03) 58%,rgba(84,59,121,.18) 100%)}#game{position:relative;z-index:1;width:min(1180px,100%);height:100vh;height:100dvh;margin:0 auto;padding:clamp(6px,1.2vw,14px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}.game-header{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:54px;padding:8px 15px;background:rgba(255,255,255,.78);border:1px solid rgba(190,150,210,.25);border-radius:16px 16px 0 0}.chapter-label{display:flex;flex-direction:column;gap:1px;font-weight:700}#chapter-number{color:#b25fc1;font-size:11px;letter-spacing:.12em}#chapter-month{font-size:clamp(16px,2vw,19px)}.header-right,.affection-area{display:flex;align-items:center}.header-right{gap:12px}.affection-area{gap:8px}.affection-label{white-space:nowrap;color:#d65a9a;font-size:14px;font-weight:700}.affection-bar{width:clamp(100px,15vw,165px);height:11px;overflow:hidden;background:#eee5f1;border-radius:999px}.affection-fill{width:0;height:100%;background:linear-gradient(90deg,#da73ad,#b872d4);border-radius:inherit;transition:width .7s cubic-bezier(.22,1,.36,1)}#affection-value{min-width:26px;font-size:14px;font-weight:700;text-align:right}.sound-toggle{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid rgba(180,130,195,.35);border-radius:50%;background:rgba(255,255,255,.9);font-size:17px;cursor:pointer}.scene{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.88) 0 12%,rgba(255,255,255,.34) 24%,transparent 44%),radial-gradient(circle at 14% 16%,rgba(255,210,234,.42),transparent 28%),radial-gradient(circle at 86% 14%,rgba(194,210,255,.24),transparent 24%),linear-gradient(180deg,#f7effb 0%,#ece3f8 48%,#e4daf4 100%)}.scene::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background-image:url("../assets/images/memory_select_bg.png");background-position:center;background-repeat:no-repeat;background-size:cover;filter:saturate(.92) brightness(.98);transition:opacity .45s ease}.scene::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 62%,rgba(255,255,255,.20),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02) 32%,rgba(117,84,158,.14) 100%);transition:opacity .45s ease}body.chapter-active .scene::before{opacity:.26}body.chapter-active .scene::after{opacity:1}.start-screen{
  position:fixed;
  z-index:30000;
  inset:0;
  display:block;
  padding:0;
  overflow:hidden;
  background:#02020a;
  color:#fff
}
.startup-phase{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .38s ease,visibility .38s ease
}
.startup-phase.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto
}
.startup-notice{
  display:grid;
  place-items:center;
  padding:32px 22px 90px;
  background:#000;
  color:#f5f5f5;
  text-align:center;
  cursor:pointer
}
.startup-notice-card{
  position:absolute;
  left:50%;
  top:50%;
  width:min(780px,calc(100% - 44px));
  max-height:calc(100dvh - 126px);
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  filter:blur(10px);
  transform:translate(-50%,calc(-50% + 9px)) scale(.985);
  transition:opacity 1.25s ease,filter 1.25s ease,transform 1.25s ease,visibility 1.25s ease;
  scrollbar-width:thin
}
.startup-notice-card.is-visible{
  opacity:1;
  visibility:visible;
  filter:blur(0);
  transform:translate(-50%,-50%) scale(1)
}
.startup-notice-card h2{
  margin:0 0 26px;
  color:#fff;
  font-size:clamp(18px,2.4vw,23px);
  font-weight:500;
  letter-spacing:.17em
}
.startup-notice-card p{
  margin:0 0 20px;
  font-size:clamp(14px,1.8vw,17px);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.035em
}
.startup-notice-card p:last-child{margin-bottom:0}
.startup-notice-next{
  position:absolute;
  right:clamp(20px,4vw,55px);
  bottom:clamp(17px,4vh,40px);
  border:0;
  padding:9px 4px;
  background:none;
  color:rgba(255,255,255,.76);
  font:500 12px "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  letter-spacing:.14em;
  cursor:pointer;
  opacity:0;
  transition:opacity .8s ease,color .2s ease
}
.startup-notice.is-reading .startup-notice-next{opacity:1}
.startup-notice-next:hover,.startup-notice-next:focus-visible{color:#fff}
.startup-notice-next:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:650px){
  .startup-notice-card{width:calc(100% - 36px);max-height:calc(100dvh - 110px)}
  .startup-notice-card h2{margin-bottom:16px;font-size:17px}
  .startup-notice-card p{margin-bottom:13px;font-size:clamp(13px,3.5vw,15px);line-height:1.8}
}

/* ----------------------------------------
   POWER
   1672×941 のデザイン座標を丸ごと拡縮する。
   背景・ボタン・案内文はすべて同じ座標系。
----------------------------------------- */
.startup-power{
  background:#03030d
}
.startup-power-fill{
  position:absolute;
  inset:-5%;
  background:
    linear-gradient(rgba(3,3,16,.30),rgba(3,3,16,.30)),
    url("../assets/images/startup/startup_power_background.png")
    center/cover no-repeat;
  filter:blur(14px) brightness(.42) saturate(.86);
  transform:scale(1.08)
}
.startup-power-stage{
  position:absolute;
  left:50%;
  top:50%;
  width:min(100vw,177.683vh);
  aspect-ratio:1672/941;
  transform:translate(-50%,-50%);
  overflow:visible
}
.startup-power-stage-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none
}
.startup-power-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 45%,transparent 0 17%,rgba(0,0,9,.05) 34%,rgba(0,0,7,.24) 88%)
}
.startup-power-button{
  position:absolute;
  z-index:4;
  left:50%;
  top:48%;
  width:15.2%;
  aspect-ratio:1;
  padding:0;
  transform:translate(-50%,-50%);
  border:0;
  outline:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
  filter:drop-shadow(0 0 12px rgba(245,120,225,.24));
  transition:filter .22s ease,transform .22s ease
}
.startup-power-button-image{
  position:absolute;
  left:50%;
  top:50%;
  width:132%;
  height:132%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:startupPowerButtonIdle 2.15s ease-in-out infinite
}
.startup-power-button:hover{
  filter:
    drop-shadow(0 0 14px rgba(255,139,228,.54))
    drop-shadow(0 0 24px rgba(115,210,255,.24))
}
.startup-power-button:focus-visible{
  filter:
    drop-shadow(0 0 16px rgba(255,255,255,.58))
    drop-shadow(0 0 28px rgba(255,139,228,.44))
}
.startup-power-ripples{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:visible;
  pointer-events:none
}
.startup-power-ripple{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  background:
    url("../assets/images/startup/startup_power_button.png?v=20260906-power-fullscreen-heartbeat-c1")
    center/contain no-repeat;
  transform-origin:50% 50%;
  filter:
    brightness(1.75)
    saturate(.65)
    drop-shadow(0 0 8px rgba(255,154,229,.45))
    drop-shadow(0 0 14px rgba(122,211,255,.22))
}
.startup-power-ripple.ripple-a{--ripple-delay:0s}
.startup-power-ripple.ripple-b{--ripple-delay:.09s}
.startup-power-ripple.ripple-c{--ripple-delay:.18s}
.startup-power-guide{
  position:absolute;
  z-index:5;
  left:50%;
  top:66.8%;
  width:34%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35em;
  color:rgba(237,226,255,.82);
  text-align:center;
  letter-spacing:.15em;
  pointer-events:none
}
.startup-power-guide strong{
  color:rgba(255,183,230,.94);
  font-size:clamp(8px,.68vw,12px);
  font-weight:900
}
.startup-power-guide span{
  font-size:clamp(7px,.58vw,10px);
  animation:startupGuideBlink 1.8s ease-in-out infinite
}

/* Full-screen heartbeat signal. It is completely hidden until power-on. */
.startup-power-signal{
  position:absolute;
  z-index:20;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden
}
.startup-power-signal-line{
  position:absolute;
  z-index:3;
  left:50%;
  top:52%;
  width:116vw;
  max-width:none;
  aspect-ratio:2172/724;
  transform:translate(-50%,-50%);
  pointer-events:none
}
.startup-power-signal-line img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none
}

/* C: the passed section stays, but only as a faint lingering signal. */
.startup-power-signal-linger{
  z-index:1;
  opacity:.34;
  clip-path:inset(0 100% 0 0);
  filter:
    brightness(1.08)
    contrast(1.10)
    saturate(.96)
    drop-shadow(0 0 2px rgba(255,246,255,.72))
    drop-shadow(0 0 6px rgba(255,186,238,.34))
    drop-shadow(0 0 10px rgba(184,218,255,.16))
}
.startup-power-signal-spark-trail,
.startup-power-signal-spark-core{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  overflow:hidden;
  pointer-events:none
}
.startup-power-signal-spark-trail img,
.startup-power-signal-spark-core img{
  filter:
    brightness(1.90)
    contrast(1.14)
    saturate(.90)
    drop-shadow(0 0 2px rgba(255,255,255,.98))
    drop-shadow(0 0 6px rgba(255,242,255,.88))
    drop-shadow(0 0 11px rgba(255,170,237,.64))
    drop-shadow(0 0 16px rgba(188,225,255,.36))
}
.startup-power-signal-spark-core{
  z-index:4
}
.startup-power-signal-spark-core img{
  filter:
    brightness(2.40)
    contrast(1.22)
    saturate(.74)
    drop-shadow(0 0 1px rgba(255,255,255,1))
    drop-shadow(0 0 4px rgba(255,255,255,.98))
    drop-shadow(0 0 8px rgba(255,188,244,.84))
    drop-shadow(0 0 13px rgba(202,230,255,.48))
}

/* Purple-white light expands vertically from the signal line after the trace. */
.startup-power-signal-wash{
  position:absolute;
  z-index:2;
  left:-8%;
  width:116%;
  height:52%;
  opacity:0;
  pointer-events:none;
  filter:blur(10px)
}
.startup-power-signal-wash-top{
  bottom:48%;
  transform-origin:center bottom;
  transform:scaleY(.015);
  background:linear-gradient(
    to top,
    rgba(255,255,255,.84) 0%,
    rgba(231,215,255,.55) 10%,
    rgba(179,136,244,.30) 32%,
    rgba(118,92,199,.12) 62%,
    transparent 100%
  )
}
.startup-power-signal-wash-bottom{
  top:52%;
  transform-origin:center top;
  transform:scaleY(.015);
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.84) 0%,
    rgba(231,215,255,.55) 10%,
    rgba(179,136,244,.30) 32%,
    rgba(118,92,199,.12) 62%,
    transparent 100%
  )
}
.startup-power-signal-flash{
  position:absolute;
  z-index:6;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),
    radial-gradient(circle at 50% 52%,rgba(255,246,255,1),rgba(222,204,255,.82) 32%,rgba(188,156,244,.42) 65%,rgba(132,111,210,.18) 100%)
}

.startup-power.is-powering-on .startup-power-button-image{
  animation:startupPowerPressCentered .62s ease-out both
}
.startup-power.is-powering-on .startup-power-ripple{
  animation:none
}
.startup-power.is-powering-on .startup-power-guide{
  opacity:0;
  transition:opacity .15s ease
}
.startup-power.is-powering-on .startup-power-signal{
  opacity:1;
  visibility:visible
}
.startup-power.is-powering-on .startup-power-signal-linger{
  animation:startupFullscreenHeartbeatLinger 1.34s linear .10s both
}
.startup-power.is-powering-on .startup-power-signal-spark-trail{
  animation:startupFullscreenHeartbeatTrail 1.30s linear .06s both
}
.startup-power.is-powering-on .startup-power-signal-spark-core{
  animation:startupFullscreenHeartbeatCore 1.30s linear .06s both
}
.startup-power.is-powering-on .startup-power-signal-wash-top,
.startup-power.is-powering-on .startup-power-signal-wash-bottom{
  animation:startupFullscreenHeartbeatWash .48s cubic-bezier(.18,.74,.18,1) 1.36s both
}
.startup-power.is-powering-on .startup-power-signal-flash{
  animation:startupFullscreenHeartbeatFlash .24s ease-out 1.72s both
}

@keyframes startupPowerPressCentered{
  0%{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}
  30%{transform:translate(-50%,-50%) scale(.94);filter:brightness(1.18)}
  65%{transform:translate(-50%,-50%) scale(1.025);filter:brightness(1.30)}
  100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1.10)}
}

/* A narrow vertical slice of the actual PNG moves across it. Because only
   the PNG pixels exist inside the slice, the light visually follows every
   rise and fall of the heartbeat line rather than moving as a straight dot. */
@keyframes startupFullscreenHeartbeatCore{
  /* Thin, crisp scan head: about 2-3% of the line is strongly lit at once. */
  0%{opacity:0;clip-path:inset(0 100% 0 0)}
  3%{opacity:1;clip-path:inset(0 97% 0 0)}
  17%{opacity:1;clip-path:inset(0 82% 0 16%)}
  23%{opacity:1;clip-path:inset(0 68% 0 30%)}
  28%{opacity:1;clip-path:inset(0 58% 0 40%)}
  42%{opacity:.96;clip-path:inset(0 50% 0 48%)}
  51%{opacity:.84;clip-path:inset(0 48% 0 50%)}
  65%{opacity:1;clip-path:inset(0 32% 0 66%)}
  71%{opacity:1;clip-path:inset(0 18% 0 80%)}
  76%{opacity:1;clip-path:inset(0 8% 0 90%)}
  91%{opacity:.90;clip-path:inset(0 1% 0 97%)}
  97%{opacity:.76;clip-path:inset(0 0 0 98%)}
  100%{opacity:0;clip-path:inset(0 0 0 100%)}
}
@keyframes startupFullscreenHeartbeatTrail{
  /* Short local bloom behind the scan head; avoids turning the whole line into a blur. */
  0%{opacity:0;clip-path:inset(0 100% 0 0)}
  4%{opacity:.74;clip-path:inset(0 93% 0 1%)}
  17%{opacity:.70;clip-path:inset(0 75% 0 17%)}
  23%{opacity:.84;clip-path:inset(0 60% 0 32%)}
  28%{opacity:.66;clip-path:inset(0 51% 0 41%)}
  43%{opacity:.42;clip-path:inset(0 43% 0 49%)}
  51%{opacity:.30;clip-path:inset(0 41% 0 51%)}
  65%{opacity:.70;clip-path:inset(0 25% 0 67%)}
  71%{opacity:.86;clip-path:inset(0 10% 0 82%)}
  76%{opacity:.64;clip-path:inset(0 2% 0 90%)}
  92%{opacity:.36;clip-path:inset(0 0 0 94%)}
  100%{opacity:0;clip-path:inset(0 0 0 100%)}
}
@keyframes startupFullscreenHeartbeatLinger{
  /* The signal remains faintly visible only after the scanning light passes. */
  0%{opacity:0;clip-path:inset(0 100% 0 0)}
  5%{opacity:.16;clip-path:inset(0 97% 0 0)}
  18%{opacity:.24;clip-path:inset(0 82% 0 0)}
  29%{opacity:.32;clip-path:inset(0 58% 0 0)}
  51%{opacity:.34;clip-path:inset(0 48% 0 0)}
  66%{opacity:.36;clip-path:inset(0 32% 0 0)}
  77%{opacity:.40;clip-path:inset(0 8% 0 0)}
  94%{opacity:.42;clip-path:inset(0 1% 0 0)}
  100%{opacity:.46;clip-path:inset(0 0 0 0)}
}
@keyframes startupFullscreenHeartbeatWash{
  0%{opacity:0;transform:scaleY(.015);filter:blur(8px)}
  18%{opacity:.22;transform:scaleY(.10);filter:blur(10px)}
  46%{opacity:.52;transform:scaleY(.38);filter:blur(13px)}
  100%{opacity:.94;transform:scaleY(1.08);filter:blur(18px)}
}
@keyframes startupFullscreenHeartbeatFlash{
  0%{opacity:0}
  34%{opacity:.35}
  72%{opacity:.95}
  100%{opacity:1}
}

/* ----------------------------------------
   SHOOTING STARS
   全OPフェーズ共通。背景より前、UIより後ろ。
----------------------------------------- */
.startup-shooting-stars{
  position:absolute;
  z-index:2;
  inset:0;
  overflow:hidden;
  pointer-events:none
}
.startup-shooting-star{
  position:absolute;
  left:var(--star-left);
  top:var(--star-top);
  width:0;
  height:0;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,0,0);
  animation:
    startupShootingStarFly
    var(--star-duration)
    cubic-bezier(.14,.58,.18,1)
    forwards
}
/* 流れ星の頭 */
.startup-shooting-star::before{
  content:"";
  position:absolute;
  z-index:2;
  left:-3px;
  top:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 9px rgba(255,236,251,.92),
    0 0 15px rgba(244,168,236,.62),
    0 0 22px rgba(121,210,255,.28)
}
/* 尾は進行方向と完全に反対側へ伸ばす */
.startup-shooting-star::after{
  content:"";
  position:absolute;
  z-index:1;
  right:0;
  top:-1px;
  width:var(--star-length);
  height:2px;
  border-radius:999px;
  transform:rotate(var(--star-angle));
  transform-origin:right center;
  /*
   * 左端＝最も古い軌跡、右端＝現在位置（先端）。
   * 後端から連続的に消え、先端へ近づくほど明るくする。
   */
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(124,206,255,.025) 18%,
      rgba(144,207,255,.10) 38%,
      rgba(199,191,255,.24) 58%,
      rgba(244,174,231,.46) 76%,
      rgba(255,230,250,.76) 91%,
      rgba(255,255,255,.96) 100%
    );
  filter:blur(.12px);
  box-shadow:
    0 0 3px rgba(184,195,255,.20)
}
@keyframes startupShootingStarFly{
  0%{
    opacity:0;
    transform:translate3d(0,0,0)
  }
  6%{
    opacity:calc(var(--star-opacity) * .55)
  }
  14%{
    opacity:var(--star-opacity)
  }
  72%{
    opacity:var(--star-opacity)
  }
  100%{
    opacity:0;
    transform:
      translate3d(
        var(--star-dx),
        var(--star-dy),
        0
      )
  }
}

/* ----------------------------------------
   BOOT / LOADING
   1448×1086 のパネルを固定比率で拡縮。
   MEMORY SYSTEM表記はPNGへ焼き込み済み。
----------------------------------------- */
.startup-op-background{
  position:absolute;
  inset:0;
  background:
    url("../assets/images/startup/startup_op_background.png")
    center/cover no-repeat;
  transform:scale(1.015);
  animation:startupBackgroundBreathe 12s ease-in-out infinite alternate
}
.startup-system-shade,
.startup-title-shade{
  position:absolute;
  inset:0;
  background:rgba(6,8,29,.18)
}
.startup-soft-glow,
.startup-title-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:min(76vw,860px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(255,183,236,.22) 0%,
      rgba(205,159,255,.14) 24%,
      rgba(126,210,255,.08) 45%,
      rgba(104,122,236,.035) 61%,
      transparent 74%
    );
  filter:blur(12px);
  opacity:.38;
  pointer-events:none
}
.startup-system-panel{
  position:absolute;
  left:50%;
  top:50%;
  width:min(940px,92vw,117vh);
  aspect-ratio:1448/1086;
  transform:translate(-50%,-50%);
  opacity:0;
  animation:startupPanelIn .44s .04s cubic-bezier(.18,.9,.24,1) forwards
}
.startup-system-panel-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none
}
.startup-system-content{
  position:absolute;
  z-index:3;
  left:16%;
  right:16%;
  top:29%;
  bottom:24%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  text-shadow:0 2px 12px rgba(104,64,178,.38)
}
.startup-system-title{
  font-size:clamp(27px,3.6vw,47px);
  font-weight:900;
  letter-spacing:.015em
}
.startup-system-status{
  min-height:26px;
  margin-top:14px;
  color:rgba(241,235,255,.88);
  font-size:clamp(12px,1.45vw,18px);
  font-weight:700;
  letter-spacing:.035em
}
.startup-boot-content.is-ready .startup-system-title{
  text-shadow:
    0 0 12px rgba(255,145,223,.48),
    0 0 22px rgba(117,204,255,.30)
}
.startup-loading-percent{
  margin-top:11px;
  color:rgba(255,255,255,.90);
  font-size:clamp(15px,1.9vw,22px);
  font-weight:900;
  letter-spacing:.08em
}

/* ----------------------------------------
   PROGRESS
   枠PNGとfillを同一2172×724座標系で管理する。
   fillはPNG中央の透明な内側領域にだけ描画する。
----------------------------------------- */
.startup-progress-widget{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:-4.8%;
  width:70%;
  aspect-ratio:2172/724;
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .20s ease,transform .20s ease
}
.startup-system.is-loading .startup-progress-widget{
  opacity:1
}
.startup-progress-frame-image{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none
}
/* 元PNGの透明なバー内側:
   X=426～1884 / Y=300～430 を基準に設定 */
.startup-progress-track{
  position:absolute;
  z-index:1;
  left:19.61%;
  top:41.44%;
  width:67.13%;
  height:17.96%;
  overflow:hidden;
  border-radius:999px;
  background:rgba(57,33,106,.10)
}
.startup-progress-fill{
  position:relative;
  width:0;
  height:100%;
  overflow:hidden;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      #f38fd7 0%,
      #d28cef 40%,
      #a793f5 62%,
      #88dcff 100%
    );
  box-shadow:
    0 0 16px rgba(242,130,213,.50),
    inset 0 2px 0 rgba(255,255,255,.58),
    inset 0 -2px 5px rgba(90,71,190,.16);
  transition:width .04s linear
}
.startup-progress-shine{
  position:absolute;
  top:0;
  bottom:0;
  width:26%;
  left:-32%;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      rgba(255,255,255,.64),
      rgba(255,255,255,.18),
      transparent
    );
  transform:skewX(-20deg);
  animation:startupProgressShine 1.15s linear infinite
}
.startup-system[data-loading-milestone="35"] .startup-soft-glow,
.startup-system[data-loading-milestone="70"] .startup-soft-glow{
  opacity:.22
}
.startup-system[data-loading-milestone="100"] .startup-soft-glow{
  opacity:.34;
  animation:startupCompleteGlow .6s ease-in-out infinite alternate
}
.startup-system.is-leaving .startup-system-content,
.startup-system.is-leaving .startup-progress-widget{
  opacity:0;
  transform:translateX(-50%) translateY(-5px);
  transition:opacity .20s ease,transform .20s ease
}
.startup-system.is-leaving .startup-system-panel{
  opacity:0;
  filter:blur(5px);
  transform:translate(-50%,-50%) scale(.985);
  transition:opacity .35s .08s ease,filter .35s .08s ease,transform .35s .08s ease
}

/* ----------------------------------------
   TITLE
----------------------------------------- */
.startup-title-background{
  filter:brightness(1.02) saturate(1.04)
}
.startup-title-shade{
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.04),rgba(7,8,28,.12) 60%,rgba(4,5,19,.28))
}
.startup-title-glow{
  opacity:0
}
.startup-title-logo{
  position:absolute;
  z-index:4;
  left:50%;
  top:46%;
  width:min(1160px,90vw);
  max-height:64vh;
  object-fit:contain;
  transform:translate(-50%,-50%) scale(.96);
  opacity:0;
  filter:blur(9px);
  user-select:none;
  pointer-events:none
}
.startup-title.title-ready .startup-title-logo{
  animation:startupTitleReveal .72s cubic-bezier(.18,.86,.24,1) forwards
}
.startup-title.title-ready .startup-title-glow{
  animation:startupTitleGlow 1.15s ease-out .08s both
}
.startup-title-flare{
  position:absolute;
  z-index:5;
  left:-42%;
  top:46%;
  width:min(860px,66vw);
  aspect-ratio:1;
  opacity:0;
  pointer-events:none;
  background:
    url("../assets/images/startup/startup_lensflare.png")
    center/contain no-repeat
}
.startup-title.title-ready .startup-title-flare{
  animation:startupTitleFlare .70s ease-in-out .62s both
}
.startup-title-button{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:7.5%;
  transform:translateX(-50%);
  min-width:min(330px,78vw);
  padding:11px 28px 10px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  color:#fff;
  background:rgba(32,28,87,.32);
  box-shadow:
    0 10px 30px rgba(39,29,102,.20),
    inset 0 0 18px rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
  font:inherit;
  text-align:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none
}
.startup-title-button span{
  display:block;
  font-size:13px;
  font-weight:900;
  letter-spacing:.18em
}
.startup-title-button small{
  display:block;
  margin-top:3px;
  color:rgba(239,227,255,.70);
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em
}
.startup-title.title-ready .startup-title-button{
  animation:startupTitleButtonIn .35s ease .82s forwards;
  pointer-events:auto
}
.startup-title-button:hover{
  background:rgba(76,49,142,.47);
  box-shadow:
    0 10px 34px rgba(49,34,124,.26),
    0 0 22px rgba(241,132,218,.18)
}
.startup-credits-open{
  position:absolute;
  z-index:7;
  right:clamp(18px,4vw,60px);
  bottom:7.5%;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  background:rgba(32,28,87,.34);
  color:#fff;
  font:800 11px "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  letter-spacing:.14em;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease,background .2s ease
}
.startup-title.title-ready .startup-credits-open{opacity:1;pointer-events:auto;transition-delay:.9s,0s}
.startup-credits-open:hover{background:rgba(80,54,139,.62)}
.startup-credits-overlay,.startup-external-confirm{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vh,32px);
  background:rgba(13,12,39,.76);
  backdrop-filter:blur(12px)
}
.startup-external-confirm{z-index:30;background:rgba(13,12,39,.64)}
.startup-credits-overlay[hidden],.startup-external-confirm[hidden]{display:none}
.startup-credits-card,.startup-external-card{
  width:min(650px,100%);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(20px,3vw,30px);
  border:1px solid rgba(236,199,249,.42);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(52,39,88,.98),rgba(27,31,72,.98));
  box-shadow:0 25px 65px rgba(4,6,28,.36);
  color:#fff
}
.startup-credits-heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.startup-credits-kicker{color:#e6b8e2;font-size:10px;letter-spacing:.18em}
.startup-credits-heading-row h2{margin:5px 0 0;font-size:clamp(18px,3vw,24px)}
.startup-credits-close{width:34px;height:34px;flex:none;border:1px solid rgba(255,255,255,.36);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:23px;line-height:1;cursor:pointer}
.startup-credit-entry{padding:13px 0;border-top:1px solid rgba(240,208,252,.18)}
.startup-credit-heading{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.startup-credit-role{width:100%;color:#e2b0df;font-size:10px;font-weight:800;letter-spacing:.08em}
.startup-credit-link{color:#fff4fb;font-size:clamp(13px,2.2vw,16px);font-weight:800;text-decoration:underline;text-decoration-color:rgba(250,186,228,.55);text-underline-offset:4px}
.startup-credit-link:hover{color:#ffd5f1}
.startup-credit-sama{margin-left:.08em;font-size:.78em}
.startup-credit-handle{font-size:.72em;font-weight:600;white-space:nowrap}
.startup-credit-details{margin-left:auto;padding:6px 10px;border:1px solid rgba(247,213,248,.34);border-radius:999px;background:rgba(255,255,255,.08);color:#fbe4fa;font:700 10px "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;cursor:pointer}
.startup-credit-details:hover,.startup-credit-details[aria-expanded="true"]{background:rgba(245,180,227,.2)}
.startup-credit-description{max-height:0;margin:0;overflow:hidden;opacity:0;color:#f6eaf6;font-size:12px;line-height:1.8;transition:max-height .3s ease,margin .3s ease,opacity .3s ease}
.startup-credit-description .startup-credit-link{font-size:inherit;font-weight:700}
.startup-credit-entry:hover .startup-credit-description,.startup-credit-entry:focus-within .startup-credit-description,.startup-credit-entry.is-expanded .startup-credit-description{max-height:360px;margin:11px 0 0;opacity:1}
.startup-external-card{width:min(400px,100%);text-align:center}
.startup-external-card h2{margin:0 0 12px;font-size:clamp(17px,3vw,21px)}
.startup-external-card p{margin:0;color:#f4e5f5;font-size:13px;line-height:1.7}
.startup-external-actions{display:flex;justify-content:center;gap:12px;margin-top:22px}
.startup-external-actions button{min-width:112px;padding:10px 16px;border:1px solid rgba(255,255,255,.44);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:700 12px "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;cursor:pointer}
.startup-external-actions button:last-child{border-color:rgba(239,160,217,.62);background:linear-gradient(100deg,#bb77ba,#8e78c6)}
.startup-credits-open:focus-visible,.startup-credits-close:focus-visible,.startup-credit-link:focus-visible,.startup-credit-details:focus-visible,.startup-external-actions button:focus-visible{outline:3px solid #f3bfe9;outline-offset:3px}
@media(max-width:600px){
  .startup-credits-open{right:16px;bottom:2%;padding:8px 12px;font-size:10px}
  .startup-credits-card{max-height:calc(100dvh - 32px)}
  .startup-credit-description{font-size:11px}
}
@media(max-width:600px) and (max-height:500px){
  .startup-credits-open{top:16px;bottom:auto}
}
.startup-title.is-entering{
  opacity:0;
  transition:opacity .42s ease
}

/* ----------------------------------------
   Startup animations
----------------------------------------- */
@keyframes startupPowerButtonIdle{
  0%,100%{transform:translate(-50%,-50%) scale(.985);filter:brightness(.94)}
  50%{transform:translate(-50%,-50%) scale(1.025);filter:brightness(1.08)}
}
@keyframes startupGuideBlink{
  0%,100%{opacity:.42}
  50%{opacity:.92}
}
@keyframes startupPowerPress{
  0%{transform:scale(1)}
  38%{transform:scale(.90);filter:brightness(1.38)}
  100%{transform:scale(1.14);filter:brightness(1.18)}
}
@keyframes startupPowerShapeRipple{
  0%{
    opacity:0;
    transform:scale(.96);
    filter:
      brightness(1.7)
      saturate(.7)
      drop-shadow(0 0 5px rgba(255,174,235,.42))
  }
  16%{
    opacity:.42
  }
  100%{
    opacity:0;
    transform:scale(1.58);
    filter:
      brightness(1.5)
      saturate(.5)
      blur(1px)
      drop-shadow(0 0 18px rgba(255,140,225,.20))
  }
}
@keyframes startupBackgroundBreathe{
  from{transform:scale(1.015)}
  to{transform:scale(1.035)}
}
@keyframes startupPanelIn{
  from{opacity:0;transform:translate(-50%,-50%) translateY(10px) scale(.985);filter:blur(6px)}
  to{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1);filter:blur(0)}
}
@keyframes startupProgressShine{
  from{left:-36%}
  to{left:108%}
}
@keyframes startupCompleteGlow{
  from{opacity:.27;transform:translate(-50%,-50%) scale(.96)}
  to{opacity:.40;transform:translate(-50%,-50%) scale(1.03)}
}
@keyframes startupTitleReveal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.96);filter:blur(9px)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
}
@keyframes startupTitleGlow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  45%{opacity:.36;transform:translate(-50%,-50%) scale(1.05)}
  100%{opacity:.14;transform:translate(-50%,-50%) scale(1.18)}
}
@keyframes startupTitleFlare{
  0%{left:-42%;opacity:0}
  20%{opacity:.55}
  78%{opacity:.42}
  100%{left:78%;opacity:0}
}
@keyframes startupTitleButtonIn{
  from{opacity:0;transform:translateX(-50%) translateY(7px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

@media(max-width:700px){
  .startup-power-guide{
    width:42%
  }
  .startup-system-panel{
    width:min(112vw,112vh)
  }
  .startup-system-content{
    left:21%;
    right:21%;
    top:31%;
    bottom:29%
  }
  .startup-progress-widget{
    width:78%;
    bottom:-4.2%
  }
  .startup-title-logo{
    width:118vw;
    max-height:60vh
  }
}
@media(prefers-reduced-motion:reduce){
  .startup-power-button-image,
  .startup-power-guide span,
  .startup-op-background,
  .startup-progress-shine,
  .startup-power-ripple,
  .startup-shooting-star{
    animation:none
  }
}.chapter-select{position:absolute;z-index:45;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-content:start;gap:10px;padding:clamp(14px,2vw,22px);overflow:hidden;isolation:isolate;background-color:#f4eefb;background-image:radial-gradient(circle at 50% 28%,rgba(255,255,255,.30) 0 16%,rgba(255,248,253,.08) 36%,transparent 62%),linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,.06) 38%,rgba(255,255,255,.11) 100%),url("../assets/images/memory_select_bg.png");background-position:center,center,center;background-repeat:no-repeat,no-repeat,no-repeat;background-size:cover,cover,cover}.select-heading{text-align:center;margin-bottom:16px}.select-heading h1{margin:5px 0 2px;font-size:clamp(24px,3.5vw,38px);font-weight:500}.select-heading p{margin:0;color:#8a768f;font-size:12px}.chapter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(980px,calc(100% - 8px),114dvh);max-width:980px;margin:0 auto;align-items:start}.chapter-card{position:relative;min-width:0;min-height:0;padding:12px 12px 28px;text-align:left;border:1px solid rgba(180,130,195,.28);border-radius:16px;background:rgba(255,255,255,.86);color:#51425b;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num month" "title title" "theme theme";gap:3px 8px;transition:transform .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease}.chapter-card:not(:disabled):hover{transform:translateY(-2px);background:#fff;border-color:rgba(190,100,180,.55)}.chapter-card.current{border-color:rgba(206,99,169,.65);box-shadow:inset 0 0 0 1px rgba(206,99,169,.18)}.chapter-card.cleared{background:rgba(255,250,253,.96)}.chapter-card.locked{cursor:not-allowed;opacity:.5;filter:saturate(.35)}.chapter-card:disabled{color:#7e7482}.card-number{grid-area:num;color:#c061a5;font-weight:800;font-size:12px}.card-month{grid-area:month;color:#8d7795;font-size:12px;text-align:right}.chapter-card strong{grid-area:title;font-size:14px;line-height:1.4}.card-theme{grid-area:theme;color:#9b879f;font-size:11px}.card-score{position:absolute;right:10px;bottom:8px;padding:3px 8px;border-radius:999px;background:rgba(213,111,175,.12);color:#c25294;font-size:11px;font-weight:800;letter-spacing:.03em}.dream-light{position:absolute;width:clamp(170px,26vw,280px);aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.34;pointer-events:none;animation:dreamFloat 8s ease-in-out infinite alternate}.dream-light-1{top:5%;left:5%;background:#f7aee0}.dream-light-2{right:5%;bottom:10%;background:#ad9cf3;animation-delay:-4s}@keyframes dreamFloat{from{transform:translate(-8px,-10px)}to{transform:translate(20px,15px)}}.character{position:absolute;left:50%;bottom:clamp(90px,14%,120px);width:clamp(185px,24vw,270px);height:clamp(300px,55vh,440px);transform:translateX(-50%) translateY(15px);opacity:0;transition:opacity .9s ease,transform .9s ease}.character.visible{opacity:.8;transform:translateX(-50%)}.silhouette-head{position:absolute;top:4%;left:50%;width:53%;aspect-ratio:.92;transform:translateX(-50%);background:linear-gradient(160deg,#76557d,#42364a);border-radius:48% 48% 45% 45%}.silhouette-body{position:absolute;left:50%;bottom:0;width:86%;height:72%;transform:translateX(-50%);background:linear-gradient(160deg,#76557d,#42364a);border-radius:48% 48% 18% 18%}.chapter-intro{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(255,245,252,.58);transition:opacity .7s ease}.chapter-intro.fade-out{opacity:0;pointer-events:none}.chapter-intro-small{color:#a762b4;font-size:12px;font-weight:700;letter-spacing:.18em}.chapter-intro h1{margin:9px 0 4px;font-size:clamp(30px,5vw,58px);font-weight:500}.chapter-intro p{margin:0;color:#806d8a;font-size:14px;letter-spacing:.12em}.dialogue-box{position:absolute;z-index:30;left:4%;right:4%;bottom:3%;min-height:clamp(118px,20vh,150px);padding:clamp(24px,3.5vh,30px) clamp(22px,3vw,32px) 16px;cursor:pointer;background:rgba(255,255,255,.94);border:1px solid rgba(170,110,190,.35);border-radius:18px;box-shadow:0 10px 30px rgba(70,40,90,.12);animation:dialogueIn .45s ease both}@keyframes dialogueIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}.speaker{position:absolute;top:-17px;left:22px;padding:7px 22px;color:white;background:linear-gradient(135deg,#c66bb5,#9d6ac8);border-radius:999px;font-size:14px;font-weight:700}.dialogue{min-height:56px;font-size:clamp(15px,2vw,19px);line-height:1.75;letter-spacing:.035em;white-space:pre-line}.dialogue-next{text-align:right;color:#ad92b5;font-size:10px;letter-spacing:.18em;animation:clickBlink 1.4s ease-in-out infinite}@keyframes clickBlink{50%{opacity:.3}}.question-area{position:absolute;z-index:40;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(18px,4vw,30px);background:rgba(245,235,250,.92)}.question{width:min(700px,100%);margin-bottom:clamp(18px,3vh,28px);text-align:center;font-size:clamp(18px,2.7vw,28px);line-height:1.55}.choices{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,12px);width:min(610px,100%)}.choice{width:100%;min-height:48px;padding:11px 20px;opacity:0;transform:translateY(15px);color:#51425b;background:rgba(255,255,255,.97);border:1px solid #d9b9df;border-radius:999px;font-size:clamp(13px,1.7vw,16px);cursor:pointer;transition:transform .25s ease,background .25s ease,opacity .4s ease}.choice.visible{opacity:1;transform:none}.choice:hover{transform:translateY(-2px);background:#fff6fc}.affection-popup{position:absolute;z-index:60;top:42%;left:50%;transform:translate(-50%,-50%);color:#d24f98;font-size:clamp(34px,6vw,64px);font-weight:700;animation:affectionPop 1.2s ease both}@keyframes affectionPop{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}.chapter-clear{position:absolute;z-index:70;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;background:rgba(255,247,252,.96);animation:clearIn .7s ease both}@keyframes clearIn{from{opacity:0}to{opacity:1}}.clear-small{color:#aa69b6;letter-spacing:.2em;font-size:11px}.chapter-clear h2{margin:8px 0 2px;font-size:clamp(26px,4vw,46px)}.clear-heart{position:relative;width:clamp(110px,12vw,145px);height:clamp(100px,11vw,132px);margin:2px 0 12px;display:flex;align-items:center;justify-content:center;animation:heartBeat 1.2s ease-in-out infinite}.clear-heart-symbol{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#dc5da1;font-family:"Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;font-size:clamp(96px,12vw,135px);line-height:1}.clear-heart-score{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;color:#cf4f94;font-weight:700}#clear-affection-value{font-size:clamp(24px,3vw,34px);line-height:1}.clear-heart-unit{margin-top:3px;font-size:clamp(9px,1.1vw,11px)}@keyframes heartBeat{50%{transform:scale(1.08)}}.clear-actions{display:flex;align-items:stretch;justify-content:center;gap:14px;width:min(650px,100%)}.memory-link{width:min(330px,52%);min-height:86px;display:grid;grid-template-columns:132px 1fr;align-items:center;gap:12px;padding:8px;border:1px solid rgba(180,130,195,.32);border-radius:16px;background:rgba(255,255,255,.86);color:#594b62;text-decoration:none;text-align:left;transition:transform .2s ease,background .2s ease,border-color .2s ease}.memory-link:hover{transform:translateY(-2px);background:#fff;border-color:rgba(190,100,180,.52)}.memory-thumbnail{width:132px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#eee5f1}.memory-link-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.memory-link-kicker{color:#aa69b6;font-size:9px;font-weight:800;letter-spacing:.14em}.memory-link strong{font-size:14px;line-height:1.35}.game-footer{display:flex;justify-content:space-between;gap:12px;min-height:28px;padding:6px 10px;color:#84748a;font-size:10px}.hidden{display:none!important}@media(max-height:760px){.game-header{min-height:48px;padding:5px 12px}.chapter-card{min-height:0;padding:9px 9px 25px}.chapter-grid{gap:7px}.character{height:clamp(260px,50vh,360px);bottom:90px}.dialogue-box{min-height:110px;padding:23px 25px 12px}.clear-heart{width:105px;height:95px;margin-bottom:8px}.clear-heart-symbol{font-size:92px}.memory-link{min-height:74px}.memory-thumbnail{width:112px}.memory-link{grid-template-columns:112px 1fr}.game-footer{min-height:24px;padding:4px 8px}}@media(max-width:760px){.chapter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.clear-actions{flex-direction:column;align-items:center}.memory-link{width:min(430px,100%)}}@media(max-width:560px){#game{padding:0}.game-header{border-radius:0;gap:8px}.affection-label{display:none}.affection-bar{width:85px}.chapter-select{padding:14px 10px}.chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-card{min-height:0}.dialogue-box{left:10px;right:10px;bottom:10px;padding:25px 18px 13px}.character{width:205px;height:350px}.memory-link{grid-template-columns:105px 1fr}.memory-thumbnail{width:105px}.game-footer{padding:4px 8px}.game-footer span:first-child{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Chapter 11 questions: preserve authored line breaks and reduce the long opening question. */
.question{white-space:pre-line}
.question.question-compact{font-size:clamp(16px,2.25vw,24px)}

/* ----------------------------------------
   Ending / Special Route
----------------------------------------- */
.select-ending-row{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;max-width:980px;margin:0 auto}.ending-button,.ending-back-button{min-width:188px;min-height:40px;padding:11px 22px;border:0;border-radius:999px;color:#fff;background:linear-gradient(135deg,#ca6aad,#8f70c8);font-size:13px;font-weight:800;letter-spacing:.06em;cursor:pointer}.ending-button{box-shadow:0 8px 22px rgba(115,75,140,.14)}.ending-screen{position:absolute;z-index:120;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:clamp(22px,3vw,34px) clamp(16px,3vw,30px) clamp(28px,4vw,44px);overflow:auto;overscroll-behavior:contain;scroll-padding-top:clamp(22px,3vw,34px);background:linear-gradient(155deg,rgba(255,247,252,.985),rgba(231,223,249,.985))}.ending-screen.special-album-mode{align-items:center;padding:clamp(18px,2.4vw,28px);background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.94) 0 12%,rgba(255,234,248,.50) 33%,transparent 62%),linear-gradient(145deg,rgba(238,226,250,.98),rgba(253,239,249,.98) 48%,rgba(221,216,247,.98));overflow:hidden}.ending-panel{width:min(900px,100%);margin:0 auto;text-align:center}.ending-kicker{color:#a75fb3;font-size:12px;font-weight:800;letter-spacing:.2em}.ending-panel h2{margin:9px 0 8px;font-size:clamp(26px,4vw,48px);font-weight:500}.ending-panel p{color:#75677d;line-height:1.8}.ending-score{margin:4px 0 12px!important;color:#cf4f94!important;font-size:clamp(18px,2.5vw,26px);font-weight:800}.mosaic-stage{position:relative;width:min(720px,92%);aspect-ratio:16/9;margin:18px auto;overflow:hidden;border:1px solid rgba(180,130,195,.32);border-radius:22px;background:#e9e0ef;box-shadow:0 14px 38px rgba(75,45,95,.12)}.mosaic-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:2px;padding:2px;opacity:0}.mosaic-grid.animate{animation:mosaicGridIn 2.8s cubic-bezier(.2,.8,.2,1) forwards}.mosaic-tile{min-width:0;min-height:0;overflow:hidden;background:#d9cce0;opacity:0;transform:scale(.55) rotate(var(--rot,0deg));animation:mosaicTileIn .6s ease forwards;animation-delay:var(--delay,0ms)}.mosaic-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.8) brightness(.9)}.mosaic-keyart-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:24px;padding:24px;background:linear-gradient(135deg,rgba(238,215,236,.16),rgba(206,195,234,.2));opacity:0;transform:scale(1.04)}.mosaic-keyart-placeholder.reveal{animation:keyartReveal 2s ease forwards}.mosaic-silhouette{width:30%;height:78%;border-radius:46% 46% 20% 20%;background:linear-gradient(165deg,rgba(86,62,95,.88),rgba(50,40,60,.92));clip-path:polygon(36% 0,64% 0,72% 11%,80% 25%,76% 38%,88% 54%,100% 100%,0 100%,12% 54%,24% 38%,20% 25%,28% 11%)}.mosaic-keyart-copy{display:flex;flex-direction:column;align-items:flex-start;color:#4f4158;text-align:left}.mosaic-keyart-copy span{font-size:12px;font-weight:800;letter-spacing:.18em;color:#a15fac}.mosaic-keyart-copy strong{font-size:clamp(30px,5vw,58px);letter-spacing:.04em}.mosaic-keyart-copy small{margin-top:6px;color:#88778e}.special-message{display:flex;flex-direction:column;gap:5px;margin:12px auto 18px;animation:specialMessageIn 1s ease both}.special-message strong{font-size:clamp(24px,3.5vw,42px);color:#c55397}.special-message span{color:#75677d}.special-ending .ending-back-button{margin-top:4px}@keyframes mosaicGridIn{0%{opacity:0;transform:scale(.96)}20%{opacity:1}100%{opacity:1;transform:scale(1)}}@keyframes mosaicTileIn{to{opacity:1;transform:scale(1) rotate(0)}}@keyframes keyartReveal{0%{opacity:0;transform:scale(1.04);backdrop-filter:blur(0)}100%{opacity:.94;transform:scale(1);backdrop-filter:blur(1px)}}@keyframes specialMessageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media(max-height:760px){.mosaic-stage{width:min(560px,82%);margin:10px auto}.ending-panel h2{margin:4px 0}.ending-panel p{margin:5px 0}.special-message{margin:6px auto 9px}}@media(max-width:560px){.mosaic-stage{width:100%}.mosaic-keyart-placeholder{gap:12px;padding:14px}.mosaic-silhouette{width:36%;height:72%}.mosaic-keyart-copy strong{font-size:30px}}

/* ----------------------------------------
   Chapter score reset
----------------------------------------- */
.chapter-card-wrap{
  position:relative;
  min-width:0;
  aspect-ratio:16 / 9;
}

.chapter-card-wrap .chapter-card{
  width:100%;
  height:100%;
  min-height:0;
}

.chapter-card-wrap:has(.chapter-score-reset) .chapter-card{
  padding-bottom:34px;
}

.chapter-score-reset{
  position:absolute;
  left:9px;
  bottom:7px;
  z-index:3;
  min-height:24px;
  padding:3px 8px;
  border:1px solid rgba(180,130,195,.28);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#8d7295;
  font-size:9px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}

.chapter-score-reset:hover{
  transform:translateY(-1px);
  background:#fff5fb;
  color:#c25294;
  border-color:rgba(194,82,148,.42);
}

.chapter-score-reset:focus-visible{
  outline:2px solid rgba(194,82,148,.48);
  outline-offset:2px;
}

@media(max-height:760px){
  .chapter-card-wrap:has(.chapter-score-reset) .chapter-card{
    padding-bottom:31px;
  }
  .chapter-score-reset{
    bottom:5px;
    padding:2px 7px;
    font-size:8px;
  }
}


/* ----------------------------------------
   SPECIAL ROUTE: generated photomosaic
----------------------------------------- */
.mosaic-stage {
    width: min(560px, 88%);
    aspect-ratio: 1804 / 2048;
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.95), rgba(225,212,240,.92));
}

.mosaic-grid {
    z-index: 1;
}

.mosaic-final-image {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 2%;
    object-fit: contain;
    opacity: 0;
    transform: scale(1.045);
    filter: drop-shadow(0 10px 18px rgba(80, 50, 100, .18));
    pointer-events: none;
}

.mosaic-final-image.reveal {
    animation: finalMosaicReveal 2.2s cubic-bezier(.2,.8,.2,1) forwards;
}

.mosaic-keyart-placeholder {
    z-index: 3;
}

@keyframes finalMosaicReveal {
    0% {
        opacity: 0;
        transform: scale(1.045);
        filter: blur(8px) drop-shadow(0 10px 18px rgba(80, 50, 100, .12));
    }
    45% {
        opacity: .92;
        filter: blur(2px) drop-shadow(0 10px 18px rgba(80, 50, 100, .16));
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) drop-shadow(0 10px 18px rgba(80, 50, 100, .18));
    }
}

@media (max-height: 760px) {
    .mosaic-stage {
        width: min(430px, 72%);
    }
}

@media (max-width: 560px) {
    .mosaic-stage {
        width: min(100%, 430px);
    }
}

/* SPECIAL ROUTE fullscreen overlay */
/* SPECIAL ROUTE: album rewind transition */
.special-ending{
  position:relative;
  z-index:1;
  width:min(1180px,96vw);
  aspect-ratio:2172/1222;
  min-height:0;
  margin:auto;
  padding:0;
  overflow:visible;
  isolation:isolate;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  perspective:2500px;
  transform-style:preserve-3d;
  --album-rewind-progress:0;
  --album-left-depth:1;
  --album-right-depth:.28
}
.special-album-base{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 24px 42px rgba(63,40,83,.28))}
/* ページ束PNGを毎フレーム透過させず、本の下端に沿う薄い積層表現だけを連続変形する。 */
.special-album-stack-depth{position:absolute;z-index:1;bottom:5.1%;width:43.9%;height:5.8%;overflow:hidden;border-radius:0 0 45% 45%;pointer-events:none;opacity:.42;background:repeating-linear-gradient(to bottom,rgba(255,250,252,.72) 0 1px,rgba(213,194,226,.26) 1.4px 2.2px,rgba(255,255,255,.34) 2.4px 3.4px);box-shadow:0 5px 10px rgba(74,48,91,.08);will-change:transform}
.special-album-stack-depth-left{left:5.1%;transform-origin:50% 100%;transform:scaleY(var(--album-left-depth,1)) skewX(-1.2deg)}
.special-album-stack-depth-right{right:5.1%;transform-origin:50% 100%;transform:scaleY(var(--album-right-depth,.28)) skewX(1.2deg)}
.special-ending-ui{position:absolute;z-index:20;inset:0;transition:opacity .42s ease,transform .48s cubic-bezier(.22,1,.36,1),filter .45s ease}
.special-ending-hero{position:absolute;left:50%;top:10.8%;width:min(72%,860px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.special-ending-kicker-image{display:block;width:min(42%,340px);height:auto;max-height:none;object-fit:contain;opacity:.99;transform:translateY(58px);filter:drop-shadow(0 3px 10px rgba(161,98,180,.18))}
.special-ending-copy-image{display:block;width:100%;max-width:860px;height:auto;margin-top:clamp(6px,.85vw,10px);object-fit:contain;transform:translateY(-18%);filter:drop-shadow(0 10px 24px rgba(168,118,196,.10))}
.special-ending-lead{margin:0 0 10px!important;padding:0 12px;max-width:430px;color:#8b7690!important;font-size:clamp(10px,.88vw,12px);font-weight:700;line-height:1.72!important;letter-spacing:.06em;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.92)}
.special-ending-control-panel{position:absolute;left:50%;top:58.6%;width:min(44%,500px);min-width:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.special-ending .ending-score,.special-ending-score-simple{display:none!important;margin:0!important;padding:0!important}
.special-ending-actions{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;width:100%;margin:0}
.special-ending .special-play-button,.special-ending .ending-back-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:1 1 0;min-width:0;min-height:46px;margin:0;padding:12px 18px;border-radius:18px;font-size:clamp(11px,.95vw,13px);font-weight:900;letter-spacing:.08em;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,opacity .18s ease,filter .18s ease}
.special-ending .special-play-button::before,.special-ending .ending-back-button::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%)}
.special-ending .special-play-button::after,.special-ending .ending-back-button::after{content:"";position:absolute;left:-32%;top:-110%;width:34%;height:260%;pointer-events:none;transform:rotate(24deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.46),rgba(255,255,255,0));opacity:0;transition:opacity .18s ease}
.special-ending .special-play-button:not(:disabled):hover::after,.special-ending .special-play-button:not(:disabled):focus-visible::after,.special-ending .ending-back-button:not(:disabled):hover::after,.special-ending .ending-back-button:not(:disabled):focus-visible::after{opacity:1;animation:specialEndingButtonShine .95s ease}
.special-ending .special-play-button{border:1px solid rgba(255,220,241,.96);color:#fff;background:linear-gradient(135deg,#ef88c0 0%,#c274d7 52%,#8d7ce0 100%);box-shadow:0 12px 28px rgba(194,92,161,.24),0 0 26px rgba(241,157,214,.22),inset 0 1px 0 rgba(255,255,255,.48)}
.special-ending .special-play-button:not(:disabled):hover,.special-ending .special-play-button:not(:disabled):focus-visible{transform:translateY(-2px) scale(1.01);box-shadow:0 16px 34px rgba(194,92,161,.30),0 0 30px rgba(241,157,214,.28),inset 0 1px 0 rgba(255,255,255,.52)}
.special-ending .special-play-button:disabled{cursor:wait;opacity:.72;filter:saturate(.82)}
.special-ending .ending-back-button{border:1px solid rgba(210,179,232,.74);color:#8f63a6;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(251,244,255,.80));box-shadow:0 10px 24px rgba(127,90,150,.10),inset 0 1px 0 rgba(255,255,255,.92)}
.special-ending .ending-back-button:not(:disabled):hover,.special-ending .ending-back-button:not(:disabled):focus-visible{transform:translateY(-2px) scale(1.01);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,248,255,.88));box-shadow:0 14px 28px rgba(127,90,150,.14),inset 0 1px 0 rgba(255,255,255,.98)}
.special-button-glyph{display:inline-flex;align-items:center;justify-content:center;font-size:1.05em;line-height:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.42))}
.special-album-loading{display:flex;align-items:center;justify-content:center;gap:8px;height:0;margin:0 0 2px;color:#ae6cb2;font-size:clamp(9px,.82vw,11px);font-weight:900;letter-spacing:.16em;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(3px);transition:height .18s ease,margin .18s ease,opacity .18s ease,transform .18s ease,visibility .18s ease;pointer-events:none;overflow:hidden;text-shadow:0 1px 0 rgba(255,255,255,.88)}
.special-album-loading.is-visible{height:24px;margin:0 0 10px;opacity:1;visibility:visible;transform:translateY(0)}
.special-album-loading-spinner{display:block;width:18px;height:18px;flex:0 0 18px;border:2px solid rgba(184,116,191,.20);border-top-color:#df78bd;border-right-color:#9f79d1;border-radius:50%;box-shadow:0 0 10px rgba(197,95,173,.13);animation:specialAlbumLoadingSpin .72s linear infinite}
@keyframes specialAlbumLoadingSpin{to{transform:rotate(360deg)}}
@keyframes specialEndingButtonShine{0%{transform:translateX(0) rotate(24deg)}100%{transform:translateX(340%) rotate(24deg)}}

.special-album-animation{position:absolute;z-index:10;inset:0;opacity:0;pointer-events:none;transition:none}
.special-album-under-page,.special-album-webgl-canvas{position:absolute;pointer-events:none;user-select:none}
/* WebGLテクスチャと同じ切り出しを静止ページにも使用。めくりの終端/始端を必ず同じ絵へ着地させる。 */
.special-album-under-page{z-index:9;top:3.6825%;width:45.6262%;height:90.0164%;object-fit:fill;filter:drop-shadow(0 2px 4px rgba(76,50,92,.035))}
.special-album-under-left{left:4.3738%}
.special-album-under-right{left:50%}
.special-album-webgl-canvas{z-index:12;inset:0;width:100%;height:100%;display:block;opacity:1;visibility:visible;will-change:contents}
.special-ending{--album-display-font:"BIZ UDPMincho","Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif}
.special-album-page-stack{position:absolute;z-index:11;inset:0;display:none;transform-style:preserve-3d;perspective:2500px}
.special-ending.webgl-fallback .special-album-webgl-canvas{display:none}
.special-ending.webgl-fallback .special-album-page-stack{display:block}
.special-album-fallback-sheet{position:absolute;left:4.3738%;top:3.6825%;width:45.6262%;height:90.0164%;transform-origin:right center;transform-style:preserve-3d;will-change:transform}
.special-album-fallback-face{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;backface-visibility:hidden;-webkit-backface-visibility:hidden;user-select:none}
.special-album-fallback-back{transform:rotateY(180deg)}
.special-ending.album-ui-leaving .special-ending-ui{opacity:0;transform:scale(.985);filter:blur(3px);pointer-events:none}
.special-ending.album-turning .special-album-animation{opacity:1}
.special-ending.album-handoff{transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1),filter .6s ease}
.special-ending.album-handoff{opacity:0;transform:scale(1.018);filter:blur(8px)}
.special-album-handoff-canvas{position:fixed;z-index:10020;inset:0;width:100vw;height:100vh;display:block;opacity:0;visibility:hidden;pointer-events:none;user-select:none}
.special-album-handoff-canvas.is-active{opacity:1;visibility:visible}
.special-memory-roll.album-handoff-preparing{background:transparent}
.special-memory-roll.album-handoff-preparing .special-overlay-shade,
.special-memory-roll.album-handoff-preparing .special-roll-background,
.special-memory-roll.album-handoff-preparing .special-roll-vignette,
.special-memory-roll.album-handoff-preparing .special-roll-shell{opacity:0!important;animation:none!important}
.special-memory-roll.album-handoff-preparing .special-roll-bg-image{animation:none!important;opacity:1}
.special-memory-roll.album-handoff-revealing{background:#100b18;transition:background .48s ease}
.special-memory-roll.album-handoff-revealing .special-overlay-shade{opacity:1!important;animation:none!important;transition:opacity .5s ease}
.special-memory-roll.album-handoff-revealing .special-roll-background{opacity:1!important;transition:opacity .55s ease}
.special-memory-roll.album-handoff-revealing .special-roll-vignette{opacity:1!important;transition:opacity .55s ease}
.special-memory-roll.album-handoff-revealing .special-roll-shell{opacity:1!important;transform:translateY(0) scale(1);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.special-memory-roll.album-handoff-entered .special-overlay-shade{opacity:1;animation:none}
@media(max-width:700px){.ending-screen.special-album-mode{padding:8px}.special-ending{width:100%;max-width:none}.special-ending-hero{top:12.5%;width:min(84%,560px)}.special-ending-kicker-image{width:min(48%,220px)}.special-ending-copy-image{width:100%;margin-top:6px}.special-ending-control-panel{top:60.8%;width:min(72%,420px)}.special-ending-lead{margin:0 0 8px!important;padding:0 14px;max-width:320px;font-size:8px}.special-ending-actions{flex-direction:column;gap:8px}.special-ending .special-play-button,.special-ending .ending-back-button{width:100%;min-height:34px;padding:8px 12px;font-size:8px;gap:6px;border-radius:14px}.special-album-loading.is-visible{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.special-ending-ui,.special-album-animation,.special-ending.album-handoff{transition:none!important}.special-album-loading-spinner{animation-duration:1.4s}}

.special-overlay{position:fixed;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(12px,2vw,28px);isolation:isolate}.special-overlay-shade{position:absolute;z-index:-1;inset:0;background:rgba(21,14,28,.97);opacity:0;animation:specialOverlayShadeIn .55s ease forwards}.special-overlay-content{width:min(1560px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;opacity:0;transform:scale(.985);animation:specialOverlayContentIn .65s .22s ease forwards}.special-overlay-kicker{flex:0 0 auto;margin-bottom:clamp(8px,1.5vh,16px);color:rgba(240,199,236,.9);font-size:clamp(10px,1.2vw,13px);font-weight:800;letter-spacing:.28em}.special-overlay .mosaic-stage,.special-overlay-stage{position:relative;flex:0 1 auto;width:min(92vw,1500px);height:auto;max-height:76vh;aspect-ratio:16/9;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:clamp(12px,1.5vw,22px);background:#160f1d;box-shadow:0 24px 80px rgba(0,0,0,.48)}.mosaic-flight-canvas{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;opacity:1;transition:opacity .9s ease}.mosaic-flight-canvas.fade-out{opacity:0}.special-overlay .mosaic-final-image{position:absolute;z-index:3;inset:0;width:100%;height:100%;padding:clamp(6px,1vw,14px);object-fit:contain;opacity:0;transform:scale(1.015);pointer-events:none;filter:none}.special-overlay .mosaic-final-image.reveal{animation:overlayFinalMosaicReveal 1.35s cubic-bezier(.2,.8,.2,1) forwards}.special-overlay .mosaic-keyart-placeholder{z-index:4}.special-overlay .special-message{flex:0 0 auto;margin:clamp(8px,1.5vh,16px) auto 0;color:#f9eef8;text-align:center}.special-overlay .special-message strong{color:#f3a6d2;font-size:clamp(20px,3vw,40px)}.special-overlay .special-message span{color:rgba(255,255,255,.72)}.special-overlay-actions{flex:0 0 auto;display:flex;justify-content:center;gap:10px;margin-top:clamp(8px,1.4vh,14px)}.special-overlay-button{min-width:150px;min-height:42px;padding:10px 20px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;background:linear-gradient(135deg,#c765a9,#8d69c0);font:inherit;font-size:13px;font-weight:800;cursor:pointer}.special-overlay-button.secondary{background:rgba(255,255,255,.08)}@keyframes specialOverlayShadeIn{to{opacity:1}}@keyframes specialOverlayContentIn{to{opacity:1;transform:scale(1)}}@keyframes overlayFinalMosaicReveal{0%{opacity:0;transform:scale(1.015)}100%{opacity:1;transform:scale(1)}}@media(max-height:760px){.special-overlay{padding:8px 14px}.special-overlay-kicker{margin-bottom:6px}.special-overlay .mosaic-stage,.special-overlay-stage{width:min(88vw,1180px);max-height:72vh}.special-overlay .special-message{margin-top:6px}.special-overlay-actions{margin-top:6px}}@media(max-width:700px){.special-overlay{padding:8px}.special-overlay .mosaic-stage,.special-overlay-stage{width:100%;max-height:68vh}.special-overlay-actions{width:100%;flex-wrap:wrap}.special-overlay-button{min-width:0;flex:1 1 140px}}


/* =========================================================
   Chapter character silhouette
   grand-route-character.png のアルファ形状をそのまま使用
   ========================================================= */

.character {
    width: min(72vw, 780px);
    height: auto;
    aspect-ratio: 16 / 9;
    bottom: clamp(92px, 14%, 124px);
    background: none;
}

.character::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            155deg,
            rgba(94, 66, 108, 0.94),
            rgba(45, 35, 54, 0.98)
        );

    -webkit-mask-image:
        url("../assets/images/grand-route-character.png");
    mask-image:
        url("../assets/images/grand-route-character.png");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center bottom;
    mask-position: center bottom;

    -webkit-mask-size: contain;
    mask-size: contain;

    filter:
        drop-shadow(
            0 14px 22px rgba(72, 42, 86, 0.18)
        );
}

.character .silhouette-head,
.character .silhouette-body {
    display: none;
}

.character.visible {
    opacity: 0.84;
}

.character.grand-route-revealed::before {
    background: url("../assets/images/grand-route-character.png") center bottom / contain no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
}

.character.grand-route-revealed.visible {
    opacity: 1;
}

@media (max-height: 760px) {
    .character {
        width: min(64vw, 650px);
        height: auto;
        bottom: 84px;
    }
}

@media (max-width: 650px) {
    .character {
        width: min(96vw, 640px);
        height: auto;
        bottom: 96px;
    }
}

/* =========================================================
   MEMORY SELECT guide button and guide screen
   ========================================================= */
.strategy-open {
    position: absolute;
    z-index: 8;
    top: 3px;
    right: clamp(12px, 2vw, 20px);
    width: 64px;
    aspect-ratio: 2 / 3;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .18s ease;
}
.strategy-open img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 4px 5px rgba(67, 41, 91, .22));
}
.strategy-open:hover, .strategy-open:focus-visible {
    transform: translateY(-3px) scale(1.06);
}
.strategy-open:focus-visible {
    outline: 3px solid #a25ab8;
    outline-offset: 3px;
    border-radius: 4px;
}
.strategy-screen {
    position: absolute;
    z-index: 30;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(14px, 2.5vw, 28px);
    background: linear-gradient(145deg, #fff7fc, #f4edfa 56%, #eff0fc);
    color: #554761;
}
.strategy-header {display:flex;align-items:center;justify-content:space-between;gap:12px}
.strategy-kicker {font-size:10px;font-weight:800;letter-spacing:.17em;color:#bb74b2}
.strategy-header h2 {margin:2px 0 0;font-size:clamp(20px,3vw,30px)}
.strategy-intro {margin:0;color:#826f8b;font-size:12px;line-height:1.5}
.strategy-close, .strategy-tabs button, .strategy-actions button, .strategy-manage-row > button {
    border: 1px solid rgba(178, 117, 183, .3);
    border-radius: 12px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .82);
    color: #785582;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.strategy-close:hover, .strategy-tabs button:hover, .strategy-actions button:not(:disabled):hover,
.strategy-manage-row > button:not(:disabled):hover {background:#fff;border-color:#c778b2}
.strategy-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.strategy-tabs button {min-height:44px}
.strategy-tabs button.active {background:linear-gradient(135deg,#db83b9,#ad87ce);color:#fff;border-color:transparent}
.strategy-content {
    flex:1;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    padding:clamp(12px,2vw,22px);
    border:1px solid rgba(192,147,201,.32);
    border-radius:18px;
    background:rgba(255,255,255,.77);
    font-size:13px;
    line-height:1.65;
}
.strategy-content h3 {margin:0 0 8px;color:#aa5b9e;font-size:19px}
.strategy-content h4 {margin:15px 0 8px;color:#886499;font-size:14px}
.strategy-content p {margin:4px 0 12px}
.strategy-list {display:grid;gap:7px}
.strategy-row, .strategy-route, .strategy-chapter {
    border:1px solid rgba(192,151,202,.26);
    border-radius:12px;
    padding:10px 12px;
    background:rgba(255,250,254,.85);
}
.strategy-row {display:flex;align-items:center;justify-content:space-between;gap:10px}
.strategy-row strong, .strategy-choice strong {white-space:nowrap;color:#ba5599}
.strategy-route strong {color:#9f579e}
.strategy-route p {margin:4px 0 0}
.strategy-summary {margin-top:14px!important;text-align:right;font-weight:800;color:#aa559d}
.strategy-chapter summary {cursor:pointer;font-weight:800;color:#965a9b}
.strategy-chapter[open] summary {margin-bottom:12px}
.strategy-question {padding:10px 0;border-top:1px solid rgba(195,149,204,.24)}
.strategy-question h4 {margin:0 0 7px;white-space:pre-line}
.strategy-choice {display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.strategy-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.strategy-actions button, .strategy-manage-row > button {font-size:11px;padding:7px 10px}
.strategy-actions button:disabled, .strategy-manage-row > button:disabled {opacity:.45;cursor:default}
.strategy-choice-toggle {display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.strategy-choice-toggle button {
    min-width:100px;
    padding:11px 19px;
    border:1px solid rgba(178,117,183,.38);
    border-radius:999px;
    background:#fff;
    color:#805b85;
    font:inherit;
    font-weight:800;
    cursor:pointer;
}
.strategy-choice-toggle button[aria-pressed="true"] {
    border-color:transparent;
    background:linear-gradient(135deg,#d979b1,#a977c8);
    color:#fff;
}
.strategy-reset-all {margin-top:20px;padding-top:14px;border-top:1px solid rgba(192,151,202,.28)}
.strategy-reset-all button {
    padding:10px 16px;
    border:1px solid rgba(176,112,145,.45);
    border-radius:12px;
    background:rgba(255,248,251,.94);
    color:#9a5374;
    font:inherit;
    font-weight:800;
    cursor:pointer;
}
.strategy-reset-all button:hover {background:#fff;border-color:#b37697}
@media (max-width: 650px) {
    .strategy-open {top:4px;right:8px;width:48px}
    .strategy-header {align-items:flex-start}
    .strategy-close {font-size:10px;padding:8px}
    .strategy-tabs {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
    .strategy-tabs button {min-height:37px;padding:5px;font-size:11px}
    .strategy-screen {gap:8px}
    .strategy-row.strategy-manage-row {align-items:flex-start;flex-direction:column}
    .strategy-actions {justify-content:flex-start}
}

.chapter-card {
    isolation: isolate;
    overflow: hidden;
    background: rgba(255, 255, 255, .88);
}

.chapter-card.has-thumbnail::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image: var(--chapter-thumbnail);
    background-size: cover;
    background-position: center;
    opacity: .20;
    transform: scale(1.035);
    transition: opacity .2s ease, transform .25s ease, filter .2s ease;
}

.chapter-card.has-thumbnail::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.88),
            rgba(247,235,249,.74)
        );
}

.chapter-card.has-thumbnail:not(:disabled):hover::before {
    opacity: .28;
    transform: scale(1.065);
}

.chapter-card.cleared.has-thumbnail::before {
    opacity: .24;
}

.chapter-card.locked.has-thumbnail::before {
    opacity: .12;
    filter: grayscale(.65) blur(1.2px);
}

.chapter-card.locked.has-thumbnail::after {
    background: rgba(248, 244, 249, .84);
}

.chapter-card > * {
    position: relative;
    z-index: 1;
}

body.reset-modal-open {
    overflow: hidden;
}

.progress-reset-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.progress-reset-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 31, 50, .52);
    backdrop-filter: blur(5px);
    animation: resetBackdropIn .2s ease both;
}

.progress-reset-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid rgba(190, 130, 190, .28);
    border-radius: 24px;
    background: linear-gradient(155deg, #fffafd, #f3eafa);
    box-shadow: 0 24px 70px rgba(58, 35, 70, .25);
    text-align: center;
    animation: resetDialogIn .28s cubic-bezier(.2,.8,.2,1) both;
}

.reset-warning-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #d96a9e, #a36ec4);
    font-size: 26px;
    font-weight: 900;
}

.reset-dialog-kicker {
    color: #a65fae;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
}

.progress-reset-dialog h2 {
    margin: 6px 0 16px;
    color: #51425b;
    font-size: clamp(21px, 3vw, 29px);
    font-weight: 600;
}

.reset-warning-box {
    padding: 15px 17px;
    border: 1px solid rgba(210, 100, 145, .22);
    border-radius: 15px;
    background: rgba(255, 244, 249, .8);
    color: #66556c;
    text-align: left;
    font-size: 13px;
    line-height: 1.7;
}

.reset-warning-box strong {
    color: #b74c83;
}

.reset-warning-box ul {
    margin: 9px 0;
    padding-left: 1.4em;
}

.reset-warning-box p {
    margin: 8px 0 0;
}

.reset-warning-final {
    margin: 13px 0 16px;
    color: #b84c80;
    font-size: 12px;
    font-weight: 800;
}

.reset-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.reset-cancel-button,
.reset-confirm-button {
    min-width: 150px;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.reset-cancel-button {
    border: 1px solid rgba(150, 120, 160, .28);
    color: #716176;
    background: #fff;
}

.reset-confirm-button {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #d85f96, #a05fc0);
}

@keyframes resetBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes resetDialogIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 650px) {
    .select-heading {
        padding-top: 38px;
    }

    .reset-dialog-actions {
        flex-direction: column;
    }

    .reset-cancel-button,
    .reset-confirm-button {
        width: 100%;
    }
}


/* =========================================================
   MEMORY SELECT thumbnail adaptive visibility
   サムネイルの平均明度をJSで解析し、CSS変数をカードごとに設定
   ========================================================= */

.chapter-card.has-thumbnail::before {
    opacity: var(--thumb-opacity, 0.76) !important;
    filter: var(
        --thumb-filter,
        saturate(1.02) contrast(1.04)
    ) !important;
    transform: scale(1.018);
}

.chapter-card.has-thumbnail::after {
    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                var(--thumb-overlay-top, 0.08)
            ) 0%,
            rgba(
                255,
                250,
                253,
                calc(
                    var(--thumb-overlay-top, 0.08)
                    + 0.05
                )
            ) 47%,
            rgba(
                255,
                246,
                251,
                var(--thumb-overlay-bottom, 0.30)
            ) 100%
        ) !important;
}

.chapter-card.has-thumbnail:not(:disabled):hover::before {
    opacity: min(
        1,
        calc(var(--thumb-opacity, 0.76) + 0.06)
    ) !important;
    transform: scale(1.045);
}

.chapter-card.locked.has-thumbnail::before,
.chapter-card.cleared.has-thumbnail::before,
.chapter-card.current.has-thumbnail::before {
    opacity: var(--thumb-opacity, 0.76) !important;
}

.chapter-card.locked.has-thumbnail::after {
    background:
        linear-gradient(
            180deg,
            rgba(
                250,
                246,
                251,
                var(--thumb-overlay-top, 0.20)
            ),
            rgba(
                247,
                240,
                249,
                var(--thumb-overlay-bottom, 0.42)
            )
        ) !important;
}

/* 文字はサムネイル全体を白く飛ばさず、文字周辺だけ読みやすくする */
.chapter-card.has-thumbnail strong,
.chapter-card.has-thumbnail .card-theme,
.chapter-card.has-thumbnail .card-number,
.chapter-card.has-thumbnail .card-month {
    width: fit-content;
    max-width: 100%;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow:
        0 1px 5px rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(1.5px);
}

.chapter-card.has-thumbnail strong {
    color: #44374c;
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

.chapter-card.locked.has-thumbnail strong,
.chapter-card.locked.has-thumbnail .card-theme {
    background: rgba(249, 245, 250, 0.56);
}

.chapter-card.has-thumbnail .card-score {
    background: rgba(255, 247, 252, 0.88);
    box-shadow: 0 2px 8px rgba(100, 60, 105, 0.08);
}


/* =========================================================
   MEMORY SELECT card readability / score layout
   ========================================================= */

/*
 * タイトル・説明・スコアを別行に分離。
 * card-score の absolute 配置を解除して、長いタイトルと重ならないようにする。
 */
.chapter-card {
    grid-template-areas:
        "num month"
        "title title"
        "score score" !important;

    grid-template-rows:
        auto
        minmax(24px, auto)
        auto;

    align-content: start;

    row-gap: 4px;

    padding:
        10px
        10px
        34px !important;
}

.chapter-card.cleared {
    min-height: 0;
}

/* タイトルは最大2行。スコア行とは完全に分離 */
.chapter-card strong {
    min-width: 0;
    width: auto !important;
    max-width: 100% !important;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;

    font-size: 14px;
    line-height: 1.32;

    justify-self: start;
}

/* 獲得きゅんは4段目の右側へ。絶対配置をやめる */
.chapter-card .card-score {
    position: static !important;
    grid-area: score;

    justify-self: end;
    align-self: end;

    margin-top: 1px;

    padding: 3px 8px;

    white-space: nowrap;

    background:
        rgba(
            255,
            244,
            251,
            0.94
        ) !important;

    border:
        1px solid
        rgba(
            203,
            92,
            154,
            0.18
        );

    box-shadow:
        0
        2px
        8px
        rgba(
            90,
            50,
            95,
            0.09
        );
}

/*
 * サムネ全体を白く飛ばすのではなく、
 * 文字そのものの下だけ少し強めの白いパネルを敷く。
 */
.chapter-card.cleared.has-thumbnail strong {
    padding: 3px 6px;

    background:
        rgba(
            255,
            255,
            255,
            0.88
        );

    box-shadow:
        0
        2px
        8px
        rgba(
            75,
            45,
            85,
            0.08
        );

    backdrop-filter:
        blur(
            2.5px
        );
}

.chapter-card.cleared.has-thumbnail .card-theme {
    padding: 2px 6px;

    color: #725f79;

    background:
        rgba(
            255,
            255,
            255,
            0.78
        );

    box-shadow:
        0
        1px
        6px
        rgba(
            75,
            45,
            85,
            0.06
        );

    backdrop-filter:
        blur(
            2px
        );
}

/* 番号と年月も背景に埋もれないように少しだけ強化 */
.chapter-card.cleared.has-thumbnail .card-number,
.chapter-card.cleared.has-thumbnail .card-month {
    background:
        rgba(
            255,
            255,
            255,
            0.80
        );
}

/*
 * リセットボタンは従来どおり左下。
 * スコアはカード内部の右側行なので干渉しない。
 */
.chapter-card-wrap:has(.chapter-score-reset) .chapter-card {
    padding-bottom: 36px !important;
}

.chapter-score-reset {
    left: 9px;
    bottom: 7px;
}

/* 低い画面でもタイトルとスコアの行を潰さない */
@media (max-height: 760px) {
    .chapter-card {
        min-height: 0 !important;
        padding:
            8px
            8px
            31px !important;
        row-gap: 2px;
    }

    .chapter-card.cleared {
        min-height: 0 !important;
    }

    .chapter-card strong {
        font-size: 13px;
    }

    .chapter-card .card-score {
        padding: 2px 7px;
        font-size: 10px;
    }
}

@media (max-width: 560px) {
    .chapter-card {
        min-height: 0 !important;
    }
}

/* ============================================================
   Yumemi Mumu / Chapter Clear - 1st Anniversary Ribbon UI
   ============================================================ */
.chapter-clear{
  overflow:hidden;
  padding:clamp(10px,2.2vw,24px);
  background:
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.98) 0 12%,rgba(255,227,245,.72) 33%,transparent 60%),
    radial-gradient(circle at 14% 86%,rgba(195,214,255,.42),transparent 38%),
    radial-gradient(circle at 88% 78%,rgba(224,197,255,.46),transparent 42%),
    linear-gradient(145deg,rgba(255,244,251,.98),rgba(240,231,255,.97));
}

.chapter-clear::before,
.chapter-clear::after{
  content:"";
  position:absolute;
  width:min(44vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  filter:blur(22px);
  opacity:.32;
}

.chapter-clear::before{
  left:-18%;
  top:-28%;
  background:radial-gradient(circle,rgba(255,172,220,.74),rgba(255,172,220,0) 68%);
}

.chapter-clear::after{
  right:-18%;
  bottom:-32%;
  background:radial-gradient(circle,rgba(164,184,255,.70),rgba(164,184,255,0) 68%);
}

.clear-anniversary-card{
  position:relative;
  z-index:2;
  width:min(760px,96%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.clear-anniversary-ribbon{
  position:relative;
  z-index:3;
  display:block;
  width:clamp(290px,46vw,560px);
  max-width:94%;
  height:auto;
  margin:0 auto -118px;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:
    drop-shadow(0 10px 18px rgba(147,88,154,.13))
    drop-shadow(0 0 14px rgba(255,255,255,.70));
}

.clear-anniversary-panel{
  position:relative;
  z-index:2;
  width:100%;
  min-height:330px;
  padding:clamp(102px,12vw,132px) clamp(18px,3.5vw,34px) clamp(20px,3vw,30px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(224,165,205,.56);
  border-radius:clamp(22px,3vw,34px);
  background:
    radial-gradient(circle at 50% 3%,rgba(255,255,255,.96),rgba(255,255,255,.58) 34%,transparent 63%),
    linear-gradient(155deg,rgba(255,255,255,.88),rgba(255,237,248,.82) 48%,rgba(240,235,255,.84));
  box-shadow:
    0 22px 56px rgba(101,66,119,.13),
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 0 34px rgba(255,196,226,.13);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.clear-anniversary-panel::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(210,185,236,.38);
  border-radius:inherit;
  pointer-events:none;
}

.clear-anniversary-panel::after{
  content:"✦";
  position:absolute;
  left:50%;
  bottom:9px;
  transform:translateX(-50%);
  color:rgba(213,157,201,.72);
  font-size:13px;
  text-shadow:0 0 8px rgba(255,255,255,.92);
  pointer-events:none;
}

.chapter-clear .clear-small{
  position:relative;
  z-index:1;
  margin-bottom:4px;
  color:#a86ab6;
  font-size:clamp(9px,1.2vw,11px);
  font-weight:800;
  letter-spacing:.19em;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}

.chapter-clear h2{
  position:relative;
  z-index:1;
  margin:4px 0 1px;
  color:#914f9f;
  font-size:clamp(27px,4.2vw,48px);
  line-height:1.14;
  font-weight:800;
  letter-spacing:.01em;
  text-shadow:
    0 1px 0 #fff,
    0 0 15px rgba(255,190,226,.38);
}

.chapter-clear .clear-heart{
  z-index:1;
  margin-top:2px;
  margin-bottom:10px;
}

.chapter-clear .clear-heart-symbol{
  color:#e56aab;
  filter:drop-shadow(0 0 7px rgba(255,185,224,.42));
}

.chapter-clear .clear-actions{
  position:relative;
  z-index:1;
}

.chapter-clear #finish-button{
  align-self:center;
  min-width:210px;
  min-height:46px;
  padding:12px 30px;
  border:1px solid rgba(228,151,201,.40);
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#d56faf,#9e70cc);
  box-shadow:
    0 7px 18px rgba(182,95,155,.14),
    inset 0 1px 0 rgba(255,255,255,.35);
  font:inherit;
  font-size:14px;
  font-weight:800;
  letter-spacing:.05em;
  line-height:1.2;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.chapter-clear #finish-button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 11px 25px rgba(182,95,155,.22),
    0 0 18px rgba(255,177,221,.20),
    inset 0 1px 0 rgba(255,255,255,.42);
}
.chapter-clear #finish-button:active{
  transform:translateY(0) scale(.985);
}
.chapter-clear #finish-button:focus-visible{
  outline:2px solid rgba(255,255,255,.95);
  outline-offset:3px;
}

.chapter-clear .memory-link{
  border-color:rgba(205,161,220,.44);
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 20px rgba(118,83,137,.08);
}

@media(max-height:760px){
  .clear-anniversary-ribbon{
    width:clamp(250px,39vw,430px);
    margin-bottom:-92px;
  }

  .clear-anniversary-panel{
    min-height:282px;
    padding-top:82px;
    padding-bottom:15px;
  }

  .chapter-clear .clear-heart{
    transform:scale(.88);
    margin-top:-5px;
    margin-bottom:-1px;
  }

  .chapter-clear .clear-actions{
    gap:10px;
  }
}

@media(max-width:760px){
  .clear-anniversary-card{
    width:min(560px,98%);
  }

  .clear-anniversary-ribbon{
    width:clamp(270px,72vw,420px);
    margin-bottom:-88px;
  }

  .clear-anniversary-panel{
    min-height:390px;
    padding:82px 15px 18px;
  }

  .chapter-clear .clear-actions{
    width:min(430px,100%);
  }
}

@media(max-width:560px){
  .chapter-clear{
    padding:8px;
  }

  .clear-anniversary-ribbon{
    width:min(360px,92vw);
    margin-bottom:-74px;
  }

  .clear-anniversary-panel{
    min-height:0;
    padding:72px 12px 14px;
    border-radius:22px;
  }

  .chapter-clear h2{
    font-size:clamp(25px,8vw,36px);
  }

  .chapter-clear .clear-small{
    max-width:88%;
    line-height:1.5;
  }

  .chapter-clear .clear-heart{
    transform:scale(.82);
    margin:-8px 0 -3px;
  }

  .chapter-clear #finish-button{
    width:min(320px,100%);
    min-width:0;
    min-height:44px;
    padding:11px 22px;
    font-size:13px;
  }

  .chapter-clear .memory-link{
    min-height:70px;
  }
}

/* ============================================================
   Yumemi Mumu / MEMORY SELECT - 1st Anniversary UI
   ============================================================ */
.select-heading{
  position:relative;
  width:min(560px,90%);
  margin:0 auto 2px;
  padding:8px 24px 10px;
  border-top:1px solid rgba(229,176,116,.38);
  border-bottom:1px solid rgba(229,176,116,.38);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  border-radius:18px;
}
.select-heading::before,
.select-heading::after{
  content:"✦";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#e5b46f;
  font-size:17px;
  text-shadow:0 0 10px rgba(255,218,154,.8);
}
.select-heading::before{left:4px}.select-heading::after{right:4px}
.select-kicker{
  color:#c65b9e;
  font-size:11px;
  letter-spacing:.24em;
}
.select-heading h1{
  margin:2px 0 0;
  color:#6e4c78;
  font-size:clamp(23px,3.3vw,34px);
  font-weight:700;
  letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(255,255,255,.95),0 0 18px rgba(234,151,202,.2);
}
.select-heading p{
  margin-top:2px;
  color:#b0799c;
  font-size:11px;
  letter-spacing:.16em;
}
.chapter-grid{gap:10px;width:min(980px,calc(100% - 8px),114dvh);max-width:980px;height:auto;align-content:start;align-self:start;justify-self:center}
.chapter-card-wrap{filter:drop-shadow(0 9px 18px rgba(111,67,125,.11))}
.chapter-card{
  min-height:0;
  height:100%;
  padding:10px 10px 26px;
  border:1px solid rgba(224,174,112,.46) !important;
  border-radius:18px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 5px 16px rgba(105,67,116,.08);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease !important;
}
.chapter-card:not(:disabled):hover{
  transform:translateY(-3px) scale(1.012);
  border-color:rgba(222,151,83,.72) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.88),0 10px 24px rgba(155,86,139,.16),0 0 20px rgba(255,199,230,.24);
}
.chapter-card.current{
  border-color:rgba(229,156,82,.92) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 2px rgba(245,190,122,.18),0 8px 24px rgba(194,88,155,.18),0 0 26px rgba(255,177,221,.35) !important;
  animation:memoryCurrentGlow 2.6s ease-in-out infinite;
}
.chapter-card.current::after{
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.62),transparent 17%),
    linear-gradient(180deg,rgba(255,255,255,var(--thumb-overlay-top,.08)),rgba(255,246,251,var(--thumb-overlay-bottom,.30))) !important;
}
.chapter-card.current .card-number::before{
  content:"✦";
  display:inline-block;
  margin-right:4px;
  color:#e4ad5e;
  text-shadow:0 0 8px rgba(255,214,143,.95);
  animation:memoryStarTwinkle 1.8s ease-in-out infinite;
}
.chapter-card.cleared{
  border-color:rgba(225,171,105,.58) !important;
}
.chapter-card.cleared .card-score::before{content:"♥ ";color:#df6ca8}
.card-status{
  position:absolute !important;
  z-index:3 !important;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  padding:2px 8px;
  border:1px solid rgba(231,182,120,.46);
  border-radius:999px;
  background:rgba(255,251,247,.84);
  color:#b57873;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  white-space:nowrap;
  box-shadow:0 2px 7px rgba(95,55,105,.06);
}
.chapter-card.current .card-status{color:#c45396;background:rgba(255,245,252,.9)}
.chapter-card.locked .card-status{color:#948b98;background:rgba(249,247,250,.82)}
.chapter-score-reset{
  border-color:rgba(224,171,111,.34) !important;
  background:rgba(255,250,253,.84) !important;
  color:#a66f91 !important;
}
.ending-button{
  border:1px solid rgba(245,211,157,.58);
  background:linear-gradient(135deg,#df79b4,#a875d2);
  box-shadow:0 8px 24px rgba(155,82,143,.2),inset 0 1px 0 rgba(255,255,255,.34);
}
@media(hover:hover) and (pointer:fine){
  .ending-button:hover,
  .ending-button:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 11px 28px rgba(155,82,143,.27),inset 0 1px 0 rgba(255,255,255,.34);
  }
}
.ending-button:focus-visible{
  outline:2px solid rgba(255,214,240,.95);
  outline-offset:2px;
}
@keyframes memoryCurrentGlow{
  0%,100%{filter:brightness(1);transform:translateY(0)}
  50%{filter:brightness(1.035);transform:translateY(-1px)}
}
@keyframes memoryStarTwinkle{
  0%,100%{opacity:.45;transform:scale(.72) rotate(0)}
  50%{opacity:1;transform:scale(1.18) rotate(45deg)}
}
@media(max-width:650px){
.select-heading{width:min(430px,94%);padding-left:20px;padding-right:20px}
  .chapter-grid{gap:9px}
  .card-status{font-size:7px;padding:2px 6px}
}
@media(prefers-reduced-motion:reduce){.chapter-card.current,.chapter-card.current .card-number::before{animation:none!important}}


/* MEMORY SELECT: completed status + score are one visual unit */
.chapter-card.cleared .card-completion-meta{
  position:absolute;
  z-index:4;
  right:9px;
  bottom:7px;
  display:flex;
  align-items:center;
  gap:5px;
  pointer-events:none;
}
.chapter-card.cleared .card-completion-meta .card-status,
.chapter-card.cleared .card-completion-meta .card-score{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  margin:0;
  white-space:nowrap;
}
.chapter-card.cleared .card-completion-meta .card-status{
  padding:3px 7px;
  border:1px solid rgba(225,151,202,.42);
  background:linear-gradient(135deg,rgba(255,246,252,.94),rgba(244,239,255,.92));
  color:#c85d9d;
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  box-shadow:0 2px 8px rgba(191,91,157,.09),inset 0 0 0 1px rgba(255,255,255,.58);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.chapter-card.cleared .card-completion-meta .card-score{
  padding:3px 7px;
  border:1px solid rgba(215,160,211,.28);
  background:rgba(255,247,253,.9);
  color:#c25294;
  font-size:10px;
  line-height:1.2;
  box-shadow:0 2px 7px rgba(124,73,130,.06);
}
.chapter-card.cleared .card-completion-meta .card-score::before{
  content:"♥ ";
  color:#df6ca8;
}
@media(max-width:560px){
  .chapter-card.cleared .card-completion-meta{right:7px;bottom:6px;gap:4px}
  .chapter-card.cleared .card-completion-meta .card-status{padding:2px 5px;font-size:7px;letter-spacing:.06em}
  .chapter-card.cleared .card-completion-meta .card-score{padding:2px 5px;font-size:9px}
}


/* =========================================================
   MEMORY SELECT: chapter kyun reset button - top right
   ========================================================= */
.chapter-card-wrap:has(.chapter-score-reset) .chapter-card {
    padding-bottom: 12px !important;
}

.chapter-score-reset {
    left: auto !important;
    right: 9px !important;
    top: 7px !important;
    bottom: auto !important;
    z-index: 6;
}

@media (max-height: 760px) {
    .chapter-card-wrap:has(.chapter-score-reset) .chapter-card {
        padding-bottom: 10px !important;
    }

    .chapter-score-reset {
        right: 7px !important;
        top: 6px !important;
        bottom: auto !important;
    }
}

@media (max-width: 650px) {
    .chapter-score-reset {
        right: 7px !important;
        top: 6px !important;
    }
}

/* ------------------------------------------------------------
   SPECIAL ROUTE unlocked: reveal choice affection values
   ------------------------------------------------------------ */
.choice.affection-visible{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:left;
}
.choice-text{
  min-width:0;
  flex:1 1 auto;
}
.choice-affection-hint{
  flex:0 0 auto;
  padding:3px 9px;
  border:1px solid rgba(213,111,175,.22);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,239,248,.96),rgba(244,237,255,.96));
  color:#cf4f94;
  font-size:.82em;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}
@media(max-width:560px){
  .choice.affection-visible{gap:10px;padding-left:16px;padding-right:14px}
  .choice-affection-hint{padding:3px 7px}
}

/* ------------------------------------------------------------
   Chapter 4 HAPPENING ROUTE hint
   SPECIAL ROUTE到達後だけ、対象選択肢に「気づけば分かる」程度の違和感を出す。
   ------------------------------------------------------------ */
.choice.happening-choice-hint .choice-text{
  animation:happeningChoiceTextGlitch 4.8s steps(1,end) infinite;
  will-change:transform,text-shadow;
}
.choice.happening-choice-hint{
  animation:happeningChoiceEdgeGlitch 4.8s steps(1,end) infinite;
}
.choice.happening-choice-hint:hover .choice-text{
  text-shadow:.7px 0 rgba(226,74,158,.22),-.7px 0 rgba(82,135,220,.20);
}
.choice.happening-choice-hint-primed .choice-text,
.choice.happening-choice-hint-primed{
  animation-duration:3.6s;
}
@keyframes happeningChoiceTextGlitch{
  0%,88%,92%,100%{transform:translateX(0);text-shadow:none}
  89%{transform:translateX(.65px);text-shadow:.6px 0 rgba(226,74,158,.20),-.6px 0 rgba(82,135,220,.18)}
  90%{transform:translateX(-.75px);text-shadow:-.5px 0 rgba(226,74,158,.16),.5px 0 rgba(82,135,220,.16)}
  91%{transform:translateX(.2px);text-shadow:none}
}
@keyframes happeningChoiceEdgeGlitch{
  0%,88%,92%,100%{box-shadow:none}
  89%,90%{box-shadow:0 0 0 1px rgba(220,105,174,.09),0 0 9px rgba(102,144,214,.045)}
  91%{box-shadow:0 0 0 1px rgba(102,144,214,.07)}
}
@media(prefers-reduced-motion:reduce){
  .choice.happening-choice-hint,
  .choice.happening-choice-hint .choice-text{animation:none}
  .choice.happening-choice-hint .choice-text{
    text-shadow:.4px 0 rgba(226,74,158,.15),-.4px 0 rgba(82,135,220,.13);
  }
}


/* =========================================================
   SPECIAL ROUTE ENDING後：隠しルートボタン
   ========================================================= */
.select-ending-row{
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  overflow:visible;
}
.hidden-route-buttons{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  overflow:visible;
}
.hidden-route-button{
  position:relative;
  min-width:138px;
  min-height:40px;
  padding:11px 14px;
  font-size:10px;
  white-space:nowrap;
  overflow:visible;
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,filter .18s ease;
}
/* SPECIAL ROUTEと同じボタンデザインのまま、未解放だけ非活性感を出す */
.hidden-route-button.locked{
  opacity:.48;
  filter:saturate(.55) brightness(1.05);
  cursor:default;
}
.hidden-route-button.unlocked{cursor:pointer}
.hidden-route-button.unlocked:hover{
  transform:translateY(-2px);
  box-shadow:0 11px 28px rgba(155,82,143,.27),inset 0 1px 0 rgba(255,255,255,.34);
}
.hidden-route-button::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  z-index:10020;
  width:max-content;
  max-width:min(300px,82vw);
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:9px;
  color:#fff;
  background:rgba(67,49,78,.96);
  box-shadow:0 7px 20px rgba(42,25,50,.2);
  font-size:10px;
  font-weight:800;
  letter-spacing:0;
  line-height:1.45;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
@media(hover:hover) and (pointer:fine){
  .hidden-route-button:hover::after,
  .hidden-route-button:focus-visible::after{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
  }
}
.hidden-route-button.show-touch-tooltip::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.hidden-route-condition{
  position:fixed;
  z-index:20050;
  width:min(520px,calc(100vw - 24px));
  margin:0;
  padding:13px 17px 14px;
  border:1px solid rgba(238,150,204,.52);
  border-radius:14px;
  color:#7f466d;
  background:rgba(255,249,253,.98);
  box-shadow:
    0 16px 42px rgba(89,45,82,.22),
    0 0 0 4px rgba(238,150,204,.08);
  font-size:11px;
  font-weight:700;
  line-height:1.65;
  text-align:left;
  pointer-events:none;
  transform-origin:center bottom;
}
.hidden-route-condition strong{
  display:block;
  margin-bottom:4px;
  color:#cb5b9d;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em
}
.hidden-route-condition span{
  display:block
}
.hidden-route-condition::after{
  content:"";
  position:absolute;
  left:50%;
  width:12px;
  height:12px;
  background:inherit;
  border-right:1px solid rgba(238,150,204,.52);
  border-bottom:1px solid rgba(238,150,204,.52);
}
.hidden-route-condition[data-placement="above"]::after{
  bottom:-7px;
  transform:translateX(-50%) rotate(45deg)
}
.hidden-route-condition[data-placement="below"]::after{
  top:-7px;
  transform:translateX(-50%) rotate(225deg)
}
.hidden-route-condition.condition-revealing{
  animation:hiddenRouteConditionReveal .42s cubic-bezier(.18,.9,.25,1.15) both
}
.hidden-route-button.route-condition-highlight{
  opacity:.92;
  filter:saturate(1) brightness(1.12);
  animation:hiddenRouteConditionButtonPulse .58s ease-in-out 3;
  box-shadow:
    0 0 0 3px rgba(235,128,195,.18),
    0 0 26px rgba(209,91,164,.38)
}
@keyframes hiddenRouteConditionReveal{
  0%{
    opacity:0;
    transform:translateY(8px) scale(.92)
  }
  65%{
    opacity:1;
    transform:translateY(-2px) scale(1.025)
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1)
  }
}
@keyframes hiddenRouteConditionButtonPulse{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.035)}
}
.chapter-select.has-hidden-routes .select-heading{
  margin-bottom:0;
  padding:7px 22px 9px;
}
.chapter-select.has-hidden-routes .chapter-grid{
  gap:8px;
}
.chapter-select.has-hidden-routes .chapter-card{
  min-height:0;
  height:100%;
  padding:9px 9px 24px;
}
.chapter-select.has-hidden-routes .chapter-card strong{
  font-size:13px;
  line-height:1.32;
}
.chapter-select.has-hidden-routes .card-number,
.chapter-select.has-hidden-routes .card-month{
  font-size:11px;
}
.chapter-select.has-hidden-routes .select-ending-row{
  margin-top:2px;
}
.chapter-select.has-hidden-routes .ending-button,
.chapter-select.has-hidden-routes .hidden-route-button{
  min-height:38px;
}
@media(max-width:760px){
  .select-ending-row{flex-direction:column-reverse}
  .hidden-route-buttons{width:100%;gap:8px}
  .hidden-route-button{min-width:calc(50% - 6px);padding:11px 10px;font-size:9px}
  .hidden-route-condition{
    width:calc(100vw - 20px);
    padding:12px 14px 13px;
    font-size:10px
  }
}
@media(prefers-reduced-motion:reduce){
  .hidden-route-condition.condition-revealing,
  .hidden-route-button.route-condition-highlight{
    animation:none
  }
}


/* ============================================================
   Hidden route unlocked celebration
   ============================================================ */
.hidden-route-unlock-overlay{
  position:fixed;
  z-index:20050;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:20px;
  isolation:isolate;
  cursor:pointer;
  animation:hiddenRouteOverlayIn .42s ease both;
}
.hidden-route-unlock-backdrop{
  position:absolute;
  z-index:-3;
  inset:0;
  background:rgba(28,18,36,.56);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.hidden-route-unlock-burst{
  position:absolute;
  z-index:-2;
  left:50%;top:50%;
  width:min(92vmin,900px);aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.15);
  background:radial-gradient(circle,rgba(255,255,255,.98) 0 5%,rgba(255,168,220,.72) 16%,rgba(197,164,255,.48) 34%,rgba(142,205,255,.24) 52%,transparent 72%);
  animation:hiddenRouteBurst 1.45s cubic-bezier(.18,.72,.22,1) both;
}
.hidden-route-unlock-star{
  position:absolute;
  z-index:-1;
  left:50%;top:48%;
  width:clamp(220px,36vmin,440px);
  transform:translate(-50%,-50%) scale(.15) rotate(-8deg);
  opacity:0;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.96)) drop-shadow(0 0 38px rgba(224,155,235,.72));
  animation:hiddenRouteStar 1.55s .08s cubic-bezier(.18,.76,.22,1) both;
}
.hidden-route-unlock-sparkle{position:absolute;z-index:-1;width:clamp(90px,14vmin,170px);opacity:0;filter:drop-shadow(0 0 14px rgba(255,255,255,.85))}
.hidden-route-unlock-sparkle.sparkle-a{left:25%;top:29%;animation:hiddenRouteSparkle 1.35s .3s ease both}
.hidden-route-unlock-sparkle.sparkle-b{right:23%;bottom:25%;transform:rotate(22deg);animation:hiddenRouteSparkle 1.35s .48s ease both}
.hidden-route-unlock-card{
  position:relative;
  width:min(620px,92vw);
  padding:clamp(25px,4vw,42px) clamp(22px,5vw,58px);
  border:1px solid rgba(255,211,239,.72);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(255,247,253,.94),rgba(239,229,252,.94));
  box-shadow:0 24px 80px rgba(38,20,50,.34),inset 0 0 35px rgba(255,255,255,.72);
  text-align:center;
  opacity:0;
  transform:translateY(18px) scale(.94);
  animation:hiddenRouteCardIn .7s .48s cubic-bezier(.18,.78,.22,1) forwards;
}
.hidden-route-unlock-kicker{color:#9d68b6;font-size:clamp(10px,1.3vw,13px);font-weight:900;letter-spacing:.25em}
.hidden-route-unlock-name{margin:9px 0 8px;color:#c54f98;font-size:clamp(30px,6vw,58px);font-weight:900;letter-spacing:.06em;text-shadow:0 0 18px rgba(237,143,202,.25)}
.hidden-route-unlock-message{color:#66546f;font-size:clamp(13px,2vw,17px);font-weight:700;letter-spacing:.04em}
.hidden-route-unlock-overlay.route-horror .hidden-route-unlock-name{color:#8058ad}
.hidden-route-unlock-overlay.route-happening .hidden-route-unlock-name{color:#b84b8d}
.hidden-route-unlock-overlay.route-secret .hidden-route-unlock-name{color:#b48a42;text-shadow:0 0 20px rgba(237,202,125,.35)}
.hidden-route-unlock-overlay.closing{animation:hiddenRouteOverlayOut .5s ease forwards;pointer-events:none}
@keyframes hiddenRouteOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes hiddenRouteOverlayOut{to{opacity:0}}
@keyframes hiddenRouteBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes hiddenRouteStar{0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-14deg)}30%{opacity:1}62%{opacity:.95;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.32) rotate(8deg)}}
@keyframes hiddenRouteSparkle{0%{opacity:0;transform:scale(.3) rotate(-12deg)}38%{opacity:1;transform:scale(1.05) rotate(5deg)}100%{opacity:0;transform:scale(1.32) rotate(14deg)}}
@keyframes hiddenRouteCardIn{to{opacity:1;transform:none}}
@media(max-width:560px){.hidden-route-unlock-card{border-radius:21px}.hidden-route-unlock-sparkle.sparkle-a{left:7%;top:25%}.hidden-route-unlock-sparkle.sparkle-b{right:5%;bottom:24%}}
@media(prefers-reduced-motion:reduce){.hidden-route-unlock-burst,.hidden-route-unlock-star,.hidden-route-unlock-sparkle{display:none}.hidden-route-unlock-card{animation:none;opacity:1;transform:none}}

/* ============================================================
   HORROR ROUTE — monitoring job framework
   ============================================================ */
body.horror-route-active #affection-bottle-gauge{visibility:hidden}
body.horror-route-active::before{
  opacity:1!important;
  background-image:url("../assets/images/chapter5/chapter5_horror_room.png")!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  filter:blur(18px) saturate(.76) brightness(.42)!important;
  transform:scale(1.10)!important;
}
body.horror-route-active::after{
  opacity:1!important;
  background:linear-gradient(180deg,rgba(4,8,25,.32),rgba(10,13,31,.48) 58%,rgba(15,10,29,.42) 100%)!important;
}
body.horror-route-active #mumu-ambient-frame-layer,
body.horror-route-active #mumu-sparkle-layer{
  display:none!important;
  opacity:0!important;
}
body.horror-route-active .scene{
  background:#080c18!important;
}
body.horror-route-active .scene::before,
body.horror-route-active .scene::after,
body.horror-route-active .dream-light{
  display:none!important;
  opacity:0!important;
}
.horror-route-overlay{
  position:absolute;
  z-index:110;
  inset:0;
  overflow:hidden;
  color:#eef3ff;
  background:#030713;
  isolation:isolate;
}
.horror-route-backdrop,.horror-job-game-backdrop{
  position:absolute;
  z-index:-2;
  inset:-3%;
  background:
    linear-gradient(180deg,rgba(2,5,17,.62),rgba(3,5,15,.88)),
    url("../assets/images/chapter5/chapter5_horror_room.png") center/cover no-repeat;
  filter:saturate(.58) brightness(.48);
  transform:scale(1.04);
}
.horror-route-backdrop::after,.horror-job-game-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 42%,transparent 0 28%,rgba(0,0,10,.42) 78%,rgba(0,0,8,.82) 100%);
  box-shadow:inset 0 0 110px rgba(0,0,0,.58);
}
.horror-route-panel{
  position:absolute;
  left:50%;
  top:50%;
  width:min(680px,90%);
  max-height:88%;
  overflow:auto;
  transform:translate(-50%,-50%);
  padding:clamp(20px,3vw,34px);
  border:1px solid rgba(139,172,224,.27);
  border-radius:18px;
  background:linear-gradient(150deg,rgba(7,12,28,.94),rgba(11,12,30,.91));
  box-shadow:0 22px 70px rgba(0,0,0,.48),inset 0 0 28px rgba(118,146,210,.06);
  text-align:center;
  backdrop-filter:blur(7px);
}
.horror-route-kicker{
  color:#93b8e7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.28em;
}
.horror-route-panel h2{
  margin:8px 0 6px;
  color:#f4f7ff;
  font-size:clamp(28px,4.5vw,48px);
  font-weight:600;
  letter-spacing:.06em;
  text-shadow:0 0 18px rgba(124,165,225,.18);
}
.horror-route-copy{margin:0 0 18px;color:#abb6cc;font-size:13px;line-height:1.75}
.horror-route-wallet{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:min(430px,100%);
  margin:18px auto;
  padding:12px 16px;
  border:1px solid rgba(116,163,217,.28);
  border-radius:12px;
  background:rgba(7,16,33,.72);
}
.horror-route-wallet.compact{margin:15px auto 12px;padding:10px 14px}
.horror-route-wallet span{color:#8fa5c4;font-size:11px;letter-spacing:.08em}
.horror-route-wallet strong{color:#bfe3ff;font-size:clamp(20px,3vw,28px);letter-spacing:.04em;text-shadow:0 0 12px rgba(89,174,255,.24)}
.horror-route-records{
  display:flex;
  justify-content:center;
  gap:10px 28px;
  flex-wrap:wrap;
  margin:0 0 20px;
  color:#8290a9;
  font-size:11px;
}
.horror-route-records b{margin-left:4px;color:#d8e5f7}
.horror-route-menu-actions,.horror-route-story-actions,.horror-result-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.horror-route-action,.horror-route-back,.horror-job-abort{
  border:1px solid rgba(125,163,211,.31);
  border-radius:12px;
  color:#dbe7f7;
  background:rgba(13,21,41,.88);
  font:inherit;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.horror-route-action{
  min-width:190px;
  min-height:62px;
  padding:10px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.horror-route-action small{color:#8298b8;font-size:8px;font-weight:900;letter-spacing:.16em}
.horror-route-action strong{font-size:14px;letter-spacing:.04em}
.horror-route-action.primary{
  border-color:rgba(101,179,237,.48);
  background:linear-gradient(135deg,rgba(20,53,83,.95),rgba(23,31,64,.96));
  box-shadow:0 0 22px rgba(69,152,224,.08);
}
.horror-route-action.secondary{min-width:150px;min-height:46px}
.horror-route-action:hover,.horror-route-back:hover,.horror-job-abort:hover{
  transform:translateY(-2px);
  border-color:rgba(153,205,244,.64);
  background:rgba(23,38,65,.96);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.horror-route-back{margin-top:14px;padding:9px 18px;border-radius:999px;color:#90a2bb;font-size:10px;letter-spacing:.08em}
.horror-job-rule-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:18px 0 12px;
}
.horror-job-rule-grid>div{
  padding:12px 8px;
  border:1px solid rgba(111,147,190,.20);
  border-radius:10px;
  background:rgba(5,12,27,.52);
}
.horror-job-rule-grid span{display:block;color:#798da8;font-size:9px;letter-spacing:.08em}
.horror-job-rule-grid strong{display:block;margin-top:5px;color:#dcecff;font-size:14px}
.horror-job-notice{color:#9aa9bd;font-size:11px;line-height:1.65}.horror-job-notice p{margin:4px 0}.horror-job-notice b{color:#d4e8ff}

.horror-job-shell{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:7px;
  padding:clamp(8px,1.4vw,14px);
}
.horror-job-topbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:8px 12px;
  border:1px solid rgba(104,142,188,.22);
  background:rgba(2,8,20,.78);
  box-shadow:inset 0 0 18px rgba(101,149,204,.04);
}
.horror-job-title,.horror-job-wallet{display:flex;flex-direction:column}.horror-job-title{align-items:flex-start}.horror-job-wallet{align-items:flex-end}
.horror-job-title small,.horror-job-wallet span,.horror-job-clock-wrap span{color:#7186a4;font-size:8px;font-weight:900;letter-spacing:.14em}
.horror-job-title strong{margin-top:2px;color:#dfeeff;font-size:14px;letter-spacing:.09em}
.horror-job-wallet strong{margin-top:2px;color:#a9dcff;font-size:16px;letter-spacing:.05em}
.horror-job-clock-wrap{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 10px;min-width:190px;text-align:center}
.horror-job-clock-wrap span{grid-column:1/2;text-align:right}
.horror-job-clock-wrap strong{grid-column:2/3;color:#dbeeff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:21px;letter-spacing:.06em}
.horror-job-clock-wrap i{grid-column:1/3;height:3px;overflow:hidden;border-radius:99px;background:rgba(99,125,159,.18)}
.horror-job-time-fill{display:block;width:100%;height:100%;background:linear-gradient(90deg,#587ba5,#9dd4f3);transition:width .2s linear}
.horror-job-statbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px 18px;
  flex-wrap:wrap;
  padding:6px 10px;
  border:1px solid rgba(94,126,166,.15);
  background:rgba(3,9,21,.64);
  color:#73869f;
  font-size:9px;
  letter-spacing:.06em;
}
.horror-job-statbar b{margin-left:4px;color:#d0e3f7;font-size:11px}
.horror-monitor-layout{
  position:relative;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(105,138,177,.34);
  background:#091120;
  box-shadow:inset 0 0 24px rgba(0,0,0,.28);
}
.horror-monitor-main{
  position:absolute;
  inset:0;
  overflow:hidden;
  cursor:crosshair;
  background-color:#101927;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:saturate(.92) brightness(.98) contrast(1.01);
  box-shadow:inset 0 0 24px rgba(0,0,0,.24);
}
.horror-monitor-main::after{
  content:"";
  position:absolute;
  z-index:12;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 42px rgba(0,0,0,.44);
  background:linear-gradient(180deg,rgba(177,209,231,.025),transparent 48%,rgba(0,0,0,.14));
}
.horror-monitor-main.camera-switching{animation:horrorCameraSwitch .16s steps(2,end)}
@keyframes horrorCameraSwitch{0%{filter:saturate(.28) brightness(.45) contrast(1.35)}55%{filter:saturate(.66) brightness(.72) contrast(1.18)}100%{filter:saturate(.52) brightness(.62) contrast(1.08)}}
.horror-camera-mini-panel{
  position:absolute;
  z-index:24;
  top:10px;
  left:10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  width:min(210px,32vw);
  padding:6px;
  border:1px solid rgba(119,154,194,.30);
  border-radius:8px;
  background:rgba(0,5,15,.76);
  box-shadow:0 7px 22px rgba(0,0,0,.34),inset 0 0 18px rgba(103,157,207,.04);
  backdrop-filter:blur(4px);
}
.horror-camera-mini{
  position:relative;
  min-width:0;
  height:56px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:6px 8px;
  border:1px solid rgba(105,139,177,.28);
  border-radius:4px;
  background-color:#101927;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  color:#b6c8da;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,filter .14s ease,transform .14s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.horror-camera-mini::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background:
    linear-gradient(180deg,rgba(3,7,15,.06),rgba(3,7,15,.38)),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(212,232,245,.08) 3px 4px);
}
.horror-camera-mini b{position:relative;z-index:2;color:#eef6ff;text-shadow:0 1px 4px rgba(0,0,0,.72);font:800 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em}
.horror-camera-mini span{position:relative;z-index:2;margin-top:4px;color:#d1e0f0;text-shadow:0 1px 4px rgba(0,0,0,.72);font-size:7px;letter-spacing:.06em}
.horror-camera-mini i{position:absolute;z-index:3;right:7px;top:7px;width:5px;height:5px;border-radius:50%;background:#53718e;box-shadow:0 0 5px rgba(104,161,205,.28)}
.horror-camera-mini:hover{border-color:rgba(150,196,231,.52);background:linear-gradient(180deg,rgba(19,38,60,.90),rgba(8,19,36,.96))}
.horror-camera-mini.active{border-color:rgba(163,217,248,.72);background:linear-gradient(180deg,rgba(26,56,81,.94),rgba(10,24,43,.96));box-shadow:0 0 13px rgba(104,190,238,.15),inset 0 0 12px rgba(142,211,247,.05)}
.horror-camera-mini.active i{background:#9fdcff;box-shadow:0 0 8px rgba(128,211,255,.72)}
.horror-camera-mini.warning-weak{animation:horrorMiniWarnWeak 1.5s steps(2,end) infinite}
.horror-camera-mini.warning-medium{animation:horrorMiniWarnMedium 1.12s steps(2,end) infinite}
.horror-camera-mini.warning-strong{animation:horrorMiniWarnStrong .78s steps(2,end) infinite}
.horror-camera-mini.warning-max{animation:horrorMiniWarnMax .48s steps(2,end) infinite}
@keyframes horrorMiniWarnWeak{50%{filter:brightness(1.10) contrast(1.06);box-shadow:0 0 7px rgba(129,186,225,.10)}}
@keyframes horrorMiniWarnMedium{0%,100%{transform:translateX(0)}50%{transform:translateX(1px);filter:brightness(1.17) contrast(1.12);border-color:rgba(151,193,229,.48);box-shadow:0 0 9px rgba(132,191,230,.18)}}
@keyframes horrorMiniWarnStrong{0%,100%{transform:translate(0)}35%{transform:translate(-1px,0);filter:brightness(1.22) contrast(1.18)}70%{transform:translate(1px,1px);border-color:rgba(194,179,229,.62);box-shadow:0 0 12px rgba(166,142,225,.26)}}
@keyframes horrorMiniWarnMax{0%,100%{transform:translate(0);filter:brightness(1.10)}25%{transform:translate(-2px,1px);filter:brightness(1.35) contrast(1.28)}55%{transform:translate(2px,-1px);border-color:rgba(238,151,179,.78);box-shadow:0 0 15px rgba(224,117,158,.34)}75%{transform:translate(-1px,0)}}
.horror-camera-noise{
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(205,227,239,.05) 3px 4px);
  mix-blend-mode:screen;
}
.horror-camera-label,.horror-camera-rec{
  position:absolute;
  z-index:16;
  top:10px;
  display:flex;
  gap:7px;
  align-items:center;
  padding:4px 6px;
  border-radius:4px;
  background:rgba(0,5,14,.58);
  color:#c9d9ea;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:8px;
  pointer-events:none;
}
.horror-monitor-main .horror-camera-label{left:auto;right:72px}.horror-camera-label span{color:#71849c}
.horror-monitor-main .horror-camera-rec{right:10px;color:#9eb4ca}.horror-camera-rec i{width:5px;height:5px;border-radius:50%;background:#c95662;box-shadow:0 0 7px rgba(227,81,95,.58)}
.horror-anomaly-layer{position:absolute;z-index:7;inset:0}

/* v17: 残り30秒の停電フェーズ。
   メインCAM映像と人魂だけを97%暗転し、カーソル周辺 半径140px + 70pxフェザーで探索する。
   ミニモニター / 警告 / CAMラベル / REC / ナビボタンはマスクより前面に残す。 */
.horror-blackout-mask{
  position:absolute;
  z-index:10;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:rgba(0,0,0,.97);
  transition:opacity .18s ease;
}
.horror-job-blackout .horror-blackout-mask{
  opacity:1;
}
.horror-job-blackout .horror-monitor-main.spotlight-active .horror-blackout-mask{
  background:radial-gradient(
    circle at var(--horror-light-x,50%) var(--horror-light-y,50%),
    rgba(0,0,0,0) 0 140px,
    rgba(0,0,0,.20) 158px,
    rgba(0,0,0,.50) 178px,
    rgba(0,0,0,.78) 198px,
    rgba(0,0,0,.97) 210px
  );
}
.horror-power-failure-notice{
  position:absolute;
  z-index:17;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:8px 13px;
  border:1px solid rgba(211,226,241,.20);
  border-radius:4px;
  background:rgba(1,4,10,.76);
  color:rgba(221,232,244,.88);
  font:800 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.18em;
  text-shadow:0 0 10px rgba(220,231,242,.16);
  opacity:0;
  pointer-events:none;
}
.horror-power-failure-notice.show{
  opacity:1;
  animation:horrorPowerFailureNotice .70s steps(2,end) both;
}
.horror-power-failure-start .horror-monitor-main{
  animation:horrorPowerFailureFlash .70s steps(2,end) both;
}
@keyframes horrorPowerFailureFlash{
  0%{filter:saturate(.92) brightness(.98) contrast(1.01)}
  18%{filter:saturate(.25) brightness(1.36) contrast(1.28)}
  34%{filter:saturate(.42) brightness(.44) contrast(1.34)}
  52%{filter:saturate(.18) brightness(1.08) contrast(1.42)}
  70%{filter:saturate(.30) brightness(.28) contrast(1.28)}
  100%{filter:saturate(.92) brightness(.98) contrast(1.01)}
}
@keyframes horrorPowerFailureNotice{
  0%,12%{opacity:0}
  18%,56%{opacity:1}
  70%{opacity:.36}
  82%{opacity:.88}
  100%{opacity:0}
}

.horror-camera-nav{
  position:absolute;
  z-index:18;
  top:50%;
  width:46px;
  height:86px;
  transform:translateY(-50%);
  border:1px solid rgba(134,166,203,.20);
  border-radius:9px;
  background:rgba(0,7,17,.38);
  color:rgba(206,225,244,.64);
  font:900 19px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  cursor:pointer;
  backdrop-filter:blur(3px);
  transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease;
}
.horror-camera-nav.prev{left:10px}.horror-camera-nav.next{right:10px}
.horror-camera-nav:hover{background:rgba(10,29,49,.72);color:#e3f2ff;border-color:rgba(151,202,237,.52);transform:translateY(-50%) scale(1.04)}
.horror-report-locked .horror-monitor-main{cursor:not-allowed}
.horror-report-locked .horror-anomaly{pointer-events:none}

.horror-anomaly{
  position:absolute;
  z-index:7;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:none;
  animation:horrorAnomalyIn .34s ease both;
}
.horror-anomaly.spirit-target{
  height:auto;
  overflow:visible;
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  background:transparent;
  box-shadow:none;
  outline:0;
}
.horror-anomaly.spirit-target img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  opacity:var(--horror-spirit-opacity,.26);
  filter:none;
}

/* v16: 同じ人魂PNGのまま、耐久型 / 逃走型だけごく弱い映像ノイズ感を付与。
   薄い人魂そのものを見つけるゲーム性を壊さないよう、差は意識して見れば分かる程度に留める。 */
.horror-anomaly.spirit-durable img{
  animation:horrorSpiritDurableNoise 1.35s steps(2,end) infinite;
}
.horror-anomaly.spirit-escape img{
  animation:horrorSpiritEscapeNoise .92s steps(2,end) infinite;
}
.horror-anomaly.spirit-hit-pulse img{
  animation:horrorSpiritHitPulse .18s ease-out 1!important;
}
@keyframes horrorSpiritDurableNoise{
  0%,100%{filter:blur(.18px) contrast(1.01) brightness(1)}
  34%{filter:blur(.42px) contrast(.985) brightness(.985)}
  67%{filter:blur(.26px) contrast(1.018) brightness(1.012)}
}
@keyframes horrorSpiritEscapeNoise{
  0%,100%{filter:blur(.34px) contrast(1.01);transform:translate(0,0)}
  38%{filter:blur(.52px) contrast(.99);transform:translate(.35px,-.18px)}
  72%{filter:blur(.28px) contrast(1.02);transform:translate(-.28px,.22px)}
}
@keyframes horrorSpiritHitPulse{
  0%{filter:blur(.4px) brightness(1);transform:scale(1)}
  46%{filter:blur(.15px) brightness(1.16);transform:scale(.96)}
  100%{filter:blur(.35px) brightness(1);transform:scale(1)}
}
.horror-anomaly.spirit-test-visible{pointer-events:none;cursor:default}
.horror-anomaly.anomaly-shadow span,.horror-anomaly.anomaly-shadow-small span{
  border-radius:48% 48% 36% 38%;
  background:linear-gradient(180deg,rgba(3,4,12,.88),rgba(0,0,5,.96));
  filter:blur(1.6px);
  box-shadow:0 0 18px rgba(0,0,0,.68);
}
.horror-anomaly.anomaly-shadow-small span{transform:scaleX(.72);opacity:.82}
.horror-anomaly.anomaly-glow span{
  border-radius:50%;
  background:radial-gradient(circle,rgba(224,244,255,.66),rgba(117,183,226,.24) 28%,rgba(93,123,196,.10) 52%,transparent 73%);
  filter:blur(2px);
}
.horror-anomaly.anomaly-eyes span::before,.horror-anomaly.anomaly-eyes span::after{
  content:"";position:absolute;top:38%;width:23%;height:14%;border-radius:50%;background:#d9edff;box-shadow:0 0 8px rgba(173,219,255,.9)
}
.horror-anomaly.anomaly-eyes span::before{left:20%}.horror-anomaly.anomaly-eyes span::after{right:20%}
.horror-anomaly.anomaly-mark span{border-radius:46% 54% 52% 48%;background:radial-gradient(ellipse,rgba(116,136,187,.18),rgba(42,52,91,.10) 48%,transparent 72%);border:1px solid rgba(136,156,207,.12);transform:rotate(-17deg)}
.horror-anomaly.anomaly-face span{border-radius:50% 47% 52% 48%;background:radial-gradient(circle at 38% 42%,rgba(15,18,27,.95) 0 5%,transparent 6%),radial-gradient(circle at 63% 42%,rgba(15,18,27,.95) 0 5%,transparent 6%),radial-gradient(ellipse at 50% 54%,rgba(203,217,225,.46),rgba(111,128,147,.20) 48%,transparent 72%);filter:blur(.5px)}
@keyframes horrorAnomalyIn{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:none}}
.horror-job-feedback{
  position:absolute;
  z-index:20;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.92);
  padding:9px 16px;
  border:1px solid rgba(152,190,228,.26);
  border-radius:999px;
  background:rgba(3,9,20,.88);
  color:#cfdef0;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
}
.horror-job-feedback.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.horror-job-feedback.success{color:#bce8ff}.horror-job-feedback.error{color:#ffb1bb}.horror-job-feedback.missed{color:#d8b3ff}
.horror-job-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:30px;
  padding:4px 5px 0;
  color:#72859e;
  font-size:9px;
  letter-spacing:.06em;
}
.horror-job-abort{padding:6px 12px;border-radius:999px;color:#8092a8;font-size:9px}
.horror-job-final .horror-job-clock-wrap strong{color:#ff9ca9;animation:horrorClockPulse .65s ease-in-out infinite alternate}
.horror-job-final .horror-monitor-main .horror-camera-noise{opacity:.34;animation:horrorMonitorNoise .45s steps(3) infinite}
@keyframes horrorClockPulse{to{text-shadow:0 0 13px rgba(255,91,107,.58);transform:scale(1.05)}}
@keyframes horrorMonitorNoise{50%{transform:translateY(2px);opacity:.18}}

.horror-result-panel{width:min(620px,92%)}
.horror-result-score{display:flex;flex-direction:column;align-items:center;margin:8px 0 14px}
.horror-result-score span{color:#7994b3;font-size:9px;font-weight:900;letter-spacing:.18em}
.horror-result-score strong{color:#cceaff;font-size:clamp(38px,7vw,64px);line-height:1;text-shadow:0 0 18px rgba(96,186,240,.18)}
.horror-result-score small{margin-left:4px;color:#7288a5;font-size:15px}
.horror-result-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:12px}
.horror-result-stats>div{padding:9px 5px;border:1px solid rgba(105,139,181,.18);border-radius:9px;background:rgba(4,11,25,.52)}
.horror-result-stats span{display:block;color:#71849f;font-size:8px}.horror-result-stats b{display:block;margin-top:3px;color:#d3e4f6;font-size:13px}
.horror-result-pay{width:min(460px,100%);margin:0 auto 12px;padding:9px 13px;border-top:1px solid rgba(112,149,193,.20);border-bottom:1px solid rgba(112,149,193,.20)}
.horror-result-pay>div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;color:#8598af;font-size:10px}.horror-result-pay b{color:#c5ddf3}.horror-result-pay .first{color:#a6cdea}.horror-result-pay .first b{color:#b7e4ff}
.horror-result-total{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:12px 0 8px}.horror-result-total span{color:#8195ae;font-size:10px}.horror-result-total strong{color:#aee0ff;font-size:clamp(24px,4vw,34px);text-shadow:0 0 13px rgba(87,179,239,.18)}
.horror-result-balance{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px;color:#8293a8;font-size:10px}.horror-result-balance b{color:#9baec4}.horror-result-balance i{font-style:normal;color:#5e7390}.horror-result-balance strong{color:#d5ecff;font-size:16px}
.horror-result-actions .horror-route-back{margin-top:0;align-self:center}

@media(max-height:760px){
  .horror-route-panel{max-height:92%;padding:16px 20px}.horror-route-panel h2{margin:4px 0;font-size:30px}.horror-route-wallet{margin:10px auto}.horror-job-rule-grid{margin:10px 0 8px}.horror-job-rule-grid>div{padding:8px 5px}.horror-route-action{min-height:48px}.horror-job-shell{gap:5px;padding:7px}.horror-job-topbar{min-height:44px;padding:5px 9px}.horror-job-statbar{padding:4px 8px}.horror-result-score{margin:3px 0 7px}.horror-result-stats{margin-bottom:6px}.horror-result-pay{margin-bottom:6px;padding:5px 11px}.horror-result-total{margin:6px 0 5px}.horror-result-balance{margin-bottom:9px}
}
@media(max-width:680px){
  .horror-job-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.horror-job-topbar{grid-template-columns:1fr auto}.horror-job-wallet{display:none}.horror-job-clock-wrap{min-width:155px}.horror-camera-mini-panel{width:min(190px,38vw)}.horror-camera-mini span{display:none}.horror-result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.horror-route-action{min-width:145px}
}
@media(max-width:480px){
  .horror-job-shell{padding:5px}.horror-job-topbar{gap:5px}.horror-job-title strong{font-size:11px}.horror-job-clock-wrap{min-width:130px}.horror-job-clock-wrap strong{font-size:17px}.horror-job-statbar{gap:4px 9px}.horror-job-statbar span:last-child{display:none}.horror-camera-label,.horror-camera-rec{top:5px;padding:3px 4px;font-size:7px}.horror-monitor-main .horror-camera-label{right:54px}.horror-monitor-main .horror-camera-rec{right:5px}.horror-camera-mini-panel{top:5px;left:5px;width:min(158px,44vw);padding:4px;gap:3px}.horror-camera-mini{height:40px;padding:5px}.horror-camera-nav{width:38px;height:70px}.horror-camera-nav.prev{left:5px}.horror-camera-nav.next{right:5px}.horror-job-footer span{max-width:65%}.horror-route-panel{width:94%;padding:16px 13px}
}
@media(prefers-reduced-motion:reduce){.horror-job-final .horror-job-clock-wrap strong,.horror-job-final .horror-monitor-main .horror-camera-noise,.horror-camera-mini{animation:none!important}}

/* ============================================================
   SPECIAL ROUTE / MEMORY ROLL prototype
   ============================================================ */
.special-memory-roll{position:fixed;z-index:10000;inset:0;overflow:hidden;background:#100b18;color:#fff}
.special-memory-roll.hidden{display:none}
.special-memory-roll .special-overlay-shade{position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(12,7,18,.48),rgba(14,8,22,.68) 45%,rgba(9,5,15,.82))}
.special-roll-background{position:absolute;z-index:1;inset:-3%;overflow:hidden;background:#171020}
.special-roll-bg-image{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(2px) saturate(.78);transform:scale(1.06);animation:specialRollBgIn 4.2s ease both}
.special-roll-bg-image.next{opacity:.18;transform:scale(1.11)}
.special-roll-bg-caption{position:absolute;left:clamp(18px,4vw,60px);bottom:clamp(18px,4vw,50px);display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-left:2px solid rgba(247,177,220,.7);background:rgba(13,8,19,.38);text-shadow:0 2px 10px rgba(0,0,0,.7)}
.special-roll-bg-caption span{font-size:11px;letter-spacing:.18em;color:#efb5dd}.special-roll-bg-caption strong{font-size:clamp(12px,1.5vw,17px);font-weight:600}
.special-roll-vignette{position:absolute;z-index:3;inset:0;pointer-events:none;box-shadow:inset 0 0 18vw rgba(5,2,10,.78);background:radial-gradient(circle at center,transparent 15%,rgba(12,6,18,.18) 55%,rgba(8,4,12,.58) 100%)}
.special-roll-shell{position:absolute;z-index:5;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(12px,2vw,24px)}
.special-roll-topbar{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.8);font-size:11px;font-weight:900;letter-spacing:.28em}
.special-roll-topbar{position:relative;z-index:10}
.special-roll-topbar-controls{display:flex;align-items:center;gap:10px}
.special-roll-sound-control .sound-toggle{background:rgba(10,6,16,.45);border-color:rgba(255,255,255,.3);color:#fff}
.special-roll-sound-control .sound-panel{letter-spacing:normal;text-align:left;z-index:11}
.special-roll-close{padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(10,6,16,.38);color:#fff;cursor:pointer;font:inherit;font-size:10px;letter-spacing:.14em}
.special-roll-viewport{position:relative;min-height:0;overflow:hidden;mask-image:linear-gradient(transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-image:linear-gradient(transparent 0,#000 9%,#000 91%,transparent 100%)}
.special-roll-track{position:absolute;left:50%;top:100%;width:min(760px,86vw);text-align:center;transform:translateX(-50%);will-change:transform}
.special-roll-track.running{animation:specialMemoryRoll var(--special-roll-duration,52000ms) linear forwards}
.special-roll-track.paused{animation-play-state:paused}
.special-roll-track.completed{transform:translate(-50%,-100%)}
.special-roll-title{padding:34vh 0 24vh}.special-roll-title>span,.special-roll-section-title span,.special-roll-final>span{color:#efacd5;font-size:clamp(10px,1.2vw,13px);font-weight:900;letter-spacing:.28em}.special-roll-title h2{margin:12px 0 5px;font-size:clamp(38px,7vw,78px);font-weight:400;letter-spacing:.08em;text-shadow:0 0 30px rgba(238,153,211,.3)}.special-roll-title p{margin:0;color:#d9cae0;letter-spacing:.2em}.special-roll-title small{display:block;margin-top:28px;color:rgba(255,255,255,.72);font-size:14px}
.special-roll-section-title{padding:12vh 0 8vh}.special-roll-section-title strong{display:block;margin-top:10px;font-size:clamp(20px,3vw,34px);font-weight:500}
.special-roll-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:16vh}.special-roll-stat{padding:24px 16px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(30,18,39,.28);backdrop-filter:blur(6px)}.special-roll-stat span{display:block;color:#dca2d2;font-size:10px;font-weight:900;letter-spacing:.17em}.special-roll-stat strong{display:block;margin:8px 0 4px;font-size:clamp(26px,4vw,44px);font-weight:500}.special-roll-stat small{color:rgba(255,255,255,.6)}
.special-roll-memory{display:flex;flex-direction:column;align-items:center;gap:7px;padding:9vh 0}.special-roll-memory span{color:#e9a7d2;font-size:12px;letter-spacing:.22em}.special-roll-memory strong{font-size:clamp(20px,3vw,34px);font-weight:500}.special-roll-memory small{max-width:560px;color:rgba(255,255,255,.62);font-size:13px}
.special-roll-final{padding:20vh 0 45vh}.special-roll-final h2{margin:14px 0;font-size:clamp(18px,4vw,48px);font-weight:400;white-space:nowrap}.special-roll-final strong{display:block;color:#ffd7ee;font-size:clamp(24px,4vw,44px);font-weight:500;letter-spacing:.04em}.special-roll-final p{margin-top:46px;color:rgba(255,255,255,.68);font-size:14px;letter-spacing:.06em}
.special-roll-actions{display:flex;justify-content:center;gap:10px;padding-top:8px}
@keyframes specialMemoryRoll{from{transform:translate(-50%,0)}to{transform:translate(-50%,-100%)}}
@keyframes specialRollBgIn{0%{opacity:0;transform:scale(1.12)}18%{opacity:1}100%{opacity:1;transform:scale(1.04)}}
@media(max-width:620px){.special-roll-stats{grid-template-columns:1fr}.special-roll-title{padding-top:28vh}.special-roll-memory{padding:7vh 0}.special-roll-bg-caption{max-width:72vw}.special-roll-actions .special-overlay-button{min-width:120px}}
@media(prefers-reduced-motion:reduce){.special-roll-track.running{animation-duration:1ms}.special-roll-bg-image{animation:none}}

/* =========================================================
   GRAND ROUTE — special locked-button glint + final mosaic
   ========================================================= */
.hidden-route-button.route-secret::before{
  content:"";
  position:absolute;
  z-index:3;
  right:-5px;
  top:-7px;
  width:20px;
  height:20px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.98) 0 8%,rgba(255,229,248,.92) 9% 18%,rgba(220,195,255,.56) 28%,rgba(255,210,238,.18) 48%,transparent 70%);
  filter:drop-shadow(0 0 5px rgba(255,220,247,.9)) drop-shadow(0 0 10px rgba(195,166,255,.55));
  transform:scale(.25) rotate(0deg);
  animation:secretRouteButtonGlint 4.6s ease-in-out infinite;
}
.hidden-route-button.route-secret::after{z-index:10020}
@keyframes secretRouteButtonGlint{
  0%,68%,100%{opacity:0;transform:scale(.25) rotate(0deg)}
  73%{opacity:.95;transform:scale(1.25) rotate(45deg)}
  78%{opacity:.45;transform:scale(.72) rotate(90deg)}
  82%{opacity:0;transform:scale(.25) rotate(135deg)}
}

/* SPECIAL ROUTE終了: 外周から中心へ暗転して自動クローズ
   box-shadowで「中央の透明な穴」を縮めるため、mask/clip-path依存を避ける。 */
.special-memory-roll::after{
  content:"";
  position:absolute;
  z-index:120;
  left:50%;
  top:50%;
  width:180vmax;
  height:180vmax;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:transparent;
  box-shadow:0 0 0 200vmax #050308;
  pointer-events:none;
  opacity:0;
}
.special-memory-roll.ending-fade::after{
  opacity:1;
  animation:specialRollIrisHoleClose 1.8s cubic-bezier(.55,.02,.3,1) forwards;
}
.special-memory-roll.ending-fade .special-roll-shell,
.special-memory-roll.ending-fade .special-roll-background,
.special-memory-roll.ending-fade .special-roll-vignette{
  animation:specialRollContentDim 1.8s ease forwards;
}
@keyframes specialRollIrisHoleClose{
  0%{width:180vmax;height:180vmax}
  18%{width:145vmax;height:145vmax}
  100%{width:0;height:0}
}
@keyframes specialRollContentDim{
  0%{filter:none}
  100%{filter:brightness(.18) saturate(.55)}
}

/* SPECIAL ROUTE終了直後: 4つの隠しルートボタンを順番に浮かび上がらせる */
.hidden-route-buttons.routes-revealing .hidden-route-button{
  animation:hiddenRouteButtonReveal .85s cubic-bezier(.18,.85,.25,1.2) both;
}
.hidden-route-buttons.routes-revealing .hidden-route-button:nth-child(1){animation-delay:.20s}
.hidden-route-buttons.routes-revealing .hidden-route-button:nth-child(2){animation-delay:.85s}
.hidden-route-buttons.routes-revealing .hidden-route-button:nth-child(3){animation-delay:1.50s}
.hidden-route-buttons.routes-revealing .hidden-route-button:nth-child(4){animation-delay:2.15s}
@keyframes hiddenRouteButtonReveal{
  0%{opacity:0;transform:translateY(22px) scale(.88);filter:blur(7px) brightness(1.5)}
  55%{opacity:.92;transform:translateY(-4px) scale(1.035);filter:blur(0) brightness(1.2)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:none}
}
.hidden-route-buttons.routes-revealing .hidden-route-button.locked{animation-name:hiddenRouteLockedButtonReveal}
@keyframes hiddenRouteLockedButtonReveal{
  0%{opacity:0;transform:translateY(22px) scale(.88);filter:blur(7px) saturate(.55) brightness(1.5)}
  55%{opacity:.58;transform:translateY(-4px) scale(1.035);filter:blur(0) saturate(.55) brightness(1.18)}
  100%{opacity:.48;transform:translateY(0) scale(1);filter:saturate(.55) brightness(1.05)}
}



/* SPECIAL ROUTE: donut ending -> route clear card */
.special-roll-route-end{
  position:absolute;
  z-index:148;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.12em;
  background:#050308;
  color:#fff8fd;
  text-align:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.965);
  filter:blur(5px);
}
.special-roll-route-end::before{
  content:"";
  position:absolute;
  width:min(58vw,620px);
  height:min(58vw,620px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(238,169,229,.13) 0%,rgba(176,145,232,.07) 34%,transparent 68%);
  opacity:0;
  transform:scale(.72);
}
.special-roll-route-end span{
  position:relative;
  z-index:1;
  font-size:clamp(13px,1.45vw,20px);
  font-weight:700;
  letter-spacing:.34em;
  color:rgba(255,213,244,.86);
  text-shadow:0 0 18px rgba(236,161,224,.38);
}
.special-roll-route-end strong{
  position:relative;
  z-index:1;
  font-size:clamp(42px,7vw,92px);
  line-height:1;
  letter-spacing:.16em;
  font-weight:800;
  color:#fffafd;
  text-shadow:0 0 12px rgba(255,255,255,.38),0 0 34px rgba(239,158,224,.38),0 0 70px rgba(170,137,231,.22);
}
.special-roll-route-end.visible{
  visibility:visible;
  opacity:1;
  transform:scale(1);
  filter:blur(0);
  transition:opacity .75s ease,transform 1.15s cubic-bezier(.16,.8,.25,1),filter .9s ease;
}
.special-roll-route-end.visible::before{
  opacity:1;
  transform:scale(1);
  transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.16,.8,.25,1);
}
.special-roll-route-end.leaving{
  opacity:0;
  transform:scale(1.025);
  filter:blur(4px);
  transition:opacity .65s ease,transform .65s ease,filter .65s ease;
}

/* SPECIAL ROUTE: 完全暗転後のエピローグ・タイピング */
.special-roll-epilogue{
  position:absolute;
  z-index:145;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#050308;
  color:#fff7fc;
  font-size:clamp(16px,2.15vw,27px);
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.9;
  text-align:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.special-roll-epilogue.visible{
  opacity:1;
  visibility:visible;
  transition:opacity .45s ease;
}
.special-roll-epilogue i{
  width:2px;
  height:1.25em;
  margin-left:.18em;
  background:rgba(255,235,249,.92);
  box-shadow:0 0 10px rgba(255,185,229,.65);
  opacity:0;
}
.special-roll-epilogue.typing i{opacity:1;animation:specialRollTypingCaret .72s steps(1,end) infinite}
@keyframes specialRollTypingCaret{0%,48%{opacity:1}49%,100%{opacity:0}}

/* MEMORY SELECT: NOW PLAYING sits centered on the card's top border */
.chapter-card.current .card-status{
  top:0 !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:8 !important;
}

/* MEMORY SELECT status placement refinements */
.chapter-card-wrap,
.chapter-card{
  overflow:visible !important;
}

/* NOW PLAYING: straddle the top border instead of being clipped inside the card */
.chapter-card.current .card-status{
  top:0 !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:20 !important;
  box-shadow:0 3px 10px rgba(120,67,130,.16),0 0 0 2px rgba(255,255,255,.72) !important;
}

/* LOCKED: large centered status inside the card */
.chapter-card.locked .card-status{
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:20 !important;
  padding:6px 16px !important;
  font-size:clamp(12px,1.45vw,17px) !important;
  letter-spacing:.16em !important;
  color:#786f7d !important;
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(165,151,171,.48) !important;
  box-shadow:0 5px 16px rgba(67,53,73,.14) !important;
}

.hidden-route-unlock-actions{margin-top:20px;display:flex;justify-content:center}
.hidden-route-unlock-ending{min-width:190px;padding:12px 24px;border:1px solid rgba(221,142,194,.52);border-radius:999px;background:linear-gradient(135deg,#fff8fd,#f1e6fb);box-shadow:0 8px 24px rgba(134,72,130,.15),inset 0 0 18px rgba(255,255,255,.75);color:#a14f86;font:inherit;font-size:13px;font-weight:900;letter-spacing:.08em;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.hidden-route-unlock-ending:hover{transform:translateY(-2px);box-shadow:0 11px 28px rgba(134,72,130,.22),0 0 18px rgba(244,177,220,.22)}

/* ============================================================
   SPECIAL ROUTE / MEMORY ROLL — 2026-08-29 real-data edition
   ============================================================ */
.special-roll-stat.wide{grid-column:1/-1}
.special-roll-stat.wide small{display:block;max-width:620px;margin:0 auto;line-height:1.65}
.special-roll-game-ranking{display:flex;flex-direction:column;gap:8px;padding:0 0 18vh}
.special-roll-game-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}
.special-roll-game-row>span{color:#dca2d2;font-size:10px;letter-spacing:.14em}.special-roll-game-row>strong{font-size:clamp(14px,1.7vw,19px);font-weight:600}.special-roll-game-row>small{color:rgba(255,255,255,.62);font-size:11px;white-space:nowrap}
.special-roll-stream-heading small{display:block;margin-top:16px;color:rgba(255,255,255,.62);font-size:12px;letter-spacing:.1em}
.special-roll-streams{display:flex;flex-direction:column;gap:11px;padding-bottom:15vh}
.special-roll-month{padding:14vh 0 7vh;text-align:center}.special-roll-month span{display:block;color:#f0afd8;font-size:clamp(30px,5vw,58px);font-weight:300;letter-spacing:.12em}.special-roll-month strong{display:block;margin-top:8px;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.32em}
.special-roll-stream{display:grid;grid-template-columns:clamp(112px,17vw,164px) minmax(0,1fr);gap:16px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(18,10,27,.32);backdrop-filter:blur(5px);text-align:left}
.special-roll-stream img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:#21162b;box-shadow:0 5px 18px rgba(0,0,0,.24)}
.special-roll-stream>div{min-width:0}.special-roll-stream span{display:block;margin-bottom:5px;color:#e8a6d1;font-size:10px;font-weight:900;letter-spacing:.16em}.special-roll-stream strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:clamp(12px,1.5vw,16px);font-weight:600;line-height:1.5}.special-roll-stream small{display:block;margin-top:6px;color:rgba(255,255,255,.5);font-size:10px;letter-spacing:.08em}
.special-roll-stream.is-last{margin-top:5vh;border-color:rgba(244,176,219,.38);box-shadow:0 0 30px rgba(222,133,195,.12)}
.special-roll-now{padding:24vh 0 22vh;text-align:center}.special-roll-now span{display:block;color:#efacd5;font-size:11px;font-weight:900;letter-spacing:.32em}.special-roll-now strong{display:block;margin:18px 0 8px;font-size:clamp(44px,8vw,92px);font-weight:300;letter-spacing:.1em}.special-roll-now small{color:rgba(255,255,255,.72);font-size:clamp(16px,2vw,24px);letter-spacing:.12em}
.special-roll-speed-controls{display:flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(10,6,16,.54);backdrop-filter:blur(8px);transition:opacity .25s ease,transform .25s ease}.special-roll-speed-controls.hidden{display:none}.special-roll-speed,.special-roll-skip{border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.7);font:inherit;font-size:10px;font-weight:900;letter-spacing:.06em;cursor:pointer;padding:7px 9px}.special-roll-speed.active{background:rgba(239,172,213,.22);color:#ffe9f7;box-shadow:inset 0 0 0 1px rgba(245,185,222,.34)}.special-roll-skip{margin-left:3px;padding-inline:12px;background:rgba(255,255,255,.1);color:#fff}


/* 画面外からサムネイル・星・ハートが渦を描いてドーナツの穴へ吸い込まれる補助演出 */
.special-suction-debris{
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  pointer-events:none;
  overflow:visible;
}
.special-suction-rear{z-index:132;}
.special-suction-front{z-index:135;}
.special-suction-piece{
  position:absolute;
  left:0;
  top:0;
  transform-origin:50% 50%;
  will-change:transform,opacity,filter;
  opacity:0;
}
.special-suction-thumb{
  width:clamp(74px,8.5vw,132px);
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(255,220,244,.65);
  box-shadow:0 0 14px rgba(237,151,217,.3),0 5px 20px rgba(0,0,0,.48);
}
.special-suction-icon{
  display:block;
  width:1em;
  height:1em;
  line-height:1;
  text-align:center;
  font-family:inherit;
  font-weight:900;
  color:#e3c7ff;
  text-shadow:0 0 8px rgba(218,165,255,.95),0 0 18px rgba(168,104,255,.55);
}
.special-suction-icon.is-heart{
  color:#ff9bd0;
  text-shadow:0 0 8px rgba(255,143,204,.95),0 0 18px rgba(255,91,177,.5);
}
.special-memory-roll.donut-bite-phase .special-suction-debris,
.special-memory-roll.donut-gone .special-suction-debris{display:none}

/* SPECIAL ROUTE: world-suction donut transition
   ドーナツ本体は小さく中央に留め、画面世界の方を穴へ吸い込む。 */
.special-donut-suction{
  --donut-size:clamp(132px,14vw,196px);
  position:absolute;
  z-index:129;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
}
.special-memory-roll.donut-suction{
  background:#030205;
}
.special-memory-roll.donut-suction .special-donut-suction{
  opacity:1;
  visibility:visible;
}
.special-donut-image{
  position:absolute;
  z-index:133;
  left:50%;
  top:50%;
  width:var(--donut-size);
  height:auto;
  transform:translate(-49.7682%,-55.7449%) scale(.58);
  transform-origin:49.7682% 55.7449%;
  opacity:0;
  filter:drop-shadow(0 0 14px rgba(223,169,255,.25)) drop-shadow(0 0 24px rgba(255,139,202,.2));
}
.special-memory-roll.donut-suction .special-donut-image{
  animation:specialRollDonutStay 5s cubic-bezier(.22,.72,.18,1) forwards;
}
.special-donut-hole{
  position:absolute;
  z-index:131;
  left:50%;
  top:50%;
  width:calc(var(--donut-size) * .29);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.74);
  background:#000;
  opacity:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.92),0 0 18px 7px rgba(0,0,0,.92),0 0 52px 13px rgba(28,3,38,.88),0 0 72px 18px rgba(225,126,211,.10);
}
.special-memory-roll.donut-suction .special-donut-hole{
  animation:specialRollDonutHoleSuction 5s cubic-bezier(.72,.02,.18,1) forwards;
}
.special-donut-streaks{
  position:absolute;
  z-index:130;
  left:50%;
  top:50%;
  width:150vmax;
  height:150vmax;
  transform:translate(-50%,-50%) scale(1.2) rotate(0deg);
  border-radius:50%;
  opacity:0;
  background:
    repeating-conic-gradient(from 0deg,
      transparent 0deg 3.4deg,
      rgba(255,215,246,.11) 3.6deg 3.8deg,
      transparent 4deg 8.2deg,
      rgba(206,175,255,.09) 8.5deg 8.7deg,
      transparent 8.9deg 13deg);
  -webkit-mask:radial-gradient(circle at center,transparent 0 4%,rgba(0,0,0,.1) 10%,#000 30%,rgba(0,0,0,.6) 58%,transparent 78%);
  mask:radial-gradient(circle at center,transparent 0 4%,rgba(0,0,0,.1) 10%,#000 30%,rgba(0,0,0,.6) 58%,transparent 78%);
  filter:blur(1px);
}
.special-memory-roll.donut-suction .special-donut-streaks{
  animation:specialRollSuctionStreaks 5s cubic-bezier(.55,.02,.17,1) forwards;
}

/* 世界側。矩形の画面を小さくするのではなく、円形の吸引範囲へ崩しながら消す。 */
.special-memory-roll.donut-suction .special-roll-shell,
.special-memory-roll.donut-suction .special-roll-background,
.special-memory-roll.donut-suction .special-roll-vignette,
.special-memory-roll.donut-suction .special-overlay-shade{
  transform-origin:50% 50%;
  will-change:transform,filter,opacity,clip-path;
  clip-path:circle(145vmax at 50% 50%);
  animation:specialRollWorldIntoHole 5s cubic-bezier(.62,.01,.19,1) forwards;
}

@keyframes specialRollDonutStay{
  0%{transform:translate(-49.7682%,-55.7449%) scale(.58);opacity:0;filter:drop-shadow(0 0 5px rgba(231,186,255,.08))}
  10%{opacity:1}
  20%{transform:translate(-49.7682%,-55.7449%) scale(1.03);opacity:1}
  34%{transform:translate(-49.7682%,-55.7449%) scale(1);opacity:1;filter:drop-shadow(0 0 17px rgba(231,186,255,.28)) drop-shadow(0 0 28px rgba(255,139,202,.18))}
  82%{transform:translate(-49.7682%,-55.7449%) scale(1);opacity:1;filter:drop-shadow(0 0 20px rgba(231,186,255,.34)) drop-shadow(0 0 35px rgba(255,139,202,.25))}
  100%{transform:translate(-49.7682%,-55.7449%) scale(1);opacity:1;filter:drop-shadow(0 0 18px rgba(231,186,255,.28)) drop-shadow(0 0 30px rgba(255,139,202,.2))}
}
@keyframes specialRollDonutHoleSuction{
  0%{transform:translate(-50%,-50%) scale(.72);opacity:0;background:#120b17;box-shadow:0 0 0 rgba(0,0,0,0)}
  12%{opacity:.32}
  26%{transform:translate(-50%,-50%) scale(.86);opacity:.72;background:#070509;box-shadow:0 0 15px 5px rgba(0,0,0,.58)}
  48%{transform:translate(-50%,-50%) scale(1);opacity:1;background:#000;box-shadow:0 0 24px 8px rgba(0,0,0,.9),0 0 45px 10px rgba(12,0,22,.72)}
  78%{width:calc(var(--donut-size) * .29);transform:translate(-50%,-50%) scale(1.04);opacity:1}
  100%{width:calc(var(--donut-size) * .29);transform:translate(-50%,-50%) scale(1.04);opacity:1;background:#000;box-shadow:0 0 24px 8px rgba(0,0,0,.92)}
}
@keyframes specialRollWorldIntoHole{
  0%{transform:scale(1) rotate(0deg);clip-path:circle(145vmax at 50% 50%);filter:blur(0) brightness(1) saturate(1);opacity:1}
  24%{transform:scale(.995) rotate(-.06deg);clip-path:circle(132vmax at 50% 50%);filter:blur(.05px) brightness(.99) saturate(1.01);opacity:1}
  46%{transform:scale(.965) rotate(.35deg);clip-path:circle(104vmax at 50% 50%);filter:blur(.22px) brightness(.96) saturate(1.02);opacity:1}
  64%{transform:scale(.90) rotate(-1.1deg);clip-path:circle(72vmax at 50% 50%);filter:blur(.7px) brightness(.88) saturate(1.04);opacity:.99}
  78%{transform:scale(.78) rotate(2.8deg);clip-path:circle(42vmax at 50% 50%);filter:blur(1.9px) brightness(.72) saturate(1.06);opacity:.95}
  88%{transform:scale(.64) rotate(-5.2deg);clip-path:circle(22vmax at 50% 50%);filter:blur(4.5px) brightness(.50) saturate(1.08);opacity:.82}
  95%{transform:scale(.52) rotate(8.5deg);clip-path:circle(9vmax at 50% 50%);filter:blur(8px) brightness(.28) saturate(1.1);opacity:.52}
  100%{transform:scale(.46) rotate(13deg);clip-path:circle(.8vmax at 50% 50%);filter:blur(13px) brightness(.08);opacity:0}
}
@keyframes specialRollSuctionStreaks{
  0%,25%{transform:translate(-50%,-50%) scale(1.25) rotate(0deg);opacity:0;filter:blur(2px)}
  44%{opacity:.20}
  68%{transform:translate(-50%,-50%) scale(.92) rotate(11deg);opacity:.42;filter:blur(1.2px)}
  82%{transform:translate(-50%,-50%) scale(.62) rotate(31deg);opacity:.68;filter:blur(.65px)}
  94%{transform:translate(-50%,-50%) scale(.18) rotate(88deg);opacity:.94;filter:blur(.15px)}
  100%{transform:translate(-50%,-50%) scale(.03) rotate(120deg);opacity:0;filter:blur(0)}
}

.special-donut-flow,
.special-donut-ripples{
  position:absolute;
  inset:0;
  z-index:134;
  pointer-events:none;
  overflow:hidden;
}
.special-donut-ripples{z-index:132}
.special-donut-flow-piece,
.special-donut-ripple{
  position:absolute;
  left:50%;
  top:50%;
  opacity:0;
  will-change:transform,opacity,filter;
  pointer-events:none;
}
.special-donut-flow-piece{
  width:20px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.9) 18%,
    rgba(255,195,238,.95) 50%,
    rgba(165,214,255,.68) 82%,
    rgba(165,214,255,0));
  transform-origin:50% 50%;
  filter:blur(1px);
  mix-blend-mode:screen;
}
.special-donut-flow-piece.is-spark{
  width:14px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,.96) 0 22%,
    rgba(255,196,239,.94) 30%,
    rgba(171,221,255,.46) 58%,
    rgba(171,221,255,0) 100%);
}
.special-donut-ripple{
  border-radius:50%;
  border:1px solid rgba(255,220,247,.55);
  box-shadow:0 0 0 1px rgba(244,182,230,.14) inset,0 0 14px rgba(206,175,255,.18);
  background:radial-gradient(circle,
    rgba(255,255,255,0) 58%,
    rgba(255,235,247,.06) 72%,
    rgba(255,235,247,0) 100%);
  mix-blend-mode:screen;
}
.special-donut-vortex{
  position:absolute;
  z-index:132;
  left:50%;
  top:50%;
  width:calc(var(--donut-size) * .86);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.72) rotate(0deg);
  opacity:0;
  pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,244,252,0) 0deg 13deg,
    rgba(255,206,239,.25) 15deg 16.4deg,
    rgba(194,215,255,.16) 17.4deg 18.3deg,
    rgba(255,244,252,0) 20deg 34deg);
  -webkit-mask:radial-gradient(circle,transparent 0 23%,#000 34% 68%,transparent 78%);
  mask:radial-gradient(circle,transparent 0 23%,#000 34% 68%,transparent 78%);
  filter:blur(.45px) drop-shadow(0 0 10px rgba(237,157,221,.25));
  mix-blend-mode:screen;
}
.special-memory-roll.donut-suction .special-donut-vortex{
  animation:specialDonutVortexPull 5s cubic-bezier(.52,.02,.12,1) forwards;
}
@keyframes specialDonutVortexPull{
  0%,14%{transform:translate(-50%,-50%) scale(.78) rotate(0deg);opacity:0}
  30%{opacity:.22}
  56%{transform:translate(-50%,-50%) scale(.92) rotate(38deg);opacity:.46}
  76%{transform:translate(-50%,-50%) scale(.72) rotate(104deg);opacity:.72}
  92%{transform:translate(-50%,-50%) scale(.42) rotate(208deg);opacity:.90}
  100%{transform:translate(-50%,-50%) scale(.18) rotate(292deg);opacity:0}
}
.special-memory-roll.donut-bite-phase .special-donut-flow,
.special-memory-roll.donut-bite-phase .special-donut-ripples,
.special-memory-roll.donut-bite-phase .special-donut-vortex,
.special-memory-roll.donut-gone .special-donut-flow,
.special-memory-roll.donut-gone .special-donut-ripples,
.special-memory-roll.donut-gone .special-donut-vortex{display:none}

.special-donut-bite-canvas{
  position:absolute;
  z-index:136;
  left:50%;
  top:50%;
  width:var(--donut-size);
  height:auto;
  transform:translate(-49.7682%,-55.7449%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  filter:drop-shadow(0 0 18px rgba(231,186,255,.28)) drop-shadow(0 0 30px rgba(255,139,202,.2));
}
.special-memory-roll.donut-bite-phase .special-donut-image{opacity:0!important;visibility:hidden}
.special-memory-roll.donut-bite-phase .special-donut-hole{opacity:0!important;visibility:hidden}
.special-memory-roll.donut-bite-phase .special-donut-streaks{opacity:0!important;visibility:hidden}
.special-memory-roll.donut-bite-phase .special-donut-bite-canvas{
  opacity:1;
  visibility:visible;
  animation:specialDonutBiteFloat 3.4s ease-in-out forwards;
}
.special-memory-roll.donut-gone .special-donut-bite-canvas{opacity:0!important;visibility:hidden}
@keyframes specialDonutBiteFloat{
  0%{transform:translate(-49.7682%,-55.7449%) scale(1) rotate(0deg)}
  30%{transform:translate(-49.7682%,-55.7449%) scale(1.015) rotate(-1.1deg)}
  60%{transform:translate(-49.7682%,-55.7449%) scale(.99) rotate(1.2deg)}
  100%{transform:translate(-49.7682%,-55.7449%) scale(.96) rotate(-2deg)}
}

@media(max-width:620px){
  .special-donut-suction{--donut-size:clamp(118px,31vw,158px)}
}
@media(prefers-reduced-motion:reduce){
  .special-memory-roll.donut-suction .special-donut-image,
  .special-memory-roll.donut-bite-phase .special-donut-bite-canvas,
  .special-memory-roll.donut-suction .special-donut-hole,
  .special-memory-roll.donut-suction .special-donut-streaks,
  .special-memory-roll.donut-suction .special-roll-shell,
  .special-memory-roll.donut-suction .special-roll-background,
  .special-memory-roll.donut-suction .special-roll-vignette,
  .special-memory-roll.donut-suction .special-overlay-shade{animation-duration:.01ms!important}
}


/* SPECIAL ROLL — SKIP warp transition
   現在のエンドロールを急加速し、文字とサムネイルを縦の光跡へ溶かしてから AND NOW... へ接続する。 */
.special-memory-roll.skip-warp .special-roll-track{
  filter:blur(0) brightness(1);
  animation:specialRollSkipTrackWarp 5s cubic-bezier(.2,.7,.18,1) both;
  will-change:filter,opacity;
}
.special-memory-roll.skip-warp .special-roll-background{
  animation:specialRollSkipBgWarp 5s cubic-bezier(.2,.7,.18,1) both;
}
.special-memory-roll.skip-warp .special-roll-viewport::after{
  content:"";
  position:absolute;
  z-index:18;
  inset:-12% -8%;
  pointer-events:none;
  opacity:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 5%,rgba(255,218,242,.08) 5.4%,transparent 6.1% 11%),
    linear-gradient(180deg,transparent 0%,rgba(246,190,226,.12) 22%,rgba(255,255,255,.72) 50%,rgba(218,183,255,.16) 76%,transparent 100%);
  filter:blur(8px);
  transform:scaleY(.15);
  animation:specialRollSkipLightStreaks 5s cubic-bezier(.2,.7,.18,1) both;
}
.special-memory-roll.skip-warp-arrive .special-roll-viewport::after{
  opacity:.72;
  transform:scaleY(1.4);
  transition:opacity .26s ease,transform .26s ease;
}
@keyframes specialRollSkipTrackWarp{
  0%{filter:blur(0) brightness(1);opacity:1}
  28%{filter:blur(.5px) brightness(1.08);opacity:1}
  64%{filter:blur(2.4px) brightness(1.38);opacity:.86}
  88%{filter:blur(6px) brightness(2.05);opacity:.48}
  100%{filter:blur(9px) brightness(2.7);opacity:.18}
}
@keyframes specialRollSkipBgWarp{
  0%{filter:blur(0) brightness(1);transform:scale(1)}
  58%{filter:blur(4px) brightness(1.15);transform:scale(1.035)}
  100%{filter:blur(13px) brightness(1.65);transform:scale(1.11)}
}
@keyframes specialRollSkipLightStreaks{
  0%,18%{opacity:0;transform:scaleY(.15)}
  48%{opacity:.18;transform:scaleY(.65)}
  78%{opacity:.68;transform:scaleY(1.7)}
  100%{opacity:.94;transform:scaleY(2.8)}
}
@media(prefers-reduced-motion:reduce){
  .special-memory-roll.skip-warp .special-roll-track,
  .special-memory-roll.skip-warp .special-roll-background,
  .special-memory-roll.skip-warp .special-roll-viewport::after{animation-duration:.12s!important}
}

/* MOST PLAYED: keep the title on one line and scale long names down */
.special-roll-most-played strong{
  white-space:nowrap;
  overflow:visible;
  font-size:clamp(20px,3.25vw,38px);
  line-height:1.25;
  letter-spacing:-.02em;
}
@media(max-width:620px){
  .special-roll-most-played strong{font-size:clamp(18px,6.2vw,30px)}
}

/* Chapter 01: きゅんきゅんフィーバータイム */
.kyun-fever-overlay{position:absolute;z-index:65;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.94) 0%,rgba(255,226,245,.92) 35%,rgba(225,211,250,.96) 100%);touch-action:none;user-select:none}.kyun-fever-overlay::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 2px) 0 0/42px 42px;opacity:.42;animation:kyunBgDrift 8s linear infinite}.kyun-fever-intro{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;animation:kyunIntro 1.8s ease both}.kyun-fever-event{color:#d5539e;font-size:clamp(17px,2.5vw,28px);font-weight:900;letter-spacing:.12em;text-shadow:0 0 12px #fff}.kyun-fever-title{margin-top:10px;color:#a75fc4;font-size:clamp(30px,5vw,58px);font-weight:900;line-height:1.3;text-shadow:0 3px 0 #fff,0 0 24px rgba(221,103,190,.35)}.kyun-fever-rule{margin-top:14px;color:#78657f;font-size:clamp(13px,1.7vw,17px);font-weight:700}.kyun-fever-start{margin-top:28px;min-width:180px;padding:12px 34px;border:1px solid rgba(198,91,166,.34);border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(160,78,145,.16);color:#cf559a;font:900 clamp(15px,2vw,19px)/1 "Zen Maru Gothic",sans-serif;letter-spacing:.14em;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.kyun-fever-start:hover{transform:scale(1.05);background:#fff;box-shadow:0 10px 30px rgba(204,83,158,.24)}.kyun-fever-hud{position:absolute;z-index:5;top:20px;left:50%;width:min(650px,90%);transform:translateX(-50%);display:flex;justify-content:space-between;gap:20px;pointer-events:none}.kyun-fever-time,.kyun-fever-score{padding:8px 18px;border:1px solid rgba(192,104,180,.28);border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 5px 18px rgba(117,67,135,.12);color:#8e6b9a;font-size:clamp(12px,1.6vw,16px);font-weight:800}.kyun-fever-time b,.kyun-fever-score b{color:#d6539e;font-size:1.15em}.kyun-fever-field{position:absolute;z-index:3;inset:0}.kyun-target{position:absolute;width:clamp(72px,9vw,104px);aspect-ratio:1;display:grid;place-items:center;padding:0;border:0;background:transparent;opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-18deg);cursor:pointer;filter:drop-shadow(0 4px 10px rgba(190,72,150,.25));transition:opacity .16s ease,transform .22s cubic-bezier(.2,1.4,.3,1),filter .2s ease}.kyun-target.visible{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}.kyun-target-heart{position:absolute;color:#f05ba6;font-size:clamp(64px,8.5vw,98px);line-height:1;text-shadow:0 0 0 #fff,0 0 10px rgba(255,255,255,.95),0 0 20px rgba(238,91,173,.55);animation:kyunTargetBeat .58s ease-in-out infinite alternate}.kyun-target-shine{position:absolute;right:-2px;top:-6px;color:#fff;font-size:clamp(20px,2.5vw,30px);text-shadow:0 0 8px #fff,0 0 13px #d99cf4;animation:kyunShine .7s ease-in-out infinite alternate}.kyun-target.hit{pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(14deg);filter:blur(1px) drop-shadow(0 0 18px #ff87c6)}.kyun-target.miss{pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.45);filter:blur(2px)}.kyun-fever-result{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(255,244,251,.62);backdrop-filter:blur(4px);animation:kyunResultIn .55s ease both}.kyun-result-small{color:#a76ab8;font-size:12px;font-weight:900;letter-spacing:.22em}.kyun-result-count{margin-top:10px;color:#d74f9b;font-size:clamp(38px,7vw,76px);font-weight:900;text-shadow:0 3px 0 #fff,0 0 24px rgba(236,93,170,.35)}.kyun-result-gain{margin-top:4px;color:#9d66bc;font-size:clamp(20px,3vw,32px);font-weight:900}.kyun-result-next{margin-top:24px;color:#a98baa;font-size:10px;font-weight:800;letter-spacing:.18em;animation:clickBlink 1.4s ease-in-out infinite}@keyframes kyunIntro{0%{opacity:0;transform:scale(.84)}22%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}@keyframes kyunTargetBeat{to{transform:scale(1.1)}}@keyframes kyunShine{to{transform:scale(1.25) rotate(20deg);opacity:.6}}@keyframes kyunResultIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}@keyframes kyunBgDrift{to{transform:translate3d(42px,42px,0)}}
@media(max-width:560px){.kyun-fever-hud{top:12px}.kyun-fever-time,.kyun-fever-score{padding:7px 12px}.kyun-target{width:76px}}



/* Chapter 01: soft dream-like event prelude + persistent START screen */
.kyun-fever-rule{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.08em}
.kyun-rule-mark{display:inline-flex;align-items:center;gap:.08em;color:#d6539e;font-weight:900;white-space:nowrap}
.kyun-rule-mark>span{display:inline-block;color:#f05ba6;font-size:1.18em;line-height:1;filter:drop-shadow(0 0 6px rgba(240,91,166,.28));animation:kyunRuleHeart 1.15s ease-in-out infinite alternate}
.kyun-fever-overlay{background:#160f22;transition:background .75s ease}
.kyun-fever-overlay.intro-ready{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.94) 0%,rgba(255,226,245,.92) 35%,rgba(225,211,250,.96) 100%)}
.kyun-fever-overlay.intro-ready::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 2px) 0 0/42px 42px;opacity:.42;animation:kyunBgDrift 8s linear infinite}
.kyun-fever-prelude{position:absolute;z-index:20;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(225,184,244,.16),transparent 24%),linear-gradient(180deg,#120c1c 0%,#21132c 48%,#160d21 100%);animation:kyunDreamPrelude 2.35s ease both}
.kyun-fever-prelude::before{content:"";position:absolute;width:min(72vw,720px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,232,249,.5) 0%,rgba(225,175,242,.2) 26%,rgba(202,154,235,.07) 48%,transparent 68%);filter:blur(8px);opacity:0;animation:kyunDreamGlow 2.25s ease .12s both}
.kyun-fever-prelude::after{content:"";position:absolute;inset:-25%;background:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 2px) 0 0/46px 46px;opacity:0;animation:kyunDreamDust 2.2s ease .18s both}
.kyun-fever-prelude-dream{position:relative;width:clamp(120px,18vw,190px);aspect-ratio:1;display:grid;place-items:center;opacity:0;transform:scale(.72);animation:kyunDreamBloom 1.75s cubic-bezier(.16,1,.3,1) .34s both}
.kyun-dream-heart{position:relative;z-index:2;color:#f39acb;font-size:clamp(58px,9vw,104px);line-height:1;text-shadow:0 0 12px rgba(255,255,255,.9),0 0 34px rgba(240,138,203,.55);animation:kyunDreamHeart 1.15s ease-in-out .48s infinite alternate}
.kyun-dream-star{position:absolute;color:#fff8ff;text-shadow:0 0 9px #fff,0 0 18px rgba(218,166,245,.85);animation:kyunDreamStar 1.25s ease-in-out infinite alternate}
.kyun-dream-star-1{left:4%;top:25%;font-size:clamp(22px,3vw,34px);animation-delay:.1s}
.kyun-dream-star-2{right:2%;top:16%;font-size:clamp(16px,2.4vw,27px);animation-delay:.42s}
.kyun-dream-star-3{right:13%;bottom:11%;font-size:clamp(19px,2.7vw,31px);animation-delay:.7s}
.kyun-fever-intro{animation:kyunIntroStay .65s cubic-bezier(.16,1,.3,1) both}
.kyun-fever-intro.hidden,.kyun-fever-prelude.hidden{display:none!important}
@keyframes kyunRuleHeart{to{transform:scale(1.12)}}
@keyframes kyunDreamPrelude{0%{opacity:0}15%,82%{opacity:1}100%{opacity:0}}
@keyframes kyunDreamGlow{0%{opacity:0;transform:scale(.55)}42%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
@keyframes kyunDreamDust{0%{opacity:0;transform:scale(.96)}35%,70%{opacity:.34}100%{opacity:0;transform:translateY(-18px) scale(1.04)}}
@keyframes kyunDreamBloom{0%{opacity:0;transform:scale(.72);filter:blur(8px)}35%,76%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(1.08);filter:blur(3px)}}
@keyframes kyunDreamHeart{to{transform:scale(1.1) rotate(2deg)}}
@keyframes kyunDreamStar{to{transform:translateY(-6px) scale(1.22) rotate(12deg);opacity:.55}}
@keyframes kyunIntroStay{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

/* ============================================================
   KYUN BOTTLE UI + Chapter 01 bottle-spill event (2026-08-29)
   ============================================================ */
.affection-bottle-gauge{
  position:relative;
  width:86px;
  height:58px;
  flex:0 0 86px;
  display:grid;
  place-items:center;
  isolation:isolate;
  transition:opacity .28s ease,transform .28s ease,filter .28s ease;
}
.affection-bottle-gauge .affection-bar{display:none!important}
.affection-bottle-image{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:88px;
  height:auto;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 5px 8px rgba(139,75,151,.18));
  pointer-events:none;
}
.affection-bottle-value{
  position:relative;
  z-index:2;
  min-width:0!important;
  margin-top:6px;
  color:#fff;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1;
  text-align:center!important;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px rgba(143,52,121,.58),0 0 7px rgba(255,255,255,.82);
  pointer-events:none;
}
.affection-bottle-gauge.kyun-event-source-hidden{opacity:0;transform:scale(.82);filter:blur(2px)}
.affection-bottle-gauge.kyun-bottle-pulse{animation:kyunBottleGaugePulse .56s cubic-bezier(.2,1.35,.3,1)}
@keyframes kyunBottleGaugePulse{0%,100%{transform:scale(1)}42%{transform:scale(1.14) rotate(-3deg)}68%{transform:scale(.98) rotate(2deg)}}

.kyun-fever-overlay{
  position:fixed!important;
  z-index:1000!important;
  inset:0!important;
  overflow:hidden;
  background:radial-gradient(circle at 50% 47%,rgba(96,61,121,.32),transparent 34%),linear-gradient(180deg,#171020 0%,#25162f 52%,#160e20 100%)!important;
  transition:background .8s ease;
  touch-action:none;
  user-select:none;
}
.kyun-fever-overlay::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-15%;
  background:
    radial-gradient(circle at 20% 26%,rgba(255,205,236,.16),transparent 19%),
    radial-gradient(circle at 77% 70%,rgba(197,169,244,.13),transparent 22%),
    radial-gradient(circle,rgba(255,255,255,.72) 0 1px,transparent 1.6px) 0 0/52px 52px;
  opacity:.58;
  animation:kyunBottleDreamDrift 10s linear infinite;
  pointer-events:none;
}
.kyun-fever-overlay.intro-ready{
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.98) 0%,rgba(255,229,246,.96) 34%,rgba(225,211,250,.98) 100%)!important;
}

.kyun-fever-prelude{
  position:absolute;
  z-index:20;
  inset:0;
  display:block;
  overflow:hidden;
  background:transparent!important;
  opacity:1!important;
  animation:none!important;
  transition:opacity .46s ease,filter .46s ease;
  pointer-events:none;
}
.kyun-fever-prelude::before,.kyun-fever-prelude::after{display:none!important}
.kyun-fever-prelude.is-ending{opacity:0!important;filter:blur(4px)}
.kyun-spill-haze{
  position:absolute;
  left:50%;
  top:49%;
  width:min(72vw,760px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.42);
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle,rgba(255,240,251,.68) 0%,rgba(238,183,229,.28) 28%,rgba(190,154,232,.12) 48%,transparent 69%);
  filter:blur(10px);
  animation:kyunSpillHaze 3.45s cubic-bezier(.18,.72,.28,1) .45s both;
}
.kyun-spill-bottle-wrap{
  position:fixed;
  z-index:5;
  width:clamp(112px,14vw,172px);
  aspect-ratio:760/562;
  transform-origin:50% 62%;
  will-change:transform,opacity;
}
.kyun-spill-bottle{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 13px 18px rgba(18,9,29,.34)) drop-shadow(0 0 16px rgba(250,161,220,.22));
}
.kyun-spill-bottle-value{
  position:absolute;
  z-index:2;
  left:50%;
  top:57%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:clamp(22px,3.5vw,38px);
  font-weight:900;
  line-height:1;
  text-shadow:0 2px 3px rgba(136,46,114,.68),0 0 12px rgba(255,255,255,.86);
}
.kyun-spill-hearts{position:absolute;z-index:4;inset:0;pointer-events:none}
.kyun-spilled-heart{
  position:fixed;
  width:clamp(46px,6vw,76px);
  height:auto;
  transform-origin:center;
  filter:drop-shadow(0 6px 9px rgba(211,76,155,.22)) drop-shadow(0 0 9px rgba(255,220,244,.24));
  will-change:transform,opacity;
}
.kyun-spill-sparkles{position:absolute;z-index:3;inset:0;opacity:0;animation:kyunSpillSparkles 1.5s ease 1.9s both}
.kyun-spill-sparkles span{position:absolute;color:#fff8ff;text-shadow:0 0 8px #fff,0 0 18px rgba(236,166,226,.86);animation:kyunSpillTwinkle .8s ease-in-out infinite alternate}
.kyun-spill-sparkles span:nth-child(1){left:30%;top:31%;font-size:25px}
.kyun-spill-sparkles span:nth-child(2){left:63%;top:27%;font-size:18px;animation-delay:.2s}
.kyun-spill-sparkles span:nth-child(3){left:69%;top:57%;font-size:29px;animation-delay:.35s}
.kyun-spill-sparkles span:nth-child(4){left:34%;top:67%;font-size:19px;animation-delay:.5s}
.kyun-spill-sparkles span:nth-child(5){left:51%;top:22%;font-size:16px;animation-delay:.65s}

.kyun-fever-intro{
  position:absolute;
  z-index:24;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  animation:kyunIntroStay .65s cubic-bezier(.16,1,.3,1) both!important;
}
.kyun-fever-rule{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.08em}
.kyun-rule-mark{
  display:inline-flex;
  align-items:center;
  gap:2px;
  color:#d6539e;
  font-weight:900;
  white-space:nowrap;
}
.kyun-rule-mark img{
  width:30px;
  height:auto;
  margin-left:-1px;
  filter:drop-shadow(0 3px 5px rgba(224,78,164,.2));
  animation:kyunRuleGem 1.05s ease-in-out infinite alternate;
}

.kyun-fever-hud{
  position:absolute;
  z-index:30;
  top:16px;
  left:50%;
  width:min(700px,92%);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:16px;
  pointer-events:none;
}
.kyun-fever-time{justify-self:start}
.kyun-fever-score{justify-self:end}
.kyun-fever-collector{
  position:relative;
  width:88px;
  height:68px;
  margin-top:-7px;
  display:grid;
  place-items:center;
  transform-origin:50% 60%;
}
.kyun-fever-collector img{position:absolute;width:86px;height:auto;filter:drop-shadow(0 6px 10px rgba(127,64,147,.2))}
.kyun-fever-collector b{position:relative;z-index:2;margin-top:8px;color:#fff;font-size:18px;font-weight:900;text-shadow:0 1px 2px rgba(143,52,121,.58),0 0 7px #fff}
.kyun-fever-collector.is-pulsing{animation:kyunCollectorPulse .42s cubic-bezier(.2,1.4,.3,1)}

.kyun-fever-field{position:absolute;z-index:12;inset:0}
.kyun-target{
  position:absolute;
  width:clamp(88px,10vw,122px)!important;
  aspect-ratio:560/395!important;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  opacity:0;
  transform:translate(-50%,-50%) scale(.35) rotate(-12deg);
  cursor:pointer;
  filter:drop-shadow(0 6px 12px rgba(190,72,150,.2));
  transition:opacity .16s ease,transform .22s cubic-bezier(.2,1.4,.3,1),filter .2s ease;
}
.kyun-target.visible{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
.kyun-target-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;animation:kyunTargetGemBeat .62s ease-in-out infinite alternate}
.kyun-target.hit{pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(9deg);filter:drop-shadow(0 0 18px #ff8dcc)}
.kyun-target.miss{pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.58);filter:blur(1px)}
.kyun-returning-heart{
  position:fixed;
  z-index:1050;
  width:72px;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 5px 10px rgba(219,79,161,.28)) drop-shadow(0 0 8px rgba(255,255,255,.68));
}

.kyun-fever-result{z-index:40}
.kyun-result-heart{width:clamp(82px,11vw,126px);height:auto;margin-top:10px;filter:drop-shadow(0 7px 13px rgba(212,77,158,.2));animation:kyunResultHeartFloat 1.15s ease-in-out infinite alternate}
.kyun-result-count{margin-top:0!important}

@keyframes kyunBottleDreamDrift{to{transform:translate3d(52px,38px,0)}}
@keyframes kyunSpillHaze{0%{opacity:0;transform:translate(-50%,-50%) scale(.42)}56%{opacity:.48;transform:translate(-50%,-50%) scale(.72)}78%{opacity:.88;transform:translate(-50%,-50%) scale(1)}100%{opacity:.25;transform:translate(-50%,-50%) scale(1.16)}}
@keyframes kyunSpillSparkles{0%{opacity:0;transform:scale(.82)}35%,80%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(1.05)}}
@keyframes kyunSpillTwinkle{to{opacity:.38;transform:translateY(-5px) scale(1.18) rotate(10deg)}}
@keyframes kyunRuleGem{to{transform:scale(1.12) rotate(4deg)}}
@keyframes kyunCollectorPulse{0%,100%{transform:scale(1)}48%{transform:scale(1.15) rotate(-4deg)}}
@keyframes kyunTargetGemBeat{to{transform:scale(1.08) rotate(2deg);filter:brightness(1.05)}}
@keyframes kyunResultHeartFloat{to{transform:translateY(-6px) scale(1.04)}}

@media(max-width:560px){
  .affection-bottle-gauge{width:72px;height:50px;flex-basis:72px}
  .affection-bottle-image{width:74px}
  .affection-bottle-value{font-size:16px!important;margin-top:5px}
  .header-right{gap:5px}
  .kyun-fever-hud{top:10px;grid-template-columns:1fr auto 1fr;gap:6px}
  .kyun-fever-time,.kyun-fever-score{padding:7px 10px;font-size:11px}
  .kyun-fever-collector{width:72px;height:57px}
  .kyun-fever-collector img{width:72px}
  .kyun-fever-collector b{font-size:15px;margin-top:7px}
  .kyun-target{width:88px!important}
  .kyun-rule-mark img{width:26px}
}

/* Chapter 01 spill intro v2: focus the real top-right gauge and spill toward lower-left */
.kyun-fever-overlay:not(.intro-ready){
  background:
    radial-gradient(circle 132px at var(--kyun-focus-x,calc(100% - 72px)) var(--kyun-focus-y,54px),rgba(255,245,252,.08) 0%,rgba(255,232,247,.035) 45%,rgba(18,10,28,.58) 100%),
    rgba(20,12,30,.16)!important;
  backdrop-filter:brightness(.78) saturate(.92);
}
.kyun-fever-overlay:not(.intro-ready)::before{
  opacity:.18;
}
.kyun-fever-prelude{
  background:transparent!important;
}
.kyun-spill-haze{
  left:var(--kyun-focus-x,calc(100% - 72px));
  top:var(--kyun-focus-y,54px);
  width:clamp(180px,25vw,330px);
  background:radial-gradient(circle,rgba(255,244,252,.56) 0%,rgba(245,181,225,.22) 35%,transparent 70%);
  animation:kyunGaugeFocusHaze 3.6s ease both;
}
.kyun-spill-bottle-wrap{
  width:76px;
  aspect-ratio:76/58;
  transform-origin:48% 56%;
  filter:drop-shadow(0 0 12px rgba(255,190,231,.34));
}
.kyun-spill-bottle{
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(18,9,29,.26)) drop-shadow(0 0 10px rgba(250,161,220,.22));
}
.kyun-spill-bottle-value{
  top:58%;
  font-size:17px;
}
.kyun-spilled-heart{
  width:clamp(34px,4.8vw,68px);
  filter:drop-shadow(0 5px 8px rgba(211,76,155,.22)) drop-shadow(0 0 8px rgba(255,220,244,.3));
}
.kyun-spill-sparkles{
  animation:kyunSpillSparkles 1.8s ease 1.6s both;
}
@keyframes kyunGaugeFocusHaze{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  20%{opacity:.52;transform:translate(-50%,-50%) scale(.88)}
  58%{opacity:.72;transform:translate(-50%,-50%) scale(1.04)}
  100%{opacity:.12;transform:translate(-50%,-50%) scale(1.22)}
}
@media(max-width:600px){
  .kyun-spill-bottle-wrap{width:70px}
  .kyun-spill-bottle-value{font-size:15px}
}

/* Chapter 03: timing jump challenge */
.jump-challenge-overlay{position:absolute;z-index:66;inset:0;overflow:hidden;background:linear-gradient(180deg,#f8efff 0%,#eadcff 48%,#d4c0ef 100%);font-family:"Zen Maru Gothic",sans-serif;touch-action:none;user-select:none}.jump-challenge-overlay.hidden{display:none!important}.jump-challenge-intro,.jump-challenge-message{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.94),rgba(245,227,255,.92) 48%,rgba(220,195,242,.97) 100%)}.jump-challenge-event{font-size:clamp(15px,2vw,23px);font-weight:900;color:#a96ab6;letter-spacing:.1em}.jump-challenge-title{margin-top:10px;font-size:clamp(34px,5.5vw,64px);line-height:1.15;font-weight:900;color:#76528f;text-shadow:0 3px 0 #fff,0 0 22px rgba(194,130,220,.35)}.jump-challenge-rule{max-width:720px;margin-top:18px;font-size:clamp(13px,1.7vw,18px);font-weight:800;color:#66546e}.jump-challenge-start{margin-top:30px;min-width:190px;padding:13px 36px;border:1px solid rgba(123,82,151,.28);border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 9px 26px rgba(89,55,114,.16);color:#805799;font:900 18px/1 "Zen Maru Gothic",sans-serif;letter-spacing:.15em;cursor:pointer}.jump-challenge-start:hover{transform:scale(1.04)}.jump-challenge-game{position:absolute;z-index:4;inset:0;background:linear-gradient(180deg,#d9c9f0 0 64%,#f7ecff 64% 100%)}.jump-challenge-game.hidden,.jump-challenge-message.hidden{display:none!important}.jump-challenge-hud{position:absolute;z-index:7;top:18px;left:50%;transform:translateX(-50%);padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:0 6px 18px rgba(82,52,107,.14);color:#725486;font-weight:900}.jump-challenge-stage{position:absolute;inset:0;overflow:hidden;cursor:pointer}.jump-challenge-ground{position:absolute;left:0;right:0;bottom:18%;height:6px;background:#86639b;box-shadow:0 5px 0 rgba(255,255,255,.7),0 -3px 16px rgba(118,77,145,.15)}.jump-challenge-player{position:absolute;z-index:6;left:20%;bottom:calc(18% + 6px);width:68px;height:58px;display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%;filter:drop-shadow(0 7px 8px rgba(78,49,101,.18))}.jump-challenge-player img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none;user-select:none}.jump-challenge-player.is-jumping{animation:jumpChallengeHop .72s cubic-bezier(.2,.7,.25,1) both}.jump-challenge-player.is-hit{animation:jumpChallengeHit .5s ease both}.jump-challenge-obstacle{position:absolute;z-index:5;left:calc(100% + 80px);bottom:calc(18% + 6px);width:48px;height:58px;display:grid;place-items:center;background:linear-gradient(180deg,#8d6aa1,#654a78);border:3px solid rgba(255,255,255,.65);border-radius:8px 8px 4px 4px;box-shadow:0 7px 12px rgba(67,43,83,.24)}.jump-challenge-obstacle span{color:#fff;font-size:24px}.jump-challenge-tap{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);font-size:11px;font-weight:900;letter-spacing:.16em;color:rgba(91,65,105,.66);animation:clickBlink 1.2s ease-in-out infinite}.jump-message-speaker{font-size:13px;font-weight:900;color:#a67ab2;letter-spacing:.12em}.jump-message-text{margin-top:10px;font-size:clamp(28px,4.5vw,52px);font-weight:900;color:#735184;text-shadow:0 2px 0 #fff}.jump-message-clear{font-size:clamp(48px,8vw,88px);font-weight:900;color:#d05f9f;text-shadow:0 3px 0 #fff,0 0 25px rgba(218,99,166,.35)}.jump-message-gain{margin-top:10px;font-size:clamp(22px,3vw,34px);font-weight:900;color:#81579a}.jump-challenge-message.is-clear{background:radial-gradient(circle at 50% 45%,#fff 0%,#ffe8f5 50%,#e2d0f6 100%)}@keyframes jumpChallengeHop{0%,100%{transform:translateY(0) rotate(0)}42%{transform:translateY(-128px) rotate(-5deg)}64%{transform:translateY(-112px) rotate(5deg)}}@keyframes jumpChallengeHit{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-12px,-8px) rotate(-12deg)}55%{transform:translate(12px,4px) rotate(14deg)}100%{transform:translate(0,0) rotate(0);filter:saturate(.5)}}@media(max-width:560px){.jump-challenge-player{left:17%;width:60px;height:50px}.jump-challenge-obstacle{width:42px;height:52px}.jump-challenge-ground{bottom:20%}.jump-challenge-player,.jump-challenge-obstacle{bottom:calc(20% + 6px)}@keyframes jumpChallengeHop{0%,100%{transform:translateY(0)}45%{transform:translateY(-102px)}65%{transform:translateY(-90px)}}}

/* Speaker-specific dialogue colors */
.dialogue-box{transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.dialogue-box.dialogue-shake{animation:chapter4DialogueShake .38s cubic-bezier(.36,.07,.19,.97) both}
.dialogue-box.dialogue-shake-strong{animation:chapter4DialogueShakeStrong .52s cubic-bezier(.36,.07,.19,.97) both}
@keyframes chapter4DialogueShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-3px)}
  40%{transform:translateX(3px)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
}
@keyframes chapter4DialogueShakeStrong{
  0%,100%{transform:translate(0,0)}
  14%{transform:translate(-7px,1px)}
  28%{transform:translate(7px,-1px)}
  42%{transform:translate(-6px,0)}
  56%{transform:translate(6px,1px)}
  70%{transform:translate(-4px,-1px)}
  84%{transform:translate(4px,0)}
}
.dialogue-box.speaker-yumemimumu{border-color:rgba(214,90,154,.48);box-shadow:0 10px 30px rgba(186,76,145,.14)}
.dialogue-box.speaker-yumemimumu .speaker{background:linear-gradient(135deg,#e56aaa,#a96bd0)}
.dialogue-box.speaker-pusen{
  border-color:transparent;
  box-shadow:0 10px 30px rgba(186,76,145,.14);
}
.dialogue-box.speaker-pusen::before{
  content:"";
  position:absolute;
  inset:-1px;
  padding:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg,#ec7fb5 0%,#c887d9 52%,#81a3d2 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.dialogue-box.speaker-pusen .speaker{
  background:linear-gradient(135deg,#ec7fb5 0%,#c887d9 52%,#81a3d2 100%);
}
.dialogue-box.speaker-narration{border-color:rgba(118,107,139,.34);box-shadow:0 10px 30px rgba(72,62,92,.10)}
.dialogue-box.speaker-narration .speaker{background:linear-gradient(135deg,#8f879d,#696277)}
.dialogue-box.speaker-listener{border-color:rgba(89,151,190,.42);box-shadow:0 10px 30px rgba(69,128,166,.12)}
.dialogue-box.speaker-listener .speaker{background:linear-gradient(135deg,#67acd1,#6d83c8)}

/* Chapter 3: first three jump attempts use deliberately unfair surprise traps. */
.jump-challenge-surprise{
  position:absolute;
  z-index:7;
  pointer-events:none;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border:3px solid rgba(255,255,255,.82);
  border-radius:10px;
  background:linear-gradient(180deg,#9b628e,#623c68);
  box-shadow:0 8px 18px rgba(59,31,70,.35);
  opacity:0;
}
.jump-challenge-surprise span{color:#fff;font-size:28px;font-weight:900}
.jump-trap-ceiling{
  left:20%;
  top:-72px;
  transform:translateX(0) rotate(180deg);
  transition:top .22s cubic-bezier(.2,.9,.2,1),opacity .08s linear;
}
.jump-trap-ceiling.is-active{top:calc(64% - 118px);opacity:1}
.jump-trap-pop{
  left:calc(20% + 8px);
  bottom:calc(18% + 6px);
  transform:scale(.1) rotate(-18deg);
  transition:transform .2s cubic-bezier(.15,1.5,.25,1),opacity .06s linear;
}
.jump-trap-pop.is-active{transform:scale(1.08) rotate(8deg);opacity:1}
.jump-trap-air{
  left:20%;
  bottom:calc(18% + 116px);
  transform:translateX(110px) scale(.2) rotate(30deg);
  transition:transform .25s cubic-bezier(.2,1.25,.3,1),opacity .06s linear;
}
.jump-trap-air.is-active{transform:translateX(8px) scale(1) rotate(0);opacity:1}
@media(max-width:560px){
  .jump-trap-ceiling,.jump-trap-pop,.jump-trap-air{left:17%;width:50px;height:50px}
  .jump-trap-pop{bottom:calc(20% + 6px)}
  .jump-trap-air{bottom:calc(20% + 100px)}
  .jump-trap-ceiling.is-active{top:calc(60% - 102px)}
}

/* Chapter 3: uniform-speed attempt traps.
   Base speed stays identical every run; only the extra obstacle pattern changes. */
.jump-challenge-extra{
  z-index:5;
  background:linear-gradient(180deg,#a85f91,#6d416e);
  box-shadow:0 7px 16px rgba(67,43,83,.30),0 0 0 3px rgba(255,210,238,.18);
}
/* 1st: fixed wall that cannot be cleared. */
.jump-challenge-extra.jump-trap-wall{
  width:54px;
  height:205px;
  border-radius:9px 9px 4px 4px;
}
.jump-challenge-extra.jump-trap-wall span{align-self:start;margin-top:12px}
/* 2nd: two simultaneous obstacles at different speeds. */
.jump-challenge-extra.jump-trap-stop-and-go{width:62px;height:62px;border-radius:10px 10px 5px 5px;transition:filter .08s ease}.jump-challenge-extra.jump-trap-stop-and-go.is-paused{filter:brightness(1.2) drop-shadow(0 0 9px rgba(255,255,255,.8));animation:jumpTrapPauseShake .14s steps(2,end) infinite}.jump-challenge-extra.jump-trap-stop-and-go.is-restarting{filter:brightness(1.08)}.jump-challenge-extra.jump-trap-follower{width:82px;height:54px;border-radius:9px 9px 5px 5px;background:linear-gradient(180deg,#a77bbb,#725184)}@keyframes jumpTrapPauseShake{0%,100%{margin-left:0}50%{margin-left:2px}}
.jump-challenge-extra.jump-trap-pincer-fast{
  width:58px;
  height:104px;
  border-radius:8px 8px 4px 4px;
  background:repeating-linear-gradient(135deg,#a85f91 0 12px,#754772 12px 24px);
}
.jump-challenge-extra.jump-trap-pincer-slow{
  width:112px;
  height:72px;
  border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,#8d5f93,#624169);
}
/* 3rd: deterministic two-wall pattern. */
.jump-challenge-extra.jump-trap-double-a,
.jump-challenge-extra.jump-trap-double-b{
  width:62px;
  height:126px;
  border-radius:8px 8px 4px 4px;
}
.jump-challenge-extra.jump-trap-double-b{
  width:78px;
  height:92px;
  background:repeating-linear-gradient(135deg,#8d5f93 0 14px,#6d496f 14px 28px);
}
/* 4th: one stable, normal-speed chaser. */
.jump-challenge-extra.jump-trap-chaser{
  width:48px;
  height:58px;
  background:linear-gradient(180deg,#9b628e,#623c68);
}
@media(max-width:560px){
  .jump-challenge-extra.jump-trap-wall{width:48px;height:176px}
  .jump-challenge-extra.jump-trap-pincer-fast{width:50px;height:92px}
  .jump-challenge-extra.jump-trap-pincer-slow{width:96px;height:64px}
  .jump-challenge-extra.jump-trap-double-a{width:54px;height:112px}
  .jump-challenge-extra.jump-trap-double-b{width:66px;height:82px}
  .jump-challenge-extra.jump-trap-chaser{width:42px;height:52px}
}


/* Chapter 3 / 4th attempt pitfall */
.jump-challenge-pitfall{
  position:absolute;z-index:5;left:calc(20% - 18px);bottom:calc(18% - 5px);
  width:96px;height:22px;border-radius:50%;opacity:0;transform:scaleX(.15);
  background:radial-gradient(ellipse at center,#21162d 0 45%,#49345d 48% 64%,rgba(73,52,93,0) 68%);
  filter:drop-shadow(0 5px 5px rgba(40,24,52,.28));transform-origin:center;
  transition:opacity .12s ease,transform .18s cubic-bezier(.2,.8,.2,1);pointer-events:none;
}
.jump-challenge-pitfall span{position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-weight:900;color:#9b6eb4;opacity:0}
.jump-challenge-pitfall.is-open{opacity:1;transform:scaleX(1)}
.jump-challenge-pitfall.is-open span{animation:jumpPitWarning .34s ease both}
.jump-challenge-player.is-falling{animation:jumpPitFall .62s cubic-bezier(.45,0,.8,.4) forwards!important}
@keyframes jumpPitWarning{0%{opacity:0;transform:translate(-50%,8px) scale(.6)}45%{opacity:1;transform:translate(-50%,0) scale(1.25)}100%{opacity:0;transform:translate(-50%,-8px) scale(.9)}}
@keyframes jumpPitFall{0%{transform:translateY(0) rotate(0);opacity:1}35%{transform:translateY(-12px) rotate(-5deg);opacity:1}100%{transform:translateY(74px) rotate(16deg) scale(.72);opacity:0}}
@media(max-width:560px){.jump-challenge-pitfall{left:calc(17% - 18px);bottom:calc(20% - 5px);width:86px}}

/* Chapter 3 pixel PNG game assets */
.jump-challenge-player{width:88px;height:76px}
.jump-challenge-player img,.jump-obstacle-image,.jump-challenge-pitfall img{image-rendering:pixelated;image-rendering:crisp-edges}
.jump-challenge-obstacle{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;display:flex;align-items:flex-end;justify-content:center}
.jump-challenge-obstacle .jump-obstacle-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none}
.jump-challenge-obstacle:not(.jump-challenge-extra){width:58px;height:52px}
.jump-challenge-extra.jump-trap-wall{width:56px;height:205px}
.jump-challenge-extra.jump-trap-double-a{width:58px;height:126px}
.jump-challenge-extra.jump-trap-double-b{width:64px;height:92px}
.jump-challenge-extra.jump-trap-stop-and-go{width:64px;height:58px}
.jump-challenge-extra.jump-trap-follower{width:66px;height:56px}
.jump-challenge-pitfall{height:44px;background:none!important;filter:drop-shadow(0 5px 5px rgba(40,24,52,.28));border-radius:0}
.jump-challenge-pitfall img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.jump-challenge-pitfall.is-open span{display:none}
@media(max-width:560px){
  .jump-challenge-player{width:78px;height:68px}
  .jump-challenge-obstacle:not(.jump-challenge-extra){width:52px;height:47px}
  .jump-challenge-extra.jump-trap-wall{width:50px;height:176px}
  .jump-challenge-extra.jump-trap-stop-and-go{width:58px;height:52px}
  .jump-challenge-extra.jump-trap-follower{width:60px;height:50px}
  .jump-challenge-pitfall{height:40px}
}


/* Chapter 3 PNG geometry fixes: visual size = collision size */
.jump-challenge-extra.jump-trap-wall .jump-obstacle-image,
.jump-challenge-extra.jump-trap-double-a .jump-obstacle-image,
.jump-challenge-extra.jump-trap-double-b .jump-obstacle-image{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Pitfall asset keeps its native wide aspect ratio and opens exactly on the ground. */
.jump-challenge-pitfall{
  left:calc(20% - 18px);
  bottom:calc(18% - 31px);
  width:124px;
  height:35px;
  opacity:0;
  transform:scaleX(.12);
  transform-origin:center top;
  overflow:visible;
}
.jump-challenge-pitfall img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
}
.jump-challenge-pitfall.is-open{opacity:1;transform:scaleX(1)}
@media(max-width:560px){
  .jump-challenge-pitfall{
    left:calc(17% - 18px);
    bottom:calc(20% - 27px);
    width:108px;
    height:30px;
  }
}

/* Chapter 04 — HAPPENING ROUTE cutscene */
.chapter4-happening-cutscene{
  position:fixed;inset:0;z-index:15000;display:grid;place-items:center;overflow:hidden;
  background:rgba(12,6,17,.26);isolation:isolate
}
.chapter4-happening-cutscene::before{
  content:"";position:absolute;inset:-8%;z-index:-3;
  background:radial-gradient(circle at 50% 48%,rgba(255,143,207,.10),rgba(35,12,47,.48) 48%,rgba(0,0,0,.92) 100%);
  transition:filter .18s ease,transform .18s ease
}
.chapter4-happening-noise{
  position:absolute;inset:-35%;z-index:-2;opacity:.20;pointer-events:none;
  background-image:repeating-radial-gradient(circle at 37% 61%,rgba(255,255,255,.50) 0 1px,transparent 1px 4px);
  animation:chapter4HappeningNoise .11s steps(2,end) infinite
}
.chapter4-happening-scanlines{
  position:absolute;inset:0;z-index:-1;opacity:.27;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,123,201,.13) 3px 4px,transparent 4px 7px);
  animation:chapter4HappeningScan .55s linear infinite
}
.chapter4-happening-tear{
  position:absolute;left:-8%;width:116%;height:7%;z-index:1;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(255,0,119,.28),rgba(91,127,255,.20),transparent)
}
.chapter4-happening-tear.tear-a{top:23%}.chapter4-happening-tear.tear-b{top:68%}
.chapter4-happening-dialogue{
  position:relative;z-index:5;width:min(1180px,96vw);padding:26px 30px;border:1px solid rgba(255,155,214,.45);
  border-radius:18px;background:rgba(18,9,27,.78);box-shadow:0 0 48px rgba(191,68,146,.18),inset 0 0 28px rgba(255,124,199,.05);
  backdrop-filter:blur(8px)
}
.chapter4-happening-speaker{display:block;margin-bottom:10px;color:#ff9bd2;font-weight:800;letter-spacing:.08em}
.chapter4-happening-text{margin:0;color:#fff4fa;font-size:clamp(20px,3vw,34px);font-weight:700;line-height:1.6;text-align:center;white-space:pre}
.chapter4-happening-text.is-long{font-size:clamp(13px,2.25vw,27px)}
.chapter4-happening-text.is-very-long{font-size:clamp(10px,2vw,24px)}
.chapter4-happening-cutscene[data-distort="1"]::before{filter:contrast(1.15) saturate(1.18)}
.chapter4-happening-cutscene[data-distort="2"]::before{filter:contrast(1.32) saturate(1.38);animation:chapter4HappeningWarp .42s steps(2,end) infinite}
.chapter4-happening-cutscene[data-distort="2"] .chapter4-happening-tear,
.chapter4-happening-cutscene[data-distort="3"] .chapter4-happening-tear{animation:chapter4HappeningTear .56s steps(2,end) infinite}
.chapter4-happening-cutscene[data-distort="3"]::before{filter:contrast(1.55) saturate(1.55);animation:chapter4HappeningWarp .24s steps(2,end) infinite}
.chapter4-happening-cutscene[data-distort="3"] .chapter4-happening-noise{opacity:.38}
.chapter4-happening-cutscene[data-distort="3"] .chapter4-happening-scanlines{opacity:.46}
.chapter4-happening-cutscene.speaker-corrupted .chapter4-happening-speaker{color:#ffd2eb;text-shadow:2px 0 rgba(255,0,128,.45),-2px 0 rgba(80,115,255,.40)}
.chapter4-happening-cutscene.speaker-corrupted .chapter4-happening-dialogue{border-color:rgba(255,105,190,.65)}
.chapter4-happening-cutscene.speaker-narration .chapter4-happening-speaker{color:#bfb7c9}
.chapter4-happening-cutscene.dialogue-shake .chapter4-happening-dialogue{animation:chapter4HappeningDialogueShake .12s steps(2,end) 4}

.chapter4-happening-blackout-panel{
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  z-index:100;
  background:#000;
  pointer-events:none;
  will-change:transform;
  transition:transform .32s cubic-bezier(.82,0,.18,1)
}
.chapter4-happening-blackout-panel.blackout-top{
  top:0;
  transform:translateY(-100%)
}
.chapter4-happening-blackout-panel.blackout-bottom{
  bottom:0;
  transform:translateY(100%)
}
.chapter4-happening-cutscene.blackout .chapter4-happening-blackout-panel{
  transform:translateY(0)
}
.chapter4-happening-cutscene.blackout-complete{background:#000}
.chapter4-happening-cutscene.blackout-complete::before,
.chapter4-happening-cutscene.blackout-complete .chapter4-happening-noise,
.chapter4-happening-cutscene.blackout-complete .chapter4-happening-scanlines,
.chapter4-happening-cutscene.blackout-complete .chapter4-happening-tear,
.chapter4-happening-cutscene.blackout-complete .chapter4-happening-dialogue{opacity:0}


@keyframes chapter4HappeningNoise{0%{transform:translate(0,0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}100%{transform:translate(-3%,-1%)}}
@keyframes chapter4HappeningScan{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
@keyframes chapter4HappeningWarp{0%,100%{transform:translate(0) skewX(0)}35%{transform:translate(-5px,2px) skewX(1.2deg)}70%{transform:translate(6px,-2px) skewX(-1deg)}}
@keyframes chapter4HappeningTear{0%,50%,100%{opacity:0;transform:translateX(0) scaleY(.25)}52%{opacity:.72;transform:translateX(-25px) scaleY(1)}61%{opacity:.18;transform:translateX(31px) scaleY(.45)}}
@keyframes chapter4HappeningDialogueShake{0%,100%{transform:translate(0)}50%{transform:translate(7px,-2px)}}

/* Chapter 04 — HAPPENING ROUTE mini game */
.chapter4-escape-game{
  position:fixed;
  inset:0;
  z-index:16000;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:12px;
  padding:clamp(10px,2vw,22px);
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 18% 20%,rgba(143,83,210,.20),transparent 36%),
    radial-gradient(circle at 82% 18%,rgba(77,164,237,.16),transparent 34%),
    linear-gradient(135deg,#080a22 0%,#111335 52%,#15173b 100%);
  transition:opacity .5s ease
}
.chapter4-escape-game.closing{opacity:0}

.chapter4-escape-back-button{
  position:absolute;
  left:clamp(10px,2vw,22px);
  top:clamp(10px,2vw,22px);
  z-index:90;
  min-height:42px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#fff;
  background:rgba(10,10,31,.62);
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  backdrop-filter:blur(10px);
  font:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  cursor:pointer;
  transition:background .15s ease,transform .08s ease,opacity .15s ease
}
.chapter4-escape-back-button span{font-size:17px;line-height:1}
.chapter4-escape-back-button:hover{background:rgba(31,24,67,.84)}
.chapter4-escape-back-button:active{transform:translateY(1px)}

.chapter4-escape-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:min(1380px,100%);
  margin:0 auto
}
.chapter4-escape-header>div:first-child{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-left:clamp(138px,17vw,190px)
}
.chapter4-escape-kicker{
  color:#ff91d3;
  font-size:10px;
  font-weight:900;
  letter-spacing:.24em;
  text-shadow:0 0 14px rgba(255,110,205,.42)
}
.chapter4-escape-header strong{
  font-size:clamp(18px,2.5vw,30px);
  text-shadow:0 3px 14px rgba(0,0,0,.35)
}

.chapter4-escape-hud{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:min(560px,54vw)
}
.chapter4-escape-meter{
  display:grid;
  grid-template-columns:auto 160px;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(10,12,39,.34);
  backdrop-filter:blur(7px);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em
}
.chapter4-escape-meter>span{white-space:nowrap}
.chapter4-escape-meter>span b{font-size:14px}
.chapter4-escape-meter>i{
  display:block;
  height:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(3,6,27,.45);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.30)
}
.chapter4-escape-meter>i>b{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  transition:width .12s linear
}
.chapter4-escape-progress-fill{
  background:linear-gradient(90deg,#bb78ff,#ff88cf 48%,#7ce4ff)
}
.chapter4-escape-stamina-fill{
  width:100%;
  background:linear-gradient(90deg,#68ddbd,#b3ee8c,#ffe979)
}
.chapter4-escape-stamina-meter.is-low .chapter4-escape-stamina-fill{
  background:linear-gradient(90deg,#ff9f68,#ffd76f)
}
.chapter4-escape-stamina-meter.is-out .chapter4-escape-stamina-fill{
  background:#ef6683
}
.chapter4-escape-stamina-meter.is-low>span{
  animation:chapter4EscapeHudWarn .48s ease infinite alternate
}

.chapter4-escape-stage{
  width:min(1380px,100%);
  min-width:0;
  min-height:0;
  height:100%;
  margin:0 auto;
  display:grid;
  place-items:center;
  overflow:hidden
}

.chapter4-escape-field{
  position:relative;
  isolation:isolate;
  width:min(1380px,100%);
  height:auto;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  aspect-ratio:16 / 9;
  margin:0 auto;
  overflow:hidden;
  outline:none;
  border:1px solid rgba(218,224,255,.52);
  border-radius:25px;
  background:
    #21214c
    url("../assets/images/chapter4/happening_game_background.png")
    center center/contain no-repeat;
  box-shadow:
    inset 0 0 80px rgba(7,8,37,.16),
    0 18px 48px rgba(0,0,0,.30)
}
.chapter4-escape-field::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(17,9,45,.13),transparent 27%,transparent 72%,rgba(255,255,255,.05)),
    linear-gradient(180deg,rgba(2,6,31,.13),transparent 24%,transparent 72%,rgba(3,11,35,.15))
}
.chapter4-escape-field:not(.is-live) .chapter4-escape-player{opacity:0}

.chapter4-escape-current{
  position:absolute;
  pointer-events:none;
  background:
    url("../assets/images/chapter4/happening_water_overlay.png")
    center/cover no-repeat;
  will-change:transform,opacity
}
.chapter4-escape-current-back{
  inset:-8% -8%;
  z-index:3;
  opacity:.18;
  animation:chapter4EscapeWaterBack 4.8s ease-in-out infinite alternate
}
.chapter4-escape-current-front{
  inset:-9% -10%;
  z-index:13;
  opacity:.065;
  filter:brightness(1.12) saturate(1.06);
  animation:chapter4EscapeWaterFront 3.1s ease-in-out infinite alternate
}

.chapter4-escape-goal{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:.78;
  transform:translateZ(0);
  transform-origin:86% 58%;
  transition:opacity .35s ease,filter .35s ease;
  will-change:opacity,filter,transform
}
.chapter4-escape-goal img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:.86;
  filter:
    drop-shadow(0 0 12px rgba(255,179,231,.25))
    drop-shadow(0 0 22px rgba(172,206,255,.18));
  transition:opacity .35s ease,filter .35s ease;
  will-change:opacity,filter,transform
}
.chapter4-escape-goal::before{
  content:"";
  position:absolute;
  z-index:1;
  right:-4%;
  top:2%;
  width:39%;
  height:92%;
  border-radius:50%;
  opacity:.34;
  background:radial-gradient(
    ellipse at 72% 48%,
    rgba(255,255,255,.56) 0 7%,
    rgba(255,192,233,.26) 20%,
    rgba(174,211,255,.12) 42%,
    transparent 70%
  );
  filter:blur(7px);
  transition:opacity .35s ease,filter .35s ease
}
.chapter4-escape-goal::after{
  content:"";
  position:absolute;
  z-index:2;
  right:1.8%;
  top:8%;
  width:31%;
  height:84%;
  opacity:0;
  background:
    radial-gradient(circle at 16% 71%,rgba(255,255,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 33% 39%,rgba(255,177,230,.95) 0 2.5px,transparent 3.5px),
    radial-gradient(circle at 52% 18%,rgba(190,220,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 67% 61%,rgba(255,255,255,.92) 0 3px,transparent 4px),
    radial-gradient(circle at 80% 32%,rgba(255,187,235,.94) 0 2px,transparent 3px),
    radial-gradient(circle at 91% 76%,rgba(201,225,255,.95) 0 2.5px,transparent 3.5px),
    radial-gradient(circle at 45% 83%,rgba(255,255,255,.9) 0 2px,transparent 3px);
  filter:drop-shadow(0 0 7px rgba(255,191,236,.9));
  transform:translate3d(0,8px,0) scale(.98);
  will-change:opacity,transform
}
.chapter4-escape-goal[data-stage="bright"]{
  opacity:.9;
  filter:brightness(1.08) saturate(1.05)
}
.chapter4-escape-goal[data-stage="bright"] img{
  opacity:.93;
  filter:
    brightness(1.08)
    drop-shadow(0 0 16px rgba(255,177,231,.34))
    drop-shadow(0 0 30px rgba(176,212,255,.24))
}
.chapter4-escape-goal[data-stage="bright"]::before{opacity:.5;filter:blur(9px)}
.chapter4-escape-goal[data-stage="near"]{
  opacity:1;
  filter:brightness(1.14) saturate(1.08);
  animation:chapter4EscapeGoalPulse .72s ease-in-out infinite alternate
}
.chapter4-escape-goal[data-stage="near"] img{
  opacity:1;
  filter:
    brightness(1.15)
    drop-shadow(0 0 18px rgba(255,176,232,.48))
    drop-shadow(0 0 38px rgba(177,214,255,.34))
}
.chapter4-escape-goal[data-stage="near"]::before{
  opacity:.68;
  filter:blur(11px);
  animation:chapter4EscapeGoalAura .66s ease-in-out infinite alternate
}
.chapter4-escape-goal[data-stage="near"]::after{
  opacity:.82;
  animation:chapter4EscapeGoalParticles .82s ease-in-out infinite alternate
}
.chapter4-escape-goal[data-stage="complete"]{opacity:1;filter:brightness(1.24) saturate(1.1)}
.chapter4-escape-goal[data-stage="complete"]::after{opacity:1}
.chapter4-escape-field.is-goal-flash::after{
  content:"";
  position:absolute;
  inset:-3%;
  z-index:30;
  pointer-events:none;
  background:radial-gradient(
    circle at 84% 57%,
    rgba(255,255,255,1) 0 12%,
    rgba(255,211,238,.98) 24%,
    rgba(255,155,218,.72) 43%,
    rgba(223,229,255,.3) 63%,
    transparent 79%
  );
  animation:chapter4EscapeGoalFlash .43s ease-out both
}

.chapter4-escape-player{
  position:absolute;
  z-index:11;
  left:0;
  bottom:2.2%;
  width:clamp(88px,10vw,122px);
  aspect-ratio:48 / 33;
  height:auto;
  pointer-events:none;

  /* X座標はJSのtranslate3dだけで管理する。
     この要素自身にはCSS animationでtransformを設定しない。 */
  will-change:transform;
  transition:opacity .22s ease
}
.chapter4-escape-player img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  transform-origin:center bottom;
  filter:drop-shadow(0 8px 8px rgba(27,15,58,.38));
  image-rendering:pixelated;
  user-select:none
}
.chapter4-escape-player.dash img{animation:chapter4EscapeBounce .44s linear infinite}
.chapter4-escape-player-bubble{
  position:absolute;
  left:50%;
  bottom:96%;
  width:max-content;
  max-width:220px;
  transform:translate(-50%,-7px) scale(.92);
  padding:6px 9px;
  border:1px solid rgba(255,157,222,.34);
  border-radius:11px;
  color:#412648;
  background:rgba(255,255,255,.94);
  font-size:11px;
  font-weight:800;
  opacity:0;
  box-shadow:0 5px 15px rgba(31,15,35,.20);
  transition:opacity .12s ease,transform .12s ease
}
.chapter4-escape-player-bubble.visible{
  opacity:1;
  transform:translate(-50%,-10px) scale(1)
}

.chapter4-escape-pusen{
  position:absolute;
  z-index:15;
  left:13%;
  top:13%;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 12px;
  border:1px solid rgba(255,122,205,.44);
  border-radius:12px;
  background:rgba(17,12,48,.72);
  color:#fff;
  box-shadow:0 8px 24px rgba(9,5,32,.22);
  backdrop-filter:blur(8px);
  font-size:11px;
  opacity:.92;
  pointer-events:none
}
.chapter4-escape-pusen span{
  color:#ff9bd7;
  font-weight:900
}

.chapter4-escape-poop-layer{
  position:absolute;
  inset:0;
  z-index:14;
  pointer-events:none
}
.chapter4-escape-poop-warning{
  position:absolute;
  bottom:2.2%;
  width:180px;
  height:420px;
  transform:translateX(-50%);
  pointer-events:none
}
.chapter4-escape-poop-warning img{
  position:absolute;
  left:50%;
  display:block;
  object-fit:contain;
  pointer-events:none;
  user-select:none
}
.chapter4-escape-poop-warning .danger-ripple{
  bottom:-42px;
  width:136px;
  height:136px;
  transform:translateX(-50%) scaleY(.30);
  opacity:.56;
  filter:drop-shadow(0 0 10px rgba(255,106,214,.36))
}
.chapter4-escape-poop-warning .danger-ring{
  bottom:-46px;
  width:154px;
  height:154px;
  transform:translateX(-50%) scaleY(.31);
  opacity:0;
  filter:drop-shadow(0 0 16px rgba(102,220,255,.42))
}
.chapter4-escape-poop-warning .danger-alert{
  bottom:42px;
  width:82px;
  height:82px;
  transform:translateX(-50%) scale(.72);
  opacity:0;
  filter:drop-shadow(0 6px 16px rgba(255,69,190,.48))
}
.chapter4-escape-poop-warning .danger-beam{
  bottom:-24px;
  width:132px;
  height:440px;
  transform:translateX(-50%) scaleY(1);
  opacity:0;
  filter:drop-shadow(0 0 22px rgba(112,224,255,.44))
}
.chapter4-escape-poop-warning .danger-impact{
  bottom:-74px;
  width:220px;
  height:220px;
  transform:translateX(-50%) scale(.52);
  opacity:0;
  filter:drop-shadow(0 0 24px rgba(255,95,211,.46))
}

.chapter4-escape-poop-warning[data-stage="ripple"] .danger-ripple{
  animation:chapter4EscapeDangerRipple .48s ease-in-out infinite alternate
}
.chapter4-escape-poop-warning[data-stage="alert"] .danger-ripple{
  opacity:.32
}
.chapter4-escape-poop-warning[data-stage="alert"] .danger-ring{
  opacity:.72;
  animation:chapter4EscapeDangerRing .34s ease-in-out infinite alternate
}
.chapter4-escape-poop-warning[data-stage="alert"] .danger-alert{
  opacity:.94;
  animation:chapter4EscapeDangerAlert .30s ease-in-out infinite alternate
}
.chapter4-escape-poop-warning[data-stage="beam"] .danger-ripple,
.chapter4-escape-poop-warning[data-stage="drop"] .danger-ripple{
  opacity:.20
}
.chapter4-escape-poop-warning[data-stage="beam"] .danger-ring,
.chapter4-escape-poop-warning[data-stage="drop"] .danger-ring{
  opacity:.84;
  animation:chapter4EscapeDangerRing .24s ease-in-out infinite alternate
}
.chapter4-escape-poop-warning[data-stage="beam"] .danger-alert{
  opacity:1;
  animation:chapter4EscapeDangerAlert .20s ease-in-out infinite alternate
}
.chapter4-escape-poop-warning[data-stage="beam"] .danger-beam,
.chapter4-escape-poop-warning[data-stage="drop"] .danger-beam{
  opacity:.74;
  animation:chapter4EscapeDangerBeam .24s ease-in-out infinite alternate
}
.chapter4-escape-poop-warning[data-stage="drop"] .danger-alert{
  opacity:.36
}
.chapter4-escape-poop-warning[data-stage="impact"] .danger-ripple,
.chapter4-escape-poop-warning[data-stage="impact"] .danger-ring,
.chapter4-escape-poop-warning[data-stage="impact"] .danger-alert,
.chapter4-escape-poop-warning[data-stage="impact"] .danger-beam{
  opacity:0;
  transition:opacity .08s ease
}
.chapter4-escape-poop-warning[data-stage="impact"] .danger-impact{
  opacity:.92;
  animation:chapter4EscapeDangerImpact .42s ease-out both
}

.chapter4-escape-poop{
  position:absolute;
  top:-170px;
  width:clamp(74px,6.8vw,96px);
  height:clamp(74px,6.8vw,96px);
  transform:translate(-50%,-50%) scale(.74) rotate(0deg);
  display:grid;
  place-items:center;
  opacity:0;
  filter:drop-shadow(0 10px 14px rgba(30,20,71,.42));
  will-change:top,transform,opacity,filter
}
.chapter4-escape-poop.is-falling{
  opacity:1;
  transform:translate(-50%,-50%) scale(1) rotate(0deg);
  transition:opacity .08s ease,transform .12s ease;
  animation:chapter4EscapePoopDrop .38s linear infinite
}
.chapter4-escape-poop img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none
}
.chapter4-escape-poop-trail{
  position:absolute;
  left:50%;
  top:-210px;
  z-index:1;
  width:26px;
  height:260px;
  transform:translateX(-50%);
  border-radius:999px;
  opacity:0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,198,244,.22) 10%,
      rgba(255,110,214,.52) 42%,
      rgba(113,203,255,.64) 78%,
      rgba(255,255,255,.06) 100%
    );
  filter:
    blur(4px)
    drop-shadow(0 0 10px rgba(255,122,220,.40))
    drop-shadow(0 0 14px rgba(97,214,255,.34));
  pointer-events:none
}
.chapter4-escape-poop.is-falling .chapter4-escape-poop-trail{
  opacity:.92;
  animation:chapter4EscapePoopTrail .20s linear infinite alternate
}
.chapter4-escape-poop.splat .chapter4-escape-poop-trail{
  opacity:0;
  animation:none
}
.chapter4-escape-poop.splat{
  opacity:.96;
  transform:translate(-50%,-42%) scale(1.18,.72) rotate(0deg);
  filter:saturate(1.05) brightness(1.04) drop-shadow(0 5px 8px rgba(37,21,72,.30));
  transition:transform .10s ease;
  animation:none
}

.chapter4-escape-field.is-exhausted .chapter4-escape-current-back{
  opacity:.32;
  animation-duration:1.05s
}
.chapter4-escape-field.is-exhausted .chapter4-escape-current-front{
  opacity:.13;
  animation-duration:.78s
}
.chapter4-escape-field.is-exhausted .chapter4-escape-player img{
  filter:grayscale(.16) brightness(.92) drop-shadow(0 8px 8px rgba(27,15,58,.38));
  animation:chapter4EscapeTired .28s ease infinite alternate
}
.chapter4-escape-field.poop-hit .chapter4-escape-player img{
  animation:chapter4EscapeHit .12s steps(2,end) 4
}
.chapter4-escape-field.is-success .chapter4-escape-goal{
  opacity:1;
  filter:brightness(1.18) saturate(1.08)
}
.chapter4-escape-field.is-failed{
  box-shadow:
    inset 0 0 120px rgba(71,35,154,.58),
    0 18px 50px rgba(0,0,0,.34)
}

.chapter4-escape-bottom{
  width:min(940px,100%);
  margin:0 auto;
  display:grid;
  justify-items:center;
  gap:7px;
  text-align:center
}
.chapter4-escape-status{
  min-height:20px;
  padding:4px 12px;
  border-radius:999px;
  color:rgba(255,255,255,.90);
  background:rgba(9,11,37,.26);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em
}
.chapter4-escape-status[data-kind="danger"]{
  color:#ffd1e2;
  background:rgba(96,26,78,.30)
}
.chapter4-escape-status[data-kind="good"]{
  color:#d8ffe4;
  background:rgba(24,83,75,.28)
}
.chapter4-escape-run-button{
  min-width:min(520px,88vw);
  min-height:70px;
  padding:10px 32px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#fff;
  background:
    linear-gradient(135deg,#ff72b9 0%,#d675e4 48%,#719cff 100%);
  box-shadow:
    0 7px 0 rgba(63,50,130,.66),
    0 12px 30px rgba(42,35,115,.30),
    inset 0 1px 0 rgba(255,255,255,.34);
  font:inherit;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  transition:transform .06s ease,filter .12s ease,opacity .12s ease
}
.chapter4-escape-run-button span{
  font-size:clamp(18px,3vw,27px)
}
.chapter4-escape-run-button small{
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  font-size:11px;
  letter-spacing:.12em
}
.chapter4-escape-run-button:active:not(:disabled){
  transform:translateY(5px);
  box-shadow:
    0 2px 0 rgba(63,50,130,.66),
    0 7px 18px rgba(42,35,115,.24)
}
.chapter4-escape-run-button:disabled{
  cursor:not-allowed;
  filter:grayscale(.42);
  opacity:.62
}
.chapter4-escape-bottom p{
  margin:0;
  color:rgba(232,235,255,.72);
  font-size:11px;
  line-height:1.55
}

.chapter4-escape-start,
.chapter4-escape-result{
  position:absolute;
  z-index:70;
  left:50%;
  top:50%;
  width:min(590px,88vw);
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:28px 32px;
  border:1px solid rgba(159,208,255,.38);
  border-radius:22px;
  color:#fff;
  text-align:center;
  background:
    linear-gradient(145deg,rgba(12,12,40,.95),rgba(25,18,55,.94));
  box-shadow:
    0 18px 55px rgba(0,0,0,.46),
    inset 0 0 28px rgba(190,101,255,.07);
  backdrop-filter:blur(10px)
}
.chapter4-escape-start::before,
.chapter4-escape-result::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,135,215,.18);
  border-radius:16px;
  pointer-events:none
}
.chapter4-escape-start.hidden,
.chapter4-escape-result.hidden{display:none}
.chapter4-escape-start.revealing{
  display:flex;
  animation:chapter4EscapeStartReveal .62s cubic-bezier(.18,.95,.22,1) both
}
.chapter4-escape-start.closing{
  animation:chapter4EscapeStartClose .24s ease both
}
.chapter4-escape-start span,
.chapter4-escape-result span{
  color:#ff8fd1;
  font-size:10px;
  font-weight:900;
  letter-spacing:.24em
}
.chapter4-escape-start strong,
.chapter4-escape-result strong{
  font-size:clamp(21px,3vw,34px)
}
.chapter4-escape-start p,
.chapter4-escape-result p{
  margin:0;
  color:rgba(240,241,255,.80);
  line-height:1.8
}
.chapter4-escape-start-button,
.chapter4-escape-retry{
  min-width:200px;
  margin-top:5px;
  padding:12px 26px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff72ba,#8c80f4);
  box-shadow:0 7px 20px rgba(81,58,170,.30);
  font:inherit;
  font-weight:900;
  cursor:pointer
}

.chapter4-escape-intro{
  position:absolute;
  inset:0;
  z-index:60;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:#000;
  transition:opacity .32s ease,visibility .32s ease
}
.chapter4-escape-intro.is-active{
  opacity:1;
  visibility:visible
}
.chapter4-escape-intro.is-finished{opacity:0}

.chapter4-escape-intro-scene{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 38% 52%,rgba(57,189,255,.12),transparent 32%),
    radial-gradient(circle at 72% 50%,rgba(244,109,193,.06),transparent 29%),
    #000
}
.chapter4-escape-intro-ambient{
  position:absolute;
  left:38%;
  top:52%;
  width:min(92vmin,920px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(91,218,255,.28) 0,
    rgba(112,134,255,.11) 29%,
    rgba(247,114,206,.07) 50%,
    transparent 69%
  );
  opacity:0;
  transform:translate(-50%,-50%) scale(.12);
  filter:blur(18px)
}
.chapter4-escape-intro-vortex{
  position:absolute;
  left:38%;
  top:52%;
  z-index:3;
  width:min(76vmin,760px);
  max-width:72vw;
  height:auto;
  user-select:none;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.05) rotate(0deg);
  filter:
    drop-shadow(0 0 18px rgba(69,211,255,.58))
    drop-shadow(0 0 40px rgba(123,100,255,.28))
}
.chapter4-escape-intro-runner{
  position:absolute;
  left:50%;
  top:55%;
  z-index:5;
  width:min(35vmin,350px);
  max-width:42vw;
  opacity:0;
  transform-origin:50% 62%;
  will-change:transform,opacity,filter
}
.chapter4-escape-intro-runner img{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
  user-select:none;
  pointer-events:none;
  filter:
    drop-shadow(0 8px 9px rgba(0,0,0,.38))
    drop-shadow(0 0 9px rgba(113,207,255,.18))
}
.chapter4-escape-intro-streaks{
  position:absolute;
  inset:-16% -25%;
  z-index:2;
  opacity:0;
  background:
    repeating-linear-gradient(
      174deg,
      transparent 0 34px,
      rgba(103,218,255,.17) 35px 38px,
      transparent 39px 72px
    );
  mask-image:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.08) 80%,transparent);
  transform:translateX(18%) skewX(-10deg)
}
.chapter4-escape-intro-particles{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none
}
.chapter4-escape-intro-particles i{
  position:absolute;
  left:38%;
  top:52%;
  width:clamp(7px,1.05vmin,13px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle at 32% 28%,#fff 0 15%,#83e8ff 30%,rgba(119,154,255,.38) 68%,transparent 72%);
  box-shadow:0 0 11px rgba(108,218,255,.7)
}
.chapter4-escape-intro-particles i:nth-child(1){--px:-28vw;--py:-18vh;--delay:.05s;--s:.8}
.chapter4-escape-intro-particles i:nth-child(2){--px:-17vw;--py:24vh;--delay:.18s;--s:1.2}
.chapter4-escape-intro-particles i:nth-child(3){--px:24vw;--py:-23vh;--delay:.28s;--s:.7}
.chapter4-escape-intro-particles i:nth-child(4){--px:32vw;--py:13vh;--delay:.42s;--s:1.1}
.chapter4-escape-intro-particles i:nth-child(5){--px:-33vw;--py:7vh;--delay:.52s;--s:.6}
.chapter4-escape-intro-particles i:nth-child(6){--px:17vw;--py:26vh;--delay:.65s;--s:.85}
.chapter4-escape-intro-particles i:nth-child(7){--px:7vw;--py:-30vh;--delay:.77s;--s:1.25}
.chapter4-escape-intro-particles i:nth-child(8){--px:-6vw;--py:31vh;--delay:.88s;--s:.72}

.chapter4-escape-intro-point{
  position:absolute;
  left:38%;
  top:52%;
  z-index:7;
  width:12px;
  height:12px;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.2);
  background:#c8f6ff;
  box-shadow:
    0 0 12px #7ee9ff,
    0 0 28px rgba(105,158,255,.9),
    0 0 52px rgba(238,119,213,.55)
}
.chapter4-escape-intro-flash{
  position:absolute;
  inset:0;
  z-index:8;
  opacity:0;
  background:
    radial-gradient(circle at 38% 52%,rgba(255,255,255,.92),rgba(180,224,255,.35) 18%,rgba(245,126,210,.14) 34%,transparent 58%)
}

.chapter4-escape-intro-loading{
  position:absolute;
  left:50%;
  bottom:7%;
  z-index:12;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border:1px solid rgba(129,163,210,.34);
  border-radius:999px;
  background:rgba(0,0,0,.58);
  color:rgba(255,255,255,.86);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  transform:translateX(-50%);
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease,visibility .16s ease
}
.chapter4-escape-intro.is-loading .chapter4-escape-intro-loading{
  opacity:1;
  visibility:visible
}
.chapter4-escape-intro-loading-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#81dfff;
  box-shadow:0 0 10px rgba(129,223,255,.9);
  animation:chapter4EscapeIntroLoadingPulse .8s ease-in-out infinite alternate
}

.chapter4-escape-intro.is-playing .chapter4-escape-intro-ambient{
  animation:chapter4EscapeIntroAmbient 3.25s ease-in-out both
}
.chapter4-escape-intro.is-playing .chapter4-escape-intro-vortex{
  animation:chapter4EscapeIntroVortex 3.25s cubic-bezier(.2,.72,.18,1) both
}
.chapter4-escape-intro.is-playing .chapter4-escape-intro-runner{
  animation:chapter4EscapeIntroRunner 3.25s cubic-bezier(.22,.73,.22,1) both
}
.chapter4-escape-intro.is-playing .chapter4-escape-intro-streaks{
  animation:chapter4EscapeIntroStreaks 3.25s ease-out both
}
.chapter4-escape-intro.is-playing .chapter4-escape-intro-particles i{
  animation:chapter4EscapeIntroParticle 1.42s ease-in var(--delay) 2 both
}
.chapter4-escape-intro.is-playing .chapter4-escape-intro-point{
  animation:chapter4EscapeIntroPoint 3.25s ease both
}
.chapter4-escape-intro.is-playing .chapter4-escape-intro-flash{
  animation:chapter4EscapeIntroFlash 3.25s ease both
}

@keyframes chapter4EscapeIntroLoadingPulse{
  from{opacity:.35;transform:scale(.72)}
  to{opacity:1;transform:scale(1.15)}
}
@keyframes chapter4EscapeIntroAmbient{
  0%,5%{opacity:0;transform:translate(-50%,-50%) scale(.08)}
  19%{opacity:.82;transform:translate(-50%,-50%) scale(.72)}
  48%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  78%{opacity:.82;transform:translate(-50%,-50%) scale(.94)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.04)}
}
@keyframes chapter4EscapeIntroVortex{
  0%,4%{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(0deg)}
  17%{opacity:1;transform:translate(-50%,-50%) scale(.68) rotate(86deg)}
  38%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(226deg)}
  73%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(505deg)}
  86%{opacity:1;transform:translate(-50%,-50%) scale(.84) rotate(630deg)}
  96%{opacity:.96;transform:translate(-50%,-50%) scale(.18) rotate(780deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.018) rotate(830deg)}
}
@keyframes chapter4EscapeIntroRunner{
  0%,8%{
    opacity:0;
    transform:translate(calc(-50% - 38vw),-42%) scale(.68) rotate(0deg);
    filter:blur(1px)
  }
  18%{
    opacity:1;
    transform:translate(calc(-50% - 22vw),-42%) scale(.78) rotate(0deg);
    filter:blur(0)
  }
  38%{
    opacity:1;
    transform:translate(calc(-50% + 12vw),-46%) scale(.86) rotate(0deg);
    filter:blur(0)
  }
  51%{
    opacity:1;
    transform:translate(calc(-50% + 17vw),-48%) scale(.84) rotate(-2deg);
    filter:blur(0)
  }
  64%{
    opacity:1;
    transform:translate(calc(-50% + 8vw),-51%) scale(.76) rotate(-8deg);
    filter:blur(.2px)
  }
  77%{
    opacity:1;
    transform:translate(calc(-50% - 1vw),-53%) scale(.62) rotate(-19deg);
    filter:blur(.45px)
  }
  88%{
    opacity:.98;
    transform:translate(calc(-50% - 8vw),-52%) scale(.40) rotate(-43deg);
    filter:blur(.8px)
  }
  96%{
    opacity:.9;
    transform:translate(calc(-50% - 11vw),-50%) scale(.15) rotate(-96deg);
    filter:blur(1.4px)
  }
  100%{
    opacity:0;
    transform:translate(calc(-50% - 12vw),-50%) scale(.025) rotate(-145deg);
    filter:blur(2px)
  }
}
@keyframes chapter4EscapeIntroStreaks{
  0%,12%{opacity:0;transform:translateX(26%) skewX(-10deg)}
  27%{opacity:.45}
  58%{opacity:.74;transform:translateX(-8%) skewX(-10deg)}
  83%{opacity:.38}
  100%{opacity:0;transform:translateX(-42%) skewX(-10deg)}
}
@keyframes chapter4EscapeIntroParticle{
  0%{
    opacity:0;
    transform:translate(var(--px),var(--py)) scale(var(--s))
  }
  18%{opacity:.92}
  72%{opacity:.72}
  100%{
    opacity:0;
    transform:translate(0,0) scale(.14)
  }
}
@keyframes chapter4EscapeIntroPoint{
  0%,88%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  94%{opacity:1;transform:translate(-50%,-50%) scale(1.7)}
  98%{opacity:1;transform:translate(-50%,-50%) scale(.8)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
}
@keyframes chapter4EscapeIntroFlash{
  0%,86%{opacity:0}
  92%{opacity:.7}
  96%{opacity:.17}
  100%{opacity:0}
}

@media(max-width:760px){
  .chapter4-escape-intro-vortex{
    left:39%;
    width:min(82vmin,620px);
    max-width:84vw
  }
  .chapter4-escape-intro-ambient,
  .chapter4-escape-intro-point{
    left:39%
  }
  .chapter4-escape-intro-flash{
    background:radial-gradient(circle at 39% 52%,rgba(255,255,255,.9),rgba(180,224,255,.30) 19%,rgba(245,126,210,.12) 36%,transparent 60%)
  }
  .chapter4-escape-intro-runner{
    width:min(40vmin,300px);
    max-width:48vw
  }
}

@keyframes chapter4EscapeWaterBack{
  from{transform:translate3d(3.5%,0,0) scale(1.03)}
  to{transform:translate3d(-3.5%,1%,0) scale(1.06)}
}
@keyframes chapter4EscapeWaterFront{
  from{transform:translate3d(4%,1%,0) scale(1.05)}
  to{transform:translate3d(-4%,-1%,0) scale(1.09)}
}
@keyframes chapter4EscapeDangerRipple{
  from{transform:translateX(-50%) scaleY(.25) scale(.88);opacity:.34}
  to{transform:translateX(-50%) scaleY(.34) scale(1.08);opacity:.68}
}
@keyframes chapter4EscapeDangerRing{
  from{transform:translateX(-50%) scaleY(.27) scale(.92);filter:brightness(.95)}
  to{transform:translateX(-50%) scaleY(.34) scale(1.08);filter:brightness(1.22)}
}
@keyframes chapter4EscapeDangerAlert{
  from{transform:translateX(-50%) translateY(3px) scale(.82)}
  to{transform:translateX(-50%) translateY(-3px) scale(1.02)}
}
@keyframes chapter4EscapeDangerBeam{
  from{opacity:.34;transform:translateX(-50%) scaleX(.88) scaleY(.94)}
  to{opacity:.88;transform:translateX(-50%) scaleX(1.10) scaleY(1.03)}
}
@keyframes chapter4EscapePoopDrop{
  0%{
    transform:translate(-50%,-50%) scale(.96) rotate(0deg);
    filter:brightness(1) drop-shadow(0 10px 14px rgba(30,20,71,.42))
  }
  100%{
    transform:translate(-50%,-50%) scale(1.10) rotate(22deg);
    filter:brightness(1.12) drop-shadow(0 16px 18px rgba(30,20,71,.52))
  }
}
@keyframes chapter4EscapePoopTrail{
  from{
    transform:translateX(-50%) scaleY(.86);
    filter:
      blur(4px)
      drop-shadow(0 0 8px rgba(255,122,220,.34))
      drop-shadow(0 0 11px rgba(97,214,255,.28))
  }
  to{
    transform:translateX(-50%) scaleY(1.06);
    filter:
      blur(5px)
      drop-shadow(0 0 14px rgba(255,122,220,.46))
      drop-shadow(0 0 18px rgba(97,214,255,.38))
  }
}
@keyframes chapter4EscapeDangerImpact{
  0%{opacity:0;transform:translateX(-50%) scale(.35)}
  45%{opacity:1;transform:translateX(-50%) scale(1.02)}
  100%{opacity:0;transform:translateX(-50%) scale(1.20)}
}
@keyframes chapter4EscapeBounce{
  0%{transform:translateY(0) scale(1.12,.86)}
  15%{transform:translateY(-10px) scale(.92,1.13)}
  43%{transform:translateY(-23px) scale(1.02,1.04)}
  72%{transform:translateY(-9px) scale(.98,1.05)}
  87%{transform:translateY(0) scale(1.13,.84)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes chapter4EscapeTired{
  from{transform:rotate(-1deg) translateY(0)}
  to{transform:rotate(1deg) translateY(4px)}
}
@keyframes chapter4EscapeHit{
  0%,100%{
    transform:translateX(0) rotate(0deg);
    filter:brightness(1) saturate(1)
  }
  50%{
    transform:translateX(-7px) rotate(-2deg);
    filter:brightness(1.32) saturate(1.48)
  }
}
@keyframes chapter4EscapeGoalPulse{
  from{transform:scale(1);filter:brightness(1.10) saturate(1.06)}
  to{transform:scale(1.018);filter:brightness(1.22) saturate(1.12)}
}
@keyframes chapter4EscapeGoalAura{
  from{opacity:.5;transform:scale(.97)}
  to{opacity:.82;transform:scale(1.045)}
}
@keyframes chapter4EscapeGoalParticles{
  from{opacity:.48;transform:translate3d(0,10px,0) scale(.96)}
  to{opacity:1;transform:translate3d(-5px,-7px,0) scale(1.035)}
}
@keyframes chapter4EscapeGoalFlash{
  0%{opacity:0;transform:scale(.92)}
  22%{opacity:1;transform:scale(1)}
  62%{opacity:.92}
  100%{opacity:0;transform:scale(1.055)}
}
@keyframes chapter4EscapeGoalSuccess{
  from{filter:brightness(1);transform:scaleX(1)}
  to{filter:brightness(1.35);transform:scaleX(1.16)}
}
@keyframes chapter4EscapeHudWarn{
  from{opacity:.70}
  to{opacity:1}
}
@keyframes chapter4EscapeStartReveal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.16);filter:blur(14px)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.04);filter:blur(0)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
}
@keyframes chapter4EscapeStartClose{
  from{opacity:1;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;transform:translate(-50%,-50%) scale(.92)}
}

@media(max-width:760px){
  .chapter4-escape-game{padding:8px;gap:8px}
  .chapter4-escape-back-button{
    left:8px;
    top:8px;
    min-height:38px;
    padding:6px 10px;
    font-size:10px
  }
  .chapter4-escape-header{
    align-items:flex-start;
    gap:8px;
    padding-top:42px
  }
  .chapter4-escape-header>div:first-child{padding-left:0}
  .chapter4-escape-hud{
    min-width:0;
    flex-direction:column;
    align-items:flex-end;
    gap:4px
  }
  .chapter4-escape-meter{
    grid-template-columns:auto 94px;
    padding:4px 6px;
    font-size:9px
  }
  .chapter4-escape-field{
    border-radius:17px;
    background-position:center center
  }
  .chapter4-escape-pusen{
    left:14px;
    top:58px
  }
  .chapter4-escape-player{
    width:96px;
    height:auto
  }
  .chapter4-escape-poop-warning{
    width:146px;
    height:340px
  }
  .chapter4-escape-poop-warning .danger-ripple{
    width:112px;
    height:112px
  }
  .chapter4-escape-poop-warning .danger-ring{
    width:126px;
    height:126px
  }
  .chapter4-escape-poop-warning .danger-alert{
    width:66px;
    height:66px;
    bottom:36px
  }
  .chapter4-escape-poop-warning .danger-beam{
    width:98px;
    height:350px
  }
  .chapter4-escape-poop-warning .danger-impact{
    width:180px;
    height:180px
  }
  .chapter4-escape-poop{
    width:68px;
    height:68px
  }
  .chapter4-escape-run-button{
    min-height:62px;
    padding:8px 20px
  }
  .chapter4-escape-bottom p{font-size:10px}
}

@media(max-height:620px){
  .chapter4-escape-game{
    gap:6px;
    padding:6px 10px
  }
  .chapter4-escape-player{
    width:86px;
    height:auto
  }
  .chapter4-escape-run-button{min-height:52px}
  .chapter4-escape-run-button span{font-size:18px}
  .chapter4-escape-header strong{font-size:18px}
  .chapter4-escape-start{padding:18px 22px}
  .chapter4-escape-poop-warning{
    transform:translateX(-50%) scale(.84);
    transform-origin:center bottom
  }
}

@media(prefers-reduced-motion:reduce){
  .chapter4-happening-noise,
  .chapter4-happening-scanlines,
  .chapter4-happening-cutscene[data-distort="2"]::before,
  .chapter4-happening-cutscene[data-distort="3"]::before,
  .chapter4-happening-tear,
  .chapter4-escape-current,
  .chapter4-escape-poop-warning img,
  .chapter4-escape-player.dash img,
  .chapter4-escape-field.is-exhausted .chapter4-escape-player img,
  .chapter4-escape-start.revealing{
    animation:none
  }
}

/* ------------------------------------------------------------
   Chapter 05: horror room background + hidden mascot clues
------------------------------------------------------------ */
body.chapter5-horror-active::before{
  opacity:1;
  background-image:url("../assets/images/chapter5/chapter5_horror_room.png");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(18px) saturate(.72) brightness(.22);
  transform:scale(1.12);
}
body.chapter5-horror-active::after{
  opacity:1;
  background:linear-gradient(180deg,rgba(2,6,24,.64),rgba(8,11,30,.84) 56%,rgba(15,9,26,.78) 100%);
}
body.chapter5-horror-active #mumu-ambient-frame-layer,
body.chapter5-horror-active #mumu-sparkle-layer{
  display:none!important;
  opacity:0!important;
}
.scene.chapter5-horror-active{
  background:#060916;
}
.scene.chapter5-horror-active::before,
.scene.chapter5-horror-active::after{
  opacity:0!important;
}
.scene.chapter5-horror-active .dream-light{
  display:none;
}
.scene.chapter5-horror-active .character{
  opacity:.42;
}
.scene.chapter5-horror-active .chapter-intro{
  background:rgba(8,9,23,.42);
  color:#f2efff;
}
.scene.chapter5-horror-active .chapter-intro-small,
.scene.chapter5-horror-active .chapter-intro p{
  color:#c1b7ea;
}
.scene.chapter5-horror-active.chapter5-unease .chapter-scene-theme-image{
  animation:chapter5UneaseImage 1.6s cubic-bezier(.24,.72,.28,1) both;
}
.scene.chapter5-horror-active.chapter5-unease .chapter-scene-theme-shade{
  animation:chapter5UneaseShade 1.6s linear both;
}
.scene.chapter5-horror-active.chapter5-unease .chapter5-unease-layer.is-active{
  opacity:1;
}
.scene.chapter5-horror-active.chapter5-unease .chapter5-unease-layer.is-active .chapter5-unease-vignette{
  animation:chapter5UneaseVignette 1.6s ease both;
}
.scene.chapter5-horror-active.chapter5-unease .chapter5-unease-layer.is-active .chapter5-unease-noise{
  animation:chapter5UneaseNoise 1.1s steps(6) both;
}
.scene.chapter5-horror-active.chapter5-unease .chapter5-unease-layer.is-active .chapter5-unease-wisp.wisp-a{
  animation:chapter5UneaseWispA 1.55s cubic-bezier(.22,.72,.22,1) both;
}
.scene.chapter5-horror-active.chapter5-unease .chapter5-unease-layer.is-active .chapter5-unease-wisp.wisp-b{
  animation:chapter5UneaseWispB 1.52s cubic-bezier(.22,.72,.22,1) both;
}
@keyframes chapter5UneaseImage{
  0%,100%{transform:scale(1.01) translate3d(0,0,0);filter:saturate(.82) brightness(.74)}
  13%{transform:scale(1.014) translate3d(-2px,0,0);filter:saturate(.55) brightness(.66) hue-rotate(8deg)}
  18%{transform:scale(1.018) translate3d(4px,-1px,0);filter:saturate(1.06) brightness(.80) hue-rotate(-10deg)}
  24%{transform:scale(1.013) translate3d(-3px,1px,0);filter:saturate(.48) brightness(.61) hue-rotate(14deg)}
  31%{transform:scale(1.012) translate3d(1px,0,0);filter:saturate(.76) brightness(.69)}
  58%{transform:scale(1.015) translate3d(-1px,0,0);filter:saturate(.63) brightness(.64) hue-rotate(5deg)}
  66%{transform:scale(1.011) translate3d(2px,0,0);filter:saturate(.88) brightness(.73) hue-rotate(-4deg)}
}
@keyframes chapter5UneaseShade{
  0%,100%{opacity:1}
  15%{opacity:.68}
  19%{opacity:1}
  23%{opacity:.56}
  29%{opacity:.94}
  57%{opacity:.72}
  62%{opacity:1}
}
@keyframes chapter5UneaseVignette{
  0%,100%{opacity:0}
  12%{opacity:.22}
  24%{opacity:.10}
  42%{opacity:.28}
  62%{opacity:.16}
}
@keyframes chapter5UneaseNoise{
  0%{opacity:0;transform:translate3d(0,0,0)}
  14%{opacity:.44;transform:translate3d(-2px,0,0)}
  28%{opacity:.18;transform:translate3d(1px,-1px,0)}
  46%{opacity:.34;transform:translate3d(2px,0,0)}
  68%{opacity:.08;transform:translate3d(-1px,1px,0)}
  100%{opacity:0;transform:translate3d(0,0,0)}
}
@keyframes chapter5UneaseWispA{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--unease-rotate, -12deg)) scale(.65, .62)}
  16%{opacity:.24;transform:translate(-50%,-50%) rotate(var(--unease-rotate, -12deg)) scale(calc(var(--unease-scale-x, 1) * .92), calc(var(--unease-scale-y, 1) * .92))}
  34%{opacity:.08}
  52%{opacity:.30;transform:translate(-50%,-50%) rotate(var(--unease-rotate, -12deg)) scale(var(--unease-scale-x, 1), var(--unease-scale-y, 1))}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--unease-rotate, -12deg)) scale(calc(var(--unease-scale-x, 1) * 1.08), calc(var(--unease-scale-y, 1) * 1.08))}
}
@keyframes chapter5UneaseWispB{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--unease-rotate, 14deg)) scale(.58, .7)}
  24%{opacity:.14;transform:translate(-50%,-50%) rotate(var(--unease-rotate, 14deg)) scale(calc(var(--unease-scale-x, 1) * .86), calc(var(--unease-scale-y, 1) * .96))}
  40%{opacity:.30}
  62%{opacity:.10}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--unease-rotate, 14deg)) scale(calc(var(--unease-scale-x, 1) * 1.02), calc(var(--unease-scale-y, 1) * 1.12))}
}
.chapter-scene-theme{
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.chapter-scene-theme-image,
.chapter-scene-theme-shade,
.chapter5-unease-layer,
.chapter5-mascot-layer{
  position:absolute;
  inset:0;
}
.chapter-scene-theme-image{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(2,4,20,.18),rgba(2,4,20,.38)),
    url("../assets/images/chapter5/chapter5_horror_room.png") center/cover no-repeat;
  filter:saturate(.82) brightness(.74);
  transform:scale(1.01);
}
.chapter-scene-theme-shade{
  z-index:2;
  background:linear-gradient(180deg,rgba(10,12,31,.10),rgba(7,8,24,.18) 44%,rgba(4,5,15,.42) 100%);
}
.chapter5-unease-layer{
  z-index:5;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}
.chapter5-unease-vignette,
.chapter5-unease-noise,
.chapter5-unease-wisp{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.chapter5-unease-vignette{
  background:radial-gradient(circle at 50% 54%, rgba(11,16,38,0) 0 28%, rgba(6,9,24,.12) 58%, rgba(3,4,13,.34) 100%);
  opacity:0;
}
.chapter5-unease-noise{
  inset:-4%;
  opacity:0;
  mix-blend-mode:screen;
  background:
    linear-gradient(112deg, transparent 0 22%, rgba(162,188,255,.08) 30%, transparent 38%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(131,161,255,.035) 0 1px, transparent 1px 9px);
  filter:blur(.4px);
}
.chapter5-unease-wisp{
  inset:auto;
  left:var(--unease-x, 12%);
  top:var(--unease-y, 14%);
  width:clamp(72px, 11vw, 168px);
  aspect-ratio:1.25 / 1;
  opacity:0;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.72);
  background:
    radial-gradient(circle at 52% 48%, rgba(217,236,255,.34) 0 11%, rgba(167,200,255,.18) 20%, rgba(191,162,255,.14) 34%, rgba(130,168,255,.09) 46%, transparent 72%),
    radial-gradient(circle at 35% 52%, rgba(198,236,255,.18), transparent 60%);
  filter:blur(7px);
}
.chapter5-mascot-layer{
  z-index:6;
  pointer-events:none;
  overflow:visible;
}
.chapter5-mascot-button{
  position:absolute;
  display:block;
  padding:0;
  border:0;
  background:none;
  pointer-events:auto;
  cursor:pointer;
  transform-origin:center;
  filter:brightness(.34) saturate(.38) contrast(.82) blur(.2px) drop-shadow(0 0 4px rgba(255,102,204,.04));
  transition:opacity .85s ease,transform .26s ease,filter .32s ease,clip-path .24s ease;
  isolation:isolate;
}
.chapter5-mascot-button img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
}
.chapter5-mascot-button:hover,
.chapter5-mascot-button:focus-visible{
  opacity:.42!important;
  transform:scale(1.08) translateY(-2px) rotate(-2deg);
  filter:brightness(.94) saturate(1.08) contrast(1.04) blur(0) drop-shadow(0 0 12px rgba(255,125,215,.18)) drop-shadow(0 0 28px rgba(126,112,255,.18));
  outline:none;
}
.chapter5-mascot-button.hover-haunt:hover img,
.chapter5-mascot-button.hover-haunt:focus-visible img{
  animation:chapter5MascotHoverHaunt .78s ease-in-out infinite alternate;
}
.chapter5-mascot-button:hover::after,
.chapter5-mascot-button:focus-visible::after{
  opacity:1;
  transform:scale(1);
}
.chapter5-mascot-button::after{
  content:"";
  position:absolute;
  inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,191,237,.22), rgba(133,118,255,.10) 42%, transparent 72%);
  opacity:0;
  transform:scale(.72);
  transition:opacity .24s ease,transform .3s ease;
  pointer-events:none;
  mix-blend-mode:screen;
}

.chapter5-mascot-button:focus-visible{
  box-shadow:0 0 0 2px rgba(255,255,255,.45);
  border-radius:18px;
}
.chapter5-mascot-button.float-soft{
  animation:chapter5MascotFloatSoft 4.4s ease-in-out infinite alternate;
}
.chapter5-mascot-button.float-slow{
  animation:chapter5MascotFloatSlow 6.8s ease-in-out infinite alternate;
}
.chapter5-mascot-button.pulse-eyes{
  animation:chapter5MascotPulse 3.6s ease-in-out infinite alternate;
}
.chapter5-mascot-button.peek{
  transform-origin:right center;
  animation:chapter5MascotPeek 5.2s ease-in-out infinite;
}
.chapter5-mascot-button.misty{
  filter:brightness(.30) saturate(.38) contrast(.84) blur(.35px) drop-shadow(0 0 4px rgba(255,148,228,.04));
}
.chapter5-mascot-button.low-visibility img,
.chapter5-mascot-button.hover-haunt img{
  opacity:1;
  mix-blend-mode:screen;
}
.chapter5-mascot-button.is-found{
  pointer-events:none;
  animation:chapter5MascotFadeOut 1.85s ease forwards;
}
.chapter5-dialogue-toggle{
  position:absolute;
  top:-32px;
  right:12px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(48px, 5.2vw, 66px);
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  overflow:visible;
  opacity:.46;
  transition:opacity .22s ease,transform .22s ease,filter .22s ease;
}
.chapter5-dialogue-toggle:hover,
.chapter5-dialogue-toggle:focus-visible{
  opacity:.88;
  transform:translateY(-2px) scale(1.04);
}
.chapter5-dialogue-toggle:focus-visible{outline:1px solid rgba(189,225,255,.42); outline-offset:2px; border-radius:999px}
.chapter5-dialogue-toggle .chapter5-dialogue-toggle-image{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(110,180,255,.24));
  animation:chapter5SoulWaver 1.9s ease-in-out infinite alternate;
}
.chapter5-dialogue-toggle[aria-pressed="true"] .chapter5-dialogue-toggle-image{
  filter:drop-shadow(0 0 12px rgba(138,205,255,.30));
}
.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.scene.chapter5-horror-active .dialogue-box{
  color:#f4f0ff;
  background:rgba(9,11,29,.88);
  border-color:rgba(163,139,224,.38);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(5px);
  overflow:visible;
}
.scene.chapter5-horror-active .dialogue-box.chapter5-dialogue-box-hidden{
  left:auto;
  right:4%;
  bottom:3%;
  min-height:0;
  width:auto;
  padding:0;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.scene.chapter5-horror-active .dialogue-box.chapter5-dialogue-box-hidden .speaker,
.scene.chapter5-horror-active .dialogue-box.chapter5-dialogue-box-hidden .dialogue,
.scene.chapter5-horror-active .dialogue-box.chapter5-dialogue-box-hidden .dialogue-next{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.scene.chapter5-horror-active .dialogue-next{color:#a99ccc}
.scene.chapter5-horror-active .dialogue.chapter5-unease-dialogue{
  text-shadow:0 0 10px rgba(167,151,255,.07);
}
.scene.chapter5-horror-active .dialogue .chapter5-unease-word{
  position:relative;
  display:inline-block;
  color:#f7f5ff;
  text-shadow:0 0 10px rgba(255,255,255,.16), 0 0 16px rgba(155,178,255,.18);
  animation:chapter5UneaseWord 1.8s ease-in-out infinite alternate;
}
.scene.chapter5-horror-active .dialogue .chapter5-unease-word::before,
.scene.chapter5-horror-active .dialogue .chapter5-unease-word::after{
  content:"妙な気配";
  position:absolute;
  left:0;
  top:0;
  opacity:.42;
  pointer-events:none;
  mix-blend-mode:screen;
}
.scene.chapter5-horror-active .dialogue .chapter5-unease-word::before{
  color:rgba(160,197,255,.74);
  transform:translate(-1.1px,-.2px);
}
.scene.chapter5-horror-active .dialogue .chapter5-unease-word::after{
  color:rgba(255,176,232,.66);
  transform:translate(1.2px,.1px);
}
.scene.chapter5-horror-active .question-area{
  color:#f4f0ff;
  background:rgba(5,7,22,.78);
  backdrop-filter:blur(4px);
}
.scene.chapter5-horror-active .choice{
  color:#ebe7ff;
  background:rgba(18,19,42,.92);
  border-color:rgba(164,142,224,.42);
}
.scene.chapter5-horror-active .choice:hover{
  background:rgba(29,27,57,.98);
}
.chapter5-jumpscare{
  position:absolute;
  z-index:58;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  background:rgba(0,0,14,.92);
}
.chapter5-jumpscare img,
.chapter5-jumpscare-afterimage{
  position:absolute;
  inset:50% auto auto 50%;
  width:min(112%,1080px);
  max-height:108%;
  object-fit:contain;
  transform:translate(-50%,-50%) scale(.22) rotate(-8deg);
  filter:drop-shadow(0 0 34px rgba(220,145,255,.42));
}
.chapter5-jumpscare img{
  opacity:0;
  z-index:3;
}
.chapter5-jumpscare-afterimage{
  background:url("../assets/images/chapter5/mascot_twinkleghost.png?v=20260906-jumpscare-4") center/contain no-repeat;
  opacity:0;
  z-index:2;
  mix-blend-mode:screen;
}
.chapter5-jumpscare-afterimage.afterimage-a{filter:blur(2px) drop-shadow(0 0 24px rgba(255,86,194,.38))}
.chapter5-jumpscare-afterimage.afterimage-b{filter:blur(5px) drop-shadow(0 0 34px rgba(129,111,255,.32))}
.chapter5-jumpscare-vignette,
.chapter5-jumpscare-flash,
.chapter5-jumpscare-rings,
.chapter5-jumpscare-static,
.chapter5-jumpscare-tear{
  position:absolute;
  inset:0;
  opacity:0;
}
.chapter5-jumpscare-vignette{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), rgba(0,0,0,0) 24%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 38%, rgba(0,0,0,.56) 72%, rgba(0,0,0,.82) 100%);
  z-index:1;
}
.chapter5-jumpscare-flash{
  z-index:4;
  background:
    radial-gradient(circle at 50% 50%, rgba(250,238,255,.96) 0%, rgba(206,152,255,.58) 20%, rgba(73,22,120,.24) 38%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}
.chapter5-jumpscare-rings{
  z-index:1;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 8%, rgba(255,182,236,.16) 9% 10%, transparent 11% 17%, rgba(160,146,255,.13) 18% 19%, transparent 20% 26%, rgba(255,182,236,.10) 27% 28%, transparent 29%);
  transform:scale(.76);
}
.chapter5-jumpscare-static{
  z-index:4;
  mix-blend-mode:screen;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.15) 0 2px, rgba(255,255,255,0) 2px 4px),
    linear-gradient(90deg, rgba(163,98,255,.12), rgba(255,132,208,.12), rgba(163,98,255,.12));
}
.chapter5-jumpscare-tear{
  z-index:2;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,132,208,.18), transparent 42%),
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.18) 49%, rgba(255,255,255,.18) 51%, transparent 52%);
  mix-blend-mode:screen;
}
.chapter5-jumpscare.is-active{opacity:1}
.chapter5-jumpscare.is-active img{animation:chapter5JumpscarePop .88s cubic-bezier(.12,.84,.22,1) both}
.chapter5-jumpscare.is-active .chapter5-jumpscare-afterimage.afterimage-a{animation:chapter5JumpscareAfterA .9s ease both}
.chapter5-jumpscare.is-active .chapter5-jumpscare-afterimage.afterimage-b{animation:chapter5JumpscareAfterB .96s ease both}
.chapter5-jumpscare.is-active .chapter5-jumpscare-flash{animation:chapter5JumpscareFlash .56s ease both}
.chapter5-jumpscare.is-active .chapter5-jumpscare-vignette{animation:chapter5JumpscareVignette .98s ease both}
.chapter5-jumpscare.is-active .chapter5-jumpscare-rings{animation:chapter5JumpscareRings .94s cubic-bezier(.18,.78,.2,1) both}
.chapter5-jumpscare.is-active .chapter5-jumpscare-static{animation:chapter5JumpscareStatic .44s steps(6) both}
.chapter5-jumpscare.is-active .chapter5-jumpscare-tear{animation:chapter5JumpscareTear .9s cubic-bezier(.18,.78,.2,1) both}
.chapter5-jumpscare.is-leaving{transition:opacity .26s ease;opacity:0}
.scene.chapter5-jumpscare-shake{animation:chapter5SceneShake .52s cubic-bezier(.24,.72,.36,1) both}


/* ============================================================
   Chapter 06 — バレンタインクッキング
   仮素材で操作感・判定・会話フローを先に完成させる。
   ============================================================ */
.chapter6-cooking-active{overflow:hidden}
.chapter6-cooking-overlay{
  position:fixed;
  z-index:9600;
  top:0;
  bottom:0;
  left:50%;
  width:min(1180px,100%);
  height:100vh;
  height:100dvh;
  transform:translateX(-50%);
  display:grid;
  grid-template-rows:auto 3px minmax(0,1fr);
  padding:clamp(6px,1.2vw,14px);
  color:#473b52;
  background:transparent;
  font-family:inherit;
  overflow:hidden
}
.chapter6-cooking-bg{
  position:absolute;
  inset:clamp(6px,1.2vw,14px);
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.88) 0 12%,rgba(255,255,255,.34) 24%,transparent 44%),radial-gradient(circle at 14% 16%,rgba(255,210,234,.42),transparent 28%),radial-gradient(circle at 86% 14%,rgba(194,210,255,.24),transparent 24%),linear-gradient(180deg,#f7effb 0%,#ece3f8 48%,#e4daf4 100%);
  border-radius:16px
}
.chapter6-cooking-bg::after{
  content:"";
  position:absolute;
  inset:54px 0 0;
  opacity:.26;
  background-image:url("../assets/images/memory_select_bg.png");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter:saturate(.92) brightness(.98)
}
.chapter6-cooking-header,.chapter6-cooking-progress,.chapter6-cooking-main,.chapter6-cooking-dialogue{position:relative;z-index:1}
.chapter6-cooking-header{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:8px 15px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(190,150,210,.25);
  border-radius:16px 16px 0 0
}
.chapter6-cooking-header>div:first-child{display:flex;align-items:baseline;gap:12px;min-width:0}
.chapter6-cooking-header strong{font-size:clamp(14px,1.8vw,18px);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter6-cooking-kicker{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.12em;color:#b25fc1}
.chapter6-cooking-header-actions{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;justify-content:flex-end}
.chapter6-cooking-header button{min-height:34px;border:1px solid rgba(180,130,195,.35);border-radius:999px;background:rgba(255,255,255,.90);padding:7px 11px;font:800 11px/1 inherit;color:#745b82;cursor:pointer;box-shadow:none;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.chapter6-cooking-header button:hover{transform:translateY(-1px);background:#fff6fc;border-color:rgba(190,100,180,.52)}
.chapter6-cooking-header button:disabled{opacity:.38;cursor:default;transform:none}
.chapter6-cooking-mode.is-on{background:#f6e3ff;color:#8e4b9e;border-color:#d8aedf;box-shadow:inset 0 0 0 1px rgba(218,163,239,.18)}
.chapter6-cooking-progress{height:3px;background:rgba(115,90,143,.10);overflow:hidden}
.chapter6-cooking-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#da73ad,#b872d4);transition:width .45s ease}
.chapter6-cooking-main{
  min-width:0;
  min-height:0;
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.88) 0 12%,rgba(255,255,255,.34) 24%,transparent 44%),radial-gradient(circle at 14% 16%,rgba(255,210,234,.42),transparent 28%),radial-gradient(circle at 86% 14%,rgba(194,210,255,.24),transparent 24%),linear-gradient(180deg,#f7effb 0%,#ece3f8 48%,#e4daf4 100%)
}
.chapter6-cooking-main::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 62%,rgba(255,255,255,.20),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02) 32%,rgba(117,84,158,.14) 100%)}
.chapter6-cooking-phase-card{
  position:absolute;
  z-index:4;
  top:14px;
  left:16px;
  max-width:min(460px,calc(100% - 32px));
  padding:8px 13px 9px;
  border:1px solid rgba(180,130,195,.28);
  border-radius:13px;
  background:rgba(255,255,255,.82);
  box-shadow:0 7px 22px rgba(70,40,90,.08);
  backdrop-filter:blur(8px);
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  gap:2px 9px
}
.chapter6-cooking-phase-number{font-size:10px;font-weight:800;letter-spacing:.13em;color:#c061a5}
.chapter6-cooking-phase-title{font-size:14px;line-height:1.3;color:#594b62}
.chapter6-cooking-phase-hint{grid-column:1/-1;margin:0;color:#9b879f;font-size:10px;line-height:1.45}
.chapter6-cooking-stage{
  position:absolute;
  z-index:2;
  inset:0;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:auto;
  padding:84px clamp(14px,3vw,30px) 24px
}
.chapter6-cooking-overlay:has(.chapter6-cooking-dialogue:not(.hidden)) .chapter6-cooking-stage{padding-bottom:clamp(176px,24vh,205px)}
.chapter6-cooking-dialogue{
  position:absolute;
  z-index:30;
  left:4%;
  right:4%;
  bottom:3%;
  min-height:clamp(118px,20vh,150px);
  padding:clamp(24px,3.5vh,30px) clamp(22px,3vw,32px) 16px;
  cursor:pointer;
  user-select:none;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(170,110,190,.35);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(70,40,90,.12);
  animation:dialogueIn .45s ease both
}
.chapter6-cooking-dialogue.hidden{display:none}
.chapter6-cooking-speaker{
  position:absolute;
  top:-17px;
  left:22px;
  padding:7px 22px;
  color:#fff;
  background:linear-gradient(135deg,#e56aaa,#a96bd0);
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  box-shadow:none
}
.chapter6-cooking-dialogue[data-speaker="mumu"]{border-color:rgba(214,90,154,.48);box-shadow:0 10px 30px rgba(186,76,145,.14)}
.chapter6-cooking-dialogue[data-speaker="narration"]{border-color:rgba(118,107,139,.34);box-shadow:0 10px 30px rgba(72,62,92,.10)}
.chapter6-cooking-dialogue[data-speaker="narration"] .chapter6-cooking-speaker{background:linear-gradient(135deg,#8f879d,#696277)}
.chapter6-cooking-dialogue[data-speaker="listener"]{border-color:rgba(89,151,190,.42);box-shadow:0 10px 30px rgba(69,128,166,.12)}
.chapter6-cooking-dialogue[data-speaker="listener"] .chapter6-cooking-speaker{background:linear-gradient(135deg,#67acd1,#6d83c8)}
.chapter6-cooking-text{min-height:56px;margin:0;white-space:pre-line;font-size:clamp(15px,2vw,19px);font-weight:400;line-height:1.75;letter-spacing:.035em;color:#473b52}
.chapter6-cooking-next{position:absolute;right:18px;bottom:10px;color:#ad92b5;font-size:10px;font-weight:400;letter-spacing:.18em;animation:clickBlink 1.4s ease-in-out infinite}
.chapter6-action-card{width:min(760px,100%);display:grid;gap:14px}.chapter6-action-head{text-align:center}.chapter6-action-head>span,.chapter6-mission>span,.chapter6-checkpoint>span,.chapter6-ingredients>span,.chapter6-final-result>span,.chapter6-bake-reveal>span{font-size:11px;font-weight:1000;letter-spacing:.16em;color:#bf72ae}.chapter6-action-head strong{display:block;margin-top:4px;font-size:clamp(22px,3vw,34px)}.chapter6-action-head p{margin:6px 0 0;color:#887694}.chapter6-action-body{display:grid;place-items:center;gap:12px;min-height:235px}.chapter6-action-confirm,.chapter6-ribbon-button{border:0;border-radius:999px;background:linear-gradient(135deg,#f195ce,#c7b9ff);color:white;padding:12px 26px;font-weight:1000;cursor:pointer;box-shadow:0 12px 25px rgba(176,108,176,.22)}.chapter6-action-confirm:disabled,.chapter6-ribbon-button:disabled{opacity:.35;cursor:default}.chapter6-action-meter{width:min(440px,84%);height:10px;border-radius:999px;background:#eee6f3;overflow:hidden}.chapter6-action-meter>span{display:block;width:0;height:100%;background:linear-gradient(90deg,#f292c9,#b9dff7);transition:width .12s linear}.chapter6-action-readout{margin:0;font-weight:900;color:#765f82}
.chapter6-chocolate-block{position:relative;width:min(360px,72vw);aspect-ratio:23/15;border:0;border-radius:20px;background:transparent;cursor:pointer;box-shadow:none;transition:transform .12s;padding:0}.chapter6-chocolate-block:active{transform:scale(.97) rotate(calc((var(--crush,0) - 4)*.3deg))}.chapter6-chocolate-block-art{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 18px 35px rgba(83,48,49,.22));transition:opacity .08s ease,transform .08s ease}.chapter6-chocolate-block-art.is-changing{opacity:.72;transform:scale(.985)}
.chapter6-action-card:has(.chapter6-cream-measure-work){gap:7px;max-height:100%;align-content:center}
.chapter6-action-card:has(.chapter6-cream-measure-work) .chapter6-action-head>span{font-size:10px}
.chapter6-action-card:has(.chapter6-cream-measure-work) .chapter6-action-head strong{margin-top:2px;font-size:clamp(24px,2.5vw,31px);line-height:1.15}
.chapter6-action-card:has(.chapter6-cream-measure-work) .chapter6-action-head p{margin-top:3px;font-size:14px;line-height:1.35}
.chapter6-action-body:has(.chapter6-cream-measure-work){min-height:auto;gap:6px}
.chapter6-cooking-stage:has(.chapter6-cream-measure-work){padding-top:58px;padding-bottom:10px;overflow:hidden}
.chapter6-action-card:has(.chapter6-knead-state-pad){gap:8px;max-height:100%;align-content:start}
.chapter6-action-body:has(.chapter6-knead-state-pad){min-height:0;gap:7px}
.chapter6-action-card:has(.chapter6-shape-png-work){gap:6px;max-height:100%;align-content:start}
.chapter6-action-body:has(.chapter6-shape-png-work){min-height:0;gap:6px}
.chapter6-cooking-stage:has(.chapter6-shape-png-work){place-items:start center;padding-top:54px;padding-bottom:8px;overflow:hidden}
.chapter6-action-card:has(.chapter6-shape-png-work) .chapter6-action-head>span{font-size:10px}
.chapter6-action-card:has(.chapter6-shape-png-work) .chapter6-action-head strong{margin-top:2px;font-size:clamp(23px,2.6vw,30px);line-height:1.12}
.chapter6-action-card:has(.chapter6-shape-png-work) .chapter6-action-head p{margin-top:3px;font-size:13px;line-height:1.3}
.chapter6-action-card:has(.chapter6-mix-state-pad.truffle),.chapter6-action-card:has(.chapter6-mix-state-pad.pink){gap:10px;max-height:100%;align-content:start}
.chapter6-action-body:has(.chapter6-mix-state-pad.truffle),.chapter6-action-body:has(.chapter6-mix-state-pad.pink){min-height:auto;gap:8px}
.chapter6-action-body:has(.chapter6-mix-state-pad.truffle) .chapter6-action-confirm,.chapter6-action-body:has(.chapter6-mix-state-pad.pink) .chapter6-action-confirm{margin-top:16px}
.chapter6-cooking-stage:has(.chapter6-mix-state-pad.truffle),.chapter6-cooking-stage:has(.chapter6-mix-state-pad.pink){place-items:start center;padding-top:60px;padding-bottom:8px;overflow:hidden}
.chapter6-cream-measure-work{width:min(720px,94vw);display:grid;place-items:center;gap:5px}
.chapter6-cream-measure-work .chapter6-action-readout{font-size:14px;line-height:1.2}
.chapter6-cream-measure-work .chapter6-action-confirm{padding:10px 22px}

.chapter6-cream-display{width:min(700px,100%);display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;justify-items:center;gap:10px}
.chapter6-cream-scene{width:min(540px,100%);display:grid;place-items:center}
.chapter6-cream-scene-art{width:min(540px,100%);max-height:min(30vh,238px);height:auto;display:block;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 10px 18px rgba(112,77,126,.09))}
.chapter6-cream-gauge-panel{display:grid;justify-items:center;gap:5px;align-self:center;padding:0}
.chapter6-cream-gauge{--gauge-bottom:16px;--gauge-range:190px;position:relative;width:104px;height:224px}
.chapter6-cream-gauge-fill{position:absolute;z-index:1;left:32px;bottom:var(--gauge-bottom);width:18px;height:0;border-radius:999px;background:linear-gradient(180deg,#fffef8 0%,#FFFFF0 42%,#f1ead8 100%);box-shadow:inset 0 2px 4px rgba(255,255,255,.72),0 2px 8px rgba(214,190,156,.18);transition:height .055s linear}
.chapter6-cream-gauge-axis{position:absolute;z-index:2;left:39px;top:18px;bottom:var(--gauge-bottom);width:4px;border-radius:999px;background:linear-gradient(180deg,#f2b7d3,#e67aaa)}
.chapter6-cream-gauge-target{position:absolute;z-index:3;left:39px;bottom:calc(var(--gauge-bottom) + (66 * var(--gauge-range) / 100));width:72px;height:0}
.chapter6-cream-gauge-target::before{content:"";position:absolute;left:0;top:0;width:34px;border-top:2px dashed rgba(221,104,165,.62)}
.chapter6-cream-gauge-target span{position:absolute;left:44px;top:-10px;font-size:12px;font-weight:1000;line-height:1;color:#c478aa;white-space:nowrap}
.chapter6-cream-gauge-mark{position:absolute;z-index:3;left:39px;bottom:calc(var(--gauge-bottom) + (var(--level) * var(--gauge-range) / 100));display:block;width:72px;height:0;margin:0;color:#df6298;font-size:14px;font-weight:1000;line-height:1}
.chapter6-cream-gauge-mark::before{content:"";position:absolute;left:0;top:0;width:32px;border-top:3px solid #e26f9f}
.chapter6-cream-gauge-mark span{position:absolute;left:42px;top:-9px;white-space:nowrap;background:transparent}
.chapter6-cream-value{display:flex;align-items:baseline;justify-content:center;gap:5px;color:#755c80;min-height:32px;flex-wrap:wrap}
.chapter6-cream-value strong{font-size:30px;line-height:1;color:#6b5278;font-variant-numeric:tabular-nums}
.chapter6-cream-value>span{font-size:13px;font-weight:1000}.chapter6-cream-value small{display:block;width:100%;margin-left:0;text-align:center;font-size:10px;font-weight:900;color:#c478aa}
.chapter6-pour-button,.chapter6-oil-spoon{border:1px solid #dfcae9;border-radius:16px;background:#fff;padding:11px 22px;font-weight:900;color:#745c80;cursor:pointer}.chapter6-pour-button:active{background:#f9eefa}.chapter6-pour-button:disabled{opacity:.45;cursor:default}
.chapter6-choice-cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.chapter6-choice-cards.compact{gap:12px}.chapter6-choice-cards.compact button{width:165px;min-height:118px;padding:12px}.chapter6-choice-cards.compact button>span{font-size:38px}.chapter6-choice-cards button{width:190px;min-height:150px;border:1px solid rgba(144,103,167,.18);border-radius:24px;background:rgba(255,255,255,.88);display:grid;place-items:center;gap:4px;padding:18px;color:#6f587d;cursor:pointer;box-shadow:0 14px 28px rgba(87,64,108,.09)}.chapter6-choice-cards button:hover{transform:translateY(-3px);box-shadow:0 18px 32px rgba(87,64,108,.15)}.chapter6-choice-cards button>span{font-size:48px}.chapter6-choice-cards small{color:#9b88a4}
.chapter6-action-card:has(.chapter6-cooling-layout){width:min(1040px,100%);gap:10px;align-content:start}
.chapter6-action-body:has(.chapter6-cooling-layout){width:100%;min-height:0;gap:0}
.chapter6-cooking-stage:has(.chapter6-cooling-layout){place-items:start center;overflow:hidden;padding:112px clamp(18px,2vw,26px) 18px}
.chapter6-cooling-layout{width:min(960px,100%);display:grid;grid-template-columns:minmax(190px,250px) minmax(290px,360px) minmax(190px,250px);align-items:center;justify-content:center;gap:clamp(20px,2.4vw,34px);margin:0 auto}
.chapter6-cooling-center{position:relative;min-width:0;height:min(238px,29vh);display:grid;place-items:center;pointer-events:none}
.chapter6-cooling-scene{width:100%;height:100%;display:grid;place-items:center}
.chapter6-cooling-scene img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(102,64,91,.11));user-select:none;-webkit-user-drag:none}
.chapter6-cooling-choice{min-width:0;min-height:204px;padding:12px 15px 14px;border:1px solid rgba(185,128,184,.22);border-radius:26px;background:rgba(255,255,255,.88);color:#6f587d;cursor:pointer;display:grid;grid-template-rows:minmax(0,140px) auto;place-items:center;gap:4px;box-shadow:0 14px 28px rgba(87,64,108,.09);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.chapter6-cooling-choice:hover,.chapter6-cooling-choice:focus-visible{transform:translateY(-4px);border-color:rgba(206,99,169,.5);background:rgba(255,253,255,.97);box-shadow:0 18px 34px rgba(87,64,108,.14);outline:none}
.chapter6-cooling-choice:active{transform:translateY(-1px) scale(.985)}
.chapter6-cooling-choice:disabled{cursor:default;opacity:.58;transform:none}
.chapter6-cooling-choice>img{display:block;width:min(160px,86%);height:138px;object-fit:contain;filter:drop-shadow(0 9px 13px rgba(96,61,89,.12));pointer-events:none;user-select:none;-webkit-user-drag:none;transition:transform .18s ease}
.chapter6-cooling-choice:hover>img,.chapter6-cooling-choice:focus-visible>img{transform:scale(1.045)}
.chapter6-cooling-choice-copy{display:grid;place-items:center;gap:2px}
.chapter6-cooling-choice-copy strong{font-size:18px;line-height:1.3;color:#71577f}
.chapter6-cooling-choice-copy small{font-size:12px;line-height:1.35;color:#9b88a4}
.chapter6-cooling-point-hand{position:absolute;z-index:5;top:50%;width:clamp(76px,6.6vw,102px);height:auto;opacity:0;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 6px 9px rgba(114,76,103,.14));transition:opacity .14s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
.chapter6-cooling-point-hand-left{left:-12px;transform:translate(-82%,-50%) translateX(10px) scale(.92)}
.chapter6-cooling-point-hand-right{right:-12px;transform:translate(82%,-50%) translateX(-10px) scale(.92)}
.chapter6-cooling-layout:has(.chapter6-cooling-choice-fridge:is(:hover,:focus-visible)) .chapter6-cooling-point-hand-left{opacity:1;transform:translate(-82%,-50%) translateX(0) scale(1)}
.chapter6-cooling-layout:has(.chapter6-cooling-choice-fan:is(:hover,:focus-visible)) .chapter6-cooling-point-hand-right{opacity:1;transform:translate(82%,-50%) translateX(0) scale(1)}

.chapter6-count{font-size:34px;color:#795e84}
.chapter6-action-card:has(.chapter6-flour-work){width:min(840px,100%);gap:8px;max-height:100%;align-content:start}
.chapter6-action-body:has(.chapter6-flour-work){min-height:0;gap:8px}
.chapter6-cooking-stage:has(.chapter6-flour-work){place-items:start center;padding-top:58px;padding-bottom:10px;overflow:hidden}
.chapter6-mini-donut{width:64px!important;height:64px;border-radius:50%;background:radial-gradient(circle,transparent 0 24%,#efabc5 26% 70%,#df8fb1 72%)}.chapter6-mini-heart{color:#ef7fb4;font-size:72px!important;line-height:.7}
.chapter6-shape-choice-cards button{grid-template-rows:minmax(0,118px) auto;align-items:center}
.chapter6-shape-choice-image{display:block;width:118px;height:118px;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 7px 10px rgba(115,72,102,.11));transition:transform .18s ease}
.chapter6-shape-choice-cards button:hover .chapter6-shape-choice-image,.chapter6-shape-choice-cards button:focus-visible .chapter6-shape-choice-image{transform:scale(1.045)}

.chapter6-oven{width:300px;border-radius:24px;background:#65606c;color:white;padding:18px;text-align:center;box-shadow:inset 0 0 0 8px #514c57,0 20px 35px rgba(59,53,64,.2)}.chapter6-oven>div{font-size:16px;font-weight:1000;color:#f2c5dd}.chapter6-oven strong{display:block;font:900 38px/1 monospace;margin:10px}.chapter6-oven .chapter6-fixed-timer{font-size:32px;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em}.chapter6-oven span{font-size:10px;letter-spacing:.18em}

.chapter6-blackout-transition{position:absolute;inset:0;z-index:30;background:#050309;opacity:0;pointer-events:none;transition:opacity .58s ease}.chapter6-blackout-transition.is-on{opacity:1}.chapter6-mission strong br{display:block}
.chapter6-mission,.chapter6-checkpoint,.chapter6-ingredients{display:grid;place-items:center;text-align:center;gap:12px}.chapter6-mission strong{white-space:normal;font-size:clamp(24px,3.75vw,46px);max-width:1040px;line-height:1.28;background:linear-gradient(90deg,#ce78b7,#927dcc,#68a8cc);-webkit-background-clip:text;color:transparent}.chapter6-mission i{width:120px;height:2px;background:linear-gradient(90deg,transparent,#ca89bd,transparent)}.chapter6-checkpoint strong{font-size:clamp(34px,6vw,72px);color:#9a6da2}.chapter6-ingredients>div{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.chapter6-ingredients b{width:130px;min-height:142px;padding:12px;border-radius:20px;background:#fff;border:1px solid #ead8ef;color:#765f81;box-shadow:0 8px 20px rgba(94,69,111,.08);display:grid;grid-template-rows:1fr auto;place-items:center;gap:8px}.chapter6-ingredients b em{font-style:normal;font-size:12px;line-height:1.35}.chapter6-ingredients .ingredient-placeholder{display:block;width:78px;height:78px;border-radius:22px;background:linear-gradient(145deg,#f8e9f5,#e7def8);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}.chapter6-ingredients .ingredient-0{border-radius:16px;background:linear-gradient(145deg,#fffdf8,#e9e3dd)}.chapter6-ingredients .ingredient-1{border-radius:50% 50% 22% 22%;background:linear-gradient(180deg,#fff6a9,#e8c85b)}.chapter6-ingredients .ingredient-2{background:linear-gradient(145deg,#f4b2d0,#e884b3)}.chapter6-ingredients .ingredient-3{background:linear-gradient(145deg,#fff8e8,#f0d9b2)}.chapter6-ingredients .ingredient-4{border-radius:14px 14px 28px 28px;background:linear-gradient(180deg,#fff,#e9f0f7)}
.chapter6-pack-area{display:grid;grid-template-columns:180px 320px;gap:28px;align-items:center}.chapter6-pack-items{display:grid;gap:12px}.chapter6-pack-items button{border:1px solid #e0cde8;border-radius:15px;background:#fff;padding:10px;font-weight:900;color:#725c7f;cursor:pointer;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:8px;text-align:left}.chapter6-pack-items button>span{font-size:28px}.chapter6-pack-items button small{font-size:11px;color:#9c87a5}.chapter6-pack-items button:disabled{opacity:.35;cursor:default}.chapter6-gift-box{width:320px;height:220px;border-radius:24px;background:transparent;border:0;display:grid;place-items:center;text-align:center;position:relative;box-shadow:none}.chapter6-gift-box span{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;font-size:11px;line-height:1.4;font-weight:1000;color:#b46a9c;background:rgba(255,255,255,.82);padding:4px 9px;border-radius:999px;white-space:nowrap}.chapter6-gift-box.has-ribbon{filter:drop-shadow(0 18px 22px rgba(110,70,102,.16))}
.chapter6-gift-box.has-ribbon .chapter6-box-food{opacity:0;transition:opacity .2s ease}
.chapter6-bake-reveal,.chapter6-final-result{display:grid;place-items:center;text-align:center;gap:12px}.chapter6-bake-reveal strong,.chapter6-final-result strong{font-size:clamp(23px,3.5vw,42px);color:#785d83}.chapter6-final-result p{margin:0;color:#887491}.chapter6-final-result>button{margin-top:6px;border:0;border-radius:999px;padding:13px 26px;background:linear-gradient(135deg,#f092cc,#bca9f7);color:white;font-weight:1000;cursor:pointer}.chapter6-fork-check{border:1px solid #e3d2eb;border-radius:24px;background:#fff;padding:26px 40px;display:grid;place-items:center;gap:6px;color:#735f7d;cursor:pointer;box-shadow:0 16px 30px rgba(90,65,108,.1)}.chapter6-fork-check span{font-size:50px}.chapter6-fork-check.is-checked{transform:translateY(12px) rotate(-3deg)}

.chapter6-player-continue{border:0;border-radius:999px;background:linear-gradient(135deg,#f092cc,#bca9f7);color:#fff;padding:12px 24px;font-weight:1000;cursor:pointer;box-shadow:0 12px 24px rgba(176,108,176,.22)}
.chapter6-good-meter{position:relative;overflow:visible}.chapter6-good-zone{position:absolute;z-index:1;left:var(--good-start);width:var(--good-width);top:-5px;height:20px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 0 11px rgba(255,255,255,.95),0 0 20px rgba(239,128,185,.75);pointer-events:none}.chapter6-good-zone b{position:absolute;right:50%;top:-25px;transform:translateX(50%);font-size:19px;color:#ef78b7;text-shadow:0 0 10px #fff}.chapter6-good-meter>span{position:relative;z-index:2}
.chapter6-custom-cursor-zone{position:relative;cursor:none!important}.chapter6-custom-cursor-zone *{cursor:none!important}.chapter6-proto-cursor{position:absolute;z-index:50;left:0;top:0;width:74px;height:74px;transform:translate(-50%,-50%) scale(.88);pointer-events:none;opacity:0;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 4px 5px rgba(74,47,74,.18));transition:opacity .08s,transform .08s}.chapter6-proto-cursor.visible{opacity:1}.chapter6-proto-cursor.active{transform:translate(-50%,-50%) scale(.78)}.chapter6-proto-cursor.knead-hand{width:112px;height:112px;transform:translate(-50%,-28%) scale(.9);filter:drop-shadow(0 6px 7px rgba(74,47,74,.16))}.chapter6-proto-cursor.knead-hand.active{transform:translate(-50%,-28%) scale(.82)}.chapter6-crush-zone{display:grid;place-items:center;width:310px;height:210px}
.chapter6-dnd-scale{display:grid;grid-template-columns:minmax(250px,1fr) 300px;gap:22px;align-items:center;width:min(730px,94vw)}
.chapter6-piece-tray{min-height:185px;border:2px dashed #e5cbe5;border-radius:24px;background:rgba(255,255,255,.72);padding:14px;display:flex;gap:10px;align-content:flex-start;align-items:center;justify-content:center;flex-wrap:wrap}
.chapter6-dnd-scale.strawberry-dnd,.chapter6-dnd-scale.tofu-dnd{grid-template-columns:minmax(300px,1fr) 385px;width:min(790px,94vw);gap:18px}
.chapter6-piece-tray.strawberry-piece-tray,.chapter6-piece-tray.tofu-piece-tray{min-height:180px;border:0;border-radius:0;background:transparent;padding:18px 8px;box-shadow:none;align-content:center}
.chapter6-strawberry-scale-area,.chapter6-tofu-scale-area{display:grid;grid-template-columns:300px 72px;align-items:center;justify-content:center;gap:10px}
.chapter6-scale-bowl-wrap{display:grid;place-items:center;gap:8px}
.chapter6-scale-bowl-wrap.strawberry-scale-bowl-wrap,.chapter6-scale-bowl-wrap.tofu-scale-bowl-wrap{gap:2px}
.chapter6-drop-bowl.scale-top-bowl.strawberry-scale-bowl,.chapter6-drop-bowl.scale-top-bowl.tofu-scale-bowl{position:relative;width:300px;height:160px;min-height:0;margin-bottom:-8px;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;padding:0;display:block;overflow:visible}
.chapter6-drop-bowl.scale-top-bowl.strawberry-scale-bowl>img,.chapter6-drop-bowl.scale-top-bowl.tofu-scale-bowl>img{position:absolute;z-index:0;inset:-30px -34px -18px;width:calc(100% + 68px);height:calc(100% + 48px);object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(86,65,102,.11))}
.chapter6-drop-bowl.scale-top-bowl.strawberry-scale-bowl.is-good>img,.chapter6-drop-bowl.scale-top-bowl.tofu-scale-bowl.is-good>img{filter:drop-shadow(0 0 11px rgba(239,124,184,.5)) drop-shadow(0 10px 14px rgba(86,65,102,.11))}
.chapter6-bowl-piece-layer{position:absolute;z-index:1;left:15%;right:16%;top:20%;bottom:25%;overflow:hidden;border-radius:50%;pointer-events:none}
.chapter6-bowl-piece-layer .chapter6-choco-piece.is-in-bowl,.chapter6-bowl-piece-layer .chapter6-tofu-piece.is-in-bowl{position:absolute;pointer-events:none;cursor:default;flex:none;margin:0;transform:translate(-50%,-50%) rotate(var(--bowl-rot,0deg));filter:none}
.chapter6-bowl-piece-layer .chapter6-choco-piece.is-in-bowl img,.chapter6-bowl-piece-layer .chapter6-tofu-piece.is-in-bowl img{width:100%;height:100%;object-fit:contain;display:block}
.chapter6-scale.strawberry-scale,.chapter6-scale.tofu-scale{width:205px;padding:16px 15px 13px;border-radius:18px}
.chapter6-scale.strawberry-scale strong,.chapter6-scale.tofu-scale strong{font-size:34px;margin:5px 0;padding:8px}
.chapter6-strawberry-undo,.chapter6-tofu-undo{border:1px solid #dfcae9;border-radius:999px;background:rgba(255,255,255,.94);color:#765f82;padding:10px 12px;font-weight:1000;white-space:nowrap;cursor:pointer;box-shadow:0 8px 18px rgba(111,76,123,.1)}
.chapter6-strawberry-undo:hover:not(:disabled),.chapter6-tofu-undo:hover:not(:disabled){transform:translateY(-1px);background:#fff}
.chapter6-strawberry-undo:disabled,.chapter6-tofu-undo:disabled{opacity:.35;cursor:default}
.chapter6-drop-bowl{width:250px;min-height:112px;border-radius:18px 18px 48% 48%;background:linear-gradient(180deg,#f9eef8,#ddc5df);box-shadow:inset 0 14px 22px rgba(255,255,255,.7),0 10px 22px rgba(86,65,102,.13);padding:12px;display:flex;gap:7px;flex-wrap:wrap;align-content:center;justify-content:center;transition:.2s;position:relative;z-index:2}
.chapter6-drop-bowl.is-good{box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 24px rgba(239,124,184,.75),inset 0 14px 22px rgba(255,255,255,.7)}
.chapter6-drop-bowl>span{width:100%;font-size:11px;color:#9f8ca9}
.chapter6-scale{width:250px;border-radius:20px;background:#e9edf0;padding:22px 22px 18px;text-align:center;box-shadow:inset 0 -6px 0 rgba(107,120,135,.10),0 14px 26px rgba(78,78,98,.12)}
.chapter6-scale span{display:block;font-size:10px;font-weight:1000;letter-spacing:.12em;color:#7d8590}
.chapter6-scale strong{display:block;margin:7px 0;font:900 38px/1 monospace;color:#4b5864;background:#cfe2d4;border-radius:10px;padding:10px}
.chapter6-scale small{color:#7e7586;font-size:11px}
.chapter6-choco-piece,.chapter6-tofu-piece{width:var(--piece-size,48px);height:calc(var(--piece-size,48px)*.72);border:0;background:transparent!important;cursor:grab;box-shadow:none;transform:rotate(var(--piece-rot,-4deg));flex:0 0 auto;padding:0}
.chapter6-choco-piece{border-radius:8px}
.chapter6-piece-tray.strawberry-piece-tray .chapter6-choco-piece{transition:transform .12s ease}
.chapter6-piece-tray.strawberry-piece-tray .chapter6-choco-piece:hover{transform:rotate(var(--piece-rot,-4deg)) translateY(-3px) scale(1.04)}
.chapter6-tofu-piece{height:calc(var(--piece-size,48px)*var(--piece-scale-y,.85));border-radius:10px}
.chapter6-tare-button{border:1px solid #d8c7e1;border-radius:12px;background:#fff;padding:8px 13px;color:#705c7a;font-weight:900}
.chapter6-side-bubble{position:fixed;z-index:10020;right:18px;top:50%;max-width:360px;padding:12px 16px;border-radius:18px 18px 4px 18px;background:#fff;border:2px solid #f1bad8;color:#6f5679;font-weight:900;box-shadow:0 16px 30px rgba(89,60,96,.17);transform:translateX(120%) translateY(-50%);transition:transform .28s ease;font-size:14px}
.chapter6-side-bubble.one-line{white-space:nowrap;max-width:none}
.chapter6-side-bubble.show{transform:translateX(0) translateY(-50%)}
.chapter6-action-card:has(.chapter6-oil-layout){gap:9px;max-height:100%;align-content:start}
.chapter6-action-body:has(.chapter6-oil-layout){min-height:auto;gap:8px}
.chapter6-cooking-stage:has(.chapter6-oil-layout){place-items:start center;padding-top:62px;padding-bottom:12px;overflow:hidden}
.chapter6-oil-layout{display:grid;grid-template-columns:148px minmax(300px,360px) 224px;align-items:center;justify-content:center;gap:18px;width:min(790px,94vw);min-height:300px}
.chapter6-oil-bottle-wrap{display:grid;place-items:center;gap:5px;align-self:center}.chapter6-oil-bottle-wrap strong{font-size:13px;color:#765f82}
.chapter6-oil-bottle-img{width:144px;height:228px;object-fit:contain;display:block;filter:drop-shadow(0 10px 13px rgba(94,72,52,.13))}
.chapter6-oil-bowl-wrap{position:relative;width:330px;height:214px;display:grid;place-items:center;justify-self:center;overflow:visible}
.chapter6-oil-bowl-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(95,61,86,.12))}
.chapter6-oil-ripple{position:absolute;z-index:3;left:60%;top:38%;width:22px;height:22px;border:3px solid rgba(255,244,190,.9);border-radius:50%;opacity:0;pointer-events:none}
.chapter6-oil-bowl-wrap.oil-drop .chapter6-oil-ripple{animation:chapter6OilRipple .5s ease}
.chapter6-oil-spoons{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;justify-items:center;gap:8px;width:224px;min-height:210px}
.chapter6-oil-spoon{position:relative;z-index:6;display:grid;place-items:center;align-content:end;gap:2px;width:106px;min-width:0;height:204px;border:0;background:transparent;padding:0;color:#745c80;font-weight:900;cursor:pointer;overflow:visible}
.chapter6-oil-spoon:hover .chapter6-spoon-visual:not(.pouring){transform:translateY(-2px)}
.chapter6-oil-spoon .chapter6-spoon-visual{position:relative;z-index:8;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(0 7px 8px rgba(89,61,100,.12));transform-origin:50% 52%;will-change:transform}
.chapter6-oil-spoon .chapter6-spoon-visual.pouring{z-index:20;animation:chapter6SpoonPour .64s cubic-bezier(.2,.72,.2,1)}
.chapter6-oil-spoon.tbsp .chapter6-spoon-visual{width:112px;height:140px}
.chapter6-oil-spoon.tsp .chapter6-spoon-visual{width:80px;height:104px}
.chapter6-oil-spoon strong{font-size:13px;line-height:1.15}.chapter6-oil-spoon small{font-size:9px;color:#a08ca8;white-space:nowrap}
.chapter6-oil-count{font-size:13px}
@keyframes chapter6SpoonPour{0%{transform:translate(0,0) rotate(0)}52%{transform:translate(var(--pour-dx),var(--pour-dy)) rotate(var(--pour-rot))}72%{transform:translate(var(--pour-dx),var(--pour-dy)) rotate(var(--pour-rot))}100%{transform:translate(0,0) rotate(0)}}
@keyframes chapter6OilRipple{0%{opacity:.95;transform:translate(-50%,-50%) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}
.chapter6-flour-work{position:relative;width:min(720px,94vw);height:min(305px,36vh);display:grid;grid-template-columns:minmax(140px,180px) minmax(330px,430px);align-items:center;justify-content:center;gap:26px;overflow:visible}
.chapter6-flour-bag-slot{position:relative;z-index:8;width:180px;height:245px;display:grid;place-items:center;overflow:visible}
.chapter6-flour-bag-art{position:relative;z-index:9;width:160px;height:220px;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 12px 16px rgba(98,68,91,.12));transform:translate(0,0);transition:transform .42s cubic-bezier(.2,.74,.22,1),filter .16s ease;will-change:transform}
.chapter6-flour-bag-art.is-at-bowl{transform:translate(var(--pour-dx,0),var(--pour-dy,0));filter:drop-shadow(0 15px 20px rgba(98,68,91,.16))}
.chapter6-flour-bag-art.is-pouring{filter:drop-shadow(0 17px 22px rgba(98,68,91,.18))}
.chapter6-flour-bowl-pad{position:relative;width:min(430px,52vw);height:min(300px,35vh);display:grid;place-items:center;touch-action:none;overflow:visible;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.chapter6-flour-bowl-art{position:absolute;left:50%;top:50%;width:94.5%;height:auto;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(95,61,86,.12));pointer-events:none;user-select:none;-webkit-user-drag:none;transform:translate(-50%,-50%);transform-origin:50% 50%;transition:opacity .12s ease}.chapter6-flour-bowl-pad .chapter6-flour-bowl-art.is-changing{opacity:.76;transform:translate(-50%,-50%)}
.chapter6-flour-bowl-pad:not(.is-mix-ready) .chapter6-mix-orbit{opacity:0}
.chapter6-flour-bowl-pad.is-mix-ready,.chapter6-flour-bowl-pad.is-mix-ready *{cursor:none!important;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.chapter6-flour-bowl-pad.is-mixing .chapter6-mix-orbit{opacity:.55}
.chapter6-flour-controls{position:relative;z-index:20;width:min(620px,92%);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pour pour" "meter confirm" "readout confirm";column-gap:16px;row-gap:6px;align-items:center;justify-content:center}
.chapter6-flour-pour-button{grid-area:pour;justify-self:center;border:1px solid #dfcae9;border-radius:999px;background:rgba(255,255,255,.94);padding:10px 22px;font-weight:1000;color:#765f82;cursor:pointer;box-shadow:0 8px 18px rgba(111,76,123,.10)}
.chapter6-flour-pour-button:hover:not(:disabled){transform:translateY(-1px);background:#fff}
.chapter6-flour-pour-button:disabled{opacity:.48;cursor:default;transform:none}
.chapter6-flour-mix-ui{grid-area:meter;width:100%;display:grid;place-items:center;margin:0}
.chapter6-flour-mix-ui[hidden]{display:none}
.chapter6-flour-mix-ui .chapter6-action-meter{width:100%}
.chapter6-flour-controls .chapter6-action-readout{grid-area:readout;justify-self:center}
.chapter6-flour-controls .chapter6-action-confirm{grid-area:confirm;align-self:center;justify-self:start;margin:0;white-space:nowrap}
.chapter6-shape-work{display:grid;place-items:center;gap:18px;width:min(760px,95vw)}
.chapter6-timer-dial{position:relative!important;margin:10px auto;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#69626f 0 42%,#4e4953 43% 61%,#7a737e 62%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.08)}.chapter6-timer-dial i{position:absolute;left:50%;top:15px;width:4px;height:60px;background:#f5b7d6;border-radius:4px;transform-origin:50% 60px;transition:transform .07s linear}.chapter6-timer-dial b{position:absolute;font-size:12px;color:#fff}.chapter6-timer-dial b:nth-of-type(1){left:14px;top:64px}.chapter6-timer-dial b:nth-of-type(2){left:67px;top:12px}.chapter6-timer-dial b:nth-of-type(3){right:13px;top:64px}.chapter6-dial-hold{border:1px solid #dbc8e5;border-radius:999px;background:#fff;padding:12px 20px;font-weight:900;color:#715d7b}
.chapter6-decoration-table{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:center;width:min(720px,94vw);position:relative;min-height:250px}
.chapter6-topping-piles{display:grid;gap:8px}
.chapter6-topping-piles button{display:grid;grid-template-columns:44px 1fr;align-items:center;text-align:left;gap:8px;border:1px solid #e1d0e8;border-radius:14px;background:#fff;padding:7px 10px;color:#755f7e;font-weight:900}
.chapter6-topping-piles button i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#f4a5ca,#d7b6f6)}
.chapter6-topping-piles .top-choco{background:#70403d}.chapter6-topping-piles .top-crunch{background:#d5a66d}.chapter6-topping-piles .top-spray{background:linear-gradient(90deg,#89bfe6 0 33%,#f29dc7 34% 66%,#f4d36d 67%)}.chapter6-topping-piles .top-sugar{background:#fff;box-shadow:0 0 8px #fff}.chapter6-topping-piles .top-pen{background:linear-gradient(90deg,#fff 0 48%,#f292c9 49%)}
.chapter6-decoration-preview{width:360px;height:240px;display:grid;place-items:center;position:relative;perspective:700px}
.chapter6-preview-donut.dimensional{position:relative;width:310px;height:185px;border-radius:0;overflow:visible;transform:none;background:none;box-shadow:none}
.chapter6-deco-particle{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%) scale(var(--particle-scale,1));animation:chapter6Drop .38s cubic-bezier(.2,.8,.25,1.2) forwards;pointer-events:none;z-index:4}
.deco-choco{width:18px;height:18px;background:#70403d}.deco-crunch{background:#d5a66d}.deco-spray{width:6px;height:15px;border-radius:4px;background:#89bfe6}.deco-sugar{width:6px;height:6px;background:#fff;box-shadow:0 0 8px #fff}.deco-pen{width:24px;height:5px;border-radius:6px;background:#fff}
@keyframes chapter6Drop{0%{opacity:.3;transform:translate(-50%,-50%) translateY(-24px) scale(var(--particle-scale,1))}55%{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) translateY(7px) scale(var(--particle-scale,1))}100%{opacity:1;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(var(--particle-scale,1))}}
.chapter6-topping-ghost,.chapter6-pack-ghost{position:absolute;z-index:40;transform:translate(-50%,-50%);pointer-events:none;padding:0;background:transparent;box-shadow:none}
.chapter6-ribbon-lines{position:absolute;inset:0;pointer-events:none;z-index:5}
.chapter6-ribbon-lines i,.chapter6-ribbon-lines b,.chapter6-ribbon-lines em,.chapter6-ribbon-lines s,.chapter6-ribbon-lines u{position:absolute;opacity:0;background:linear-gradient(180deg,#ffb0d8,#ed7fba);box-shadow:0 2px 7px rgba(178,76,137,.18)}
.chapter6-ribbon-lines .ribbon-v{left:48%;top:-10%;width:14px;height:120%;transform:scaleY(0);transform-origin:top}
.chapter6-ribbon-lines .ribbon-h{top:47%;left:-10%;height:14px;width:120%;transform:scaleX(0);transform-origin:left}
.chapter6-ribbon-lines .bow-left,.chapter6-ribbon-lines .bow-right{top:43%;width:68px;height:46px;border-radius:60% 35% 60% 35%}
.chapter6-ribbon-lines .bow-left{left:50%;transform:translate(-100%,-50%) rotate(-18deg) scale(.2)}
.chapter6-ribbon-lines .bow-right{left:50%;transform:translate(0,-50%) scaleX(-1) rotate(-18deg) scale(.2)}
.chapter6-ribbon-lines .knot{left:50%;top:47%;width:26px;height:24px;border-radius:50%;transform:translate(-50%,-50%) scale(.2)}
.chapter6-ribbon-lines .tail-left,.chapter6-ribbon-lines .tail-right{top:49%;width:18px;height:72px;border-radius:10px;transform-origin:top}
.chapter6-ribbon-lines .tail-left{left:47%;transform:rotate(22deg) scaleY(.1)}
.chapter6-ribbon-lines .tail-right{left:52%;transform:rotate(-22deg) scaleY(.1)}
.chapter6-ribbon-lines u{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
.chapter6-ribbon-lines u:nth-of-type(1){left:40%;top:35%}.chapter6-ribbon-lines u:nth-of-type(2){left:61%;top:38%}.chapter6-ribbon-lines u:nth-of-type(3){left:43%;top:58%}.chapter6-ribbon-lines u:nth-of-type(4){left:58%;top:61%}
.chapter6-gift-box.tying-ribbon .ribbon-v{animation:chapter6RibbonV .42s ease forwards}
.chapter6-gift-box.tying-ribbon .ribbon-h{animation:chapter6RibbonH .42s .28s ease forwards}
.chapter6-gift-box.tying-ribbon .bow-left,.chapter6-gift-box.tying-ribbon .bow-right{animation:chapter6BowLoop .5s .62s cubic-bezier(.2,.9,.25,1.25) forwards}
.chapter6-gift-box.tying-ribbon .knot{animation:chapter6Knot .28s .95s ease forwards}
.chapter6-gift-box.tying-ribbon .tail-left,.chapter6-gift-box.tying-ribbon .tail-right{animation:chapter6Tail .38s 1.02s ease forwards}
.chapter6-gift-box.tying-ribbon u{animation:chapter6RibbonSpark .48s 1.18s ease forwards}
@keyframes chapter6RibbonV{to{opacity:1;transform:scaleY(1)}}@keyframes chapter6RibbonH{to{opacity:1;transform:scaleX(1)}}@keyframes chapter6BowLoop{0%{opacity:0}70%{opacity:1;transform:translate(-100%,-50%) rotate(-18deg) scale(1.16)}100%{opacity:1;transform:translate(-100%,-50%) rotate(-18deg) scale(1)}}@keyframes chapter6Knot{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes chapter6Tail{to{opacity:1;transform:rotate(22deg) scaleY(1)}}@keyframes chapter6RibbonSpark{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.8)}100%{opacity:0;transform:scale(.7)}}
.chapter6-gift-box.tying-ribbon .bow-right{animation-name:chapter6BowLoopRight}.chapter6-gift-box.tying-ribbon .tail-right{animation-name:chapter6TailRight}
@keyframes chapter6BowLoopRight{0%{opacity:0}70%{opacity:1;transform:translate(0,-50%) scaleX(-1) rotate(-18deg) scale(1.16)}100%{opacity:1;transform:translate(0,-50%) scaleX(-1) rotate(-18deg) scale(1)}}@keyframes chapter6TailRight{to{opacity:1;transform:rotate(-22deg) scaleY(1)}}
.chapter6-bite-scene{display:grid;place-items:center;gap:12px}.chapter6-bite-scene>span{font-weight:1000;color:#8a6c91}.chapter6-bite-canvas{width:min(520px,82vw);height:auto;filter:drop-shadow(0 18px 22px rgba(102,64,91,.12));transform-origin:center;animation:chapter6BiteFloat .8s ease-in-out infinite alternate}.chapter6-bite-canvas.bite-pop{animation:chapter6BitePop .3s ease}
@keyframes chapter6BiteFloat{to{transform:translateY(-4px)}}@keyframes chapter6BitePop{0%{transform:scale(1)}45%{transform:scale(.94) rotate(-2deg)}100%{transform:scale(1)}}

.chapter6-state-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;transition:opacity .18s ease,transform .18s ease}.chapter6-state-image.is-changing{opacity:.76;transform:scale(.992)}
.chapter6-mix-state-pad{position:relative;width:min(620px,86vw);height:min(360px,43vh);touch-action:none;cursor:grab;display:grid;place-items:center;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.chapter6-mix-state-pad.is-mixing{cursor:grabbing}.chapter6-mix-state-pad.truffle,.chapter6-mix-state-pad.pink{height:min(328px,38vh)}.chapter6-mix-state-pad.truffle,.chapter6-mix-state-pad.truffle *,.chapter6-mix-state-pad.pink,.chapter6-mix-state-pad.pink *{cursor:none!important;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.chapter6-mix-state-pad .chapter6-state-image{filter:drop-shadow(0 15px 18px rgba(95,61,86,.12))}.chapter6-mix-state-pad.pink .chapter6-state-image{width:80%;height:80%}.chapter6-mix-orbit{position:absolute;left:50%;top:52%;width:38%;aspect-ratio:1;border:2px dashed rgba(255,255,255,.32);border-radius:50%;transform:translate(-50%,-50%) rotate(calc(var(--mix-progress,0)*180deg));opacity:.28;pointer-events:none}.chapter6-mix-state-pad.is-mixing .chapter6-mix-orbit{opacity:.55}.chapter6-whisk-cursor{position:absolute;z-index:12;left:0;top:0;height:min(444px,114%);min-height:336px;width:auto;max-width:none;opacity:0;pointer-events:none;user-select:none;-webkit-user-drag:none;transform:translate(-50%,-94%) rotate(4deg);transform-origin:50% 94%;filter:drop-shadow(0 6px 7px rgba(92,61,92,.18));transition:opacity .06s ease,transform .08s ease}.chapter6-whisk-cursor.visible{opacity:1}.chapter6-whisk-cursor.active{transform:translate(-50%,-94%) rotate(9deg) scale(.96)}
.chapter6-knead-state-pad{position:relative;width:min(640px,88vw);height:min(315px,37vh);touch-action:none;display:grid;place-items:center;cursor:none;user-select:none;-webkit-user-select:none;overflow:visible}.chapter6-knead-tray{position:absolute;left:50%;top:50%;width:min(540px,92%);height:auto;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 13px 18px rgba(95,61,86,.09))}.chapter6-knead-dough{position:absolute;z-index:2;left:50%;top:49%;width:50%;height:76%;object-fit:contain;transform:translate(-50%,-50%);transform-origin:50% 68%;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 10px 14px rgba(95,61,86,.10));transition:transform .12s cubic-bezier(.2,.78,.22,1),opacity .12s ease}.chapter6-knead-state-pad.is-kneading .chapter6-knead-dough{transform:translate(-50%,-50%) scale(1.015,.985)}.chapter6-knead-state-pad.is-pushed .chapter6-knead-dough{transform:translate(-50%,-53%) scale(1.055,.91)}.chapter6-knead-state-pad.knead-pulse .chapter6-knead-dough{animation:chapter6KneadPulse .13s ease}.chapter6-knead-state-pad>span{position:absolute;z-index:4;left:50%;bottom:4px;transform:translateX(-50%);font-size:12px;font-weight:900;color:#8f7899;background:rgba(255,255,255,.86);padding:5px 12px;border-radius:999px;white-space:nowrap;pointer-events:none}.chapter6-knead-controls{width:min(620px,92vw);display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:center;gap:10px}.chapter6-knead-controls .chapter6-action-meter{width:100%;max-width:none}.chapter6-knead-controls .chapter6-action-readout{min-width:66px;text-align:center;white-space:nowrap}.chapter6-knead-controls .chapter6-action-confirm{padding:10px 20px;white-space:nowrap}@keyframes chapter6KneadPulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-51%) scale(1.035,.955)}100%{transform:translate(-50%,-50%) scale(1)}}
.chapter6-shape-png-work{width:min(980px,98vw);display:grid;place-items:center;gap:4px}
.chapter6-shape-state{position:relative;width:min(940px,96vw);height:min(470px,49vh);touch-action:none;display:grid;place-items:center}
.chapter6-shape-long-image,.chapter6-shape-tray{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 15px rgba(95,61,86,.10));user-select:none;-webkit-user-drag:none}
.chapter6-shape-long-image.hidden,.chapter6-shape-tray.hidden{display:none}
.chapter6-shape-status{margin:0;font-size:13px;font-weight:900;line-height:1.2;color:#7c6887;text-align:center}
.chapter6-shape-score-note{margin:0;font-size:11px;font-weight:800;line-height:1.15;color:#a184ae;text-align:center}
.chapter6-shape-cut-overlay{position:absolute;left:21%;right:21%;top:29.5%;bottom:45.5%;pointer-events:none;z-index:6}
.chapter6-shape-cut-overlay i{position:absolute;top:6%;bottom:6%;width:3px;background:#fff;box-shadow:0 0 8px rgba(169,93,139,.8);border-radius:4px;transform:translateX(-50%)}
.chapter6-shape-cut-overlay.hidden{display:none}
.chapter6-shape-piece-layer{position:absolute;left:19%;right:19%;top:22%;bottom:21%;z-index:4;pointer-events:none}
.chapter6-shape-piece-layer.hidden{display:none}
.chapter6-shape-piece-layer.is-interactive{pointer-events:auto;cursor:none}
.chapter6-shape-piece{position:absolute;left:var(--piece-x);top:var(--piece-y);width:var(--piece-w);aspect-ratio:1;border:0;background:transparent;box-shadow:none;padding:0;margin:0;transform:translate(-50%,-50%) scale(var(--piece-scale)) rotate(var(--piece-rotate));transform-origin:center;pointer-events:none;transition:transform .13s ease;display:grid;place-items:center}
.chapter6-shape-piece.is-interactive{pointer-events:auto;cursor:none}
.chapter6-shape-piece img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 5px 7px rgba(95,61,86,.09));user-select:none;-webkit-user-drag:none;transition:transform .13s ease,filter .13s ease}
.chapter6-shape-piece.is-interactive:hover img{transform:scale(1.035);filter:drop-shadow(0 7px 9px rgba(144,78,119,.14))}
.chapter6-shape-piece.is-pressed img,.chapter6-shape-piece.is-interactive:active img{transform:scale(.93)}
.chapter6-shape-piece.preview-piece{pointer-events:none}
.chapter6-heart-shape-preview{position:relative;width:min(940px,96vw);height:min(470px,49vh);display:grid;place-items:center}
.chapter6-heart-shape-preview>img.chapter6-shape-tray{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 15px rgba(95,61,86,.10))}
.chapter6-shape-dynamic-preview .chapter6-shape-piece-layer{left:19%;right:19%;top:22%;bottom:21%}
/* Donut-shape main screen: isolated centering fix so future edits do not affect other Chapter 6 steps. */
.chapter6-action-card:has(.chapter6-donut-shape-main-work){width:min(980px,98vw);gap:6px;max-height:100%;align-content:start;justify-items:center;justify-self:center;margin-inline:auto}
.chapter6-action-card:has(.chapter6-donut-shape-main-work) .chapter6-action-head{width:100%;justify-self:center;margin-inline:auto;text-align:center}
.chapter6-action-body:has(.chapter6-donut-shape-main-work){min-height:0;gap:6px;justify-items:center;justify-self:center;place-items:center;width:100%;margin-inline:auto}
.chapter6-cooking-stage:has(.chapter6-donut-shape-main-work){place-items:start center;padding-top:54px;padding-bottom:8px;overflow:hidden}
.chapter6-action-card:has(.chapter6-donut-shape-main-work) .chapter6-action-confirm{justify-self:center;margin-inline:auto}
.chapter6-donut-shape-main-work{width:min(980px,98vw);max-width:100%;display:grid;place-items:center;justify-items:center;gap:4px;justify-self:center;margin-inline:auto}
.chapter6-donut-shape-main-state{position:relative;width:min(940px,96vw);max-width:100%;height:min(470px,49vh);touch-action:none;display:grid;place-items:center;justify-self:center;margin:0 auto}
.chapter6-donut-shape-main-work .chapter6-shape-status,.chapter6-donut-shape-main-work .chapter6-shape-score-note{text-align:center;justify-self:center;margin-left:auto;margin-right:auto}
/* Chapter 6: donut shaping — hard isolated centering rules.
   These selectors are intentionally scoped to only the ドーナツを成形 step
   so later fixes for other cooking phases cannot shift this layout again. */
.chapter6-cooking-stage:has(.chapter6-donut-shape-main-work) .chapter6-action-card{width:min(980px,98vw);max-width:100%;justify-self:center;margin-inline:auto;justify-items:center;align-content:start}
.chapter6-cooking-stage:has(.chapter6-donut-shape-main-work) .chapter6-action-head{width:100%;justify-self:center;margin-inline:auto;text-align:center}
.chapter6-cooking-stage:has(.chapter6-donut-shape-main-work) .chapter6-action-body{width:100%;min-height:0;gap:6px;justify-items:center;place-items:center;justify-self:center;margin-inline:auto}
.chapter6-cooking-stage:has(.chapter6-donut-shape-main-work) .chapter6-action-confirm{justify-self:center;margin-inline:auto}
.chapter6-donut-shape-main-work,.chapter6-donut-shape-main-state{justify-self:center;margin-inline:auto;left:auto;right:auto;transform:none}
.chapter6-bake-png-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:center;gap:18px;width:min(820px,94vw)}.chapter6-bake-state-image{width:100%;height:min(350px,42vh);object-fit:contain;filter:drop-shadow(0 14px 18px rgba(95,61,86,.12));transition:opacity .18s ease}.chapter6-oven.png-timer-ui{width:100%;min-width:0}.chapter6-cooking-stage:has(.chapter6-truffle-roll-work){place-items:start center;padding-top:38px;padding-bottom:4px;overflow:hidden}.chapter6-action-card:has(.chapter6-truffle-roll-work){width:min(1080px,100%);gap:8px;justify-items:center}.chapter6-action-body:has(.chapter6-truffle-roll-work){gap:8px;min-height:0;justify-items:center}.chapter6-action-card:has(.chapter6-truffle-roll-work) .chapter6-action-head{width:100%;justify-self:center;text-align:center}.chapter6-action-card:has(.chapter6-truffle-roll-work) .chapter6-action-head p{margin-top:2px}.chapter6-truffle-roll-work{position:relative;width:min(940px,96vw,calc(50vh * 1.5547));aspect-ratio:1564/1006;touch-action:none;cursor:none;user-select:none;-webkit-user-select:none;justify-self:center}.chapter6-truffle-roll-tray{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 12px 18px rgba(95,61,86,.10))}.chapter6-truffle-piece-layer{position:absolute;inset:0;z-index:2}.chapter6-truffle-piece{position:absolute;left:var(--x);top:var(--y);width:19.5%;aspect-ratio:1;border:0;background:transparent;box-shadow:none;padding:1.2%;margin:0;transform:translate(calc(-50% + var(--roll,0px)),-50%);touch-action:none;cursor:none;display:grid;place-items:center;user-select:none;-webkit-user-select:none}.chapter6-truffle-piece img{width:82%;height:82%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;transform:rotate(var(--rot));transform-origin:center;filter:drop-shadow(0 5px 7px rgba(73,35,38,.16));transition:transform .10s ease,filter .10s ease,opacity .10s ease}.chapter6-truffle-piece.is-rolling img{transform:rotate(calc(var(--rot) + 4deg)) scale(.97)}.chapter6-truffle-piece.is-changing img{transform:rotate(var(--rot)) scale(1.035)}.chapter6-truffle-piece.is-finished img{filter:drop-shadow(0 6px 8px rgba(73,35,38,.18))}.chapter6-truffle-roll-controls{width:min(720px,94vw);display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px}.chapter6-truffle-roll-controls .chapter6-action-readout{min-width:110px;text-align:center;font-size:14px;line-height:1.2}.chapter6-truffle-roll-controls .chapter6-action-confirm{margin:0;padding:9px 22px}.chapter6-truffle-roll-controls .chapter6-action-confirm.is-ready{box-shadow:0 12px 28px rgba(176,108,176,.30)}
@media(max-width:820px){
  .chapter6-bake-png-layout{grid-template-columns:1fr;gap:8px}
  .chapter6-bake-state-image{height:220px}
  .chapter6-oven.png-timer-ui{width:min(300px,88vw);justify-self:center}
  .chapter6-mix-state-pad{height:280px}.chapter6-truffle-roll-work{width:min(94vw,calc(42vh * 1.5547))}.chapter6-truffle-piece{width:20.5%}.chapter6-truffle-piece img{width:84%;height:84%}.chapter6-truffle-roll-controls{gap:8px;flex-wrap:wrap}
  .chapter6-shape-state,.chapter6-heart-shape-preview{width:min(820px,95vw);height:min(390px,45vh)}
  .chapter6-knead-state-pad{width:min(600px,94vw);height:min(250px,32vh)}
  .chapter6-knead-controls{width:min(590px,94vw);grid-template-columns:minmax(180px,1fr) auto auto;gap:7px}
  .chapter6-knead-controls .chapter6-action-confirm{padding:9px 16px;font-size:12px}
  .chapter6-proto-cursor.knead-hand{width:96px;height:96px}
  .chapter6-mix-state-pad.truffle,.chapter6-mix-state-pad.pink{height:min(268px,35vh)}
  .chapter6-cooking-stage:has(.chapter6-flour-work){padding-top:54px;padding-bottom:8px}
  .chapter6-action-card:has(.chapter6-flour-work){gap:6px}
  .chapter6-flour-work{width:min(96vw,590px);height:min(255px,34vh);grid-template-columns:120px minmax(230px,320px);gap:8px}
  .chapter6-flour-bag-slot{width:120px;height:188px}
  .chapter6-flour-bag-art{width:112px;height:168px}
  .chapter6-flour-bowl-pad{width:min(320px,58vw);height:min(245px,31vh)}
  .chapter6-flour-pour-button{padding:9px 18px;font-size:12px}
  .chapter6-flour-controls{width:min(520px,92%);column-gap:12px}
  .chapter6-cooking-overlay{padding:0;width:100%}
  .chapter6-cooking-bg{inset:0;border-radius:0}
  .chapter6-cooking-header{min-height:50px;border-radius:0;gap:8px;padding:6px 10px}
  .chapter6-cooking-header>div:first-child{display:grid;gap:0}
  .chapter6-cooking-kicker{font-size:9px}
  .chapter6-cooking-header strong{font-size:13px;max-width:44vw}
  .chapter6-cooking-header-actions{gap:4px}
  .chapter6-cooking-header button{min-height:30px;padding:6px 8px;font-size:9px}
  .chapter6-cooking-phase-card{top:8px;left:10px;padding:6px 9px;max-width:calc(100% - 20px)}
  .chapter6-cooking-phase-hint{display:none}
  .chapter6-cooking-stage{padding:50px 10px 12px}
  .chapter6-cooking-overlay:has(.chapter6-cooking-dialogue:not(.hidden)) .chapter6-cooking-stage{padding-bottom:132px}
  .chapter6-cooking-dialogue{left:10px;right:10px;bottom:10px;min-height:110px;padding:25px 18px 13px}
  .chapter6-cooking-text{font-size:15px}
  .chapter6-pack-area{grid-template-columns:1fr;gap:12px}
  .chapter6-pack-items{grid-template-columns:1fr 1fr}
  .chapter6-gift-box{width:min(300px,82vw)}
  .chapter6-action-body{min-height:190px;gap:10px}
  .chapter6-dnd-scale{grid-template-columns:1fr;gap:10px;width:100%}
  .chapter6-piece-tray{min-height:105px;padding:8px}
  .chapter6-dnd-scale.strawberry-dnd,.chapter6-dnd-scale.tofu-dnd{grid-template-columns:1fr;width:100%;gap:4px}
  .chapter6-piece-tray.strawberry-piece-tray,.chapter6-piece-tray.tofu-piece-tray{min-height:88px;padding:5px 8px}
  .chapter6-strawberry-scale-area,.chapter6-tofu-scale-area{grid-template-columns:250px 64px;gap:6px}
  .chapter6-drop-bowl.scale-top-bowl.strawberry-scale-bowl,.chapter6-drop-bowl.scale-top-bowl.tofu-scale-bowl{width:250px;height:132px}
  .chapter6-scale-bowl-wrap{gap:5px}
  .chapter6-scale-bowl-wrap.strawberry-scale-bowl-wrap,.chapter6-scale-bowl-wrap.tofu-scale-bowl-wrap{gap:0}
  .chapter6-drop-bowl{width:220px;min-height:82px;padding:8px}
  .chapter6-scale{width:220px;padding:14px 16px 12px}
  .chapter6-scale.strawberry-scale,.chapter6-scale.tofu-scale{width:178px;padding:11px 12px 9px}
  .chapter6-scale.strawberry-scale strong,.chapter6-scale.tofu-scale strong{font-size:28px;padding:6px}
  .chapter6-strawberry-undo,.chapter6-tofu-undo{padding:8px 9px;font-size:12px}
  .chapter6-scale strong{font-size:30px;padding:7px}
  .chapter6-side-bubble{right:8px;font-size:12px;padding:9px 12px}
  .chapter6-side-bubble.one-line{white-space:normal;max-width:calc(100vw - 16px)}
  .chapter6-decoration-table{grid-template-columns:1fr;gap:10px;width:100%}
  .chapter6-topping-piles{grid-template-columns:repeat(2,1fr)}
  .chapter6-decoration-preview{width:300px;height:190px}
  .chapter6-preview-donut.dimensional{width:260px;height:155px}
}
@media(max-width:560px){
  .chapter6-knead-controls{grid-template-columns:minmax(150px,1fr) auto;gap:6px}
  .chapter6-knead-controls .chapter6-action-confirm{grid-column:1/-1;justify-self:center;margin-top:-1px}
  .chapter6-knead-state-pad>span{font-size:10px;padding:4px 9px}
  .chapter6-cooking-header strong{display:none}
  .chapter6-flour-work{width:100%;height:min(235px,32vh);grid-template-columns:86px minmax(210px,1fr);gap:2px}
  .chapter6-flour-bag-slot{width:86px;height:145px}
  .chapter6-flour-bag-art{width:88px;height:132px}
  .chapter6-flour-bowl-pad{width:min(265px,68vw);height:min(215px,29vh)}
  .chapter6-flour-controls{width:min(390px,96%);grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
  .chapter6-flour-mix-ui{width:100%}
  .chapter6-flour-controls .chapter6-action-confirm{padding:10px 18px;font-size:12px}
  .chapter6-cooking-header-actions{margin-left:auto}
  .chapter6-cooking-skip{max-width:104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chapter6-cooking-exit{max-width:92px}
}
@media(max-height:680px) and (min-width:821px){
  .chapter6-cooking-overlay{padding:6px 10px}
  .chapter6-cooking-bg{inset:6px 10px}
  .chapter6-cooking-header{min-height:48px;padding:5px 12px}
  .chapter6-cooking-stage{padding-top:54px}
  .chapter6-cooking-overlay:has(.chapter6-cooking-dialogue:not(.hidden)) .chapter6-cooking-stage{padding-bottom:118px}
  .chapter6-cooking-dialogue{min-height:106px;padding:23px 25px 12px}
  .chapter6-action-body{min-height:180px;gap:8px}
  .chapter6-knead-state-pad{height:min(235px,34vh)}
  .chapter6-action-card:has(.chapter6-knead-state-pad){gap:6px}
  .chapter6-action-body:has(.chapter6-knead-state-pad){gap:5px}
  .chapter6-cooking-stage:has(.chapter6-flour-work){padding-top:50px;padding-bottom:6px}
  .chapter6-action-card:has(.chapter6-flour-work){gap:5px}
  .chapter6-flour-work{height:min(238px,35vh);grid-template-columns:128px minmax(300px,370px);gap:16px}
  .chapter6-flour-bag-slot{width:128px;height:182px}
  .chapter6-flour-bag-art{width:120px;height:174px}
  .chapter6-flour-bowl-pad{width:min(370px,48vw);height:min(232px,34vh)}
  .chapter6-cooking-stage:has(.chapter6-cooling-layout){padding-top:82px;padding-bottom:8px}
  .chapter6-action-card:has(.chapter6-cooling-layout){gap:7px}
  .chapter6-cooling-center{height:min(205px,30vh)}
  .chapter6-cooling-choice{min-height:184px;grid-template-rows:minmax(0,122px) auto;padding:10px 13px 12px}
  .chapter6-cooling-choice>img{height:120px;width:min(146px,84%)}
  .chapter6-oven{width:260px;padding:12px}
  .chapter6-timer-dial{width:125px;height:125px}
  .chapter6-oven .chapter6-fixed-timer{font-size:27px}
  .chapter6-cooking-text{font-size:15px;line-height:1.6}
}

/* Chapter 5 ending: 「……はずだった。」→ TV砂嵐 → 完全ブラックアウト → Chapter Clear */
.chapter5-ending-static-blackout{
  position:fixed;
  z-index:12000;
  inset:0;
  overflow:hidden;
  pointer-events:all;
  background:#000;
  opacity:1;
  isolation:isolate;
}
.chapter5-ending-static-noise,
.chapter5-ending-static-scanlines,
.chapter5-ending-static-flash{
  position:absolute;
  inset:-8%;
  opacity:0;
  pointer-events:none;
}
.chapter5-ending-static-noise{
  z-index:2;
  background:
    repeating-radial-gradient(circle at 17% 31%, #fff 0 1px, #111 1px 2px, #bdbdbd 2px 3px, #000 3px 5px),
    repeating-linear-gradient(97deg, rgba(255,255,255,.92) 0 1px, rgba(0,0,0,.95) 1px 3px, rgba(175,175,175,.9) 3px 4px, rgba(10,10,10,.98) 4px 7px);
  background-size:7px 7px,11px 9px;
  filter:grayscale(1) contrast(2.15) brightness(1.05);
  mix-blend-mode:screen;
  transform:scale(1.08);
}
.chapter5-ending-static-noise.noise-b{
  z-index:3;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.72) 0 1px, transparent 1px 3px, rgba(0,0,0,.9) 3px 5px),
    repeating-linear-gradient(91deg, transparent 0 5px, rgba(255,255,255,.42) 5px 7px, transparent 7px 13px);
  background-size:100% 7px,17px 100%;
  mix-blend-mode:difference;
  filter:contrast(2.4);
}
.chapter5-ending-static-scanlines{
  z-index:4;
  inset:0;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,.24) 1px 3px, transparent 3px 5px);
  mix-blend-mode:screen;
}
.chapter5-ending-static-flash{
  z-index:5;
  inset:0;
  background:#fff;
}
.chapter5-ending-static-blackout.is-static .chapter5-ending-static-noise.noise-a{
  opacity:.92;
  animation:chapter5EndingStaticNoiseA .10s steps(2,end) infinite;
}
.chapter5-ending-static-blackout.is-static .chapter5-ending-static-noise.noise-b{
  opacity:.72;
  animation:chapter5EndingStaticNoiseB .075s steps(2,end) infinite;
}
.chapter5-ending-static-blackout.is-static .chapter5-ending-static-scanlines{
  opacity:.58;
  animation:chapter5EndingStaticScan .13s steps(3,end) infinite;
}
.chapter5-ending-static-blackout.is-static .chapter5-ending-static-flash{
  animation:chapter5EndingStaticFlash .60s steps(1,end) both;
}
.chapter5-ending-static-blackout.is-blackout .chapter5-ending-static-noise,
.chapter5-ending-static-blackout.is-blackout .chapter5-ending-static-scanlines,
.chapter5-ending-static-blackout.is-blackout .chapter5-ending-static-flash{
  opacity:0!important;
  animation:none!important;
}
@keyframes chapter5EndingStaticNoiseA{
  0%{transform:translate(-2.5%,-1.5%) scale(1.08)}
  50%{transform:translate(2%,1%) scale(1.11)}
  100%{transform:translate(-1%,2.5%) scale(1.09)}
}
@keyframes chapter5EndingStaticNoiseB{
  0%{transform:translateY(-3%) scaleX(1.03)}
  50%{transform:translateY(2%) scaleX(.99)}
  100%{transform:translateY(-1%) scaleX(1.02)}
}
@keyframes chapter5EndingStaticScan{
  0%{transform:translateY(-8px)}
  100%{transform:translateY(8px)}
}
@keyframes chapter5EndingStaticFlash{
  0%,15%,36%,58%,78%,100%{opacity:0}
  8%{opacity:.48}
  29%{opacity:.14}
  51%{opacity:.26}
  72%{opacity:.08}
}
@keyframes chapter5JumpscarePop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(-8deg)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(.70) rotate(4deg)}
  42%{opacity:1;transform:translate(-50%,-50%) scale(1.22) rotate(-2deg)}
  64%{transform:translate(-50%,-50%) scale(.98) rotate(1deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(0)}
}
@keyframes chapter5JumpscareAfterA{
  0%{opacity:0;transform:translate(-48%,-52%) scale(.26)}
  30%{opacity:.55;transform:translate(-54%,-48%) scale(1.06)}
  100%{opacity:0;transform:translate(-58%,-44%) scale(1.22)}
}
@keyframes chapter5JumpscareAfterB{
  0%{opacity:0;transform:translate(-52%,-48%) scale(.28)}
  36%{opacity:.42;transform:translate(-45%,-54%) scale(1.00)}
  100%{opacity:0;transform:translate(-42%,-58%) scale(1.18)}
}
@keyframes chapter5JumpscareFlash{
  0%{opacity:0}
  18%{opacity:1}
  62%{opacity:.18}
  100%{opacity:0}
}
@keyframes chapter5JumpscareVignette{
  0%{opacity:0}
  32%{opacity:1}
  100%{opacity:.92}
}
@keyframes chapter5JumpscareRings{
  0%{opacity:0;transform:scale(.72)}
  28%{opacity:.9;transform:scale(1.06)}
  100%{opacity:0;transform:scale(1.34)}
}
@keyframes chapter5SceneShake{
  0%{transform:translate3d(0,0,0)}
  12%{transform:translate3d(-10px,6px,0)}
  24%{transform:translate3d(12px,-7px,0)}
  36%{transform:translate3d(-8px,-6px,0)}
  48%{transform:translate3d(7px,6px,0)}
  60%{transform:translate3d(-5px,2px,0)}
  72%{transform:translate3d(4px,-2px,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes chapter5MascotFloatSoft{
  from{transform:translate3d(0,0,0) rotate(-3deg)}
  to{transform:translate3d(0,-10px,0) rotate(2deg)}
}
@keyframes chapter5MascotFloatSlow{
  from{transform:translate3d(0,0,0) rotate(1deg)}
  to{transform:translate3d(2px,-12px,0) rotate(-2deg)}
}
@keyframes chapter5MascotPulse{
  0%{filter:drop-shadow(0 0 8px rgba(255,112,208,.08)) brightness(.86)}
  45%{filter:drop-shadow(0 0 14px rgba(255,120,214,.28)) brightness(1.04)}
  100%{filter:drop-shadow(0 0 22px rgba(255,128,218,.44)) brightness(1.12)}
}
@keyframes chapter5MascotPeek{
  0%,24%,100%{transform:translateX(10px) scale(.98)}
  42%,64%{transform:translateX(0) scale(1)}
}
@keyframes chapter5JumpscareStatic{
  0%{opacity:0}
  12%{opacity:.86}
  34%{opacity:.28}
  52%{opacity:.72}
  100%{opacity:0}
}
@keyframes chapter5JumpscareTear{
  0%{opacity:0;transform:scaleX(.84) scaleY(.8)}
  26%{opacity:.88;transform:scaleX(1.04) scaleY(1.02)}
  100%{opacity:0;transform:scaleX(1.18) scaleY(1.08)}
}

/* HORROR ROUTE: LIFE 0専用の強化ジャンプスケア。
   監視画面を即時ブラックアウトしてから、短いグリッチ→二段接近→再ブラックアウト。 */
.horror-failure-jumpscare{
  position:absolute;
  z-index:999;
  inset:0;
  overflow:hidden;
  pointer-events:all;
  background:#000;
  opacity:1;
  isolation:isolate;
}
.horror-failure-jumpscare img,
.horror-failure-afterimage{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:min(86vw,980px);
  height:min(86vh,980px);
  object-fit:contain;
  transform:translate(-50%,-50%) scale(.24) rotate(-7deg);
  opacity:0;
  user-select:none;
  pointer-events:none;
}
.horror-failure-afterimage{
  z-index:4;
  background:url("../assets/images/chapter5/mascot_twinkleghost.png?v=20260906-jumpscare-4") center/contain no-repeat;
  mix-blend-mode:screen;
}
.horror-failure-vignette,
.horror-failure-flash,
.horror-failure-scanlines,
.horror-failure-glitch{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.horror-failure-vignette{
  z-index:2;
  background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.08) 0 14%,transparent 30%,rgba(0,0,0,.62) 68%,#000 100%);
}
.horror-failure-flash{
  z-index:8;
  background:#fff;
  mix-blend-mode:screen;
}
.horror-failure-scanlines{
  z-index:7;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.17) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,rgba(255,30,173,.16),transparent 36%,rgba(55,173,255,.18));
  mix-blend-mode:screen;
}
.horror-failure-glitch{
  z-index:9;
  left:-8%;
  right:-8%;
  height:9%;
  inset-block:auto;
  background:linear-gradient(90deg,#fff 0 16%,#ff46be 16% 38%,#8e68ff 38% 60%,#71d7ff 60% 83%,#fff 83% 100%);
  mix-blend-mode:screen;
  filter:contrast(1.6);
}
.horror-failure-glitch.glitch-a{top:31%}
.horror-failure-glitch.glitch-b{top:62%;height:5%}
.horror-failure-jumpscare.is-glitching .horror-failure-glitch.glitch-a{animation:horrorFailureGlitchA .17s steps(3,end) both}
.horror-failure-jumpscare.is-glitching .horror-failure-glitch.glitch-b{animation:horrorFailureGlitchB .14s .05s steps(3,end) both}
.horror-failure-jumpscare.is-glitching .horror-failure-scanlines{animation:horrorFailurePreStatic .17s steps(4,end) both}
.horror-failure-jumpscare.is-attacking{animation:horrorFailureViewportShake .58s steps(2,end) both}
.horror-failure-jumpscare.is-attacking img{animation:horrorFailureMascotAttack .58s cubic-bezier(.08,.86,.16,1) both}
.horror-failure-jumpscare.is-attacking .horror-failure-afterimage.afterimage-a{animation:horrorFailureRgbA .58s steps(4,end) both}
.horror-failure-jumpscare.is-attacking .horror-failure-afterimage.afterimage-b{animation:horrorFailureRgbB .58s steps(4,end) both}
.horror-failure-jumpscare.is-attacking .horror-failure-vignette{animation:horrorFailureVignette .58s ease both}
.horror-failure-jumpscare.is-attacking .horror-failure-flash{animation:horrorFailureFlash .58s steps(1,end) both}
.horror-failure-jumpscare.is-attacking .horror-failure-scanlines{animation:horrorFailureAttackStatic .58s steps(8,end) both}
.horror-failure-jumpscare.is-cut{background:#000!important;animation:none!important}
.horror-failure-jumpscare.is-cut img,
.horror-failure-jumpscare.is-cut .horror-failure-afterimage,
.horror-failure-jumpscare.is-cut .horror-failure-vignette,
.horror-failure-jumpscare.is-cut .horror-failure-flash,
.horror-failure-jumpscare.is-cut .horror-failure-scanlines,
.horror-failure-jumpscare.is-cut .horror-failure-glitch{
  animation:none!important;
  opacity:0!important;
}
@keyframes horrorFailureGlitchA{
  0%{opacity:0;transform:translateX(-12%)}
  18%{opacity:1;transform:translateX(7%) scaleY(.42)}
  48%{opacity:.16;transform:translateX(-5%) scaleY(1.3)}
  72%{opacity:.9;transform:translateX(12%) scaleY(.62)}
  100%{opacity:0;transform:translateX(-2%)}
}
@keyframes horrorFailureGlitchB{
  0%{opacity:0;transform:translateX(10%)}
  26%{opacity:.88;transform:translateX(-8%) scaleY(1.4)}
  66%{opacity:.3;transform:translateX(6%) scaleY(.5)}
  100%{opacity:0;transform:translateX(-3%)}
}
@keyframes horrorFailurePreStatic{
  0%,100%{opacity:0}
  25%{opacity:.7;transform:translateY(-3px)}
  55%{opacity:.18;transform:translateY(2px)}
  78%{opacity:.82;transform:translateY(0)}
}
@keyframes horrorFailureMascotAttack{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-8deg);filter:brightness(.7) contrast(1.4)}
  8%{opacity:1;transform:translate(-50%,-50%) scale(.48) rotate(4deg);filter:brightness(1.7) contrast(1.3)}
  34%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(-3deg);filter:brightness(1.05) contrast(1.25)}
  51%{opacity:1;transform:translate(-50%,-50%) scale(.82) rotate(2deg);filter:brightness(.78) contrast(1.55)}
  65%{opacity:1;transform:translate(-50%,-50%) scale(1.46) rotate(-1deg);filter:brightness(1.85) contrast(1.5)}
  79%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(1deg);filter:brightness(.92) contrast(1.35)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1.58) rotate(0);filter:brightness(1.18) contrast(1.42)}
}
@keyframes horrorFailureRgbA{
  0%{opacity:0;transform:translate(-54%,-48%) scale(.28);filter:hue-rotate(302deg) saturate(2.2) blur(1px)}
  18%{opacity:.55;transform:translate(-58%,-47%) scale(.82);filter:hue-rotate(302deg) saturate(2.5) blur(2px)}
  52%{opacity:.25;transform:translate(-45%,-54%) scale(.78);filter:hue-rotate(320deg) saturate(2.6) blur(3px)}
  70%{opacity:.68;transform:translate(-58%,-44%) scale(1.42);filter:hue-rotate(302deg) saturate(2.8) blur(1px)}
  100%{opacity:0;transform:translate(-61%,-40%) scale(1.62)}
}
@keyframes horrorFailureRgbB{
  0%{opacity:0;transform:translate(-47%,-53%) scale(.3);filter:hue-rotate(170deg) saturate(2.4) blur(2px)}
  20%{opacity:.48;transform:translate(-43%,-56%) scale(.78);filter:hue-rotate(170deg) saturate(2.7) blur(2px)}
  54%{opacity:.18;transform:translate(-56%,-45%) scale(.96);filter:hue-rotate(184deg) saturate(2.8) blur(4px)}
  72%{opacity:.62;transform:translate(-42%,-58%) scale(1.38);filter:hue-rotate(170deg) saturate(3) blur(1px)}
  100%{opacity:0;transform:translate(-38%,-63%) scale(1.64)}
}
@keyframes horrorFailureFlash{
  0%{opacity:0}
  7%{opacity:.96}
  10%{opacity:0}
  58%{opacity:0}
  62%{opacity:1}
  66%{opacity:0}
  100%{opacity:0}
}
@keyframes horrorFailureVignette{
  0%{opacity:0}
  22%{opacity:.84}
  52%{opacity:.45}
  68%{opacity:1}
  100%{opacity:.94}
}
@keyframes horrorFailureAttackStatic{
  0%{opacity:0}
  8%{opacity:.86;transform:translateX(-3px)}
  19%{opacity:.12;transform:translateX(4px)}
  34%{opacity:.58;transform:translateY(-2px)}
  50%{opacity:.08}
  64%{opacity:.95;transform:translateX(5px)}
  78%{opacity:.26;transform:translateX(-4px)}
  100%{opacity:.18}
}
@keyframes horrorFailureViewportShake{
  0%{transform:translate3d(0,0,0)}
  8%{transform:translate3d(-15px,9px,0)}
  16%{transform:translate3d(18px,-11px,0)}
  26%{transform:translate3d(-13px,-8px,0)}
  35%{transform:translate3d(16px,10px,0)}
  47%{transform:translate3d(-7px,5px,0)}
  58%{transform:translate3d(22px,-14px,0)}
  66%{transform:translate3d(-20px,13px,0)}
  78%{transform:translate3d(11px,-8px,0)}
  88%{transform:translate3d(-8px,5px,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes chapter5MascotHoverHaunt{
  0%{transform:translate3d(0,0,0) skewX(0deg);filter:brightness(1) saturate(1)}
  38%{transform:translate3d(-2px,-2px,0) skewX(-2deg);filter:brightness(1.08) saturate(1.08)}
  62%{transform:translate3d(2px,1px,0) skewX(2deg);filter:brightness(.96) saturate(1.16)}
  100%{transform:translate3d(-1px,-1px,0) skewX(-1deg);filter:brightness(1.1) saturate(1.12)}
}
@keyframes chapter5SoulWaver{
  0%{transform:translateY(1px) rotate(-4deg) scale(.94);opacity:.72}
  50%{transform:translateY(-1px) rotate(2deg) scale(1.04);opacity:1}
  100%{transform:translateY(-4px) rotate(-1deg) scale(.96);opacity:.84}
}
@keyframes chapter5UneaseWord{
  0%,100%{transform:translate3d(0,0,0);filter:none}
  14%{transform:translate3d(-.4px,0,0)}
  18%{transform:translate3d(.7px,-.15px,0)}
  23%{transform:translate3d(-.55px,.1px,0)}
  54%{transform:translate3d(.35px,0,0)}
  68%{transform:translate3d(-.25px,0,0)}
}
@keyframes chapter5MascotFadeOut{
  0%{opacity:var(--chapter5-mascot-opacity, .16);transform:scale(1);filter:brightness(.84) saturate(.92) drop-shadow(0 0 12px rgba(255,138,224,.22))}
  22%{opacity:calc(var(--chapter5-mascot-opacity, .16) + .10);transform:scale(1.05)}
  58%{opacity:.12;transform:scale(.97) translateY(-8px);filter:brightness(.76) saturate(.82) drop-shadow(0 0 14px rgba(255,138,224,.16))}
  100%{opacity:0;transform:scale(.82) translateY(-18px);filter:brightness(.48) saturate(.48) blur(1.8px) drop-shadow(0 0 18px rgba(255,138,224,.08))}
}
@media(max-width:560px){
  .chapter5-mascot-button[data-mascot-id="curtain"]{right:4.8%!important;top:4.4%!important;left:auto!important}
  .chapter5-mascot-button[data-mascot-id="desk"]{left:.8%!important;bottom:11.5%!important;top:auto!important}
  .chapter5-mascot-button[data-mascot-id="shelf"]{left:.4%!important;top:2.6%!important}
  .chapter5-dialogue-toggle{top:-28px;right:6px;width:50px}
}


/* HORROR ROUTE STORY: use the same dialogue component/visual language as normal chapters. */
.scene.chapter5-horror-active .dialogue-box.horror-route-standard-dialogue{
  color:#51425b;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(170,110,190,.35);
  box-shadow:0 10px 30px rgba(70,40,90,.12);
  backdrop-filter:none;
  overflow:visible;
}
.scene.chapter5-horror-active .dialogue-box.horror-route-standard-dialogue .dialogue-next{
  color:#ad92b5;
}
.scene.chapter5-horror-active .dialogue-box.horror-route-standard-dialogue.speaker-yumemimumu{
  border-color:rgba(214,90,154,.48);
  box-shadow:0 10px 30px rgba(186,76,145,.14);
}
.scene.chapter5-horror-active .dialogue-box.horror-route-standard-dialogue.speaker-narration{
  border-color:rgba(118,107,139,.34);
  box-shadow:0 10px 30px rgba(72,62,92,.10);
}

/* Chapter 6 cooking-memory scene */
.chapter6-cooking-memory-scene{
  width:min(1160px,96%);
  min-height:320px;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(500px,1.25fr) minmax(360px,.75fr);
  gap:30px;
  align-items:center;
  padding:28px 30px;
  pointer-events:none
}
.chapter6-memory-visual{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:24px;
  background:#f9edf6;
  box-shadow:inset 0 0 0 1px rgba(224,200,228,.8),0 14px 28px rgba(104,75,116,.08)
}
.chapter6-memory-visual>img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.chapter6-memory-comment-area{position:relative;min-width:0;display:grid;place-items:center;padding:4px 0;overflow:visible}
.chapter6-memory-bubble{position:relative;width:min(540px,128%);aspect-ratio:3/2;display:grid;place-items:center;overflow:visible;isolation:isolate}
.chapter6-memory-bubble-art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.chapter6-memory-nameplate-art{position:absolute;z-index:2;top:3.5%;left:3.5%;width:min(220px,46%);height:auto;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 5px 10px rgba(183,95,145,.10))}
.chapter6-memory-comment{
  position:absolute;
  z-index:1;
  left:14%;
  right:12%;
  top:26%;
  bottom:27%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#705673;
  font-weight:800;
  line-height:1.22;
  letter-spacing:.01em;
  text-align:center;
  word-break:keep-all;
  overflow-wrap:normal;
  opacity:1;
  text-shadow:0 1px 0 rgba(255,255,255,.72)
}
.chapter6-memory-comment-text{display:grid;width:max-content;max-width:none;justify-items:center;gap:2px;font:inherit}
.chapter6-memory-comment .chapter6-comment-line{display:block;font:inherit;color:inherit;letter-spacing:inherit;white-space:nowrap}
.chapter6-decoration-table,.chapter6-pack-area{touch-action:none}

/* Chapter 6 generated PNG assets */
.chapter6-choco-piece img,.chapter6-tofu-piece img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(72,50,61,.15))}
.chapter6-drop-bowl.scale-top-bowl{position:relative;width:190px;height:104px;margin-bottom:-16px;border:0!important;background:transparent!important;overflow:visible}
.chapter6-drop-bowl.scale-top-bowl>img{position:absolute;inset:-24px -26px -14px;width:calc(100% + 52px);height:calc(100% + 38px);object-fit:contain;pointer-events:none;z-index:0}
.chapter6-drop-bowl.scale-top-bowl>span{position:relative;z-index:2;background:rgba(255,255,255,.78);border-radius:999px;padding:3px 8px;font-size:11px}

.chapter6-topping-piles button img{width:40px;height:40px;object-fit:contain;display:block}
.chapter6-topping-ghost img{width:58px;height:58px;object-fit:contain;display:block;filter:drop-shadow(0 5px 8px rgba(65,45,70,.18))}
.chapter6-preview-donut.dimensional>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 16px 16px rgba(91,56,81,.16));pointer-events:none}
.chapter6-pack-items button>img{width:44px;height:44px;object-fit:contain;display:block}
.chapter6-open-box-art{position:absolute;inset:-14px -22px -10px;width:calc(100% + 44px);height:calc(100% + 24px);object-fit:contain;z-index:0;pointer-events:none}
.chapter6-box-food{position:absolute;left:49px;right:42px;top:72px;bottom:43px;z-index:2}
.packed-food{position:absolute;transform:translate(-50%,-50%);font-style:normal;width:54px;height:54px}
.packed-food.truffle{width:34px;height:34px}
.packed-food img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 4px rgba(72,49,57,.13))}
.chapter6-pack-ghost img{width:58px;height:58px;object-fit:contain;display:block}
.chapter6-final-ribbon-art{position:absolute;inset:-18px -28px -15px;width:calc(100% + 56px);height:calc(100% + 33px);object-fit:contain;z-index:6;pointer-events:none;animation:chapter6FinalRibbonArt .34s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes chapter6FinalRibbonArt{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:scale(1)}}
.chapter6-ingredients b>img{width:82px;height:82px;object-fit:contain;display:block}
.chapter6-bake-result-art{width:min(520px,78vw);height:min(310px,43vh);object-fit:contain;filter:drop-shadow(0 18px 22px rgba(91,58,83,.12))}
.chapter6-result-art{width:min(650px,86vw);height:min(390px,48vh);object-fit:contain;filter:drop-shadow(0 20px 26px rgba(91,58,83,.13))}

@media(max-width:720px){.chapter6-action-card:has(.chapter6-donut-shape-main-work){width:min(98vw,620px)}.chapter6-donut-shape-main-work{width:min(98vw,620px)}.chapter6-donut-shape-main-state{width:min(96vw,590px);height:min(44vh,300px)}.chapter6-cooking-stage:has(.chapter6-donut-shape-main-work) .chapter6-action-body{width:100%;justify-items:center;place-items:center}.chapter6-cooking-stage:has(.chapter6-donut-shape-main-work) .chapter6-action-head,.chapter6-cooking-stage:has(.chapter6-donut-shape-main-work) .chapter6-action-confirm{justify-self:center;margin-inline:auto}.chapter6-cooking-stage{padding-top:74px}.chapter6-cooking-overlay:has(.chapter6-cooking-dialogue:not(.hidden)) .chapter6-cooking-stage{padding-bottom:clamp(160px,25vh,184px)}.chapter6-cooking-memory-scene{width:min(96%,620px);grid-template-columns:1fr;min-height:0;gap:10px;padding:14px 18px}.chapter6-memory-visual{height:clamp(180px,27vh,230px);aspect-ratio:auto}.chapter6-memory-comment-area{padding:0}.chapter6-memory-bubble{width:min(470px,100%)}.chapter6-memory-nameplate-art{top:3%;left:4%;width:min(190px,44%)}.chapter6-cooking-stage:has(.chapter6-cream-measure-work){padding-top:56px;padding-bottom:8px;overflow:hidden}.chapter6-cream-measure-work{gap:4px}.chapter6-cream-display{grid-template-columns:minmax(0,1fr) 82px;gap:6px;align-items:end}.chapter6-cream-scene{width:min(480px,100%)}.chapter6-cream-scene-art{width:min(480px,100%);max-height:min(28vh,195px)}.chapter6-cream-gauge{--gauge-bottom:14px;--gauge-range:158px;width:82px;height:194px}.chapter6-cream-gauge-fill{left:24px;width:15px}.chapter6-cream-gauge-axis{left:30px;top:18px}.chapter6-cream-gauge-target{left:30px;width:54px}.chapter6-cream-gauge-target::before{width:24px}.chapter6-cream-gauge-target span{left:31px;top:-8px;font-size:10px}.chapter6-cream-gauge-mark{left:30px;width:54px;font-size:11px}.chapter6-cream-gauge-mark::before{width:22px}.chapter6-cream-gauge-mark span{left:30px;top:-8px}.chapter6-cream-value strong{font-size:30px}.chapter6-cream-value>span{font-size:13px}.chapter6-cream-value small{font-size:10px}.chapter6-cooking-stage:has(.chapter6-cooling-layout){padding:72px 10px 10px;place-items:start center;overflow:hidden}.chapter6-cooling-layout{width:min(94vw,620px);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"center center" "fridge fan";gap:10px 12px}.chapter6-cooling-center{grid-area:center;height:min(155px,20vh);width:min(330px,72vw);justify-self:center}.chapter6-cooling-choice-fridge{grid-area:fridge}.chapter6-cooling-choice-fan{grid-area:fan}.chapter6-cooling-choice{min-height:148px;padding:9px 10px 11px;grid-template-rows:minmax(0,96px) auto}.chapter6-cooling-choice>img{width:min(116px,82%);height:94px}.chapter6-cooling-choice-copy strong{font-size:15px}.chapter6-cooling-choice-copy small{font-size:11px}.chapter6-cooling-point-hand{display:none}.chapter6-cooking-stage:has(.chapter6-oil-layout){padding-top:58px;padding-bottom:8px}.chapter6-oil-layout{grid-template-columns:92px minmax(220px,280px) 154px;gap:8px;width:min(96vw,540px);min-height:230px}.chapter6-oil-bottle-img{width:82px;height:126px}.chapter6-oil-bowl-wrap{width:270px;height:188px}.chapter6-oil-spoons{width:154px;min-height:174px;gap:2px}.chapter6-oil-spoon{width:74px;height:166px}.chapter6-oil-spoon.tbsp .chapter6-spoon-visual{width:84px;height:108px}.chapter6-oil-spoon.tsp .chapter6-spoon-visual{width:60px;height:82px}.chapter6-oil-spoon strong{font-size:11px}.chapter6-oil-spoon small{display:none}}

/* Chapter 6: dough kneading — dedicated cursor, independent from prototype cursor helper. */
.chapter6-knead-cursor{
  position:absolute;
  z-index:30;
  left:0;
  top:0;
  width:104px;
  height:104px;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  opacity:0;
  transform:translate(-46%,-18%) scale(.92);
  transform-origin:46% 18%;
  filter:drop-shadow(0 5px 6px rgba(74,47,74,.15));
  transition:opacity .05s ease,transform .07s ease;
}
.chapter6-knead-cursor.visible{opacity:1}
.chapter6-knead-cursor.active{transform:translate(-46%,-18%) scale(.84)}
@media (max-width:900px),(max-height:760px){
  .chapter6-knead-cursor{width:90px;height:90px}
}

/* Chapter 6: donut final-shape choice
   Cooling-choice card style is reused, but the two options are packed closer together. */
.chapter6-donut-shape-choice-layout{
  position:relative;
  width:min(560px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,250px));
  justify-content:center;
  align-items:center;
  gap:clamp(10px,1.15vw,17px);
}
.chapter6-donut-shape-choice-layout .chapter6-cooling-choice{
  width:100%;
  min-height:204px;
}
.chapter6-donut-shape-point-hand{
  position:absolute;
  z-index:8;
  top:50%;
  width:clamp(70px,5.8vw,92px);
  height:auto;
  opacity:0;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 6px 9px rgba(114,76,103,.14));
  transition:opacity .14s ease,transform .18s cubic-bezier(.2,.8,.2,1);
}
.chapter6-donut-shape-point-hand-left{
  left:50%;
  transform:translate(-96%,-50%) translateX(8px) scale(.92);
}
.chapter6-donut-shape-point-hand-right{
  left:50%;
  transform:translate(-4%,-50%) translateX(-8px) scale(.92);
}
.chapter6-donut-shape-choice-layout:has(.chapter6-donut-shape-choice-normal:is(:hover,:focus-visible)) .chapter6-donut-shape-point-hand-left{
  opacity:1;
  transform:translate(-96%,-50%) translateX(0) scale(1);
}
.chapter6-donut-shape-choice-layout:has(.chapter6-donut-shape-choice-heart:is(:hover,:focus-visible)) .chapter6-donut-shape-point-hand-right{
  opacity:1;
  transform:translate(-4%,-50%) translateX(0) scale(1);
}
@media (max-width:720px){
  .chapter6-donut-shape-choice-layout{
    width:min(500px,94vw);
    gap:10px;
  }
  .chapter6-donut-shape-point-hand{
    width:64px;
  }
}

/* Chapter 9: FM星人編から2か月後へのシンプルな暗転 */
.chapter9-blackout-transition{
  position:fixed;
  inset:0;
  z-index:10050;
  background:#000;
  opacity:0;
  pointer-events:all;
  transition:opacity .42s ease;
}
.chapter9-blackout-transition.is-visible{opacity:1}
.chapter9-blackout-transition.is-fading{opacity:0}

/* Chapter 10: the tribe's home across the ARK journey */
.scene.chapter10-ark-active{
  background:#242033 url("../assets/images/chapter10/saikyou_shikkoku_kingdom_background.png") center center / cover no-repeat;
}
body.chapter-active .scene.chapter10-ark-active::before,
body.chapter-active .scene.chapter10-ark-active::after{opacity:0}
.scene.chapter10-ark-active .question-area{background:rgba(245,235,250,.82)}
.scene.chapter-dialogue-fixed-active .dialogue-box{
  height:clamp(142px,20vh,160px);
  min-height:0;
  display:flex;
  flex-direction:column;
}
.scene.chapter-dialogue-fixed-active .dialogue{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.scene.chapter-dialogue-fixed-active .dialogue-next{flex:none}
@media (max-width:560px){
  .scene.chapter-dialogue-fixed-active .dialogue-box{height:clamp(170px,25vh,190px)}
}

/* Chapter 10: eight chapter markers across the ARK journey */
.chapter10-interlude{
  position:absolute;
  inset:0;
  z-index:65;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:clamp(20px,5vw,60px);
  color:#f8edf9;
  background:
    linear-gradient(155deg,rgba(24,20,39,.84),rgba(36,30,52,.70) 52%,rgba(23,21,36,.87)),
    url("../assets/images/chapter10/saikyou_shikkoku_kingdom_background.png") center center / cover no-repeat;
  animation:chapter10-arrive .6s ease-out both;
}
.chapter10-interlude::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background:
    radial-gradient(circle at 14% 25%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 27% 58%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 81% 17%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 91% 62%,#fff 0 1px,transparent 2px);
}
.chapter10-interlude::after{
  content:"";
  position:absolute;
  bottom:-17%;
  left:-10%;
  width:120%;
  height:40%;
  pointer-events:none;
  background:linear-gradient(160deg,transparent 20%,rgba(14,16,29,.75) 21% 45%,transparent 46%),linear-gradient(22deg,transparent 28%,#151522 29% 58%,transparent 59%);
  opacity:.64;
}
.chapter10-interlude-content{
  position:relative;
  z-index:1;
  width:min(560px,100%);
  text-align:center;
}
.chapter10-interlude-label{
  margin:0 0 26px;
  color:#d7b4e8;
  font-size:clamp(11px,1.4vw,14px);
  font-weight:700;
  letter-spacing:.28em;
}
.chapter10-interlude-number{
  margin:0 0 12px;
  color:#f2bbdc;
  font-size:clamp(11px,1.5vw,14px);
  letter-spacing:.28em;
}
.chapter10-interlude h2{
  margin:0;
  font-size:clamp(27px,5vw,48px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:.08em;
  text-shadow:0 2px 20px rgba(237,172,231,.25);
}
.chapter10-interlude-subtitle{
  margin:16px 0 30px;
  color:#e0d2ea;
  font-size:clamp(13px,2vw,17px);
  line-height:1.8;
}
.chapter10-interlude-progress{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-bottom:28px;
}
.chapter10-interlude-progress span{
  width:clamp(19px,4vw,35px);
  height:3px;
  border-radius:3px;
  background:rgba(255,255,255,.22);
}
.chapter10-interlude-progress .is-reached{background:#e7a5d4}
.chapter10-interlude-next{
  min-height:43px;
  padding:9px 27px;
  border:1px solid rgba(247,213,239,.64);
  border-radius:999px;
  background:rgba(249,225,245,.10);
  color:#fff3fa;
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.chapter10-interlude-next:hover,.chapter10-interlude-next:focus-visible{
  background:rgba(249,225,245,.22);
  transform:translateY(-2px);
}
@keyframes chapter10-arrive{from{opacity:0}to{opacity:1}}
@media (max-height:470px){
  .chapter10-interlude{padding:10px}
  .chapter10-interlude-label{margin-bottom:9px}
  .chapter10-interlude-subtitle{margin:6px 0 10px}
  .chapter10-interlude-progress{margin-bottom:10px}
}

/* Chapter 10: the final group photo, revealed by a brief camera shutter */
.chapter10-photo{
  position:absolute;
  inset:0;
  z-index:66;
  overflow:hidden;
  background:transparent;
  cursor:default;
  outline:none;
}
.chapter10-photo.is-photo-ready{background:#171324}
.chapter10-photo-stage{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(7px,2vh,16px);
  padding:clamp(12px,3vw,32px);
  box-sizing:border-box;
  background:radial-gradient(ellipse at center,#3b334d 0%,#171324 70%);
  visibility:hidden;
}
.chapter10-photo.is-photo-ready .chapter10-photo-stage{visibility:visible}
.chapter10-photo-print{
  position:relative;
  flex:none;
  width:min(94%,710px,calc((100svh - 155px)*.8975));
  aspect-ratio:718/800;
  transform:translateY(9px) scale(.975);
  transition:transform .42s cubic-bezier(.2,.8,.25,1);
}
.chapter10-photo.is-open .chapter10-photo-print{transform:none}
.chapter10-photo-image-window{
  position:absolute;
  left:50%;
  top:46.2%;
  width:75%;
  height:62.5%;
  transform:translate(-50%,-50%) rotate(7.5deg);
  overflow:hidden;
  background:#171324;
}
.chapter10-photo-image-window img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}
.chapter10-photo-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.chapter10-photo-next{
  color:#f4e5f3;
  font-size:clamp(10px,1.3vw,13px);
  font-weight:700;
  letter-spacing:.16em;
  opacity:0;
  transition:opacity .24s ease;
}
.chapter10-photo.is-interactive{cursor:pointer}
.chapter10-photo.is-interactive .chapter10-photo-next{opacity:1}
.chapter10-photo:focus-visible .chapter10-photo-print{outline:3px solid #e6badb;outline-offset:5px}
.chapter10-photo-shutter{
  position:absolute;
  left:0;
  right:0;
  height:50.5%;
  z-index:1;
  background:#05030a;
  pointer-events:none;
  transition:transform .18s cubic-bezier(.7,0,1,.85);
}
.chapter10-photo-shutter-top{top:0;transform:translateY(-100%)}
.chapter10-photo-shutter-bottom{bottom:0;transform:translateY(100%)}
.chapter10-photo.is-closed .chapter10-photo-shutter{transform:translateY(0)}
.chapter10-photo.is-open .chapter10-photo-shutter{
  transition-duration:.28s;
  transition-timing-function:cubic-bezier(.16,.7,.3,1);
}
.chapter10-photo.is-open .chapter10-photo-shutter-top{transform:translateY(-100%)}
.chapter10-photo.is-open .chapter10-photo-shutter-bottom{transform:translateY(100%)}
@media (max-height:500px){
  .chapter10-photo-stage{padding:8px;gap:5px}
  .chapter10-photo-print{width:min(92%,710px,calc((100svh - 135px)*.8975))}
}

/* Chapter 12: each lyric rests for three seconds before the next click. */
.chapter12-lyric-progress,.chapter12-lyric-ready{display:none}
.dialogue-box.chapter12-lyric-timed .dialogue-next{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:28px;
  animation:none;
}
.dialogue-box.chapter12-lyric-timed .dialogue-next-label{display:none}
.dialogue-box.chapter12-lyric-waiting .chapter12-lyric-progress{
  display:block;
  width:26px;
  height:26px;
}
.chapter12-lyric-progress svg{display:block;width:100%;height:100%;overflow:visible}
.chapter12-lyric-progress circle{fill:none;stroke-width:2.5}
.chapter12-lyric-progress-track{stroke:#e9d8e7}
.chapter12-lyric-progress-fill{
  stroke:#bc6fae;
  stroke-linecap:round;
  stroke-dasharray:62.832;
  stroke-dashoffset:62.832;
  transform:rotate(-90deg);
  transform-origin:50% 50%;
}
.chapter12-lyric-waiting .chapter12-lyric-progress-fill{
  animation:chapter12LyricFill var(--chapter12-lyric-hold) linear forwards;
}
@keyframes chapter12LyricFill{to{stroke-dashoffset:0}}
.dialogue-box.chapter12-lyric-ready-to-advance .chapter12-lyric-ready{
  display:block;
  width:26px;
  color:#ae68a9;
  font-size:17px;
  line-height:26px;
  text-align:center;
  animation:chapter12LyricReady .7s ease-out both;
}
@keyframes chapter12LyricReady{
  0%{opacity:.55;transform:scale(.8);text-shadow:0 0 0 transparent}
  45%{opacity:1;transform:scale(1.14);text-shadow:0 0 11px #d76cc1}
  100%{opacity:1;transform:scale(1);text-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .chapter12-lyric-waiting .chapter12-lyric-progress-fill{
    animation:none!important;
    stroke-dashoffset:47;
  }
}

/* Chapter 12: the silent ending and its return as an encore. */
.chapter12-encore{
  position:fixed;
  z-index:200;
  inset:0;
  display:grid;
  place-items:center;
  background:transparent;
  color:#fff4fb;
  opacity:1;
  transition:opacity .72s ease;
}
.chapter12-encore::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:#05030a;
  -webkit-mask-image:radial-gradient(circle at center,transparent var(--chapter12-hole),#000 calc(var(--chapter12-hole) + 12vmax));
  mask-image:radial-gradient(circle at center,transparent var(--chapter12-hole),#000 calc(var(--chapter12-hole) + 12vmax));
  animation:chapter12Darken 2.2s ease-in-out forwards;
}
@property --chapter12-hole{
  syntax:"<length>";
  inherits:false;
  initial-value:100vmax;
}
@keyframes chapter12Darken{
  to{--chapter12-hole:-12vmax}
}
@keyframes chapter12Lighten{
  from{--chapter12-hole:-12vmax}
  to{--chapter12-hole:100vmax}
}
.chapter12-encore.is-revealing::before{
  animation:chapter12Lighten 1.65s ease-in-out forwards;
}
.chapter12-encore.is-leaving{opacity:0;pointer-events:none}
.chapter12-encore-field{
  position:fixed;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
  transition:opacity .6s ease;
}
.chapter12-encore.is-revealing .chapter12-encore-field{opacity:0}
.chapter12-encore-chant{
  position:absolute;
  white-space:nowrap;
  font-weight:800;
  letter-spacing:.08em;
  text-shadow:0 0 14px currentColor,0 0 38px rgba(190,141,241,.55);
  animation:chapter12ChantPop .62s cubic-bezier(.2,1.6,.34,1) both;
}
@keyframes chapter12ChantPop{
  0%{opacity:0;transform:translate(-50%,45%) scale(.35)}
  65%{opacity:1;transform:translate(-50%,-55%) scale(1.15)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.chapter12-encore-field.is-swaying .chapter12-encore-chant{
  animation:chapter12ChantSway .8s ease-in-out var(--chant-sway-delay,0s) infinite;
}
@keyframes chapter12ChantSway{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  38%{transform:translate(-50%,-50%) translateY(-13px)}
  68%{transform:translate(-50%,-50%) translateY(3px)}
}
.scene .question-area.chapter12-encore-choice .question{display:none}
.scene .question-area.chapter12-encore-choice .choices{width:min(500px,100%)}
.scene .question-area.chapter12-encore-choice .choice{
  position:relative;
  min-height:76px;
  padding:14px 32px;
  border:1px solid #e9bce1;
  border-radius:999px;
  background:linear-gradient(115deg,#fffafc 0%,#f5e8ff 48%,#ffeaf3 100%);
  box-shadow:0 0 0 4px rgba(255,252,255,.58),0 12px 35px rgba(177,99,162,.28),inset 0 0 0 1px rgba(255,255,255,.9);
  color:#855275;
  font-size:clamp(17px,2.1vw,22px);
  font-weight:800;
  line-height:1.5;
  letter-spacing:.08em;
  transition:transform .25s ease,opacity .4s ease,box-shadow .25s ease,background .25s ease;
}
.scene .question-area.chapter12-encore-choice .choice::before,
.scene .question-area.chapter12-encore-choice .choice::after{
  content:"✦";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#c997d0;
  font-size:13px;
  pointer-events:none;
}
.scene .question-area.chapter12-encore-choice .choice::before{left:18px}
.scene .question-area.chapter12-encore-choice .choice::after{right:18px}
.scene .question-area.chapter12-encore-choice .choice:hover,
.scene .question-area.chapter12-encore-choice .choice:focus-visible{
  background:linear-gradient(115deg,#fff 0%,#f9f0ff 48%,#fff0f7 100%);
  box-shadow:0 0 0 4px rgba(255,252,255,.8),0 16px 40px rgba(177,99,162,.34),inset 0 0 0 1px #fff;
  transform:translateY(-3px);
}
.scene .question-area.chapter12-encore-choice .choice:focus-visible{
  outline:2px solid #b878b8;
  outline-offset:6px;
}
@media (prefers-reduced-motion:reduce){
  .chapter12-encore,.chapter12-encore::before,
  .chapter12-encore-field{transition-duration:.01ms}
  .chapter12-encore::before,.chapter12-encore-chant{animation-duration:.01ms}
}