/* Cheese — Training page */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* BODY */

body{

    height:100vh;

    overflow:hidden;

    background-image:
    url("Background/custom_bg1.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    font-family:Arial,sans-serif;
}

/* APP CONTAINER */

.app-container{

    width:100vw;

    height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:flex-start;
}

/* BOARD AREA */

.board-area{

    position:absolute;

    left:46%;

    top:50%;

    transform:
    translate(-50%,-50%);

    display:flex;

    flex-direction:column;

    align-items:center;
}

/* SIDEBAR */

.sidebar{

    position:absolute;

    right:45px;

    top:50%;

    transform:
    translateY(-50%);

    width:540px;

    height:760px;

    display:flex;

    flex-shrink:0;
}

/* FUTURE EVAL SPACE */

.eval-space{

    position:absolute;

    top:50%;

    right:620px;

    transform:
    translateY(-50%);

    width:36px;

    height:760px;
}

/* PLAYER PANELS */

.player{

    width:760px;

    height:50px;

    background:
    rgba(15,20,35,0.82);

    backdrop-filter:blur(10px);

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 14px;

    color:white;

    box-shadow:
    0 0 14px rgba(0,0,0,0.22);

    overflow:hidden;
}

.black-player{

    margin-bottom:14px;
}

.white-player{

    margin-top:14px;
}

/* PLAYER LEFT */

.player-left{

    display:flex;

    align-items:center;

    gap:12px;
}

/* PLAYER PFP */

.player-pfp{

    width:30px;

    height:30px;

    border-radius:8px;
}

.black-pfp{

    background:black;

    border:2px solid white;
}

.white-pfp{

    background:white;

    border:2px solid black;
}

/* PLAYER NAME */

.player-name{

    font-size:18px;

    font-weight:600;
}

/* CLOCK */

.player-clock{

    font-size:18px;

    font-weight:700;

    background:
    rgba(255,255,255,0.08);

    padding:6px 12px;

    border-radius:8px;
}

/* BOARD */

.board{

    width:760px;

    height:760px;

    display:grid;

    grid-template-columns:
    repeat(8,1fr);

    grid-template-rows:
    repeat(8,1fr);

    overflow:hidden;

    border-radius:10px;

    box-shadow:
    0 0 24px rgba(0,0,0,0.35);

    flex-shrink:0;
}

/* SQUARES */

.square{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:0.15s;
}

/* LIGHT */

.light{

    background-image:
    url("board/square_brown_light_svg.svg");

    background-size:cover;
}

/* DARK */

.dark{

    background-image:
    url("board/square_brown_dark_svg.svg");

    background-size:cover;
}

/* PIECES */

.piece{

    width:85%;

    height:85%;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

    transition:0.15s;
}

/* HOVER */

.square:hover{

    filter:brightness(1.05);

    cursor:pointer;
}

.square:hover .piece{

    transform:scale(1.05);
}

/* VALID MOVE */

.valid-move::after{

    content:"";

    width:22px;

    height:22px;

    border-radius:50%;

    background:
    rgba(255,255,255,0.35);

    position:absolute;
}

/* LAST MOVE HIGHLIGHT */
/* Inset box-shadow paints above the square texture but below the in-flow
   piece image, so the tint never obscures the piece. */

.square.last-move{

    box-shadow: inset 0 0 0 9999px rgba(255, 213, 79, 0.28);
}

/* CHECK FLASH */
/* Flashes the king's square red twice, then returns to normal.
   Reused for both the in-check indicator and rejected-move-while-in-check. */

.square.check-flash{

    animation: checkFlash 0.85s ease-in-out 1;
}

@keyframes checkFlash{

    0%, 100%{

        box-shadow: inset 0 0 0 9999px rgba(214, 38, 38, 0);
    }

    25%, 75%{

        box-shadow: inset 0 0 0 9999px rgba(214, 38, 38, 0.78);
    }

    50%{

        box-shadow: inset 0 0 0 9999px rgba(214, 38, 38, 0);
    }
}

/* ANALYSIS PANEL — AP */

.ap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(15,20,35,0.90);
    backdrop-filter: blur(14px);
    border-radius: 14px;
    overflow: hidden;
    color: white;
    box-shadow: 0 0 24px rgba(0,0,0,0.35);
}

