/* BLACKSAW2081 LAB v2.8.96 — rozbudowany punkt 2 instrukcji */

.shift-guide-section{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.shift-guide-section h4{
  margin:3px 0 8px;
  color:#fff;
  font-size:1rem;
  letter-spacing:.04em;
}

.shift-guide-lead,
.shift-guide-starts,
.shift-guide-block,
.shift-guide-respawn,
.shift-guide-objects,
.shift-guide-summary{
  border:1px solid rgba(218,44,62,.34);
  background:linear-gradient(180deg,rgba(20,18,18,.93),rgba(7,8,10,.97));
  box-shadow:inset 0 0 18px rgba(0,0,0,.48),0 5px 16px rgba(0,0,0,.22);
}

.shift-guide-lead{
  padding:14px 16px;
}

.shift-guide-lead p:last-child{
  margin-bottom:0;
}

.shift-guide-starts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  padding:1px;
}

.shift-guide-starts > div{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  background:rgba(255,255,255,.025);
}

.shift-guide-starts strong{
  color:#f2bd54;
}

.shift-guide-block{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:16px;
  padding:15px;
  align-items:stretch;
}

.shift-guide-block.reverse .shift-guide-copy{
  order:2;
}

.shift-guide-block.reverse .shift-animation-placeholder{
  order:1;
}

.shift-guide-copy ul{
  margin:8px 0 0;
  padding-left:20px;
}

.shift-guide-copy li{
  margin:4px 0;
}

.shift-guide-label{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border:1px solid rgba(238,20,71,.66);
  background:rgba(238,20,71,.11);
  color:#ff6a7c;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.11em;
}

.shift-guide-label.danger{
  border-color:rgba(255,129,45,.72);
  background:rgba(255,106,20,.1);
  color:#ffad63;
}

.shift-guide-label.respawn{
  border-color:rgba(76,157,255,.72);
  background:rgba(49,132,237,.11);
  color:#75b5ff;
}

.shift-animation-placeholder{
  position:relative;
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:16px;
  overflow:hidden;
  border:1px dashed rgba(246,196,83,.55);
  background:
    linear-gradient(rgba(255,255,255,.018),rgba(255,255,255,.018)),
    repeating-linear-gradient(135deg,rgba(246,196,83,.035) 0 8px,transparent 8px 16px);
  color:#d7d0c2;
  text-align:center;
}

.shift-animation-placeholder::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 24px rgba(0,0,0,.65);
}

.shift-placeholder-title{
  color:#f2bd54;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
}

.shift-animation-placeholder small{
  color:#928b81;
  font-size:.68rem;
}

.shift-placeholder-board{
  display:flex;
  gap:4px;
}

.shift-placeholder-board span,
.shift-placeholder-column span{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.24);
  background:
    linear-gradient(135deg,rgba(230,178,31,.28),rgba(47,43,35,.72));
  box-shadow:inset 0 0 8px rgba(0,0,0,.7);
}

.shift-placeholder-column{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.shift-placeholder-arrows{
  color:#ffcc55;
  font-size:1.55rem;
  font-weight:900;
  line-height:1;
  text-shadow:0 0 8px rgba(255,178,38,.45);
}

.shift-placeholder-token{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:2px solid #f4d44d;
  border-radius:50%;
  background:#181816;
  color:#f4d44d;
  font-size:2rem;
  box-shadow:0 0 14px rgba(244,212,77,.3);
}

.shift-placeholder-track,
.shift-placeholder-ejection{
  color:#e9e4da;
  font-size:1.18rem;
  letter-spacing:.08em;
}

.danger-placeholder{
  border-color:rgba(255,68,68,.6);
}

.shift-guide-respawn{
  padding:15px;
}

.shift-guide-respawn-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.shift-guide-respawn-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.shift-guide-respawn-grid > div{
  padding:11px 12px;
  border:1px solid rgba(75,134,205,.28);
  background:rgba(27,44,63,.22);
}

.shift-guide-respawn-grid strong{
  display:block;
  margin-bottom:5px;
  color:#77b8ff;
}

.respawn-placeholder{
  margin-top:13px;
  min-height:150px;
  border-color:rgba(75,148,235,.58);
}

.shift-placeholder-respawn-demo{
  display:flex;
  align-items:center;
  gap:15px;
}

.respawn-cell{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:2px solid #4d9fff;
  background:rgba(39,95,155,.24);
  color:#75b5ff;
  font-weight:950;
  font-size:1.35rem;
  box-shadow:0 0 13px rgba(69,145,235,.35);
}

.moving-cells{
  color:#e7e0d5;
  font-size:1.15rem;
}

.shift-guide-objects{
  padding:14px 16px;
}

.shift-guide-summary{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-color:rgba(246,196,83,.48);
  background:linear-gradient(90deg,rgba(83,56,11,.24),rgba(11,10,10,.96));
}

.shift-guide-summary strong{
  color:#f2bd54;
  white-space:nowrap;
}

@media (max-width:900px){
  .shift-guide-block{
    grid-template-columns:1fr;
  }

  .shift-guide-block.reverse .shift-guide-copy,
  .shift-guide-block.reverse .shift-animation-placeholder{
    order:initial;
  }

  .shift-guide-respawn-grid,
  .shift-guide-starts{
    grid-template-columns:1fr;
  }

  .shift-guide-summary{
    grid-template-columns:1fr;
  }
}