:root{
  --bg:#0c1014; --panel:#141c24; --line:#26323d;
  --ink:#cfe0ee; --dim:#7c8a99; --amber:#d8b13a; --green:#7fe0a0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow:hidden;user-select:none}
.screen{display:none;height:100vh}
.screen.show{display:block}
#app.show{display:grid}

/* ---------- AUTH / LOBBY ---------- */
#auth, #lobby{display:none;align-items:center;justify-content:center;background:radial-gradient(900px 600px at 30% 20%,#16202b,#0c1014)}
#auth.show, #lobby.show{display:flex}
.lobby-card{width:min(460px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px 26px}
.lobby-card h1{letter-spacing:1px;font-size:30px}
.lobby-card h1 b{color:var(--amber)}
.sub{color:var(--dim);font-size:13px;margin:4px 0 18px}
.lobby-card input{width:100%;padding:11px 13px;background:#0e151b;border:1px solid var(--line);border-radius:7px;color:var(--ink);font-size:14px;margin-bottom:10px}
.lobby-card input:focus{outline:none;border-color:var(--amber)}
#code{text-transform:uppercase;letter-spacing:3px;text-align:center}
.row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.row input{margin-bottom:0}
.or{color:var(--dim);font-size:12px}
button{padding:11px 16px;border:1px solid var(--line);border-radius:7px;background:#1a232c;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s}
button:hover{border-color:var(--amber)}
button.primary{background:var(--amber);color:#0c1014;border-color:var(--amber)}
button.primary:hover{filter:brightness(1.08)}
.err{color:#ff6b6b;font-size:13px;min-height:18px;margin-top:4px}
.room.hidden,.host-only.hidden{display:none}
.room{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.room-code{font-size:14px;margin-bottom:10px}
.room-code b{color:var(--amber);letter-spacing:2px;font-size:18px}
.link{font-size:11px;color:var(--dim);cursor:pointer;margin-left:6px;text-decoration:underline}
.link:hover{color:var(--amber)}
#players{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
#players li{display:flex;align-items:center;gap:9px;font-size:14px;padding:7px 10px;background:#0e151b;border-radius:6px}
#players .dot{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
#players .tag{margin-left:auto;font-size:11px;color:var(--dim)}
.wait{font-size:12px;color:var(--dim);margin-top:10px}

/* ---------- HUD JUEGO ---------- */
#app{grid-template-columns:1fr 224px;grid-template-rows:48px 1fr}
#topbar{grid-column:1/3;display:flex;align-items:center;gap:22px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.logo{font-weight:700;letter-spacing:1px}
.logo b{color:var(--amber)}
.stat{display:flex;flex-direction:column;line-height:1.1}
.stat label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.stat span{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
#msg{color:var(--amber);font-size:13px;font-weight:600;min-height:16px}
.hint{margin-left:auto;font-size:11px;color:var(--dim)}
#stage{position:relative;overflow:hidden}
#game{width:100%;height:100%;display:block;cursor:crosshair;background:#11161c}
#sidebar{background:var(--panel);border-left:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:6px;overflow:auto}
#sidebar h2{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--dim)}
#build-list{display:flex;flex-direction:column;gap:6px}
.build-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:#1a232c;color:var(--ink);cursor:pointer;font-size:13px}
.build-btn:hover{border-color:var(--amber)}
.build-btn .bn{font-weight:600}
.build-btn .bc{color:var(--amber);font-size:12px;font-variant-numeric:tabular-nums}
.build-btn .bp{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--green)}
.build-btn.disabled{opacity:.4;pointer-events:none}
.build-btn.placing{border-color:var(--green);background:#1e2c24}
#minimap{margin-top:auto;width:100%;height:auto;aspect-ratio:60/46;border:1px solid var(--line);border-radius:4px;cursor:pointer;background:#0c1014}
#overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,11,15,.82);text-align:center}
#overlay.show{display:flex}
#overlay h1{font-size:40px;margin-bottom:18px}
#overlay button{padding:11px 22px;background:var(--amber);color:#0c1014;border:0}

@media (max-width:760px){#app{grid-template-columns:1fr 150px}.hint{display:none}}

/* Carpetas del menú de construcción */
.folder { margin-bottom: 2px; }
.folder-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); padding: 6px 4px; cursor: pointer; user-select: none; border-bottom: 1px solid var(--line); }
.folder-head::after { content: '▾'; font-size: 9px; }
.folder.collapsed .folder-head::after { content: '▸'; }
.folder-body { display: flex; flex-direction: column; gap: 5px; padding: 6px 0; }
.folder.collapsed .folder-body { display: none; }