/* Styles for the generic find-five seasonal game. Loaded only while active or in admin preview. */
/* Safari paints the area behind its browser controls from the page background.
   Keep that exposed area neutral while the grayscale hunt is running. */
html:has(body.mbk-event-game-active) { background: #171717; }
body.mbk-event-game-active { background: #171717; }
body.mbk-event-game-active::before {
  position: fixed;
  inset: 0;
  z-index: 2147480000;
  background: rgba(255,255,255,.02);
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
  content: "";
  pointer-events: none;
}
body.mbk-event-game-promo-in-color::before { display: none; }

.mbk-event-game-gray-zone {
  position: fixed;
  z-index: 2147480000;
  background: rgba(255,255,255,.02);
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
  pointer-events: none;
}

.mbk-event-game-marker {
  position: relative;
  z-index: 2147481000;
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  vertical-align: middle;
  border-radius: 50%;
  text-decoration: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.mbk-event-game-marker.mbk-event-game-marker-source {
  visibility: hidden;
  pointer-events: none;
}

.mbk-event-game-portal {
  position: fixed !important;
  z-index: 2147482000 !important;
  margin: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.mbk-event-game-marker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none !important;
  -webkit-filter: none !important;
}

.mbk-event-game-marker:focus-visible {
  outline: 3px solid #40d6d7;
  outline-offset: 3px;
}

.mbk-event-game-promo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 26px auto 34px;
  padding: clamp(20px, 4vw, 34px);
  border: 2px solid rgba(64,214,215,.82);
  border-radius: 18px;
  background: linear-gradient(115deg, rgba(31, 22, 70, .98), rgba(16, 13, 32, .98) 65%);
  color: #fff;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .5), 0 0 0 4px rgba(64, 214, 215, .1);
}
.mbk-event-game-promo h2 { margin: 0 0 8px; color: #40d6d7; }
.mbk-event-game-promo p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.55; }
.mbk-event-game-promo .mbk-event-game-promo-how { max-width: 900px; }
.mbk-event-game-promo-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; color: rgba(255,255,255,.86); font-size: .83rem; }
.mbk-event-game-promo-progress>strong { color: #40d6d7; font-size: .83rem; }
.mbk-event-game-promo .mbk-event-game-spirits { gap: 6px; margin-top: 2px; }
.mbk-event-game-promo .mbk-event-game-spirit { width: 34px; height: 34px; border-radius: 8px; }
.mbk-event-game-promo .mbk-event-game-spirit img { width: 29px; height: 29px; }
.mbk-event-game-promo .mbk-event-game-spirit.is-found::after { inset: 2px; border-radius: 5px; }
.mbk-event-game-promo .mbk-event-game-promo-reward { display: inline-block; margin-top: 9px; padding: 5px 11px; border: 1px dashed #40d6d7; border-radius: 8px; background: rgba(64,214,215,.08); color: #aaf7f1; font-size: 1.2rem; letter-spacing: .1em; }
.mbk-event-game-promo .mbk-event-game-promo-warning { margin-top: 8px; color: #aaf7f1; font-size: .88rem; font-weight: 700; }
.mbk-event-game-promo a {
  display: inline-block;
  padding: 11px 16px;
  border: 1px solid #75e8e5;
  border-radius: 999px;
  background: #40d6d7;
  color: #100c2a;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.mbk-event-game-promo a:hover,
.mbk-event-game-promo a:focus-visible { background: #8af0eb; color: #100c2a; }

.mbk-event-game-status {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  width: min(370px, calc(100vw - 28px));
  padding: 15px 17px;
  border: 2px solid rgba(64,214,215,.82);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(115deg, rgba(31, 22, 70, .98), rgba(16, 13, 32, .98) 65%);
  box-shadow: 0 12px 38px rgba(0,0,0,.5), 0 0 0 4px rgba(64,214,215,.1);
  font: 600 14px/1.45 system-ui, sans-serif;
}

.mbk-event-game-status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mbk-event-game-status strong { color: #40d6d7; font-size: 16px; }
.mbk-event-game-mini-progress { display: none; flex: 0 0 auto; color: #75e8e5; font-size: 12px; font-weight: 850; letter-spacing: .04em; }
.mbk-event-game-toggle {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid rgba(117,232,229,.52);
  border-radius: 999px;
  background: rgba(64,214,215,.1);
  color: #fff !important;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.mbk-event-game-toggle:hover,
.mbk-event-game-toggle:focus-visible { color: #fff !important; }
.mbk-event-game-status-content { margin-top: 10px; }
.mbk-event-game-progress { display: block; color: rgba(255,255,255,.9); }
.mbk-event-game-spirits { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.mbk-event-game-spirit { position: relative; display: grid; overflow: hidden; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(117,232,229,.2); border-radius: 10px; background: rgba(0,0,0,.22); }
.mbk-event-game-spirit img { display: block; width: 38px; height: 38px; object-fit: contain; filter: grayscale(1); opacity: .55; }
.mbk-event-game-spirit.is-found { border-color: rgba(117,232,229,.72); background: rgba(64,214,215,.1); }
.mbk-event-game-spirit.is-found img { filter: none; opacity: 1; }
.mbk-event-game-spirit.is-found::after { position: absolute; inset: 3px; border: 1px solid rgba(190,250,246,.55); border-radius: 6px; background: linear-gradient(90deg, transparent 0 24%, rgba(190,250,246,.46) 25% 28%, transparent 29% 49%, rgba(190,250,246,.46) 50% 53%, transparent 54% 74%, rgba(190,250,246,.46) 75% 78%, transparent 79%); content: ""; pointer-events: none; }
.mbk-event-game-status .mbk-event-game-reward { display: block; margin-top: 10px; padding: 9px; border: 1px dashed #40d6d7; border-radius: 8px; color: #fff; font-size: 18px; letter-spacing: .08em; text-align: center; }
.mbk-event-game-status-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.mbk-event-game-status-links a { color: #40d6d7; font-size: 12px; }
.mbk-event-game-status-links a:last-child { color: rgba(255,255,255,.7); }
.mbk-event-game-status.is-collapsed .mbk-event-game-status-content { display: none; }
.mbk-event-game-status.is-collapsed { padding-top: 10px; padding-bottom: 10px; }
.mbk-event-game-status.is-collapsed .mbk-event-game-mini-progress { display: inline-flex; }

.mbk-event-game-resume {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #75e8e5;
  border-radius: 999px;
  background: #40d6d7;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  color: #100c2a;
  font: 800 13px/1.3 system-ui, sans-serif;
  text-decoration: none;
}
.mbk-event-game-resume:hover,
.mbk-event-game-resume:focus-visible { background: #8af0eb; color: #100c2a; }

/* Warm Halloween accents only while the hunt is active. The completed or
   disabled game keeps the site's turquoise and violet palette above. */
body.mbk-event-game-active .mbk-event-game-promo,
body.mbk-event-game-active .mbk-event-game-status {
  border-color: rgba(233,149,54,.88);
  background: linear-gradient(115deg, rgba(48,34,20,.98), rgba(20,20,20,.98) 62%);
  box-shadow: 0 12px 38px rgba(0,0,0,.5), 0 0 0 4px rgba(233,149,54,.14);
}
body.mbk-event-game-active .mbk-event-game-promo h2,
body.mbk-event-game-active .mbk-event-game-status strong,
body.mbk-event-game-active .mbk-event-game-status-links a { color: #ffb45f; }
body.mbk-event-game-active .mbk-event-game-promo .mbk-event-game-promo-reward,
body.mbk-event-game-active .mbk-event-game-status .mbk-event-game-reward {
  border-color: #ffb45f;
  background-color: rgba(233,149,54,.1);
}
body.mbk-event-game-active .mbk-event-game-promo .mbk-event-game-promo-reward,
body.mbk-event-game-active .mbk-event-game-promo .mbk-event-game-promo-warning,
body.mbk-event-game-active .mbk-event-game-mini-progress,
body.mbk-event-game-active .mbk-event-game-promo-progress>strong { color: #ffd19c; }
body.mbk-event-game-active .mbk-event-game-promo a,
body.mbk-event-game-active .mbk-event-game-resume {
  border-color: #ffb45f;
  background: #e99536;
  color: #17120c;
}
body.mbk-event-game-active .mbk-event-game-promo a:hover,
body.mbk-event-game-active .mbk-event-game-promo a:focus-visible,
body.mbk-event-game-active .mbk-event-game-resume:hover,
body.mbk-event-game-active .mbk-event-game-resume:focus-visible {
  background: #ffc47d;
  color: #17120c;
}
body.mbk-event-game-active .mbk-event-game-toggle {
  border-color: rgba(255,180,95,.55);
  background: rgba(233,149,54,.12);
}
body.mbk-event-game-active .mbk-event-game-spirit { border-color: rgba(255,180,95,.2); }
body.mbk-event-game-active .mbk-event-game-spirit.is-found { border-color: rgba(255,180,95,.7); background: rgba(233,149,54,.12); }
body.mbk-event-game-active .mbk-event-game-spirit.is-found::after {
  border-color: rgba(255,220,168,.58);
  background-image: linear-gradient(90deg, transparent 0 24%, rgba(255,220,168,.52) 25% 28%, transparent 29% 49%, rgba(255,220,168,.52) 50% 53%, transparent 54% 74%, rgba(255,220,168,.52) 75% 78%, transparent 79%);
}

@media (prefers-reduced-motion: no-preference) {
  .mbk-event-game-marker:hover { transform: scale(1.12); }
}

@media (max-width: 650px) {
  .mbk-event-game-promo { grid-template-columns: minmax(0, 1fr); }
  .mbk-event-game-promo a { grid-column: 1; white-space: normal; }
}