:root {
    --light-square: #f0d9b5;
    --dark-square: #b58863;
    --arrow-color: rgba(255, 140, 0, 0.87);
}

.pgn-viewer {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
}

/* Default styling for pgn-viewers in content (not in compact lists) */
.pgn-viewer:not([style*="aspect-ratio"]) {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    padding: 0.75rem;
    width: 100%;
    max-width: 500px;
}

.pgn-viewer chess-board {
    width: 100%;
    /* Max-width reduced from 1000px to 600px as safety constraint.
       In practice, parent .pgn-viewer constrains to 500px (profile) or 350px (Recent page).
       This prevents excessive growth while maintaining analysis visibility. */
    max-width: 600px;
    aspect-ratio: 1/1;
    --light-color: var(--light-square);
    --dark-color: var(--dark-square);
}

.pgn-viewer .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pgn-viewer .controls .btn {
    min-width: 2.5rem;
}

.pgn-viewer .arrow-overlay line {
    stroke: var(--arrow-color);
    stroke-width: var(--arrow-stroke-width, 5);
    marker-end: url(#arrowhead);
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.final-position {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.final-position-board {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 1/1;
    --light-color: var(--light-square);
    --dark-color: var(--dark-square);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}