:root {
    --pm-button-height-compact: 36px;
    --pm-button-height-standard: 44px;
    --pm-button-height-large: 54px;
    --pm-button-radius: 6px;
    --pm-button-font-size-compact: 13px;
    --pm-button-font-size-standard: 14px;
    --pm-button-font-size-large: 16px;
    --pm-button-font-weight-compact: 600;
    --pm-button-font-weight-standard: 600;
    --pm-button-font-weight-large: 700;
    --pm-button-padding-block-compact: 6px;
    --pm-button-padding-block-standard: 8px;
    --pm-button-padding-block-large: 11px;
    --pm-button-padding-inline-compact: 12px;
    --pm-button-padding-inline-standard: 18px;
    --pm-button-padding-inline-large: 26px;
    --pm-button-gap: 8px;
    --pm-button-focus: #89b9ff;
    --pm-button-primary: #2767c9;
    --pm-button-primary-hover: #3478dc;
    --pm-button-secondary: #15283a;
    --pm-button-secondary-hover: #1c3449;
    --pm-button-line: #476883;
    --pm-button-ink: #f5f9ff;
    --pm-button-muted: #c6d4e2;
    --pm-button-danger-solid: #9f2943;
    --pm-button-danger-solid-border: #bd3c58;
    --pm-button-danger-solid-hover: #b73550;
    --pm-button-danger-solid-hover-border: #d0526d;
    --pm-button-danger-outline-ink: #ffbac8;
    --pm-button-danger-outline-border: #8e4051;
    --pm-button-danger-outline-bg: #28171d;
    --pm-button-danger-outline-hover-border: #bd536a;
    --pm-button-danger-outline-hover-bg: #3a1d26;
    --pm-card-overlay-visual-size: 21px;
    --pm-card-overlay-hit-size: 22px;
    --pm-card-overlay-icon-size: 0.7rem;
    --pm-card-overlay-gap: 2px;

    /* KANAMEX Button Contract v1: brand-neutral semantic layer.
       Existing --pm-* variables remain the PlayMEX theme adapter. */
    --kmx-button-height-compact: var(--pm-button-height-compact);
    --kmx-button-height-standard: var(--pm-button-height-standard);
    --kmx-button-height-large: var(--pm-button-height-large);
    --kmx-button-radius: var(--pm-button-radius);
    --kmx-button-font-size-compact: var(--pm-button-font-size-compact);
    --kmx-button-font-size-standard: var(--pm-button-font-size-standard);
    --kmx-button-font-size-large: var(--pm-button-font-size-large);
    --kmx-button-font-weight-compact: var(--pm-button-font-weight-compact);
    --kmx-button-font-weight-standard: var(--pm-button-font-weight-standard);
    --kmx-button-font-weight-large: var(--pm-button-font-weight-large);
    --kmx-button-padding-block-compact: var(--pm-button-padding-block-compact);
    --kmx-button-padding-block-standard: var(--pm-button-padding-block-standard);
    --kmx-button-padding-block-large: var(--pm-button-padding-block-large);
    --kmx-button-padding-inline-compact: var(--pm-button-padding-inline-compact);
    --kmx-button-padding-inline-standard: var(--pm-button-padding-inline-standard);
    --kmx-button-padding-inline-large: var(--pm-button-padding-inline-large);
    --kmx-button-gap: var(--pm-button-gap);
    --kmx-button-focus: var(--pm-button-focus);
    --kmx-button-primary: var(--pm-button-primary);
    --kmx-button-primary-border: #3477dc;
    --kmx-button-primary-hover: var(--pm-button-primary-hover);
    --kmx-button-primary-hover-border: #4d8aea;
    --kmx-button-secondary: var(--pm-button-secondary);
    --kmx-button-secondary-hover: var(--pm-button-secondary-hover);
    --kmx-button-secondary-hover-border: #6688a3;
    --kmx-button-line: var(--pm-button-line);
    --kmx-button-ink: var(--pm-button-ink);
    --kmx-button-muted: var(--pm-button-muted);
    --kmx-button-tertiary-ink: #a9c8ee;
    --kmx-button-tertiary-hover: rgb(51 91 126 / 28%);
    --kmx-button-danger-solid: var(--pm-button-danger-solid);
    --kmx-button-danger-solid-border: var(--pm-button-danger-solid-border);
    --kmx-button-danger-solid-hover: var(--pm-button-danger-solid-hover);
    --kmx-button-danger-solid-hover-border: var(--pm-button-danger-solid-hover-border);
    --kmx-button-danger-outline-ink: var(--pm-button-danger-outline-ink);
    --kmx-button-danger-outline-border: var(--pm-button-danger-outline-border);
    --kmx-button-danger-outline-bg: var(--pm-button-danger-outline-bg);
    --kmx-button-danger-outline-hover-border: var(--pm-button-danger-outline-hover-border);
    --kmx-button-danger-outline-hover-bg: var(--pm-button-danger-outline-hover-bg);
    --kmx-button-selected-border: #c99b3c;
    --kmx-button-selected-ink: #ffe29b;
    --kmx-button-selected-bg: #382d17;
    --kmx-card-overlay-visual-size: var(--pm-card-overlay-visual-size);
    --kmx-card-overlay-hit-size: var(--pm-card-overlay-hit-size);
    --kmx-card-overlay-icon-size: var(--pm-card-overlay-icon-size);
    --kmx-card-overlay-gap: var(--pm-card-overlay-gap);
}