/* AP HEADER */

.ap-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.ap-back-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.ap-back-btn:hover {
    color: white;
    background: rgba(255,255,255,0.08);
}

.ap-back-btn svg {
    width: 18px;
    height: 18px;
}

.ap-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    flex: 1;
    justify-content: center;
    margin-right: 26px; /* optically centre against back btn */
}

.ap-header-icon {
    width: 17px;
    height: 17px;
    opacity: 0.85;
}

/* AP TABS */

.ap-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.ap-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px 10px 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    cursor: default;
    transition: color 0.15s, background 0.15s;
    position: relative;
    user-select: none;
    border-bottom: 2px solid transparent;
}

.ap-tab-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.ap-tab-icon svg {
    width: 15px;
    height: 15px;
}

.ap-tab-active {
    color: white;
    border-bottom-color: rgba(255,255,255,0.7);
}

.ap-tab-active .ap-tab-icon {
    background: rgba(255,255,255,0.12);
}

.ap-tab-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ap-tab-disabled:hover {
    opacity: 0.6;
    color: rgba(255,255,255,0.65);
}

/* Coming soon tooltip on disabled tabs */
.ap-tab-disabled::after {
    content: attr(data-soon);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(20,26,45,0.97);
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 200;
}

.ap-tab-disabled:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* AP SUB HEADER */

.ap-sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    font-size: 12px;
}

.ap-sub-left {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.7);
}

.ap-check-icon {
    width: 13px;
    height: 13px;
    color: #7dff9b;
    flex-shrink: 0;
}

.ap-sub-label {
    font-size: 12px;
    font-weight: 600;
}

.ap-dots {
    font-size: 10px;
    opacity: 0.45;
    letter-spacing: 1px;
    margin-left: 2px;
}

.ap-sub-right {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.55);
    font-size: 11.5px;
    font-weight: 500;
}

.ap-engine-icon,
.ap-settings-icon {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ENGINE LINES CONTAINER */

.ap-engine-lines {
    padding: 6px 0 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.ap-best-move-container {
    display: block;
    padding: 6px 14px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 12.5px;
    color: rgba(255,255,255,0.72);
}

.ap-best-move-container::-webkit-scrollbar {
    height: 4px;
}

.ap-best-move-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
}

/* ENGINE LINE ROW */

.ap-engine-line-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.13s;
    border-radius: 0;
}

.ap-engine-line-row:hover {
    background: rgba(255,255,255,0.05);
}

.ap-line-score {
    flex-shrink: 0;
    min-width: 42px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 5px;
    padding: 2px 5px;
}

.ap-line-score-positive {
    color: #c8ffd4;
    background: rgba(125,255,155,0.12);
    border-color: rgba(125,255,155,0.20);
}

.ap-line-moves {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(255,255,255,0.72);
    font-size: 12.5px;
}

.engine-line-move {
    cursor: pointer;
    transition: background 0.12s;
    padding: 0 2px;
    border-radius: 3px;
    display: inline;
}

.engine-line-move:hover {
    background: rgba(255,255,255,0.14);
}

/* EVAL SCORE (hidden — data flows to eval bar only) */

.eval-score {
    display: none !important;
}

/* AP POSITION ROW */

.ap-position-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 5px 14px;
    flex-shrink: 0;
}

.ap-position-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
}

.ap-copy-icon {
    width: 14px;
    height: 14px;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: color 0.15s;
    flex-shrink: 0;
}

.ap-copy-icon:hover {
    color: rgba(255,255,255,0.7);
}

/* AP PLAYERS ROW */

.ap-players-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 14px 8px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ap-player-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-player-sep {
    color: rgba(255,255,255,0.35);
    font-weight: 400;
}

