:root{
    --bg: #03070a;
    --panel: #071016;
    --panel2: #101a22;
    --panel3: #15212a;
    --gold: #d8ad52;
    --gold-soft: #f1d38a;
    --line: #6f4d1f;
    --line-soft: rgba(216, 173, 82, .35);
    --text: #f4ead0;
    --muted: #b8ad93;
    --green: #77d36e;
    --blue: #5aa8ff;
    --purple: #a66bff;
    --red: #d35b45;
}

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    background:
        radial-gradient(circle at top, #13212a 0%, #05090d 42%, #010304 100%);
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
}

a{
    color: var(--gold);
}

button,
.btn{
    background: linear-gradient(180deg, #251b0d, #0a1015);
    border: 1px solid var(--line);
    color: var(--text);
    padding: .72rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-family: Georgia, "Times New Roman", serif;
    box-shadow:
        inset 0 0 0 1px rgba(255, 225, 150, .05),
        0 2px 8px rgba(0, 0, 0, .35);
}

button:hover,
.btn:hover{
    border-color: var(--gold);
    color: var(--gold-soft);
}

.btn{
    background: linear-gradient(180deg, #684717, #2a1b08);
}

.ghost{
    background: transparent;
}

.panel{
    background:
        linear-gradient(180deg, rgba(16, 28, 38, .96), rgba(6, 13, 18, .98));
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 225, 150, .06),
        inset 0 0 28px rgba(0, 0, 0, .35),
        0 8px 24px rgba(0, 0, 0, .55);
    padding: 14px;
}

/* Landing/Auth */

.landing{
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #182b39 0%, #03070a 62%, #010203 100%);
}

.hero{
    text-align: center;
    max-width: 760px;
    padding: 40px;
}

.hero h1,
.brand{
    color: var(--gold);
    font-size: 42px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px #000;
    font-weight: normal;
}

.hero p{
    font-size: 21px;
    color: var(--muted);
}

.actions{
    display: flex;
    gap: 16px;
    justify-content: center;
}

.auth{
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #0f1b23 0%, #03070a 52%, #010203 100%);
}

.authbox{
    width: 380px;
}

.authbox.wide{
    width: 620px;
}

.authbox h1{
    color: var(--gold-soft);
    font-size: 34px;
    font-weight: normal;
    margin: 0 0 20px;
    text-shadow: 0 2px 8px #000;
}

.authbox label{
    display: block;
    margin: 12px 0;
    color: var(--text);
    font-weight: bold;
}

.authbox input:not([type=radio]){
    width: 100%;
    padding: 11px;
    background: #03080b;
    border: 1px solid var(--line);
    color: #fff;
    border-radius: 3px;
    font-family: Georgia, "Times New Roman", serif;
}

.error{
    background: #301111;
    border: 1px solid #8a3333;
    padding: 10px;
}

.split{
    display: flex;
    gap: 22px;
}

/* Character Create Avatars */

.avatar-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: start;
}

.avatar-choice{
    display: block;
    margin: 0;
}

.avatar-choice input{
    margin-bottom: 6px;
}

.avatar-card{
    width: 140px;
    height: 170px;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--line);
    border-radius: 4px;
    display: block;
    background: none;
}

/* Character Portrait */

.portrait,
.player-avatar{
    width: 86px;
    height: 86px;
    display: block;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: none;
}

.portrait-button{
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
}

.portrait-button:hover .player-avatar{
    border-color: var(--gold);
}

/* Game Layout */

body.game{
    background:
        radial-gradient(circle at 50% 0%, #14222b 0%, #04080b 44%, #010304 100%);
}

.topbar{
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding: 0 24px;
    background: linear-gradient(180deg, #071017, #020608);
    box-shadow:
        inset 0 -1px 0 rgba(255, 225, 150, .06),
        0 8px 22px rgba(0, 0, 0, .75);
}

.brand{
    font-size: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
}

.brand-mark{
    width: 72px;
    height: 72px;
    display: inline-block;
    background-image: url("../img/logo-crown.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 auto;
}

.top-actions{
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn{
    display: inline-block;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 3px;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle, rgba(216, 173, 82, .32), rgba(0, 0, 0, .2)),
        linear-gradient(180deg, #17222a, #060a0d);
}

.game-grid{
    display: grid;
    grid-template-columns: 280px 1fr 360px;
    gap: 12px;
    padding: 12px;
    max-width: 1800px;
    margin: 0 auto;
}

.leftcol,
.rightcol{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.panel h2{
    margin: 0 0 14px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 18px;
    font-weight: normal;
}

.player-row{
    display: flex;
    gap: 16px;
    align-items: center;
    color: var(--text);
    font-size: 16px;
}

.player-row b{
    font-size: 22px;
    color: var(--gold-soft);
    font-weight: normal;
}

.xp-track{
    height: 5px;
    margin-top: 8px;
    background: #05080a;
    border: 1px solid rgba(216, 173, 82, .25);
    width: 135px;
}

.xp-track span{
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #517c8d, #a9d4dc);
}

.quick{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.quick button{
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(216, 173, 82, .16);
    border-radius: 0;
    box-shadow: none;
    color: var(--text);
    font-size: 17px;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.quick button:first-child,
.quick button:hover{
    background: linear-gradient(90deg, rgba(216, 173, 82, .16), transparent);
    color: var(--gold-soft);
    border: 1px solid rgba(216, 173, 82, .35);
    border-radius: 3px;
}

.nav-icon{
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle, rgba(216, 173, 82, .32), rgba(0, 0, 0, .2)),
        linear-gradient(180deg, #17222a, #060a0d);
    flex: 0 0 auto;
}

.events p{
    font-size: 14px;
    margin: 8px 0;
    line-height: 1.35;
}

.events span{
    color: #7ce375;
    font-weight: bold;
}

.centercol{
    min-height: 760px;
}

.region-title{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: start;
    margin-bottom: 12px;
}

.region-title h1{
    margin: 0;
    color: var(--gold-soft);
    font-size: 34px;
    font-weight: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px #000;
}

.region-title p{
    color: #d7d0bd;
    margin: 8px 0 0;
    font-size: 17px;
}

.coords{
    border: 1px solid var(--line);
    padding: 14px 22px;
    border-radius: 4px;
    color: var(--gold-soft);
    font-size: 24px;
    background: rgba(0, 0, 0, .35);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .35);
}

/* Map */

.map-stage{
    position: relative;
    isolation: isolate;
    height: 520px;
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 25%, rgba(130, 160, 190, .24), transparent 24%),
        radial-gradient(circle at 28% 52%, rgba(45, 110, 62, .48), transparent 28%),
        radial-gradient(circle at 72% 52%, rgba(112, 78, 44, .42), transparent 28%),
        radial-gradient(circle at 28% 76%, rgba(24, 115, 122, .36), transparent 25%),
        radial-gradient(circle at 72% 77%, rgba(132, 36, 21, .46), transparent 25%),
        linear-gradient(180deg, #1d2d2a, #0b1014 72%, #05080a 100%);
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, .65),
        inset 0 0 0 1px rgba(255, 225, 150, .04);
}

.map-stage::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 49.85%, rgba(216, 173, 82, .18) 50%, transparent 50.15%),
        linear-gradient(0deg, transparent 49.85%, rgba(216, 173, 82, .18) 50%, transparent 50.15%),
        linear-gradient(35deg, transparent 20%, rgba(255, 255, 255, .035) 50%, transparent 80%);
    pointer-events: none;
    z-index: 1;
}

.map-art-placeholder,
.minimap-art-placeholder{
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.map-pin-form{
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 5;
    margin: 0;
    padding: 0;
}

.map-pin{
    position: relative;
    transform: none;
    min-width: 132px;
    max-width: 155px;
    background: rgba(5, 8, 10, .92);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 8px 9px;
    border-radius: 4px;
    text-align: center;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, .65),
        inset 0 0 0 1px rgba(255, 225, 150, .06);
}

.map-pin:hover{
    transform: translateY(-2px);
}

.map-pin-icon{
    width: 34px;
    height: 34px;
    margin: -24px auto 4px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 173, 82, .38), rgba(0, 0, 0, .92));
    border: 1px solid var(--gold);
    color: var(--gold-soft);
    font-size: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .8);
}

.map-pin b{
    color: var(--gold-soft);
    font-weight: normal;
    display: block;
    line-height: 1.1;
}

.map-pin.current{
    background: linear-gradient(180deg, #12385a, #07121e);
    border-color: #6bb8ff;
    box-shadow:
        0 0 22px rgba(107, 184, 255, .4),
        0 8px 18px rgba(0, 0, 0, .65);
}

.map-pin.current .map-pin-icon{
    border-color: #6bb8ff;
    color: #c9e7ff;
}

.map-pin small{
    display: block;
    color: #d9bf75;
    margin-top: 3px;
    font-size: 12px;
}

.map-help{
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .72);
    border: 1px solid var(--line);
    padding: 9px 28px;
    border-radius: 3px;
    color: var(--gold-soft);
    z-index: 10;
}

/* Zoom Viewer */

