/* Tides of Terragos patch notes: scoped to avoid the rest of the site. */
.tp-page{--tp-gold:#d3a951;--tp-cream:#f8e4b5;--tp-muted:#b7b7b7;--tp-border:#49443c;width:min(1240px,94%);margin:28px auto 60px;color:#f1eee7;font-size:14px;line-height:1.65}
.tp-page *{box-sizing:border-box}.tp-page a{text-decoration:none}.tp-page a:hover{text-decoration:none}
.tp-hero{padding:32px clamp(20px,4vw,46px);border:1px solid #5a5142;border-radius:14px;background:linear-gradient(130deg,#2b271f,#181818 68%);box-shadow:0 12px 30px #0005;margin-bottom:20px}
.tp-eyebrow{color:var(--tp-gold);font-size:11px;letter-spacing:2.3px;font-weight:800;text-transform:uppercase}
.tp-hero h1{color:var(--tp-cream);font-size:clamp(31px,5vw,46px);margin:6px 0 10px;font-weight:800;line-height:1.15}
.tp-hero p{max-width:740px;margin:0;color:#d1d1d1}.tp-hero .tp-date{color:var(--tp-gold);font-size:12px;margin:0 0 12px}
.tp-layout{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(250px,.9fr);gap:20px;align-items:start}
.tp-featured,.tp-archive,.tp-empty{border:1px solid var(--tp-border);background:#1b1b1b;border-radius:12px;box-shadow:0 8px 20px #0003}
.tp-featured{padding:clamp(20px,3vw,30px);border-top:2px solid var(--tp-gold)}
.tp-meta{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;color:#aaa;font-size:12px}
.tp-version{font-weight:800;letter-spacing:1px;color:var(--tp-gold)}.tp-featured>h2{font-size:clamp(23px,3.5vw,31px);color:var(--tp-cream);font-weight:800;margin:13px 0 7px}
.tp-summary{color:#d0d0d0;margin:0 0 18px}.tp-section-preview{padding:11px 0;border-top:1px solid #383838}
.tp-section-preview h3{color:#e6c88d;font-size:15px;margin:0 0 7px;font-weight:750}
.tp-section-preview ul,.tp-detail-section ul{margin:0;padding-left:20px;color:#d2d2d2}.tp-section-preview li,.tp-detail-section li{margin:5px 0}
.tp-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:7px;padding:11px 17px;font-size:13px;font-weight:800;margin-top:21px}
.tp-button-gold{background:#d3a951;color:#1b1710!important;border:1px solid #efc476}.tp-button-gold:hover{background:#f0c778;color:#17130b!important}
.tp-archive{padding:22px}.tp-archive h2{font-size:17px;font-weight:800;color:var(--tp-cream);margin:0 0 12px}.tp-archive-link{display:block;padding:15px 1px;border-top:1px solid #393939;color:#eaeaea!important}.tp-archive-link strong{display:block;font-size:13px;line-height:1.4}.tp-archive-link span{display:block;font-size:11px;color:#aaa;margin-top:5px}.tp-archive-link:hover strong,.tp-archive-link.tp-current strong{color:#f0ca81}
.tp-back{display:inline-block;color:#e6c17b!important;margin:0 0 17px;font-weight:700}.tp-back:hover{text-decoration:underline!important}
.tp-detail-section+ .tp-detail-section{margin-top:24px;padding-top:24px;border-top:1px solid #414141}.tp-detail-section h2{font-size:21px;font-weight:800;color:var(--tp-cream);margin:0 0 12px}
.tp-empty{padding:30px}.tp-empty h2{font-size:21px;color:var(--tp-cream)}.tp-empty p{color:#bbb}
@media(max-width:790px){.tp-layout{grid-template-columns:1fr}.tp-archive{padding:18px}}@media(max-width:540px){.tp-page{width:auto;margin:14px 12px 45px}.tp-hero{padding:22px 18px}.tp-featured{padding:19px}}
/* Card comparisons inside individual patch sections */
.tp-card-compare{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin:0 0 18px;
}

.tp-card-panel{
    margin:0;
    padding:16px;
    border:1px solid #3d3d3d;
    border-radius:12px;
    background:#222;
    text-align:center;
    box-shadow:0 8px 18px rgba(0,0,0,.24);
}

.tp-card-label{
    display:inline-block;
    margin-bottom:12px;
    padding:5px 10px;
    border-radius:999px;
    background:#2d271c;
    border:1px solid #6e5932;
    color:#f0ca81;
    font-size:11px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.tp-card-image{
    display:block;
    width:min(100%, 260px);
    height:auto;
    margin:0 auto;
    border-radius:10px;
    box-shadow:0 10px 24px rgba(0,0,0,.45);
}

.tp-card-name{
    margin-top:12px;
    color:#f8e4b5;
    font-size:13px;
    font-weight:700;
}

@media (max-width: 700px){
    .tp-card-compare{
        grid-template-columns:1fr;
    }
}


/* ==========================================
   PATCH NOTES — CARD COMPARISON
========================================== */

/* Space between explanations and card images */
.tp-patch-changes {
    margin: 0 0 24px !important;
    padding-left: 20px;
    color: #e0e0e0;
    line-height: 1.75;
}

.tp-patch-changes li {
    margin-bottom: 10px;
}

/* Before/After comparison */
.tp-card-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0 8px;
    align-items: start;
}

/* Individual card container */
.tp-card-panel {
    min-width: 0;
    margin: 0;
    padding: 16px;
    background: #242424;
    border: 1px solid #414141;
    border-radius: 10px;
    text-align: center;
}

/* Before / After labels */
.tp-card-label {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 16px;

    background: #32291c;
    color: #f8e4b5;
    border: 1px solid #806333;
    border-radius: 20px;

    font-size: 12px;
    font-weight: 800;
}

/* Clickable card image */
.tp-card-preview-button {
    display: block;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    padding: 0;

    background: transparent;
    border: 1px solid #555;
    border-radius: 8px;

    overflow: hidden;
    cursor: zoom-in;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.tp-card-preview-button:hover {
    transform: translateY(-3px);
    border-color: #d3a951;
    box-shadow:
        0 0 0 2px rgba(211,169,81,.25),
        0 12px 26px rgba(0,0,0,.45);
}

.tp-card-preview-button:focus-visible {
    outline: 3px solid #d3a951;
    outline-offset: 3px;
}

/* Preserve card proportions */
.tp-card-preview-button .tp-card-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

/* Caption underneath */
.tp-card-name {
    margin-top: 12px;
    color: #f8e4b5;
    font-size: 13px;
    font-weight: 700;
}

.tp-card-name small {
    display: block;
    margin-top: 4px;
    color: #a8a8a8;
    font-size: 11px;
    font-weight: 400;
}

/* Keep both cards side by side on mobile */
@media (max-width: 700px) {
    .tp-card-compare {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tp-card-panel {
        padding: 9px;
    }

    .tp-card-label {
        font-size: 10px;
        padding: 4px 9px;
        margin-bottom: 9px;
    }

    .tp-card-name {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-card-preview-button {
        transition: none;
    }

    .tp-card-preview-button:hover {
        transform: none;
    }
}


/* ==========================================
   PATCH NOTES — COMPACT CARD PREVIEWS
   Inspired by rules.html
========================================== */

.tp-card-compare {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;

    margin: 16px 0 8px;
}

/* Compact card wrapper */
.tp-card-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 105px;
    min-width: 0;
    margin: 0;
    padding: 8px;

    background: #222;
    border: 1px solid #414141;
    border-radius: 8px;
}

/* Before / After label */
.tp-card-label {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 4px 2px;

    color: #f8e4b5;
    background: #32291c;
    border: 1px solid #806333;
    border-radius: 5px;

    font-size: 10px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

/* Match rules.html thumbnail sizing */
.tp-card-preview-button {
    display: block;
    width: 78px !important;
    max-width: 78px !important;
    height: auto;
    margin: 0;
    padding: 0;

    background: transparent;
    border: 1px solid #555;
    border-radius: 5px;

    overflow: hidden;
    cursor: zoom-in;
    transform: none !important;
}

.tp-card-preview-button:hover,
.tp-card-preview-button:focus-visible {
    border-color: #d3a951;
    box-shadow: 0 0 10px rgba(211,169,81,.3);
}

.tp-card-preview-button .tp-card-image {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    margin: 0;

    border: 0;
    border-radius: 4px;
    box-shadow: none;
}

/* Mobile sizing */
@media (max-width: 540px) {
    .tp-card-compare {
        gap: 8px;
    }

    .tp-card-panel {
        width: 92px;
        padding: 6px;
    }

    .tp-card-preview-button {
        width: 65px !important;
        max-width: 65px !important;
    }

    .tp-card-label {
        font-size: 9px;
    }
}


/* ==========================================
   PATCH NOTES — TEXT LEFT, CARDS RIGHT
========================================== */

.tp-patch-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    width: 100%;
}

.tp-patch-description {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-patch-changes {
    margin: 0 !important;
    padding-left: 20px;
    line-height: 1.75;
}

.tp-card-compare {
    display: flex !important;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 !important;
}

.tp-card-panel {
    width: 105px;
    flex: 0 0 105px;
}

/* Smaller screens: stack cards below text */
@media (max-width: 700px) {
    .tp-patch-row {
        flex-direction: column;
        gap: 16px;
    }

    .tp-card-compare {
        justify-content: flex-start;
    }

    .tp-card-panel {
        width: 92px;
        flex: 0 0 92px;
    }
}


/* ==========================================
   PATCH NOTES — ALIGN CARDS WITH HEADING
========================================== */

.tp-detail-section {
    position: relative;
}

.tp-detail-section:has(.tp-card-compare) {
    padding-right: 235px;
}

.tp-detail-section .tp-card-compare {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 !important;
    align-items: flex-start;
}

/* Let the description use the remaining width */
.tp-detail-section .tp-patch-row {
    display: block;
}

.tp-detail-section .tp-patch-description {
    width: 100%;
}

/* Mobile: return to normal stacked layout */
@media (max-width: 700px) {
    .tp-detail-section:has(.tp-card-compare) {
        padding-right: 0;
    }

    .tp-detail-section .tp-card-compare {
        position: static;
        margin-top: 14px !important;
    }
}

/* Lower cards slightly on sections after the first one */
.tp-detail-section + .tp-detail-section .tp-card-compare {
    top: 18px;
}


/* ==========================================
   PATCH NOTES — BEFORE / AFTER LIGHTBOX
========================================== */

.tp-gallery-overlay[hidden] {
    display: none !important;
}

.tp-gallery-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(0, 0, 0, 0.92);
}

.tp-gallery-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(100%, 900px);
    max-height: calc(100dvh - 40px);

    padding: 20px;
    color: #f8e4b5;
}

.tp-gallery-close {
    position: absolute;
    top: 0;
    right: 0;

    width: 42px;
    height: 42px;

    background: #242424;
    color: white;

    border: 1px solid #666;
    border-radius: 8px;

    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.tp-gallery-close:hover {
    border-color: #d3a951;
    background: #333;
}

.tp-gallery-heading {
    text-align: center;
    margin-bottom: 14px;
}

.tp-gallery-version {
    display: block;
    color: #d3a951;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.tp-gallery-name {
    margin: 5px 0 0;
    color: #f8e4b5;
    font-size: 19px;
    font-weight: 700;
}

.tp-gallery-viewer {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    justify-items: center;
    gap: 18px;
    width: 100%;
    min-height: 0;
}

.tp-gallery-image {
    display: block;
    width: auto;
    height: auto;

    max-width: 100%;
    max-height: calc(100dvh - 190px);

    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0,0,0,.7);
}

.tp-gallery-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 58px;

    background: rgba(40, 40, 40, .9);
    color: #f8e4b5;

    border: 1px solid #777;
    border-radius: 9px;

    font-size: 29px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.tp-gallery-arrow:hover:not(:disabled) {
    background: #493a22;
    border-color: #d3a951;
}

.tp-gallery-arrow:disabled {
    opacity: .18;
    cursor: default;
}

.tp-gallery-counter {
    margin-top: 15px;
    color: #aaa;
    font-size: 12px;
    letter-spacing: 1px;
}

body.tp-gallery-open {
    overflow: hidden;
}

/* Mobile */
@media (max-width: 600px) {
    .tp-gallery-overlay {
        padding: 8px;
    }

    .tp-gallery-dialog {
        padding: 50px 4px 12px;
        max-height: calc(100dvh - 16px);
    }

    .tp-gallery-viewer {
        grid-template-columns: 32px minmax(0,1fr) 32px;
        gap: 5px;
    }

    .tp-gallery-arrow {
        width: 32px;
        height: 48px;
        font-size: 22px;
    }

    .tp-gallery-image {
        max-height: calc(100dvh - 205px);
    }

    .tp-gallery-close {
        top: 0;
        right: 6px;
    }
}


/* ==========================================
   PATCH NOTES — RELEASE ARCHIVE
========================================== */

/* Header */
.tp-index-page .tp-index-hero {
    position: relative;
    margin-bottom: 24px;

    background: linear-gradient(
        135deg,
        #2b271f,
        #181818 68%
    );
}

.tp-index-page .tp-index-hero p {
    max-width: 760px;
}

.tp-index-count {
    display: inline-flex;
    align-items: center;

    margin-top: 18px;
    padding: 5px 13px;

    color: #f0d294;
    background: #30291e;

    border: 1px solid #675334;
    border-radius: 30px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Release list */
.tp-release-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Individual release */
.tp-release-card {
    position: relative;
    overflow: hidden;

    border: 1px solid #414141;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #202020,
        #171717 75%
    );

    box-shadow: 0 6px 20px rgba(0,0,0,.2);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.tp-release-card:hover {
    border-color: #a9874d;

    box-shadow:
        0 9px 28px rgba(0,0,0,.32);

    transform: translateY(-2px);
}

/* Newest release gets gold accent */
.tp-release-card:first-child {
    border-top: 2px solid #d3a951;
}

.tp-release-content {
    padding: 25px 30px;
}

/* Version, date, and latest label */
.tp-release-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tp-release-version {
    color: #d3a951;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.tp-release-latest {
    padding: 3px 9px;

    border-radius: 4px;
    border: 1px solid #6b5836;

    background: #362b1b;
    color: #f8e4b5;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
}

.tp-release-date {
    margin-left: auto;

    color: #aaa;
    font-size: 12px;
}

/* Release title */
.tp-release-title {
    margin: 12px 0 8px;

    font-size: clamp(21px, 3vw, 27px);
    line-height: 1.25;
    font-weight: 800;
}

.tp-index-page .tp-release-title a {
    color: #f8e4b5;
    text-decoration: none;
}

.tp-index-page .tp-release-title a:hover {
    color: #ffe6a6;
}

/* Summary */
.tp-release-summary {
    margin: 0;
    max-width: 950px;

    color: #c9c9c9;

    font-size: 14px;
    line-height: 1.75;
}

/* Bottom action */
.tp-release-footer {
    display: flex;
    justify-content: flex-start;

    margin-top: 18px;
}

.tp-index-page .tp-release-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 16px;

    border: 1px solid #8e7345;
    border-radius: 7px;

    background: #32291c;
    color: #f8e4b5;

    font-size: 12px;
    font-weight: 800;
    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease;
}

.tp-index-page .tp-release-button:hover {
    background: #49371f;
    border-color: #d3a951;
    color: #fff0c7;
}

.tp-release-button span {
    font-size: 17px;
    line-height: 1;
}

/* Mobile */
@media (max-width: 650px) {

    .tp-release-content {
        padding: 20px 18px;
    }

    .tp-release-meta {
        gap: 8px;
    }

    .tp-release-date {
        width: 100%;
        margin-left: 0;
    }

    .tp-release-title {
        font-size: 22px;
        margin-top: 10px;
    }

    .tp-release-summary {
        font-size: 13px;
        line-height: 1.7;
    }

    .tp-release-footer {
        margin-top: 15px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .tp-release-card {
        transition: none;
    }

    .tp-release-card:hover {
        transform: none;
    }
}


/* Center Before/After cards on mobile */
@media (max-width: 700px) {

    .tp-detail-section .tp-card-compare {
        position: static !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start;
        width: 100%;
        margin: 18px auto 0 !important;
        gap: 12px;
    }

    .tp-detail-section .tp-card-panel {
        flex: 0 0 auto;
    }

    .tp-detail-section:has(.tp-card-compare) {
        padding-right: 0 !important;
    }

}


/* =========================================
   ADDITIONAL PATCH CHANGE CLASSIFICATIONS
   ========================================= */

/* Yellow — Adjustment / Neutral */
.tp-type-adjustment,
.tp-type-neutral {
    --change-color: #f0cc68;
    --change-bg: rgba(240, 204, 104, 0.12);
    --change-border: rgba(240, 204, 104, 0.40);
}

/* Purple — Rework */
.tp-type-rework {
    --change-color: #bb93ff;
    --change-bg: rgba(150, 90, 230, 0.14);
    --change-border: rgba(187, 147, 255, 0.42);
}

/* Purple — New Card */
.tp-type-new {
    --change-color: #bb93ff;
    --change-bg: rgba(150, 90, 230, 0.14);
    --change-border: rgba(187, 147, 255, 0.42);
}

/* Add the new classifications to detailed sections */
.tp-detail-section.tp-type-adjustment,
.tp-detail-section.tp-type-neutral,
.tp-detail-section.tp-type-new {
    border-left: 4px solid var(--change-color);
    padding-left: 17px;
    margin-bottom: 30px;
    scroll-margin-top: 75px;
}

@media (max-width: 700px) {
    .tp-detail-section.tp-type-adjustment,
    .tp-detail-section.tp-type-neutral,
    .tp-detail-section.tp-type-new {
        padding-left: 12px;
    }
}

/* Overview count colors */
.tp-count-adjustment,
.tp-count-neutral {
    background: #443b20;
    color: #f0cc68;
}

.tp-count-new,
.tp-count-rework {
    background: #392747;
    color: #d4b5ff;
}


/* ================================================
   FULL-WIDTH PATCH NOTES + FLOATING ARCHIVE
   ================================================ */

/* Use the same width as the header */
.tp-page {
    width: min(1240px, 94%);
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* Eliminate the old two-column sidebar layout */
.tp-layout {
    display: block !important;
    width: 100%;
}

.tp-layout > .tp-featured {
    width: 100%;
    max-width: none;
    min-width: 0;
}

/* Archive dropdown toolbar */
.tp-patch-toolbar {
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 30;
    margin: 0 0 16px;
}

.tp-archive-dropdown {
    position: relative;
    width: min(100%, 280px);
}

.tp-archive-dropdown summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: #27231e;
    border: 1px solid #826737;
    border-radius: 9px;
    color: #f4d99b;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.tp-archive-dropdown summary::-webkit-details-marker {
    display: none;
}

.tp-archive-dropdown summary:hover {
    background: #352c20;
    border-color: #d3a951;
}

.tp-archive-chevron {
    font-size: 20px;
    transition: transform .2s ease;
}

.tp-archive-dropdown[open] .tp-archive-chevron {
    transform: rotate(180deg);
}

/* Overlay panel — does not push content downward */
.tp-archive-dropdown-panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    width: min(360px, 90vw);
    max-height: 400px;
    overflow-y: auto;
    background: #202020;
    border: 1px solid #806838;
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .65);
    padding: 8px;
    z-index: 100;
}

.tp-archive-dropdown-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px;
    border-radius: 7px;
    text-decoration: none !important;
    color: #f4dfb2 !important;
}

.tp-archive-dropdown-link:hover {
    background: #363024;
}

.tp-archive-dropdown-link.tp-current {
    background: #473b25;
    border-left: 3px solid #d3a951;
}

.tp-archive-dropdown-link strong {
    font-size: 12px;
}

.tp-archive-dropdown-link small {
    font-size: 11px;
    color: #aaa;
}

.tp-archive-dropdown-all {
    display: block;
    margin: 6px 4px 2px;
    padding: 11px;
    text-align: center;
    border-top: 1px solid #454545;
    color: #e8c47d !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
}

.tp-archive-dropdown-all:hover {
    color: #fff0c5 !important;
}

@media (max-width: 700px) {
    .tp-page {
        width: calc(100% - 24px);
    }

    .tp-archive-dropdown {
        width: 100%;
    }

    .tp-archive-dropdown-panel {
        width: 100%;
    }
}


/* Three-column Patch Highlights */
@media (min-width: 1000px) {
    .tp-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Two columns on tablets */
@media (min-width: 701px) and (max-width: 999px) {
    .tp-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* One column on phones */
@media (max-width: 700px) {
    .tp-overview-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   ARCHIVE DROPDOWN INSIDE PATCH HEADER
   ======================================== */

.tp-hero {
    position: relative;
}

/* Position dropdown in upper-right corner */
.tp-hero .tp-patch-toolbar {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 50;
    margin: 0;
}

.tp-hero .tp-archive-dropdown {
    width: 230px;
}

/* Keep header text from overlapping dropdown */
.tp-hero:has(.tp-patch-toolbar) > h1 {
    padding-right: 245px;
}

/* Let dropdown float above page content */
.tp-hero {
    overflow: visible;
}

/* Mobile: stack dropdown beneath header text */
@media (max-width: 800px) {

    .tp-hero .tp-patch-toolbar {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin: 0 0 18px;
    }

    .tp-hero .tp-archive-dropdown {
        width: 100%;
    }

    .tp-hero:has(.tp-patch-toolbar) > h1 {
        padding-right: 0;
    }

}


/* Move Other Patch Notes to bottom of header on mobile */
@media (max-width: 800px) {

    .tp-hero:has(.tp-patch-toolbar) {
        display: flex;
        flex-direction: column;
    }

    .tp-hero .tp-patch-toolbar {
        position: static !important;
        order: 10;
        width: 100%;
        margin: 20px 0 0 !important;
    }

    .tp-hero .tp-archive-dropdown {
        width: 100%;
    }

    .tp-hero .tp-archive-dropdown-panel {
        width: 100%;
    }

}


/* Larger patch version label */
.tp-hero .tp-eyebrow {
    font-size: 18px !important;
    font-weight: 900;
    letter-spacing: 2.5px;
    color: #d3a951;
    margin-bottom: 12px;
    display: block;
}

/* Slightly smaller on mobile */
@media (max-width: 700px) {
    .tp-hero .tp-eyebrow {
        font-size: 16px !important;
        letter-spacing: 2px;
    }
}


/* ==========================================
   LARGER PATCH CARD PREVIEWS
   ========================================== */

@media (min-width: 701px) {

    /* Reserve more space for the card images */
    .tp-detail-section:has(.tp-card-compare) {
        padding-right: 350px !important;
        min-height: 265px;
    }

    /* Keep cards aligned to the upper-right */
    .tp-detail-section .tp-card-compare {
        position: absolute !important;
        top: 0;
        right: 0;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin: 0 !important;
    }

    /* Larger card panels */
    .tp-detail-section .tp-card-panel {
        width: 155px !important;
        padding: 10px;
    }

    /* Larger card images */
    .tp-detail-section .tp-card-preview-button {
        width: 130px !important;
        max-width: 100%;
        margin: 0 auto;
    }

    .tp-detail-section .tp-card-image {
        width: 100% !important;
        height: auto !important;
        display: block;
    }
}


/* ==========================================
   NEW CARD REVEAL STYLING
   ========================================== */

.tp-detail-section.tp-type-new {
    background:
        radial-gradient(
            ellipse at 90% 35%,
            rgba(170, 95, 255, 0.10),
            transparent 55%
        );
    border-radius: 0 12px 12px 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

.tp-detail-section.tp-type-new .tp-change-symbol {
    box-shadow: 0 0 22px rgba(170, 95, 255, 0.18);
}

.tp-detail-section.tp-type-new .tp-card-panel {
    border-color: rgba(187, 147, 255, 0.48);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tp-detail-section.tp-type-new .tp-card-label {
    color: #d7b6ff;
    border-color: rgba(187, 147, 255, 0.48);
    background: rgba(155, 90, 230, 0.15);
}

/* Hover to emphasize clickable artwork */
@media (hover: hover) {
    .tp-detail-section .tp-card-preview-button {
        transition: transform 0.18s ease;
    }

    .tp-detail-section .tp-card-preview-button:hover {
        transform: scale(1.04);
    }
}



/* Match Highlights icons to detailed section icons */
.tp-overview-symbol {
    font-family: inherit;
    font-size: 31px;
    font-weight: 900;
    line-height: 1;
    color: var(--change-color);
}

/* Ensure NEW cards use the star symbol prominently */
.tp-overview-card.tp-type-new .tp-overview-symbol {
    font-size: 34px;
}


/* ==========================================
   FORCE LARGER PATCH CARD IMAGES
   ========================================== */

@media (min-width: 701px) {

    /* Reserve room for two full-size thumbnails */
    .tp-detail-section:has(.tp-card-compare) {
        padding-right: 350px !important;
        min-height: 270px;
    }

    /* Position card comparison in upper-right */
    .tp-detail-section .tp-card-compare {
        position: absolute !important;
        top: 0;
        right: 0;
        display: flex !important;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        margin: 0 !important;
    }

    /* Expand the outer panel */
    .tp-detail-section .tp-card-compare .tp-card-panel {
        width: 155px !important;
        min-width: 155px !important;
        max-width: none !important;
        flex: 0 0 155px !important;
        box-sizing: border-box;
    }

    /* Expand the clickable image button */
    .tp-detail-section .tp-card-compare .tp-card-preview-button {
        display: block !important;
        width: 130px !important;
        min-width: 130px !important;
        max-width: none !important;
        height: auto !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Expand the actual image */
    .tp-detail-section .tp-card-compare .tp-card-image {
        display: block !important;
        width: 100% !important;
        min-width: 130px !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
    }
}

/* Keep the existing centered mobile layout */
@media (max-width: 700px) {
    .tp-detail-section .tp-card-compare {
        position: static !important;
        justify-content: center !important;
        flex-wrap: wrap;
        width: 100%;
    }
}


/* ==========================================
   ORIGINAL PATCH BALANCE ICON STYLING
   ========================================== */

.tp-overview-symbol {
    display: grid;
    place-items: center;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    padding: 0;
    border-radius: 9px;
    background: var(--change-bg);
    border: 1px solid var(--change-border);
    color: var(--change-color);
    font-family: inherit;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.tp-change-symbol {
    display: grid;
    place-items: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    padding: 0;
    border-radius: 10px;
    background: var(--change-bg);
    border: 1px solid var(--change-border);
    color: var(--change-color);
    font-family: inherit;
    font-size: 31px;
    font-weight: 900;
    line-height: 1;
}

/* ==========================================
   PATCH NOTE ICONS — SVG VERSION
   ========================================== */

/* Keep the containers */
.tp-overview-symbol {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--change-bg);
    border: 1px solid var(--change-border);
    color: var(--change-color);
}

.tp-change-symbol {
    display: grid;
    place-items: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border: 1px solid var(--change-border);
    border-radius: 10px;
    background: var(--change-bg);
    color: var(--change-color);
}

/* The actual icon */
.tp-overview-symbol::before,
.tp-change-symbol::before {
    content: "";
    display: block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* Smaller icon in highlights */
.tp-overview-symbol::before {
    width: 20px;
    height: 20px;
}

/* Slightly larger icon in full section */
.tp-change-symbol::before {
    width: 24px;
    height: 24px;
}

/* Specific icon files */
.tp-icon-new::before {
    mask-image: url("OtherImages/star.svg");
    -webkit-mask-image: url("OtherImages/star.svg");
}

.tp-icon-rework::before {
    mask-image: url("OtherImages/rotate-cw.svg");
    -webkit-mask-image: url("OtherImages/rotate-cw.svg");
}

.tp-icon-buff::before {
    mask-image: url("OtherImages/chevron-up.svg");
    -webkit-mask-image: url("OtherImages/chevron-up.svg");
}

.tp-icon-nerf::before {
    mask-image: url("OtherImages/chevron-down.svg");
    -webkit-mask-image: url("OtherImages/chevron-down.svg");
}

.tp-icon-neutral::before {
    mask-image: url("OtherImages/activity.svg");
    -webkit-mask-image: url("OtherImages/activity.svg");
}

/* Optional slight tuning */
.tp-overview-card.tp-type-new .tp-overview-symbol::before,
.tp-detail-section.tp-type-new .tp-change-symbol::before {
    width: 22px;
    height: 22px;
}

.tp-overview-card.tp-type-rework .tp-overview-symbol::before,
.tp-detail-section.tp-type-rework .tp-change-symbol::before {
    width: 22px;
    height: 22px;
}


/* ==========================================
   PATCH HIGHLIGHTS LEGEND — SVG ICONS
   ========================================== */

.tp-overview-counts .tp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.tp-legend-icon {
    display: inline-block;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    color: inherit;
}

.tp-legend-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;

    background-color: currentColor;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* Same SVG files as the individual change icons */

.tp-legend-icon.tp-icon-new::before {
    mask-image: url("OtherImages/star.svg");
    -webkit-mask-image: url("OtherImages/star.svg");
}

.tp-legend-icon.tp-icon-rework::before {
    mask-image: url("OtherImages/rotate-cw.svg");
    -webkit-mask-image: url("OtherImages/rotate-cw.svg");
}

.tp-legend-icon.tp-icon-buff::before {
    mask-image: url("OtherImages/chevron-up.svg");
    -webkit-mask-image: url("OtherImages/chevron-up.svg");
}

.tp-legend-icon.tp-icon-nerf::before {
    mask-image: url("OtherImages/chevron-down.svg");
    -webkit-mask-image: url("OtherImages/chevron-down.svg");
}

.tp-legend-icon.tp-icon-neutral::before {
    mask-image: url("OtherImages/activity.svg");
    -webkit-mask-image: url("OtherImages/activity.svg");
}


/* ==========================================
   PATCH NOTES — GAME MECHANICS CATEGORY
   ========================================== */

.tp-type-mechanics {
    --change-color: #69e1df;
    --change-bg: rgba(35, 150, 155, 0.13);
    --change-border: rgba(83, 208, 210, 0.42);
}

/* Highlight cards */

.tp-overview-card.tp-type-mechanics {
    background: linear-gradient(
        135deg,
        rgba(37, 118, 125, 0.22),
        rgba(25, 27, 31, 0.95)
    );
    border: 1px solid var(--change-border);
}

.tp-overview-card.tp-type-mechanics:hover {
    border-color: var(--change-color);
}

/* Detailed change sections */

.tp-detail-section.tp-type-mechanics {
    border-left: 4px solid var(--change-color);
    background: linear-gradient(
        115deg,
        rgba(31, 114, 121, 0.10),
        #1b1b1b 50%
    );
}

/* Rules update summary */

.tp-detail-section.tp-type-mechanics .tp-change-result {
    background: var(--change-bg);
    border-color: var(--change-border);
}

.tp-detail-section.tp-type-mechanics .tp-change-result strong {
    color: var(--change-color);
}

/* Mechanic icons */

.tp-icon-mechanics::before {
    -webkit-mask-image: url("OtherImages/activity.svg");
    mask-image: url("OtherImages/activity.svg");
}

.tp-count-mechanics {
    color: #69e1df;
    background: rgba(35, 150, 155, 0.13);
    border: 1px solid rgba(83, 208, 210, 0.42);
}


/* ==========================================
   PATCH NOTES — REMOVED CARD
   ========================================== */

.tp-type-removed {
    --change-color: #ffac61;
    --change-bg: rgba(235, 125, 35, 0.13);
    --change-border: rgba(235, 125, 35, 0.45);
}

.tp-overview-card.tp-type-removed {
    background: linear-gradient(
        135deg,
        rgba(215, 105, 25, 0.18),
        rgba(25, 25, 25, 0.95)
    );
    border-color: var(--change-border);
}

.tp-overview-card.tp-type-removed:hover {
    border-color: var(--change-color);
}

.tp-detail-section.tp-type-removed {
    border-left: 4px solid var(--change-color);
    background: linear-gradient(
        115deg,
        rgba(215, 105, 25, 0.10),
        #1b1b1b 55%
    );
}

.tp-detail-section.tp-type-removed .tp-change-result {
    background: var(--change-bg);
    border-color: var(--change-border);
}

.tp-detail-section.tp-type-removed .tp-change-result strong {
    color: var(--change-color);
}

/* Use your OtherImages/trash-2.svg */
.tp-icon-removed::before {
    -webkit-mask-image: url("OtherImages/trash-2.svg");
    mask-image: url("OtherImages/trash-2.svg");
}
.tp-count-removed {
    color: #ffac61;
    background: rgba(235, 125, 35, 0.13);
    border: 1px solid rgba(235, 125, 35, 0.45);
}

/* Keep all detailed patch sections structurally consistent */
.tp-detail-section {
    margin-top: 28px;
    padding: 20px 22px;
}

.tp-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.tp-detail-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-detail-content {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
}

.tp-detail-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.tp-detail-card-column {
    flex: 0 0 auto;
}

/* Keep the icon box size identical for every type */
.tp-detail-icon,
.tp-overview-icon,
.tp-legend-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-icon-removed::before {
    content: "✕";
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--change-color);
}

.tp-icon-removed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-icon-removed::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--change-color);

    -webkit-mask-image: url("OtherImages/x.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("OtherImages/x.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.tp-type-removed {
    --change-color: #f39a47;
    --change-bg: rgba(243, 154, 71, 0.12);
    --change-border: rgba(243, 154, 71, 0.38);
}

.tp-detail-section.tp-type-removed {
    border-left: 4px solid var(--change-color);
    background: linear-gradient(
        115deg,
        rgba(243, 154, 71, 0.10),
        #1b1b1b 58%
    );
}

.tp-detail-section.tp-type-removed .tp-change-result {
    background: var(--change-bg);
    border-color: var(--change-border);
}

.tp-detail-section.tp-type-removed .tp-change-result strong {
    color: var(--change-color);
}

.tp-icon-removed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-icon-removed::before {
    content: "✕";
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--change-color);
}


/* ==========================================
   REMOVED CARD — ORANGE X ICON
   ========================================== */

.tp-icon-removed::before {
    content: "×" !important;

    /* Remove SVG masking */
    -webkit-mask-image: none !important;
    mask-image: none !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    background: transparent !important;
    color: var(--change-color, #ffac61) !important;

    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}