:root {
    --board-bg: #e3c18d;
    --line-color: #333;
    --red-p: #f44336;
    --black-p: #000;
}

body { margin: 0; padding: 0; background: #121212; display: flex; justify-content: center; height: 100vh; font-family: sans-serif; overflow: hidden; }
#game-container { width: 100%; max-width: 450px; height: 100%; display: flex; flex-direction: column; }

/* Панели */
#controls-bar { display: flex; background: #222; padding: 10px; gap: 8px; border-bottom: 1px solid #444; }
#controls-bar button { flex: 1; padding: 12px 5px; border: none; border-radius: 8px; background: #3d3d3d; color: #fff; font-weight: bold; cursor: pointer; font-size: 14px; }
#game-info { background: #1a1a1a; color: #fff; padding: 12px; border-bottom: 1px solid #333; text-align: center; }
#turn-indicator { font-weight: bold; font-size: 1.2em; display: block; margin-bottom: 8px; }
#turn-indicator.red-turn { color: #ff5252; }

#timers-container { display: flex; justify-content: center; gap: 15px; }
.timer-box { font-family: 'Courier New', monospace; font-size: 1.1em; padding: 4px 12px; background: #000; border-radius: 6px; color: #777; border: 1px solid #333; }
.timer-box.active { color: #fff; border-color: #eee; }
.timer-box#timer-red.active { color: #ff5252; border-color: #ff5252; }

/* Доска */
#board-wrapper {
    position: relative; width: 94vw; aspect-ratio: 8.5 / 10; max-width: 420px;
    margin: 10px auto; background: var(--board-bg);
    border: 3px solid #4e342e; padding: 20px;
    box-sizing: border-box; border-radius: 4px;
}

#inner-board { position: relative; width: 100%; height: 100%; }

.grid-line-h { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--line-color); transform: translateY(-50%); }
.grid-line-v { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--line-color); transform: translateX(-50%); }

#river-box {
    position: absolute; top: 44.44%; left: 0; width: 100%; height: 11.11%;
    background: var(--board-bg); z-index: 1; display: flex;
    justify-content: space-around; align-items: center; font-weight: bold; font-size: 1.3em; color: #5d4037;
}

.palace-diag {
    position: absolute; width: 25%; height: 22.22%;
    background: 
        linear-gradient(to top right, transparent calc(50% - 1px), var(--line-color), transparent calc(50% + 1px)),
        linear-gradient(to top left, transparent calc(50% - 1px), var(--line-color), transparent calc(50% + 1px));
    left: 37.5%; z-index: 0; opacity: 0.5;
}

/* Маркеры-уголки (ребра) */
.marker-container {
    position: absolute; width: 20px; height: 20px;
    transform: translate(-50%, -50%); pointer-events: none; z-index: 1;
}
.corner {
    position: absolute; width: 6px; height: 6px;
    border: 1.5px solid var(--line-color);
}
.c-tl { top: 2px; left: 2px; border-right: none; border-bottom: none; }
.c-tr { top: 2px; right: 2px; border-left: none; border-bottom: none; }
.c-bl { bottom: 2px; left: 2px; border-right: none; border-top: none; }
.c-br { bottom: 2px; right: 2px; border-left: none; border-top: none; }

/* Фигуры */
.cell-target {
    position: absolute; width: 44px; height: 44px;
    display: flex; justify-content: center; align-items: center;
    transform: translate(-50%, -50%); z-index: 10; cursor: pointer;
}

.piece {
    width: 40px; height: 40px; border-radius: 50%;
    background: #fdf5e6; border: 2px solid #5d3a1a;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5em; font-weight: bold; box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}
.piece.red { color: var(--red-p); border-color: #b71c1c; }
.piece.black { color: var(--black-p); border-color: #000; }

.selected .piece { background: #fff; transform: scale(1.1); box-shadow: 0 0 12px #ffeb3b; }
.valid-move::after { content: ''; width: 12px; height: 12px; background: rgba(76, 175, 80, 0.6); border-radius: 50%; }
.last-move-mark { background: rgba(255, 235, 59, 0.3); border-radius: 50%; }

#footer { background: #222; padding: 12px; color: #888; text-align: center; font-size: 13px; border-top: 1px solid #333; }

/* Модалка */
.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); }
.modal-content { background: #212121; margin: 10% auto; padding: 25px; width: 85%; max-width: 350px; border-radius: 16px; color: #fff; border: 1px solid #444; position: relative; max-height: 80vh; overflow-y: auto; }
.close { float: right; font-size: 32px; cursor: pointer; color: #777; }