/* ============================================================
   LUCKY BOX — Casino Gold Theme
   ============================================================ */
:root {
  --gold:       #f5c842;
  --gold-mid:   #e07c00;
  --gold-deep:  #b35a00;
  --brown-dark: #0e0600;
  --brown-mid:  #1c0d00;
  --brown-3:    #3d1f00;
  --cream:      #fff8e7;
  --gold-glow:  rgba(245,200,66,0.45);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; width: 100%; }

html { font-size: 10px; line-height: 1.5; }

@media screen and (max-width:400px),(max-height:400px) {
  html { font-size: calc(5px + 1vmin); }
}

body {
  color: var(--gold);
  display: flex;
  font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  text-align: center;
  background: var(--brown-dark);
  position: relative;
  overflow: hidden;
}

a { text-decoration: none; }
h1,h2,h3,p { margin: 0; }
h1,h3 { font-weight: 900; }
h1 { font-size: 3.6rem; line-height: 4rem; }
h3 { font-size: 2.4rem; line-height: 3.2rem; }
img { display: block; }
p { font-size: 2rem; line-height: 2.8rem; }

/* ── Background ── */
.background, .background__stars { height: 100%; width: 100%; }

.background {
  background: linear-gradient(175deg, #0e0600 0%, #2e1500 40%, #1c0d00 70%, #0e0600 100%);
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding-top: 7rem;
  position: absolute;
  z-index: 0;
}

.background::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    60deg, transparent 0, transparent 40px,
    rgba(245,200,66,0.025) 40px, rgba(245,200,66,0.025) 41px
  );
  pointer-events: none;
}

.background__left,
.background__right { display: flex; flex-direction: column; justify-content: space-between; }

.background__left__bottom,
.background__right__bottom { position: relative; }

.background__right__top { margin-top: 50%; }

.background__cloud {
  display: block;
  filter: sepia(1) saturate(1.5) hue-rotate(5deg) brightness(0.5);
  opacity: 0.45;
}

.background__cloud-left-1  { height:8.4rem;  width:9.3rem;  }
.background__cloud-left-2  { height:11.7rem; width:14.6rem; }
.background__cloud-left-3,
.background__cloud-left-4  { bottom:0; position:absolute; }
.background__cloud-left-3  { height:14.5rem; width:16.9rem; }
.background__cloud-left-4  { height:14.2rem; width:13.1rem; }
.background__cloud-right-1 { height:11.5rem; width:11.4rem; }
.background__cloud-right-2,
.background__cloud-right-3 { bottom:0; right:0; position:absolute; }
.background__cloud-right-2 { height:14.5rem; width:20.5rem; }
.background__cloud-right-3 { height:8.7rem;  width:17.3rem; }

.background__stars { bottom:0; left:0; position:absolute; right:0; top:0; }

.background__star {
  position: absolute;
  filter: sepia(1) saturate(5) hue-rotate(5deg) brightness(1.3);
}
.background__star-1 { height:2.4rem; left:2rem;  top:32%;  width:2.4rem; animation: twinkle 3.0s ease-in-out infinite; }
.background__star-2 { bottom:32%;   height:3.2rem; left:4rem; width:3.2rem; animation: twinkle 2.4s ease-in-out infinite 0.6s; }
.background__star-3 { height:3.2rem; opacity:.75; right:3rem; top:8%;  width:3.2rem; animation: twinkle 3.5s ease-in-out infinite 1.1s; }
.background__star-4 { height:1.6rem; opacity:.4;  right:6rem; top:50%; width:1.6rem; animation: twinkle 2.8s ease-in-out infinite 0.3s; }
.background__star-5 { height:2.4rem; right:-1rem; top:63%; width:2.4rem; animation: twinkle 3.2s ease-in-out infinite 1.8s; }
.background__star-6 { bottom:10%;   height:2.6rem; right:40%; width:2.6rem; animation: twinkle 2.6s ease-in-out infinite 0.9s; }

@keyframes twinkle {
  0%,100% { opacity:.9; transform:scale(1); }
  50%      { opacity:.2; transform:scale(.7); }
}

/* ── Modal ──
   IMPORTANT: no ::before pseudo-element with backdrop-filter here.
   backdrop-filter on a ::before creates a stacking context that covers
   .modal__window and blocks all pointer events on it.
   Use background rgba directly on .modal instead. ── */
.modal {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 1.2rem;
  position: absolute;
  width: 100%;
  z-index: 3;
  background: rgba(0,0,0,0.72);
}

