/* SHOCKER_V55_SCROLLABLE_RESIZABLE_CHAIN_LOG */

.opponent-chain-log-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

#v55-chain-log-toggle {
    min-width: 38px;
    min-height: 18px;
    margin: -2px 0 -2px auto;
    padding: 2px 5px;
    border: 1px solid rgba(255, 150, 150, .65);
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(105, 25, 25, .95), rgba(45, 5, 5, .96));
    color: #ffd0d0;
    font-family: "Courier New", monospace;
    font-size: 8px;
    line-height: 1;
    letter-spacing: .04em;
    cursor: pointer;
    touch-action: manipulation;
}

#v55-chain-log-toggle:focus-visible {
    outline: 2px solid #ffe39a;
    outline-offset: 1px;
}

.opponent-chain-log {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-height: 36px;
    max-height: min(32vh, 260px) !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    resize: vertical;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.opponent-chain-log:focus-visible {
    outline: 1px solid rgba(255, 210, 160, .8);
    outline-offset: 1px;
}

.opponent-hand-display.v55-chain-log-expanded .opponent-chain-log {
    height: min(24vh, 180px);
}

body.v55-chain-log-expanded .opponent-area {
    overflow: visible !important;
    contain: layout !important;
    z-index: 55 !important;
}

body.v55-chain-log-expanded #opponent-hand-display {
    z-index: 560 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .88), 0 0 14px rgba(255, 80, 80, .28);
}

@media (max-width: 390px) {
    .opponent-chain-log {
        height: 38px;
        min-height: 32px;
        max-height: min(27vh, 180px) !important;
    }

    .opponent-hand-display.v55-chain-log-expanded .opponent-chain-log {
        height: min(21vh, 138px);
    }

    #v55-chain-log-toggle {
        min-width: 34px;
        min-height: 17px;
        padding: 2px 4px;
        font-size: 7px;
    }
}