:root{font-family:"Be Vietnam Pro",system-ui,sans-serif;color:#f5e9cf;background:#142a34;font-synthesis:none}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffdb85;outline-offset:3px}button:disabled{opacity:.42;cursor:not-allowed}p,h1,h2{margin-top:0}
.game-shell{position:relative;width:100vw;height:100vh;min-height:480px;overflow:hidden;background:#283d4a;font-size:calc(16px * var(--text-scale,1.25))}
.game-shell>canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto}
.world-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(9,25,33,.25),transparent 22%,transparent 79%,rgba(9,25,33,.21)),linear-gradient(0deg,rgba(12,25,29,.46),transparent 20%,transparent 85%,rgba(12,25,29,.2))}
.hud-top{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:30;gap:16px}
.brand-mark,.hud-actions{pointer-events:auto}.brand-mark{display:flex;gap:10px;align-items:center;font:700 13px/1.13 "Space Grotesk","Be Vietnam Pro",sans-serif;letter-spacing:.14em;text-shadow:0 2px 8px #243940}.brand-mark b{font-size:31px;line-height:1;color:#f8d68b}.brand-mark strong{font-size:17px;color:#ffe9b6}
.hud-actions{display:flex;gap:9px}.hud-actions button{width:44px;height:44px;border:1px solid rgba(246,222,168,.54);border-radius:9px;background:rgba(22,44,52,.86);color:#f6e7c8;font-size:23px;box-shadow:0 5px 16px #182a3180}.hud-actions button:hover{background:#345f67;transform:translateY(-2px)}
.quest-card{position:absolute;top:94px;left:31px;width:min(300px,27vw);padding:19px 20px 17px;background:rgba(17,39,49,.90);border:1px solid #bda4779c;border-radius:11px;box-shadow:0 12px 30px #0e273394;backdrop-filter:blur(4px)}
.eyebrow,.modal-kicker{font:800 11px/1.3 "Space Grotesk","Be Vietnam Pro",sans-serif;letter-spacing:.16em;color:#f8ce83}.eyebrow span{float:right;color:#d1d9c1;letter-spacing:0}.quest-card h2{margin:11px 0 8px;font-size:22px;line-height:1.15;color:#fff3d2}.quest-card p{font-size:14px;line-height:1.55;color:#d9e2d8;margin:0 0 16px}.shard-track{display:flex;gap:8px}.shard-track span{width:34px;height:30px;display:grid;place-items:center;background:#2b5057;border:1px solid #5f7b79;border-radius:5px;color:#8caaa0;font-size:22px}.shard-track span.found{background:#725c3d;border-color:#e8be70;color:#ffde95;box-shadow:0 0 13px #f7cc7a55}
.area-chip{position:absolute;top:98px;right:31px;border-radius:50px;background:rgba(21,43,48,.80);border:1px solid #a0bea88c;padding:8px 14px;color:#f9ead0;font-size:12px;letter-spacing:.05em}
.bottom-help{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;white-space:nowrap;border:1px solid #ecd19e66;border-radius:7px;background:rgba(18,40,46,.88);padding:11px 18px;color:#edf2dd;font-size:13px;box-shadow:0 8px 20px #102730aa}.bottom-help kbd{font:700 12px "Space Grotesk",sans-serif;color:#20353d;background:#f4ddaa;border-radius:4px;padding:3px 6px;margin-right:4px}.bottom-help i{padding:0 9px;color:#8da69d}
.journal{position:absolute;right:31px;top:156px;width:min(340px,31vw);max-height:calc(100vh - 225px);overflow:auto;padding:18px 20px;background:#f3e5c7;color:#29424b;border:3px solid #b69368;border-radius:8px;box-shadow:7px 8px 0 #2b4344b3,0 15px 36px #0d242fa8}.journal-head{display:flex;justify-content:space-between;color:#6e513c;font-size:13px;letter-spacing:.1em}.journal-head button{border:0;background:transparent;color:#6e513c;font-size:27px;line-height:16px}.journal>p{font-size:13px;margin:14px 0;color:#506368}.journal ol{list-style:none;padding:0;margin:0}.journal li{display:flex;gap:13px;border-top:1px solid #c4b69a;padding:13px 0;opacity:.57}.journal li.complete{opacity:1}.journal li>b{color:#a67646;font:700 15px "Space Grotesk",sans-serif}.journal li strong{display:block;font-size:14px}.journal li small{display:block;color:#5b6869;font-size:11px;line-height:1.4;margin-top:3px}.journal footer{font-size:11px;padding-top:13px;border-top:1px solid #c4b69a}
.toast{position:absolute;left:50%;bottom:79px;transform:translateX(-50%);max-width:min(600px,88vw);padding:11px 18px;background:#f2dbab;color:#33434a;border:2px solid #a67350;border-radius:7px;font-size:14px;font-weight:700;text-align:center;box-shadow:0 8px 25px #18333db3}
.next-target{margin:0 0 14px;padding:9px 10px;border-left:4px solid #f2c66f;border-radius:4px;background:#284d55;display:flex;flex-direction:column;gap:3px}.next-target small{font-size:10px;font-weight:800;letter-spacing:.12em;color:#a9c3b8}.next-target strong{font-size:14px;color:#ffe5a1}
.tutorial-backdrop{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(7,22,29,.64);backdrop-filter:blur(3px)}.tutorial-card{position:relative;width:min(590px,100%);padding:28px 32px 31px;border:4px solid #9b764d;border-radius:12px;background:#f4e5c7;color:#29414a;box-shadow:0 10px 0 #334950,0 28px 70px #071923}.tutorial-card h2{font-size:32px;margin:8px 0 20px;color:#203c49}.tutorial-icon{position:absolute;right:27px;top:19px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#f0c675;color:#25414b;font-size:28px;box-shadow:0 4px 0 #a67851}.tutorial-steps{display:grid;gap:10px}.tutorial-steps>div{display:flex;gap:13px;align-items:center;padding:12px 14px;border:1px solid #c4aa82;border-radius:7px;background:#ead7b3}.tutorial-steps b{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#294e59;color:#ffe3a4}.tutorial-steps strong{display:block;font-size:15px}.tutorial-steps small{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:#56676a}
.title-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 42%,rgba(13,49,55,.82),rgba(7,28,37,.90) 50%,rgba(7,23,33,.97));padding:24px;box-shadow:inset 0 0 0 12px rgba(238,208,150,.08)}.title-ornament{color:#edc578;font-size:22px;letter-spacing:.3em;margin-bottom:24px}.title-kicker{color:#d1dbcb;font:700 11px "Space Grotesk","Be Vietnam Pro",sans-serif;letter-spacing:.22em}.title-screen h1{margin:17px 0 4px;font:800 clamp(52px,8.6vw,130px)/.94 "Space Grotesk","Be Vietnam Pro",sans-serif;letter-spacing:-.08em;color:#fff1cb;text-shadow:0 8px 0 #23414d,0 17px 25px #07151c}.title-screen h1 em{font-style:normal;color:#f3c979}.title-screen>p{font-size:20px;letter-spacing:.07em;color:#d4e0cb;margin:22px 0 29px}.title-buttons{display:flex;flex-direction:column;gap:11px;align-items:stretch;min-width:min(350px,90vw)}.primary-button,.secondary-button{min-height:46px;border-radius:5px;padding:12px 19px;font-weight:800;letter-spacing:.07em;font-size:12px;border:2px solid #d7a761;transition:transform .16s,background .16s,box-shadow .16s}.primary-button{background:#f2c67d;color:#263a42;box-shadow:0 5px 0 #8c6549,0 10px 24px #0c2229a8}.primary-button:hover{transform:translateY(-2px);background:#ffdc97}.primary-button span{float:right;font-size:20px;line-height:10px}.secondary-button{background:#1b3b47cc;color:#f3dfbb;border-color:#ae956b}.secondary-button:hover{background:#315762}.title-note{position:absolute;bottom:28px;font-size:12px;color:#b3c8bc;line-height:1.5}
.dialogue-wrap{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);width:min(850px,calc(100vw - 40px))}.dialogue-card{display:flex;min-height:153px;background:#f2e2c1;border:4px solid #7f654b;box-shadow:0 8px 0 #344850,0 20px 35px #0c2734c0;border-radius:5px;color:#2e4249;padding:13px;gap:17px}.portrait{flex:none;width:106px;min-height:117px;background-color:#72938b;background-image:url('../assets/characters-v2.png');background-size:300% 300%;background-repeat:no-repeat;border:4px solid #fff5d9;box-shadow:inset 0 0 0 2px #2e5055,0 4px 0 #8b6b4e;position:relative;overflow:hidden}.portrait span{display:none}.portrait.quang{background-position:0 0}.portrait.trong{background-position:50% 0}.portrait.kieu-anh{background-position:100% 0}.portrait.ninh{background-position:0 50%}.portrait.phuong{background-position:50% 50%}.portrait.dung{background-position:100% 50%}.portrait.bao{background-position:0 100%}.portrait.han{background-position:50% 100%}.portrait.nam{background-position:100% 100%}.dialogue-content{flex:1;min-width:0;position:relative;padding:2px 3px 25px}.dialogue-speaker{font-size:14px;font-weight:800;letter-spacing:.08em;color:#8d6042;text-transform:uppercase;display:flex;justify-content:space-between}.dialogue-speaker small{color:#807569;font-size:12px}.dialogue-content p{font-size:17px;line-height:1.5;margin:12px 0 0;min-height:52px}.continue-button{position:absolute;right:0;bottom:0;border:0;background:transparent;color:#805b43;font-weight:800;letter-spacing:.1em;font-size:12px}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,24,31,.76);display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}.game-modal{position:relative;width:min(675px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#f2e3c3;color:#29414a;border:4px solid #8d704f;border-radius:8px;box-shadow:0 9px 0 #425159,0 25px 70px #071a27d1;padding:28px 30px 27px}.modal-close{position:absolute;right:13px;top:10px;width:32px;height:32px;border:0;background:transparent;color:#876849;font-size:27px;line-height:1}.modal-kicker{color:#9b6a41}.game-modal h2{font-size:clamp(25px,3vw,35px);line-height:1.1;letter-spacing:-.04em;margin:10px 27px 13px;color:#213a46}.modal-lead{font-size:14px;line-height:1.65;color:#526267;margin-bottom:20px}.modal-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:17px;min-height:49px}.modal-footer>span{font-size:13px;color:#985947;max-width:55%;line-height:1.45}.primary-button.small{min-height:40px;white-space:nowrap}.primary-button.wide{width:100%;margin-top:20px}
.puzzle-owner-banner{position:absolute;top:76px;left:50%;transform:translateX(-50%);z-index:8;padding:10px 16px;border:1px solid #f2c67d;border-radius:8px;background:rgba(20,46,57,.96);color:#fff3d2;box-shadow:0 8px 24px #08182088;font-size:13px}.reservation-proof{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:16px 0 12px;padding:14px 16px;border:1px solid #b99e78;border-radius:6px;background:#e5d0a5;font-size:13px}.reservation-proof span{color:#765544}
.mirror-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mirror-grid button,.river-route button{border:2px solid #baa17d;border-radius:6px;background:#e5d0a5;color:#304852;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:0 4px 0 #aa8e70}.mirror-grid button:hover,.river-route button:hover{background:#f5dfb1}.mirror-grid b,.river-route b{font-size:42px;line-height:1;color:#875e4b}.mirror-grid small,.river-route small{font-size:10px;font-weight:800;letter-spacing:.08em}
.draft-list{display:flex;flex-direction:column;gap:6px}.draft-list>div{display:flex;align-items:center;gap:8px;background:#e5d3b1;border:1px solid #c2aa82;border-radius:4px;min-height:40px;padding:5px 7px}.draft-list b{color:#936b49;width:23px;text-align:center}.draft-list span{flex:1;font-size:14px}.draft-list button,.setting-row button{border:1px solid #a88c6e;border-radius:4px;background:#f4e4c3;color:#36505a;min-width:30px;height:30px;font-weight:800}.draft-list button:hover,.setting-row button:hover{background:#ffdf9c}
.river-route{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.river-route button{min-height:126px}.river-route strong{font-size:12px}.evidence-list{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:17px}.evidence-list>div{padding:9px 11px;border:1px dashed #a98d6d;border-radius:4px;color:#7d7770;font-size:12px}.evidence-list>div.found{background:#d7e3cb;border-style:solid;border-color:#82aa83;color:#365849}.evidence-list b{margin-right:7px}.choice-list{display:flex;flex-direction:column;gap:8px}.choice-list button{display:flex;align-items:center;text-align:left;gap:14px;min-height:48px;padding:10px 13px;background:#ead8b5;border:1px solid #b99e78;border-radius:4px;color:#31474d;font-size:14px}.choice-list button:hover{background:#f9dfaa}.choice-list b{font:700 14px "Space Grotesk",sans-serif;color:#a06f4d}.choice-list span{margin-left:auto}.noise-warning,.modal-feedback{font-size:13px;color:#a14f44;line-height:1.5;margin:14px 0 0}
.final-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.final-slots>div{min-height:70px;background:#e0cba4;border:2px dashed #a88b67;border-radius:5px;padding:10px;display:grid;place-items:center;text-align:center;font-size:11px;color:#80715e}.final-slots>div.filled{background:#e8d5a3;border-style:solid;color:#314b4e;font-weight:800}.final-pieces{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.final-pieces button,.presenter-grid button{min-height:42px;border:1px solid #a98966;border-radius:4px;background:#f8e6bc;color:#3a4e52;font-weight:700;font-size:12px}.final-pieces button:hover,.presenter-grid button:hover{background:#f9d994}.return-route{display:flex;align-items:center;justify-content:space-between;gap:5px;flex-wrap:wrap}.return-route button{border:1px solid #af9471;background:#f1cf8d;border-radius:4px;padding:11px 7px;font-size:10px;font-weight:800;color:#3a4e52}.return-route button.done{background:#c7ddc8;color:#3e684e}.return-route button:disabled:not(.done){background:#e6d0a8;opacity:.56}.return-route i{color:#9d694c}.menu-buttons{display:flex;flex-direction:column;gap:10px}.setting-row{display:flex;justify-content:space-between;gap:15px;align-items:center;border-top:1px solid #ccb995;padding:13px 0;font-size:14px}.setting-row>div{display:flex;gap:4px}.setting-row button{font-size:11px;padding:0 7px}.source-list{font-size:13px;line-height:1.7;color:#4e6065;padding-left:20px}.source-list li{margin-bottom:7px}.ending-emblem{font-size:48px;text-align:center;color:#d4a350}.ending-modal{text-align:center}.ending-quote{font-family:Georgia,serif;font-size:19px;line-height:1.5;color:#765544;margin:18px 0}.ending-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.presenter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;background:#9d4d45;color:white;padding:12px;text-align:center}#blazor-error-ui a{color:#fff4ba}.loading-progress{position:absolute;top:45%;left:calc(50% - 28px);width:56px;height:56px}.loading-progress circle{fill:none;stroke:#ffd486;stroke-width:8}.loading-progress-text{position:absolute;top:55%;width:100%;text-align:center;color:#f5dfb4}.loading-progress-text:after{content:var(--blazor-load-percentage-text,"Đang tải trò chơi")}
.quest-card p{font-size:calc(11px * var(--text-scale,1.25))}.dialogue-content p{font-size:calc(13px * var(--text-scale,1.25))}.modal-lead,.draft-list span,.choice-list button,.setting-row{font-size:calc(11px * var(--text-scale,1.25))}.source-list,.modal-feedback,.noise-warning{font-size:calc(10px * var(--text-scale,1.25))}.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
@media(max-width:760px){.game-shell{min-height:0}.hud-top{top:12px;left:12px;right:12px}.brand-mark{font-size:9px}.brand-mark strong{font-size:12px}.brand-mark b{font-size:22px}.hud-actions{gap:4px}.hud-actions button{width:34px;height:34px;font-size:18px}.quest-card{top:61px;left:12px;width:min(230px,58vw);padding:10px 12px}.quest-card h2{font-size:16px;margin:7px 0 4px}.quest-card p{font-size:11px;margin-bottom:8px}.eyebrow{font-size:8px}.shard-track span{width:24px;height:22px;font-size:16px}.area-chip{top:auto;bottom:58px;right:10px;font-size:10px}.bottom-help{bottom:8px;font-size:10px;padding:7px 10px}.bottom-help kbd{font-size:9px}.journal{right:10px;top:55px;width:min(300px,80vw);max-height:calc(100vh - 115px)}.title-screen h1{font-size:clamp(45px,12vw,82px)}.title-kicker{font-size:8px}.title-screen>p{font-size:15px}.dialogue-wrap{bottom:45px;width:calc(100vw - 20px)}.dialogue-card{min-height:125px;padding:8px;gap:9px}.portrait{width:67px;min-height:100px}.portrait span{left:16px}.dialogue-content p{font-size:12px}.game-modal{padding:22px 17px;max-height:calc(100vh - 20px)}.game-modal h2{font-size:23px}.modal-lead{font-size:12px}.mirror-grid,.river-route{gap:4px}.mirror-grid button,.river-route button{min-height:85px}.mirror-grid b,.river-route b{font-size:30px}.mirror-grid small,.river-route small{font-size:8px}.river-route strong{font-size:9px}.draft-list span{font-size:11px}.title-note{font-size:9px;max-width:90vw}}
@media(max-height:580px){.quest-card{top:55px}.bottom-help{bottom:8px}.dialogue-wrap{bottom:15px}.title-ornament{margin-bottom:8px}.title-screen>p{margin:10px 0}.title-note{bottom:8px}.game-modal{padding-top:17px;padding-bottom:15px}.game-modal h2{font-size:23px;margin:6px 0}.modal-lead{margin-bottom:10px}.mirror-grid button,.river-route button{min-height:80px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.hud-center { display: flex; align-items: center; gap: 12px; pointer-events: auto; flex-wrap: wrap; justify-content: center; }
.team-hud-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(18, 38, 46, 0.88); border: 2px solid; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: #f7e8cf; box-shadow: 0 4px 14px rgba(0,0,0,0.35); white-space: nowrap; }
.team-hud-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }
.team-members-hud { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 8px; border-left: 1px solid rgba(247, 206, 132, 0.3); }
.teammate-hud-chip { font-size: 11px; font-weight: 600; color: #d1dbcb; background: rgba(0,0,0,0.25); padding: 2px 8px; border-radius: 6px; }
.match-clock { position: relative; top: auto; right: auto; z-index: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid rgba(222,183,131,.65); border-radius: 999px; background: rgba(36,31,28,.88); color: #f3ddbd; font-weight: 700; font-size: 13px; letter-spacing: .06em; pointer-events: auto; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.results-card { max-width: 900px; }
.results-list { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.result-row { display: grid; grid-template-columns: 32px 12px minmax(120px,1fr) 140px 100px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.5); }
.result-rank { font-size: 1.2rem; font-weight: 800; }
.team-swatch { width: 10px; height: 10px; border-radius: 50%; }
.live-progress { position: absolute; top: 82px; right: 24px; z-index: 5; width: 250px; padding: 12px; border: 1px solid rgba(169,141,109,.45); border-radius: 12px; background: rgba(250,244,233,.94); color: #493a31; box-shadow: 0 8px 22px rgba(49,36,26,.18); }
.live-progress-head, .live-progress-row { display: flex; align-items: center; gap: 7px; }
.live-progress-head { justify-content: space-between; margin-bottom: 8px; font-size: 10px; letter-spacing: .08em; }
.live-progress-head small, .live-progress-row small { color: #7d6d61; }
.live-progress-row { padding: 4px 0; font-size: 12px; }
.live-progress-row span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiplayer-area-chip { top: auto; bottom: 22px; right: 24px; z-index: 4; }
.pause-overlay { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(14,28,36,0.85); backdrop-filter: blur(6px); color: #fff4df; text-align: center; pointer-events: auto; }
.pause-card { background: #142a33; border: 2px solid #deb783; border-radius: 16px; padding: 32px 36px; max-width: 480px; width: 90%; box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 24px rgba(222,183,131,0.2); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pause-icon { font-size: 38px; color: #f7ce84; }
.pause-card strong { font-size: 22px; letter-spacing: 0.06em; color: #f7ce84; }
.pause-card span { font-size: 14px; color: #d1dbcb; line-height: 1.5; }
.resume-button { margin-top: 10px; padding: 12px 28px; font-size: 15px; font-weight: 800; border-radius: 8px; background: linear-gradient(135deg, #f7ce84, #e2ac4f); color: #142a33; border: 1px solid #ffe9b6; box-shadow: 0 4px 16px rgba(247,206,132,0.4); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.resume-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(247,206,132,0.6); }
.pause-wait-notice { margin-top: 8px; font-size: 13px; color: #8da69d; font-style: italic; }