/* Sold-out cases remain browsable, including their contents and favourites. */
a.cb-case-sold-out .case-image,
a.cb-case-sold-out .bottom-elements,
a.cb-case-sold-out .title > span,
a.cb-case-sold-out .counter {
  filter: grayscale(1);
}
a.cb-case-sold-out .case-image { opacity: .55; }
a.cb-case-sold-out .bottom-elements { opacity: .55; }

.container.caseBox #case-box-app .cb-case-sold-out-notice,
.container.caseBox #case-box-app[data-cb-case-sold-out="true"] .cb-case-sold-out-notice {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 350px;
  max-width: 100%;
  min-height: 100px;
  padding: 20px;
  margin: 0 auto;
  color: #f5f5f6;
  background: rgba(9, 8, 13, .55);
  font: 14px/1.4 Arial, sans-serif;
  text-align: center;
}
.container.caseBox #case-box-app[data-cb-case-sold-out="true"] .game-case {
  width: 220px;
  height: 220px;
}
.container.caseBox #case-box-app[data-cb-case-sold-out="true"] .game-case .case-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: none;
}
.container.caseBox #case-box-app[data-cb-case-sold-out="true"] .floor-glow {
  background: radial-gradient(circle, rgba(110, 110, 110, .14), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  a.cb-case-sold-out img { animation: none !important; }
}

/* Suppress the retired case-odds footer in already exported client bundles. */
body:has(#case-box-app) .cb-rtp-odds { display: none !important; }

/* Paired legacy artwork keeps the same geometry in both availability states. */
body .container.caseBox #case-box-app .center-wrapper .stage-container:has(.game-case > .case-image ~ .case-image) {
  width: min(220px, 66vw);
  height: auto;
  aspect-ratio: 220 / 232;
  margin: 38px auto 0;
  display: block;
  transform: none;
  perspective: none;
}
body .container.caseBox #case-box-app .center-wrapper .stage-container:has(.game-case > .case-image ~ .case-image) .game-case {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}
body .container.caseBox #case-box-app .center-wrapper .stage-container:has(.game-case > .case-image ~ .case-image) .case-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}
body .container.caseBox #case-box-app .center-wrapper .stage-container:not(.disabled):has(.game-case > .case-image ~ .case-image) .case-image.animated {
  animation: slowmotion 10s ease infinite;
}
body .container.caseBox #case-box-app .center-wrapper .stage-container:has(.game-case > .case-image ~ .case-image) .floor-wrapper {
  width: min(350px, 96vw);
  height: auto;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 5px), calc(-50% - 10px));
}
body .container.caseBox #case-box-app .center-wrapper .stage-container:has(.game-case > .case-image ~ .case-image) .floor-wrapper > * { display: none; }
body .container.caseBox #case-box-app .center-wrapper .stage-container:has(.game-case > .case-image ~ .case-image) .floor-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/img/case-circle.png') center / contain no-repeat;
  animation: rotation 40s linear infinite;
}
body .container.caseBox #case-box-app .center-wrapper .stage-container.disabled .floor-wrapper::before {
  animation: none;
  filter: grayscale(1);
  opacity: .5;
}
@media (prefers-reduced-motion: reduce) {
  body .container.caseBox #case-box-app .center-wrapper .stage-container:has(.game-case > .case-image ~ .case-image) .case-image.animated,
  body .container.caseBox #case-box-app .center-wrapper .stage-container .floor-wrapper::before { animation: none; }
}

/* Halloween 2026 project-wide 1-to-1 theme: header, homepage cards, and all case pages */
html body header .wrapper .logo a.logo-img {
  margin-top: 1px;
}
html body header .wrapper .logo a.logo-img > svg {
  display: none;
}
html body header .wrapper .logo a.logo-img::before {
  content: "";
  display: block;
  width: 87.5%;
  aspect-ratio: 175.37 / 36.31;
  margin: 7px auto 2px auto;
  background: url("/themes/halloween_2026/img/logo.svg") center / contain no-repeat;
}
html body header .wrapper .bg-wrap {
  background-color: #13171f;
  background-image: url("/themes/halloween_2026/img/bg.png");
  background-repeat: repeat-x;
}
@media only screen and (max-width: 900px) {
  html body header .wrapper .logo a.logo-img {
    margin-top: -2px;
  }
}
@media only screen and (max-width: 768px) {
  html body header .wrapper .logo {
    background-color: rgba(0, 0, 0, 0);
  }
  html body header .wrapper .logo a.logo-img {
    margin-top: -3px;
  }
  html body header .wrapper .logo a.logo-img::before {
    max-width: 166.25px;
  }
}

