* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #0b1020;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #fff;
  user-select: none; -webkit-user-select: none;
}
canvas#game {
  display: block; position: fixed; inset: 0; width: 100%; height: 100%;
  touch-action: none;
}

#backBtn {
  position: fixed; top: 14px; left: 14px; z-index: 30;
  background: rgba(15,23,42,0.7); backdrop-filter: blur(10px);
  color: #cbd5e1; padding: 8px 14px; border-radius: 10px;
  text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  border: 1px solid rgba(255,255,255,0.08); transition: all .15s;
}
#backBtn:hover { background: rgba(30,41,59,0.9); color: #fff; }

/* === Top HUD === */
#hud {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 25;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: rgba(15,23,42,0.7); backdrop-filter: blur(12px);
  padding: 8px 12px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.resBox {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: rgba(255,255,255,0.04);
  border-radius: 10px; font-size: 13px; font-weight: 700; color: #e2e8f0;
}
.resIco {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.actionBtn {
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: #fff; border: none; padding: 8px 18px; border-radius: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 1px; cursor: pointer;
  font-family: inherit; transition: all .15s;
  box-shadow: 0 4px 14px rgba(34,197,94,0.3);
}
.actionBtn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34,197,94,0.5); }
.actionBtn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.actionBtn.big { padding: 14px 36px; font-size: 16px; }
.actionBtn.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 4px 14px rgba(239,68,68,0.3); }
.ghostBtn {
  background: rgba(255,255,255,0.05); color: #cbd5e1;
  border: 1px solid rgba(255,255,255,0.1); padding: 8px 12px; border-radius: 10px;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.ghostBtn:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* === Bottom palette === */
#palette {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 25;
  background: rgba(15,23,42,0.78); backdrop-filter: blur(14px);
  padding: 10px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  display: flex; gap: 8px; align-items: center;
  max-width: calc(100vw - 28px);
}
.paletteInner {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 2px;
}
.paletteInner::-webkit-scrollbar { display: none; }
.bItem {
  flex-shrink: 0; width: 78px; height: 78px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 12px; cursor: grab;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; transition: all .15s;
  position: relative;
}
.bItem:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
.bItem.dragging { opacity: 0.4; cursor: grabbing; }
.bItem.disabled { opacity: 0.35; cursor: not-allowed; }
.bItem.disabled:hover { transform: none; background: rgba(255,255,255,0.04); }
.bItem.selected {
  background: rgba(34,211,238,0.18);
  border-color: #22d3ee;
  box-shadow: 0 0 20px rgba(34,211,238,0.5), inset 0 0 12px rgba(34,211,238,0.15);
}
.bItem.selected:hover { background: rgba(34,211,238,0.25); }
.bItem .bIcon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.bItem .bName {
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: #e2e8f0;
}
.bItem .bCost {
  position: absolute; top: 4px; right: 6px;
  font-size: 10px; font-weight: 700; color: #fbbf24;
  display: flex; align-items: center; gap: 2px;
}
.bItem .bCost::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #ffe066, #f59e0b);
}

/* === Tooltip === */
#tip {
  position: fixed; z-index: 50; pointer-events: none;
  background: rgba(15,23,42,0.95); backdrop-filter: blur(8px);
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 12px; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  max-width: 220px;
}
#tip b { color: #fbbf24; display: block; margin-bottom: 2px; font-size: 13px; }
#tip .stat { color: #94a3b8; font-size: 11px; }

/* === Overlays === */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.85), rgba(2,6,23,0.95));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; gap: 18px;
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.overlay h1 {
  font-size: 56px; font-weight: 900; letter-spacing: 4px;
  background: linear-gradient(135deg, #fbbf24, #ef4444);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(251,191,36,0.3);
}
.overlay .sub {
  color: #94a3b8; font-size: 14px; margin-top: -8px;
}
.howto {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(255,255,255,0.04); padding: 18px 24px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px; color: #cbd5e1; line-height: 1.6;
}
.howto b { color: #fbbf24; margin-right: 8px; }
.endStats {
  display: flex; gap: 12px;
}
.endStats > div {
  background: rgba(255,255,255,0.05); padding: 14px 20px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.endStats span { font-size: 10px; color: #64748b; letter-spacing: 1px; font-weight: 700; }
.endStats b { font-size: 24px; color: #fff; font-weight: 800; }

/* === Floating drag preview === */
.dragGhost {
  position: fixed; pointer-events: none; z-index: 200;
  font-size: 38px; opacity: 0.85;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  transform: translate(-50%, -50%);
}

@media (max-width: 600px) {
  .overlay h1 { font-size: 40px; }
  .bItem { width: 64px; height: 64px; }
  .bItem .bIcon { font-size: 20px; }
  #hud { padding: 6px 8px; gap: 6px; }
  .resBox { padding: 4px 8px; font-size: 11px; }
  .actionBtn { padding: 6px 12px; font-size: 11px; }
}

/* Troop bar */
#troopBar { position:fixed; top:64px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:14; pointer-events:none; }
#troopBar .t { background:rgba(15,23,42,.85); padding:6px 12px; border-radius:8px; font-weight:700; color:#fbbf24; border:1px solid #334155; font-size:14px; }

/* World overlay */
#worldOverlay { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:120; }
#worldOverlay .wo-card { background:#0f172a; border:2px solid #334155; border-radius:14px; padding:18px 22px; min-width:480px; max-width:680px; max-height:80vh; overflow:auto; color:#e2e8f0; font-family:system-ui; }
#worldOverlay .wo-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
#worldOverlay .wo-head h2 { margin:0; letter-spacing:3px; color:#fbbf24; }
#worldOverlay .wo-x { background:#dc2626; color:#fff; border:none; border-radius:8px; padding:6px 10px; font-weight:900; cursor:pointer; }
#worldOverlay .wo-row { display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
#worldOverlay .wo-row label { display:flex; gap:6px; align-items:center; }
#worldOverlay .wo-row input { background:#1e293b; color:#e2e8f0; border:1px solid #475569; border-radius:6px; padding:6px 10px; }
#worldOverlay .wo-row button { background:#334155; color:#e2e8f0; border:none; border-radius:6px; padding:6px 12px; font-weight:700; cursor:pointer; }
#worldOverlay .wo-row button:hover { background:#475569; }
#worldOverlay .wo-troops { padding:8px 10px; background:#1e293b; border-radius:8px; margin-bottom:10px; font-size:14px; }
#worldOverlay .wo-list { display:flex; flex-direction:column; gap:8px; }
#worldOverlay .wo-base { display:flex; justify-content:space-between; align-items:center; background:#1e293b; padding:10px 14px; border-radius:8px; border:1px solid #334155; }
#worldOverlay .wo-name { font-weight:800; font-size:16px; }
#worldOverlay .wo-clan { color:#fbbf24; font-size:12px; }
#worldOverlay .wo-meta { color:#94a3b8; font-size:12px; margin-top:2px; }
#worldOverlay .wo-raid { background:#dc2626; color:#fff; border:none; border-radius:8px; padding:8px 14px; font-weight:900; cursor:pointer; letter-spacing:1px; }
#worldOverlay .wo-raid:hover { background:#ef4444; }
#worldOverlay .wo-empty { color:#64748b; padding:14px; text-align:center; }