/*
 File:      style.css
 Author:    Maxximillion Thomas
 Purpose:   Style the chess page elements
 Date:      December 12, 2025
 */

/* Protect element sizing against padding on re-size */
* {
    box-sizing: border-box;
}

/* =============================
// ==  Body  ===================
// ============================= */
body {
    background-color:#b5f0da8e;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
}

/* =============================
// ==  Title  ===================
// ============================= */

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 35px;
    margin-bottom: 20px;
    /* Unselectable */
    user-select: none;
}

.logo {
    width: 170px;
    height: auto;
    filter: saturate(1.5) brightness(1.5); 
}

.title, .subtitle {
    /* Pixelated font */
    font-family: 'Press Start 2P', cursive;
    /* Spacing */
    letter-spacing: 2px;
    /* Color scheme */
    color: #63b59b; 
}

.title {
    font-size: 30px;
    margin-bottom: 5px;
    /* 3D block shadow (cracked stone effect) */
    text-shadow: 
        3px 3px 0px #383838, /* Dark gray shadow side */
        -1px -1px 0 #5f5f5f, /* Slight highlight top-left */
        2px 2px 0 #000;      /* Thin black outline */
}

.subtitle {
    font-size: 16px;
    margin-bottom: 30px;
    text-align: center;
    /* 3D block shadow (cracked stone effect) */
    text-shadow: 
        1px 1px 0px #383838, /* Dark gray shadow side */
        -.8px -.8px 0 #5f5f5f, /* Slight highlight top-left */
        1.5px 1.5px 0 #000;      /* Thin black outline */
    
}

/* =============================
// ==  Menu  ===================
// ============================= */

.menu-container {
    width: 520px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.menu-row {
    margin-bottom: 15px;
}

.menu-item-interactive {
    cursor: pointer;
}

/* =============================
// ==  Difficulty  =============
// ============================= */

/* Main Container */
.difficulty-container {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    /* Prevents it from getting too wide */
    max-width: 520px; 
}

/* Category Selector (Arrows + Text) */
.category-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Keeps the text area stable so layout doesn't jump */
    min-width: 160px; 
    justify-content: space-between;
}

.category-display {
    font-weight: bold;
    width: 90px;
    text-align: center;
}

/* Menu buttons */
.menu-button {
    border: 1px solid gray;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    padding: 2px 8px;
}

.menu-button:hover {
    background: #ddd;
}

/* Slider Section */
.elo-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Allows slider to fill remaining space */
    flex-grow: 1; 
}

#eloSlider {
    /* Makes the input bar stretch */
    flex-grow: 1; 
    cursor: pointer;
}

#eloDisplay {
    /* Prevents numbers from jittering */
    min-width: 90px;
    text-align: center;
}

/* =============================
// ==  Master Container  =======
// ============================= */

/* Holds the game container and analysis container for side-by-side game review */
.master-container {
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 20px; 
    width: 100%;
    margin-bottom: 40px;
}

/* =============================
// ==  Game Container ==========
// ============================= */

.game-container {
    width: 440px;
    height: 475px;
    text-align: center;
    background-color: #e9e9e9;
    border-color: gray;
    border-style: solid;
}

/* =============================
// ==  Status & options  =======
// ============================= */

/* Row for holding Status and Options */
.header-row {
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-left: 10px; 
    padding-right: 10px; 
    margin-bottom: 10px;
}

.status {
    flex-grow: 1;
    font-weight: bold;
}

/* =============================
// ==  Board  ==================
// ============================= */

/* Container for holding the evaluation bar and the chess board */
.eval-board-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

/* The background of the bar (Blacks advantage) */
.eval-container {
    width: 20px;
    height: auto; 
    margin-left: 15px;
    margin-right: -10px;
    background-color: #404040; 
    border: 1px solid #777;
    position: relative; 
    border-radius: 2px;
    overflow: hidden;
}

/* The white fill (White's advantage) */
.eval-bar-fill {
    width: 100%;
    /* Default to neutral */
    height: 50%; 
    background-color: #ffffff;
    position: absolute;
    /* Grows upwards from the bottom */
    bottom: 0; 
    /* Smooth movement */
    transition: height 0.5s ease-in-out;
}

/* Score displayed in the evaluation bar */
.eval-score {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    /* Sits above the white/grey bars */
    z-index: 2; 
    pointer-events: none; 
}

/* White is winning */
.eval-score-white {
    bottom: 5px;
    color: #333;
}

/* Black is winning */
.eval-score-black {
    top: 5px;
    color: #fff;
}

.board {
    margin-left: auto;
    margin-right: auto;
    width: 380px;
}


/* =============================
// ==  Highlights  =============
// ============================= */

/* Selected square / last played move - Yellow */
.highlight-source, .highlight-played {
    box-shadow: inset 0 0 3px 3px rgba(255, 255, 0, 0.7);
}

