@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#11191b;--panel:#1b2526;--line:#35413d;--text:#efe8d8;--muted:#a2ada2;--gold:#e4bb72;--green:#8daf84;--energy:#4fa3ea}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#253431 0,var(--bg) 70%);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px}main{max-width:1232px;margin:auto;padding:26px 34px 16px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.brand{display:flex;gap:14px;align-items:center}.crest{font-size:39px;line-height:1;color:var(--gold);border:1px solid #8c7952;padding:4px 10px}.eyebrow,.control-label{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}h1{font-family:'Barlow Condensed',Impact,sans-serif;letter-spacing:2px;font-size:30px;margin:2px 0 0}button{font:600 14px 'DM Sans',sans-serif;color:var(--text);background:#26322f;border:1px solid #48534b;cursor:pointer;min-height:43px;padding:10px 15px;border-radius:4px;transition:background .15s,transform .15s}button:hover{background:#394a3d}button:active{transform:translateY(1px)}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.header-actions{display:flex;gap:8px;align-items:center}.badge{font-size:12px;letter-spacing:1px;color:var(--muted);margin-right:18px}.game-shell{position:relative;border:1px solid #53604d;box-shadow:0 16px 48px #0004;border-radius:6px;overflow:hidden}.score{display:flex;justify-content:space-between;align-items:center;padding:15px 24px;background:#1c2828}.tower-stat{width:29%;display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.tower-stat>span,.match-clock>span{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600;letter-spacing:1.5px}.tower-stat strong{font-size:15px}.tower-stat small{color:#82928b;font-size:12px}.ally>span{color:#91cbd1}.enemy>span{color:#e6a092}.hp-track{grid-column:1/-1;height:5px;background:#0e1717}.hp-track i{display:block;background:#7bb8c0;width:100%;height:100%;transition:width .2s}.enemy .hp-track i{background:#cc776b}.match-clock{text-align:center}.match-clock>span{display:block;color:var(--muted);font-size:12px}.match-clock strong{font-size:20px;font-variant-numeric:tabular-nums}.arena{position:relative;background:#475938;aspect-ratio:16/9}#game{display:block;width:100%;height:100%;image-rendering:pixelated}.field-caption{position:absolute;bottom:10px;left:16px;font-size:10px;letter-spacing:2px;color:#fff9;text-shadow:1px 1px #000;pointer-events:none}.overlay{position:absolute;inset:0;background:#101b20d9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:24px}.overlay h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:54px;margin:0;color:var(--gold);letter-spacing:2px}.overlay p{margin:0 0 10px}.overlay[hidden],[hidden]{display:none!important}.command-bar{padding:19px 22px;display:flex;gap:24px;align-items:center;background:#202b28}.control-label{display:block;margin-bottom:8px;letter-spacing:1px}.routes{display:flex;gap:6px}.routes button{min-width:101px}.routes button.active{background:#435340;border-color:#a8bc82;color:#eaf2d9}kbd{font:500 11px 'DM Sans',sans-serif;display:inline-block;background:#111a1866;color:#bac8b9;border:1px solid #65736166;border-radius:3px;padding:2px 5px;margin-right:3px}.energy{flex:1;max-width:230px;margin-left:auto}.energy .control-label{display:flex;justify-content:space-between}.energy strong{color:#8cc6f5;font-size:13px;white-space:nowrap}#energyPips{display:flex;gap:4px;height:16px}#energyPips i{background:#394136;flex:1;border-radius:1px}#energyPips i.filled{background:var(--energy);box-shadow:0 0 8px #4fa3ea33}.primary{background:var(--gold);color:#2b2b1c;border-color:#efce94;min-height:49px;padding:12px 20px;font-weight:700}.primary:hover{background:#f3ce88}.primary span{margin-left:16px;padding-left:14px;border-left:1px solid #6e613455}.bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:22px}.unit-card{display:flex;gap:20px;align-items:center}.portrait{width:122px;height:122px;background:#24312a;border:1px solid #485340;border-radius:4px;display:grid;place-items:center;overflow:hidden}.portrait canvas{width:150px;height:116px;image-rendering:pixelated}.unit-info h2{font-family:'Barlow Condensed',sans-serif;font-size:28px;margin:3px 0 4px;letter-spacing:.5px}.unit-info h2 span{font-family:'DM Sans',sans-serif;vertical-align:middle;font-size:10px;letter-spacing:1px;color:#b3c59d;border:1px solid #4c5b40;padding:4px 6px;margin-left:9px}.unit-info p,.instructions p{font-size:14px;line-height:1.6;color:#b7c0b5;margin:0 0 10px}.animation-controls{display:flex;gap:5px}.animation-controls button{font-size:12px;padding:5px 10px;min-height:31px;background:transparent;border-color:#3d4b40;color:#aeb9ab}.animation-controls button.active{color:var(--gold);border-color:#9a8054;background:#b0925312}.instructions{border-left:1px solid var(--line);padding-left:30px;max-width:385px}.instructions>span:last-child{font-size:12px;color:#a1ada1}.instructions b{margin:0 6px}footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #35413d;margin-top:24px;padding-top:13px;font-size:10px;letter-spacing:1px;color:#819087}footer b{margin:0 6px;color:#c5ad7c}#status{letter-spacing:0;font-size:12px}@media(min-width:1500px){main{padding-top:38px}}@media(max-width:850px){main{padding:18px}.badge{display:none}.command-bar{gap:12px;flex-wrap:wrap}.route-control{flex:1}.energy{min-width:130px;max-width:190px}.command-bar>.primary{width:100%}.bottom{align-items:flex-start}.instructions{max-width:260px;padding-left:18px}.routes button{min-width:85px}.unit-info p{max-width:240px}}@media(max-width:590px){main{padding:12px}header{margin-bottom:15px}.crest{display:none}h1{font-size:25px}.eyebrow{font-size:10px}.header-actions button{padding:8px 12px}.header-actions span{display:none}.score{padding:12px}.tower-stat{width:35%;gap:5px}.tower-stat>span{font-size:12px;letter-spacing:.6px}.tower-stat strong{font-size:12px}.tower-stat small{display:none}.match-clock strong{font-size:16px}.command-bar{padding:12px}.routes button{min-width:0;padding:9px;font-size:13px}.routes kbd{display:none}.energy{min-width:95px}.control-label{font-size:10px}.bottom{flex-direction:column;gap:20px}.unit-card{gap:13px}.portrait{width:95px;height:112px}.unit-info h2{font-size:26px}.instructions{border-left:0;padding-left:0;max-width:none}.instructions p br{display:none}.field-caption{font-size:8px}footer{flex-direction:column;margin-top:18px}.overlay h2{font-size:34px}.overlay p{font-size:13px}.overlay{gap:5px}.overlay .primary{min-height:35px;padding:8px 14px}}

