#drone-roles-screen[hidden] { display: none !important; }
#drone-roles-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, #26394a 0, #172436 38%, #080e1b 100%);
  color: #f2ead9;
  isolation: isolate;
}
#drone-roles-screen::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 2px solid #a9854d;
  box-shadow: inset 0 0 0 4px #090f1c, inset 0 0 0 5px #e0bd7650;
  content: '';
  pointer-events: none;
}
.drone-roles-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(6px, 2vw, 16px);
  flex: 0 0 auto;
  min-height: 70px;
  padding: max(8px, env(safe-area-inset-top)) clamp(9px, 3vw, 22px) 8px;
  border-bottom: 1px solid #b8945a78;
  background: linear-gradient(180deg, #19263bf5, #101827ed);
  box-shadow: 0 5px 18px #0007, inset 0 1px 0 #fff2;
}
#drone-roles-back {
  min-height: 36px;
  padding: 5px 8px;
  border: 1px solid #9d8152;
  border-radius: 3px;
  background: linear-gradient(150deg, #29384b, #111827);
  color: #f3d899;
  box-shadow: inset 0 0 0 1px #fff2, 0 2px 0 #03060c;
  font: 700 9px/1 Georgia, serif;
  white-space: nowrap;
}
.drone-roles-title { min-width: 0; text-align: center; }
.drone-roles-title h1 { margin: 0; color: #f6dda7; font: 700 clamp(15px, 4.3vw, 23px)/1.1 Georgia, serif; letter-spacing: .12em; text-shadow: 0 0 12px #c7954e60; }
.drone-roles-title small { display: block; margin-top: 4px; color: #b9c6c6; font: 700 8px/1.2 Arial, sans-serif; letter-spacing: .08em; }
.drone-roles-coal { display: grid; justify-items: end; gap: 3px; min-width: 55px; color: #aebec2; font: 700 8px/1 Arial, sans-serif; white-space: nowrap; }
#drone-roles-coal { color: #e0d4b6; font-size: 12px; }
#drone-roles-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(10px, 3vw, 20px) clamp(9px, 3vw, 22px) max(16px, env(safe-area-inset-bottom));
  touch-action: pan-y;
  scrollbar-color: #9a794d #101827;
  scrollbar-width: thin;
}
.drone-roles-hint { margin: 0 auto 10px; max-width: 620px; color: #c4ceca; font: 10px/1.35 Arial, sans-serif; text-align: center; }
#drone-role-layout { display: grid; gap: 9px; width: min(850px, 100%); margin: 0 auto; }
.drone-role-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 112px;
  padding: 9px;
  border: 1px solid #718779;
  background: linear-gradient(145deg, #1c3032eF, #101a27f5 72%);
  box-shadow: inset 0 0 0 1px #d8e5c91a, 0 3px 0 #03060b, 0 5px 14px #0005;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.drone-role-zone[data-role-dropzone="upgrade"] { border-color: #74aa7c; background: linear-gradient(145deg, #203b34ef, #101a25f5 72%); }
.drone-role-zone[data-role-dropzone="turret"] { border-color: #a47e4c; background: linear-gradient(145deg, #382c22ef, #151a25f5 72%); }
.drone-role-zone[data-role-dropzone="spell"] { border-color: #8b76b3; background: linear-gradient(145deg, #2c2944ef, #111828f5 72%); }
.drone-role-zone[data-role-dropzone="unassigned"] { border-style: dashed; border-color: #6c7a89; background: linear-gradient(145deg, #202a38ec, #101723f5 72%); }
.drone-role-zone.at-capacity { border-color: #a98767; }
.drone-role-zone.at-capacity .drone-role-heading small { color: #f0b8a4; }
.drone-role-zone.drag-over { border-color: #d5f8a9; background-color: #284c42; box-shadow: inset 0 0 0 2px #d7ff9b66, 0 0 12px #9de18a70; }
.drone-role-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 21px; padding-bottom: 6px; border-bottom: 1px solid #d1c19237; }
.drone-role-heading strong { color: #f0d899; font: 700 11px/1 Georgia, serif; letter-spacing: .1em; }
.drone-role-zone[data-role-dropzone="upgrade"] .drone-role-heading strong { color: #b7e8ae; }
.drone-role-zone[data-role-dropzone="spell"] .drone-role-heading strong { color: #d6c0ff; }
.drone-role-zone[data-role-dropzone="unassigned"] .drone-role-heading strong { color: #c5d2dc; }
.drone-role-heading small { color: #aeb9b7; font: 8px/1.2 Arial, sans-serif; text-align: right; }
.drone-role-drones { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; min-height: 55px; }
.drone-role-empty { display: grid; place-items: center; flex: 1 1 100%; min-height: 50px; color: #87959a; font: 9px/1.25 Arial, sans-serif; text-align: center; }
.role-drone {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 2px 6px;
  width: clamp(108px, 31vw, 145px);
  min-height: 50px;
  padding: 4px 6px;
  border: 1px solid #8f805e;
  border-radius: 2px;
  background: linear-gradient(145deg, #2b3740, #151d28);
  color: #eee5d3;
  text-align: left;
  box-shadow: inset 0 0 0 1px #ffffff13, 0 2px 0 #05080d;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.role-drone:active, .role-drone.dragging { cursor: grabbing; }
.role-drone.dragging { opacity: .36; }
.role-drone img { grid-row: 1 / span 2; width: 35px; height: 35px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.role-drone strong { overflow: hidden; color: #f1dba8; font: 700 8px/1 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.role-drone small { overflow: hidden; color: #bfc9c5; font: 8px/1 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.role-drone[data-premium="true"] { border-color: #a78bd5; background: linear-gradient(145deg, #38304d, #171827); box-shadow: inset 0 0 0 1px #e9d8ff24, 0 2px 0 #05080d, 0 0 8px #a585d533; }
.role-drone[data-premium="true"] strong { color: #e4d2ff; }
.drone-role-zone[data-role-dropzone="unassigned"] .role-drone { border-color: #718195; background: linear-gradient(145deg, #29313d, #151b27); }
.drone-drag-ghost { position: fixed; z-index: 50; display: grid; place-items: center; width: 44px; height: 44px; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 0 9px #d9f6a7); }
.drone-drag-ghost img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.drone-roles-open #hud,
.drone-roles-open #panel,
.drone-roles-open #quick-controls,
.drone-roles-open #top-controls,
.drone-roles-open #mine-scene-title,
.drone-roles-open #mine-floor-open,
.drone-roles-open #regular-bot-layer,
.drone-roles-open #field-hint,
.drone-roles-open #building-placement-prompt { display: none !important; }
.drone-roles-open #drone-roles-screen { display: flex; }
#drone-roles-back:active { transform: translateY(2px); }
@media (min-width: 680px) {
  #drone-role-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .drone-role-zone[data-role-dropzone="upgrade"] { grid-column: 1 / -1; }
  .drone-role-zone[data-role-dropzone="unassigned"] { grid-column: 1 / -1; }
  .drone-role-zone { min-height: 130px; }
  .drone-role-drones { min-height: 70px; }
  .role-drone { width: 144px; }
}
@media (max-width: 360px) {
  .drone-roles-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; padding-left: 6px; padding-right: 6px; }
  #drone-roles-back { min-height: 33px; padding: 4px 5px; font-size: 8px; }
  .drone-roles-title h1 { font-size: 14px; letter-spacing: .08em; }
  .drone-roles-title small { font-size: 7px; }
  .drone-role-zone { padding: 7px; }
  .role-drone { width: min(47%, 145px); grid-template-columns: 31px minmax(0, 1fr); gap: 2px 4px; padding: 4px; }
  .role-drone img { width: 30px; height: 30px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .drone-roles-header { min-height: 56px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  #drone-roles-scroll { padding-top: 7px; }
  .drone-roles-hint { margin-bottom: 6px; }
  #drone-role-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .drone-role-zone[data-role-dropzone="upgrade"], .drone-role-zone[data-role-dropzone="unassigned"] { grid-column: 1 / -1; }
  .drone-role-zone { min-height: 80px; padding: 6px; }
  .drone-role-drones { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .drone-role-zone { transition: none; } }

/* Tiny battlefield insignias keep each assigned role readable at a glance. */
.regular-bot-actor[hidden] { display: none !important; }
.regular-bot-actor {
  display: grid;
  place-items: center;
  isolation: isolate;
  filter: drop-shadow(0 2px 3px #050913cc);
  transition: filter .16s ease;
}
.regular-bot-actor.active { filter: drop-shadow(0 0 6px #b5f7a8) drop-shadow(0 2px 3px #050913cc); }
.regular-bot-actor > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  animation: regular-bot-hover 1.8s ease-in-out infinite;
}
.regular-bot-actor[data-premium="true"] { filter: drop-shadow(0 0 5px #f7d16c) drop-shadow(0 2px 3px #050913cc); }
.regular-bot-actor[data-premium="true"].active { filter: drop-shadow(0 0 6px #f7d16c) drop-shadow(0 0 3px #b5f7a8) drop-shadow(0 2px 3px #050913cc); }
@keyframes regular-bot-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Role, readiness, and Coal summaries stay distinct on the Factory roster. */
.drone-card { gap: 5px; border-color: #627f78; background: linear-gradient(145deg, #1d2c35, #0b1420 80%); }
.drone-card[data-role="upgrade"] { border-color: #6d9c76; }
.drone-card[data-role="turret"] { border-color: #96734e; }
.drone-card[data-role="spell"] { border-color: #8170a6; }
.drone-card[data-role="unassigned"] { border-color: #596572; }
.drone-role-summary {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 18px;
  padding: 3px 5px;
  overflow: hidden;
  border-left: 2px solid #83ba8a;
  background: #09131bd9;
  color: #c9e3cf;
  font: 700 8px/1.2 Arial, sans-serif;
  text-overflow: ellipsis;
}
.drone-card[data-role="turret"] .drone-role-summary { border-color: #d4a56a; color: #eddbbd; }
.drone-card[data-role="spell"] .drone-role-summary { border-color: #b69be8; color: #dfd0ff; }
.drone-card[data-role="unassigned"] .drone-role-summary { border-color: #728090; color: #bac4cd; }
.drone-card[data-role="upgrade"] .drone-operation-status.ready { color: #c5edbd; }
.drone-card[data-role="turret"] .drone-operation-status.ready { color: #efd2a5; }
.drone-card[data-role="spell"] .drone-operation-status.ready { color: #d9c8fa; }

#factory-tabs button { border-radius: 2px; letter-spacing: .11em; }
.drone-role-zone { border-radius: 3px; }
.drone-role-heading strong { font-size: 12px; }
.role-drone { border-radius: 3px; transition: opacity .12s ease, transform .12s ease, box-shadow .12s ease; }
.role-drone:hover { border-color: #d2c18d; box-shadow: inset 0 0 0 1px #ffffff22, 0 3px 8px #0009; }
.role-drone:focus-visible, #drone-roles-back:focus-visible {
  outline: 2px solid #d7f5a6;
  outline-offset: 2px;
}
.drone-role-zone.drag-over { transform: scale(1.01); }
.drone-drag-ghost { border-radius: 50%; background: #102016b8; }
@media (max-width: 380px) {
  .drone-role-summary { min-height: 18px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .regular-bot-actor, .role-drone { transition: none; }
  .regular-bot-actor > img { animation: none; }
}

/* Upgrade-role drones can be dragged to prioritize a card or change tabs. */
.regular-bot-actor { pointer-events: none; }
.regular-bot-actor[data-role="upgrade"] {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.regular-bot-actor[data-role="upgrade"].dragging {
  opacity: .38;
  cursor: grabbing;
}
#tabs button.regular-bot-drop-target {
  border-color: #8cecff;
  color: #e4fbff;
  box-shadow: inset 0 0 0 1px #d4fbff80, 0 0 8px #64dcff, 0 0 18px #43bfff9c;
  animation: regular-bot-drop-pulse .7s ease-in-out infinite alternate;
}
@keyframes regular-bot-drop-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  #tabs button.regular-bot-drop-target { animation: none; }
}

/* Roles are an inner Drone Factory view; keep unassigned drones pinned below its scroll list. */
#factory-management #drone-roles-screen[hidden] { display: none !important; }
#factory-management #drone-roles-screen {
  position: relative;
  inset: auto;
  z-index: auto;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: #f2ead9;
  isolation: auto;
}
#factory-management #drone-roles-screen::before { display: none; }
#factory-management .drone-roles-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 48px;
  padding: 3px 4px 6px;
  box-shadow: none;
}
#factory-management .drone-roles-title h1 { font-size: clamp(12px, 3.4vw, 16px); }
#factory-management .drone-roles-title small { font-size: 7px; }
#factory-management .drone-roles-coal { min-width: 58px; }
#drone-roles-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  overflow: hidden;
}
#factory-management #drone-roles-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 3px 3px;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
#factory-management .drone-roles-hint { margin: 0 auto 7px; font-size: 9px; }
#factory-management #drone-role-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  margin: 0;
}
#factory-management #drone-role-layout .drone-role-zone { grid-column: auto; min-height: 74px; padding: 7px; gap: 5px; }
#factory-management #drone-role-layout .drone-role-drones { min-height: 40px; gap: 5px; }
#factory-management #drone-role-layout .drone-role-empty { min-height: 34px; }
#factory-management .drone-unassigned-zone {
  flex: 0 0 auto;
  min-height: 82px;
  max-height: min(28vh, 190px);
  margin: 0 3px 2px;
  padding: 7px;
  overflow: hidden;
}
#factory-management .drone-unassigned-zone .drone-role-drones {
  flex: 1 1 auto;
  min-height: 40px;
  max-height: min(20vh, 110px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
@media (min-width: 680px) {
  #factory-management #drone-role-layout { grid-template-columns: minmax(0, 1fr); }
  #factory-management #drone-role-layout .drone-role-zone { min-height: 74px; }
  #factory-management #drone-role-layout .drone-role-drones { min-height: 40px; }
}
@media (max-width: 360px) {
  #factory-management .drone-roles-header { grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
  #factory-management .drone-roles-title h1 { font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #factory-management .drone-roles-header { min-height: 40px; padding-top: 2px; padding-bottom: 4px; }
  #factory-management #drone-role-layout { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #factory-management #drone-role-layout .drone-role-zone { min-height: 62px; padding: 5px; }
  #factory-management .drone-unassigned-zone { min-height: 68px; max-height: 30vh; }
  #factory-management .drone-unassigned-zone .drone-role-drones { min-height: 32px; max-height: 18vh; }
}