@font-face {
  font-family: "FatFrank";
  src: url("/packs-assets/fonts/FatFrank-Heavy.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
.halloween-street {
  --topbar-h: 0px;
  --sa-top: 0px;
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  min-width: 0;
}
/* Rewards artwork and discount cards keep their supplied palette in either theme. */
.hw-rewards-floor,
.hw-dialog .hw-code-row {
  --hw-accent: #ffd766;
  --hw-accent-rgb: 255, 215, 102;
  --hw-accent-shadow: #9a7a1f;
  --hw-on-accent: #0b0b0b;
  --hw-paper: #fff;
  /* Use each authored ink color from streetStyle's fallback. */
  --hw-ink: initial;
  color-scheme: light;
}
.hw-dialog .hw-code-row {
  color: #191a24;
}
.halloween-street button {
  touch-action: manipulation;
}
.halloween-street .hw-stage-navigation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(12px + var(--sa-top, env(safe-area-inset-top))) clamp(12px, 3vw, 32px) 12px;
  pointer-events: none;
}
.hw-stage-navigation > * { pointer-events: auto; }
.hw-account-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hw-account-controls :is(a, button) { appearance: none; flex: none; display: flex; align-items: center; justify-content: center; height: var(--pack-header-control, 44px); color: #fff; cursor: pointer; white-space: nowrap; text-decoration: none; }
.hw-account-diamonds { gap: 6px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid #bfe6fa66; background: #bfe6fa1a; font: 400 15px/1 'FatFrank',sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hw-account-cash { gap: 8px; padding: 0 6px 0 14px; border-radius: 999px; border: 1px solid #ffffff38; background: #ffffff14; font: 400 17px/1 'FatFrank',sans-serif; font-variant-numeric: tabular-nums; }
.hw-account-add { width: 30px; height: 30px; border-radius: 50%; background: #22c55e; display: grid; place-items: center; }
.hw-account-profile { width: var(--pack-header-control, 44px); border-radius: 50%; background: #ffd766; overflow: hidden; }
.hw-account-profile .pack-avatar { max-width: calc(100% - 6px); max-height: calc(100% - 6px); border-radius: 50%; object-fit: cover; }
.hw-account-controls .hw-account-signin { padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: #0b0b0b; font: 800 13px/1 'DM Sans',sans-serif; text-transform: uppercase; }
.hw-account-controls :is(a, button):hover { filter: brightness(1.12); }
.halloween-street .hw-account-controls .hw-account-diamonds:is(:link, :visited, :hover, :focus-visible, :active) { color: #fff; text-decoration: none; }
.halloween-street .hw-account-controls .hw-account-diamonds:hover { background: #ffffff24; border-color: #ffffff66; filter: none; }
.hw-account-controls button:disabled { cursor: wait; opacity: .6; }
.hw-balance-compact { display: none; }
.halloween-street .hw-back-packs {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  width: 204px;
  min-height: 52px;
  padding: 0 16px 0 8px;
  border: 1px solid #ffffff29;
  border-radius: 999px;
  background: #07080c6b;
  color: #fff;
  font: 800 12px/1 "DM Sans", sans-serif;
  text-decoration: none;
}
.halloween-street .hw-back-packs:hover { background: #ffffff24; }
.hw-packs-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #ffffff1a; color: var(--hw-accent, #ffd766); }
.hw-packs-label { display: grid; gap: 4px; text-align: left; white-space: nowrap; }
.hw-packs-label strong { font: 800 11px/1 "DM Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #ffffff9e; }
.hw-packs-label small { font: 400 15px/1 "FatFrank", "FatFrank Heavy", sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.hw-mobile-rail { display: none; }
.halloween-street :is(button, a, [tabindex]):focus-visible {
  outline: 3px solid #54c6ff;
  outline-offset: 4px;
}
.halloween-street [data-cur] {
  -webkit-tap-highlight-color: transparent;
}
.halloween-street img {
  max-width: 100%;
}
.halloween-street [data-reveal-card] {
  outline-offset: 7px;
}
.hw-button {
  border: 2px solid #191a24;
  border-radius: 999px;
  min-height: 48px;
  padding: 12px 24px;
  font:
    800 14px/1.2 "DM Sans",
    sans-serif;
  background: var(--hw-accent, #ffd766);
  color: var(--hw-on-accent, #0b0b0b);
  cursor: pointer;
}
.hw-button:hover {
  filter: brightness(1.08);
}
.hw-button--blue {
  background: #007ac2;
  color: #fff;
  border-color: #fff;
}
.hw-button--dark {
  background: #191a24;
  color: #fff;
}
.hw-dialog-root {
  --hw-modal-top: max(24px, env(safe-area-inset-top, 0px));
  --hw-modal-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  position: fixed;
  inset: 0;
  z-index: 110;
  font-family: "DM Sans", sans-serif;
}
.hw-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: #07080cb8;
}
.hw-dialog-position {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--hw-modal-top) max(16px, env(safe-area-inset-right, 0px)) var(--hw-modal-bottom) max(16px, env(safe-area-inset-left, 0px));
}
.hw-dialog {
  width: 100%;
  max-height: calc(100dvh - var(--hw-modal-top) - var(--hw-modal-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  padding: 24px;
  border: 2px solid #191a24;
  background: var(--hw-paper, #fff);
  color: var(--hw-ink, #191a24);
  box-shadow: 0 30px 80px #0005;
}
.hw-dialog-heading {
  flex: none;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.hw-dialog-heading h2 {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font:
    400 28px/1.05 "FatFrank",
    sans-serif;
  text-transform: uppercase;
}
.hw-dialog-heading button {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #97a1ad;
  color: inherit;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}
.hw-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px; }
.hw-dialog-title-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hw-dialog.hw-surprise-dialog { background: var(--hw-accent, #ffd766); color: var(--hw-on-accent, #0b0b0b); border-width: 3px; }
.hw-dialog [style*="monospace"] {
  overflow-wrap: anywhere;
  line-height: 1.5 !important;
}
.hw-toast {
  width: max-content;
  max-width: min(440px, 90vw);
  padding: 14px 20px;
  border-radius: 16px;
  background: #191a24;
  border: 1px solid #8fd2f5;
  color: #fff;
  font:
    600 14px/1.45 "DM Sans",
    sans-serif;
  box-shadow: 0 6px 24px #0005;
}
:root:is(
    [data-theme="dark"],
    .theme-darkreader-enabled,
    [data-darkreader-scheme="dark"]
  ) {
  --hw-accent: #007ac2;
  --hw-accent-rgb: 0, 122, 194;
  --hw-accent-shadow: #003c70;
  --hw-on-accent: #fff;
  --hw-paper: #212833;
  --hw-ink: #f3f5f8;
}
:root:is(
    [data-theme="dark"],
    .theme-darkreader-enabled,
    [data-darkreader-scheme="dark"]
  )
  .hw-dialog
  :is(span, strong) {
  color: inherit !important;
}
:root:is(
    [data-theme="dark"],
    .theme-darkreader-enabled,
    [data-darkreader-scheme="dark"]
  )
  .halloween-street
  [data-screen-label="Street"]
  svg[stroke="#0B0B0B"] {
  stroke: #fff;
}
@media (max-width: 639px) {
  .hw-account-controls { gap: 4px; }
  .hw-account-diamonds, .hw-account-cash { padding: 0 9px; gap: 5px; font-size: 13px; }
  .hw-account-add { display: none; }
  .hw-balance-full { display: none; }
  .hw-balance-compact { display: inline; }
  .halloween-street .hw-house-tabs { top: 64px !important; }
  .hw-mobile-rail { position: absolute; top: 116px; left: 12px; right: 12px; z-index: 17; display: flex; justify-content: center; gap: 8px; transition: opacity 300ms; }
  .halloween-street .hw-mobile-shortcut { display: flex; align-items: center; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 3px; gap: 0; overflow: hidden; border: 1px solid #ffffff29; border-radius: 999px; background: #0c0714e6; color: #fff; cursor: pointer; transition: width 220ms ease, gap 220ms ease; touch-action: manipulation; }
  .halloween-street .hw-mobile-shortcut[aria-expanded="true"] { width: 188px; gap: 8px; }
  .hw-mobile-shortcut .hw-packs-label { width: 0; opacity: 0; gap: 3px; transition: opacity 160ms ease; }
  .hw-mobile-shortcut[aria-expanded="true"] .hw-packs-label { width: auto; opacity: 1; }
  .hw-mobile-shortcut .hw-packs-label strong { font-size: 10px; }
  .hw-mobile-shortcut .hw-packs-label small { font-size: 13px; }
  .hw-mobile-halloween { border-color: #ff7a1a80 !important; }
  .hw-mobile-halloween .hw-packs-icon { background: radial-gradient(circle at 35% 30%,#ffd08a,#ff7a1a 50%,#9a3a06); color: #1a0b05; }
  .hw-mobile-halloween .hw-packs-label strong { color: #ffb36b; }
  .hw-mobile-timer .hw-packs-label small { font-variant-numeric: tabular-nums; }
  .halloween-street button[aria-label="Previous house"],
  .halloween-street button[aria-label="Next house"] {
    width: 38px !important;
    height: 38px !important;
    top: 38% !important;
  }
  .halloween-street button[aria-label="How Trick or Treat works"] {
    bottom: 10px !important;
    right: 12px !important;
    width: 30px !important;
    height: 30px !important;
  }
  .hw-dialog {
    padding: 20px;
  }
  .hw-dialog-heading { gap: 12px; margin-bottom: 16px; }
  .hw-dialog-heading h2 { font-size: 26px; }
  .hw-code-list { max-height: none !important; overflow: visible !important; }
  .hw-code-row { flex-direction: column; align-items: stretch !important; padding: 14px !important; }
  .hw-code-row > span { flex: none !important; }
  .hw-code-row button { min-height: 44px; width: 100%; }
}
@media (max-width: 767px) {
  /* Halloween panels size to their content while long bodies scroll inside. */
  :root[data-dyli-ui] .hw-dialog-root .hw-dialog-position > .hw-dialog {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: var(--hw-dialog-width, 480px) !important;
    height: auto !important;
    max-height: calc(100dvh - var(--hw-modal-top) - var(--hw-modal-bottom)) !important;
    padding: 20px;
    border-radius: 24px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-street *,
  .halloween-street *::before,
  .halloween-street *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}