*{box-sizing:border-box;margin:0;padding:0}
body{background:#070b10;color:#e6edf3;font-family:system-ui,-apple-system,sans-serif;min-height:100vh;overflow-x:hidden}
.screen{display:none;min-height:100vh}
.screen.active{display:block}
#intro{min-height:100vh;display:none;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 50% 30%,#1a2740,#070b10 70%);text-align:center;padding:20px}
#intro.active{display:flex}
.intro-art{font-size:72px;margin-bottom:16px}
.intro-title{font-size:26px;font-weight:800}
.intro-sub{margin-top:8px;color:#9db0c7}
.wrap{max-width:420px;margin:0 auto;padding:16px}
h1{font-size:22px;margin-bottom:4px}
h2{font-size:18px;color:#7eb6ff;margin-bottom:12px}
.sub{color:#8b9bb0;font-size:13px;margin-bottom:14px;line-height:1.4}
.card{background:linear-gradient(180deg,#141c27,#0f1520);border:1px solid #2a3647;border-radius:16px;padding:14px;margin-bottom:12px}
.hero-banner{height:100px;border-radius:16px;background:#1a2332;display:flex;align-items:flex-end;padding:12px;margin-bottom:12px;border:1px solid #2a3647}
.hero-banner .name{font-size:20px;font-weight:800}
.currencies{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
.cur{background:#0d131c;border:1px solid #2a3647;border-radius:12px;padding:10px 6px;text-align:center}
.cur .ico{font-size:18px}.cur .val{font-weight:800;font-size:14px;margin-top:2px}.cur .lbl{font-size:10px;color:#8b9bb0;margin-top:2px}
.row{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:14px}
.row:last-child{margin-bottom:0}.label{color:#8b9bb0}.value{font-weight:700}
button{width:100%;border:none;border-radius:12px;padding:13px;font-size:14px;font-weight:700;color:#fff;background:#238636;margin-top:8px}
button.blue{background:#1f6feb}button.purple{background:#6e40c9}button.gold{background:#9a6b00}button.gray{background:#2f3948}
button:disabled{opacity:.45}
input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a3647;background:#0d131c;color:#fff;font-size:16px;outline:none}
.error{color:#ff7b72;font-size:12px;margin-top:8px;display:none}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu-grid button{margin-top:0;min-height:48px}
.loc-list{display:grid;gap:8px}
.loc-btn,.enemy-card,.class-btn{width:100%;text-align:left;padding:12px;border-radius:12px;border:1px solid #2a3647;background:#121925;color:#e6edf3;font-size:14px}
.loc-btn:disabled{opacity:.4}
.meta{display:block;margin-top:4px;font-size:12px;color:#8b9bb0;font-weight:500}
.hero-stage{border:1px solid #3d4f6a;border-radius:16px;overflow:hidden;background:#1a2332;margin-bottom:8px}
.hero-img{display:block;width:100%;max-height:420px;object-fit:contain;background:#111}
.shop-list{display:grid;gap:10px}
.shop-item{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;background:#0d131c;border:1px solid #2a3647;border-radius:12px;padding:10px}
.shop-item img{width:72px;height:72px;object-fit:cover;border-radius:8px;background:#222}
.shop-item .info{display:flex;flex-direction:column;gap:6px}
.shop-item .title{font-weight:700;font-size:14px}
.shop-item .price{font-size:12px;color:#8b9bb0}
.shop-item button{margin-top:0;padding:8px 10px;font-size:13px}
.battle-stage{border:2px solid #2a3647;border-radius:14px;overflow:hidden;background:#0d1117;margin-bottom:8px;min-height:180px}
.battle-anim{display:block;width:100%;max-height:260px;object-fit:contain;background:#000}
.status-line{text-align:center;font-size:12px;color:#f0b429;min-height:18px;margin-bottom:6px}
canvas#fightCanvas{width:100%;display:block;background:linear-gradient(#1a2332,#121820)}
.hp-names{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-top:8px}
.bar{height:12px;background:#21262d;border-radius:8px;overflow:hidden;margin-top:4px}
.bar>div{height:100%;transition:width .2s}
#playerHpBar{background:#2ecc71;width:100%}#enemyHpBar{background:#e74c3c;width:100%}
#fightLog{margin-top:10px;text-align:center;color:#c9d1d9;font-size:13px;min-height:40px}
.countdown{text-align:center;font-size:64px;font-weight:900;color:#f1c40f;margin:12px 0;min-height:70px}
#enemyCard{min-height:90px;margin-bottom:10px}
#enemyCardName{font-size:18px;font-weight:800}
#enemyCardDiff{display:block;margin-top:6px;font-weight:700;color:#f1c40f}
.desc-block p{margin:0 0 8px;font-size:12px;color:#9db0c7;line-height:1.35}
.desc-block b{color:#e6edf3}
.quest-list{display:grid;gap:12px}
.quest-card{display:grid;grid-template-columns:84px 1fr;gap:10px;background:#121925;border:1px solid #2a3647;border-radius:14px;padding:10px}
.quest-card.hard{border-color:#922b21}
.quest-img{width:84px;height:84px;object-fit:cover;border-radius:10px;background:#222}
.quest-npc{font-weight:800;font-size:14px;margin-bottom:4px}
.quest-text{font-size:12px;color:#9db0c7;line-height:1.35;margin-bottom:6px}
.quest-need,.quest-rew{font-size:12px;color:#c9d1d9;margin-bottom:4px}
.quest-body button{margin-top:6px}