/* v18: Puzzles section (puzzles.js) retains the approved Solve a puzzle tab, existing IDs and mostly shared styles. Only the three-topic selector is defined here, using the previous three-column set selector. */
#puzzles .lab-puzzle-levels.pz-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#puzzles .lab-puzzle-levels.pz-topics button { text-transform: none; letter-spacing: .02em; }
#puzzles .lab-puzzle-levels.pz-topics button:disabled { opacity: .45; cursor: default; }
/* Legend below board matches Analysis (spark-analysis.css: `#position-lab .lab-board-key`): content width, centered, white text. */
#puzzles .lab-board-key { flex-wrap: wrap; row-gap: 3px; box-sizing: border-box; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; color: #F4FAFF; font-weight: 650; }
#puzzles .lab-board-key span { color: #F4FAFF; }
/* With Black at the bottom, turn circles swap positions to match board sides. */
#puzzles .lab-turn-indicator.is-flipped [data-turn-side="black"] { top: auto; bottom: 3px; }
#puzzles .lab-turn-indicator.is-flipped [data-turn-side="white"] { bottom: auto; top: 3px; }
#puzzles .lab-piece.is-dragging { z-index: 9; filter: drop-shadow(0 8px 8px rgba(0,0,0,.45)); }
/* v19: dark steel topic buttons use legend markers: red ring for Shift, orange square for Swap, pink diamond for Relay Swap. Selected: marker-colored border and white text; unselected: muted. Removed distracting purple. */
#puzzles .lab-puzzle-levels.pz-topics button { display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #3A4458; background: linear-gradient(180deg, #2C3548 0%, #1E2533 55%, #171D29 100%); color: #8491A3; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #090D14; transition: color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease); }
#puzzles .lab-puzzle-levels.pz-topics button::before { content: ''; flex: none; box-sizing: border-box; width: 11px; height: 11px; opacity: .45; transition: opacity 220ms var(--ease); }
#puzzles .lab-puzzle-levels.pz-topics [data-topic="shift"]::before { border: 2.5px solid #FF4D4D; border-radius: 50%; }
#puzzles .lab-puzzle-levels.pz-topics [data-topic="direct-swap"]::before { background: #FF8A3D; border-radius: 2px; }
#puzzles .lab-puzzle-levels.pz-topics [data-topic="relay-swap"]::before { border: 2.5px solid #FF2FC8; border-radius: 1px; transform: rotate(45deg); }
#puzzles .lab-puzzle-levels.pz-topics button.is-active { color: #FFFFFF; background: linear-gradient(180deg, #2C3548 0%, #1E2533 55%, #171D29 100%); }
#puzzles .lab-puzzle-levels.pz-topics button.is-active::before { opacity: 1; }
#puzzles .lab-puzzle-levels.pz-topics [data-topic="shift"].is-active { border-color: #FF4D4D; box-shadow: inset 0 0 0 1px rgba(255,77,77,.5), 0 3px 0 #090D14; }
#puzzles .lab-puzzle-levels.pz-topics [data-topic="direct-swap"].is-active { border-color: #FF8A3D; box-shadow: inset 0 0 0 1px rgba(255,138,61,.5), 0 3px 0 #090D14; }
#puzzles .lab-puzzle-levels.pz-topics [data-topic="relay-swap"].is-active { border-color: #FF2FC8; box-shadow: inset 0 0 0 1px rgba(255,47,200,.5), 0 3px 0 #090D14; }
/* v19: previous-move markers fade only when changing puzzles; otherwise square highlights match Analysis and Play. */
#puzzles.pz-fading .position-lab-board .lab-grid .lab-square { transition: box-shadow 220ms var(--ease), background-color 220ms var(--ease); }

/* v20 item 26: all topic buttons use light slate blue, darker than the beige Tactical puzzle row, related to blue Try again and turquoise Copy buttons but calmer. Text #13233A (7.4:1). Legend marker sits on a dark square, preserving board colors. Selected topic uses an inset button of the same color. */
#puzzles .lab-puzzle-levels.pz-topics button { border-color:#7F97B0; background:linear-gradient(180deg, #B4C6D8 0%, #9DB4CA 55%, #8EA6BE 100%); color:#13233A; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #4E6278; }
#puzzles .lab-puzzle-levels.pz-topics button::before { width:18px; height:18px; border:0; border-radius:4px; transform:none; opacity:1; background:#1E2533 center / 12px 12px no-repeat; }
#puzzles .lab-puzzle-levels.pz-topics [data-topic="shift"]::before { border:0; border-radius:4px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.3' fill='none' stroke='%23FF4D4D' stroke-width='2.4'/%3E%3C/svg%3E"); }
#puzzles .lab-puzzle-levels.pz-topics [data-topic="direct-swap"]::before { border-radius:4px; background-color:#1E2533; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='1.5' width='9' height='9' rx='1.5' fill='%23FF8A3D'/%3E%3C/svg%3E"); }
#puzzles .lab-puzzle-levels.pz-topics [data-topic="relay-swap"]::before { border:0; border-radius:4px; transform:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2 10.8 6 6 10.8 1.2 6Z' fill='none' stroke='%23FF2FC8' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#puzzles .lab-puzzle-levels.pz-topics button.is-active,
#puzzles .lab-puzzle-levels.pz-topics :is([data-topic="shift"],[data-topic="direct-swap"],[data-topic="relay-swap"]).is-active { border-color:#5F7892; background:linear-gradient(180deg, #8EA6BE 0%, #9DB4CA 100%); color:#0B1728; box-shadow:inset 0 2px 5px rgba(19,35,58,.45), 0 1px 0 #4E6278; transform:translateY(2px); }