/* ===== Stack Tower ===== */

.st-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:20px;
}

.st-tower{
  position:relative;
  width:min(360px, 92vw);
  height:420px;
  background:#020617;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  overflow:hidden;
}

.st-block{
  position:absolute;
  height:24px;
  border-radius:6px;
  background:linear-gradient(90deg,#22c55e,#2dd4bf);
  box-shadow:0 6px 16px rgba(15,23,42,.8);
}

/* Stack thumbnail */

.shot-stack{
  position:relative;
  width:70%;
  height:70%;
}

.shot-stack-block{
  position:absolute;
  left:10%;
  width:80%;
  height:16%;
  border-radius:4px;
  background:#22c55e;
}
.shot-stack-block.b1{ bottom:5%; }
.shot-stack-block.b2{ bottom:24%; width:65%; left:18%; background:#2dd4bf;}
.shot-stack-block.b3{ bottom:43%; width:50%; left:25%; background:#38bdf8;}

/* --- Stack Neon Look --- */

.stack-playfield.neon-playfield {
  padding: 10px;
}

.stack-block {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  box-shadow: 0 0 16px rgba(56,189,248,.75);
  border-radius: 8px;
}

/* current moving block */
.stack-block.active {
  box-shadow: 0 0 20px rgba(56,189,248,1);
}

/* perfect placement */
.stack-block.perfect {
  animation: flash-stack .3s ease-out;
}

@keyframes flash-stack {
  0%   { box-shadow: 0 0 26px rgba(250,204,21,1); }
  100% { box-shadow: 0 0 16px rgba(56,189,248,.8); }
}