/* Polished top resource HUD. Loaded last to keep the home screen readable. */
.resource-bar {
  --resource-accent: #d8a72c;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 18px);
  height: auto !important;
  min-height: clamp(42px, 4vw, 58px);
  position: relative;
  padding: clamp(4px, 0.42vw, 7px) !important;
  gap: clamp(4px, 0.42vw, 7px) !important;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #a27c28 !important;
  border-radius: clamp(9px, 0.8vw, 13px) !important;
  background:
    linear-gradient(180deg, rgb(62 65 39 / 94%), rgb(13 20 15 / 97%) 45%, rgb(5 10 8 / 98%)) !important;
  box-shadow:
    0 6px 16px rgb(0 0 0 / 58%),
    0 0 0 2px rgb(10 14 10 / 72%),
    inset 0 1px 0 rgb(255 229 139 / 25%),
    inset 0 -2px 8px rgb(0 0 0 / 65%) !important;
  scrollbar-width: none;
  isolation: isolate;
}

.resource-bar::-webkit-scrollbar {
  display: none;
}

.resource-bar::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgb(255 220 113 / 15%);
  border-radius: inherit;
}

.resource-bar::after {
  content: "";
  width: 34%;
  height: 1px;
  position: absolute;
  left: 8%;
  top: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffe290, transparent);
  opacity: 0.75;
}

