:root{
  --cell: 120px;
  --reelW: 150px;
  --img: 104px;
  --green:#70E24E;
  --green2:#9CFF7D;
  --black:#000;
  --white:#fff;
}

*{ box-sizing:border-box; }

html, body{
  min-height:100%;
}

body{
  margin:0;
  min-height:100svh;
  height:100dvh;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:'Rubik', Arial, sans-serif;
  color:var(--white);
  background:#000;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 10% 12%, rgba(112,226,78,.20), transparent 12%),
    radial-gradient(circle at 88% 18%, rgba(112,226,78,.12), transparent 16%),
    radial-gradient(circle at 18% 86%, rgba(112,226,78,.13), transparent 18%),
    radial-gradient(circle at 78% 86%, rgba(112,226,78,.09), transparent 20%);
  filter:blur(8px);
  pointer-events:none;
}

body::after{
  content:"SWANOVA";
  position:fixed;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  z-index:0;
  color:rgba(255,255,255,.055);
  font-size:clamp(88px, 20vw, 260px);
  font-weight:900;
  line-height:.8;
  letter-spacing:-8px;
  pointer-events:none;
}

.game-frame{
  position:fixed;
  inset:24px 34px;
  border-top:2px solid var(--green);
  border-bottom:2px solid var(--green);
  pointer-events:none;
  z-index:1;
}

.slot-wrapper{
  position:relative;
  z-index:2;
  text-align:center;
  padding:34px 22px;
}

.game-label{
  margin-bottom:10px;
  color:var(--green);
  font-size:18px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}

.game-title{
  margin:0 0 24px;
  color:#f3f3f3;
  font-size:clamp(54px, 10vw, 120px);
  font-weight:900;
  letter-spacing:-4px;
  line-height:.82;
  text-transform:uppercase;
  text-shadow:0 0 24px rgba(112,226,78,.18);
}

.slot{
  position:relative;
  display:flex;
  gap:18px;
  padding:24px;
  border:4px solid var(--green);
  background:#000;
  box-shadow:
    0 0 36px rgba(112,226,78,.28),
    inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
}

.slot::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(circle at 20% 25%, rgba(112,226,78,.18), transparent 32%),
    radial-gradient(circle at 80% 75%, rgba(112,226,78,.12), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 42%);
  filter:blur(9px);
  pointer-events:none;
}

.reel{
  position:relative;
  width:var(--reelW);
  height:calc(var(--cell) * 3);
  overflow:hidden;
  border:3px solid var(--green);
  background:#000;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.95),
    0 0 20px rgba(112,226,78,.18);
}

.reel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.95) 0%,
      rgba(0,0,0,0) 32%,
      rgba(0,0,0,0) 68%,
      rgba(0,0,0,.95) 100%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 40%);
  pointer-events:none;
  z-index:3;
}

.reel::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:var(--cell);
  height:var(--cell);
  border:3px solid var(--green);
  box-shadow:
    0 0 24px rgba(112,226,78,.34),
    inset 0 0 24px rgba(112,226,78,.10);
  pointer-events:none;
  z-index:4;
}

.reel-track{
  will-change:transform, filter;
  transform:translate3d(0,0,0);
}

.symbol{
  position:relative;
  width:var(--reelW);
  height:var(--cell);
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  backface-visibility:hidden;
}

.symbol::before{
  content:"";
  position:absolute;
  width:calc(var(--reelW) - 24px);
  height:calc(var(--cell) - 24px);
  border:2px solid rgba(112,226,78,.18);
  background:rgba(112,226,78,.04);
  pointer-events:none;
}

.symbol img{
  width:var(--img);
  height:var(--img);
  object-fit:contain;
  display:block;
  z-index:2;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.75));
}

.reel-track.spinning{
  filter:blur(1.7px) contrast(1.08) saturate(1.15);
}

.spin-btn{
  margin-top:22px;
  min-width:280px;
  padding:18px 60px;
  border:3px solid var(--green);
  background:var(--green);
  color:#000;
  font-family:inherit;
  font-size:28px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.28s ease;
  box-shadow:0 0 28px rgba(112,226,78,.35);
}

.spin-btn:hover{
  background:#000;
  color:var(--green);
  transform:translateY(-5px);
  box-shadow:0 0 36px rgba(112,226,78,.52);
}

.spin-btn:active{
  transform:translateY(-1px) scale(.99);
}

.spin-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.result{
  margin-top:16px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:26px;
  font-weight:900;
  text-transform:uppercase;
}

.result.win{
  color:var(--green2);
  text-shadow:0 0 18px rgba(112,226,78,.7);
}

.reel.winflash::after{
  animation:flash .9s ease-in-out;
}

@keyframes flash{
  0%,100%{
    box-shadow:0 0 24px rgba(112,226,78,.34), inset 0 0 24px rgba(112,226,78,.10);
  }
  50%{
    box-shadow:0 0 70px rgba(112,226,78,.75), inset 0 0 36px rgba(112,226,78,.26);
  }
}

.back-btn{
  position:fixed;
  top:calc(22px + env(safe-area-inset-top));
  left:calc(28px + env(safe-area-inset-left));
  z-index:10;

  display:inline-flex;
  align-items:center;
  gap:10px;

  border:3px solid var(--green);
  background:#000;
  color:var(--green);
  padding:12px 18px;

  font-family:inherit;
  font-size:18px;
  font-weight:900;
  text-transform:uppercase;

  cursor:pointer;
  transition:.28s ease;
}

.back-btn:hover{
  background:var(--green);
  color:#000;
  transform:translateY(-4px);
  box-shadow:0 0 24px rgba(112,226,78,.45);
}

.back-ico{
  font-size:24px;
  line-height:1;
}

@media (prefers-reduced-motion:no-preference){
  .spin-btn:not(:disabled){
    animation:pulseGlow 2s ease-in-out infinite;
  }

  @keyframes pulseGlow{
    0%,100%{ box-shadow:0 0 22px rgba(112,226,78,.28); }
    50%{ box-shadow:0 0 42px rgba(112,226,78,.58); }
  }
}

@media (max-width:900px){
  .game-frame{
    inset:18px;
  }

  .slot-wrapper{
    width:100%;
    padding:74px 14px 14px;
  }

  .game-label{
    font-size:12px;
    letter-spacing:3px;
  }

  .game-title{
    font-size:clamp(46px, 16vw, 72px);
    letter-spacing:-2px;
    margin-bottom:18px;
  }

  .slot{
    gap:8px;
    padding:8px;
    width:100%;
  }

  :root{
    --reelW:calc((100vw - 28px - 16px - (2 * 8px)) / 3);
    --cell:clamp(96px, 15svh, 138px);
    --img:clamp(70px, 10svh, 104px);
  }

  .spin-btn{
    width:100%;
    min-width:0;
    padding:16px 0;
    font-size:22px;
  }

  .result{
    font-size:20px;
    min-height:30px;
  }

  .back-btn{
    top:18px;
    left:18px;
    padding:9px 12px;
    font-size:14px;
    border-width:2px;
  }
}