.lol-wrap{
  max-width:1080px;
}

/* ---------- Volume panel (farm-timer와 동일한 관례) ---------- */
.volume-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:34px;
  padding:14px 18px;
  background:rgba(63,242,255,0.05);
  border:1px solid rgba(63,242,255,0.18);
  border-radius:8px;
}
.volume-control{
  display:flex;
  align-items:center;
  gap:10px;
}
.vol-btn{
  width:30px;
  height:30px;
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  color:var(--cyan);
  background:rgba(63,242,255,0.08);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:4px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.vol-btn:hover{
  background:var(--cyan);
  color:#04141a;
}
.volume-bar-track{
  width:100px;
  height:6px;
  background:rgba(63,242,255,0.12);
  border-radius:3px;
  overflow:hidden;
}
.volume-bar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition:width .15s ease;
}

.lol-toolbar{
  display:flex;
  justify-content:center;
  margin-top:22px;
}

/* ---------- Slot grid ---------- */
.lol-slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin-top:18px;
}
.lol-slot{
  padding:20px 18px;
  background:linear-gradient(180deg, rgba(63,242,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.18);
  border-radius:8px;
}
.lol-slot-name-input{
  width:100%;
  padding:9px 10px;
  margin-bottom:16px;
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(63,242,255,0.3);
  border-radius:4px;
  color:#fff;
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  text-align:center;
  outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.lol-slot-name-input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 12px rgba(63,242,255,0.3);
}

.lol-spell-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lol-spell-row + .lol-spell-row{
  margin-top:14px;
}
.lol-spell-select{
  width:100%;
  padding:8px 10px;
  background:rgba(4,5,10,0.7);
  border:1px solid rgba(63,242,255,0.3);
  border-radius:4px;
  color:#e6f7ff;
  font-family:'Noto Sans KR',sans-serif;
  font-size:13px;
  outline:none;
  cursor:pointer;
}
.lol-spell-select:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.lol-spell-btn{
  width:100%;
  padding:14px;
  font-family:'Orbitron',sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--cyan);
  background:rgba(63,242,255,0.08);
  border:1px solid rgba(63,242,255,0.4);
  border-radius:4px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.lol-spell-btn:hover{
  background:rgba(63,242,255,0.16);
}
/* 카운트다운 중 -- 남은 시간이 줄어들수록 눈에 띄는 경고색 */
.lol-spell-btn.counting{
  color:var(--warn);
  background:rgba(255,210,63,0.08);
  border-color:rgba(255,210,63,0.45);
  cursor:default;
}
/* 쿨타임 종료(사용 가능) -- 초록으로 펄스, 눌러서 확인/리셋 */
.lol-spell-btn.ready{
  color:#04141a;
  background:var(--success);
  border-color:var(--success);
  box-shadow:0 0 18px rgba(77,255,160,0.6);
  animation:lolReadyPulse 1s ease-in-out infinite;
}
@keyframes lolReadyPulse{
  0%, 100%{ box-shadow:0 0 18px rgba(77,255,160,0.6); }
  50%{ box-shadow:0 0 30px rgba(77,255,160,0.95); }
}

@media (max-width:480px){
  .lol-slot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:340px){
  .lol-slot-grid{ grid-template-columns:1fr; }
}