/* Cheese — Analysis 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(2, 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 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;
}