/* ==========================================
   1. THEME VARIABLES & CORE APP LOCK
   ========================================== */
:root {
    --light-square: #f0d9b5;
    --dark-square: #b58863;
    --highlight-color: rgba(255, 170, 0, 0.45);
}

html, body {
    height: 100dvh; 
    width: 100vw;
    overflow: hidden; /* THE MAGIC BULLET: Forbids the page from scrolling */
    margin: 0;
    padding: 0;
    background-color: #2c3e50; 
    color: #ecf0f1; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main-container {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    /* Adds safe padding so it doesn't hit the iPhone Notch */
    padding-top: env(safe-area-inset-top, 10px);
    overflow-y: auto;
}

h1 { margin: 5px 0 15px 0; text-align: center; font-size: 24px; }

/* ==========================================
   2. DESKTOP & LAPTOP LAYOUT
   ========================================== */
.game-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.left-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    gap: 10px;
    height: 100%;
    width: min(95vw, 70vh); /* Safari Fix: Strict width boundary */
}

/* Swaps Top and Bottom player info when playing as Black */
.left-column.flipped-board {
    flex-direction: column-reverse;
}

/* ==========================================
   3. THE AUTO-SCALING CHESSBOARD
   ========================================== */
#chessboard {
    width: min(95vw, 70vh);
    height: min(95vw, 70vh);
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    border: 4px solid #1a252f;
    border-radius: 4px;
    background-color: var(--light-square);
    box-sizing: border-box;
}

#board-area { position: relative; }

.square {
    width: 100%; 
    height: 100%;
    
    display: flex; justify-content: center; position: relative;
    align-items: center; user-select: none; transition: background-color 0.2s; 
}

