/* ============================================================
   미니게임 — 「숲속 은신처」
   폰트: Mona12 (픽셀)  /  자색 기본, 발화 순간에만 마룬·적색
   ============================================================ */

.game{
  font-family:"Mona12","MaruBuri",monospace;
  letter-spacing:0;
  line-height:1.75;
}

/* 게임 화면 안에서 쓰는 로컬 토큰.
   서약 화면은 body 직속이라 .game 밖에 있다. 같은 토큰을 따로 준다. */
.game,.vow,.deep-lock{
  --g-face:#0d0914;
  --g-face-2:#150e1f;
  --g-edge:#3a2a52;
  --g-edge-2:#241a33;
  --chg:#7fb4ff;
  --aff:#ff6fa5;
}
/* 갈망 저주 활성 */
.game[data-curse="1"]{
  --g-face:#120810;
  --g-edge:#4a2340;
  --chg:#c98adf;
}

/* 동거 후 — 게임 화면도 등불빛으로 */
:root[data-warm="1"] .game{
  --g-face:#150f09;
  --g-face-2:#1f160d;
  --g-edge:#4d3b23;
  --g-edge-2:#35281a;
  --chg:#ffd08a;
  --aff:#ff9f72;
}
:root[data-warm="1"] .stats{background:rgba(21,15,9,.94);}

/* ── 발화 — 저주·트라우마·우발로 화염 감응이 새어나온 순간 ──
   붉은색+마룬 전환은 이 순간에만 일어나고 몇 초 뒤 되돌아간다. */