.modal__window {
  background: linear-gradient(160deg, #2e1500 0%, #1c0d00 100%);
  border: 1.5px solid var(--gold);
  border-radius: 2rem;
  max-width: 38.4rem;
  width: 100%;
  padding: 2.4rem 2rem;
  position: relative;
  box-shadow:
    0 0 3rem var(--gold-glow),
    0 0 7rem rgba(245,200,66,0.1),
    inset 0 1px 0 rgba(245,200,66,0.2);
  text-align: center;
}

/* Corner diamond accents — purely decorative, pointer-events:none */
.modal__window::before,
.modal__window::after {
  content: '♦';
  position: absolute;
  font-size: 1.4rem;
  color: var(--gold);
  opacity: 0.6;
  pointer-events: none;
}
.modal__window::before { top:1rem;    left:1.4rem;  }
.modal__window::after  { bottom:1rem; right:1.4rem; }

.modal__window__title {
  color: var(--gold);
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 0 1.5rem var(--gold-glow);
  margin-bottom: 1.2rem;
}

.modal__window__text {
  color: #c9a050;
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.8rem;
  margin-bottom: 3.2rem;
}

.modal__window__button {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 60%, var(--gold-deep) 100%);
  border-radius: 1rem;
  color: var(--brown-mid);
  display: block;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 3.2rem;
  padding: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 0.4rem 2rem rgba(245,200,66,0.4);
  cursor: pointer;
}

/* ── Game Screen ── */
.game {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 2.8rem;
  position: relative;
  width: 100%;
  z-index: 1;
  text-align: center;
}

@media screen and (orientation:landscape) and (max-height:550px) {
  .game { flex-direction: row; }
}

.game__header { max-width: 55rem; text-transform: uppercase; }

.game__header__h1 {
  color: var(--gold);
  text-shadow: 0 0 2rem var(--gold-glow), 0 2px 6px rgba(0,0,0,.7);
}

.game__header__h1 b { color: var(--cream); }

.game__header__h3 { color: #c9a050; font-weight: 700; letter-spacing: .04em; }

.game__header__text { color: #e8d090; text-transform: initial; }

/* ── Chest ── */
.game__main {
  max-height: 35.7rem;
  max-width: 35.7rem;
  position: relative;
}

.game__main::before {
  content: '';
  position: absolute;
  inset: -1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(245,200,66,.3);
  animation: ringPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

.game__main::after {
  content: '';
  position: absolute;
  inset: -3rem;
  border-radius: 50%;
  border: 1px solid rgba(245,200,66,.12);
  animation: ringPulse 2.5s ease-in-out infinite .6s;
  pointer-events: none;
}

@keyframes ringPulse {
  0%,100% { transform:scale(1);    opacity:.5; }
  50%      { transform:scale(1.06); opacity:.15; }
}

.game__main__image {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  max-height: 100%;
  max-width: 100%;
  filter: drop-shadow(0 0 2rem rgba(245,200,66,.5));
}

.game__main__image-rotate-1 {
  transform: rotate(8deg);
  filter: drop-shadow(0 0 3rem rgba(245,200,66,.8));
}

.game__main__image-rotate-2 {
  transform: rotate(-8deg);
  filter: drop-shadow(0 0 3rem rgba(245,200,66,.8));
}

.game__main__image-hand {
  bottom: 5.5rem;
  height: 8rem;
  position: absolute;
  right: 7rem;
  width: 8rem;
  filter: drop-shadow(0 .4rem .8rem rgba(0,0,0,.5));
}

.game__main__image-hand-animation-pulse {
  animation: handPulse 2s ease-in-out infinite;
}

@keyframes handPulse {
  0%,100% { transform:scale(1)   rotate(-5deg); }
  50%      { transform:scale(1.2) rotate(-5deg); }
}

/* ── Bonus Collector Bar ── */
.bonus-collector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(245,200,66,0.07);
  border: 1px solid rgba(245,200,66,0.3);
  border-radius: 1.4rem;
  padding: 0.8rem 2rem;
  margin-top: 1.2rem;
  min-width: 22rem;
}

.bonus-collector__icon {
  font-size: 2rem;
  animation: coinSpin 3s linear infinite;
}

@keyframes coinSpin {
  0%   { transform: rotateY(0deg); }
  45%  { transform: rotateY(0deg); }
  50%  { transform: rotateY(90deg); }
  55%  { transform: rotateY(180deg); }
  100% { transform: rotateY(180deg); }
}

.bonus-collector__label {
  font-size: 1.4rem;
  color: #c9a050;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
}

.bonus-collector__value {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 1rem rgba(245,200,66,.5);
  letter-spacing: .03em;
  min-width: 8rem;
  text-align: left;
}

.bonus-collector__value.bump {
  animation: valueBump .3s ease;
}

@keyframes valueBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); color: var(--cream); text-shadow: 0 0 1.5rem rgba(245,200,66,.9); }
  100% { transform: scale(1); }
}

