/* ============================================================================
 * Dangerous Space - Completionist Matrix Styles
 *
 * Single scrollable table with all heroes. Group headers span columns.
 * Carousel-style scroll arrows + styled scrollbar.
 *
 * Color scheme:
 *   Hero bg:       #5d3d6f (purple)
 *   Ship bg:       #ac885c (brown/bronze)
 *   Result bg:     #aaa
 *   Success:       green
 *   Failed:        red
 *   Real name label: orange (#ff8c00) on black bar
 *   Ship desc:     #b9ff93 (green) with dark overlay bg
 *   Waiting:       white
 *   Core Mission:  pink (default) / orange (active/completed)
 *   Week labels:   orange
 *   Borders:       2px solid #333
 *   Font:          Changa
 * ============================================================================ */

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

/* ===== Wrapper with scroll arrows ===== */
.ds-tracker {
    margin: 20px 0;
    font-family: 'Changa', sans-serif;
    position: relative;
}

.ds-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #5d3d6f #333;
}

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

.ds-scroll-wrapper::-webkit-scrollbar-track {
    background: #333;
    border-radius: 5px;
}

.ds-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #5d3d6f;
    border-radius: 5px;
}

.ds-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #7a5191;
}

/* ===== Scroll Arrows — Persona 5 Lightning Bolt Style ===== */
/* Same clip-path + colors as homepage carousel arrows (green outline, white fill) */
.ds-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    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;
}

.ds-scroll-arrow:hover {
    transform: translateY(-50%) 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);
}

.ds-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;
}

.ds-scroll-left {
    left: -60px;
    transform: translateY(-50%) scaleX(-1);
}

.ds-scroll-left:hover {
    transform: translateY(-50%) scaleX(-1) scale(1.15);
}

.ds-scroll-right {
    right: -60px;
}

/* ===== Table ===== */
.ds-matrix {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1420px;
}

/* All cells get borders */
.ds-matrix td {
    border: 2px solid #333;
    border-radius: 10px;
}

/* ===== Group Header Row (column spans) ===== */
.ds-group-header {
    background: #5d3d6f;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 10px;
    text-align: center;
    text-shadow: 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f;
}

/* ===== Hero Header Cells ===== */
.ds-corner-cell {
    background: transparent;
    border-color: transparent !important;
    width: 160px;
}

.ds-hero-cell {
    background-color: #5d3d6f;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: 140px;
    min-width: 180px;
    vertical-align: bottom;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.ds-hero-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 4px 2px;
    box-sizing: border-box;
}

.ds-hero-name {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f;
    line-height: 1;
    text-align: center;
}

.ds-hero-realname {
    color: #fff;
    font-size: 0.5rem;
    font-weight: 800;
    text-shadow: 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f;
    text-align: center;
    line-height: 1.1;
    margin-top: 2px;
    text-transform: uppercase;
}

/* Callsign black bar */
.ds-realname-label {
    color: #ff8c00;
    font-size: 10px;
    display: inline-block;
    background-color: #000;
    width: 100%;
    max-width: 110px;
    min-height: 12px;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 1px;
    text-shadow: none;
}

/* ===== Ship Row Header Cells ===== */
.ds-ship-cell {
    background-color: #ac885c;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 160px;
    vertical-align: middle;
    padding: 0;
    position: relative;
    overflow: hidden;
    font-size: 14px;
    font-weight: 800;
    color: white;
    text-shadow: 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f;
}

.ds-ship-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px 6px;
    box-sizing: border-box;
    text-align: center;
}

.ds-ship-name {
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f, 0 0 4px #5d3d6f;
    line-height: 1;
}

/* Ship description with dark overlay background */
.ds-ship-desc {
    color: #b9ff93;
    font-size: 0.45rem;
    font-weight: 400;
    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
    line-height: 1.2;
    margin-top: 6px;
    padding: 6px;
    background-image: url('/wp-content/uploads/2023/02/dark-25.webp');
}

/* ===== Result Cells ===== */
.ds-result-cell {
    background: #aaa;
    border-radius: 10px;
    vertical-align: middle;
    text-align: center;
    padding: 0;
    position: relative;
    font-family: 'Changa', sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    color: #ef235c;
    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
    min-width: 180px;
}

.ds-result-cell.ds-has-assignment {
    padding: 2px;
}

/* ===== Nested Mission Table ===== */
.ds-mission-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
}

.ds-mission-table td {
    border: hidden !important;
    border-radius: 0 !important;
    padding: 1px 2px 1px 4px;
    vertical-align: middle;
    height: 42px;
}

/* Alternating row backgrounds (dark overlay on rows 2 and 4) */
.ds-mission-row:nth-of-type(2),
.ds-mission-row:nth-of-type(4) {
    background-image: url('/wp-content/uploads/2023/02/dark-55.webp');
}

.ds-mission-label {
    text-align: left;
    width: 55%;
    color: white;
}

.ds-mission-week {
    display: block;
    color: pink;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.ds-mission-week--active {
    color: orange;
}

.ds-mission-type {
    display: block;
    color: white;
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.ds-mission-result {
    text-align: center;
    width: 45%;
    vertical-align: middle;
    font-size: 16px;
}

/* Waiting state */
.ds-waiting {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

/* Success state */
.ds-result-text.ds-result-success,
.ds-result-link {
    color: green;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.ds-result-link:hover {
    text-decoration: underline;
}

/* Failed state */
.ds-result-text.ds-result-failed {
    color: red;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.ds-attempts {
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: block;
    line-height: 1;
    text-align: center;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .ds-corner-cell {
        width: 110px;
    }

    .ds-ship-cell {
        width: 110px;
    }

    .ds-hero-cell {
        height: 100px;
        min-width: 130px;
    }

    .ds-result-cell {
        min-width: 130px;
    }

    .ds-hero-name {
        font-size: 0.9rem;
    }

    .ds-ship-name {
        font-size: 0.55rem;
    }

    .ds-mission-week,
    .ds-mission-type {
        font-size: 0.45rem;
    }

    .ds-waiting,
    .ds-result-text,
    .ds-result-link {
        font-size: 11px;
    }

    .ds-mission-table td {
        height: 36px;
    }

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

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

    .ds-scroll-left {
        left: -38px;
    }

    .ds-scroll-right {
        right: -38px;
    }
}