.app {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
}

.subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #565f89;
}

.level-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  min-height: 2.5rem;
}

.level-select-label {
  width: 100%;
  text-align: center;
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
}

.level-select button {
  min-width: 3rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #3b4261;
  border-radius: 6px;
  background: #24283b;
  color: #c0caf5;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.level-select button:hover {
  background: #2f3549;
  border-color: #7aa2f7;
}

.level-select button.active {
  background: #364a7c;
  border-color: #7aa2f7;
  color: #fff;
}

.level-select button.completed {
  border-color: #9ece6a;
  color: #9ece6a;
}

.level-select button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #1e2030;
  border-color: #3b4261;
}

.level-select button:disabled:hover {
  background: #1e2030;
  border-color: #3b4261;
  filter: none;
}

.game-panel {
  background: #24283b;
  border-radius: 12px;
  padding: 1.25rem 1rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.hud {
  text-align: center;
  margin-bottom: 0.75rem;
}

.moves-required {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #e0af68;
}

.moves-used {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #a9b1d6;
}

.canvas {
  display: block;
  width: 100%;
  max-width: 800px;
  min-height: 120px;
  height: 140px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  background: #1e2030;
  border-radius: 8px;
}

.segment.static {
  cursor: default;
  pointer-events: none;
}

.segment.static .match-line {
  stroke: #c0caf5;
  stroke-width: 5;
  opacity: 0.85;
}

.segment.lit {
  cursor: grab;
}

.segment.lit:active {
  cursor: grabbing;
}

.segment.lit .match-line {
  stroke: #f0c674;
  stroke-width: 6;
  filter: drop-shadow(0 0 3px rgba(240, 198, 116, 0.45));
}

.segment.unlit {
  cursor: default;
}

.segment.unlit .match-line {
  stroke: #414868;
  stroke-width: 3;
  stroke-dasharray: 5 4;
  opacity: 0.55;
}

.segment.unlit.drop-target .match-line {
  stroke: #7aa2f7;
  opacity: 0.9;
  cursor: copy;
}

.segment.dragging-source {
  opacity: 0.35;
}

.stash-box {
  fill: #1e2030;
  stroke: #565f89;
  stroke-width: 1.5;
}

.stash-label {
  fill: #565f89;
  font-size: 9px;
  font-family: "Segoe UI", system-ui, sans-serif;
  text-anchor: middle;
}

.stash-stick.lit {
  cursor: grab;
}

.stash-stick.lit:active {
  cursor: grabbing;
}

.stash-stick.lit .match-line {
  stroke: #f0c674;
  stroke-width: 6;
  filter: drop-shadow(0 0 3px rgba(240, 198, 116, 0.45));
}

.stash-stick.empty .match-line {
  stroke: #414868;
  stroke-width: 3;
  stroke-dasharray: 5 4;
  opacity: 0.4;
}

.drag-ghost {
  stroke: #ff9e64;
  stroke-width: 6;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 158, 100, 0.6));
}

.controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.controls button {
  padding: 0.55rem 1.25rem;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: filter 0.15s;
}

#btn-reset {
  background: #3b4261;
  color: #c0caf5;
}

#btn-check {
  background: #7aa2f7;
  color: #1a1b26;
  font-weight: 600;
}

.controls button:hover {
  filter: brightness(1.1);
}

.message {
  text-align: center;
  min-height: 1.5rem;
  margin: 1rem 0 0;
  font-size: 1rem;
}

.message.success {
  color: #9ece6a;
}

.message.error {
  color: #f7768e;
}

.message.info {
  color: #a9b1d6;
}