/* ===== Game Pages Shared Styles =====
   Used by: ai/index.php, play/index.php, puzzles/index.php
   ===================================== */

/* ===== Page Layouts ===== */
/* Ensure main containers push footer to bottom */
.ai-container,
.play-container,
.puzzle-main {
    flex: 1;
}

/* Common container for all game pages */
.game-container {
    display: grid;
    grid-template-columns: auto 320px;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
    align-items: start;
    justify-content: center;
}

.game-container.single-column {
    grid-template-columns: 1fr 320px;
}

/* ===== Board Wrapper ===== */
.board-wrapper {
    width: min(800px, calc(100vh - 160px));
    position: relative;
    padding: 4px;
}

.board-wrapper #chessboard,
.board-wrapper #puzzleBoard,
.board-wrapper #multiplayer-board {
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.board-wrapper #chessboard,
.board-wrapper #chessboard .square-55d63 {
    border-radius: 0 !important;
}

/* ===== Game Panel ===== */
.game-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Panel sections */
.panel-section,
.panel-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.panel-card {
    padding: 1.25rem;
}

.panel-title,
.panel-card-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-dark-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-card-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    text-transform: none;
    letter-spacing: 0;
}

/* ===== Move History ===== */
.move-section {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.move-section .panel-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-dark-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.move-history-list,
.move-history {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    min-height: 1.5rem;
}

.move-history {
    max-height: 180px;
    overflow-y: auto;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

.move-history-list em {
    color: var(--color-dark-gray);
    font-style: italic;
}

.move-history-list {
    width: 100%;
    box-sizing: border-box;
    max-height: 180px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.04);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.move-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    box-sizing: border-box;
}

.move-row:last-child {
    border-bottom: none;
}

.move-num {
    font-family: var(--font-body);
    color: var(--color-dark-gray);
    min-width: 1.5rem;
    font-weight: 600;
}

.move-white, .move-black {
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    min-width: 3rem;
    font-weight: 600;
}

.move-white { background: #f5f5f5; color: #333; }
.move-black { background: #666; color: #fff; }

.move-piece-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

/* ===== Game Status ===== */
.game-status-box,
.game-status,
.puzzle-status {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 600;
    font-family: var(--font-body);
}

.game-status-box.your-turn,
.game-status.your-turn,
.puzzle-status.your-turn {
    background: #e8f5e9;
    color: #2e7d32;
}

.game-status-box.ai-turn,
.game-status.opponent-turn {
    background: #fff3e0;
    color: #e65100;
}

.game-status.waiting {
    background: #fff3e0;
    color: #e65100;
}

.game-status-box.game-over,
.game-status.game-over {
    background: #fce4ec;
    color: #c62828;
}

/* You win (same as puzzle solved) - gold/orange gradient */
.game-status-box.game-win {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #1a1a1a;
}

/* Celebration animation (same as puzzle solved) */
.game-status-box.game-win.celebrating {
    animation: game-status-celebrate 0.6s ease-out;
}

@keyframes game-status-celebrate {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.puzzle-status {
    padding: 1rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    position: relative;
    overflow: visible;
}

.puzzle-status.correct {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
}

.puzzle-status.wrong {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
}

.puzzle-status.complete {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #1a1a1a;
}

/* ===== Captured Pieces ===== */
.captured-section-box,
.captured-pieces {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.captured-pieces {
    padding: 0.75rem;
    background: var(--color-bg);
    margin-bottom: 1rem;
}

.captured-row,
.captured-white,
.captured-black {
    margin-bottom: 0.5rem;
}

.captured-row:last-child,
.captured-white:last-child,
.captured-black:last-child {
    margin-bottom: 0;
}

.captured-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-dark-gray);
    display: block;
    margin-bottom: 0.25rem;
}

.captured-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 48px;
}

.captured-piece {
    width: 48px;
    height: 48px;
    opacity: 0.9;
    transition: transform 0.2s ease;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.captured-piece:hover {
    transform: scale(1.2);
    opacity: 1;
}

.captured-piece.recent-capture {
    animation: capturedPulse 1.5s ease-in-out infinite;
}

@keyframes capturedPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(255, 200, 0, 0.8)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255, 200, 0, 1)); }
}

/* ===== Settings Section ===== */
.settings-section {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.setting-group {
    margin-bottom: 0.75rem;
}

.setting-group:last-child {
    margin-bottom: 0;
}

.setting-group label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-dark-gray);
    display: block;
    margin-bottom: 0.4rem;
}

.setting-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
}

.color-buttons {
    display: flex;
    gap: 0.5rem;
}

.color-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.color-btn .btn-piece {
    width: 18px;
    height: 18px;
}

.color-btn.active {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: white;
}

.color-btn:hover:not(.active) {
    border-color: var(--color-accent);
}