html body .homepage #caseList > a.top-leftStart-burst:after,
html body .homepage #caseList > a.top-leftStart-burst .ui-border-element:after,
html body .homepage #caseList > a.top-leftStart-burst .ui-border-element:before,
html body .homepage #caseList > a.top-leftStart-burst:before {
  border-color: #461905;
}
html body .homepage #caseList > a:not(.cb-case-sold-out):not(.case-disabled):hover {
  background-image: url("/themes/halloween_2026/img/case-box/hover.jpg");
  background-size: cover;
  animation: cb-hw-case-bg-opacity 2s;
}
@keyframes cb-hw-case-bg-opacity {
  from { opacity: .2; }
  to { opacity: 1; }
}

html body .homepage #caseList > a .case-image .theme-overlay {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
html body .homepage #caseList > a .case-image .theme-overlay.theme-overlay-hovered {
  display: none;
}
html body .homepage #caseList > a .case-image .theme-overlay.theme-overlay-static {
  display: block;
  width: 251px;
  height: auto;
  left: -1px;
  top: -53px;
}
html body .homepage #caseList > a:not(.cb-case-sold-out):not(.case-disabled):hover .case-image .theme-overlay.theme-overlay-hovered {
  display: block;
  position: absolute;
  width: 251px;
  height: auto;
  left: -1px;
  top: -53px;
}
@media only screen and (max-width: 768px) {
  html body .main-content .homepage #caseList > a .case-image .theme-overlay.theme-overlay-static,
  html body .main-content .homepage #caseList > a:hover .case-image .theme-overlay.theme-overlay-hovered {
    width: calc(100% * 251 / 220);
    max-width: none;
    height: auto;
    left: calc(100% * -17 / 220);
    top: calc(-3px - (100% * 48 * 1.12 / 220));
  }
}

html body .container.caseBox #case-box-app .center-wrapper :is(.case, .stage-container .game-case):has(> img.case-image.animated) > img.case-image:not(.animated) {
  z-index: 1;
}
html body .container.caseBox #case-box-app .center-wrapper :is(.case, .stage-container .game-case) > img.cb-case-theme-overlay,
html body .container.caseBox #case-box-app .center-wrapper :is(.case, .stage-container .game-case):has(> img.case-image.animated):not(:has(> img.cb-case-theme-overlay))::after {
  position: absolute;
  left: calc(100% * -18 / 220);
  top: calc(100% * -49 / 232);
  width: calc(100% * 251 / 220);
  max-width: none;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
html body .container.caseBox #case-box-app .center-wrapper :is(.case, .stage-container .game-case):has(> img.case-image.animated):not(:has(> img.cb-case-theme-overlay))::after {
  content: "";
  aspect-ratio: 251 / 292;
  background: url("/themes/halloween_2026/img/case-box/overlay-view.png") center / contain no-repeat;
}
html body .container.caseBox #case-box-app .center-wrapper :is(.case, .stage-container .game-case):has(> img.case-image.animated) > img.case-image.animated {
  z-index: 3;
}
html body .container.caseBox #case-box-app .center-wrapper :is(.case.disabled, .stage-container.disabled .game-case) > img.cb-case-theme-overlay,
html body .container.caseBox #case-box-app .center-wrapper :is(.case.disabled, .stage-container.disabled .game-case):has(> img.case-image.animated):not(:has(> img.cb-case-theme-overlay))::after {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  opacity: 1;
}