/* Valid squares - Blue */
.highlight-move {
    box-shadow: inset 0 0 0 1000px rgba(0, 179, 255, 0.3);
}

/* King is in check - Red */
.in-check {
    box-shadow: inset 0 0 3px 3px rgba(255, 0, 0, 0.7);
}

/* Hint (best move) - Green */
.highlight-hint {
    box-shadow: inset 0 0 3px 3px rgba(0, 255, 0, 0.7);
}

/* =============================
// ==  Controls  ===============
// ============================= */

/* Row for holding navigation buttons */
.control-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 10px;
    padding-left: 5px; 
    padding-right: 5px; 
    margin-bottom: 10px;
    /* Items drop to the next row if the screen size is too narrow */
    flex-wrap: wrap;
}

.control-btn {
    background: none;
    font-size: 20px; 
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    border: 1px solid #888;  
    box-shadow: 0 2px 0 #888;   
}

.control-btn:hover {
    color: #555;
}

.control-btn:active {
    box-shadow: 0 1px 0 #888; 
    top: 2px;                 
}

/* =============================
// ==  Navigation controls  ====
// ============================= */

.navigation-controls {
    display: inline-flex;                 
    gap: 6px; 
}

/* =============================
// ==  Move history + analysis =
// ============================= */

/* The parent wrapper */
.move-history-analysis-container {
    display: none;
    /* Stack summary on top of table */
    flex-direction: column;
    width: 250px;
    height: 475px;
    background-color: #e9e9e9;
    border-color: gray;
    border-style: solid;
}

/* Shows EITHER loading bar or results */
.analysis-pane {
    padding: 10px;
    border-bottom: 2px solid gray;
    min-height: 250px; 
    display: block;
}

/* =============================
// ==  Analysis loading bar ====
// ============================= */

/* Loading bar container */
#analysisLoader {
    height: 160px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    gap: 10px;
}

/* Loading progress bar */
.analysis-progress-container {
    width: 200px; 
    height: 16px;
    background-color: #ccc;
    border: 2px solid #000;
    box-shadow: 
        inset 2px 2px 0px #3f3f3f,
        inset -2px -2px 0px #a0a0a0;
}

/* Fill for the loading bar */
.analysis-progress-fill {
    height: 100%;
    width: 0%;
    background-color: #63b59b; 
    box-shadow: 
        inset 2px 2px 0px #b5f0da8e, 
        inset -2px -2px 0px #407d6a; 
    /* Smooths the jumps between moves */
    transition: width 0.1s linear; 
}

/* Analysis div */
.analysis-loading-text {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
}

/* =============================
// ==  Analysis results ========
// ============================= */

/* Results container */
#analysisResult {
    display: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Stick the header to the TOP */
    justify-content: flex-start; 
    gap: 10px;
}

.analysis-header,
.analysis-footer {
    font-weight: bold;
}

.analysis-footer {
    /* Positioned to the bottom */
    margin-top: auto;
}

/* The container for the Best/Good/Blunder badges */
#analysisSummary {
    display: flex;
    flex-direction: column;
    gap: 8px; 
    width: 100%;
    align-items: center;
    justify-content: center; 
}

/* Large judgement badges for move type count */
.summary-badge {
    padding: 2px 6px;
    border-radius: 4px;
    color: white;
    font-size: 12px;
    margin: 0 3px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 
        0 0 0 1.5px #717171,
        1px 1px 1px 1px #000000 !important; 
}

.summary-badge:active {
    transform: translateY(1px);
}

/* Visual state when a filter is turned off */
.filter-disabled {
    opacity: 50%;  
}

/* Dim the moves in the table */
.move-dimmed {
    color: #bdbcbc !important; 
    transition: color 0.2s;
}

/* Fade out the colored dot next to the move */
.move-dimmed .move-dot {
    opacity: 0.3; 
}

/* =============================
// ==  Judgement labels / dots =
// ============================= */

/* Analysis dots in move history */
.move-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

/* Labels for judging moves in Game Review mode */
.judgement-label {
    font-weight: bold;
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid rgb(178, 178, 178);
    border-radius: 3px;
    color: white;
    margin-left: 8px;
    display: inline-block;
    text-transform: uppercase;
    box-shadow: 0 0 0 1.5px #717171; 
    vertical-align: middle;
}

/* 1. Best (!!): Bright Green */
.dot-best, .judgement-best { 
    background-color: #26c281; 
    color: #fff; /* Ensure text is readable on badges */
}

/* 2. Excellent (!): Light Blue / Cyan */
.dot-excellent, .judgement-excellent { 
    background-color: #96c8da; 
    color: #fff;
}

/* 3. Good (+): Light Green */
.dot-good, .judgement-good { 
    background-color: #95d852; 
    color: #fff;
}