.resource-bar > div {
  --resource-accent: #d8a72c;
  min-width: clamp(62px, 5.5vw, 92px);
  min-height: clamp(32px, 3vw, 44px);
  position: relative;
  flex: 0 0 auto;
  padding: clamp(3px, 0.28vw, 5px) clamp(7px, 0.65vw, 11px) clamp(3px, 0.28vw, 5px) clamp(6px, 0.55vw, 9px);
  display: grid !important;
  grid-template-columns: clamp(20px, 1.65vw, 28px) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: clamp(4px, 0.42vw, 7px) !important;
  border: 1px solid color-mix(in srgb, var(--resource-accent) 48%, #273229);
  border-radius: clamp(7px, 0.65vw, 10px);
  color: #fff9e6 !important;
  background:
    radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--resource-accent) 18%, transparent), transparent 48%),
    linear-gradient(180deg, rgb(35 43 30 / 88%), rgb(8 15 12 / 95%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    inset 0 -2px 5px rgb(0 0 0 / 38%),
    0 1px 3px rgb(0 0 0 / 52%);
  transition: border-color 160ms ease, filter 160ms ease, transform 160ms ease;
}

.resource-bar > div:hover {
  border-color: var(--resource-accent);
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.resource-bar > div::before {
  content: "";
  width: 3px;
  position: absolute;
  left: -1px;
  top: 22%;
  bottom: 22%;
  border-radius: 0 5px 5px 0;
  background: var(--resource-accent);
  box-shadow: 0 0 7px var(--resource-accent);
}

.resource-bar > div::after {
  grid-column: 2;
  align-self: start;
  overflow: hidden;
  color: color-mix(in srgb, var(--resource-accent) 72%, #e7ede1);
  font-size: clamp(0.38rem, 0.46vw, 0.52rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.resource-bar > div:nth-child(1) {
  --resource-accent: #f0ad24;
}

.resource-bar > div:nth-child(1)::after {
  content: "Coin";
}

.resource-bar > div:nth-child(2) {
  --resource-accent: #4ed8ff;
}

.resource-bar > div:nth-child(2)::after {
  content: "Elmas";
}

.resource-bar > div:nth-child(3) {
  --resource-accent: #ffd445;
}

.resource-bar > div:nth-child(3)::after {
  content: "Yıldız";
}

.resource-bar > div:nth-child(4) {
  --resource-accent: #83d84d;
}

.resource-bar > div:nth-child(4)::after {
  content: "Çevre";
}

.resource-bar > div:nth-child(5) {
  --resource-accent: #d69a4d;
}

.resource-bar > div:nth-child(5)::after {
  content: "Depo";
}

.resource-bar > div:nth-child(6) {
  --resource-accent: #8fdc55;
}

.resource-bar > div:nth-child(6)::after {
  content: "Takvim";
}

.resource-bar strong {
  min-width: 0;
  align-self: end;
  overflow: hidden;
  color: #fff9e4;
  font-size: clamp(0.7rem, 0.9vw, 1.04rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 2px #000, 0 0 8px color-mix(in srgb, var(--resource-accent) 34%, transparent);
  white-space: nowrap;
}

.resource-bar .resource-icon {
  grid-row: 1 / 3;
  width: clamp(20px, 1.65vw, 28px) !important;
  height: clamp(20px, 1.65vw, 28px) !important;
  filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 5px color-mix(in srgb, var(--resource-accent) 52%, transparent));
}

.resource-bar .coin-icon img,
.resource-bar .diamond-icon img,
.resource-bar .star-icon img {
  width: 125% !important;
  height: 125% !important;
}

.resource-bar .leaf-icon {
  width: clamp(15px, 1.25vw, 21px) !important;
  height: clamp(25px, 2vw, 34px) !important;
  justify-self: center;
  border-radius: 85% 8% 85% 8%;
  background: linear-gradient(135deg, #b8ed65, #4d9c28 68%, #27661d);
  box-shadow: inset 2px 1px 0 rgb(255 255 255 / 20%);
}

.resource-bar .box-icon {
  background: linear-gradient(145deg, #efbd67, #9a632c 65%, #60401f);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 18%);
}

.resource-bar .day-icon {
  border: 2px solid #9ada61;
  background: radial-gradient(circle, #1c3d20, #08150d);
  box-shadow: inset 0 0 5px #000, 0 0 5px #70c83e;
}

@media (max-width: 1180px), (max-height: 700px) {
  .hud-top {
    max-width: calc(100vw - 12px);
  }

  .resource-bar {
    max-width: calc(100vw - 12px);
  }

  .resource-bar > div {
    min-width: 72px;
  }
}

@media (max-width: 680px) {
  .resource-bar {
    min-height: 40px;
    padding: 4px !important;
    gap: 4px !important;
  }

  .resource-bar > div {
    min-width: 66px;
    min-height: 32px;
    padding: 3px 6px;
    grid-template-columns: 19px minmax(0, 1fr);
  }

  .resource-bar > div::after {
    display: none;
  }

  .resource-bar strong {
    align-self: center;
    font-size: 0.74rem;
  }

  .resource-bar .resource-icon {
    grid-row: auto;
    width: 19px !important;
    height: 19px !important;
  }

  .resource-bar .leaf-icon {
    width: 13px !important;
    height: 22px !important;
  }
}

/* Compact left-side truck queue alert. */
.sorting-prompt {
  --queue-alert: #78b747;
  width: clamp(62px, 5.7vw, 88px) !important;
  height: clamp(62px, 5.7vw, 88px) !important;
  min-width: 0 !important;
  max-width: none !important;
  position: absolute !important;
  left: 1% !important;
  top: 21% !important;
  z-index: 5;
  padding: clamp(5px, 0.5vw, 8px) !important;
  overflow: visible !important;
  border: 2px solid var(--queue-alert) !important;
  border-radius: 17px !important;
  transform: none !important;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--queue-alert) 22%, transparent), transparent 65%),
    linear-gradient(155deg, #253329, #08110d 72%) !important;
  box-shadow:
    0 7px 17px rgb(0 0 0 / 62%),
    inset 0 1px 0 rgb(255 255 255 / 15%),
    inset 0 -3px 8px rgb(0 0 0 / 52%),
    0 0 0 2px rgb(5 10 7 / 72%) !important;
  cursor: pointer;
  isolation: isolate;
}

.sorting-prompt::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  pointer-events: none;
  border: 2px solid var(--queue-alert);
  border-radius: 21px;
  opacity: 0.18;
}

.sorting-prompt::after {
  content: "DEPO";
  position: absolute;
  left: 50%;
  bottom: -8px;
  padding: 2px 7px;
  border: 1px solid var(--queue-alert);
  border-radius: 99px;
  transform: translateX(-50%);
  color: #eff8df;
  background: #101a13;
  font-size: clamp(0.38rem, 0.48vw, 0.56rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  box-shadow: 0 2px 5px #0009;
}

.sorting-prompt > .panel-kicker,
.sorting-prompt > strong,
.sorting-prompt > p:last-child {
  display: none !important;
}

.sorting-truck-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 55%, rgb(95 183 222 / 19%), transparent 66%);
}

.sorting-truck-icon img {
  width: 112%;
  height: 112%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 4px rgb(0 0 0 / 66%));
}

.sorting-queue-count {
  min-width: clamp(22px, 1.75vw, 29px);
  height: clamp(22px, 1.75vw, 29px);
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 3;
  padding: 0 5px;
  border: 2px solid #ffd274;
  border-radius: 99px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(#f28b27, #b33b12);
  font-size: clamp(0.62rem, 0.76vw, 0.86rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px #631600;
  box-shadow: 0 3px 7px #0009, 0 0 8px rgb(255 137 36 / 72%);
  opacity: 0;
  transform: scale(0.6);
}

.sorting-prompt:hover,
.sorting-prompt:focus-visible {
  filter: brightness(1.16);
  outline: 2px solid #fff0a0;
  outline-offset: 4px;
}

.sorting-prompt.queue-active {
  --queue-alert: #ff9e28;
  animation: truck-queue-alert 1.15s ease-in-out infinite;
}

.sorting-prompt.queue-active .sorting-queue-count {
  opacity: 1;
  transform: scale(1);
  animation: truck-queue-count 1.15s ease-in-out infinite;
}

.sorting-prompt.queue-active .sorting-truck-icon img {
  animation: truck-queue-icon 1.15s ease-in-out infinite;
}

@keyframes truck-queue-alert {
  0%,
  100% {
    box-shadow: 0 7px 17px rgb(0 0 0 / 62%), 0 0 0 2px rgb(5 10 7 / 72%), 0 0 7px rgb(255 145 35 / 18%);
  }
  50% {
    border-color: #ffc14c;
    box-shadow: 0 7px 17px rgb(0 0 0 / 62%), 0 0 0 3px rgb(255 173 52 / 34%), 0 0 25px rgb(255 145 35 / 86%);
  }
}

@keyframes truck-queue-count {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.35);
    transform: scale(1.12);
  }
}

@keyframes truck-queue-icon {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 5px 4px rgb(0 0 0 / 66%));
    transform: translateX(0);
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 7px rgb(255 166 52 / 72%));
    transform: translateX(2px);
  }
}

