Widget:C.Base
Ir para navegação
Ir para pesquisar
<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>