*{box-sizing:border-box}html,body{color:#e8e8e8;background:#0b0f14;width:100%;height:100%;margin:0;padding:0;font-family:Segoe UI,system-ui,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;position:relative}@supports (height:100dvh){#app{height:100dvh}}canvas{display:block}.hud{pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0}.hud-top{justify-content:space-between;align-items:flex-start;padding:12px 16px;display:flex}.force-status{border-top:1px solid #ffffff1a;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;padding-top:6px;font-size:11px;display:flex}.force-status .force{font-weight:600}.force-status .force.player{color:#4da3ff}.force-status .force.enemy{color:#ff5c5c}.force-status .pending{color:#e0a63a;font-size:11px}.force-status .pending.done{color:#7f8b98}.c-precio{z-index:2;color:#ffd54a;text-shadow:0 1px 3px #000000e6;font-size:15px;font-weight:800;position:absolute;bottom:5px;right:5px}.card.tienda{cursor:pointer}.card.tienda:hover:not(:disabled){transform:translateY(-4px)}.card.caro{opacity:.4;cursor:not-allowed}.c-cuenta{z-index:2;color:#cfe3f7;text-shadow:0 1px 3px #000000e6;font-size:14px;font-weight:800;position:absolute;bottom:4px;left:4px}.c-menos{z-index:3;text-align:center;color:#fff;background:#d43b3beb;border-radius:5px;width:20px;height:20px;font-size:15px;font-weight:800;line-height:18px;position:absolute;top:3px;right:3px}.card.tienda:has(.c-cuenta){border-color:#2f6fed}.dificultad{justify-content:center;gap:8px;margin:4px 0 16px;display:flex}.overlay-acciones{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.overlay-box.ancha{max-width:min(96vw,780px);padding:22px 24px}.overlay-box.ancha p{margin-bottom:14px}.overlay-box .rival{color:#ff9d9d;font-size:13px}.tienda{grid-template-columns:repeat(auto-fit,minmax(86px,1fr));justify-items:center;gap:8px;max-height:58vh;margin-bottom:18px;display:grid;overflow-y:auto}.tienda .card{margin-left:0;position:relative}#ayuda{z-index:10}.reglas{text-align:left;max-height:62vh;margin-bottom:16px;padding-right:6px;overflow-y:auto}.reglas section{margin-bottom:14px}.reglas h3{letter-spacing:1px;text-transform:uppercase;color:#ffd54a;margin:0 0 6px;font-size:12px}.reglas ul{margin:0;padding-left:18px}.reglas li{color:#cfe3f7;margin-bottom:4px;font-size:13px;line-height:1.5}.tabla-unidades{border-collapse:collapse;width:100%;font-size:12px}.tabla-unidades th{text-align:right;color:#8a97a5;border-bottom:1px solid #ffffff1f;padding:3px 4px;font-weight:600}.tabla-unidades td{text-align:right;color:#e8eef6;padding:3px 4px}.tabla-unidades td:first-child,.tabla-unidades th:first-child{text-align:left}.tabla-unidades .notas{color:#7fc97f;text-align:left;font-size:11px}.tabla-unidades .glyph{vertical-align:middle;margin-right:5px;display:inline-block;transform:scale(.55)}.dificultad .dif{border-radius:6px;align-items:baseline;gap:5px;padding:9px 14px;font-size:13px;font-weight:600;display:flex}.dificultad .dif i{color:#ff8a8a;font-size:11px;font-style:normal}.dificultad .dif.activa{color:#dce9fb;background:#24405f;border-color:#2f6fed}.turn-banner{pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f141cd9;border:1px solid #ffffff1f;border-radius:8px;min-width:170px;padding:8px 12px}.turn-banner h1{letter-spacing:1px;color:#9fb4c7;text-transform:uppercase;margin:0 0 3px;font-size:10px}.turn-banner .turn-side{font-size:15px;font-weight:700}.turn-side.player{color:#4da3ff}.turn-side.enemy{color:#ff5c5c}.log-panel{pointer-events:auto;background:#0f141cd9;border:1px solid #ffffff1f;border-radius:8px;width:260px;max-height:150px;padding:10px 14px;font-size:11px;line-height:1.5;overflow-y:auto}.log-panel div{border-bottom:1px solid #ffffff0f;padding:2px 0}.log-entry{border-left:3px solid #0000;padding-left:8px}.log-entry.system{color:#7f8b98;border-left-color:#ffffff26}.log-entry.player{color:#cfe3f7;border-left-color:#4da3ff}.log-entry.enemy{color:#f7d7d7;border-left-color:#ff5c5c}.log-entry.kill{background:#ff9d3b1f;font-weight:700}.log-entry.kill.player{color:#ffd9a3}.log-entry.kill.enemy{color:#ffc2c2}.hud-bottom{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;padding:12px 16px;display:flex}.unit-panel.idle{opacity:.45}.unit-panel{pointer-events:none;background:#0f141ce6;border:1px solid #ffffff1f;border-radius:8px;min-width:210px;min-height:52px;padding:10px 12px}.unit-panel.empty{color:#667;align-items:center;font-size:12px;display:flex}.unit-panel h2{margin:0 0 5px;font-size:13px}.unit-panel .stat-row{justify-content:space-between;gap:10px;margin:1px 0;font-size:12px;display:flex}.unit-panel .stat-row>span:first-child{flex:none}.unit-panel .stat-row>span:last-child{text-align:right}.unit-panel .bonus{color:#7fc97f;font-size:12px}.unit-panel .bar-bg{background:#ffffff1a;border-radius:4px;height:8px;margin:4px 0 8px;overflow:hidden}.unit-panel .bar-fill{background:linear-gradient(90deg,#4caf50,#8bc34a);height:100%}.controls-panel{pointer-events:none;flex-direction:column;align-items:flex-end;gap:8px;display:flex}.acciones{gap:6px;display:flex}.acciones button{padding:7px 12px;font-size:12px;font-weight:600}.acciones button.activa{color:#f0c98a;border-color:#dda863}.chip.loose:before{content:"";background:#dda863;border-radius:50%;width:7px;height:7px;position:absolute;top:3px;left:3px;box-shadow:0 0 0 1px #0009}button{pointer-events:auto;color:#e8e8e8;cursor:pointer;background:#1c2733;border:1px solid #ffffff26;border-radius:6px;padding:8px 15px;font-size:13px;font-weight:600;transition:background .15s}button:hover:not(:disabled){background:#2b3a4a}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:#2f6fed;border-color:#2f6fed}button.primary:hover:not(:disabled){background:#4a83f5}.overlay-message{pointer-events:auto;background:#05080cbf;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay-message.hidden{display:none}.overlay-box{text-align:center;background:#121a23;border:1px solid #ffffff26;border-radius:10px;padding:32px 40px}.overlay-box h2{margin:0 0 8px;font-size:28px}.overlay-run{color:#9fb4c7;border-top:1px solid #ffffff1f;flex-wrap:wrap;justify-content:center;gap:16px;margin:14px 0 4px;padding-top:12px;font-size:12px;display:flex}.overlay-run b{color:#e8eef6;font-size:14px}.overlay-run .racha b{color:#ffd54a}.overlay-run:empty{display:none}.overlay-box p{color:#9fb4c7;margin:0 0 20px}.hand{pointer-events:none;flex:1;justify-content:center;align-items:flex-start;gap:9px;padding:0 12px;display:flex}.carousel{pointer-events:none;flex-basis:100%;justify-content:center;align-items:flex-end;gap:6px;padding:0 4px 2px;display:flex}.carousel:empty{display:none}.chip{pointer-events:auto;color:#e8eef6;width:46px;height:52px;font:inherit;cursor:pointer;background:#0f141ce6;border:1px solid #ffffff29;border-radius:9px;flex-direction:column;justify-content:flex-end;align-items:center;gap:1px;padding:5px 0 4px;display:flex}.chip .glyph{margin-bottom:3px;transform:scale(.72)}.chip b{font-size:12px;font-weight:700;line-height:1}.chip.infantry{--accent:#93b0cc}.chip.archer{--accent:#8cc78f}.chip.cavalry{--accent:#dda863}.chip.pike{--accent:#9ccfc7}.chip.scout{--accent:#c9a7d8}.chip.hero{--accent:#ffd54a}.chip.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.carousel .chip{border-top-width:3px}.carousel .chip.player{border-top-color:#2f6fed}.carousel .chip.enemy{border-top-color:#d43b3b}.carousel .chip.activa{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent), 0 0 12px #ffe06659;background:#1e2632f2;transform:translateY(-4px)scale(1.12)}.carousel .chip:not(.activa){opacity:.78}.chip.acted{opacity:.42}.chip{position:relative}.chip.lethal:after{content:"";background:#ff5c5c;border-radius:50%;width:7px;height:7px;position:absolute;top:3px;right:3px;box-shadow:0 0 0 1px #0009}.card.infantry{--accent:#93b0cc;--deep:#2c4360}.card.archer{--accent:#8cc78f;--deep:#2b5334}.card.cavalry{--accent:#dda863;--deep:#63421c}.card.pike{--accent:#9ccfc7;--deep:#1e4a44}.card.scout{--accent:#c9a7d8;--deep:#402a52}.card.hero{--accent:#ffd54a;--deep:#5c4410}.card{pointer-events:auto;cursor:pointer;filter:brightness(.82)saturate(.8);background:linear-gradient(150deg,#e6ebf0 0%,#97a1ac 18%,#cdd5dd 34%,#7e8892 58%,#b9c2cb 74%,#6d767f 100%);border:0;border-radius:7px;width:100px;height:140px;padding:3px;transition:transform .14s,box-shadow .14s,filter .14s;box-shadow:0 3px 9px #0000008c,inset 0 0 0 1px #ffffff59}.card:hover{filter:brightness();transform:translateY(4px)}.card.selected{filter:brightness(1.08);box-shadow:0 0 0 2px var(--accent), 0 10px 22px #000000a6, inset 0 0 0 1px #ffffff73;transform:translateY(9px)}.c-frame{background:linear-gradient(#20272f 0%,#161c23 100%);border-radius:5px;flex-direction:column;height:100%;padding:3px;display:flex;box-shadow:inset 0 0 0 1px #0000008c}.c-head{align-items:center;gap:3px;margin-bottom:3px;display:flex}.c-badge{color:#10161d;background:radial-gradient(circle at 35% 30%,#f2f6fa,#9aa5b1 70%,#616b76);border-radius:50%;flex-direction:column;flex:none;justify-content:center;align-items:center;width:20px;height:20px;line-height:1;display:flex;box-shadow:inset 0 0 0 1px #00000073}.c-badge b{font-size:9px;font-weight:700}.c-badge i{letter-spacing:.3px;opacity:.75;font-size:3.6px;font-style:normal}.c-title{color:#141a21;text-align:center;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(#cfd7df,#9ba5af);border-radius:2px;flex:1;min-width:0;padding:2px 3px;font-family:Georgia,Times New Roman,serif;font-size:8px;font-weight:700;overflow:hidden}.c-kind{letter-spacing:.4px;color:var(--accent);flex:none;font-size:5.5px;font-weight:700}.c-art{background:linear-gradient(180deg, #ffffff1f, #fff0 50%), linear-gradient(180deg, var(--deep) 0%, #0c1219 100%);border-radius:3px;justify-content:center;align-items:flex-end;height:61px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0009,inset 0 0 12px #00000080}.c-art:after{content:"";background:linear-gradient(#0000004d,#000000a6);height:13px;position:absolute;bottom:0;left:0;right:0}.glyph{z-index:1;filter:drop-shadow(0 2px 3px #0009);background:linear-gradient(#fff 0%,#aab7c4 100%);margin-bottom:9px;display:block;position:relative}.glyph.infantry{border-radius:2px 2px 1px 1px;width:15px;height:23px}.glyph.cavalry{border-radius:3px;width:28px;height:16px}.glyph.pike{border-radius:3px 3px 1px 1px;width:10px;height:27px}.glyph.scout{border-radius:3px;width:13px;height:13px}.glyph.hero{border-radius:4px 4px 2px 2px;width:20px;height:24px;box-shadow:0 -4px 0 -1px #ffd54a}.glyph.archer{background:0 0;border-bottom:24px solid #eef3f8;border-left:12px solid #0000;border-right:12px solid #0000;width:0;height:0}.c-type{color:#141a21;letter-spacing:.2px;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(#b9c2cb,#8d97a1);border-radius:2px;margin:2px 0;padding:1.5px 4px;font-size:6px;font-weight:700;overflow:hidden}.c-box{color:#1b222a;background:linear-gradient(#dfe4e9,#c3cad1);border-radius:2px;flex:1;padding:3px 4px;position:relative}.c-rules{padding-right:34px;font-size:6.5px;line-height:1.35;display:block}.c-rules span{white-space:nowrap;display:block}.c-rules b{font-size:7.5px}.c-pills{gap:3px;display:flex;position:absolute;bottom:2px;right:3px}.pill{text-align:center;color:#10161d;border-radius:7px;min-width:16px;padding:1px 3px;font-size:8px;font-weight:700;box-shadow:inset 0 0 0 1px #00000059}.pill.atk{background:linear-gradient(#f0c37a,#cf9440)}.pill.def{background:linear-gradient(#a8c7e6,#6e93bb)}.c-foot{letter-spacing:.3px;color:#7d8894;margin-top:2px;font-size:5px}.overlay-stats{border-top:1px solid #ffffff1f;justify-content:center;gap:22px;margin:0 0 22px;padding:14px 4px 0;display:flex}.overlay-stats span{flex-direction:column;align-items:center;gap:3px;display:flex}.overlay-stats b{color:#e8e8e8;font-size:21px;font-weight:700}.overlay-stats i{letter-spacing:.4px;text-transform:uppercase;color:#8a97a5;font-size:10px;font-style:normal}@media (width<=760px){.hud-top,.hud-bottom{gap:8px;padding:8px 10px}.hand{pointer-events:none;flex:none;justify-content:center;align-items:flex-end;gap:0;padding:16px 8px 6px;position:absolute;bottom:54px;left:0;right:0;overflow:visible}.carousel{gap:5px;padding:0 2px 2px}.carousel .chip{width:40px;height:48px;padding:4px 0 3px}.carousel .chip .glyph{margin-bottom:2px;transform:scale(.62)}.carousel .chip b{font-size:11px}.chip{width:42px;height:48px}.card{transform-origin:bottom;flex:none;margin-left:-34px;transition:transform .14s;position:relative}.card:first-child{margin-left:0}.card.tienda{width:78px;height:108px;margin-left:0}.fase-leva .unit-panel,.fase-leva .acciones{display:none}.card:hover{transform:none}.card.selected{z-index:5;box-shadow:0 0 0 2px var(--accent), 0 8px 18px #0000009e;transform:scale(1.3)translateY(-30px)}.c-precio{z-index:2;color:#ffd54a;text-shadow:0 1px 3px #000000e6;font-size:15px;font-weight:800;position:absolute;bottom:5px;right:5px}.card.tienda{cursor:pointer}.card.tienda:hover:not(:disabled){transform:translateY(-4px)}.card.caro{opacity:.4;cursor:not-allowed}.c-cuenta{z-index:2;color:#cfe3f7;text-shadow:0 1px 3px #000000e6;font-size:14px;font-weight:800;position:absolute;bottom:4px;left:4px}.c-menos{z-index:3;text-align:center;color:#fff;background:#d43b3beb;border-radius:5px;width:20px;height:20px;font-size:15px;font-weight:800;line-height:18px;position:absolute;top:3px;right:3px}.card.tienda:has(.c-cuenta){border-color:#2f6fed}.dificultad{justify-content:center;gap:8px;margin:4px 0 16px;display:flex}.overlay-acciones{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.overlay-box.ancha{max-width:min(96vw,780px);padding:22px 24px}.overlay-box.ancha p{margin-bottom:14px}.overlay-box .rival{color:#ff9d9d;font-size:13px}.tienda{grid-template-columns:repeat(auto-fit,minmax(86px,1fr));justify-items:center;gap:8px;max-height:58vh;margin-bottom:18px;display:grid;overflow-y:auto}.tienda .card{margin-left:0;position:relative}#ayuda{z-index:10}.reglas{text-align:left;max-height:62vh;margin-bottom:16px;padding-right:6px;overflow-y:auto}.reglas section{margin-bottom:14px}.reglas h3{letter-spacing:1px;text-transform:uppercase;color:#ffd54a;margin:0 0 6px;font-size:12px}.reglas ul{margin:0;padding-left:18px}.reglas li{color:#cfe3f7;margin-bottom:4px;font-size:13px;line-height:1.5}.tabla-unidades{border-collapse:collapse;width:100%;font-size:12px}.tabla-unidades th{text-align:right;color:#8a97a5;border-bottom:1px solid #ffffff1f;padding:3px 4px;font-weight:600}.tabla-unidades td{text-align:right;color:#e8eef6;padding:3px 4px}.tabla-unidades td:first-child,.tabla-unidades th:first-child{text-align:left}.tabla-unidades .notas{color:#7fc97f;text-align:left;font-size:11px}.tabla-unidades .glyph{vertical-align:middle;margin-right:5px;display:inline-block;transform:scale(.55)}.dificultad .dif{border-radius:6px;align-items:baseline;gap:5px;padding:9px 14px;font-size:13px;font-weight:600;display:flex}.dificultad .dif i{color:#ff8a8a;font-size:11px;font-style:normal}.dificultad .dif.activa{color:#dce9fb;background:#24405f;border-color:#2f6fed}.turn-banner{min-width:0;padding:6px 9px}.unit-panel{min-width:0;max-width:58vw;padding:8px 10px}#action-btn{padding:7px 11px;font-size:12px}.acciones button{min-height:44px;padding:8px 14px;font-size:13px}.card{width:76px;height:104px}.c-badge{width:23px;height:23px}.c-badge b{font-size:12px}.c-badge i{display:none}.c-title{font-size:10.5px}.c-kind{font-size:7.5px}.c-art{height:52px}.c-type{padding:2px 4px;font-size:8px}.c-rules{padding-right:40px;font-size:9.5px;line-height:1.4}.c-rules b{font-size:11px}.pill{min-width:19px;padding:1px 4px;font-size:11px}.c-foot{display:none}.log-panel{width:168px;max-height:92px;padding:7px 9px;font-size:12px}.turn-banner h1{font-size:11px}.turn-banner .turn-side{font-size:17px}.force-status{font-size:12.5px}.force-status .pending{font-size:12px}.unit-panel,.unit-panel.empty{font-size:13px}.unit-panel h2{font-size:15px}.unit-panel .stat-row{font-size:13.5px}.unit-panel .bonus{font-size:12.5px}#action-btn{min-height:44px;padding:12px 16px;font-size:14px}}@media (width<=760px) and (height<=720px){.hand{padding:8px 10px 2px;bottom:4px}.carousel{gap:4px}.chip{width:38px;height:42px}.unit-panel{flex-wrap:wrap;align-items:baseline;gap:0 10px;max-width:100%;padding:5px 8px;display:flex}.unit-panel h2{flex-basis:100%;margin:0 0 1px;font-size:12px}.unit-panel .bar-bg{flex-basis:100%;margin:0 0 3px}.unit-panel .stat-row{border:0;gap:4px;padding:0;font-size:11px;display:flex}.unit-panel .stat-row:nth-child(n+6),.unit-panel.empty,#action-btn:disabled{display:none}.card{width:66px;height:86px;margin-left:-20px}.card:first-child{margin-left:0}.card.tienda{width:72px;height:92px;margin-left:0}.card.selected{transform:scale(1.3)translateY(-18px)}.c-art{height:40px}.c-badge{width:16px;height:16px}.c-badge b{font-size:7.5px}.c-badge i{display:none}.c-title{font-size:6.5px}.c-kind{font-size:4.5px}.c-type{margin:1px 0;font-size:5px}.c-rules{padding-right:26px;font-size:5.5px}.c-rules b{font-size:6.5px}.pill{min-width:13px;padding:0 2px;font-size:6.5px}.c-foot{display:none}.glyph.infantry{width:11px;height:17px}.glyph.cavalry{width:20px;height:12px}.glyph.pike{width:7px;height:20px}.glyph.scout{width:10px;height:10px}.glyph.hero{width:15px;height:18px}.glyph.archer{border-bottom-width:18px;border-left-width:9px;border-right-width:9px}.unit-panel{max-width:52vw;min-height:0;padding:6px 8px}.log-panel{max-height:62px}}#action-btn.ready{padding:11px 22px;font-size:15px;animation:1.8s ease-in-out infinite listo;box-shadow:0 0 0 3px #2f6fed47,0 6px 18px #00000080}@keyframes listo{0%,to{box-shadow:0 0 0 3px #2f6fed47,0 6px 18px #00000080}50%{box-shadow:0 0 0 7px #2f6fed24,0 6px 18px #00000080}}@media (prefers-reduced-motion:reduce){#action-btn.ready{animation:none}}@media (width<=760px){#action-btn.ready{width:auto;padding:14px 12px;font-size:16px;position:absolute;bottom:58px;left:16px;right:16px}}