@media (max-width: 780px), (max-height: 640px) and (max-width: 1180px) {
  .sorting-prompt {
    width: 58px !important;
    height: 58px !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    top: 24% !important;
    padding: 4px !important;
    border-radius: 13px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sorting-prompt.queue-active,
  .sorting-prompt.queue-active .sorting-queue-count,
  .sorting-prompt.queue-active .sorting-truck-icon img {
    animation: none !important;
  }
}

/* Creative facility info command card. */
.facility-panel {
  --facility-green: #9df244;
  --facility-gold: #ffd35b;
  --facility-blue: #4fd9ff;
  box-sizing: border-box;
  width: clamp(236px, 18.2vw, 326px) !important;
  max-height: clamp(390px, 58vh, 590px) !important;
  position: absolute !important;
  top: clamp(148px, 21vh, 232px) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  z-index: 8;
  display: grid !important;
  gap: clamp(7px, 0.65vw, 10px);
  padding: clamp(10px, 0.86vw, 15px) !important;
  overflow: hidden auto;
  border: 1px solid rgb(181 219 105 / 42%) !important;
  border-radius: clamp(15px, 1.25vw, 22px) !important;
  color: #f5ffe6;
  background:
    radial-gradient(circle at 18% 0%, rgb(146 244 68 / 28%), transparent 36%),
    radial-gradient(circle at 92% 18%, rgb(78 204 255 / 16%), transparent 36%),
    linear-gradient(150deg, rgb(25 45 24 / 93%), rgb(6 16 12 / 96%) 56%, rgb(5 9 8 / 98%));
  box-shadow:
    0 16px 34px rgb(0 0 0 / 64%),
    0 0 0 2px rgb(7 13 8 / 70%),
    inset 0 1px 0 rgb(255 255 255 / 16%),
    inset 0 -18px 34px rgb(0 0 0 / 38%) !important;
  backdrop-filter: blur(8px) saturate(1.12);
  isolation: isolate;
  scrollbar-width: none;
}

.facility-panel::-webkit-scrollbar {
  display: none;
}

.facility-panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border: 1px solid rgb(194 255 111 / 16%);
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgb(255 211 91 / 15%), transparent) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(135deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 12px);
  pointer-events: none;
}

