/* ============================================================================
 * Fliptown - Solo Progress Chart Styles
 *
 * Western-themed completionist grid: 6 Cowbots × 16 Roles × Easy/Normal/Hard
 * Plus The Stranger solo mode & Solo Achievements checklist.
 *
 * Color scheme:
 *   Background:     #c4956a (warm parchment tan)
 *   Alt row bg:     #b8864f (darker tan)
 *   Role cell bg:   #4a2c12 (dark brown)
 *   Bot header bg:  #d4a76a (lighter warm tan)
 *   Borders:        2px solid #5a3a1a (dark brown)
 *   High score:     #ffd700 (gold)
 *   Completed:      #d4531a (burnt orange stamp)
 *   Stranger bg:    #4a2c12 (dark brown bar)
 *   Achievements bg:#b8864f
 *   Font:           Rye (western display), Changa (body)
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rye&family=Changa:wght@400;600;700;800&display=swap');

/* ===== Wrapper with scroll arrows ===== */
/* Break out of content area padding (same technique as STS tracker) */
.ft-tracker {
    margin: 20px 0;
    position: relative;
    font-family: 'Changa', sans-serif;
}

.ft-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #8b5e3c #4a2c12;
}

/* Webkit scrollbar styling */
.ft-scroll-wrapper::-webkit-scrollbar {
    height: 10px;
}

.ft-scroll-wrapper::-webkit-scrollbar-track {
    background: #4a2c12;
    border-radius: 5px;
}

.ft-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #8b5e3c;
    border-radius: 5px;
}

.ft-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a8734c;
}

/* ===== Scroll Arrows — Persona 5 Lightning Bolt Style ===== */
.ft-scroll-arrow {
    position: absolute;
    top: 120px;
    z-index: 10;
    width: 65px;
    height: 90px;
    background: #4da44b;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000);
    clip-path: polygon(
        65% 50%,
        35% 6%,
        42.5% 35%,
        0% 27.5%,
        0% 50%,
        42.5% 52.5%,
        32.5% 94%
    );
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.ft-scroll-arrow:hover {
    transform: scale(1.15);
    filter: drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000);
}

.ft-scroll-arrow .inner {
    position: absolute;
    inset: 4px 6px;
    background: #fff;
    clip-path: polygon(
        65% 50%,
        35% 6%,
        42.5% 35%,
        0% 27.5%,
        0% 50%,
        42.5% 52.5%,
        32.5% 94%
    );
    z-index: 1;
    pointer-events: none;
}

.ft-scroll-left {
    left: -75px;
    transform: scaleX(-1);
}

.ft-scroll-left:hover {
    transform: scaleX(-1) scale(1.15);
}

.ft-scroll-right {
    right: -75px;
}

/* ===== Table ===== */
.ft-matrix {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1200px;
    background: #c4956a;
}

/* All cells get borders */
.ft-matrix td {
    border: 2px solid #5a3a1a;
    padding: 0;
}

/* ===== Bot Header Cells ===== */
.ft-corner-cell {
    background: #d4a76a;
    border-color: transparent !important;
    width: 180px;
    min-width: 180px;
    position: sticky;
    left: 0;
    z-index: 2;
}

.ft-bot-cell {
    background: #d4a76a;
    min-width: 180px;
    vertical-align: bottom;
    padding: 0;
    overflow: hidden;
}

.ft-bot-img {
    display: block;
    width: 100%;
    height: auto;
}

.ft-bot-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 8px 4px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.ft-bot-name {
    color: #3a1c05;
    font-family: 'Rye', serif;
    font-size: 1rem;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
}

.ft-bot-title {
    color: #6b3a15;
    font-family: 'Rye', serif;
    font-size: 0.55rem;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 1px;
}

/* ===== Role Rows ===== */
.ft-role-row {
    background: #c4956a;
}

.ft-role-row-alt {
    background: #b8864f;
}

/* ===== Role Name Cell (left column) ===== */
.ft-role-cell {
    background: #4a2c12;
    width: 180px;
    min-width: 180px;
    padding: 6px 10px !important;
    vertical-align: middle;
    text-align: center;
    position: sticky;
    left: 0;
    z-index: 2;
}

