/* ============================================================
   천년의 새벽 — AEON DAWN  스타일
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: #000;
  color: #e8e4da;
  font-family: "Noto Serif KR", "Nanum Myeongjo", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 배경 캔버스 & 시네마 프레임 ---------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#cine-top, #cine-bot {
  position: fixed; left: 0; right: 0; height: 6.5vh; background: #000; z-index: 5;
  transition: transform 1.2s cubic-bezier(.6,0,.3,1);
}
#cine-top { top: 0; } #cine-bot { bottom: 0; }
body.no-cine #cine-top { transform: translateY(-100%); }
body.no-cine #cine-bot { transform: translateY(100%); }

#fader {
  position: fixed; inset: 0; background: #000; z-index: 40; pointer-events: none;
  opacity: 1; transition: opacity 1.1s ease;
}
#fader.clear { opacity: 0; }
#flash {
  position: fixed; inset: 0; background: #fff; z-index: 41; pointer-events: none;
  opacity: 0;
}
#flash.on { animation: flashAnim .5s ease-out; }
@keyframes flashAnim { 0% { opacity: .95; } 100% { opacity: 0; } }

body.shake #game-screen { animation: shakeAnim .45s ease; }
@keyframes shakeAnim {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-9px,4px); } 40% { transform: translate(8px,-5px); }
  60% { transform: translate(-6px,-3px); } 80% { transform: translate(5px,3px); }
}

/* ---------- 타이틀 ---------- */
#title-screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
.t-wrap { text-align: center; animation: fadeUp 2.2s ease both .4s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.t-sub {
  font-size: clamp(11px, 1.4vw, 15px); letter-spacing: .5em; color: #8fb4c9;
  text-shadow: 0 0 14px rgba(90,170,220,.5); margin-bottom: 1.2em;
}
.t-main {
  font-size: clamp(40px, 7.5vw, 96px); font-weight: 600; letter-spacing: .18em;
  color: #f2ecdd;
  text-shadow: 0 0 30px rgba(160,210,255,.35), 0 2px 26px rgba(0,0,0,.9);
}
.t-eng {
  margin-top: .7em; font-size: clamp(10px, 1.2vw, 14px); letter-spacing: .8em;
  color: rgba(220,230,240,.55);
}
.t-menu { margin-top: 3.2em; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.t-menu button {
  width: min(300px, 72vw); padding: 12px 0;
  background: rgba(8,16,26,.55); color: #d9e4ec;
  border: 1px solid rgba(140,180,210,.35); border-radius: 2px;
  font-size: 15px; letter-spacing: .35em; text-indent: .35em;
  backdrop-filter: blur(4px); transition: all .25s;
}
.t-menu button:hover:not(:disabled) {
  background: rgba(60,110,160,.35); border-color: rgba(180,220,255,.8);
  box-shadow: 0 0 18px rgba(110,180,240,.25); color: #fff;
}
.t-menu button:disabled { opacity: .3; cursor: default; }
.t-note { margin-top: 2.4em; font-size: 11px; letter-spacing: .2em; color: rgba(200,210,220,.4); }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: calc(6.5vh + 12px); left: 22px; z-index: 12;
  font-size: 12px; letter-spacing: .22em; color: rgba(210,225,235,.8);
  text-shadow: 0 1px 6px rgba(0,0,0,.9); line-height: 1.9; pointer-events: none;
}
#hud-year { font-size: 14px; color: #cfe2ee; }
#hud-stats { display: flex; gap: 14px; font-size: 11px; color: rgba(180,205,220,.75); }
#hud-stats b { color: #ffe1a8; font-weight: 600; }

/* ---------- 퀵바 ---------- */
#quickbar {
  position: fixed; top: calc(6.5vh + 10px); right: 18px; z-index: 12;
  display: flex; gap: 6px;
}
#quickbar button {
  background: rgba(6,12,20,.55); color: rgba(205,220,232,.85);
  border: 1px solid rgba(130,165,195,.28); border-radius: 2px;
  padding: 5px 11px; font-size: 11.5px; letter-spacing: .12em;
  backdrop-filter: blur(3px); transition: all .2s;
}
#quickbar button:hover { background: rgba(60,110,160,.4); color: #fff; }
#quickbar button.on { background: rgba(190,150,60,.45); border-color: rgba(255,220,150,.7); color: #ffedc8; }