.card-zoom{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .82);
    display: grid;
    place-items: center;
    z-index: 100;
}

.card-zoom.hidden{
    display: none;
}

.card-zoom img{
    max-height: 92vh;
    max-width: 92vw;
    border-radius: 10px;
    box-shadow: 0 20px 80px #000;
}

.card-zoom-close{
    position: fixed;
    top: 22px;
    right: 28px;
    font-size: 42px;
    background: transparent;
    border: 0;
    color: var(--gold-soft);
    box-shadow: none;
}

/* Right Column */

.minimap{
    height: 240px;
    position: relative;
    border: 1px solid var(--line);
    background-image: url("../img/maps/world/crownforge_realm.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 3px;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, .6);
    cursor: zoom-in;
    overflow: hidden;
}

.minimap::after{
    content: "Open World Map";
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(241, 211, 138, .75);
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(216, 173, 82, .25);
    padding: 3px 8px;
    pointer-events: none;
}

.minimap button{
    position: absolute;
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--gold-soft);
    border: 1px solid #4a3212;
    z-index: 3;
}

.minimap button:hover{
    transform: translate(-50%, -50%) scale(1.35);
}

.map-tools{
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.map-tools button{
    width: 44px;
    height: 36px;
    padding: 0;
}

.queue-item{
    border: 1px solid rgba(216, 173, 82, .25);
    margin: 8px 0;
    padding: 10px;
    background: rgba(0, 0, 0, .25);
}

.queue-item small{
    display: block;
    color: var(--muted);
}

/* Overlay */

.overlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    display: grid;
    place-items: center;
    z-index: 50;
}

.overlay.hidden{
    display: none;
}

.overlay-card{
    width: min(1000px, 92vw);
    min-height: 260px;
    background: linear-gradient(180deg, #101923, #06090c);
    border: 1px solid var(--gold);
    border-radius: 5px;
    padding: 24px;
    position: relative;
    box-shadow: 0 20px 80px #000;
}

.close{
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 24px;
    background: transparent;
    border: 0;
    color: var(--gold);
    box-shadow: none;
}

/* Full World Map Overlay */

.world-map-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .86);
    z-index: 90;
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.world-map-overlay.hidden{
    display: none;
}

.world-map-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #101923, #05080b);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}

.world-map-head h2{
    margin: 0;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: normal;
}

.world-map-controls{
    display: flex;
    align-items: center;
    gap: 8px;
}

.world-map-controls button{
    min-width: 42px;
    height: 38px;
    padding: 0 12px;
}

.world-map-viewport{
    flex: 1;
    margin-top: 12px;
    border: 1px solid var(--line);
    background: #020506;
    overflow: auto;
    position: relative;
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, .75),
        0 12px 40px rgba(0, 0, 0, .6);
}

.world-map-canvas{
    position: relative;
    width: 1600px;
    height: 1000px;
    transform-origin: top left;
    background-image: url("../img/maps/world/crownforge_realm.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.world-region-label{
    position: absolute;
    transform: translate(-50%, -50%);
    color: rgba(241, 211, 138, .42);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 24px;
    pointer-events: none;
    text-shadow: 0 2px 8px #000;
}

.world-map-pin-form{
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 4;
    margin: 0;
}

.world-map-pin{
    min-width: 150px;
    padding: 9px 10px;
    background: rgba(5, 8, 10, .93);
    border: 1px solid var(--line);
    color: var(--text);
    text-align: center;
    border-radius: 4px;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, .65),
        inset 0 0 0 1px rgba(255, 225, 150, .06);
}

.world-map-pin:hover{
    border-color: var(--gold);
    color: var(--gold-soft);
    transform: translateY(-2px);
}

.world-map-pin.current{
    background: linear-gradient(180deg, #12385a, #07121e);
    border-color: #6bb8ff;
    box-shadow:
        0 0 22px rgba(107, 184, 255, .4),
        0 8px 18px rgba(0, 0, 0, .65);
}

.world-map-pin b{
    display: block;
    color: var(--gold-soft);
    font-weight: normal;
}

.world-map-pin small{
    display: block;
    color: #d9bf75;
    margin-top: 3px;
}

.world-map-legend{
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 230px;
    padding: 14px;
    background: rgba(3, 7, 10, .88);
    border: 1px solid var(--line);
    color: var(--text);
    z-index: 20;
}

.world-map-legend h3{
    margin: 0 0 8px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.world-map-legend p{
    margin: 6px 0;
    font-size: 14px;
}

.world-map-legend span{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold-soft);
    border: 1px solid var(--line);
    margin-right: 6px;
}

.local-point{
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    min-width: 142px;
    background: rgba(5, 8, 10, .92);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 8px 9px;
    border-radius: 4px;
    text-align: center;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, .65),
        inset 0 0 0 1px rgba(255, 225, 150, .06);
}

.local-point:hover{
    transform: translate(-50%, calc(-50% - 2px));
    border-color: var(--gold);
    color: var(--gold-soft);
}

.local-point b{
    display: block;
    color: var(--gold-soft);
    font-weight: normal;
}

.local-point small{
    display: block;
    color: #d9bf75;
    margin-top: 3px;
    text-transform: capitalize;
}

.local-empty{
    position: absolute;
    top: 18px;
    left: 18px;
    max-width: 520px;
    z-index: 6;
}

.local-empty h3{
    margin: 0 0 10px;
    color: var(--gold-soft);
}

.you-are-here,
.world-you-are-here{
    position: absolute;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #6bb8ff;
    border: 2px solid #ffffff;
    box-shadow:
        0 0 0 4px rgba(107, 184, 255, .25),
        0 0 24px rgba(107, 184, 255, .9);
    z-index: 8;
    pointer-events: none;
}

.you-are-here::after,
.world-you-are-here::after{
    content: "You";
    position: absolute;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
    color: #c9e7ff;
    font-size: 11px;
    white-space: nowrap;
    text-shadow: 0 2px 6px #000;
}

.minimap-coords{
    position: absolute;
    left: 8px;
    top: 6px;
    z-index: 10;
    color: var(--gold-soft);
    font-size: 13px;
    text-shadow: 0 2px 6px #000;
    pointer-events: none;
}

.world-map-coords{
    color: var(--gold-soft);
    border: 1px solid var(--line);
    padding: 8px 12px;
    background: rgba(0, 0, 0, .35);
    min-width: 130px;
    text-align: center;
}

.legend-you{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6bb8ff;
    border: 1px solid #fff;
    margin-right: 6px;
}

@media (max-width: 1100px) {
    .game-grid{
        grid-template-columns: 1fr;
    }

    .leftcol,
.rightcol{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .map-stage{
        height: 420px;
    }

    .world-map-overlay{
        padding: 8px;
    }

    .world-map-head{
        flex-direction: column;
        align-items: stretch;
    }
}

.card-collection-page{
    max-width: 1500px;
    margin: 18px auto;
}

.collection-head h1{
    margin: 0;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: normal;
}

.collection-head p{
    color: var(--muted);
}

.card-filters{
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    margin: 18px 0;
}

.card-filters label{
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--gold-soft);
    font-size: 14px;
}

.card-filters input,
.card-filters select{
    width: 100%;
    padding: 10px;
    background: #03080b;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 3px;
}

.collection-count{
    color: var(--muted);
    margin-bottom: 12px;
}

.collection-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    max-height: calc(100vh - 330px);
    min-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    overscroll-behavior: contain;
}

.collection-grid::-webkit-scrollbar{
    width: 10px;
}

.collection-grid::-webkit-scrollbar-track{
    background: #05080b;
    border: 1px solid rgba(216, 173, 82, .18);
    border-radius: 999px;
}

.collection-grid::-webkit-scrollbar-thumb{
    background: rgba(216, 173, 82, .55);
    border-radius: 999px;
}

.collection-grid::-webkit-scrollbar-thumb:hover{
    background: rgba(244, 207, 122, .78);
}

.collection-grid{
    scrollbar-color: rgba(216, 173, 82, .55) #05080b;
    scrollbar-width: thin;
}

