@import url('./vendor/fonts.css');:root{font-family:Inter,Arial,sans-serif;color:#e8eadc;background:#142322}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid #a4e2d6}#scene{position:fixed;inset:0}canvas{display:block;touch-action:none}#loading{position:fixed;inset:0;display:grid;place-items:center;background:#12201f;z-index:9;color:#bcd6c4;font:20px Cinzel,serif}header{position:fixed;top:0;left:0;right:0;padding:20px 30px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#081617ef,#091b1bc9,transparent);pointer-events:none}.brand{display:flex;align-items:center;gap:10px}.brand>span{font-size:38px;color:#94dacc}.brand strong{font:23px Cinzel,Georgia,serif;letter-spacing:3px}.brand small,.round small{display:block;font-size:8px;letter-spacing:2.5px;color:#bca576;margin-top:4px}.round{text-align:center;position:absolute;left:50%;transform:translateX(-50%)}.round strong{display:block;font:20px Cinzel,serif;margin-top:4px}.round b{font-weight:500}.resources{display:flex;gap:25px}.resources span{color:#cfb57d;font-size:22px}.resources b{font-size:18px;color:#f0eee0;font-weight:500}.resources small{display:block;font-size:8px;letter-spacing:1px;color:#95a99c;text-align:right}.score,.attack,#selection{position:fixed;top:115px;padding:20px;background:linear-gradient(145deg,#142b2ce9,#0c1c20e8);border:1px solid #bbab7950;border-radius:4px;box-shadow:0 10px 30px #0003;backdrop-filter:blur(8px)}.score{left:25px;width:230px}.eyebrow{color:#c7b380;font-size:9px;letter-spacing:2px;font-weight:600}.score h1,.attack h2,#selection h2{font:20px Cinzel,Georgia,serif;margin:10px 0}.score p,#selection p{color:#aebfb3;font-size:10px;line-height:1.7}.player{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;margin-top:10px;padding:7px 0;border-bottom:1px solid #afc0aa22;font-size:11px}.dot{width:8px;height:8px;border-radius:50%;background:var(--color);box-shadow:0 0 8px var(--color)}.player small{font-size:9px;color:#a3b7aa}.player b{font-size:11px;font-weight:500}.out{opacity:.4}#status{font-size:10px;color:#d6c89e;margin-top:15px;line-height:1.5}.note{font-size:9px;color:#99ab9e;margin-top:15px;line-height:1.4}.attack{right:25px;width:235px}.attack label{font-size:9px;color:#aab9ad;display:block;margin:14px 0 6px}.attack select{width:100%;background:#122626;border:1px solid #94aa8260;padding:9px;outline:none}.attack button{display:flex;width:100%;align-items:center;gap:10px;margin-top:8px;padding:10px;background:#1c3331;border:1px solid #a4b29145;text-align:left}.attack button:hover,.card:hover{background:#355149}.attack button>span{font-size:21px;color:#d1aa70}.attack button div{flex:1}.attack button strong{display:block;font-size:11px}.attack button small{display:block;color:#a3b3a7;font-size:9px;margin-top:5px}.attack button b{color:#d3bb80;font-size:10px;white-space:nowrap}#queued{font-size:9px;color:#b2c4b4;line-height:1.5;margin-top:12px}footer{position:fixed;bottom:39px;left:25px;right:25px;display:flex;align-items:flex-end;gap:12px}.cards{background:#102223ed;border:1px solid #b8ab7650;border-radius:4px;padding:12px;box-shadow:0 10px 30px #0003;min-width:0}.cards-head{display:flex;justify-content:space-between;align-items:center;margin:0 5px 8px}.cards-head strong{display:block;font-size:10px;font-weight:400;color:#a4b7a9;margin-top:5px}.hint{font-size:9px;color:#9db2a2}#towers{display:flex;gap:5px}.card{width:124px;min-height:64px;background:#172d2d;border:1px solid #96a8863e;text-align:left;padding:8px;position:relative}.card.active{border-color:#8bd5c3;background:#26463f}.card strong{display:block;font-size:10px;font-weight:600;margin:0 0 4px}.card small{font-size:8px;color:#9fb2a3;display:block}.card .cardicon{font-size:18px;color:var(--accent);float:left;margin-right:8px}.card b{font-size:9px;color:#d3bb80;position:absolute;right:6px;bottom:5px}.actions{display:flex;gap:6px;margin-left:auto}.actions button{height:55px;border:1px solid #b8ab7650;background:#132526eF;padding:0 16px}.actions #start{background:#69583b;border-color:#c9b480;letter-spacing:1px;font-size:11px;white-space:nowrap}.actions #start span{margin-right:9px;color:#e6d99f}button:disabled{opacity:.45;cursor:default}.bottom{position:fixed;bottom:12px;left:30px;right:30px;display:flex;justify-content:space-between;color:#abb9a7;font-size:8px;letter-spacing:.5px}#selection{right:25px;top:390px;width:235px;z-index:2}#selection #close{position:absolute;top:8px;right:8px;border:0;background:transparent;font-size:20px}#selection button:not(#close){width:100%;padding:10px;margin-top:6px;background:#34493a;border:1px solid #b4a47477;font-size:11px}#selectedStats{font-size:10px;color:#e0cca0;margin:14px 0}#message{position:fixed;left:50%;bottom:165px;transform:translateX(-50%);padding:10px 16px;background:#102323ed;border:1px solid #b8ab7650;font-size:11px;opacity:0;pointer-events:none;transition:opacity .3s}#message.visible{opacity:1}#result{position:fixed;inset:0;z-index:10;background:#0b191bdb;place-items:center;text-align:center}#result:not([hidden]){display:grid}#result small{color:#c7b380;letter-spacing:3px}#result h2{font:32px Cinzel,serif}#result p{color:#b3c6b4}#result button{padding:13px 35px;background:#69583b;border:1px solid #c9b480}@media(max-width:1100px){.score{width:185px}.attack{width:195px}.card{width:100px}.card strong{font-size:9px}.card small{font-size:7px}.cards{padding:8px}.cards-head strong{font-size:9px}}@media(max-width:760px){header{padding:12px}.brand strong{font-size:15px}.brand>span{font-size:27px}.brand small,.round small{font-size:6px}.round strong{font-size:14px}.resources{gap:8px}.resources span{font-size:15px}.resources b{font-size:14px}.resources small{font-size:6px}.score{top:75px;left:10px;width:155px;padding:10px}.score h1{font-size:15px}.score p{display:none}.player{font-size:9px;margin-top:2px;padding:5px 0}.note{font-size:8px}.attack{top:75px;right:10px;width:155px;padding:10px}.attack h2{font-size:14px}.attack label{margin:7px 0 3px}.attack button{padding:6px;gap:5px}.attack button strong{font-size:9px}.attack button small{font-size:8px}.attack button b{font-size:9px}.attack button>span{font-size:15px}#queued{font-size:8px}footer{left:10px;right:10px;bottom:26px;flex-wrap:wrap}.cards{width:100%}.cards-head{margin-bottom:4px}.cards-head strong,.hint{display:none}#towers{overflow-x:auto}.card{flex:0 0 93px;min-height:49px}.card .cardicon{font-size:14px}.actions{margin-left:auto}.actions button{height:36px}.bottom{font-size:7px;left:12px;bottom:7px}.bottom span:first-child{display:none}#selection{top:285px;right:10px;width:155px;padding:10px}#selection h2{font-size:14px}#message{bottom:150px;white-space:nowrap}}

.lobby-link{display:inline-block;margin-top:9px;color:#b5dbca;text-decoration:none}.lobby-link:hover{text-decoration:underline}

#wavePreview{font-size:9px;line-height:1.6;color:#aabdae;margin-top:10px;padding-top:9px;border-top:1px solid #afc0aa22}

#incoming{font-size:9px;line-height:1.55;color:#e2bd88;margin-top:6px}.player .disconnected{color:#e6ad92}

/* Compact touch layout: keep the battlefield clear and open one drawer at a time. */
#mobileTools{display:none}
@media (max-width:760px), (max-height:650px){
 header{z-index:3;height:48px;padding:5px max(10px,env(safe-area-inset-right)) 5px max(10px,env(safe-area-inset-left));align-items:center}
 .brand{gap:5px}.brand>span{font-size:22px}.brand strong{font-size:13px;letter-spacing:1.5px}.brand small,.round small,.resources small{display:none}
 .round strong{font-size:14px;margin:0}.resources{gap:10px}.resources span,.resources b{font-size:14px}
 #mobileTools{position:fixed;z-index:4;top:50px;left:max(8px,env(safe-area-inset-left));display:flex;gap:6px}
 #mobileTools button{min-height:38px;padding:0 11px;border:1px solid #a4b29177;border-radius:4px;background:#102728ed;font-size:12px}
 #mobileTools button[aria-expanded=true]{background:#355b4e;border-color:#9bdccc}
 .score,.attack{display:none;position:fixed;z-index:4;top:94px;left:max(8px,env(safe-area-inset-left));right:auto;width:min(255px,calc(100vw - 16px));max-height:calc(100dvh - 230px);overflow-y:auto;overscroll-behavior:contain;padding:12px;background:#102728f5}
 .score.mobile-open,.attack.mobile-open{display:block}.score h1,.attack h2{font-size:16px;margin:6px 0}.score p{display:block;font-size:10px}.player{font-size:11px;padding:6px 0;margin-top:2px}
 .attack label{font-size:11px}.attack select{min-height:40px;font-size:14px}.attack button{min-height:42px;padding:7px}.attack button strong{font-size:11px}.attack button small{font-size:10px}
 footer{z-index:3;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;gap:5px}
 .cards{width:100%;padding:5px 7px;background:#102223ed}.cards-head{margin:0 2px 4px}.cards-head .eyebrow{font-size:8px}.cards-head strong,.hint{display:none}
 #towers{overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;gap:5px;padding-bottom:2px}
 .card{flex:0 0 99px;width:99px;min-height:46px;padding:6px 5px}.card strong{font-size:10px;margin:0 0 3px}.card small{display:none}.card .cardicon{font-size:16px;margin-right:5px}.card b{font-size:10px;bottom:4px}
 .actions{margin:0;gap:5px;justify-content:flex-end}.actions button{height:42px;min-width:42px;padding:0 12px}.actions #start{font-size:11px;min-width:145px}
 .bottom{display:none}#message{z-index:6;bottom:150px;max-width:calc(100vw - 20px);white-space:normal;text-align:center}
 #selection{position:fixed;z-index:5;top:50px;right:max(8px,env(safe-area-inset-right));left:auto;width:min(250px,calc(100vw - 16px));max-height:calc(100dvh - 190px);overflow-y:auto;padding:12px;background:#102728f9}
 #selection h2{font-size:16px;margin:8px 25px 8px 0}#selection p{font-size:10px;line-height:1.4}#selection button:not(#close){min-height:38px;padding:7px}#selectedStats{margin:8px 0}
}
@media (max-height:420px){
 #mobileTools{top:46px}.score,.attack{top:88px;max-height:calc(100dvh - 205px)}
 .cards-head{display:none}.card{min-height:42px}footer{gap:3px}.actions button{height:38px}#selection{top:46px;max-height:calc(100dvh - 165px)}
}

/* Icon-only actions keep the map visible; descriptions open on a long press. */
.game-icon{display:block;width:35px;height:35px;pointer-events:none}
.card{width:64px;min-height:62px;padding:3px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;touch-action:pan-x;-webkit-touch-callout:none;user-select:none}
.card b{position:static;line-height:1;font-size:10px}
.attack-options{display:flex;gap:6px;margin-top:8px}
.attack .attack-options button{flex:1;min-width:0;margin:0;padding:4px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;touch-action:manipulation;-webkit-touch-callout:none;user-select:none}
.attack .attack-options b{font-size:10px}.attack .attack-options .game-icon{width:38px;height:38px}
#iconTip{position:fixed;z-index:12;width:220px;max-width:calc(100vw - 16px);padding:12px;background:#102728f8;border:1px solid #c7b380;border-radius:5px;box-shadow:0 6px 24px #0008;pointer-events:none;font-size:12px;line-height:1.4}
#iconTip[hidden]{display:none}#iconTip strong{color:#e7eadb;font-size:13px}#iconTip p{margin:6px 0;color:#bed0c1}#iconTip small{color:#e0c181;font-size:11px}
@media (max-width:760px), (max-height:650px){
 .cards{width:max-content;max-width:100%;padding:4px}.cards-head{display:none}#towers{gap:4px;padding-bottom:0}
 .card{flex:0 0 48px;width:48px;min-height:50px;padding:2px;gap:1px}.card .game-icon{width:32px;height:32px}.card b{position:static;font-size:9px}
 .attack .attack-options button{min-height:54px;padding:3px}.attack .attack-options .game-icon{width:32px;height:32px}
}
.touch-hint{display:none;color:#b2c4b4;font-size:9px;line-height:1.3;margin:3px}
@media (max-width:760px), (max-height:650px){.touch-hint{display:block}}

/* Touch HUD: towers at lower left, attacks at lower right, match controls above. */
@media (max-width:760px), (max-height:650px){
 #showAttack{display:none}
 footer{left:max(6px,env(safe-area-inset-left));right:auto;bottom:max(6px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 185px);display:block}
 .cards{max-width:100%;width:max-content}.cards .touch-hint{display:none}
 .actions{position:fixed;top:50px;right:max(8px,env(safe-area-inset-right));bottom:auto;margin:0;display:flex;gap:4px}
 .actions button{height:40px;min-width:40px;padding:0 9px}.actions #start{min-width:125px;font-size:10px}
 .attack,.attack.mobile-open{display:block;position:fixed;z-index:4;left:auto;right:max(6px,env(safe-area-inset-right));top:auto;bottom:max(6px,env(safe-area-inset-bottom));width:172px;max-height:none;overflow:visible;padding:4px;background:#102728ed}
 .attack .eyebrow,.attack h2,.attack label,.attack .touch-hint,.attack #queued{display:none}
 .attack select{height:30px;min-height:30px;margin:0;padding:3px 6px;font-size:11px}
 .attack-options{margin-top:4px;gap:4px}.attack .attack-options button{min-height:48px;padding:2px;gap:0}.attack .attack-options .game-icon{width:30px;height:30px}.attack .attack-options b{font-size:9px}
 #selection{top:98px;max-height:calc(100dvh - 200px)}
 #message{bottom:110px}
}
@media (max-width:520px) and (orientation:portrait){
 /* Keep finger-sized targets on narrow screens by stacking the docks. */
 footer{max-width:calc(100vw - 12px)}
 .attack,.attack.mobile-open{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 64px)}
 .actions{top:49px}.actions #start{min-width:116px}
}
/* Painted sprites share a single atlas per category to keep mobile downloads small. */
.art-icon{display:block;flex:none;width:42px;height:42px;pointer-events:none;border-radius:2px;background-repeat:no-repeat;background-color:#10231e}
.tower-icon{background-image:url('./assets/ui/towers.webp');background-size:300% 200%}
.tower-icon.arcane{background-position:0 0}.tower-icon.cannon{background-position:50% 0}.tower-icon.frost{background-position:100% 0}
.tower-icon.archer{background-position:0 100%}.tower-icon.poison{background-position:50% 100%}.tower-icon.sniper{background-position:100% 100%}
.creature-icon{background-image:url('./assets/ui/creatures.webp');background-size:300% 100%}
.creature-icon.swarm{background-position:0 0}.creature-icon.armored{background-position:50% 0}.creature-icon.wraith{background-position:100% 0}
@media (max-width:760px), (max-height:650px){.card .art-icon,.attack .attack-options .art-icon{width:32px;height:32px}}