/* =========================================================================
   FOCAL: THE GENTLE OBSERVATORY
   Unified Stylesheet: Core Game Mechanics + Gentle Observatory Theme
   Aesthetic: Studio Ghibli sky-workshop at dusk · Monument Valley softness
   ========================================================================= */

/* --- CORE ENGINE & RESETS ---------------------------------------------- */
* {
box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.hidden {
display: none !important;
}

.solved-dot {
width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s;
}

.solved-dot.done {
background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

.pulse-indicator {
width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.clock-sep {
opacity: 0.4;
}

.hub-intro {
display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.instrument-card:hover {
background: var(--bg-card-hover);
  border-color: var(--border-subtle);
  transform: translateY(-2px);
}

.inst-status.completed {
background: rgba(45, 212, 191, 0.14);
  color: var(--teal);
}

.accent-pill-btn:hover {
transform: translateY(-1px);
}

.hub-mode-bar {
margin-bottom: 12px;
}

.mode-pill-toggle.compact {
padding: 2px;
}

.mode-pill-toggle.compact .mode-pill-opt {
padding: 3px 9px;
  font-size: 11px;
}

.mode-pill-opt:hover:not(.active) {
color: var(--text-white);
}

.game-seed-controls {
display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.seed-refresh-btn {
padding: 5px 12px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: rgba(45, 212, 191, 0.35);
  color: var(--teal);
}

.seed-refresh-btn:hover {
background: rgba(45, 212, 191, 0.15);
  border-color: var(--teal);
}

.mono-seed-tag.is-vault {
color: var(--teal);
}

.game-panel.is-solved {
border-color: rgba(45, 212, 191, 0.45);
}

.hud-card {
display: flex;
  flex-direction: column;
  gap: 4px;
}

.hud-label {
font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.hud-value {
font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-white);
}

.hud-value.ok {
color: var(--teal);
}

.status-pill {
font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.bubble-level-wrapper {
flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.bubble-level-title {
font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.bubble-tube.balanced {
border-color: var(--teal);
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.25);
}

.bubble-crosshair-h {
position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.bubble-crosshair-v {
position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.bubble-target-ring {
position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

.torque-readout {
font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.torque-readout strong {
color: var(--text-white);
  font-weight: 600;
}

.region-dot {
width: 7px;
  height: 7px;
  border-radius: 50%;
}

.denge-stage {
display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  perspective: 900px;
}

.weight-inner {
font-size: 10px;
}

.sonar-sculpt-wrap {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}

.sonar-fleet-hud {
display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.fleet-ship-icon {
height: 9px;
  width: auto;
  color: var(--teal);
  opacity: 0.85;
}

.region-chip.done .fleet-ship-icon {
color: #34d399;
  filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.4));
}

#sonar-osc-canvas {
width: 100%;
  max-width: 380px;
  height: 38px;
}

.sonar-tactical-layout {
--sonar-cell-size: clamp(38px, 9vw, 52px);
  --sonar-counter-size: clamp(28px, 7vw, 36px);
  --sonar-gap: clamp(4px, 1.2vw, 6px);

  display: flex;
  flex-direction: column;
  gap: var(--sonar-gap);
  user-select: none;
  -webkit-user-select: none;
}

.sonar-col-counters-row {
display: grid;
  grid-template-columns: var(--sonar-counter-size) repeat(
      6,
      var(--sonar-cell-size)
    );
  gap: var(--sonar-gap);
  align-items: center;
}

.sonar-counter-corner {
width: var(--sonar-counter-size);
  height: var(--sonar-counter-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
}

.counter-corner-svg {
width: 16px;
  height: 16px;
}

.sonar-grid-main-row {
display: flex;
  gap: var(--sonar-gap);
  align-items: flex-start;
}

.sonar-row-counters-col {
display: grid;
  grid-template-rows: repeat(6, var(--sonar-cell-size));
  gap: var(--sonar-gap);
  width: var(--sonar-counter-size);
}

.sonar-counter-btn {
background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.15s ease;
  padding: 0;
}

.sonar-counter-btn.col-counter {
height: var(--sonar-counter-size);
  width: var(--sonar-cell-size);
}

.sonar-counter-btn.row-counter {
height: var(--sonar-cell-size);
  width: var(--sonar-counter-size);
}

.sonar-counter-btn:hover {
background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-white);
}

.sonar-counter-btn .counter-dot {
width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s;
}

.sonar-counter-btn.done {
background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.4);
  color: var(--teal);
}

.sonar-counter-btn.done .counter-dot {
background: var(--teal);
  box-shadow: 0 0 6px rgba(45, 212, 191, 0.6);
}

.sonar-counter-btn.over {
background: rgba(244, 63, 94, 0.12);
  border-color: var(--coral);
  color: var(--coral);
}

.sonar-counter-btn.over .counter-dot {
background: var(--coral);
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.6);
}

.cell-empty-dot {
width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.15s;
}

.sonar-cell:hover .cell-empty-dot {
background: rgba(45, 212, 191, 0.35);
}

.sonar-cell.is-ship {
background: rgba(45, 212, 191, 0.08);
  border-color: rgba(45, 212, 191, 0.35);
  box-shadow: inset 0 0 12px rgba(45, 212, 191, 0.08);
}

.ship-piece {
width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shipPop 0.18s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes shipPop {
  0% {
    transform: scale(0.65);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.ship-svg {
width: 82%;
  height: 82%;
  color: var(--teal);
}

.ship-hull {
fill: rgba(45, 212, 191, 0.22);
  stroke: var(--teal);
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.3));
}

.ship-inner-ring {
fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
  opacity: 0.75;
}

.ship-core-dot {
fill: #fafafa;
}

.ship-seam-line {
stroke: var(--teal);
  stroke-width: 1.8;
  opacity: 0.6;
}

.sonar-cell.is-water {
background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.05);
}

.water-piece {
width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(148, 163, 184, 0.4);
  animation: waterFade 0.15s ease;
}

@keyframes waterFade {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.water-svg {
width: 52%;
  height: 52%;
}

.sonar-cell.cell-conflict {
border-color: var(--coral) !important;
  background: rgba(244, 63, 94, 0.16) !important;
}

.sonar-cell.cell-conflict .ship-hull {
stroke: var(--coral) !important;
  fill: rgba(244, 63, 94, 0.25) !important;
  filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.5)) !important;
}

.conflict-x {
stroke: var(--coral);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.sonar-cell.is-starter {
cursor: default;
}

.starter-badge {
position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 5px #38bdf8;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
  }
  100% {
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.95);
  }
}

.sonar-mode-pill {
display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.sonar-mode-btn {
background: transparent;
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.sonar-mode-btn:hover {
color: var(--text-white);
}

.sonar-mode-btn.active {
background: rgba(255, 255, 255, 0.12);
  color: var(--text-white);
}

.sonar-mode-btn[data-mode="ship"].active {
background: rgba(45, 212, 191, 0.18);
  color: var(--teal);
}

.sonar-mode-btn[data-mode="water"].active {
background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
}

.sonar-mode-btn .mode-icon {
width: 12px;
  height: 12px;
}

.btn-active-ping {
display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal);
  border-color: rgba(45, 212, 191, 0.35);
}

.btn-active-ping:hover {
border-color: var(--teal);
  background: rgba(45, 212, 191, 0.12);
}

.btn-active-ping.depleted {
opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.btn-svg-icon {
width: 14px;
  height: 14px;
}

.res-cell.is-locked {
cursor: not-allowed;
}

.res-disc {
width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: popIn 0.16s ease;
}

.wave-svg {
width: 24px;
  height: 14px;
}

.h-clue {
right: -12px;
  top: 50%;
  transform: translateY(-50%);
}

.v-clue {
bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.res-hint-badge {
font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.res-hint-text {
font-family: var(--font-sans);
  letter-spacing: 0;
  text-wrap: pretty;
}

.eko-compare-bar {
display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.eko-listen-pill.disabled {
opacity: 0.38;
  cursor: not-allowed;
}

.pill-dot {
width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pill-dot.cyan {
background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.pill-dot.amber {
background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
}

.eko-orb-stage {
position: relative;
  width: 224px;
  height: 224px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb-ring {
position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.pad-title {
font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pad-sub {
font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.35;
  max-width: 118px;
}

.reveal-cols {
display: flex;
  align-items: center;
  justify-content: space-around;
}

.rev-col {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rev-lbl {
font-size: 11px;
  color: var(--text-muted);
}

.rev-val {
font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.rev-val small {
font-size: 12px;
  margin-left: 2px;
  opacity: 0.7;
}

.rev-val.cyan {
color: #38bdf8;
}

.rev-val.amber {
color: #fbbf24;
}

.rev-meter {
font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.rev-divider {
width: 1px;
  height: 48px;
  background: var(--border-hairline);
}

.reveal-score-banner {
padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.reveal-score-banner .pts {
color: var(--teal);
  font-family: var(--font-mono);
}

.eko-card-actions {
display: flex;
  justify-content: center;
}

.btn-disabled {
opacity: 0.35;
  cursor: not-allowed;
}

.game-footer-bar {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
}

.quick-tip {
font-size: 12px;
  color: var(--text-muted);
}

.quick-tip strong {
color: var(--text-secondary);
  font-weight: 500;
}

.action-btns {
display: flex;
  gap: 8px;
}

.modal-header-block h2 {
font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.modal-sub {
font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.howto-steps {
display: flex;
  flex-direction: column;
  gap: 10px;
}

.win-card {
text-align: center;
}

.win-sleek-top {
display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-right: 32px;
}

.win-day-pill {
font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 11px;
  border-radius: 999px;
}

.win-status-pill {
display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.25);
  padding: 4px 11px;
  border-radius: 999px;
}

.win-status-pill .status-dot {
width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

.win-hero-block {
text-align: left;
  margin-bottom: 18px;
}

.win-hero-title {
font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text-white);
  line-height: 1.1;
  margin-bottom: 4px;
}

.win-hero-sub {
font-size: 12.5px;
  color: var(--text-muted);
}

.win-stats-strip {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.win-stat-box {
background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  padding: 11px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.win-stat-lbl {
font-size: 10px;
  color: var(--text-muted);
  text-transform: lowercase;
}

.win-stat-val {
font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-white);
  letter-spacing: -0.02em;
}

.win-stat-val.highlight {
color: var(--teal);
}

.win-daily-header {
display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 9px;
}

.win-daily-header strong {
font-family: var(--font-mono);
  color: var(--text-white);
}

.win-modal-actions {
display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@keyframes hintCellPulse {
  0% {
    border-color: #fbbf24;
    box-shadow:
      0 0 12px rgba(251, 191, 36, 0.4),
      inset 0 0 6px rgba(251, 191, 36, 0.15);
  }
  100% {
    border-color: #fef08a;
    box-shadow:
      0 0 24px rgba(251, 191, 36, 0.8),
      inset 0 0 14px rgba(251, 191, 36, 0.35);
  }
}

@keyframes hintErrorShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-3px);
  }
  40%,
  80% {
    transform: translateX(3px);
  }
}

@keyframes hintErrorPulse {
  0% {
    border-color: #f43f5e;
    box-shadow:
      0 0 12px rgba(244, 63, 94, 0.5),
      inset 0 0 6px rgba(244, 63, 94, 0.2);
  }
  100% {
    border-color: #fb7185;
    box-shadow:
      0 0 24px rgba(244, 63, 94, 0.9),
      inset 0 0 12px rgba(244, 63, 94, 0.4);
  }
}

.btn-hint .btn-text {
position: relative;
  z-index: 2;
}

.btn-hint.cooldown-active .btn-cooldown-wipe {
opacity: 1;
  animation: cooldownSlideDown var(--cooldown-dur, 3s) linear forwards;
}

@keyframes cooldownSlideDown {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pingExpand {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

.prism-stage-wrapper,
.knot-stage-wrapper,
.circuit-stage-wrapper {
display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 14px;
}

.prism-laser-svg {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.prism-grid-dot {
width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}

.emitter-core {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.sensor-receptor {
position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sensor-pulse-wave {
position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid #2dd4bf;
  opacity: 0;
}

.cell-sensor.is-active .sensor-pulse-wave {
animation: pingExpand 1.6s infinite ease-out;
}

.cell-mirror:hover .mirror-rotate-hint {
opacity: 0.8;
}

.mirror-housing {
width: 44px;
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mirror-bezel {
width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  position: absolute;
}

.mirror-rotate-hint {
position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s;
}

.knot-svg {
width: 100%;
  height: 100%;
  display: block;
}

.knot-node-group {
cursor: grab;
  transition: transform 0.05s linear;
}

.knot-node-group:active {
cursor: grabbing;
}

.knot-node-touch-target {
fill: transparent;
}

@keyframes knotSpinPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.3;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.9;
  }
}

.circuit-tile:hover .circuit-tile-rot-hint {
opacity: 0.8;
}

.circuit-tile.is-source {
border-color: #38bdf8;
}

.circuit-tile-body {
width: 100%;
  height: 100%;
}

.circuit-tile-svg {
width: 100%;
  height: 100%;
  display: block;
}

.circuit-terminal-badge {
fill: rgba(255, 255, 255, 0.2);
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
  transition:
    fill 0.2s,
    stroke 0.2s;
}

.circuit-tile-rot-hint {
position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s;
}

.spectrum-beam-track {
height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  margin: 6px 0 16px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spectrum-laser-ribbon {
height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    #8b5cf6,
    #6366f1,
    #0ea5e9,
    #14b8a6,
    #22c55e,
    #f59e0b,
    #ef4444
  );
  opacity: 0.18;
  transition:
    opacity 0.4s,
    filter 0.4s;
}

.spectrum-beam-track.beam-aligned .spectrum-laser-ribbon {
opacity: 1;
  filter: drop-shadow(0 0 8px #fafafa);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.6);
}

.spectrum-rack-wrapper {
display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}

.spectrum-tube.is-locked:hover {
transform: none;
}

.spectrum-tube.is-selected {
border-color: var(--tube-color);
  box-shadow: 0 0 18px var(--tube-color);
  transform: translateY(-6px);
}

.spectrum-tube.is-playing {
border-color: #fafafa;
  transform: scale(1.05);
}

.tube-top-cap {
font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.tube-lock-icon {
font-size: 11px;
}

.tube-slot-num {
opacity: 0.6;
}

.tube-spectral-plasma {
position: absolute;
  inset: 3px;
  border-radius: 999px;
  opacity: 0.85;
  filter: blur(0.5px);
  box-shadow: 0 0 10px var(--tube-color);
}

.tube-glass-shine {
position: absolute;
  top: 6px;
  left: 4px;
  bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.tube-bottom-info {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tube-freq {
font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-white);
  white-space: nowrap;
}

.spectrum-tube.is-solved-tube .tube-glass-chamber {
box-shadow: 0 0 20px var(--tube-color);
}

@media (max-width: 720px) {
  .instrument-grid {
    grid-template-columns: 1fr;
  }
  .spectrum-tubes-rack {
    gap: 4px;
    padding: 12px 6px;
  }
  .tube-glass-chamber {
    height: 74px;
    width: 18px;
  }
  .tube-freq {
    font-size: 9px;
  }
}

/* --- THE GENTLE OBSERVATORY THEME & COMPONENTS ----------------------- */
/* =========================================================================
   FOCAL: THE GENTLE OBSERVATORY
   Aesthetic: Studio Ghibli sky-workshop at dusk · Monument Valley softness
   A quiet hilltop observatory that listens to the day's wind, light & echo.
   ========================================================================= */

/* --- 1. PALETTE & TYPOGRAPHY ------------------------------------------- */

:root {
--card-rgb: 66, 44, 82;
  --well-rgb: 40, 24, 52;
  --bg-black: #2b1d3b;
  --bg-card: rgba(var(--card-rgb), 0.76);
  --bg-card-hover: rgba(var(--card-rgb), 0.88);
  --bg-elevated: rgba(var(--card-rgb), 0.68);
  --bg-well: rgba(var(--well-rgb), 0.52);

  --border-hairline: rgba(255, 236, 214, 0.14);
  --border-subtle: rgba(255, 236, 214, 0.25);
  --border-warm: rgba(255, 207, 160, 0.48);

  --text-white: #fff4e6; /* warm cream paper */
  --text-secondary: #f2e4f0; /* soft rose-lilac mist */
  --text-muted: #d1bdd4; /* evening haze */

  --amber: #ffcf7a; /* lamp light */
  --teal: #9fe3c4; /* sage mint */
  --blue: #9bd1e5; /* morning sky */
  --coral: #f4a9a0; /* peach, never alarm red */
  --purple: #d8b8f0; /* lavender dusk */
  --gold-accent: #ffd9a0; /* warm candle */

  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Responsive Game Board Dimensions (updated via @media queries) */
  --denge-cell-size: 62px;
  --denge-gap: 6px;
  --sonar-cell-size: 56px;
  --sonar-tx-size: 38px;
  --sonar-gap: 6px;
  --res-cell-size: 58px;
  --res-gap: 6px;
}

/* --- 2. THE QUIET SKY --------------------------------------------------- */

/* Colours are written to :root by js/atmosphere.js (clock + weekday). The values below are the
   warm dusk fallback. Nothing in the sky animates continuously. */

:root {
--sky-top: #4e3563;
  --sky-mid: #9e5676;
  --sky-low: #eba082;
  --hill: #38254a;
  --star-opacity: 0.1;
  --body-core: #fff3de;
  --body-edge: #ffc69c;
  --body-glow-rgb: 255, 198, 156;
  --body-x: 80;
  --body-y: 24;
  --body-size: 52px;
}

html {
background: var(--sky-top);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
background-color: var(--sky-top);
  background-image: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 55%,
    var(--sky-low) 100%
  );
  background-attachment: fixed;
  color: var(--text-white);
  font-family: var(--font-sans);
  position: relative;
}

.sky {
position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Sparse, static stars; only their opacity follows the hour */

.sky-stars {
position: absolute;
  inset: 0 0 38% 0;
  background-image:
    radial-gradient(1.3px 1.3px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, #ffeccf, transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff, transparent),
    radial-gradient(1px 1px at 240px 160px, #ffeccf, transparent),
    radial-gradient(1.2px 1.2px at 310px 20px, #fff, transparent),
    radial-gradient(1px 1px at 60px 210px, #fff, transparent);
  background-size: 340px 240px;
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
  opacity: var(--star-opacity);
}

/* One sun / moon riding a single arc, hidden behind the hill at the horizon */

.sky-body {
position: absolute;
  top: 0;
  left: 0;
  width: var(--body-size);
  height: var(--body-size);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, var(--body-core), var(--body-edge) 75%);
  box-shadow:
    0 0 28px rgba(var(--body-glow-rgb), 0.5),
    0 0 90px rgba(var(--body-glow-rgb), 0.24);
  transform: translate(
    calc(var(--body-x) * 1vw - var(--body-size) / 2),
    calc(var(--body-y) * 1vh - var(--body-size) / 2)
  );
}

/* A single gentle glide (once per update) after first paint; never on load */

.sky-ready .sky-body {
transition: transform 2s ease-in-out;
}

.sky-hills {
position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: min(34vh, 300px);
  min-height: 170px;
}

.hill {
fill: var(--hill);
}

.studio-shell {
  margin: 0 auto;
  padding: 20px 22px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
position: relative;
  z-index: 1;
  max-width: 980px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 150px;
}

/* --- 3. BRAND & NAVIGATION --------------------------------------------- */

.studio-nav {
display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-hairline);
  gap: 16px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.nav-left {
display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
  min-width: 0;
}

.brand-mark {
display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-white);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.03em;
  flex-shrink: 0;
  user-select: none;
  transition: opacity 0.15s ease;
}

.brand-mark:hover {
opacity: 0.92;
}

.brand-glyph {
width: 16px;
  height: 16px;
  border-radius: 4.5px;
  border: 1.5px solid var(--text-white);
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 207, 122, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.brand-glyph::after {
  position: absolute;
  inset: 2px;
content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8eb 0%, var(--amber) 65%, #f5a855 100%);
  box-shadow: 0 0 7px rgba(255, 207, 122, 0.75);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand-mark:hover .brand-glyph {
transform: scale(1.08);
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 207, 122, 0.25);
}

.brand-mark:hover .brand-glyph::after {
transform: scale(1.15);
  box-shadow: 0 0 11px rgba(255, 207, 122, 0.95);
}

.brand-name {
font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-white);
  line-height: 1;
}

.nav-modules {
display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.nav-mod-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
font-family: var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-mod-btn:hover,
.nav-mod-btn.active {
color: var(--text-white);
}

.nav-mod-btn.active .mod-num {
color: var(--amber); opacity: 1;
}

.solved-dot.active,
.solved-dot.done {
background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
}

.nav-right {
display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.daily-clock-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
border: 1px solid var(--border-subtle);
  background: rgba(var(--card-rgb), 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

.daily-clock-pill .pulse-indicator {
background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: filamentGlow 3s ease-in-out infinite alternate;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
color: var(--text-secondary);
  flex-shrink: 0;
}

.icon-btn[hidden] {
  display: none;
}

.icon-btn:hover {
color: var(--text-white);
  background: rgba(255, 244, 230, 0.1);
  border-color: var(--border-subtle);
}

/* Ambient Music Control (Icon in header, popout slider on click) */

.ambient-control-pill {
position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ambient-toggle-btn {
position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ambient-toggle-btn:hover {
color: var(--text-white);
  background: rgba(255, 244, 230, 0.1);
  border-color: var(--border-subtle);
}

.ambient-control-pill.is-playing .ambient-toggle-btn {
color: var(--amber);
  background: rgba(255, 207, 122, 0.14);
  border-color: rgba(255, 207, 122, 0.35);
  box-shadow: 0 0 10px rgba(255, 207, 122, 0.15);
}

.ambient-pulse-dot {
position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.ambient-control-pill.is-playing .ambient-pulse-dot {
opacity: 1;
  transform: scale(1);
}

/* Floating volume popover that pops out when clicked */

.ambient-popover {
position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(38, 24, 52, 0.94);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(18, 10, 26, 0.65), 0 0 1px rgba(255, 207, 122, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.18s;
  white-space: nowrap;
}

.ambient-control-pill.popover-open .ambient-popover {
opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.ambient-popover-mute {
background: rgba(255, 244, 230, 0.08);
  border: 1px solid var(--border-hairline);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ambient-popover-mute:hover {
background: rgba(255, 207, 122, 0.18);
  border-color: rgba(255, 207, 122, 0.4);
}

.ambient-popover-mute.is-muted {
color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: transparent;
}

.ambient-volume-slider {
-webkit-appearance: none;
  appearance: none;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 244, 230, 0.18);
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.ambient-volume-slider:hover {
background: rgba(255, 244, 230, 0.28);
}

.ambient-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-accent);
  border: 1.5px solid #2b1d3b;
  box-shadow: 0 0 6px rgba(255, 207, 122, 0.6);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ambient-volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.18);
  background: #fff4e6;
}

.ambient-volume-slider::-moz-range-thumb {
width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-accent);
  border: 1.5px solid #2b1d3b;
  box-shadow: 0 0 6px rgba(255, 207, 122, 0.6);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ambient-volume-label {
font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--gold-accent);
  min-width: 28px;
  text-align: right;
  letter-spacing: -0.02em;
}

.ambient-popover-mute.is-muted ~ .ambient-volume-label {
color: var(--text-muted);
}

/* --- 4. THE OBSERVATION DESK (HUB) ------------------------------------- */

.hub-section {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.22s ease;
gap: 28px;
}

.obs-station-tag {
display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold-accent);
  margin-bottom: 14px;
  background: rgba(255, 217, 160, 0.1);
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 217, 160, 0.28);
}

.obs-station-tag .dot {
width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

.obs-station-tag .tag-sep {
opacity: 0.5;
}

.hub-headline {
font-family: var(--font-serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text-white);
  margin-bottom: 12px;
  text-shadow:
    0 2px 18px rgba(var(--well-rgb), 0.75),
    0 1px 3px rgba(var(--well-rgb), 0.55);
}

.hub-headline em {
font-style: italic;
  color: var(--gold-accent);
}

.hub-subline {
font-size: 15px;
  line-height: 1.7;
  color: var(--text-white);
  opacity: 0.92;
  max-width: 600px;
  text-shadow:
    0 1px 12px rgba(var(--well-rgb), 0.7),
    0 1px 2px rgba(var(--well-rgb), 0.5);
}

.daily-progress-summary {
background: rgba(var(--card-rgb), 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.lantern-row {
display: inline-flex; gap: 7px; align-items: center;
}

.lantern {
width: 9px;
  height: 13px;
  border-radius: 4px 4px 5px 5px;
  background: rgba(255, 244, 230, 0.16);
  border: 1px solid rgba(255, 244, 230, 0.25);
  transition: all 0.6s ease;
}

.lantern.lit {
background: var(--amber);
  border-color: #ffe3a3;
  box-shadow: 0 0 12px 2px rgba(255, 207, 122, 0.6);
  animation: filamentGlow 3.5s ease-in-out infinite alternate;
}

/* --- INSTRUMENT CARDS: Unified Architecture & Distinct Diorama Palettes --- */

.instrument-grid {
display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: stretch;
}

.instrument-card {
  cursor: pointer;
--card-tint: 255, 217, 160;
  --card-accent: #ffd9a0;
  --card-accent-soft: rgba(255, 217, 160, 0.14);
  --card-border-hover: rgba(255, 207, 160, 0.52);

  background:
    linear-gradient(165deg, rgba(var(--card-tint), 0.16) 0%, rgba(var(--card-tint), 0.04) 100%),
    linear-gradient(165deg, rgba(var(--card-rgb), 0.84) 0%, rgba(var(--well-rgb), 0.88) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--card-tint), 0.32);
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  box-shadow: 0 12px 36px rgba(var(--well-rgb), 0.36);
  transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Per-card unique accent themes (each card has its own hue for accent, border and background) */

.instrument-card.card-theme-balance {
  --card-tint: 255, 196, 107;
  --card-accent: #ffc46b;
  --card-accent-soft: rgba(255, 196, 107, 0.16);
  --card-border-hover: rgba(255, 196, 107, 0.7);
}

.instrument-card.card-theme-sonar {
  --card-tint: 139, 226, 143;
  --card-accent: #8be28f;
  --card-accent-soft: rgba(139, 226, 143, 0.16);
  --card-border-hover: rgba(139, 226, 143, 0.7);
}

.instrument-card.card-theme-resonance {
  --card-tint: 125, 180, 255;
  --card-accent: #7db4ff;
  --card-accent-soft: rgba(125, 180, 255, 0.16);
  --card-border-hover: rgba(125, 180, 255, 0.7);
}

.instrument-card.card-theme-echo {
  --card-tint: 245, 163, 207;
  --card-accent: #f5a3cf;
  --card-accent-soft: rgba(245, 163, 207, 0.16);
  --card-border-hover: rgba(245, 163, 207, 0.7);
}

.instrument-card.card-theme-prism {
  --card-tint: 214, 236, 110;
  --card-accent: #d6ec6e;
  --card-accent-soft: rgba(214, 236, 110, 0.16);
  --card-border-hover: rgba(214, 236, 110, 0.7);
}

.instrument-card.card-theme-knot {
  --card-tint: 94, 224, 210;
  --card-accent: #5ee0d2;
  --card-accent-soft: rgba(94, 224, 210, 0.16);
  --card-border-hover: rgba(94, 224, 210, 0.7);
}

.instrument-card.card-theme-circuit {
  --card-tint: 255, 143, 122;
  --card-accent: #ff8f7a;
  --card-accent-soft: rgba(255, 143, 122, 0.16);
  --card-border-hover: rgba(255, 143, 122, 0.7);
}

.instrument-card.card-theme-spectrum {
  --card-tint: 185, 156, 255;
  --card-accent: #b99cff;
  --card-accent-soft: rgba(185, 156, 255, 0.16);
  --card-border-hover: rgba(185, 156, 255, 0.7);
}

.instrument-card:hover,
.instrument-card:focus-visible {
background:
    linear-gradient(165deg, rgba(var(--card-tint), 0.24) 0%, rgba(var(--card-tint), 0.08) 100%),
    linear-gradient(165deg, rgba(var(--card-rgb), 0.92) 0%, rgba(var(--well-rgb), 0.94) 100%);
  border-color: var(--card-border-hover);
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(var(--well-rgb), 0.48), 0 0 28px var(--card-accent-soft);
  outline: none;
}

.inst-top-meta {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11.5px;
}

.inst-index {
display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  font-weight: 500;
}

.inst-num-badge {
font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--card-accent);
  background: var(--card-accent-soft);
  border: 1px solid rgba(255, 244, 230, 0.14);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.inst-status {
color: var(--text-secondary);
  background: rgba(255, 244, 230, 0.08);
  border: 1px solid rgba(255, 244, 230, 0.08);
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 99px;
}

.inst-status.is-solved,
.inst-status.completed {
color: #3b2f5e;
  background: var(--amber);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(255, 207, 122, 0.4);
  font-weight: 600;
}

/* 4 Distinct Miniature Diorama Backdrops (never repeating the page background) */

.inst-diagram {
  background: #090a0d;
height: 108px;
  border: 1px solid rgba(255, 236, 214, 0.16);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 14px rgba(10, 6, 18, 0.45);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.diagram-svg {
width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}

/* 01 Balance: Warm Candlelit Brass & Cedar Workshop */

.inst-diagram.diagram-balance {
background: linear-gradient(165deg, #2a1b36 0%, #4b2b48 52%, #7d484d 100%);
}

/* 02 Sonar: Deep Bioluminescent Midnight Cove */

.inst-diagram.diagram-sonar {
background: linear-gradient(165deg, #102036 0%, #183a56 54%, #245c6e 100%);
}

/* 03 Resonance: Prismatic Velvet Indigo & Aurora Chamber */

.inst-diagram.diagram-resonance {
background: linear-gradient(165deg, #191a38 0%, #2d2856 52%, #4a3469 100%);
}

/* 04 Echo: Misty Starlight Alpine Valley */

.inst-diagram.diagram-echo {
background: linear-gradient(165deg, #1d1836 0%, #382a59 52%, #68446c 100%);
}

/* 05 Prism: Amber Hearth & Optical Chamber */

.inst-diagram.diagram-prism {
background: linear-gradient(165deg, #291a2e 0%, #4a2842 52%, #754636 100%);
}

/* 06 Knot: Deep Oceanic Celestial Constellation */

.inst-diagram.diagram-knot {
background: linear-gradient(165deg, #111a2f 0%, #1a3346 52%, #2b565a 100%);
}

/* 07 Circuit: Nocturnal Dynamo Indigo & Brass Conduit */

.inst-diagram.diagram-circuit {
background: linear-gradient(165deg, #161e38 0%, #24355a 52%, #385072 100%);
}

/* 08 Spectrum: Velvet Violet Prismatic Chamber */

.inst-diagram.diagram-spectrum {
background: linear-gradient(165deg, #20163a 0%, #3c245c 52%, #633268 100%);
}

.instrument-card:hover .inst-diagram {
border-color: var(--card-border-hover);
  filter: brightness(1.07);
}

/* --- INTERACTIVE HOVER-ONLY DIAGRAM ANIMATIONS (Still when idle) --- */

/* 01 Balance: Tilted when idle; levels to 0° & blooms center halo on hover */

.balance-beam-group {
transform-box: view-box;
  transform-origin: 140px 62px;
  transform: rotate(-5.5deg);
  transition: transform 0.72s cubic-bezier(0.22, 1.35, 0.36, 1);
}

.balance-halo {
transform-box: view-box;
  transform-origin: 140px 62px;
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.balance-ring {
transform-box: view-box;
  transform-origin: 140px 62px;
  opacity: 0.65;
  transition: all 0.55s ease;
}

.balance-outer-halo-ring {
transform-box: view-box;
  transform-origin: 140px 62px;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.balance-pivot-dot {
transition: filter 0.45s ease, fill 0.45s ease;
}

.instrument-card:hover .balance-beam-group,
.instrument-card:focus-visible .balance-beam-group {
transform: rotate(0deg);
}

.instrument-card:hover .balance-halo,
.instrument-card:focus-visible .balance-halo {
opacity: 1;
  transform: scale(1.18);
}

.instrument-card:hover .balance-ring,
.instrument-card:focus-visible .balance-ring {
opacity: 1;
  stroke: #ffe9b5;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 8px rgba(255, 225, 166, 0.85));
}

.instrument-card:hover .balance-outer-halo-ring,
.instrument-card:focus-visible .balance-outer-halo-ring {
opacity: 0.52;
  transform: scale(1.06);
}

.instrument-card:hover .balance-pivot-dot,
.instrument-card:focus-visible .balance-pivot-dot {
fill: #ffffff;
  filter: drop-shadow(0 0 6px #ffe1a6);
}

/* --- 02 SONAR: Ping travels across water -> catches boat -> shadow darkens -> echo returns --- */

.sonar-ping-pulse {
transform-box: view-box;
  opacity: 0;
}

.sonar-echo-ripple {
transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.sonar-return-echo {
transform-box: view-box;
  opacity: 0;
}

.sonar-shadow-cone {
transition: opacity 0.6s ease;
  opacity: 0.65;
}

.sonar-target-boat {
transform-origin: 165px 52px;
  transition: transform 0.5s cubic-bezier(0.22, 1.35, 0.36, 1), filter 0.5s ease;
}

.sonar-shadow-boat {
transition: opacity 0.5s ease;
  opacity: 0.35;
}

.sonar-transducer {
transition: filter 0.4s ease, fill 0.4s ease;
}

.instrument-card:hover .sonar-ping-pulse,
.instrument-card:focus-visible .sonar-ping-pulse {
animation: sonarPingTravel 2.4s ease-in-out infinite;
}

.instrument-card:hover .sonar-target-boat,
.instrument-card:focus-visible .sonar-target-boat {
animation: sonarBoatCatch 2.4s ease-in-out infinite;
}

.instrument-card:hover .sonar-echo-ripple,
.instrument-card:focus-visible .sonar-echo-ripple {
animation: sonarEchoBloom 2.4s ease-out infinite;
}

.instrument-card:hover .sonar-return-echo,
.instrument-card:focus-visible .sonar-return-echo {
animation: sonarEchoReturn 2.4s ease-in-out infinite;
}

.instrument-card:hover .sonar-shadow-cone,
.instrument-card:focus-visible .sonar-shadow-cone {
opacity: 1;
}

.instrument-card:hover .sonar-shadow-boat,
.instrument-card:focus-visible .sonar-shadow-boat {
opacity: 0.16;
}

.instrument-card:hover .sonar-transducer,
.instrument-card:focus-visible .sonar-transducer {
filter: drop-shadow(0 0 6px #a8ffeb);
}

@keyframes sonarPingTravel {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  38% {
    transform: translateX(86px);
    opacity: 1;
  }
  42%, 100% {
    transform: translateX(86px);
    opacity: 0;
  }
}

@keyframes sonarBoatCatch {
  0%, 36% {
    transform: translateY(0);
    filter: none;
  }
  42% {
    transform: translateY(-3.5px) scale(1.06);
    filter: drop-shadow(0 0 10px rgba(255, 216, 158, 0.95));
  }
  58% {
    transform: translateY(-1.5px);
    filter: drop-shadow(0 0 6px rgba(255, 216, 158, 0.6));
  }
  78%, 100% {
    transform: translateY(0);
    filter: none;
  }
}

@keyframes sonarEchoBloom {
  0%, 38% {
    transform: scale(0.6);
    opacity: 0;
  }
  42% {
    opacity: 0.95;
  }
  64% {
    transform: scale(2.4);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sonarEchoReturn {
  0%, 42% {
    transform: translateX(0);
    opacity: 0;
  }
  48% {
    opacity: 0.95;
  }
  78% {
    transform: translateX(-86px);
    opacity: 0.95;
  }
  84%, 100% {
    transform: translateX(-86px);
    opacity: 0;
  }
}

/* --- 03 RESONANCE: Pure waves slide & swap crests and troughs on hover --- */

.res-wave-crest {
transform: translateX(0);
  transition: transform 0.75s cubic-bezier(0.22, 1.35, 0.36, 1), filter 0.45s ease;
}

.res-wave-trough {
transform: translateX(0);
  transition: transform 0.75s cubic-bezier(0.22, 1.35, 0.36, 1), filter 0.45s ease;
}

.res-center-dot,
.breathe-ring {
transform-box: view-box;
  transform-origin: 140px 54px;
  transition: transform 0.65s cubic-bezier(0.22, 1.35, 0.36, 1), filter 0.5s ease, stroke 0.5s ease;
}

/* On hover: Blue wave slides 56px right (crests become troughs), Orange wave slides 56px left (troughs become crests) */

.instrument-card:hover .res-wave-crest,
.instrument-card:focus-visible .res-wave-crest {
transform: translateX(56px);
  filter: drop-shadow(0 0 7px rgba(155, 209, 229, 0.75));
}

.instrument-card:hover .res-wave-trough,
.instrument-card:focus-visible .res-wave-trough {
transform: translateX(-56px);
  filter: drop-shadow(0 0 7px rgba(255, 207, 122, 0.75));
}

.instrument-card:hover .res-center-dot,
.instrument-card:focus-visible .res-center-dot {
transform: scale(1.35);
  filter: drop-shadow(0 0 10px rgba(255, 244, 224, 0.95));
}

.instrument-card:hover .breathe-ring,
.instrument-card:focus-visible .breathe-ring {
transform: scale(1.22);
  stroke: #ffe9b5;
  filter: drop-shadow(0 0 8px rgba(255, 225, 166, 0.85));
}

/* --- 04 ECHO: Single smooth continuous ping flying out and back without any pauses --- */

.echo-traveling-ping {
opacity: 0;
  offset-path: path("M 52,54 Q 140,18 228,54 Q 140,90 52,54 Z");
  offset-distance: 0%;
  pointer-events: none;
}

.echo-caller-beacon,
.echo-cliff-beacon {
transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.echo-caller-ripple,
.echo-cliff-ripple {
transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

.instrument-card:hover .echo-traveling-ping,
.instrument-card:focus-visible .echo-traveling-ping {
opacity: 1;
  animation: echoContinuousFlight 2s linear infinite;
}

.instrument-card:hover .echo-caller-beacon,
.instrument-card:focus-visible .echo-caller-beacon {
animation: echoBeaconPulseLeft 2s linear infinite;
}

.instrument-card:hover .echo-caller-ripple,
.instrument-card:focus-visible .echo-caller-ripple {
animation: echoRippleLeft 2s ease-out infinite;
}

.instrument-card:hover .echo-cliff-beacon,
.instrument-card:focus-visible .echo-cliff-beacon {
animation: echoBeaconPulseRight 2s linear infinite;
}

.instrument-card:hover .echo-cliff-ripple,
.instrument-card:focus-visible .echo-cliff-ripple {
animation: echoRippleRight 2s ease-out infinite;
}

/* 100% smooth, continuous, zero-stop flight */

@keyframes echoContinuousFlight {
  0% {
    offset-distance: 0%;
    fill: #fff5d4;
    filter: drop-shadow(0 0 7px #ffd978);
  }
  48% {
    fill: #fff5d4;
    filter: drop-shadow(0 0 7px #ffd978);
  }
  50% {
    offset-distance: 50%;
    fill: #ffeaf3;
    filter: drop-shadow(0 0 8px #f9d6e6);
  }
  98% {
    fill: #ffeaf3;
    filter: drop-shadow(0 0 8px #f9d6e6);
  }
  100% {
    offset-distance: 100%;
    fill: #fff5d4;
    filter: drop-shadow(0 0 7px #ffd978);
  }
}

@keyframes echoBeaconPulseLeft {
  0%, 100% {
    transform: scale(1.35);
    filter: drop-shadow(0 0 8px #ffd978);
  }
  10%, 90% {
    transform: scale(1);
    filter: none;
  }
}

@keyframes echoRippleLeft {
  0% {
    transform: scale(0.6);
    opacity: 0.95;
  }
  24% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes echoBeaconPulseRight {
  0%, 40%, 60%, 100% {
    transform: scale(1);
    filter: none;
  }
  50% {
    transform: scale(1.35);
    filter: drop-shadow(0 0 8px #f9d6e6);
  }
}

@keyframes echoRippleRight {
  0%, 46% {
    transform: scale(0.6);
    opacity: 0;
  }
  50% {
    opacity: 0.95;
    transform: scale(0.8);
  }
  74% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Fallback for browsers without CSS offset-path */

@supports not (offset-path: path("M 0,0")) {
  .echo-traveling-ping {
    transform: translate(52px, 54px);
  }
  .instrument-card:hover .echo-traveling-ping,
  .instrument-card:focus-visible .echo-traveling-ping {
    animation: echoContinuousFallback 2s linear infinite;
  }
  @keyframes echoContinuousFallback {
    0% { transform: translate(52px, 54px); fill: #fff5d4; }
    25% { transform: translate(140px, 18px); }
    50% { transform: translate(228px, 54px); fill: #ffeaf3; }
    75% { transform: translate(140px, 90px); }
    100% { transform: translate(52px, 54px); fill: #fff5d4; }
  }
}

/* --- 05 PRISM: Sunbeam aligns mirrors, travels along optical path & strikes sensor --- */

.prism-beam-idle {
opacity: 0.35;
  transition: opacity 0.45s ease;
}

.prism-beam-active {
opacity: 0;
  transition: opacity 0.45s ease, filter 0.45s ease;
}

.prism-traveling-photon {
opacity: 0;
  offset-path: path("M 42,32 L 140,32 L 140,76 L 238,76");
  offset-distance: 0%;
  pointer-events: none;
}

.prism-mirror-1 {
transform-box: view-box;
  transform-origin: 140px 32px;
  transform: rotate(-18deg);
  transition: transform 0.65s cubic-bezier(0.22, 1.35, 0.36, 1), filter 0.4s ease;
}

.prism-mirror-2 {
transform-box: view-box;
  transform-origin: 140px 76px;
  transform: rotate(20deg);
  transition: transform 0.65s cubic-bezier(0.22, 1.35, 0.36, 1), filter 0.4s ease;
}

.prism-sensor-crystal {
transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.45s ease, filter 0.45s ease, transform 0.45s ease;
}

.prism-sensor-halo {
transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

.prism-sensor-ripple {
transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

.prism-emitter-ring {
transform-box: fill-box;
  transform-origin: center;
  transition: stroke 0.4s ease, transform 0.4s ease;
}

.instrument-card:hover .prism-beam-idle,
.instrument-card:focus-visible .prism-beam-idle {
opacity: 0.1;
}

.instrument-card:hover .prism-beam-active,
.instrument-card:focus-visible .prism-beam-active {
opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 225, 166, 0.85));
}

.instrument-card:hover .prism-mirror-1,
.instrument-card:focus-visible .prism-mirror-1,
.instrument-card:hover .prism-mirror-2,
.instrument-card:focus-visible .prism-mirror-2 {
transform: rotate(0deg);
  filter: drop-shadow(0 0 6px rgba(255, 244, 224, 0.8));
}

.instrument-card:hover .prism-traveling-photon,
.instrument-card:focus-visible .prism-traveling-photon {
opacity: 1;
  animation: prismPhotonContinuous 1.15s linear infinite;
}

.instrument-card:hover .prism-sensor-crystal,
.instrument-card:focus-visible .prism-sensor-crystal {
animation: prismSensorPulse 1.15s ease-in-out infinite;
}

.instrument-card:hover .prism-sensor-halo,
.instrument-card:focus-visible .prism-sensor-halo {
animation: prismSensorHaloBloom 1.15s ease-out infinite;
}

.instrument-card:hover .prism-sensor-ripple,
.instrument-card:focus-visible .prism-sensor-ripple {
animation: prismSensorRippleExpand 1.15s ease-out infinite;
}

.instrument-card:hover .prism-emitter-ring,
.instrument-card:focus-visible .prism-emitter-ring {
stroke: #ffe1a6;
  transform: scale(1.15);
}

@keyframes prismPhotonContinuous {
  0% {
    offset-distance: 0%;
    opacity: 0;
    fill: #ffffff;
    filter: drop-shadow(0 0 8px #ffd978);
  }
  6% {
    opacity: 1;
  }
  78% {
    offset-distance: 100%;
    opacity: 1;
    fill: #ffffff;
    filter: drop-shadow(0 0 10px #ffe1a6);
  }
  84%, 100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes prismSensorPulse {
  0%, 72% {
    fill: #7ba591;
    filter: none;
    transform: scale(1);
  }
  78% {
    fill: #bbf7db;
    filter: drop-shadow(0 0 12px #9fe3c4);
    transform: scale(1.22);
  }
  92% {
    fill: #9fe3c4;
    filter: drop-shadow(0 0 6px #9fe3c4);
    transform: scale(1.06);
  }
  100% {
    fill: #7ba591;
    filter: none;
    transform: scale(1);
  }
}

@keyframes prismSensorHaloBloom {
  0%, 74% {
    opacity: 0;
    transform: scale(0.5);
  }
  78% {
    opacity: 0.95;
    transform: scale(1);
  }
  96% {
    opacity: 0;
    transform: scale(1.35);
  }
  100% {
    opacity: 0;
  }
}

@keyframes prismSensorRippleExpand {
  0%, 75% {
    opacity: 0;
    transform: scale(0.6);
  }
  79% {
    opacity: 0.9;
  }
  98% {
    opacity: 0;
    transform: scale(2.4);
  }
  100% {
    opacity: 0;
  }
}

@supports not (offset-path: path("M 0,0")) {
  .prism-traveling-photon {
    transform: translate(42px, 32px);
  }
  .instrument-card:hover .prism-traveling-photon,
  .instrument-card:focus-visible .prism-traveling-photon {
    animation: prismPhotonFallback 1.15s linear infinite;
  }
  @keyframes prismPhotonFallback {
    0% { transform: translate(42px, 32px); opacity: 0; }
    5% { opacity: 1; }
    35% { transform: translate(140px, 32px); }
    55% { transform: translate(140px, 76px); }
    78% { transform: translate(238px, 76px); opacity: 1; }
    84%, 100% { transform: translate(238px, 76px); opacity: 0; }
  }
}

/* --- 06 KNOT: Tangled stars glide smoothly to equilibrium, clearing intersection noise --- */

.knot-threads-tangled {
opacity: 1;
  transition: opacity 0.5s ease;
}

.knot-threads-untangled {
opacity: 0;
  transition: opacity 0.6s ease, filter 0.6s ease;
}

.knot-star-glide-top {
transform: translate(37px, 13px);
  transition: transform 0.72s cubic-bezier(0.22, 1.35, 0.36, 1);
}

.knot-star-glide-bottom {
transform: translate(-37px, -13px);
  transition: transform 0.72s cubic-bezier(0.22, 1.35, 0.36, 1);
}

.knot-star {
transition: stroke 0.45s ease, filter 0.45s ease;
}

.knot-center-star {
transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.65s cubic-bezier(0.22, 1.35, 0.36, 1), fill 0.45s ease, filter 0.45s ease;
}

.knot-center-halo {
transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.knot-star-ripple {
transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}

.knot-crossing-beacon {
transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s ease;
}

.knot-crossing-pulse {
transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s ease;
  animation: knotNoisePulse 1.8s ease-in-out infinite;
}

@keyframes knotNoisePulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.75;
  }
}

.instrument-card:hover .knot-threads-tangled,
.instrument-card:focus-visible .knot-threads-tangled {
opacity: 0;
}

.instrument-card:hover .knot-threads-untangled,
.instrument-card:focus-visible .knot-threads-untangled {
opacity: 1;
  filter: drop-shadow(0 0 6px rgba(159, 227, 196, 0.85));
}

.instrument-card:hover .knot-star-glide-top,
.instrument-card:focus-visible .knot-star-glide-top,
.instrument-card:hover .knot-star-glide-bottom,
.instrument-card:focus-visible .knot-star-glide-bottom {
transform: translate(0, 0);
}

.instrument-card:hover .knot-star,
.instrument-card:focus-visible .knot-star {
stroke: #ffffff;
  filter: drop-shadow(0 0 6px #9fe3c4);
}

.instrument-card:hover .knot-center-star,
.instrument-card:focus-visible .knot-center-star {
fill: #ffffff;
  transform: scale(1.3);
  filter: drop-shadow(0 0 10px #ffd978);
}

.instrument-card:hover .knot-center-halo,
.instrument-card:focus-visible .knot-center-halo {
opacity: 1;
  transform: scale(1.2);
}

.instrument-card:hover .knot-star-ripple,
.instrument-card:focus-visible .knot-star-ripple {
animation: knotRippleBloom 2.4s ease-out infinite;
}

.instrument-card:hover .knot-crossing-beacon,
.instrument-card:focus-visible .knot-crossing-beacon,
.instrument-card:hover .knot-crossing-pulse,
.instrument-card:focus-visible .knot-crossing-pulse {
opacity: 0;
  animation: none;
}

@keyframes knotRippleBloom {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  75% {
    transform: scale(2.6);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* --- 07 CIRCUIT: Relay switch clicks into place, current flows & lantern illuminates --- */

.circuit-conduit-active {
opacity: 0;
  transition: opacity 0.45s ease, filter 0.45s ease;
}

.circuit-spark-pulse {
opacity: 0;
  offset-path: path("M 54,54 L 98,54 A 10 10 0 0 0 108 44 L 108 30 A 10 10 0 0 1 118 20 L 162 20 A 10 10 0 0 1 172 30 L 172 68 A 10 10 0 0 0 182 78 L 226 78");
  offset-distance: 0%;
  pointer-events: none;
}

.circuit-relay-switch {
transform-box: view-box;
  transform-origin: 108px 37px;
  transform: rotate(-90deg);
  transition: transform 0.52s cubic-bezier(0.2, 1.4, 0.4, 1), filter 0.4s ease;
}

.circuit-lantern-body {
transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.45s ease, filter 0.45s ease, transform 0.45s ease;
}

.circuit-lantern-halo {
transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

.circuit-lantern-ripple {
transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

.circuit-dynamo-ring {
transition: stroke 0.4s ease, filter 0.4s ease;
}

.circuit-dynamo-core {
transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.4s ease, fill 0.4s ease, filter 0.4s ease;
}

.instrument-card:hover .circuit-relay-switch,
.instrument-card:focus-visible .circuit-relay-switch {
transform: rotate(0deg);
  filter: drop-shadow(0 0 6px #ffffff);
}

.instrument-card:hover .circuit-conduit-active,
.instrument-card:focus-visible .circuit-conduit-active {
opacity: 1;
  filter: drop-shadow(0 0 7px rgba(155, 209, 229, 0.95));
}

.instrument-card:hover .circuit-spark-pulse,
.instrument-card:focus-visible .circuit-spark-pulse {
opacity: 1;
  animation: circuitSparkContinuous 1.2s linear infinite;
}

.instrument-card:hover .circuit-lantern-body,
.instrument-card:focus-visible .circuit-lantern-body {
animation: circuitLanternGlow 1.2s ease-in-out infinite;
}

.instrument-card:hover .circuit-lantern-halo,
.instrument-card:focus-visible .circuit-lantern-halo {
animation: circuitLanternHaloBloom 1.2s ease-out infinite;
}

.instrument-card:hover .circuit-lantern-ripple,
.instrument-card:focus-visible .circuit-lantern-ripple {
animation: circuitLanternRippleExpand 1.2s ease-out infinite;
}

.instrument-card:hover .circuit-dynamo-ring,
.instrument-card:focus-visible .circuit-dynamo-ring {
stroke: #fff4e0;
  filter: drop-shadow(0 0 8px #ffd978);
}

.instrument-card:hover .circuit-dynamo-core,
.instrument-card:focus-visible .circuit-dynamo-core {
fill: #ffffff;
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px #ffd978);
}

@keyframes circuitSparkContinuous {
  0% {
    offset-distance: 0%;
    opacity: 0;
    fill: #ffffff;
    filter: drop-shadow(0 0 8px #9bd1e5);
  }
  5% {
    opacity: 1;
  }
  78% {
    offset-distance: 100%;
    opacity: 1;
    fill: #ffffff;
    filter: drop-shadow(0 0 10px #e8f8ff);
  }
  84%, 100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes circuitLanternGlow {
  0% {
    fill: #ffd978;
    filter: drop-shadow(0 0 10px #ffd978);
    transform: scale(1.08);
  }
  74% {
    fill: #ffd978;
    filter: drop-shadow(0 0 10px #ffd978);
    transform: scale(1.08);
  }
  80% {
    fill: #ffffff;
    filter: drop-shadow(0 0 16px #fff4e0) drop-shadow(0 0 24px #ffd978);
    transform: scale(1.28);
  }
  92% {
    fill: #ffe1a6;
    filter: drop-shadow(0 0 14px #ffd978);
    transform: scale(1.14);
  }
  100% {
    fill: #ffd978;
    filter: drop-shadow(0 0 10px #ffd978);
    transform: scale(1.08);
  }
}

@keyframes circuitLanternHaloBloom {
  0%, 72% {
    opacity: 0.68;
    transform: scale(0.96);
  }
  80% {
    opacity: 1;
    transform: scale(1.36);
  }
  94% {
    opacity: 0.82;
    transform: scale(1.12);
  }
  100% {
    opacity: 0.68;
    transform: scale(0.96);
  }
}

@keyframes circuitLanternRippleExpand {
  0%, 75% {
    opacity: 0;
    transform: scale(0.6);
  }
  80% {
    opacity: 0.95;
  }
  98% {
    opacity: 0;
    transform: scale(2.4);
  }
  100% {
    opacity: 0;
  }
}

@supports not (offset-path: path("M 0,0")) {
  .circuit-spark-pulse {
    transform: translate(54px, 54px);
  }
  .instrument-card:hover .circuit-spark-pulse,
  .instrument-card:focus-visible .circuit-spark-pulse {
    animation: circuitSparkFallback 1.2s linear infinite;
  }
  @keyframes circuitSparkFallback {
    0% { transform: translate(54px, 54px); opacity: 0; }
    5% { opacity: 1; }
    22% { transform: translate(108px, 44px); }
    35% { transform: translate(108px, 20px); }
    50% { transform: translate(172px, 20px); }
    64% { transform: translate(172px, 78px); }
    78% { transform: translate(226px, 78px); opacity: 1; }
    84%, 100% { transform: translate(226px, 78px); opacity: 0; }
  }
}

/* --- 08 SPECTRUM: Starlight vials float in harmonic wave, sine curve shimmers & chimes sparkle --- */

.spec-vial {
transform-box: view-box;
  opacity: 0.6;
  transform: translateY(0);
  transition: transform 0.65s cubic-bezier(0.22, 1.35, 0.36, 1), opacity 0.5s ease, filter 0.5s ease;
}

/* Idle slight vertical displacement */

.spec-vial-2 {
transform: translateY(4px);
}

.spec-vial-3 {
transform: translateY(-4px);
}

.spec-vial-4 {
transform: translateY(5px);
}

.spec-vial-5 {
transform: translateY(-3px);
}

.spec-vial-6 {
transform: translateY(4px);
}

.instrument-card:hover .spec-vial,
.instrument-card:focus-visible .spec-vial {
opacity: 1;
  transform: translateY(0);
}

.instrument-card:hover .spec-vial-1,
.instrument-card:focus-visible .spec-vial-1 {
filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.85));
  animation: specVialFloat 2.1s ease-in-out infinite 0.0s;
}

.instrument-card:hover .spec-vial-2,
.instrument-card:focus-visible .spec-vial-2 {
filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.85));
  animation: specVialFloat 2.1s ease-in-out infinite 0.12s;
}

.instrument-card:hover .spec-vial-3,
.instrument-card:focus-visible .spec-vial-3 {
filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.85));
  animation: specVialFloat 2.1s ease-in-out infinite 0.24s;
}

.instrument-card:hover .spec-vial-4,
.instrument-card:focus-visible .spec-vial-4 {
filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.85));
  animation: specVialFloat 2.1s ease-in-out infinite 0.36s;
}

.instrument-card:hover .spec-vial-5,
.instrument-card:focus-visible .spec-vial-5 {
filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.85));
  animation: specVialFloat 2.1s ease-in-out infinite 0.48s;
}

.instrument-card:hover .spec-vial-6,
.instrument-card:focus-visible .spec-vial-6 {
filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.85));
  animation: specVialFloat 2.1s ease-in-out infinite 0.60s;
}

.instrument-card:hover .spec-vial-7,
.instrument-card:focus-visible .spec-vial-7 {
filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.85));
  animation: specVialFloat 2.1s ease-in-out infinite 0.72s;
}

@keyframes specVialFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Consistent body structure so titles, descriptions, field notes & footers align across cards */

.inst-body {
display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.inst-title-row {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inst-title-row h2 {
font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-white);
}

.inst-desc {
font-size: 13.5px;
  line-height: 1.62;
  color: var(--text-secondary);
  flex: 1;
}

.inst-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-hairline);
border-top-color: var(--border-hairline);
  margin-top: 2px;
  padding-top: 14px;
}

.cta-pill {
background: rgba(255, 244, 230, 0.12);
  border: 1px solid var(--border-subtle);
  color: var(--text-white);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  transition: all 0.3s ease;
}

.instrument-card:hover .cta-pill {
background: linear-gradient(135deg, #ffe1a6, #ffbf8a);
  color: #3b2f5e;
  border-color: transparent;
  opacity: 1;
  box-shadow: 0 0 20px rgba(255, 207, 122, 0.45);
}

.hub-whisper {
text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  max-width: 520px;
  margin: 8px auto 0;
  color: var(--text-white);
  opacity: 0.92;
  text-shadow: 0 2px 12px rgba(var(--well-rgb), 0.78), 0 1px 2px rgba(var(--well-rgb), 0.55);
}

/* --- 5. SOFT LIGHT RIPPLE ON EVERY TOUCH -------------------------------- */

.light-ripple {
position: fixed;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 226, 160, 0.4) 0%,
    rgba(255, 190, 170, 0.16) 50%,
    transparent 78%
  );
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
  animation: lightRippleExpand 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  z-index: 999;
}

@keyframes lightRippleExpand {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.6); }
}

/* --- 6. THE INSTRUMENT STAGE ------------------------------------------- */

.game-view-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.2s ease;
background: rgba(var(--card-rgb), 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  padding: 24px 28px 34px;
  box-shadow: 0 20px 56px rgba(var(--well-rgb), 0.42), 0 0 40px rgba(255, 207, 160, 0.08);
  position: relative;
}

.game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
padding-bottom: 18px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 20px;
}

.text-back-btn {
  background: none;
  border: none;
  font-weight: 500;
  cursor: pointer;
font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.text-back-btn:hover {
color: var(--gold-accent);
}

.mono-seed-tag {
  font-size: 11.5px;
font-family: var(--font-sans);
  color: var(--text-secondary);
}

.instrument-lore-banner {
display: flex;
  align-items: center;
  background: rgba(255, 217, 160, 0.08);
  border: 1px solid rgba(255, 217, 160, 0.2);
  border-radius: 16px;
  padding: 12px 18px;
  margin-bottom: 22px;
}

.lore-left {
display: flex; align-items: center; gap: 14px;
}

.lore-lamp {
flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px 2px rgba(255, 207, 122, 0.7);
  animation: filamentGlow 3s ease-in-out infinite alternate;
}

.lore-text {
font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-white);
}

.lore-coords {
font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* --- 6. THE INSTRUMENT STAGE: FULL OBSERVATORY THEME HARMONIZATION ---- */

.game-view-container {
background: rgba(var(--card-rgb), 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  padding: 24px 28px 34px;
  box-shadow: 0 24px 64px rgba(var(--well-rgb), 0.48), 0 0 40px rgba(255, 207, 160, 0.08);
  position: relative;
}

.game-topbar {
padding-bottom: 18px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 20px;
}

.text-back-btn {
font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.text-back-btn:hover {
color: var(--gold-accent);
}

.mono-seed-tag {
font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

.instrument-lore-banner {
display: flex;
  align-items: center;
  background: rgba(255, 217, 160, 0.08);
  border: 1px solid rgba(255, 217, 160, 0.2);
  border-radius: 16px;
  padding: 12px 18px;
  margin-bottom: 22px;
}

.lore-left {
display: flex; align-items: center; gap: 14px;
}

.lore-lamp {
flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px 2px rgba(255, 207, 122, 0.7);
  animation: filamentGlow 3s ease-in-out infinite alternate;
}

.lore-text {
font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-white);
}

.lore-coords {
font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.game-panel {
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
background: rgba(var(--well-rgb), 0.42);
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
}

/* ================== GAME 1: DENGE (BALANCE) ================== */

.denge-board-3d {
  padding: 16px;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s;
background: rgba(var(--well-rgb), 0.72) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(var(--well-rgb), 0.6), inset 0 0 20px rgba(255, 207, 122, 0.04) !important;
}

.denge-board-3d.board-locked {
border-color: var(--amber) !important;
  box-shadow: 0 20px 50px rgba(var(--well-rgb), 0.6), 0 0 24px rgba(255, 207, 122, 0.25) !important;
}

.denge-grid.grid-6x6 {
  display: grid;
  position: relative;
grid-template-columns: repeat(6, var(--denge-cell-size)) !important;
  grid-template-rows: repeat(6, var(--denge-cell-size)) !important;
  gap: var(--denge-gap) !important;
  width: fit-content;
  margin: 0 auto;
}

.denge-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
width: var(--denge-cell-size) !important;
  height: var(--denge-cell-size) !important;
  border-radius: 12px;
  transition: filter 0.15s, background-color 0.2s;
}

.denge-cell:hover {
filter: brightness(1.22);
}

.pivot-center-icon {
font-size: 20px;
  color: var(--amber);
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(255, 207, 122, 0.6));
}

.com-cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s;
border: 1.5px dashed rgba(255, 207, 122, 0.7);
}

.com-cursor.centered {
border-color: var(--amber);
  border-style: solid;
  box-shadow: 0 0 20px rgba(255, 207, 122, 0.75), inset 0 0 10px rgba(255, 207, 122, 0.3);
}

/* Weight Tokens: Radiant celestial stone & polished brass */

.weight-token {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: popIn 0.16s ease;
background: #fff8ef !important;
  color: #1f112e !important;
  border: 2px solid #ffd9a0 !important;
  box-shadow: 0 4px 14px rgba(16, 8, 24, 0.6), 0 0 10px rgba(255, 217, 160, 0.4) !important;
  font-weight: 700;
}

.weight-token.anchor-weight {
background: linear-gradient(135deg, #ffe082 0%, #ffb300 100%) !important;
  color: #2b1404 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 179, 0, 0.8), 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}

.weight-token.conflict {
background: #f43f5e !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.85) !important;
}

/* Bubble Level Tube: Antique brass & glowing amber liquid */

.bubble-tube {
  width: 120px;
  height: 42px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
background: rgba(var(--well-rgb), 0.85) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.bubble-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
background: #fff6e5 !important;
  box-shadow: 0 0 10px rgba(255, 207, 122, 0.9) !important;
}

.bubble-tube.balanced .bubble-dot {
background: var(--amber) !important;
  box-shadow: 0 0 16px var(--amber), 0 0 28px rgba(255, 207, 122, 0.6) !important;
}

/* ================== GAME 2: SONAR (ACOUSTIC RADAR) ================== */

.sonar-wave-strip {
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
background: rgba(var(--well-rgb), 0.72) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  margin: 0 auto 4px auto;
}

#sonar-osc-canvas,
#sonar-oscilloscope {
width: 100% !important;
  max-width: 380px !important;
  height: auto !important;
  aspect-ratio: 380 / 44;
  display: block;
  margin: 0 auto;
}

.sonar-wave-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
color: var(--text-muted);
}

.sonar-tx-btn {
background: rgba(255, 244, 230, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-white);
  border-radius: 11px;
  font-weight: 600;
}

.sonar-tx-btn:hover {
background: rgba(45, 212, 191, 0.22);
  color: #ffffff;
  border-color: #2dd4bf;
  box-shadow: 0 0 14px rgba(45, 212, 191, 0.4);
}

.sonar-tx-btn.pinged {
background: rgba(45, 212, 191, 0.28);
  border-color: #2dd4bf;
  color: #2dd4bf;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.45);
}

.sonar-tx-btn.active {
background: rgba(251, 191, 36, 0.35);
  border-color: #fbbf24;
  color: #fbbf24;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.65);
}

.sonar-tx-row {
grid-template-columns: var(--sonar-tx-size) repeat(6, var(--sonar-cell-size)) var(--sonar-tx-size) !important;
  gap: var(--sonar-gap) !important;
  width: fit-content;
  margin: 0 auto;
}

.sonar-middle-row {
gap: var(--sonar-gap) !important;
  width: fit-content;
  margin: 0 auto;
}

.sonar-tx-col {
grid-template-rows: repeat(6, var(--sonar-cell-size)) !important;
  width: var(--sonar-tx-size) !important;
  gap: var(--sonar-gap) !important;
}

.sonar-tx-col .sonar-tx-btn {
height: var(--sonar-cell-size) !important;
}

.sonar-grid {
  display: grid;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px;
  border-radius: 12px;
grid-template-columns: repeat(6, var(--sonar-cell-size)) !important;
  grid-template-rows: repeat(6, var(--sonar-cell-size)) !important;
  gap: var(--sonar-gap) !important;
  width: fit-content;
  margin: 0 auto;
}

.sonar-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
width: var(--sonar-cell-size) !important;
  height: var(--sonar-cell-size) !important;
  border-radius: 12px;
  background: rgba(var(--well-rgb), 0.7);
  border: 1px solid rgba(255, 236, 214, 0.12);
  transition: all 0.15s ease;
}

.sonar-cell:hover {
  border-color: rgba(255, 255, 255, 0.16);
background: rgba(var(--card-rgb), 0.75);
  filter: brightness(1.25);
}

.sonar-cell.in-ray {
box-shadow: inset 0 0 0 2px rgba(45, 212, 191, 0.65), 0 0 16px rgba(45, 212, 191, 0.3);
}

.sonar-cell.marked-sub {
background: rgba(251, 191, 36, 0.28) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.45), inset 0 0 12px rgba(251, 191, 36, 0.25) !important;
}

.sonar-cell.marked-water .cell-cross {
color: #38bdf8 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.cell-cross {
color: var(--text-muted);
  opacity: 0.7;
}

/* ================== GAME 3: RESONANCE (PHASE MATRIX) ================== */

.resonance-grid-clean {
  display: grid;
grid-template-columns: repeat(6, var(--res-cell-size)) !important;
  grid-template-rows: repeat(6, var(--res-cell-size)) !important;
  gap: var(--res-gap) !important;
  width: fit-content;
  margin: 0 auto;
  background: rgba(var(--well-rgb), 0.5);
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 16px 40px rgba(var(--well-rgb), 0.5);
}

.res-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
width: var(--res-cell-size) !important;
  height: var(--res-cell-size) !important;
  background: rgba(var(--well-rgb), 0.65);
  border: 1.5px solid rgba(255, 236, 214, 0.1);
  border-radius: 14px;
  transition: all 0.18s ease;
}

.res-cell:hover {
background: rgba(var(--card-rgb), 0.75);
  border-color: var(--border-warm);
}

.res-cell.is-plus {
background: rgba(56, 189, 248, 0.24);
  border-color: rgba(56, 189, 248, 0.75);
  box-shadow: inset 0 0 14px rgba(56, 189, 248, 0.2);
}

.res-cell.is-minus {
background: rgba(251, 146, 60, 0.24);
  border-color: rgba(251, 146, 60, 0.75);
  box-shadow: inset 0 0 14px rgba(251, 146, 60, 0.2);
}

.res-cell.cell-conflict {
border-color: #f43f5e !important;
  background: rgba(244, 63, 94, 0.28) !important;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.5) !important;
}

.res-disc.plus {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.45) 0%, rgba(2, 132, 199, 0.6) 100%);
  color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
  border: 1.5px solid #7dd3fc;
}

.res-disc.minus {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.45) 0%, rgba(234, 88, 12, 0.6) 100%);
  color: #fb923c;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.6);
  border: 1.5px solid #fed7aa;
}

.res-disc.locked {
border: 2px solid rgba(255, 236, 214, 0.85);
  box-shadow: 0 0 14px rgba(255, 236, 214, 0.4);
}

.edge-clue {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
background: rgba(var(--well-rgb), 0.95);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(18, 10, 26, 0.5);
  font-weight: 700;
}

.edge-clue.eq {
border-color: #c084fc;
  color: #c084fc;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.6);
}

.edge-clue.opp {
border-color: #fb7185;
  color: #fb7185;
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.6);
}

.res-hint-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 20px;
  border-radius: 16px;
  font-size: 13.5px;
  font-weight: 500;
  max-width: 560px;
  margin: 2px auto 0 auto;
  text-align: left;
  animation: hintBannerIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1.5;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(135deg, rgba(var(--well-rgb), 0.92), rgba(var(--well-rgb), 0.75));
  border: 1px solid var(--border-subtle);
  color: var(--text-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.res-hint-banner:hover {
  transform: translateY(-1px);
}

.res-hint-banner.active {
  background: linear-gradient(135deg, rgba(255, 207, 122, 0.2), rgba(255, 207, 122, 0.08));
  border-color: rgba(255, 207, 122, 0.5);
  color: var(--amber);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), 0 0 22px rgba(255, 207, 122, 0.22), inset 0 1px 0 rgba(255, 235, 190, 0.15);
}

.res-hint-banner.error {
  background: linear-gradient(135deg, rgba(244, 169, 160, 0.2), rgba(244, 169, 160, 0.08));
  border-color: rgba(244, 169, 160, 0.5);
  color: var(--text-white);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), 0 0 22px rgba(244, 169, 160, 0.2), inset 0 1px 0 rgba(255, 220, 215, 0.12);
}

@keyframes hintBannerIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .res-hint-banner { animation: none; transition: none; }
}

/* ================== GAME 4: ECHO (EKO / VALLEY BELL) ================== */

.eko-sculpt-card {
  width: 100%;
  max-width: 460px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
background: rgba(var(--well-rgb), 0.42);
  border: 1px solid var(--border-hairline);
  border-radius: 22px;
}

.eko-listen-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
background: rgba(255, 244, 230, 0.06);
  border: 1px solid var(--border-hairline);
  color: var(--text-white);
}

.eko-listen-pill:hover:not(.disabled) {
background: rgba(255, 244, 230, 0.14);
  border-color: var(--border-warm);
}

.outer-target-ring {
  inset: 0;
border: 2px dashed rgba(56, 189, 248, 0.65) !important;
}

.inner-user-ring {
  inset: 18px;
border: 2px solid rgba(251, 191, 36, 0.45) !important;
}

.inner-user-ring.recorded {
border-color: #fbbf24 !important;
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.55) !important;
}

.eko-orb-stage.target-ring-ping .outer-target-ring,
.eko-orb-stage.target-ring-echo .outer-target-ring {
border-color: #38bdf8 !important;
  border-style: solid !important;
  transform: scale(1.06);
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.75) !important;
}

.eko-orb-stage.user-ring-ping .inner-user-ring,
.eko-orb-stage.user-ring-echo .inner-user-ring {
border-color: #fbbf24 !important;
  transform: scale(1.06);
  box-shadow: 0 0 35px rgba(251, 191, 36, 0.75) !important;
}

.eko-tactile-pad {
  width: 156px;
  height: 156px;
  border-radius: 50%;
  color: var(--text-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 16px;
  text-align: center;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s,
    box-shadow 0.2s;
background: radial-gradient(circle at 50% 30%, #452b57 0%, #20132b 100%) !important;
  border: 2px solid rgba(255, 217, 160, 0.45) !important;
  box-shadow: 0 14px 36px rgba(16, 8, 24, 0.65), 0 0 24px rgba(255, 207, 122, 0.2) !important;
}

.eko-tactile-pad:hover {
border-color: #ffd9a0 !important;
  box-shadow: 0 16px 40px rgba(16, 8, 24, 0.7), 0 0 32px rgba(255, 207, 122, 0.35) !important;
}

.eko-tactile-pad.holding {
  transform: scale(0.93);
border-color: #ffb703 !important;
  box-shadow: 0 0 55px rgba(255, 183, 3, 0.8), inset 0 0 30px rgba(255, 183, 3, 0.4) !important;
}

.pad-icon {
  font-size: 20px;
color: #ffb703 !important;
  filter: drop-shadow(0 0 8px rgba(255, 183, 3, 0.75));
}

.eko-tactile-pad:hover {
border-color: var(--border-warm);
}

.eko-tactile-pad.holding {
border-color: var(--amber);
  box-shadow: 0 0 45px rgba(255, 207, 122, 0.5), inset 0 0 22px rgba(255, 207, 122, 0.25);
}

.pad-icon {
color: var(--amber);
}

.eko-reveal-box {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.2s ease;
background: rgba(var(--well-rgb), 0.72);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
}

/* ================== SHARED HUD CHIPS & BUTTONS ================== */

.denge-regions-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
gap: 8px;
}

.region-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 11.5px;
background: rgba(var(--well-rgb), 0.6);
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  border-radius: 999px;
  transition: all 0.2s ease;
}

.region-chip.done {
border-color: rgba(255, 207, 122, 0.45);
  background: rgba(255, 207, 122, 0.08);
  color: var(--text-white);
}

.region-chip.over {
border-color: var(--coral);
  color: var(--coral);
  background: rgba(244, 169, 160, 0.08);
}

.btn-secondary {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  cursor: pointer;
background: rgba(255, 244, 230, 0.08);
  border: 1px solid var(--border-hairline);
  color: var(--text-white);
  border-radius: 999px;
  transition: all 0.18s ease;
}

.btn-secondary:hover {
background: rgba(255, 244, 230, 0.16);
  border-color: var(--border-subtle);
}

/* ================== THEMED HINT SYSTEM & ANIMATIONS ================== */

.btn-hint {
background: rgba(255, 207, 122, 0.12) !important;
  border: 1px solid rgba(255, 207, 122, 0.38) !important;
  color: var(--gold-accent) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: all 0.2s ease;
}

.btn-hint:hover {
background: rgba(255, 207, 122, 0.22) !important;
  border-color: rgba(255, 207, 122, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(255, 207, 122, 0.35);
}

.btn-hint .btn-cooldown-wipe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transform: translateY(100%);
background: linear-gradient(180deg, rgba(255, 207, 122, 0.38) 0%, rgba(217, 119, 6, 0.18) 100%) !important;
  border-top: 2px solid #ffd9a0 !important;
  box-shadow: 0 0 14px rgba(255, 207, 122, 0.6) !important;
  border-radius: inherit;
  pointer-events: none;
}

.btn-hint.cooldown-active {
opacity: 0.65;
  cursor: not-allowed !important;
}

.status-pill.error {
background: rgba(244, 169, 160, 0.2);
  color: var(--coral);
}

.status-pill.solved {
background: rgba(255, 207, 122, 0.2);
  color: var(--amber);
}

/* 1. Celestial Hint Glow: warm candlelit starlight bloom (replaces harsh scale pulse) */

.cell-hint-glow {
border-color: #ffd9a0 !important;
  box-shadow: 0 0 0 2px rgba(255, 217, 160, 0.7),
              0 0 24px rgba(255, 207, 122, 0.75),
              inset 0 0 14px rgba(255, 207, 122, 0.35) !important;
  animation: celestialHintGlow 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
  z-index: 10 !important;
}

@keyframes celestialHintGlow {
  0% {
    border-color: rgba(255, 217, 160, 0.6);
    box-shadow: 0 0 0 1.5px rgba(255, 217, 160, 0.5),
                0 0 14px rgba(255, 207, 122, 0.45),
                inset 0 0 8px rgba(255, 207, 122, 0.2);
    filter: brightness(1.05);
  }
  100% {
    border-color: #ffcf7a;
    box-shadow: 0 0 0 2.5px #ffd9a0,
                0 0 32px rgba(255, 207, 122, 0.9),
                inset 0 0 18px rgba(255, 207, 122, 0.45);
    filter: brightness(1.28);
  }
}

/* 2. Soft Peach Whisper for errors (no violent 4px shaking) */

.cell-hint-error {
border-color: var(--coral) !important;
  box-shadow: 0 0 0 2px rgba(244, 169, 160, 0.75),
              0 0 22px rgba(244, 169, 160, 0.6) !important;
  animation: gentlePeachWhisper 2.2s ease-in-out infinite alternate !important;
  z-index: 10 !important;
}

@keyframes gentlePeachWhisper {
  0%   { box-shadow: 0 0 0 1.5px rgba(244, 169, 160, 0.45), 0 0 12px rgba(244, 169, 160, 0.3); }
  100% { box-shadow: 0 0 0 2.5px rgba(244, 169, 160, 0.85), 0 0 26px rgba(244, 169, 160, 0.7); }
}

/* Ear Mode toggle button in action bar */

.btn-ear-toggle {
display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  user-select: none;
  transition: all 0.18s ease;
}

.btn-ear-toggle:hover {
background: rgba(255, 244, 230, 0.14) !important;
  border-color: var(--border-warm) !important;
  color: var(--text-white) !important;
}

.btn-ear-toggle.active {
background: rgba(45, 212, 191, 0.22) !important;
  border-color: #2dd4bf !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(45, 212, 191, 0.35);
}

.btn-ear-toggle.active .ear-icon {
filter: drop-shadow(0 0 6px #2dd4bf);
}

.sonar-status-bar {
display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 8px;
}

/* --- 7. BUTTONS & MODALS ----------------------------------------------- */

.mode-pill-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
background: rgba(var(--well-rgb), 0.48);
  border: 1px solid var(--border-hairline);
}

.mode-pill-opt {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.16s ease;
font-family: var(--font-sans);
}

.mode-pill-opt.active {
background: rgba(255, 244, 230, 0.16);
  color: var(--text-white);
  border: 1px solid rgba(255, 236, 214, 0.28);
  box-shadow: 0 2px 10px rgba(18, 16, 56, 0.3);
}

.subtle-pill-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
font-family: var(--font-sans); color: var(--text-secondary);
}

.subtle-pill-btn:hover {
  background: rgba(255, 255, 255, 0.11);
color: var(--gold-accent);
}

.white-pill-btn {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    transform 0.15s,
    opacity 0.15s;
background: var(--text-white);
  color: #3b2f5e;
  font-family: var(--font-sans);
  font-weight: 600;
  box-shadow: 0 0 20px rgba(255, 244, 230, 0.25);
}

.white-pill-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
background: #ffffff;
  box-shadow: 0 0 28px rgba(255, 244, 230, 0.42);
}

.accent-pill-btn {
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 12.5px;
  cursor: pointer;
  transition: transform 0.15s;
background: linear-gradient(135deg, #ffe1a6, #ffbf8a);
  color: #3b2f5e;
  font-family: var(--font-sans);
  font-weight: 600;
  border: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
background: rgba(var(--well-rgb), 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-sizing: border-box;
}

.modal-card {
  padding: 28px;
  position: relative;
background: rgba(var(--card-rgb), 0.96);
  border: 1px solid var(--border-warm);
  border-radius: 26px;
  box-shadow: 0 24px 64px rgba(var(--well-rgb), 0.58), 0 0 50px rgba(255, 207, 160, 0.12);
  width: 100%;
  max-width: min(480px, 100%);
  box-sizing: border-box;
}

.modal-card h2 {
font-family: var(--font-serif);
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 0;
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
color: var(--text-secondary);
}

.guide-kicker {
font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-accent);
}

.guide-sub {
font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-secondary);
  margin: 6px 0 18px;
}

.howto-step-card {
  display: flex;
  gap: 12px;
background: rgba(255, 244, 230, 0.06);
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.howto-step-icon {
font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--amber);
  background: rgba(255, 207, 122, 0.12);
  padding: 2px 10px;
  border-radius: 999px;
}

.howto-step-text h4 {
font-size: 14px; font-weight: 600; color: var(--text-white); margin-bottom: 4px;
}

.howto-step-text p {
font-size: 13px; line-height: 1.55; color: var(--text-secondary);
}

.win-lead {
font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 6px;
}

.win-note {
font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-secondary);
}

.win-meta-row {
display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-right: 36px; /* keep clear of the close button */
}

/* ================== WIN MODAL: THEMED SOLUTION SHOWCASE ================== */

.win-matrix-showcase {
  margin-bottom: 18px;
background: radial-gradient(circle at 50% 50%, rgba(58, 36, 76, 0.75) 0%, rgba(28, 16, 38, 0.92) 100%) !important;
  border: 1px solid rgba(255, 217, 160, 0.28) !important;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 18px 0 20px 0 !important;
  box-shadow: inset 0 3px 18px rgba(14, 6, 22, 0.6), 0 0 32px rgba(255, 207, 122, 0.08) !important;
}

.win-visual-matrix {
display: grid !important;
  gap: 7px !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

.win-vcell {
width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: rgba(255, 244, 230, 0.05) !important;
  border: 1px solid rgba(255, 236, 214, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

/* Empty cells: quiet, dark translucent paper well */

.win-vcell.empty {
background: rgba(255, 244, 230, 0.04) !important;
  border-color: rgba(255, 236, 214, 0.09) !important;
  color: transparent !important;
}

/* Active / Solved / Target cells: warm radiant golden amber starlight */

.win-vcell.active,
.win-vcell.hit,
.win-vcell.green {
  border-color: #34d399;
background: linear-gradient(135deg, #ffd978 0%, #ffaa33 100%) !important;
  border: 1px solid #fff2b8 !important;
  box-shadow: 0 0 14px rgba(255, 179, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  color: #2b1404 !important;
  font-weight: 700;
}

/* Fulcrum / Center Pivot cell */

.win-vcell.pivot,
.win-vcell.center {
  border-color: #2dd4bf;
background: rgba(255, 207, 122, 0.24) !important;
  border: 1.5px solid #ffcf7a !important;
  color: #ffcf7a !important;
  box-shadow: 0 0 14px rgba(255, 207, 122, 0.6) !important;
  font-weight: 700;
}

/* Resonance Blue Crest phase */

.win-vcell.blue,
.win-vcell.cyan {
  border-color: #38bdf8;
background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  border: 1px solid #bae6fd !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.65) !important;
  color: #ffffff !important;
}

/* Resonance Orange Trough phase */

.win-vcell.amber,
.win-vcell.orange {
  border-color: #fb923c;
background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%) !important;
  border: 1px solid #fed7aa !important;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.65) !important;
  color: #ffffff !important;
}

/* Sonar acoustic ping ray */

.win-vcell.ping {
  border-color: rgba(56, 189, 248, 0.35);
background: rgba(45, 212, 191, 0.25) !important;
  border: 1px solid rgba(45, 212, 191, 0.6) !important;
  color: #2dd4bf !important;
}

/* Prism / Circuit / Knot targets */

.win-vcell.emerald {
background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%) !important;
  border: 1px solid #d1fae5 !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.6) !important;
  color: #053b2a !important;
  font-weight: 700;
}

/* Spectrum tube ends */

.win-vcell.purple {
background: linear-gradient(135deg, #c4b5fd 0%, #7c3aed 100%) !important;
  border: 1px solid #ede9fe !important;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.6) !important;
  color: #fff !important;
}

.win-vcell.coral {
background: linear-gradient(135deg, #fda4af 0%, #e11d48 100%) !important;
  border: 1px solid #ffe4e6 !important;
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.6) !important;
  color: #fff !important;
}

/* Obstacles and blanks that still carry a glyph stay quiet */
.win-vcell.empty:not(:empty) {
color: rgba(255, 236, 214, 0.3) !important;
}

.win-pill-soft {
font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold-accent);
  background: rgba(255, 217, 160, 0.12);
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 217, 160, 0.22);
}

/* ---- Finish screen polish ---- */

.win-card {
  overflow: hidden;
  animation: winCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.win-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: radial-gradient(ellipse at 50% -20%, rgba(255, 207, 122, 0.22), transparent 70%);
  pointer-events: none;
}

.win-card > *:not(.modal-close-btn) { position: relative; }

/* Close button sits on the same line as the meta pills, inside the card padding */
.win-card .modal-close-btn {
  top: 28px;
  right: 28px;
  z-index: 2;
}

.win-card .win-meta-row {
  min-height: 28px;
  padding-right: 40px;
}

.win-card .win-hero-block {
  text-align: center;
  margin-bottom: 22px;
}

.win-card .win-lead {
  font-size: 26px;
  text-wrap: balance;
  text-transform: none;
  background: linear-gradient(180deg, #fff6e4 0%, #ffd9a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.win-card .win-lead::first-letter { text-transform: uppercase; }

.win-card .win-note {
  font-size: 15px;
  max-width: 34ch;
  margin: 0 auto;
  line-height: 1.45;
}

.win-card .win-meta-row {
  margin-bottom: 18px;
}

.win-card .win-stats-strip {
  gap: 10px;
  margin-bottom: 4px;
}

.win-card .win-stat-box {
  align-items: center;
  text-align: center;
  padding: 14px 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 244, 230, 0.07), rgba(255, 244, 230, 0.02));
  border: 1px solid var(--border-hairline);
  gap: 5px;
}

.win-card .win-stat-lbl {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.win-card .win-stat-val {
  font-size: 19px;
  white-space: nowrap;
}

.win-card .win-stat-val.highlight { color: var(--amber); }

.win-card .win-visual-matrix { max-width: 100%; }

.win-visual-svg {
  width: min(100%, 240px);
  aspect-ratio: 1;
  animation: winCellIn 0.5s ease-out backwards;
}

.win-visual-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 207, 122, 0.35));
}

.win-card .win-vcell {
  width: clamp(20px, 6.5vw, 28px) !important;
  height: clamp(20px, 6.5vw, 28px) !important;
  animation: winCellIn 0.4s ease-out backwards;
}

.win-card .win-vcell:nth-child(3n)   { animation-delay: 0.08s; }
.win-card .win-vcell:nth-child(3n+1) { animation-delay: 0.16s; }
.win-card .win-vcell:nth-child(3n+2) { animation-delay: 0.24s; }

.win-card .win-modal-actions button {
  min-height: 44px;
  border-radius: 14px;
}

@keyframes winCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes winCellIn {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .win-card, .win-card .win-vcell { animation: none; }
}

/* ================== WIN MODAL: TODAY'S INSTRUMENTS STRIP ================== */

.win-daily-progress-block {
background: rgba(var(--well-rgb), 0.58) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  margin-bottom: 20px !important;
}

.win-progress-head {
display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.win-progress-head span {
font-weight: 500;
  color: var(--text-white);
}

.win-progress-head strong {
color: var(--gold-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.win-mod-pills-row {
display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
}

.win-mod-pill {
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
background: rgba(255, 244, 230, 0.06) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: 10px !important;
  padding: 7px 5px !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer;
  white-space: nowrap !important; /* CRITICAL: Never break text onto 2 lines! */
  transition: all 0.18s ease;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.win-mod-pill span {
white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-mod-pill .win-mod-dot {
width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.22) !important;
  flex-shrink: 0;
}

.win-mod-pill:hover {
background: rgba(255, 244, 230, 0.14) !important;
  border-color: var(--border-warm) !important;
  color: var(--text-white) !important;
}

.win-mod-pill.done {
border-color: rgba(255, 207, 122, 0.5) !important;
  background: rgba(255, 207, 122, 0.1) !important;
  color: var(--text-white) !important;
}

.win-mod-pill.done .win-mod-dot {
background: #ffb703 !important;
  box-shadow: 0 0 8px #ffb703 !important;
}

.win-mod-pill.current {
border-color: var(--gold-accent) !important;
  background: rgba(255, 217, 160, 0.14) !important;
  box-shadow: 0 0 12px rgba(255, 217, 160, 0.3) !important;
}

@media (max-width: 440px) {
  .win-mod-pills-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* --- 8. RESPONSIVE DESIGN & MOTION PREFERENCES -------------------------- */

/* Global viewport boundaries & mobile smoothness */

html, body {
overflow-x: hidden;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
}

button, .nav-mod-btn, .icon-btn, .denge-cell, .sonar-cell, .res-cell, .eko-tactile-pad {
-webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ================= BREAKPOINT 1: <= 860px (Tablets & Small Laptops) ================= */

@media (max-width: 860px) {
  .studio-shell {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: 24px;
  }
  
  .studio-nav {
    gap: 12px;
    padding-bottom: 14px;
  }
  
  .nav-left { gap: 12px; }
  .nav-modules { gap: 6px; }
  .nav-mod-btn {
    font-size: 12px;
    padding: 5px 9px;
    gap: 4px;
  }
  
  .daily-clock-pill .clock-sep,
  .daily-clock-pill #daily-countdown-text {
    display: none;
  }
  
  .instrument-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ================= BREAKPOINT 2: <= 720px (Portrait Tablets & Phablets) ================= */

@media (max-width: 720px) {
  .studio-shell {
    padding: 16px 14px 100px;
    gap: 20px;
  }
  
  .studio-nav {
    gap: 8px;
    padding-bottom: 12px;
  }
  
  .nav-left { gap: 8px; }
  
  /* Directly hide module buttons on smaller screens */
  .nav-modules {
    display: none !important;
  }
  
  .hub-headline {
    font-size: clamp(24px, 5.5vw, 32px);
  }
  
  .hub-subline {
    font-size: 14px;
  }
  
  .game-view-container {
    padding: 18px 14px 26px;
    border-radius: 22px;
  }
  
  .instrument-card {
    padding: 18px 16px;
    border-radius: 20px;
  }
}

/* ================= BREAKPOINT 3: <= 640px (Mobile Phones) ================= */

@media (max-width: 640px) {
  :root {
    --denge-cell-size: clamp(44px, 13vw, 54px);
    --denge-gap: 5px;
    
    --sonar-cell-size: clamp(38px, 10.5vw, 46px);
    --sonar-tx-size: clamp(26px, 7vw, 32px);
    --sonar-gap: 4px;
    
    --res-cell-size: clamp(40px, 11vw, 48px);
    --res-gap: 4px;
  }
  
  .daily-clock-pill {
    padding: 4px 7px;
    font-size: 11px;
    gap: 5px;
  }
  
  .nav-right { gap: 6px; }
  
  .icon-btn {
    width: 32px;
    height: 32px;
  }
  
  /* Hub View */
  .obs-station-tag {
    font-size: 11px;
    padding: 4px 10px;
    gap: 6px;
    max-width: 100%;
    flex-wrap: wrap;
  }
  
  .hub-intro {
    gap: 16px;
  }
  
  .daily-progress-summary {
    font-size: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .diagram-svg {
    height: 90px;
  }
  
  .inst-title-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .inst-title-row h2 {
    font-size: 21px;
  }
  
  .inst-desc {
    font-size: 13.5px;
  }
  
  .inst-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .cta-pill {
    font-size: 12px;
    padding: 6px 14px;
  }
  
  /* Game View Container */
  .game-view-container {
    padding: 14px 10px 22px;
    border-radius: 18px;
  }
  
  .game-topbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  
  .game-seed-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  .text-back-btn {
    font-size: 12.5px;
    align-self: flex-start;
  }
  
  .instrument-lore-banner {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    margin-bottom: 16px;
  }
  
  .lore-text {
    font-size: 14px;
    line-height: 1.4;
  }
  
  .lore-coords {
    font-size: 10.5px;
  }
  
  /* Game 1: Denge */
  .denge-board-3d {
    padding: 10px 8px !important;
  }
  .com-cursor {
    width: calc(var(--denge-cell-size) * 0.44) !important;
    height: calc(var(--denge-cell-size) * 0.44) !important;
  }
  .weight-token {
    width: calc(var(--denge-cell-size) * 0.52) !important;
    height: calc(var(--denge-cell-size) * 0.52) !important;
    font-size: 11px !important;
  }
  .bubble-tube {
    width: 100px !important;
    height: 36px !important;
  }
  .denge-regions-bar {
    gap: 5px;
    justify-content: center;
  }
  .region-chip {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }
  .denge-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  
  /* Game 2: Sonar */
  .sonar-sculpt-wrap {
    padding: 8px 4px !important;
    align-items: center;
  }
  .sonar-tx-row .sonar-tx-btn {
    height: 30px !important;
    font-size: 10.5px !important;
  }
  .sonar-tx-col .sonar-tx-btn {
    font-size: 10.5px !important;
  }
  .sonar-hud-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  #sonar-osc-canvas,
  #sonar-oscilloscope {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    aspect-ratio: 380 / 44;
  }
  
  /* Game 3: Resonance */
  .resonance-grid-clean {
    padding: 10px 8px !important;
  }
  .res-disc {
    width: calc(var(--res-cell-size) * 0.6) !important;
    height: calc(var(--res-cell-size) * 0.6) !important;
  }
  .edge-clue {
    width: 15px !important;
    height: 15px !important;
    font-size: 8px !important;
  }
  .h-clue { right: -8px !important; }
  .v-clue { bottom: -8px !important; }
  .res-hint-banner {
    font-size: 12.5px !important;
    padding: 9px 14px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    max-width: 100% !important;
  }
  
  /* Game 4: Eko */
  .eko-sculpt-card {
    padding: 16px 12px !important;
    gap: 16px !important;
    max-width: 100% !important;
  }
  .eko-orb-stage {
    width: clamp(170px, 48vw, 210px) !important;
    height: clamp(170px, 48vw, 210px) !important;
  }
  .eko-tactile-pad {
    width: clamp(120px, 34vw, 146px) !important;
    height: clamp(120px, 34vw, 146px) !important;
    padding: 10px !important;
  }
  .pad-title { font-size: 13.5px !important; }
  .pad-sub { font-size: 9.5px !important; }
  .pad-icon { font-size: 18px !important; }
  .eko-listen-pill {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  
  /* Modals */
  .modal-backdrop {
    padding: 14px;
  }
  .modal-card {
    padding: 20px 16px !important;
    border-radius: 20px !important;
    max-height: calc(100vh - 28px);
  }
  .win-card .modal-close-btn {
    top: 20px;
    right: 16px;
  }
  .modal-card h2 {
    font-size: 22px !important;
  }
  .win-card-sleek {
    padding: 20px 14px 18px !important;
    border-radius: 20px !important;
  }
  .win-hero-title {
    font-size: 22px !important;
  }
  .win-stats-strip {
    gap: 6px !important;
  }
  .win-stat-box {
    padding: 8px 6px !important;
  }
  .win-stat-val {
    font-size: 14px !important;
  }
  .win-stat-lbl {
    font-size: 9px !important;
  }
  .win-matrix-showcase {
    padding: 10px 6px !important;
    max-width: 100%;
    overflow-x: auto;
  }
  .win-modal-actions {
    flex-direction: column;
    width: 100%;
  }
  .win-modal-actions button {
    width: 100%;
  }
  
  /* Popover */
  .ambient-popover {
    right: -24px;
    padding: 6px 10px;
    gap: 6px;
  }
  .ambient-volume-slider {
    width: 60px;
  }
}

/* ================= BREAKPOINT 4: <= 400px (Compact Mobile Phones) ================= */

@media (max-width: 400px) {
  :root {
    --denge-cell-size: clamp(38px, 12.5vw, 42px);
    --denge-gap: 4px;
    
    --sonar-cell-size: clamp(32px, 9.8vw, 36px);
    --sonar-tx-size: 24px;
    --sonar-gap: 3px;
    
    --res-cell-size: clamp(33px, 10.5vw, 38px);
    --res-gap: 3px;
  }
  
  .studio-shell {
    padding: 12px 10px 80px;
    gap: 16px;
  }
  
  .studio-nav {
    gap: 6px;
    padding-bottom: 10px;
  }
  
  .nav-left { gap: 6px; }
  
  .brand-name { font-size: 13.5px; }
  .brand-glyph { width: 14px; height: 14px; }
  
  /* Keep clock pill compact on narrow screens */
  .daily-clock-pill {
    padding: 3px 6px;
    font-size: 10.5px;
    gap: 4px;
  }
  
  .nav-right { gap: 4px; }
  .icon-btn {
    width: 28px;
    height: 28px;
    padding: 4px;
  }
  
  .hub-headline {
    font-size: 22px;
  }
  
  .hub-subline {
    font-size: 13px;
  }
  
  .instrument-card {
    padding: 14px 12px;
  }
  
  .diagram-svg {
    height: 78px;
  }
  
  .game-view-container {
    padding: 12px 8px 18px;
    border-radius: 16px;
  }
  
  .edge-clue {
    width: 13px !important;
    height: 13px !important;
    font-size: 7.5px !important;
  }
  .h-clue { right: -7px !important; }
  .v-clue { bottom: -7px !important; }
}

/* ================= BREAKPOINT 5: <= 340px (Ultra-Compact Phones) ================= */

@media (max-width: 340px) {
  :root {
    --denge-cell-size: 35px;
    --denge-gap: 3px;
    
    --sonar-cell-size: 28px;
    --sonar-tx-size: 20px;
    --sonar-gap: 2px;
    
    --res-cell-size: 30px;
    --res-gap: 2px;
  }
  
  .sonar-tx-row .sonar-tx-btn {
    height: 24px !important;
    font-size: 9px !important;
  }
  
  .sonar-tx-col .sonar-tx-btn {
    font-size: 9px !important;
  }
  
  .weight-token {
    font-size: 9.5px !important;
  }
}

/* --- OBSERVATORY THEME STYLING FOR PRISM, KNOT, CIRCUIT & SPECTRUM --- */

.prism-panel,
.knot-panel,
.circuit-panel,
.spectrum-panel {
background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-hairline);
  box-shadow: 0 24px 60px rgba(var(--well-rgb), 0.55), 0 0 40px rgba(var(--card-rgb), 0.28);
}

.prism-hud,
.knot-hud,
.circuit-hud,
.spectrum-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
border-bottom: 1px solid var(--border-hairline);
}

.prism-hud .hud-label,
.knot-hud .hud-label,
.circuit-hud .hud-label,
.spectrum-hud .hud-label {
font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}

.prism-hud .hud-value,
.knot-hud .hud-value,
.circuit-hud .hud-value,
.spectrum-hud .hud-value {
color: var(--text-white);
  font-family: var(--font-sans);
  font-weight: 600;
}

.prism-hud .hud-value.ok,
.knot-hud .hud-value.ok,
.circuit-hud .hud-value.ok,
.spectrum-hud .hud-value.ok {
color: var(--teal);
  text-shadow: 0 0 12px rgba(159, 227, 196, 0.45);
}

/* PRISM: Warm sunlight chamber */

.prism-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  border-radius: 16px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
background: var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 16px rgba(0, 0, 0, 0.4);
}

.laser-beam-outer {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
stroke: rgba(255, 217, 120, 0.35);
  stroke-width: 6;
}

.laser-beam-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
stroke: #ffe1a6;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px #ffd978);
}

.prism-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition:
    background 0.15s,
    border-color 0.15s;
background: rgba(var(--card-rgb), 0.35);
  border: 1px solid rgba(255, 236, 214, 0.08);
}

.prism-cell:hover {
background: rgba(var(--card-rgb), 0.55);
}

.cell-emitter {
background: rgba(255, 217, 120, 0.12);
  border-color: rgba(255, 217, 120, 0.35);
}

.emitter-beam-icon {
  font-size: 18px;
  line-height: 1;
color: #ffd978;
  text-shadow: 0 0 10px #ffd978;
}

.emitter-arrow {
  font-size: 11px;
  font-family: var(--font-mono);
color: #ffd978;
}

.cell-sensor {
background: rgba(159, 227, 196, 0.1);
  border-color: rgba(159, 227, 196, 0.28);
}

.cell-sensor.is-active {
background: rgba(159, 227, 196, 0.25);
  border-color: #9fe3c4;
  box-shadow: 0 0 20px rgba(159, 227, 196, 0.45);
}

.sensor-glyph {
  font-size: 18px;
  transition:
    color 0.2s,
    transform 0.2s;
  line-height: 1;
color: rgba(255, 236, 214, 0.4);
}

.sensor-receptor.active-glow .sensor-glyph {
  transform: scale(1.15);
color: #9fe3c4;
  text-shadow: 0 0 14px #9fe3c4;
}

.cell-mirror {
  cursor: pointer;
  transition:
    transform 0.15s,
    background 0.15s,
    border-color 0.15s;
background: rgba(255, 244, 230, 0.06);
  border-color: rgba(255, 236, 214, 0.16);
}

.cell-mirror:hover {
background: rgba(255, 244, 230, 0.12);
  border-color: var(--amber);
}

.mirror-glass {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  transform: rotate(45deg);
  position: absolute;
background: linear-gradient(90deg, #ffd978, #fff4e0, #ffd978);
  box-shadow: 0 0 10px rgba(255, 217, 120, 0.8);
}

.mirror-pivot-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
background: #a87e5b;
}

.cell-obstacle {
background: rgba(43, 29, 59, 0.8);
  border: 1px solid rgba(255, 236, 214, 0.08);
}

.obstacle-block {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
color: rgba(255, 236, 214, 0.2);
}

/* KNOT: Twilight constellation canvas */

.knot-canvas-container {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  touch-action: none;
background: var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.45);
}

.knot-edge-line {
  stroke-width: 2.2;
  stroke-linecap: round;
  transition:
    stroke 0.2s,
    stroke-width 0.2s;
stroke: rgba(159, 227, 196, 0.45);
}

.knot-panel.is-solved .knot-edge-line {
  stroke-width: 2.6;
stroke: #9fe3c4;
  filter: drop-shadow(0 0 8px rgba(159, 227, 196, 0.7));
}

.knot-intersect-dot {
fill: var(--coral);
}

.knot-intersect-pulse {
  fill: none;
  stroke-width: 1.2;
  stroke-dasharray: 2 2;
  animation: knotSpinPulse 2s infinite linear;
stroke: var(--coral);
}

.knot-node-outer {
  stroke-width: 2.2;
  filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.5));
  transition:
    transform 0.15s,
    stroke-width 0.15s;
fill: var(--bg-black);
  stroke: #9fe3c4;
  box-shadow: 0 0 12px rgba(159, 227, 196, 0.5);
}

.knot-node-inner {
fill: #fff4e0;
}

.knot-node-group:hover .knot-node-outer {
  stroke-width: 3;
stroke: #ffe1a6;
}

/* CIRCUIT: Warm brass conduits & lanterns */

.circuit-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  border-radius: 16px;
  padding: 12px;
  box-sizing: border-box;
background: var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.45);
}

.circuit-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
background: rgba(var(--card-rgb), 0.45);
  border-color: rgba(255, 236, 214, 0.1);
}

.circuit-tile:hover {
background: rgba(var(--card-rgb), 0.75);
  border-color: rgba(255, 236, 214, 0.25);
}

.circuit-tile.is-powered {
background: rgba(60, 48, 85, 0.75);
  border-color: rgba(155, 209, 229, 0.45);
  box-shadow: inset 0 0 16px rgba(155, 209, 229, 0.2);
}

.circuit-wire {
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke 0.2s,
    filter 0.2s;
stroke: rgba(255, 236, 214, 0.2);
}

.circuit-wire.powered {
stroke: #9bd1e5;
  filter: drop-shadow(0 0 6px #9bd1e5);
}

.circuit-wire-hub {
  transition: fill 0.2s;
fill: rgba(255, 236, 214, 0.2);
}

.circuit-wire-hub.powered {
fill: #9bd1e5;
}

.circuit-source-core {
fill: #ffd978;
}

.circuit-source-pulse {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
  animation: pingExpand 2s infinite ease-out;
stroke: #ffd978;
}

.circuit-terminal-badge.energized {
fill: #ffcf7a;
  stroke: #ffe3a3;
  filter: drop-shadow(0 0 8px #ffcf7a);
}

.circuit-leak-dot {
  animation: pingExpand 1.2s infinite ease-out;
fill: var(--coral);
}

/* SPECTRUM: Starlight glass vials rack */

.spectrum-tubes-rack {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 580px;
  padding: 16px 12px;
  border-radius: 16px;
background: var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.45);
}

.spectrum-tube {
  flex: 1;
  min-width: 0;
  max-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  position: relative;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
background: rgba(var(--card-rgb), 0.55);
  border-color: rgba(255, 236, 214, 0.12);
}

.spectrum-tube:hover {
  transform: translateY(-4px);
  border-color: var(--tube-color);
background: rgba(var(--card-rgb), 0.85);
}

.spectrum-tube.is-locked {
  cursor: default;
  opacity: 0.85;
  border-style: dashed;
background: rgba(var(--well-rgb), 0.7);
}

.tube-glass-chamber {
  width: 22px;
  height: 96px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
background: #191222;
  border-color: rgba(255, 236, 214, 0.2);
}

.tube-top-cap,
.tube-freq,
.tube-note {
font-family: var(--font-sans);
}

.tube-note {
  color: var(--tube-color);
  font-weight: 600;
font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .ripple,
  .breathe-ring,
  .daily-clock-pill .pulse-indicator,
  .lantern.lit,
  .lore-lamp {
    animation: none !important;
  }
  .sky-ready .sky-body {
    transition: none !important;
  }
}


/* =====================================================================
   INSTRUMENTS 05-07 — ENRICHED DESIGN
   05 Prism (sunbeam & crystal) · 06 Knot (constellation threads) · 07 Circuit (brass pipes & lanterns)
   ===================================================================== */

.px-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.px-legend span { display: inline-flex; align-items: center; gap: 5px; }
.px-lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.px-lg-mirror { background: linear-gradient(135deg, #ffe1a6, #c49a52); border-radius: 50%; }
.px-lg-fixed { background: #7b5a32; box-shadow: inset 0 0 0 2px #c49a52; }
.px-lg-stone { background: #5b4a6b; }
.cx-lg-pipe { background: linear-gradient(135deg, #e3b968, #a37a3a); }
.cx-lg-spark { background: #ffb36b; border-radius: 50%; box-shadow: 0 0 6px #ff9a52; }

@keyframes pxShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.px-shake, .cx-shake { animation: pxShake 0.22s ease-in-out; }

/* ------------------------------------------------------------------ 05 PRISM */

.px-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--px-n, 6), 1fr);
  grid-template-rows: repeat(var(--px-n, 6), 1fr);
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 207, 122, 0.16), transparent 60%),
    var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.4);
}

.px-cell { position: relative; padding: 4px; box-sizing: border-box; min-width: 0; min-height: 0; }

.px-cell-inner {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--card-rgb), 0.35);
  border: 1px solid rgba(255, 236, 214, 0.07);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.px-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.px-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }

.px-mirror { cursor: pointer; }
.px-mirror:hover .px-cell-inner { background: rgba(255, 244, 230, 0.12); border-color: var(--amber); }
.px-mirror.px-fixed { cursor: not-allowed; }
.px-mirror.px-fixed .px-cell-inner { background: rgba(95, 70, 40, 0.35); border-color: rgba(196, 154, 82, 0.45); }
.px-mirror.px-fixed:hover .px-cell-inner { border-color: rgba(196, 154, 82, 0.45); background: rgba(95, 70, 40, 0.35); }

.px-mirror-rotor {
  width: 100%;
  height: 100%;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform;
}
.px-mirror-ring { fill: rgba(60, 40, 25, 0.55); stroke: #c49a52; stroke-width: 3.5; }
.px-fixed .px-mirror-ring { stroke: #8f6c3a; stroke-width: 5; }
.px-mirror-glass-bg { stroke: #6d4e2a; stroke-width: 9; stroke-linecap: round; }
.px-mirror-glass { stroke: #fff4e0; stroke-width: 4.5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 225, 166, 0.9)); }
.px-mirror-pivot { fill: #c49a52; }
.px-rivet { fill: #d9b46a; stroke: #6d4e2a; stroke-width: 1; }

.px-window-frame { fill: #7b5a32; stroke: #c49a52; stroke-width: 3; }
.px-window-glass { fill: rgba(255, 217, 120, 0.22); }
.px-sun { fill: #ffd978; filter: drop-shadow(0 0 8px #ffd978); }
.px-sun-rays line { stroke: #ffe1a6; stroke-width: 2.5; stroke-linecap: round; opacity: 0.7; }
.px-emit-arrow { fill: none; stroke: #ffd978; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.px-emitter .px-cell-inner { background: rgba(255, 217, 120, 0.1); border-color: rgba(255, 217, 120, 0.4); }

.px-stone { fill: #54445f; stroke: #7a688a; stroke-width: 3; }
.px-stone-seam { fill: none; stroke: #3b2f46; stroke-width: 2.5; }
.px-pillar .px-cell-inner { background: rgba(35, 24, 48, 0.7); }

/* crystals: dormant -> awake */
.px-gem-body { fill: #46395a; stroke: #8f7fa8; stroke-width: 2.5; stroke-linejoin: round; transition: fill 0.4s, stroke 0.4s; }
.px-gem-top { fill: #7b6a94; transition: fill 0.4s; }
.px-gem-left { fill: #54456b; transition: fill 0.4s; }
.px-gem-right { fill: #3c3050; transition: fill 0.4s; }
.px-terminal-ring { fill: none; stroke: rgba(255, 217, 120, 0.35); stroke-width: 1.5; stroke-dasharray: 4 5; }
.px-crystal .px-cell-inner { background: rgba(120, 100, 150, 0.12); border-color: rgba(143, 127, 168, 0.3); }

.px-awake .px-cell-inner {
  background: rgba(255, 207, 122, 0.2);
  border-color: #ffd978;
  box-shadow: 0 0 22px rgba(255, 207, 122, 0.5), inset 0 0 16px rgba(255, 207, 122, 0.25);
}
.px-awake .px-gem-body { fill: #e9a948; stroke: #fff0c8; }
.px-awake .px-gem-top { fill: #fff0b8; }
.px-awake .px-gem-left { fill: #ffc45e; }
.px-awake .px-gem-right { fill: #d68a2e; }
.px-awake .px-crystal-svg { animation: pxCrystalPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.px-crystal-aura { fill: rgba(255, 217, 120, 0.3); animation: pxAura 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes pxCrystalPop { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }
@keyframes pxAura { 0%, 100% { transform: scale(0.9); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 1; } }

/* the sunbeam */
.px-beam-outer, .px-beam-core, .px-beam-flow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.px-beam-outer { stroke: rgba(255, 200, 100, 0.28); stroke-width: 6; }
.px-beam-core { stroke: #fff0c8; stroke-width: 1.8; }
.px-beam-flow { stroke: rgba(255, 255, 255, 0.9); stroke-width: 0.9; stroke-dasharray: 1.2 7; animation: pxBeamFlow 1.1s linear infinite; }
@keyframes pxBeamFlow { to { stroke-dashoffset: -16.4; } }

/* dust motes drifting in the light */
.px-motes { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.px-motes span {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 236, 190, 0.7);
  box-shadow: 0 0 6px rgba(255, 225, 166, 0.8);
  animation: pxMote 9s ease-in-out infinite;
  opacity: 0;
}
.px-motes span:nth-child(1) { left: 12%; top: 70%; animation-delay: 0s; }
.px-motes span:nth-child(2) { left: 30%; top: 40%; animation-delay: 1.5s; }
.px-motes span:nth-child(3) { left: 52%; top: 80%; animation-delay: 3s; }
.px-motes span:nth-child(4) { left: 68%; top: 30%; animation-delay: 4.5s; }
.px-motes span:nth-child(5) { left: 84%; top: 60%; animation-delay: 6s; }
.px-motes span:nth-child(6) { left: 45%; top: 15%; animation-delay: 7.5s; }
@keyframes pxMote {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 0.8; }
  80% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(14px, -26px); }
}

.prism-panel.is-solved .px-board { box-shadow: inset 0 0 40px rgba(255, 207, 122, 0.3), 0 0 36px rgba(255, 207, 122, 0.25); }

/* ------------------------------------------------------------------ 06 KNOT */

.knot-clarity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px auto 0;
  width: 100%;
  max-width: 440px;
}
.knot-clarity-label { font-family: var(--font-serif); font-style: italic; font-size: 12px; color: var(--text-muted); }
.knot-clarity-track { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.knot-clarity-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b9a4d4, #9fe3c4, #ffe1a6);
  transition: width 0.4s ease;
}

.knot-canvas-container {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(110, 80, 150, 0.35), transparent 65%),
    linear-gradient(180deg, #1c1430 0%, #2b1d3b 100%);
}

.knot-sky-star { fill: #fff4e0; opacity: 0.6; animation: knotTwinkle 4s ease-in-out infinite; }
@keyframes knotTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }

.knot-thread {
  stroke: rgba(205, 220, 245, 0.7);
  stroke-width: 0.7;
  stroke-linecap: round;
  transition: stroke 0.25s, stroke-width 0.25s;
}
.knot-thread.is-tangled { stroke: rgba(244, 169, 160, 0.85); stroke-width: 0.8; stroke-dasharray: 2.2 1.4; animation: knotThreadFlow 1.2s linear infinite; }
@keyframes knotThreadFlow { to { stroke-dashoffset: -7.2; } }

/* Touching a star lights up its own threads and quiets everything else */
.knot-thread { transition: stroke 0.25s, stroke-width 0.25s, opacity 0.2s; }
.knot-svg.has-focus .knot-thread:not(.is-focus) { opacity: 0.2; }
.knot-thread.is-focus { stroke-width: 1.25; }
.knot-thread.is-focus:not(.is-tangled) { stroke: rgba(255, 225, 166, 0.95); }
.knot-star-group { transition: opacity 0.2s; }
.knot-svg.has-focus .knot-star-group:not(.is-focused):not(.is-neighbor) { opacity: 0.45; }
.knot-star-group.is-neighbor .knot-star-halo { fill: rgba(255, 225, 166, 0.3); }

.knot-panel.is-solved .knot-thread {
  stroke: #ffe1a6;
  stroke-width: 0.9;
  stroke-dasharray: none;
  animation: none;
  filter: drop-shadow(0 0 1.2px rgba(255, 225, 166, 0.9));
}

.knot-haze { transition: opacity 0.5s ease; mix-blend-mode: screen; }

.knot-intersect-dot { fill: var(--coral); }
.knot-intersect-pulse { fill: none; stroke: var(--coral); stroke-width: 0.5; stroke-dasharray: 1.6 1.6; transform-box: fill-box; transform-origin: center; animation: knotSpinPulse 2s infinite linear; }

.knot-star-group { cursor: grab; }
.knot-star-group.is-held { cursor: grabbing; }
.knot-star-halo { fill: rgba(255, 244, 224, 0.12); transition: fill 0.25s; transform-box: fill-box; transform-origin: center; animation: knotHalo 3.2s ease-in-out infinite; }
.knot-star-body { fill: #fff4e0; stroke: rgba(255, 225, 166, 0.9); stroke-width: 0.35; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; transition: transform 0.15s; }
.knot-star-core { fill: #ffd978; }
.knot-star-group:hover .knot-star-body, .knot-star-group.is-held .knot-star-body { transform: scale(1.25); }
.knot-star-group.is-tangled .knot-star-halo { fill: rgba(244, 169, 160, 0.22); }
.knot-star-group.is-hinted .knot-star-halo { fill: rgba(159, 227, 196, 0.4); animation: knotHint 1s ease-out 3; }
.knot-panel.is-solved .knot-star-halo { fill: rgba(255, 217, 120, 0.3); }
.knot-panel.is-solved .knot-star-group { cursor: default; }
@keyframes knotHalo { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.1); } }
@keyframes knotHint { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.8); opacity: 0.2; } }

.knot-star-group.is-pinned { cursor: not-allowed; }
.knot-star-group.is-pinned:hover .knot-star-body { transform: none; }
.knot-pin-ring { fill: none; stroke: rgba(255, 225, 166, 0.75); stroke-width: 0.35; stroke-dasharray: 0.9 0.9; pointer-events: none; }
.knot-outline { fill: rgba(255, 225, 166, 0.05); stroke: rgba(255, 225, 166, 0.4); stroke-width: 0.35; stroke-dasharray: 1.2 1.6; stroke-linejoin: round; pointer-events: none; animation: knotOutlineIn 1.6s ease both; }
@keyframes knotOutlineIn { from { opacity: 0; } to { opacity: 1; } }

.knot-reveal {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 14px;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(28, 20, 48, 0.85) 60%);
  animation: knotRevealIn 1.2s ease both;
}
.knot-reveal-name { font-family: var(--font-serif); font-size: 20px; color: #ffe1a6; letter-spacing: 0.04em; text-shadow: 0 0 14px rgba(255, 225, 166, 0.6); }
.knot-reveal-text { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
@keyframes knotRevealIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ------------------------------------------------------------------ 07 CIRCUIT */

.circuit-tile { overflow: hidden; }
.circuit-tile.is-powered {
  background: rgba(112, 76, 44, 0.45);
  border-color: rgba(255, 207, 122, 0.45);
  box-shadow: inset 0 0 18px rgba(255, 207, 122, 0.18);
}
.circuit-tile.is-source { border-color: #ffd978; }
.circuit-tile.is-locked { cursor: not-allowed; background: rgba(70, 50, 38, 0.55); border-color: rgba(196, 154, 82, 0.35); }
.circuit-tile.is-locked.is-powered { background: rgba(112, 76, 44, 0.5); }
.circuit-tile.is-source { cursor: default; }
.circuit-tile.has-leak { border-color: rgba(255, 150, 90, 0.6); }

.circuit-tile-body { position: relative; width: 100%; height: 100%; }
.cx-rotor { position: absolute; inset: 0; transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); will-change: transform; }
.cx-overlay { position: absolute; inset: 0; pointer-events: none; }
.circuit-tile-overlay { width: 100%; height: 100%; display: block; overflow: visible; }

.cx-pipe-shadow, .cx-pipe-brass, .cx-pipe-shine, .cx-pipe-current { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.cx-pipe-shadow { stroke: #2a1a14; stroke-width: 25; }
.cx-pipe-brass { stroke: #9a7438; stroke-width: 19; transition: stroke 0.35s; }
.cx-pipe-shine { stroke: rgba(255, 233, 178, 0.35); stroke-width: 4; }
.cx-pipe-current { stroke: #ffe3a3; stroke-width: 6; stroke-dasharray: 5 9; opacity: 0; transition: opacity 0.35s; filter: drop-shadow(0 0 4px #ffcf7a); }
.circuit-tile.is-powered .cx-pipe-brass { stroke: #d1a24f; }
.circuit-tile.is-powered .cx-pipe-current { opacity: 1; animation: cxCurrent 0.9s linear infinite; }
@keyframes cxCurrent { to { stroke-dashoffset: -28; } }

.cx-flange { fill: #6d4e2a; stroke: #2a1a14; stroke-width: 1.5; }
.cx-joint { fill: #b88a4a; stroke: #2a1a14; stroke-width: 2; }
.cx-cap-shadow { fill: #2a1a14; }
.cx-cap { fill: #b88a4a; stroke: #e3b968; stroke-width: 2; }
.circuit-tile.is-powered .cx-joint, .circuit-tile.is-powered .cx-cap { fill: #e0b25e; }

.cx-rivet { fill: #d9b46a; stroke: #6d4e2a; stroke-width: 1; }
.cx-rivet-slot { stroke: #6d4e2a; stroke-width: 1; }

/* dynamo */
.cx-dynamo-body { fill: #4a2f22; stroke: #ffd978; stroke-width: 3; }
.cx-dynamo-coil { fill: none; stroke: #e3b968; stroke-width: 4; stroke-dasharray: 3 3; animation: cxCoil 2.4s linear infinite; }
.cx-coil-b { animation-direction: reverse; }
@keyframes cxCoil { to { stroke-dashoffset: -24; } }
.cx-dynamo-bolt { fill: #ffe9a8; filter: drop-shadow(0 0 5px #ffd978); }
.cx-dynamo-pulse { fill: none; stroke: #ffd978; stroke-width: 1.5; stroke-dasharray: 3 3; transform-box: fill-box; transform-origin: center; animation: cxPulse 2.2s ease-out infinite; }
@keyframes cxPulse { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } }

/* reading lanterns */
.cx-lantern-cap { fill: #6d4e2a; stroke: #c49a52; stroke-width: 2; stroke-linejoin: round; }
.cx-lantern-glass { fill: rgba(30, 20, 40, 0.85); stroke: #8f6c3a; stroke-width: 3; transition: fill 0.4s; }
.cx-lantern-glass.lit { fill: rgba(255, 207, 122, 0.55); stroke: #ffd978; filter: drop-shadow(0 0 8px #ffcf7a); }
.cx-lantern-flame { fill: #5b4a6b; opacity: 0.6; transition: fill 0.4s; }
.cx-lantern-flame.lit { fill: #fff0b8; opacity: 1; filter: drop-shadow(0 0 6px #ffd978); animation: cxFlame 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.cx-lantern-base { fill: #6d4e2a; stroke: #c49a52; stroke-width: 1.5; }
.cx-lantern-bar { stroke: rgba(143, 108, 58, 0.8); stroke-width: 1.5; }
.cx-lantern-aura { fill: rgba(255, 207, 122, 0.22); animation: pxAura 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cxFlame { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(0.92, 1.1); } }

/* leaks: sparks spill out of open pipe ends */
.cx-leak-spark { fill: rgba(255, 150, 90, 0.5); transform-box: fill-box; transform-origin: center; animation: cxLeak 0.9s ease-out infinite; }
.cx-leak-core { fill: #ffd2a0; filter: drop-shadow(0 0 4px #ff9a52); }
@keyframes cxLeak { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }

.circuit-panel.is-solved .circuit-board { box-shadow: inset 0 0 36px rgba(255, 207, 122, 0.28), 0 0 32px rgba(255, 207, 122, 0.2); }

@media (prefers-reduced-motion: reduce) {
  .px-beam-flow, .px-motes span, .px-crystal-aura, .knot-sky-star, .knot-star-halo, .knot-thread.is-tangled,
  .cx-pipe-current, .cx-dynamo-coil, .cx-dynamo-pulse, .cx-lantern-flame, .cx-lantern-aura, .cx-leak-spark {
    animation: none !important;
  }
  .px-mirror-rotor, .cx-rotor { transition: none !important; }
}


/* =====================================================================
   INSTRUMENT 03 — RESONANCE (interference chamber, barometer meters, wave medallions)
   ===================================================================== */

.resonance-panel { --rz-cell: clamp(44px, 11vw, 58px); --rz-gap: 7px; }

.rz-header { display: flex; flex-direction: column; gap: 8px; align-items: center; padding-bottom: 4px; width: 100%; }

/* Top Atmospheric Interference Chamber */
.rz-chamber {
  width: 100%;
  max-width: 460px;
  padding: 10px 14px 9px;
  border-radius: 14px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(155, 209, 229, 0.1), transparent 70%),
    var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rz-chamber.is-still {
  border-color: rgba(255, 225, 166, 0.45);
  box-shadow: inset 0 0 24px rgba(255, 225, 166, 0.14), 0 0 20px rgba(255, 225, 166, 0.12);
}
.rz-chamber.is-clash {
  border-color: rgba(244, 169, 160, 0.45);
}

.rz-chamber-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.rz-chamber-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.rz-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rz-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-serif); font-style: italic; font-size: 12px;
  color: var(--text-secondary);
  background: rgba(var(--card-rgb), 0.55);
  border: 1px solid var(--border-hairline);
}
.rz-chip b { font-family: var(--font-mono); font-style: normal; font-size: 10.5px; color: var(--text-white); opacity: 0.9; }
.rz-chip-wave { width: 16px; height: 11px; overflow: visible; }
.rz-chip-wave path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rz-chip-wave circle { fill: currentColor; }
.rz-chip.crest { color: #9bd1e5; border-color: rgba(155, 209, 229, 0.45); }
.rz-chip.trough { color: #ffb870; border-color: rgba(255, 184, 112, 0.45); }

.rz-stillness-count { font-family: var(--font-mono); font-size: 11px; color: #ffe1a6; opacity: 0.9; }

.rz-chamber-svg { width: 100%; height: 42px; display: block; overflow: visible; }
.rz-chamber-axis { stroke: rgba(255, 236, 214, 0.12); stroke-width: 1; stroke-dasharray: 3 3; }
.rz-chamber-tick { stroke: rgba(255, 236, 214, 0.09); stroke-width: 1; }
.rz-chamber-tick.is-settled { stroke: rgba(255, 225, 166, 0.32); }
.rz-chamber-node { fill: #ffe1a6; filter: drop-shadow(0 0 4px #ffd978); }
.rz-wave-sky { fill: none; stroke: rgba(155, 209, 229, 0.55); stroke-width: 1.5; stroke-linecap: round; }
.rz-wave-hearth { fill: none; stroke: rgba(255, 184, 112, 0.55); stroke-width: 1.5; stroke-linecap: round; }
.rz-wave-sum {
  fill: none;
  stroke: #ffe1a6;
  stroke-width: 2.3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 225, 166, 0.65));
}
.rz-chamber-svg.is-Clash .rz-wave-sum,
.rz-chamber-svg.is-clash .rz-wave-sum {
  stroke: var(--coral);
  filter: drop-shadow(0 0 6px rgba(244, 169, 160, 0.6));
}

.rz-chamber-caption {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-muted);
}
.rz-chamber-caption.over { color: var(--coral); }
.rz-chamber-caption.done { color: #ffe1a6; text-shadow: 0 0 10px rgba(255, 225, 166, 0.35); }

/* 6x6 Phase Stage & Board */
.rz-stage { display: flex; justify-content: center; margin: 8px 0 10px; }
.rz-board {
  display: grid;
  grid-template-columns: repeat(6, var(--rz-cell));
  gap: var(--rz-gap);
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(110, 80, 150, 0.14), transparent 72%),
    var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.45);
}

.rz-corner {
  width: var(--rz-meter);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 225, 166, 0.55);
}
.rz-corner-svg { width: 22px; height: 22px; }

/* Barometer Row/Column Meters (oscilloscope + 3 crest / 3 trough pips) */
.rz-meter {
  appearance: none;
  background: rgba(var(--card-rgb), 0.38);
  border: 1px solid rgba(255, 236, 214, 0.1);
  border-radius: 9px;
  padding: 3px 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  opacity: 0.9;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.2s, transform 0.15s;
}
.rz-meter:hover {
  background: rgba(var(--card-rgb), 0.65);
  border-color: rgba(255, 236, 214, 0.25);
}
.rz-meter.can-auto {
  border-color: rgba(255, 217, 120, 0.45);
  box-shadow: 0 0 10px rgba(255, 217, 120, 0.15);
}
.rz-meter.can-auto:hover {
  border-color: #ffd978;
  transform: scale(1.03);
}
.rz-meter.is-settled {
  opacity: 1;
  background: rgba(255, 225, 166, 0.1);
  border-color: rgba(255, 225, 166, 0.42);
}
.rz-meter.is-over {
  background: rgba(244, 169, 160, 0.12);
  border-color: var(--coral);
}
.rz-meter-col { height: 36px; width: var(--rz-cell); }
.rz-meter-row { width: var(--rz-meter); height: var(--rz-cell); }

.rz-scope { width: 100%; height: 14px; overflow: visible; display: block; }
.rz-scope path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 0.3s; }
.rz-scope.unsettled path { stroke: rgba(215, 200, 235, 0.65); }
.rz-scope.over path { stroke: var(--coral); }
.rz-scope.settled path { stroke: #ffe1a6; filter: drop-shadow(0 0 4px rgba(255, 225, 166, 0.9)); }
.rz-scope-dot { fill: #ffe1a6; }

.rz-meter-pips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.rz-meter-row .rz-meter-pips {
  flex-direction: column;
  gap: 2px;
}
.rz-pip-group { display: inline-flex; gap: 2px; }
.rz-pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 236, 214, 0.25);
  background: transparent;
}
.rz-pip.crest.on { background: #9bd1e5; border-color: #9bd1e5; box-shadow: 0 0 4px rgba(155, 209, 229, 0.7); }
.rz-pip.trough.on { background: #ffb870; border-color: #ffb870; box-shadow: 0 0 4px rgba(255, 184, 112, 0.7); }
.rz-pip.over { background: var(--coral) !important; border-color: var(--coral) !important; }

/* Resonator Cells & Sculptural Wave Medallions */
.rz-cell {
  position: relative;
  width: var(--rz-cell);
  height: var(--rz-cell);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: rgba(var(--card-rgb), 0.45);
  border: 1px solid rgba(255, 236, 214, 0.11);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rz-cell:hover { background: rgba(var(--card-rgb), 0.75); border-color: rgba(255, 236, 214, 0.28); }

/* Empty dial */
.rz-empty-svg { width: 78%; height: 78%; display: block; opacity: 0.55; transition: opacity 0.2s, transform 0.2s; }
.rz-cell:hover .rz-empty-svg { opacity: 0.9; transform: scale(1.05); }
.rz-dial-ring { fill: none; stroke: rgba(255, 236, 214, 0.12); stroke-width: 1; stroke-dasharray: 2.5 2.5; }
.rz-dial-horizon { stroke: rgba(255, 236, 214, 0.18); stroke-width: 1.2; stroke-linecap: round; }
.rz-dial-pivot { fill: rgba(255, 236, 214, 0.28); }

/* Crest & Trough Medallions */
.rz-wave { width: 88%; height: 88%; overflow: visible; display: block; }
.rz-medallion-halo { fill: currentColor; opacity: 0.1; }
.rz-medallion-ring { fill: rgba(20, 14, 32, 0.42); stroke: currentColor; stroke-width: 1.2; stroke-opacity: 0.45; }
.rz-wave-horizon { stroke: currentColor; stroke-width: 0.9; stroke-opacity: 0.28; stroke-dasharray: 2 2; }
.rz-wave-echo { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; opacity: 0.42; transform-box: fill-box; transform-origin: center; transition: transform 1s ease; }
.rz-wave-main {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.1;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px currentColor);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1s ease;
}
.rz-wave-node-halo { fill: currentColor; opacity: 0.32; }
.rz-wave-node { fill: #fff6e5; filter: drop-shadow(0 0 4px currentColor); }
.rz-wave-spark { fill: #ffffff; }
.rz-rivet { fill: #d9b46a; stroke: #5a3e20; stroke-width: 0.6; }

.rz-cell.is-crest {
  color: #9bd1e5;
  background: radial-gradient(circle at 50% 32%, rgba(155, 209, 229, 0.22), rgba(var(--card-rgb), 0.5) 78%);
  border-color: rgba(155, 209, 229, 0.44);
  box-shadow: inset 0 0 12px rgba(155, 209, 229, 0.12);
}
.rz-cell.is-trough {
  color: #ffb870;
  background: radial-gradient(circle at 50% 68%, rgba(255, 184, 112, 0.22), rgba(var(--card-rgb), 0.5) 78%);
  border-color: rgba(255, 184, 112, 0.44);
  box-shadow: inset 0 0 12px rgba(255, 184, 112, 0.12);
}

.rz-cell.is-crest .rz-wave { animation: rzFloatUp 3.6s ease-in-out infinite; }
.rz-cell.is-trough .rz-wave { animation: rzFloatDown 3.6s ease-in-out infinite; }
@keyframes rzFloatUp { 0%, 100% { transform: translateY(0.8px); } 50% { transform: translateY(-1.4px); } }
@keyframes rzFloatDown { 0%, 100% { transform: translateY(-0.8px); } 50% { transform: translateY(1.4px); } }
.rz-cell.just-changed .rz-wave { animation: rzPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes rzPop { from { transform: scale(0.65); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.rz-cell.in-settled-line {
  box-shadow: inset 0 0 14px rgba(255, 225, 166, 0.16);
}

.rz-cell.is-locked {
  cursor: default;
  border-width: 1.5px;
}
.rz-cell.is-locked .rz-medallion-ring {
  stroke: #d9b46a;
  stroke-opacity: 0.7;
}

.rz-cell.is-clash {
  border-color: var(--coral) !important;
  background: rgba(244, 169, 160, 0.2) !important;
  animation: pxShake 0.25s ease-in-out;
}

/* Brass Phase Couplers ('=' Same & '×' Opposite) */
.rz-clue {
  position: absolute; z-index: 4;
  width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #231730;
  border: 1.3px solid rgba(217, 180, 106, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.rz-clue-svg { width: 12px; height: 12px; display: block; }
.rz-clue-svg line { stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.rz-clue.h { right: calc(var(--rz-gap) * -0.5 - 9.5px); top: 50%; transform: translateY(-50%); }
.rz-clue.v { bottom: calc(var(--rz-gap) * -0.5 - 9.5px); left: 50%; transform: translateX(-50%); }
.rz-clue.eq { color: #ffe1a6; }
.rz-clue.opp { color: #dec0f6; }
.rz-clue.is-ok {
  border-color: #9fe3c4;
  color: #9fe3c4;
  box-shadow: 0 0 8px rgba(159, 227, 196, 0.5);
}
.rz-clue.is-bad {
  border-color: var(--coral);
  color: var(--coral);
  background: #3b1d2e;
  box-shadow: 0 0 10px rgba(244, 169, 160, 0.7);
}

/* Solved state: waves calm toward stillness */
.rz-board.is-still .rz-cell.is-crest .rz-wave-main,
.rz-board.is-still .rz-cell.is-trough .rz-wave-main,
.rz-board.is-still .rz-cell.is-crest .rz-wave-echo,
.rz-board.is-still .rz-cell.is-trough .rz-wave-echo {
  transform: scaleY(0.28);
}
.rz-board.is-still .rz-cell { cursor: default; box-shadow: inset 0 0 14px rgba(255, 225, 166, 0.22); }
.resonance-panel.is-solved .rz-board { box-shadow: inset 0 0 40px rgba(255, 225, 166, 0.22), 0 0 34px rgba(255, 225, 166, 0.18); }

@media (max-width: 480px) {
  .resonance-panel { --rz-meter: 36px; --rz-gap: 5px; }
  .rz-chamber-top { justify-content: center; }
}

/* =====================================================================
   INSTRUMENT 02 — SONAR (quiet harbor: mist, calm water, wooden boats)
   ===================================================================== */

.sonar-panel .sonar-cell.is-empty {
  background: radial-gradient(circle at 50% 45%, rgba(215, 205, 235, 0.14), rgba(var(--card-rgb), 0.35) 75%);
  border-color: rgba(215, 205, 235, 0.14);
}
.sonar-panel .cell-empty-dot { background: rgba(235, 225, 250, 0.18); width: 6px; height: 6px; filter: blur(1px); }
.sonar-panel .sonar-cell:hover .cell-empty-dot { background: rgba(155, 209, 229, 0.7); }

.sonar-panel .sonar-cell.is-water {
  background: linear-gradient(180deg, rgba(60, 92, 120, 0.4), rgba(40, 62, 92, 0.5));
  border-color: rgba(155, 209, 229, 0.16);
}
.sonar-panel .water-piece { color: rgba(155, 209, 229, 0.55); }
.sonar-panel .water-svg path { animation: snRipple 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes snRipple { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }

.sonar-panel .sonar-cell.is-ship {
  background: linear-gradient(180deg, rgba(60, 92, 120, 0.38), rgba(40, 62, 92, 0.48));
  border-color: rgba(255, 207, 122, 0.42);
  box-shadow: inset 0 0 14px rgba(255, 207, 122, 0.1);
}
.sonar-panel .ship-svg { width: 92%; height: 92%; color: #c8956a; }

/* Fleet HUD miniature boat & lantern icons */
.sonar-panel .fleet-ship-icon { width: auto; height: 13px; overflow: visible; }
.sonar-panel .fh-hull { fill: #b08358; stroke: #4d321c; stroke-width: 1.2; stroke-linejoin: round; }
.sonar-panel .fh-cabin { fill: #7c5634; stroke: #4d321c; stroke-width: 1; }
.sonar-panel .fh-thwart { stroke: #6e4a2c; stroke-width: 1.3; stroke-linecap: round; }
.sonar-panel .fh-oar { stroke: #d8b282; stroke-width: 1.3; stroke-linecap: round; }
.sonar-panel .fh-lamp-halo { fill: rgba(255, 217, 120, 0.28); stroke: rgba(255, 217, 120, 0.55); stroke-width: 0.9; }
.sonar-panel .fh-lamp { fill: #ffe9a8; filter: drop-shadow(0 0 3px #ffd978); }
.sonar-panel .region-chip.done .fh-hull { fill: #cfa06e; stroke: #ffe1a6; stroke-width: 1; }
.sonar-panel .region-chip.done .fh-lamp { fill: #fff4d2; filter: drop-shadow(0 0 5px #ffd978); }

/* Detailed top-down harbor boats & lantern buoys */
.sonar-panel .bt-hull {
  fill: #8d613c;
  stroke: #3f2715;
  stroke-width: 1.8;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(12, 8, 20, 0.55));
}
.sonar-panel .bt-deck {
  fill: #b8895c;
  stroke: #654326;
  stroke-width: 1;
  stroke-linejoin: round;
}
.sonar-panel .bt-plank {
  stroke: rgba(74, 46, 24, 0.45);
  stroke-width: 0.9;
  stroke-linecap: round;
}
.sonar-panel .bt-stem {
  stroke: #d7b07e;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.sonar-panel .bt-hull-edge {
  fill: #6b472a;
  stroke: #3a2312;
  stroke-width: 1.1;
}
.sonar-panel .bt-thwart {
  fill: #966842;
  stroke: #4a2e18;
  stroke-width: 1;
}
.sonar-panel .bt-oarlock {
  fill: #d9b46a;
  stroke: #4a2e18;
  stroke-width: 0.8;
}
.sonar-panel .bt-oar {
  stroke: #d2a874;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.sonar-panel .bt-oar-blade {
  fill: #deb887;
  stroke: #5a3a1e;
  stroke-width: 1;
}
.sonar-panel .bt-winch {
  fill: #725136;
  stroke: #3a2312;
  stroke-width: 1.1;
}
.sonar-panel .bt-rope {
  fill: none;
  stroke: #d9bc8c;
  stroke-width: 1.4;
  stroke-dasharray: 2.2 1.4;
}
.sonar-panel .bt-cabin {
  fill: #704b2d;
  stroke: #3a2312;
  stroke-width: 1.4;
}
.sonar-panel .bt-cabin-inner {
  fill: #875d39;
  stroke: rgba(255, 225, 166, 0.25);
  stroke-width: 0.8;
}
.sonar-panel .bt-cabin-roof {
  stroke: #4a2e18;
  stroke-width: 1.2;
}
.sonar-panel .bt-window {
  fill: #ffe29a;
  stroke: #4a2e18;
  stroke-width: 0.8;
  filter: drop-shadow(0 0 3px rgba(255, 217, 120, 0.7));
}

/* Buoy float & water rings */
.sonar-panel .bt-ripple {
  fill: none;
  stroke: rgba(155, 209, 229, 0.35);
  stroke-width: 1.1;
  stroke-dasharray: 4 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: snBuoyRipple 3.6s ease-in-out infinite;
}
.sonar-panel .bt-ripple-outer {
  stroke: rgba(155, 209, 229, 0.2);
  stroke-dasharray: 3 4;
  animation-delay: 1.2s;
}
@keyframes snBuoyRipple {
  0%, 100% { transform: scale(0.95); opacity: 0.45; }
  50% { transform: scale(1.04); opacity: 0.85; }
}
.sonar-panel .bt-buoy-shadow {
  fill: rgba(18, 28, 44, 0.55);
}
.sonar-panel .bt-buoy-ring {
  fill: #9c6d44;
  stroke: #3f2715;
  stroke-width: 1.6;
}
.sonar-panel .bt-buoy-stripes {
  fill: none;
  stroke: #e2b878;
  stroke-width: 3;
  stroke-dasharray: 5.8 5.8;
  opacity: 0.85;
}
.sonar-panel .bt-lamp-bar {
  stroke: #5a3c22;
  stroke-width: 1.1;
  stroke-linecap: round;
}

/* Glowing harbor lanterns on every boat & buoy */
.sonar-panel .bt-lamp-halo {
  fill: rgba(255, 207, 122, 0.28);
  transform-box: fill-box;
  transform-origin: center;
  animation: snLanternHalo 2.8s ease-in-out infinite;
}
.sonar-panel .bt-lamp-glass {
  fill: rgba(255, 225, 166, 0.45);
  stroke: #c49a52;
  stroke-width: 0.9;
}
.sonar-panel .bt-lamp {
  fill: #ffe9a8;
  filter: drop-shadow(0 0 5px #ffd978);
  animation: snLantern 2.8s ease-in-out infinite;
}
.sonar-panel .bt-lamp-spark {
  fill: #ffffff;
  opacity: 0.9;
}
@keyframes snLantern { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }
@keyframes snLanternHalo {
  0%, 100% { transform: scale(0.92); opacity: 0.65; }
  50% { transform: scale(1.12); opacity: 1; }
}

.sonar-panel .sonar-cell.cell-conflict .bt-hull {
  stroke: var(--coral) !important;
  fill: rgba(244, 169, 160, 0.28) !important;
}

.sonar-panel .starter-badge { background: #ffd978; box-shadow: 0 0 5px #ffd978; }

.sonar-panel .sonar-counter-btn { background: rgba(var(--card-rgb), 0.5); border-color: var(--border-hairline); font-family: var(--font-serif); font-size: 15px; }
.sonar-panel .sonar-counter-btn.done { background: rgba(255, 225, 166, 0.1); border-color: rgba(255, 225, 166, 0.45); color: #ffe1a6; }
.sonar-panel .sonar-counter-btn.over { background: rgba(244, 169, 160, 0.14); border-color: var(--coral); color: var(--coral); }
.sonar-panel .counter-pips { display: flex; gap: 2px; min-height: 4px; }
.sonar-panel .counter-pips i { width: 4px; height: 4px; border-radius: 50%; border: 1px solid rgba(255, 236, 214, 0.35); box-sizing: border-box; }
.sonar-panel .counter-pips i.on { background: #ffd978; border-color: #ffd978; }
.sonar-panel .counter-pips i.over { background: var(--coral); border-color: var(--coral); }

.sonar-panel .sonar-wave-caption { font-family: var(--font-serif); font-style: italic; letter-spacing: 0; text-transform: none; }

/* armed sonar: misty squares invite a ping */
.sonar-panel.ping-armed .sonar-cell.is-empty { cursor: crosshair; animation: snArmed 1.4s ease-in-out infinite; }
.sonar-panel.ping-armed .sonar-cell.is-empty:hover { border-color: #9bd1e5; box-shadow: 0 0 14px rgba(155, 209, 229, 0.55); }
@keyframes snArmed { 0%, 100% { box-shadow: 0 0 0 rgba(155, 209, 229, 0); } 50% { box-shadow: 0 0 10px rgba(155, 209, 229, 0.35); } }
.sonar-panel .btn-active-ping.is-armed { border-color: #9bd1e5; color: #9bd1e5; box-shadow: 0 0 14px rgba(155, 209, 229, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .rz-cell .rz-wave, .sonar-panel .water-svg path, .sonar-panel .bt-lamp, .sonar-panel .bt-lamp-halo, .sonar-panel .bt-ripple,
  .sonar-panel.ping-armed .sonar-cell.is-empty { animation: none !important; }
  .rz-wave path { transition: none !important; }
}

/* =====================================================================
   INSTRUMENT 01 — BALANCE (lighthouse spirit level, plumb-bob, gimbal weights)
   ===================================================================== */

.denge-panel {
  --denge-cell-size: clamp(48px, 12vw, 60px);
  --denge-gap: 7px;
}

.bl-chamber {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px 14px 9px;
  border-radius: 14px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 217, 120, 0.10), transparent 70%),
    var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.bl-chamber.is-still {
  border-color: rgba(255, 225, 166, 0.48);
  box-shadow: inset 0 0 24px rgba(255, 225, 166, 0.14), 0 0 22px rgba(255, 225, 166, 0.14);
}
.bl-chamber.is-clash {
  border-color: rgba(244, 169, 160, 0.5);
}

.bl-chamber-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bl-chamber-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--text-secondary);
}
.bl-weight-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.bl-weight-count.is-full {
  color: #ffe1a6;
}

.bl-chamber-svg {
  width: 100%;
  height: 58px;
  display: block;
  overflow: visible;
}
.bl-vial-body {
  stroke: rgba(217, 180, 106, 0.45);
  stroke-width: 1.4;
}
.bl-vial-cap-seam {
  stroke: rgba(217, 180, 106, 0.35);
  stroke-width: 1.2;
}
.bl-rivet {
  fill: #d9b46a;
  opacity: 0.75;
}
.bl-vial-axis {
  stroke: rgba(255, 236, 214, 0.12);
  stroke-width: 1;
  stroke-dasharray: 2.5 2.5;
}
.bl-vial-tick {
  stroke: rgba(255, 236, 214, 0.16);
  stroke-width: 1;
}
.bl-vial-tick.major {
  stroke: rgba(217, 180, 106, 0.38);
  stroke-width: 1.2;
}
.bl-vial-target-outer {
  fill: none;
  stroke: rgba(255, 225, 166, 0.42);
  stroke-width: 1.3;
  stroke-dasharray: 3 2;
}
.bl-vial-target-inner {
  fill: rgba(255, 225, 166, 0.06);
  stroke: rgba(255, 225, 166, 0.65);
  stroke-width: 1.2;
}
.bl-bubble-group {
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.bl-bubble-halo {
  fill: rgba(255, 217, 120, 0.24);
}
.bl-bubble-core {
  filter: drop-shadow(0 0 6px rgba(255, 207, 122, 0.75));
}
.bl-chamber.is-still .bl-bubble-halo {
  fill: rgba(255, 225, 166, 0.42);
}
.bl-vial-specular {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.3;
  stroke-linecap: round;
}

.bl-dial-outer {
  fill: rgba(16, 12, 28, 0.65);
  stroke: rgba(217, 180, 106, 0.45);
  stroke-width: 1.4;
}
.bl-dial-inner {
  fill: none;
  stroke: rgba(255, 236, 214, 0.14);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.bl-dial-center-ring {
  fill: none;
  stroke: rgba(255, 225, 166, 0.55);
  stroke-width: 1.2;
}
.bl-plumb-wire {
  stroke: #ffe1a6;
  stroke-width: 1.3;
  opacity: 0.75;
}
#denge-plumb-bob {
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.bl-bob-halo {
  fill: rgba(255, 217, 120, 0.28);
}
.bl-bob-core {
  fill: #ffd978;
  stroke: #fff4d4;
  stroke-width: 1;
  filter: drop-shadow(0 0 5px rgba(255, 217, 120, 0.8));
}

.bl-chamber-caption {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-muted);
}
.bl-chamber-caption strong {
  color: var(--text-white);
  font-style: normal;
  font-weight: 600;
}
.bl-chamber-caption.over { color: var(--coral); }
.bl-chamber-caption.done { color: #ffe1a6; text-shadow: 0 0 10px rgba(255, 225, 166, 0.35); }

/* Board Overlay SVG (Tension lines & Center of Mass Plumb-Bob) */
.bl-board-overlay-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
.bl-tension-line {
  stroke-width: 1.4;
  stroke-dasharray: 3.5 3.5;
  opacity: 0.52;
  stroke-linecap: round;
}
.bl-tension-line.is-ghost {
  opacity: 0.35;
  stroke-dasharray: 2 3;
}
.bl-tension-line.is-centered {
  opacity: 0.78;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 4px rgba(255, 225, 166, 0.45));
}

.bl-com-marker {
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.bl-com-ring-outer {
  fill: rgba(255, 217, 120, 0.08);
  stroke: rgba(255, 217, 120, 0.75);
  stroke-width: 1.4;
  stroke-dasharray: 3 2.5;
}
.bl-com-ring-inner {
  fill: none;
  stroke: #fff4d4;
  stroke-width: 1.1;
  opacity: 0.65;
}
.bl-com-tick {
  stroke: rgba(255, 217, 120, 0.75);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.bl-com-marker.is-centered .bl-com-ring-outer {
  stroke: #ffe1a6;
  stroke-dasharray: none;
  fill: rgba(255, 225, 166, 0.18);
  filter: drop-shadow(0 0 10px rgba(255, 225, 166, 0.85));
}

/* Center Fulcrum & Counterweight Medallions */
.bl-pivot-svg {
  width: 82%;
  height: 82%;
  display: block;
  overflow: visible;
}
.bl-pivot-outer-ring {
  fill: rgba(18, 12, 28, 0.55);
  stroke: rgba(217, 180, 106, 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 3 2;
}
.bl-pivot-mid-ring {
  fill: none;
  stroke: rgba(255, 225, 166, 0.4);
  stroke-width: 1.1;
}
.bl-pivot-spoke {
  stroke: rgba(217, 180, 106, 0.5);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.bl-pivot-star {
  fill: rgba(255, 217, 120, 0.22);
  stroke: rgba(255, 225, 166, 0.65);
  stroke-width: 1;
}
.bl-pivot-jewel {
  fill: #ffd978;
  stroke: #fff4d4;
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(255, 207, 122, 0.7));
}
.bl-pivot-svg.is-balanced .bl-pivot-jewel {
  fill: #fff4d4;
  filter: drop-shadow(0 0 12px #ffd978);
}

.bl-weight-svg {
  width: 84%;
  height: 84%;
  display: block;
  overflow: visible;
  animation: popIn 0.18s cubic-bezier(0.2, 1.3, 0.35, 1);
}
.bl-weight-shadow {
  fill: rgba(8, 5, 16, 0.55);
}
.bl-weight-rim {
  fill: #241934;
  stroke-width: 2;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.bl-weight-groove {
  fill: rgba(255, 236, 214, 0.05);
  stroke-width: 1.1;
  stroke-dasharray: 3 2;
  opacity: 0.8;
}
.bl-weight-gem {
  filter: drop-shadow(0 0 6px currentColor);
}
.bl-weight-bolt {
  fill: #e7c782;
  stroke: #3b2412;
  stroke-width: 0.7;
}
.bl-weight-svg.is-conflict .bl-weight-rim {
  fill: rgba(136, 19, 55, 0.65);
}

.bl-cell-pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pip-col, rgba(255, 255, 255, 0.22));
  opacity: 0.28;
  transition: transform 0.18s, opacity 0.18s;
}
.denge-cell:hover:not(.is-locked) .bl-cell-pip {
  opacity: 0.85;
  transform: scale(1.6);
  box-shadow: 0 0 8px var(--pip-col);
}

.bl-plug-svg {
  width: 68%;
  height: 68%;
  opacity: 0.95;
  position: relative;
  z-index: 1;
}
.bl-plug-ring {
  fill: rgba(12, 8, 18, 0.8);
  stroke: rgba(240, 120, 100, 0.85);
  stroke-width: 1.8;
}
.bl-plug-slot {
  stroke: rgba(240, 120, 100, 0.9);
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Blocked cells: dark hatched overlay so they read as unusable at a glance */
.denge-cell.is-blocked {
  cursor: not-allowed;
  filter: saturate(0.4) brightness(0.7);
}
.denge-cell.is-blocked::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(8, 5, 12, 0.55) 0 4px,
      rgba(240, 120, 100, 0.22) 4px 6px
    );
  box-shadow: inset 0 0 0 1px rgba(240, 120, 100, 0.4), inset 0 2px 8px rgba(0, 0, 0, 0.6);
}
.denge-cell.is-blocked:hover {
  filter: saturate(0.4) brightness(0.7);
}
.denge-cell.is-denied {
  animation: denge-denied 0.32s ease;
}
@keyframes denge-denied {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .denge-cell.is-denied { animation: none; }
}

.bl-cross-svg {
  width: 50%;
  height: 50%;
}
.bl-cross-svg line {
  stroke: rgba(255, 236, 214, 0.55);
  stroke-width: 2.2;
  stroke-linecap: round;
}


/* =====================================================================
   INSTRUMENT 04 — ECHO (canyon rangefinder panorama, brass sounding pad)
   ===================================================================== */

.ek-chamber {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px 14px 9px;
  border-radius: 14px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(243, 196, 220, 0.10), transparent 70%),
    var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ek-chamber.is-still {
  border-color: rgba(255, 225, 166, 0.48);
  box-shadow: inset 0 0 24px rgba(255, 225, 166, 0.14), 0 0 22px rgba(255, 225, 166, 0.14);
}
.ek-chamber-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ek-chamber-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--text-secondary);
}
.ek-chamber-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #ffe1a6;
}

.ek-canyon-svg {
  width: 100%;
  height: 76px;
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.ek-lh-lantern {
  filter: drop-shadow(0 0 5px #ffd978);
}
.ek-horn-dot {
  fill: #ffd978;
  filter: drop-shadow(0 0 5px #ffd978);
}
.ek-horn-ripple,
.ek-cliff-ripple {
  fill: none;
  stroke: #9bd1e5;
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.ek-cliff-dot {
  fill: #9bd1e5;
  opacity: 0.75;
  filter: drop-shadow(0 0 5px #9bd1e5);
}

/* Canyon Panorama live pulse when Ping or Echo triggers */
.ek-chamber.target-ring-ping .ek-horn-ripple {
  stroke: #9bd1e5;
  animation: ekNodeRipple 0.42s ease-out;
}
.ek-chamber.target-ring-echo .ek-cliff-ripple {
  stroke: #9bd1e5;
  animation: ekNodeRipple 0.42s ease-out;
}
.ek-chamber.user-ring-ping .ek-horn-ripple {
  stroke: #ffd978;
  animation: ekNodeRipple 0.42s ease-out;
}
.ek-chamber.user-ring-echo .ek-cliff-ripple {
  stroke: #ffd978;
  animation: ekNodeRipple 0.42s ease-out;
}
@keyframes ekNodeRipple {
  0% { transform: scale(0.4); opacity: 0.95; }
  100% { transform: scale(2.1); opacity: 0; }
}

.ek-arc-listening {
  fill: none;
  stroke: rgba(155, 209, 229, 0.35);
  stroke-width: 1.3;
  stroke-dasharray: 4 3;
}
.ek-arc-listening-return {
  fill: none;
  stroke: rgba(243, 196, 220, 0.25);
  stroke-width: 1.1;
  stroke-dasharray: 3 4;
}
.ek-arc-target {
  fill: none;
  stroke: #9bd1e5;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 5px rgba(155, 209, 229, 0.6));
}
.ek-arc-target-return {
  fill: none;
  stroke: rgba(155, 209, 229, 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}
.ek-arc-user {
  fill: none;
  stroke: #ffd978;
  stroke-width: 1.8;
  stroke-dasharray: 4 2.5;
  filter: drop-shadow(0 0 5px rgba(255, 217, 120, 0.6));
}
.ek-cliff-marker-line.target {
  stroke: rgba(155, 209, 229, 0.5);
  stroke-width: 1.1;
  stroke-dasharray: 2 2;
}
.ek-cliff-marker-line.user {
  stroke: rgba(255, 217, 120, 0.5);
  stroke-width: 1.1;
  stroke-dasharray: 2 2;
}
.ek-cliff-node.target {
  fill: #9bd1e5;
  stroke: #ffffff;
  stroke-width: 1;
  filter: drop-shadow(0 0 6px #9bd1e5);
}
.ek-cliff-node.user {
  fill: #ffd978;
  stroke: #ffffff;
  stroke-width: 1;
  filter: drop-shadow(0 0 6px #ffd978);
}

.ek-chamber-caption {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-muted);
}
.ek-chamber-caption strong {
  color: var(--text-white);
  font-style: normal;
  font-weight: 600;
}
.ek-chamber-caption.done {
  color: #ffe1a6;
}

.region-chip.is-current-round {
  border-color: rgba(255, 217, 120, 0.55);
  color: var(--text-white);
  box-shadow: 0 0 12px rgba(255, 217, 120, 0.15);
}

/* Concentric SVG Resonator Dial around the Sounding Pad */
.ek-orb-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.ek-dial-tick {
  stroke: rgba(255, 236, 214, 0.14);
  stroke-width: 1;
}
.ek-dial-tick.major {
  stroke: rgba(217, 180, 106, 0.38);
  stroke-width: 1.4;
}
.ek-svg-ring {
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.22s ease, stroke 0.22s ease, filter 0.22s ease;
}
.ek-svg-ring.outer-target-ring {
  stroke: rgba(155, 209, 229, 0.55);
  stroke-width: 1.8;
  stroke-dasharray: 5 3.5;
}
.ek-svg-ring.inner-user-ring {
  stroke: rgba(255, 217, 120, 0.38);
  stroke-width: 1.8;
}
.ek-svg-ring.inner-user-ring.recorded {
  stroke: #ffd978;
  filter: drop-shadow(0 0 8px rgba(255, 217, 120, 0.5));
}
.ek-ring-node.cyan {
  fill: #9bd1e5;
  filter: drop-shadow(0 0 4px #9bd1e5);
}
.ek-ring-node.amber {
  fill: rgba(255, 217, 120, 0.45);
}
.ek-ring-node.amber.recorded {
  fill: #ffd978;
  filter: drop-shadow(0 0 5px #ffd978);
}

.eko-orb-stage.target-ring-ping .ek-svg-ring.outer-target-ring,
.eko-orb-stage.target-ring-echo .ek-svg-ring.outer-target-ring {
  stroke: #9bd1e5;
  stroke-dasharray: none;
  transform: scale(1.05);
  filter: drop-shadow(0 0 14px rgba(155, 209, 229, 0.85));
}
.eko-orb-stage.user-ring-ping .ek-svg-ring.inner-user-ring,
.eko-orb-stage.user-ring-echo .ek-svg-ring.inner-user-ring {
  stroke: #ffd978;
  transform: scale(1.05);
  filter: drop-shadow(0 0 14px rgba(255, 217, 120, 0.85));
}

.ek-pad-horn-svg {
  width: 34px;
  height: 34px;
  color: #ffd978;
  filter: drop-shadow(0 0 6px rgba(255, 207, 122, 0.55));
}
.ek-space-tag {
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(255, 236, 214, 0.65);
  background: rgba(255, 236, 214, 0.07);
  border: 1px solid rgba(255, 236, 214, 0.14);
}

/* Reveal Distance Gauge & Finished Valley Log */
.ek-bridge-gauge {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
}
.ek-bridge-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}
.ek-harmony-grade {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: #ffe1a6;
}
.ek-bridge-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(14, 10, 24, 0.65);
  border: 1px solid rgba(255, 236, 214, 0.14);
  margin: 8px 0 4px;
}
.ek-bridge-diff {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(155, 209, 229, 0.35), rgba(255, 217, 120, 0.35));
}
.ek-bridge-pin {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid #ffffff;
}
.ek-bridge-pin.target {
  background: #9bd1e5;
  box-shadow: 0 0 8px #9bd1e5;
  z-index: 2;
}
.ek-bridge-pin.user {
  background: #ffd978;
  box-shadow: 0 0 8px #ffd978;
  z-index: 3;
}
.ek-pin-tag {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  white-space: nowrap;
  opacity: 0.85;
}
.ek-bridge-pin.target .ek-pin-tag { color: #9bd1e5; }
.ek-bridge-pin.user .ek-pin-tag { color: #ffd978; top: 12px; }

.ek-finished-log {
  gap: 12px;
}
.ek-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-size: 14px;
  color: #ffe1a6;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-hairline);
}
.ek-log-header strong {
  font-family: var(--font-mono);
  font-size: 12px;
}
.ek-log-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ek-log-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 244, 230, 0.035);
}
.ek-log-ridge { color: var(--text-white); font-family: var(--font-serif); }
.ek-log-dist { font-family: var(--font-mono); font-size: 11px; color: #9bd1e5; }
.ek-log-dist small { opacity: 0.65; }
.ek-log-diff { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.ek-log-score { font-family: var(--font-mono); font-size: 11.5px; color: #ffe1a6; }


/* =====================================================================
   INSTRUMENT 05 — PRISM REDESIGN (Quartz Cluster SVGs & Animated Light Sweep)
   ===================================================================== */

.px-hud-gems {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.px-hud-gem {
  width: 15px;
  height: 15px;
  display: inline-flex;
  color: rgba(168, 152, 198, 0.38);
  transition: color 0.3s, filter 0.3s, transform 0.3s;
}
.px-hud-gem svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: rgba(255, 236, 214, 0.35);
  stroke-width: 1.4;
}
.px-hud-gem.is-lit {
  color: #ffd978;
  filter: drop-shadow(0 0 6px #ffd978);
  transform: scale(1.12);
}
.px-hud-gem.is-lit svg {
  stroke: #fff4d4;
}

.px-window-mullion {
  stroke: rgba(196, 154, 82, 0.45);
  stroke-width: 1.5;
}
.px-sun-halo {
  fill: rgba(255, 217, 120, 0.22);
}
.px-mirror-inner-ring {
  fill: none;
  stroke: rgba(255, 236, 214, 0.16);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}
.px-mirror-specular {
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.7;
}
.px-stone-inner {
  fill: rgba(36, 26, 48, 0.45);
  stroke: rgba(255, 236, 214, 0.08);
  stroke-width: 1.2;
}

/* Sculpted Quartz Cluster & Crown Sunstone Crystal SVGs */
.px-cradle-ring {
  fill: rgba(24, 16, 36, 0.45);
  stroke: rgba(196, 154, 82, 0.45);
  stroke-width: 1.6;
}
.px-cradle-base {
  fill: #6d502e;
  stroke: #c49a52;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.px-cradle-prong {
  stroke: #c49a52;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.px-gem-star-crown {
  fill: rgba(108, 90, 142, 0.38);
  stroke: rgba(176, 158, 210, 0.55);
  stroke-width: 1.3;
  stroke-linejoin: round;
  transition: fill 0.35s, stroke 0.35s;
}
.px-gem-crown-left {
  fill: rgba(145, 126, 182, 0.55);
  transition: fill 0.35s;
}
.px-gem-bottom {
  fill: #322646;
  transition: fill 0.35s;
}
.px-gem-table {
  fill: rgba(195, 178, 228, 0.38);
  stroke: rgba(235, 225, 255, 0.45);
  stroke-width: 1.1;
  transition: fill 0.35s, stroke 0.35s;
}
.px-gem-seam {
  fill: none;
  stroke: rgba(235, 225, 255, 0.32);
  stroke-width: 1;
  stroke-linecap: round;
  transition: stroke 0.35s;
}
.px-gem-spark {
  fill: rgba(255, 255, 255, 0.65);
  transition: fill 0.35s, transform 0.35s;
}

/* Awakened Crystal States */
.px-awake .px-cradle-ring {
  stroke: #ffd978;
  fill: rgba(255, 207, 122, 0.15);
}
.px-awake .px-gem-star-crown {
  fill: rgba(255, 217, 120, 0.45);
  stroke: #fff4d4;
}
.px-awake .px-gem-crown-left {
  fill: #ffe89e;
}
.px-awake .px-gem-bottom {
  fill: #b86b1b;
}
.px-awake .px-gem-table {
  fill: #fff9e6;
  stroke: #ffffff;
}
.px-awake .px-gem-seam {
  stroke: rgba(255, 250, 230, 0.78);
}
.px-awake .px-gem-spark {
  fill: #ffffff;
  filter: drop-shadow(0 0 4px #ffffff);
}
.px-awake .px-side-shard.left .px-gem-left {
  fill: #9bd1e5;
}
.px-awake .px-side-shard.right .px-gem-right {
  fill: #f3c4dc;
}
.px-crystal-pulse-ring {
  fill: none;
  stroke: rgba(255, 236, 190, 0.65);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: pxPulseRingSpin 8s linear infinite;
}
.px-crystal-starflare {
  fill: #ffffff;
  opacity: 0.88;
  filter: drop-shadow(0 0 6px #ffd978);
  transform-box: fill-box;
  transform-origin: center;
  animation: pxStarFlarePulse 2.2s ease-in-out infinite;
}
@keyframes pxPulseRingSpin {
  to { transform: rotate(360deg); }
}
@keyframes pxStarFlarePulse {
  0%, 100% { transform: scale(0.88); opacity: 0.72; }
  50% { transform: scale(1.08); opacity: 0.98; }
}

/* Animated Light Deflection & Reflection Vertices */
.px-beam-sweep {
  fill: none;
  stroke: rgba(255, 225, 166, 0.55);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
}
.px-beam-sweep.is-sweeping {
  animation: pxSweepFade 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pxSweepFade {
  0% { opacity: 0.75; stroke-width: 5.5; filter: blur(0.6px); }
  100% { opacity: 0; stroke-width: 1; filter: blur(2.5px); }
}

.px-vertex-halo {
  fill: rgba(255, 217, 120, 0.45);
}
.px-vertex-star {
  fill: #fffdf5;
  filter: drop-shadow(0 0 4px #ffd978);
  transform-box: fill-box;
  transform-origin: center;
  animation: pxVertexTwinkle 2.4s ease-in-out infinite;
}
@keyframes pxVertexTwinkle {
  0%, 100% { transform: scale(0.85) rotate(0deg); }
  50% { transform: scale(1.18) rotate(18deg); }
}
.px-turn-flare-ring {
  fill: none;
  stroke: #fff4d4;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: pxTurnBurst 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes pxTurnBurst {
  0% { transform: scale(0.25); opacity: 1; }
  100% { transform: scale(1.55); opacity: 0; }
}
.px-crystal-hit-ring {
  fill: rgba(255, 225, 166, 0.25);
  stroke: #ffe1a6;
  stroke-width: 0.9;
  transform-box: fill-box;
  transform-origin: center;
  animation: pxStarFlarePulse 1.8s ease-in-out infinite;
}
.px-beam-stop-dot {
  fill: #ffe1a6;
  opacity: 0.75;
}
.px-travel-photon {
  fill: #ffffff;
  filter: drop-shadow(0 0 6px #ffd978);
  pointer-events: none;
}


/* =====================================================================
   INSTRUMENT 08 — SPECTRUM REDESIGN (Spectroscope Chamber & Starlight Vials)
   ===================================================================== */

.sp-chamber {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 14px 9px;
  border-radius: 14px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(167, 139, 250, 0.12), transparent 70%),
    var(--bg-well);
  border: 1px solid var(--border-hairline);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.38);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-chamber.is-still {
  border-color: rgba(255, 225, 166, 0.48);
  box-shadow: inset 0 0 24px rgba(255, 225, 166, 0.14), 0 0 22px rgba(255, 225, 166, 0.14);
}
.sp-chamber-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sp-chamber-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--text-secondary);
}
.sp-chamber-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #ffe1a6;
}

.sp-chamber-svg {
  width: 100%;
  height: 64px;
  display: block;
  overflow: visible;
}
.sp-spectrum-band {
  opacity: 0.16;
  transition: opacity 0.4s;
}
.sp-chamber.is-still .sp-spectrum-band {
  opacity: 0.32;
}
.sp-ideal-axis {
  fill: none;
  stroke: rgba(255, 236, 214, 0.15);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
}
.sp-string-line {
  stroke: rgba(255, 236, 214, 0.1);
  stroke-width: 1;
}
.sp-string-line.is-aligned {
  stroke: rgba(255, 225, 166, 0.28);
}
.sp-melody-glow {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  opacity: 0.35;
  filter: blur(2px);
}
.sp-melody-curve {
  fill: none;
  stroke: #fff4d4;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(255, 225, 166, 0.55));
}
.sp-melody-curve.is-solved {
  stroke: #ffe1a6;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px rgba(255, 217, 120, 0.85));
}
.sp-pitch-node {
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
.sp-node-ripple {
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: spNodePulse 1.1s ease-out infinite;
}
@keyframes spNodePulse {
  0% { transform: scale(0.7); opacity: 0.95; }
  100% { transform: scale(1.65); opacity: 0; }
}
.sp-node-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  fill: rgba(255, 236, 214, 0.65);
}

.sp-chamber-caption {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-muted);
}
.sp-chamber-caption strong {
  color: var(--text-white);
  font-style: normal;
  font-weight: 600;
}
.sp-chamber-caption.done {
  color: #ffe1a6;
}

/* Starlight Vials Rack & Custom Alchemical Vial SVGs */
.spectrum-rack-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.spectrum-panel .spectrum-tubes-rack {
  max-width: 560px;
  padding: 14px 10px;
  gap: 7px;
}
.spectrum-panel .spectrum-tube {
  padding: 8px 4px 10px;
  gap: 4px;
  border-radius: 14px;
  background: rgba(var(--card-rgb), 0.48);
  border: 1px solid rgba(255, 236, 214, 0.11);
}
.spectrum-panel .spectrum-tube:hover:not(.is-locked) {
  transform: translateY(-5px);
  border-color: var(--tube-color);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 16px color-mix(in srgb, var(--tube-color) 32%, transparent);
}
.spectrum-panel .spectrum-tube.is-selected {
  transform: translateY(-7px);
  border-color: #ffe1a6 !important;
  background: rgba(255, 225, 166, 0.12);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 217, 120, 0.45);
}
.spectrum-panel .spectrum-tube.is-playing {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--tube-color);
  box-shadow: 0 0 24px var(--tube-color);
}
.spectrum-panel .spectrum-tube.just-swapped {
  animation: popIn 0.24s cubic-bezier(0.2, 1.3, 0.35, 1);
}

.spectrum-panel .tube-slot-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.spectrum-panel .spectrum-tube.is-locked .tube-slot-num {
  color: #e2c07d;
}

.sp-vial-svg {
  width: 100%;
  max-width: 54px;
  height: 122px;
  display: block;
  overflow: visible;
}
.sp-vial-aura {
  opacity: 0.12;
  filter: blur(8px);
  transition: opacity 0.25s;
}
.sp-vial-aura.is-bright {
  opacity: 0.36;
}
.sp-brass-cap {
  fill: #8d683a;
  stroke: #d9b46a;
  stroke-width: 1.2;
}
.sp-brass-cap.locked {
  fill: #705028;
  stroke: #ffe1a6;
}
.sp-brass-rim {
  fill: #c49a52;
  stroke: #4d3319;
  stroke-width: 1;
}
.sp-anchor-star {
  fill: #ffe1a6;
  stroke: #6d4e2a;
  stroke-width: 0.8;
  filter: drop-shadow(0 0 4px rgba(255, 217, 120, 0.7));
}
.sp-cap-rivet {
  fill: #ffe1a6;
}
.sp-cork-top {
  fill: #b38352;
  stroke: #5c3d1e;
  stroke-width: 1;
}
.sp-cap-seam {
  stroke: rgba(255, 236, 214, 0.35);
  stroke-width: 1;
}

.sp-glass-outer {
  fill: rgba(16, 12, 28, 0.72);
  stroke: rgba(255, 236, 214, 0.28);
  stroke-width: 1.4;
}
.spectrum-tube.is-selected .sp-glass-outer,
.spectrum-tube.is-playing .sp-glass-outer {
  stroke: rgba(255, 244, 224, 0.75);
}
.sp-internal-wave {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.65;
}
.sp-vial-spark {
  filter: drop-shadow(0 0 4px #ffffff);
}
.sp-glass-tick {
  stroke: rgba(255, 255, 255, 0.26);
  stroke-width: 1;
  stroke-linecap: round;
}
.sp-glass-tick.major {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.2;
}
.sp-glass-shine {
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.sp-brass-base {
  fill: #7d5b32;
  stroke: #c49a52;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.sp-base-jewel {
  fill: rgba(255, 236, 214, 0.2);
  stroke: rgba(255, 236, 214, 0.35);
  stroke-width: 0.9;
}
.sp-base-jewel.is-aligned {
  fill: #ffd978;
  stroke: #fff4d4;
  filter: drop-shadow(0 0 5px #ffd978);
}

.spectrum-panel .tube-bottom-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.spectrum-panel .tube-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
  color: var(--tube-color);
}
.spectrum-panel .tube-name {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-secondary);
}
.spectrum-panel .tube-freq {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
}

.sp-audition-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  font-size: 12px;
  border-color: rgba(255, 217, 120, 0.35);
  color: #ffe1a6;
}
.sp-audition-btn:hover:not(:disabled) {
  background: rgba(255, 217, 120, 0.14);
  border-color: #ffd978;
}


/* --- 8. OBSERVATORY ICONS ------------------------------------------------
   One sprite (js/icons.js) drawn in currentColor, so every control keeps its own colour. */

.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.ico-lg {
  width: 17px;
  height: 17px;
}

.ico-flip {
  transform: scaleX(-1);
}

.clock-sep.ico {
  width: 7px;
  height: 7px;
  vertical-align: middle;
}

.btn-secondary,
.subtle-pill-btn,
.white-pill-btn,
.accent-pill-btn,
.cta-pill,
.text-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.text-back-btn {
  justify-content: flex-start;
}

.modal-close-btn {
  display: grid;
  place-items: center;
  padding: 0;
}

.modal-close-btn .ico {
  width: 14px;
  height: 14px;
}

.cta-pill .ico {
  transition: transform 0.3s ease;
}

.instrument-card:hover .cta-pill .ico {
  transform: translateX(3px);
}

.inst-status .ico,
.win-pill-soft .ico,
.status-pill .ico,
#daily-progress-text .ico {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.2em;
  vertical-align: -0.1em;
}

.quick-tip .ico,
.howto-step-text .ico {
  margin: 0 0.15em;
  opacity: 0.85;
}

.circuit-tile-rot-hint {
  display: grid;
  place-items: center;
}

.win-vcell .ico {
  width: 70%;
  height: 70%;
}

/* Game switcher dropdown */
.game-switcher { position: relative; margin-right: auto; margin-left: 16px; }
.game-switch-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  display: flex; flex-direction: column; min-width: 180px; padding: 6px;
  background: rgba(var(--card-rgb), 0.96); border: 1px solid var(--border-hairline);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}
.game-switch-menu.hidden { display: none; }
.game-switch-item {
  text-align: left; padding: 8px 12px; border-radius: 8px;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary);
  background: none; border: 0; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.game-switch-item:hover { background: rgba(255, 244, 230, 0.1); color: var(--text-white); }
.game-switch-item.current { color: var(--gold-accent); }

.action-btns .btn-push-right { margin-left: auto; }

.win-vcell.yellow {
  background: linear-gradient(135deg, #ffe680 0%, #facc15 100%) !important;
  border: 1px solid #fff4b0 !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.65) !important;
  color: #2b1404 !important;
}

.game-switch-item { text-transform: lowercase; }

/* Full-width action row so btn-push-right can split the groups */
.action-btns.action-btns-split { flex: 1 1 100%; align-items: center; }

/* ================== RESPONSIVE: WIN CARD & SMALL SCREENS ================== */

.modal-backdrop {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.win-card {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.win-card .win-meta-row {
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: flex-start;
}

.win-card .win-pill-soft {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-card .win-lead,
.win-card .win-note {
  overflow-wrap: anywhere;
}

.win-card .win-stats-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.win-card .win-stat-box {
  min-width: 0;
}

.win-card .win-stat-lbl,
.win-card .win-stat-val {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-card .win-matrix-showcase {
  max-width: 100%;
  overflow: hidden;
}

/* Matrix cells share the available width instead of using a fixed size */
.win-card .win-visual-matrix {
  width: 100% !important;
  max-width: calc(var(--cols, 6) * 30px + (var(--cols, 6) - 1) * 7px);
}

.win-card .win-vcell {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
}

.win-card .win-progress-head {
  flex-wrap: wrap;
  gap: 4px 10px;
}

.win-card .win-modal-actions {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.win-card .win-modal-actions button {
  width: 100%;
  min-width: 0;
  padding-left: 14px;
  padding-right: 14px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 480px) {
  .win-card .win-mod-pills-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  .win-card .win-lead {
    font-size: 22px;
  }
  .win-card .win-note {
    font-size: 14px;
  }
  .win-card .win-stat-val {
    font-size: 16px;
  }
  .win-card .win-stat-lbl {
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }
  .win-card .win-matrix-showcase {
    padding: 10px 8px !important;
  }
  .win-card .win-visual-svg {
    width: min(100%, 200px);
  }
}

/* Panel-level board variables are declared after the global mobile ones and win the cascade,
   so the boards get their narrow-screen sizing here, derived from the viewport width. */

.action-btns {
  flex-wrap: wrap;
}

.action-btns > * {
  min-width: 0;
}

@media (max-width: 640px) {
  .game-panel {
    padding: 16px 10px;
  }

  .denge-stage > *,
  .sonar-sculpt-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .denge-panel {
    --denge-gap: 4px;
    --denge-cell-size: clamp(30px, calc((100vw - 100px) / 6), 54px);
  }

  .sonar-tactical-layout {
    --sonar-gap: 3px;
    --sonar-tx-size: 24px;
    --sonar-cell-size: clamp(26px, calc((100vw - 95px) / 6), 46px);
  }

  .resonance-panel {
    --rz-gap: 4px;
    --rz-meter: 30px;
    --rz-cell: clamp(28px, calc((100vw - 100px) / 6), 54px);
  }

  .game-footer-bar {
    justify-content: center;
  }

  .game-footer-bar .quick-tip {
    flex: 1 1 100%;
    text-align: center;
  }

  .game-footer-bar .action-btns {
    justify-content: center;
    width: 100%;
  }

  .action-btns .btn-push-right {
    margin-left: 0;
  }
}

/* ================== RESPONSIVE: GAME TOP BAR ================== */

@media (max-width: 640px) {
  /* Row 1: back button + game switcher. Row 2: today/archive + seed badge. Row 3: new sky */
  .game-topbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 10px;
  }

  .text-back-btn {
    align-self: center;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  .game-switcher {
    margin: 0 0 0 auto;
    flex: 0 0 auto;
  }

  .game-switcher .subtle-pill-btn {
    padding: 6px 12px;
    white-space: nowrap;
  }

  .game-switch-menu {
    left: auto;
    right: 0;
    max-width: calc(100vw - 48px);
  }

  .game-seed-controls {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .game-seed-controls .mode-pill-toggle.compact {
    padding: 3px;
  }

  .game-seed-controls .mode-pill-toggle.compact .mode-pill-opt {
    padding: 5px 14px;
    font-size: 12px;
    white-space: nowrap;
  }

  .game-seed-controls .mono-seed-tag {
    justify-self: end;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: 11.5px;
  }

  .game-seed-controls .seed-refresh-btn {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* ================== RESPONSIVE: GAME FOOTERS & HUDS (MOBILE) ================== */

@media (max-width: 640px) {
  /* Sonar + Resonance: mode pill on its own row, then the three actions side by side */
  .action-btns.action-btns-split {
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
  }

  .action-btns-split .sonar-mode-pill {
    flex: 1 1 100%;
    justify-content: center;
  }

  .action-btns-split .sonar-mode-pill .sonar-mode-btn {
    flex: 1 1 0;
    justify-content: center;
    white-space: nowrap;
  }

  .action-btns-split > .btn-secondary {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    white-space: nowrap;
  }

  /* Spectrum: four actions don't fit in one row, so lay them out 2x2 */
  .action-btns.action-btns-split.action-btns-2x2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-btns-2x2 > .btn-secondary {
    justify-content: center;
    white-space: normal;
    line-height: 1.2;
  }

  /* Prism / Knot / Circuit HUD: three even columns, centred */
  .prism-hud,
  .knot-hud,
  .circuit-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
    padding-bottom: 14px;
  }

  .prism-hud .hud-card,
  .knot-hud .hud-card,
  .circuit-hud .hud-card {
    min-width: 0;
    padding: 0;
    align-items: center;
    text-align: center !important;
    gap: 4px;
  }

  .prism-hud .hud-label,
  .knot-hud .hud-label,
  .circuit-hud .hud-label {
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
  }

  .prism-hud .hud-value,
  .knot-hud .hud-value,
  .circuit-hud .hud-value {
    font-size: 14px;
    justify-content: center !important;
    flex-wrap: wrap;
    text-align: center;
  }

  .prism-hud .px-hud-gems {
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
  }

  .prism-hud .px-hud-gem {
    width: 13px;
    height: 13px;
  }

  .prism-hud .status-pill,
  .knot-hud .status-pill,
  .circuit-hud .status-pill {
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
  }

  /* Prism footer: legend first, then undo / start fresh / hint in one row */
  .prism-panel .action-btns,
  .knot-panel .action-btns,
  .circuit-panel .action-btns {
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
  }

  .prism-panel .action-btns > div:first-child {
    display: contents !important;
  }

  .prism-panel .px-legend,
  .circuit-panel .px-legend {
    order: 0;
    flex: 1 1 100%;
    justify-content: center;
  }

  .prism-panel .action-btns .btn-secondary,
  .knot-panel .action-btns .btn-secondary,
  .circuit-panel .action-btns .btn-secondary {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    white-space: nowrap;
  }

  /* Knot footer: buttons above the hint text */
  .knot-panel .action-btns > div {
    order: 2;
    flex: 1 1 100%;
  }

  /* Circuit footer: hint, then start fresh on its right */
  #circuit-hint-btn { order: 1; }
  #circuit-reset-btn { order: 2; }
}