*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden;color:#f9f0d2;background:#130b08;font-family:Inter,Segoe UI,Microsoft YaHei,system-ui,sans-serif}body{display:grid;place-items:center}button{font:inherit}#app{width:100vw;height:100vh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 18% 12%,rgba(248,166,61,.24),transparent 26rem),radial-gradient(circle at 83% 80%,rgba(31,126,142,.2),transparent 28rem),linear-gradient(140deg,#160b08,#2b130c 48%,#0c1f23)}.game-frame{position:relative;width:960px;height:640px}.game-root{position:absolute;inset:0;width:960px;height:640px;overflow:hidden;border:2px solid rgba(255,214,141,.28);border-radius:10px;background:#28120c;box-shadow:0 24px 80px #0000008c;transform-origin:top left}#sceneCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#20100b}.top-hud,.bottom-nav,.side-panel,.toast,.modal-layer{position:absolute;z-index:2}.top-hud{top:12px;left:16px;right:16px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border:2px solid rgba(255,222,161,.38);border-radius:12px;background:linear-gradient(180deg,#532612eb,#2d1309e6),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 8px,transparent 8px 28px);box-shadow:0 10px 24px #00000047}.brand{display:flex;align-items:baseline;gap:16px;min-width:260px}.brand strong{color:#ffe6ad;font-size:28px;font-weight:950;letter-spacing:0;text-shadow:0 3px 0 #4b1a0b;white-space:nowrap}.brand span{color:#fedb8d;font-size:15px;font-weight:850;white-space:nowrap}.resource-bar{display:flex;gap:10px;align-items:center}.resource-chip{min-width:112px;height:44px;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid rgba(255,232,174,.35);border-radius:999px;background:#140b0675;box-shadow:inset 0 1px #ffffff14}.resource-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:#1b1009;font-size:13px;font-weight:950}.resource-chip b{display:block;color:#fff3cf;font-size:12px;line-height:1}.resource-chip span{display:block;margin-top:3px;color:#ffd27b;font-size:14px;font-weight:900;line-height:1}.side-panel{top:102px;right:18px;width:318px;max-height:462px;overflow:hidden;border:2px solid rgba(255,220,144,.42);border-radius:14px;background:linear-gradient(180deg,#32190ded,#1c0f09eb);box-shadow:0 16px 34px #0000005c}.side-panel.page-battle{width:258px}.panel-inner{padding:16px}.panel-title{margin:0 0 4px;color:#ffe2a8;font-size:24px;font-weight:950;line-height:1.1;text-shadow:0 2px 0 #4a1b0b}.panel-subtitle{margin:0 0 14px;color:#cdb989;font-size:13px;font-weight:750}.stat-list{display:grid;gap:8px;margin:12px 0}.stat-row{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:9px;background:#ffe6ad17;color:#f7e6ba;font-size:13px;font-weight:820}.wood-btn{min-height:40px;padding:0 16px;border:0;border-radius:10px;color:#fff6d8;background:linear-gradient(180deg,#d88b37,#9e4a1d);box-shadow:inset 0 2px #ffeba959,0 5px #5b2712,0 12px 18px #0000003d;font-size:14px;font-weight:950;cursor:pointer;transition:transform .12s ease,filter .12s ease}.wood-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.wood-btn:disabled{color:#fff6d89e;filter:grayscale(.25) brightness(.72);cursor:not-allowed;transform:none;box-shadow:inset 0 2px #ffeba924,0 3px #4b2414,0 8px 12px #00000038}.wood-btn:active{transform:translateY(2px);box-shadow:inset 0 2px #ffeba940,0 2px #5b2712,0 8px 12px #0003}.wood-btn.primary{background:linear-gradient(180deg,#f05f3a,#a82d19)}.wood-btn.cool{background:linear-gradient(180deg,#27c0b3,#126d6f)}.wood-btn.ghost{background:linear-gradient(180deg,#816a4b,#46301e)}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.filter-stack{display:grid;gap:6px;margin:10px 0}.filter-row{display:flex;flex-wrap:wrap;gap:6px}.filter-btn{min-height:26px;padding:0 9px;border:1px solid rgba(255,214,130,.28);border-radius:8px;color:#e8cea0;background:#0003;font-size:11px;font-weight:900;cursor:pointer}.filter-btn.active{color:#3b190c;border-color:#ffd36e;background:#ffd36e}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:184px;overflow:auto;padding-right:4px}.hero-card{position:relative;min-height:64px;padding:9px 9px 8px 54px;border:2px solid transparent;border-radius:11px;color:#f9e8bd;background:#ffe4a91a;cursor:pointer;text-align:left}.hero-card.selected{border-color:#ffd26b;background:#ffd05b38}.hero-card .portrait-dot{position:absolute;top:12px;left:10px;width:34px;height:34px;border-radius:50%;box-shadow:inset -8px -7px #00000029}.hero-card strong{display:block;font-size:13px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-card span{display:block;margin-top:6px;color:#d9c08c;font-size:11px;font-weight:850;white-space:nowrap}.empty-card{grid-column:1 / -1;min-height:56px;display:grid;place-items:center;border-radius:10px;color:#d9c08c;background:#ffe4a91a;font-size:12px;font-weight:850}.formation-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0}.slot-btn{min-height:40px;padding:5px 3px;border:1px solid rgba(255,214,130,.28);border-radius:9px;color:#f9e9bd;background:#0000003b;font-size:11px;font-weight:850;cursor:pointer}.inventory-list{display:grid;gap:8px;max-height:220px;overflow:auto;padding-right:4px}.item-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:8px 10px;border-radius:10px;background:#ffe4a91a;color:#f8e4b4;font-size:12px;font-weight:850}.summon-result{margin-top:12px;padding:10px;border-radius:10px;color:#fce8b6;background:#ffe6a11a;font-size:12px;font-weight:900}.summon-result-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;color:#ffe2a8}.summon-result-head b,.summon-result-head span{min-width:0;white-space:nowrap}.summon-result-list{display:grid;gap:6px;max-height:156px;overflow:auto;padding-right:2px}.summon-result-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:3px 8px;padding:7px 8px;border:1px solid rgba(255,226,168,.18);border-radius:8px;background:#0003}.summon-result-row span{grid-row:span 2;align-self:center;color:#2b160b;border-radius:999px;background:#ffe08b;font-size:10px;line-height:20px;text-align:center}.summon-result-row b,.summon-result-row em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.summon-result-row b{color:#fff4d4;font-size:13px}.summon-result-row em{color:#d9c08c;font-size:11px;font-style:normal}.summon-result-row.epic span{background:#b98cff}.summon-result-row.legend span{background:#ffb15c}.summon-result-row.mythic span{background:#ffd86a;color:#5b160e}.bottom-nav{left:112px;right:112px;bottom:14px;height:54px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:8px;border:2px solid rgba(255,225,156,.38);border-radius:18px;background:linear-gradient(180deg,#4d2612ed,#221209f0);box-shadow:0 12px 26px #0000005c}.nav-btn{border:0;border-radius:12px;color:#e9d2a4;background:#ffe09d1a;font-size:15px;font-weight:950;cursor:pointer}.nav-btn.active{color:#401d0c;background:linear-gradient(180deg,#ffe08b,#d98b31)}.toast{left:50%;top:96px;min-width:320px;padding:11px 18px;border-radius:12px;color:#fff4d3;background:#1a0d07e6;box-shadow:0 10px 24px #00000059;font-size:14px;font-weight:900;text-align:center;transform:translate(-50%);opacity:0;pointer-events:none;transition:opacity .18s ease}.toast.show{opacity:1}.modal-layer{inset:0;display:none;place-items:center;background:#11090594}.modal-layer.show{display:grid}.modal-box{width:min(420px,86%);padding:24px;border:3px solid rgba(255,223,151,.58);border-radius:18px;background:linear-gradient(180deg,#5a2d18,#2f160d);box-shadow:0 24px 60px #00000073;text-align:center}.modal-box h2{margin:0 0 10px;color:#ffe2a8;font-size:28px;font-weight:950}.modal-box p{margin:0 0 18px;color:#e3c99b;font-size:15px;font-weight:760}@media(max-width:720px)and (orientation:portrait){#app{align-items:start;padding-top:12px}}