.pm-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--kmx-button-height-standard);
    padding: var(--kmx-button-padding-block-standard) var(--kmx-button-padding-inline-standard);
    border: 1px solid transparent;
    border-radius: var(--kmx-button-radius);
    color: var(--kmx-button-ink);
    font: inherit;
    font-size: var(--kmx-button-font-size-standard);
    font-weight: var(--kmx-button-font-weight-standard);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease,
        color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.pm-button:hover:not(:disabled):not([aria-disabled="true"]) {
    text-decoration: none;
}

.pm-button:focus-visible,
.pm-icon-button:focus-visible,
.pm-card-overlay .pm-card-overlay-action:focus-visible {
    outline: 3px solid var(--kmx-button-focus);
    outline-offset: 2px;
}

.pm-button:disabled,
.pm-button[aria-disabled="true"],
.pm-icon-button:disabled,
.pm-icon-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

a.pm-button[aria-disabled="true"],
a.pm-icon-button[aria-disabled="true"] {
    pointer-events: none;
}

.pm-button--primary {
    border-color: var(--kmx-button-primary-border);
    background: var(--kmx-button-primary);
}

.pm-button--primary:hover:not(:disabled):not([aria-disabled="true"]),
.pm-button--primary.is-demo-hover {
    border-color: var(--kmx-button-primary-hover-border);
    background: var(--kmx-button-primary-hover);
}

.pm-button--secondary {
    border-color: var(--kmx-button-line);
    color: var(--kmx-button-muted);
    background: var(--kmx-button-secondary);
}

.pm-button--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.pm-button--secondary.is-demo-hover {
    border-color: var(--kmx-button-secondary-hover-border);
    color: #fff;
    background: var(--kmx-button-secondary-hover);
}

.pm-button--tertiary {
    border-color: transparent;
    color: var(--kmx-button-tertiary-ink);
    background: transparent;
}

.pm-button--tertiary:hover:not(:disabled):not([aria-disabled="true"]),
.pm-button--tertiary.is-demo-hover {
    color: #fff;
    background: var(--kmx-button-tertiary-hover);
}

.pm-button--danger {
    border-color: var(--kmx-button-danger-solid-border);
    background: var(--kmx-button-danger-solid);
}

.pm-button--danger:hover:not(:disabled):not([aria-disabled="true"]),
.pm-button--danger.is-demo-hover {
    border-color: var(--kmx-button-danger-solid-hover-border);
    background: var(--kmx-button-danger-solid-hover);
}

.pm-button--danger-outline {
    border-color: var(--kmx-button-danger-outline-border);
    color: var(--kmx-button-danger-outline-ink);
    background: var(--kmx-button-danger-outline-bg);
}

.pm-button--danger-outline:hover:not(:disabled):not([aria-disabled="true"]),
.pm-button--danger-outline.is-demo-hover {
    border-color: var(--kmx-button-danger-outline-hover-border);
    color: #fff;
    background: var(--kmx-button-danger-outline-hover-bg);
}

.pm-button--compact,
.like-button.pm-button--compact {
    min-height: var(--kmx-button-height-compact);
    padding: var(--kmx-button-padding-block-compact) var(--kmx-button-padding-inline-compact);
    font-size: var(--kmx-button-font-size-compact);
    font-weight: var(--kmx-button-font-weight-compact);
}

.pm-button--large {
    min-height: var(--kmx-button-height-large);
    padding: var(--kmx-button-padding-block-large) var(--kmx-button-padding-inline-large);
    font-size: var(--kmx-button-font-size-large);
    font-weight: var(--kmx-button-font-weight-large);
}

