:root { --f: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; --fb: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; --y: #ffd21f; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1a17; font-family: var(--fb); color: #fff; user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
#hud { position: fixed; inset: 0; pointer-events: none; }
.ol { text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 0 #000, 0 0 8px rgba(0,0,0,.6); }

#topright { position: absolute; right: 26px; top: 18px; text-align: right; }
#money { font: 900 34px var(--f); color: #6dff5a; letter-spacing: .5px; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 0 #000; }
#money.neg { color: #ff5a4a; }
#money.bump { animation: bump .35s; }
@keyframes bump { 30% { transform: scale(1.18); } }
#stars { margin-top: 2px; }
#stars i { display: inline-block; width: 26px; height: 26px; margin-left: 3px; background: rgba(0,0,0,.55); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
#stars i.on { background: var(--y); filter: drop-shadow(0 0 4px #ffb300); }
#stars.blink i.on { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { background: rgba(255,255,255,.35); } }
#bill { font: 800 17px var(--fb); color: #ff6a5a; height: 22px; opacity: 0; transition: opacity .3s; text-shadow: 0 0 4px #000, 1px 1px 0 #000; }
#bill.show { opacity: 1; }
#bill.plus { color: #8dff7a; }

#notes { position: absolute; left: 22px; top: 18px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.note { background: rgba(8,8,10,.82); border-left: 4px solid var(--y); padding: 7px 14px 8px 12px; font: 700 16px var(--fb); border-radius: 2px; animation: notein .25s ease-out; max-width: 520px; }
.note small { display: block; font: 700 11px var(--fb); color: var(--y); letter-spacing: .5px; margin-bottom: 1px; }
.note.red { border-color: #ff4a3a; } .note.red small { color: #ff7a6a; }
.note.green { border-color: #6dff5a; } .note.green small { color: #8dff7a; }
.note.out { opacity: 0; transform: translateX(-30px); transition: all .4s; }
@keyframes notein { from { opacity: 0; transform: translateX(-40px); } }

#objective { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font: 900 26px var(--f); letter-spacing: .5px; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 0 #000, 0 0 10px rgba(0,0,0,.7); }
#objective em { font-style: normal; color: var(--y); }
#objective small { display: block; font: 800 12px var(--fb); color: #ddd; letter-spacing: 2px; margin-bottom: 2px; text-shadow: 1px 1px 0 #000; }
#subs { position: absolute; left: 0; right: 0; bottom: 104px; text-align: center; font: 800 21px var(--fb); min-height: 30px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px #000; }
#subs .who { color: #ffb7d2; margin-right: 8px; }
#subs .who.b { color: #9fd6ff; } #subs .who.g { color: #b5f58a; } #subs .who.r { color: #ff9a8a; } #subs .who.y { color: #ffe27a; }
#prompt { position: absolute; left: 50%; top: 61%; transform: translateX(-50%); background: rgba(8,8,10,.8); padding: 7px 16px; border-radius: 6px; font: 800 18px var(--fb); white-space: nowrap; }
#prompt kbd { background: var(--y); color: #111; border-radius: 4px; padding: 1px 8px; margin-right: 8px; font: 900 17px var(--fb); }

#bottomleft { position: absolute; left: 22px; bottom: 20px; width: 220px; }
#minimap { width: 200px; height: 200px; border-radius: 50%; border: 4px solid rgba(0,0,0,.75); box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.5); background: #3a3a32; display: block; }
#hpbar { width: 200px; height: 9px; background: rgba(0,0,0,.7); margin-top: 8px; border-radius: 2px; overflow: hidden; }
#hpbar b { display: block; height: 100%; width: 100%; background: linear-gradient(#8dff7a, #45c23a); transition: width .2s; }
#hpbar.low b { background: linear-gradient(#ff8a6a, #e0402a); }
#zone { font: 700 12px var(--fb); margin-top: 4px; color: #eee; text-shadow: 1px 1px 0 #000; width: 200px; text-align: center; }

#bottomright { position: absolute; right: 26px; bottom: 22px; text-align: right; }
#speedo { display: inline-block; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(20,20,22,.9) 60%, rgba(0,0,0,.6) 61%, rgba(0,0,0,.6) 100%); border: 4px solid rgba(255,255,255,.2); text-align: center; position: relative; }
#speedo .v { display: block; font: 900 46px var(--f); margin-top: 38px; line-height: 1; }
#speedo .u { font: 700 12px var(--fb); color: #bbb; }
#speedo .vn { position: absolute; left: -60px; right: -6px; top: -26px; font: 800 14px var(--fb); text-align: right; text-shadow: 1px 1px 0 #000, 0 0 4px #000; }
#speedo.hot .v { color: #ff6a4a; }
#weapons { display: flex; gap: 5px; justify-content: flex-end; margin-top: 8px; }
.wslot { width: 62px; height: 62px; background: rgba(8,8,10,.72); border: 2px solid rgba(255,255,255,.18); border-radius: 6px; position: relative; font-size: 28px; line-height: 54px; text-align: center; }
.wslot .k { position: absolute; left: 4px; top: 1px; font: 700 10px var(--fb); color: #bbb; line-height: 1.3; }
.wslot .a { position: absolute; right: 4px; bottom: 1px; font: 900 13px var(--fb); line-height: 1.2; }
.wslot .n { position: absolute; left: -40px; right: -40px; top: -22px; font: 800 13px var(--fb); display: none; text-shadow: 1px 1px 0 #000, 0 0 4px #000; line-height: 1.3; }
.wslot.sel { border-color: var(--y); background: rgba(60,50,0,.8); box-shadow: 0 0 10px rgba(255,210,31,.5); }
.wslot.sel .n { display: block; }
.wslot.lock { opacity: .25; }
.wslot.empty .a { color: #ff6a5a; }

#card { position: absolute; left: 0; right: 0; top: 30%; text-align: center; }
#card .big { font: 900 84px var(--f); letter-spacing: 3px; text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 6px 0 #000; animation: slam .35s cubic-bezier(.2,2,.4,1); }
#card.fail .big { color: #ff3b2b; } #card.pass .big { color: var(--y); } #card.chapter .big { font-size: 60px; }
#card .sub { font: 800 24px var(--fb); background: rgba(0,0,0,.8); display: inline-block; padding: 6px 22px; margin-top: 6px; }
#card.chapter .sub { background: none; color: var(--y); letter-spacing: 4px; font-size: 18px; text-shadow: 1px 1px 0 #000; }
@keyframes slam { from { transform: scale(2.2); opacity: 0; } }
#intro { position: absolute; left: 7%; bottom: 26%; }
#intro .tag { font: 900 13px var(--fb); color: #ff5a4a; letter-spacing: 3px; }
#intro .nm { font: 900 70px var(--f); line-height: 1; background: rgba(10,10,12,.85); padding: 6px 30px 10px 18px; clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); animation: slidein .3s ease-out; }
#intro .ds { font: 800 19px var(--fb); color: var(--y); margin-top: 6px; text-shadow: 1px 1px 0 #000, 0 0 5px #000; }
@keyframes slidein { from { transform: translateX(-200px); opacity: 0; } }
#bossbar { position: absolute; left: 22%; right: 22%; top: 24px; text-align: center; }
#bossbar .nm { font: 900 20px var(--f); text-shadow: 1px 1px 0 #000, 0 0 5px #000; margin-bottom: 3px; }
#bossbar .bar { height: 16px; background: rgba(0,0,0,.75); border: 2px solid #000; }
#bossbar .bar b { display: block; height: 100%; background: linear-gradient(#d86bff, #8a22c9); transition: width .25s; }

#phone { position: absolute; right: 26px; top: 110px; width: 310px; background: #fdfdf8; color: #222; border-radius: 16px; border: 3px solid #222; padding: 10px 12px 12px; box-shadow: 0 8px 22px rgba(0,0,0,.45); animation: notein .3s; }
#phone .hd { font: 800 14px var(--fb); border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 7px; }
#phone .hd small { display: block; font: 600 10px var(--fb); color: #888; }
#phone .m { font: 700 14px var(--fb); margin: 5px 0; padding: 5px 10px; border-radius: 12px; background: #eee; display: table; }
#phone .m.me { background: #ffe14a; margin-left: auto; }

#bigmap { position: absolute; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; flex-direction: column; }
#bigmapc { height: 84vh; width: 84vh; border: 4px solid #000; border-radius: 8px; background: #3a3a32; }
#bigmap .legend { margin-top: 8px; font: 700 14px var(--fb); }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .5s; }
#fade.on { opacity: 1; }

#pause { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,6,4,.78); z-index: 10; }
.tbox { text-align: center; max-width: 900px; padding: 20px; }
.logo2 { font: 900 44px var(--f); color: var(--y); margin-bottom: 12px; }
.keys { margin: 0 auto 18px; border-collapse: collapse; background: rgba(0,0,0,.55); border-radius: 10px; overflow: hidden; }
.keys th { font: 900 14px var(--fb); color: #111; background: var(--y); padding: 6px 12px; white-space: nowrap; border-bottom: 2px solid #1b1a17; }
.keys td { font: 700 14px var(--fb); padding: 6px 16px 6px 10px; text-align: left; border-bottom: 2px solid #1b1a17; }
button { font: 900 26px var(--f); padding: 12px 46px; background: var(--y); color: #111; border: 4px solid #000; border-radius: 10px; cursor: pointer; box-shadow: 0 6px 0 #000; pointer-events: auto; margin: 4px; }
button:hover { transform: translateY(2px); box-shadow: 0 4px 0 #000; }
button.ghost { background: #333; color: #fff; font-size: 18px; padding: 8px 24px; }
button:disabled { opacity: .4; cursor: default; }
.row { margin: 0 0 16px; font: 700 14px var(--fb); display: flex; gap: 26px; justify-content: center; }
.row input { vertical-align: middle; pointer-events: auto; }
.label3d { position: absolute; transform: translate(-50%, -100%); font: 800 13px var(--fb); background: rgba(8,8,10,.7); padding: 2px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.label3d.q { background: var(--y); color: #111; }

/* 좁은 화면: 목표 글자가 무기 칸·지도와 겹치지 않게 올린다 */
@media (max-width: 1180px) { #objective { bottom: 112px; font-size: 22px; } #subs { bottom: 176px; font-size: 19px; } }

/* ===== 시작 화면: 표지 그림 조각 + 로고 + 메뉴 ===== */
#title { position: fixed; inset: 0; z-index: 10; background: #000; display: flex; flex-direction: column; --g: clamp(4px, .45vw, 8px); padding: var(--g) var(--g) 0; }
.tgrid { flex: 1; min-height: 0; display: grid; gap: var(--g); grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); }
.tp { position: relative; overflow: hidden; background: #111; opacity: 0; animation: tin .55s cubic-bezier(.2,.9,.25,1) forwards; }
.tp i { position: absolute; inset: -5%; background-size: cover; background-position: 50% 30%; animation: tkb 26s ease-in-out infinite alternate; will-change: transform; }
.tp::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 60px rgba(0,0,0,.35); pointer-events: none; }
.p-sunja  { grid-column: 1 / 5;  grid-row: 1 / 9;  animation-delay: .05s; --dx: -18px; }
.p-swan   { grid-column: 1 / 5;  grid-row: 9 / 13; animation-delay: .45s; --dx: -18px; }
.p-chase  { grid-column: 5 / 10; grid-row: 1 / 6;  animation-delay: .2s;  --dy: -18px; }
.p-boss   { grid-column: 10 / 13; grid-row: 1 / 7; animation-delay: .32s; --dx: 18px; }
.p-malsun { grid-column: 10 / 13; grid-row: 7 / 13; animation-delay: .58s; --dx: 18px; }
.p-sunja i { background-position: 50% 12%; } .p-boss i { background-position: 50% 20%; animation-duration: 31s; animation-direction: alternate-reverse; }
.p-chase i { background-position: 50% 55%; animation-duration: 22s; } .p-swan i { background-position: 50% 60%; animation-duration: 29s; animation-direction: alternate-reverse; }
.p-malsun i { background-position: 50% 18%; animation-duration: 24s; }
@keyframes tin { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } to { opacity: 1; transform: none; } }
@keyframes tkb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.2%, 1%); } }

.tmenu { grid-column: 5 / 10; grid-row: 6 / 13; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(6px, 1.2vh, 16px) clamp(10px, 2vw, 34px); min-height: 0; opacity: 0; animation: tin .6s .7s ease-out forwards; }
.tlogo { display: block; width: auto; max-width: 100%; height: auto; max-height: 52%; min-height: 0; object-fit: contain; flex: 0 1 auto; filter: drop-shadow(0 6px 0 rgba(0,0,0,.6)); }
.tlogotxt { text-align: center; line-height: 1; }
.tlogotxt b { display: block; font: 900 clamp(46px, 7.4vw, 132px) var(--f); letter-spacing: -2px; color: #fff; -webkit-text-stroke: clamp(5px, .7vw, 12px) #000; paint-order: stroke fill; text-shadow: 0 0 0 #fff, 5px 6px 0 #000; transform: skewX(-6deg); }
.tlogotxt span { display: inline-block; margin-top: 10px; padding: 4px 18px 6px; background: #2f8f3a; font: 900 clamp(15px, 1.7vw, 30px) var(--f); letter-spacing: 3px; transform: skewX(-6deg); }
#tmenu { list-style: none; margin: clamp(6px, 1.6vh, 20px) 0 0; padding: 0; width: 100%; max-width: 620px; pointer-events: auto; }
#tmenu li { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: clamp(30px, 5.2vh, 50px); padding: 0 clamp(10px, 1.2vw, 20px); margin-bottom: 3px; background: rgba(255,255,255,.07); color: #e8e8e8; font: 800 clamp(14px, 1.45vw, 23px) var(--f); letter-spacing: .5px; cursor: pointer; white-space: nowrap; }
#tmenu li em { font-style: normal; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .82em; color: #bdbdbd; min-width: 0; }
#tmenu li u { text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
#tmenu li .ar { opacity: 0; font-size: .7em; padding: 4px 2px; }
#tmenu li.sel { background: #f2f2f2; color: #000; }
#tmenu li.sel em { color: #222; } #tmenu li.sel .ar { opacity: 1; }
#tmenu.wait li[data-act="start"], #tmenu.wait li[data-act="chapter"] { opacity: .45; }
.thint { margin-top: clamp(4px, 1vh, 12px); font: 700 clamp(11px, .95vw, 14px) var(--fb); color: #8d8d8d; letter-spacing: .5px; text-align: center; min-height: 1.3em; }
.thint b { color: #ffd21f; }

.tbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(5px, .9vh, 10px) clamp(6px, .8vw, 14px); background: #000; }
.tkeys { display: flex; flex-wrap: wrap; gap: 4px clamp(8px, 1.1vw, 20px); font: 700 clamp(11px, .92vw, 14.5px) var(--fb); color: #cfcfcf; }
.tkeys span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tkeys span b { color: #fff; }
.tkeys kbd { font: 800 .9em var(--fb); color: #000; background: #e9e9e9; border-radius: 3px; padding: 1px 6px 2px; min-width: 1.6em; text-align: center; box-shadow: 0 2px 0 #777; }
.tload { flex: none; display: flex; align-items: center; gap: 10px; font: 800 clamp(12px, 1vw, 15px) var(--fb); color: #e8e8e8; white-space: nowrap; }
.spin { width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: tspin .8s linear infinite; }
.tload.done .spin { animation: none; border-color: #6dff5a; background: #6dff5a; width: 12px; height: 12px; }
@keyframes tspin { to { transform: rotate(360deg); } }
/* 등장 애니메이션이 못 도는 환경(가려진 탭 등)에서도 2초 뒤에는 무조건 다 보이게 */
#title.shown .tp, #title.shown .tmenu { animation: none; opacity: 1; }
#title.out { animation: tout .45s ease-in forwards; pointer-events: none; }
@keyframes tout { to { opacity: 0; } }

/* 세로로 긴 화면: 그림 두 장 + 메뉴만 */
@media (max-aspect-ratio: 1/1) {
  .p-swan, .p-boss, .p-malsun { display: none; }
  .p-sunja { grid-column: 1 / 13; grid-row: 1 / 5; } .p-chase { grid-column: 1 / 13; grid-row: 5 / 8; }
  .tmenu { grid-column: 1 / 13; grid-row: 8 / 13; }
  .p-sunja i { background-position: 50% 0; }
}
@media (prefers-reduced-motion: reduce) { .tp i { animation: none; } }

/* ===== 촬영 모드: 장면 목록 ===== */
#shoot { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; }
.sbox { width: min(1180px, 100%); max-height: 100%; display: flex; flex-direction: column; background: #000; border: 1px solid #2a2a2a; }
.shead { flex: none; display: flex; align-items: baseline; gap: 16px; padding: 14px 20px 12px; border-bottom: 1px solid #2a2a2a; }
.shead b { font: 900 clamp(20px, 2vw, 30px) var(--f); letter-spacing: 1px; } .shead span { font: 700 clamp(11px, .95vw, 14px) var(--fb); color: #9a9a9a; }
#shootlist { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 10px 14px; pointer-events: auto; }
.sgrp { grid-column: 1 / -1; font: 800 13px var(--fb); color: #ffd21f; letter-spacing: 2px; padding: 8px 6px 2px; }
.srow { display: flex; gap: 12px; align-items: center; padding: 8px 12px; background: rgba(255,255,255,.07); color: #e8e8e8; cursor: pointer; min-width: 0; }
.srow > b { font: 900 clamp(16px, 1.5vw, 22px) var(--f); color: #8a8a8a; flex: none; width: 1.7em; }
.srow div { min-width: 0; } .srow strong { display: block; font: 800 clamp(14px, 1.3vw, 19px) var(--f); }
.srow span { display: block; font: 700 clamp(11px, .9vw, 13px) var(--fb); color: #b4b4b4; margin-top: 2px; line-height: 1.35; }
.srow em { display: block; font: 700 clamp(10px, .82vw, 12px) var(--fb); font-style: normal; color: #7d7d7d; margin-top: 2px; }
.srow.sel { background: #f2f2f2; color: #000; } .srow.sel > b { color: #000; } .srow.sel span { color: #333; } .srow.sel em { color: #555; }
.sfoot { flex: none; padding: 10px 20px 12px; border-top: 1px solid #2a2a2a; font: 700 clamp(11px, .9vw, 13.5px) var(--fb); color: #bdbdbd; }
.sfoot kbd { font: 800 .9em var(--fb); color: #000; background: #e9e9e9; border-radius: 3px; padding: 1px 6px 2px; margin: 0 2px 0 8px; box-shadow: 0 2px 0 #777; } .sfoot kbd:first-child { margin-left: 4px; }
#shoottip { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 15; background: rgba(0,0,0,.72); color: #fff; padding: 7px 16px; font: 700 14px var(--fb); white-space: nowrap; pointer-events: none; transition: opacity .6s; }
#shoottip b { color: #ffd21f; margin-right: 8px; } #shoottip i { font-style: normal; color: #bdbdbd; margin-left: 12px; font-size: 12.5px; }
#shoottip.out { opacity: 0; }
@media (max-width: 760px) { #shootlist { grid-template-columns: 1fr; } }
/* F3 화면 표시: 자막·말풍선만 / 전부 숨김 */
body.hud-min #topright, body.hud-min #bottomleft, body.hud-min #bottomright, body.hud-min #objective, body.hud-min #notes, body.hud-min #prompt, body.hud-min #phone { display: none !important; }
body.hud-off #hud { visibility: hidden; }