/* ══════════════════════════════════════════════
   메아리의 정원 — Echo Garden
   mobile-first visual novel stylesheet
   ══════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; background:#05060e; touch-action:manipulation; }
body {
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  color:#dfe6f2; user-select:none; -webkit-user-select:none;
}

#stage { position:fixed; inset:0; overflow:hidden; }

/* ── background layers (crossfade) ── */
.bglayer { position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
.bglayer.show { opacity:1; }
.bglayer svg { width:100%; height:100%; display:block; }

/* ── sprites ── */
#sprites { position:absolute; inset:0; pointer-events:none; }
.sprite {
  position:absolute; bottom:24vh; width:min(46vw,340px); height:min(72vh,560px);
  opacity:0; transition:opacity .9s ease, transform .9s ease; transform:translateY(12px);
}
.sprite.show { opacity:1; transform:translateY(0); }
.sprite svg { width:100%; height:100%; }
.sprite.pos-left  { left:2vw; }
.sprite.pos-right { right:2vw; }
.sprite.pos-center{ left:50%; transform:translate(-50%,12px); }
.sprite.pos-center.show { transform:translate(-50%,0); }
.sprite.dimmed { filter:brightness(.45) saturate(.6); }
.sprite.floaty { animation:floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{margin-bottom:0} 50%{margin-bottom:10px} }

/* ── dialogue box ── */
#uiRoot { position:absolute; inset:0; pointer-events:none; z-index:52; }
#textwrap {
  position:absolute; left:0; right:0; bottom:0; pointer-events:auto;
  padding:0 max(12px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center;
  transition:all .8s ease;
}
#namebox {
  align-self:flex-start; margin-left:6px; margin-bottom:-1px; z-index:2;
  padding:5px 16px 4px; border-radius:10px 10px 0 0;
  font-size:15px; font-weight:700; letter-spacing:.06em;
  background:linear-gradient(180deg,rgba(20,28,52,.95),rgba(14,20,40,.95));
  border:1px solid rgba(120,160,255,.25); border-bottom:none;
  color:#8fd7ff; display:none; max-width:60%;
}
#textbox {
  width:100%; max-width:760px; min-height:118px;
  background:linear-gradient(180deg,rgba(10,14,30,.88),rgba(6,9,20,.94));
  border:1px solid rgba(120,160,255,.22); border-radius:14px;
  padding:14px 18px 26px; position:relative;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 -6px 30px rgba(0,0,0,.45);
}
#dialogue { font-size:17px; line-height:1.75; word-break:keep-all; white-space:pre-wrap; min-height:60px; }
#dialogue .mono { color:#b9c3dd; font-style:italic; font-family:'Noto Serif KR',Georgia,serif; }
#dialogue .sys  { color:#7de8a0; font-family:'Cascadia Mono','D2Coding',Consolas,monospace; font-size:15px; }
#next {
  position:absolute; right:14px; bottom:8px; font-size:13px; color:#9fb8ff;
  animation:blink 1.2s ease-in-out infinite; display:none;
}
@keyframes blink { 0%,100%{opacity:.15} 50%{opacity:1} }