.pm-button.is-loading::before {
    width: 0.8em;
    height: 0.8em;
    margin-right: 7px;
    border: 2px solid rgb(255 255 255 / 35%);
    border-top-color: currentColor;
    border-radius: 50%;
    content: "";
    animation: pm-button-spin 0.8s linear infinite;
}

.pm-button.is-selected,
.pm-button[aria-pressed="true"] {
    border-color: var(--kmx-button-selected-border);
    color: var(--kmx-button-selected-ink);
    background: var(--kmx-button-selected-bg);
}

.pm-button.is-demo-focus {
    outline: 3px solid var(--kmx-button-focus);
    outline-offset: 2px;
}

.pm-button:active:not(:disabled):not([aria-disabled="true"]),
.pm-button.is-demo-active,
.pm-icon-button:active:not(:disabled):not([aria-disabled="true"]),
.pm-icon-button.is-demo-active {
    filter: brightness(0.92);
    transform: translateY(1px);
}

.pm-icon-button {
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    width: var(--kmx-button-height-standard);
    height: var(--kmx-button-height-standard);
    padding: 0;
    border: 1px solid var(--kmx-button-line);
    border-radius: var(--kmx-button-radius);
    color: var(--kmx-button-muted);
    background: var(--kmx-button-secondary);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.pm-icon-button:hover:not(:disabled),
.pm-icon-button.is-demo-hover {
    border-color: var(--kmx-button-secondary-hover-border);
    color: #fff;
    background: var(--kmx-button-secondary-hover);
}

.pm-icon-button--compact {
    width: var(--kmx-button-height-compact);
    height: var(--kmx-button-height-compact);
}

.pm-icon-button--large {
    width: var(--kmx-button-height-large);
    height: var(--kmx-button-height-large);
    font-size: 1.15rem;
}

.pm-button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--kmx-button-gap);
}

.pm-button-group--form {
    justify-content: flex-start;
}

.pm-button-group--modal,
.pm-button-group--filter {
    justify-content: flex-end;
}

.pm-card-overlay {
    position: absolute;
    z-index: 6;
    right: 5px;
    bottom: 5px;
    display: flex;
    align-items: center;
    gap: var(--kmx-card-overlay-gap);
    padding: 2px;
    border: 1px solid rgb(177 204 226 / 18%);
    border-radius: 7px;
    background: linear-gradient(180deg, rgb(8 16 23 / 62%), rgb(7 14 21 / 86%));
    box-shadow: 0 3px 10px rgb(0 0 0 / 28%);
    backdrop-filter: blur(4px);
}

.pm-card-overlay .pm-card-overlay-action {
    position: relative;
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    flex: 0 0 var(--kmx-card-overlay-hit-size);
    width: var(--kmx-card-overlay-hit-size);
    min-width: var(--kmx-card-overlay-hit-size);
    height: var(--kmx-card-overlay-hit-size);
    min-height: var(--kmx-card-overlay-hit-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--kmx-button-radius);
    color: #cbd8e2;
    background: transparent;
    font: inherit;
    font-size: var(--kmx-card-overlay-icon-size);
    line-height: 1;
    cursor: pointer;
}

.pm-card-overlay .pm-card-overlay-action::before {
    position: absolute;
    z-index: -1;
    width: var(--kmx-card-overlay-visual-size);
    height: var(--kmx-card-overlay-visual-size);
    border: 1px solid rgb(185 207 224 / 28%);
    border-radius: 5px;
    background: rgb(10 19 27 / 88%);
    box-shadow: 0 2px 8px rgb(0 0 0 / 24%);
    content: "";
}

.pm-card-overlay .pm-card-overlay-action:hover::before,
.pm-card-overlay .pm-card-overlay-action:focus-visible::before,
.pm-card-overlay .pm-card-overlay-action[aria-expanded="true"]::before {
    border-color: #7696ae;
    background: rgb(25 43 57 / 96%);
}

.pm-card-overlay .pm-card-overlay-action.is-active,
.pm-card-overlay .pm-card-overlay-action[aria-pressed="true"] {
    color: #ff91ad;
}

.pm-card-overlay .pm-card-overlay-action.is-active::before,
.pm-card-overlay .pm-card-overlay-action[aria-pressed="true"]::before {
    border-color: #b95f7a;
    background: rgb(55 24 38 / 94%);
}