/* 4. Inaccuracy (?!): Yellow */
.dot-inaccuracy, .judgement-inaccuracy { 
    background-color: #f0c238; 
    color: #fff;
}

/* 5. Mistake (?): Orange */
.dot-mistake, .judgement-mistake { 
    background-color: #e6912c; 
    color: #fff;
}

/* 6. Blunder (??): Red */
.dot-blunder, .judgement-blunder { 
    background-color: #b33430; 
    color: #fff;
}

/* =============================
// ==  Move history  ===========
// ============================= */

/* Container for the static header (   White   Black   ) */
.move-history-header {
    background-color: #e0e0e0;
    border-bottom: 2px solid #999;
    padding-right: 12px; 
}

/* Move history element - updates with the subsequent styles through js */
.pgn { 
    overflow-y: auto;
    /* Take up all space left over by the summary */
    flex-grow: 1;    
    /* Force the scrollbar to appear inside this element */
    min-height: 0;   
    border-width: 1px 0 0 0; 
}

/* Table structure */
.move-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Table headers */
.move-table th {
    background-color: #e0e0e0;
    padding: 10px;
    border-bottom: 1px solid #999;
    font-size: 14px;
}

/* Table cells */
.move-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

/* Content centering */
.move-history-header,
.move-table th,
.move-table td {
    text-align: center;
    vertical-align: middle; 
}

/* Zebra striping for readability */
.move-table tr:nth-child(even) {
    background-color: #fff;
}
.move-table tr:nth-child(odd) {
    background-color: #f2f2f2;
}

/* Enforce Column Widths on the Body to match the Header */
.move-table th:nth-child(1),
.move-table td:nth-child(1) { width: 20%; } /* Move Number */
.move-table th:nth-child(2),
.move-table td:nth-child(2) { width: 40%; } /* White */
.move-table th:nth-child(3),
.move-table td:nth-child(3) { width: 40%; } /* Black */

/* Clickable Move Links */
.move-link {
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
}

.move-link:hover {
    background-color: #d1d1d1;
    font-weight: bold;
}

/* Emphasize the notation for the current move being viewed */
.current-move {
    box-shadow: 0 0 0 1.5px #717171; 
    background-color: #fff !important; 
    font-weight: bold;
}

/* =============================
// ==  Modals  =================
// ============================= */

/* The Modal Background */
.modal {
    /* Hidden by default */
    display: none; 
    position: fixed;
    /* Sit on top of other elements */
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Black with opacity */
    background-color: rgba(0,0,0,0.6); 
    align-items: center;
    justify-content: center; 
}

/* The Modal Box */
.modal-content {
    /* Fixed width with a cap for mobile devices */
    width: 90%;
    max-width: 300px;
    box-sizing: border-box;

    /* Positioned center-screen */
    margin: 0 auto;
    position: relative;

    /* Cosmetics */
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* =============================
// ==  Options modal  ==========
// ============================= */

/* Toggle on/off options */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* =============================
// ==  Confirm modal  ==========
// ============================= */

/* Container to separate the buttons */
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Yes Button (Confirm) */
.yes-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.yes-btn:hover {
    background-color: #45a049;
}

/* No Button (Cancel) */
.no-btn {
    background-color: #f44336; 
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.no-btn:hover {
    background-color: #d32f2f;
}

/* =============================
// ==  Game over modal  ========
// ============================= */

/* Button Styling */
.rematch-btn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

.rematch-btn:hover {
    background-color: #45a049;
}

.close-btn {
    position: absolute !important;
    top: 10px;
    right: 20px;
    color: #ff4444; 
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1; 
}

.close-btn:hover {
    color: #cc0000; 
}

/* Game Review Button */
.game-review-btn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #008CBA; 
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px; 
}

.game-review-btn:hover {
    background-color: #007B9A;
}

/* =============================
// ==  Animation  =============
// ============================= */

/* Wiggle animation for piece interaction */
@keyframes wiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

/* 1. Hover wiggle */
.board-white .square-55d63 img[data-piece^='w']:hover,
.board-black .square-55d63 img[data-piece^='b']:hover {
    animation: wiggle .3s ease 2;
    cursor: grab; 
}

/* 2. Drop wiggle */
.drop-wiggle {
    animation: wiggle .3s ease 1;
}

/* 3. Drag enlargement */
body > img[class^="piece-"] {
    width: 56px !important;
    height: 56px !important;
    margin-left: -4.5px;
    margin-top: -4.5px;
    z-index: 9999;
}

/* Stop animation the moment a piece is clicked */
.square-55d63.highlight-source img {
    animation: none !important; 
    transform: none !important; 
}

/* Prevent the browser from handling touch actions on the board */
#myBoard {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none !important;
}

