/* Auction House (/auction-house). Moved out of AuctionHouse.razor so the browser can cache it:
   inline, these ~80 KB were re-sent with the page and again over the live connection on every visit.
   Linked from that page only; some class names here (.gold-text, .dark-text, ...) are not unique to it. */


    /* Bigger buttons + consistent spacing */
    .auction-type-toggle .btn {
        border-width: 2px;
        font-size: 1.05rem;
        letter-spacing: .2px;
    }

    /* Status text */
    .toggle-status {
        font-size: .95rem;
        font-style: italic;
        opacity: .85;
    }

    /* ----- Items (gold) ----- */
    .btn-item-toggle {
        color: #caa24b;
        border-color: #caa24b;
        background: transparent;
    }

        .btn-item-toggle:hover {
            color: #fff;
            background: rgba(202,162,75,.18);
            border-color: #e6c14f;
        }

    .btn-check:checked + .btn-item-toggle {
        color: #111;
        background: linear-gradient(180deg,#ffd86b 0%, #e6c14f 100%);
        border-color: #e6c14f;
        box-shadow: 0 0 0 0.2rem rgba(230,193,79,.25);
    }

    /* ----- Consumables (mint/teal) ----- */
    .btn-consumable-toggle {
        color: #00a497;
        border-color: #00a497;
        background: transparent;
    }

        .btn-consumable-toggle:hover {
            color: #083e3e;
            background: rgba(0,164,151,.12);
            border-color: #009684;
        }

    .btn-check:checked + .btn-consumable-toggle {
        color: #0b3a3a;
        background: #D6FFF9;
        border-color: #00a497;
        box-shadow: 0 0 0 0.2rem rgba(0,164,151,.18);
    }

    /* Accessible focus */
    .btn-item-toggle:focus,
    .btn-consumable-toggle:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(180,220,255,.22);
    }




    .auction-card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .auction-card {
        width: 300px;
        max-width: 90vw;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: blanchedalmond;
        display: flex;
        flex-direction: column;
    }

        .auction-card .card-header {
            font-size: 1.3rem;
            font-weight: bold;
            background-color: gold !important;
            color: black !important;
            padding: 0.75rem 1rem;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .auction-card .card-body div {
            margin-bottom: 0.5rem;
        }

        .auction-card .btn {
            font-size: 0.9rem;
        }


        /* Slight but noticeable tint for consumables */
        .auction-card.consumable {
            background-color: #D6FFF9; /* soft mint */
            border-color: #cfe8c6; /* subtle greenish border */
        }

            /* Optional: tiny accent on header for consumables (keeps your gold header) */
            .auction-card.consumable .card-header {
                box-shadow: inset 0 -2px 0 rgba(0, 128, 0, 0.12);
            }



    .dark-text {
        color: black !important;
    }


    .gold-text {
        color: gold !important;
    }

    .gold-outline {
        color: gold !important;
        font-weight: bold;
        text-shadow: -1px -1px 8px grey, 1px -1px 8px grey, -1px 1px 8px grey, 1px 1px 8px grey, 0px 0px 8px grey;
    }

    .gold-label {
        font-weight: bold;
        color: gold !important;
        margin-bottom: 0.5rem;
        display: inline-block;
    }

    .gold-heading {
        color: gold !important;
        font-weight: bold;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }






    /* =========================================================
       AUCTION HOUSE - MOBILE ACTIVE AUCTION CARDS
       ---------------------------------------------------------
       Desktop is intentionally left alone.

       Mobile goals:
       - Show auction cards 2-wide
       - Keep cards compact
       - Show about 6 auctions quickly
       - Hide leader / end time / seller / actions behind More
       ========================================================= */


    /* Hidden by default so desktop does not change. */
    .auction-mobile-details {
        display: none !important;
    }


    /* =========================================================
       Mobile Only
       ========================================================= */
    @media (max-width: 767.98px) {
        /* -----------------------------------------------------
           Page safety
           ----------------------------------------------------- */
        .auction-card-container {
            width: 100% !important;
            max-width: 100% !important;
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: .55rem !important;
            padding-left: .45rem !important;
            padding-right: .45rem !important;
            overflow-x: hidden !important;
            box-sizing: border-box !important;
        }
        /* -----------------------------------------------------
           Compact auction card
           ----------------------------------------------------- */
        .auction-card {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: .45rem !important;
            border-radius: .7rem !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
        }
            /* -----------------------------------------------------
           Card header / item name
           ----------------------------------------------------- */
            /* -----------------------------------------------------
       Card header / item name
       -----------------------------------------------------
       Slightly larger mobile text.
       Keeps 2-wide layout, but lets cards breathe more.
       ----------------------------------------------------- */
            .auction-card .card-header {
                min-height: 50px !important;
                padding: .5rem .5rem !important;
                font-size: .9rem !important;
                line-height: 1.15 !important;
                border-radius: .55rem .55rem .3rem .3rem !important;
            }


        .auction-card-name {
            min-width: 0 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            word-break: normal !important;
            overflow-wrap: anywhere !important;
        }
        /* -----------------------------------------------------
       Description preview
       -----------------------------------------------------
       Bigger and easier to read on mobile.
       Allows a little more height so it does not feel cramped.
       ----------------------------------------------------- */
        .auction-description {
            max-height: 5.2em !important;
            overflow: hidden !important;
            margin-top: .45rem !important;
            font-size: .82rem !important;
            line-height: 1.3 !important;
        }


            .auction-description .btn-link {
                font-size: .8rem !important;
                line-height: 1.15 !important;
                font-weight: 800 !important;
            }


        .auction-card-name {
            min-width: 0 !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            word-break: normal !important;
            overflow-wrap: anywhere !important;
        }


        .auction-card .badge {
            font-size: .68rem !important;
            padding: .2rem .35rem !important;
        }
        /* -----------------------------------------------------
           Quantity text
           ----------------------------------------------------- */
        .auction-card > .text-muted.small {
            font-size: .68rem !important;
            line-height: 1.1 !important;
            margin-top: .2rem !important;
        }
        /* -----------------------------------------------------
           Description preview
           -----------------------------------------------------
           Keep it tiny and preview-like on mobile.
           Full extra details go behind More.
           ----------------------------------------------------- */
        


            
        /* -----------------------------------------------------
           Meta area
           -----------------------------------------------------
           Keep price visible.
           Hide leader/end/seller on mobile.
           ----------------------------------------------------- */
        /* -----------------------------------------------------
       Price line
       -----------------------------------------------------
       Slightly larger so the most important info is readable.
       ----------------------------------------------------- */
        .auction-card-meta {
            padding: .5rem .2rem .3rem .2rem !important;
            font-size: .86rem !important;
            line-height: 1.2 !important;
            flex-grow: 0 !important;
        }


        .auction-price-line {
            margin-bottom: 0 !important;
            font-size: .9rem !important;
            line-height: 1.15 !important;
            text-align: center !important;
        }

        
        .auction-admin-max {
            display: none !important;
        }


        .auction-extra-line,
        .auction-admin-divider,
        .auction-admin-meta {
            display: none !important;
        }
        /* -----------------------------------------------------
           Hide desktop buttons on mobile
           ----------------------------------------------------- */
        .auction-action-row {
            display: none !important;
        }
        /* -----------------------------------------------------
           Mobile More panel
           ----------------------------------------------------- */
        .auction-mobile-details {
            display: block !important;
            margin-top: auto !important;
            border-top: 1px solid rgba(0, 0, 0, .15) !important;
        }


            .auction-mobile-details summary {
                min-height: 34px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin-top: .3rem !important;
                color: #1d1406 !important;
                background: linear-gradient(180deg, #ffe28d, #d5a642) !important;
                border: 1px solid rgba(75, 45, 8, .38) !important;
                border-radius: 999px !important;
                font-size: .78rem !important;
                line-height: 1 !important;
                font-weight: 900 !important;
                list-style: none !important;
                cursor: pointer !important;
            }


                .auction-mobile-details summary::-webkit-details-marker {
                    display: none !important;
                }


                .auction-mobile-details summary::after {
                    content: " ▼";
                    margin-left: .25rem;
                    font-size: .65rem;
                }


            .auction-mobile-details[open] summary::after {
                content: " ▲";
            }


        .auction-mobile-details-body {
            margin-top: .45rem !important;
            padding: .45rem !important;
            color: #171109 !important;
            background: rgba(255, 255, 255, .48) !important;
            border: 1px solid rgba(0, 0, 0, .12) !important;
            border-radius: .55rem !important;
            font-size: .72rem !important;
            line-height: 1.25 !important;
        }


            .auction-mobile-details-body > div {
                margin-bottom: .3rem !important;
            }


                .auction-mobile-details-body > div:last-child {
                    margin-bottom: 0 !important;
                }


        .auction-mobile-action-grid {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: .35rem !important;
            margin-top: .45rem !important;
        }


            .auction-mobile-action-grid .btn {
                min-height: 34px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: .35rem .45rem !important;
                font-size: .75rem !important;
                line-height: 1.05 !important;
                font-weight: 800 !important;
                border-radius: .5rem !important;
            }
        /* -----------------------------------------------------
           Filters above auctions
           -----------------------------------------------------
           Keep search controls usable without blowing up the page.
           ----------------------------------------------------- */
        .gold-heading {
            text-align: center !important;
            font-size: 1.25rem !important;
        }


        .auction-type-toggle {
            width: 100% !important;
            max-width: 380px !important;
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
        }


            .auction-type-toggle .btn {
                padding: .55rem .45rem !important;
                font-size: .8rem !important;
                line-height: 1.1 !important;
            }


        .toggle-status {
            display: none !important;
        }
    }


    /* =========================================================
       Very Small Phones
       ---------------------------------------------------------
       Most phones will stay 2-wide.

       This fallback only protects extremely narrow screens where
       2-wide cards would become unreadable.
       ========================================================= */
    @media (max-width: 340px) {

        .auction-card-container {
            grid-template-columns: 1fr !important;
        }
    }


    .auction-description.is-expanded {
        max-height: none !important;
        overflow: visible !important;
    }



    .auction-description-wrap {
        color: black !important;
    }


    .auction-description-preview {
        color: black !important;
    }


    .auction-description-full {
        color: black !important;
        white-space: pre-wrap !important;
    }


    .auction-description-toggle {
        display: inline-flex !important;
        margin-top: .25rem !important;
        padding: 0 !important;
        color: blue !important;
        font-size: .82rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-decoration: underline !important;
    }


    /* Mobile preview clamp */
    @media (max-width: 767.98px) {

        .auction-description-preview {
            max-height: 5.2em !important;
            overflow: hidden !important;
            font-size: .82rem !important;
            line-height: 1.3 !important;
        }


        .auction-description-full {
            max-height: none !important;
            overflow: visible !important;
            font-size: .82rem !important;
            line-height: 1.3 !important;
        }


        .auction-description-toggle {
            min-height: 28px !important;
            font-size: .82rem !important;
        }
    }



    /* =========================================================
   AUCTION MOBILE DESCRIPTION THROUGH MORE BUTTON
   ---------------------------------------------------------
   Mobile:
   - No separate Read More button.
   - More + Description opens full description.

   Desktop:
   - Keeps normal Read More / Show Less behavior.
   ========================================================= */

.auction-description-wrap {
    color: black !important;
}


.auction-description-preview {
    color: black !important;
}


.auction-description-preview.desktop-expanded {
    max-height: none !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
}


.auction-description-toggle {
    display: inline-flex !important;

    margin-top: .25rem !important;
    padding: 0 !important;

    color: blue !important;

    font-size: .82rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;

    text-decoration: underline !important;
}


.auction-mobile-full-description {
    display: none;
}


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

    .desktop-only-description-toggle {
        display: none !important;
    }


    .auction-description-preview,
    .auction-description-preview.desktop-expanded {
        max-height: 4.2em !important;
        overflow: hidden !important;

        white-space: normal !important;

        font-size: .82rem !important;
        line-height: 1.3 !important;
    }


    .auction-mobile-full-description {
        display: block !important;

        margin-bottom: .55rem !important;
        padding-bottom: .5rem !important;

        border-bottom: 1px solid rgba(0, 0, 0, .15) !important;
    }


    .auction-mobile-full-description strong {
        display: block !important;

        margin-bottom: .25rem !important;

        color: #171109 !important;

        font-size: .76rem !important;
        line-height: 1.15 !important;
    }


    .auction-mobile-full-description div {
        white-space: pre-wrap !important;

        color: #171109 !important;

        font-size: .78rem !important;
        line-height: 1.32 !important;
    }
}


    /* =========================================================
       AUCTION DESCRIPTION - MORE BUTTON EXPANDS DESCRIPTION
       ---------------------------------------------------------
       Desktop:
       - Keeps Read More / Show Less.

       Mobile:
       - Hides the separate Read More button.
       - Shows a small arrow when the preview is cut off.
       - Tapping More expands the existing description area above.
       ========================================================= */

    .auction-description-wrap {
        color: black !important;
    }


    .auction-description-preview {
        color: black !important;
    }


        .auction-description-preview.is-expanded {
            max-height: none !important;
            overflow: visible !important;
            white-space: pre-wrap !important;
        }


    .auction-description-toggle {
        display: inline-flex !important;
        margin-top: .25rem !important;
        padding: 0 !important;
        color: blue !important;
        font-size: .82rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-decoration: underline !important;
    }

    /* Hidden by default so desktop does not get the mobile arrow. */
    .auction-description-inline-arrow {
        display: none;
    }

    /* =========================================================
       Mobile Only
       ========================================================= */
    @media (max-width: 767.98px) {

        .desktop-only-description-toggle {
            display: none !important;
        }


        .auction-description-preview.is-collapsed {
            max-height: 4.2em !important;
            overflow: hidden !important;
            white-space: normal !important;
            font-size: .82rem !important;
            line-height: 1.3 !important;
        }


        .auction-description-preview.is-expanded {
            max-height: none !important;
            overflow: visible !important;
            white-space: pre-wrap !important;
            font-size: .82rem !important;
            line-height: 1.3 !important;
        }

        .auction-description-inline-arrow {
            display: inline !important;
            margin-left: .2rem !important;
            color: #7a5200 !important;
            font-size: .72rem !important;
            line-height: 1 !important;
            font-weight: 900 !important;
        }
        
    }

    /* =========================================================
       AUCTION DESCRIPTION MOBILE ARROW FIX
       ---------------------------------------------------------
       Problem:
       The inline arrow can be clipped by the shortened preview.

       Fix:
       Put the arrow visually on the last visible line of the
       clipped mobile preview.
       ========================================================= */

    @media (max-width: 767.98px) {

        .auction-description-preview.is-collapsed.has-more {
            position: relative !important;
            padding-right: 1rem !important;
            max-height: 4.2em !important;
            overflow: hidden !important;
            white-space: normal !important;
            font-size: .82rem !important;
            line-height: 1.3 !important;
        }


            .auction-description-preview.is-collapsed.has-more::after {
                content: "▼";
                position: absolute !important;
                right: .05rem !important;
                bottom: .05rem !important;
                color: #7a5200 !important;
                font-size: .72rem !important;
                line-height: 1 !important;
                font-weight: 900 !important;
            }
    }


    /* =========================================================
       AUCTION MOBILE CARD POLISH
       ---------------------------------------------------------
       Mobile-only:
       - Shows a little more description before cutoff
       - Keeps the cutoff arrow working
       - Centers auction item names
       ========================================================= */

    @media (max-width: 767.98px) {
        /* -----------------------------------------------------
           Show more description before cutoff
           -----------------------------------------------------
           4.2em was around 3 lines.
           5.6em is closer to 4 lines.
           Increase to 6.8em later if you want about 5 lines.
           ----------------------------------------------------- */
        .auction-description-preview.is-collapsed,
        .auction-description-preview.is-collapsed.has-more {
            max-height: 5.6em !important;
        }
        /* -----------------------------------------------------
           Center auction names
           ----------------------------------------------------- */
        .auction-card .card-header {
            justify-content: center !important;
            text-align: center !important;
            position: relative !important;
        }


        .auction-card-name {
            width: 100% !important;
            text-align: center !important;
            padding-left: .25rem !important;
            padding-right: .25rem !important;
        }
        /* -----------------------------------------------------
           Keep quantity badge from throwing off centered text
           ----------------------------------------------------- */
        .auction-card .card-header .badge {
            position: absolute !important;
            right: .35rem !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
        }
    }


    /* =========================================================
       AUCTION MOBILE FULL NAME FIX
       ---------------------------------------------------------
       Mobile-only:
       - Always shows the full auction item name
       - Keeps names centered
       - Lets long names make the card taller instead of cutting off
       - Moves quantity badge under the name so it does not overlap
       ========================================================= */

    @media (max-width: 767.98px) {

        .auction-card .card-header {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: .25rem !important;
            text-align: center !important;
        }


        .auction-card-name {
            width: 100% !important;
            display: block !important;
            -webkit-line-clamp: unset !important;
            -webkit-box-orient: unset !important;
            overflow: visible !important;
            text-overflow: clip !important;
            white-space: normal !important;
            text-align: center !important;
            overflow-wrap: anywhere !important;
            word-break: normal !important;
        }


        .auction-card .card-header .badge {
            position: static !important;
            transform: none !important;
            margin-left: 0 !important;
            margin-top: .15rem !important;
        }
    }


    /* =========================================================
       AUCTION DESCRIPTION FINAL MOBILE FIX
       ---------------------------------------------------------
       Mobile:
       - Uses line clamp instead of max-height
       - Prevents half-cut text
       - Keeps expanded description fully visible
       - Keeps spacing consistent when More is clicked
       - Keeps the arrow on the last visible line
       ========================================================= */

    @media (max-width: 767.98px) {
        /* -----------------------------------------------------
           Prevent cards in the same row from stretching oddly
           when one description expands.
           ----------------------------------------------------- */
        .auction-card-container {
            align-items: start !important;
        }


        .auction-card {
            align-self: start !important;
        }
        /* -----------------------------------------------------
           Description wrapper
           ----------------------------------------------------- */
        .auction-description-wrap {
            margin-top: .45rem !important;
            color: black !important;
        }
        /* -----------------------------------------------------
           Collapsed description
           -----------------------------------------------------
           Line clamp cuts by full lines instead of slicing text.
           Change 5 to 6 if you want one more visible line.
           ----------------------------------------------------- */
        .auction-description-preview.is-collapsed {
            display: -webkit-box !important;
            -webkit-box-orient: vertical !important;
            -webkit-line-clamp: 5 !important;
            max-height: none !important;
            overflow: hidden !important;
            color: black !important;
            white-space: normal !important;
            font-size: .82rem !important;
            line-height: 1.3 !important;
        }
            /* -----------------------------------------------------
           Collapsed description with more text available
           ----------------------------------------------------- */
            .auction-description-preview.is-collapsed.has-more {
                position: relative !important;
                padding-right: 1rem !important;
            }


                .auction-description-preview.is-collapsed.has-more::after {
                    content: "▼";
                    position: absolute !important;
                    right: .05rem !important;
                    bottom: .08rem !important;
                    color: #7a5200 !important;
                    font-size: .72rem !important;
                    line-height: 1 !important;
                    font-weight: 900 !important;
                }
        /* -----------------------------------------------------
           Expanded description
           -----------------------------------------------------
           Force full text to show and keep spacing consistent.
           ----------------------------------------------------- */
        .auction-description-preview.is-expanded {
            display: block !important;
            -webkit-line-clamp: unset !important;
            -webkit-box-orient: unset !important;
            max-height: none !important;
            overflow: visible !important;
            color: black !important;
            white-space: normal !important;
            font-size: .82rem !important;
            line-height: 1.3 !important;
        }
        /* -----------------------------------------------------
           Hide desktop read more button on mobile
           ----------------------------------------------------- */
        .desktop-only-description-toggle {
            display: none !important;
        }
        /* -----------------------------------------------------
           Hide old inline arrow if any old markup is still there
           ----------------------------------------------------- */
        .auction-description-inline-arrow {
            display: none !important;
        }
    }


    /* =========================================================
       AUCTION TIME SECTIONS
       ---------------------------------------------------------
       Groups auctions by time remaining.

       Darker / more urgent sections:
       - less than 1 hour
       - within 12 hours
       - within 24 hours
       - 24+ hours
       ========================================================= */

    .auction-time-section {
        width: min(100%, 1280px);
        margin: 1rem auto 1.25rem auto;
        padding: .85rem;
        border: 1px solid rgba(255, 216, 128, .2);
        border-radius: 18px;
        box-shadow: 0 12px 26px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06);
    }


    .auction-time-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .75rem;
        padding-bottom: .55rem;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }


        .auction-time-section-header h5 {
            margin: 0;
            color: #ffe28d;
            font-size: 1.05rem;
            line-height: 1.15;
            font-weight: 900;
        }


        .auction-time-section-header p {
            margin: .15rem 0 0 0;
            color: rgba(255, 255, 255, .72);
            font-size: .85rem;
            line-height: 1.25;
        }


    .auction-time-count {
        flex: 0 0 auto;
        padding: .28rem .6rem;
        color: #1d1406;
        background: linear-gradient(180deg, #ffe28d, #d5a642);
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 900;
        line-height: 1;
    }


    /* ---------------------------------------------------------
       Less than 1 hour - darkest / most urgent
       --------------------------------------------------------- */
    .auction-ending-under-1 {
        background: radial-gradient(circle at top, rgba(255, 70, 70, .18), transparent 38%), linear-gradient(180deg, rgba(45, 4, 4, .96), rgba(13, 3, 3, .98));
        border-color: rgba(255, 90, 90, .42);
    }


    /* ---------------------------------------------------------
       1 to 12 hours - urgent
       --------------------------------------------------------- */
    .auction-ending-under-12 {
        background: radial-gradient(circle at top, rgba(255, 170, 60, .16), transparent 38%), linear-gradient(180deg, rgba(42, 24, 5, .95), rgba(13, 8, 3, .98));
        border-color: rgba(255, 180, 75, .36);
    }


    /* ---------------------------------------------------------
       12 to 36 hours - soon
       --------------------------------------------------------- */
    .auction-ending-under-36 {
        background: radial-gradient(circle at top, rgba(140, 120, 255, .15), transparent 38%), linear-gradient(180deg, rgba(24, 21, 48, .94), rgba(8, 8, 18, .98));
        border-color: rgba(170, 150, 255, .28);
    }


    /* ---------------------------------------------------------
       36+ hours - calmer
       --------------------------------------------------------- */
    .auction-ending-later {
        background: radial-gradient(circle at top, rgba(80, 180, 150, .12), transparent 38%), linear-gradient(180deg, rgba(14, 31, 28, .92), rgba(6, 12, 12, .96));
        border-color: rgba(120, 220, 190, .22);
    }


    .auction-time-section .auction-card-container {
        margin-top: .25rem;
    }


    /* =========================================================
       Mobile polish
       ========================================================= */
    @media (max-width: 767.98px) {

        .auction-time-section {
            width: calc(100% - .5rem);
            margin-top: .8rem;
            margin-bottom: 1rem;
            padding: .6rem;
            border-radius: 14px;
        }


        .auction-time-section-header {
            display: grid;
            grid-template-columns: 1fr;
            gap: .4rem;
            text-align: center;
        }


        .auction-time-count {
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }


        .auction-time-section-header h5 {
            font-size: .98rem;
        }


        .auction-time-section-header p {
            font-size: .78rem;
        }
    }



    /* =========================================================
       AUCTION SECTIONS - FINAL DESKTOP / MOBILE TUNING
       ---------------------------------------------------------
       Desktop:
       - Hides section headers/backgrounds.
       - Flattens sections into one normal auction grid.
       - Allows more cards per row.

       Mobile:
       - Keeps time sections.
       - Uses 2-wide cards.
       - Removes spacing between sections.
       ========================================================= */


    /* =========================================================
       Desktop / Default
       ---------------------------------------------------------
       Desktop should look like the old auction grid.
       The time sections exist in the markup, but are visually
       flattened so PC users do not see section boxes.
       ========================================================= */

    .auction-section-display-shell {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: .75rem !important;
    }


    .auction-time-section {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }


    .auction-time-section-header {
        display: none !important;
    }


    .auction-time-section .auction-card-container {
        display: contents !important;
    }


    /* ---------------------------------------------------------
       Desktop card width
       ---------------------------------------------------------
       Smaller than 300px so desktop can fit closer to 4-5 wide.
       Use 240px first. If you want even more cards per row,
       change this to 220px.
       --------------------------------------------------------- */
    .auction-section-display-shell .auction-card {
        width: 310px !important;
        max-width: 310px !important;
        margin: 0 !important;
    }


    /* =========================================================
       Mobile
       ---------------------------------------------------------
       Mobile keeps the time sections and background colors.
       Sections touch each other with basically no spacing.
       ========================================================= */

    @media (max-width: 767.98px) {

        .auction-section-display-shell {
            display: block !important;
            width: 100% !important;
        }


        .auction-time-section {
            display: block !important;
            width: calc(100% - .5rem) !important;
            margin: 0 auto !important;
            padding: .55rem !important;
            border: 1px solid rgba(255, 216, 128, .2) !important;
            border-radius: 0 !important;
            box-shadow: 0 8px 18px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
        }


            .auction-time-section + .auction-time-section {
                border-top-width: 0 !important;
            }


            .auction-time-section:first-child {
                border-radius: 14px 14px 0 0 !important;
            }


            .auction-time-section:last-child {
                border-radius: 0 0 14px 14px !important;
            }


        .auction-time-section-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: .45rem !important;
            margin-bottom: .5rem !important;
            padding-bottom: .4rem !important;
            text-align: left !important;
            border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
        }


        .auction-time-section-title-line {
            min-width: 0 !important;
            display: block !important;
            color: #ffe28d !important;
            font-size: .82rem !important;
            line-height: 1.1 !important;
            font-weight: 900 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }


        .auction-time-title,
        .auction-time-separator,
        .auction-time-subtitle {
            display: inline !important;
        }


        .auction-time-subtitle {
            color: rgba(255, 255, 255, .78) !important;
            font-weight: 800 !important;
        }


        .auction-time-count {
            flex: 0 0 auto !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding: .24rem .46rem !important;
            color: #1d1406 !important;
            background: linear-gradient(180deg, #ffe28d, #d5a642) !important;
            border-radius: 999px !important;
            font-size: .66rem !important;
            line-height: 1 !important;
            font-weight: 900 !important;
        }


        .auction-time-section .auction-card-container {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: .55rem !important;
            width: 100% !important;
            max-width: 100% !important;
            margin-top: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            overflow-x: hidden !important;
            box-sizing: border-box !important;
        }


        .auction-time-section .auction-card {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
        }
        /* Less than 2 hours - darkest / most urgent */
        .auction-ending-under-2 {
            background: radial-gradient(circle at top, rgba(255, 70, 70, .18), transparent 38%), linear-gradient(180deg, rgba(45, 4, 4, .96), rgba(13, 3, 3, .98)) !important;
            border-color: rgba(255, 90, 90, .42) !important;
        }
        /* 2 to 12 hours - urgent */
        .auction-ending-under-12 {
            background: radial-gradient(circle at top, rgba(255, 170, 60, .16), transparent 38%), linear-gradient(180deg, rgba(42, 24, 5, .95), rgba(13, 8, 3, .98)) !important;
            border-color: rgba(255, 180, 75, .36) !important;
        }
        /* 12 to 36 hours - soon */
        .auction-ending-under-36 {
            background: radial-gradient(circle at top, rgba(140, 120, 255, .15), transparent 38%), linear-gradient(180deg, rgba(24, 21, 48, .94), rgba(8, 8, 18, .98)) !important;
            border-color: rgba(170, 150, 255, .28) !important;
        }
        /* 36+ hours - calmer */
        .auction-ending-later {
            background: radial-gradient(circle at top, rgba(80, 180, 150, .12), transparent 38%), linear-gradient(180deg, rgba(14, 31, 28, .92), rgba(6, 12, 12, .96)) !important;
            border-color: rgba(120, 220, 190, .22) !important;
        }
    }



    @media (max-width: 767.98px) {
        /* -----------------------------------------------------
           Description wrapper
           ----------------------------------------------------- */
        .auction-description-wrap {
            width: 100% !important;
            margin-top: .45rem !important;
            margin-bottom: .25rem !important;
            color: black !important;
            box-sizing: border-box !important;
        }
        /* -----------------------------------------------------
           Shared description text settings
           -----------------------------------------------------
           Collapsed and expanded should use the same:
           - font size
           - line height
           - width
           - padding-right

           This keeps the text from visually shifting when More
           is tapped.
           ----------------------------------------------------- */
        .auction-description-preview,
        .auction-description-preview.is-collapsed,
        .auction-description-preview.is-collapsed.has-more,
        .auction-description-preview.is-expanded {
            width: 100% !important;
            padding-right: 1rem !important;
            color: black !important;
            font-size: .82rem !important;
            line-height: 1.3 !important;
            white-space: normal !important;
            box-sizing: border-box !important;
        }
            /* -----------------------------------------------------
           Collapsed description
           -----------------------------------------------------
           Use line clamp only.

           Do NOT use max-height here. max-height is what causes
           little slices of hidden text to appear at the bottom.
           ----------------------------------------------------- */
            .auction-description-preview.is-collapsed,
            .auction-description-preview.is-collapsed.has-more {
                position: relative !important;
                display: -webkit-box !important;
                -webkit-box-orient: vertical !important;
                -webkit-line-clamp: 5 !important;
                max-height: none !important;
                min-height: 0 !important;
                overflow: hidden !important;
            }
                /* -----------------------------------------------------
           Cutoff arrow
           -----------------------------------------------------
           Arrow stays visually attached to the last visible line.
           ----------------------------------------------------- */
                .auction-description-preview.is-collapsed.has-more::after {
                    content: "▼";
                    position: absolute !important;
                    right: .05rem !important;
                    bottom: .08rem !important;
                    color: #7a5200 !important;
                    font-size: .72rem !important;
                    line-height: 1 !important;
                    font-weight: 900 !important;
                }
            /* -----------------------------------------------------
           Expanded description
           -----------------------------------------------------
           Full text must always show.
           ----------------------------------------------------- */
            .auction-description-preview.is-expanded {
                display: block !important;
                -webkit-line-clamp: unset !important;
                -webkit-box-orient: unset !important;
                max-height: none !important;
                min-height: 0 !important;
                overflow: visible !important;
            }


                .auction-description-preview.is-expanded::after {
                    content: none !important;
                }
        /* -----------------------------------------------------
           Hide desktop read more on mobile
           ----------------------------------------------------- */
        .desktop-only-description-toggle {
            display: none !important;
        }
        /* -----------------------------------------------------
           Hide old inline arrow if older markup/CSS is still there
           ----------------------------------------------------- */
        .auction-description-inline-arrow {
            display: none !important;
        }
    }



    /* =========================================================
       AUCTION DESKTOP SPACING POLISH
       ---------------------------------------------------------
       Desktop-only:
       - Adds a little more breathing room between auction cards
       - Does not affect mobile spacing or mobile time sections
       ========================================================= */

    @media (min-width: 768px) {

        .auction-section-display-shell {
            gap: 1.25rem !important;
            row-gap: 1.45rem !important;
        }


            .auction-section-display-shell .auction-card {
                margin: .15rem !important;
            }
    }



    /* =========================================================
   AUCTION MOBILE EXPANDED CARD WIDTH
   ---------------------------------------------------------
   Mobile-only:
   - Normal auction cards stay 2-wide.
   - When a user opens More, that auction card spans both columns.
   - This gives the expanded info and full description more room.
   ========================================================= */

@media (max-width: 767.98px) {

    


    .auction-time-section .auction-card:has(.auction-mobile-details[open]) .auction-description-preview.is-expanded {
        font-size: .86rem !important;
        line-height: 1.35 !important;
    }


    .auction-time-section .auction-card:has(.auction-mobile-details[open]) .auction-mobile-details-body {
        font-size: .82rem !important;
        line-height: 1.35 !important;
    }


    .auction-time-section .auction-card:has(.auction-mobile-details[open]) .auction-mobile-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }


    .auction-time-section .auction-card:has(.auction-mobile-details[open]) .auction-mobile-action-grid .btn:first-child:last-child {
        grid-column: 1 / -1 !important;
    }
}


    /* =========================================================
       AUCTION MOBILE EXPANDED CARD WIDTH - NO ROW JUMP
       ---------------------------------------------------------
       Mobile-only:
       - Normal cards stay 2-wide.
       - Opened More cards visually expand across both columns.
       - Left-column cards expand to the right.
       - Right-column cards expand to the left.
       - This prevents right-side cards from dropping down first.
       ========================================================= */

    @media (max-width: 767.98px) {
        /* -----------------------------------------------------
           Keep the grid from moving the opened card to a new row.
           Do NOT use grid-column: 1 / -1 here.
           ----------------------------------------------------- */
        .auction-time-section .auction-card:has(.auction-mobile-details[open]) {
            position: relative !important;
            z-index: 20 !important;
            grid-column: auto !important;
            width: calc(200% + .55rem) !important;
            max-width: calc(200% + .55rem) !important;
        }
        /* -----------------------------------------------------
           Cards in the left column expand to the right.
           ----------------------------------------------------- */
        .auction-time-section .auction-card-container > .auction-card:nth-child(odd):has(.auction-mobile-details[open]) {
            left: 0 !important;
        }
        /* -----------------------------------------------------
           Cards in the right column expand to the left.
           This keeps them on the same row instead of dropping.
           ----------------------------------------------------- */
        .auction-time-section .auction-card-container > .auction-card:nth-child(even):has(.auction-mobile-details[open]) {
            left: calc(-100% - .55rem) !important;
        }
        /* -----------------------------------------------------
           Give expanded text a little more room.
           ----------------------------------------------------- */
        .auction-time-section .auction-card:has(.auction-mobile-details[open]) .auction-description-preview.is-expanded {
            font-size: .86rem !important;
            line-height: 1.35 !important;
        }


        .auction-time-section .auction-card:has(.auction-mobile-details[open]) .auction-mobile-details-body {
            font-size: .82rem !important;
            line-height: 1.35 !important;
        }
        /* -----------------------------------------------------
           Expanded action buttons can sit side-by-side.
           If there is only one button, it fills the full width.
           ----------------------------------------------------- */
        .auction-time-section .auction-card:has(.auction-mobile-details[open]) .auction-mobile-action-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }


            .auction-time-section .auction-card:has(.auction-mobile-details[open]) .auction-mobile-action-grid .btn:first-child:last-child {
                grid-column: 1 / -1 !important;
            }
    }


    .auction-single-toggle {
        min-width: 280px;
        border-width: 2px;
        border-radius: 999px;
        padding: .75rem 1.25rem;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
    }

    .auction-single-toggle-items {
        color: #171109;
        background: linear-gradient(180deg, #ffd86b, #d5a642);
        border-color: #e6c14f;
    }

    .auction-single-toggle-consumables {
        color: #0b3a3a;
        background: #D6FFF9;
        border-color: #00a497;
    }

    .auction-history-shell {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding: 1rem;
        color: #f8f9fa;
        background: radial-gradient(circle at top left, rgba(255, 216, 128, .12), transparent 40%), linear-gradient(180deg, rgba(18, 18, 18, .98), rgba(8, 8, 8, .98));
        border: 1px solid rgba(255, 215, 0, .35);
        border-radius: 18px;
        box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
    }

    .auction-history-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        padding-bottom: .75rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

    .auction-history-title {
        margin: 0;
        color: #ffd86b;
        font-weight: 900;
    }

    .auction-history-soft-text {
        color: rgba(255, 255, 255, .76);
        font-size: .9rem;
    }

    .auction-history-empty {
        padding: 1rem;
        text-align: center;
        color: rgba(255, 255, 255, .8);
        border: 1px dashed rgba(255, 255, 255, .25);
        border-radius: 12px;
    }

    .auction-history-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: .85rem;
    }

    .auction-history-card {
        padding: .85rem;
        color: #171109;
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, .15);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
    }

        .auction-history-card.history-item {
            background: linear-gradient(180deg, #fff1bf, #e7c96b);
        }

        .auction-history-card.history-consumable {
            background: linear-gradient(180deg, #e7fffb, #b8efe8);
        }

    .auction-history-card-title {
        margin-bottom: .65rem;
        font-size: 1.05rem;
        font-weight: 900;
        line-height: 1.15;
    }

    .auction-history-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .45rem;
    }

        .auction-history-meta-grid span {
            display: block;
            font-size: .72rem;
            font-weight: 800;
            opacity: .7;
            text-transform: uppercase;
        }

        .auction-history-meta-grid strong {
            display: block;
            font-size: .9rem;
            line-height: 1.15;
        }

    .auction-history-ended {
        margin-top: .65rem;
        padding-top: .5rem;
        border-top: 1px solid rgba(0, 0, 0, .18);
        font-size: .8rem;
        font-weight: 800;
        opacity: .85;
    }

    @media (max-width: 767.98px) {
        .auction-history-header {
            display: grid;
            grid-template-columns: 1fr;
            text-align: center;
        }

            .auction-history-header .btn {
                width: 100%;
            }

        .auction-history-grid {
            grid-template-columns: 1fr;
        }
    }


    .auction-history-controls {
        display: grid;
        grid-template-columns: 180px minmax(220px, 1fr) 180px 220px;
        gap: .75rem;
        align-items: end;
    }

    .auction-history-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: .5rem;
        margin-bottom: .65rem;
    }

    .auction-rarity-badge {
        flex: 0 0 auto;
        padding: .25rem .5rem;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 900;
        line-height: 1;
        border: 1px solid rgba(0, 0, 0, .2);
    }

    .auction-history-card.rarity-common {
        border-color: rgba(130, 130, 130, .6);
    }

    .auction-history-card.rarity-uncommon {
        border-color: rgba(40, 167, 69, .75);
        box-shadow: 0 8px 18px rgba(40, 167, 69, .18);
    }

    .auction-history-card.rarity-rare {
        border-color: rgba(13, 110, 253, .8);
        box-shadow: 0 8px 18px rgba(13, 110, 253, .2);
    }

    .auction-history-card.rarity-very-rare {
        border-color: rgba(111, 66, 193, .85);
        box-shadow: 0 8px 18px rgba(111, 66, 193, .22);
    }

    .auction-history-card.rarity-legendary {
        border-color: rgba(255, 193, 7, .95);
        box-shadow: 0 8px 20px rgba(255, 193, 7, .28);
    }

    .auction-history-card.rarity-artifact {
        border-color: rgba(220, 53, 69, .95);
        box-shadow: 0 8px 22px rgba(220, 53, 69, .32);
    }

    .auction-rarity-badge.rarity-common {
        color: #111 !important;
        background: #e5e7eb;
    }

    .auction-rarity-badge.rarity-uncommon {
        color: #111 !important;
        background: #9ee8a7;
    }

    .auction-rarity-badge.rarity-rare {
        color: #111 !important;
        background: #9ecbff;
    }

    .auction-rarity-badge.rarity-very-rare {
        color: #111 !important;
        background: #d7b7ff;
    }

    .auction-rarity-badge.rarity-legendary {
        color: #111 !important;
        background: #ffd86b;
    }

    .auction-rarity-badge.rarity-artifact {
        color: #111 !important;
        background: #ffb3b3;
    }

    @media (max-width: 767.98px) {
        .auction-history-controls {
            grid-template-columns: 1fr;
        }

        .auction-history-card-top {
            display: grid;
            grid-template-columns: 1fr;
        }

        .auction-rarity-badge {
            width: fit-content;
        }
    }

    .auction-history-toggle-box {
        padding: .55rem .7rem;
        color: #f8f9fa;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: .75rem;
    }

        .auction-history-toggle-box .form-label {
            margin-bottom: .25rem;
            color: #ffd86b;
            font-weight: 800;
        }

    .auction-history-badge-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .35rem;
    }

    .auction-no-buyer-badge {
        flex: 0 0 auto;
        padding: .25rem .5rem;
        color: #fff;
        background: #6c757d;
        border: 1px solid rgba(0, 0, 0, .25);
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 900;
        line-height: 1;
    }

    .auction-history-card.history-no-buyer {
        opacity: .88;
        filter: grayscale(.15);
    }

    .auction-character-area {
    display: flex;
    justify-content: center;
    margin: 1rem auto .75rem auto;
    padding-left: .75rem;
    padding-right: .75rem;
}