/* ===== Buttons ===== */
.start-btn {
    width: 100%;
    padding: 0.85rem;
    background: var(--color-success);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.start-btn:hover {
    background: #1a7a3e;
}

.stop-btn {
    width: 100%;
    padding: 0.5rem;
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.stop-btn:hover {
    background: #ffebee;
    color: #c62828;
    border-color: #ef9a9a;
}

.undo-btn,
.undo-btn-game {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.undo-btn:hover {
    background: var(--color-border);
}

.undo-btn-game {
    padding: 0.75rem;
    background: var(--color-accent);
    color: white;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
}

.undo-btn-game:hover {
    background: var(--color-accent-dark);
}

.puzzle-btn {
    width: 100%;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.puzzle-btn.primary {
    background: linear-gradient(135deg, var(--color-success) 0%, #388e3c 100%);
    color: white;
}

.puzzle-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.puzzle-btn.secondary {
    background: var(--color-light-gray);
    color: var(--color-text);
}

.puzzle-btn.secondary:hover {
    background: var(--color-medium-gray);
}

/* Action buttons */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.action-btn {
    flex: 1;
    padding: 0.6rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.new-game-btn {
    background: var(--color-accent);
    color: white;
}

.new-game-btn:hover {
    background: var(--color-accent-dark);
}

.forfeit-btn {
    font-family: var(--font-body);
    background: #dc3545;
    color: white;
    font-weight: 600;
}

.forfeit-btn:hover {
    background: #c82333;
}

/* ===== Highlight Styles ===== */
.highlight-selected { background-color: #d4c9a0 !important; }

.highlight-hint { position: relative; }
.highlight-hint::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32%; height: 32%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.highlight-capture { position: relative; }
.highlight-capture::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 80%;
    border-radius: 50%;
    border: 5px solid rgba(0, 0, 0, 0.2);
    pointer-events: none;
    box-sizing: border-box;
}

.highlight-check {
    background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.8) 0%, rgba(200, 0, 0, 0.4) 40%, transparent 70%) !important;
}

/* Highlight colors for darker squares */
.highlight-selected[class*="black-"],
.highlight-hint[class*="black-"],
.highlight-capture[class*="black-"] {
    background-color: #9a7040 !important;
}

/* Last move highlights - green strokes */
.last-move-square[class*="white-"] {
    box-shadow: inset 0 0 0 6px rgba(76, 175, 80, 0.75) !important;
    transition: box-shadow 0.2s ease;
}

.last-move-square[class*="black-"] {
    box-shadow: inset 0 0 0 6px rgba(76, 175, 80, 0.75) !important;
    transition: box-shadow 0.2s ease;
}

.last-move-to[class*="white-"] {
    box-shadow: inset 0 0 0 6px rgba(76, 175, 80, 0.75) !important;
}

.last-move-to[class*="black-"] {
    box-shadow: inset 0 0 0 6px rgba(76, 175, 80, 0.75) !important;
}

/* Glow on the piece in the landing square */
.last-move-to .piece-417db {
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.8)) drop-shadow(0 0 10px rgba(76, 175, 80, 0.5));
    transition: filter 0.3s ease;
}

/* Fade out variants */
.last-move-square.fade-out[class*="white-"] {
    box-shadow: inset 0 0 0 4px rgba(76, 175, 80, 0.5) !important;
}

.last-move-square.fade-out[class*="black-"] {
    box-shadow: inset 0 0 0 4px rgba(76, 175, 80, 0.5) !important;
}

/* Dark mode */
[data-theme="dark"] .last-move-square[class*="white-"] {
    box-shadow: inset 0 0 0 6px rgba(76, 175, 80, 0.8) !important;
}

[data-theme="dark"] .last-move-square[class*="black-"] {
    box-shadow: inset 0 0 0 6px rgba(76, 175, 80, 0.8) !important;
}

[data-theme="dark"] .last-move-to .piece-417db {
    filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.9)) drop-shadow(0 0 12px rgba(76, 175, 80, 0.6));
}