/* Square Colors & Highlights */
.light { background-color: var(--light-square); }
.dark { background-color: var(--dark-square); }
.last-move-highlight { background-color: var(--highlight-color) !important; }
.drag-over { background-color: #f1c40f !important; box-shadow: inset 0 0 15px rgba(0,0,0,0.5); }
.selected { background-color: #7fa650 !important; } 
.invalid-move { background-color: rgba(255, 0, 0, 0.5) !important; }

.check-square {
    background-color: rgba(255, 0, 0, 0.8) !important;
    animation: checkPulse 1.5s infinite;
}

@keyframes checkPulse {
    0% { background-color: rgba(255, 0, 0, 0.8); }
    50% { background-color: rgba(255, 0, 0, 0.3); }
    100% { background-color: rgba(255, 0, 0, 0.8); }
}

.valid-move-hint {
    position: absolute; width: 25px; height: 25px;
    background-color: rgba(0, 0, 0, 0.2); border-radius: 50%; pointer-events: none;
}

/* Smart Coordinates */
.coord-rank { position: absolute; top: 3px; left: 4px; font-size: 13px; font-weight: bold; pointer-events: none; }
.coord-file { position: absolute; bottom: 1px; right: 4px; font-size: 13px; font-weight: bold; pointer-events: none; }
.dark .coord-rank, .dark .coord-file { color: var(--light-square); }
.light .coord-rank, .light .coord-file { color: var(--dark-square); }

/* ==========================================
   4. PIECES (SVG Images)
   ========================================== */
/* .animate-drop {
    animation: pieceDrop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
} */
 /* ==========================================
   PIECES (Hardware Accelerated & Mobile Optimized)
   ========================================== */
.piece-symbol {
    width: 85%; 
    height: 85%;
    object-fit: contain;
    cursor: grab; 
    
    /* 1. Kill all mobile text-selection and native drag ghosts */
    -webkit-touch-callout: none; 
    -webkit-user-select: none;   
    user-select: none;           
    touch-action: none; 
    
    /* 2. Kill the sticky mobile "tap flash" focus bug */
    -webkit-tap-highlight-color: transparent; 
    outline: none;

    /* 3. THE ROOK FIX: Force the GPU to render the pieces so they never flicker */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;

    transition: transform 0.1s ease-in-out, filter 0.1s ease-in-out; 
}

/* THE HOVER FIX: Absolutely restricts pop-ups to Desktop Mouse users ONLY */
@media (hover: hover) and (pointer: fine) {
    .piece-symbol:hover {
        transform: scale(1.15) translateY(-5px) translateZ(0);
        filter: drop-shadow(0px 15px 15px rgba(0,0,0,0.5));
        z-index: 50; 
        opacity: 1; 
    }
}

/* The Dragging effect (applies to both desktop and mobile, but ONLY while moving) */
.piece-symbol.dragging { 
    transform: scale(1.15) translateY(-5px) translateZ(0);
    filter: drop-shadow(0px 15px 15px rgba(0,0,0,0.5));
    z-index: 50;
    opacity: 0.5; 
}

.piece-symbol:active { 
    cursor: grabbing; 
}

.captured-piece {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
/* ==========================================
   5. PLAYER INFO (Names, Clocks, Captures)
   ========================================== */
.player-info {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; 
    gap: 15px; width: 100%; padding: 5px 0; box-sizing: border-box;
}

.player-name { font-size: 18px; font-weight: bold; margin: 0; }

.clock {
    font-size: 20px; font-weight: bold; font-family: monospace;
    background: #1a252f; padding: 4px 12px; border-radius: 5px; color: #ecf0f1; margin: 0;
}

.captured-area {
    display: flex; align-items: center; flex-wrap: nowrap; margin-left: auto; gap: 2px; 
    font-size: 24px; background-color: rgba(0, 0, 0, 0.2); padding: 2px 8px; 
    border-radius: 5px; min-height: 28px;
}

.captured-white { color: #ffffff; text-shadow: 0 0 1px black, 0 0 1px black; }
.captured-black { color: #000000; }
.advantage-score { font-size: 14px; font-weight: bold; margin-left: 8px; color: #7fa650; font-family: monospace; }

.time-low { animation: safePulse 1s infinite; color: #e74c3c !important; font-weight: bold; }

@keyframes safePulse {
    0% { color: inherit; text-shadow: none; border-color: #34495e; }
    50% { color: #e74c3c; text-shadow: 0 0 8px #e74c3c; border-color: #e74c3c; }
    100% { color: inherit; text-shadow: none; border-color: #34495e; }
}

/* ==========================================
   6. THE SIDEBAR & MATCH HISTORY
   ========================================== */
#sidebar {
    width: 320px;
    height: min(100%, 75vh);
    background: #34495e;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

#sidebar h3 { margin-top: 0; text-align: center; border-bottom: 2px solid #2c3e50; padding-bottom: 10px; }

#move-log {
    flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column;
    gap: 8px; font-family: monospace; font-size: 16px;
}

.log-entry { background-color: #2c3e50; padding: 8px; border-radius: 4px; border-left: 4px solid #7fa650; }

button { 
    padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #2c3e50; 
    color: white; border: 2px solid #1a252f; border-radius: 5px; transition: background-color 0.2s; 
}
button:hover { background-color: #4e6d8c; }

#match-controls { display: flex; justify-content: center; gap: 15px; margin-top: 15px; }
#btn-abort, #btn-resign { padding: 8px 16px; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; border: 2px solid transparent;}
#btn-abort { background-color: #f39c12; color: white; }
#btn-resign { background-color: #c0392b; color: white; }
#btn-abort:hover { background-color: #e67e22; border-color: white;}
#btn-resign:hover { background-color: #e74c3c; border-color: white;}

.history-controls {
    display: flex; justify-content: center; gap: 5px; margin-top: 10px;
    border-top: 2px solid #2c3e50; padding-top: 10px;
}

.history-controls button { padding: 8px 15px; font-size: 14px; font-weight: bold; }
.history-controls button:hover { background-color: #f1c40f; color: #2c3e50; }

.review-mode { border-color: #e67e22 !important; box-shadow: 0px 15px 30px rgba(230, 126, 34, 0.5) !important; }
.review-mode .square, .review-mode .piece-symbol { cursor: not-allowed !important; }

/* Premium Theme Swatches */
.sidebar-settings {
    margin-top: 15px; padding-top: 15px; border-top: 2px solid #2c3e50;
    display: flex; justify-content: space-between; align-items: center;
}

.theme-swatches { display: flex; gap: 10px; }
.swatch {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); padding: 0;
}
.swatch:hover { transform: scale(1.15); }
.swatch.active { border-color: #f1c40f; transform: scale(1.1); box-shadow: 0 0 12px rgba(241, 196, 15, 0.6); }

.swatch.wood { background: linear-gradient(135deg, #f0d9b5 50%, #b58863 50%); }
.swatch.ocean { background: linear-gradient(135deg, #dee3e6 50%, #8ca2ad 50%); }
.swatch.midnight { background: linear-gradient(135deg, #cdc9d8 50%, #695b8e 50%); }

/* ==========================================
   7. MOBILE VIEW (The Stack)
   ========================================== */
@media (max-width: 800px) {
    .game-layout { 
        flex-direction: column; 
        justify-content: flex-start; 
        gap: 15px; 
        
        /* THE FIX 1: Stop forcing the layout to squeeze into the screen */
        flex: none; 
        height: auto;
    }
    
    .left-column { width: min(95vw, 55vh); }

    #chessboard {
        width: min(95vw, 55vh);
        height: min(95vw, 55vh);
        position: relative;
    }
    
    #sidebar { 
        width: min(95vw, 55vh); 
        
        /* THE FIX 2: Let the sidebar take up natural space and push the status text down */
        flex: none; 
        height: auto; 
        padding: 15px; 
        display: flex;
        flex-direction: column;
    }

    #move-log {
        /* THE FIX 3: Give the log a rigid height on mobile so it scrolls cleanly inside its own box */
        min-height: 120px;
        max-height: 150px;
    }
    
    #sidebar h3 { margin-bottom: 5px; font-size: 16px; padding-bottom: 5px;}
    .sidebar-settings { margin-top: 10px; padding-top: 10px; }
}
/* ==========================================
   8. OVERLAYS, MODALS & LOADING
   ========================================== */
.hidden { opacity: 0; pointer-events: none; display: none !important; }

/* ==========================================
   OVERLAY & POPUP FIXES
   ========================================== */
#overlay, #promotion-modal {
    position: fixed; top: 0; left: 0; width: 100vw; 
    height: 100dvh; /* THE FIX: dvh instead of vh for mobile URL bars */
    background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    z-index: 1000; transition: opacity 0.3s;
    
    /* THE FIX: Invisible bumper so popups don't touch the screen edges */
    padding: 20px; 
    box-sizing: border-box;
}

#overlay-message { 
    /* THE FIX: Scalable font size instead of a rigid 60px */
    font-size: clamp(30px, 8vw, 60px); 
    font-weight: bold; 
    margin-bottom: 20px; 
    color: #f1c40f; 
    text-align: center;
    
    /* THE FIX: Force strict word-wrapping so text never bursts out of the screen */
    width: auto;
    max-width: 100%;
    overflow-wrap: break-word; 
    word-wrap: break-word;     
    white-space: normal;  
}

.promotion-box {
    background-color: #ecf0f1; border-radius: 10px; padding: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5); text-align: center; color: #2c3e50;
}

.promotion-box h3 { margin-top: 0; margin-bottom: 20px; font-size: 24px; }
.promotion-options { display: flex; gap: 15px; }

.promo-choice {
    width: 70px; height: 70px; display: flex; justify-content: center; align-items: center;
    font-size: 50px; background-color: #bdc3c7; border-radius: 8px; cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.promo-choice:hover { background-color: #f1c40f; transform: scale(1.1); }

#loading-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #2c3e50; display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 9999; 
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.bouncing-pawn {
    font-size: 100px; animation: bounce 0.8s infinite alternate cubic-bezier(0.2, 0.8, 0.2, 1);
    text-shadow: 0 15px 25px rgba(0,0,0,0.5); margin-bottom: 20px;
}

#loading-text { color: #f1c40f; animation: pulseText 1.5s infinite; }

@keyframes bounce {
    0% { transform: translateY(0) scaleY(0.9); }
    100% { transform: translateY(-40px) scaleY(1.05); }
}

@keyframes pulseText {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.fade-out { opacity: 0; visibility: hidden; }

/* ==========================================
   9. BOTTOM STATUS TEXT ALIGNMENT
   ========================================== */
#status {  /* <-- Change this if your HTML ID is different! */
    text-align: center;
    align-self: center; /* This forces it to the middle of the Flexbox */
    font-size: clamp(16px, 4vw, 20px); 
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: env(safe-area-inset-bottom, 10px); /* Prevents hitting the iPhone home bar */
    width: 100%;
    z-index: 10;
}

/* ==========================================
   9. CUSTOM CONFIRMATION MODAL
   ========================================== */
#confirm-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    z-index: 2000; transition: opacity 0.2s;
}

.confirm-box {
    background-color: #34495e; border-radius: 10px; padding: 25px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.6); text-align: center; color: #ecf0f1;
    width: 300px; border: 2px solid #2c3e50;
}

.confirm-box h3 { margin-top: 0; margin-bottom: 10px; font-size: 22px; color: #f1c40f; }
.confirm-box p { margin-bottom: 25px; font-size: 16px; }

.confirm-buttons { display: flex; justify-content: space-between; gap: 15px; }

.btn-danger { background-color: #c0392b !important; flex: 1; border: 2px solid transparent !important; }
.btn-danger:hover { background-color: #e74c3c !important; border-color: white !important; }

.btn-cancel { background-color: #7f8c8d !important; flex: 1; border: 2px solid transparent !important; }
.btn-cancel:hover { background-color: #95a5a6 !important; border-color: white !important; }

/* ==========================================
   INLINE DISCONNECT TIMERS
   ========================================== */
.disconnect-timer {
    color: #ff4757; /* Bright, aggressive red */
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    letter-spacing: 0.5px;
    
    /* THE FIX: The flawless, continuous blinking animation */
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0.2; }
}