.collection-card{
    background: linear-gradient(180deg, #101820, #05080b);
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}

.collection-card.missing{
    opacity: .45;
    filter: grayscale(.85);
}

.collection-card-img-wrap{
    position: relative;
    aspect-ratio: 2 / 3;
    background: #020506;
}

.collection-card-img-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.collection-card-info{
    padding: 10px;
}

.collection-card-info h3{
    margin: 0 0 6px;
    color: var(--gold-soft);
    font-size: 16px;
    font-weight: normal;
}

.collection-card-info p,
.collection-card-info small{
    display: block;
    margin: 4px 0;
    color: var(--muted);
    font-size: 13px;
}

.missing-badge{
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 4px 7px;
    background: rgba(0, 0, 0, .75);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 900px) {
    .card-filters{
        grid-template-columns: 1fr;
    }
}

.profile-stats{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.profile-stat{
    border: 1px solid rgba(216, 173, 82, .45);
    background: rgba(0, 0, 0, .24);
    border-radius: 8px;
    padding: 13px 15px;
}

.profile-stat span{
    display: block;
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 5px;
}

.profile-stat strong{
    color: var(--text);
    font-size: 1.05rem;
}

.location-map{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 3px;
    z-index: 0;
    pointer-events: none;
}

.local-point{
    position: absolute;
    width: 18px;
    height: 18px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.local-dot{
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold-soft);
    border: 2px solid #fff2b8;
    box-shadow:
        0 0 0 4px rgba(216, 173, 82, .25),
        0 0 14px rgba(216, 173, 82, .85);
}

.local-tooltip{
    display: none;
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(3, 7, 10, .92);
    border: 1px solid var(--line);
    color: var(--gold-soft);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    pointer-events: none;
}

.local-point:hover .local-tooltip{
    display: block;
}

/* World Map Travel Dots */

.world-region-label,
.world-map-legend{
    display: none !important;
}

.world-map-dot{
    width: 16px;
    height: 16px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff2b8;
    background: var(--gold-soft);
    box-shadow:
        0 0 0 4px rgba(216, 173, 82, .25),
        0 0 14px rgba(216, 173, 82, .85);
}

.world-map-dot:hover{
    transform: scale(1.25);
    border-color: #fff8d6;
    box-shadow:
        0 0 0 5px rgba(216, 173, 82, .3),
        0 0 20px rgba(216, 173, 82, .95);
}

.world-map-dot.current{
    background: #6bb8ff;
    border-color: #fff;
    box-shadow:
        0 0 0 4px rgba(107, 184, 255, .25),
        0 0 18px rgba(107, 184, 255, .95);
}

/* Add this to the bottom of assets/css/style.css */
.chat-panel{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-head h2{
    margin: 0;
}

.chat-help{
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
}

.chat-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.chat-tab{
    padding: 9px 8px;
    font-size: .9rem;
}

.chat-tab.active{
    background: rgba(216, 173, 82, .22);
}

.chat-pm-row input,
.chat-form input{
    width: 100%;
    background: #061017;
    border: 1px solid var(--gold);
    color: var(--text);
    border-radius: 6px;
    padding: 11px 12px;
    font: inherit;
}

.chat-box{
    min-height: 300px;
    max-height: 360px;
    overflow-y: auto;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(216, 173, 82, .65);
    border-radius: 8px;
    padding: 12px;
}

.chat-message,
.chat-empty{
    margin: 0 0 8px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.chat-message strong{
    color: var(--gold);
}

.chat-message.mine strong{
    color: #ffe19b;
}

.chat-time,
.chat-to{
    color: var(--muted);
    font-size: .82rem;
}

.chat-form{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.chat-form button{
    white-space: nowrap;
}


/* Clean Social Panel Overrides */
.hidden,
.chat-pm-row.hidden,
.social-action-form.hidden{
    display: none !important;
}

.chat-panel{
    gap: 12px;
}

.chat-panel .chat-head{
    margin-bottom: 0;
}

.chat-tabs{
    gap: 9px;
}

.chat-tab{
    border-radius: 4px;
    min-height: 42px;
}

.chat-pm-row{
    margin: 0;
}

.chat-pm-row input{
    display: block;
}

.chat-pm-row.hidden,
.chat-pm-row.hidden input{
    display: none !important;
}

.chat-box{
    min-height: 310px;
}

.chat-form{
    align-items: stretch;
}

.chat-form input{
    min-height: 48px;
}

.chat-form button{
    min-width: 70px;
}

.social-tools,
.social-friends-list{
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(216, 173, 82, .28);
}

.social-tools-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14px;
}

.social-action-picker,
.social-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.social-action-picker button,
.social-actions button,
.social-action-form button,
#refreshFriendsBtn{
    padding: .62rem .7rem;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.1;
}

.social-action-form{
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: stretch;
}

.social-action-form input{
    width: 100%;
    min-width: 0;
    background: #061017;
    border: 1px solid var(--gold);
    color: var(--text);
    border-radius: 6px;
    padding: 10px 11px;
    font: inherit;
}

.social-action-form.hidden{
    display: none !important;
}

/* Manage Player name field */
.social-tools > #socialPlayerName,
#socialPlayerName{
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0 0 10px;
    background: #061017;
    border: 1px solid rgba(216, 173, 82, .75);
    color: var(--text);
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit;
}

.social-tools > #socialPlayerName:focus,
#socialPlayerName:focus{
    outline: none;
    border-color: var(--gold-soft);
    box-shadow: 0 0 0 2px rgba(216, 173, 82, .18);
}

.social-status{
    margin: 8px 0 0;
    min-height: 18px;
    color: var(--muted);
    font-size: 14px;
}

.social-status.success{
    color: var(--green);
}

.social-status.error{
    color: var(--red);
}

.social-friends-list{
    margin-top: 12px;
}

#friendsList{
    max-height: 170px;
    overflow-y: auto;
}

.social-friend-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(216, 173, 82, .16);
}

.social-friend-row strong{
    color: var(--gold-soft);
    font-weight: normal;
}

.social-friend-row small{
    color: var(--muted);
    white-space: nowrap;
}

.social-friend-actions{
    display: flex;
    gap: 6px;
}

.social-friend-actions button{
    padding: .35rem .5rem;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .social-action-picker,
.social-actions{
        grid-template-columns: 1fr;
    }

    .social-action-form{
        grid-template-columns: 1fr;
    }
}

/* Final Social Panel Polish */

.chat-pm-row.hidden,
.chat-pm-row.hidden input{
    display: none !important;
}

.chat-pm-row:not(.hidden){
    display: block;
}

.chat-pm-row:not(.hidden) input{
    display: block;
}

.chat-panel{
    gap: 12px;
}

.chat-tabs{
    margin-bottom: 0;
}

.chat-box{
    min-height: 310px;
    max-height: 360px;
}

.social-friends-list,
.social-tools{
    background: rgba(0, 0, 0, .10);
    border-top: 1px solid rgba(216, 173, 82, .32);
    padding-top: 13px;
}

.social-tools-head{
    margin-bottom: 10px;
}

.social-tools > #socialPlayerName,
#socialPlayerName{
    display: block !important;
    width: 100%;
    min-height: 44px;
    margin: 0 0 10px;
    background: #061017;
    border: 1px solid rgba(216, 173, 82, .75);
    color: var(--text);
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit;
}

.social-action-picker{
    grid-template-columns: 1fr 1fr;
}

.social-action-picker button{
    min-height: 42px;
}

.social-status{
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 10px;
    min-height: 36px;
    display: flex;
    align-items: center;
}

.social-status:empty{
    display: none;
}

.social-status.success{
    color: var(--green);
    background: rgba(42, 94, 43, .15);
    border-color: rgba(119, 211, 110, .25);
}

.social-status.error{
    color: #ffd5d0;
    background: rgba(100, 22, 22, .45);
    border-color: rgba(211, 91, 69, .45);
}

#friendsList{
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}

.social-friend-row{
    min-height: 42px;
}

.friend-pm-btn{
    padding: .4rem .55rem;
    font-size: 12px;
    min-width: 44px;
}

#refreshFriendsBtn{
    padding: .45rem .65rem;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .social-action-picker{
        grid-template-columns: 1fr 1fr;
    }
}

/* Hero Deck Modal */
.hero-deck-modal,
.equip-cards-modal{
    display: grid;
    gap: 18px;
}

.hero-deck-modal .modal-intro,
.equip-cards-modal .modal-intro{
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    max-width: 760px;
}

.equip-card-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.equip-slot{
    border: 1px solid rgba(216, 173, 82, .38);
    background:
        radial-gradient(circle at top, rgba(216, 173, 82, .10), transparent 42%),
        rgba(0, 0, 0, .24);
    border-radius: 8px;
    padding: 11px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 225, 150, .04),
        0 8px 18px rgba(0, 0, 0, .28);
}

.equip-slot-label{
    display: block;
    margin-bottom: 8px;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 13px;
    text-align: center;
}

.equip-slot-box{
    min-height: 205px;
    border: 1px dashed rgba(216, 173, 82, .55);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(16, 28, 38, .78), rgba(3, 7, 10, .9));
    display: grid;
    place-items: center;
    color: rgba(244, 234, 208, .58);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    position: relative;
    overflow: hidden;
}

.equip-slot-box::before{
    content: "";
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(216, 173, 82, .18);
    border-radius: 5px;
    pointer-events: none;
}

.equip-slot-box::after{
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 56px;
    color: rgba(216, 173, 82, .14);
    pointer-events: none;
}

.equip-slot:hover{
    border-color: var(--gold);
}

.equip-slot:hover .equip-slot-box{
    border-color: var(--gold-soft);
    color: var(--gold-soft);
}

.equip-summary{
    border: 1px solid rgba(216, 173, 82, .32);
    background: rgba(0, 0, 0, .22);
    border-radius: 8px;
    padding: 14px 16px;
}

.equip-summary h3{
    margin: 0 0 8px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 16px;
    font-weight: normal;
}

.equip-summary p{
    margin: 0;
    color: var(--muted);
}


