/* Fonte oficial do pacote new-interface_pokeidle. */
@scope (#stage .skills-window) {
:scope, :scope * { box-sizing: border-box; }
.skills-bar {
    width: 652px;
    height: 106px;
    position: relative;

    display: flex;
    align-items: center;

    padding: 16px 12px 16px 15px;

    background: url("assets/new-interface/skills/painel.png") no-repeat center;
    background-size: 100% 100%;
}

.config-button {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin-right: 8px;

    border: 0;
    outline: 0;
    background: transparent;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}

.config-button img {
    width: 30px;
    height: 30px;
    display: block;

    pointer-events: none;
    user-select: none;
}

.config-button:hover {
    filter: brightness(1.2);
}

.config-button:active {
    transform: translateY(1px);
}

.moves-list {
    display: flex;
    align-items: center;
    gap: 4px;
}

.move-slot {
    width: 94px;
    height: 74px;
    position: relative;
    flex: 0 0 94px;
    overflow: visible;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 0;
    outline: 0;

    background-color: transparent;
    background-image: url("assets/new-interface/skills/slot.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 94px 74px;

    box-shadow: none;

    appearance: none;
    -webkit-appearance: none;

    color: #f2e6c3;
    cursor: pointer;
}

.move-slot:hover {
    filter: none;
}

.move-key {
    position: absolute;
    top: 4px;
    left: 5px;
    z-index: 2;

    width: 21px;
    height: 13px;

    display: block;
    object-fit: contain;

    border-radius: 2px;
    image-rendering: auto;

    user-select: none;
    pointer-events: none;
}


.move-icon {
    position: absolute;
    top: 14px;
    left: 34px;
    z-index: 2;

    width: 26px;
    height: 26px;
    display: block;

    object-fit: contain;

    user-select: none;
    pointer-events: none;
}

.move-name {
    position: absolute;
    top: 47px;
    left: 4px;
    z-index: 2;

    width: 86px;
    height: 12px;

    font-family: "Barlow", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;

    color: #f2e6c3;

    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    pointer-events: none;
}

.move-type {
    position: absolute;
    top: 60px;
    left: 4px;
    z-index: 2;

    width: 86px;
    height: 9px;

    font-family: "Barlow", sans-serif;
    font-size: 7px;
    font-weight: 400;
    line-height: 9px;
    letter-spacing: 0.1px;

    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.75),
        0 0 2px currentColor;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    pointer-events: none;
}

.type-poison { color: #b687c8; }
.type-fire { color: #d68763; }
.type-psychic { color: #e06b8b; }
.type-normal { color: #b7c5d4; }
.type-flying { color: #80a7d4; }
.type-ghost { color: #b687c8; }

.type-dark { color: #4c82ad; }
.type-ground { color: #ff8164; }
.type-grass { color: #38935f; }
.type-bug { color: #6bb93c; }
.type-fighting { color: #fb4c37; }
.type-rock { color: #b6ad8f; }


.type-water { color: #4d90d5; }
.type-steel { color: #67788b; }
.type-ice { color: #01b1af; }
.type-electric { color: #edd150; }
.type-dragon { color: #3562fd; }
.type-fairy { color: #be4b99; }

.cooldown-overlay {
    position: absolute;

    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;

    z-index: 5;

    height: calc(100% - 4px);

    background: rgba(5, 8, 12, 0.68);
    border-radius: 2px;

    transform-origin: bottom;
    transform: scaleY(0);

    pointer-events: none;
}

.cooldown-number {
    position: absolute;
    inset: 0;
    z-index: 6;

    display: none;
    align-items: center;
    justify-content: center;

    font-family: "Barlow", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    color: #f2e6c3;

    text-shadow:
        0 1px 2px #000,
        0 0 4px #000;

    pointer-events: none;
}

.move-slot.is-cooldown {
    cursor: not-allowed;
}

.move-slot.is-cooldown .cooldown-number {
    display: flex;
}

/* HOVER */

.move-slot {
    transition:
        filter 120ms ease,
        transform 120ms ease;
}

.move-slot:hover:not(.is-cooldown),
.move-slot:focus-visible:not(.is-cooldown) {
    filter: brightness(1.12);
}

.move-slot:hover:not(.is-cooldown) .move-icon,
.move-slot:focus-visible:not(.is-cooldown) .move-icon {
    filter: brightness(1.08);
}

.move-slot:active:not(.is-cooldown) {
    transform: translateY(1px);
}

.move-slot:focus-visible {
    outline: 1px solid rgba(242, 209, 134, 0.8);
    outline-offset: 1px;
}

/* TOOLTIP */

.move-tooltip {
    position: fixed;
    z-index: 1000;

    min-width: 126px;
    max-width: 190px;

    display: none;
    flex-direction: column;
    gap: 2px;

    padding: 7px 9px;

    background: rgba(13, 18, 25, 0.97);
    border: 1px solid #b08d45;
    border-radius: 3px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    font-family: "Barlow", sans-serif;

    pointer-events: none;
}

.move-tooltip.is-visible {
    display: flex;
}

.move-tooltip-name {
    color: #f2e6c3;

    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
}

.move-tooltip-type,
.move-tooltip-cooldown {
    color: #b7c5d4;

    font-size: 8px;
    font-weight: 400;
    line-height: 10px;
}

/* JANELAS ARRASTÁVEIS */

:scope {
    position: relative;
    width: 652px;
    height: 106px;

    touch-action: none;
    user-select: none;
}

:scope.is-floating {
    position: fixed;
    margin: 0;
}

:scope.is-dragging {
    cursor: grabbing;
}

:scope .skills-bar {
    cursor: grab;
}

:scope.is-dragging .skills-bar {
    cursor: grabbing;
}


.skills-minimize {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 21;

    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 2px;

    background: rgba(13, 18, 25, 0.34);
    color: #f2d186;

    font-family: "Barlow", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    opacity: 0.82;
    cursor: pointer;
}

.skills-minimize:hover,
.skills-minimize:focus-visible {
    opacity: 1;
    background: rgba(242, 209, 134, 0.08);
    outline: 1px solid rgba(176, 141, 69, 0.35);
}

:scope,
:scope::before,
:scope::after,
.skills-bar::before,
.skills-bar::after {
    list-style: none;
}

:scope::before,
:scope::after,
.skills-bar::before,
.skills-bar::after {
    content: none;
}

:scope.is-minimized .config-button::before,
:scope.is-minimized .config-button::after {
    content: none;
}

/* ESTADO MINIMIZADO — LAYOUT COMPACTO */

:scope.is-minimized {
    width: 281px;
    height: 54px;

    overflow: hidden;

    border: 0;
    border-radius: 0;

    background:
        url("assets/new-interface/skills/background-teambar_minimizado.png")
        no-repeat left top;

    background-size: auto;

    box-shadow: none;
}

:scope.is-minimized .skills-bar {
    width: 281px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 0 42px 0 12px;

    background: transparent;
    border-radius: 0;

    cursor: grab;
}

:scope.is-minimized .moves-list {
    display: none;
}

:scope.is-minimized .config-button {
    position: absolute;
    left: 12px;
    top: 50%;

    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    overflow: visible;
    transform: translateY(-50%);
}

:scope.is-minimized .config-button:hover {
    filter: brightness(1.15);
}

:scope.is-minimized .config-button:active {
    transform: translateY(-50%);
}

:scope.is-minimized .config-button img {
    width: 30px;
    height: 30px;

    display: block;
    object-fit: contain;

    max-width: none;
    max-height: none;
}

:scope.is-minimized .skills-minimize {
    top: 50%;
    right: 10px;

    width: 20px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-left: 1px solid rgba(176, 141, 69, 0.35);
    border-radius: 0;

    background: transparent;

    font-size: 13px;
    line-height: 1;
    opacity: 0.95;

    transform: translateY(-50%);
}

:scope.is-minimized .skills-minimize:hover,
:scope.is-minimized .skills-minimize:focus-visible {
    background: rgba(242, 209, 134, 0.07);
    outline: none;
}

/* CONFIGURAÇÃO DAS SKILLS */

.skills-config-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.skills-config-modal.is-open {
    display: flex;
}

.skills-config-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(4, 8, 12, 0.68);
    backdrop-filter: blur(2px);
}

.skills-config-dialog {
    position: relative;
    z-index: 1;

    width: min(470px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    overflow: hidden;

    border: 1px solid #b08d45;
    border-radius: 7px;

    background: #0d1219;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    color: #f2e6c3;
}

.skills-config-header {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 11px 13px 10px 14px;

    border-bottom: 1px solid rgba(176, 141, 69, 0.34);

    background: #0d1219;
}

.skills-config-kicker {
    display: block;
    margin-bottom: 2px;

    color: #5fe1d0;

    font-family: "Barlow", sans-serif;
    font-size: 8px;
    font-weight: 600;
    line-height: 10px;
    letter-spacing: 1.05px;
}

.skills-config-header h2 {
    margin: 0;

    color: #f2e6c3;

    font-family: "Barlow", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.skills-config-close {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    padding: 0 0 1px 0;

    border: 1px solid #405563;
    border-radius: 2px;

    background:
        linear-gradient(
            180deg,
            #18242e 0%,
            #101820 100%
        );

    color: #c6d5d9;

    font-family: "Barlow", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    text-align: center;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.28);

    cursor: pointer;
}

.skills-config-close:hover,
.skills-config-close:focus-visible {
    border-color: #b08d45;
    color: #f2e6c3;
    outline: none;
}

.skills-config-body {
    padding: 12px;
    overflow: auto;
    max-height: calc(100vh - 120px);

    background: #0d1219;
}

.skills-config-description {
    margin: 0 0 8px;

    color: #93a8b1;

    font-family: "Barlow", sans-serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 12px;
}

.skills-config-legend {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 10px;

    color: #879ca5;

    font-family: "Barlow", sans-serif;
    font-size: 8px;
    line-height: 10px;
    text-transform: uppercase;
}

.skills-config-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.legend-drag {
    margin-left: auto;
}

.legend-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
}

.legend-dot-active {
    background: #52d7b4;
}

.legend-dot-inactive {
    background: #0d1219;
    border: 1px solid #536b78;
}

.skills-config-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skills-config-item {
    min-height: 52px;

    display: grid;
    grid-template-columns: 12px 24px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 8px;

    padding: 8px 9px;

    border: 1px solid #334756;
    border-radius: 5px;

    background: #0d1219;

    cursor: grab;

    transition:
        opacity 120ms ease,
        border-color 120ms ease,
        background 120ms ease,
        transform 120ms ease;
}

.skills-config-item:hover {
    border-color: #587489;
    background: #101821;
}

.skills-config-item.is-disabled {
    opacity: 0.58;
}

.skills-config-item.is-dragging {
    opacity: 0.55;
    cursor: grabbing;
    transform: scale(0.995);
}

.skills-config-item.is-drag-over {
    border-color: #b08d45;
    background: #121d27;
}

.skill-active-toggle {
    width: 11px;
    height: 11px;
    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 1px solid #536b78;
    border-radius: 50%;

    background: #0d1219;

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);

    cursor: pointer;
}

.skill-active-toggle:checked {
    border-color: #52d7b4;
    background: #52d7b4;
    box-shadow: 0 0 4px rgba(82, 215, 180, 0.35);
}

.skill-active-toggle:focus-visible {
    outline: 1px solid rgba(242, 209, 134, 0.75);
    outline-offset: 2px;
}

.config-move-key {
    width: 21px;
    height: 13px;
    display: block;

    border-radius: 2px;
    object-fit: contain;
}

.config-move-copy {
    min-width: 0;
}

.config-move-name {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #f2e6c3;

    font-family: "Barlow", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
}

.config-move-meta {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 3px;

    font-family: "Barlow", sans-serif;
    font-size: 8px;
    font-weight: 400;
    line-height: 11px;

    white-space: nowrap;
}

.config-move-type {
    font-weight: 500;
    letter-spacing: 0.12px;
    text-transform: uppercase;

    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.65),
        0 0 2px currentColor;
}

.config-move-separator {
    color: #536b78;
}

.config-move-cooldown {
    color: #9db0b8;
    font-weight: 400;
}




.config-type-icon {
    width: 22px;
    height: 22px;

    display: block;
    justify-self: center;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}

.skills-config-item.is-dragging .config-type-icon {
    opacity: 0.72;
}

.move-slot.is-config-disabled {
    opacity: 0.38;
    filter: grayscale(0.35);
}

body.has-open-config {
    overflow: hidden;
}



.skills-config-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    padding: 10px 12px 12px;

    border-top: 1px solid rgba(176, 141, 69, 0.24);

    background: #0d1219;
}

.skills-config-reset,
.skills-config-save {
    border: 1px solid #8d7138;

    background:
        linear-gradient(
            180deg,
            #3a806d 0%,
            #255b4d 100%
        );

    color: #effff9;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 1px 2px rgba(0, 0, 0, 0.3);
}

.skills-config-reset {
    border: 1px solid #405563;

    background:
        linear-gradient(
            180deg,
            #18242e 0%,
            #101820 100%
        );

    color: #aebec5;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.28);
}

.skills-config-save {
    border: 1px solid #b08d45;

    background:
        linear-gradient(
            180deg,
            #3b8c75 0%,
            #276b59 100%
        );

    color: #effff9;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 5px rgba(0, 0, 0, 0.22);
}

.skills-config-reset:hover,
.skills-config-reset:focus-visible,
.skills-config-save:hover,
.skills-config-save:focus-visible {
    filter: brightness(1.12);
    outline: none;
}

.skills-config-save:active,
.skills-config-reset:active {
    transform: translateY(1px);
}

.skills-config-save.is-saved {
    filter: brightness(1.15);
}

/* AJUSTES FINAIS DA CONFIGURAÇÃO */


.skills-config-list {
    touch-action: none;
}

.skills-config-item {
    user-select: none;
    -webkit-user-select: none;
}

.skills-config-item.is-dragging {
    position: relative;
    z-index: 3;

    opacity: 0.72;
    cursor: grabbing;

    border-color: #b08d45;
    background: #121d27;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    transform: scale(1.005);
}

.skills-config-item.is-drag-target {
    border-color: rgba(176, 141, 69, 0.7);
}

/* CORREÇÃO DO ARRASTE DA CONFIGURAÇÃO */

.skills-config-item,
.skills-config-item * {
    user-select: none;
    -webkit-user-select: none;
}

.skills-config-item {
    touch-action: none;
}

.skills-config-item img {
    -webkit-user-drag: none;
    user-drag: none;
}

.skills-config-item.is-dragging {
    cursor: grabbing;
}

.skills-config-item.is-drag-target {
    border-color: #b08d45;
    background: #121d27;
}

/* BOTÕES DA CONFIGURAÇÃO — CORREÇÃO FINAL */

.skills-config-actions {
    gap: 8px;
}

.skills-config-reset,
.skills-config-save {
    height: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 13px !important;

    border-radius: 2px !important;

    font-family: "Barlow", sans-serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.75px !important;
    text-transform: uppercase !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer;
}

.skills-config-reset {
    min-width: 132px !important;

    border: 1px solid #405563 !important;

    background:
        linear-gradient(
            180deg,
            #17232d 0%,
            #0f1820 100%
        ) !important;

    color: #9fb3bb !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.skills-config-save {
    min-width: 92px !important;

    border: 1px solid #d0aa5d !important;

    background:
        linear-gradient(
            180deg,
            #b08d45 0%,
            #80622d 100%
        ) !important;

    color: #f2e6c3 !important;

    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.65) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.skills-config-reset:hover,
.skills-config-reset:focus-visible {
    border-color: #587180 !important;
    filter: brightness(1.1);
    outline: none;
}

.skills-config-save:hover,
.skills-config-save:focus-visible {
    border-color: #e2bd70 !important;
    filter: brightness(1.1);
    outline: none;
}

.skills-config-reset:active,
.skills-config-save:active {
    transform: translateY(1px);
}

/* EXPANDIR — SÍMBOLO CENTRALIZADO */

:scope.is-minimized .skills-minimize {
    width: 16px !important;
    height: 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 2px !important;

    background: rgba(13, 18, 25, 0.34) !important;
    color: transparent !important;

    font-size: 0 !important;
    line-height: 0 !important;

    opacity: 0.82 !important;

    transform: translateY(-50%) !important;
}

:scope.is-minimized .skills-minimize::before,
:scope.is-minimized .skills-minimize::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    display: block;

    background: #f2d186;

    border-radius: 1px;

    transform: translate(-50%, -50%);

    pointer-events: none;
}

:scope.is-minimized .skills-minimize::before {
    width: 8px;
    height: 1px;
}

:scope.is-minimized .skills-minimize::after {
    width: 1px;
    height: 8px;
}

:scope.is-minimized .skills-minimize:hover,
:scope.is-minimized .skills-minimize:focus-visible {
    opacity: 1 !important;
    background: rgba(242, 209, 134, 0.08) !important;
    outline: 1px solid rgba(176, 141, 69, 0.35) !important;
}

:scope.is-minimized .skills-minimize:active {
    transform: translateY(-50%) translateY(1px) !important;
}

/* Fora do modo minimizado, mantém o sinal de menos original. */

:scope:not(.is-minimized) .skills-minimize::before,
:scope:not(.is-minimized) .skills-minimize::after {
    content: none;
}


}