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, 0.45),
       rgba(0, 0, 0, 0.6));
   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: 0.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: 0.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 0.15s, border-color 0.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 0.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 0.24s ease, max-width 0.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, 0.08);
   border-right: none;
   background: rgba(28, 28, 34, 0.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, 0.25);
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px);
   transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
   overflow: visible;
 }

 .skills-back-wrapper .skills-back:hover {
   transform: translateX(-80%);
   background: rgba(40, 40, 48, 0.95);
   color: rgba(255, 255, 255, 1);
   box-shadow: 0 4px 16px rgba(0, 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, 0.25);
   }

   50% {
     box-shadow: 0 4px 16px rgba(0, 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, 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, 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 0.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 0.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 0.14s ease, box-shadow 0.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.1);
 }

 @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 0.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: 0.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: 0.98rem;
   white-space: nowrap;
   margin: 0;
 }

 .attrs__value,
 .attr-value {
   color: #fff;
   font-weight: 800;
   font-size: 0.98rem;
   letter-spacing: 0.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 0.28s ease;
   background: linear-gradient(rgba(0, 0, 0, 0), rgba(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, 0.95);
   border: 2px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 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, 0.95);
   border-radius: 12px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
   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.3);
   --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 0.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 0.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 0.12s ease, box-shadow 0.12s ease;
 }

 .icon-bar .skill-icon.active {
   transform: scale(1.1) 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.1) 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, 0.9);
   color: #fff;
   font-size: 14px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
   opacity: 0;
   transition: opacity 0.12s ease, transform 0.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, 0.45),
       rgba(0, 0, 0, 0.6));
   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, 0.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, 0.5),
     inset 0 0 0 1px rgba(255, 255, 255, 0.06);
   left: -9999px;
   top: -9999px;
   transform: none;
   opacity: 0;
   transition: opacity 0.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: 0.2px;
   font-size: 0.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, 0.98) !important;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
     inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
 }

</style>