/* speaker colors */
.nm-claude   { color:#8fd7ff !important; }
.nm-hayeon   { color:#ffc87a !important; }
.nm-jiun     { color:#9fb0c8 !important; }
.nm-archi    { color:#e6ecff !important; }
.nm-sys      { color:#7de8a0 !important; }
.nm-unknown  { color:#d78fff !important; }

/* ── choices ── */
#choices {
  position:absolute; inset:0; display:none; z-index:53;
  flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:rgba(3,5,12,.55); backdrop-filter:blur(3px); pointer-events:auto;
  padding:20px;
}
.choicebtn {
  width:100%; max-width:520px; padding:15px 20px;
  background:linear-gradient(180deg,rgba(22,30,58,.95),rgba(13,18,38,.95));
  border:1px solid rgba(130,170,255,.35); border-radius:12px;
  color:#e8eeff; font-size:16px; line-height:1.5; word-break:keep-all;
  cursor:pointer; text-align:left; transition:transform .12s, border-color .2s, box-shadow .2s;
  font-family:inherit;
}
.choicebtn:active { transform:scale(.97); }
.choicebtn:hover { border-color:#9fd0ff; box-shadow:0 0 18px rgba(110,170,255,.25); }
.choicebtn.locked { opacity:.38; filter:grayscale(.6); }
.choicebtn small { display:block; color:#8fa0c8; font-size:12px; margin-top:4px; }

/* ── top menu ── */
#menubar {
  position:absolute; top:max(8px, env(safe-area-inset-top)); right:10px; z-index:40;
  display:flex; gap:8px; pointer-events:auto;
}
.mbtn {
  padding:7px 12px; font-size:13px; color:#aebadd; background:rgba(10,14,30,.6);
  border:1px solid rgba(130,160,230,.25); border-radius:9px; cursor:pointer;
  font-family:inherit; backdrop-filter:blur(4px);
}
.mbtn.on { color:#0b1020; background:#8fd7ff; border-color:#8fd7ff; font-weight:700; }
#chapterTag {
  position:absolute; top:max(10px, env(safe-area-inset-top)); left:12px; z-index:40;
  font-size:12px; letter-spacing:.12em; color:#6f7ea6; pointer-events:none;
}

/* ── overlays ── */
.overlay {
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(4,6,14,.96); overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:max(20px, env(safe-area-inset-top)) 20px 40px;
}
.overlay.show { display:block; }
.overlay h2 { font-size:19px; color:#8fd7ff; letter-spacing:.15em; margin:8px 0 18px; text-align:center; }
.ovClose {
  position:sticky; top:0; float:right; padding:8px 14px; margin-left:10px;
  background:rgba(20,28,55,.9); color:#cdd8f5; border:1px solid rgba(130,160,230,.4);
  border-radius:10px; font-size:14px; cursor:pointer; font-family:inherit; z-index:5;
}

/* backlog */
.logline { max-width:680px; margin:0 auto 14px; font-size:15px; line-height:1.65; word-break:keep-all; }
.logline b { display:block; font-size:13px; margin-bottom:2px; letter-spacing:.05em; }

/* settings */
.setrow { max-width:520px; margin:0 auto 22px; }
.setrow h3 { font-size:14px; color:#9fb0d8; margin-bottom:10px; letter-spacing:.1em; }
.segbtns { display:flex; gap:8px; flex-wrap:wrap; }
.segbtns button {
  flex:1; min-width:70px; padding:11px 8px; font-size:14px; font-family:inherit;
  background:rgba(16,22,44,.9); color:#c2cdea; border:1px solid rgba(130,160,230,.3);
  border-radius:10px; cursor:pointer;
}
.segbtns button.on { background:#8fd7ff; color:#0b1020; font-weight:700; border-color:#8fd7ff; }

/* ── title screen ── */
#title {
  position:fixed; inset:0; z-index:70; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  background:#04050c; overflow:hidden;
}
#title.show { display:flex; }
#titleBg { position:absolute; inset:0; }
#titleBg svg { width:100%; height:100%; }
#titleInner { position:relative; z-index:2; text-align:center; padding:20px; animation:tfade 2.2s ease; }
@keyframes tfade { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
#titleSub  { font-size:13px; letter-spacing:.55em; color:#6d7ea8; margin-bottom:14px; text-indent:.55em;}
#titleMain {
  font-size:clamp(34px,9vw,58px); font-weight:800; letter-spacing:.14em;
  background:linear-gradient(120deg,#9fd7ff 10%,#e8f2ff 45%,#ffc87a 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 44px rgba(120,180,255,.25); margin-bottom:6px;
}
#titleEn { font-size:12px; letter-spacing:.5em; color:#55648c; margin-bottom:42px; text-indent:.5em;}
#titleMenu { display:flex; flex-direction:column; gap:11px; width:min(78vw,300px); margin:0 auto; }
.tbtn {
  padding:14px 18px; font-size:16px; letter-spacing:.2em; font-family:inherit;
  background:rgba(14,20,42,.75); color:#dfe8ff; border:1px solid rgba(140,175,255,.3);
  border-radius:12px; cursor:pointer; transition:all .2s; backdrop-filter:blur(4px);
}
.tbtn:hover { border-color:#9fd0ff; box-shadow:0 0 22px rgba(110,170,255,.28); }
.tbtn:active { transform:scale(.97); }
.tbtn:disabled { opacity:.35; cursor:default; box-shadow:none; }
#titleVer { position:absolute; bottom:max(12px, env(safe-area-inset-bottom)); font-size:11px; color:#3d4664; z-index:2; }

/* chapter / ending gallery cards */
.gallery { max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.gcard {
  padding:15px 18px; border-radius:12px; text-align:left; font-family:inherit; cursor:pointer;
  background:rgba(14,20,42,.85); border:1px solid rgba(140,175,255,.28); color:#dfe8ff;
}
.gcard:disabled { opacity:.35; cursor:default; }
.gcard b { font-size:16px; letter-spacing:.06em; }
.gcard span { display:block; font-size:13px; color:#8fa0c8; margin-top:3px; }
.gcard.ending b { color:#ffc87a; }

/* creator's note */
#noteBody { max-width:640px; margin:0 auto; font-size:15px; line-height:1.9; color:#c9d3ec; word-break:keep-all; }
#noteBody p { margin-bottom:16px; }
#noteBody .sig { text-align:right; color:#8fd7ff; margin-top:26px; }

/* ── cinematic canvas ── */
#cineWrap { position:fixed; inset:0; z-index:80; display:none; background:#000; }
#cineWrap.show { display:block; }
#cine { width:100%; height:100%; display:block; }
#cineSkip {
  position:absolute; right:16px; bottom:max(16px, env(safe-area-inset-bottom));
  color:#7c8db5; font-size:13px; letter-spacing:.1em; animation:blink 1.6s infinite;
}

/* ── chapter card ── */
#card {
  position:fixed; inset:0; z-index:75; display:none; background:#04050c;
  align-items:center; justify-content:center; flex-direction:column; text-align:center;
}
#card.show { display:flex; }
#cardNum { font-size:14px; letter-spacing:.6em; color:#6d7ea8; margin-bottom:16px; text-indent:.6em; animation:cardIn 1.4s ease both; }
#cardTitle { font-size:clamp(26px,7vw,42px); font-weight:700; letter-spacing:.2em; color:#e8efff; animation:cardIn 1.4s .25s ease both; }
#cardLine { width:0; height:1px; background:linear-gradient(90deg,transparent,#8fd7ff,transparent); margin-top:22px; animation:lineIn 1.6s .5s ease both; }
@keyframes cardIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes lineIn { to{width:min(60vw,300px)} }

/* ── effects ── */
@keyframes shakeA { 0%,100%{transform:none} 20%{transform:translate(-7px,3px)} 40%{transform:translate(6px,-4px)} 60%{transform:translate(-5px,-3px)} 80%{transform:translate(4px,3px)} }
#stage.shake { animation:shakeA .55s ease; }

#glitchveil { position:fixed; inset:0; z-index:55; pointer-events:none; display:none; mix-blend-mode:screen; }
#glitchveil.show { display:block; animation:gveil .7s steps(2) infinite; }
@keyframes gveil {
  0%{ background:linear-gradient(0deg,transparent 40%,rgba(255,60,190,.14) 41%,transparent 43%,transparent 68%,rgba(60,255,220,.12) 69%,transparent 71%); }
  50%{ background:linear-gradient(0deg,transparent 12%,rgba(60,255,220,.13) 13%,transparent 15%,transparent 84%,rgba(255,60,190,.15) 85%,transparent 87%); }
}
#stage.glitchpos { animation:gpos .35s steps(3) infinite; }
@keyframes gpos { 0%{transform:translateX(0)} 33%{transform:translateX(-6px)} 66%{transform:translateX(5px)} }

/* meta-flip: the interface turns toward the player */
body.flip #textwrap { bottom:auto; top:0; padding-top:max(52px, env(safe-area-inset-top)); }
body.flip #textbox { border-radius:14px; border-color:rgba(255,200,122,.35); background:linear-gradient(180deg,rgba(28,20,10,.9),rgba(18,12,6,.95)); }
body.flip #namebox { border-color:rgba(255,200,122,.4); background:linear-gradient(180deg,rgba(50,36,18,.95),rgba(34,24,12,.95)); }
body.flip #next { color:#ffc87a; }

/* fade veil for scene transitions — lives INSIDE #stage so the dialogue UI (z-index 52) stays readable above it */
#fadeveil { position:absolute; inset:0; z-index:45; background:#000; opacity:0; pointer-events:none; transition:opacity 1s ease; }
#fadeveil.show { opacity:1; }

/* credits */
#credits { position:fixed; inset:0; z-index:78; display:none; background:#000; overflow:hidden; }
#credits.show { display:block; }
#creditRoll {
  position:absolute; left:0; right:0; top:100%; text-align:center;
  font-size:15px; line-height:2.1; color:#cfd9f2; letter-spacing:.08em; word-break:keep-all;
}
#creditRoll h3 { font-size:22px; letter-spacing:.3em; color:#8fd7ff; margin:34px 0 6px; }
#creditRoll .dim { color:#5d6b92; font-size:13px; }
#creditRoll .big {
  font-size:26px; font-weight:800; letter-spacing:.2em; margin:20px 0;
  background:linear-gradient(120deg,#9fd7ff,#ffc87a); -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (max-width:520px){
  .sprite { width:min(56vw,300px); bottom:26vh; }
  #dialogue { font-size:16px; }
  .mbtn { padding:6px 9px; font-size:12px; }
}
@media (orientation:landscape) and (max-height:500px){
  .sprite { bottom:20vh; height:66vh; }
  #textbox { min-height:96px; }
  #dialogue { min-height:44px; }
}