/* styles.css */

/* --- CSS Variables --- */
:root {
    --turing-color-primary: #007bff;      /* Blue primary */
    --turing-color-secondary: #cce7ff;   /* Light blue background */
    --turing-color-tertiary: #e6f2ff;   /* Lighter blue for hover/active states */
    --turing-color-text: #003d7a;        /* Dark blue text */
    --turing-border-color: #0056b3;

    --scherbius-color-primary: #6f42c1;   /* Purple primary */
    --scherbius-color-secondary: #e6e0f2; /* Light purple background */
    --scherbius-color-tertiary: #d8cff0; /* Lighter purple for hover/active states */
    --scherbius-color-text: #492b7c;      /* Dark purple text */
    --scherbius-border-color: #59359a;

    --neutral-bg-light: #f8f9fa;
    --neutral-bg-medium: #e9ecef;
    --neutral-bg-dark: #ffffff;
    --neutral-border-color: #d1d9e6;
    --neutral-text-color: #333;
    --neutral-text-light: #555;

    --vp-reward-bg: #ffe0cc;
    --vp-reward-border: #ffbfa0;
    --vp-reward-text: #c06030;

    --success-bg-color: #d4edda;
    --success-border-color: #c3e6cb;
    --success-text-color: #155724;

    --danger-bg-color: #ffdddd;
    --danger-border-color: #ff0000;

    --button-bg-color: var(--turing-color-primary);
    --button-text-color: white;
    --button-hover-bg-color: var(--turing-border-color);
    --button-disabled-bg-color: #cccccc;

    --card-interactive-width: 48px;
    --card-interactive-height: 70px;
    --card-display-width: 30px;
    --card-display-height: 45px;
    --card-font-size-interactive: 1.1em;
    --card-font-size-display: 0.8em;
    --card-border-radius: 4px;
    --card-padding: 8px;
}

/* --- Base Styles --- */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 10px;
    background-color: #f0f2f5;
    color: var(--neutral-text-color);
}

.container {
    max-width: 1200px;
    margin: auto;
    background: var(--neutral-bg-dark);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* --- Typography --- */
h1, h2, h3, h4 {
    color: var(--neutral-text-color);
    margin-top: 0.8em;
    margin-bottom: 0.4em;
}
h1 { text-align: center; color: var(--turing-color-primary); }
h2 { color: var(--turing-border-color); }
h3 { color: var(--turing-color-primary); }
#battleZoneArea h3 { text-align: center; }
.battle-item h4 { margin-top: 0; margin-bottom: 8px; text-align: center; }
.historical-battle-item h4 { color: var(--neutral-text-light); }


/* --- Layout Sections --- */
.game-controls,
.scores-summary-box,
#battleZoneArea,
#historicalRoundViewArea,
#gameOverMessage {
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid var(--neutral-border-color);
    border-radius: 6px;
    background-color: var(--neutral-bg-light);
}

.scores-summary-box {
    background-color: var(--neutral-bg-medium);
    border-left: 5px solid var(--turing-color-primary);
}
.scores-summary-box h2 { margin-top: 0; }
.scores-summary-box p { margin: 6px 0; font-size: 0.95em; }
.scores-summary-box span { font-weight: bold; color: #343a40; }

/* --- Buttons --- */
button {
    padding: 10px 18px;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 1em;
}
button:hover { background-color: var(--button-hover-bg-color); }
button:disabled {
    background-color: var(--button-disabled-bg-color);
    cursor: not-allowed;
}

/* --- Draggable Card Styles (General) --- */
.card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    font-weight: bold;
    font-size: var(--card-font-size-interactive);
    cursor: grab;
    user-select: none;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    box-sizing: border-box;
    position: relative;
}
.card.dragging {
    opacity: 0.4;
    border-style: dashed !important;
    transform: scale(1.05);
}