.auction-character-card {
    width: min(100%, 520px);
    padding: 1rem;
    color: #f8f9fa;
    background:
        radial-gradient(circle at top left, rgba(255, 216, 128, .14), transparent 42%),
        linear-gradient(180deg, rgba(22, 22, 22, .98), rgba(9, 9, 9, .98));
    border: 1px solid rgba(255, 215, 0, .38);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
}

.auction-character-warning {
    text-align: center;
    color: #ffd7d7;
    border-color: rgba(220, 53, 69, .65);
}

.auction-character-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.auction-character-eyebrow {
    color: rgba(255, 255, 255, .7);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.auction-character-title {
    color: #ffd86b;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.15;
}

.auction-character-gold-pill {
    flex: 0 0 auto;
    padding: .35rem .65rem;
    color: #171109;
    background: linear-gradient(180deg, #ffe28d, #d5a642);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(255, 216, 128, .18);
}

.auction-character-dropdown {
    width: 100% !important;
}

.auction-history-open-row {
    display: flex;
    justify-content: center;
    margin: .75rem auto 1rem auto;
}

.auction-history-open-button {
    min-width: 280px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .8rem 1.25rem;
    color: #171109;
    background: linear-gradient(180deg, #ffe28d, #d5a642);
    border: 1px solid rgba(75, 45, 8, .38);
    border-radius: 999px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
}

@media (hover: hover) { /* mouse/trackpad only: on phones a tapped card would stay lifted */
.auction-history-open-button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
}

.auction-history-open-button small {
    font-size: .75rem;
    font-weight: 800;
    opacity: .78;
}

.auction-history-footer {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.auction-card-header-with-rarity {
    gap: .5rem;
}

.auction-card-header-badges {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.current-auction-rarity-badge {
    box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
}

.auction-card.rarity-common {
    border-color: rgba(130, 130, 130, .65);
}

.auction-card.rarity-uncommon {
    border-color: rgba(40, 167, 69, .8);
    box-shadow: 0 8px 18px rgba(40, 167, 69, .18);
}

.auction-card.rarity-rare {
    border-color: rgba(13, 110, 253, .85);
    box-shadow: 0 8px 18px rgba(13, 110, 253, .2);
}

.auction-card.rarity-very-rare {
    border-color: rgba(111, 66, 193, .9);
    box-shadow: 0 8px 18px rgba(111, 66, 193, .24);
}

.auction-card.rarity-legendary {
    border-color: rgba(255, 193, 7, .95);
    box-shadow: 0 8px 20px rgba(255, 193, 7, .3);
}

.auction-card.rarity-artifact {
    border-color: rgba(220, 53, 69, .95);
    box-shadow: 0 8px 22px rgba(220, 53, 69, .34);
}

@media (max-width: 767.98px) {
    .auction-character-card {
        width: min(100%, 420px);
        padding: .85rem;
    }

    .auction-character-header {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .auction-character-gold-pill {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .auction-history-open-button {
        width: min(100%, 340px);
    }

    .auction-card-header-badges {
        justify-content: center;
    }
}


    .auction-create-row {
        display: flex;
        justify-content: center;
        margin: 1rem auto 1.25rem auto;
    }

    .auction-create-button {
        min-width: 260px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: .12rem;
        padding: .85rem 1.35rem;
        color: #f8fff8;
        background: radial-gradient(circle at top left, rgba(255, 255, 255, .18), transparent 38%), linear-gradient(180deg, #198754, #0f5f3b);
        border: 1px solid rgba(180, 255, 210, .35);
        border-radius: 999px;
        font-weight: 900;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .3), 0 0 18px rgba(25, 135, 84, .22);
    }

        @media (hover: hover) { /* mouse/trackpad only: on phones a tapped card would stay lifted */
        .auction-create-button:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
        }
        }

        .auction-create-button small {
            font-size: .75rem;
            font-weight: 800;
            opacity: .82;
        }

    .auction-create-icon {
        font-size: 1.15rem;
        line-height: 1;
    }

    @media (max-width: 767.98px) {
        .auction-create-button {
            width: min(100%, 340px);
        }
    }

    .auction-attunement-badge {
        flex: 0 0 auto;
        padding: .25rem .5rem;
        color: #111 !important;
        background: linear-gradient(180deg, #d9c7ff, #a98af0);
        border: 1px solid rgba(40, 20, 80, .28);
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
    }

    .auction-rarity-badge,
    .auction-attunement-badge {
        color: #111 !important;
    }

    /* =========================================================
       FINAL ACTIVE AUCTION POLISH OVERRIDES
       ---------------------------------------------------------
       Put this at the bottom so it wins over older duplicated CSS.
       ========================================================= */

    .auction-card-header-with-rarity {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .45rem !important;
        text-align: center !important;
    }

    .auction-card-name {
        width: 100% !important;
        display: block !important;
        color: #111 !important;
        text-align: center !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .auction-card-header-badges {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: .35rem !important;
    }

    .auction-rarity-badge,
    .auction-attunement-badge,
    .auction-no-buyer-badge {
        color: #111 !important;
        font-weight: 900 !important;
    }

    .auction-attunement-badge {
        background: linear-gradient(180deg, #d9c7ff, #a98af0) !important;
    }

    .auction-history-card-title {
        color: #111 !important;
        text-align: center !important;
    }

    /* =========================================================
       FINAL HEADER READABILITY FIX
       ---------------------------------------------------------
       Adds a soft transparent gold panel behind the auction name
       and tags so they are easier to read.
       ========================================================= */

    .auction-card-header-with-rarity {
        background: rgba(255, 216, 107, .72) !important;
        border: 1px solid rgba(90, 60, 0, .22) !important;
        border-radius: .65rem !important;
        padding: .6rem .65rem !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 10px rgba(0, 0, 0, .12) !important;
    }

    .auction-card-name {
        color: #111 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
    }

    .auction-card-header-badges {
        padding-top: .15rem !important;
    }

    .auction-rarity-badge,
    .auction-attunement-badge {
        background-clip: padding-box !important;
        border-color: rgba(0, 0, 0, .28) !important;
    }

    /* =========================================================
       FINAL HEADER READABILITY FIX
       ---------------------------------------------------------
       Adds a soft transparent gold panel behind the auction name
       and tags so they are easier to read.
       ========================================================= */

    .auction-card-header-with-rarity {
        background: rgba(255, 216, 107, .72) !important;
        border: 1px solid rgba(90, 60, 0, .22) !important;
        border-radius: .65rem !important;
        padding: .6rem .65rem !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 10px rgba(0, 0, 0, .12) !important;
    }

    .auction-card-name {
        color: #111 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
    }

    .auction-card-header-badges {
        padding-top: .15rem !important;
    }

    .auction-rarity-badge,
    .auction-attunement-badge {
        background-clip: padding-box !important;
        border-color: rgba(0, 0, 0, .28) !important;
    }


    /* =========================================================
       FINAL ACTIVE AUCTION TITLE PANEL
       ========================================================= */

    .auction-card-title-panel {
        width: 100% !important;
        padding: .6rem .65rem !important;
        margin-bottom: .45rem !important;
        background: linear-gradient( 180deg, rgba(245, 190, 58, .86), rgba(205, 138, 24, .78) ) !important;
        border: 1px solid rgba(120, 78, 5, .36) !important;
        border-radius: .65rem !important;
        box-shadow: inset 0 1px 0 rgba(255, 238, 180, .38), 0 3px 10px rgba(0, 0, 0, .16) !important;
    }

        .auction-card-title-panel .auction-card-name {
            width: 100% !important;
            display: block !important;
            color: #111 !important;
            text-align: center !important;
            font-weight: 900 !important;
            line-height: 1.15 !important;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
        }

        .auction-card-title-panel .auction-card-header-badges {
            width: 100% !important;
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            align-items: center !important;
            gap: .35rem !important;
            padding-top: .3rem !important;
        }


    /* =========================================================
       AUCTION HOUSE RESTYLE (guild theme)
       ---------------------------------------------------------
       The lot cards were already a plain blanchedalmond, so they
       become proper parchment instead of slate, the same call
       taken on the Quest Board scrolls. Rarity keeps its border
       colour. What changes around them: a gold Garamond heading,
       the map backdrop, the untreated grey filter bar becomes a
       slate panel with gold pill inputs, and the two windows take
       the slate modal look. Behaviour unchanged.
       ========================================================= */
    .ah-page {
        --ah-ink: #ece9e2;
        --ah-ink-strong: #f4f0e6;
        --ah-ink-muted: rgba(236, 233, 226, 0.78);
        --ah-gold: #caa24b;
        --ah-gold-hi: #ffd86b;
        --ah-panel: rgba(22, 25, 29, 0.96);
        --ah-inner: rgba(0, 0, 0, 0.32);
        --ah-border: rgba(202, 162, 75, 0.4);
        position: relative;
        font-family: 'Garamond', 'Georgia', serif;
    }

        .ah-page .ah-title {
            color: var(--ah-gold-hi) !important;
            font-family: 'Garamond', 'Georgia', serif;
            font-size: clamp(1.7rem, 3vw, 2.2rem);
            font-weight: 700;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
            margin-bottom: 1.25rem;
        }

        /* ---------- Filter bar: the one plainly untreated Bootstrap card ---------- */
        .ah-page .card.mb-3.p-3 {
            background-color: var(--ah-panel) !important;
            background-image: var(--cg-paper-layers) !important;
            background-size: var(--cg-paper-sizes) !important;
            background-repeat: repeat !important;
            background-blend-mode: soft-light, soft-light, soft-light;
            border: 1px solid var(--ah-border) !important;
            border-radius: 12px !important;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 0 24px rgba(0, 0, 0, 0.22);
            color: var(--ah-ink) !important;
        }

        .ah-page .form-control,
        .ah-page .form-select,
        .ah-page .rz-dropdown {
            background-color: #1b1e22 !important;
            color: var(--ah-ink-strong) !important;
            border: 1px solid var(--ah-border) !important;
            border-radius: 999px !important;
            font-family: 'Garamond', 'Georgia', serif;
        }

            .ah-page .form-control:focus,
            .ah-page .form-select:focus {
                border-color: var(--ah-gold) !important;
                box-shadow: 0 0 0 0.2rem rgba(202, 162, 75, 0.2) !important;
                outline: none;
            }

            .ah-page .rz-dropdown .rz-dropdown-label,
            .ah-page .rz-dropdown .rz-placeholder {
                color: var(--ah-ink-strong) !important;
                font-family: 'Garamond', 'Georgia', serif;
            }

        .ah-page .form-label,
        .ah-page .form-check-label {
            color: var(--ah-gold-hi) !important;
        }

        /* ---------- Lot cards: real parchment, as on the Quest Board ---------- */
        .ah-page .auction-card {
            background-color: #e8dcc0 !important;
            background-image:
                url("/images/paper/paper-mottle.webp"),
                url("/images/parchment.jpg") !important;
            background-size: 2200px 2200px, cover !important;
            background-position: 0 0, center center !important;
            background-repeat: repeat, no-repeat !important;
            background-blend-mode: soft-light, normal !important;
            border-radius: 10px !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
            transition: transform 0.22s cubic-bezier(.2,.8,.3,1), box-shadow 0.22s ease;
        }

            @media (hover: hover) { /* mouse/trackpad only: on phones a tapped card would stay lifted */
            .ah-page .auction-card:hover {
                transform: translateY(-5px);
                box-shadow: 10px 14px 26px rgba(0, 0, 0, 0.5) !important;
            }
            }

        /* ---------- Section frames and headings ---------- */
        .ah-page .gold-heading,
        .ah-page .auction-history-title,
        .ah-page .auction-character-title {
            color: var(--ah-gold-hi) !important;
            font-family: 'Garamond', 'Georgia', serif;
            font-weight: 700;
        }

        .ah-page .auction-character-eyebrow,
        .ah-page .auction-time-section-title-line {
            font-family: 'Garamond', 'Georgia', serif;
        }

        .ah-page .auction-time-section {
            border-color: var(--ah-border) !important;
            border-radius: 12px !important;
        }

        .ah-page .auction-character-card {
            background-color: var(--ah-panel) !important;
            background-image: var(--cg-paper-layers) !important;
            background-size: var(--cg-paper-sizes) !important;
            background-repeat: repeat !important;
            background-blend-mode: soft-light, soft-light, soft-light;
            border: 1px solid var(--ah-border) !important;
            border-radius: 12px !important;
        }

        .ah-page .auction-history-shell {
            background-color: var(--ah-panel) !important;
            background-image: var(--cg-paper-layers) !important;
            background-size: var(--cg-paper-sizes) !important;
            background-repeat: repeat !important;
            background-blend-mode: soft-light, soft-light, soft-light;
            border: 1px solid var(--ah-border) !important;
            border-radius: 12px !important;
        }

        .ah-page .auction-history-empty,
        .ah-page .auction-history-toggle-box {
            background: var(--ah-inner) !important;
            border: 1px solid rgba(202, 162, 75, 0.22) !important;
            border-radius: 10px !important;
            color: var(--ah-ink-muted) !important;
        }

        .ah-page .auction-history-soft-text {
            color: var(--ah-ink-muted) !important;
        }

        /* ---------- Alerts and the series list ---------- */
        .ah-page .alert {
            background: var(--ah-inner) !important;
            border: 1px solid rgba(202, 162, 75, 0.28) !important;
            border-left: 4px solid var(--ah-gold) !important;
            border-radius: 10px !important;
            color: var(--ah-ink) !important;
        }

            .ah-page .alert-danger {
                border-left-color: #d9534f !important;
            }

            .ah-page .alert .alert-link {
                color: var(--ah-gold-hi) !important;
            }

        .ah-page .list-group-item {
            background: var(--ah-inner) !important;
            border: 1px solid rgba(202, 162, 75, 0.22) !important;
            color: var(--ah-ink) !important;
        }

        /* ---------- Buttons ---------- */
        .ah-page .btn-success,
        .ah-page .btn-primary,
        .ah-page .rz-button.rz-primary,
        .ah-modal .btn-primary,
        .ah-modal .btn-success {
            background: var(--ah-gold) !important;
            color: #1b1e22 !important;
            border: 1px solid var(--ah-gold-hi) !important;
            border-radius: 999px !important;
            font-family: 'Garamond', 'Georgia', serif;
            font-weight: 700 !important;
            text-shadow: none !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

            .ah-page .btn-success:hover,
            .ah-page .btn-primary:hover,
            .ah-page .rz-button.rz-primary:hover,
            .ah-modal .btn-primary:hover,
            .ah-modal .btn-success:hover {
                background: var(--ah-gold-hi) !important;
            }

        .ah-page .btn-secondary,
        .ah-page .btn-outline-secondary,
        .ah-modal .btn-secondary {
            background: transparent !important;
            color: var(--ah-gold-hi) !important;
            border: 1px solid rgba(202, 162, 75, 0.6) !important;
            border-radius: 999px !important;
            font-family: 'Garamond', 'Georgia', serif;
            font-weight: 700 !important;
        }

            .ah-page .btn-secondary:hover,
            .ah-page .btn-outline-secondary:hover,
            .ah-modal .btn-secondary:hover {
                background: rgba(202, 162, 75, 0.14) !important;
            }

        /* Cancelling or removing a lot stays red. */
        .ah-page .btn-danger,
        .ah-page .btn-outline-danger,
        .ah-modal .btn-danger {
            background: transparent !important;
            color: #ff9b9b !important;
            border: 1px solid rgba(217, 83, 79, 0.7) !important;
            border-radius: 999px !important;
            font-family: 'Garamond', 'Georgia', serif;
            font-weight: 700 !important;
        }

            .ah-page .btn-danger:hover,
            .ah-page .btn-outline-danger:hover,
            .ah-modal .btn-danger:hover {
                background: rgba(217, 83, 79, 0.18) !important;
            }

        .ah-page .btn:disabled,
        .ah-modal .btn:disabled {
            opacity: 0.55;
        }

        /* Buttons sitting on a parchment lot card need dark ink, not gold. */
        .ah-page .auction-card .btn-secondary,
        .ah-page .auction-card .btn-outline-secondary {
            color: #4a2a0c !important;
            border-color: rgba(74, 42, 12, 0.55) !important;
        }

            .ah-page .auction-card .btn-secondary:hover,
            .ah-page .auction-card .btn-outline-secondary:hover {
                background: rgba(74, 42, 12, 0.1) !important;
            }

    /* ---------- Windows ---------- */
    .ah-modal .modal-content {
        background-color: #23272b !important;
        background-image: var(--cg-paper-layers) !important;
        background-size: var(--cg-paper-sizes) !important;
        background-repeat: repeat !important;
        background-blend-mode: soft-light, soft-light, soft-light;
        color: #ece9e2 !important;
        border: 1px solid rgba(202, 162, 75, 0.45) !important;
        border-radius: 12px !important;
        font-family: 'Garamond', 'Georgia', serif;
    }

    .ah-modal .modal-header {
        background: rgba(0, 0, 0, 0.25) !important;
        border-bottom: 1px solid rgba(202, 162, 75, 0.25) !important;
        border-left: 4px solid #caa24b;
        color: #ffd86b !important;
    }

        .ah-modal .modal-header.bg-success,
        .ah-modal .modal-header.bg-primary,
        .ah-modal .modal-header.text-white,
        .ah-modal .modal-title {
            color: #ffd86b !important;
        }

    .ah-modal .btn-close {
        filter: invert(1) brightness(1.4);
    }

    .ah-modal .modal-body,
    .ah-modal .modal-body p,
    .ah-modal .modal-body h5,
    .ah-modal .modal-body label,
    .ah-modal .modal-body span,
    .ah-modal .modal-body div {
        color: #f4f0e6 !important;
    }

    .ah-modal .modal-body strong {
        color: #ffd86b !important;
    }

    .ah-modal .form-control,
    .ah-modal .form-select,
    .ah-modal .rz-dropdown {
        background-color: #1b1e22 !important;
        color: #ece9e2 !important;
        border: 1px solid rgba(202, 162, 75, 0.35) !important;
    }

    .ah-modal .modal-footer {
        border-top: 1px solid rgba(202, 162, 75, 0.25) !important;
    }

        /* ---------- Clear button in the filter bar ----------
           As an outline pill it matched the inputs beside it and read as a fourth empty
           field. A tinted fill and an icon make it read as a button. */
        .ah-page .ah-clear-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(202, 162, 75, 0.16) !important;
            color: var(--ah-gold-hi) !important;
            border: 1px solid rgba(202, 162, 75, 0.45) !important;
            border-radius: 999px !important;
            font-family: 'Garamond', 'Georgia', serif;
            font-weight: 700 !important;
            letter-spacing: 0.02em;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

            .ah-page .ah-clear-btn:hover,
            .ah-page .ah-clear-btn:focus-visible {
                background: var(--ah-gold) !important;
                color: #1b1e22 !important;
                border-color: var(--ah-gold-hi) !important;
            }

            .ah-page .ah-clear-btn:focus-visible {
                box-shadow: 0 0 0 0.2rem rgba(202, 162, 75, 0.3);
            }