@font-face {
  font-family: 'tvn';
  src: url('assets/fonts/tvn-bold.ttf') format('truetype');
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  background: #050505;
  color: #e8e2da;
  font-family: 'tvn', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

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

#bgWrap { position: absolute; inset: 0; }
#bg {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 24s ease-in-out infinite alternate;
  filter: brightness(.85) saturate(.85);
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07) translateY(-1.5%); }
}

#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(0,0,0,.72) 100%);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { opacity: .9; } 50% { opacity: 1; }
}

#flash {
  position: absolute; inset: 0; background: #7a0000;
  opacity: 0; pointer-events: none; z-index: 40;
}
#flash.on { animation: flashAnim .5s ease-out; }
@keyframes flashAnim { 0% {opacity:.85;} 100% {opacity:0;} }

#fader {
  position: absolute; inset: 0; background: #000; z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
#fader.on { opacity: 1; pointer-events: all; }

/* HUD */
#hud {
  position: absolute; z-index: 30;
  top: env(safe-area-inset-top, 0); left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
}
.hudBtn {
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15);
  color: #cfc8bf; font-size: 17px; width: 40px; height: 40px;
  border-radius: 10px; cursor: pointer;
}
#clock {
  font-size: 20px; letter-spacing: 2px; color: #b8322f;
  text-shadow: 0 0 12px rgba(160,20,20,.8);
  font-variant-numeric: tabular-nums;
}

/* 화면 공통 */
.screen { position: absolute; inset: 0; z-index: 20; display: flex; }

/* 타이틀 */
#titleScreen { align-items: center; justify-content: center; text-align: center; }
.titleBox { padding: 24px; width: min(92vw, 460px); }
.titleSub { font-size: 18px; color: #9b958c; letter-spacing: 10px; margin-bottom: 6px; }
.titleMain {
  font-size: clamp(38px, 11vw, 62px); color: #a01414; line-height: 1.2;
  text-shadow: 0 0 24px rgba(160,20,20,.55); margin-bottom: 14px;
}
.titleWarn { font-size: 13px; color: #6f6a63; margin-bottom: 26px; }
.titleBtns { display: flex; flex-direction: column; gap: 12px; }

.mBtn {
  font-family: inherit; font-size: 17px; padding: 15px 18px;
  background: rgba(12,8,8,.82); color: #d8d2c9;
  border: 1px solid rgba(160,60,50,.45); border-radius: 12px;
  cursor: pointer; transition: background .2s, transform .1s;
  min-height: 52px;
}
.mBtn:active { transform: scale(.97); background: rgba(60,10,10,.9); }
.mBtn.primary { background: rgba(96,14,14,.88); border-color: #a03a30; color: #f2ece2; }
.mBtn.warn { border-color: #703030; color: #c98; }

/* 게임 화면: 하단 시트 */
#gameScreen { align-items: flex-end; }
#sheet {
  width: 100%;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(to top, rgba(0,0,0,.94) 55%, rgba(0,0,0,.75) 82%, transparent);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 42vh; justify-content: flex-end;
}
#speaker { font-size: 14px; color: #a01414; letter-spacing: 2px; }
#narration {
  font-size: 18px; line-height: 1.75; color: #e8e2da;
  text-shadow: 1px 1px 3px #000;
  min-height: 3.5em;
  white-space: pre-wrap;
}
#narration.special {
  font-size: 26px; color: #c22; line-height: 1.5;
  text-shadow: 0 0 14px rgba(190,30,30,.7);
}
#noteBadge {
  font-size: 14px; color: #b8a76a; border: 1px dashed rgba(184,167,106,.5);
  padding: 8px 12px; border-radius: 8px; align-self: flex-start;
  background: rgba(30,26,12,.5);
}
#choices { display: flex; flex-direction: column; gap: 10px; }
#choices .mBtn { text-align: left; font-size: 16px; line-height: 1.45; opacity: 0; animation: riseIn .4s ease forwards; }
#choices .mBtn:nth-child(2) { animation-delay: .08s; }
#choices .mBtn:nth-child(3) { animation-delay: .16s; }
#choices .mBtn:nth-child(4) { animation-delay: .24s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none; } }

