/* ---------- Tokens ---------- */
:root{
  /* Palette (cool ocean-night) */
  --bg:#0b070f;
  --bg2:#130b20;
  --panel:#19122a;
  --panel2:#150f24;
  --card:#0f1626cc;
  --border:#2f223e;
  --ink:#E6E7F0;
  --muted:#A9AFBB;
  --focus:#3E8FB3;

  --shadow: 0 18px 60px rgba(0,0,0,.45);

  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius: 12px;

  /* Stage sizing */
  --maxw: 2000px;
  --stageW: min(96vw, var(--maxw));

  /* TALKING HEAD tuning (bigger) */
  --talkLeft: 18px;
  --talkH: clamp(340px, 56vh, 520px);
  --talkMaxW: 350px;
  --talkGap: 0px;

  /* border pieces */
  --ui-stroke-a: rgba(255,255,255,.14);
  --ui-stroke-b: rgba(255,255,255,.03);
  --ui-stroke-mid: rgba(255,255,255,.28);

  /* glows */
  --ui-glow-v: rgba(169,131,255,.16);
  --ui-glow-b: rgba(62,143,179,.12);

  /* Border gradient */
  --g-border: linear-gradient(90deg,
    var(--ui-stroke-b) 0%,
    var(--ui-stroke-a) 20%,
    var(--ui-stroke-mid) 50%,
    var(--ui-stroke-a) 80%,
    var(--ui-stroke-b) 100%
  );

  /* Sheen overlay */
  --g-sheen: radial-gradient(120% 70% at 50% 0%,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.06) 28%,
    rgba(255,255,255,0) 60%
  );

  /* Fills */
  --g-pill: linear-gradient(180deg,
    rgba(40,28,72,.78) 0%,
    rgba(24,18,48,.70) 55%,
    rgba(15,12,28,.72) 100%
  );

  --g-btn: linear-gradient(180deg,
    rgba(88,72,150,.50) 0%,
    rgba(46,35,88,.55) 55%,
    rgba(26,20,52,.62) 100%
  );

  --g-choice: linear-gradient(180deg,
    rgba(70,52,132,.54) 0%,
    rgba(34,26,74,.62) 60%,
    rgba(20,16,40,.70) 100%
  );

  /* Purple dialogue fog (less transparent / stronger) */
  --g-dialogue-purple: linear-gradient(180deg,
    rgba(10,10,16,0.00) 0%,
    rgba(46,28,92,0.55) 16%,
    rgba(28,18,58,0.88) 52%,
    rgba(10,8,18,0.96) 100%
  );

  /* Purple cards */
  --g-card-purple: linear-gradient(180deg,
    rgba(70,46,130,.55) 0%,
    rgba(38,24,78,.62) 55%,
    rgba(14,12,26,.78) 100%
  );

  --menuCol: min(640px, 92vw); /* the “column” width for prompt + list */
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  color:var(--ink);
  font:16px/1.5 Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.error{ color:#ff6b6b; }

h1,h2{ margin:0 0 10px; letter-spacing:.2px; }
p{ margin:0 0 12px; }

/* ---------- Background ---------- */
body{
  background:
    radial-gradient(1200px 700px at 50% -120px, rgba(143,74,255,.18), transparent 60%),
    radial-gradient(900px 600px at 20% 10%, rgba(62,143,179,.16), transparent 55%),
    radial-gradient(800px 500px at 90% 20%, rgba(132,103,183,.12), transparent 55%),
    linear-gradient(180deg, rgba(11,7,15,.82), rgba(11,7,15,.92)),
    url("assets/wt_bg.png");

  background-size:
    auto,
    auto,
    auto,
    auto,
    cover;

  background-position:
    center,
    center,
    center,
    center,
    center;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;

  background-attachment:
    fixed,
    fixed,
    fixed,
    fixed,
    fixed;
}

/* ---------- Screen container ---------- */
.screen{
  padding:28px 18px;
  max-width:var(--maxw);
  margin:0 auto;
}

/* =========================================
   MENU + CHAPTERS SCREENS (CENTERED)
   ========================================= */
#menu,
#chapters{
  display:grid;
  place-items:center;
  padding: clamp(24px, 4vw, 52px);
  text-align:center;
}

