/* Desktop game workspace and tabbed side dock. Mobile keeps the existing drawer UX. */
.er-game {
    --er-game-dock-width: clamp(360px, 24vw, 410px);
    --er-game-dock-tab-width: 58px;
    background:
        radial-gradient(circle at 22% -8%, rgba(66, 84, 110, .14), transparent 32rem),
        radial-gradient(circle at 92% 10%, rgba(201, 164, 95, .075), transparent 28rem),
        #080b10;
}

.er-game .er-game-header {
    border-bottom-color: rgba(201, 164, 95, .16);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .26);
}

.er-game .er-game-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0, rgba(201, 164, 95, .5) 18%, rgba(201, 164, 95, .08) 62%, transparent 100%);
    pointer-events: none;
}

.er-game .er-chat-panel {
    border-color: rgba(95, 111, 130, .34);
    background: linear-gradient(180deg, rgba(17, 24, 33, .985), rgba(8, 12, 18, .995));
    box-shadow: 0 22px 56px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.er-game .er-chat-panel > header {
    background: linear-gradient(180deg, rgba(20, 27, 37, .98), rgba(15, 21, 29, .98));
    border-bottom-color: rgba(255, 255, 255, .065);
}

.er-game .er-chat-log {
    scrollbar-width: thin;
    scrollbar-color: #45515f transparent;
}

.er-game .er-chat-log::-webkit-scrollbar,
.er-game-dock .er-rail::-webkit-scrollbar {
    width: 8px;
}

.er-game .er-chat-log::-webkit-scrollbar-thumb,
.er-game-dock .er-rail::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #45515f;
    background-clip: padding-box;
}

.er-game .er-composer {
    border-top-color: rgba(201, 164, 95, .14);
}

