*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}html,body,#root{height:100%}body{background:#0d0a08 radial-gradient(ellipse at 50% 30%,#1c130c,#0d0a08 70%);color:#e8dcc8;font-family:Microsoft YaHei,PingFang SC,Noto Sans SC,sans-serif;overflow:hidden}.serif{font-family:"Noto Serif SC",STZhongsong,SimSun,serif}.screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.panel{background:linear-gradient(180deg,#2a1f14,#17100a);border:2px solid #8a6a2f;border-radius:6px;box-shadow:0 0 0 1px #3a2c14 inset,0 0 24px #000c,0 0 12px #f0c96a1f;padding:22px 28px}.panel h2{font-family:"Noto Serif SC",STZhongsong,serif;color:#f0c96a;letter-spacing:6px;font-size:22px;text-shadow:0 0 14px rgba(240,201,106,.5);text-align:center;margin-bottom:16px}.divider{height:1px;margin:12px 0;background:linear-gradient(90deg,transparent,#8a6a2f,transparent)}.btn{display:inline-block;cursor:pointer;text-align:center;padding:10px 34px;font-size:16px;letter-spacing:4px;color:#f5e6c4;background:linear-gradient(180deg,#6b4f1d,#3a2a0f);border:1px solid #a5813c;border-radius:4px;text-shadow:0 1px 2px #000;transition:filter .12s,transform .06s}.btn:hover{filter:brightness(1.25);box-shadow:0 0 14px #f0c96a59}.btn:active{transform:translateY(1px)}.btn.red{background:linear-gradient(180deg,#7a2018,#3a0e0a);border-color:#b0402f}.btn.ghost{background:transparent;border-color:#6a5630;color:#c9b280}.btn:disabled{filter:grayscale(.8) brightness(.6);cursor:not-allowed}.back-btn{position:absolute;left:26px;top:22px;padding:6px 20px;font-size:14px}.title-logo{font-family:"Noto Serif SC",serif;font-size:64px;letter-spacing:10px;color:#f0c96a;text-shadow:0 0 30px rgba(240,201,106,.55),0 2px 0 #6a4a10,0 5px 14px #000;margin-bottom:6px}.title-sub{color:#a08d6a;letter-spacing:3px;font-size:14px;margin-bottom:48px}.title-btns{display:flex;flex-direction:column;gap:14px;width:260px}.footer-note{position:absolute;bottom:18px;color:#6a5c42;font-size:12px;letter-spacing:1px}.torch{position:absolute;top:24%;width:10px;height:46px;border-radius:4px;background:linear-gradient(180deg,#ffb347,#c4531d 60%,#3a2a0f);box-shadow:0 0 30px 12px #ff8c2840;animation:flicker 1.6s infinite alternate}@keyframes flicker{0%{filter:brightness(1)}to{filter:brightness(1.3)}}.card-row{display:flex;gap:22px}.card{width:250px;cursor:pointer;padding:18px;background:linear-gradient(180deg,#241a10,#140e08);border:2px solid #5a4520;border-radius:6px;transition:border-color .15s,box-shadow .15s,transform .15s;position:relative}.card:hover{transform:translateY(-4px);border-color:#a5813c}.card.sel{border-color:#f0c96a;box-shadow:0 0 20px #f0c96a66}.card.locked{filter:grayscale(.9) brightness(.55);cursor:not-allowed}.card h3{font-family:"Noto Serif SC",serif;color:#f0c96a;font-size:19px;letter-spacing:3px;margin-bottom:6px}.card .tag{font-size:12px;color:#a08d6a;margin-bottom:10px}.card .desc{font-size:13px;color:#c9bda4;line-height:1.6;min-height:60px}.card .skill-list{margin-top:10px;font-size:12px;color:#8fb2d8;line-height:1.8}.lock-mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#d8c8a0;font-size:18px;letter-spacing:6px;background:#00000073}.stars{color:#f0c96a;letter-spacing:2px}.fatigue-ok{color:#ffd24a}.fatigue-zero{color:#ff6a52}.kbd{display:inline-block;min-width:20px;text-align:center;padding:1px 5px;margin-right:6px;border:1px solid #8a6a2f;border-radius:3px;background:#1a1208;color:#f0c96a;font-size:11px;font-family:monospace}.game-wrap{position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;max-height:100vh}canvas#game{width:100%;height:100%;display:block;background:#000}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-size:13px}.hud .clickable{pointer-events:auto}.status{position:absolute;left:14px;top:12px;display:flex;gap:10px;align-items:flex-start}.portrait{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a3820,#1a1208);border:2px solid #a5813c;box-shadow:0 0 10px #f0c96a59;display:flex;align-items:center;justify-content:center;font-family:"Noto Serif SC",serif;font-size:26px;color:#f0c96a}.bars{display:flex;flex-direction:column;gap:4px;padding-top:3px}.char-name{color:#f0c96a;font-size:13px;text-shadow:0 1px 2px #000;margin-bottom:2px}.bar{width:230px;height:13px;background:#14100a;border:1px solid #000;border-radius:2px;position:relative;box-shadow:0 0 0 1px #5a4520}.bar .fill{height:100%;border-radius:1px;transition:width .15s}.bar.hp .fill{background:linear-gradient(180deg,#ff6a52,#b02818)}.bar.mp .fill{background:linear-gradient(180deg,#5aa0f0,#1d4f9a)}.bar.exp{height:6px;width:230px}.bar.exp .fill{background:linear-gradient(180deg,#a8e07a,#4a8a2a)}.bar span{position:absolute;width:100%;text-align:center;font-size:10px;line-height:12px;color:#fff;text-shadow:0 1px 1px #000}.bar.exp span{display:none}.sub-res{display:flex;gap:12px;margin-top:2px;font-size:12px;color:#e8dcc8;text-shadow:0 1px 2px #000}.coin-ico{color:#f0c96a}.pot-hp{color:#ff9a8a}.pot-mp{color:#8ab8ff}.rage-badge{display:none;margin-top:4px;padding:2px 10px;border-radius:3px;font-size:12px;letter-spacing:2px;color:#ffb0a0;background:#781008bf;border:1px solid #ff5040;text-shadow:0 0 8px rgba(255,60,40,.8);animation:ragePulse .5s infinite alternate}.rage-badge.on{display:inline-block}@keyframes ragePulse{0%{box-shadow:0 0 4px #ff3c2866}to{box-shadow:0 0 14px #ff3c28e6}}.top-right{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}.minimap{display:flex;gap:5px}.room-dot{width:18px;height:18px;border:1px solid #6a5630;background:#1a1208;display:flex;align-items:center;justify-content:center;font-size:11px;color:#6a5c42}.room-dot.done{background:#2a2415;color:#a5813c}.room-dot.cur{border-color:#f0c96a;color:#f0c96a;box-shadow:0 0 8px #f0c96a80}.fatigue{text-align:right}.fatigue-bar{width:150px;height:8px;background:#14100a;border:1px solid #000;box-shadow:0 0 0 1px #5a4520;border-radius:2px;overflow:hidden;margin-left:auto}.fatigue-bar .fill{height:100%;background:linear-gradient(180deg,#ffe27a,#c8961d);transition:width .3s}.fatigue span{font-size:11px;color:#d8c88a;text-shadow:0 1px 2px #000}.fatigue-warn{position:absolute;top:22%;width:100%;text-align:center;font-size:18px;letter-spacing:3px;color:#ff6a52;text-shadow:0 0 12px rgba(255,60,40,.7),0 2px 3px #000;opacity:0;pointer-events:none}.fatigue-warn.on{animation:warnBlink 1.1s 2}@keyframes warnBlink{0%,to{opacity:0}50%{opacity:1}}.boss-bar{position:absolute;top:16px;left:50%;transform:translate(-50%);width:460px;display:none;text-align:center}.boss-bar .bname{color:#ffb0a0;font-family:"Noto Serif SC",serif;letter-spacing:3px;text-shadow:0 1px 3px #000;margin-bottom:3px;font-size:15px}.boss-bar .bar{width:100%;height:12px}.skillbar{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:7px;align-items:flex-end}.slot{width:50px;height:50px;border:2px solid #6a5630;border-radius:5px;position:relative;background:radial-gradient(circle at 40% 30%,#2e2214,#12100c);box-shadow:0 2px 6px #000;display:flex;align-items:center;justify-content:center}.slot .icon{font-family:"Noto Serif SC",serif;font-size:21px;color:#f0c96a;text-shadow:0 0 8px rgba(240,201,106,.5)}.slot .key{position:absolute;top:1px;left:3px;font-size:10px;color:#d8c8a0;font-family:monospace;text-shadow:0 1px 1px #000}.slot .cd-mask{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3px}.slot .cd-num{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;text-shadow:0 1px 3px #000}.slot .lock-lv{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#8a7a5a;font-size:11px;font-family:monospace;text-shadow:0 1px 2px #000}.slot.locked .icon{opacity:.25}.slot.no-mp .icon{color:#5a708c}.slot .sname{position:absolute;bottom:-16px;width:100%;text-align:center;font-size:9px;color:#a08d6a;white-space:nowrap}.slot.wide{width:58px}.combo{position:absolute;right:34px;top:34%;text-align:right;opacity:0;transition:opacity .3s}.combo.on{opacity:1}.combo .num{font-size:52px;font-weight:700;color:#ffd24a;text-shadow:0 0 18px rgba(255,180,60,.6),0 2px 0 #6a4a10,0 4px 8px #000;font-family:"Noto Serif SC",serif}.combo .lbl{font-size:14px;letter-spacing:8px;color:#f0c96a}.combo.pop .num{animation:comboPop .18s}@keyframes comboPop{0%{transform:scale(1.35)}to{transform:scale(1)}}.pickup-hint{position:absolute;bottom:96px;left:50%;transform:translate(-50%);font-size:14px;color:#ffe8a0;text-shadow:0 1px 3px #000;opacity:0;transition:opacity .2s}.pickup-hint.on{opacity:1}.pickup-hint .kbd{margin:0 4px}.hurt-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(200,30,20,.55));opacity:0;transition:opacity .4s}.hurt-flash.on{opacity:1;transition:opacity .05s}.hint{position:absolute;bottom:14px;right:16px;color:#8a7a5a;font-size:12px}.center-tip{position:absolute;top:42%;width:100%;text-align:center;font-family:"Noto Serif SC",serif;font-size:30px;color:#f0c96a;letter-spacing:8px;text-shadow:0 0 20px rgba(240,201,106,.6),0 3px 6px #000;opacity:0}.center-tip.on{animation:tipIn 1.8s forwards}@keyframes tipIn{0%{opacity:0;transform:translateY(16px)}15%{opacity:1;transform:none}80%{opacity:1}to{opacity:0}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#050302c7;display:flex;align-items:center;justify-content:center;z-index:10}.overlay .panel{min-width:340px;text-align:center}.overlay .btn-row{display:flex;gap:14px;justify-content:center;margin-top:18px}.grade{font-family:"Noto Serif SC",serif;font-size:84px;line-height:1;text-shadow:0 0 30px currentColor,0 4px 0 rgba(0,0,0,.6);margin:8px 0 4px}.stat-row{display:flex;justify-content:space-between;gap:60px;font-size:14px;padding:5px 2px;color:#c9bda4}.stat-row b{color:#f0c96a;font-weight:400}.key-table{width:100%;border-collapse:collapse;font-size:14px}.key-table td{padding:6px 10px;border-bottom:1px solid #3a2c14;color:#c9bda4}.key-table td:first-child{width:150px;color:#f0c96a}@media (max-width: 900px){.title-logo{font-size:40px}.card-row{flex-direction:column}.card{width:320px}}