/* inner centered column */
.menuWrap{
  width: min(900px, 92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
}

/* Logo (Menu/Chapters) */
.siteLogo{
  display:block;
  margin: 14px auto 10px;
  width: min(520px, 78vw);
  height:auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
  user-select:none;
  -webkit-user-drag:none;
}

/* Menu title */
#menuTitle{
  width:100%;
  margin: 0;
}

/* THE FIX: intro paragraph is a centered column and <i> behaves */
#menuPrompt{
  width: var(--menuCol);
  margin: 0 auto 6px;
  text-align: center;
  line-height: 1.7;
  opacity: .92;
  text-wrap: balance;
}
#menuPrompt i{
  display:block;
  margin: 0 auto;
}

/* Optional: keep chapter prompt consistent if you want */
.chapterPrompt{
  width: min(860px, 92vw);
  margin: 0 auto 6px;
  text-align:center;
  line-height:1.55;
}

/* Episode/Chapter list column width */
.episodeList,
#episodeList,
#chapterList{
  width: var(--menuCol);
  margin: 12px auto 0;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:stretch;
}

/* Back button row aligned to list column */
.backRow{
  width: min(640px, 92vw);
  margin: 10px auto 0;
  display:flex;
  justify-content:flex-start;
}

/* ---------- Cards ---------- */
.episodeCard{
  width:100%;
  border:1px solid transparent;
  background:
    var(--g-card-purple) padding-box,
    var(--g-border) border-box;
  border-radius: var(--radius-xl);
  overflow:hidden;
  position:relative;
  padding:16px 16px 14px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px 14px;
  align-items:center;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(169,131,255,.08),
    0 18px 60px rgba(0,0,0,.45);
}

.episodeCard::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 120px at 30% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%);
  pointer-events:none;
}

.episodeCard h3{ margin:0; font-size:18px; font-weight:650; }
.episodeCard p{
  margin:6px 0 0;
  color:rgba(230,231,240,.72);
  grid-column:1 / 2;
}
.episodeCard .btn{
  grid-column:2 / 3;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:end;
  min-width:132px;
}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid transparent;
  background:
    var(--g-btn) padding-box,
    var(--g-border) border-box;
  color:var(--ink);
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  position:relative;
  overflow:hidden;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 30px rgba(0,0,0,.35);

  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

.btn::before{
  content:"";
  position:absolute; inset:0;
  background: var(--g-sheen);
  pointer-events:none;
  opacity:.85;
}

.btn:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 2px var(--ui-glow-v),
    0 0 22px rgba(169,131,255,.10),
    0 18px 50px rgba(0,0,0,.45);
  filter: brightness(1.03);
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; filter:saturate(.8); }

/* =========================================
   VN STAGE
   ========================================= */
.stage{
  position:relative;
  width: var(--stageW);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  max-height: 88vh;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45)) padding-box,
    var(--g-border) border-box;

  border-radius: var(--radius-xl);
  overflow:hidden;

  /* crisp edge (no fuzz) */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08);
}

/* Background */
.bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  filter: contrast(1.03) saturate(1.05);
}

/* Sprites */
.spriteLayer{ position:absolute; inset:0; pointer-events:none; }
.sprite{
  position:absolute;
  bottom:18%;
  max-height:80%;
  max-width:40%;
  filter:none !important;
}
.slot-left{ left:6%; }
.slot-center{ left:50%; transform:translateX(-50%); }
.slot-right{ right:6%; }

/* Talk head */
.talkHead{
  position:absolute;
  left: var(--talkLeft);
  bottom: 0;
  height: var(--talkH);
  max-width: var(--talkMaxW);
  z-index: 13;
  pointer-events:none;
  user-select:none;
  display:flex;
  align-items:flex-end;
  padding-bottom: 14px;
}
.talkHead img{
  height:100%;
  width:auto;
  display:block;
  object-fit:contain;
  filter:none !important;
}

/* Shift dialogue when portrait visible */
#dialogueBox.shiftForHead{
  padding-left: calc(var(--talkMaxW) * 0.90 + var(--talkGap));
}

/* Top bar */
.topbar{
  position:absolute;
  top:12px; left:12px;
  display:flex;
  gap:10px;
  z-index:10;
}

/* Dialogue box */
.dialogueBox{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:24px 26px 26px;
  z-index:12;
  background: var(--g-dialogue-purple);
  min-height: 190px;
}
.dialogueBox::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.10);
  pointer-events:none;
}
.dialogueBox > *{
  position:relative;
  z-index:1;
}