.hero-deck-grid{
    grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.hero-deck-summary{
    display: grid;
    gap: 10px;
}

.hero-deck-stat-summary{
    display: grid;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    gap: 8px 14px;
    color: var(--text);
}

.hero-deck-stat-summary div{
    border: 1px solid rgba(216, 173, 82, .18);
    background: rgba(0, 0, 0, .18);
    padding: 8px 10px;
    border-radius: 4px;
}

@media (max-width: 1100px) {
    .hero-deck-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-deck-stat-summary{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .equip-card-grid,
.hero-deck-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-deck-stat-summary{
        grid-template-columns: 1fr;
    }

    .equip-slot-box{
        min-height: 160px;
    }
}

.lucky-lantern-modal{
  max-width: 980px;
}

.lantern-game-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(216, 173, 82, .35);
}

.lantern-game-card{
  min-height: 190px;
  background: linear-gradient(180deg, #101923, #070b10);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--text);
  padding: 18px;
  text-align: left;
  cursor: pointer;
}

.lantern-game-card h4{
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 1.35rem;
}

.lantern-game-card p{
  color: var(--muted);
  min-height: 58px;
}

.lantern-game-card span{
  display: inline-block;
  margin-top: 14px;
  color: var(--gold);
  font-weight: bold;
}

.lantern-game-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(216, 173, 82, .25);
}

@media (max-width: 900px) {
  .lantern-game-grid{
    grid-template-columns: 1fr;
  }
}
/* Gathering Modal */
.gathering-panel{
    display: grid;
    gap: 12px;
}

.gathering-status{
    color: var(--gold-soft);
    min-height: 20px;
}

.gathering-actions{
    display: grid;
    gap: 14px;
    margin-top: 8px;
}

.gathering-action-card{
    border: 1px solid rgba(216, 173, 82, .35);
    background: rgba(0, 0, 0, .22);
    border-radius: 6px;
    padding: 14px;
}

.gathering-action-head{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 16px;
    align-items: start;
}

.gathering-action-head h3{
    margin: 0 0 8px;
    color: var(--gold-soft);
    font-weight: normal;
    font-size: 22px;
}

.gathering-action-head p,
.gathering-action-body p{
    margin: 6px 0;
    color: var(--text);
}

.gathering-reward-box{
    border: 1px solid rgba(216, 173, 82, .4);
    background: rgba(0, 0, 0, .28);
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

.gathering-reward-box span,
.gathering-reward-box small{
    display: block;
    color: var(--muted);
}

.gathering-reward-box strong{
    display: block;
    color: var(--gold-soft);
    font-size: 18px;
    margin: 5px 0;
}

.gathering-tool-details{
    margin: 10px 0;
    color: var(--muted);
}

.gathering-tool-details summary{
    color: var(--gold-soft);
    cursor: pointer;
}

.gathering-active-list{
    margin: 12px 0;
    border-top: 1px solid rgba(216, 173, 82, .2);
    padding-top: 10px;
}

.gathering-active-list h4{
    margin: 0 0 8px;
    color: var(--gold-soft);
    font-weight: normal;
}

.gathering-job{
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(216, 173, 82, .22);
    background: rgba(0, 0, 0, .18);
    padding: 8px 10px;
    margin: 6px 0;
    border-radius: 4px;
}

.gathering-job small{
    color: var(--muted);
}

.gathering-job b{
    color: var(--gold-soft);
}

.gathering-start-btn{
    margin-top: 10px;
}

.gathering-start-btn:disabled{
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .gathering-action-head{
        grid-template-columns: 1fr;
    }

    .gathering-job{
        display: block;
    }
}


/* ======================================================
   Local Map Reliable Image Layer Fix
   Works with the updated game.php that uses <img class="location-map-image">.
   Keeps local point percentages locked to the actual rendered map.
   ====================================================== */
.world-panel{
    overflow: hidden;
}

.map-stage.local-stage,
.local-stage{
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.local-stage .location-map-image{
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 3px;
    position: relative;
    z-index: 0;
    user-select: none;
    pointer-events: none;
}

/* Fallback for older game.php versions that still use a CSS background map. */
.local-stage .location-map{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-radius: 3px;
    z-index: 0;
    pointer-events: none;
}

.map-stage.local-stage::before,
.local-stage::before{
    z-index: 1;
}

.map-stage.local-stage .local-point,
.local-stage .local-point{
    z-index: 5;
    transform: translate(-50%, -50%);
}

.map-stage.local-stage .local-point:hover,
.local-stage .local-point:hover{
    transform: translate(-50%, -50%) scale(1.15);
}

@media (max-width: 1100px) {
    .map-stage.local-stage,
.local-stage{
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 700px) {
    .local-tooltip{
        font-size: 12px;
        max-width: 220px;
        white-space: normal;
        text-align: center;
    }
}

/* ======================================================
   Lucky Lantern - Fortune Cards
   Scoped so it does not change the main game layout.
   ====================================================== */
.lucky-lantern-modal{
    max-width: 1080px;
}

.lucky-lantern-modal .lantern-game-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(216, 173, 82, .35);
}

.lucky-lantern-modal .lantern-game-card{
    min-height: 150px;
    background: linear-gradient(180deg, #101923, #070b10);
    border: 1px solid var(--gold);
    border-radius: 8px;
    color: var(--text);
    padding: 18px;
    text-align: left;
    cursor: pointer;
}

.lucky-lantern-modal .lantern-game-card h4{
    margin: 0 0 10px;
    color: var(--gold);
    font-size: 1.35rem;
}

.lucky-lantern-modal .lantern-game-card p{
    color: var(--muted);
    min-height: 0;
}

.lucky-lantern-modal .lantern-game-card span{
    display: inline-block;
    margin-top: 14px;
    color: var(--gold);
    font-weight: bold;
}

.lucky-lantern-modal .lantern-game-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(216, 173, 82, .25);
}

.fortune-cards-panel{
    margin-top: 18px;
    display: grid;
    gap: 16px;
}

.fortune-cards-intro{
    border-top: 1px solid rgba(216, 173, 82, .28);
    padding-top: 16px;
}

.fortune-cards-intro h3,
.fortune-board-head h3{
    margin: 0 0 6px;
    color: var(--gold-soft);
    font-size: 26px;
    font-weight: normal;
}

.fortune-cards-intro p,
.fortune-board-head p{
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

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

.fortune-wager-card{
    min-height: 128px;
    text-align: left;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(216, 173, 82, .48);
    background:
        radial-gradient(circle at top, rgba(216, 173, 82, .14), transparent 42%),
        linear-gradient(180deg, #101923, #05080b);
}

.fortune-wager-card strong{
    display: block;
    color: var(--gold-soft);
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: normal;
}

.fortune-wager-card span{
    display: block;
    color: var(--muted);
    line-height: 1.35;
}

.fortune-wager-card:hover{
    transform: translateY(-2px);
    border-color: var(--gold);
}

.fortune-status{
    min-height: 22px;
    color: var(--gold-soft);
}

.fortune-status.success{
    color: var(--green);
}

.fortune-status.error{
    color: #ffd5d0;
}

.fortune-board{
    border: 1px solid rgba(216, 173, 82, .35);
    background: rgba(0, 0, 0, .22);
    border-radius: 8px;
    padding: 16px;
}

.fortune-board-head{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.fortune-card-grid{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.fortune-pick-card{
    min-width: 0;
    padding: 10px;
    display: grid;
    gap: 8px;
    text-align: center;
    border: 1px solid rgba(216, 173, 82, .38);
    background: linear-gradient(180deg, rgba(16, 28, 38, .95), rgba(3, 7, 10, .95));
    border-radius: 8px;
}

.fortune-pick-card:hover:not(:disabled){
    transform: translateY(-2px);
    border-color: var(--gold-soft);
}

.fortune-pick-card:disabled{
    cursor: default;
}

.fortune-pick-card.selected{
    border-color: var(--green);
    box-shadow:
        0 0 0 2px rgba(119, 211, 110, .22),
        0 0 18px rgba(119, 211, 110, .25);
}

.fortune-card-img-wrap{
    display: block;
    aspect-ratio: 2 / 3;
    width: 100%;
    background: #020506;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(216, 173, 82, .22);
}

.fortune-card-img-wrap img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.fortune-pick-card strong{
    color: var(--gold-soft);
    font-weight: normal;
    font-size: 15px;
    line-height: 1.15;
}

.fortune-pick-card small{
    color: var(--muted);
}

@media (max-width: 900px) {
    .fortune-wagers{
        grid-template-columns: 1fr;
    }

    .fortune-card-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fortune-board-head{
        display: grid;
    }
}

/* ======================================================
   Gathering Accordion Fixes
   ====================================================== */
.gathering-actions{
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.gathering-action-card.gathering-action-collapsed{
    border: 1px solid rgba(216, 173, 82, .35);
    background: rgba(0, 0, 0, .22);
    border-radius: 6px;
    overflow: hidden;
}

.gathering-action-card.gathering-action-collapsed[open]{
    border-color: rgba(216, 173, 82, .65);
    box-shadow: 0 0 18px rgba(0, 0, 0, .22);
}

.gathering-action-summary{
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 12px 14px;
    list-style: none;
    background: linear-gradient(90deg, rgba(216, 173, 82, .13), rgba(0, 0, 0, .08));
}

.gathering-action-summary::-webkit-details-marker{
    display: none;
}

.gathering-action-summary::before{
    content: "▶";
    color: var(--gold-soft);
    margin-right: 4px;
    transition: transform .15s ease;
}

.gathering-action-card[open] > .gathering-action-summary::before{
    transform: rotate(90deg);
}

.gathering-action-summary-main{
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.gathering-action-summary-main strong{
    color: var(--gold-soft);
    font-size: 19px;
    font-weight: normal;
}

.gathering-action-summary-main small{
    color: var(--muted);
}

.gathering-action-summary-reward{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    white-space: nowrap;
}

.gathering-lock-badge,
.gathering-ready-badge{
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    border: 1px solid rgba(216, 173, 82, .25);
}

.gathering-ready-badge{
    color: var(--green);
    background: rgba(42, 94, 43, .16);
}

.gathering-lock-badge{
    color: var(--muted);
    background: rgba(0, 0, 0, .25);
}

.gathering-action-expanded{
    padding: 14px;
}

.gathering-action-expanded .gathering-action-head{
    margin-bottom: 10px;
}

@media (max-width: 800px) {
    .gathering-action-summary{
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
    }

    .gathering-action-summary-reward{
        grid-column: 2;
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* ======================================================
   Lucky Lantern Host Portrait Size Fix
   Keeps the Lucky Lantern NPC image from rendering at full size.
   ====================================================== */
.lucky-lantern-modal .npc-shop-header{
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
    margin: 0 0 18px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(216, 173, 82, .28) !important;
}

.lucky-lantern-modal .npc-shop-image{
    width: 220px !important;
    max-width: 220px !important;
    height: 220px !important;
    overflow: hidden !important;
    border: 2px solid var(--gold) !important;
    border-radius: 10px !important;
    background: #020506 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .55) !important;
}

.lucky-lantern-modal .npc-shop-image img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.lucky-lantern-modal .npc-shop-info{
    min-width: 0 !important;
}

.lucky-lantern-modal .npc-shop-info h3{
    margin: 0 0 10px !important;
    color: var(--gold-soft) !important;
    font-size: 1.7rem !important;
    font-weight: normal !important;
}

.lucky-lantern-modal .npc-shop-info p{
    margin: 0 !important;
    color: var(--muted) !important;
    line-height: 1.45 !important;
}

@media (max-width: 700px) {
    .lucky-lantern-modal .npc-shop-header{
        grid-template-columns: 1fr !important;
    }

    .lucky-lantern-modal .npc-shop-image{
        width: 100% !important;
        max-width: 320px !important;
        height: 220px !important;
    }
}

.top-actions{
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-actions a{
    color: #d4af37;
    text-decoration: none;
    font-family: Cinzel, serif;
    font-weight: 600;
    letter-spacing: .04em;
    transition: color .2s ease;
}

.top-actions a:hover{
    color: #f8dc7b;
    text-shadow: 0 0 8px rgba(212,175,55,.5);
}
/* ======================================================
   Chat / Player Profile Modal - Global Formatting Fix
   Keeps profile links from rendering as a giant avatar/image view.
   Used by chat usernames,
recent event usernames,
and auction links.
   ====================================================== */
.chat-player-link,
a.chat-player-link,
[data-chat-profile-id]{
    color: var(--gold, #d8ad52) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    cursor: pointer !important;
}

.chat-player-link:hover,
a.chat-player-link:hover,
[data-chat-profile-id]:hover{
    color: var(--gold-soft, #f1d38a) !important;
}

.chat-profile-modal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 11000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px !important;
    background: rgba(0, 0, 0, .76) !important;
}

.chat-profile-modal.hidden,
.chat-profile-modal[hidden]{
    display: none !important;
}

.chat-profile-card{
    position: relative !important;
    width: min(920px, 94vw) !important;
    max-width: 920px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px !important;
    border: 1px solid rgba(216, 173, 82, .85) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #101c24, #071016) !important;
    color: var(--text, #f4ead0) !important;
    box-shadow: 0 24px 90px rgba(0, 0, 0, .75) !important;
}

.chat-profile-close{
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 3 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border: 1px solid rgba(216, 173, 82, .55) !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, .35) !important;
    color: var(--gold, #d8ad52) !important;
    font-size: 24px !important;
    line-height: 34px !important;
    text-align: center !important;
    box-shadow: none !important;
}

.chat-profile-content{
    min-width: 0 !important;
}

.chat-public-profile{
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.chat-public-profile-head{
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding-right: 48px !important;
}

.chat-public-profile-head img,
.chat-profile-card .chat-public-profile-head img{
    display: block !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: 1px solid rgba(216, 173, 82, .65) !important;
    border-radius: 8px !important;
    background: #020506 !important;
    box-shadow: none !important;
}

.chat-profile-kicker{
    display: block !important;
    margin: 0 0 4px !important;
    color: var(--gold, #d8ad52) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
}

.chat-public-profile h3{
    margin: 0 0 4px !important;
    color: var(--text, #f4ead0) !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
}

.chat-public-profile p{
    margin: 4px 0 !important;
    color: var(--text, #f4ead0) !important;
}

.chat-public-profile small{
    color: var(--muted, #b8ad93) !important;
}

.chat-profile-level{
    min-width: 58px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(216, 173, 82, .55) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(216, 173, 82, .18), rgba(0, 0, 0, .24)) !important;
    text-align: center !important;
}

.chat-profile-level span{
    display: block !important;
    color: var(--text, #f4ead0) !important;
    font-size: 12px !important;
    opacity: .85 !important;
}

.chat-profile-level strong{
    display: block !important;
    color: var(--gold-soft, #f1d38a) !important;
    font-size: 30px !important;
    line-height: 1 !important;
}

.chat-profile-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.chat-profile-box{
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(216, 173, 82, .38) !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, .22) !important;
}

.chat-profile-box h4{
    margin: 0 0 9px !important;
    color: var(--gold, #d8ad52) !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

.chat-profile-stat-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.chat-profile-stat-grid span{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(216, 173, 82, .26) !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, .2) !important;
    color: var(--text, #f4ead0) !important;
}

.chat-profile-stat-grid b,
.chat-profile-stat-grid strong{
    color: var(--text, #f4ead0) !important;
}

.chat-profile-record-main{
    color: var(--gold-soft, #f1d38a) !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

.chat-profile-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.chat-profile-pm-btn{
    padding: 8px 12px !important;
    border: 1px solid rgba(216, 173, 82, .55) !important;
    border-radius: 5px !important;
    background: rgba(216, 173, 82, .12) !important;
    color: var(--text, #f4ead0) !important;
    cursor: pointer !important;
}

@media (max-width: 760px) {
    .chat-profile-card{
        width: 96vw !important;
        padding: 14px !important;
    }

    .chat-public-profile-head{
        grid-template-columns: 76px minmax(0, 1fr) !important;
        padding-right: 44px !important;
    }

    .chat-public-profile-head img,
.chat-profile-card .chat-public-profile-head img{
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
    }

    .chat-profile-level{
        grid-column: 1 / -1 !important;
        justify-self: start !important;
    }

    .chat-profile-grid,
.chat-profile-stat-grid{
        grid-template-columns: 1fr !important;
    }
}


/* ======================================================
   Friends Modal
   ====================================================== */
.friends-modal{
    position: fixed;
    inset: 0;
    z-index: 10950;
    background: rgba(0, 0, 0, .76);
    display: grid;
    place-items: center;
    padding: 18px;
}

.friends-modal.hidden,
.friends-modal[hidden]{
    display: none !important;
}

.friends-modal-card{
    position: relative;
    width: min(980px, 96vw);
    max-height: 90vh;
    overflow: auto;
    border: 1px solid rgba(216, 173, 82, .8);
    border-radius: 10px;
    background: linear-gradient(180deg, #101c24, #060b0f);
    color: var(--text);
    padding: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,.72);
}

.friends-modal-close{
    position: absolute;
    right: 12px;
    top: 12px;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 22px;
    z-index: 2;
}

.friends-modal-head{
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    padding-right: 48px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(216,173,82,.25);
    padding-bottom: 14px;
}

.friends-modal-head h2{
    margin: 0 0 6px;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 28px;
    font-weight: normal;
}

.friends-modal-head p,
.friends-muted{
    margin: 0;
    color: var(--muted);
    line-height: 1.4;
}

.friends-modal-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 16px;
}

.friends-box{
    border: 1px solid rgba(216,173,82,.32);
    border-radius: 8px;
    background: rgba(0,0,0,.22);
    padding: 14px;
}

.friends-box h3{
    margin: 0 0 12px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 17px;
    font-weight: normal;
}

.friends-list{
    max-height: 430px;
    overflow-y: auto;
    padding-right: 6px;
}

.friends-modal .social-friend-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(216,173,82,.16);
}

.friends-modal .social-friend-row strong{
    color: var(--gold-soft);
    font-weight: normal;
}

.friends-modal .social-friend-row small{
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.friends-modal .social-friend-actions{
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.friends-modal .friend-pm-btn,
.friends-modal .friend-profile-btn,
.friends-modal #refreshFriendsBtn{
    padding: .45rem .65rem;
    font-size: 13px;
    min-width: 58px;
}

.friends-modal #socialPlayerName{
    display: block !important;
    width: 100%;
    min-height: 44px;
    margin: 10px 0;
    background: #061017;
    border: 1px solid rgba(216, 173, 82, .75);
    color: var(--text);
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit;
}

.friends-action-picker{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.friends-action-picker button{
    min-height: 42px;
    padding: .62rem .7rem;
}

.friends-modal .social-status{
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 10px;
    min-height: 36px;
    display: flex;
    align-items: center;
}

.friends-modal .social-status:empty{
    display: none;
}

@media (max-width: 900px) {
    .friends-modal-grid{
        grid-template-columns: 1fr;
    }

    .friends-modal-head{
        display: grid;
    }
}


/* ======================================================
   Reliable Modal Scroll Fix
   Keeps injected overlay modals inside the browser viewport.
   ====================================================== */
.overlay:not(.hidden){
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
}

.overlay-card{
    width: min(1500px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 36px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 auto !important;
}

#overlayTitle{
    flex: 0 0 auto !important;
}

#overlayBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 173, 82, .65) rgba(0, 0, 0, .25);
}

#overlayBody::-webkit-scrollbar{
    width: 10px;
}

#overlayBody::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(216, 173, 82, .18);
    border-radius: 999px;
}

#overlayBody::-webkit-scrollbar-thumb{
    background: rgba(216, 173, 82, .65);
    border-radius: 999px;
}

#overlayBody::-webkit-scrollbar-thumb:hover{
    background: rgba(241, 211, 138, .9);
}

#overlayBody .blacksmith-panel,
#overlayBody .hero-hall-panel{
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}


/* ======================================================
   Lucky Lantern Modal Scroll Fix
   Keeps Lucky Lantern inside the browser window and gives
   the game body its own scrollbar like the shop modal.
   ====================================================== */
#luckyLanternModal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(0, 0, 0, .72) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
}

#luckyLanternModal.hidden,
#luckyLanternModal[hidden]{
    display: none !important;
}

#luckyLanternModal .lucky-lantern-modal,
#luckyLanternModal.lucky-lantern-modal{
    width: min(1500px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 10px !important;
    min-height: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 173, 82, .65) rgba(0, 0, 0, .25);
}

#luckyLanternModal .lucky-lantern-modal::-webkit-scrollbar,
#luckyLanternModal.lucky-lantern-modal::-webkit-scrollbar{
    width: 10px;
}

#luckyLanternModal .lucky-lantern-modal::-webkit-scrollbar-track,
#luckyLanternModal.lucky-lantern-modal::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(216, 173, 82, .18);
    border-radius: 999px;
}

#luckyLanternModal .lucky-lantern-modal::-webkit-scrollbar-thumb,
#luckyLanternModal.lucky-lantern-modal::-webkit-scrollbar-thumb{
    background: rgba(216, 173, 82, .65);
    border-radius: 999px;
}

#luckyLanternModal .lucky-lantern-modal::-webkit-scrollbar-thumb:hover,
#luckyLanternModal.lucky-lantern-modal::-webkit-scrollbar-thumb:hover{
    background: rgba(241, 211, 138, .9);
}

/* The section that grows after starting a Fortune Cards game. */
#luckyLanternModal .fortune-board{
    max-height: calc(100vh - 430px) !important;
    min-height: 220px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 173, 82, .65) rgba(0, 0, 0, .25);
}

#luckyLanternModal .fortune-board::-webkit-scrollbar{
    width: 10px;
}

#luckyLanternModal .fortune-board::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(216, 173, 82, .18);
    border-radius: 999px;
}

#luckyLanternModal .fortune-board::-webkit-scrollbar-thumb{
    background: rgba(216, 173, 82, .65);
    border-radius: 999px;
}

#luckyLanternModal .fortune-board::-webkit-scrollbar-thumb:hover{
    background: rgba(241, 211, 138, .9);
}

@media (max-height: 820px) {
    #luckyLanternModal .npc-shop-header{
        grid-template-columns: 160px minmax(0, 1fr) !important;
        gap: 16px !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }

    #luckyLanternModal .npc-shop-image{
        width: 160px !important;
        max-width: 160px !important;
        height: 160px !important;
    }

    #luckyLanternModal .fortune-cards-panel{
        margin-top: 12px !important;
        gap: 10px !important;
    }

    #luckyLanternModal .fortune-cards-intro{
        padding-top: 12px !important;
    }

    #luckyLanternModal .fortune-board{
        max-height: calc(100vh - 350px) !important;
    }

    #luckyLanternModal .fortune-pick-card{
        padding: 8px !important;
        gap: 6px !important;
    }
}