/* ── Floating Bonus Values ── */
.game__main__bonus-container {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.game__main__bonus-value {
  animation: bonusPop 2.5s forwards;
  color: var(--gold);
  font-size: 2.4rem;
  font-weight: 900;
  opacity: 1;
  position: absolute;
  text-shadow: 0 0 1rem rgba(245,200,66,.8), 0 2px 4px rgba(0,0,0,.6);
  letter-spacing: .03em;
  pointer-events: none;
}

@keyframes bonusPop {
  0%   { opacity:0;  transform:translateY(0)      scale(.5); }
  15%  { opacity:1;  transform:translateY(-1rem)   scale(1.2); }
  35%  { opacity:1;  transform:translateY(-2.5rem) scale(1); }
  100% { opacity:0;  transform:translateY(-7rem)   scale(.9); }
}

/* ── Progress Bar ── */
.game__footer {
  bottom: 2.8rem;
  left: 2.8rem;
  position: absolute;
  right: 2.8rem;
}

.game__progress {
  align-items: center;
  background: rgba(245,200,66,.08);
  border: 1px solid rgba(245,200,66,.3);
  border-radius: 1.6rem;
  color: var(--cream);
  display: flex;
  height: 5.6rem;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.game__progress__bar {
  bottom: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-mid), var(--gold));
  left: 0;
  position: absolute;
  top: 0;
  transition: width 1s linear;
  width: 0;
  z-index: 0;
}

.game__progress__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(200%); }
}

.game__progress__text {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.8rem;
  position: relative;
  z-index: 1;
  color: var(--cream);
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
  letter-spacing: .03em;
}

/* ── Final Screen ── */
.game-final-screen {
  align-items: center;
  background: linear-gradient(160deg, #0e0600 0%, #3d1f00 40%, #2e1500 70%, #0e0600 100%);
  bottom: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  padding: 2.8rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  text-align: center;
}

.game-final-screen::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-60%);
  width: 50rem; height: 50rem;
  background: radial-gradient(circle, rgba(245,200,66,.2) 0%, transparent 70%);
  pointer-events: none;
}

@media screen and (orientation:landscape) and (max-height:550px) {
  .game-final-screen { flex-direction: row; }
}

.game-final-screen .game__header   { max-width: 35.7rem; }

.game-final-screen .game__header__h1 {
  color: var(--gold);
  animation: pulseGold 2s ease-in-out infinite;
}

@keyframes pulseGold {
  0%,100% { text-shadow: 0 0 2rem var(--gold-glow); }
  50%      { text-shadow: 0 0 4rem rgba(245,200,66,.9), 0 0 8rem rgba(245,200,66,.3); }
}

.game-final-screen .game__header__h3 { color: rgba(201,160,80,.75); }

.game-final-screen .game__main__image {
  transform: scale(1.45);
  filter: drop-shadow(0 0 4rem rgba(245,200,66,.7));
}

/* ── Total Winnings Panel ── */
.final-total {
  background: rgba(245,200,66,0.08);
  border: 1.5px solid rgba(245,200,66,.4);
  border-radius: 1.6rem;
  padding: 1.2rem 2.4rem;
  margin: 1.2rem auto;
  max-width: 34rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.final-total__label {
  font-size: 1.4rem;
  color: #c9a050;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: .4rem;
}

.final-total__amount {
  font-size: 4rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 2rem var(--gold-glow);
  letter-spacing: .04em;
  animation: pulseGold 2s ease-in-out infinite;
}

/* ── Claim Button ── */
.game__button {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 60%, var(--gold-deep) 100%);
  border-radius: 1rem;
  border: none;
  color: var(--brown-mid);
  cursor: pointer;
  display: block;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 3.2rem;
  padding: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  width: 100%;
  margin: auto;
  max-width: 42rem;
  box-shadow:
    0 .4rem 2rem rgba(245,200,66,.5),
    inset 0 1px 0 rgba(255,255,255,.3);
  animation: buttonGlow 2s ease-in-out infinite;
}

@keyframes buttonGlow {
  0%,100% { box-shadow: 0 .4rem 2rem rgba(245,200,66,.5), inset 0 1px 0 rgba(255,255,255,.3); }
  50%      { box-shadow: 0 .4rem 3rem rgba(245,200,66,.9), 0 0 5rem rgba(245,200,66,.3), inset 0 1px 0 rgba(255,255,255,.3); }
}

/* ── Utilities ── */
.color-yellow { color: var(--gold); }

.blur { filter: blur(8px); }

.hidden { display: none !important; }

.visible {
  animation: makeVisible .6s ease forwards;
  display: flex;
  opacity: 0;
}

@keyframes makeVisible {
  0%   { opacity:0; transform:translateY(1rem); }
  100% { opacity:1; transform:translateY(0); }
}

html[dir=rtl] .background__cloud { transform: scaleX(-1); }