/* Player-Specific Interactive Cards (In Hand or Played into Slots) */
.turing-card-ingame {
    background-color: var(--turing-color-secondary);
    border: 1px solid var(--turing-border-color);
    color: var(--turing-color-text);
}
.scherbius-card-ingame {
    background-color: var(--scherbius-color-secondary);
    border: 1px solid var(--scherbius-border-color);
    color: var(--scherbius-color-text);
}

/* --- Hand Area Styles --- */
.card-source { /* Common class for #turingHand and #scherbiusHand */
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    min-height: 80px;
    margin-bottom: 10px;
    border-radius: var(--card-border-radius);
}
#turingHand {
    border: 1px solid var(--turing-color-primary);
    background-color: var(--turing-color-tertiary);
}
#scherbiusHand {
    border: 1px solid var(--scherbius-color-primary);
    background-color: var(--scherbius-color-tertiary);
}
.card-source.drag-over {
    background-color: #d0eaff; /* Generic drag over, can be refined if needed */
}
#turingHand.drag-over { background-color: var(--turing-color-secondary); }
#scherbiusHand.drag-over { background-color: var(--scherbius-color-secondary); }


/* Cards within Hand Areas */
.card-source > .card {
    width: var(--card-interactive-width);
    height: var(--card-interactive-height);
    margin: 2px; /* Individual margin if gap isn't enough or for specific alignment */
}

/* --- Player Action Controls (Hand title, submit button) --- */
/* #turingControls h3, #scherbiusControls h3 { margin-bottom: 5px; } */
#turingControls #turingHandArea h3, 
#scherbiusControls #scherbiusHandArea h3 { 
    margin-bottom: 5px; 
    color: var(--neutral-text-color); /* This makes the hand titles black/dark grey */
}
#turingControls { border-top: 2px solid var(--turing-color-primary); padding-top: 10px; }
#scherbiusControls { border-top: 2px solid var(--scherbius-color-primary); padding-top: 10px; }


/* --- Card Slot Styles (for active turn battle areas) --- */
.player-played-cards-area { /* Container for slots in an active battle */
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 2px dashed var(--neutral-border-color);
    border-radius: var(--card-border-radius);
    background-color: var(--neutral-bg-light);
}
.player-played-cards-area h4 { font-size: 0.9em; color: var(--neutral-text-light); margin-bottom: 5px; text-align: left;}

.card-slots-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    min-height: calc(var(--card-interactive-height) + 4px); /* Slot height + border */
}
.card-slot {
    width: var(--card-interactive-width);
    height: var(--card-interactive-height);
    border: 2px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--card-border-radius);
}
.card-slot.drag-over {
    background-color: #e0e0e0;
    border-color: #aaa;
}
.card-slot.drag-over-full {
    background-color: var(--danger-bg-color);
    border-color: var(--danger-border-color);
}

/* Cards within Slots */
.card-slot > .card {
    width: 100%;
    height: 100%;
    margin: 0;
    /* Player-specific styles (.turing-card-ingame, .scherbius-card-ingame) will apply for color */
}


/* --- Display-Only Card Styles (Rewards, Opponent Info, Historical Summaries) --- */
.display-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: flex-start; /* Default to left align, center in specific contexts if needed */
    margin-top: 4px;
    min-height: calc(var(--card-display-height) + 2px); /* Ensure it has some height */
}
.reward-info .display-card-container,
.opponent-observed-info .display-card-container {
    justify-content: center; /* Center cards in reward/opponent info sections */
}

.display-card {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--card-display-width);
    height: var(--card-display-height);
    padding: 4px;
    border: 1px solid #777;
    border-radius: 3px;
    font-weight: bold;
    font-size: var(--card-font-size-display);
    color: var(--neutral-text-color);
    background-color: #f0f0f0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    margin: 1px;
}

.display-card.vp-reward {
    background-color: var(--vp-reward-bg);
    border-color: var(--vp-reward-border);
    color: var(--vp-reward-text);
}
.display-card.vp-reward::before {
    content: "VP ";
    font-size: 0.8em;
    margin-right: 2px;
    font-weight: normal;
}