.ap-edit-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.ap-edit-btn svg {
    width: 14px;
    height: 14px;
}

.ap-edit-btn:hover {
    color: white;
    background: rgba(255,255,255,0.08);
}

/* ENGINE MOVES (legacy — keep for engine-line-move clicks) */

.best-move {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

/* MOVE TREE */

.move-tree{

    flex:1;

    overflow-y:auto;

    padding-right:8px;

    display:flex;

    flex-direction:column;

    gap:4px;
}

/* MOVE ROW */

.move-row{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    padding:10px 12px;

    border-radius:8px;

    transition:0.15s;
}

/* ACTIVE ROW */

.active-move{

    background:
    rgba(255,255,255,0.07);
}

/* MOVE NUMBER */

.move-number{

    width:28px;

    opacity:0.6;

    font-size:15px;
}

/* MOVE */

.move{

    font-size:18px;

    font-weight:600;

    padding:3px 8px;

    border-radius:6px;

    transition:0.15s;
}

/* CLICKABLE */

.clickable-move{

    cursor:pointer;
}

.clickable-move:hover{

    background:
    rgba(255,255,255,0.12);

    transform:scale(1.05);
}

/* CURRENT */

.current-selected-move{

    background:
    rgba(255,255,255,0.18);
}

/* VARIATIONS */

.variation-line{

    margin-left:28px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    padding:8px 12px;

    border-left:
    2px solid
    rgba(255,255,255,0.12);

    opacity:0.95;
}

/* VARIATION MOVE */

.variation-move{

    font-size:16px;

    font-weight:500;

    padding:2px 7px;

    border-radius:6px;

    transition:0.15s;
}

.variation-move:hover{

    background:
    rgba(255,255,255,0.10);

    transform:scale(1.05);

    cursor:pointer;
}

/* NAVIGATION */

.navigation-buttons{

    margin-top:auto;

    display:flex;

    gap:14px;

    padding-top:18px;

    flex-shrink:0;
}

/* NAV BUTTON */

.navigation-buttons button{

    flex:1;

    height:58px;

    border:none;

    border-radius:12px;

    background:
    rgba(255,255,255,0.08);

    color:white;

    font-size:24px;

    cursor:pointer;

    transition:0.15s;
}

.navigation-buttons button:hover{

    background:
    rgba(255,255,255,0.14);

    transform:scale(1.03);
}

/* UTILITY */

.utility-buttons{

    margin-top:14px;

    display:flex;

    gap:10px;

    flex-shrink:0;
}

/* UTILITY BUTTON */

.utility-buttons button{

    flex:1;

    height:46px;

    border:none;

    border-radius:10px;

    background:
    rgba(255,255,255,0.06);

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:0.15s;
}

.utility-buttons button:hover{

    background:
    rgba(255,255,255,0.12);

    transform:scale(1.04);
}

/* SCROLLBAR */

.move-tree::-webkit-scrollbar{

    width:8px;
}

.move-tree::-webkit-scrollbar-thumb{

    background:
    rgba(255,255,255,0.14);

    border-radius:10px;
}

/* RESPONSIVE */

@media(max-width:1600px){

    .board{

        width:620px;

        height:620px;
    }

    .player{

        width:620px;
    }

    .board-area{

        transform:
        translate(-50%,-50%)
        scale(0.9);
    }

    .sidebar{

        width:460px;

        height:620px;

        right:25px;
    }

    .analysis-panel{

        width:460px;

        height:620px;
    }

    .eval-space{

        height:620px;

        right:550px;
    }
}

/* EVAL CONTAINER */

/* EVAL CONTAINER */

.eval-container{

    position:absolute;

    top:50%;

    left:calc(50% - 550px);

    transform:
    translateY(-50%);

    width:55px;

    height:777px;

    background:
    rgba(0,0,0,0.45);

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 0 14px rgba(0,0,0,0.35);

    border:
    2px solid
    rgba(255,255,255,0.08);
}

/* EVAL FILL */

.eval-fill{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:50%;

    background:white;

    transition:
    height 0.35s ease;
}

/* EVAL TEXT */

.eval-text{

    position:absolute;

    bottom:120px;

    left:415px;

    color:black;

    font-size:16px;

    font-weight:800;

    z-index:5;

    pointer-events:none;

    transition:0.2s;

    text-shadow:
    0 0 6px rgba(0,0,0,0.18);
}
/* =====================
   LEFT NAVIGATION SIDEBAR
   ===================== */

.left-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 220px;
    height: 100vh;
    background: rgba(10, 14, 26, 0.88);
    backdrop-filter: blur(18px);
    border-right: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    padding: 0 0 24px 0;
}

