/* =========================================================
   GLOBAL + PAGE BACKGROUND
   ========================================================= */
:root{
  --item-height: 100px;          /* row height inside the window (3 rows visible) */
  --bg-tile: 320px;              /* size of each tiled GIF cell */
}

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

body {
  background-color: #000;           /* base */
  background-image: url('background.gif');
  background-repeat: repeat;        /* tile at original GIF size */
  background-position: 0 0;         /* start at top-left */
  /* background-size: auto;  ← implicit; left here as a reminder not to set it */
}

/* =========================================================
   CABINET + WINDOW
   ========================================================= */
#container{
  /* transparent so the background GIF is visible */
  background: transparent;
  box-shadow: none;                 /* remove panel shadow */
  padding: 50px;

  position: absolute;
  top: 50%; left: 50%;
  margin-left: -320px;              /* center the classic 640x440 cabinet */
  margin-top:  -220px;

  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}
#container.fade-out{
  opacity: 0; transform: scale(.98); filter: blur(3px); pointer-events: none;
}

/* Thin golden rim removed; keep the wrapper for layout */
.window-border{
  padding: 5px;
  background: transparent;
  box-shadow: none;
}

.window{
  position: relative;
  overflow: hidden;
  height: calc(3 * var(--item-height));   /* 3 visible rows */
}

/* Subtle top/bottom shading so symbols pop over the GIF */
.window::before, .window::after{
  content: ""; position: absolute; left: 0; width: 100%; height: 6px; z-index: 5;
}
.window::before{ top:0;    background-image: linear-gradient(to bottom, rgba(0,0,0,.35), transparent); }
.window::after { bottom:0; background-image: linear-gradient(to top,    rgba(0,0,0,.35), transparent); }

/* =========================================================
   REELS & SYMBOLS
   ========================================================= */
.outer-col{
  overflow: hidden;
  width: 100px;
  float: left;
  background: linear-gradient(#16013c, #741a5e, #430155, #16013c); /* strip backdrop */
  height: calc(var(--item-height) * 3);
  position: relative;
  z-index: 1;
}
.outer-spacer{
  width: 8px; height: 100%; float: left;
  border-right: 2px solid #f7ce6c38;
  background-image: linear-gradient(#be4d01, #893802);
  z-index: 1;
}

.col{
  padding: 0 10px;
  will-change: transform;
  /* start with last 3 cells visible; animation drives to 0 */
  transform: translateY(calc(-100% + var(--item-height) * 3));
}
.icon{
  width: 80px; height: var(--item-height);
  position: relative; display: block;
}
.col img{
  width: 100%; height: auto; margin: 10px 0;
  position: relative; z-index: 3; object-fit: contain;
}
.col .icon::after{
  content: ""; position: absolute; top:50%; left:50%;
  width:1px; height:1px; background:#fff;
  box-shadow: 0 0 35px 30px rgba(12,0,14,.69);
  z-index:2; border-radius:50%;
}

/* =========================================================
   SPIN ANIMATION (staggered reels)
   NOTE: child positions are 2,4,6,8,10 for the 5 reels
   because spacers sit between them.
   ========================================================= */
#container.spinning .window > .outer-col:nth-child(2)  .col { animation-delay: 0.00s; }
#container.spinning .window > .outer-col:nth-child(4)  .col { animation-delay: 0.02s; }
#container.spinning .window > .outer-col:nth-child(6)  .col { animation-delay: 0.04s; }
#container.spinning .window > .outer-col:nth-child(8)  .col { animation-delay: 0.06s; }
#container.spinning .window > .outer-col:nth-child(10) .col { animation-delay: 0.08s; }

#container.spinning .col{
  animation-name: scroll;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.65,.97,.72,1);
}
@keyframes scroll { to { transform: translateY(0); } }

/* =========================================================
   WIN OVERLAYS
   ========================================================= */
/* Middle payline highlight */
#winLine{
  pointer-events:none;
  position:absolute; left:0; right:0;
  top: calc(50% - var(--item-height)/2); height: var(--item-height);
  display:none; z-index:10;
}
#winLine::before, #winLine::after{
  content:""; position:absolute; left:0; right:0; height:3px;
  border-top:3px dashed rgba(80,255,100,.95);
  box-shadow: 0 0 8px rgba(80,255,100,.6), 0 0 20px rgba(80,255,100,.6);
  animation: lineFlash .6s linear infinite;
}
#winLine::before{ top:6px; }  #winLine::after{ bottom:6px; }
@keyframes lineFlash{ 0%,100%{opacity:.2} 50%{opacity:1} }

