:root {
    --background: #121820;
    --panel: #1d2632;
    --border: #3c4b5c;
    --text: #f5f8fc;
    --muted: #b3c1d1;

    /* Main matrix */

    --paired: #463455;
    --suited: #24483e;
    --offsuit: #55432c;

    /* Third-card matrix */

    --rainbow: #293544;
    --twotone: #263d59;
    --monotone: #245044;

    /* Bright suit colors */

    --suit-1: #8dd4ff;
    --suit-2: #ff9da3;
    --suit-3: #92efb3;
}

/* General */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: system-ui, sans-serif;
}

.container {
    max-width: 1600px;
    margin: auto;
    padding: 24px;
}

header {
    margin-bottom: 24px;
}

h1 {
    margin: 0 0 5px;
    font-size: 28px;
}

header p {
    margin: 0;
    color: var(--muted);
}

/* Workspace */

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Panels */

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    min-width: 0;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}

.panel-header h2 {
    margin: 0;
    font-size: 17px;
}

.panel-header span {
    color: var(--muted);
    font-size: 12px;
}

/* Both matrices */

.matrix {
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
}

/* Matrix cells */

.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    aspect-ratio: 1;
    min-width: 0;
    padding: 2px;

    border: 1px solid var(--border);
    border-radius: 4px;

    background: #293544;
    color: var(--text);

    font-family: inherit;
    cursor: pointer;

    transition:
        background 0.12s,
        border-color 0.12s,
        filter 0.12s;
}

.cell:hover:not(:disabled) {
    border-color: #8ca6c4;
    filter: brightness(1.25);
}

.cell:disabled {
    cursor: default;
}

.cell:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Empty cells */

.cell.empty {
    background: #202b38;
    border-color: #2c3948;
}

/* Main matrix */

.cell.paired {
    background: var(--paired);
}

.cell.suited {
    background: var(--suited);
}

.cell.offsuit {
    background: var(--offsuit);
}

.cell.active {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

.main-label {
    font-size: clamp(10px, 1vw, 16px);
    font-weight: 700;
}

.main-count {
    margin-top: 2px;
    font-size: 9px;
    color: #c3cfdd;
}

/* Third-card matrix */

.cell.rainbow {
    background: var(--rainbow);
}

.cell.twotone {
    background: var(--twotone);
}

.cell.monotone {
    background: var(--monotone);
}

.cell.flop-selected {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

/*
 * Complete flop display
 *
 * Same color = same suit.
 * Different colors = different suits.
 */

.full-board {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;

    font-size: clamp(12px, 1.4vw, 21px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.suit-0 {
    color: var(--suit-1);
}

.suit-1 {
    color: var(--suit-2);
}

.suit-2 {
    color: var(--suit-3);
}

/* Selected flop details */

#flopDetails {
    margin-top: 20px;
    padding: 16px;
    min-height: 95px;

    border: 1px solid var(--border);
    border-radius: 6px;

    background: #202b38;
}

#selectedFlop {
    display: flex;
    gap: 5px;
    font-size: 30px;
    font-weight: 800;
}

#selectedDescription {
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
}

/* Legends */

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 18px;

    font-size: 12px;
    color: var(--muted);
}

.legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend i {
    display: inline-block;

    width: 11px;
    height: 11px;

    border: 1px solid var(--border);
    border-radius: 2px;

    flex-shrink: 0;
}

/* Main matrix legend */

.legend-paired {
    background: var(--paired);
}

.legend-suited {
    background: var(--suited);
}

.legend-offsuit {
    background: var(--offsuit);
}

/* Third-card matrix legend */

.legend-rainbow {
    background: var(--rainbow);
}

.legend-twotone {
    background: var(--twotone);
}

.legend-monotone {
    background: var(--monotone);
}

/* Footer */

footer {
    margin-top: 20px;
    font-size: 13px;
    color: var(--muted);
}

/* Responsive layout */

@media (max-width: 1050px) {

    .workspace {
        grid-template-columns: 1fr;
    }

    .main-label {
        font-size: clamp(10px, 2vw, 17px);
    }

    .full-board {
        font-size: clamp(11px, 2.5vw, 22px);
    }
}

@media (max-width: 600px) {

    .container {
        padding: 10px;
    }

    .panel {
        padding: 10px;
    }

    .matrix {
        gap: 2px;
    }

    .cell {
        border-radius: 2px;
        padding: 1px;
    }

    .main-label {
        font-size: 10px;
    }

    .main-count {
        display: none;
    }

    .full-board {
        font-size: 10px;
    }

    .legend {
        gap: 10px;
        font-size: 11px;
    }
}

/*
 * Third-card matrix: structural guidance.
 *
 * These colors apply only to empty cells.
 * Occupied flop cells retain their texture colors.
 */

/* Diagonal */
#thirdMatrix .cell.empty.region-diagonal {
    background: #352d43;
    border-color: #514363;
}

/* Upper-right: suited */
#thirdMatrix .cell.empty.region-suited {
    background: #203b36;
    border-color: #305047;
}

/* Lower-left: offsuit */
#thirdMatrix .cell.empty.region-offsuit {
    background: #3b3228;
    border-color: #544435;
}

/* Slightly emphasize the diagonal even when occupied */

#thirdMatrix .cell.region-diagonal:not(.empty) {
    box-shadow: inset 0 0 0 1px #a18bc4;
}

/* Starting combinations with no available flop classes */

#mainMatrix .cell.unavailable {
    background: #252b33;
    border-color: #303844;
    color: #66717e;
    opacity: 0.55;
    cursor: not-allowed;
}

#mainMatrix .cell.unavailable:hover {
    filter: none;
    border-color: #303844;
}

#mainMatrix .cell.unavailable .main-count {
    color: #66717e;
}

/* Flop selection guide */

.guide {
    margin-top: 24px;
    padding: 24px;

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.guide h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

.guide > p {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.guide-card {
    padding: 18px;

    background: #202b38;
    border: 1px solid var(--border);
    border-radius: 7px;
}

.guide-card h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--text);
}

.guide-card p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.guide-card p:last-child {
    margin-bottom: 0;
}

.guide-card .guide-example {
    padding: 12px 8px;
    margin: 14px 0;

    background: #151e29;
    border: 1px solid #344558;
    border-radius: 5px;

    color: var(--suit-1);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.guide-note {
    margin-top: 18px;
    padding: 14px 18px;

    background: #263d59;
    border-left: 3px solid var(--suit-1);
    border-radius: 5px;

    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}

.guide-note strong {
    color: var(--suit-1);
}

/* Responsive guide */

@media (max-width: 1200px) {
    .guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .guide {
        padding: 14px;
    }

    .guide-grid {
        grid-template-columns: 1fr;
    }

    .guide-card {
        padding: 14px;
    }
}