/* ---------- 대화창 ---------- */
#dialog {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(6.5vh + 20px); width: min(1020px, 94vw); z-index: 11;
  background: linear-gradient(180deg, rgba(4,9,16,.72), rgba(2,5,10,.86));
  border: 1px solid rgba(140,175,205,.22); border-radius: 3px;
  padding: 26px 38px 30px; min-height: 148px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  cursor: pointer;
}
#nameplate {
  position: absolute; top: -17px; left: 26px;
  background: rgba(10,20,32,.92); border: 1px solid rgba(150,190,220,.4);
  padding: 5px 20px; font-size: 14.5px; letter-spacing: .2em;
  border-radius: 2px; color: #ffd9a0; text-shadow: 0 0 8px rgba(0,0,0,.8);
}
#text {
  font-size: clamp(15px, 1.7vw, 18.5px); line-height: 1.95; letter-spacing: .02em;
  color: #eae6db; text-shadow: 0 1px 4px rgba(0,0,0,.7);
  min-height: 74px; white-space: pre-wrap;
}
#text .mono { color: #9fd8c8; font-style: italic; }
#next-hint {
  position: absolute; right: 22px; bottom: 12px; font-size: 12px;
  color: rgba(200,220,235,.75); animation: bob 1.4s ease-in-out infinite;
  opacity: 0; transition: opacity .3s;
}
#next-hint.show { opacity: 1; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- 선택지 ---------- */
#choices {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%,-50%);
  z-index: 13; display: flex; flex-direction: column; gap: 12px;
  width: min(660px, 90vw);
}
#choices button {
  background: rgba(6,13,22,.78); color: #dde8f0;
  border: 1px solid rgba(150,190,225,.4); border-radius: 2px;
  padding: 15px 26px; font-size: 15.5px; letter-spacing: .06em; line-height: 1.5;
  text-align: center; backdrop-filter: blur(5px);
  transition: all .22s; animation: fadeUp .5s ease both;
}
#choices button:nth-child(2) { animation-delay: .07s; }
#choices button:nth-child(3) { animation-delay: .14s; }
#choices button:nth-child(4) { animation-delay: .21s; }
#choices button:hover {
  background: rgba(70,125,180,.42); border-color: rgba(200,235,255,.85);
  box-shadow: 0 0 22px rgba(120,190,255,.3); transform: scale(1.02);
}
#choices button .req { display: block; font-size: 11.5px; color: #ffcf8e; margin-top: 4px; letter-spacing: .15em; }
#choices button:disabled { opacity: .35; cursor: default; transform: none; }

/* ---------- 챕터 카드 ---------- */
#chapter-card {
  position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; text-align: center;
}
#cc-no {
  font-size: 14px; letter-spacing: .7em; color: #8fb4c9; margin-bottom: 1.6em;
  animation: fadeUp 1.4s ease both .2s;
}
#cc-title {
  font-size: clamp(30px, 5vw, 58px); font-weight: 600; letter-spacing: .3em;
  color: #f0ead9; text-shadow: 0 0 26px rgba(150,200,250,.3);
  animation: fadeUp 1.6s ease both .7s;
}
#cc-sub {
  margin-top: 2em; font-size: clamp(12px, 1.5vw, 15px); letter-spacing: .3em;
  color: rgba(190,210,225,.6); line-height: 2.1; white-space: pre-line;
  animation: fadeUp 1.8s ease both 1.3s;
}

/* ---------- 엔딩 카드 ---------- */
#ending-card {
  position: fixed; inset: 0; z-index: 31; background: rgba(0,0,0,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; text-align: center;
}
#ec-label { font-size: 13px; letter-spacing: .6em; color: #b9995e; animation: fadeUp 1.5s ease both .3s; }
#ec-title {
  margin-top: 1.2em; font-size: clamp(32px, 5.5vw, 62px); letter-spacing: .28em;
  color: #f4eedb; text-shadow: 0 0 30px rgba(230,190,120,.35);
  animation: fadeUp 1.8s ease both 1s;
}
#ec-sub {
  margin-top: 2em; font-size: 14px; letter-spacing: .25em; line-height: 2.2;
  color: rgba(210,220,230,.65); white-space: pre-line;
  animation: fadeUp 2s ease both 1.8s;
}
#ec-hint { margin-top: 4em; font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.35); animation: fadeUp 2s ease both 3s; }