/* Speaker pill */
.nameRow{ min-height:0; margin-bottom:8px; }
.speaker{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  font-size:18px;

  border:1px solid transparent;
  background:
    var(--g-pill) padding-box,
    var(--g-border) border-box;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 22px rgba(0,0,0,.28);

  position:relative;
  overflow:hidden;
}
.speaker::before{
  content:"";
  position:absolute; inset:0;
  background: var(--g-sheen);
  pointer-events:none;
  opacity:.75;
}
.speaker:empty{ display:none; }

/* Dialogue text */
.text{
  font-size:30px;
  line-height:1.55;
  min-height:72px;
  white-space:pre-wrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

/* =========================================
   DIALOGUE STYLING TOKENS
   Use in Ink:
     //italic//
     <<whisper>>
     ~~LOUD~~
   ========================================= */
.text em{
  font-style: italic;
  opacity: .88;
}

.text .whisper{
  font-style: italic;
  letter-spacing: 0.06em;
  opacity: 0.78;
  filter: blur(0.3px);
  text-shadow:
    0 2px 0 rgba(0,0,0,.45),
    0 0 12px rgba(143,74,255,.18);
  animation: whisperPulse 2.8s ease-in-out infinite;
}
@keyframes whisperPulse{
  0%,100% { opacity: 0.62; }
  50%     { opacity: 0.88; }
}

.text .loud{
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e9dbff;
  text-shadow:
    0 2px 0 rgba(0,0,0,.55),
    0 0 8px rgba(169,131,255,.35),
    0 0 22px rgba(143,74,255,.20);
  animation: distort .12s infinite alternate;
}
@keyframes distort{
  from { transform: translateX(-1px); }
  to   { transform: translateX(1px); }
}

/* GLITCH token: [[TEXT]] */
.text .glitch{
  position: relative;
  display:inline-block;
  font-weight: 800;
  letter-spacing: .06em;
  text-shadow:
    0 2px 0 rgba(0,0,0,.55),
    0 0 14px rgba(143,74,255,.22);
}

.text .glitch::before,
.text .glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  pointer-events:none;
  opacity:.85;
  mix-blend-mode: screen;
}

.text .glitch::before{
  transform: translate(-1px, 0);
  clip-path: inset(0 0 55% 0);
  animation: glitchTop 1.2s infinite steps(2, end);
}

.text .glitch::after{
  transform: translate(1px, 0);
  clip-path: inset(55% 0 0 0);
  animation: glitchBottom .95s infinite steps(2, end);
}

@keyframes glitchTop{
  0%   { transform: translate(-1px,0); opacity:.65; }
  20%  { transform: translate(1px,-1px); }
  40%  { transform: translate(-2px,1px); opacity:.9; }
  60%  { transform: translate(2px,0); }
  80%  { transform: translate(-1px,-1px); opacity:.75; }
  100% { transform: translate(0,0); opacity:.65; }
}

@keyframes glitchBottom{
  0%   { transform: translate(1px,0); opacity:.60; }
  25%  { transform: translate(-1px,1px); }
  50%  { transform: translate(2px,1px); opacity:.9; }
  75%  { transform: translate(-2px,0); }
  100% { transform: translate(0,0); opacity:.60; }
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .text .glitch::before,
  .text .glitch::after{
    animation: none !important;
  }
}


/* Choices */
.choices{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.choiceBtn{
  text-align:left;
  border-radius: var(--radius-lg);
  font-size: 18px;
  line-height: 1.35;
  padding: 14px 16px;
  letter-spacing: .15px;

  border:1px solid transparent;
  background:
    var(--g-choice) padding-box,
    var(--g-border) border-box;

  color:#fff;
  font-weight:650;
  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 34px rgba(0,0,0,.40);

  position:relative;
  overflow:hidden;

  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  transition: box-shadow .12s ease, transform .08s ease, filter .12s ease;
}

.choiceBtn::before{
  content:"";
  position:absolute; inset:0;
  background:
    var(--g-sheen),
    radial-gradient(120% 80% at 50% 120%, var(--ui-glow-b), transparent 60%);
  pointer-events:none;
  opacity:.95;
}

.choiceBtn:hover{
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 2px rgba(169,131,255,.16),
    0 0 26px rgba(169,131,255,.12),
    0 16px 46px rgba(0,0,0,.48);
}
.choiceBtn:active{ transform: translateY(1px); }

/* Hint */
.hint{
  margin-top:10px;
  font-size:18px;
  color: rgba(230,231,240,.65);
}

#hint::before{
  content: "➽";
  font-size: 18px;
  line-height: 1;
  color: rgba(230,231,240,.75);
  display:inline-block;
  animation: nudge 1.2s ease-in-out infinite;
}