/* LOGO */

.left-nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 26px 20px 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 16px;
}

/* NAV ANCHOR RESETS — logo and active item */
a.left-nav-logo,
a.left-nav-item {
    text-decoration: none;
    color: inherit;
    display: flex;
}

/* NAVIGABLE (non-active) nav item — clickable link.
   Sets the normal inactive sidebar text colour so the link doesn't fall back
   to the inherited (near-black) body colour. Same value the disabled items use.
   Specificity (0,1,1) matches `a.left-nav-item { color: inherit }` and wins on
   source order. */
a.left-nav-item-link {
    cursor: pointer;
    width: 100%;
    color: rgba(255, 255, 255, 0.55);
}

a.left-nav-item-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
    transform: translateX(3px);
}

.left-nav-logo-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.left-nav-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: white;
    letter-spacing: 0.5px;
    font-family: Arial, sans-serif;
}

/* NAV LIST */

.left-nav-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
    flex: 1;
}

/* NAV ITEM */

.left-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: rgba(255,255,255,0.55);
    font-size: 15px;
    font-weight: 500;
    font-family: Arial, sans-serif;
    cursor: default;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
    position: relative;
    user-select: none;
}

/* ACTIVE */

.left-nav-active {
    background: rgba(255,255,255,0.10);
    color: white;
    cursor: default;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
}

/* ACTIVE accent bar */

.left-nav-active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: rgba(255,255,255,0.7);
    border-radius: 0 3px 3px 0;
}

/* DISABLED */

.left-nav-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.left-nav-disabled:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.65);
    transform: translateX(3px);
    opacity: 0.65;
}

/* COMING SOON tooltip */

.left-nav-disabled::after {
    content: attr(data-soon);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: rgba(20,26,45,0.96);
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 7px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 200;
}

.left-nav-disabled:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ICON */

.left-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* ACTIVE — pure white text + icon (inactive items unchanged) */
/* Specificity (0,2,0) to override `a.left-nav-item { color: inherit }` (0,1,1).
   The icon uses stroke="currentColor", so pure-white text makes it white too. */

.left-nav-item.left-nav-active {
    color: #fff;
}

.left-nav-item.left-nav-active .left-nav-icon {
    opacity: 1;
}

/* =====================
   LAYOUT OFFSET FOR SIDEBAR
   ===================== */

.app-container {
    padding-left: 220px;
}
/* =====================
   AP MOVE TREE (Chess.com style two-column)
   ===================== */

.ap-move-tree {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ap-move-tree .move-row {
    display: grid;
    grid-template-columns: 28px 1fr 1fr;
    align-items: center;
    gap: 0;
    padding: 4px 14px;
    border-radius: 0;
    font-size: 13.5px;
    transition: background 0.12s;
}

.ap-move-tree .move-row:hover {
    background: rgba(255,255,255,0.04);
}

.ap-move-tree .move-number {
    width: auto;
    font-size: 12px;
    opacity: 0.45;
    font-weight: 500;
}

.ap-move-tree .move {
    font-size: 13.5px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 5px;
    transition: background 0.12s;
    color: rgba(255,255,255,0.88);
}

.ap-move-tree .clickable-move:hover {
    background: rgba(255,255,255,0.10);
    transform: none;
}

.ap-move-tree .current-selected-move {
    background: rgba(255,255,255,0.16);
    color: white;
}

/* variation lines inside AP move tree */
.ap-move-tree .variation-line {
    margin-left: 28px;
    padding: 3px 12px;
    gap: 8px;
    font-size: 12px;
    border-left: 2px solid rgba(255,255,255,0.10);
    opacity: 0.85;
}

.ap-move-tree::-webkit-scrollbar { width: 4px; }
.ap-move-tree::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
}

