@font-face { font-family: 'BlackHan'; src: url('../../assets/fonts/BlackHanSans-Regular.ttf'); font-display: block; }
@font-face { font-family: 'NotoKR'; src: url('../../assets/fonts/NotoSansKR.ttf'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Raj'; src: url('../../assets/fonts/Rajdhani-SemiBold.ttf'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Raj'; src: url('../../assets/fonts/Rajdhani-Bold.ttf'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Stencil'; src: url('../../assets/fonts/BlackOpsOne-Regular.ttf'); font-display: block; }
@font-face { font-family: 'Mono'; src: url('../../assets/fonts/ShareTechMono-Regular.ttf'); font-display: block; }

:root { --amber: #ffb347; --red: #ff3b2f; --ink: rgba(8, 12, 15, 0.82); --line: rgba(255, 255, 255, 0.16); }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: 'NotoKR', 'Apple SD Gothic Neo', sans-serif; color: #fff; user-select: none; -webkit-user-select: none; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
.hidden { display: none !important; }

/* ------------------------------------------------------------------ HUD */
#hud { position: absolute; inset: 0; transition: opacity 0.4s; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
#hud.off { opacity: 0; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 2px rgba(0, 0, 0, 0.9); }
#crosshair .d { width: 2px; height: 2px; left: -1px; top: -1px; border-radius: 50%; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0; transform: rotate(45deg) scale(1); }
#hitmarker::before, #hitmarker::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 3px #000; }
#hitmarker::before { left: 16px; top: 0; width: 2px; height: 34px; -webkit-mask: linear-gradient(#000 32%, transparent 32%, transparent 68%, #000 68%); mask: linear-gradient(#000 32%, transparent 32%, transparent 68%, #000 68%); }
#hitmarker::after { top: 16px; left: 0; height: 2px; width: 34px; -webkit-mask: linear-gradient(90deg, #000 32%, transparent 32%, transparent 68%, #000 68%); mask: linear-gradient(90deg, #000 32%, transparent 32%, transparent 68%, #000 68%); }
#hitmarker.kill::before, #hitmarker.kill::after { background: var(--red); }
#hitmarker.show { animation: hm 0.28s ease-out; }
@keyframes hm { 0% { opacity: 1; transform: rotate(45deg) scale(1.35); } 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(45deg) scale(0.95); } }

#ammo { position: absolute; right: 3.2vw; bottom: 4.5vh; text-align: right; font-family: 'Raj'; }
#ammo .name { font-family: 'NotoKR'; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; opacity: 0.85; }
#ammo .count { font-size: 62px; font-weight: 700; line-height: 0.95; letter-spacing: 0.01em; }
#ammo .count small { font-size: 26px; font-weight: 600; opacity: 0.7; margin-left: 6px; }
#ammo .count.low { color: var(--red); }
#ammo .bar { height: 2px; background: linear-gradient(90deg, transparent, #fff); margin: 6px 0 8px; opacity: 0.6; }
#ammo .extra { font-size: 20px; font-weight: 700; display: flex; gap: 14px; justify-content: flex-end; align-items: center; opacity: 0.9; }
#ammo .extra img { height: 20px; vertical-align: middle; margin-right: 4px; filter: drop-shadow(0 1px 2px #000); }
#ammo .slots { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 6px; }
#ammo .slots img { height: 22px; opacity: 0.35; filter: drop-shadow(0 1px 2px #000); }
#ammo .slots img.on { opacity: 1; }

#compass { position: absolute; left: 50%; top: 2.2vh; transform: translateX(-50%); width: 520px; height: 44px; }
#objective { position: absolute; left: 3.2vw; top: 6vh; max-width: 30vw; }
#objective .tag { font-family: 'Raj'; font-weight: 700; font-size: 13px; letter-spacing: 0.3em; color: var(--amber); }
#objective .text { font-size: 19px; font-weight: 600; margin-top: 2px; line-height: 1.35; }
#objective .sub { font-size: 14px; opacity: 0.75; margin-top: 3px; }
#objective.flash .text { animation: obj 1.2s ease-out; }
@keyframes obj { 0% { color: var(--amber); transform: translateX(-10px); opacity: 0; } 30% { opacity: 1; transform: none; } 100% { color: #fff; } }
#timer { position: absolute; left: 50%; top: 9vh; transform: translateX(-50%); font-family: 'Raj'; font-weight: 700; font-size: 46px; letter-spacing: 0.06em; color: var(--amber); }
#timer.crit { color: var(--red); animation: blink 0.5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.45; } }
.marker { position: absolute; left: 0; top: 0; text-align: center; font-family: 'Raj'; font-weight: 700; font-size: 14px; white-space: nowrap; will-change: transform; }
.marker .dia { width: 14px; height: 14px; border: 2px solid var(--amber); transform: rotate(45deg); margin: 0 auto 6px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.8), inset 0 0 4px rgba(255, 179, 71, 0.6); background: rgba(255, 179, 71, 0.18); }
.marker .lbl { font-family: 'NotoKR'; font-size: 12px; font-weight: 600; opacity: 0.9; }
#prompt { position: absolute; left: 50%; top: 61%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
#prompt .key { position: relative; width: 34px; height: 34px; border: 2px solid #fff; border-radius: 5px; font-family: 'Raj'; font-weight: 700; font-size: 20px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); }
#prompt .key::after { content: ''; position: absolute; left: -2px; bottom: -2px; height: 4px; width: calc(var(--p, 0) * (100% + 4px)); background: var(--amber); border-radius: 0 0 4px 4px; }
#subtitle { position: absolute; left: 50%; bottom: 15vh; transform: translateX(-50%); max-width: 62vw; text-align: center; font-size: 21px; font-weight: 500; line-height: 1.45; opacity: 0; transition: opacity 0.25s; }
#subtitle.show { opacity: 1; }
#subtitle b { color: var(--amber); font-weight: 700; margin-right: 8px; }
#subtitle b.enemy { color: var(--red); }
#notify { position: absolute; left: 50%; top: 25vh; transform: translateX(-50%); text-align: center; }
#notify div { font-size: 16px; font-weight: 600; letter-spacing: 0.05em; animation: note 2.6s ease-out forwards; }
@keyframes note { 0% { opacity: 0; transform: translateY(8px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#hint { position: absolute; left: 3.2vw; bottom: 5vh; font-size: 15px; font-weight: 500; opacity: 0; transition: opacity 0.4s; line-height: 1.7; }
#hint.show { opacity: 0.92; }
#hint kbd { font-family: 'Raj'; font-weight: 700; font-size: 15px; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 4px; padding: 0 7px; margin-right: 6px; background: rgba(0, 0, 0, 0.35); }
#dmg { position: absolute; inset: 0; }
#dmg i { position: absolute; left: 50%; top: 50%; width: 180px; height: 46px; margin: -150px 0 0 -90px; transform-origin: 90px 150px; background: radial-gradient(ellipse at 50% 100%, rgba(255, 40, 30, 0.95), rgba(255, 30, 20, 0) 70%); border-radius: 50%; }
#aware { position: absolute; inset: 0; }
#aware i { position: absolute; left: 50%; top: 50%; width: 34px; height: 12px; margin: -100px 0 0 -17px; transform-origin: 17px 100px; }
#aware i::before { content: ''; position: absolute; inset: 0; clip-path: polygon(0 100%, 50% 0, 100% 100%, 82% 100%, 50% 34%, 18% 100%); background: rgba(255, 255, 255, 0.35); }
#aware i::after { content: ''; position: absolute; inset: 0; clip-path: polygon(0 100%, 50% 0, 100% 100%, 82% 100%, 50% 34%, 18% 100%); background: var(--c, #fff); -webkit-mask: linear-gradient(90deg, #000 var(--f, 0%), transparent var(--f, 0%)); mask: linear-gradient(90deg, #000 var(--f, 0%), transparent var(--f, 0%)); }
#nade { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -150px 0 0 -23px; transform-origin: 23px 150px; opacity: 0; }
#nade img { width: 46px; filter: drop-shadow(0 0 6px var(--red)); }
#letter i { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 0.7s ease; }
#letter i:first-child { top: 0; } #letter i:last-child { bottom: 0; }
#letter.on i { height: 11.5vh; }
#intro { position: absolute; left: 5vw; bottom: 16vh; font-family: 'Mono', 'NotoKR'; font-size: 20px; line-height: 1.6; letter-spacing: 0.06em; text-shadow: 0 0 8px rgba(0, 0, 0, 0.9); }
#intro .big { font-family: 'BlackHan'; font-size: 44px; letter-spacing: 0.08em; color: #fff; }
#intro .cur::after { content: '▌'; animation: blink 0.6s steps(2) infinite; color: var(--amber); }
#nvg { position: absolute; right: 3.2vw; top: 6vh; font-family: 'Mono'; font-size: 13px; color: #7dffa0; letter-spacing: 0.2em; opacity: 0; }
#nvg.on { opacity: 0.9; }
#stance { position: absolute; right: 3.2vw; bottom: 21vh; font-family: 'Raj'; font-weight: 700; font-size: 13px; letter-spacing: 0.25em; opacity: 0.6; }
#debug { position: absolute; left: 8px; bottom: 6px; font: 11px 'Mono', monospace; opacity: 0.6; white-space: pre; }

/* ------------------------------------------------------------------ 화면(메뉴) */
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex; opacity: 0; transition: opacity 0.5s; visibility: hidden; }
.screen.on { opacity: 1; visibility: visible; }
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 6, 9, 0.93) 0%, rgba(2, 6, 9, 0.62) 34%, rgba(2, 6, 9, 0.08) 62%), linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent 30%); }
#menu .bg { animation: kenburns 40s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.11) translate(-1.6%, -1.2%); } }
.col { position: relative; margin: auto 0 9vh 6.5vw; width: min(520px, 42vw); }
.logo .kr { font-family: 'BlackHan'; font-size: clamp(54px, 7vw, 104px); line-height: 1; letter-spacing: 0.04em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8); }
.logo .en { font-family: 'Stencil'; font-size: clamp(13px, 1.25vw, 20px); letter-spacing: 0.4em; white-space: nowrap; color: var(--amber); margin: 12px 0 0 4px; }
.logo .rule { width: 100%; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); margin: 22px 0 26px; }
.btns { display: flex; flex-direction: column; gap: 4px; }
.btn { all: unset; cursor: pointer; font-size: 21px; font-weight: 600; letter-spacing: 0.08em; padding: 11px 18px; border-left: 3px solid transparent; color: rgba(255, 255, 255, 0.74); transition: all 0.14s; display: flex; justify-content: space-between; align-items: center; }
.btn:hover, .btn.sel { color: #fff; border-left-color: var(--amber); background: linear-gradient(90deg, rgba(255, 179, 71, 0.2), transparent); padding-left: 26px; }
.btn { justify-content: flex-start; gap: 18px; }
.btn small { font-family: 'NotoKR'; font-weight: 700; font-size: 15px; color: var(--amber); letter-spacing: 0.1em; }
.btn.primary { font-size: 27px; color: #fff; }
.foot { position: absolute; left: 6.5vw; bottom: 2.6vh; font-size: 12px; opacity: 0.5; letter-spacing: 0.06em; }
.panel { position: relative; margin: auto; width: min(880px, 86vw); max-height: 86vh; overflow: auto; background: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--amber); padding: 30px 38px; backdrop-filter: blur(10px); }
.panel h2 { font-family: 'BlackHan'; font-size: 34px; font-weight: 400; margin: 0 0 4px; letter-spacing: 0.06em; }
.panel h3 { font-family: 'Raj'; font-weight: 700; font-size: 13px; letter-spacing: 0.32em; color: var(--amber); margin: 0 0 18px; }
.panel p { line-height: 1.7; opacity: 0.88; font-size: 15px; }
.rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 34px; margin: 14px 0 22px; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 15px; }
.row kbd, .keys kbd { font-family: 'Raj'; font-weight: 700; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 4px; padding: 0 8px; font-size: 14px; }
.row input[type=range] { width: 170px; accent-color: var(--amber); }
.row select { background: #10161a; color: #fff; border: 1px solid var(--line); padding: 4px 8px; font: inherit; }
.seg { display: flex; gap: 6px; }
.seg button { all: unset; cursor: pointer; padding: 5px 13px; border: 1px solid var(--line); font-size: 14px; }
.seg button.on { background: var(--amber); color: #111; border-color: var(--amber); font-weight: 700; }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.actions .btn { border: 1px solid var(--line); border-left: 3px solid var(--amber); font-size: 17px; padding: 9px 22px; }
#loading .bar { position: absolute; left: 6.5vw; right: 6.5vw; bottom: 7vh; height: 3px; background: rgba(255, 255, 255, 0.14); }
#loading .bar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width 0.2s; box-shadow: 0 0 12px var(--amber); }
#loading .tip { position: absolute; left: 6.5vw; bottom: 10vh; font-size: 16px; opacity: 0.85; max-width: 60vw; }
#loading .ttl { position: absolute; left: 6.5vw; bottom: 15vh; font-family: 'BlackHan'; font-size: 46px; letter-spacing: 0.06em; }
#loading .pct { position: absolute; right: 6.5vw; bottom: 9vh; font-family: 'Raj'; font-weight: 700; font-size: 20px; color: var(--amber); }
#loading .bg::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.15) 55%); }
#brief .panel { width: min(980px, 90vw); padding: 22px 34px; }
#brief .grid { display: grid; grid-template-columns: min(470px, 46vh) 1fr; gap: 30px; align-items: start; margin-top: 14px; }
#brief .map { position: relative; width: 100%; aspect-ratio: 1; background-size: cover; background-position: center; border: 1px solid var(--line); margin: 12px 0; overflow: hidden; filter: saturate(0.8); }
#brief .pin { position: absolute; transform: translate(-50%, -50%); font-family: 'Raj'; font-weight: 700; font-size: 13px; color: #b3170f; white-space: nowrap; text-shadow: none; }
#brief .pin::before { content: ''; display: block; width: 16px; height: 16px; border: 2.5px solid #b3170f; border-radius: 50%; margin: 0 auto 2px; }
#brief ol { margin: 10px 0 0; padding-left: 20px; line-height: 2.0; font-size: 15px; }
#brief .map { margin: 0; }
#dead { background: radial-gradient(ellipse at center, rgba(60, 0, 0, 0.35), rgba(0, 0, 0, 0.92)); flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#dead .big { font-family: 'BlackHan'; font-size: 82px; letter-spacing: 0.2em; color: var(--red); }
#dead .quote { max-width: 560px; font-size: 16px; line-height: 1.7; opacity: 0.8; margin: 16px 0 30px; font-style: italic; }
#result .grade { font-family: 'Stencil'; font-size: 110px; color: var(--amber); line-height: 1; float: right; margin: -8px 0 0 20px; }
#result .stat { display: grid; grid-template-columns: 1fr auto; gap: 8px 30px; font-size: 17px; margin: 18px 0; }
#result .stat b { font-family: 'Raj'; font-size: 22px; text-align: right; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.gallery figure { margin: 0; border: 1px solid var(--line); background: #06090b; }
.gallery img { width: 100%; display: block; }
.gallery figcaption { font-size: 13px; padding: 7px 10px; opacity: 0.8; }
#pause { background: rgba(2, 6, 9, 0.72); backdrop-filter: blur(6px); }
#click { background: rgba(0, 0, 0, 0.55); align-items: center; justify-content: center; font-size: 22px; font-weight: 600; letter-spacing: 0.1em; cursor: pointer; }