/* Core Layout */
:root {
    --bs: 1px;
    --ms: 1px;
}

@media (max-width: 700px) {
    :root {
        --bs: calc((100vw - 40px) / 650);
        /* Scale history boards to fit comfortably inside the container */
        --ms: calc((100vw - 50px) / 393); 
    }
}

* { box-sizing: border-box; }
body { 
    background-color: #222; 
    color: #fff; 
    font-family: monospace; 
    margin: 0; 
    overflow: hidden; 
    display: block;
}

/* Loading Screen */
body.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    color: #0f0;
}

#loading {
    font-size: 16px;
}

/* Sidebars */
.sidebar { position: fixed; top: 0; width: 280px; max-width: 100vw; height: 100%; background: #2d2d2d; padding: 20px; padding-top: 50px; transition: transform .3s; z-index: 10; overflow-y: auto; }
.sidebar-left { left: 0; border-right: 2px solid #505050; transform: translateX(-100%); }
.sidebar-left.open { transform: translateX(0); }
.sidebar-right { right: 0; border-left: 2px solid #505050; transform: translateX(100%); }
.sidebar-right.open { transform: translateX(0); }

/* Toggle Buttons */
.side-toggle { position: fixed; top: 10px; padding: 10px 15px; background: #3c3c3c; cursor: pointer; z-index: 11; border: 1px solid #646464; color: #fff; border-radius: 20px; }
.toggle-left { left: 10px; }
.toggle-right { right: 10px; }

/* Stats */
.stat-box { margin-bottom: 20px; border-bottom: 1px solid #464646; padding-bottom: 10px; }
.stat-label { color: #969696; font-size: 12px; display: block; }
.stat-val { font-size: 18px; color: #0f0; }
.stat-sub { font-size: 13px; color: #ccc; display: block; margin-top: 3px; }

/* Configuration Controls */
.cfg-row { margin-bottom: 14px; }
.cfg-label { color: #969696; font-size: 12px; display: block; margin-bottom: 4px; }
.cfg-row input, .cfg-row select { width: 100%; padding: 6px; background: #444; color: #fff; border: 1px solid #646464; border-radius: 4px; }
.cfg-btn { width: 100%; padding: 10px; margin-top: 10px; background: #0a0; color: #000; border: none; cursor: pointer; font-size: 16px; font-weight: bold; border-radius: 10px; }
.cfg-btn.disabled { opacity: .4; pointer-events: none; }
.cfg-btn-reset { width: 100%; padding: 10px; margin-top: 14px; background: transparent; color: #c55; border: 1px solid #c55; cursor: pointer; font-size: 14px; font-weight: bold; border-radius: 10px; }
.cfg-btn-reset:hover { background: #c55; color: #000; }
.cfg-btn-reset.disabled { opacity: .4; pointer-events: none; }

/* Main Content & Board */
.main-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; height: 100dvh; }
.board-container-relative { position: relative; }
.board-wrapper { display: flex; background: #333; border-radius: calc(10 * var(--bs)); transition: background 0.5s; }
.board-wrapper.cheated { background: #3d3336; }
.board-wrapper.main { padding: calc(20 * var(--bs)); gap: calc(20 * var(--bs)); }
.board-wrapper.mini { padding: calc(10 * var(--ms)); gap: calc(10 * var(--ms)); border-radius: calc(6 * var(--ms)); background: #2a2a2a; }

/* Pits and Stores */
.pit { border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #444; transition: background-color 0.25s ease, color 0.25s ease; }
.store { display: flex; align-items: center; justify-content: center; background-color: #555; transition: background-color 0.25s ease, color 0.25s ease; }
.row { display: flex; }
.main .pit { width: calc(60 * var(--bs)); height: calc(60 * var(--bs)); font-size: calc(24 * var(--bs)); border: solid #555; border-width: calc(2 * var(--bs)); }
.main .store { width: calc(80 * var(--bs)); font-size: calc(32 * var(--bs)); border: solid #666; border-width: calc(2 * var(--bs)); border-radius: calc(20 * var(--bs)); }
.main .row { gap: calc(10 * var(--bs)); margin: calc(10 * var(--bs)) 0; }
.mini .pit { width: calc(38 * var(--ms)); height: calc(38 * var(--ms)); font-size: calc(14 * var(--ms)); border: solid #444; border-width: calc(1 * var(--ms)); }
.mini .store { width: calc(50 * var(--ms)); font-size: calc(18 * var(--ms)); border: solid #555; border-width: calc(1 * var(--ms)); border-radius: calc(10 * var(--ms)); }
.mini .row { gap: calc(5 * var(--ms)); margin: calc(5 * var(--ms)) 0; }

/* Interactive Elements */
.player-pit { cursor: pointer; border-color: #0f0 !important; }
.ai-pit { border-color: #f00 !important; }
.bottom-btn { background: transparent; border: none; color: #888; font-size: calc(14 * var(--bs)); cursor: pointer; font-family: monospace; }
.bottom-btn:hover { color: #fff; text-decoration: underline; }

/* Highlights */
.highlight-modified { background-color: #5a5a5a !important; color: #fff; }
.highlight-move { background-color: #999 !important; color: #fff; }
.highlight-capture { background-color: #e73121 !important; color: #fff; }
.highlight-last-drop { background-color: #6e6e6e !important; color: #fff; }
.disabled { opacity: .5; pointer-events: none; }

/* Positioning */
.undo-pos { position: absolute; bottom: calc(-35 * var(--bs)); left: calc(30 * var(--bs)); }
.step-pos { position: absolute; bottom: calc(-35 * var(--bs)); right: calc(30 * var(--bs)); }

/* Status Text */
#status-text { margin-top: calc(25 * var(--bs)); margin-bottom: calc(15 * var(--bs)); font-size: calc(18 * var(--bs)); }

/* History */
.history-container { display: none; flex-direction: column; gap: calc(20 * var(--bs)); padding: 15px; background: #1a1a1a; border-radius: 10px; max-height: 35vh; overflow-y: auto; margin-top: calc(10 * var(--bs)); border: 1px solid #444; }
.hist-item { display: flex; justify-content: center; border-bottom: 1px solid #333; padding-bottom: calc(15 * var(--bs)); }
.hist-item:last-child { border-bottom: none; padding-bottom: 0; }
#hist-btn { margin-top: 0; }

/* Footer & About Modal */
.footer { position: fixed; bottom: 10px; width: 100%; text-align: center; pointer-events: none; }
.footer a, .footer button { color: #888; text-decoration: none; font-size: 14px; pointer-events: auto; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: #2a2a2a; border: 1px solid #555; border-radius: 10px; padding: 20px; max-width: 650px; width: 90%; max-height: 85vh; overflow-y: auto; text-align: center; font-size: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: auto; }
.modal-content h2 { margin-top: 0; color: #0f0; font-size: 20px; }
.modal-content h3 { color: #fff; font-size: 16px; margin-bottom: 5px; }
.modal-content p { margin: 10px 0; color: #ccc; }
.modal-content a { color: #0a0; text-decoration: none; }
.modal-content a:hover { text-decoration: underline; }
.license-box { background: #1a1a1a; padding: 12px; border: 1px solid #444; border-radius: 5px; font-size: 10px; color: #888; text-align: left; max-height: 150px; overflow-y: auto; margin-top: 5px; line-height: 1.4; }
.modal-close-btn { margin-top: 20px; padding: 10px 20px; background: #444; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-family: monospace; }
.modal-close-btn:hover { background: #666; }

/* Expert Mode */
.chk-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chk-row input { width: auto; }
.chk-row .cfg-label { margin-bottom: 0; }
.expert-only { display: none; }
body.expert-mode .expert-only { display: block; }
.expert-btn { background: transparent; border: 1px solid #444; color: #666; font-size: 10px; margin-left: 10px; cursor: pointer; padding: 2px 5px; border-radius: 4px; pointer-events: auto; }
body.expert-mode .expert-btn { color: #0f0; border-color: #0f0; }

/* Inputs */
.pit-input, .store-input { background: transparent; border: none; outline: none; color: #fff; text-align: center; font-family: monospace; width: 100%; height: 100%; -moz-appearance: textfield; }
.pit-input::-webkit-outer-spin-button, .pit-input::-webkit-inner-spin-button,
.store-input::-webkit-outer-spin-button, .store-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pit-input { font-size: calc(24 * var(--bs)); }
.store-input { font-size: calc(32 * var(--bs)); }