@font-face { font-family: 'Be Vietnam Pro'; font-weight: 400; font-display: swap; src: url(assets/fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 600; font-display: swap; src: url(assets/fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 800; font-display: swap; src: url(assets/fonts/be-vietnam-pro-vietnamese-800-normal.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 400; font-display: swap; src: url(assets/fonts/be-vietnam-pro-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+25B6, U+25BC, U+25C0, U+2605, U+2715; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 600; font-display: swap; src: url(assets/fonts/be-vietnam-pro-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+25B6, U+25BC, U+25C0, U+2605, U+2715; }
@font-face { font-family: 'Be Vietnam Pro'; font-weight: 800; font-display: swap; src: url(assets/fonts/be-vietnam-pro-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+25B6, U+25BC, U+25C0, U+2605, U+2715; }

:root {
  --ink: #1e2a38; --paper: #f6efe0; --line: #d9ccb2; --navy: #1f3a5a; --sky: #8fb0c9;
  --gold: #e2b93b; --red: #c8402f; --green: #3f9a62;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1322; color: #fff; font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif; user-select: none; touch-action: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#c.cctv { filter: grayscale(1) contrast(1.25) brightness(1.1); }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); font: 600 .82em 'Be Vietnam Pro', sans-serif; }

#vig { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 34%, rgba(4,6,14,.94) 88%); transition: opacity .3s; }
#fade { position: fixed; inset: 0; background: #06080f; opacity: 1; pointer-events: none; transition: opacity .5s; z-index: 30; }
#captionBox { position: fixed; inset: 0; z-index: 31; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; pointer-events: none; }
#captionBox b { font-size: clamp(22px, 4vw, 40px); font-weight: 800; letter-spacing: .01em; }
#captionBox small { margin-top: 10px; font-size: clamp(14px, 2vw, 18px); color: #c9d4e0; }

#hud { position: fixed; inset: 0; pointer-events: none; display: none; }
body.playing #hud { display: block; }

#tasks { position: absolute; left: 14px; top: 14px; width: min(310px, 62vw); padding: 10px 13px 11px; color: var(--ink); background: var(--paper); border-radius: 4px; box-shadow: 0 3px 0 var(--line), 0 8px 18px rgba(0,0,0,.28); border-left: 5px solid var(--red); }
#tasks b { display: block; font-size: 11px; letter-spacing: .14em; color: var(--red); margin-bottom: 4px; }
#tasks ul { list-style: none; margin: 0; padding: 0; }
#tasks li { position: relative; padding: 3px 0 3px 21px; font-size: 14px; font-weight: 600; line-height: 1.32; }
#tasks li::before { content: ''; position: absolute; left: 1px; top: 6px; width: 12px; height: 12px; border: 2px solid var(--navy); border-radius: 3px; }
#tasks li.done { color: #8d8676; text-decoration: line-through; font-weight: 400; }
#tasks li.done::before { background: var(--green); border-color: var(--green); }

#topright { position: absolute; right: 14px; top: 14px; display: flex; gap: 8px; align-items: stretch; }
#clock { padding: 5px 12px; background: #10161f; color: #9ff0b6; border-radius: 6px; font: 800 20px/1.3 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .05em; box-shadow: inset 0 0 0 2px #2a3543; }
#rep { padding: 7px 12px; background: var(--navy); color: var(--gold); border-radius: 6px; font-weight: 800; font-size: 15px; }
#btnPause { pointer-events: auto; width: 40px; border: 0; border-radius: 6px; background: rgba(16,22,31,.82); color: #fff; font-size: 12px; }

#bars { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; width: 190px; }
#bars label { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
#bars label > div { flex: 1; height: 9px; background: rgba(0,0,0,.5); border-radius: 5px; overflow: hidden; }
#bars i { display: block; height: 100%; background: #5cc98b; transition: width .1s linear; }
#alertBar { background: #e8c35a !important; }
#alertBar.low { background: var(--red) !important; }
#statusBar { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: min(340px, 44vw); text-align: center; }
#statusBar small { display: block; font-size: 12px; font-weight: 800; margin-bottom: 3px; text-shadow: 0 1px 3px #000; }
#statusBar div { height: 12px; background: rgba(0,0,0,.55); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
#statusBar i { display: block; height: 100%; transition: width .2s; }
#keys { position: absolute; right: 14px; bottom: 14px; font-size: 12px; color: #eef2f6; text-shadow: 0 1px 2px #000; }
body.touch #keys { display: none; }

#stick, #btnUse, #btnWhistle { display: none; }
body.touch #stick { display: block; position: absolute; left: 22px; bottom: 56px; width: 124px; height: 124px; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); pointer-events: auto; touch-action: none; }
#stick i { position: absolute; left: 37px; top: 37px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.6); }
body.touch #btnUse, body.touch #btnWhistle { display: block; position: absolute; border: 0; border-radius: 50%; color: #fff; font-weight: 800; pointer-events: auto; touch-action: none; }
body.touch #btnUse { right: 22px; bottom: 56px; width: 84px; height: 84px; background: var(--green); font-size: 24px; }
body.touch #btnWhistle { right: 116px; bottom: 44px; width: 66px; height: 66px; background: #c98f2b; font-size: 13px; }
#btnWhistle.cool { opacity: .4; }

#bubbles, #toasts { position: fixed; inset: 0; pointer-events: none; }
.bubble { position: absolute; left: 0; top: 0; max-width: 220px; padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff; border-radius: 11px; box-shadow: 0 2px 7px rgba(0,0,0,.3); }
.bubble.emote { padding: 2px 9px; font-size: 20px; font-weight: 800; color: var(--red); }
#toasts { display: flex; flex-direction: column; align-items: center; gap: 5px; top: 66px; bottom: auto; }
.toast { padding: 6px 13px; font-size: 13px; font-weight: 600; background: rgba(16,22,31,.9); border-radius: 999px; animation: rise .25s ease-out; }
.toast.good { color: #a8efc2; }
.toast.bad { color: #ffb0a1; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }

#way { position: fixed; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; color: var(--gold); text-shadow: 0 1px 3px #000; }
#way i { font-style: normal; font-size: 21px; line-height: 1; }
#way span { font-size: 11px; font-weight: 800; }
#prompt { position: fixed; left: 0; top: 0; overflow: hidden; padding: 6px 12px; font-size: 14px; font-weight: 600; background: rgba(16,22,31,.92); border-radius: 8px; pointer-events: none; white-space: nowrap; }
#prompt i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold); }

#dialog { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 12; display: flex; align-items: stretch; gap: 13px; width: min(760px, calc(100vw - 24px)); min-height: 118px; padding: 12px 16px 10px 12px; color: var(--ink); background: var(--paper); border-radius: 10px; box-shadow: 0 5px 0 var(--line), 0 12px 28px rgba(0,0,0,.42); cursor: pointer; }
#dialog .face { flex: none; width: 94px; height: 94px; border-radius: 8px; background: #cfdbe4 center/cover no-repeat; }
#dialog > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#dialog .who { font-size: 13px; font-weight: 800; color: var(--red); letter-spacing: .03em; }
#dialog .text { flex: 1; margin: 3px 0 2px; font-size: 16.5px; line-height: 1.46; }
#dialog small { align-self: flex-end; font-size: 11px; color: #8d8676; }
#dialog.narr { color: #eef2f6; background: rgba(12,17,27,.94); box-shadow: 0 10px 26px rgba(0,0,0,.5); font-style: italic; }
#dialog.narr small { color: #8a96a6; }

#choices { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 13; display: flex; flex-direction: column; gap: 7px; width: min(640px, calc(100vw - 24px)); }
#choices p { margin: 0 0 4px; padding: 9px 13px; font-weight: 600; background: rgba(12,17,27,.94); border-radius: 8px; }
#choices button { padding: 11px 14px; text-align: left; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--paper); border: 0; border-radius: 8px; box-shadow: 0 3px 0 var(--line); }
#choices button:hover { background: #fff; transform: translateX(3px); }
#choices kbd { background: var(--navy); color: #fff; border: 0; }

#qte, #drum { position: fixed; left: 50%; bottom: 13%; transform: translateX(-50%); z-index: 14; width: min(520px, calc(100vw - 28px)); padding: 13px 16px 11px; text-align: center; background: rgba(12,17,27,.95); border-radius: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 12px 26px rgba(0,0,0,.45); }
#qte b, #drum b { font-size: 19px; font-weight: 800; color: var(--gold); }
#qte small, #drum small { display: block; margin-top: 6px; font-size: 12px; color: #b9c4d0; }
.track { position: relative; height: 28px; margin-top: 10px; background: #2a3442; border-radius: 6px; overflow: hidden; }
.zone { position: absolute; top: 0; bottom: 0; background: var(--green); }
.needle { position: absolute; top: -2px; bottom: -2px; width: 5px; margin-left: -2px; background: #fff; box-shadow: 0 0 8px #fff; }
.pips { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
.pips i { width: 13px; height: 13px; border-radius: 50%; background: #2a3442; }
.pips i.on { background: var(--green); }
.pips i.x { border-radius: 3px; }
.pips i.x.on { background: var(--red); }
.lane { position: relative; height: 62px; margin-top: 10px; background: #2a3442; border-radius: 8px; overflow: hidden; }
.lane .target { position: absolute; left: 44px; top: 7px; width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--gold); }
.lane .note { position: absolute; left: 50px; top: 13px; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0d6a2, #b04a32 72%); }
.lane .note.hit { opacity: 0; transition: opacity .15s; }
.lane .note.miss { filter: grayscale(1); opacity: .35; }
#drum .score { display: block; min-height: 22px; margin-top: 5px; font-style: normal; font-weight: 800; color: #a8efc2; }

#docs, #keypad, #report, #pause, #failBox { position: fixed; inset: 0; z-index: 16; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(6,9,16,.68); }
#docs .panel { width: min(860px, 100%); max-height: 100%; overflow: auto; padding: 14px; color: var(--ink); background: #e8dfcc; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5); touch-action: pan-y; }
#docs .head { display: flex; gap: 12px; align-items: center; min-height: 72px; padding: 8px 12px; background: var(--paper); border-radius: 8px; }
#docs .head .face { flex: none; width: 66px; height: 66px; border-radius: 8px; background: #cfdbe4 center/cover no-repeat; }
#docs .head p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
#docs .desk { display: grid; grid-template-columns: 1fr minmax(210px, .72fr); gap: 11px; margin-top: 10px; }
#docs .cards { display: flex; flex-wrap: wrap; gap: 9px; align-content: flex-start; }
.paper { position: relative; flex: 1 1 215px; min-height: 134px; padding: 9px 11px; background: #fffdf6; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,.2); }
.paper.id { background: linear-gradient(135deg, #e7f1ee, #d7e6f0); padding-right: 82px; }
.paper h4, #docs .book h4 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--red); }
.paper .photo { position: absolute; right: 9px; top: 27px; width: 66px; height: 80px; object-fit: cover; background: #bfccd4; border-radius: 4px; }
.paper dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; margin: 0; font-size: 13px; }
.paper dt { color: #7a7364; }
.paper dd { margin: 0; font-weight: 600; }
#docs .book { padding: 9px 11px; background: #fbf3df; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,.2); }
#docs .book .row { font-size: 13px; line-height: 1.32; padding: 4px 0; border-bottom: 1px solid #e4d7bb; }
#docs .qs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
#docs .ask { padding: 7px 11px; font-size: 13.5px; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid #c8bb9e; border-radius: 7px; }
#docs .ask:disabled { opacity: .45; cursor: default; }
#docs .acts { display: flex; gap: 10px; margin-top: 11px; }
#docs .acts button { flex: 1; padding: 12px; font-size: 16px; font-weight: 800; color: #fff; border: 0; border-radius: 8px; }
.allow { background: var(--green); }
.deny { background: var(--red); }

#keypad .panel { width: 262px; padding: 15px; background: #1b2330; border-radius: 12px; box-shadow: 0 0 0 2px #3a4556; }
#keypad .screen { padding: 9px; text-align: center; font: 800 29px ui-monospace, Consolas, monospace; letter-spacing: .3em; color: #9ff0b6; background: #0b1016; border-radius: 6px; }
#keypad p { min-height: 34px; margin: 9px 0; font-size: 12.5px; line-height: 1.38; color: #c5cfdb; }
#keypad .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
#keypad .pad button { padding: 12px 0; font-size: 18px; font-weight: 800; color: #fff; background: #303c4e; border: 0; border-radius: 7px; }

#cctvUi { position: fixed; inset: 0; z-index: 15; }
#cctvUi .scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.2) 2px 4px); }
#cctvUi .top { position: absolute; left: 16px; top: 14px; display: flex; gap: 14px; font: 800 16px ui-monospace, Consolas, monospace; text-shadow: 0 1px 2px #000; }
#cctvUi .rec { color: #ff5a4a; }
#cctvUi p { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(640px, 92vw); margin: 0; padding: 9px 13px; text-align: center; font-size: 14.5px; font-weight: 600; background: rgba(12,17,27,.9); border-radius: 8px; }
#cctvUi .prev, #cctvUi .next { position: absolute; top: 50%; padding: 12px 13px; font-weight: 800; color: #fff; background: rgba(12,17,27,.8); border: 0; border-radius: 8px; }
#cctvUi .prev { left: 10px; }
#cctvUi .next { right: 10px; }
.mark { position: absolute; left: 0; top: 0; padding: 4px 10px; font-size: 13px; font-weight: 800; color: #0d1420; background: #ffe08a; border: 0; border-radius: 6px; }
.mark:disabled { opacity: .35; }

#report .sheet { position: relative; width: min(470px, 100%); max-height: 100%; overflow: auto; padding: 20px 24px; color: var(--ink); background: var(--paper); border-radius: 4px; box-shadow: 0 16px 40px rgba(0,0,0,.5); touch-action: pan-y; }
#report small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #8d8676; }
#report h3 { margin: 4px 0 2px; font-size: 22px; font-weight: 800; }
#report .sub { margin: 0 0 11px; font-size: 13.5px; color: #6d675a; }
#report .rows div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; border-bottom: 1px dashed #cdbfa2; }
#report .note { margin: 11px 0 12px; font-size: 14px; font-style: italic; line-height: 1.45; }
#report button { width: 100%; padding: 12px; font-size: 15px; font-weight: 800; color: #fff; background: var(--navy); border: 0; border-radius: 7px; }
.stamp { position: absolute; right: 18px; top: 44px; padding: 3px 10px; font-size: 18px; font-weight: 800; color: var(--red); border: 3px solid var(--red); border-radius: 5px; opacity: 0; transform: rotate(-12deg) scale(2); }
.stamp.on { opacity: .85; transform: rotate(-12deg) scale(1); transition: transform .14s ease-in, opacity .14s; }

#title { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: clamp(20px, 7vw, 92px); background: linear-gradient(90deg, rgba(8,12,22,.86), rgba(8,12,22,.3) 62%, rgba(8,12,22,0)); }
#title small { font-size: 15px; font-weight: 600; letter-spacing: .1em; color: var(--gold); }
#title h1 { margin: 4px 0 6px; font-size: clamp(42px, 8.4vw, 92px); font-weight: 800; line-height: 1.02; letter-spacing: -.01em; }
#title p { margin: 0; max-width: 460px; font-size: clamp(15px, 2vw, 19px); color: #dbe3ec; }
#title .menu { display: flex; flex-direction: column; gap: 8px; width: min(320px, 100%); }
#title .menu button { padding: 12px 16px; text-align: left; font-size: 16px; font-weight: 800; color: var(--ink); background: var(--paper); border: 0; border-radius: 8px; box-shadow: 0 3px 0 var(--line); }
#title .menu button:hover { background: #fff; transform: translateX(4px); }
#title .menu button.sec { color: #fff; background: rgba(255,255,255,.13); box-shadow: none; font-weight: 600; }
#title .menu button:disabled { opacity: .4; cursor: default; transform: none; }
#title .menu small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: #c9d4e0; }

#pause .box, #failBox .box { width: min(380px, 100%); padding: 20px; text-align: center; background: #151c28; border-radius: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
#pause h2, #failBox h2 { margin: 0 0 12px; font-size: 22px; font-weight: 800; }
#pause button, #failBox button { display: block; width: 100%; margin-top: 8px; padding: 11px; font-size: 15px; font-weight: 800; color: var(--ink); background: var(--paper); border: 0; border-radius: 8px; }
#pause p { margin: 13px 0 0; font-size: 12.5px; line-height: 1.7; color: #b9c4d0; }
#failBox .why { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: #ffcabd; }

#boot { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; text-align: center; background: #0b1322; }
#boot b { display: block; font-size: 34px; font-weight: 800; }
#boot small { color: #9fb0c2; }

@media (max-width: 680px) {
  #dialog { min-height: 100px; bottom: 10px; }
  #dialog .face { width: 62px; height: 62px; }
  #dialog .text { font-size: 14.5px; }
  #tasks li { font-size: 12.5px; }
  #docs .desk { grid-template-columns: 1fr; }
  #bars { bottom: auto; top: 118px; width: 150px; }
}
@media (max-height: 460px) {
  #title { gap: 10px; }
  #title h1 { font-size: 44px; }
  #title .logo p { display: none; }
  #title .menu button { padding: 8px 14px; font-size: 14px; }
}

/* Các hộp này có thể hiện khi màn hình đang tô đen, nên phải nằm trên #fade (30) và #captionBox (31) */
#report, #pause, #failBox { z-index: 32; }

/* Xem camera an ninh là toàn màn hình: giấu HUD của người chơi */
body.cctv-on #hud, body.cctv-on #prompt, body.cctv-on #way { display: none !important; }