:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#f5f4eb;background:#101b2c}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}.hidden{display:none!important}.login-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 30%,#344f52,#15253a 48%,#101720)}.login-card{width:min(420px,100%);border:1px solid #7c6b3d;background:#152238ee;border-radius:20px;padding:30px;box-shadow:0 25px 100px #0008;text-align:center}.crest{font-size:64px;color:#eaca70;text-shadow:0 5px #403121}.login-card h1{margin:0;font-family:Georgia,serif;letter-spacing:.16em;font-size:40px;color:#ffe4a2}.login-card p{line-height:1.5;color:#bac5c9}.login-card label{display:block;text-align:left;color:#e0d9c8;margin:15px 0;font-size:13px}.login-card input{width:100%;margin-top:7px;border:1px solid #516177;background:#0f1b2e;border-radius:8px;padding:13px;color:white;outline:none}.login-card input:focus{border-color:#d7b564}.auth-buttons{display:grid;gap:10px;margin:25px 0}.primary,.secondary{border:1px solid #aa854a;background:linear-gradient(#eec879,#b78845);border-radius:9px;padding:12px;font-weight:800;color:#201a13}.secondary{background:#1b3046;color:#ffe4a2}.login-card small{color:#80919b}.error{color:#ff9f9f;min-height:20px}.game{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.topbar{z-index:4;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 16px;min-height:62px;background:#142036;border-bottom:2px solid #a68346}.brand{display:flex;gap:7px;align-items:center;color:#e8c879;font-size:23px;font-family:Georgia,serif;font-weight:900;white-space:nowrap}.brand small{font:10px system-ui;color:#91a9ba;border:1px solid #547087;border-radius:3px;padding:3px}.resources{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.resources>div{background:#0b1525;border:1px solid #384455;border-radius:8px;padding:7px 12px;white-space:nowrap}.resources strong{color:#f4e2a8}#logout{background:none;color:#b8c4cf;border:1px solid #465870;border-radius:7px;padding:9px}.field{position:relative;flex:1;min-height:0;overflow:hidden;background:#203c35}#map{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#map:active{cursor:grabbing}.hud-top{position:absolute;left:16px;right:16px;top:16px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.hud-top>div{display:grid;background:#132237c9;border:1px solid #55725e;border-radius:9px;padding:10px 13px;max-width:380px}.hud-top span,.navhint{font-size:12px;color:#d4e0d8}.navhint{text-align:right;align-content:center}.bottom-ui{position:absolute;bottom:12px;left:12px;max-width:min(680px,calc(100% - 24px));width:680px}.tabbar{display:flex;gap:3px}.tabbar button{flex:1;border:1px solid #67716d;border-radius:7px 7px 0 0;background:#19293de9;color:#d4dcd7;padding:11px 5px;font-weight:700;font-size:13px}.tabbar button.active{color:#ffe2a0;background:#334537;border-bottom-color:#334537}.panel{padding:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#17273deb;border:1px solid #758065;border-radius:0 8px 8px 8px;backdrop-filter:blur(8px);min-height:82px;max-height:210px;overflow:auto}.item{display:flex;flex-direction:column;gap:3px;align-items:start;justify-content:center;background:#293c43;color:#f3e6c5;border:1px solid #6c7364;border-radius:8px;padding:9px 12px;min-width:135px;text-align:left}.item:hover,.item.active{background:#446044;border-color:#e1c27e}.item small{font-size:11px;color:#c8cfc9}.panel-note{font-size:13px;line-height:1.5;color:#e2e8e0}.panel strong{color:#fff0bd}.zoom{position:absolute;right:14px;bottom:138px;display:grid;gap:5px}.zoom button{width:39px;height:39px;border:1px solid #a7a98a;border-radius:8px;background:#1a2c3ddb;color:#f3e5be;font-size:24px}.toast{position:absolute;top:90px;left:50%;transform:translateX(-50%);background:#172b3bef;color:#fff1bd;border:1px solid #ab9a61;border-radius:10px;padding:12px 20px;z-index:5;text-align:center;max-width:90%}@media(max-width:740px){.topbar{align-items:center;flex-wrap:wrap;justify-content:center;padding:5px 8px;gap:5px}.brand{font-size:16px}.brand small{display:none}.resources{gap:3px;order:3;width:100%}.resources>div{flex:1;text-align:center;font-size:12px;padding:5px 6px}.topbar #logout{margin-left:auto;font-size:12px;padding:4px 8px}.hud-top{left:7px;top:7px}.hud-top>div{padding:7px 9px}.hud-top span{font-size:11px}.navhint{display:none}.bottom-ui{bottom:5px;left:5px;max-width:calc(100% - 10px);width:100%}.tabbar button{font-size:11px;padding:9px 3px}.panel{min-height:87px;padding:7px;gap:5px;max-height:145px}.item{min-width:calc(50% - 3px);padding:8px;font-size:12px}.item small{font-size:10px}.zoom{right:8px;bottom:185px}.zoom button{width:33px;height:33px;font-size:20px}}

.formations{display:flex;align-items:center;gap:5px;flex-wrap:wrap;width:100%;font-size:12px}.formations button{background:#223d40;color:#e9e8d0;border:1px solid #70817c;border-radius:7px;padding:7px 9px}.formations button.active{background:#81662f;color:white;border-color:#f1d48a}

#wave-status{color:#ffd58a;font-weight:750;margin-bottom:3px}.item:disabled{opacity:.5;cursor:not-allowed}
/* Alfa 0.4: controles de desarrollo del reino */
.building-detail{width:100%;display:flex;flex-direction:column;gap:7px;padding:12px;border:1px solid #76938265;border-radius:12px;background:#172e2b;color:#fff}
.building-detail small{opacity:.82;font-size:12px}
.building-actions{display:flex;flex-wrap:wrap;gap:8px}
.building-actions button{flex:1;min-width:96px;padding:9px 11px;border-radius:9px;border:1px solid #729e85;background:#274b3d;color:#f2ffe7;cursor:pointer}
.building-actions button:disabled{opacity:.45;cursor:not-allowed}

/* Alfa 0.5 — panel contextual independiente */
#toggle-ui{background:#263f42;color:#f5e1a3;border:1px solid #847850;border-radius:8px;padding:9px;white-space:nowrap}
.building-popup{position:absolute;right:14px;top:90px;z-index:3;width:min(330px,calc(100% - 28px));max-height:calc(100% - 240px);overflow:auto;box-shadow:0 9px 35px #0007}
.ui-hidden .bottom-ui,.ui-hidden .building-popup,.ui-hidden .hud-top,.ui-hidden .zoom{display:none!important}
.ui-hidden .resources{display:none!important}
@media(max-width:740px){#toggle-ui{font-size:11px;padding:5px}.building-popup{right:6px;top:70px;max-height:calc(100% - 235px);width:min(260px,67%)}.building-detail{padding:8px}.building-actions button{font-size:11px;min-width:70px}.topbar{flex-wrap:wrap}}