@import "./danger-button.css";

.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ── Slider Track ── */
.slider-track {
  position: relative;
  width: 340px;
  height: 56px;
  border-radius: 28px;
  background: linear-gradient(145deg, #ecdeca, #b6a68f);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}

/* ── Shimmer text ── */
.slider-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.slider-text span {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2a2a3e;
}

.shimmer {
  position: absolute;
  top: 0;
  left: -80px;
  width: 80px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  transform: skewX(-20deg);
  pointer-events: none;
}

/* ── Drag Handle ── */
.slider-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d7c7af, #e59c4c);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: grab;
  touch-action: none;
}

.slider-thumb:active { cursor: grabbing; }

.slider-thumb svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #2a2a3e;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-thumb.unlocked {
  background: linear-gradient(145deg, #5cec95, #38b86a);
  box-shadow:
    0 2px 12px rgba(60,200,120,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4);
  cursor: default;
}
.slider-thumb.unlocked svg { stroke: #fff; }

/* ── Glow ring ── */
.unlock-ring {
  position: absolute;
  inset: -4px;
  border-radius: 32px;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 5;
}

/* ── Status Label ── */
.status {
  color: rgba(0,0,0,0.4);
  font-size: 13px;
  letter-spacing: 1px;
  transition: color 0.3s;
}
.status.unlocked { color: #4cdf8b; }
    
.cella-hover:hover {
  background-color: var(--bs-table-hover-bg);
  cursor: default;
}

.table-fixed {
  table-layout: fixed;
}