:root {
  --lumen-teal: #2dd4bf;
  --lumen-pad-active-glow: 0.35; /* INSTÄLLNING - Ändra basstyrkan på knapparnas aktiva glow. */
}

.game-board-wrapper {
  --lumen-board-size: 460px; /* INSTÄLLNING - Ändra maxstorlek på Lumen Sequence spelbräde. */
  --lumen-node-size: 84px; /* INSTÄLLNING - Ändra storlek på Lumen-noderna. */

  position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(139,108,255,0.04), transparent 70%),
              #050507;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 50%;
  width: min(100%, var(--lumen-board-size, 460px));
  aspect-ratio: 1 / 1;
  margin-inline: auto; /* Centering */
  box-shadow: inset 0 0 40px rgba(0,0,0,0.8),
              0 24px 60px rgba(0,0,0,0.5);
  display: block;
  position: relative;
  overflow: visible;
}

.lumen-pads {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lumen-pad {
  position: absolute;
  width: var(--lumen-node-size, 84px);
  height: var(--lumen-node-size, 84px);
  background: linear-gradient(135deg, #18181b, #0c0c0e);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.2);
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), 
              inset 0 1px 1px rgba(255,255,255,0.05);
  transform: translate(-50%, -50%);
}

.lumen-pad:hover {
  border-color: rgba(255,255,255,0.2);
}

.lumen-pad.active {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Specific Pad Colors (Glows) */
/* Luminous Pad Progression */
.pad-0.active { border-color: var(--lumen-violet); box-shadow: 0 0 40px rgba(139, 108, 255, 0.5); background: rgba(139, 108, 255, 0.25); color: var(--lumen-violet); }
.pad-1.active { border-color: var(--lumen-cyan); box-shadow: 0 0 40px rgba(76, 201, 240, 0.5); background: rgba(76, 201, 240, 0.25); color: var(--lumen-cyan); }
.pad-2.active { border-color: var(--lumen-gold); box-shadow: 0 0 40px rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.25); color: var(--lumen-gold); }
.pad-3.active { border-color: var(--lumen-teal); box-shadow: 0 0 40px rgba(45, 212, 191, 0.5); background: rgba(45, 212, 191, 0.25); color: var(--lumen-teal); }
.pad-4.active { border-color: var(--lumen-white); box-shadow: 0 0 40px rgba(250, 250, 250, 0.5); background: rgba(250, 250, 250, 0.25); color: var(--lumen-white); }

/* Lumen Sequence Overlay specific overrides */
.difficulty-group {
  margin-top: 4px;
}

.btn.active {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 10px var(--accent-glow);
}


/* INSTÄLLNING - Global Mobile Fallback Fix */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}
@media (max-width: 800px) {
    canvas, .game-canvas, #game-container, #game-stage, #app {
        max-width: 100% !important;
        height: auto;
    }
    .panel, .sidebar, .menu, #ui, #overlay {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}