@keyframes nudge{
  0%,100%{ transform: translateX(0); opacity:.55; }
  50%    { transform: translateX(4px); opacity:.95; }
}

/* Keyboard-highlighted choice (VN + SMS) */
.choiceBtn.isSelected,
.smsReplyBtn.isSelected{
  outline: 2px solid rgba(169,131,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 3px rgba(169,131,255,.18),
    0 0 28px rgba(143,74,255,.18),
    0 18px 50px rgba(0,0,0,.55);
  filter: brightness(1.07);
}

.choiceBtn.isSelected::before,
.smsReplyBtn.isSelected::before{
  opacity: 1;
}


#dialogueBox .hint{
  position:absolute;
  right: 18px;
  bottom: 12px;
  margin: 0;
  text-align: right;
  pointer-events: none;
  opacity: .75;
}

/* =========================================
   VN FOOTER (controls + disclaimer)
   ========================================= */
.vnFooter{
  width: var(--stageW);
  margin: 10px auto 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
  text-align:center;
}

.vnFooterRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.vnFooterPill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .15px;

  border: 1px solid transparent;
  background:
    rgba(12,10,20,.35) padding-box,
    var(--g-border) border-box;

  color: rgba(230,231,240,.82);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.28);
}

.vnFooterFine{
  font-size: 12.5px;
  line-height: 1.35;
  opacity: .9;
}

.vnFooterStrong{
  color: rgba(230,231,240,.9);
  font-weight: 700;
}

/* small screens: tighten */
@media (max-width: 720px){
  .vnFooterPill{ font-size: 12.5px; padding: 7px 10px; }
  .vnFooterFine{ font-size: 12px; }
}


/* =========================================
   LOG MODAL
   ========================================= */
.modal{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.55);
  display:grid;
  place-items:center;
  z-index:50;
}
.modalCard{
  width:min(820px,92vw);
  max-height:min(80vh,700px);
  overflow:hidden;

  border-radius: var(--radius-xl);
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(18,26,42,.96), rgba(11,18,32,.94)) padding-box,
    var(--g-border) border-box;

  box-shadow: var(--shadow);
  position:relative;
}
.modalCard::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 160px at 50% 0%, rgba(255,255,255,.05), transparent 60%);
  pointer-events:none;
}
.modalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
  z-index:1;
}
.logBody{
  padding:14px;
  overflow:auto;
  max-height: calc(min(80vh,700px) - 54px);
  color: rgba(230,231,240,.78);
  position:relative;
  z-index:1;
}
.logLine{ margin:0 0 10px; }
.logLine.choice{ opacity:0.95; font-style:italic; }

/* =========================================
   OVERLAYS: Comic + Item
   ========================================= */

/* COMIC PANEL — edge-to-edge */
.panelOverlay{
  position:absolute;
  inset:0;
  z-index: 90;
  padding: 0;
  background: transparent;
  pointer-events:none;
  overflow: hidden;         /* important */
  border-radius: inherit;   /* match the stage rounding */
}

/* force the image to actually fill the overlay box */
.panelOverlay img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;

  object-fit: cover;        /* fill stage (may crop) */
  max-width: none;
  max-height: none;

  filter: none;
}


/* Stage “comic mode” hides normal VN UI so ONLY comic shows */
.stage.comicMode .bg,
.stage.comicMode .spriteLayer,
.stage.comicMode .talkHead,
.stage.comicMode .topbar,
.stage.comicMode .dialogueBox{
  display:none !important;
}