/* === Responsive Promo Code Layout (Banner + Managed Banner + Deposit Modal) === */
html body .promo-wrapper .promo-code {
  min-width: 210px;
  width: auto;
}
html body #promocode-holder.cb-live-promo .promo-code--button,
html body .promo-wrapper .promo-code--button {
  container-type: normal;
  box-sizing: border-box;
  min-width: 210px;
  width: max-content;
  max-width: 256px;
  min-height: 45px;
  height: 45px;
  padding: 1px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}
html body #promocode-holder.cb-live-promo .promo-code--button .inner,
html body .promo-wrapper .promo-code--button .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  box-sizing: border-box;
  min-width: 0;
  width: auto;
  max-width: 100%;
  padding: 0 2px;
  font-size: 22px;
  letter-spacing: 1px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: normal;
  word-break: normal;
}
html body #promocode-holder.cb-live-promo-inactive .promo-code--button .inner {
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
}
@media only screen and (max-width: 900px) and (min-width: 631px) {
  html body .promo-wrapper .promo-code {
    min-width: 192px;
    width: auto;
  }
  html body #promocode-holder.cb-live-promo .promo-code--button,
  html body .promo-wrapper .promo-code--button {
    min-width: 192px;
    max-width: 236px;
    min-height: 42px;
    height: 42px;
    padding: 1px 10px;
  }
  html body #promocode-holder.cb-live-promo .promo-code--button .inner,
  html body .promo-wrapper .promo-code--button .inner {
    font-size: 20px;
    letter-spacing: .7px;
  }
}
@media only screen and (max-width: 720px) {
  html body .promo-wrapper .promo-timer {
    display: none;
  }
}
@media only screen and (max-width: 630px) {
  html body .promo-wrapper {
    padding: 0 12px;
    justify-content: space-between;
    gap: 10px;
    box-sizing: border-box;
  }
  html body .promo-wrapper .promo-info {
    transform: none;
    flex: 0 0 auto;
  }
  html body .promo-wrapper .promo-code {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 212px;
    align-items: center;
    gap: 4px;
  }
  html body #promocode-holder .promo-code--label,
  html body .promo-wrapper .promo-code--label {
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
  }
  html body #promocode-holder.cb-live-promo .promo-code--button,
  html body .promo-wrapper .point-btn.promo-code--button {
    width: min(100%, 194px);
    min-width: 140px;
    max-width: 194px;
    min-height: 40px;
    height: 40px;
    padding: 0 8px;
  }
  html body #promocode-holder.cb-live-promo .promo-code--button .inner,
  html body .promo-wrapper .point-btn.promo-code--button .inner {
    height: 100%;
    padding: 0 2px;
    font-size: 19px;
    letter-spacing: .5px;
    line-height: 1;
  }
}
@media only screen and (max-width: 365px) {
  html body .promo-wrapper {
    padding: 0 8px;
    gap: 6px;
  }
  html body .promo-wrapper .promo-info--card {
    width: 98px;
    height: 54px;
  }
  html body .promo-wrapper .promo-info--card .promo-info--label {
    font-size: 23px;
  }
  html body #promocode-holder.cb-live-promo .promo-code--button,
  html body .promo-wrapper .point-btn.promo-code--button {
    min-width: 120px;
  }
}
@media (max-width: 760px) {
  html body #cb-managed-promo .cb-banner-code-area {
    min-width: 0;
  }
  html body #cb-managed-promo .cb-banner-code {
    container-type: inline-size;
    max-width: 100%;
    padding: 0 8px;
    font-size: clamp(11px, 7.6cqw, 17px);
    letter-spacing: .015em;
    overflow: hidden;
  }
  html body .cb-payment-form {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 10px;
  }
  html body .cb-payment-field input {
    font-size: 16px;
    padding: 11px 38px 11px 12px;
  }
  html body .cb-payment-promo-field input#cb-payment-promo {
    font-size: 15px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  html body .cb-payment-field svg,
  html body .cb-payment-field .cb-payment-rub {
    right: 11px;
  }
  html body .cb-payment-field svg {
    width: 20px;
    height: 20px;
  }
}