/* =====================
   AP BOTTOM NAVIGATION
   ===================== */

.ap-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 6px 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    background: rgba(0,0,0,0.15);
}

.ap-nav-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.ap-nav-btn svg {
    width: 20px;
    height: 20px;
}

.ap-nav-btn:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

.ap-nav-btn-accent {
    background: rgba(180,50,50,0.25);
    color: rgba(255,180,180,0.9);
}

.ap-nav-btn-accent:hover {
    background: rgba(180,50,50,0.38);
    color: white;
}

/* =====================
   AP ACTION BAR
   ===================== */

.ap-action-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 6px 6px 10px 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    background: rgba(0,0,0,0.20);
}

.ap-action-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    transition: background 0.15s, color 0.15s;
}

.ap-action-btn svg {
    width: 18px;
    height: 18px;
}

.ap-action-btn:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.9);
}

/* =====================
   SIDEBAR SIZE OVERRIDE
   ===================== */

/* Keep existing sidebar positioning; just ensure the ap fills it */
.sidebar .ap {
    width: 100%;
    height: 100%;
}


/* =====================
   AP HEADER — no back button padding fix
   ===================== */

.ap-header {
    justify-content: center;
}

/* =====================
   AP ACTION BAR — disabled / danger states
   ===================== */

.ap-action-btn-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    position: relative;
}

.ap-action-btn-disabled:hover {
    background: none;
    color: rgba(255,255,255,0.55);
}

/* Coming Soon tooltip on disabled action buttons */
.ap-action-btn-disabled::before {
    content: attr(data-soon);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(20,26,45,0.97);
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    border: 1px solid rgba(255,255,255,0.10);
    z-index: 300;
}

.ap-action-btn-disabled:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ap-action-btn-danger {
    color: rgba(255,120,120,0.75);
}

.ap-action-btn-danger:hover {
    background: rgba(180,40,40,0.18);
    color: rgba(255,140,140,1);
}

/* =====================
   AP COPY ICON — pointer cursor
   ===================== */

.ap-copy-icon {
    cursor: pointer;
    transition: color 0.15s;
    color: rgba(255,255,255,0.35);
}

.ap-copy-icon:hover {
    color: rgba(255,255,255,0.75);
}

/* =====================
   TOAST NOTIFICATION
   ===================== */

.ap-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(20,26,45,0.97);
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 20px rgba(0,0,0,0.45);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

.ap-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* =====================
   PIECE ANIMATIONS
   ===================== */

.board { position: relative; }

.anim-fly,
.anim-capture {
    pointer-events: none;
    user-select: none;
}

.drag-ghost {
    cursor: grabbing !important;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
}

.square:has(.piece) { cursor: grab; }
.square:has(.piece):active { cursor: grabbing; }

.piece {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* =====================
   PROMOTION PICKER POPUP
   ===================== */

.promotion-popup {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 500;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,255,255,0.12);
    background: rgba(15,20,35,0.97);
    backdrop-filter: blur(14px);
}

.promotion-piece {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    aspect-ratio: 1;
    width: 100%;
    transition: background 0.13s ease, transform 0.12s ease;
}

.promotion-piece:hover { background: rgba(255,255,255,0.14); transform: scale(1.06); }
.promotion-piece:first-child { border-radius: 10px 10px 0 0; }
.promotion-piece:last-child  { border-radius: 0 0 10px 10px; }
.promotion-piece + .promotion-piece { border-top: 1px solid rgba(255,255,255,0.07); }