/* Item overlay (dialogue continues, sprites/talkhead still allowed) */
.itemOverlay{
  position:absolute;
  inset:0;
  z-index: 11;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.itemFrame{
  width: min(62%, 520px);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.40)) padding-box,
    var(--g-border) border-box;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
  display:grid;
  place-items:center;
  padding: 18px;
  position:relative;
}
.itemFrame::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 14px,
      rgba(255,255,255,.00) 14px,
      rgba(255,255,255,.00) 28px
    );
  opacity:.35;
  pointer-events:none;
}
.itemFrame img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display:block;
  position:relative;
  z-index:1;
}

/* =========================================
   SMS OVERLAY
   ========================================= */
.smsOverlay{
  position:absolute;
  inset:0;
  z-index: 95;
  display:grid;
  place-items:center;
  padding: 24px;
  pointer-events:none;
}
.smsCard{
  width: min(520px, 92%);
  height: min(86%, 720px);
  border-radius: 18px;
  overflow:hidden;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(18,26,42,.92), rgba(11,18,32,.90)) padding-box,
    var(--g-border) border-box;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
}
.smsHeader{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 16px;
  background:
    radial-gradient(120% 70% at 50% 0%,
      rgba(143,74,255,.20) 0%,
      rgba(255,255,255,.04) 28%,
      rgba(0,0,0,0) 60%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.smsIcon{
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  object-fit:cover;
  background: rgba(0,0,0,.25);
}
.smsTitle{ display:flex; flex-direction:column; line-height:1.1; }
.smsName{ font-weight:700; letter-spacing:.2px; }
.smsSub{ font-size:12px; color: rgba(230,231,240,.65); margin-top:2px; }

.smsBody{
  flex:1;
  padding: 16px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.14));
}
.smsBubble{
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 18px;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  opacity: 0;
  transform: translateY(6px) scale(.985);
  animation: smsPop .16s ease-out forwards;
}
@keyframes smsPop{
  to { opacity:1; transform: translateY(0) scale(1); }
}
.smsIn{ align-self:flex-start; background: rgba(255,255,255,.08); }
.smsOut{ align-self:flex-end; background: rgba(143,74,255,.20); }

/* typing indicator */
.smsTyping{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 0 16px 10px;
  color: rgba(230,231,240,.65);
  font-size: 12px;
}
.smsTyping .dot{
  width:6px; height:6px;
  border-radius:999px;
  background: rgba(230,231,240,.55);
  animation: smsDot 1s infinite ease-in-out;
}
.smsTyping .dot:nth-child(2){ animation-delay:.15s; }
.smsTyping .dot:nth-child(3){ animation-delay:.30s; }
@keyframes smsDot{
  0%, 80%, 100% { transform: translateY(0); opacity:.5; }
  40% { transform: translateY(-3px); opacity:1; }
}
.typingLabel{ opacity:.9; }

.smsReplies{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 12px 16px 10px;
  pointer-events:auto;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.10);
}
.smsReplyBtn{
  text-align:left;
  padding: 12px 14px;
  border-radius: 14px;

  border:1px solid transparent;
  background:
    var(--g-choice) padding-box,
    var(--g-border) border-box;

  color: #fff;
  font-weight:650;
  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 34px rgba(0,0,0,.40);

  position:relative;
  overflow:hidden;
  pointer-events:auto;
}
.smsReplyBtn::before{
  content:"";
  position:absolute; inset:0;
  background: var(--g-sheen);
  pointer-events:none;
  opacity:.85;
}
.smsReplyBtn:active{ transform: translateY(1px); }

.smsInputBar{
  padding: 12px 16px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
}
.smsInputFake{
  border-radius: 999px;
  padding: 10px 14px;
  color: rgba(230,231,240,.55);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

/* SMS mode hides normal VN UI */
.stage.smsMode .topbar,
.stage.smsMode .dialogueBox,
.stage.smsMode .talkHead{
  display:none !important;
}

/* =========================================
   FLASHBACK / MEMORY EFFECT
   ========================================= */
.flashbackOverlay{
  position:absolute;
  inset:0;
  z-index: 20;
  pointer-events:none;
  opacity:0;
  transition: opacity 220ms ease;
}

.flashbackOverlay::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(closest-side at 50% 50%,
      rgba(255,255,255,0.00) 45%,
      rgba(255,255,255,0.06) 62%,
      rgba(255,255,255,0.16) 78%,
      rgba(255,255,255,0.28) 100%),
    radial-gradient(120% 90% at 50% 0%,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.00) 60%),
    linear-gradient(180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02));
  mix-blend-mode: soft-light;
}

