.skill-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 10000;
}

/* Detalhes completos dos equipamentos, inclusive no painel de equipamento. */
.equipped-item-tooltip .tooltip-title{display:block;margin:0 0 5px;color:#f0d783;font:700 12px Georgia,serif}.equipped-item-tooltip .tooltip-title.quality-excellent{color:#54efa8;text-shadow:0 0 7px #198f5b}.equipped-item-tooltip .tooltip-section{line-height:1.35}.equipped-item-tooltip .item-class-line{margin-top:3px;color:#91c7ff;font-weight:700}.equipped-item-tooltip .item-excellent-line{margin-top:3px;color:#54efa8;font-weight:700}
.equipped-item-tooltip { position:fixed; z-index:20030; width:210px; padding:8px; border:1px solid #88753a; background:rgba(7,9,11,.98); color:#dce3e2; box-shadow:0 6px 16px #000; font:11px Arial,sans-serif; pointer-events:none; }.equipped-item-tooltip[hidden] { display:none; }.equipped-item-tooltip strong { display:block; margin-bottom:5px; color:#f0d783; font:700 12px Georgia,serif; }.equipped-item-tooltip small { display:block; margin-top:5px; color:#aebcab; }.equipped-item-tooltip .broken { color:#ff6257; }
.shop-sell-bulk { display:flex; justify-content:flex-end; margin:8px 0; }.shop-sell-bulk button { background:#8b3632; border-color:#c76057; }.shop-sell-bulk button:disabled { opacity:.45; cursor:not-allowed; }
.skill-modal-content {
    display:flex;
    flex-direction:column;
    width:min(94vw, 620px);
    max-height:calc(100dvh - 32px);
    overflow:hidden;
    background:linear-gradient(145deg,#171f27,#10151b);
    border:1px solid #52606a;
    border-radius:6px;
    padding:12px;
    color: white;
    box-shadow:0 0 0 2px #07090b,0 15px 34px rgba(0,0,0,.82),inset 0 0 18px #000;
}
.skill-modal-content h3 { flex:0 0 auto; margin:0 0 9px; padding:0 0 8px; border-bottom:1px solid #3a464f; color:#69bdf0; font:700 15px Georgia,serif; text-shadow:1px 1px #000; }
#skill-options-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; min-height:0; overflow-y:auto; padding:1px 2px 5px; scrollbar-color:#527b8c #0b1014; }
.skill-option-item {
    min-height:76px;
    margin-top:0;
    padding:6px 7px;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
}
.skill-option-main { display:flex; align-items:flex-start; gap:7px; min-width:0; }
.skill-option-copy { display:flex; flex-direction:column; min-width:0; gap:1px; }
.skill-option-copy b { color:#f0f3f7; font:700 12px "Segoe UI",sans-serif; white-space:nowrap; }
.skill-option-copy b strong { color:#8ecbff; font-weight:800; }
.skill-active-label { align-self:flex-start; margin-top:1px; color:#8ecbff; font:800 11px/12px "Segoe UI",sans-serif; letter-spacing:.55px; text-transform:uppercase; }
.skill-option-copy small { color:#b8c4d0; font-size:11px; line-height:12px; white-space:normal; }
.skill-option-copy em { color:#9caab9; font:italic 11px "Segoe UI",sans-serif; }
.skill-unlocked { flex:0 0 auto; color:#4fdb85!important; font-size:11px!important; line-height:12px!important; align-self:flex-start; margin-top:3px; }
.skill-option-item:hover {
    background: #30363d;
    border-color: #58a6ff;
}
.skill-option-item.selected-skill {
    border-color: #58a6ff !important;
    background: #1f242c !important;
    box-shadow: 0 0 6px rgba(88, 166, 255, 0.4);
}
.skill-option-item.skill-locked {
    cursor: not-allowed;
    opacity: .58;
    border-color: #7e4545;
    background: #241a1c;
}
.skill-option-item.skill-locked:hover {
    border-color: #b85a5a;
    background: #2c1d20;
}
.skill-option-item.skill-locked .skill-unlocked { color: #ff8078; }

/* Padrão único do seletor: lista interna com rolagem, sem deixar o modal
   ultrapassar a tela mesmo quando a classe tiver muitas habilidades. */
#skill-options-list.elf-skill-horizontal {
    width:auto;
    max-width:none;
    max-height:none;
}
#skill-options-list.elf-skill-horizontal .skill-option-item { min-height:76px; padding:6px 7px; gap:7px; }
#skill-options-list.elf-skill-horizontal .skill-option-main { gap:7px; }
#skill-options-list.elf-skill-horizontal .skill-option-copy b { font-size:12px; }
#skill-options-list.elf-skill-horizontal .skill-option-copy small { font-size:11px; line-height:12px; }
#skill-options-list.elf-skill-horizontal .skill-option-copy em { font-size:11px; }
#skill-selector-modal:has(#skill-options-list.elf-skill-horizontal) .skill-modal-content { width:min(94vw,620px); max-width:none; padding:12px; }
@media (max-width:620px) {
    .skill-modal-overlay { align-items:flex-start; overflow-y:auto; }
    .skill-modal-content { width:min(100%,330px); max-height:calc(100dvh - 32px); margin:auto; }
    #skill-options-list { grid-template-columns:1fr; }
}

#toast-container {
    position: fixed;
    bottom: 85px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.game-toast { --toast:#6faeba; position:relative; display:grid; grid-template-columns:31px minmax(0,1fr) 15px; align-items:center; width:min(340px,calc(100vw - 32px)); overflow:hidden; border:1px solid color-mix(in srgb,var(--toast),#536065 48%); border-radius:3px; padding:9px 10px 10px; background:linear-gradient(110deg,rgba(10,15,17,.98),rgba(16,25,27,.96)); color:#dce9e8; box-shadow:0 0 0 1px #050708,0 10px 24px rgba(0,0,0,.66),inset 0 0 16px #0008; animation:mu-notice-in .28s cubic-bezier(.16,.9,.25,1) both; pointer-events:auto; }
.game-toast.success{--toast:#45d68d}.game-toast.error{--toast:#ef6d66}.game-toast.info{--toast:#73cce1}.game-toast.gold{--toast:#f2c85f}
.game-toast>i{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--toast);border-radius:50%;color:var(--toast);font:800 15px Georgia,serif;box-shadow:0 0 10px color-mix(in srgb,var(--toast),transparent 65%)}
.game-toast div{display:grid;gap:2px;min-width:0}.game-toast small{color:var(--toast);font:700 10px Georgia,serif;letter-spacing:1px}.game-toast strong{color:#eef5f3;font:700 11px/1.25 Arial,sans-serif;overflow-wrap:anywhere}.game-toast>b{align-self:start;border:0;background:transparent;color:#8ba0a1;font:700 15px/12px Arial,sans-serif;cursor:pointer}.game-toast>b:hover{color:#fff}.game-toast-action{justify-self:start;margin-top:4px;padding:3px 9px;border:1px solid var(--toast);border-radius:2px;background:transparent;color:var(--toast);font:700 11px Georgia,serif;cursor:pointer}.game-toast-action:hover{background:color-mix(in srgb,var(--toast),transparent 82%);color:#fff}
.game-toast-timer{position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--toast);transform-origin:left;animation:mu-notice-timer 4.2s linear forwards}
@keyframes mu-notice-in{from{opacity:0;transform:translateX(28px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes mu-notice-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Tooltip unificada: moldura escura e dourada, inspirada nas janelas clássicas de MU. */
#mu-classic-tooltip { position:fixed; z-index:20000; max-width:260px; padding:7px 10px; border:1px solid #a18a4a; outline:1px solid #10120e; background:linear-gradient(135deg,rgba(36,38,30,.98),rgba(8,11,10,.98) 58%,rgba(23,20,12,.98)); box-shadow:0 5px 16px rgba(0,0,0,.88),inset 0 0 0 1px rgba(228,202,117,.17),inset 0 0 12px #000; color:#f0d98b; font:700 12px/1.25 Georgia,serif; letter-spacing:.12px; text-align:center; text-shadow:1px 1px 2px #000; pointer-events:none; opacity:0; transform:translateY(3px); transition:opacity .12s ease,transform .12s ease; }
#mu-classic-tooltip::before,#mu-classic-tooltip::after { content:'◆'; position:absolute; top:50%; color:#d2af55; font-size:10px; transform:translateY(-50%); text-shadow:0 0 5px #e6bc55; }
#mu-classic-tooltip::before { left:3px; } #mu-classic-tooltip::after { right:3px; }
#mu-classic-tooltip.visible { opacity:1; transform:translateY(0); }

/* ---- Atalhos numéricos das skills (teclas 1..5) ---- */
/* A fileira fica dentro do card da skill: clicar no número grava a skill
   naquela tecla; clicar no número aceso remove o atalho. */
.skill-hotkey-row { display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-top:4px; }
.skill-hotkey-row > span { margin-right:2px; color:#7f8b98; font:700 10px "Segoe UI",sans-serif; letter-spacing:.6px; text-transform:uppercase; }
.skill-hotkey-pick { width:16px; height:16px; padding:0; border:1px solid #3b4552; border-radius:3px; background:#12171d; color:#93a3b3; font:700 11px "Segoe UI",sans-serif; line-height:14px; text-align:center; cursor:pointer; }
.skill-hotkey-pick:hover { border-color:#58a6ff; background:#1c2733; color:#d8ecff; }
.skill-hotkey-pick.is-active { border-color:#e3b341; background:linear-gradient(#4a3a12,#221904); color:#ffdf8c; box-shadow:0 0 6px rgba(227,179,65,.45); }
.skill-option-item.skill-locked .skill-hotkey-pick { cursor:pointer; }

/* ---- Etiqueta de categoria da skill (todas as classes) ---- */
/* Ataque, Buff, Summon ou Suporte, lida da definição da skill. */
.skill-tag { display:inline-block; margin-right:5px; padding:1px 5px; border:1px solid; border-radius:3px; font:800 10px/12px "Segoe UI",sans-serif; letter-spacing:.5px; text-transform:uppercase; vertical-align:1px; }
.skill-tag.is-attack { border-color:#a5563f; background:rgba(122,52,36,.32); color:#ffb59e; }
.skill-tag.is-buff { border-color:#3f9a63; background:rgba(30,102,62,.32); color:#9df3bd; }
.skill-tag.is-summon { border-color:#7a58c4; background:rgba(63,42,120,.34); color:#ceb6ff; }
.skill-tag.is-support { border-color:#3f7ba5; background:rgba(28,74,110,.32); color:#a8dcff; }
.inv-item .skill-tag { vertical-align:1px; }