.pm-card-overlay .pm-card-overlay-action.is-rated {
    width: var(--kmx-card-overlay-hit-size);
    min-width: var(--kmx-card-overlay-hit-size);
    height: var(--kmx-card-overlay-hit-size);
    min-height: var(--kmx-card-overlay-hit-size);
    color: #ffd269;
}

.pm-card-overlay .pm-card-overlay-action.is-rated::before {
    border-color: #9b7931;
    background: #2c2413;
}

.pm-card-overlay .like-form,
.pm-card-overlay .like-button,
.pm-card-overlay .library-card-gg {
    width: var(--kmx-card-overlay-hit-size);
    min-width: var(--kmx-card-overlay-hit-size);
    margin: 0;
}

.pm-card-overlay .library-card-menu,
.pm-card-overlay .search-card-menu {
    position: relative;
    display: inline-flex;
    margin: 0;
}

.library-game-card.is-actions-open,
.game-list-card.is-actions-open {
    position: relative;
    z-index: 12;
    overflow: visible;
}

.game-life-panel.is-card-menu-open {
    position: relative;
    z-index: 11;
    overflow: visible;
}

.is-card-menu-clip-open.is-card-menu-clip-open {
    overflow: visible;
}

.pm-card-overlay .search-card-menu__panel {
    top: auto;
    right: 0;
    bottom: calc(100% + 6px);
}

.library-card-menu__panel {
    box-sizing: border-box;
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    bottom: auto;
    display: grid;
    gap: 2px;
    width: min(220px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid #476174;
    border-radius: 7px;
    background: #101b25;
    box-shadow: 0 18px 46px rgb(0 0 0 / 48%);
}

.library-card-menu__panel[hidden] {
    display: none;
}

.library-card-menu.is-open-upward .library-card-menu__panel {
    top: auto;
    bottom: calc(100% + 6px);
}

.library-card-menu.is-align-left .library-card-menu__panel {
    right: auto;
    left: 0;
}

.library-card-menu__panel a,
.library-card-menu__panel button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 4px;
    color: #d7e2ea;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.library-card-menu__panel .game-list-add-trigger:not(.pm-button),
.library-card-menu__panel .library-wishlist-action {
    min-height: 42px;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    color: #d7e2ea;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.library-card-menu__panel a:hover,
.library-card-menu__panel a:focus-visible,
.library-card-menu__panel button:hover,
.library-card-menu__panel button:focus-visible {
    color: #fff;
    background: #19334d;
}

.library-card-menu__panel .game-list-add-trigger:not(.pm-button):hover,
.library-card-menu__panel .game-list-add-trigger:not(.pm-button):focus-visible {
    color: #fff;
    background: #19334d;
}

.library-card-menu__panel .library-card-menu__danger {
    color: #ffbac8;
}

.library-card-menu__panel .library-wishlist-action.is-remove-action {
    color: #ffbac8;
}

.library-card-menu__panel form {
    width: 100%;
    margin: 0;
}

@keyframes pm-button-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    :root {
        --pm-button-height-compact: 40px;
        --pm-button-height-standard: 48px;
        --pm-button-height-large: 56px;
        --pm-button-padding-inline-compact: 14px;
        --pm-button-padding-inline-standard: 20px;
        --pm-button-padding-inline-large: 24px;
        --pm-card-overlay-visual-size: 38px;
        --pm-card-overlay-hit-size: 44px;
        --pm-card-overlay-icon-size: 0.9rem;
    }

    .pm-button-group {
        align-items: stretch;
    }

    .pm-button-group--stack-mobile {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-button-group--stack-mobile > .pm-button {
        width: 100%;
    }

    .pm-button--full-mobile {
        width: 100%;
    }

    .pm-card-overlay {
        right: 4px;
        bottom: 4px;
        padding: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .library-card-menu__panel a,
    .library-card-menu__panel button {
        min-height: 46px;
        padding: 10px 14px;
        font-size: 0.88rem;
        line-height: 1.3;
    }


    .library-card-menu__panel .game-list-add-trigger:not(.pm-button),
    .library-card-menu__panel .library-wishlist-action {
        min-height: 46px;
        padding: 10px 14px;
        font-size: 0.88rem;
        line-height: 1.3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-button { transition: none; }
    .pm-button:active,
    .pm-button.is-demo-active,
    .pm-icon-button:active,
    .pm-icon-button.is-demo-active { transform: none; }
    .pm-button.is-loading::before { animation-duration: 1.8s; }
}