/* ===== Puzzle modal ===== */
#puzzle-modal {
  position: absolute; inset: 0;
  background: rgba(0,5,10,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 80;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
#puzzle-modal.visible { display: flex; }
#puzzle-frame {
  width: min(560px, 96vw);
  max-height: 92vh;
  background: linear-gradient(180deg, rgba(5,20,15,0.95), rgba(0,8,12,0.98));
  border: 1px solid #44ffaa;
  box-shadow: 0 0 40px rgba(68,255,170,0.4), inset 0 0 30px rgba(68,255,170,0.06);
  padding: 22px;
  overflow: auto;
  position: relative;
}
#puzzle-frame::before {
  content: attr(data-title);
  position: absolute; top: -10px; left: 24px;
  background: #000; padding: 0 12px;
  color: #44ffaa; font-size: 11px; letter-spacing: 0.25em;
  font-family: 'Orbitron', sans-serif;
}
.puzzle-instructions {
  color: #88ddbb;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.puzzle-feedback {
  margin-top: 14px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  min-height: 22px;
  color: #44ffaa;
  text-shadow: 0 0 10px currentColor;
}
.puzzle-feedback.fail { color: #ff5566; }

/* ===== Puzzle-specific shared styles ===== */
.grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px auto;
  max-width: 360px;
}
.dot-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(68,255,170,0.3);
  background: rgba(0,15,10,0.6);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.dot-cell:hover { border-color: #44ffaa; }
.dot-cell .dot {
  width: 70%; height: 70%;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor, inset 0 -4px 8px rgba(0,0,0,0.4);
}
.dot-cell.selected { box-shadow: 0 0 14px #44ffaa; border-color: #44ffaa; transform: scale(1.04); }
.dot-cell.correct { background: rgba(68,255,136,0.25); border-color: #44ff88; }
.dot-cell.wrong { background: rgba(255,68,102,0.25); border-color: #ff4466; animation: shake 0.4s; }
@keyframes shake {
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}

.color-palette {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 14px;
}
.palette-color {
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 12px currentColor;
  transition: transform 0.15s;
}
.palette-color:hover { transform: scale(1.15); border-color: #fff; }
.palette-color.active { border-color: #fff; transform: scale(1.2); }

/* Mastermind */
.mastermind-board {
  background: rgba(0,10,8,0.6);
  border: 1px solid rgba(68,255,170,0.2);
  padding: 12px;
  margin: 14px 0;
}
.mm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(68,255,170,0.15);
}
.mm-row:last-child { border-bottom: none; }
.mm-pegs { display: flex; gap: 8px; }
.mm-peg {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(68,255,170,0.4);
  cursor: pointer;
  transition: all 0.15s;
}
.mm-peg.filled { box-shadow: 0 0 10px currentColor, inset 0 -3px 6px rgba(0,0,0,0.4); }
.mm-row.active .mm-peg { cursor: pointer; }
.mm-row.active .mm-peg:hover { transform: scale(1.1); }
.mm-feedback {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-left: auto;
  width: 28px;
}
.mm-fb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.mm-fb.exact { background: #44ff88; box-shadow: 0 0 6px #44ff88; }
.mm-fb.partial { background: #ffcc44; box-shadow: 0 0 6px #ffcc44; }
.mm-submit {
  margin-left: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #44ffaa;
  color: #44ffaa;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  cursor: pointer;
}
.mm-submit:disabled { opacity: 0.3; cursor: not-allowed; }

/* Rings puzzle */
#rings-canvas {
  display: block; margin: 10px auto;
  background: rgba(0,5,8,0.6);
  border: 1px solid rgba(68,255,170,0.2);
}
.rings-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.rings-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
}
.rings-row .lbl {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #88ddbb;
}
.rings-row .btns {
  display: flex; gap: 4px;
}
.rings-row button {
  width: 36px; height: 36px;
  background: rgba(0,30,20,0.6);
  border: 1px solid #44ffaa;
  color: #44ffaa;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  font-family: 'Orbitron', sans-serif;
}
.rings-row button:active { background: rgba(68,255,170,0.3); }

/* Rhythm puzzle */
#rhythm-area {
  display: flex; flex-direction: column; gap: 14px;
  padding: 8px;
}
#energy-bars-vertical {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 8px 4px 4px;
}
.energy-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
}
.energy-vbar {
  width: 32px; height: 140px;
  background: rgba(0,15,10,0.7);
  border: 1px solid rgba(68,255,170,0.3);
  position: relative;
  overflow: hidden;
}
.energy-vfill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(0deg, #2299ff 0%, #44ffaa 70%, #44ffaa 100%);
  transition: height 0.05s linear, background 0.15s;
}
.energy-vfill.in-zone {
  background: linear-gradient(0deg, #ffaa44 0%, #ffcc44 70%, #ffee66 100%);
  box-shadow: 0 0 12px rgba(255,204,68,0.7);
}
.energy-vfill.overflow {
  background: linear-gradient(0deg, #ff4444 0%, #ff7744 50%, #ff8866 100%);
  box-shadow: 0 0 14px #ff4444;
}
.energy-vtarget {
  position: absolute;
  left: -2px; right: -2px;
  /* 80% to 95% from bottom */
  bottom: 80%;
  height: 15%;
  background: rgba(255,204,68,0.18);
  border-top: 2px dashed #ffcc44;
  border-bottom: 2px dashed #ffcc44;
  pointer-events: none;
}
.energy-vlabel {
  font-size: 10px; color: #88ddbb;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.15em;
}
#energy-buttons-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 0 4px;
}
.energy-btn-vert {
  width: 100%; height: 38px;
  background: rgba(0,30,20,0.6);
  border: 1px solid #44ffaa;
  color: #44ffaa;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.2em;
  transition: all 0.1s;
}
.energy-btn-vert:active, .energy-btn-vert.flash {
  background: #44ffaa; color: #000; box-shadow: 0 0 16px #44ffaa;
}

/* Legacy horizontal bar styles (kept in case referenced elsewhere) */
.energy-bar-row {
  display: flex; align-items: center; gap: 10px;
}
.energy-bar-row .name {
  font-size: 10px; width: 26px;
  color: #88ddbb;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.1em;
}
.energy-bar {
  flex: 1; height: 22px;
  background: rgba(0,15,10,0.7);
  border: 1px solid rgba(68,255,170,0.3);
  position: relative;
  overflow: hidden;
}
.energy-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #2299ff, #44ffaa);
  transition: width 0.05s linear;
}
.energy-fill.danger { background: linear-gradient(90deg, #ff4444, #ffaa00); }
.energy-target {
  position: absolute; top: 0; bottom: 0;
  width: 18%;
  background: rgba(255,204,68,0.25);
  border-left: 2px solid #ffcc44;
  border-right: 2px solid #ffcc44;
  pointer-events: none;
  right: 0;
}
.energy-btn {
  width: 50px; height: 32px;
  background: rgba(0,30,20,0.6);
  border: 1px solid #44ffaa;
  color: #44ffaa;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  cursor: pointer;
  letter-spacing: 0.15em;
}
.energy-btn:active, .energy-btn.flash { background: #44ffaa; color: #000; }

#lock-bar-container {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(68,255,170,0.3);
}
.lock-label {
  font-size: 11px; color: #ffcc44; letter-spacing: 0.2em;
  margin-bottom: 6px;
  font-family: 'Orbitron', sans-serif;
}
#lock-bar {
  width: 100%; height: 36px;
  position: relative;
  background: #001a22;
  border: 1px solid rgba(68,255,170,0.3);
}
#lock-segments {
  position: absolute; inset: 0; display: flex;
}
#lock-segments div { flex: 1; }
#lock-marker {
  position: absolute; top: 2px; bottom: 2px;
  width: 8px;
  background: #ff4466;
  box-shadow: 0 0 12px #ff4466;
}
#lock-btn {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: rgba(255,204,68,0.15);
  border: 2px solid #ffcc44;
  color: #ffcc44;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  letter-spacing: 0.3em;
  cursor: pointer;
  text-shadow: 0 0 8px currentColor;
}
#lock-btn:active { background: #ffcc44; color: #000; }
#lock-progress {
  display: flex; gap: 6px; justify-content: center; margin-top: 8px;
}
.lock-pip {
  width: 18px; height: 18px;
  border: 1px solid rgba(255,204,68,0.5);
}
.lock-pip.done { background: #ffcc44; box-shadow: 0 0 8px #ffcc44; }

/* Wires/switches/freq */
.wires-area, .switches-area, .freq-area {
  margin: 14px 0;
}
.wire {
  height: 16px;
  margin: 8px 0;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4);
}
.wire::after {
  content: ''; position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  background: #444; border: 2px solid #888;
  border-radius: 50%;
}
.wire.cut { opacity: 0.3; cursor: not-allowed; }
.wire.cut::before {
  content: '✂'; position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  color: #ff4466; font-size: 18px;
}
.switches {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 14px;
}
.switch {
  aspect-ratio: 1;
  border: 1px solid #44ffaa;
  background: rgba(0,20,15,0.6);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  color: #44ffaa;
  transition: all 0.2s;
}
.switch.on { background: #44ffaa; color: #000; box-shadow: 0 0 14px #44ffaa; }
.switch.target::after { content: '◆'; position: absolute; color: #ffcc44; font-size: 10px; margin-top: -30px; }

.freq-display {
  margin: 14px 0;
  padding: 10px;
  background: rgba(0,5,10,0.7);
  border: 1px solid rgba(68,255,170,0.3);
}
.freq-canvas {
  width: 100%; height: 60px; display: block;
}
.freq-controls {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 10px;
}
.freq-controls .ctrl {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #88ddbb; font-size: 10px;
}
.freq-controls input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  height: 8px;
  background: rgba(68,255,170,0.2);
  border-radius: 4px;
  outline: none;
}
.freq-controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: #44ffaa;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px #44ffaa;
}
.freq-controls input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: #44ffaa;
  border-radius: 50%;
  cursor: pointer; border: none;
  box-shadow: 0 0 8px #44ffaa;
}

.stage-progress {
  display: flex; gap: 6px; justify-content: center; margin: 10px 0;
}
.stage-pip {
  width: 30px; height: 6px;
  background: rgba(68,255,170,0.2);
  border-radius: 3px;
}
.stage-pip.done { background: #44ffaa; box-shadow: 0 0 6px #44ffaa; }
.stage-pip.active { background: #ffcc44; box-shadow: 0 0 6px #ffcc44; }

/* Detonate button */
#detonate-btn {
  background: rgba(255,68,68,0.2);
  border: 2px solid #ff4444;
  color: #ff4444;
  padding: 20px 40px;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  letter-spacing: 0.4em;
  cursor: pointer;
  text-shadow: 0 0 10px currentColor;
  box-shadow: 0 0 20px rgba(255,68,68,0.4);
}
#detonate-btn:hover { background: rgba(255,68,68,0.4); }