Widget:C.Base

<style>

   /* ===========================BASE STYLES & RESET=========================== */
   img {
       pointer-events: none;
       -webkit-user-select: none;
       user-select: none;
   }

   video {
       max-height: none;
   }

   .mw-body {
       padding: unset !important;
   }

   .mw-body-content {
       line-height: 1.5;
   }

   .mw-body-content p {
       display: none;
   }

   /* ===========================CHARACTER CONTAINER & BACKGROUND=========================== */
   .banner {
       display: none !important;
   }

   .character-box {
       color: #000;
       font-family: 'Noto Sans', sans-serif;
       width: 100%;
       margin: auto;
       position: relative;
       -webkit-user-select: none;
       user-select: none;
       /* background-image será definido inline pelo Módulo (via |background=Arquivo.ext|) */
       background-position: center top;
       background-repeat: no-repeat;
       background-size: cover;
       z-index: 1;
   }

   .character-box p {
       display: unset;
   }

   .character-box::before {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, .60));
       z-index: 0;
   }

   /* ===========================CHARACTER HEADER & INFO=========================== */
   .character-header {
       position: relative;
       overflow: hidden;
       display: flex;
       gap: 10px;
       flex-direction: column;
       z-index: 1;
   }

   .character-art {
       display: none !important;
       width: 0 !important;
       height: 0 !important;
       overflow: hidden !important;
   }

   .character-topbar {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       padding: 8px 20px 0;
       z-index: 1;
   }

   .character-name-box {
       display: flex;
       align-items: flex-start;
       gap: 14px;
   }

   .topbar-icon {
       margin-top: 0;
       width: 100px;
       height: 100px;
       object-fit: none;
       aspect-ratio: 1 / 1;
       flex-shrink: 0;
   }

   .character-name {
       color: #fff;
       font-size: clamp(18px, 3.2vw + 0.5rem, 42px);
       font-family: 'Orbitron', sans-serif;
       font-weight: 900;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
       line-height: 1.15;
       word-break: break-word;
       overflow-wrap: break-word;
       hyphens: auto;
       padding-bottom: 0.15em;
       margin-top: 0;
       position: relative;
       z-index: 2;
       flex: 1;
       min-width: 0;
   }

   .topbar-description {
       display: none;
   }

   .class-tags {
       display: flex;
       gap: 9px;
       flex-wrap: wrap;
       margin-left: .28rem;
       margin-top: 0.2em;
       position: relative;
       z-index: 1;
   }

   .class-tag {
       background: #353420;
       color: #fff;
       outline: 2px solid #000;
       padding: 1px 6px;
       border-radius: 4px;
       font-size: .9em;
       font-weight: 700;
       box-shadow: 0 0 2px rgb(0 0 0 / 70%);
   }

   .character-info .tier,
   .character-info .class-tag {
       font-size: 18px;
       color: #e0e0e0;
       /* Melhor contraste: #bbb -> #e0e0e0 (WCAG AA) */
   }

   /* ===========================TABS SYSTEM=========================== */
   .character-tabs {
       margin: 4px 0 4px 8px;
       display: flex;
       gap: 12px;
   }

   .tab-btn {
       padding: 6px 20px;
       min-width: 44px;
       background: #333;
       color: #fff;
       border: 2px solid transparent;
       border-radius: 8px;
       font-size: 20px;
       cursor: pointer;
       font-weight: 600;
       line-height: 1;
       transition: background .15s, border-color .15s;
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }

   .tab-btn.active {
       background: #156bc7;
       border-color: #156bc7;
   }

   .tab-content {
       display: none;
       padding: 0 8px 8px;
       position: relative;
       z-index: 2;
       opacity: 0;
       transform: translateY(12px);
       transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       will-change: opacity, transform;
   }

   .tab-content.active {
       display: block;
       opacity: 1;
       transform: translateY(0);
   }

   /* Wrapper para transição de altura das abas */
   .tabs-height-wrapper {
       position: relative;
       overflow: visible;
       will-change: height;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       -webkit-transform: translateZ(0);
       transform: translateZ(0);
   }

   /* Previne scroll e mudanças bruscas durante transição */
   body.transitioning-tabs {
       overflow-x: hidden !important;
   }

   body.transitioning-tabs .character-box {
       overflow: hidden;
   }

   body.transitioning-tabs .tabs-height-wrapper {
       overflow: hidden;
   }

   .character-box {
       overflow: visible;
   }

   /* ===========================SKILLS SYSTEM=========================== */
   .skills-container {
       display: flex;
       gap: 20px;
       align-items: flex-start;
   }

   .skills-details {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
       width: auto;
       justify-content: center;
   }

   /* ===========================SKILL ICONS & BAR=========================== */
   /* Wrapper de scroll para permitir glow sem clipping */
   .icon-scroll-x {
       display: block;
       overflow-x: auto;
       overflow-y: hidden;
       padding-top: 10px;
       padding-bottom: 10px;
       margin-top: -10px;
       margin-bottom: -10px;
       scroll-behavior: smooth;
       /* Firefox */
       scrollbar-width: thin;
       scrollbar-color: #ababab transparent;
       position: relative;
       z-index: 4;
   }

   .icon-scroll-x::-webkit-scrollbar {
       height: 6px;
   }

   .icon-scroll-x::-webkit-scrollbar-track {
       background: transparent;
   }

   .icon-scroll-x::-webkit-scrollbar-thumb {
       background: #151515;
       border-radius: 3px;
   }

   .icon-bar {
       display: flex;
       flex-wrap: nowrap;
       gap: 10px;
       width: 100%;
       overflow-x: auto;
       overflow-y: visible;
       padding: 6px 6px;
       margin-bottom: 6px;
       scroll-behavior: smooth;
       /* Firefox */
       scrollbar-width: thin;
       scrollbar-color: #ababab transparent;
       justify-content: flex-start;
       align-items: center;
       position: relative;
       z-index: 4;
   }

   /* Quando dentro de .top-rail.skills, a .icon-bar não é mais scroll container */
   .top-rail.skills .icon-bar {
       overflow: visible !important;
       width: max-content;
       max-width: none;
       margin: 0;
       padding: 6px 6px;
   }

   /* Quando dentro de .top-rail.skills, permite que shadow-box passe do limite */
   .top-rail.skills .icon-scroll-x {
       /* Permite que o shadow-box passe do limite horizontal sem ser cortado */
       overflow-x: visible !important;
       overflow-y: visible !important;
       /* Remove clipping que impede shadow-box de passar */
       clip-path: none !important;
       contain: none !important;
   }

   /* Weapon Toggle Button - Estilos completamente isolados usando .weapon-active */
   .icon-bar .skill-icon.weapon-bar-toggle {
       background: rgba(40, 40, 48, 0.85) !important;
       color: rgba(255, 255, 255, 0.7) !important;
       border: 1px solid rgba(255, 255, 255, 0.08) !important;
       overflow: hidden !important;
       transform: none !important;
       box-shadow: none !important;
       padding: 0 !important;
       margin: 0 !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle::before {
       display: none !important;
       opacity: 0 !important;
       box-shadow: none !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) rgba(180, 180, 180, 0.5) !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle:hover {
       background: rgba(55, 55, 65, 0.9) !important;
       color: rgba(255, 255, 255, 0.95) !important;
       transform: none !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle:hover::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) rgba(220, 220, 220, 0.6) !important;
   }

   /* Estado ativo do toggle usa .weapon-active em vez de .active */
   .icon-bar .skill-icon.weapon-bar-toggle.weapon-active {
       background: linear-gradient(145deg, rgba(200, 60, 40, 0.95), rgba(160, 45, 30, 0.95)) !important;
       color: #fff !important;
       transform: scale(1.08) !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle.weapon-active::before {
       display: none !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle.weapon-active::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) #FF5722 !important;
       animation: togglePulse 1.8s ease-in-out infinite;
   }

   @keyframes togglePulse {

       0%,
       100% {
           box-shadow: inset 0 0 0 var(--icon-ring-w) rgba(255, 87, 34, 0.9);
       }

       50% {
           box-shadow: inset 0 0 0 var(--icon-ring-w) #FF7043, inset 0 0 10px 2px rgba(255, 112, 67, 0.35);
       }
   }

   .icon-bar .skill-icon.weapon-bar-toggle svg {
       width: 22px;
       height: 22px;
       pointer-events: none;
   }

   .icon-bar .skill-icon.weapon-bar-toggle .weapon-toggle-icon {
       display: block;
       width: 100%;
       height: 100%;
       border-radius: inherit;
       -webkit-clip-path: inset(0 round var(--icon-radius));
       clip-path: inset(0 round var(--icon-radius));
       will-change: transform;
       backface-visibility: hidden;
       transform: translateZ(0);
       transition: transform .12s ease;
       pointer-events: none;
       object-fit: cover;
   }

   .icon-bar .skill-icon.weapon-bar-toggle:focus-visible {
       outline: none;
   }

   .icon-bar .skill-icon.weapon-bar-toggle:focus-visible::after {
       box-shadow: 0 0 0 3px rgba(220, 80, 80, 0.5) !important;
   }

   /* Back handle for nested skill bars */
   .top-rail.skills {
       position: relative;
       overflow: visible;
       z-index: 10;
       transition: width .24s ease, max-width .24s ease;
   }

   .top-rail.skills.weapon-mode-on {
       background: linear-gradient(135deg, rgba(65, 25, 25, 0.96), rgba(50, 18, 18, 0.96));
       border-color: transparent;
       animation: weapon-bar-glow 3.5s ease-in-out infinite;
   }

   .top-rail.skills.weapon-mode-on::before {
       content: "";
       position: absolute;
       inset: -2px;
       border-radius: inherit;
       padding: 2px;
       background: linear-gradient(90deg,
               transparent 0%,
               rgba(255, 80, 80, 0.8) 25%,
               rgba(255, 120, 60, 1) 50%,
               rgba(255, 80, 80, 0.8) 75%,
               transparent 100%);
       background-size: 200% 100%;
       animation: weapon-border-scan 4s linear infinite;
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       pointer-events: none;
       z-index: -1;
   }

   .top-rail.skills.weapon-mode-on::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       box-shadow:
           0 0 15px rgba(255, 80, 80, 0.4),
           inset 0 0 20px rgba(255, 80, 80, 0.1);
       animation: weapon-bar-pulse 3s ease-in-out infinite;
       pointer-events: none;
   }

   @keyframes weapon-border-scan {
       0% {
           background-position: 200% 0;
       }

       100% {
           background-position: -200% 0;
       }
   }

   @keyframes weapon-bar-glow {

       0%,
       100% {
           filter: brightness(1);
       }

       50% {
           filter: brightness(1.1);
       }
   }

   @keyframes weapon-bar-pulse {

       0%,
       100% {
           opacity: 0.6;
           box-shadow:
               0 0 12px rgba(255, 80, 80, 0.3),
               inset 0 0 15px rgba(255, 80, 80, 0.08);
       }

       50% {
           opacity: 1;
           box-shadow:
               0 0 25px rgba(255, 80, 80, 0.5),
               inset 0 0 25px rgba(255, 80, 80, 0.15);
       }
   }

   .skills-rail-wrap {
       position: relative;
       z-index: 0;
       display: block;
       width: 100%;
       text-align: center;
       overflow: visible;
       /* Centraliza o top-rail dentro do wrapper */
   }

   .skills-back-wrapper {
       display: none;
       position: absolute;
       left: 0;
       /* Posição será calculada dinamicamente pelo JavaScript */
       top: 50%;
       transform: translateY(-50%);
       width: 70px;
       height: 95%;
       z-index: -1;
       pointer-events: none;
   }

   .skills-back-wrapper .skills-back {
       display: flex;
       position: absolute;
       left: 0;
       top: 0;
       transform: translateX(-55%);
       width: 70px;
       height: 100%;
       padding: 0;
       border-radius: 12px 0 0 12px;
       border: 2px solid rgba(255, 255, 255, .08);
       border-right: none;
       background: rgba(28, 28, 34, .95);
       color: rgba(255, 255, 255, 0.8);
       cursor: pointer;
       pointer-events: all;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
       -webkit-backdrop-filter: blur(2px);
       backdrop-filter: blur(2px);
       transition: transform .22s ease, background .22s ease, color .22s ease;
       overflow: visible;
   }

   .skills-back-wrapper .skills-back:hover {
       transform: translateX(-80%);
       background: rgba(40, 40, 48, .95);
       color: rgba(255, 255, 255, 1.0);
       box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 8px rgba(255, 255, 255, 0.12);
       border-color: rgba(255, 255, 255, 0.12);
   }

   @keyframes backPeekPulse {

       0%,
       100% {
           box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
       }

       50% {
           box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 8px rgba(255, 255, 255, 0.18);
       }
   }

   .skills-back-wrapper .skills-back.peek {
       animation: backPeekPulse 1.4s ease-in-out infinite;
   }

   .skills-back-wrapper .skills-back .back-chevron {
       display: block;
       width: 90%;
       height: 90%;
   }

   .icon-bar::-webkit-scrollbar {
       height: 6px;
   }

   .icon-bar::-webkit-scrollbar-track {
       background: transparent;
   }

   .icon-bar::-webkit-scrollbar-thumb {
       background: #151515;
       border-radius: 3px;
   }

   /* Icon Variables - Consolidado na seção ICON ENHANCEMENTS */

   .icon-bar .skill-icon {
       width: var(--icon-size);
       height: var(--icon-size);
       position: relative;
       flex: 0 0 auto;
       border-radius: var(--icon-radius);
       overflow: hidden;
       contain: paint;
       margin-top: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       -webkit-tap-highlight-color: transparent;
       background-clip: padding-box;
       /* Anti-aliasing para bordas suaves */
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       transform: translateZ(0);
       border: 1px solid rgba(255, 255, 255, 0.05);
       background-color: rgba(15, 15, 23, 0.95);
       box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
   }

   /* small + badge to indicate nested subs */
   .icon-bar .skill-icon .sub-badge {
       position: absolute;
       right: 2px;
       bottom: 2px;
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background: #156bc7;
       color: #fff;
       font-weight: 900;
       font-size: 12px;
       line-height: 16px;
       text-align: center;
       box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
       cursor: pointer;
       z-index: 3;
       -webkit-user-select: none;
       user-select: none;
   }

   /* back badge (−) to return to previous bar */
   .icon-bar .skill-icon .back-badge {
       position: absolute;
       right: 2px;
       bottom: 2px;
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background: #c74615;
       color: #fff;
       font-weight: 900;
       font-size: 14px;
       line-height: 16px;
       text-align: center;
       box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
       cursor: pointer;
       z-index: 3;
       -webkit-user-select: none;
       user-select: none;
   }

   .icon-bar .skill-icon img {
       display: block;
       width: 100%;
       height: 100%;
       aspect-ratio: 1 / 1;
       border-radius: inherit;
       -webkit-clip-path: inset(0 round var(--icon-radius));
       clip-path: inset(0 round var(--icon-radius));
       will-change: transform;
       backface-visibility: hidden;
       transform: translateZ(0);
       transition: transform .12s ease;
       object-fit: cover;
   }

   /* Icon Ring Effects */
   .icon-bar .skill-icon::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle);
       pointer-events: none;
       z-index: 2;
       transition: box-shadow .14s ease;
       /* Anti-aliasing para bordas suaves */
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       transform: translateZ(0);
   }

   .icon-bar .skill-icon::before {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       pointer-events: none;
       z-index: 1;
       box-shadow: none;
       opacity: 0;
       transition: opacity .14s ease, box-shadow .14s ease;
   }

   .icon-bar .skill-icon:hover::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) #e0e0e0;
   }

   .icon-bar .skill-icon.active::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active);
   }

   .icon-bar .skill-icon.active::before {
       box-shadow: 0 0 10px 2px var(--icon-active-glow), 0 0 0 4px var(--icon-active-ring);
       opacity: 1;
   }

   .icon-bar .skill-icon.active img {
       transform: scale(1.10);
   }

   @media (prefers-reduced-motion: reduce) {
       .icon-bar .skill-icon {
           transition: none;
       }
   }

   /* ===========================SKILL DESCRIPTION & CONTENT=========================== */
   .skill-title {
       margin: 0 0 12px;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .skill-title h3 {
       margin: 0;
       width: 100%;
       text-align: center;
       font-size: 1.6em;
       color: #fff;
   }

   .desc-box {
       padding: 12px 18px;
       background: transparent;
       border-radius: 6px;
       position: relative;
       box-shadow: none;
       color: #fff;
       transition: all .3s ease;
       z-index: 2;
       display: flex;
       flex-direction: column;
       overflow: hidden;
       text-shadow: none;
       height: auto;
       min-height: 0;
       font-size: 16px;
       /* Desabilita Font Boosting em mobile */
       -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
   }

   .desc-box h3 {
       font-size: 2.7em;
       margin: 0;
       text-align: center;
       padding-top: 0;
   }

   .desc {
       font-size: 17px !important;
       line-height: 1.75 !important;
       letter-spacing: .01em;
       overflow-x: hidden;
       /* iOS smooth scroll */
       -webkit-overflow-scrolling: touch;
       scrollbar-gutter: stable;
       margin-top: 5px;
       padding-right: 8px;
       color: #f5f5f5;
       /* Melhor contraste para legibilidade (WCAG AA) */
       overflow-wrap: anywhere;
       word-break: break-word;
       white-space: normal;
       flex: 0 0 auto !important;
       /* IMPORTANTE: Desabilita o Font Boosting que aumenta texto longo automaticamente */
       -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
       max-height: none;
   }

   .desc b,
   .desc strong {
       font-weight: 700;
       color: #fff;
   }

   .desc::-webkit-scrollbar {
       width: 7px;
       height: 7px;
   }

   .desc::-webkit-scrollbar-thumb {
       background: #156bc7;
       border-radius: 10px;
   }

   .desc::-webkit-scrollbar-track {
       background: #151515a8;
       border-radius: 10px;
   }

   /* ===========================ATTRIBUTES & STATS=========================== */
   .attrs,
   .attr-list {
       display: block;
   }

   .desc-box .attrs,
   .desc-box .attr-list,
   .desc-box .attrs *,
   .desc-box .attr-list * {
       text-shadow: none;
       font-family: 'Noto Sans', sans-serif;
   }

   .attrs__row,
   .attr-row {
       display: flex;
       align-items: center;
       gap: 5px;
       min-height: 22px;
       line-height: 1.2;
   }

   .attrs__row--empty,
   .attr-row.is-empty {
       display: none;
   }

   .attrs__label,
   .attr-label {
       font-weight: 700;
       color: #f0c87b;
       font-size: .98rem;
       white-space: nowrap;
       margin: 0;
   }

   .attrs__value,
   .attr-value {
       color: #fff;
       font-weight: 800;
       font-size: .98rem;
       letter-spacing: .01em;
       margin: 0;
   }

   /* ===========================VIDEO CONTAINER=========================== */
   .video-container {
       position: relative;
       width: 100%;
       max-width: 100%;
       background: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 10px;
       box-shadow: none;
       overflow: hidden;
       padding: 0;
       z-index: 2;
   }

   .video-container>video {
       width: 100%;
       max-width: 100%;
       height: auto;
       aspect-ratio: 16 / 9;
       object-fit: contain;
       object-position: center;
       z-index: 2;
       display: block;
       border-radius: 6px;
       background: #000;
   }

   .video-placeholder {
       position: absolute;
       inset: 0;
       z-index: 6;
       display: flex;
       align-items: center;
       justify-content: center;
       pointer-events: none;
       opacity: 1;
       transition: opacity .28s ease;
       background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
   }

   .video-placeholder img {
       max-width: 160px;
       width: auto;
       height: auto;
       opacity: 0.98;
       display: block;
   }

   .video-placeholder.fade-out {
       opacity: 0;
   }

   /* ===========================LAYOUT COMPONENTS=========================== */
   .top-rail {
       display: flex;
       align-items: center;
       justify-content: center;
       width: max-content;
       max-width: 96vw;
       margin: 0px auto;
       padding: 5px 5px;
       background: rgba(28, 28, 34, .95);
       border: 2px solid rgba(255, 255, 255, .08);
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
       -webkit-backdrop-filter: blur(2px);
       backdrop-filter: blur(2px);
   }

   /* Quando dentro do wrapper, remove o margin auto (o wrapper centraliza) */
   .skills-rail-wrap>.top-rail {
       margin-left: 0 !important;
       margin-right: 0 !important;
       display: inline-flex;
       /* Permite centralização via text-align do pai */
   }

   .top-rail .rail-title {
       display: none;
   }

   .top-rail.skins .rail-title {
       display: block;
       font-weight: 800;
       font-size: clamp(20px, 2.2vw, 28px);
       color: #fff;
       margin-right: auto;
   }

   .top-rail .icon-bar {
       width: auto;
       justify-content: center;
       margin: 0;
       overflow-x: auto;
   }

   .content-card {
       width: min(1600px, 96vw);
       max-width: 96vw;
       margin: 10px auto;
       background: rgba(28, 28, 34, .95);
       border-radius: 12px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .30);
       padding: 18px;
       z-index: 2;
   }

   .content-card.skills-grid {
       display: grid;
       grid-template-columns: minmax(320px, 60%) minmax(320px, 45%);
       gap: 16px;
       align-items: start;
       grid-auto-rows: auto;
       margin: 10px auto 0;
   }

   /* ===========================TIER SYSTEM=========================== */
   .tier-bronze .topbar-icon,
   .tier-bronze .tier {
       outline: 2px solid #7b4e2f;
   }

   .tier-silver .topbar-icon,
   .tier-silver .tier {
       outline: 2px solid #d6d2d2;
   }

   .tier-gold .topbar-icon,
   .tier-gold .tier {
       outline: 2px solid #fcd300;
   }

   .tier-diamond .topbar-icon,
   .tier-diamond .tier {
       outline: 2px solid #60dae2;
   }

   /* ===========================RESPONSIVE DESIGN & MOBILE=========================== */
   @media (max-width:1100px) {
       .character-name {
           font-size: clamp(20px, 3vw + 0.5rem, 36px);
           padding-bottom: 0.2em;
       }

       .top-rail {
           flex-direction: column;
           align-items: stretch;
       }

       .top-rail .icon-scroll-x {
           order: 2;
           width: 100%;
       }

       .top-rail .icon-bar {
           order: 2;
           width: 100%;
           flex-wrap: wrap;
       }

       .content-card.skills-grid {
           grid-template-columns: 1fr;
           gap: 12px;
       }

       .video-container {
           width: 100%;
           max-width: 100%;
           margin: 0 auto;
           display: flex;
           align-items: center;
           justify-content: center;
       }
   }

   @media (max-aspect-ratio: 3/4) {
       .character-header .character-art {
           display: none;
       }

       .video-container {
           width: 100%;
           max-width: 100%;
           margin: 2% auto 0;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 3%;
       }
   }

   @media (max-width:600px) {
       .character-name {
           font-size: clamp(16px, 4.5vw + 0.3rem, 28px);
           line-height: 1.2;
           padding-bottom: 0.25em;
       }

       .character-name-box {
           flex-wrap: wrap;
           gap: 8px;
       }

       .content-card {
           box-sizing: border-box;
           max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
           width: 100%;
           margin: 10px auto;
           padding: 12px;
           border-radius: 10px;
           overflow: hidden;
       }

       .content-card.skills-grid {
           grid-template-columns: 1fr;
           gap: 12px;
       }

       .top-rail {
           width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
           max-width: 100%;
           margin: 0 auto 8px;
           padding: 6px 8px;
           border-radius: 0;
           box-sizing: border-box;
           overflow: hidden;
       }

       .top-rail.skills {
           overflow: visible !important;
       }

       .top-rail .icon-scroll-x {
           width: 100%;
           padding-top: 10px;
           padding-bottom: 10px;
           margin-top: -10px;
           margin-bottom: -10px;
           overflow-x: auto;
           /* iOS smooth scroll */
           -webkit-overflow-scrolling: touch;
       }

       .top-rail .icon-bar {
           width: 100%;
           padding: 0 6px;
           gap: 12px;
           justify-content: flex-start;
           overflow: visible !important;
           /* iOS smooth scroll */
           -webkit-overflow-scrolling: touch;
       }

       :root {
           --icon-size: 92px;
       }

       .icon-bar .skill-icon {
           width: var(--icon-size);
           height: var(--icon-size);
           flex: 0 0 auto;
       }

       .video-container,
       .skins-carousel-wrapper,
       .skins-carousel {
           max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
           box-sizing: border-box;
       }

       .video-container {
           width: 100%;
           margin: 0 auto;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .video-container>video,
       .video-container img,
       .skins-carousel img {
           max-width: 100%;
           width: 100%;
           height: auto;
       }

       html,
       body,
       .mw-body,
       .mw-body-content {
           overflow-x: hidden;
       }

       /* Base no mobile - desabilita Font Boosting */
       .desc-box {
           font-size: 16px !important;
           -webkit-text-size-adjust: 100% !important;
           -moz-text-size-adjust: 100% !important;
           text-size-adjust: 100% !important;
       }

       .desc-box * {
           -webkit-text-size-adjust: 100% !important;
           -moz-text-size-adjust: 100% !important;
           text-size-adjust: 100% !important;
       }

       /* Atributos no mobile - tamanho bem legível */
       .attrs__label,
       .attr-label {
           font-size: 20px !important;
       }

       .attrs__value,
       .attr-value {
           font-size: 20px !important;
       }

       .attr-row {
           margin-bottom: 12px;
       }

       #skills .desc-box .skill-level-line .attr-label {
           font-size: 22px !important;
       }

       /* Descrição - TAMANHO GRANDE para leitura confortável no mobile */
       .desc {
           font-size: 24px !important;
           line-height: 1.95 !important;
           -webkit-text-size-adjust: 100% !important;
           text-size-adjust: 100% !important;
       }

       .desc-box h3 {
           font-size: 32px !important;
       }
   }

   /* ===========================OVERFLOW PROTECTION=========================== */
   html,
   body,
   .mw-body,
   .mw-body-content {
       box-sizing: border-box;
       max-width: 100vw;
       overflow-x: hidden;
       /* iOS smooth scroll */
       -webkit-overflow-scrolling: touch;
   }

   .content-card,
   .top-rail,
   .video-container,
   .skins-carousel-wrapper,
   .skins-carousel {
       box-sizing: border-box;
       max-width: 100%;
   }

   .content-card *,
   .top-rail *,
   .video-container * {
       max-width: 100%;
       box-sizing: border-box;
   }

   /* ===========================ICON ENHANCEMENTS & OVERRIDES=========================== */
   :root {
       --icon-size: 50px;
       --icon-radius: 10px;
       --icon-idle: #d0d0d0;
       /* Melhor contraste */
       --icon-active: #FFD95A;
       --icon-active-ring: rgba(255, 217, 90, 0.45);
       --icon-active-glow: rgba(255, 217, 90, 0.30);
       --icon-ring-w: 2px;
   }

   .icon-bar .skill-icon {
       width: var(--icon-size) !important;
       height: var(--icon-size) !important;
       position: relative;
       border: none !important;
       outline: none !important;
       overflow: hidden;
       border-radius: var(--icon-radius);
       contain: paint;
       isolation: isolate;
       will-change: transform;
       transform: translateZ(0);
       padding: 0 !important;
       margin: 0 !important;
   }

   /* Garantir que weapon toggle tenha exatamente as mesmas dimensões */
   .icon-bar .skill-icon.weapon-bar-toggle {
       width: var(--icon-size) !important;
       height: var(--icon-size) !important;
       padding: 0 !important;
       margin: 0 !important;
       box-sizing: border-box !important;
   }

   .icon-bar .skill-icon img {
       display: block;
       width: 100%;
       height: 100%;
       aspect-ratio: 1 / 1;
       border-radius: inherit;
       -webkit-clip-path: inset(0 round var(--icon-radius));
       clip-path: inset(0 round var(--icon-radius));
       transition: transform .12s ease;
       backface-visibility: hidden;
       transform: translateZ(0);
       object-fit: cover;
   }

   .icon-bar .skill-icon::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       pointer-events: none;
       z-index: 2;
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle) !important;
       transition: box-shadow .12s ease;
   }

   .icon-bar .skill-icon::before {
       content: "";
       position: absolute;
       inset: -2px;
       border-radius: calc(var(--icon-radius) + 2px);
       pointer-events: none;
       z-index: 1;
       box-shadow: none;
       opacity: 0;
       transition: opacity .12s ease, box-shadow .12s ease;
   }

   .icon-bar .skill-icon.active {
       transform: scale(1.10) translateZ(0) !important;
       z-index: 5;
   }

   .icon-bar .skill-icon.active::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active) !important;
   }

   .icon-bar .skill-icon.active::before {
       opacity: 1 !important;
       box-shadow: 0 0 14px 4px var(--icon-active-glow), 0 0 0 calc(var(--icon-ring-w) * 2) var(--icon-active-ring) !important;
   }

   /* OVERRIDE: Skills com weapon têm prioridade sobre estilos base */
   .character-box .top-rail.skills .icon-bar .skill-icon.has-weapon-available.active::after,
   .character-box .top-rail.skills .icon-bar .skill-icon.has-weapon-available.active::before {
       /* Estilos de weapon sobrescrevem estilos base */
   }

   .icon-bar .skill-icon.active img {
       transform: none !important;
   }

   .icon-bar .skill-icon:hover:not(.active)::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) #e6e6e6 !important;
   }

   /* Permitir glow completo para ícones com weapon */
   .top-rail.skills .icon-bar .skill-icon.has-weapon-available:not(.weapon-bar-toggle) {
       overflow: visible !important;
       contain: none !important;
   }

   /* Garantir que transform funcione mesmo quando subskills estão visíveis */
   .top-rail.skills .icon-bar .skill-icon.active {
       transform: scale(1.10) translateZ(0) !important;
   }

   .icon-bar .skill-icon,
   .icon-bar .skill-icon img,
   .icon-bar .skill-icon::after,
   .icon-bar .skill-icon::before {
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       transform: translateZ(0);
   }

   /* ===========================TOOLTIP SYSTEM=========================== */
   .skill-tooltip {
       position: fixed;
       z-index: 9999;
       pointer-events: none;
       padding: 6px 8px;
       border-radius: 6px;
       background: rgba(17, 17, 17, .9);
       color: #fff;
       font-size: 14px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
       opacity: 0;
       transition: opacity .12s ease, transform .08s ease;
       white-space: nowrap;
   }

   /* ===========================BACKGROUND SYSTEM=========================== */
   .mw-body-content .character-box {
       background-position: center top;
       background-repeat: no-repeat;
       background-size: cover;
       background-attachment: fixed;
       position: relative;
       z-index: 1;
   }

   .mw-body-content .character-box::before {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, .60));
       z-index: 0;
   }

   /* ===========================FINAL ICON OVERRIDES & FIXES=========================== */
   /* Consolidado com seção anterior - removidas duplicações */

   /* ===========================FINAL TOOLTIP STYLES=========================== */
   .skill-tooltip {
       position: fixed;
       z-index: 10000;
       pointer-events: none;
       padding: 8px 10px;
       border-radius: 8px;
       background: rgba(28, 28, 34, .95);
       color: #eaeaea;
       font-size: 13px;
       line-height: 1.25;
       text-align: center;
       max-width: 360px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
       left: -9999px;
       top: -9999px;
       transform: none;
       opacity: 0;
       transition: opacity .12s ease;
       white-space: normal;
   }

   /* ===========================SKILL LEVEL STYLING=========================== */
   #skills .desc-box .skill-title {
       margin: 0 0 4px;
   }

   #skills .desc-box .skill-level-line {
       margin: 0 0 10px;
       text-align: center;
       line-height: 1.15;
   }

   #skills .desc-box .skill-level-line .attr-label {
       color: #f0c87b;
       font-weight: 800;
       letter-spacing: .2px;
       font-size: .98rem;
   }

   /* ===========================SKILL FLAGS (CARACTERÍSTICAS)=========================== */
   .video-container {
       position: relative;
   }

   .skill-flags {
       position: absolute;
       top: 8px;
       left: 8px;
       display: flex;
       flex-direction: row;
       gap: 6px;
       z-index: 10;
       pointer-events: auto;
   }

   .skill-flag {
       display: inline-block;
       pointer-events: all;
       cursor: pointer;
       filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
       width: 32px;
       height: 32px;
       aspect-ratio: 1 / 1;
       object-fit: contain;
   }

   /* Tooltip específico para flags (cor cinza para contraste) */
   .skill-tooltip.flag-tooltip {
       background: rgba(80, 80, 85, .98) !important;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
   }

</style>