@media (max-width: 900px) {
    #luckyLanternModal{
        align-items: flex-start !important;
        padding: 12px !important;
    }

    #luckyLanternModal .lucky-lantern-modal,
#luckyLanternModal.lucky-lantern-modal{
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
    }

    #luckyLanternModal .fortune-board{
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ======================================================
   Daily Treasure Vault Modal Scroll / Fit Fix
   Keeps the treasure vault inside the browser window and
   gives the rewards area its own scrollbar when needed.
   ====================================================== */
#overlayBody:has(.daily-treasure-panel){
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#overlayBody .daily-treasure-panel{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .8rem !important;
    padding-right: 4px !important;
}

#overlayBody .daily-treasure-head{
    flex: 0 0 auto !important;
}

#overlayBody .daily-treasure-stage{
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: clamp(190px, 30vh, 300px) !important;
    padding: .85rem !important;
}

#overlayBody .daily-treasure-chest{
    width: clamp(165px, 20vw, 230px) !important;
    height: clamp(125px, 16vw, 180px) !important;
}

#overlayBody .daily-treasure-status{
    margin: .35rem 0 0 !important;
}

#overlayBody .daily-treasure-xp{
    flex: 0 0 auto !important;
    padding: .8rem !important;
}

#overlayBody .daily-treasure-rewards{
    flex: 1 1 auto !important;
    min-height: 190px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: .85rem !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 173, 82, .65) rgba(0, 0, 0, .25);
}

