@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#08111e;color:#eef6ff;font-family:'DM Sans',sans-serif;display:grid;place-items:center;min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}#game{width:100%;max-width:480px;height:100dvh;min-height:600px;max-height:1000px;position:relative;overflow:hidden;background:#12253a;box-shadow:0 0 100px #0008}canvas{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:22px 24px}.brand{font-family:'Barlow Condensed',Impact,sans-serif;font-size:22px;line-height:.86;font-weight:900;letter-spacing:1px;color:#fff;text-decoration:none;margin-right:auto}.brand span{display:block;color:#ffda69}.icon{border:1px solid #ffffff20;border-radius:50%;width:34px;height:34px;background:#0d1c3280;color:#fff}.hud{position:absolute;top:83px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between}.team{text-align:center;width:80px}.team small{font-size:11px;font-weight:800;letter-spacing:1.5px}.team strong{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:42px;line-height:1.1}.team span{font-size:7px;letter-spacing:1px;color:#a8b8ca}.blue small{color:#6fcaff}.coral small{color:#ff987d}.round{text-align:center}.round small{font-size:8px;letter-spacing:2px;color:#9fb0c5}.round b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:23px;letter-spacing:1px;margin:5px}#roundDots{color:#ffda69;font-size:9px;letter-spacing:6px}#turnLabel{position:absolute;top:181px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:2px;background:#162b43dd;padding:9px 17px;border:1px solid #ffffff18;border-radius:20px;white-space:nowrap}#progress{position:absolute;right:23px;top:240px;bottom:230px;width:4px;background:#ffffff15;border-radius:10px}#progress i{display:block;width:100%;background:#ffda69;border-radius:10px;height:0;transition:height .2s}#toast{position:absolute;top:235px;width:100%;text-align:center;font-weight:800;color:#ffe79d;opacity:0;transition:opacity .2s;pointer-events:none;text-shadow:0 2px 10px #000}.bottom{position:absolute;bottom:0;left:0;right:0;padding:25px 24px 18px;background:linear-gradient(transparent,#0c192deb 25%)}.armyTitle{display:flex;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:1.5px;margin-bottom:12px}#power{color:#ffdb70}#cards{display:flex;gap:8px}.card{flex:1;background:#182c42;border:1px solid #ffffff1b;border-radius:12px;padding:10px 5px;text-align:center;position:relative;transition:transform .2s}.card .symbol{font-size:24px;display:block;height:32px}.card b{display:block;font-size:9px;letter-spacing:1px;margin:5px 0}.card small{font-size:10px;color:#9caec4}.card .count{position:absolute;top:-7px;right:5px;border-radius:8px;padding:2px 5px;background:#ffdb70;color:#12212a;font-size:11px;font-weight:900}.card.empty{opacity:.4}#hint{text-align:center;font-size:8px;letter-spacing:1.5px;color:#9bacbf;margin:17px 0 0}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#07132390;backdrop-filter:blur(7px);padding:25px}.panel{width:100%;text-align:center;padding:28px 22px;background:linear-gradient(145deg,#223b52,#102338);border:1px solid #ffffff20;border-radius:26px;box-shadow:0 25px 60px #0005}.eyebrow{color:#ffdb70;font-size:10px;letter-spacing:3px;font-weight:800}.panel h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:66px;line-height:.9;margin:15px 0;color:#fff;letter-spacing:1px}.panel h1 em{font-style:normal;color:#ffdb70}.panel h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:38px;margin:12px 0}.panel p{font-size:12px;color:#b2c3d5;line-height:1.7}.steps{display:flex;gap:8px;margin:24px 0}.steps div{flex:1;background:#ffffff05;padding:12px 3px;border-radius:10px;font-size:9px;color:#b9c9dc}.steps b{display:block;font-size:21px;color:#fff;margin-bottom:6px}.primary{width:100%;padding:16px;border:0;background:#ffdb70;color:#142a25;border-radius:12px;font-size:12px;font-weight:900;letter-spacing:1px;box-shadow:0 4px 0 #b58d38;margin-top:12px}.secondary{width:100%;padding:12px;background:transparent;border:1px solid #ffffff25;color:#d4e2f3;border-radius:12px;margin-top:12px;font-size:11px}.mode{display:flex;padding:4px;background:#071827;border-radius:10px;margin:20px 0}.mode button{width:50%;border:0;background:transparent;color:#9bb0c6;border-radius:7px;padding:11px 3px;font-size:11px}.mode .selected{background:#2c4660;color:#fff}.legend{font-size:10px!important}.results{display:flex;justify-content:center;gap:28px;margin:20px;font-size:40px;font-weight:900}.results span:first-child{color:#71c8ff}.results span:last-child{color:#ff967e}@media(min-width:600px){#game{height:94dvh;border-radius:28px;border:1px solid #ffffff20}}@media(max-height:700px){.hud{top:68px}header{padding-top:15px}#turnLabel{top:159px}.bottom{padding-bottom:12px}.panel{padding:20px}.panel h1{font-size:55px}.steps{margin:15px 0}}
/* Compact gameplay HUD: keep the tower unobstructed. */
header{top:70px;padding:0 16px;justify-content:flex-end;gap:6px;pointer-events:none}
header button{pointer-events:auto}
.icon{width:30px;height:30px;border:0;background:#0d1c3266;font-size:12px}
.hud{top:22px;left:22px;right:22px;justify-content:center;gap:24px;pointer-events:none}
.team{display:flex;align-items:center;gap:8px;width:auto}
.team small{font-size:9px;letter-spacing:1px}
.team strong{font-family:'DM Sans',sans-serif;font-size:18px;line-height:1}
.round b{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:1px;margin:0;color:#b1c1d0}
#roundDots,.armyTitle,#progress,#hint{display:none}
#turnLabel{top:72px;background:transparent;border:0;padding:5px;font-size:9px;letter-spacing:1px}
#toast{top:118px;font-size:12px}
.bottom{padding:12px 24px 22px;background:linear-gradient(transparent,#0c192d88);pointer-events:none}
#cards{justify-content:center;gap:8px}
.card{flex:0 1 68px;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border-radius:10px;background:#102338bb;border:1px solid #ffffff10}
.card .symbol{font-size:19px;height:auto}
.card .count{position:static;background:transparent;color:#eef6ff;font-size:14px;padding:0;order:2}
.card b,.card small{display:none}
.card.empty{opacity:.25}

#health{position:absolute;top:72px;left:22px;color:#ff8b7a;font-size:17px;letter-spacing:3px;pointer-events:none}

.battling #health,.battling .bottom{display:none}

.army-caption{text-align:center;font-size:8px;letter-spacing:1.3px;color:#b4c6d6;margin:0 0 9px}
.card{display:grid;grid-template-columns:auto auto;gap:2px 6px;flex:1;max-width:84px}
.card b{display:block;grid-column:1 / -1;grid-row:2;font-size:8px;letter-spacing:.6px;margin:4px 0 0;color:#c7d6e4}
.card .count{order:unset}.card .symbol{font-size:17px}.card.empty{opacity:.5}

/* Compact mobile HUD, with all controls and counts above the play area. */
@media(max-width:600px){
 .hud{top:max(12px,env(safe-area-inset-top));left:16px;right:16px;gap:18px}
 .team small{font-size:8px}.team strong{font-size:15px}.round b{font-size:10px}
 header{top:43px;right:12px;padding:0;left:auto}.icon{width:26px;height:26px;font-size:11px}
 #health{top:47px;left:16px;font-size:13px;letter-spacing:2px}
 #turnLabel{top:46px;font-size:8px;padding:3px}
 .bottom{top:78px;bottom:auto;left:0;right:0;padding:0 16px;background:transparent}
 .army-caption{display:none}#cards{gap:6px}
 .card{max-width:64px;border-radius:7px;padding:5px 6px;gap:0 4px;background:#102338aa}
 .card .count{font-size:11px}.card .symbol{font-size:12px}.card b{font-size:6px;letter-spacing:.3px;margin:3px 0 0}
 #toast{top:134px;font-size:10px}
}

/* Top HUD at every viewport size. */
header{display:none}
.hud{top:max(12px,env(safe-area-inset-top));left:16px;right:16px;gap:18px}
.team small{font-size:8px}.team strong{font-size:15px}.round b{font-size:10px}
#health{top:45px;left:18px;font-size:13px;letter-spacing:2px}
#turnLabel{top:45px;font-size:8px;padding:3px}
.bottom{top:76px;bottom:auto;left:0;right:0;padding:0 16px;background:transparent}
.army-caption{display:none}#cards{gap:6px}
.card{max-width:64px;border-radius:7px;padding:5px 6px;gap:0 4px;background:#102338aa}
.card .count{font-size:11px}.card .symbol{font-size:12px}.card b{font-size:6px;letter-spacing:.3px;margin:3px 0 0}
#toast{top:130px;font-size:10px}

#turnLabel{display:none}

#health{top:max(12px,env(safe-area-inset-top));left:18px;font-size:12px}#toast{display:none}