.unit-picker{display:flex;gap:8px;align-items:center;padding:12px 22px 0;background:#202b28}.unit-picker .control-label{margin:0 12px 0 0}.unit-picker button.active{background:#435340;border-color:#c6ad77;color:#fff0cb}.unit-picker small{margin-left:12px;color:var(--gold)}.unit-info h2 b{font-weight:700}.unit-info .unit-stats{font-size:12px;color:var(--gold);margin-top:-5px}.portrait{width:150px;min-width:150px}.unit-card{min-width:0}@media(max-width:590px){.unit-picker{padding:12px 12px 0;flex-wrap:wrap}.unit-picker .control-label{width:100%;margin:0}.unit-picker button{flex:1}.unit-card{gap:10px;width:100%}.portrait{width:112px;min-width:112px}.portrait canvas{width:112px;height:auto}.unit-info h2 span{display:table;margin:3px 0 5px;font-size:9px}.unit-info p{font-size:12px}.animation-controls{flex-wrap:wrap}.animation-controls button{padding:6px;min-height:36px}}

/* Troop hand and pointer-based deployment work with mouse, pen and touch. */
.card-hand{background:#1c2926;padding:16px 22px 12px;border-top:1px solid #65734e}.hand-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.hand-heading .control-label{margin:0 0 4px}.hand-heading p{margin:0;color:#d3d9c9;font-size:13px}.hand-heading .energy{min-width:130px;width:200px;flex:none}.troop-cards{display:flex;gap:14px;justify-content:center}.troop-card{position:relative;width:144px;min-height:180px;padding:7px 10px 10px;display:flex;align-items:center;flex-direction:column;background:linear-gradient(160deg,#354a3b,#1b2a28);border:2px solid #647957;border-radius:9px;box-shadow:0 5px 0 #0f1b19,0 9px 15px #0003;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;transition:border-color .15s,box-shadow .15s}.troop-card:hover{background:linear-gradient(160deg,#405742,#243830);border-color:#c2c893}.troop-card.active{border-color:var(--gold);box-shadow:0 5px 0 #735d38,0 0 18px #e4bb7222}.troop-card:active{transform:none;cursor:grabbing}.troop-card canvas{width:88px;height:80px;image-rendering:pixelated;pointer-events:none}.troop-card strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:22px;letter-spacing:.5px}.card-cost{align-self:flex-end;background:#8cc6f5;color:#0f2638;padding:3px 7px;border-radius:12px;font-size:12px;line-height:1.2}.card-role{font-size:9px;color:#bcc9ab;letter-spacing:.7px;margin-top:3px}.card-state{font-size:10px;color:#e7d2a3;margin-top:8px}.troop-card.unavailable{filter:saturate(.4);border-color:#586257}.troop-card.unavailable .card-state{color:#c2b4a5}.troop-card.drag-source{opacity:.45}.tap-help{text-align:center;color:#acb9a6;font-size:11px;margin:14px 0 0}.tap-help span{color:#829780}.lane-targets{position:absolute;inset:0;pointer-events:none}.lane-target{position:absolute;left:17.08333%;width:65.83333%;height:29.62963%;padding:0;min-height:0;background:transparent!important;border:2px solid transparent;border-radius:7px;pointer-events:auto;touch-action:manipulation;transform:none!important;transition:none;opacity:1!important}.lane-target[data-lane="0"]{top:5.55556%}.lane-target[data-lane="1"]{top:35.18519%}.lane-target[data-lane="2"]{top:64.81481%}.lane-target span{opacity:0;position:absolute;left:8px;top:5px;background:#15261deb;padding:4px 8px;color:#ffe1a6;font-size:12px}.lane-target:focus-visible,.lane-target.drop-hover{border-color:#ffe2a2;outline:none;background:#fce1a016!important}.lane-target:focus-visible span,.dragging-card .lane-target span{opacity:1}.dragging-card .lane-target{border-color:#d2d9b54d;border-style:dashed}.dragging-card .lane-target.drop-hover{border-color:#ffe2a2;border-style:solid}.drag-ghost{position:fixed;left:0;top:0;width:110px;z-index:1000;pointer-events:none;display:flex;align-items:center;flex-direction:column;filter:drop-shadow(0 4px 5px #0008);will-change:transform}.drag-ghost canvas{width:88px;height:80px;image-rendering:pixelated}.drag-ghost span{padding:5px 8px;background:#26392feb;border:1px solid #b1bd99;border-radius:4px;color:#f4ead1;font-size:11px;white-space:nowrap}.drag-ghost.valid span{background:#e4bb72;color:#19261e;border-color:#fff1c8}.dragging-card,.dragging-card *{cursor:grabbing!important}
@media(max-width:590px){.card-hand{padding:12px}.hand-heading{gap:10px;margin-bottom:10px}.hand-heading p{font-size:11px;max-width:190px}.hand-heading .energy{width:105px;min-width:90px}.troop-cards{gap:12px}.troop-card{width:130px;min-height:156px;padding:6px 8px 8px}.troop-card canvas{width:77px;height:70px}.troop-card strong{font-size:20px}.card-state{margin-top:6px}.tap-help{font-size:10px;line-height:1.5}.tap-help span{display:block}.lane-target span{font-size:10px;padding:2px 5px;top:0;left:4px}}

.card-skill{font-size:10px;color:#a4dbeb;margin-top:5px}.unit-info .unit-skill{font-size:12px;line-height:1.5;color:#b6d9df;max-width:320px;margin:8px 0}.unit-skill strong{color:#d4edf0}.animation-controls{flex-wrap:wrap}

.ability-card{background:linear-gradient(160deg,#304a55,#192931);border-color:#6b9fab}.ability-card strong{font-size:19px}.ability-card .card-role{color:#a4dbeb}
@media(max-width:590px){.troop-cards{gap:7px}.troop-card{width:calc((100% - 14px)/3);min-width:0;padding:6px 4px 8px}.troop-card strong{font-size:18px;line-height:1.1}.troop-card canvas{width:66px;height:60px}.card-role{font-size:8px;letter-spacing:0}.card-state,.card-skill{font-size:9px}.ability-card strong{font-size:16px}}

@media(max-width:590px){.troop-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.troop-card{width:100%;min-height:145px;padding:5px 3px 7px}.troop-card canvas{width:54px;height:49px}.troop-card strong{font-size:16px;letter-spacing:0}.ability-card strong{font-size:14px}.card-state{font-size:8px}.card-skill{font-size:8px}.card-role{font-size:7px}}

/* Menu principal e de pausa: cobre o campo e os cards; o resto da página fica inert enquanto aberto. */
.menu{z-index:20;justify-content:safe center;overflow:auto;background:radial-gradient(ellipse at 50% 35%,#1a2c2ee0,#0a1214f5);backdrop-filter:blur(3px)}.menu-panel{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:460px}.menu-crest{font-size:48px;line-height:1;color:var(--gold);border:1px solid #8c7952;padding:6px 14px;margin-bottom:6px}.menu p{color:#c9d2c4}.menu-actions{display:flex;flex-direction:column;gap:10px;width:min(280px,100%);margin-top:6px}.menu-actions button{width:100%}.howto{list-style:none;padding:0;margin:4px 0 12px;text-align:left;display:grid;gap:9px;font-size:14px;line-height:1.5;color:#c9d2c4}.howto b{color:var(--text)}.howto .cost{display:inline-block;min-width:36px;text-align:center;background:#8cc6f5;color:#0f2638;border-radius:10px;padding:0 6px;font-size:12px;margin-right:8px}.howto-keys{color:#a1ada1;font-size:12px}#resultMenu{min-height:38px}@media(max-width:590px){.menu-crest{font-size:34px;padding:4px 10px}.howto{font-size:12px;gap:6px}.menu-actions{gap:7px}.menu-actions button{min-height:40px;padding:8px 12px}}
@media(pointer:coarse){.howto-keys{display:none}}