#overlayBody .daily-treasure-rewards[hidden],
#overlayBody .daily-treasure-xp[hidden]{
    display: none !important;
}

#overlayBody .daily-treasure-rewards::-webkit-scrollbar{
    width: 10px;
}

#overlayBody .daily-treasure-rewards::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(216, 173, 82, .18);
    border-radius: 999px;
}

#overlayBody .daily-treasure-rewards::-webkit-scrollbar-thumb{
    background: rgba(216, 173, 82, .65);
    border-radius: 999px;
}

#overlayBody .daily-treasure-rewards::-webkit-scrollbar-thumb:hover{
    background: rgba(241, 211, 138, .9);
}

@media (max-height: 820px) {
    #overlayBody .daily-treasure-panel{
        gap: .55rem !important;
    }

    #overlayBody .daily-treasure-head h2{
        font-size: 1.35rem !important;
        margin-bottom: .15rem !important;
    }

    #overlayBody .daily-treasure-head p{
        font-size: .92rem !important;
        line-height: 1.25 !important;
    }

    #overlayBody .daily-treasure-timer-box{
        padding: .55rem .7rem !important;
        min-width: 160px !important;
    }

    #overlayBody .daily-treasure-stage{
        height: 185px !important;
        padding: .55rem !important;
    }

    #overlayBody .daily-treasure-chest{
        width: 170px !important;
        height: 130px !important;
    }

    #overlayBody .daily-treasure-xp{
        padding: .65rem !important;
    }

    #overlayBody .daily-treasure-rewards{
        min-height: 160px !important;
        padding: .7rem !important;
    }

    #overlayBody .daily-reward-card{
        padding: .55rem !important;
    }

    #overlayBody .daily-reward-card img{
        width: 105px !important;
        max-height: 145px !important;
    }
}

@media (max-width: 760px) {
    #overlayBody:has(.daily-treasure-panel){
        overflow-y: auto !important;
    }

    #overlayBody .daily-treasure-panel{
        overflow: visible !important;
    }

    #overlayBody .daily-treasure-stage{
        height: auto !important;
        min-height: 210px !important;
    }

    #overlayBody .daily-treasure-rewards{
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ======================================================
   Local point tooltip readability fix
   Allows long point labels such as "Shadowed Grove - World Boss"
   to display fully instead of being clipped by the local map box.
   ====================================================== */
.world-panel,
.map-stage.local-stage,
.local-stage{
    overflow: visible !important;
}

.local-stage .location-map-image,
.local-stage .location-map{
    border: 1px solid var(--line);
}

.local-point{
    overflow: visible !important;
}