/* ---------- 오버레이 공통 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.ov-box {
  width: min(680px, 92vw); max-height: 84vh; overflow-y: auto;
  background: rgba(8,14,22,.96); border: 1px solid rgba(150,185,215,.35);
  border-radius: 4px; padding: 30px 34px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.ov-box h3 {
  font-size: 17px; letter-spacing: .4em; color: #cfe0ec; margin-bottom: 22px;
  border-bottom: 1px solid rgba(140,175,205,.25); padding-bottom: 12px;
}
.ov-close {
  margin-top: 22px; width: 100%; padding: 11px 0;
  background: rgba(50,90,130,.35); color: #dce8f2;
  border: 1px solid rgba(150,190,225,.4); border-radius: 2px;
  font-size: 13.5px; letter-spacing: .3em;
}
.ov-close:hover { background: rgba(70,120,170,.5); }

/* 백로그 */
#log-list { display: flex; flex-direction: column; gap: 13px; font-size: 14.5px; line-height: 1.8; }
#log-list .ln b { color: #ffd9a0; margin-right: 10px; font-weight: 600; }
#log-list .ln { color: rgba(225,230,235,.88); border-left: 2px solid rgba(120,160,195,.3); padding-left: 12px; }

/* 저장 슬롯 */
#save-slots { display: flex; flex-direction: column; gap: 10px; }
.slot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: rgba(16,26,40,.6); border: 1px solid rgba(130,165,200,.3);
  border-radius: 2px; padding: 14px 18px; cursor: pointer; transition: all .2s;
}
.slot:hover { background: rgba(50,95,140,.35); border-color: rgba(180,220,255,.6); }
.slot .s-name { font-size: 14px; color: #e2eaf1; letter-spacing: .1em; }
.slot .s-info { font-size: 12px; color: rgba(180,200,215,.6); letter-spacing: .05em; }
.slot .s-del {
  background: none; border: 1px solid rgba(200,120,120,.4); color: rgba(230,150,150,.8);
  font-size: 11px; padding: 4px 10px; border-radius: 2px;
}
.slot .s-del:hover { background: rgba(160,60,60,.3); }
.code-row { display: flex; gap: 10px; margin-top: 16px; }
.code-row button {
  flex: 1; padding: 10px 0; font-size: 12.5px; letter-spacing: .15em;
  background: rgba(30,50,75,.5); color: #cfe0ec;
  border: 1px solid rgba(140,175,210,.35); border-radius: 2px;
}
.code-row button:hover { background: rgba(55,95,140,.5); }
#code-area {
  width: 100%; margin-top: 12px; background: rgba(4,8,14,.9); color: #9fd8c8;
  border: 1px solid rgba(120,160,190,.35); border-radius: 2px;
  font-family: Consolas, monospace; font-size: 20px; letter-spacing: .18em;
  text-align: center; padding: 12px 10px; resize: none; text-transform: uppercase;
}
#code-hint {
  margin-top: 8px; font-size: 12px; letter-spacing: .05em;
  color: rgba(190,210,225,.65); line-height: 1.7;
}

/* 설정 */
.set-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 2px; font-size: 14px; letter-spacing: .1em; color: #d5e0ea;
  border-bottom: 1px solid rgba(120,150,180,.14);
}
.set-row input[type=range] { width: 52%; accent-color: #7fb8e0; }
.set-row select {
  background: rgba(14,24,38,.9); color: #d5e0ea; border: 1px solid rgba(140,175,210,.4);
  padding: 6px 10px; border-radius: 2px; font-family: inherit;
}

/* 엔딩 기록 */
#end-list { display: flex; flex-direction: column; gap: 10px; }
.end-item {
  display: flex; justify-content: space-between; align-items: baseline;
  background: rgba(16,26,40,.55); border: 1px solid rgba(130,165,200,.28);
  border-radius: 2px; padding: 14px 18px;
}
.end-item .e-name { font-size: 15px; letter-spacing: .2em; color: #f0e6cf; }
.end-item .e-desc { font-size: 12px; color: rgba(185,205,220,.6); }
.end-item.locked .e-name { color: rgba(150,160,170,.5); }
.end-item.locked .e-desc { color: rgba(140,150,160,.4); }

/* ---------- 모바일 ---------- */
@media (max-width: 720px) {
  #cine-top, #cine-bot { height: 4vh; }
  #dialog { padding: 20px 20px 26px; bottom: calc(4vh + 10px); min-height: 128px; }
  #text { font-size: 15px; line-height: 1.85; }
  #quickbar { top: auto; bottom: 2px; right: 4px; z-index: 20; gap: 3px; }
  #quickbar button { padding: 4px 7px; font-size: 10px; }
  #hud { top: calc(4vh + 8px); left: 12px; font-size: 10.5px; }
  #hud-stats { gap: 8px; font-size: 10px; }
  .t-menu button { width: 78vw; }
  .ov-box { padding: 22px 18px; }
}