/* =====================
   TAB PANELS (Analysis / Games)
   ===================== */

.ap-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ap-tabs .ap-tab:not(.ap-tab-disabled) {
    cursor: pointer;
}

/* GAMES TAB — saved analyses */

.ap-games-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.ap-games-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.9);
}

.ap-games-count {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.08);
    padding: 1px 8px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
}

.ap-games-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ap-games-list::-webkit-scrollbar { width: 4px; }
.ap-games-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
}

.ap-game-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.ap-game-card:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
}

.ap-game-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.ap-game-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-game-date {
    font-size: 11.5px;
    color: rgba(255,255,255,0.45);
}

.ap-game-delete {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.ap-game-delete svg {
    width: 16px;
    height: 16px;
}

.ap-game-delete:hover {
    background: rgba(180,40,40,0.18);
    color: rgba(255,140,140,1);
}

.ap-games-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    line-height: 1.6;
}


/* =====================
   REVIEW — IMPORT PGN MODAL
   ===================== */

.pgn-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4,6,12,0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 24px;
}

.pgn-modal {
    width: 100%;
    max-width: 460px;
    background: rgba(15,20,35,0.96);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(255,255,255,0.06);
    padding: 20px 22px 22px 22px;
    color: white;
}

.pgn-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.pgn-modal-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.pgn-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    transition: background 0.15s, color 0.15s;
}

.pgn-modal-close svg { width: 18px; height: 18px; }

.pgn-modal-close:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

.pgn-modal-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 14px;
    line-height: 1.5;
}

.pgn-modal-textarea {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    padding: 12px 14px;
    font-size: 13.5px;
    font-family: "Courier New", monospace;
    line-height: 1.6;
    color: #fff;
    background: rgba(8,11,18,0.85);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.16s, background 0.16s;
}

.pgn-modal-textarea::placeholder {
    color: rgba(255,255,255,0.35);
}

.pgn-modal-textarea:focus {
    border-color: rgba(255,255,255,0.3);
    background: rgba(10,14,22,0.92);
}

.pgn-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.pgn-modal-btn {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.pgn-modal-btn-ghost {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);
}

.pgn-modal-btn-ghost:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.pgn-modal-btn-primary {
    background: rgba(255,255,255,0.92);
    color: #0b0f1a;
}

.pgn-modal-btn-primary:hover {
    background: #fff;
}

/* =====================
   TRAINING — engine UI hidden (no Stockfish yet)
   ===================== */
/* Training reuses the Analysis board but has no engine yet, so the engine-only
   UI is hidden. The elements stay in the DOM so the reused board script keeps
   working unchanged. */
.eval-container { display: none !important; }
.ap-sub-right { display: none !important; }
.ap-engine-lines { display: none !important; }

/* =====================
   TRAINING — bot selector, config, game panel, board flip
   ===================== */

.tr-select[hidden],
.tr-game[hidden],
.tr-bot-config[hidden] { display: none !important; }

.tr-select {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 2px 0 2px;
}

/* One bot = card (header) + config (expands beneath it) */
.tr-bot { display: flex; flex-direction: column; }

.tr-bot-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(13, 16, 22, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    user-select: none;
    text-align: left;
    font-family: Arial, sans-serif;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
                border-radius 0.2s ease;
}
.tr-bot-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}
.tr-bot-card:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.09s; }
/* Selected/expanded: green accent (echoes the reference) and squares the bottom
   edge so the card visually joins the config panel below it. */
