:root { --kr: "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Nanum Gothic", sans-serif; }
html, body { margin: 0; height: 100%; background: #020306; overflow: hidden; font-family: var(--kr); color: #cfd6e0; }
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#vignette { position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,1) 100%); }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; }

#hud { position: fixed; left: 16px; top: 12px; pointer-events: none; font-size: 14px; line-height: 1.5; text-shadow: 0 0 4px #000, 0 0 2px #000; }
#hud .where { font-size: 15px; color: #e6e0d4; letter-spacing: 0.5px; }
#hud .stamina { width: 140px; height: 3px; background: rgba(255,255,255,0.12); margin: 6px 0 5px; }
#hud .stamina i { display: block; height: 100%; background: #d8cdb6; }
#hud .keys { font-size: 12px; color: #7f8a96; }
#debug { margin-top: 10px; color: #8fdcff; display: none; white-space: pre; font-family: ui-monospace, monospace; font-size: 12px; }

#overlay, #credits { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2,3,8,0.6); cursor: pointer; }
#overlay[hidden], #credits[hidden] { display: none; }
.box { text-align: center; max-width: 660px; padding: 24px; }
h1 { font-size: 64px; letter-spacing: 18px; margin: 0; color: #f1ead8; font-weight: 700; text-shadow: 0 0 22px rgba(255,190,110,0.3); padding-left: 18px; }
.sub-title { margin: 2px 0 18px; font-size: 13px; letter-spacing: 8px; color: #8b7e6a; }
h2 { font-weight: 500; letter-spacing: 4px; }
.tag { color: #aab4c0; margin: 0 0 22px; line-height: 1.8; font-size: 15px; }
#start, #loading { font-size: 18px; letter-spacing: 3px; color: #ffd9a0; animation: pulse 1.6s ease-in-out infinite; }
#loading[hidden], #start[hidden], #menu-buttons[hidden], #btn-continue[hidden] { display: none; }
@keyframes pulse { 50% { opacity: 0.45; } }
#menu-buttons { display: flex; gap: 12px; justify-content: center; margin: 8px 0 6px; }
#records-line { color: #9a8f7c; font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.controls { font-size: 13px; color: #8e98a4; line-height: 1.9; margin-top: 16px; }
.controls b { color: #d9dfe6; font-weight: 500; }
.controls .pad { color: #6f7884; font-size: 12px; }
.hint { color: #8a7461; font-size: 13px; margin-top: 16px; }
.credits a, #credits a { color: #7f8b98; font-size: 12px; }
#credits p { font-size: 13px; color: #aab4c0; line-height: 1.6; }

#subtitle { position: fixed; left: 0; right: 0; bottom: 12%; text-align: center; pointer-events: none; font-size: 22px; color: #ece6da; text-shadow: 0 0 6px #000, 0 0 2px #000; opacity: 0; transition: opacity 0.4s; padding: 0 8%; line-height: 1.6; }
#subtitle .who { display: inline-block; font-size: 13px; color: #9aa6b4; margin-right: 10px; letter-spacing: 1px; vertical-align: 2px; }
#subtitle.behind, #subtitle .behind { color: #d7b9b2; font-style: italic; }
#subtitle.loud, #subtitle .loud { font-size: 28px; color: #ffb4a6; font-weight: 700; font-style: normal; }
#subtitle.tv { color: #ffe08a; }
#subtitle.warn { color: #ff8f80; }
#subtitle .phone { color: #b9d4ff; }
#prompt { position: fixed; left: 0; right: 0; bottom: 22%; text-align: center; pointer-events: none; font-size: 16px; letter-spacing: 1px; color: #ffd9a0; text-shadow: 0 0 4px #000; }

#menu-buttons button, #result button { font-family: var(--kr); background: rgba(20,22,30,0.85); color: #e6dccb; border: 1px solid #5a5040; padding: 12px 20px; min-width: 130px; cursor: pointer; font-size: 16px; letter-spacing: 1px; }
#menu-buttons button:hover, #result button:hover { border-color: #ffd9a0; color: #fff3dd; }
#menu-buttons button small, #result button small { display: block; font-size: 11px; color: #8e98a4; margin-top: 4px; letter-spacing: 0; }
#result { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.88); }
#result[hidden] { display: none; }
#result h2 { font-size: 34px; letter-spacing: 3px; margin: 0 0 18px; color: #efe6d6; font-weight: 500; }
#result-lines div { font-size: 17px; color: #c9cfd6; margin: 6px 0; }
#result-lines .big { font-size: 28px; color: #ffe2b0; margin: 10px 0; }
#result-lines .warn { color: #ff9a8a; }
#result-lines .new { color: #ffd36b; }
#result .buttons { margin-top: 26px; display: flex; gap: 12px; justify-content: center; }