.local-tooltip{
    display: none;
    position: absolute;
    left: 50%;
    top: 24px;
    bottom: auto !important;
    transform: translateX(-50%);
    z-index: 99999;
    min-width: max-content;
    max-width: min(360px, 72vw);
    white-space: normal !important;
    overflow-wrap: break-word;
    text-align: center;
    background: rgba(3, 7, 10, .96);
    border: 1px solid var(--line);
    color: var(--gold-soft);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.25;
    pointer-events: none;
    box-shadow: 0 10px 26px rgba(0,0,0,.65);
}

.local-point:hover .local-tooltip,
.local-point:focus .local-tooltip,
.local-point:focus-visible .local-tooltip{
    display: block !important;
}

/* World Boss / system chat announcements */
.chat-message.system{
    border: 1px solid rgba(216, 173, 82, .28);
    border-radius: 8px;
    padding: 7px 9px;
    background: rgba(216, 173, 82, .075);
}

.chat-message.system strong,
.chat-system-sender{
    color: #f4d884;
}

/* Crownforge world map aspect repair: keep enlarged map canvas aligned to real image ratio. */
.world-map-canvas{
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
}

.world-map-viewport{
    overflow: auto;
    overscroll-behavior: contain;
}

.world-map-dot,
.world-you-are-here{
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
}

/* ==========================================================
   Mobile chat composer touch-target fix
   Makes the entire visible message field reliably tappable.
   ========================================================== */
.chat-form{
    min-width: 0;
}

.chat-form > *{
    min-width: 0;
}

.chat-form input,
#chatInput{
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    position: relative;
    z-index: 1;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

.chat-form button{
    min-height: 52px;
    touch-action: manipulation;
}

@media (max-width: 760px) {
    .chat-form{
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    .chat-form input,
#chatInput{
        font-size: 16px;
        padding: 12px 14px;
    }
}

/* ==========================================================
   Universal mobile modal scrolling
   Keeps every modal reachable on phones,
including content
   injected into the shared overlay by shops,
commissions,
gathering,
bosses,
crafting,
settings,
profiles,
and decks.
   ========================================================== */
@media (max-width: 900px){
    html,
    body {
        max-width: 100%;
    }

    /* Shared overlay used by location points and template modals. */
    .overlay,
    .modal,
    .battle-arena-modal,
    .friends-modal,
    .chat-profile-modal,
    .card-zoom,
    .world-map-overlay {
        box-sizing: border-box;
        align-items: flex-start !important;
        justify-items: stretch;
        place-items: initial;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding:
            max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left)) !important;
    }

    /* Main modal surfaces. */
    .overlay-card,
    .modal-card,
    .battle-arena-card,
    .friends-modal-card,
    .chat-profile-card {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        scrollbar-gutter: stable;
    }

    /* Firefox/older mobile viewport fallback. */
    @supports not (height: 100dvh) {
        .overlay-card,
        .modal-card,
        .battle-arena-card,
        .friends-modal-card,
        .chat-profile-card {
            max-height: calc(100vh - 20px) !important;
        }
    }

    /* Content roots inserted into the standard overlay. */

    .blacksmith-panel,
    .hero-hall-panel,
    .crafting-hall-panel,
    .daily-treasure-panel,
    .gathering-panel,
    #gatheringPanel,
    .commission-board,
    .commission-board-panel,
    .hero-deck-modal,
    .equip-cards-modal,
    .profile-modal,
    .settings-modal,
    .lucky-lantern-modal,
    .achievements-card {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
    }

    /* Do not let nested fixed-height panels trap the page on mobile. */

    .blacksmith-panel,
    .hero-hall-panel,
    .crafting-hall-panel,
    .daily-treasure-panel,
    .commission-board,
    .commission-board-panel,
    .hero-deck-modal,
    .equip-cards-modal,
    .profile-modal,
    .settings-modal,
    .lucky-lantern-modal {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Gathering already has its own internal scroller; make it tall enough
       to use while keeping the parent modal itself scrollable. */
    #gatheringPanel,
    .gathering-panel {
        max-height: none !important;
    }

    .gathering-scroll-wrap {
        max-height: min(62dvh, 620px) !important;
        min-height: 180px;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* Achievement modal is a standalone modal and needs a bounded card. */
    .achievements-modal {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .achievements-card {
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep close controls reachable while long content scrolls. */
    .overlay-card > .close,
    .modal-card > .close,
    .battle-arena-close,
    .friends-modal-close,
    .chat-profile-close {
        position: sticky !important;
        top: 0 !important;
        float: right;
        z-index: 50;
        margin-left: auto;
        touch-action: manipulation;
    }

    /* Wide grids/tables should scroll sideways inside the modal instead of
       forcing the entire page wider than the phone. */
    .overlay-card table,
    .modal-card table,
    .battle-arena-card table,
    .friends-modal-card table,

    .crafting-hall-panel table,
    .commission-board table,
    .profile-modal table {
        max-width: 100%;
    }

    .guide-table-wrap,
    .table-wrap,
    .commission-table-wrap,
    .crafting-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Allow flex/grid children to shrink rather than creating hidden overflow. */
    .overlay-card *,
.modal-card *,
.battle-arena-card *,
.friends-modal-card *{
        min-width: 0;
    }

    /* Form controls remain usable and do not trigger iOS zoom. */
    .overlay-card input,
.overlay-card select,
.overlay-card textarea,
.modal-card input,
.modal-card select,
.modal-card textarea,
.battle-arena-card input,
.battle-arena-card select,
.battle-arena-card textarea,
.friends-modal-card input,
.friends-modal-card select,
.friends-modal-card textarea{
        max-width: 100%;
        font-size: 16px;
    }
}

/* ==========================================================
   Shared overlay-body root fix
   #overlayBody contains shops, Adventure Guild, Blacksmith,
   commissions, crafting, bosses, and other location modals.
   ========================================================== */
#overlay:not(.hidden) > .overlay-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#overlay:not(.hidden) > .overlay-card > #overlayBody {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
}

@media (max-width: 900px) {
    #overlay:not(.hidden) {
        overflow: hidden !important;
    }

    #overlay:not(.hidden) > .overlay-card {
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    #overlay:not(.hidden) > .overlay-card > #overlayBody {
        height: auto !important;
        max-height: none !important;
        padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 900px) {
        #overlay:not(.hidden) > .overlay-card {
            height: calc(100vh - 16px) !important;
            max-height: calc(100vh - 16px) !important;
        }
    }
}

/* Final shared-modal touch safeguard */
@media (max-width: 900px) {
    #overlay:not(.hidden) > .overlay-card > #overlayBody {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
}

/* ==========================================================
   Clickable world regions — full map and minimap
   The seven SVG polygons replace the old location dots.
   ========================================================== */
.world-map-region-layer{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    overflow: visible;
    pointer-events: none;
}

.world-map-region{
    fill: rgba(216, 173, 82, 0);
    stroke: rgba(241, 211, 138, 0);
    stroke-width: .32;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: auto;
    cursor: pointer;
    outline: none;
    transition: fill .18s ease, stroke .18s ease, filter .18s ease;
}

.world-map-region:hover,
.world-map-region:focus,
.world-map-region:focus-visible{
    fill: rgba(216, 173, 82, .19);
    stroke: rgba(255, 226, 145, .95);
    filter: drop-shadow(0 0 7px rgba(216, 173, 82, .9));
}

.world-map-region.current{
    fill: rgba(107, 184, 255, .10);
    stroke: rgba(160, 216, 255, .72);
}

.world-map-region.current:hover,
.world-map-region.current:focus,
.world-map-region.current:focus-visible{
    fill: rgba(107, 184, 255, .22);
    stroke: #d9f0ff;
    filter: drop-shadow(0 0 7px rgba(107, 184, 255, .95));
}

/* There are no destination dots once region travel is active. */
.world-map-pin-form,
.world-map-dot,
.minimap-dot{
    display: none !important;
}

.minimap-region-layer{
    z-index: 4;
}

.minimap .world-map-region{
    stroke-width: .55;
}

.minimap .world-map-region:hover,
.minimap .world-map-region:focus,
.minimap .world-map-region:focus-visible{
    fill: rgba(216, 173, 82, .24);
    filter: drop-shadow(0 0 4px rgba(216, 173, 82, .95));
}

/* Keep the player marker and coordinate readout above the region layer. */
.minimap .you-are-here{
    z-index: 8;
}

.minimap .minimap-coords{
    z-index: 10;
}


/* ==========================================================
   World Boss mobile layout — force image above raid details
   This final override intentionally uses !important because
   game-navigation.js injects its own World Boss styles later.
   ========================================================== */