.game[data-flare="1"]{
  --g-face:#180608;
  --g-face-2:#230a0f;
  --g-edge:#78242f;
  --g-edge-2:#4a161d;
  --chg:#ff8a6a;
  --aff:#ff5f78;
}
.game[data-flare="1"] .pnl{
  box-shadow:inset 0 0 0 2px var(--g-face-2), 0 0 28px rgba(207,58,82,.28), 0 6px 26px rgba(0,0,0,.5);
}
.game[data-flare="1"] .say .line{color:#ffdcdc;text-shadow:0 0 14px rgba(207,58,82,.55);}
.game[data-flare="1"] .say .name{color:#ff8d9c;}
.game[data-flare="1"] .stage::before{
  background:radial-gradient(60% 50% at 50% 42%, rgba(207,58,82,.42) 0%, transparent 70%);
  opacity:1;
}
.game[data-flare="1"] .chibi{filter:drop-shadow(0 0 16px rgba(207,58,82,.6));}

/* 발화 순간의 섬광 */
.flash{
  position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;
  background:radial-gradient(70% 60% at 50% 45%, rgba(255,90,110,.5), transparent 72%);
}
.game[data-flare="1"] .flash{animation:flash 1.1s ease-out;}
@keyframes flash{0%{opacity:0;}12%{opacity:1;}100%{opacity:0;}}

/* 발화 배지 */
.flare-tag{
  position:absolute;top:.75rem;left:.75rem;z-index:6;
  font-size:10px;letter-spacing:.14em;padding:.1rem .4rem;border-radius:3px;
  color:#ffd9df;background:rgba(110,30,46,.85);border:1px solid var(--crimson);
  opacity:0;transition:opacity .3s;
}
.game[data-flare="1"] .flare-tag{opacity:1;}

/* ---------- 픽셀 패널 공통 ---------- */
.pnl{
  background:var(--g-face);
  border:2px solid var(--g-edge);
  border-radius:4px;
  box-shadow:inset 0 0 0 2px var(--g-face-2), 0 6px 26px rgba(0,0,0,.5);
  transition:border-color .35s, background-color .35s;
}

/* ---------- 수치 패널 ---------- */
.stats{
  position:sticky;top:54px;z-index:30;
  padding:.7rem .8rem .6rem;
  margin:0 0 .8rem;
  background:rgba(13,9,20,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

.who-row{
  display:flex;align-items:baseline;gap:.5rem;
  font-size:12px;margin:0 0 .55rem;color:var(--ink-3);
}
.who-row .nm{font-size:14px;color:var(--acc-2);letter-spacing:.04em;}
.who-row .turn{margin-left:auto;color:var(--ink-3);}
.time-row{display:flex;gap:.5rem;font-size:11px;color:var(--ink-3);margin:0 0 .6rem;}
.time-row #g-place{margin-left:auto;color:var(--ink-2);}

.bar{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-size:12px;}
.bar .lab{flex:0 0 auto;width:5.2em;color:var(--ink-2);}
.bar .track{
  flex:1 1 auto;height:12px;position:relative;overflow:hidden;
  background:#07050b;border:1px solid var(--g-edge-2);border-radius:2px;
}
.bar .fill{
  position:absolute;inset:0 auto 0 0;width:0;
  transition:width .45s cubic-bezier(.4,0,.2,1), background-color .35s;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  box-shadow:0 0 10px var(--c2);
}
.bar .num{flex:0 0 auto;width:6.2em;text-align:right;color:var(--ink);font-size:12px;}
.bar .num i{color:var(--ink-3);font-style:normal;}

.bar.chg{--c1:#2a5fa8;--c2:var(--chg);}
.bar.aff{--c1:#8d2b52;--c2:var(--aff);}

/* 애정도 제한선 (150) */
.bar .cap{
  position:absolute;top:-2px;bottom:-2px;width:2px;
  background:var(--gold);opacity:.85;
  box-shadow:0 0 6px var(--gold);
}
.bar .cap.off{display:none;}

/* 상태 칩 */
.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0 0;min-height:1px;}
.chip{
  font-size:11px;padding:.1rem .45rem;border-radius:3px;
  border:1px solid var(--g-edge);background:var(--g-face-2);color:var(--ink-2);
}
.chip.curse{color:#ff9b8a;border-color:#7a2b28;background:#22090b;animation:pulse 2.2s ease-in-out infinite;}
.chip.dist {color:#ffcf7a;border-color:#6b4d1c;background:#1e1509;}
.chip.tol  {color:#9ad4ff;border-color:#20456b;background:#08131f;}
.chip.free {color:#ffd9df;border-color:var(--crimson);background:#2a0d13;}
.chip.broke{color:#8fe6a8;border-color:#245c33;background:#0a1a10;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* ---------- 무대 ---------- */
.stage{
  position:relative;overflow:hidden;
  padding:1rem .8rem .8rem;margin:0 0 .8rem;
  display:flex;flex-direction:column;align-items:center;
  min-height:210px;
}
.stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%, var(--acc-glow) 0%, transparent 70%);
  opacity:.55;transition:opacity .35s;
}
.game[data-curse="1"] .stage::before{background:radial-gradient(60% 50% at 50% 42%, rgba(207,58,82,.3) 0%, transparent 70%);}

.chibi{
  position:relative;width:160px;height:160px;
  image-rendering:pixelated;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
  transition:transform .3s;
}
.chibi.bounce{animation:bounce .5s ease;}
@keyframes bounce{0%,100%{transform:translateY(0);}30%{transform:translateY(-9px);}60%{transform:translateY(-3px);}}
.chibi.shake{animation:shake .45s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}

.mood{
  margin-top:.5rem;font-size:11px;color:var(--ink-3);letter-spacing:.1em;
  position:relative;
}

/* 수치 변동 팝업 */
.pops{position:absolute;left:0;right:0;top:62%;height:0;pointer-events:none;}
.pop{
  position:absolute;left:50%;font-size:13px;white-space:nowrap;
  animation:rise 1.5s ease-out forwards;
}
.pop.up{color:#8fe6a8;}
.pop.dn{color:#ff8a9c;}
.pop.z {color:var(--ink-3);}
@keyframes rise{
  0%  {opacity:0;transform:translate(-50%,10px) scale(.9);}
  18% {opacity:1;transform:translate(-50%,0) scale(1);}
  75% {opacity:1;}
  100%{opacity:0;transform:translate(-50%,-38px);}
}

/* ---------- 대사 상자 ---------- */
.say{
  padding:.85rem .9rem 1rem;margin:0 0 .85rem;
  min-height:8.2rem;position:relative;
}
.say .name{
  font-size:12px;color:var(--acc-2);letter-spacing:.06em;
  margin:0 0 .45rem;display:flex;align-items:center;gap:.4rem;
}
.say .name::after{content:"";flex:1;height:1px;background:var(--g-edge-2);}
.say .line{
  font-size:16px;color:var(--ink);margin:0;min-height:1.75em;
  word-break:keep-all;
}
.say .inner{
  margin:.6rem 0 0;font-size:12px;color:var(--ink-3);line-height:1.85;
  padding-left:.7rem;border-left:2px solid var(--g-edge-2);
  word-break:keep-all;
}
.say .inner:empty{display:none;}
.caret{
  display:inline-block;width:.5em;height:1em;vertical-align:-.12em;
  background:var(--acc);margin-left:.15em;animation:blink .9s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}

/* ---------- 행동 버튼 ---------- */
.acts{
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:0 0 .8rem;
}
@media(min-width:560px){.acts{grid-template-columns:1fr 1fr 1fr;}}

.act{
  font-family:inherit;font-size:13px;line-height:1.5;
  padding:.75rem .5rem;min-height:3.4rem;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--ink);cursor:pointer;
  background:linear-gradient(180deg,var(--g-face-2),var(--g-face));
  border:2px solid var(--g-edge-2);border-radius:4px;
  transition:border-color .2s,transform .12s,box-shadow .2s,color .2s;
  word-break:keep-all;
  -webkit-tap-highlight-color:transparent;
}
.act:hover{border-color:var(--acc);color:var(--acc-2);}
.act:active{transform:scale(.96);}
.act:disabled{opacity:.45;cursor:not-allowed;}
.act.risk{border-color:#5a2029;}
.act.risk:hover{border-color:var(--crimson);color:#f2a1ac;}
.act.special{
  border-color:var(--gold);color:var(--gold);
  background:linear-gradient(180deg,#241a08,#140d04);
  animation:glow 1.6s ease-in-out infinite;
  grid-column:1 / -1;
}
@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(217,180,95,0);}50%{box-shadow:0 0 18px rgba(217,180,95,.45);}}
.act .k{display:block;font-size:10px;color:var(--ink-3);margin-top:.15rem;}

.acts.dealing .act{opacity:.3;pointer-events:none;}

/* ---------- 하단 도구 ---------- */
.tools{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin:0 0 1rem;}
.tool{
  font-family:inherit;font-size:11px;padding:.4rem .8rem;
  color:var(--ink-3);background:transparent;cursor:pointer;
  border:1px solid var(--g-edge-2);border-radius:3px;transition:.2s;
}
.tool:hover{color:var(--ink);border-color:var(--acc);}

/* ---------- 기록 ---------- */
.log{
  max-height:0;overflow:hidden;transition:max-height .4s ease;
  margin:0 0 1rem;
}
.log.open{max-height:60vh;overflow-y:auto;}
.log .pnl{padding:.7rem .8rem;}
.log ol{margin:0;padding:0;list-style:none;font-size:11px;line-height:1.8;}
.log li{padding:.35rem 0;border-bottom:1px dashed var(--g-edge-2);color:var(--ink-2);}
.log li:last-child{border-bottom:0;}
.log li .a{color:var(--acc-2);}
.log li .d{float:right;color:var(--ink-3);}

/* ---------- 이벤트 모달 ---------- */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:1.1rem;
  background:rgba(4,2,6,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.modal.open{display:flex;animation:fade .3s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal .box{
  width:100%;max-width:26rem;padding:1.3rem 1.2rem;
  animation:up .35s cubic-bezier(.4,0,.2,1);
  max-height:88vh;overflow-y:auto;
}
@keyframes up{from{transform:translateY(16px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal h3{margin:0 0 .8rem;font-size:14px;color:var(--gold);letter-spacing:.1em;}
.modal p{font-size:14px;color:var(--ink);margin:0 0 .8rem;word-break:keep-all;}
#ev-line{white-space:pre-wrap;}
.modal .inner{font-size:12px;color:var(--ink-3);border-left:2px solid var(--g-edge-2);padding-left:.7rem;margin:0 0 1.1rem;}
.modal .choices{display:grid;gap:.5rem;}
.modal .choices .act{min-height:3rem;}
.modal .act.yes{border-color:var(--crimson);color:#ffc2cb;}
.modal .act.yes:hover{background:linear-gradient(180deg,#2c0e14,#180509);}

/* 화면 흔들림 (트라우마) */
.game.quake{animation:quake .5s ease;}
@keyframes quake{
  0%,100%{transform:translate(0,0);}
  15%{transform:translate(-3px,2px);}
  30%{transform:translate(3px,-2px);}
  45%{transform:translate(-2px,-1px);}
  60%{transform:translate(2px,1px);}
  80%{transform:translate(-1px,0);}
}

/* 안내 */
.howto{font-size:12px;line-height:1.9;color:var(--ink-2);}
.howto b{color:var(--acc-2);font-weight:400;}
.howto ul{margin:.4rem 0 1rem;padding-left:1.1rem;}
.howto li{margin:.2rem 0;}
.howto code{
  font-family:inherit;background:var(--g-face-2);border:1px solid var(--g-edge-2);
  border-radius:3px;padding:0 .3rem;color:var(--acc-2);font-size:11px;
}

/* ═══════════ 상태 칩 추가 ═══════════ */
.chip.panic{color:#ffd0d0;border-color:#8a2a2a;background:#2a0d0d;animation:pulse 1s ease-in-out infinite;}
.chip.feral{color:#ffb3c4;border-color:#7a2440;background:#22090f;animation:pulse 1.4s ease-in-out infinite;}
.chip.live {color:#a9e6c0;border-color:#245c40;background:#0a1a14;}

/* ═══════════ 시각 표시 ═══════════ */
.who-row .clock{color:var(--ink-2);}
.who-row .part{color:var(--ink-3);}

/* ═══════════ 이벤트 모달 — 잠금 ═══════════ */
.modal .box{position:relative;}
.modal .tag{
  font-size:10px;letter-spacing:.16em;color:var(--gold);
  border:1px solid var(--g-edge);border-radius:3px;padding:.1rem .45rem;
  display:inline-block;margin:0 0 .7rem;
}
.modal .tag.red{color:#ff9baa;border-color:var(--maroon);}
.modal .choices .act[disabled]{opacity:.32;cursor:not-allowed;border-color:var(--g-edge-2);color:var(--ink-3);}
.lockbar{
  height:2px;background:var(--g-edge-2);border-radius:2px;overflow:hidden;margin:.2rem 0 .8rem;
}
.lockbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .1s linear;}
.lockbar.done{opacity:0;transition:opacity .3s;}

/* ═══════════ 프롤로그 오버레이 ═══════════ */
.pro{
  position:fixed;inset:0;z-index:200;display:none;
  background:#05030a;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.pro.open{display:block;}
.pro::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 0%, rgba(110,30,46,.28), transparent 60%),
             linear-gradient(180deg,#0a0510,#05030a 60%,#000);
}
.pro-in{
  position:relative;max-width:34rem;margin:0 auto;
  padding:3.2rem 1.4rem 5rem;
  font-family:"MaruBuri",serif;
}
.pro p{
  opacity:0;transform:translateY(8px);
  animation:proIn .9s ease forwards;
  margin:0 0 1.15rem;line-height:1.95;word-break:keep-all;
}
@keyframes proIn{to{opacity:1;transform:none;}}
.pro .h{font-size:.86rem;letter-spacing:.1em;color:var(--gold);margin-bottom:2rem;}
.pro .n{color:#b9a8cf;font-size:1rem;font-style:italic;}
.pro .d{
  color:#f0e6f8;font-size:1.06rem;font-weight:600;
  padding-left:.9rem;border-left:2px solid var(--crimson);
}
.pro .d::before{content:"[???] ";color:var(--crimson);font-weight:400;font-size:.9em;}
.pro .w{color:#ff8d9c;font-size:.98rem;text-shadow:0 0 16px rgba(207,58,82,.5);}
.pro .c{color:#8d7ea8;font-size:.98rem;padding-left:.9rem;border-left:2px dashed #3a2f4a;}
.pro .r{height:1px;background:linear-gradient(90deg,transparent,var(--maroon),transparent);margin:2rem 0;padding:0;}
.pro-go{
  display:block;margin:2.6rem auto 0;opacity:0;
  animation:proIn .8s ease forwards;
}
.pro-skip{
  position:fixed;top:.9rem;right:1rem;z-index:210;
  font-family:"Mona12",monospace;font-size:11px;
  color:var(--ink-3);background:rgba(0,0,0,.5);cursor:pointer;
  border:1px solid var(--line-2);border-radius:3px;padding:.35rem .7rem;
}
.pro-skip:hover{color:var(--ink);border-color:var(--acc);}

/* ═══════════ 작은 도구 모달 (이름/초기화) ═══════════ */
.modal .box.sm{max-width:20rem;}
.modal .fld{
  width:100%;font-family:"Mona12",monospace;font-size:15px;
  padding:.6rem .7rem;margin:0 0 .9rem;
  color:var(--ink);background:var(--g-face);
  border:2px solid var(--g-edge);border-radius:4px;
}
.modal .fld:focus{outline:none;border-color:var(--acc);}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.modal .act.warn{border-color:var(--crimson);color:#ffb3bd;}

/* 음소거 토글 */
.tool.off{opacity:.5;}

/* ---------- 팁 ----------
   행동 버튼 바로 아래. 한 턴에 한 줄씩 돈다. */
.tip{
  margin:.7rem 0 0;padding:.62rem .8rem;
  font-size:.78rem;line-height:1.55;
  color:var(--ink-2);
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-left:2px solid var(--acc-2);
  border-radius:calc(var(--radius) - 4px);
}
.tip::before{content:'B8 ';color:var(--acc-2);}
/* 공황 중에는 안내가 아니라 그녀에게 들리는 것이 된다 */
.tip.panic{
  color:var(--crimson);
  border-color:var(--maroon);
  border-left-color:var(--crimson);
  background:rgba(141,27,38,.14);
  letter-spacing:.02em;
  animation:tip-jitter 2.4s steps(3) infinite;
}
.tip.panic::before{content:'‚6 ';color:var(--crimson);}
@keyframes tip-jitter{
  0%,92%,100%{transform:translateX(0);}
  94%{transform:translateX(-1px);}
  96%{transform:translateX(1px);}
  98%{transform:translateX(-1px);}
}
@media (prefers-reduced-motion:reduce){ .tip.panic{animation:none;} }

/* ---------- 되돌리기 · 이별 ----------
   동거했거나 상한까지 간 사이라면, 그냥 지워지지 않는다. */
/* 전체 화면 연출이 떠 있는 동안 페이지 스크롤을 막는다.
   html 에만 걸면 body 가 overflow-y:auto(가로 숨김의 부작용) 라서
   자기 스크롤바를 따로 그린다. 둘 다 막아야 한다. */
:root.fw-on,
:root.fw-on body{overflow:hidden;}
.farewell{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  padding:2rem 1.6rem;
  background:#000;
  animation:fw-in .5s ease both;
}
.farewell p{
  margin:0;max-width:34rem;
  font-size:1.02rem;line-height:2.05;
  text-align:center;
  color:#e8c14a;
  text-shadow:0 0 18px rgba(232,193,74,.28);
  white-space:pre-wrap;
}
.farewell p::after{
  content:'';display:inline-block;
  width:.5em;height:1.05em;margin-left:.12em;
  background:#e8c14a;vertical-align:-.18em;
  animation:fw-caret 1s steps(1) infinite;
}
.farewell.out{animation:fw-out .9s ease both;}
@keyframes fw-in{from{opacity:0;}to{opacity:1;}}
@keyframes fw-out{from{opacity:1;}to{opacity:0;}}
@keyframes fw-caret{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* ---------- 충전도 상한 — 아바타 둘레의 반짝임 ----------
   두 겹을 서로 다른 박자로 깜빡여 「반짝반짝」이 되게 한다. */
#game[data-full="1"] .stage::after,
#game[data-full="1"] .stage .spark2{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
}
#game[data-full="1"] .stage::after{
  background:
    radial-gradient(3.5px 3.5px at 20% 26%, #fff6d0 0%, rgba(255,232,150,.55) 45%, transparent 72%),
    radial-gradient(3px   3px   at 80% 32%, #fff6d0 0%, rgba(255,232,150,.55) 45%, transparent 72%),
    radial-gradient(2.6px 2.6px at 30% 74%, #fff6d0 0%, rgba(255,232,150,.5)  45%, transparent 72%),
    radial-gradient(3.2px 3.2px at 72% 80%, #fff6d0 0%, rgba(255,232,150,.55) 45%, transparent 72%),
    radial-gradient(2.4px 2.4px at 50% 14%, #fff6d0 0%, rgba(255,232,150,.5)  45%, transparent 72%);
  filter:drop-shadow(0 0 4px rgba(255,226,140,.85));
  animation:spark 2.2s ease-in-out infinite;
}
#game[data-full="1"] .stage .spark2{
  background:
    radial-gradient(2.8px 2.8px at 12% 52%, #fff6d0 0%, rgba(255,232,150,.5) 45%, transparent 72%),
    radial-gradient(3.4px 3.4px at 88% 58%, #fff6d0 0%, rgba(255,232,150,.55) 45%, transparent 72%),
    radial-gradient(2.4px 2.4px at 40% 40%, #fff6d0 0%, rgba(255,232,150,.45) 45%, transparent 72%),
    radial-gradient(3px   3px   at 62% 22%, #fff6d0 0%, rgba(255,232,150,.5) 45%, transparent 72%),
    radial-gradient(2.6px 2.6px at 26% 90%, #fff6d0 0%, rgba(255,232,150,.45) 45%, transparent 72%);
  filter:drop-shadow(0 0 4px rgba(255,226,140,.8));
  animation:spark 2.2s ease-in-out infinite;
  animation-delay:1.1s;
}
@keyframes spark{
  0%,100%{opacity:.15;transform:translateY(1px) scale(.94);}
  50%    {opacity:1;   transform:translateY(-3px) scale(1.06);}
}
@media (prefers-reduced-motion:reduce){
  #game[data-full="1"] .stage::after,
  #game[data-full="1"] .stage .spark2{animation:none;opacity:.75;}
}

/* ---------- 서약 ----------
   세 번 넘게 되돌린 뒤의 고백 수락. 한 줄씩 눌러서 넘긴다. */
.vow{
  position:fixed;inset:0;z-index:910;
  display:flex;align-items:center;justify-content:center;
  padding:2rem 1.2rem;
  background:#04030a;
  animation:fw-in .6s ease both;
  cursor:pointer;
}
.vow.out{animation:fw-out .9s ease both;}
.vow-in{
  width:100%;max-width:34rem;max-height:100%;
  overflow-y:auto;
  display:flex;flex-direction:column;
  padding-bottom:1.4rem;
}
.vow-lines{flex:1;}
.vow-lines p{
  margin:0 0 1.05rem;
  font-size:1rem;line-height:1.95;
  color:var(--ink);
  animation:vow-line .55s ease both;
}
.vow-lines p.vow-tail{color:var(--crimson);}
@keyframes vow-line{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.vow-hint{
  margin:1.4rem 0 0;text-align:center;
  font-size:.74rem;color:var(--ink-3);
  animation:vow-hint 2.4s ease-in-out infinite;
}
@keyframes vow-hint{0%,100%{opacity:.35;}50%{opacity:.9;}}

.vow-choices{
  margin-top:1.6rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.7rem;
  align-items:start;
  cursor:auto;
}
/* display 를 준 요소는 기본 [hidden] 을 이겨버린다. 명시해 둔다 */
.vow-choices[hidden],.vow-hint[hidden],.vow-choices .whisper[hidden]{display:none;}
.vow-choices .act{margin:0;min-height:3rem;padding:.7rem 1.4rem;}
/* 고른 뒤 — 오른쪽 칸에 혼잣말이 붙는다 */
.vow-choices .whisper{
  grid-column:1 / -1;
  margin:.4rem 0 0;
}
@media (min-width:34rem){
  .vow-choices{grid-template-columns:auto auto 1fr;}
  .vow-choices .whisper{grid-column:3;margin:0;align-self:center;}
}
.vow-choices.picked .act{opacity:.35;}
.vow-choices.picked.ok  #vow-y{opacity:1;border-color:var(--acc);}
.vow-choices.picked.bad #vow-n{opacity:1;border-color:var(--crimson);}

/* ---------- 고장 · 미니게임 부분 ----------
   사이트 전역 규칙은 base.css 에 있다. 여기는 게임 화면 안쪽만. */
#game[data-broken="1"] #g-aff-num,
#game[data-broken="1"] .mood,
#game[data-broken="1"] #g-say-name{
  color:var(--crimson);
  animation:broke 3.1s steps(2) infinite;
}
#game[data-broken="1"] #g-line{
  animation:broke 4.3s steps(2) infinite;
}
#game[data-broken="1"] .bar.aff .fill{
  background:repeating-linear-gradient(90deg,var(--maroon) 0 6px,transparent 6px 12px);
  width:100% !important;
}
@media (prefers-reduced-motion:reduce){ .vow-hint{animation:none;opacity:.7;} }

/* 프롤로그를 볼 차례면 게임 화면을 미리 가린다.
   그리기 전에 가려야 한순간 비치는 일이 없다. */
#game[data-veil="1"] > *:not(.pro){visibility:hidden;}

/* 고장난 뒤의 「기억소거」 — 되돌리는 길만 눈에 남는다 */
.tool.gold,.act.gold{
  color:var(--gold);
  border-color:var(--gold);
  background:linear-gradient(180deg,#241a08,#140d04);
  animation:glow 1.9s ease-in-out infinite;
}
.tool.gold:hover,.act.gold:hover{color:#f0d489;border-color:#f0d489;}
.tag.gold{color:var(--gold);border-color:var(--gold);background:rgba(217,180,95,.10);}

/* 고장 뒤의 턴 표시 — 세어지지 않는다 */
/* 12px 에서는 「차」의 윗획이 뭉개져 「자」로 읽힌다.
   고장 표시는 자간을 넓히고 조금 키워 구분이 살게 한다. */
.turn.lost{color:var(--crimson);letter-spacing:.09em;font-size:13px;}

/* 서약 · 마지막 네 마디
   화면을 한 번 비운 뒤 이것만 크게 띄운다. */
.vow-lines.fade{animation:vow-fade 1.5s ease forwards;}
@keyframes vow-fade{from{opacity:1;}to{opacity:0;}}
.vow-lines.final{
  min-height:min(58vh,26rem);
  display:flex;flex-direction:column;justify-content:center;
}
.vow-lines p.big{
  font-size:1.12rem;line-height:2.1;
  color:var(--ink);
  text-align:center;
  margin:0 0 1.3rem;
  animation:vow-line .9s ease both;
}
/* 마지막 한 마디만 조금 더 */
.vow-lines p.big:last-child{color:var(--acc-2);}

/* 크게 띄우는 선택지 */
.vow-choices.big{
  grid-template-columns:1fr;
  gap:.9rem;
  margin-top:2rem;
}
.vow-choices.big .act{
  min-height:4.2rem;padding:1rem 1.2rem;
  font-size:.95rem;line-height:1.7;
  text-align:left;justify-content:flex-start;
}
.vow-choices.big #vow-y{border-color:var(--acc-d);}
.vow-choices.big #vow-y:hover{border-color:var(--acc);}
.vow-choices.big #vow-n{border-color:#4a2028;}
.vow-choices.big #vow-n:hover{border-color:var(--crimson);color:#f2a1ac;}
.vow-choices.big .whisper{grid-column:1;margin:.2rem 0 0;}
@media (min-width:34rem){
  .vow-choices.big .whisper{grid-column:1;margin:.2rem 0 0;}
}

/* ---------- 지지직 ----------
   배드엔딩으로 넘어갈 때, 그리고 기억소거로 되돌릴 때.
   주사선 · 색 어긋남 · 잡음이 겹쳐 화면이 한 번 무너진다. */
.static{
  position:fixed;inset:0;z-index:960;pointer-events:none;
  background:#05040a;
  animation:st-flash .1s steps(2) infinite;
}
.static::before{
  content:'';position:absolute;inset:-20%;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.16) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(0deg,
      rgba(207,58,82,.20) 0 2px,
      rgba(43,111,143,.18) 2px 4px,
      transparent 4px 9px);
  animation:st-roll .28s linear infinite;
}
.static::after{
  content:'';position:absolute;left:0;right:0;height:14%;
  background:rgba(255,255,255,.09);
  box-shadow:0 0 40px rgba(255,255,255,.16);
  animation:st-band 1.1s linear infinite;
}
@keyframes st-roll{from{transform:translateY(0);}to{transform:translateY(9px);}}
@keyframes st-band{from{top:-16%;}to{top:104%;}}
@keyframes st-flash{
  0%  {background:#05040a;}
  50% {background:#0b0810;}
}
.static.out{animation:st-out .5s ease forwards;}
@keyframes st-out{from{opacity:1;}to{opacity:0;}}

/* 지지직이 도는 동안 화면 전체가 한 번 흔들린다 */
:root.st-on main,
:root.st-on .topbar{animation:st-shake .16s steps(2) infinite;}
@keyframes st-shake{
  0%,100%{transform:translate(0,0);}
  50%    {transform:translate(-2px,1px);}
}
@media (prefers-reduced-motion:reduce){
  .static::before,.static::after,.static{animation:none;}
  .static{background:#05040a;}
  :root.st-on main,:root.st-on .topbar{animation:none;}
}

/* ---------- 극도 스포일러 잠금 ----------
   경고를 읽고 누른 뒤에만 본문이 나온다. */
.deep-lock{
  margin:1.2rem 0 0;
  display:flex;flex-direction:column;gap:.8rem;
}
.deep-lock[hidden]{display:none;}
.deep-lock .act{align-self:center;min-width:12rem;}
#deep-body[hidden]{display:none;}