/* Allow pieces to hang off the edge of the board */
#myBoard, 
div[class^="board-"] { 
    overflow: visible !important;
}

/* Base pieces */
#myBoard img[class^="piece-"] {
    /* Visual styling */
    width: 90% !important;
    height: 90% !important;
    margin: 4px auto;

    /* Mobile: long-press handling */
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    outline: none !important;
    pointer-events: auto;
}

/* Prevent inspection of ghost pieces - only present while dragging */
img[class^="piece-"] {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    outline: none !important;
}

/* Prevent blue inspection cursor */
#myBoard, 
.game-container,
.master-container {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}


/* =============================
// ==  Tooltips  ===============
// ============================= */

[data-tooltip] {
    /* Tooltips will be positioned relative to their buttons*/
    position: relative; 
}

[data-tooltip]::after {
    /* Retrieve the tooltip text from the respective HTML element */
    content: attr(data-tooltip); 
    
    /* Always appear above other elements */
    z-index: 9999;
    position: absolute;
    /* Center it vertically */       
    top: 50%;             
    transform: translateY(-50%);
    /* Push it to the right */       
    left: 100%;             
    margin-left: 10px;
    
    background-color: #333; 
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    /* No text wrap */
    white-space: nowrap;   
    
     /* Invisible until hovering */
    opacity: 0;      
    /* Don't block mouse clicks */     
    pointer-events: none;  
    /* Fade in effect */
    transition: opacity 0.2s; 
}

/* Reveal on Hover */
[data-tooltip]:hover::after {
    opacity: 1;           
}

/* Override for bottom-positioned tooltip */
[data-tooltip].tooltip-bottom::after {
    /* 1. Reset specific "Right" side positioning */
    /* Move to horizontal center */
    left: 50%;    
    /* Move to the bottom edge */         
    top: 100%;             
    margin-left: 0;        
    margin-top: 10px;      

    /* 2. Change the transform to center it Horizontally instead of Vertically */
    transform: translateX(-50%);
}
/* =============================
// ==  Mobile / Tablet View  ===
// ============================= */
@media screen and (max-width: 768px) {

    /* --- General Layout --- */
    .master-container {
        flex-direction: column; 
        gap: 10px;
    }

    .menu-container, 
    .game-container, 
    .move-history-analysis-container,
    .difficulty-container {
        width: 100% !important;
        max-width: 100%;        
        height: auto;           
    }

    .menu-container {
        margin-top: -10px !important;
    }

    .difficulty-container {
        margin-bottom: 10px !important;
    }

    #difficultyText,
    .category-selector {
        margin-bottom: -20px !important;
    }

    /* --- Menu --- */
    .menu-container,
    .difficulty-container,
    .elo-selector {     
        justify-content: center !important;
        text-align: center;
        align-items: center;
    }


    /* --- Game board --- */
    .board {
        width: 85vw !important; 
        max-width: 380px; 
        margin: 0 auto; 
    }

    .eval-board-container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: stretch;
        overflow: hidden; 
    }

    .eval-container {
        margin-right: 5px; 
        margin-left: 5px;
    }


    /* --- Text sizing --- */
    .title-container { margin: 10px 0; }
    .logo { width: 100px; }
    .title { font-size: 20px; }
    .control-btn { padding: 5px; }

    /* --- Difficulty selection --- */
    .difficulty-container {
        flex-wrap: wrap;    
    }
    .elo-selector {
        width: 100%;           
        margin-top: 10px;      
    }

    /* --- Game controls --- */
    .game-container .control-row {
        flex-direction: row !important; 
        flex-wrap: wrap !important;     
        gap: 10px;
        justify-content: center;
    }

    /* --- Modals --- */
    .modal-content {
        /* Prevent 'leaking' positioning */
        position: relative !important; 
        width: 90% !important;
        /* Cap the width */
        max-width: 320px !important;   
        /* Center the content */
        margin: auto !important;       
        left: auto !important;
        top: auto !important;
        transform: none !important;
        padding: 20px 15px !important;
    }

    /* Force stacking */
    .modal-content .control-row {
        flex-direction: column !important;
        width: 100%;
        gap: 10px;
    }

    /* Force stacking */
    .modal-content button {
        display: block;
        width: 100%;           /* Full width buttons */
        margin: 10px 0 !important; /* Vertical spacing */
        margin-left: 0 !important; /* Fix indentation */
    }

    /* Space between stacked items */
    .rematch-btn, .game-review-btn {
        margin-top: 5px !important;
    }

    /* Prevents invisible text from pushing the modal off-screen */
    [data-tooltip]::after {
        display: none !important;
    }

    /* Ensure the modal scrolls if the stacked buttons get too tall */
    .modal-content {
        max-height: 85vh; 
        overflow-y: auto; 
    }
}