:root {
  --ink: #17213f;
  --ink-2: #293555;
  --cream: #fff5d8;
  --gold: #ffcf4a;
  --gold-deep: #d88a16;
  --green: #27c86d;
  --green-deep: #15834b;
  --blue: #22a7f0;
  --red: #ef5b52;
  --panel: #2c3a5c;
  --edge: #111a35;
  --white: #fffef5;
  --shadow: 0 5px 0 rgba(14,22,47,.34), 0 12px 28px rgba(10,18,36,.22);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; overflow: hidden; }

body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(103,185,235,.35), transparent 38%),
    linear-gradient(155deg, #14233a, #0b1022 70%);
  color: var(--white);
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button { font: inherit; }

button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

.game-shell {
  position: relative;
  width: min(100vw, 1120px);
  height: min(100dvh, 900px);
  min-height: 620px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 64px minmax(360px, 1fr) auto;
  background: #45ce70;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 30px 90px rgba(0,0,0,.55);
}

.top-hud {
  position: relative;
  z-index: 30;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(#35466e, #273556);
  border-bottom: 3px solid #15203b;
  box-shadow: 0 4px 0 rgba(8,15,31,.2);
}

.currency-group { display: flex; gap: 8px; min-width: 0; }
.currency {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  color: var(--white);
  background: #1b2746;
  border: 2px solid #101a34;
  border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.1), 0 3px 0 rgba(8,13,29,.35);
  white-space: nowrap;
}
.currency strong { font-size: 1.16rem; letter-spacing: .3px; text-shadow: 0 2px 0 #0d1630; }
.coin-icon {
  display: grid;
  place-items: center;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #f1a724;
  color: #996213;
  font-size: 13px;
  box-shadow: inset 0 2px 0 #fff1a4;
}
.income { color: #8ef0ad; font-size: .72rem; font-weight: 900; }
.gem-pill svg { width: 23px; fill: #53e07e; stroke: #14894b; stroke-width: 1; }
.gem-pill { cursor:pointer; color:var(--white); }
.gem-use { padding:2px 5px;border-radius:6px;color:#dfffe8;background:#16864d;font-size:.55rem;font-weight:1000; }

.battle-title { cursor:pointer;text-align:center;text-shadow:0 3px 0 #14203a;line-height:1;color:white;background:none;border:0;border-radius:10px;padding:4px 12px;transition:background .2s; }
.battle-title:hover { background:rgba(255,255,255,.08); }
.battle-title span { display: block; font-size: 1.28rem; font-weight: 1000; letter-spacing: 1.5px; }
.battle-title small { display: block; margin-top: 5px; color: #9fb1d1; font-weight: 800; font-size: .69rem; letter-spacing: 2px; }

.icon-btn {
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  color: white; background: none;
}
.header-btn {
  justify-self: end; width: 42px; height: 42px;
  border-radius: 13px; background: #43557d;
  border: 2px solid #17233f; box-shadow: inset 0 2px 0 rgba(255,255,255,.15), 0 3px 0 #131c34;
}
.header-btn svg { width: 22px; fill: currentColor; }
.header-actions{justify-self:end;display:flex;align-items:center;gap:6px}.music-control{display:flex;align-items:center;gap:5px;padding:3px 6px;border:2px solid rgba(14,25,49,.65);border-radius:12px;background:rgba(16,28,55,.65)}.music-control input{width:68px;height:6px;accent-color:#ffd257;cursor:pointer}.music-control .muted{color:#8c96aa;filter:grayscale(1)}.backend-link{text-decoration:none;color:#ffdc65;background:#3f557d}

.battle-stage { position: relative; min-width:0; min-height: 0; overflow: hidden; background: #45ce70; }
#gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; }

.castle-status {
  position: absolute; z-index: 12; top: 12px;
  width: clamp(152px, 23%, 230px);
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(13,22,39,.28));
}
.player-status { left: 14px; }
.enemy-status { right: 14px; }
.status-row { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 4px; font-size: .72rem; font-weight: 1000; text-shadow: 0 2px 1px #17213f; }
.hp-track { height: 17px; padding: 3px; border-radius: 10px; background: #17213f; border: 2px solid #fff4cf; overflow: hidden; }
.hp-track i { display: block; width: 100%; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #37d66e, #8deb79); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); transition: width .24s ease; }
.hp-track.enemy i { background: linear-gradient(90deg, #ee554e, #ff8b62); }

.ai-monster-hud{position:absolute;z-index:15;top:8px;left:50%;width:min(390px,43vw);padding:7px 11px 9px;transform:translateX(-50%);color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--ai-primary,#41306c) 88%,#17233f),#17243e);border:2px solid var(--ai-glow,#74f7ff);border-radius:14px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ai-glow,#74f7ff) 22%,transparent),0 5px 15px rgba(12,18,48,.45),inset 0 1px 0 rgba(255,255,255,.2);pointer-events:none;animation:aiHudIn .28s ease both}.ai-monster-hud[hidden]{display:none}.ai-monster-hud.switching{animation:aiHudSwitch .35s ease both}.ai-monster-hud-head{display:flex;justify-content:space-between;gap:8px;color:#c9faff;font-size:.55rem;font-weight:1000;letter-spacing:.8px}.ai-monster-hud-head b{color:#ffe17a}.ai-monster-hud>strong{display:block;overflow:hidden;margin-top:3px;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;line-height:1.2}.ai-monster-hud>p{overflow:hidden;margin:3px 0 5px;color:#e2e9ff;text-overflow:ellipsis;white-space:nowrap;font-size:.6rem;font-weight:800}.ai-monster-hud>.ai-monster-analysis{margin-top:-2px;color:#bff7ff;font-size:.54rem}.ai-monster-live-hp{display:flex;align-items:center;gap:6px;margin:0 0 6px;color:#eaf7ff;font-size:.52rem;font-weight:900}.ai-monster-live-hp span{white-space:nowrap}.ai-monster-live-hp i{display:block;flex:1;height:7px;padding:1px;border:1px solid rgba(255,255,255,.48);border-radius:6px;background:#111a32;overflow:hidden}.ai-monster-live-hp b{display:block;width:100%;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ai-glow,#74f7ff),#f6f7ff);box-shadow:0 0 8px var(--ai-glow,#74f7ff);transition:width .08s linear}.ai-monster-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.ai-monster-stat-row span{min-width:0;padding:3px 2px;border:1px solid rgba(255,255,255,.16);border-radius:6px;color:#f7fbff;background:rgba(7,13,37,.32);font-size:.53rem;font-weight:900;text-align:center;white-space:nowrap}@keyframes aiHudIn{from{opacity:0;transform:translate(-50%,-10px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes aiHudSwitch{from{opacity:.2;transform:translate(-50%,10px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

.side-actions {
  position: absolute; right: 12px; top: 120px; z-index: 16;
  display: flex; flex-direction: column; gap: 10px;
}
.side-btn {
  position: relative; width: 64px; min-height: 66px; padding: 6px 3px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; color: white; background: linear-gradient(#53678f, #34466e);
  border: 2px solid #14203c; border-radius: 17px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 4px 0 #17223d, 0 8px 16px rgba(18,30,55,.2);
  transition: filter .18s ease, transform .12s ease;
}
.side-btn:hover { filter: brightness(1.12); }
.side-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 1px 0 #17223d; }
.side-btn svg { width: 29px; height: 29px; fill: #edf3ff; }
.side-btn > span { font-size: .68rem; font-weight: 1000; text-shadow: 0 2px 0 #15203a; }
.side-btn small { color: #9feab1; font-size: .52rem; font-weight: 900; }
.side-btn.shield.active { background: linear-gradient(#47cfe9, #218cbf); box-shadow: 0 0 0 4px rgba(120,239,255,.25), 0 4px 0 #155072; }
.side-btn[disabled] { filter: grayscale(.65) brightness(.8); cursor: not-allowed; }

.wheel { position: relative; width: 31px; height: 31px; border-radius: 50%; border: 3px solid #fff4d0; background: conic-gradient(#f56662 0 25%,#ffdc5c 0 50%,#52d4cb 0 75%,#917ee9 0); }
.wheel::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: white; border: 2px solid #243352; }
.wheel i { position: absolute; left: 13px; top: -4px; width: 3px; height: 34px; background: rgba(35,50,81,.7); transform-origin: center; }
.wheel i:nth-child(2) { transform: rotate(45deg); }.wheel i:nth-child(3) { transform: rotate(90deg); }.wheel i:nth-child(4) { transform: rotate(135deg); }
.spin.spinning .wheel { animation: spin .7s cubic-bezier(.2,.8,.3,1) infinite; }
@keyframes spin { to { transform: rotate(720deg); } }

.battle-feed { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 11; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; pointer-events: none; }
.feed-item { padding: 5px 12px; color: white; background: rgba(25,36,64,.75); border-radius: 20px; font-weight: 900; font-size: .7rem; text-shadow: 0 1px 1px #17213f; animation: feedIn .25s ease both, feedOut .4s 2.2s ease forwards; }
@keyframes feedIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes feedOut { to { opacity: 0; transform: translateY(-8px); } }

.float-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.float-text { position: absolute; color: #ffdb61; font-weight: 1000; font-size: 1.05rem; text-shadow: -2px -2px 0 #623c17,2px -2px 0 #623c17,-2px 2px 0 #623c17,2px 2px 0 #623c17; animation: floatUp .9s ease-out forwards; }
.float-text.damage { color: #fff; text-shadow: -2px -2px 0 #a42631,2px -2px 0 #a42631,-2px 2px 0 #a42631,2px 2px 0 #a42631; }
@keyframes floatUp { to { opacity: 0; transform: translateY(-45px) scale(1.08); } }

.command-deck { position: relative; z-index: 25; min-width:0;width:100%;overflow:hidden;background: linear-gradient(#253454, #1b2745); border-top: 4px solid #101a35; box-shadow: 0 -8px 20px rgba(16,27,49,.22); }
.upgrade-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 8px 10px 5px; }
.upgrade-btn {
  position: relative; min-width: 0; min-height: 47px; display: flex; align-items: center; gap: 7px; padding: 6px 8px;
  cursor: pointer; color: white; text-align: left; background: #344466; border: 2px solid #111a33; border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 0 #11182d; transition: filter .18s, transform .12s;
}
.upgrade-btn:hover { filter: brightness(1.12); }.upgrade-btn:active { transform: translateY(2px); }
.upgrade-btn:disabled { filter: grayscale(.55) brightness(.7); cursor: not-allowed; }
.upgrade-btn svg, .upgrade-icon { width: 29px; height: 29px; flex: 0 0 auto; fill: #ffcd49; color: #ffcd49; }
.gate-icon { position: relative; border: 3px solid #ffd05a; border-radius: 8px 8px 2px 2px; }
.gate-icon::before { content:""; position:absolute; left:5px; bottom:-1px; width:10px; height:15px; background:#1e2a49; border-radius:7px 7px 0 0; }
.gate-icon i::before,.gate-icon i::after { content:""; position:absolute; width:5px;height:7px;top:-6px;background:#ffd05a; }.gate-icon i::before{left:-3px}.gate-icon i::after{right:-3px}
.upgrade-copy { min-width: 0; display: flex; flex-direction: column; }
.upgrade-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.upgrade-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #afbdd8; font-size: .59rem; }
.upgrade-copy em { color: #ffdc64; font-style: normal; font-weight: 900; }
.level-badge { margin-left: auto; align-self: flex-start; padding: 2px 5px; border-radius: 7px; color: #9eacc9; background: #202c4a; font-size: .57rem; font-weight: 900; }

.tactical-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-width:720px;margin:0 auto;padding:3px 10px 4px}
.tactical-card{position:relative;min-width:0;height:42px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;color:white;text-align:left;background:linear-gradient(#6a466f,#493151);border:2px solid #121a32;border-radius:11px;box-shadow:inset 0 2px 0 rgba(255,255,255,.16),0 3px 0 #10172c;transition:filter .18s,transform .12s}
.tactical-card:hover{filter:brightness(1.12)}.tactical-card:active{transform:translateY(2px)}.tactical-card:disabled{filter:grayscale(.8) brightness(.62);cursor:not-allowed}.tactical-card svg{width:27px;height:27px;fill:#ffc957}.tactical-card.heal{background:linear-gradient(#3f806c,#2f5e54)}.tactical-card.heal svg{fill:#76f0a4}.tactical-card.warhorn{background:linear-gradient(#775229,#573c23)}.tactical-card span{min-width:0;display:flex;flex-direction:column}.tactical-card b{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tactical-card small{color:#d4d9e7;font-size:.52rem}.tactical-card em{font-style:normal;color:#ffdc6a;font-size:.72rem;font-weight:1000}.tactical-card.active{box-shadow:0 0 0 3px rgba(255,216,85,.35),0 3px 0 #10172c}

.unit-strip { display:grid;grid-template-columns:repeat(5,minmax(165px,1fr));gap:7px;width:100%;max-width:1100px;min-width:0;margin:0 auto;padding:6px 10px 10px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#637399 #182440; }
.unit-card {
  position: relative; min-width: 0; height: 78px; display: grid; grid-template-columns: 62px minmax(0,1fr); align-items: center; padding: 5px 12px 5px 5px;
  overflow: hidden; cursor: pointer; color: var(--ink); text-align: left;
  background: linear-gradient(145deg, #fff7d9, #e7d7a9); border: 3px solid #131d37; border-radius: 15px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.75), 0 5px 0 #10182f, 0 9px 18px rgba(9,16,32,.25);
  transition: filter .18s, transform .12s;
}
.unit-card:hover { filter: brightness(1.06); }.unit-card:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 2px 0 #10182f; }
.unit-card:disabled,.unit-card.unavailable { filter: grayscale(.42) brightness(.78); cursor: not-allowed; }.unit-card.unavailable .auto-spawn-toggle{filter:none;cursor:pointer}
.unit-card.crossbow { background: linear-gradient(145deg, #dff6d1, #9ddc9e); }
.unit-card.guardian { background: linear-gradient(145deg, #d8ebfa, #a6bdd3); }
.unit-card.lancer{background:linear-gradient(145deg,#e7f8df,#b8e3a3)}.unit-card.mage{background:linear-gradient(145deg,#eee2ff,#c2a7ec)}.unit-card.berserker{background:linear-gradient(145deg,#ffe2c6,#e7aa73)}
.unit-card.bombardier{background:linear-gradient(145deg,#ffe5c5,#dda667)}.unit-card.tank{background:linear-gradient(145deg,#dce6df,#9eb3a5)}.unit-card.lightning{background:linear-gradient(145deg,#d9fbff,#83dce8)}.unit-card.warplane{background:linear-gradient(145deg,#e0efff,#91b9e0)}
.unit-portrait { position: relative; width: 57px; height: 60px; border-radius: 11px; overflow: hidden; background: #76ccec; border: 2px solid rgba(24,36,63,.7); box-shadow: inset 0 -10px 0 rgba(34,100,145,.2); }
.crossbow .unit-portrait { background: #8bd278; }.guardian .unit-portrait { background: #98acc2; }
.lancer .unit-portrait{background:#8ed383}.mage .unit-portrait{background:#9b7bca}.berserker .unit-portrait{background:#c37b58}
.bombardier .unit-portrait{background:#d99454}.tank .unit-portrait{background:#7e9185}.lightning .unit-portrait{background:#4ebed0}.warplane .unit-portrait{background:#79abd5}
.unit-portrait .face { position: absolute; left: 18px; top: 25px; width: 27px; height: 28px; border-radius: 10px 10px 14px 14px; background: #ffc990; border: 2px solid #633d2c; }
.unit-portrait .face::before,.unit-portrait .face::after { content:""; position:absolute; top:9px; width:3px;height:4px;border-radius:50%;background:#372d31; }.unit-portrait .face::before{left:6px}.unit-portrait .face::after{right:6px}
.helmet { position: absolute; z-index: 2; left: 10px; top: 4px; width: 40px; height: 29px; color: #7185a4; font-size: 36px; line-height: 23px; transform: rotate(180deg); text-shadow: 0 2px #2d3c59; }
.hood { position: absolute; z-index:2; left:11px;top:8px;width:40px;height:38px;border-radius:50% 50% 10px 10px;background:#347a45;border:2px solid #244b32; }
.heavy-helmet { position: absolute; z-index:2; left:10px;top:8px;width:42px;height:31px;border-radius:16px 16px 8px 8px;background:#64768b;border:3px solid #314052; }
.heavy-helmet::after { content:""; position:absolute; left:6px;right:6px;top:15px;height:4px;background:#263441;box-shadow:0 7px #263441; }
.horn { position:absolute;z-index:3;top:2px;width:13px;height:22px;background:#f1dbb1;border:2px solid #6e5a42; }.horn.left{left:7px;transform:rotate(-28deg);border-radius:90% 20%}.horn.right{right:7px;transform:rotate(28deg);border-radius:20% 90%}
.lancer-helmet{color:#62898a;text-shadow:0 2px #315452}.lance-shape{right:2px;bottom:-3px;width:4px;height:55px;background:#72502e;border:1px solid #3f3023;transform:rotate(24deg)}.lance-shape::before{content:"";position:absolute;top:-10px;left:-5px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid #eaf3f3}
.mage-hood{position:absolute;z-index:2;left:7px;top:4px;width:45px;height:43px;border-radius:50% 50% 15px 15px;background:#65449a;border:3px solid #392958}.mage-orb{position:absolute;z-index:4;right:2px;bottom:5px;width:17px;height:17px;border-radius:50%;background:#79efff;border:2px solid #285e91;box-shadow:0 0 8px #c4fbff}.rage-helmet{position:absolute;z-index:2;left:9px;top:9px;width:43px;height:29px;border-radius:14px 14px 5px 5px;background:#9b463b;border:3px solid #4f2c2b}
.weapon { position: absolute; z-index:3; }
.sword-shape { right: 4px; bottom: -7px; width: 6px; height: 38px; border-radius: 4px; background:#e7f3f9;border:1px solid #364964;transform:rotate(30deg);box-shadow:0 0 0 1px #fff; }
.sword-shape::after { content:""; position:absolute; left:-6px;bottom:8px;width:16px;height:4px;background:#db9d36;border:1px solid #634225; }
.bow-shape { right:1px;bottom:3px;width:28px;height:31px;border:4px solid #6b402b;border-left:0;border-radius:0 100% 100% 0;transform:rotate(-8deg); }
.bow-shape::after { content:"";position:absolute;left:-2px;top:-3px;width:2px;height:29px;background:#f8e9c9;transform:rotate(-3deg); }
.unit-info { min-width:0; display:flex; flex-direction:column; align-self:start; margin-top:6px; }
.unit-info b { font-size:.89rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.unit-info small{color:#69708a;font-size:.59rem;font-weight:800;}
.cost { position:absolute;right:10px;bottom:8px;display:flex;align-items:center;gap:3px;color:#6b4617;font-size:.83rem;font-weight:1000; }.cost span{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#ffcf49;color:#9f6718;font-size:9px;}
.unit-card kbd { position:absolute;right:7px;top:5px;min-width:18px;height:18px;display:grid;place-items:center;color:#74809a;background:rgba(255,255,255,.5);border:1px solid rgba(23,33,63,.2);border-radius:5px;font:700 .58rem inherit; }
.auto-spawn-toggle{position:absolute;z-index:7;right:29px;top:4px;min-width:38px;height:21px;display:grid;place-items:center;padding:0 5px;border:1px solid #6d7890;border-radius:7px;color:#58647c;background:rgba(255,255,255,.72);box-shadow:0 2px 0 rgba(20,31,56,.35);font-size:.5rem;font-weight:1000;line-height:1;cursor:pointer;user-select:none}.auto-spawn-toggle:hover{filter:brightness(1.08)}.auto-spawn-toggle:focus-visible{outline:3px solid #68e5ff;outline-offset:1px}.auto-spawn-toggle.active{color:#fff;background:linear-gradient(#30d67a,#1da85d);border-color:#12643f;box-shadow:0 2px 0 #12643f,0 0 0 2px rgba(49,215,123,.22)}.auto-spawn-toggle.waiting{background:linear-gradient(#e3aa42,#bc7625);border-color:#754719;box-shadow:0 2px 0 #754719}.unit-card.locked .auto-spawn-toggle{display:none}
.cooldown { position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(26,36,61,.58);pointer-events:none; }
.unit-card.cooling .cooldown { animation: cooldown var(--cooldown, .5s) linear forwards; }
.unit-card.locked{filter:saturate(.25) brightness(.68)}.unit-card.locked:hover{filter:saturate(.45) brightness(.82)}.lock-label{display:none;position:absolute;inset:auto 5px 5px 5px;z-index:4;padding:5px;border-radius:8px;text-align:center;color:white;background:#263451;border:1px solid #101a32;font-size:.62rem;font-weight:1000}.unit-card.locked .lock-label{display:block}.unit-card.locked .cost{display:none}.unit-card .unit-level{position:absolute;left:64px;top:5px;padding:1px 4px;border-radius:5px;background:#263451;color:#fff;font-size:.5rem;font-weight:900}
.unit-card.not-in-deck{display:none}.blast-helmet,.storm-hood{position:absolute;z-index:2;left:8px;top:7px;width:44px;height:32px;border-radius:17px 17px 7px 7px;background:#6e4b34;border:3px solid #382d29}.mini-cannon{position:absolute;z-index:4;right:-4px;bottom:8px;width:38px;height:13px;border-radius:6px;background:#3d4c58;border:2px solid #202c36}.storm-hood{background:#247f9b;border-color:#174558}.storm-orb{position:absolute;z-index:4;right:1px;bottom:5px;width:18px;height:18px;border-radius:50%;background:#d6ffff;border:2px solid #168ba5;box-shadow:0 0 10px #8ff9ff}.tank-body{position:absolute;left:4px;right:4px;bottom:7px;height:27px;border-radius:9px;background:#495a55;border:3px solid #26332f;box-shadow:inset 0 -7px 0 #283530}.tank-turret{position:absolute;left:15px;top:8px;width:32px;height:20px;border-radius:9px;background:#71837a;border:3px solid #26332f}.tank-turret:after{content:"";position:absolute;left:24px;top:4px;width:25px;height:7px;background:#374842;border-radius:4px}.plane-body{position:absolute;left:24px;top:4px;width:13px;height:50px;border-radius:50% 50% 8px 8px;background:#dceef5;border:3px solid #315069}.plane-wing{position:absolute;top:24px;width:28px;height:12px;background:#4a8cbc;border:2px solid #315069}.plane-wing.left{left:2px;transform:skewY(-18deg)}.plane-wing.right{right:2px;transform:skewY(18deg)}
@keyframes cooldown { from{height:100%}to{height:0} }

.bottom-nav { display:none; }

.modal-backdrop, .result-overlay {
  position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px;
  background: rgba(9,15,31,.72); backdrop-filter: blur(6px); animation: fadeIn .2s ease;
}
[hidden] { display: none !important; }
@keyframes fadeIn { from { opacity:0; } }
.game-modal { position:relative;width:min(560px,92vw);max-height:82%;overflow:auto;padding:22px;background:linear-gradient(#fef3d1,#ead49d);color:var(--ink);border:4px solid #1a2544;border-radius:24px;box-shadow:0 9px 0 #11192f,0 24px 70px rgba(0,0,0,.4); }
.modal-close { position:absolute;right:13px;top:11px;z-index:2;width:38px;height:38px;border-radius:12px;cursor:pointer;color:white;background:#e85852;border:2px solid #7d2d32;box-shadow:0 3px 0 #762a31;font-size:1.5rem;font-weight:1000; }
.modal-title { margin:0 50px 5px 0;font-size:1.5rem;font-weight:1000; }.modal-sub{margin:0 0 18px;color:#6b7084;font-size:.86rem;font-weight:700;}
.offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.offer-card{padding:16px;background:rgba(255,255,255,.55);border:2px solid #b39a65;border-radius:16px;box-shadow:inset 0 2px 0 white}.offer-card h3{margin:0 0 5px;font-size:1rem}.offer-card p{min-height:38px;margin:0 0 12px;color:#62697d;font-size:.75rem;line-height:1.45}.buy-btn{width:100%;min-height:42px;cursor:pointer;border:2px solid #153f37;border-radius:12px;color:white;background:linear-gradient(#35ce77,#1c9e5a);box-shadow:0 3px 0 #13653d;font-weight:1000}.buy-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #13653d}.buy-btn:disabled{filter:grayscale(.8);cursor:not-allowed}.buff-list{display:grid;gap:10px}.buff-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:11px;padding:11px;background:rgba(255,255,255,.55);border:2px solid #baa270;border-radius:15px}.buff-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;color:white;background:#4e7bc6;font-size:1.4rem;font-weight:1000}.buff-row h3{margin:0;font-size:.95rem}.buff-row p{margin:3px 0 0;color:#646b7f;font-size:.7rem}.buff-toggle{min-width:72px;min-height:38px;cursor:pointer;border:2px solid #1b6946;border-radius:11px;color:white;background:#31ba6d;font-weight:900}.pause-panel{text-align:center;padding:15px}.pause-panel svg{width:62px;fill:#3f537a}.pause-panel h2{font-size:1.8rem;margin:10px 0 6px}.pause-actions{display:grid;gap:10px;margin-top:20px}.pause-actions button{min-height:48px;border-radius:14px;cursor:pointer;font-weight:1000}.resume-btn{color:white;background:#2bbf6b;border:2px solid #176c43;box-shadow:0 4px 0 #176c43}.secondary-btn{color:#293555;background:#fff9e9;border:2px solid #9f895f;box-shadow:0 3px 0 #9f895f}
.draw-hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin:14px 0;padding:14px;border-radius:16px;color:white;background:linear-gradient(135deg,#435a92,#263760);border:2px solid #17213e}.draw-hero strong{font-size:1.15rem}.draw-actions{display:flex;gap:8px}.draw-actions button{min-height:44px;padding:0 14px;cursor:pointer;border:2px solid #8b5e16;border-radius:12px;color:#54360d;background:linear-gradient(#ffe678,#ffc63f);box-shadow:0 3px 0 #9d6818;font-weight:1000}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.collection-card{position:relative;padding:10px;border:2px solid #b89b63;border-radius:13px;background:rgba(255,255,255,.58)}.collection-card.locked{filter:grayscale(.85);opacity:.7}.collection-card h3{margin:0;font-size:.83rem}.collection-card p{margin:4px 0;color:#62697b;font-size:.63rem}.collection-card b{color:#7856a8;font-size:.68rem}.forge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.forge-card{padding:10px;border:2px solid #b99e69;border-radius:13px;background:rgba(255,255,255,.5);text-align:center}.forge-card h3{margin:0;font-size:.8rem}.forge-card p{margin:4px 0 8px;color:#697083;font-size:.61rem}.forge-card button{width:100%;min-height:35px;cursor:pointer;border:2px solid #315185;border-radius:9px;color:white;background:#4c72ad;font-weight:900;font-size:.68rem}.draw-results{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:14px 0}.draw-result{padding:12px 5px;text-align:center;border:2px solid #aa8b52;border-radius:13px;background:linear-gradient(#fffdf0,#eed8a6);animation:resultIn .35s backwards}.draw-result.new{background:linear-gradient(#fff1a8,#f4bd48);box-shadow:0 0 0 3px rgba(255,196,50,.25)}.draw-result b{display:block;font-size:.72rem}.draw-result small{font-size:.58rem;color:#676d7e}.difficulty-heading{margin:16px 0 8px;color:#26395e;font-size:.88rem}.ai-difficulty-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.ai-level-card{min-height:76px;display:grid;place-items:center;gap:1px;padding:7px 4px;cursor:pointer;text-align:center;color:var(--ink);background:rgba(255,255,255,.6);border:2px solid #b99e6b;border-radius:12px}.ai-level-card>b{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:white;background:#344a76}.ai-level-card span{font-size:.7rem;font-weight:1000}.ai-level-card small{color:#6b7284;font-size:.5rem;line-height:1.3}.ai-level-card.active{color:white;background:linear-gradient(#e16b45,#ad3f37);border-color:#6f282b;box-shadow:0 3px 0 #6f282b}.ai-level-card.active small{color:#ffe8d8}.stage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:8px}.stage-card{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;min-height:62px;padding:8px;cursor:pointer;text-align:left;color:var(--ink);background:rgba(255,255,255,.55);border:2px solid #b99e6b;border-radius:13px}.stage-card.active{color:white;background:linear-gradient(#4c72ad,#35578d);border-color:#1b335c}.stage-number{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;color:white;background:#344a76;font-weight:1000}.stage-card b{font-size:.76rem}.stage-card small{display:block;margin-top:3px;color:#6b7284;font-size:.58rem}.stage-card.active small{color:#dce7ff}.stage-stars{color:#e99f24;font-size:.65rem;font-weight:900}

.result-overlay { z-index:100; overflow:hidden; }
.result-rays { position:absolute;width:700px;height:700px;background:repeating-conic-gradient(from 0deg,rgba(255,220,80,.25) 0 12deg,transparent 12deg 24deg);animation:rays 20s linear infinite; }
@keyframes rays{to{transform:rotate(360deg)}}
.result-card { position:relative;z-index:2;width:min(470px,92vw);padding:32px 26px 24px;text-align:center;color:var(--ink);background:linear-gradient(#fff9df,#f0d99f);border:5px solid #1a2544;border-radius:28px;box-shadow:0 10px 0 #10182e,0 30px 80px rgba(0,0,0,.45);animation:resultIn .45s cubic-bezier(.18,.89,.32,1.28); }
@keyframes resultIn{from{opacity:0;transform:scale(.72) translateY(30px)}}
.result-crown{margin-top:-60px;font-size:4.5rem;color:#ffd650;text-shadow:-3px -3px 0 #9c6216,3px -3px 0 #9c6216,-3px 3px 0 #9c6216,3px 3px 0 #9c6216}.result-card p{margin:5px 0;color:#b2721f;font-weight:1000;letter-spacing:2px}.result-card h1{margin:0 0 22px;font-size:2rem}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}.result-stats span{padding:10px 5px;background:rgba(255,255,255,.56);border:2px solid #c4a66a;border-radius:13px}.result-stats small{display:block;color:#6d7182;font-size:.64rem;font-weight:800}.result-stats b{display:block;margin-top:4px;font-size:1.15rem}.primary-action{width:100%;min-height:52px;cursor:pointer;border:3px solid #155b3a;border-radius:15px;color:white;background:linear-gradient(#40d47d,#21a960);box-shadow:0 5px 0 #155b3a;font-size:1.05rem;font-weight:1000}.text-action{margin-top:10px;padding:8px;border:0;cursor:pointer;color:#586078;background:none;font-weight:900;text-decoration:underline}

.toast { position:absolute;z-index:130;left:50%;top:78px;max-width:min(430px,88vw);padding:10px 18px;border-radius:14px;color:white;background:#1c2948;border:2px solid #0e162e;box-shadow:0 5px 0 rgba(7,12,26,.35),0 12px 24px rgba(0,0,0,.2);font-weight:900;font-size:.8rem;opacity:0;pointer-events:none;transform:translate(-50%,-12px);transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width: 720px) {
  .game-shell { width:100vw;height:100dvh;min-height:560px;grid-template-rows:58px minmax(300px,1fr) auto;border-radius:0; }
  .top-hud{padding:6px 8px;gap:5px}.currency{height:38px;padding:0 8px;gap:5px}.currency strong{font-size:.92rem}.income{display:none}.gem-pill{display:flex}.gem-use{display:none}.coin-pill{max-width:103px}.battle-title{padding:3px}.battle-title span{font-size:1rem}.battle-title small{font-size:.54rem}.header-btn{width:38px;height:38px}
  .castle-status{top:9px;width:36%;}.player-status{left:8px}.enemy-status{right:8px}.status-row{font-size:.61rem}.hp-track{height:14px}
  .ai-monster-hud{top:46px;width:min(350px,72vw);padding:5px 8px 6px;border-radius:11px}.ai-monster-hud-head{font-size:.48rem}.ai-monster-hud>strong{font-size:.68rem}.ai-monster-hud>p{margin:2px 0 4px;font-size:.5rem}.ai-monster-stat-row{gap:3px}.ai-monster-stat-row span{padding:2px 1px;font-size:.43rem}
  .side-actions{right:6px;top:108px;gap:7px}.side-btn{width:52px;min-height:55px;border-radius:14px;padding:4px 2px}.side-btn svg{width:23px;height:23px}.side-btn>span{font-size:.58rem}.wheel{width:26px;height:26px}.wheel i{left:10px;height:29px}.wheel::after{inset:8px}
  .upgrade-strip{grid-template-columns:repeat(3,1fr);padding:6px 6px 4px;gap:4px}.upgrade-btn{min-height:42px;padding:4px;justify-content:center}.upgrade-btn svg,.upgrade-icon{width:25px;height:25px}.upgrade-copy b{font-size:.61rem}.upgrade-copy small{font-size:.49rem}.level-badge{display:none}
  .tactical-strip{gap:4px;padding:3px 6px}.tactical-card{height:38px;grid-template-columns:24px 1fr auto;padding:3px 5px}.tactical-card svg{width:22px}.tactical-card b{font-size:.57rem}.tactical-card small{display:none}.tactical-card em{font-size:.6rem}
  .unit-strip{grid-template-columns:repeat(5,145px);gap:5px;padding:4px 6px 7px}.unit-card{height:69px;grid-template-columns:45px 1fr;padding:4px 5px;border-width:2px;border-radius:12px}.unit-portrait{width:43px;height:54px}.unit-info{margin-left:3px}.unit-info b{font-size:.68rem}.unit-info small{display:block;font-size:.48rem}.cost{right:6px;bottom:5px;font-size:.67rem}.cost span{width:13px;height:13px}.unit-card kbd{display:none}.auto-spawn-toggle{right:5px;top:4px;min-width:34px;height:19px;font-size:.46rem}.unit-portrait .face{left:12px;top:25px}.helmet{left:3px}.hood{left:4px}.heavy-helmet{left:3px}.horn.left{left:1px}.horn.right{right:1px}.bow-shape{right:-3px}.sword-shape{right:0}.unit-card .unit-level{left:47px}
  .bottom-nav{display:grid;grid-template-columns:repeat(3,1fr);height:47px;border-top:2px solid #10182e}.nav-btn{display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;color:#93a1bd;background:#1f2c4a;border:0;border-right:1px solid #111a32;font-size:.61rem;font-weight:900}.nav-btn svg{width:20px;height:20px;fill:currentColor}.nav-btn.active{color:#ffda5a;background:#2f3f61}
}

@media (max-width: 390px) {
  .upgrade-copy small{display:none}.upgrade-btn{gap:3px}.unit-info b{font-size:.59rem}.side-btn{width:48px}.status-row span{max-width:55px;overflow:hidden;white-space:nowrap}.result-card h1{font-size:1.6rem}
}

@media(max-width:520px){.collection-grid,.forge-grid{grid-template-columns:repeat(2,1fr)}.draw-results{grid-template-columns:repeat(3,1fr)}.ai-difficulty-grid{grid-template-columns:repeat(2,1fr)}.stage-grid{grid-template-columns:1fr}.draw-hero{grid-template-columns:1fr}.draw-actions{display:grid;grid-template-columns:1fr 1fr}.draw-actions button{padding:0 7px}}

@media (min-width: 1121px) { .game-shell { border-radius: 22px; } }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.mode-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:8px}.mode-choice{display:grid;grid-template-columns:32px 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:0 8px;min-height:66px;padding:8px;cursor:pointer;text-align:left;color:var(--ink);background:rgba(255,255,255,.6);border:2px solid #b99e6b;border-radius:13px}.mode-choice>b{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:white;background:#344a76;font-size:1.2rem}.mode-choice span{font-size:.76rem;font-weight:1000}.mode-choice small{color:#6b7284;font-size:.56rem}.mode-choice.active{color:white;background:linear-gradient(#4d72ad,#35578d);border-color:#1b335c;box-shadow:0 3px 0 #1b335c}.mode-choice.active small{color:#e0ebff}.mode-choice.active>b{background:#e8ad3e;color:#263454}
@media(max-width:520px){.mode-choice-grid{grid-template-columns:1fr}}

/* AI 战场设计流：异步内容保留固定尺寸，避免生成完成时界面跳动。 */
.ai-design-stream{position:absolute;z-index:17;left:12px;bottom:12px;width:min(330px,42vw);min-height:108px;padding:10px 12px;border:2px solid #293c69;border-radius:15px;color:#eef7ff;background:linear-gradient(145deg,rgba(22,35,64,.94),rgba(32,31,71,.92));box-shadow:0 4px 0 rgba(9,16,34,.75),0 12px 28px rgba(8,14,31,.25);pointer-events:none;overflow:hidden;contain:layout paint}
.ai-design-stream:after{content:"";position:absolute;right:-34px;top:-44px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(92,235,255,.19),transparent 68%)}
.ai-design-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#92f0ff;font-size:.58rem;font-weight:1000;letter-spacing:.7px}.ai-design-head span{display:flex;align-items:center;gap:6px}.ai-design-head i{width:8px;height:8px;border-radius:50%;background:#52efa1;box-shadow:0 0 10px #52efa1}.ai-design-stream.loading .ai-design-head i{background:#ffd35c;box-shadow:0 0 10px #ffd35c;animation:aiPulse .85s ease-in-out infinite alternate}.ai-design-stream.error .ai-design-head i{background:#ff826d;box-shadow:0 0 10px #ff826d}.ai-design-head b{padding:3px 6px;border:1px solid #68dff0;border-radius:7px;color:#10213c;background:#83edff;font-size:.56rem}.ai-design-stream>strong{position:relative;z-index:2;display:block;margin:7px 0 3px;font-size:.78rem}.ai-design-stream>p{position:relative;z-index:2;margin:0;color:#b9c9e5;font-size:.56rem;line-height:1.45}.ai-design-changes{position:relative;z-index:2;display:flex;gap:4px;overflow:hidden;margin-top:7px}.ai-design-changes span{max-width:106px;overflow:hidden;padding:3px 6px;border:1px solid #50648f;border-radius:7px;color:#d6e5ff;background:rgba(90,116,165,.2);font-size:.5rem;font-weight:900;white-space:nowrap;text-overflow:ellipsis}.unit-card .design-generation{position:absolute;left:64px;bottom:6px;z-index:5;padding:2px 4px;border-radius:5px;color:#12213b;background:#8eefff;font-size:.48rem;font-weight:1000;box-shadow:0 1px 0 #327b93}.unit-card.design-mutated{animation:designCardFlash .55s ease}.unit-card .unit-portrait{background:linear-gradient(145deg,var(--design-primary,#76ccec),var(--design-secondary,#44749b))}.unit-card .unit-portrait:after{content:"";position:absolute;right:4px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--design-glow,#c8ffff);box-shadow:0 0 8px var(--design-glow,#c8ffff)}
@keyframes aiPulse{to{transform:scale(1.45);opacity:.55}}@keyframes designCardFlash{50%{filter:brightness(1.4);transform:translateY(-3px)}}
@media(max-width:720px){.ai-design-stream{left:6px;bottom:6px;width:min(300px,68vw);min-height:84px;padding:7px 8px}.ai-design-stream>strong{font-size:.66rem}.ai-design-stream>p{font-size:.49rem}.ai-design-changes{margin-top:4px}.ai-design-changes span{font-size:.44rem}.unit-card .design-generation{left:47px;bottom:4px}}