.tr-bot-card.is-active {
    transform: none;
    background: rgba(20, 25, 33, 0.92);
    border-color: rgba(74, 222, 128, 0.55);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.30), 0 10px 28px rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tr-bot-avatar {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center top;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.tr-bot-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tr-bot-name { font-size: 15px; font-weight: 700; color: #f2f5fb; }
.tr-bot-rating { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.tr-bot-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.25s ease, color 0.2s ease;
}
.tr-bot-card.is-active .tr-bot-chevron { transform: rotate(180deg); color: rgba(74, 222, 128, 0.9); }

/* Config panel — slides/expands open directly under the selected card */
.tr-bot-config {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    overflow: hidden;
    background: rgba(11, 14, 20, 0.92);
    border: 1px solid rgba(74, 222, 128, 0.32);
    border-top: none;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    transform-origin: top;
    animation: trExpand 0.30s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes trExpand {
    from { opacity: 0; max-height: 0; transform: translateY(-8px); }
    to   { opacity: 1; max-height: 280px; transform: translateY(0); }
}

.tr-color-options { display: flex; flex-direction: column; gap: 8px; }
.tr-color-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tr-color-option:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); }

/* Radio markers (○ -> filled green when chosen) */
.tr-radio {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    position: relative;
    transition: border-color 0.15s ease;
}
.tr-color-option.is-selected {
    border-color: rgba(74, 222, 128, 0.55);
    background: rgba(74, 222, 128, 0.10);
    color: #fff;
}
.tr-color-option.is-selected .tr-radio { border-color: rgba(74, 222, 128, 0.95); }
.tr-color-option.is-selected .tr-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.95);
}

.tr-play-btn {
    margin-top: 2px;
    padding: 12px;
    border-radius: 11px;
    background: rgba(244, 247, 253, 0.95);
    color: #0c1018;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.tr-play-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.tr-play-btn:active { transform: translateY(0); }

/* Game view (move list grows, toolbar pinned) */
.tr-game { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Board flip — playing as Black */
.board-area.flipped { flex-direction: column-reverse; }
.board-area.flipped .board { transform: rotate(180deg); }
.board-area.flipped .board .piece { transform: rotate(180deg); }

/* Stockfish avatar inside a player header panel */
.player-pfp.tr-bot-pfp {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* =====================
   TRAINING — game-over modal + winner highlight
   ===================== */

.tr-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 9, 16, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: trOverlayFade 0.25s ease both;
}
.tr-modal-overlay[hidden] { display: none; }
@keyframes trOverlayFade { from { opacity: 0; } to { opacity: 1; } }

.tr-modal {
    width: min(92vw, 420px);
    padding: 28px 26px 24px;
    text-align: center;
    background: rgba(15, 19, 27, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    animation: trModalPop 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes trModalPop {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.tr-modal-title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #f2f5fb;
}

.tr-modal-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 22px 0 14px;
}
.tr-modal-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.tr-modal-pfp {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background-size: cover;
    background-position: center;
}
.tr-modal-pname {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(244, 247, 253, 0.9);
    text-align: center;
    word-break: break-word;
}
.tr-modal-vs {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.tr-modal-reason {
    font-size: 14px;
    color: rgba(233, 238, 246, 0.7);
    margin-bottom: 22px;
}

.tr-modal-actions { display: flex; gap: 10px; }
.tr-modal-btn {
    flex: 1;
    padding: 12px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tr-modal-primary {
    background: rgba(244, 247, 253, 0.95);
    color: #0c1018;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.tr-modal-primary:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.tr-modal-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(244, 247, 253, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.tr-modal-secondary:hover { background: rgba(255, 255, 255, 0.09); }

/* Winning player panel — sharp square green border that fades in smoothly.
   Same shadow count in both keyframes so the fade interpolates reliably. */
.player.tr-winner {
    border-radius: 0;
    animation: trWinnerGlow 0.5s ease forwards;
}
@keyframes trWinnerGlow {
    from { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0), 0 0 16px 0 rgba(74, 222, 128, 0); }
    to   { box-shadow: 0 0 0 2px rgba(74, 222, 128, 1), 0 0 16px 0 rgba(74, 222, 128, 0.45); }
}

/* Training toolbar — only New + Save remain, so split the bar 50/50 */
.ap-action-bar.tr-action-bar {
    grid-template-columns: repeat(3, 1fr);
}