* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #111; font-family: system-ui, -apple-system, sans-serif;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
#game { display: block; width: 100%; height: 100%; background: #1a1a1a; }

#ui {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  min-height: 56px;
  background: rgba(18, 18, 22, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  z-index: 10;
  border-top: 1px solid #333;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  gap: 6px;
}

#mapActions,
#unitActions,
#soldierActions,
#groupActions,
#buildMenu,
#baseActions,
#armoryActions {
  display: none;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

#mapActions,
#baseActions,
#armoryActions,
#soldierActions,
#groupActions,
#buildMenu {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#unitActions {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.selection-filters {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.filter-chip {
  background: #2a2a30;
  color: #bbb;
  border: 1px solid #555;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 16px;
  min-height: 32px;
}
.filter-chip.active {
  background: #FFEE55;
  color: #111;
  border-color: #FFD54F;
}

button {
  background: #3a3a3a;
  color: #eee;
  border: 1px solid #555;
  padding: 11px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 42px;
  line-height: 1.2;
  white-space: nowrap;
}
button:active { background: #555; transform: scale(0.97); }
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

#btnMove, #btnSoldierMove, #btnGroupMove { background: #2e7d32; border-color: #4caf50; }
#btnMove.active, #btnSoldierMove.active, #btnGroupMove.active { background: #c62828; border-color: #ef5350; }
#btnSoldierAttack, #btnGroupAttack { background: #c62828; border-color: #ef5350; }
#btnSoldierAttack.active, #btnGroupAttack.active { background: #ff8a80; border-color: #ffcdd2; color: #111; }
#btnSoldierDefend, #btnGroupDefend { background: #1565c0; border-color: #42a5f5; }
#btnSoldierDefend.active, #btnGroupDefend.active { background: #90caf9; border-color: #e3f2fd; color: #111; }
#btnCut, #btnGroupCut { background: #6d4c41; border-color: #8d6e63; }
#btnCut.active, #btnGroupCut.active { background: #c62828; border-color: #ef5350; }
#btnBuild { background: #6a1b9a; border-color: #9c27b0; }
#btnBuild.active { background: #c62828; border-color: #ef5350; }
#btnMine, #btnGroupMine { background: #00838f; border-color: #00bcd4; }
#btnMine.active, #btnGroupMine.active { background: #c62828; border-color: #ef5350; }
#btnTunnel { background: #546e7a; border-color: #90a4ae; }
#btnTunnel.active { background: #c62828; border-color: #ef5350; }
#btnTrain { background: #1565c0; border-color: #42a5f5; }
#btnUpgrade { background: #6a1b9a; border-color: #ab47bc; }
#btnBuildBase { background: #6a1b9a; border-color: #ab47bc; }
#btnBuildArmory { background: #b71c1c; border-color: #ef5350; }
#btnTrainSoldier { background: #c62828; border-color: #ef9a9a; }
#btnCancel,
#btnCancelBase,
#btnCancelArmory,
#btnBuildCancel,
#btnSoldierCancel,
#btnGroupCancel { background: #4a4a4a; border-color: #666; }

/* ---- landing screen ---- */
#landing {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 25%, #22222c 0%, #101014 60%, #0a0a0d 100%);
  overflow-y: auto;
}
.landing-card {
  width: 100%;
  max-width: 460px;
  margin: auto;
  text-align: center;
}
.landing-card h1 {
  color: #FFEE55;
  font-size: 30px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.landing-card h2 {
  color: #eee;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 22px 0 8px;
  border-bottom: 1px solid #333;
  padding-bottom: 6px;
}
.landing-tag {
  color: #9e9e9e;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.landing-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.landing-size {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 6px;
  background: #2e7d32;
  border-color: #4caf50;
  white-space: normal;
}
.landing-size-name { font-size: 15px; font-weight: 800; }
.landing-size-dim { font-size: 11px; opacity: 0.85; font-weight: 600; }
.landing-size-blurb { font-size: 10.5px; opacity: 0.75; font-weight: 500; }
.landing-levels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-level {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: #33333b;
  border-color: #4a4a55;
  white-space: normal;
}
.landing-level .lvl-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: #1565c0;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-level.done .lvl-num { background: #2e7d32; }
.landing-level .lvl-text { flex: 1; }
.landing-level .lvl-title { display: block; font-size: 13px; }
.landing-level .lvl-goal { display: block; font-size: 11px; opacity: 0.7; font-weight: 500; }

/* ---- tutorial panel ---- */
#tutorial {
  position: fixed;
  left: 8px;
  right: 8px;
  z-index: 12;
  display: none;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(21, 101, 192, 0.94);
  border: 1px solid #64B5F6;
  color: #E3F2FD;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  /* never grow so tall it swallows the map on a short screen */
  max-height: 42vh;
  overflow-y: auto;
}
#tutorial.done { background: rgba(46, 125, 50, 0.95); border-color: #A5D6A7; }
.tut-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.tut-step { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.tut-hint { font-size: 11.5px; opacity: 0.85; line-height: 1.4; }
.tut-buttons { display: flex; gap: 6px; }
.tut-buttons button {
  flex: 1;
  min-height: 34px;
  padding: 7px 8px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

#minimap {
  position: fixed;
  top: calc(max(8px, env(safe-area-inset-top)) + 38px);
  right: 8px;
  width: 104px;
  height: 104px;
  z-index: 11;
  background: #0c0c10;
  border: 1px solid #555;
  border-radius: 6px;
  image-rendering: pixelated;
  touch-action: none;
  cursor: pointer;
}

#info {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 8px;
  right: 122px;
  color: #ccc;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.65);
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 10;
  max-width: calc(100% - 130px);
  line-height: 1.35;
}

#cameraMode.camera-mode {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: 8px;
  z-index: 11;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  border: 1px solid transparent;
  min-width: 56px;
  text-align: center;
}
#cameraMode.pan-on {
  background: rgba(46, 125, 50, 0.9);
  color: #E8F5E9;
  border-color: #81C784;
}
#cameraMode.pan-locked {
  background: rgba(245, 127, 23, 0.95);
  color: #FFF8E1;
  border-color: #FFB74D;
  box-shadow: 0 0 0 2px rgba(255, 183, 77, 0.35);
}

@media (min-width: 420px) {
  button {
    font-size: 14px;
    padding: 12px 12px;
  }
  #unitActions {
    max-width: 420px;
  }
  #minimap {
    width: 132px;
    height: 132px;
  }
  #info {
    right: 150px;
    max-width: calc(100% - 158px);
  }
}