/* Opponent cards in current round view */
.display-card.turing-opponent-card {
    background-color: var(--turing-color-secondary);
    border-color: var(--turing-border-color);
    color: var(--turing-color-text);
}
.display-card.scherbius-opponent-card {
    background-color: var(--scherbius-color-secondary);
    border-color: var(--scherbius-border-color);
    color: var(--scherbius-color-text);
}

/* Cards in historical summaries */
.display-card.turing-summary-card { /* Turing's cards in historical view */
    background-color: var(--turing-color-secondary);
    border-color: var(--turing-border-color);
    color: var(--turing-color-text);
}
.display-card.scherbius-card { /* Scherbius' cards in historical view */
    background-color: var(--scherbius-color-secondary);
    border-color: var(--scherbius-border-color);
    color: var(--scherbius-color-text);
}


/* --- Battle Display Area --- */
.battle-container { /* Common for #rewardsDisplay */
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px; /* Gap between battle items */
}
.battle-item { /* Common styling for individual battle displays (current or historical) */
    background-color: var(--neutral-bg-dark);
    width: calc(33% - 20px); /* Adjust for gap and padding */
    min-height: 250px;
    padding: 12px;
    margin: 5px 0; /* Vertical margin, horizontal handled by gap */
    border: 1px solid var(--neutral-border-color);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Current Round Battle Item Specifics */
.interactive-battle-container .battle-item {
    /* Any specific styles for current round battle items if different from historical */
}
.reward-info, .opponent-observed-info {
    margin-bottom: 8px;
    width: 100%;
}
.reward-info p, .opponent-observed-info p {
    margin: 3px 0;
    font-size: 0.85em;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}
.opponent-observed-info {
    padding-top: 8px;
    border-top: 1px dashed #e0e0e0;
}
.opponent-observed-info p { font-size: 0.8em; }


/* --- Historical Round View --- */
#historicalRoundViewArea {
    margin-top: 20px;
    background-color: #f9f9f9;
}
#historicalRoundViewArea h3 {
    color: var(--neutral-text-light);
    margin-top: 0;
    margin-bottom: 0.8em;
    text-align: center;
}
.history-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}
#historicalRoundIndicator {
    font-weight: bold;
    font-size: 0.95em;
    color: var(--turing-border-color);
}

/* Historical Battle Item Specifics */
.historical-battle-item {
    background-color: #f0f0f0;
    border-color: #dcdcdc;
}
.historical-battle-item .reward-info p { font-size: 0.8em; }

/* Dotted boxes for player cards in historical view */
.historical-battle-item .scherbius-observed-info,
.historical-battle-item .static-played-cards-area {
    padding: 8px;
    margin-top: 10px;
    border-radius: var(--card-border-radius);
    width: 95%; /* Adjust width as needed */
    margin-left: auto;
    margin-right: auto;
}
.historical-battle-item .scherbius-observed-info h4,
.historical-battle-item .static-played-cards-area h4 {
    font-size: 0.9em;
    color: var(--neutral-text-light);
    margin-bottom: 5px;
    text-align: center;
}

.historical-battle-item .scherbius-observed-info {
    border: 2px dotted var(--scherbius-color-primary);
    background-color: var(--scherbius-color-tertiary);
}
.historical-battle-item .scherbius-observed-info h4 { color: var(--scherbius-color-text); }


.historical-battle-item .static-played-cards-area {
    border: 2px dotted var(--turing-color-primary);
    background-color: var(--turing-color-tertiary);
}
.historical-battle-item .static-played-cards-area h4 { color: var(--turing-color-text); }