.facility-panel::after {
  content: "";
  width: 46%;
  height: 2px;
  position: absolute;
  left: 12%;
  top: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--facility-gold), var(--facility-green), transparent);
  box-shadow: 0 0 12px rgb(157 242 68 / 62%);
  pointer-events: none;
}

.facility-panel-head {
  min-height: clamp(42px, 3.8vw, 58px);
  position: relative;
  padding: clamp(8px, 0.78vw, 13px) clamp(10px, 0.9vw, 15px) clamp(8px, 0.78vw, 12px) clamp(44px, 3.6vw, 58px);
  overflow: hidden;
  border: 1px solid rgb(255 211 91 / 36%);
  border-radius: clamp(12px, 0.95vw, 16px);
  background:
    radial-gradient(circle at 20% 50%, rgb(255 211 91 / 22%), transparent 46%),
    linear-gradient(180deg, rgb(46 55 27 / 86%), rgb(10 23 14 / 92%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), inset 0 -8px 18px rgb(0 0 0 / 30%);
}

.facility-panel-head::before {
  content: "";
  width: clamp(27px, 2.35vw, 39px);
  height: clamp(27px, 2.35vw, 39px);
  position: absolute;
  left: clamp(9px, 0.78vw, 13px);
  top: 50%;
  border: 2px solid #ffd76a;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 43%, rgb(255 215 106 / 88%) 43% 57%, transparent 57%),
    linear-gradient(0deg, transparent 43%, rgb(255 215 106 / 88%) 43% 57%, transparent 57%),
    radial-gradient(circle, #26351a 0 38%, #91d934 39% 58%, #142112 59%);
  box-shadow: 0 0 13px rgb(255 215 106 / 44%), inset 0 0 8px #000;
  transform: translateY(-50%);
}

.facility-panel-head .panel-kicker {
  margin: 0;
  color: #eaffbb;
  font-size: clamp(0.55rem, 0.64vw, 0.74rem);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px #000;
}

.facility-panel-head > strong {
  display: block;
  margin-top: 3px;
  color: #fff3be;
  font-size: clamp(0.92rem, 1.12vw, 1.32rem);
  line-height: 1;
  text-shadow: 0 2px 2px #000, 0 0 10px rgb(255 211 91 / 28%);
  text-transform: uppercase;
}

.facility-panel .facility-row {
  min-height: clamp(43px, 4vw, 58px);
  margin: 0 !important;
  padding: clamp(8px, 0.7vw, 12px) clamp(9px, 0.8vw, 13px) clamp(8px, 0.7vw, 12px) clamp(43px, 3.35vw, 56px) !important;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 9px;
  border: 1px solid rgb(144 200 92 / 22%) !important;
  border-radius: clamp(10px, 0.82vw, 14px);
  color: #cfddbf !important;
  background:
    radial-gradient(circle at 0% 50%, rgb(157 242 68 / 14%), transparent 45%),
    linear-gradient(135deg, rgb(24 43 24 / 88%), rgb(8 18 15 / 94%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 3px 8px rgb(0 0 0 / 36%);
  text-transform: uppercase;
}

.facility-panel .facility-row::before {
  width: clamp(25px, 2.05vw, 36px);
  height: clamp(25px, 2.05vw, 36px);
  position: absolute;
  left: clamp(9px, 0.74vw, 12px);
  top: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 10px;
  color: #07120b;
  background: linear-gradient(145deg, #d6ff80, #5da529 72%, #2b5b20);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%), 0 0 12px rgb(130 225 70 / 28%);
  font-size: clamp(0.64rem, 0.78vw, 0.92rem);
  font-weight: 1000;
  line-height: 1;
  transform: translateY(-50%);
}

.facility-panel .facility-capacity::before {
  content: "K";
}

.facility-panel .facility-workers::before {
  content: "I";
  background: linear-gradient(145deg, #e5f5ff, #5bbce6 72%, #1f5874);
}

.facility-panel .facility-energy::before {
  content: "E";
  background: linear-gradient(145deg, #fff4a5, #f0b735 72%, #8b5a12);
}

.facility-panel .facility-production::before {
  content: "U";
  background: linear-gradient(145deg, #c3f6ff, #48cfe7 70%, #17636e);
}

.facility-panel .facility-eco::before {
  content: "C";
}

.facility-panel .facility-row span {
  min-width: 0;
  color: #d8e9c8;
  font-size: clamp(0.54rem, 0.62vw, 0.72rem);
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}

.facility-panel .facility-row strong {
  float: none !important;
  min-width: 0;
  justify-self: end;
  overflow: hidden;
  color: #f7ffe5 !important;
  font-size: clamp(0.74rem, 0.88vw, 1.02rem) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  text-shadow: 0 2px 2px #000, 0 0 10px rgb(157 242 68 / 28%);
  white-space: nowrap;
}

.facility-panel .mini-meter {
  grid-column: 1 / -1;
  height: clamp(6px, 0.55vw, 8px) !important;
  margin: 4px 0 0 !important;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  background: rgb(4 12 9 / 76%) !important;
  box-shadow: inset 0 1px 3px #000;
}

.facility-panel .mini-meter i {
  background: linear-gradient(90deg, #55bc31, #b8ff54 62%, #fff29a) !important;
  box-shadow: 0 0 10px rgb(145 236 62 / 62%);
}

.facility-panel .energy-mini-meter i {
  background: linear-gradient(90deg, #ff9d22, #ffd64f 60%, #fff5a6) !important;
  box-shadow: 0 0 10px rgb(255 188 48 / 62%);
}

.facility-panel .facility-subtext {
  grid-column: 1 / -1;
  margin: 0 !important;
  color: #f7cc70 !important;
  font-size: clamp(0.47rem, 0.57vw, 0.66rem) !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: none;
}

.facility-panel .delivery-card {
  margin: 0 !important;
  padding: clamp(10px, 0.85vw, 14px) !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 198 78 / 38%) !important;
  border-radius: clamp(12px, 0.95vw, 16px);
  background:
    radial-gradient(circle at 86% 18%, rgb(255 195 74 / 22%), transparent 38%),
    linear-gradient(145deg, rgb(65 46 20 / 88%), rgb(16 21 12 / 94%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 5px 13px rgb(0 0 0 / 44%);
}

.facility-panel .delivery-card::before {
  content: "";
  width: clamp(42px, 3.4vw, 56px);
  height: clamp(28px, 2.35vw, 40px);
  position: absolute;
  right: clamp(8px, 0.7vw, 12px);
  top: clamp(8px, 0.7vw, 12px);
  border-radius: 7px 9px 6px 6px;
  background:
    radial-gradient(circle at 19% 89%, #0b1514 0 11%, transparent 12%),
    radial-gradient(circle at 75% 89%, #0b1514 0 11%, transparent 12%),
    linear-gradient(90deg, #1f5d70 0 31%, #163944 31% 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 4px 7px rgb(0 0 0 / 44%);
  opacity: 0.92;
}

.facility-panel .delivery-card .panel-kicker {
  margin: 0;
  max-width: calc(100% - 58px);
  color: #ffeab2;
}

.facility-panel .delivery-card strong {
  max-width: calc(100% - 58px);
  margin-top: 5px !important;
  color: #fff7d8 !important;
  font-size: clamp(0.78rem, 0.9vw, 1.04rem) !important;
  line-height: 1.05;
}

.facility-panel .delivery-card > p:not(.panel-kicker) {
  max-width: calc(100% - 42px);
  margin: 5px 0 9px !important;
  color: #decf9e !important;
  font-size: clamp(0.55rem, 0.63vw, 0.74rem) !important;
}

.facility-panel .gold-button,
.facility-panel .dark-button {
  min-height: clamp(32px, 2.7vw, 42px) !important;
  border-radius: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 5px 10px rgb(0 0 0 / 40%);
}

.facility-panel .gold-button {
  border: 1px solid #ffe08a;
  color: #21180a !important;
  background: linear-gradient(180deg, #fff098, #e7aa35 52%, #9f641b) !important;
}

.facility-panel .dark-button {
  border: 1px solid rgb(153 220 83 / 42%) !important;
  color: #efffdd !important;
  background:
    radial-gradient(circle at 50% 0%, rgb(157 242 68 / 17%), transparent 44%),
    linear-gradient(180deg, rgb(38 60 32 / 94%), rgb(9 21 14 / 96%)) !important;
}

.facility-panel .shift-actions {
  margin: 0 !important;
  gap: clamp(6px, 0.55vw, 9px) !important;
}

.facility-panel .shift-actions small {
  background: rgb(255 214 94 / 22%) !important;
}

@media (max-width: 1280px), (max-height: 760px) {
  .facility-panel {
    width: clamp(216px, 21vw, 286px) !important;
    top: clamp(132px, 19vh, 178px) !important;
    max-height: clamp(330px, 54vh, 500px) !important;
    padding: 9px !important;
    gap: 6px;
  }

  .facility-panel .facility-row {
    min-height: 39px;
  }
}

@media (max-width: 900px), (max-height: 590px) {
  .facility-panel {
    width: auto !important;
    max-height: none !important;
    left: max(72px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(max(74px, 10.5vh) + max(9px, env(safe-area-inset-bottom))) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 6px !important;
    border-radius: 14px !important;
  }

  .facility-panel-head,
  .facility-panel .delivery-card,
  .facility-panel .shift-actions {
    grid-column: 1 / -1;
  }

  .facility-panel-head {
    min-height: 34px;
    padding: 7px 9px 7px 40px;
  }

  .facility-panel-head::before {
    width: 25px;
    height: 25px;
  }

  .facility-panel-head > strong {
    font-size: 0.92rem;
  }

  .facility-panel .facility-row {
    min-height: 40px;
    padding: 7px 7px 7px 35px !important;
  }

  .facility-panel .facility-row::before {
    width: 22px;
    height: 22px;
    left: 7px;
    border-radius: 8px;
    font-size: 0.62rem;
  }

  .facility-panel .facility-row span {
    font-size: 0.49rem;
  }

  .facility-panel .facility-row strong {
    font-size: 0.66rem !important;
  }

  .facility-panel .facility-subtext,
  .facility-panel .delivery-card > p:not(.panel-kicker) {
    display: none;
  }

  .facility-panel .delivery-card {
    min-height: 40px;
    padding: 7px 92px 7px 9px !important;
  }

  .facility-panel .delivery-card .panel-kicker {
    display: none;
  }

  .facility-panel .delivery-card strong {
    max-width: 100%;
    margin: 0 !important;
  }

  .facility-panel .delivery-card .gold-button {
    width: 82px;
    min-height: 30px !important;
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 4px !important;
    font-size: 0.56rem !important;
  }

  .facility-panel .shift-actions {
    grid-template-columns: 1fr 1fr;
  }
}