/* Pokémon Arena · interface integrada do UI Lab — editor de habilidades, configurações e áudio (apenas apresentação). */

/* ================= EDITOR DE HABILIDADES (#loadout-dialog) ================= */
html body #loadout-dialog{border:2px solid var(--ui-line);border-radius:8px;background:var(--ui-panel);box-shadow:0 6px 0 var(--ui-shade)}
html body #loadout-dialog::backdrop{background:#02101cd6}
html body #loadout-dialog[open]{animation:ui-modal-in .22s var(--ui-ease)}
html body #loadout-dialog>header{background:none;border-bottom:2px solid var(--ui-soft)}
html body #loadout-dialog .skill-hero small{font:400 17px/1 var(--ui-pixel);letter-spacing:1.5px;color:var(--ui-cyan)}
html body #loadout-dialog .skill-hero h2{font:400 40px/1 var(--ui-pixel);letter-spacing:.3px}
html body #loadout-dialog .skill-hero-art{opacity:.18;mask-image:none;-webkit-mask-image:none}
html body #loadout-dialog>header>button,html body #loadout-dialog [data-close-loadout]{border:2px solid var(--ui-soft);border-radius:6px;background:none;color:var(--ui-ink2);transition:background .12s,border-color .12s}
html body #loadout-dialog>header>button:hover{border-color:var(--ui-line);background:var(--ui-panel2)}
html body #loadout-dialog #loadout-tabs{background:var(--ui-bg2);border-bottom:2px solid var(--ui-soft)}
html body #loadout-dialog .loadout-tab{display:flex;align-items:center;gap:6px;padding:3px 12px 1px 8px;border:2px solid var(--ui-soft);border-radius:8px;background:var(--ui-panel);color:var(--ui-ink2);font:400 19px/1 var(--ui-pixel);letter-spacing:.3px;transition:background .12s,border-color .12s,transform .12s var(--ui-ease)}
html body #loadout-dialog .loadout-tab:hover{border-color:var(--ui-line);color:var(--ui-ink)}
html body #loadout-dialog .loadout-tab.active{border-color:var(--ui-yellow);background:var(--ui-panel3);color:var(--ui-yellow);transform:translateY(-2px)}
html body #loadout-dialog .skill-catalog{border-right:2px solid var(--ui-soft)}
html body #loadout-dialog h3{font:400 19px/1 var(--ui-pixel);letter-spacing:1.5px;color:var(--ui-ink3);text-transform:uppercase}
html body #loadout-dialog #skill-filters button{padding:4px 10px 1px;border:2px solid var(--ui-soft);border-radius:6px;background:var(--ui-bg2);box-shadow:none;color:var(--ui-ink2);font:400 16px/1 var(--ui-pixel);letter-spacing:.4px;text-transform:uppercase;transition:background .12s,color .12s,border-color .12s}
html body #loadout-dialog #skill-filters button:hover{border-color:var(--ui-line);color:var(--ui-ink)}
html body #loadout-dialog #skill-filters [aria-pressed=true]{background:var(--ui-ink);border-color:var(--ui-ink);color:#06182a;box-shadow:none}
html body #loadout-dialog #move-options .move-option{border:2px solid var(--ui-soft);border-radius:6px;background:var(--ui-bg2);transition:border-color .12s,background .12s}
html body #loadout-dialog #move-options .move-option:hover{border-color:var(--ui-line);background:var(--ui-panel2)}
html body #loadout-dialog #move-options .move-option.selected{border:2px solid var(--ui-yellow);padding:7px;box-shadow:none;background:var(--ui-panel2)}
html body #loadout-dialog #move-options .move-option strong,html body #loadout-dialog #move-options .move-option b{font-family:var(--ui-pixel);font-weight:400}
html body #loadout-dialog #move-options .move-option>*:nth-child(2)>strong{font-size:19px;letter-spacing:.2px}
html body #loadout-dialog .skill-detail-heading h2{font:400 36px/1 var(--ui-pixel);letter-spacing:.3px}
html body #loadout-dialog .skill-type{padding:3px 6px 1px;border-radius:4px;border:0;background:var(--ui-tc,var(--element,#626e7b));color:#fff;font:400 15px/1 var(--ui-pixel);letter-spacing:.4px;text-shadow:1px 1px 0 #0007}
html body #loadout-dialog .skill-indicators>div{border:2px solid var(--ui-soft);border-radius:8px;background:var(--ui-bg2)}
html body #loadout-dialog .skill-indicators b{font:400 24px/1 var(--ui-pixel);color:var(--ui-dmg)}
html body #loadout-dialog .skill-indicators>div:last-child b{font-size:17px;line-height:1.05}
html body #loadout-dialog .skill-indicators span{font:400 15px/1.05 var(--ui-pixel);letter-spacing:.4px;color:var(--ui-ink3)}
html body #loadout-dialog .skill-preview{border:2px solid var(--ui-soft);border-radius:8px;background:#061b29}
html body #loadout-dialog .skill-preview button{width:32px;height:32px;border:2px solid var(--ui-ink2);background:#0b263ddd;transition:transform .12s var(--ui-ease),background .12s}
html body #loadout-dialog .skill-preview button:hover{transform:scale(1.12);background:var(--ui-panel3)}
html body #loadout-dialog .equip-slot,html body #loadout-dialog #equipped-slots>*{border:2px solid var(--ui-soft);border-radius:8px;background:var(--ui-bg2);transition:border-color .12s,background .12s,transform .12s var(--ui-ease)}
html body #loadout-dialog .equip-slot.active,html body #loadout-dialog #equipped-slots .active{border-color:var(--ui-yellow);background:var(--ui-panel2)}
html body #loadout-dialog .equip-slot:hover{border-color:var(--ui-line)}
html body #loadout-dialog .skill-footer button,html body #loadout-dialog #reset-loadout,html body #loadout-dialog #confirm-loadout{min-height:34px;padding:3px 14px 0;border:2px solid var(--ui-shade);border-radius:8px;background:var(--ui-panel3);color:var(--ui-ink);box-shadow:0 3px 0 var(--ui-shade);font:400 18px/1 var(--ui-pixel);letter-spacing:.5px;text-transform:uppercase;transition:transform .12s var(--ui-ease),box-shadow .12s}
html body #loadout-dialog .skill-footer button:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ui-shade)}
html body #loadout-dialog #confirm-loadout{background:var(--ui-yellow);border-color:var(--ui-yellow-d);color:#2a1d00;box-shadow:0 3px 0 var(--ui-yellow-d)}
html body #loadout-dialog #confirm-loadout:hover{box-shadow:0 4px 0 var(--ui-yellow-d)}
html body #loadout-dialog #loadout-status{font:12px 'Segoe UI',sans-serif;color:var(--ui-ink3)}

/* ================= CONFIGURAÇÕES E ÁUDIO ================= */
html body dialog:is(#game-settings-dialog,.game-settings,.audio-settings,[id*=settings],[class*=settings-dialog]){border:2px solid var(--ui-line);border-radius:8px;background:var(--ui-panel);box-shadow:0 6px 0 var(--ui-shade);color:var(--ui-ink)}
html body dialog:is(#game-settings-dialog,.game-settings,.audio-settings,[id*=settings],[class*=settings-dialog])::backdrop{background:#02101cd6}
html body dialog:is(#game-settings-dialog,.game-settings,.audio-settings,[id*=settings],[class*=settings-dialog]) h2{font:400 32px/1 var(--ui-pixel);letter-spacing:.3px}
html body dialog:is(#game-settings-dialog,.game-settings,.audio-settings,[id*=settings],[class*=settings-dialog]) button{border:2px solid var(--ui-shade);border-radius:8px;background:var(--ui-panel3);color:var(--ui-ink);box-shadow:0 3px 0 var(--ui-shade);font:400 20px/1 var(--ui-pixel);letter-spacing:.5px;text-transform:uppercase}