.guard-widget-game {
  position: absolute;
  inset: calc(var(--top-bar-height, 62px) + max(7px, env(safe-area-inset-top))) 0 0;
  z-index: 43;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  color: #26382d;
  isolation: isolate;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.guard-widget-hud {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  left: 10px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 7px;
  min-height: 52px;
  padding: 7px 8px 7px 14px;
  pointer-events: auto;
  border: 1px solid rgba(166, 129, 56, 0.58);
  border-radius: 18px;
  background: rgba(255, 250, 235, 0.94);
  box-shadow: 0 10px 30px rgba(19, 47, 37, 0.18);
}

.guard-widget-status {
  position: relative;
  z-index: 1;
  overflow: hidden;
  font: 800 clamp(14px, 3.2vw, 20px)/1.05 system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guard-widget-progress {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.guard-widget-progress::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, #63c69d calc(var(--guard-progress, 0) * 100%), rgba(86, 112, 93, 0.18) 0);
}

.guard-widget-stat {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  min-width: 54px;
  color: #657263;
  font: 700 9px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.guard-widget-stat b {
  color: #254534;
  font-size: 14px;
}

.guard-widget-stat--attached.has-visitors b {
  color: #a45143;
}

.guard-widget-close {
  position: relative;
  z-index: 1;
  min-width: 52px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(91, 111, 75, 0.62);
  border-radius: 14px;
  color: #254534;
  background: #f7f0dc;
  font: 800 11px/1 system-ui, sans-serif;
  cursor: pointer;
}

.guard-widget-field {
  position: absolute;
  inset: 70px 0 0;
  z-index: 2;
  pointer-events: none;
}

.guard-widget-visitor {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(62px, 13vw, 88px);
  aspect-ratio: 1;
  padding: 5px;
  pointer-events: auto;
  border: 2px solid rgba(187, 145, 62, 0.78);
  border-radius: 50%;
  color: #2e342c;
  background: rgba(255, 249, 230, 0.94);
  box-shadow: 0 8px 19px rgba(25, 42, 34, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.72);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.guard-widget-visitor:focus-visible,
.guard-widget-close:focus-visible {
  outline: 4px solid rgba(43, 153, 112, 0.88);
  outline-offset: 3px;
}

.guard-widget-visitor-art {
  position: relative;
  display: block;
  width: 72%;
  height: 62%;
  filter: drop-shadow(0 3px 2px rgba(35, 44, 37, 0.18));
}

.guard-widget-visitor .guard-widget-visitor-art.has-custom-art {
  width: 82%;
  height: 82%;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: drop-shadow(0 5px 5px rgba(35, 44, 37, 0.2));
  transform: none !important;
}

.guard-widget-visitor .guard-widget-visitor-art.has-custom-art::before,
.guard-widget-visitor .guard-widget-visitor-art.has-custom-art::after {
  display: none !important;
}

.guard-widget-visitor-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.guard-widget-visitor-label {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  overflow: hidden;
  padding: 2px 3px;
  border-radius: 999px;
  color: #3c4136;
  background: rgba(255, 252, 243, 0.9);
  font: 800 8px/1 system-ui, sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lightweight drawn placeholders keep the game emoji-free until the dedicated
   botanical visitor sprite pack is delivered. */
.guard-widget-visitor--ant .guard-widget-visitor-art,
.guard-widget-visitor--ant .guard-widget-visitor-art::before,
.guard-widget-visitor--ant .guard-widget-visitor-art::after {
  border-radius: 50%;
  background: #4e382b;
}

.guard-widget-visitor--ant .guard-widget-visitor-art {
  width: 20%;
  height: 22%;
  box-shadow: -16px 0 #4e382b, 16px 0 #4e382b;
}

.guard-widget-visitor--ant .guard-widget-visitor-art::before,
.guard-widget-visitor--ant .guard-widget-visitor-art::after {
  content: "";
  position: absolute;
  inset: -16px -23px;
  border-radius: 0;
  background: repeating-linear-gradient(155deg, transparent 0 8px, #4e382b 9px 11px, transparent 12px 18px);
}

.guard-widget-visitor--cat .guard-widget-visitor-art,
.guard-widget-visitor--mouse .guard-widget-visitor-art,
.guard-widget-visitor--chipmunk .guard-widget-visitor-art {
  width: 66%;
  height: 58%;
  border-radius: 50% 50% 44% 44%;
  background: #c47c52;
}

.guard-widget-visitor--cat .guard-widget-visitor-art::before,
.guard-widget-visitor--mouse .guard-widget-visitor-art::before,
.guard-widget-visitor--chipmunk .guard-widget-visitor-art::before {
  content: "";
  position: absolute;
  inset: -26% 8% auto;
  height: 48%;
  background: inherit;
  clip-path: polygon(0 100%, 7% 0, 38% 45%, 62% 45%, 93% 0, 100% 100%);
}

.guard-widget-visitor--mouse .guard-widget-visitor-art { background: #8b8f87; }
.guard-widget-visitor--mouse .guard-widget-visitor-art::after {
  content: "";
  position: absolute;
  top: -23%;
  right: 8%;
  left: 8%;
  height: 34%;
  border-radius: 50%;
  box-shadow: -15px 0 #c9aaa2, 15px 0 #c9aaa2;
}
.guard-widget-visitor--chipmunk .guard-widget-visitor-art {
  background: repeating-linear-gradient(90deg, #a75f31 0 15%, #f1d29d 16% 23%, #6f4029 24% 38%);
}

.guard-widget-visitor--crow .guard-widget-visitor-art,
.guard-widget-visitor--stellers-jay .guard-widget-visitor-art {
  width: 70%;
  height: 62%;
  border-radius: 70% 30% 62% 38%;
  background: #29343d;
  transform: rotate(-8deg);
}

.guard-widget-visitor--crow .guard-widget-visitor-art::before,
.guard-widget-visitor--stellers-jay .guard-widget-visitor-art::before {
  content: "";
  position: absolute;
  top: 20%;
  right: -28%;
  width: 38%;
  height: 22%;
  background: #c89a45;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.guard-widget-visitor--stellers-jay .guard-widget-visitor-art { background: linear-gradient(#25354a 0 40%, #2d6b8d 41%); }
.guard-widget-visitor--stellers-jay .guard-widget-visitor-art::after {
  content: "";
  position: absolute;
  top: -26%;
  left: 3%;
  border-right: 15px solid transparent;
  border-bottom: 22px solid #25354a;
}

.guard-widget-visitor--french-fries .guard-widget-visitor-art {
  width: 62%;
  height: 68%;
  border-radius: 3px 3px 12px 12px;
  background: linear-gradient(105deg, #bb3f32, #e2583e);
  clip-path: polygon(0 23%, 12% 23%, 12% 0, 27% 0, 27% 15%, 41% 15%, 41% 2%, 56% 2%, 56% 18%, 71% 18%, 71% 0, 87% 0, 87% 23%, 100% 23%, 88% 100%, 12% 100%);
}
.guard-widget-visitor--french-fries .guard-widget-visitor-art::before {
  content: "";
  position: absolute;
  inset: 0 8px 36%;
  background: repeating-linear-gradient(90deg, #f0bd4f 0 8px, #d79b2d 9px 11px);
}

.guard-widget-visitor.is-attached {
  z-index: 4;
  width: clamp(54px, 11vw, 72px);
  border-color: rgba(177, 78, 64, 0.9);
  animation: guard-widget-attached 820ms ease-in-out infinite alternate;
}

.guard-widget-visitor.is-shooed {
  pointer-events: none;
  animation: guard-widget-shoo 190ms ease-out forwards;
}

.guard-widget-game.is-away .guard-widget-field,
.guard-widget-game.is-won .guard-widget-field {
  opacity: 0;
}

.guard-widget-game.is-away .guard-widget-hud { background: rgba(240, 235, 214, 0.96); }
.guard-widget-game.is-won .guard-widget-hud { background: rgba(225, 247, 231, 0.96); }

.guard-widget-settings p {
  margin: 0 0 12px;
  opacity: 0.75;
  font-size: 12px;
  line-height: 1.45;
}

.guard-widget-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.guard-widget-setting {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.guard-widget-setting select {
  min-height: 44px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(157, 126, 66, 0.46);
  border-radius: 12px;
  color: inherit;
  background: rgba(255, 250, 236, 0.94);
  font: inherit;
}

@keyframes guard-widget-attached {
  from { transform: translate(-50%, -50%) rotate(-4deg) scale(0.96); }
  to { transform: translate(-50%, -50%) rotate(4deg) scale(1.04); }
}

@keyframes guard-widget-shoo {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -70%) scale(1.34); }
}

@media (max-width: 560px) {
  .guard-widget-game { top: calc(var(--top-bar-height, 62px) + 5px); }
  .guard-widget-hud {
    grid-template-columns: minmax(0, 1fr) repeat(3, auto) auto;
    top: 7px;
    right: 7px;
    left: 7px;
    gap: 4px;
    min-height: 48px;
    padding: 5px 5px 5px 9px;
    border-radius: 15px;
  }
  .guard-widget-status { font-size: 12px; }
  .guard-widget-stat { min-width: 37px; font-size: 7px; }
  .guard-widget-stat b { font-size: 12px; }
  .guard-widget-close { min-width: 45px; min-height: 42px; padding: 0 7px; font-size: 9px; }
  .guard-widget-field { top: 62px; }
  .guard-widget-settings-grid { grid-template-columns: 1fr; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .guard-widget-game { top: max(48px, env(safe-area-inset-top)); }
  .guard-widget-hud { right: 7px; left: auto; width: min(58%, 560px); }
  .guard-widget-field { top: 0; }
  .guard-widget-visitor { width: clamp(54px, 9vw, 72px); }
}

@media (prefers-reduced-motion: reduce) {
  .guard-widget-visitor.is-attached,
  .guard-widget-visitor.is-shooed {
    animation-duration: 1ms !important;
  }
}