:root{--ink:#20233d;--muted:#757b96;--cream:#fff9eb;--panel:#fffdf7;--blue:#5ea9ff;--deep:#407eea;--mint:#71dec5;--coral:#ff6b6b;--yellow:#ffd35a;--violet:#9b7cff;--shadow:0 14px 35px rgba(39,62,112,.16)}
*{box-sizing:border-box}html,body{margin:0;min-width:1180px;min-height:720px;background:linear-gradient(180deg,#a8ddff 0,#e9f6d6 46%,#cbe999 100%);color:var(--ink);font-family:"Arial Rounded MT Bold","Microsoft YaHei",system-ui,sans-serif;overflow:auto}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 18% 28%,rgba(255,255,255,.8) 0 5%,transparent 6%),radial-gradient(circle at 78% 18%,rgba(255,255,255,.7) 0 7%,transparent 8%),linear-gradient(175deg,transparent 58%,rgba(87,177,100,.18) 59% 100%);pointer-events:none}.sky-orb{position:fixed;border-radius:50%;filter:blur(2px);opacity:.7}.orb-one{width:260px;height:260px;background:#fff2a7;right:-70px;top:-90px}.orb-two{width:180px;height:180px;background:#a7f5da;left:-60px;bottom:-40px}
button{font:inherit;color:inherit;cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.45}.game-shell{position:relative;width:min(1540px,calc(100vw - 24px));height:max(720px,calc(100vh - 20px));margin:10px auto;display:flex;flex-direction:column;gap:8px}.topbar,.panel,.arena-panel,.bottom-dock{background:rgba(255,253,247,.93);border:2px solid rgba(255,255,255,.72);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.topbar{height:64px;border-radius:20px;display:flex;align-items:center;padding:8px 14px;gap:18px}.brand{display:flex;align-items:center;gap:10px;min-width:255px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--coral),#ff9d61);color:#fff;font-size:23px;box-shadow:0 6px 12px #ff8c6c66}.brand b{display:block;font-size:21px;letter-spacing:1px}.brand small{display:block;font-size:9px;letter-spacing:2.5px;color:var(--muted)}.round-card{margin:auto;display:flex;align-items:center;gap:12px;background:#eef6ff;border-radius:14px;padding:8px 18px}.round-card span{font-size:13px;color:var(--muted)}.round-card b{color:var(--deep)}.timer{display:flex;align-items:baseline;gap:5px;background:#242842;color:#fff;border-radius:15px;padding:7px 15px}.timer span{font-size:11px;opacity:.7}.timer b{font-size:24px}.timer.danger{background:#e84e5b;animation:pulse .8s infinite alternate}.top-actions{display:flex;gap:7px}.icon-btn{width:39px;height:39px;border-radius:13px;background:#eef1fa;font-size:17px}.icon-btn:hover{background:#dfe9ff;transform:translateY(-1px)}
.main-grid{flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(650px,1fr) 260px;gap:8px}.panel,.arena-panel{border-radius:21px;min-height:0}.panel{padding:14px;overflow:hidden}.commander{display:grid;grid-template-columns:48px 1fr 30px;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid #e8e8ef}.commander-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,#ffe16d,#ff9c5c);font-size:25px}.commander small,.commander b{display:block}.commander small{font-size:10px;color:var(--muted)}.commander b{font-size:15px}.commander strong{color:var(--coral);font-size:19px}.hp-line{height:7px;background:#ececf3;border-radius:8px;margin-top:5px;overflow:hidden}.hp-line i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff7a72,#ffb15b);border-radius:inherit;transition:.4s}.resource-row{display:flex;justify-content:space-between;margin:12px 0 8px}.resource-row span{background:#f4f2ea;border-radius:10px;padding:7px 9px;font-size:13px}.xp-wrap>div{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.xp-wrap>i{display:block;height:6px;background:#e7e9ef;border-radius:8px;margin:5px 0 8px;overflow:hidden}.xp-wrap em{display:block;width:0;height:100%;background:var(--blue)}.wide-btn{width:100%;background:#edf5ff;border:1px solid #d6e8ff;border-radius:10px;padding:8px;font-size:12px}.wide-btn span{float:right;color:var(--deep)}.section-title{display:flex;align-items:center;justify-content:space-between;margin:14px 0 8px}.section-title b{font-size:14px}.section-title span{font-size:9px;color:var(--muted)}.trait-list{display:flex;flex-direction:column;gap:5px;overflow:auto;max-height:calc(100% - 235px);padding-right:2px}.trait{display:grid;grid-template-columns:29px 1fr auto;align-items:center;gap:7px;padding:6px 8px;background:#f4f4f7;border:1px solid transparent;border-radius:11px;filter:saturate(.45);opacity:.7}.trait.active{filter:none;opacity:1;background:#fff7df;border-color:#f2d77c}.trait-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#fff;font-size:15px}.trait b{display:block;font-size:11px}.trait small{display:block;font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trait strong{font-size:11px;color:#a57912}
.arena-panel{padding:10px 14px;display:flex;flex-direction:column;background:rgba(247,252,255,.91)}.enemy-banner{height:31px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;font-size:11px;color:var(--muted)}.enemy-banner b{color:#b14b55}.danger-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-right:5px}.battlefield{position:relative;flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:5px;padding:6px;border-radius:20px;background:linear-gradient(180deg,#d9f1ff 0 49.5%,#99d77d 50.5% 100%);border:5px solid #fff;box-shadow:inset 0 0 0 2px #8ab2d4,0 8px 20px rgba(46,82,117,.13);overflow:hidden}.cell{position:relative;min-width:0;min-height:0;border-radius:12px;border:1px dashed rgba(255,255,255,.78);background:rgba(255,255,255,.18);transition:.16s}.cell.enemy-zone:nth-child(odd){background:rgba(109,181,227,.12)}.cell.player-zone{background:rgba(235,255,202,.2)}.cell.player-zone:hover{background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 2px rgba(85,166,255,.65)}.cell.valid-target{animation:cellGlow .7s infinite alternate}.board-caption{height:24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--muted);font-size:9px;padding:0 10px}.board-caption span:last-child{text-align:right;color:#4a9d48}.board-caption b{color:var(--deep);font-size:11px}.battle-controls{display:flex;justify-content:center;gap:8px}.primary-btn{background:linear-gradient(135deg,#579cff,#6b73ee);color:#fff;border-radius:13px;padding:10px 22px;box-shadow:0 7px 14px rgba(70,112,220,.25);transition:.18s}.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.04)}.sell-btn{border-radius:13px;background:#fff0e3;color:#c76935;padding:9px 14px}.unit-token{position:absolute;inset:3px;display:flex;align-items:flex-end;justify-content:center;z-index:2;transition:left .28s linear,top .28s linear,transform .18s;cursor:pointer}.unit-token:hover{transform:translateY(-3px)}.unit-token.selected .unit-portrait{box-shadow:0 0 0 4px #ffe166,0 0 18px #ffe166}.unit-portrait{position:relative;width:min(72px,90%);aspect-ratio:1;border-radius:50%;border:3px solid #fff;background-color:#d9efff;background-repeat:no-repeat;box-shadow:0 6px 9px rgba(30,48,81,.25);overflow:hidden}.unit-token.enemy .unit-portrait{border-color:#ff9e9e}.unit-nameplate{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);max-width:95%;padding:2px 5px;border-radius:6px;background:#262943;color:#fff;font-size:8px;white-space:nowrap;box-shadow:0 2px 5px #0004}.stars{color:#ffd53f;letter-spacing:-2px;margin-right:2px}.healthbar{position:absolute;top:0;left:8%;width:84%;height:6px;background:#3c4057;border:1px solid #fff;border-radius:8px;overflow:hidden}.healthbar i{display:block;height:100%;background:#6ee277;transition:.2s}.manabar{position:absolute;top:7px;left:18%;width:64%;height:3px;background:#596175;border-radius:5px;overflow:hidden}.manabar i{display:block;height:100%;background:#63caff}.shield-mark{position:absolute;right:5px;top:11px;font-size:10px}.damage-pop{position:absolute;left:50%;top:20%;z-index:8;color:#fff;font-weight:bold;text-shadow:0 2px 3px #b52626;font-size:13px;animation:floatUp .7s forwards;pointer-events:none}.skill-flash{animation:skillFlash .45s}.sprite-regular{background-image:url("assets/hero-atlas-v2.png");background-size:800% 500%}.sprite-legend{background-image:url("assets/legend-atlas-v2.png");background-size:200% 200%}
.right-panel{display:flex;flex-direction:column}.round-path{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;margin-bottom:10px}.round-node{height:23px;display:grid;place-items:center;border-radius:7px;background:#eceef3;font-size:9px;color:#9296a5}.round-node.done{background:#bce7a4;color:#327a2e}.round-node.current{background:#ffce65;color:#7b4d00;box-shadow:0 0 0 2px #fff1c4}.round-node.boss{background:#ffd9dc;color:#a03a46}.selected-card{min-height:153px;background:linear-gradient(145deg,#eff7ff,#fff8e8);border:1px solid #e3e8ef;border-radius:15px;padding:10px}.empty-state{height:130px;display:grid;place-items:center;color:var(--muted);font-size:11px}.detail-head{display:grid;grid-template-columns:58px 1fr;gap:9px}.detail-portrait{width:58px;height:58px;border-radius:15px;background-repeat:no-repeat}.detail-head h3{margin:2px 0 4px;font-size:15px}.cost-dot{display:inline-block;padding:2px 6px;border-radius:7px;background:#ffe394;font-size:9px}.tag{display:inline-block;margin:4px 3px 0 0;padding:2px 5px;border-radius:6px;background:#fff;font-size:8px;color:#566079}.skill-box{margin-top:8px;padding:7px;background:#fff9;border-radius:9px;font-size:9px;line-height:1.5}.skill-box b{display:block;color:#6c59c8}.log-title button{background:none;color:var(--muted);font-size:9px}.battle-log{flex:1;overflow:auto;background:#272a43;border-radius:13px;padding:8px;color:#d8dcef;font-size:9px;line-height:1.65}.log-item{padding:3px 2px;border-bottom:1px solid #ffffff0d}.log-item b{color:#ffd76b}.log-item.good{color:#a9f09b}.log-item.bad{color:#ffadae}
.bottom-dock{height:150px;border-radius:21px;display:grid;grid-template-columns:minmax(410px,.95fr) minmax(560px,1.4fr) 75px;gap:11px;padding:10px 12px}.dock-label,.shop-head{height:25px;display:flex;justify-content:space-between;align-items:flex-start;font-size:11px}.dock-label span,.shop-head small{color:var(--muted);font-size:8px}.bench{height:101px;display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.bench-slot{position:relative;border:1px dashed #bdc4d3;border-radius:12px;background:#f2f4f7;min-width:0;cursor:pointer}.bench-slot .mini-unit{position:absolute;inset:3px}.mini-portrait,.shop-portrait{width:100%;height:100%;border-radius:9px;background-repeat:no-repeat}.mini-name{position:absolute;bottom:2px;left:2px;right:2px;text-align:center;padding:2px;border-radius:5px;background:#272a43dd;color:#fff;font-size:7px;white-space:nowrap;overflow:hidden}.bench-slot.selected{box-shadow:0 0 0 3px #ffd75f}.shop-head>div{display:flex;align-items:baseline;gap:8px}.shop-head button{background:#eef1f8;border-radius:7px;padding:4px 7px;font-size:8px}.shop-head button.locked{background:#fff0bd;color:#9a6500}.shop{height:101px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.shop-card{position:relative;display:grid;grid-template-columns:49% 51%;border-radius:12px;background:#ecf3f8;border:2px solid var(--rarity,#9ab8c9);overflow:hidden;text-align:left;padding:0;transition:.16s;min-width:0}.shop-card:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 7px 12px #445b7b2b}.shop-card:disabled{filter:grayscale(.7)}.shop-info{padding:6px 4px;min-width:0}.shop-info b{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shop-info small{display:block;margin-top:3px;font-size:7px;color:var(--muted);white-space:nowrap}.shop-cost{position:absolute;right:4px;bottom:4px;background:#fff5cf;border-radius:6px;padding:2px 4px;font-size:8px}.rarity-1{--rarity:#9db2bc}.rarity-2{--rarity:#53c582}.rarity-3{--rarity:#5e9efa}.rarity-4{--rarity:#ac75f2}.rarity-5{--rarity:#ffab3d}.reroll-btn{align-self:25px;height:101px;border-radius:14px;background:linear-gradient(160deg,#ffca57,#ff9d57);color:#633c18;box-shadow:0 8px 15px #ffad4f4a}.reroll-btn span,.reroll-btn b{display:block}.reroll-btn span{font-size:12px}.reroll-btn b{margin-top:6px;font-size:10px}
.modal{position:fixed;inset:0;z-index:30;display:none;place-items:center;background:rgba(28,31,52,.7);backdrop-filter:blur(8px)}.modal.open{display:grid}.modal-card{position:relative;background:#fffdf7;border:4px solid #fff;border-radius:28px;box-shadow:0 28px 80px #11162a77;text-align:center}.start-card{width:620px;padding:28px 44px}.title-creature{width:86px;height:86px;display:grid;place-items:center;margin:-66px auto 8px;border:5px solid #fff;border-radius:28px;background:linear-gradient(145deg,#ffcc5c,#ff8462);font-size:48px;transform:rotate(-3deg)}.eyebrow{margin:3px 0;color:#6880a8;text-transform:uppercase;font-size:10px;letter-spacing:2px}.start-card h1{font-size:42px;margin:3px;background:linear-gradient(135deg,#4d83ed,#9b66df,#ff6f6f);-webkit-background-clip:text;color:transparent}.start-card>p:not(.eyebrow){font-size:13px;line-height:1.7;color:#666d84}.rule-chips{display:flex;justify-content:center;gap:6px}.rule-chips span{padding:5px 9px;background:#eff4ff;border-radius:10px;font-size:10px}.quick-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.quick-rules div{display:flex;align-items:center;gap:7px;text-align:left;padding:9px;background:#f8f5ed;border-radius:12px}.quick-rules b{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:8px;background:#fff;color:var(--deep)}.quick-rules span{font-size:9px;line-height:1.45}.primary-btn.big{font-size:15px;padding:12px 38px}.start-card>small{display:block;margin-top:12px;color:#a0a4b3;font-size:8px}.modal-close{position:absolute;right:17px;top:13px;width:32px;height:32px;border-radius:10px;background:#eef0f5}.help-card{width:640px;padding:25px;text-align:left}.help-card h2{text-align:center}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.help-grid div{background:#f4f6fb;border-radius:13px;padding:12px}.help-grid b{color:var(--deep)}.help-grid p{margin:6px 0 0;font-size:11px;line-height:1.6;color:#666d84}.result-card{width:440px;padding:28px}.result-card>div:first-child{font-size:55px}.result-card h2{font-size:30px;margin:5px}.result-card p{color:var(--muted);font-size:12px}.result-stats{display:flex;justify-content:center;gap:8px;margin:15px}.result-stats span{background:#f2f4f8;border-radius:10px;padding:9px;font-size:10px}
.cast-ring{position:absolute;inset:12%;border:4px solid #bc8aff;border-radius:50%;animation:ring .5s forwards;pointer-events:none}.battle-ended .cell{filter:saturate(.8)}
@keyframes pulse{to{transform:scale(1.04)}}@keyframes cellGlow{to{box-shadow:inset 0 0 0 3px #ffe26b;background:#fff8be66}}@keyframes floatUp{to{transform:translateY(-40px);opacity:0}}@keyframes skillFlash{50%{filter:brightness(1.6);transform:scale(1.13)}}@keyframes ring{from{transform:scale(.2);opacity:1}to{transform:scale(2);opacity:0}}@media(max-height:780px){.game-shell{height:760px}.bottom-dock{height:142px}.bench,.shop,.reroll-btn{height:94px}.trait-list{max-height:250px}}