@media (max-width: 760px) {
    #overlayBody #worldBossPanel,
    #overlayBody .world-boss-panel {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #overlayBody #worldBossPanel .world-boss-head,
    #overlayBody .world-boss-panel .world-boss-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #overlayBody #worldBossPanel .world-boss-timer,
    #overlayBody .world-boss-panel .world-boss-timer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #overlayBody #worldBossPanel .world-boss-body,
    #overlayBody #worldBossPanel .world-boss-body.has-boss-image,
    #overlayBody .world-boss-panel .world-boss-body,
    #overlayBody .world-boss-panel .world-boss-body.has-boss-image {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: .75rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-items: start !important;
    }

    #overlayBody #worldBossPanel .world-boss-image-wrap,
    #overlayBody .world-boss-panel .world-boss-image-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 230px !important;
        aspect-ratio: 16 / 9 !important;
        align-self: start !important;
    }

    #overlayBody #worldBossPanel .world-boss-image-wrap img,
    #overlayBody .world-boss-panel .world-boss-image-wrap img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        object-fit: cover !important;
    }

    #overlayBody #worldBossPanel .world-boss-details,
    #overlayBody .world-boss-panel .world-boss-details {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    #overlayBody #worldBossPanel .world-boss-message,
    #overlayBody #worldBossPanel .world-boss-stats,
    #overlayBody #worldBossPanel .world-boss-assessment,
    #overlayBody #worldBossPanel .world-boss-rewards,
    #overlayBody #worldBossPanel .world-boss-actions,
    #overlayBody #worldBossPanel .world-boss-reports,
    #overlayBody #worldBossPanel .world-boss-participants,
    #overlayBody .world-boss-panel .world-boss-message,
    #overlayBody .world-boss-panel .world-boss-stats,
    #overlayBody .world-boss-panel .world-boss-assessment,
    #overlayBody .world-boss-panel .world-boss-rewards,
    #overlayBody .world-boss-panel .world-boss-actions,
    #overlayBody .world-boss-panel .world-boss-reports,
    #overlayBody .world-boss-panel .world-boss-participants {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    #overlayBody #worldBossPanel .world-boss-stats,
    #overlayBody .world-boss-panel .world-boss-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .45rem !important;
    }

    #overlayBody #worldBossPanel .world-boss-assessment-grid,
    #overlayBody .world-boss-panel .world-boss-assessment-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .45rem !important;
    }

    #overlayBody #worldBossPanel .world-boss-actions,
    #overlayBody .world-boss-panel .world-boss-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .55rem !important;
    }

    #overlayBody #worldBossPanel .world-boss-actions > *,
    #overlayBody .world-boss-panel .world-boss-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    #overlayBody #worldBossPanel .world-boss-report-row,
    #overlayBody .world-boss-panel .world-boss-report-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .2rem !important;
    }

    #overlayBody #worldBossPanel .world-boss-participant-list,
    #overlayBody .world-boss-panel .world-boss-participant-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 420px) {
    #overlayBody #worldBossPanel .world-boss-image-wrap,
    #overlayBody .world-boss-panel .world-boss-image-wrap {
        max-height: 190px !important;
    }

    #overlayBody #worldBossPanel .world-boss-stats,
    #overlayBody .world-boss-panel .world-boss-stats {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* ======================================================
   Capital Treasure Vault — Reward & Bonus Layout Polish
   Added after the enhanced daily-vault reward update.
   ====================================================== */

/* Keep the three primary rewards compact and evenly aligned. */
#overlayBody .daily-reward-grid,
#overlayBody #dailyRewardGrid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

#overlayBody .daily-reward-card{
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    text-align: center !important;
    overflow: hidden !important;
}

#overlayBody .daily-reward-slot{
    min-height: 18px !important;
    margin: 0 0 2px !important;
    color: var(--text) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

#overlayBody .daily-reward-card img{
    display: block !important;
    width: auto !important;
    height: 145px !important;
    max-width: 100% !important;
    max-height: 145px !important;
    margin: 0 auto 2px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 5px !important;
}

#overlayBody .daily-reward-rating{
    order: 3 !important;
    margin: 0 !important;
    padding: 2px 8px !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
}

#overlayBody .daily-reward-card > strong{
    order: 4 !important;
    margin: 2px 0 0 !important;
    color: var(--gold-soft) !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
}

#overlayBody .daily-reward-card > small{
    order: 5 !important;
    margin: 0 !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
}

#overlayBody .daily-reward-xp{
    order: 6 !important;
    margin: 2px 0 0 !important;
    font-size: .96rem !important;
    line-height: 1.1 !important;
}

#overlayBody .daily-odds-details{
    order: 7 !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
}

#overlayBody .daily-odds-details summary{
    padding: 0 !important;
    font-size: .76rem !important;
}

/* Compact bonus cache. Never allow full-size card artwork here. */
#overlayBody .daily-treasure-bonus,
#overlayBody #dailyTreasureBonusRewards{
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(216, 173, 82, .28) !important;
}

#overlayBody .daily-treasure-bonus h3,
#overlayBody #dailyTreasureBonusRewards h3{
    margin: 0 0 3px !important;
    color: var(--gold-soft) !important;
    font-size: 1.05rem !important;
}

#overlayBody .daily-treasure-bonus > p,
#overlayBody #dailyTreasureBonusRewards > p{
    margin: 0 0 8px !important;
    color: var(--muted) !important;
    font-size: .85rem !important;
}

#overlayBody .daily-bonus-grid{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
}

#overlayBody .daily-bonus-item{
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    padding: 8px !important;
    border: 1px solid rgba(216, 173, 82, .3) !important;
    border-radius: 7px !important;
    background: rgba(0, 0, 0, .22) !important;
    overflow: hidden !important;
}

#overlayBody .daily-bonus-item img{
    display: block !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, .28) !important;
}

#overlayBody .daily-bonus-item div{
    min-width: 0 !important;
}

#overlayBody .daily-bonus-item strong{
    display: block !important;
    color: var(--gold-soft) !important;
    font-size: .92rem !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
}

#overlayBody .daily-bonus-item small{
    display: block !important;
    margin-top: 3px !important;
    color: var(--muted) !important;
    font-size: .75rem !important;
    line-height: 1.15 !important;
}

/* Keep the XP block compact now that rewards award more XP. */
#overlayBody .daily-treasure-xp h3{
    margin: 0 0 3px !important;
    font-size: 1.05rem !important;
}

#overlayBody .daily-treasure-xp p{
    margin: 0 0 2px !important;
    line-height: 1.2 !important;
}

#overlayBody .daily-treasure-xp small{
    line-height: 1.2 !important;
}

/* Shorter desktop layouts: devote more room to rewards than chest artwork. */
@media (min-width: 761px) and (max-height: 900px) {
    #overlayBody .daily-treasure-stage{
        height: 175px !important;
    }

    #overlayBody .daily-treasure-chest{
        width: 165px !important;
        height: 125px !important;
    }

    #overlayBody .daily-reward-card img{
        height: 125px !important;
        max-height: 125px !important;
    }
}

/* Tablet/mobile: stack rewards cleanly and keep bonus rows readable. */
@media (max-width: 900px) {
    #overlayBody .daily-reward-grid,
    #overlayBody #dailyRewardGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    #overlayBody .daily-reward-grid,
    #overlayBody #dailyRewardGrid{
        grid-template-columns: 1fr !important;
    }

    #overlayBody .daily-reward-card img{
        height: 160px !important;
        max-height: 160px !important;
    }

    #overlayBody .daily-bonus-grid{
        grid-template-columns: 1fr !important;
    }
}


/* ======================================================
   Gathering Reward Odds — Readable Card Layout Fix
   Prevents reward name, rarity, quantity, and percentage overlap.
   ====================================================== */
.gathering-reward-list{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)) !important;
    gap: .5rem !important;
    padding: .58rem .64rem .7rem !important;
    align-items: stretch !important;
}

.gathering-reward-list > span{
    min-width: 0 !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: .65rem !important;
    row-gap: .18rem !important;
    align-items: center !important;
    padding: .55rem .62rem !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, .25) !important;
    overflow: hidden !important;
}

.gathering-reward-label{
    min-width: 0 !important;
    display: grid !important;
    gap: .16rem !important;
    align-content: center !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
}

.gathering-reward-label > strong,
.gathering-reward-label{
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.gathering-reward-label small{
    display: block !important;
    margin: 0 !important;
    color: #d8c9a8 !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.gathering-reward-chance{
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
    min-width: 52px !important;
    padding-left: .35rem !important;
    color: #f5d477 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.gathering-reward-chance.is-zero{
    color: #9b917a !important;
    opacity: .75 !important;
}

/* The compatibility markup may place text directly inside the label span. */
.gathering-reward-list > span > .gathering-reward-label{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}

/* Keep the odds note visually separated from the reward grid. */
.gathering-reward-odds-note{
    margin: 0 !important;
    padding: .5rem .64rem .42rem !important;
    border-top: 1px solid rgba(216, 173, 82, .12) !important;
    color: #d8c9a8 !important;
    font-size: .8rem !important;
    line-height: 1.35 !important;
}

/* Wide desktop: avoid eight tiny compressed columns. */
@media (min-width: 1200px){
    .gathering-reward-list{
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px){
    .gathering-reward-list{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px){
    .gathering-reward-list{
        grid-template-columns: 1fr !important;
    }

    .gathering-reward-list > span{
        min-height: 58px !important;
    }
}