* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #333;
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    /* allow content to expand within viewport and scroll if necessary */
    overflow: visible;
}

header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 30px;
    text-align: center;
}

header h1 {
    font-size: 3em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-size: 1.2em;
    opacity: 0.9;
}

/* Layout utility classes (use these on the <main> element) */
.layout-single {
    display: block;
    max-width: 980px;
    margin: 24px auto;
    padding: 24px;
}

.layout-grid {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 20px;
    padding: 30px;
    grid-template-areas: "controls main info";
}

.layout-split {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    padding: 24px;
    grid-template-areas: "main aside";
}

.controls {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.piece-selector h3 {
    margin-bottom: 15px;
    color: #2a5298;
}

.piece-btn {
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    background: white;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s;
}

.piece-btn:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: translateX(5px);
}

.piece-btn.active {
    background: #2a5298;
    color: white;
    border-color: #2a5298;
}

.actions {
    margin-top: 30px;
}

.actions button {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.3s;
}

.actions button:hover {
    background: #764ba2;
    transform: scale(1.05);
}

/* Pressed visual state for buttons (also toggled via JS 'pressed' class) */
.actions button:active,
.actions button.pressed {
    transform: scale(0.98) translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
    background: #5a3a9b;
    transition: transform 0.08s ease-out;
}

.board-container {
    display: flex;
    justify-content: center;
    /* center horizontally */
    align-items: center;
    /* center vertically */
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: calc(100vh - 260px);
    /* ensure board is centered vertically with room for header */
    overflow: auto;
}

#chessboard {
    border: 3px solid #2a5298;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;

    /* Responsive sizing: min / preferred / max — keeps 1:1 aspect-ratio */
    width: clamp(260px, 60vw, 720px);
    aspect-ratio: 1 / 1;
    max-width: 100%;
    height: auto;
    touch-action: manipulation; /* improves touch responsiveness */
    display: block;
}

@media (max-height:700px) {
  #chessboard { max-height: calc(100vh - 200px); width: min(85vw, calc(100vh - 200px)); }
}

.info-panel {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    max-width: 360px;
    grid-column: 3;
    /* always sit in third column */
}

.info-panel h3 {
    margin-bottom: 15px;
    color: #2a5298;
}

/* Keep explicit placement for main grid children so that hiding .controls doesn't reorder elements */
.layout-grid .controls {
    grid-column: 1;
    grid-area: controls;
}

.layout-grid .board-container {
    grid-column: 2;
    grid-area: main;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout-grid .info-panel {
    grid-column: 3;
    grid-area: info;
}

/* layout-split mapping */
.layout-split .board-container { grid-area: main; }
.layout-split .info-panel   { grid-area: aside; }

/* When in game-mode, collapse the left controls column and let the board dominate the layout */
.game-mode .layout-grid {
    grid-template-columns: 0 1fr 360px;
}

/* Slightly increase the chessboard cap in game-mode so it can occupy more space */
.game-mode #chessboard {
    width: min(1000px, 100%, 90vh);
}

/* Game-mode selector styling */
#game-mode-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Game over banner styles */
#game-over-banner {
    display: none;
    display: flex;
}

#game-over-panel button {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}

#game-over-panel button:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}

#game-over-backdrop {
    transition: opacity 200ms ease;
}

#game-over-panel {
    min-width: 340px;
}

#game-mode-selector button {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}

#game-mode-selector button:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}


#info-content {
    line-height: 1.6;
}

#info-content p {
    margin-bottom: 10px;
}

/* Timeline cards: horizontal scroll on small screens */
.timeline-cards {
    display:flex;
    gap:12px;
    overflow-x:hidden; /* disable any horizontal scroll, we will scale instead */
    overflow-y:hidden; /* prevent any vertical movement */
    padding-bottom:6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* container height a little larger than card to avoid clipping */
    /* container height will be adjusted dynamically in JS */
    min-height: 0;
    height: auto;
    touch-action: pan-x; /* ignore vertical touch scroll */
}
.timeline-card {
    box-sizing: border-box; /* include padding in height calculation */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 320px;
    /* consistent size for all timeline cards – match JS value */
    min-height: 340px;
    height: 340px;
    overflow-y: hidden; /* prevent internal scrolling, content fixed */
    scroll-snap-align: center;
    padding-top: 12px; /* add top padding so content doesn’t touch border */
}
@media (max-width: 420px) {
    .timeline-card { min-width: 180px; }
}

/* placeholder cards should fill the fixed height and center their text */
.timeline-card.placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (max-width: 320px) {
    .timeline-cards { display:block; }
    .timeline-card  { width:100%; margin-bottom:12px; min-width: auto; }
}

/* Board settings gear (appears on hover over the board) */
.board-container {
    position: relative;
    /* enable absolute children such as gear */
}

.board-settings {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 50;
}

.gear-btn {
    display: none;
    /* shown on hover of board-container */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
}

.board-container:hover .gear-btn {
    display: inline-flex;
}

.board-settings-menu {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    background: #fff;
    border: 1px solid #cbd5e1;
    padding: 6px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12);
    min-width: 140px;
}

.board-settings:hover .board-settings-menu {
    display: block;
}

.board-settings-menu .menu-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
}

@media (max-width: 1199px) {
  .layout-grid {
    grid-template-columns: 280px 1fr;
    grid-template-areas:
      "controls main"
      "info     info";
  }
  .layout-split { grid-template-columns: 1fr; grid-template-areas: "main" "aside"; }
}

@media (max-width: 899px) {
  .layout-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "controls"
      "info";
  }
  .layout-split { grid-template-columns: 1fr; grid-template-areas: "main" "aside"; }
}

@media (max-width: 420px) {
  .layout-single { padding-inline: 16px; }
  .timeline-card { min-width: 180px; }
}