/* Full window border flash when 5-in-a-row */
#winBorder{
  position:absolute; inset:0;
  border:6px solid rgba(80,255,100,.9); border-radius:8px;
  box-shadow: 0 0 12px rgba(80,255,100,.7),
              0 0 30px rgba(80,255,100,.6),
              inset 0 0 14px rgba(80,255,100,.6);
  display:none; z-index:9; animation:borderFlash .8s linear infinite;
}
@keyframes borderFlash{ 0%,100%{opacity:.3} 50%{opacity:1} }

#winBadge{
  display:none; position:absolute; left:50%; top:14px; transform:translateX(-50%);
  z-index:11;
  font: 900 42px/1.1 ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:#00ff6a;
  text-shadow: 0 0 6px rgba(0,255,128,.8), 0 0 14px rgba(0,255,128,.8),
               0 0 28px rgba(0,255,128,.7), 0 0 46px rgba(0,255,128,.6);
  padding:10px 22px; border-radius:999px; background:rgba(0,40,10,.4);
  box-shadow: inset 0 0 18px rgba(0,255,128,.25), 0 10px 30px rgba(0,0,0,.35);
  border:2px solid rgba(0,255,128,.5); letter-spacing:2px;
  animation: winPop .8s ease, glowPulse 1.2s ease-in-out infinite .8s;
}
@keyframes winPop{ 0%{transform:translateX(-50%) scale(.6);opacity:0}
 60%{transform:translateX(-50%) scale(1.12);opacity:1} 100%{transform:translateX(-50%) scale(1)} }
@keyframes glowPulse{ 0%,100%{text-shadow:0 0 6px rgba(0,255,128,.7),0 0 14px rgba(0,255,128,.7),0 0 28px rgba(0,255,128,.6),0 0 32px rgba(0,255,128,.6)}
 50%{text-shadow:0 0 10px rgba(0,255,128,1),0 0 22px rgba(0,255,128,1),0 0 36px rgba(0,255,128,.9),0 0 60px rgba(0,255,128,.8)} }

#container.show-win      #winLine   { display:block; }
#container.show-fullwin  #winBorder { display:block; }
#container.show-win      #winBadge  { display:block; }

/* =========================================================
   SPIN BUTTON — PNG + CRAZY GLOW WHILE SPINNING
   ========================================================= */
.start-button{
  width: clamp(110px, 18vw, 170px);
  height: clamp(110px, 18vw, 170px);

  display:block;
  margin: 16px auto 0;

  background: transparent url('spinbutton.png') center/contain no-repeat;
  border: 0; border-radius: 50%;
  color: transparent; font-size: 0;
  cursor: pointer;

  filter: drop-shadow(0 8px 16px rgba(255,130,220,.35));
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.start-button:hover{
  transform: scale(1.05);
  filter: drop-shadow(0 10px 22px rgba(255,160,240,.55));
}
.start-button:active{
  transform: scale(0.98);
  filter: drop-shadow(0 0 24px rgba(255,150,230,.9));
}

/* While spinning, JS disables the button → unleash the glow */
.start-button:disabled{
  opacity: 1; cursor: not-allowed;
  animation: crazyGlow .9s ease-in-out infinite alternate,
             pulseScale 2.2s ease-in-out infinite;
}
@keyframes crazyGlow{
  0%{
    box-shadow:
      0 0 14px 6px rgba(255,90,200,.75),
      0 0 36px 18px rgba(255,150,255,.45),
      0 0 70px 36px rgba(255,200,255,.30);
    filter: drop-shadow(0 0 18px rgba(255,160,255,.9)) saturate(1.2);
  }
  100%{
    box-shadow:
      0 0 22px 12px rgba(255,130,235,.95),
      0 0 64px 26px rgba(255,180,255,.60),
      0 0 110px 48px rgba(255,220,255,.45);
    filter: drop-shadow(0 0 26px rgba(255,190,255,1)) saturate(1.6) brightness(1.15);
  }
}
@keyframes pulseScale{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }

/* =========================================================
   TRIPPY OVERLAY (wormhole)
   ========================================================= */
#tripOverlay{
  position: fixed; inset: 0;
  background: radial-gradient(100% 100% at 50% 50%, #000 0%, #02030e 55%, #000 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease; z-index: 9999;
}
#tripOverlay.show{ opacity: 1; pointer-events: auto; }
#tripCanvas{ display:block; width:100vw; height:100vh; will-change: transform; }
#tripSkip{
  position: fixed; right: 16px; bottom: 16px;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35);
  padding: 10px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; backdrop-filter: blur(4px);
}