@media (min-width: 901px) {
    .er-game .er-game-layout {
        grid-template-columns: minmax(0, 1fr) var(--er-game-dock-width);
        gap: 16px;
        align-items: start;
    }

    .er-game.er-game--dock-left .er-game-layout {
        grid-template-columns: var(--er-game-dock-width) minmax(0, 1fr);
    }

    .er-game.er-game--dock-left .er-game-dock {
        grid-column: 1;
        grid-row: 1;
    }

    .er-game.er-game--dock-left .er-chats {
        grid-column: 2;
        grid-row: 1;
    }

    .er-game.er-game--dock-collapsed .er-game-layout {
        grid-template-columns: minmax(0, 1fr) var(--er-game-dock-tab-width);
    }

    .er-game.er-game--dock-left.er-game--dock-collapsed .er-game-layout {
        grid-template-columns: var(--er-game-dock-tab-width) minmax(0, 1fr);
    }

    .er-game-dock {
        position: sticky;
        z-index: 34;
        top: 92px;
        align-self: start;
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--er-game-dock-tab-width);
        width: 100%;
        height: calc(100dvh - 108px);
        min-height: 470px;
        overflow: visible;
    }

    .er-game-dock[data-dock-side="left"] {
        grid-template-columns: var(--er-game-dock-tab-width) minmax(0, 1fr);
    }

    .er-game-dock__surface {
        position: relative;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border: 1px solid rgba(83, 97, 115, .44);
        border-radius: 18px 0 18px 18px;
        background:
            linear-gradient(160deg, rgba(19, 26, 35, .985), rgba(9, 13, 19, .99)),
            #0c1118;
        box-shadow: 0 22px 58px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .025);
    }

    .er-game-dock[data-dock-side="left"] .er-game-dock__surface {
        grid-column: 2;
        border-radius: 0 18px 18px 18px;
    }

    .er-game-dock[data-dock-side="right"] .er-game-dock__surface {
        grid-column: 1;
    }

    .er-game-dock__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 68px;
        padding: 12px 12px 11px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        background: linear-gradient(180deg, rgba(24, 32, 42, .96), rgba(15, 21, 29, .94));
    }

    .er-game-dock__heading {
        display: grid;
        min-width: 0;
        gap: 1px;
    }

    .er-game-dock__heading > span {
        color: #80745c;
        font-size: .58rem;
        font-weight: 900;
        letter-spacing: .19em;
    }

    .er-game-dock__heading > strong {
        overflow: hidden;
        color: #f0ddb0;
        font-size: .96rem;
        letter-spacing: .01em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .er-game-dock__heading > small {
        overflow: hidden;
        color: #8995a2;
        font-size: .67rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .er-game-dock__actions {
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
    }

    .er-game-dock__actions button {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid #35414f;
        border-radius: 9px;
        background: #111821;
        color: #c8d0d8;
        font-size: .9rem;
        font-weight: 900;
        transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
    }

    .er-game-dock__actions button:hover,
    .er-game-dock__actions button:focus-visible {
        border-color: rgba(201, 164, 95, .58);
        outline: none;
        background: rgba(201, 164, 95, .09);
        color: #efd8a3;
    }

    .er-game-dock .er-rail {
        position: static;
        top: auto;
        display: block;
        min-width: 0;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        padding: 10px;
        scrollbar-width: thin;
        scrollbar-color: #45515f transparent;
    }

    .er-game-dock .er-rail-card {
        margin: 0 0 9px;
        padding: 14px;
        border: 1px solid rgba(73, 87, 104, .38);
        border-radius: 13px;
        background: linear-gradient(155deg, rgba(15, 21, 29, .88), rgba(9, 13, 19, .78));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
    }

    .er-game-dock .er-rail-card:last-child {
        margin-bottom: 0;
    }

    .er-game-dock .er-rail-card[hidden] {
        display: none !important;
    }

    .er-game-dock .er-rail-card > span,
    .er-game-dock .er-map-card__head > span,
    .er-game-dock .er-world-characters-card__head > span {
        color: #d7b66f;
        letter-spacing: .14em;
    }

    .er-game-dock__tabs {
        position: relative;
        z-index: 2;
        grid-column: 2;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        padding: 10px 0 10px 7px;
    }

    .er-game-dock[data-dock-side="left"] .er-game-dock__tabs {
        grid-column: 1;
        grid-row: 1;
        padding: 10px 7px 10px 0;
    }

    .er-game-dock__tabs button {
        position: relative;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 4px;
        width: 100%;
        min-height: 64px;
        padding: 7px 4px;
        border: 1px solid rgba(73, 87, 104, .46);
        border-left-color: rgba(73, 87, 104, .22);
        border-radius: 0 12px 12px 0;
        background: linear-gradient(180deg, rgba(18, 25, 34, .98), rgba(11, 16, 23, .98));
        color: #8e99a5;
        box-shadow: 8px 9px 24px rgba(0, 0, 0, .18);
        transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
    }

    .er-game-dock[data-dock-side="left"] .er-game-dock__tabs button {
        border-right-color: rgba(73, 87, 104, .22);
        border-left-color: rgba(73, 87, 104, .46);
        border-radius: 12px 0 0 12px;
        box-shadow: -8px 9px 24px rgba(0, 0, 0, .18);
    }

    .er-game-dock__tabs button:hover,
    .er-game-dock__tabs button:focus-visible {
        z-index: 3;
        border-color: rgba(201, 164, 95, .48);
        outline: none;
        color: #e1c98f;
        transform: translateX(2px);
    }

    .er-game-dock[data-dock-side="left"] .er-game-dock__tabs button:hover,
    .er-game-dock[data-dock-side="left"] .er-game-dock__tabs button:focus-visible {
        transform: translateX(-2px);
    }

    .er-game-dock__tabs button[aria-selected="true"] {
        border-color: rgba(201, 164, 95, .64);
        background:
            linear-gradient(180deg, rgba(201, 164, 95, .17), rgba(201, 164, 95, .055)),
            #131922;
        color: #f0d89f;
        box-shadow: 8px 10px 30px rgba(0, 0, 0, .28), inset 3px 0 0 #c9a45f;
    }

    .er-game-dock[data-dock-side="left"] .er-game-dock__tabs button[aria-selected="true"] {
        box-shadow: -8px 10px 30px rgba(0, 0, 0, .28), inset -3px 0 0 #c9a45f;
    }

    .er-game-dock__tab-code {
        display: grid;
        place-items: center;
        width: 28px;
        height: 24px;
        border: 1px solid currentColor;
        border-radius: 8px;
        font-size: .58rem;
        font-weight: 950;
        letter-spacing: .06em;
        opacity: .92;
    }

    .er-game-dock__tab-label {
        max-width: 50px;
        overflow: hidden;
        font-size: .56rem;
        font-weight: 850;
        letter-spacing: .02em;
        line-height: 1.05;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .er-game.er-game--dock-collapsed .er-game-dock {
        grid-template-columns: var(--er-game-dock-tab-width);
        width: var(--er-game-dock-tab-width);
        height: auto;
        min-height: 0;
    }

    .er-game.er-game--dock-collapsed .er-game-dock__surface {
        display: none;
    }

    .er-game.er-game--dock-collapsed .er-game-dock__tabs {
        grid-column: 1;
        padding-left: 0;
        padding-right: 0;
    }

    .er-game.er-game--dock-collapsed .er-game-dock[data-dock-side="right"] .er-game-dock__tabs button {
        border-left-color: rgba(73, 87, 104, .46);
        border-radius: 12px;
    }

    .er-game.er-game--dock-collapsed .er-game-dock[data-dock-side="left"] .er-game-dock__tabs button {
        border-right-color: rgba(73, 87, 104, .46);
        border-radius: 12px;
    }

    .er-game.er-game--dock-collapsed .er-game-dock__tab-label {
        display: none;
    }

    .er-game.er-game--dock-collapsed .er-game-dock__tabs button {
        min-height: 48px;
    }

    .er-game.er-game--dock-collapsed .er-game-dock__tabs button[aria-selected="true"] {
        box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 -3px 0 #c9a45f;
    }

    .er-game-dock .er-world-locations,
    .er-game-dock .er-world-character-grid,
    .er-game-dock .er-campaign-ranking {
        min-width: 0;
    }

    .er-game-dock .er-report-links {
        flex-wrap: wrap;
    }

    .er-game-dock .er-report-links a {
        flex: 1 1 130px;
        text-align: center;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .er-game {
        --er-game-dock-width: 350px;
        --er-game-dock-tab-width: 54px;
    }

    .er-game-dock__tab-label {
        display: none;
    }

    .er-game-dock__tabs button {
        min-height: 52px;
    }
}

@media (max-width: 900px) {
    .er-game-dock {
        display: none !important;
    }
}