/* Battle Outcome Styling (Historical View) */
.battle-outcome {
    font-weight: bold;
    padding: 4px 8px;
    margin: 8px auto 5px auto;
    border-radius: var(--card-border-radius);
    text-align: center;
    font-size: 0.9em;
    width: fit-content;
}
.battle-outcome.turing-wins {
    background-color: var(--turing-color-secondary);
    color: var(--turing-color-text);
    border: 1px solid var(--turing-color-primary);
}
.battle-outcome.scherbius-wins {
    background-color: var(--scherbius-color-secondary);
    color: var(--scherbius-color-text);
    border: 1px solid var(--scherbius-color-primary);
}
.battle-outcome.draw {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

/* --- Game Over Message --- */
#gameOverMessage {
    background-color: var(--success-bg-color);
    border-color: var(--success-border-color);
    text-align: center;
}
#gameOverMessage h2 { color: var(--success-text-color); }

/* Scherbius Encrypt Checkbox */
#scherbiusControls label[for="scherbiusEncryptCheckbox"] {
    margin-left: 10px;
    font-size: 0.9em;
}

/* summary of config */
.scores-summary-box {
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.scores-summary-box h2 {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    font-size: 1.4em;
}

/* Common styles for ALL tables in the summary box */
.summary-table {
    border-collapse: collapse;
    font-size: 0.85em; /* Slightly smaller font for very compact tables */
    margin-bottom: 15px; /* Default bottom margin */
    /* width: 100%; */ /* Remove default full width, will be controlled by parent or specific ID/class */
}

.summary-table caption {
    font-weight: bold;
    text-align: left;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    font-size: 1.05em; /* Adjusted caption size */
}

.summary-table td {
    padding: 3px 6px; /* Reduced padding for compactness */
    border: 1px solid #e0e0e0;
    vertical-align: top; /* Align content to top if rows have different heights */
}

/* Default TD widths - applies to scores table and config tables when stacked */
.summary-table td:first-child {
    text-align: left;
    width: 60%; /* Default label column width */
}

.summary-table td:last-child {
    text-align: right;
    font-weight: bold;
    width: 40%; /* Default value column width */
}

.summary-table tbody tr:nth-child(even) {
    background-color: #f0f0f0;
}
.summary-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

/* --- Styles for specific table layouts --- */

/* Game Scores table always full width */
#game-scores-table {
    width: 100%;
}

/* Wrapper for the three horizontal config tables */
.config-tables-wrapper {
    display: flex;
    justify-content: space-between; /* Distribute space between tables */
    gap: 10px; /* Space between the config tables */
    margin-top: 10px; /* Space below the scores table */
    flex-wrap: wrap; /* Allow tables to wrap if not enough space */
}

/* Individual config tables within the flex wrapper */
.config-table {
    flex: 1 1 auto; /* Allow tables to grow and shrink, auto basis */
    min-width: 180px; /* Minimum width before wrapping or squishing too much */
    margin-bottom: 0; /* Remove bottom margin as 'gap' handles spacing */
    width: auto; /* Override any inherited width: 100% */
}

/* Adjust TD widths for config tables when they are side-by-side */
/* This applies when the screen is wide enough for them to be horizontal */
@media (min-width: 769px) { /* Adjust breakpoint as needed */
    .config-table td:first-child {
        width: 65%; /* Or 'auto' if you want content to dictate more */
    }
    .config-table td:last-child {
        width: 35%; /* Or 'auto' */
    }
}


/* Responsive: Stack config tables on smaller screens */
@media (max-width: 768px) { /* Adjust this breakpoint as needed */
    .config-tables-wrapper {
        flex-direction: column; /* Stack them vertically */
        gap: 15px; /* Vertical gap when stacked */
    }

    .config-table {
        width: 100%; /* Make each config table full width when stacked */
        min-width: 0; /* Reset min-width */
        margin-bottom: 15px; /* Add margin back if gap isn't enough or preferred */
    }
    .config-table:last-child {
        margin-bottom: 0;
    }

    /* Ensure default TD widths apply when stacked if they were changed for horizontal */
    .config-table td:first-child {
        width: 60%; /* Back to default or desired stacked width */
    }
    .config-table td:last-child {
        width: 40%; /* Back to default or desired stacked width */
    }
}