/* 엔딩 카드 */
#endingScreen { align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,.8); }
.endCard { padding: 26px; width: min(92vw, 440px); }
#endType { font-size: 14px; letter-spacing: 6px; color: #8b857c; margin-bottom: 10px; }
#endTitle { font-size: clamp(30px, 9vw, 46px); color: #a01414; margin-bottom: 16px; text-shadow: 0 0 20px rgba(160,20,20,.6); }
#endTitle.good { color: #c9b46a; text-shadow: 0 0 20px rgba(200,180,100,.45); }
#endDesc { font-size: 16px; line-height: 1.7; color: #b6afa5; margin-bottom: 28px; white-space: pre-wrap; }

/* 모달 */
.modal {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center;
}
.modalBox {
  width: min(90vw, 420px); max-height: 78vh; overflow-y: auto;
  background: #100d0c; border: 1px solid rgba(160,60,50,.4); border-radius: 16px;
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
}
.modalBox h3 { color: #c8433a; font-size: 20px; margin-bottom: 4px; }
#galleryList { list-style: none; display: flex; flex-direction: column; gap: 8px; }
#galleryList li {
  padding: 10px 12px; border-radius: 8px; font-size: 15px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #cfc8bf;
}
#galleryList li.locked { color: #4d4842; }
#galleryList li.good { border-color: rgba(200,180,100,.4); color: #c9b46a; }
.setRow {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; padding: 10px 4px; color: #cfc8bf;
}
.setRow input { width: 22px; height: 22px; accent-color: #a01414; }

/* 이펙트 */
.shake { animation: shakeAnim .45s ease-in-out; }
@keyframes shakeAnim {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-9px, 4px); } 30% { transform: translate(8px, -5px); }
  45% { transform: translate(-7px, -3px); } 60% { transform: translate(6px, 5px); }
  75% { transform: translate(-4px, 2px); } 90% { transform: translate(3px, -2px); }
}

.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0;
  overflow: hidden; opacity: .75; pointer-events: none;
}
.glitch::before { color: #0ff; transform: translate(-2px, 1px); clip-path: inset(20% 0 40% 0); animation: glitchA 2.4s steps(2) infinite; }
.glitch::after  { color: #f22; transform: translate(2px, -1px); clip-path: inset(55% 0 15% 0); animation: glitchB 1.9s steps(2) infinite; }
@keyframes glitchA {
  0%,88% { clip-path: inset(20% 0 40% 0); transform: translate(-2px,1px); }
  90% { clip-path: inset(5% 0 80% 0); transform: translate(-6px,2px); }
  94% { clip-path: inset(60% 0 10% 0); transform: translate(4px,-2px); }
  98% { clip-path: inset(30% 0 50% 0); transform: translate(-3px,0); }
}
@keyframes glitchB {
  0%,86% { clip-path: inset(55% 0 15% 0); transform: translate(2px,-1px); }
  89% { clip-path: inset(10% 0 70% 0); transform: translate(6px,1px); }
  93% { clip-path: inset(75% 0 5% 0); transform: translate(-5px,2px); }
  97% { clip-path: inset(40% 0 35% 0); transform: translate(2px,-2px); }
}

#narration.glitchText { animation: textJitter .12s steps(2) infinite; color: #d8bdbd; }
@keyframes textJitter {
  0% { transform: translate(0,0) skewX(0deg); }
  50% { transform: translate(1px,-1px) skewX(-.6deg); }
  100% { transform: translate(-1px,1px) skewX(.4deg); }
}

/* 데스크톱에서도 폰 비율 유지 느낌 */
@media (min-width: 820px) {
  #sheet { max-width: 620px; margin: 0 auto; border-radius: 18px 18px 0 0; }
}