/* ===== Board Colors ===== */
.white-1e1d7 {
    background-color: var(--board-light-square, #ebecd0) !important;
    color: var(--board-light-piece, #b68860);
}

.black-3c85d {
    background-color: var(--board-dark-square, #b68860) !important;
    color: var(--board-dark-piece, #ebecd0);
}

/* ===== Promotion Dialog ===== */
.promotion-dialog {
    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: 2000;
}

.promotion-dialog.hidden {
    display: none;
}

.promotion-options {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
    align-items: center;
}

.promotion-options h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark-gray);
}

.promotion-pieces {
    display: flex;
    gap: 0.5rem;
}

.promotion-piece {
    width: 60px;
    height: 60px;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.promotion-piece:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    transform: scale(1.1);
}

/* ===== Stats Grid ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.stat-item {
    text-align: center;
    padding: 0.75rem;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--color-dark-gray);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== Share Section ===== */
.share-section {
    border-top: 1px solid var(--color-light-gray);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.share-toggle-btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    margin-bottom: 0.75rem;
}

.share-toggle-btn:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
}

.share-options {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}

.share-options.expanded {
    display: flex;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
}

.share-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn svg {
    width: 20px;
    height: 20px;
}

.share-btn.twitter { background: #000; color: white; }
.share-btn.twitter:hover { background: #333; transform: translateY(-2px); }

.share-btn.facebook { background: #1877f2; color: white; }
.share-btn.facebook:hover { background: #166fe5; transform: translateY(-2px); }

.share-btn.copy { background: var(--color-light-gray); color: var(--color-text); }
.share-btn.copy:hover { background: var(--color-medium-gray); transform: translateY(-2px); }
.share-btn.copy.copied { background: var(--color-success); color: white; }

/* ===== Utility Classes ===== */
.hidden { display: none !important; }

/* ===== Dark Mode ===== */
[data-theme="dark"] .panel-section,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .move-section,
[data-theme="dark"] .captured-section-box,
[data-theme="dark"] .settings-section {
    background: var(--color-white);
    color: var(--color-text);
}

[data-theme="dark"] .move-section .panel-title,
[data-theme="dark"] .setting-group label,
[data-theme="dark"] .captured-label,
[data-theme="dark"] .panel-title {
    color: #aaa;
}

[data-theme="dark"] .move-history-list,
[data-theme="dark"] .move-history-list em,
[data-theme="dark"] .move-history {
    color: var(--color-text);
}
[data-theme="dark"] .move-history-list,
[data-theme="dark"] .move-history {
    background: rgba(2, 6, 23, 0.62);
}

[data-theme="dark"] .move-white {
    background: #e0e0e0;
    color: #222;
}

[data-theme="dark"] .move-black {
    background: #555;
    color: #fff;
}

[data-theme="dark"] .game-status-box.your-turn,
[data-theme="dark"] .game-status.your-turn {
    background: #1a3d1a;
    color: #4ade80;
}

[data-theme="dark"] .game-status-box.ai-turn,
[data-theme="dark"] .game-status.opponent-turn,
[data-theme="dark"] .game-status.waiting {
    background: #3d2a00;
    color: #ffb74d;
}

[data-theme="dark"] .game-status-box.game-over,
[data-theme="dark"] .game-status.game-over {
    background: #3d1a1a;
    color: #ef9a9a;
}

[data-theme="dark"] .game-status-box.game-win {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #1a1a1a;
}

[data-theme="dark"] .puzzle-status.your-turn {
    background: linear-gradient(135deg, #0d3c61 0%, #1565c0 100%);
    color: #90caf9;
}

[data-theme="dark"] .puzzle-status.correct {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    color: #a5d6a7;
}

[data-theme="dark"] .puzzle-status.wrong {
    background: linear-gradient(135deg, #5d1a1a 0%, #b71c1c 100%);
    color: #ef9a9a;
}

[data-theme="dark"] .color-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .color-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

[data-theme="dark"] .color-btn:hover:not(.active) {
    background: #3a3a3a;
    border-color: #666;
}

[data-theme="dark"] .setting-group select {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .undo-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .undo-btn:hover {
    background: #3a3a3a;
}

[data-theme="dark"] .undo-btn-game {
    background: var(--color-accent);
}

[data-theme="dark"] .stop-btn {
    background: #2a2a2a;
    color: #999;
    border-color: #444;
}

[data-theme="dark"] .stop-btn:hover {
    background: #3d1a1a;
    color: #ef9a9a;
    border-color: #c62828;
}

[data-theme="dark"] .start-btn {
    background: #1a7a3e;
}

[data-theme="dark"] .start-btn:hover {
    background: #228b22;
}

[data-theme="dark"] .captured-piece {
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
}

[data-theme="dark"] .captured-pieces {
    background: #1a1a1a;
}

[data-theme="dark"] .captured-pieces .captured-piece {
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5)) drop-shadow(0 0 1px rgba(255,255,255,0.8));
}

[data-theme="dark"] .promotion-options {
    background: #2a2a2a;
}

[data-theme="dark"] .promotion-piece {
    background: #1a1a1a;
    border-color: #444;
}

/* Dark-mode board tones come from CSS variables in style.css */

/* ===== Responsive Design ===== */
@media (max-width: 992px) {
    .game-container {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        padding: 0.75rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    .game-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .game-panel > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    .board-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .game-container {
        padding: 0.5rem;
    }
    
    .board-wrapper {
        width: calc(100vw - 1rem);
        max-width: none;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .puzzle-btn {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .share-btn {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .game-container {
        padding: 0.25rem 0.5rem;
    }
}