:root{
  --bayside-silver: #c0c0c0;
  --bayside-silver-soft: #e8e8e8;
}

.bayside-advent-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
  font-family: "Bebas Neue", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--bayside-silver);
  letter-spacing: 0.4px;
}

.bayside-advent-header {
  text-align: center;
  margin-bottom: 16px;
}

.bayside-advent-header h2 {
  font-size: 38px;
  margin: 0 0 6px;
  letter-spacing: 1px;
  color: var(--bayside-silver);
}

.bayside-advent-header p {
  font-size: 18px;
  color: var(--bayside-silver-soft);
}

.bayside-advent-clientbox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto 12px;
  padding: 12px;
  border: 1px solid #2a2a2a;
  background: #0a0a0a;
}

.bayside-advent-clientbox label {
  font-size: 14px;
  opacity: 0.9;
  color: var(--bayside-silver);
}

.bayside-advent-clientbox input {
  padding: 10px 12px;
  border: 1px solid #3a3a3a;
  outline: none;
  font-size: 18px;
  background: #050505;
  color: var(--bayside-silver);
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.6px;
}

.bayside-advent-clientbox input::placeholder{
  color: #7a7a7a;
}

.bayside-advent-lockedhint{
  text-align:center;
  font-size:18px;
  margin: 6px 0 16px;
  color: var(--bayside-silver-soft);
}

.bayside-advent-grid {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .bayside-advent-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .bayside-advent-grid { grid-template-columns: repeat(2, 1fr); }
}

.bayside-day {
  position: relative;
  background: #050505;
  border: 1px solid #2a2a2a;
  color: var(--bayside-silver);
  overflow: hidden;
  min-height: 210px;
  box-shadow: 0 0 0 1px rgba(192,192,192,0.05) inset;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bayside-day:hover{
  transform: translateY(-2px);
  border-color: rgba(192,192,192,0.35);
  box-shadow: 0 6px 18px rgba(192,192,192,0.08);
}

.bayside-day.locked-day{
  cursor: default;
}
.bayside-day.locked-day:hover{
  transform:none;
  box-shadow:none;
  border-color:#2a2a2a;
}

.bayside-day.already-scratched,
.bayside-day.clicked-once {
  border-color: rgba(192,192,192,0.55);
  box-shadow: 0 0 0 1px rgba(192,192,192,0.15) inset;
  cursor: default;
}

.bayside-day-inner {
  position: relative;
  height: 100%;
  padding: 10px;
}

.bayside-day-num {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 22px;
  opacity: 0.95;
  z-index: 3;
  color: var(--bayside-silver);
}

.bayside-prize-reveal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: 20px;
  z-index: 1;
  background: radial-gradient(circle at top, #171717, #000);
  gap: 10px;
}

.bayside-prize-reveal.locked {
  filter: grayscale(1);
  opacity: 0.75;
}

.bayside-gift{
  font-size: 46px;
  animation: bayside-gift-float 1.6s ease-in-out infinite;
}
@keyframes bayside-gift-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.bayside-cta{
  font-size: 18px;
  color: var(--bayside-silver-soft);
  letter-spacing: 1.2px;
}

.bayside-prize-reveal.revealed {
  animation: bayside-pop 0.35s ease;
}

@keyframes bayside-pop {
  0% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.bayside-prize-img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  border: 1px solid rgba(192,192,192,0.25);
  background: rgba(192,192,192,0.05);
  padding: 6px;
}

.bayside-prize-text {
  font-size: 20px;
  line-height: 1.1;
  padding: 8px 10px;
  background: rgba(192,192,192,0.08);
  border: 1px solid rgba(192,192,192,0.2);
  color: var(--bayside-silver);
}

/* suspense overlay */
.bayside-opening-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
  place-items:center;
  background: radial-gradient(circle at center, rgba(0,0,0,.9), rgba(0,0,0,.98));
}
.bayside-opening-overlay.show{
  display:grid;
  animation: bayside-overlay-in .2s ease;
}
@keyframes bayside-overlay-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

.bayside-opening-box{
  display:grid;
  place-items:center;
  gap:8px;
  padding:14px 18px;
  border:1px solid rgba(192,192,192,0.35);
  background: rgba(10,10,10,0.9);
  box-shadow: 0 0 22px rgba(192,192,192,0.12);
}
.bayside-opening-gift{
  font-size:54px;
  animation: bayside-shake .6s ease-in-out infinite;
}
@keyframes bayside-shake{
  0%,100%{ transform: rotate(0deg) scale(1); }
  25%{ transform: rotate(-6deg) scale(1.03); }
  75%{ transform: rotate(6deg) scale(1.03); }
}
.bayside-opening-text{
  font-size:20px;
  letter-spacing:1.2px;
  color: var(--bayside-silver-soft);
  position:relative;
}
.bayside-opening-text:after{
  content:"";
  display:block;
  height:2px;
  width:100%;
  margin-top:6px;
  background: linear-gradient(90deg, transparent, var(--bayside-silver), transparent);
  animation: bayside-scan 1s linear infinite;
}
@keyframes bayside-scan{
  0%{ transform: translateX(-40%); opacity:.4; }
  50%{ transform: translateX(0); opacity:1; }
  100%{ transform: translateX(40%); opacity:.4; }
}

.bayside-locked {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4;
  font-size: 18px;
  background: rgba(0,0,0,0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bayside-silver-soft);
}

.bayside-advent-footer {
  text-align: center;
  margin-top: 14px;
  font-size:16px;
  color: var(--bayside-silver-soft);
  opacity: 0.9;
}

/* Confetti */
.bayside-confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}

.bayside-confetti {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  background: var(--bayside-silver);
  opacity: 0.95;
  animation: bayside-confetti-fall 1.9s ease-in forwards;
}

.bayside-confetti:nth-child(3n) { width: 6px; height: 10px; background: #ffffff; }
.bayside-confetti:nth-child(4n) { width: 10px; height: 16px; background: var(--bayside-silver-soft); }

@keyframes bayside-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(240px) rotate(720deg); opacity: 0; }
}