.hud{pointer-events:none;color:#fff;--blue:#4f9dff;--blue-hi:#9ccaff;--red:#ff5a5f;--red-hi:#ffb0b2;--gold:#ffd35c;--pad:max(12px, env(safe-area-inset-left));font-family:Avenir Next,Segoe UI,system-ui,sans-serif;position:fixed;inset:0}.hud button{pointer-events:auto;font:inherit;color:inherit}.glass{-webkit-backdrop-filter:blur(14px)saturate(150%);backdrop-filter:blur(14px)saturate(150%);background:linear-gradient(160deg,#1e26389e,#0c101a80);border:1px solid #fff3;border-radius:16px;box-shadow:0 10px 28px #00000047,inset 0 1px #ffffff2e}.caption{letter-spacing:.14em;text-transform:uppercase;color:#ffffffb8;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;font-weight:700;display:flex}.caption .era{letter-spacing:.04em;text-transform:none;color:#fff;font-size:13px}.top{top:max(10px, env(safe-area-inset-top));left:var(--pad);right:var(--pad);grid-template-columns:minmax(0,1fr) minmax(200px,1.25fr) minmax(0,1fr);align-items:start;gap:12px;display:grid;position:absolute}.base{flex-direction:column;gap:7px;padding:9px 12px 11px;transition:border-color .12s,box-shadow .12s;display:flex}.base.side-1 .caption{flex-direction:row-reverse}.base.hit{border-color:#ffffffd9;box-shadow:0 10px 28px #00000047,0 0 0 2px #ffffff59}.hp-track{background:#0000008c;border-radius:10px;height:20px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #00000080}.hp-fill,.hp-chip{border-radius:10px;position:absolute;top:0;bottom:0;left:0}.side-1 .hp-fill,.side-1 .hp-chip{left:auto;right:0}.hp-fill{transition:width .12s ease-out}.hp-chip{background:#ffffffd9;transition:width .5s ease-in .35s}.side-0 .hp-fill{background:linear-gradient(180deg, var(--blue-hi) 0%, var(--blue) 45%, #2563eb 100%);box-shadow:0 0 12px #4f9dffb3}.side-1 .hp-fill{background:linear-gradient(180deg, var(--red-hi) 0%, var(--red) 45%, #d92d34 100%);box-shadow:0 0 12px #ff5a5fb3}.hp-num{font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000000e6,0 0 6px #0009;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:flex;position:absolute;inset:0}.base.low .hp-fill{animation:.7s ease-in-out infinite alternate low}@keyframes low{0%{filter:brightness()}to{filter:brightness(1.7)saturate(1.3)}}.front{flex-direction:column;gap:6px;padding:9px 14px 8px;display:flex}.front .caption{justify-content:center}.front-track{background:linear-gradient(180deg, var(--red-hi), var(--red) 50%, #c9252c);border-radius:7px;height:14px;position:relative;overflow:visible;box-shadow:inset 0 2px 4px #00000059,0 0 10px #ff5a5f73}.front-blue{background:linear-gradient(180deg, var(--blue-hi), var(--blue) 50%, #2563eb);border-radius:7px 0 0 7px;position:absolute;top:0;bottom:0;left:0;box-shadow:0 0 10px #4f9dff8c}.front-mark{background:radial-gradient(circle at 40% 35%,#fffbe6,#ffe89a 45%,#f5c542);border-radius:50%;width:22px;height:22px;margin:-11px 0 0 -11px;position:absolute;top:50%;box-shadow:0 0 0 2px #ffffffe6,0 0 16px 4px #ffe282d9}.front-labels{font-variant-numeric:tabular-nums;justify-content:space-between;font-size:12px;font-weight:800;display:flex}.front-labels .mine{color:var(--blue-hi)}.front-labels .theirs{color:var(--red-hi)}.bottom{bottom:max(10px, env(safe-area-inset-bottom));left:var(--pad);right:var(--pad);justify-content:space-between;align-items:flex-end;gap:12px;display:flex;position:absolute}.row{gap:8px;display:flex}.purse{min-width:132px;padding:9px 13px 10px}.gold{color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #0009;align-items:center;gap:7px;font-size:24px;font-weight:800;display:flex}.coin{background:radial-gradient(circle at 35% 30%,#fff4c2,#ffd35c 45%,#c98a12);border-radius:50%;flex:none;width:16px;height:16px;box-shadow:0 0 6px #ffd35cb3}.income{color:#ffffffb8;margin:1px 0 7px;font-size:11px}.xp-track{background:#00000080;border-radius:4px;height:7px;overflow:hidden}.xp-fill{background:linear-gradient(90deg,#a78bfa,#e0c3ff);border-radius:4px;height:100%;box-shadow:0 0 8px #c4a0ffcc}.xp-label{letter-spacing:.06em;color:#ffffffb8;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:3px;font-size:10px;font-weight:700}.unit-col{flex-direction:column;align-items:center;gap:6px;display:flex}.queue{height:8px;width:calc(var(--n,0) * 14px);background:radial-gradient(circle,#ffffff8c 3.5px,#0000 4px) 0 0/14px 8px repeat-x;position:relative}.queue:before{content:"";background:conic-gradient(#fff calc(var(--p) * 360deg), transparent 0);width:8px;height:8px;display:var(--show,block);border-radius:50%;position:absolute;top:0;left:3px}.btn{cursor:pointer;touch-action:manipulation;border-radius:14px;flex-direction:row;align-items:center;gap:6px;min-width:118px;height:64px;padding:4px 12px 4px 4px;transition:transform 60ms,border-color .15s,opacity .15s;display:flex;position:relative;overflow:hidden}.btn:active:not(:disabled){transform:translateY(2px)scale(.98)}.btn:disabled{opacity:.45;cursor:default}.btn .pic{-webkit-user-drag:none;pointer-events:none;background:radial-gradient(circle at 50% 40%,#ffffff38,#ffffff05 70%);border-radius:10px;flex:none;width:56px;height:56px;position:relative}.btn .label{flex-direction:column;align-items:flex-start;gap:1px;display:flex;position:relative}.btn:disabled .pic{filter:grayscale(.7)}.btn .name{white-space:nowrap;font-size:14px;font-weight:800;position:relative}.btn .cost{color:var(--gold);font-variant-numeric:tabular-nums;font-size:12px;font-weight:800;position:relative}.btn .key{z-index:1;color:#ffffff80;font-size:9px;font-weight:800;position:absolute;top:4px;left:7px}.btn.unit:not(:disabled):hover,.btn.side:not(:disabled):hover{border-color:#ffffff8c}.btn.done .cost{color:#8ef0a8}.evolve-fill{background:linear-gradient(90deg,#a78bfa59,#e0c3ff73);position:absolute;top:0;bottom:0;left:0}.btn.evolve .cost,.btn.hero.locked .cost{color:#e0c3ff}.btn.hero.locked .pic{filter:grayscale(.85)brightness(.8)}.btn.hero.ready{border-color:#e0c3ffd9;box-shadow:0 10px 28px #00000047,0 0 14px #c4a0ff99}.special-fill{background:linear-gradient(90deg,#6ec8ff47,#aae6ff66);position:absolute;top:0;bottom:0;left:0}.btn.special .cost{color:#aee4ff}.btn.special .pic{box-sizing:border-box;padding:4px}.btn.special.ready{border-color:#aee4ffd9;box-shadow:0 10px 28px #00000047,0 0 14px #6ec8ff99}.btn.evolve.ready{border-color:var(--gold);animation:.9s ease-in-out infinite alternate ready}.btn.evolve.ready .cost{color:var(--gold)}@keyframes ready{0%{box-shadow:0 10px 28px #00000047,0 0 6px #ffd35c99}to{box-shadow:0 10px 28px #00000047,0 0 22px #ffd35cf2}}.overlay{color:#fff;text-align:center;background:radial-gradient(#00000026,#0000008c);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;font-family:Avenir Next,Segoe UI,system-ui,sans-serif;display:flex;position:fixed;inset:0}.overlay h1{letter-spacing:.02em;text-shadow:0 4px #1c2230,0 6px 18px #00000080;margin:0;font-size:clamp(34px,7vw,64px)}.overlay p{opacity:.92;max-width:460px;margin:0}.overlay button{font:inherit;cursor:pointer;color:#fff;background:linear-gradient(#6aa9ff,#2f6fe0);border:1px solid #ffffff80;border-radius:16px;margin-top:8px;padding:12px 36px;font-size:20px;font-weight:800;box-shadow:0 8px 22px #2f6fe080,inset 0 1px #fff6}.overlay small{opacity:.6;font-size:11px}@media (height<=430px){.top{grid-template-columns:minmax(0,1fr) minmax(150px,1.2fr) minmax(0,1fr);gap:8px}.base,.front{gap:4px;padding:6px 9px 7px}.hp-track{height:16px}.caption{font-size:9px}.caption .era{font-size:11px}.btn{min-width:92px;height:50px}.btn .pic{width:42px;height:42px}.btn .name{font-size:12px}.gold{font-size:18px}.purse{min-width:104px;padding:6px 9px 7px}}@media (width<=1480px){.bottom{gap:8px}.btn.unit,.btn.side{min-width:0}.btn.unit{padding-right:8px}.btn.unit .name{display:none}}@media (width<=1200px){.btn.side .name{display:none}.btn.side{padding-right:8px}}@media (width<=700px){.xp-label{letter-spacing:0;font-size:9px}}@media (width<=1000px){.bottom{gap:6px}.row{gap:5px}.btn{gap:4px;min-width:0;height:46px;padding:3px 8px 3px 3px}.btn .pic{width:38px;height:38px}.btn .name,.btn .cost{font-size:11px}.btn.unit .name{display:none}.purse{min-width:0;padding:6px 8px 7px}.income{display:none}}@media (width<=620px){.purse{flex:none}.bottom,.row{gap:4px}.btn{gap:3px;padding-right:5px}.btn .pic{width:32px;height:32px}.btn .cost{font-size:10px}}@media (width<=760px){.btn,.btn.unit,.btn.side{flex-direction:column;justify-content:center;gap:0;padding:2px 5px}.btn .pic{width:30px;height:30px}.btn .label{align-items:center}.btn .cost{white-space:nowrap;font-size:10px}}.speed-btn{margin-right:max(12px, env(safe-area-inset-right));cursor:pointer;touch-action:manipulation;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #0009;border-radius:13px;place-items:center;width:42px;height:42px;padding:0;font-size:15px;font-weight:800;transition:border-color .15s,color .15s,transform 60ms;display:grid;position:absolute;top:96px;right:0;transform:translateY(50px)}.speed-btn:active{transform:translateY(50px)scale(.95)}.speed-btn .speed-key{color:#ffffff73;font-size:8px;position:absolute;bottom:2px;right:5px}.speed-btn.fast{color:var(--gold);border-color:#ffd35cb3;box-shadow:0 10px 28px #00000047,0 0 12px #ffd35c73}.overlay .glass{color:#fff}.realms{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;display:flex}.overlay button.realm{color:#fff;font:inherit;opacity:.6;box-shadow:none;background:linear-gradient(160deg,#1e26389e,#0c101a80);border:1px solid #fff3;border-radius:16px;flex-direction:column;align-items:center;gap:2px;margin:0;padding:10px 22px;font-size:14px;font-weight:600;display:flex}.overlay button.realm.on{opacity:1;border-color:#ffffffb3}.realm-kicker{letter-spacing:.16em;text-transform:uppercase;color:#ffffffa6;font-size:10px;font-weight:800}.realm b{font-size:22px}.realm span:last-child{opacity:.8;font-size:12px}.levels{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px;display:flex}.overlay button.level{text-align:left;background:linear-gradient(160deg,#1e26389e,#0c101a80);border:1px solid #ffffff40;border-radius:16px;flex-direction:column;align-items:flex-start;gap:3px;width:190px;margin:0;padding:12px 14px;font-size:14px;font-weight:600;display:flex;box-shadow:0 10px 28px #00000047,inset 0 1px #ffffff2e}.overlay button.level:not(.locked):hover{border-color:#ffffffb3}.overlay button.level.locked{opacity:.5;cursor:default}.lvl-num{letter-spacing:.14em;text-transform:uppercase;color:#ffffffa6;font-size:10px;font-weight:800}.level b{font-size:20px}.lvl-meta{opacity:.85;font-size:12px}@media (width<=760px){.overlay button.realm span:last-child{display:none}}.lvl-status{color:var(--gold,#ffd35c);margin-top:4px;font-size:12px;font-weight:800}.lvl-status.cleared{color:#8ef0a8}.row-btns{gap:10px;display:flex}@media (height<=430px){.overlay{gap:6px}.overlay h1{font-size:34px}.overlay p{font-size:13px}.overlay button.realm{padding:6px 18px}.overlay button.realm span:last-child{display:none}.realms{margin-top:2px}.realm b{font-size:18px}.overlay button.level{padding:8px 12px}.level b{font-size:17px}}.rotate{z-index:20;color:#fff;text-align:center;background:#141a26;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;font-family:Avenir Next,Segoe UI,system-ui,sans-serif;font-size:18px;font-weight:700;display:none;position:fixed;inset:0}.rotate .phone{border:4px solid #fff;border-radius:10px;width:46px;height:78px;animation:2.2s ease-in-out infinite turn}.rotate small{opacity:.7;font-size:13px;font-weight:500}@keyframes turn{0%,25%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}@media (orientation:portrait) and (pointer:coarse){.rotate{display:flex}}.overlay button.secondary{box-shadow:none;background:#ffffff1f}.sound-dock{z-index:5;right:max(12px, env(safe-area-inset-right));color:#fff;pointer-events:none;align-items:flex-start;gap:8px;font-family:Avenir Next,Segoe UI,system-ui,sans-serif;display:flex;position:fixed;top:96px}.sound-btn{color:#fff;cursor:pointer;touch-action:manipulation;pointer-events:auto;border-radius:13px;place-items:center;width:42px;height:42px;padding:0;transition:border-color .15s,transform 60ms;display:grid}.sound-btn svg{filter:drop-shadow(0 1px 2px #00000080);width:22px;height:22px}.sound-btn:active{transform:scale(.95)}.sound-btn.off{color:#ffb0b2}.sound-dock.open .sound-btn{border-color:#ffffffa6;box-shadow:0 10px 28px #00000047,0 0 0 3px #9ccaff40}.sound-drawer{opacity:0;transform-origin:100% 0;pointer-events:none;visibility:hidden;flex-direction:column;gap:9px;width:268px;padding:11px 14px 13px;transition:opacity .18s,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s;display:flex;transform:translate(14px)scale(.98)}.sound-dock.open .sound-drawer{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .18s,transform .24s cubic-bezier(.2,.8,.2,1),visibility;transform:none}.sd-head{justify-content:space-between;align-items:baseline;margin-bottom:1px;display:flex}.sd-hint{color:#ffffff73;font-size:10px;font-weight:700}.sd-row{--accent:#9ccaff;--accent-deep:#4f9dff;border-radius:10px;grid-template-columns:18px 52px 1fr 28px;align-items:center;gap:9px;margin:0 -8px;padding:6px 8px;transition:background .15s;display:grid}.sd-row:hover{background:#ffffff0f}.sd-row[data-k=nature]{--accent:#a6f0b8;--accent-deep:#3fbf6a}.sd-row[data-k=effects]{--accent:#ffe08a;--accent-deep:#f2b01e}.sd-icon{width:18px;height:18px;color:var(--accent);filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent))}.sd-label{letter-spacing:.02em;font-size:12px;font-weight:800}.sd-row output{text-align:right;font-variant-numeric:tabular-nums;color:#fffc;font-size:12px;font-weight:800}.sound-drawer.muted .sd-row{opacity:.45}.sd-row input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:0}.sd-row input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent-deep), var(--accent)) 0 0 / var(--v,50%) 100% no-repeat, #00000080;height:6px;box-shadow:inset 0 1px 2px #00000080, 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:3px}.sd-row input[type=range]::-moz-range-track{background:#00000080;border-radius:3px;height:6px}.sd-row input[type=range]::-moz-range-progress{background:linear-gradient(90deg, var(--accent-deep), var(--accent));border-radius:3px;height:6px}.sd-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;box-shadow:0 1px 3px #00000080, 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);background:radial-gradient(circle at 40% 35%,#fff,#e6eefc 60%,#c9d6ee);border:none;border-radius:50%;margin-top:-5px;transition:transform .1s}.sd-row input[type=range]::-moz-range-thumb{width:16px;height:16px;box-shadow:0 1px 3px #00000080, 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);background:radial-gradient(circle at 40% 35%,#fff,#e6eefc 60%,#c9d6ee);border:none;border-radius:50%}.sd-row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}.sd-row input[type=range]:focus-visible{outline:none}.sd-row input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff}.sd-divider{background:linear-gradient(90deg,#0000,#ffffff2e,#0000);height:1px;margin:1px 0}.sd-mute{cursor:pointer;align-items:center;gap:8px;padding:2px 0;display:flex;position:relative}.sd-mute kbd{color:#fff9;background:#ffffff0f;border:1px solid #ffffff40;border-radius:5px;margin-left:auto;padding:2px 6px;font:800 10px Avenir Next,system-ui,sans-serif}.sd-mute input{opacity:0;width:1px;height:1px;position:absolute}.sd-switch{background:#00000080;border-radius:10px;flex:none;width:36px;height:20px;transition:background .2s;position:relative;box-shadow:inset 0 1px 3px #00000080}.sd-switch:after{content:"";background:radial-gradient(circle at 40% 35%,#fff,#dfe7f5);border-radius:50%;width:16px;height:16px;transition:transform .2s cubic-bezier(.2,.8,.2,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000080}.sd-mute input:checked+.sd-switch{background:linear-gradient(90deg,#d92d34,#ff5a5f);box-shadow:0 0 10px #ff5a5f80}.sd-mute input:checked+.sd-switch:after{transform:translate(16px)}.sd-mute input:focus-visible+.sd-switch{outline-offset:2px;outline:2px solid #fff}.overlay p.loading:after{content:"";text-align:left;width:1.4em;animation:1.2s steps(4,end) infinite dots;display:inline-block}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}body.cinematic #game{position:relative}body.cinematic #game:after{content:"";pointer-events:none;background:radial-gradient(120% 95% at 50% 45%,#0000 55%,#140a006b 100%);position:absolute;inset:0}