html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
/* Sky gradient & clouds */
#bg {
  position: fixed; inset:0; z-index:-10;
  --sky-top:  #a0d8f0;
  --sky-bot:  #3fc5f0;
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-bot) 60%);
  overflow:hidden;
}
#bg .sun {
  position:absolute; z-index:-9;
  top:10%; left:80%;
  width:120px; height:120px;
    /* use vars for the two gradient stops */
  --sun-inner: #fff176;
  --sun-outer: #ffb300;
  --sun-shadow: rgba(255,183,0,0.5);

  background: radial-gradient(
    circle at 30% 30%,
    var(--sun-inner) 0%,
    var(--sun-outer) 100%
  );
  border-radius:50%;
  box-shadow:0 0 60px rgba(255,183,0,0.5);
}
#bg .cloud {
  position:absolute; z-index:-9;
  background: var(--cloudColor);
  box-shadow:30px 10px 0 var(--cloudColor),
             60px -10px 0 var(--cloudColor),
             90px 15px 0 var(--cloudColor);
  border-radius:50px; opacity:0.85;
  animation: drift 60s linear infinite;
}
@keyframes drift {
  from { transform: translateX(0) }
  to   { transform: translateX(120vw) }
}

/* Beach image (day) */
.beach-img {
  position:absolute; bottom:0; left:0;
  width:100%; height:auto; max-height:100vh;
  z-index:-8;
}

/* Chest */
#chestWrapper { position:relative; z-index:1; }
#chest {
  width:120px; height:120px;
  background: url('https://rimuruslime.com/wp-content/uploads/2025/07/mysterychest.png') center/cover no-repeat;
  border-radius:12px; border:2px solid #1f1f1f;
  box-shadow:0 0 15px rgba(255,59,130,0.3);
  margin:0 auto;
}

/* Cards container */
#cardsContainer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;   /* was 100vw */
  height: 100%;  /* was 100vh—100% is usually safer here too */
  pointer-events: none;
  z-index: 2;
}
.card {
  width: var(--card-w);
  height: var(--card-h);
  position:absolute; top:0; left:0;
  border-radius:14px;
  background-size:cover; background-position:center;
  transform-origin:center center;
  z-index:2;
}
.card.winner { z-index:3; }

/* Button & result */
#spinBtn {
  margin-top:2rem; padding:.8rem 2rem;
  font:600 1rem 'Poppins', sans-serif;
  background: var(--accent); color:#0e0e0e;
  border:none; border-radius:999px; cursor:pointer;
  z-index:1; transition:transform .2s;
}
#spinBtn:active     { transform:scale(.95); }
#spinBtn:disabled   { opacity:.5; cursor:not-allowed; }
#result { margin-top:1rem; min-height:1.2em; color:#fff; text-align:center; }

/* Vars & base */
:root {
  --accent:#ff3b82;
  --card-w:160px;
  --card-h:230px;
  --cloudColor:#ffffff;
}
html,body,#event-spin { margin:0; padding:0; box-sizing:border-box; }
/* assume your header is exactly 60px tall */
#event-spin {
  height: calc(100vh - 150px);
  margin-top: 60px;      /* push it below the header */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  color: #e0e0e0;
}

#event-spin h1 {
  /* 1) Set your image as the heading’s background */
  background: url('https://rimuruslime.com/wp-content/uploads/2025/07/TENSURA-SUMMER-EVENT-03-07-2025.png') 
              no-repeat center center;
  background-size: contain;

  /* 2) Force the element to match your image’s dimensions */
  width: 90%;          /* fills 90% of the parent’s width */
  max-width: 600px;    /* never grow past the image’s native width */
  height: 160px;  /* ← match your actual image height */

  /* 3) Hide the text but keep it accessible to screen‐readers */
  text-indent: 100%;  /* push text off‐screen */
  white-space: nowrap;
  overflow: hidden;

  /* 4) Center it in your flex layout as before */
  display: block;
  margin: 0 auto;
  position: relative;
  top: -20px;  /* tweak as needed */
}
/* label inside the winner card */
.card-label {
  position: absolute;
  top: 100%;      /* 8px up from the bottom edge of the card */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 5;       /* above the card image */
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
}

/* text styling */
.card-label .name {
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);

}

.card-label .tier {
  color: #eee;
  font-size: 0.8rem;
  margin-top: 2px;
}
#shell-counter {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  
  width: 400px;               /* your desired width */
  /* no fixed height! */

  aspect-ratio: 5 / 2;        /* adjust to match your plank image’s shape */
  background: url('wooden-board.png') center center / contain no-repeat;
  
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: top center;

  padding: 0.3rem 0.6rem;
  color: black;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;

  border-radius: 0.3rem;
  z-index: 1;
    animation: wiggle 3s ease-in-out infinite;

}

@keyframes wiggle {
  0%   { transform: translateX(-50%) rotate(3deg); }
  50%  { transform: translateX(-50%) rotate(-3deg); }
  100% { transform: translateX(-50%) rotate(3deg); }
}

#shell-counter .icon,
#shell-counter #shell-count {
  color: #264653;
  font-size: 1.8rem;         /* bigger text */
  transform: translateY(50%);
}
#shell-fx-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9999;
}