.ft-role-name {
    color: #f5deb3;
    font-family: 'Rye', serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    display: block;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.ft-high-score {
    color: #ffd700;
    font-family: 'Rye', serif;
    font-size: 0.75rem;
    font-weight: 700;
    display: block;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 2px;
}

/* ===== Result Cells (Easy/Normal/Hard grid) ===== */
.ft-result-cell {
    vertical-align: middle;
    text-align: center;
    padding: 4px 6px !important;
    min-width: 180px;
}

.ft-difficulty-group {
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

/* Individual difficulty badges */
.ft-diff {
    font-family: 'Changa', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    color: #4a2c12;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.ft-diff-easy {
    color: #3a6b1e;
}

.ft-diff-normal {
    color: #4a2c12;
}

.ft-diff-hard {
    color: #8b1a1a;
}

/* Completed state — stroked text with large suit watermarks */
.ft-diff.ft-completed {
    position: relative;
    font-weight: 800;
    font-size: 0.8rem;
    -webkit-text-stroke: 1px;
    paint-order: stroke fill;
    overflow: visible;
}

/* Large suit watermark behind text */
.ft-diff.ft-completed::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}

/* ♣ Club for Easy wins */
.ft-diff-easy.ft-completed {
    color: #1a5c1e;
    -webkit-text-stroke-color: #fff;
}

.ft-diff-easy.ft-completed::before {
    content: '♣';
    color: #1a5c1e;
}

/* ♥ Heart for Normal wins */
.ft-diff-normal.ft-completed {
    color: #b5331e;
    -webkit-text-stroke-color: #fff;
}

.ft-diff-normal.ft-completed::before {
    content: '♥';
    color: #b5331e;
}

/* ♠ Spade for Hard wins */
.ft-diff-hard.ft-completed {
    color: #1a1a2e;
    -webkit-text-stroke-color: #fff;
}

.ft-diff-hard.ft-completed::before {
    content: '♠';
    color: #1a1a2e;
}

/* Cell highlight when it has any results */
.ft-has-result {
    background: rgba(212, 83, 26, 0.08);
}

/* ===== THE STRANGER — Solo Mode Bar ===== */
.ft-stranger {
    background: #4a2c12;
    margin: 4px 0 0 0;
    padding: 10px 16px;
    border: 2px solid #5a3a1a;
    border-radius: 6px;
}

.ft-stranger-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.ft-stranger-title {
    color: #f5deb3;
    font-family: 'Rye', serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.ft-stranger-subtitle {
    color: #a8734c;
    font-family: 'Rye', serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* 12-game grid — 6 per row */
.ft-stranger-games {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.ft-stranger-game {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #5a3a1a;
    padding: 6px 10px;
    border-radius: 4px;
    justify-content: center;
}

/* Item name (left of gold number) */
.ft-stranger-item {
    color: #f5deb3;
    font-family: 'Changa', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Gold rating with sheriff star behind */
.ft-stranger-rating {
    position: relative;
    color: #ffd700;
    font-family: 'Rye', serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    min-width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    z-index: 1;
}

/* Sheriff star — two overlapping triangles via clip-path */
.ft-stranger-rating::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #8b5e3c;
    clip-path: polygon(
        50% 0%, 63% 30%, 97% 25%, 72% 50%,
        85% 85%, 50% 65%, 15% 85%, 28% 50%,
        3% 25%, 37% 30%
    );
    z-index: -1;
    opacity: 0.6;
}

/* Actual game score (right of gold number) */
.ft-stranger-score {
    color: #f5deb3;
    font-family: 'Changa', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Empty/unplayed games */
.ft-stranger-empty .ft-stranger-rating {
    color: #6b4a2a;
}

.ft-stranger-empty .ft-stranger-rating::before {
    opacity: 0.2;
}

.ft-stranger-empty .ft-stranger-score {
    color: #6b4a2a;
}

.ft-stranger-empty .ft-stranger-item {
    color: #8b6a4a;
}

/* ===== SOLO ACHIEVEMENTS ===== */
.ft-achievements {
    background: #b8864f;
    margin: 4px 0 0 0;
    padding: 16px;
    border: 2px solid #5a3a1a;
    border-radius: 6px;
}

.ft-achievements-header {
    margin-bottom: 12px;
}

.ft-achievements-title {
    color: #3a1c05;
    font-family: 'Rye', serif;
    font-size: 1.4rem;
    text-transform: uppercase;
    display: block;
}

.ft-achievements-subtitle {
    color: #6b3a15;
    font-family: 'Changa', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
}

.ft-achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ft-achievement {
    background: #c4956a;
    color: #3a1c05;
    font-family: 'Changa', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #8b5e3c;
    line-height: 1.3;
}

/* Completed achievements — green checkmark */
.ft-achievement-done {
    border-color: #2a7a1e;
    background: rgba(42, 122, 30, 0.1);
}

.ft-achievement-done::before {
    content: '✔ ';
    color: #2a7a1e;
    font-weight: 800;
}

/* ===== Sticky Header Clone ===== */
.ft-sticky-header {
    position: fixed;
    top: 88px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background: none;
    padding-bottom: 12px;
}

.ft-sticky-header td {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.ft-sticky-header table {
    border-collapse: separate;
    border-spacing: 0;
    background: none;
}

.ft-sticky-header td {
    border: 2px solid #5a3a1a;
    padding: 0;
}


/* ===== Responsive ===== */
@media (max-width: 768px) {
    .ft-corner-cell,
    .ft-role-cell {
        width: 120px;
        min-width: 120px;
    }

    .ft-bot-cell {
        min-width: 140px;
    }

    .ft-result-cell {
        min-width: 140px;
    }

    .ft-bot-name {
        font-size: 0.8rem;
    }

    .ft-role-name {
        font-size: 0.7rem;
    }

    .ft-diff {
        font-size: 0.55rem;
        padding: 1px 4px;
    }

    .ft-difficulty-group {
        gap: 4px;
    }

    .ft-scroll-arrow {
        width: 45px;
        height: 63px;
    }

    .ft-scroll-arrow .inner {
        inset: 3px 4px;
    }

    .ft-scroll-left {
        left: -48px;
    }

    .ft-scroll-right {
        right: -48px;
    }

    .ft-achievements-grid {
        grid-template-columns: 1fr;
    }

    .ft-stranger-games {
        grid-template-columns: repeat(3, 1fr);
    }
}