*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07090f;color:#dfdad0;font-family:"Courier New","Microsoft YaHei",monospace}
body{display:grid;place-items:center}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
button:focus-visible{outline:2px solid #89d1cf;outline-offset:4px}
#stage{position:relative;width:min(100vw,177.7778vh);aspect-ratio:16/9;overflow:hidden;background:#11141d;container-type:inline-size;box-shadow:0 0 100px #121826}
#world{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.hidden{display:none!important}
.grain{pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(transparent 0px,transparent 3px,#00000015 4px);opacity:.7}
.screen{position:absolute;inset:0}
.edition{position:absolute;top:6%;left:6%;font-size:1cqw;letter-spacing:.13em;color:#98aaaa}
.edition i{display:inline-block;width:.45cqw;height:.45cqw;background:#c65757;margin-right:1cqw;box-shadow:0 0 12px #ba5151}
.edition span{display:block;font-size:.64cqw;margin-left:1.5cqw;margin-top:.5cqw;letter-spacing:.22em;color:#596d7d}
.title-block{position:absolute;top:20%;left:8%;width:43%}
.eyebrow{font-size:.9cqw;letter-spacing:.4em;color:#aab7bd;margin:0 0 1cqw}
h1{font-family:"Songti SC","SimSun",serif;font-size:5.9cqw;font-weight:400;letter-spacing:.17em;line-height:1.18;margin:0;color:#e4dfd4;text-shadow:3px 3px #344655}
h1 span{color:#c06265}
.title-line{width:29cqw;height:1px;background:linear-gradient(90deg,#a25759,transparent);margin:1.5cqw 0}
.tagline{color:#9b9ca2;font-size:1cqw;letter-spacing:.12em;margin:0 0 2.8cqw}
.menu-buttons{display:flex;flex-direction:column;width:25cqw;gap:.5cqw}
.menu-buttons button{display:flex;align-items:center;gap:1.5cqw;text-align:left;font-size:1.5cqw;padding:1.05cqw .6cqw;border-bottom:1px solid #78939621;position:relative;transition:background .15s,color .15s}
.menu-buttons button:before{content:"";position:absolute;left:-1.2cqw;width:.3cqw;height:.3cqw;background:#d16e70;opacity:0}
.menu-buttons button:hover,.menu-buttons button:focus{background:#64788522;color:#f5eadd}
.menu-buttons button:hover:before,.menu-buttons button:focus:before{opacity:1}
.menu-buttons small{font-size:.7cqw;color:#6e8c95}
.menu-buttons button span{font-size:.6cqw;letter-spacing:.12em;margin-left:auto;color:#899698}
.archive-caption{position:absolute;right:9%;bottom:15%;text-align:right}
.archive-caption b{font-weight:400;letter-spacing:.2em;font-size:1.2cqw;display:block;color:#bcbfc1}
.archive-caption span{font-size:.6cqw;letter-spacing:.2em;color:#6f8b94;display:block;margin-top:.7cqw}
footer{position:absolute;bottom:4%;left:6%;right:6%;border-top:1px solid #93acac27;padding-top:1.2cqw;display:flex;justify-content:space-between;font-size:.7cqw;color:#647c86}
#tools{position:absolute;right:3%;top:3%;display:flex;gap:1.2cqw;z-index:20}
#tools button{font-size:.78cqw;color:#9ab0b6;padding:.4cqw .5cqw;border:1px solid transparent}
#tools button:hover{border-color:#536676;background:#111824}
#hud{position:absolute;inset:0;pointer-events:none}
.player-info{position:absolute;left:3%;top:4%;width:22%}
#role-label{font-size:1.4cqw;letter-spacing:.15em;color:#dac2a0}
.unit-name{font-size:.58cqw;color:#708b97;margin-left:1cqw}
.meter{height:.8cqw;margin-top:.7cqw;position:relative;background:#11151de0;border:1px solid #657b8055}
.meter i{display:block;height:100%;width:100%;background:#b96a6a;transition:width .12s}
.meter span{position:absolute;right:.4cqw;top:-1.15cqw;font-size:.65cqw;color:#d3a8a2}
.meter.energy{height:.3cqw;margin-top:.45cqw;width:70%;border:none}
.energy i{background:#7eaeb7}
.room-info{position:absolute;top:4%;left:38%;width:32%;text-align:center}
.room-info>span{font-size:.6cqw;letter-spacing:.2em;color:#7999a0;display:block;margin-bottom:.5cqw}
.room-info b{font-size:1.2cqw;letter-spacing:.15em;font-weight:400}
.room-info p{font-size:.65cqw;line-height:1.7;color:#a6b9bc;margin:.6cqw 0;white-space:pre-line}
#boss-hud{position:absolute;left:29%;right:18%;top:17%;text-align:center}
#boss-hud>span{font-size:.9cqw;color:#d4bbba}
#phase-label{display:inline-block;margin-left:1cqw;font-size:.65cqw;color:#8ea4aa}
.boss-meter{position:relative;margin-top:.7cqw;height:.45cqw;background:#202431;border:1px solid #77858b66}
.boss-meter i{display:block;background:#b46771;height:100%;transition:width .12s}
.boss-meter em{position:absolute;top:0;width:1px;background:#c8b5a3;height:100%}
#bottom-hud{position:absolute;bottom:7.5%;left:3%;right:3%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #72939444;padding-top:1cqw;background:linear-gradient(transparent,#080e16cc)}
.role-buttons,.skill-buttons{display:flex;gap:.6cqw;align-items:center;pointer-events:auto}
.role-buttons button{border:1px solid #586f7744;width:4.5cqw;padding:.5cqw 0;font-size:.8cqw;color:#7e919e}
.role-buttons button.active{border-color:#a2b0b6;color:#e2e2d4;background:#66859d22}
.role-buttons button span{display:block;font-size:.6cqw;margin-top:.4cqw}
.role-buttons>small{font-size:.55cqw;color:#57727e;writing-mode:vertical-rl;margin-left:.3cqw}
.skill-buttons button{position:relative;min-width:10cqw;height:3.4cqw;display:flex;gap:.65cqw;align-items:center;border:1px solid #65798844;background:#17212d88;padding:.7cqw;font-size:.72cqw}
.skill-buttons button kbd{font-size:1.1cqw;color:#c9d9db}
.skill-buttons button small{position:absolute;bottom:.2cqw;right:.5cqw;font-size:.6cqw;color:#b78786}
.skill-buttons button.cooling{opacity:.45}
#collectible-counters{position:relative}
#key-counter{position:absolute;right:calc(100% + 2cqw);top:0;white-space:nowrap}
.fragments{font-size:1.1cqw;color:#d4b9a1}
.fragments small{display:block;font-size:.5cqw;color:#70858e;margin-top:.4cqw}
.key-guide{position:absolute;bottom:3%;width:100%;text-align:center;font-size:.58cqw;letter-spacing:.06em;color:#7d919b}
#toast{position:absolute;left:50%;top:73%;transform:translateX(-50%);max-width:75%;padding:.8cqw 1.5cqw;background:#0a111deb;border-left:2px solid #ac6868;color:#d3d8cc;z-index:40;font-size:.9cqw;text-align:center;white-space:pre-line;pointer-events:none}
#modal{position:absolute;inset:0;background:#060b16aa;z-index:30;display:grid;place-items:center;backdrop-filter:blur(2px)}
#dialog{width:46%;max-height:86%;overflow:auto;background:#101a25f5;border:1px solid #68858b66;box-shadow:0 0 0 5px #141f2c55,0 25px 80px #0008;padding:2.5cqw 3cqw}
#dialog .eyebrow{font-size:.65cqw;color:#769ba5}
#dialog h2{font-family:"Songti SC","SimSun",serif;font-weight:400;font-size:2.2cqw;letter-spacing:.12em;margin:0 0 1.5cqw}
#dialog p{font-size:.95cqw;line-height:1.9;color:#abbcc2}
#dialog .actions{display:flex;gap:1cqw;margin-top:2cqw;flex-wrap:wrap}
#dialog button{padding:.8cqw 1.3cqw;border:1px solid #64858c66;font-size:.9cqw;text-align:left}
#dialog button:hover{background:#344a56}
#dialog .primary{background:#86575b;color:#f6e1d1;border-color:#a3696b}
#dialog .slot{display:block;width:100%;margin:.7cqw 0;padding:1cqw}
#dialog .slot small{display:block;font-size:.7cqw;color:#9aafb9;margin-top:.5cqw}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6cqw;font-size:.75cqw;color:#9eb3be;margin:1.5cqw 0}
.control-grid b{color:#e2cfb4;font-weight:400}
.stats{display:flex;justify-content:space-between;border-block:1px solid #526a7155;margin:1.5cqw 0;padding:1cqw 0;font-size:.8cqw;color:#c8c4b9}
#rotate{display:none}
#touch{position:absolute;bottom:15%;left:3%;right:3%;justify-content:space-between;pointer-events:none}
#touch>div{display:flex;gap:1cqw}
#touch button{pointer-events:auto;background:#17233388;border:1px solid #71878b66;min-width:4cqw;height:4cqw;font-size:1.2cqw;touch-action:none}
#stage:fullscreen{width:min(100vw,177.7778vh);height:auto;margin:auto}
::backdrop{background:#05070b}
@media(pointer:coarse){.key-guide{display:none}#bottom-hud{bottom:4%}.room-info p{font-size:.85cqw}}
@media(orientation:portrait) and (max-width:700px){#rotate{display:grid;place-content:center;text-align:center;position:fixed;inset:0;background:#0b121deb;z-index:50;font-size:20px;line-height:2}#rotate small{color:#849ba6;font-size:13px}}
/* Pointer controls are shown only on touch devices. */
#touch{display:none}#dialog button:disabled{opacity:.4;cursor:default}#world:focus{outline:none}
@media(pointer:coarse){#touch:not(.hidden){display:flex}}