.flashbackOverlay::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px);
  opacity:.12;
  mix-blend-mode: overlay;
}

.stage.flashbackMode .flashbackOverlay{
  opacity:1;
}

.stage.flashbackMode .bg{
  filter: contrast(1.0) saturate(0.65) brightness(1.06);
  transform: scale(1.03);
}
.stage.flashbackMode .sprite{
  filter: saturate(0.80) brightness(1.05);
}

.stage.flashbackMode .dialogueBox{
  background: linear-gradient(180deg,
    rgba(10,10,16,0.00) 0%,
    rgba(24,18,48,0.65) 18%,
    rgba(10,8,18,0.94) 100%);
}

/* =========================================
   FX: Sprite + TalkHead animations
   Triggered by JS adding classes.
   ========================================= */

/* Always respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .fx-shake, .fx-shakeHard, .fx-bob, .fx-glitch, .fx-pulse, .fx-wobble{
    animation: none !important;
    transform: none !important;
  }
}

/* --- Shake (soft) --- */
@keyframes fxShake {
  0% { transform: translate(0,0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -2px); }
  80% { transform: translate(1px, 2px); }
  100% { transform: translate(0,0); }
}
.fx-shake{
  animation: fxShake 240ms linear infinite;
}

/* --- Shake (hard) --- */
@keyframes fxShakeHard {
  0% { transform: translate(0,0) rotate(0deg); }
  15% { transform: translate(-4px, 2px) rotate(-0.4deg); }
  30% { transform: translate(4px, -2px) rotate(0.4deg); }
  45% { transform: translate(-3px, -4px) rotate(-0.3deg); }
  60% { transform: translate(3px, 4px) rotate(0.3deg); }
  75% { transform: translate(-2px, 3px) rotate(-0.2deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.fx-shakeHard{
  animation: fxShakeHard 140ms linear infinite;
}

/* --- Bob (breathing / unease) --- */
@keyframes fxBob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
.fx-bob{
  animation: fxBob 1.4s ease-in-out infinite;
}

/* --- Pulse (presence / power) --- */
@keyframes fxPulse {
  0%,100% { transform: scale(1); filter: none; }
  50% { transform: scale(1.012); filter: brightness(1.05); }
}
.fx-pulse{
  animation: fxPulse 1.2s ease-in-out infinite;
}

/* --- Wobble (disoriented) --- */
@keyframes fxWobble {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-0.6deg); }
  50%  { transform: rotate(0.6deg); }
  75%  { transform: rotate(-0.4deg); }
  100% { transform: rotate(0deg); }
}
.fx-wobble{
  animation: fxWobble 1.1s ease-in-out infinite;
}

/* --- Glitch (subtle) --- */
@keyframes fxGlitch {
  0% { transform: translate(0,0); filter: none; }
  20% { transform: translate(1px,0); filter: contrast(1.05); }
  40% { transform: translate(-1px,0); filter: saturate(1.1); }
  60% { transform: translate(2px,0); filter: brightness(1.05); }
  80% { transform: translate(-2px,0); filter: contrast(1.08); }
  100% { transform: translate(0,0); filter: none; }
}
.fx-glitch{
  animation: fxGlitch 180ms steps(2, end) infinite;
}

/* Make sure sprite slots keep their base positioning even when FX adds transforms */
.sprite.slot-center.fx-shake,
.sprite.slot-center.fx-shakeHard,
.sprite.slot-center.fx-bob,
.sprite.slot-center.fx-pulse,
.sprite.slot-center.fx-wobble,
.sprite.slot-center.fx-glitch{
  transform: translateX(-50%); /* keep center alignment */
}

/* TalkHead image also needs to keep its layout while animating */
.talkHead img.fx-shake,
.talkHead img.fx-shakeHard,
.talkHead img.fx-bob,
.talkHead img.fx-pulse,
.talkHead img.fx-wobble,
.talkHead img.fx-glitch{
  will-change: transform, filter;
}


/* =========================================
   Responsive tweaks
   ========================================= */
@media (max-width: 720px){
  :root{
    --talkLeft: 10px;
    --talkH: clamp(170px, 26vh, 230px);
    --talkMaxW: 240px;
    --talkGap: 10px;
  }
  #dialogueBox.shiftForHead{ padding-left: 18px; }
  .text{ font-size:18px; }
}