:root{color-scheme:dark;--ink:#131e2e;--gold:#dfc186;--blue:#88c6dd;--muted:#a7b0bd;--edge:#d1b47744;--panel:#152032f0;font-family:Microsoft YaHei,PingFang SC,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:#0b111c;color:#f5efdf;min-height:100vh;display:grid;place-items:center}button{font:inherit;cursor:pointer;border:1px solid var(--edge);color:inherit;transition:background .15s,transform .15s}button:hover{transform:translateY(-1px)}button:focus-visible{outline:3px solid #a9e0ef;outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed;transform:none}.hidden{display:none!important}#app{width:min(1120px,100vw);position:relative;min-height:620px;background:#131d2c;border:1px solid #ffffff14;box-shadow:0 20px 100px #0009}.screen{min-height:650px}.title-screen{position:relative;overflow:hidden;background:linear-gradient(90deg,#101a2cee,#101a2c55),url(assets/title.webp) center/cover}.title-copy{position:relative;z-index:2;padding:95px 0 70px 65px;width:55%}.eyebrow{font-size:11px;letter-spacing:4px;color:var(--gold);font-weight:600}h1{font-size:40px;letter-spacing:12px;font-weight:500;margin:25px 0 18px;text-shadow:0 4px 25px #000a}h1 span{display:block;font-size:54px;letter-spacing:7px;margin-top:14px}h2{font-size:28px;letter-spacing:3px;font-weight:500;margin:8px 0}h3{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:2px;margin:0 0 16px}.title-sub{font-size:14px;color:#d1d9df;line-height:2}.title-actions{display:grid;gap:12px;margin-top:34px;max-width:265px}.primary{background:linear-gradient(120deg,#e7cb94,#cba96c);color:#202535;border-color:#e8d2aa;padding:15px 22px;letter-spacing:1px;font-weight:600}.secondary{background:#142238de;border-color:#a6bfd344;padding:11px 18px;color:#e5e9eb}.quiet{font-size:11px;color:#acb8c5;margin-top:24px}.title-hero{position:absolute;right:10px;bottom:0;width:48%;height:90%;display:flex;align-items:flex-end;filter:drop-shadow(0 10px 25px #030c2a77)}.title-hero img{object-fit:contain;height:85%;max-width:58%;margin-right:-13%}.title-hero img:first-child{height:100%;z-index:1}.title-screen footer{position:absolute;bottom:22px;left:65px;z-index:3;font-size:10px;letter-spacing:1px;color:#bcc5ce}#video-screen{background:#000;position:relative;display:grid;place-items:center}video{width:100%;max-height:650px}#skip-video{position:absolute;right:25px;top:25px}#menu-screen{padding:35px 42px;background:linear-gradient(#101a2ee6,#111f30f5),url(assets/city-overview.webp) center/cover}.menu-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.text-button{background:none;border:0;color:var(--gold);font-size:12px;padding:12px}.menu-grid{display:grid;grid-template-columns:1.14fr 1fr;gap:36px}.hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px}.hero-card{position:relative;text-align:left;background:linear-gradient(#1b2d4499,#0b1427ee);border:1px solid #9dbbd333;padding:0;min-height:330px;overflow:hidden}.hero-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.hero-card img{height:210px;width:100%;object-fit:contain;padding:15px 8px 0;filter:drop-shadow(0 7px 15px #0006)}.hero-card .hero-copy{padding:13px 14px}.hero-card b{font-size:21px;letter-spacing:3px;display:block}.hero-card small{display:block;font-size:10px;color:var(--gold);margin-top:8px}.hero-card p{font-size:11px;color:#c2ccd5;line-height:1.8;margin:8px 0 0}.selected-mark{position:absolute;right:12px;top:12px;color:var(--gold);font-size:11px}.level-cards{display:grid;gap:12px}.level-card{display:flex;align-items:center;gap:15px;padding:0;overflow:hidden;background:#102038;text-align:left;border:1px solid #ffffff26;min-height:91px}.level-card.selected{border-color:var(--gold)}.level-card img{width:122px;height:88px;object-fit:cover}.level-card b{display:block;font-size:17px;font-weight:500}.level-card small{display:block;margin-top:8px;color:#aabcca;font-size:11px}.instruction{font-size:11px;line-height:2;color:#adbcca;margin:18px 0}#start-run{width:100%}.settings{display:flex;gap:25px;margin-top:26px;font-size:11px;color:#abb9c7}.settings input{accent-color:var(--gold);vertical-align:middle}#hud{height:72px;background:#101b2d;display:flex;align-items:center;padding:12px 25px;gap:23px}.hud-identity{display:flex;align-items:center;gap:12px;min-width:128px}.hud-identity img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--edge)}.hud-identity b{font-size:15px;letter-spacing:2px}.hud-identity small,.hud-time small{font-size:10px;color:#9fb1c5;display:block;margin-top:5px}.hud-bars{flex:1;max-width:570px}.bar{position:relative;height:18px;background:#0005;border:1px solid #ffffff15;overflow:hidden}.bar i{height:100%;display:block;transition:width .12s}.bar span{position:absolute;inset:0;text-align:center;font-size:9px;line-height:16px;color:#fff;text-shadow:0 1px 3px #000}.health i{background:linear-gradient(90deg,#779968,#a9bc73)}.experience{margin-top:6px;height:12px}.experience i{background:linear-gradient(90deg,#537fa2,#86c0d8)}.experience span{line-height:10px;font-size:8px}.hud-time{text-align:center;margin-left:auto;min-width:65px}.hud-time strong{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:2px}#pause-button{font-size:11px;padding:9px 13px}#game-frame{position:relative;width:100%;aspect-ratio:16/9;background:#111c29;overflow:hidden}#game{width:100%;height:100%}#game canvas{display:block;width:100%!important;height:100%!important}#boss-hud{position:absolute;top:12px;left:25%;width:50%;text-align:center;pointer-events:none}#boss-hud b{font-size:11px;color:#f5d39b}.boss{height:9px;margin-top:6px}.boss i{background:linear-gradient(90deg,#a95955,#d8a267)}#banner{position:absolute;top:34%;left:0;width:100%;text-align:center;padding:24px;background:linear-gradient(90deg,transparent,#101b2dcc,transparent);font-size:27px;letter-spacing:5px;pointer-events:none;text-shadow:0 2px 12px #000}#toast{position:absolute;bottom:17px;left:50%;transform:translate(-50%);background:#101c30e8;border:1px solid var(--edge);padding:11px 18px;border-radius:3px;font-size:12px;pointer-events:none;max-width:85%;text-align:center}.equipment-footer{height:68px;padding:12px 25px;display:flex;gap:25px;align-items:center;background:#101b2d}.equipment-slots{display:flex;gap:8px}.slot{width:44px;height:44px;position:relative;background:#20324b;border:1px solid #b8c7d52b;display:grid;place-items:center}.slot img{width:36px;height:36px;object-fit:contain}.slot .glyph{color:var(--gold);font-size:22px}.slot small{position:absolute;bottom:1px;right:3px;font-size:9px;color:#e3ca97}.slot.evolved{border-color:#efcc77;box-shadow:0 0 10px #edd08322}#wave-label{font-size:11px;color:#a8b8c9;margin-left:auto}.modal{position:absolute;inset:0;z-index:30;background:#08111be0;display:grid;place-items:center;backdrop-filter:blur(5px)}.modal-content{width:min(760px,94%);padding:32px;background:#162437;border:1px solid #d9c49455;text-align:center;box-shadow:0 15px 90px #0008}.modal-content h2{margin-bottom:10px}.modal-subtitle{font-size:12px;color:#afbed0;margin:0 0 23px;line-height:1.9}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.choice{display:flex;flex-direction:column;align-items:center;background:#1d3046;border:1px solid #a8bbcf44;padding:18px 12px;min-height:235px}.choice:hover{border-color:var(--gold);background:#263d54}.choice img{height:62px;max-width:94%;object-fit:contain;margin:5px 0 16px}.choice .glyph{width:62px;height:62px;line-height:62px;border:1px solid #dfc18677;margin:5px 0 16px;color:var(--gold);font-size:32px;border-radius:50%}.choice b{font-size:16px;font-weight:500}.choice small{font-size:10px;color:var(--gold);margin:8px 0}.choice p{font-size:11px;color:#b2c4d6;line-height:1.8;margin:0}.choice em{font-size:10px;color:#e1c891;font-style:normal;margin-top:14px;line-height:1.7}.modal-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:23px}.result-stats{display:flex;justify-content:center;gap:36px;margin:25px 0}.result-stats b{display:block;font-size:26px;color:var(--gold);font-weight:400}.result-stats small{font-size:11px;color:#a7b8c9}.loading{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:#111c2ddd;font-size:14px;letter-spacing:3px}#joystick{display:none;position:absolute;bottom:18px;left:24px;width:92px;height:92px;border-radius:50%;border:1px solid #d9e8fa55;background:#14345433;touch-action:none;z-index:10}#joystick span{display:block;position:absolute;width:35px;height:35px;left:28px;top:28px;background:#b1d1e955;border:1px solid #c8dceb77;border-radius:50%;pointer-events:none}@media(pointer:coarse){#joystick{display:block}}@media(max-width:760px){#app{min-height:0}.screen{min-height:540px}.title-copy{padding:60px 24px;width:65%}h1{font-size:25px}h1 span{font-size:36px;letter-spacing:4px}.title-sub{font-size:11px}.title-hero{width:45%;opacity:.85}.title-screen footer{left:24px;font-size:8px}.title-actions{max-width:210px}#menu-screen{padding:23px 20px}.menu-grid{gap:20px;grid-template-columns:1fr}.hero-card{min-height:230px}.hero-card img{height:140px}.hero-card p{display:none}.level-cards{grid-template-columns:1fr 1fr}.level-card{display:block}.level-card img{width:100%;height:80px}.level-card div{padding:10px}.level-card small{font-size:9px}.menu-heading{margin-bottom:20px}.settings{gap:15px;font-size:10px}#hud{height:62px;padding:8px;gap:8px}.hud-identity{min-width:80px;gap:6px}.hud-identity img{width:33px;height:33px}.hud-identity b{font-size:11px}.hud-identity small{font-size:8px}.hud-time strong{font-size:15px}.hud-time{min-width:48px}#pause-button{padding:8px;font-size:10px}.equipment-footer{height:53px;padding:8px;gap:12px}.slot{width:30px;height:30px}.slot img{width:25px;height:25px}.slot .glyph{font-size:17px}.equipment-slots{gap:4px}#wave-label{font-size:8px}.modal-content{padding:20px 12px}.choices{gap:8px}.choice{padding:10px 6px;min-height:200px}.choice b{font-size:12px}.choice p{font-size:9px}.choice em{font-size:8px}.choice img,.choice .glyph{height:45px;margin-bottom:10px}.choice .glyph{width:45px;line-height:45px;font-size:24px}.modal-content h2{font-size:20px}.modal-subtitle{font-size:10px}.primary{padding:12px 15px}.result-stats{gap:22px}}#app.playing{width:min(1120px,100vw,calc((100dvh - 140px)*16/9));min-height:0}@media(max-width:760px){#app.playing{width:min(1120px,100vw,calc((100dvh - 115px)*16/9))}}.modal.defeat-subtitle{background:transparent;backdrop-filter:none;pointer-events:none}.defeat-subtitle .modal-content{background:transparent;border:0;box-shadow:none;text-align:center;pointer-events:auto;width:auto;padding:32px}.modal.defeat-subtitle .modal-content h2{font-size:clamp(36px,5vw,72px);color:#f4dfc2;text-shadow:0 3px 8px #000,0 0 24px #1b1010;letter-spacing:.15em}.defeat-subtitle .modal-actions{justify-content:center;margin-top:30px}.defeat-subtitle button{background:#111b29b8}.defeat-subtitle .modal-subtitle{color:#f4dfc2;text-shadow:0 2px 5px #000;margin:6px 0 0}.defeat-subtitle button{min-width:140px;min-height:44px;border:10px solid transparent;border-image:url(assets/ui-v03/skill-rail.png) 56 120 fill / 10px 22px / 0 stretch}.defeat-subtitle button:disabled{filter:grayscale(.7) brightness(.6);transform:none}