/* Group Rows */

.pgnv-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    gap: 50px; /* Space between elements */
    width: 50%;
    box-sizing: border-box;
}

/* Group 2: Two Items */
.pgnv-wrapper .group-2 > div {
    flex: 1; /* Distribute evenly */
    max-width: 100%; /* Each a maximum of half-width */
    box-sizing: border-box;
    padding: 0 20px;
}

/* Group 21/12: Two Items */
.pgnv-wrapper .group-12 > div,
.pgnv-wrapper .group-21 > div{
    box-sizing: border-box;
    padding: 0 10px;
}

/* Group 1: Full-Width Element */
.pgnv-wrapper .group-1 > div {
    flex: 1 0 100%; /* Take the full width */
    padding: 0 10px;
}

/* Group 3: Three Items Equally Spread */
.pgnv-wrapper .group-3 > div {
    flex: 1; /* Equally spaced */
    max-width: 33%; /* Each item a maximum of one-third width */
    box-sizing: border-box;
    padding: 0 10px;
}

/* Make It Responsive */
@media (max-width: 768px) {
    .pgnv-wrapper .group-1 > div,
    .pgnv-wrapper .group-3 > div {
        max-width: 100%; /* Stack the rows on smaller screens */
    }
}

.row.group-12 > div:first-child {
    flex: 1; /* 1/3 width */
}

.row.group-12 > div:last-child {
    flex: 2; /* 2/3 width */
}

.row.group-21 > div:first-child {
    flex: 2; /* 2/3 width */
}

.row.group-21 > div:last-child {
    flex: 1; /* 1/3 width */
}

/* ==========================================
   LICHESS NOTATION AREA STYLING
   ========================================== */

/* ==========================================
   FIXED-HEIGHT LICHESS NOTATION AREA
   ========================================== */

/* ==========================================
   FLAT-LIST LICHESS NOTATION AREA
   ========================================== */

/* Container holding the layout */
.pgnv-moves, .moves {
    display: grid; /* Switched parent container to grid directly */
    grid-template-columns: 50px 140px 140px; /* Clean column slots */
    width: 800px; 
    background-color: #f8f8f7; 
    color: #312e2b; 
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 0; 
    box-sizing: border-box;
}

/* If your HTML uses container rows, we strip their layout properties 
   so they don't break our strict grid flow.
*/
.pgnv-moves div.move, .moves .row {
    display: contents; /* Eliminates container interference, lets children line up perfectly */
}

/* Force Move Numbers to start a fresh row in Column 1 */
.pgnv-moves div.move::before, .moves .move-number {
    grid-column-start: 1; /* Snaps directly to the far left column */
    grid-row-end: span 2; /* Spans 2 vertical tracks */
    grid-row-start: auto; /* Lets the grid engine naturally place rows */
    color: #b2b2b1; 
    text-align: left; 
    padding-left: 10px; 
    font-size: 0.85em;
    font-weight: 600;
    height: 20px !important;
    line-height: 20px;
    box-sizing: border-box;
}

/* Ensure subsequent elements wrap cleanly under the spanned number */
.pgnv-moves div.move {
    grid-column-start: 3; /* Moves actual moves to the next column */
}

/* Force White moves explicitly into Column 2 */
.moves .white, .pgnv-moves div.move a:nth-of-type(2) {
    grid-column-start: 2;
}

/* Force Black moves explicitly into Column 3 */
.moves .black, .pgnv-moves div.move a:nth-of-type(3) {
    grid-column-start: 3;
}

/* Style White and Black column layouts */
.pgnv-moves div.move a, .moves .white, .moves .black {
    display: flex;
    flex-direction: row; /* Main axis runs horizontally */ 
    align-items: center;
    justify-content: flex-start; 
    padding: 0 8px;
    height: 20px !important;
    max-height: 20px !important;
    color: #312e2b;
    text-decoration: none;
    font-size: 0.85em; 
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 20px;
}

/* Lichess style hover state highlighting */
.pgnv-moves div.move a:hover, .moves .white:hover, .moves .black:hover {
    background-color: #d5e4f2 !important; 
    color: #2b5797 !important;
}

/* Highlight the active move currently on the board */
.pgnv-moves .active, .moves .current-move {
    background-color: #3692e7 !important; 
    color: #fff !important;
    font-weight: bold;
}