https://wiki.gla.com.br/api.php?action=feedcontributions&feedformat=atom&user=Lucky+Jao
Wiki Gla - Contribuições do usuário [pt-br]
2026-04-05T17:17:24Z
Contribuições do usuário
MediaWiki 1.36.1
https://wiki.gla.com.br/index.php?title=Widget:Teste&diff=38267
Widget:Teste
2025-08-28T01:31:50Z
<p>Lucky Jao: </p>
<hr />
<div><script><br />
(function () {<br />
const $ = (s, root = document) => root.querySelector(s);<br />
const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));<br />
<br />
// Idempotent helpers<br />
const ensureRemoved = sel => { Array.from(document.querySelectorAll(sel)).forEach(n => n.remove()); };<br />
const onceFlag = (el, key) => { if (!el) return false; if (el.dataset[key]) return false; el.dataset[key] = '1'; return true; };<br />
<br />
// Basic DOM nodes<br />
const skillsTab = $('#skills');<br />
const skinsTab = $('#skins');<br />
<br />
// Clean up legacy nodes/titles/placeholders before building<br />
ensureRemoved('.top-rail');<br />
ensureRemoved('.content-card');<br />
ensureRemoved('.video-placeholder');<br />
// remove old duplicated skins titles (text match)<br />
Array.from(document.querySelectorAll('.card-skins-title, .card-skins .card-skins-title, .cardskins-title, .rail-title')).forEach(t => {<br />
if ((t.textContent || '').trim().toLowerCase().includes('skins')) {<br />
// keep only if it's inside a future top-rail.skins we will create; remove for now<br />
t.remove();<br />
}<br />
});<br />
<br />
// Build top-rail for skills (only icon-bar, centered)<br />
if (skillsTab) {<br />
const iconBar = skillsTab.querySelector('.icon-bar');<br />
if (iconBar) {<br />
const rail = document.createElement('div');<br />
rail.className = 'top-rail skills';<br />
// center icon bar inside rail<br />
rail.appendChild(iconBar);<br />
skillsTab.prepend(rail);<br />
}<br />
}<br />
<br />
// Build top-rail for skins (single title + keep carousel wrapper)<br />
if (skinsTab) {<br />
const wrapper = skinsTab.querySelector('.skins-carousel-wrapper');<br />
const rail = document.createElement('div');<br />
rail.className = 'top-rail skins';<br />
const title = document.createElement('div');<br />
title.className = 'rail-title';<br />
title.textContent = 'Skins & Spotlights';<br />
rail.appendChild(title);<br />
if (wrapper) {<br />
const card = document.createElement('div');<br />
card.className = 'content-card';<br />
card.appendChild(wrapper);<br />
skinsTab.prepend(rail);<br />
skinsTab.appendChild(card);<br />
} else {<br />
skinsTab.prepend(rail);<br />
}<br />
}<br />
<br />
// Create content-card for skills (description + video) and move nodes in<br />
if (skillsTab) {<br />
const details = skillsTab.querySelector('.skills-details');<br />
const videoContainer = skillsTab.querySelector('.video-container');<br />
const card = document.createElement('div');<br />
card.className = 'content-card skills-grid';<br />
if (details) card.appendChild(details);<br />
if (videoContainer) card.appendChild(videoContainer);<br />
skillsTab.appendChild(card);<br />
}<br />
<br />
// ----- Elements after build<br />
const iconsBar = $('#skills') ? $('.icon-bar', $('#skills')) : null;<br />
const iconItems = iconsBar ? Array.from(iconsBar.querySelectorAll('.skill-icon')) : [];<br />
const descBox = $('#skills') ? $('.desc-box', $('#skills')) : null;<br />
const videoBox = $('#skills') ? $('.video-container', $('#skills')) : null;<br />
<br />
// Video cache and state<br />
const videosCache = new Map();<br />
let totalVideos = 0, loadedVideos = 0, autoplay = false;<br />
<br />
// Single placeholder node: create once at page load and never re-create later.<br />
let placeholder = videoBox ? videoBox.querySelector('.video-placeholder') : null;<br />
let placeholderCreatedOnLoad = false;<br />
// true once the single placeholder was used/consumed (only show for the first active video)<br />
let placeholderConsumed = false;<br />
if (!placeholder && videoBox) {<br />
placeholder = document.createElement('div');<br />
placeholder.className = 'video-placeholder';<br />
placeholder.innerHTML = '<img src="/images/d/d5/Icon_gla.png" alt="Carregando...">';<br />
videoBox.appendChild(placeholder);<br />
placeholderCreatedOnLoad = true;<br />
} else if (placeholder) {<br />
// If a placeholder already exists in DOM (legacy), mark it as created on load.<br />
placeholderCreatedOnLoad = true;<br />
}<br />
if (!placeholder) placeholderConsumed = true; // nothing to show<br />
<br />
// Robust hide/show: fade-out hides the single placeholder but keeps it in DOM<br />
// so it can be reused without duplication. Removal (DOM delete) is avoided.<br />
const removePlaceholderSmooth = () => {<br />
if (!placeholder) return;<br />
if (placeholder.classList.contains('fade-out')) return;<br />
placeholder.classList.add('fade-out');<br />
// when transition completes, keep node but hide it so showPlaceholder can reuse.<br />
const onEnd = () => {<br />
try { placeholder.style.display = 'none'; } catch (e) { /* ignore */ }<br />
placeholder.removeEventListener('transitionend', onEnd);<br />
};<br />
placeholder.addEventListener('transitionend', onEnd, { once: true });<br />
// fallback ensure it's hidden<br />
setTimeout(() => { try { placeholder.style.display = 'none'; } catch (e) {} }, 600);<br />
};<br />
<br />
// showPlaceholder: shows the single placeholder created at load (no new nodes).<br />
const showPlaceholder = () => {<br />
if (!videoBox) return;<br />
if (!placeholder || !placeholderCreatedOnLoad) return;<br />
if (placeholderConsumed) return; // never show again after first use<br />
placeholder.classList.remove('fade-out');<br />
placeholder.style.display = 'flex';<br />
// force reflow to ensure transition apply on hide later<br />
void placeholder.offsetWidth;<br />
};<br />
<br />
// Utility: attach listener only once per element<br />
const addOnce = (el, ev, fn) => {<br />
if (!el) return;<br />
const attr = `data-wired-${ev}`;<br />
if (el.hasAttribute(attr)) return;<br />
el.addEventListener(ev, fn);<br />
el.setAttribute(attr, '1');<br />
};<br />
<br />
// Preload videos (idempotent: skip if present in map)<br />
if (iconItems.length && videoBox) {<br />
iconItems.forEach(el => {<br />
const src = (el.dataset.video || '').trim();<br />
const idx = el.dataset.index || '';<br />
if (!src || videosCache.has(idx)) return;<br />
<br />
totalVideos++;<br />
const v = document.createElement('video');<br />
v.className = 'skill-video';<br />
v.setAttribute('controls', '');<br />
v.setAttribute('preload', 'auto');<br />
v.setAttribute('playsinline', '');<br />
v.style.display = 'none';<br />
v.dataset.index = idx;<br />
// prefer consistent sizing: width 100% inside video container, and use 16:9 to avoid layout jumps<br />
v.style.width = '100%';<br />
v.style.maxWidth = '100%';<br />
v.style.height = 'auto';<br />
v.style.aspectRatio = '16/9';<br />
v.style.objectFit = 'cover';<br />
const source = document.createElement('source');<br />
source.src = src;<br />
source.type = 'video/webm';<br />
v.appendChild(source);<br />
<br />
v.addEventListener('canplay', () => {<br />
loadedVideos++;<br />
if (loadedVideos === 1) { try { v.pause(); v.currentTime = 0; } catch (e) { } }<br />
const active = $('.skill-icon.active', iconsBar);<br />
if (active && active.dataset.index === idx) {<br />
// remove placeholder for the active video (only once)<br />
if (!placeholderConsumed) {<br />
setTimeout(() => { removePlaceholderSmooth(); placeholderConsumed = true; }, 180);<br />
}<br />
}<br />
if (loadedVideos === totalVideos) autoplay = true;<br />
});<br />
<br />
v.addEventListener('error', () => {<br />
loadedVideos++;<br />
removePlaceholderSmooth();<br />
if (loadedVideos === totalVideos) autoplay = true;<br />
});<br />
<br />
videoBox.appendChild(v);<br />
videosCache.set(idx, v);<br />
});<br />
}<br />
<br />
if (totalVideos === 0 && placeholder) {<br />
// no videos: hide placeholder but keep the node for idempotence<br />
placeholder.style.display = 'none';<br />
placeholder.classList.add('fade-out');<br />
}<br />
<br />
// Attach skill icon click handlers once<br />
iconItems.forEach(el => {<br />
if (el.dataset.wired) return;<br />
el.dataset.wired = '1';<br />
const name = el.dataset.nome || el.dataset.name || '';<br />
const desc = (el.dataset.desc || '').replace(/'''(.*?)'''/g, '<b>$1</b>');<br />
const attrs = el.dataset.atr || el.dataset.attrs || '';<br />
const idx = el.dataset.index || '';<br />
const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== '');<br />
<br />
el.title = name;<br />
el.addEventListener('click', () => {<br />
// update description area<br />
if (descBox) {<br />
descBox.innerHTML = `<br />
<div class="skill-title"><h3>${name}</h3></div><br />
${renderAttributes(attrs)}<br />
<div class="desc">${desc}</div><br />
`;<br />
}<br />
<br />
// switch videos: hide all, show selected (if any)<br />
videosCache.forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });<br />
if (videoBox) {<br />
if (hasVideo && videosCache.has(idx)) {<br />
const v = videosCache.get(idx);<br />
// ensure video container visible and video fills container consistently<br />
videoBox.style.display = 'block';<br />
v.style.display = 'block';<br />
try { v.currentTime = 0; } catch (e) {}<br />
// show the (single) placeholder until this video can play<br />
if (v.readyState >= 3) {<br />
if (!placeholderConsumed) { removePlaceholderSmooth(); placeholderConsumed = true; }<br />
} else {<br />
// show placeholder only if it hasn't been used yet<br />
if (!placeholderConsumed) {<br />
showPlaceholder();<br />
const canplayHandler = () => { removePlaceholderSmooth(); placeholderConsumed = true; v.removeEventListener('canplay', canplayHandler); };<br />
v.addEventListener('canplay', canplayHandler);<br />
}<br />
}<br />
if (autoplay) v.play().catch(() => { });<br />
} else {<br />
// no video for this skill: hide video area and hide placeholder<br />
videoBox.style.display = 'none';<br />
if (placeholder) {<br />
placeholder.style.display = 'none';<br />
placeholder.classList.add('fade-out');<br />
}<br />
}<br />
}<br />
<br />
// active state<br />
iconItems.forEach(i => i.classList.remove('active'));<br />
el.classList.add('active');<br />
if (!autoplay && loadedVideos > 0) autoplay = true;<br />
});<br />
});<br />
<br />
// Tooltip: single global tooltip for skill icons (idempotent)<br />
(function initSkillTooltip() {<br />
if (document.querySelector('.skill-tooltip')) return;<br />
const tip = document.createElement('div');<br />
tip.className = 'skill-tooltip';<br />
tip.setAttribute('role', 'tooltip');<br />
tip.setAttribute('aria-hidden', 'true');<br />
document.body.appendChild(tip);<br />
<br />
function measureAndPos(el) {<br />
if (!el || tip.getAttribute('aria-hidden') === 'true') return;<br />
// reset to measure<br />
tip.style.left = '0px';<br />
tip.style.top = '0px';<br />
const rect = el.getBoundingClientRect();<br />
const tr = tip.getBoundingClientRect();<br />
let left = Math.round(rect.left + (rect.width - tr.width) / 2);<br />
left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));<br />
let top = Math.round(rect.top - tr.height - 8);<br />
if (top < 8) top = Math.round(rect.bottom + 8);<br />
tip.style.left = left + 'px';<br />
tip.style.top = top + 'px';<br />
}<br />
<br />
function show(el, text) {<br />
tip.textContent = text || '';<br />
tip.setAttribute('aria-hidden', 'false');<br />
tip.style.opacity = '1';<br />
measureAndPos(el);<br />
}<br />
<br />
function hide() {<br />
tip.setAttribute('aria-hidden', 'true');<br />
tip.style.opacity = '0';<br />
}<br />
<br />
// attach once to each icon<br />
Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {<br />
if (icon.dataset.tipwired) return;<br />
icon.dataset.tipwired = '1';<br />
const label = icon.dataset.nome || icon.dataset.name || icon.title || '';<br />
icon.addEventListener('mouseenter', () => show(icon, label));<br />
icon.addEventListener('mousemove', () => measureAndPos(icon));<br />
icon.addEventListener('mouseleave', hide);<br />
});<br />
<br />
// keep positioned while scrolling/resizing<br />
window.addEventListener('scroll', () => {<br />
const visible = document.querySelector('.skill-tooltip[aria-hidden="false"]');<br />
if (!visible) return;<br />
const hover = document.querySelector('.icon-bar .skill-icon:hover') || document.querySelector('.icon-bar .skill-icon.active');<br />
measureAndPos(hover);<br />
}, true);<br />
window.addEventListener('resize', () => {<br />
const hover = document.querySelector('.icon-bar .skill-icon:hover') || document.querySelector('.icon-bar .skill-icon.active');<br />
measureAndPos(hover);<br />
});<br />
})();<br />
<br />
// Select first skill by default (dispatch click once)<br />
if (iconItems.length) {<br />
const first = iconItems[0];<br />
if (first) {<br />
// ensure default active visual & trigger behavior<br />
if (!first.classList.contains('active')) first.classList.add('active');<br />
// trigger click after microtask so videos are ready to be shown<br />
setTimeout(() => first.click(), 0);<br />
}<br />
}<br />
<br />
// Keep .desc max-height synced to the visible video height so long descriptions<br />
// scroll instead of pushing the layout and stretching the background.<br />
function syncDescHeight() {<br />
if (!descBox || !videoBox) return;<br />
const descEl = descBox.querySelector('.desc');<br />
if (!descEl) return;<br />
// if video area hidden, restore CSS fallback (clamp)<br />
const computedDisplay = getComputedStyle(videoBox).display;<br />
if (computedDisplay === 'none') {<br />
descEl.style.maxHeight = '';<br />
return;<br />
}<br />
// prefer measuring video element if present, fallback to videoBox<br />
const v = videoBox.querySelector('video');<br />
const targetHeight = (v && v.offsetHeight > 0) ? v.offsetHeight : videoBox.clientHeight;<br />
if (!targetHeight || targetHeight <= 0) {<br />
descEl.style.maxHeight = '';<br />
return;<br />
}<br />
// subtract vertical padding on desc element to keep inner scroll consistent<br />
const cs = getComputedStyle(descEl);<br />
const padTop = parseFloat(cs.paddingTop) || 0;<br />
const padBottom = parseFloat(cs.paddingBottom) || 0;<br />
const maxH = Math.max(64, targetHeight - padTop - padBottom); // ensure a minimum<br />
descEl.style.maxHeight = `${maxH}px`;<br />
}<br />
<br />
// keep in sync on resize and when videos change layout<br />
window.addEventListener('resize', syncDescHeight);<br />
if (videoBox) new ResizeObserver(syncDescHeight).observe(videoBox);<br />
<br />
// call sync after each icon click (desc is rebuilt there)<br />
// patch: wrap existing click wiring to call syncDescHeight after updating DOM<br />
iconItems.forEach(el => {<br />
const wired = !!el.dataset._sync_wired;<br />
if (wired) return;<br />
el.dataset._sync_wired = '1';<br />
// find existing click handler we attached earlier and chain sync<br />
el.addEventListener('click', () => {<br />
// run in next microtask so DOM update from earlier handler is settled<br />
Promise.resolve().then(syncDescHeight);<br />
});<br />
});<br />
<br />
// horizontal scroll on wheel (attach once)<br />
if (iconsBar) addOnce(iconsBar, 'wheel', (e) => {<br />
if (e.deltaY) {<br />
e.preventDefault();<br />
iconsBar.scrollLeft += e.deltaY;<br />
}<br />
});<br />
<br />
// skins carousel arrows init (idempotent)<br />
(function initSkinsArrows() {<br />
const carousel = $('.skins-carousel');<br />
const wrapper = $('.skins-carousel-wrapper');<br />
const left = $('.skins-arrow.left');<br />
const right = $('.skins-arrow.right');<br />
if (!carousel || !left || !right || !wrapper) return;<br />
if (wrapper.dataset.wired) return;<br />
wrapper.dataset.wired = '1';<br />
const scrollAmt = () => Math.round(carousel.clientWidth * 0.6);<br />
function setState() {<br />
const max = carousel.scrollWidth - carousel.clientWidth;<br />
const x = carousel.scrollLeft;<br />
const hasLeft = x > 5, hasRight = x < max - 5;<br />
left.style.display = hasLeft ? 'inline-block' : 'none';<br />
right.style.display = hasRight ? 'inline-block' : 'none';<br />
wrapper.classList.toggle('has-left', hasLeft);<br />
wrapper.classList.toggle('has-right', hasRight);<br />
carousel.style.justifyContent = (!hasLeft && !hasRight) ? 'center' : '';<br />
}<br />
function go(dir) {<br />
const max = carousel.scrollWidth - carousel.clientWidth;<br />
const next = dir < 0<br />
? Math.max(0, carousel.scrollLeft - scrollAmt())<br />
: Math.min(max, carousel.scrollLeft + scrollAmt());<br />
carousel.scrollTo({ left: next, behavior: 'smooth' });<br />
}<br />
left.addEventListener('click', () => go(-1));<br />
right.addEventListener('click', () => go(1));<br />
carousel.addEventListener('scroll', setState);<br />
new ResizeObserver(setState).observe(carousel);<br />
setState();<br />
})();<br />
<br />
// Render attributes function (keeps empty rows above visible ones)<br />
function renderAttributes(str) {<br />
const vals = (str || '').split(',').map(v => v.trim());<br />
const pve = parseInt(vals[0], 10);<br />
const pvp = parseInt(vals[1], 10);<br />
const ene = parseInt(vals[2], 10);<br />
const cd = parseInt(vals[3], 10);<br />
<br />
const recargaVal = isNaN(cd) ? '-' : cd;<br />
const energiaLabel = isNaN(ene) ? 'Energia' : (ene >= 0 ? 'Ganho de energia' : 'Custo de energia');<br />
const energiaVal = isNaN(ene) ? '-' : Math.abs(ene);<br />
const poderVal = isNaN(pve) ? '-' : pve;<br />
const poderPvpVal = isNaN(pvp) ? '-' : pvp;<br />
<br />
const rows = [<br />
['Recarga', recargaVal],<br />
[energiaLabel, energiaVal],<br />
['Poder', poderVal],<br />
['Poder PvP', poderPvpVal],<br />
];<br />
<br />
const visible = rows.filter(([, v]) => v !== '-');<br />
const empties = rows.length - visible.length;<br />
const emptyHtml = Array.from({ length: empties }).map(() => `<br />
<div class="attr-row is-empty"><br />
<span class="attr-label">&nbsp;</span><br />
<span class="attr-value">&nbsp;</span><br />
</div><br />
`).join('');<br />
const visibleHtml = visible.map(([label, value]) => `<br />
<div class="attr-row"><br />
<span class="attr-label">${label}:</span><br />
<span class="attr-value">${value}</span><br />
</div><br />
`).join('');<br />
if (visible.length === 0) {<br />
// still keep one empty row to preserve spacing but on top<br />
return `<div class="attr-list">${emptyHtml || `\n <div class="attr-row is-empty">\n <span class="attr-label">&nbsp;</span>\n <span class="attr-value">&nbsp;</span>\n </div>\n `}</div>`;<br />
}<br />
return `<div class="attr-list">${emptyHtml}${visibleHtml}</div>`;<br />
}<br />
<br />
// language-aware tab label for Skills<br />
(function localizeSkillsTab() {<br />
const lang = (document.documentElement.lang || navigator.language || '').toLowerCase();<br />
const code = lang.split('-')[0];<br />
const map = {<br />
en: 'Skills',<br />
'pt': 'Habilidades',<br />
'pt-br': 'Habilidades',<br />
'es': 'Habilidades',<br />
pl: 'Umiejętności'<br />
};<br />
// prefer full match (pt-br) then base code<br />
const key = map[lang] ? lang : (map[code] ? code : 'en');<br />
const label = map[key] || map.en;<br />
// try well-known selector first, fallback to searching for english-like text<br />
let btn = document.querySelector('.character-tabs .tab-btn[data-tab="skills"]') ||<br />
Array.from(document.querySelectorAll('.character-tabs .tab-btn')).find(b => /skill|habil|umiej/i.test(b.textContent || ''));<br />
if (btn) btn.textContent = label;<br />
})();<br />
<br />
// DEBUG: log video sources and errors<br />
setTimeout(() => {<br />
console.log('DEBUG: totalVideos=', totalVideos);<br />
Array.from(document.querySelectorAll('.skill-icon')).forEach(el => {<br />
console.log('icon', el.dataset.index, 'data-video=', el.dataset.video);<br />
});<br />
videosCache.forEach((v, idx) => {<br />
const src = v.querySelector('source') ? v.querySelector('source').src : v.src;<br />
console.log('video element', idx, 'src=', src, 'readyState=', v.readyState);<br />
v.addEventListener('error', (ev) => {<br />
console.error('VIDEO ERROR idx=', idx, 'src=', src, 'error=', v.error);<br />
});<br />
v.addEventListener('loadedmetadata', () => {<br />
console.log('loadedmetadata idx=', idx, 'dimensions=', v.videoWidth, 'x', v.videoHeight);<br />
});<br />
});<br />
}, 600);<br />
})();<br />
</script><br />
<br />
<style><br />
/* ===========================<br />
Base<br />
=========================== */<br />
img {<br />
pointer-events: none;<br />
user-select: none;<br />
}<br />
<br />
/* video baseline; specific skill video sizing overridden below */<br />
video { max-height: none; }<br />
<br />
.mw-body {<br />
padding: unset !important;<br />
}<br />
<br />
/* precisa de !important p/ MediaWiki */<br />
.mw-body-content {<br />
line-height: 1.5;<br />
}<br />
<br />
.mw-body-content p {<br />
display: none;<br />
}<br />
<br />
/* ===========================<br />
Banner<br />
=========================== */<br />
/* Hide the original banner element (we'll use the image as the template background)<br />
and keep the selector so existing markup doesn't break. */<br />
.banner { display: none !important; }<br />
<br />
/* Use the banner image as the background for the template container and add<br />
a subtle dark overlay via ::before to improve text contrast. */<br />
.character-box {<br />
/* ...existing properties... */<br />
background-image: url(https://i.imgur.com/RktmgO8.png);<br />
background-position: center top;<br />
background-repeat: no-repeat;<br />
background-size: cover;<br />
position: relative; /* ensure positioning context for ::before */<br />
z-index: 1; /* base layer for the box content */<br />
}<br />
<br />
/* overlay sits above the background image but below the content; darker bottom-to-top gradient */<br />
.character-box::before {<br />
content: "";<br />
position: absolute;<br />
inset: 0;<br />
pointer-events: none;<br />
background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.60));<br />
z-index: 0; /* overlay: below content (content kept at z-index:1) */<br />
}<br />
<br />
/* ===========================<br />
Character topbar<br />
=========================== */<br />
.character-box {<br />
color: #000;<br />
font-family: 'Noto Sans', sans-serif;<br />
width: 100%;<br />
margin: auto;<br />
position: relative;<br />
user-select: none;<br />
}<br />
<br />
.character-box p {<br />
display: unset;<br />
}<br />
<br />
.character-topbar {<br />
display: flex;<br />
flex-direction: column;<br />
align-items: flex-start;<br />
padding: 8px 20px 0;<br />
z-index: 1; /* topbar above overlay */<br />
}<br />
<br />
.character-name-box {<br />
display: flex;<br />
align-items: center;<br />
gap: 14px;<br />
}<br />
<br />
.topbar-icon {<br />
margin-top: 8px;<br />
width: 100px;<br />
height: 100px;<br />
object-fit: none;<br />
}<br />
<br />
.character-name {<br />
color: #fff;<br />
font-size: 56px;<br />
font-family: 'Orbitron', sans-serif;<br />
font-weight: 900;<br />
text-shadow: 0 0 6px #000, 0 0 9px #000;<br />
}<br />
<br />
.topbar-description {<br />
display: none;<br />
}<br />
<br />
/* ===========================<br />
Header / Artwork<br />
=========================== */<br />
.character-header {<br />
position: relative;<br />
overflow: hidden; /* artwork must not 'vazar' */<br />
display: flex;<br />
gap: 10px;<br />
flex-direction: column;<br />
z-index: 1; /* header/topbar layer */<br />
}<br />
<br />
/* artwork removed from layout (server still accepts param but we ignore rendering).<br />
ensure it doesn't reserve space if present in legacy markup */<br />
.character-art { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }<br />
<br />
/* Class / tier chips */<br />
.class-tags {<br />
display: flex;<br />
gap: 9px;<br />
flex-wrap: wrap;<br />
margin-left: .28rem;<br />
}<br />
<br />
.class-tag {<br />
background: #353420;<br />
color: #fff;<br />
outline: 2px solid #000;<br />
padding: 1px 6px;<br />
border-radius: 4px;<br />
font-size: .9em;<br />
font-weight: 700;<br />
box-shadow: 0 0 2px rgb(0 0 0 / 70%);<br />
}<br />
<br />
.character-info .tier,<br />
.character-info .class-tag {<br />
font-size: 18px;<br />
color: #bbb;<br />
}<br />
<br />
/* ===========================<br />
Tabs<br />
=========================== */<br />
.character-tabs {<br />
margin: 4px 0 4px 8px;<br />
display: flex;<br />
gap: 12px;<br />
}<br />
<br />
.tab-btn {<br />
padding: 5px 20px;<br />
background: #333;<br />
color: #fff;<br />
border: 2px solid transparent;<br />
border-radius: 8px;<br />
font-size: 20px;<br />
cursor: pointer;<br />
font-weight: 600;<br />
line-height: 1;<br />
transition: background .15s, border-color .15s;<br />
}<br />
<br />
.tab-btn.active {<br />
background: #156bc7;<br />
border-color: #156bc7;<br />
}<br />
<br />
.tab-content {<br />
display: none;<br />
padding: 0 8px 8px;<br />
position: relative;<br />
z-index: 2; /* content layer */<br />
}<br />
<br />
.tab-content.active {<br />
display: block;<br />
}<br />
<br />
/* ===========================<br />
Skills <br />
=========================== */<br />
.skills-container {<br />
display: flex;<br />
gap: 20px;<br />
}<br />
<br />
.skills-details {<br />
flex: 1;<br />
display: flex;<br />
flex-direction: column;<br />
gap: 10px;<br />
width: auto; /* let grid control widths */<br />
justify-content: center;<br />
}<br />
<br />
.icon-bar {<br />
display: flex;<br />
flex-wrap: nowrap;<br />
gap: 10px;<br />
width: 100%;<br />
overflow-x: auto;<br />
overflow-y: hidden;<br />
padding: 6px 6px; /* centraliza melhor verticalmente */<br />
margin-bottom: 6px;<br />
scrollbar-width: thin;<br />
scrollbar-color: #ababab transparent;<br />
scroll-behavior: smooth;<br />
justify-content: flex-start;<br />
align-items: center; /* centraliza os ícones verticalmente dentro da barra */<br />
position: relative;<br />
z-index: 4;<br />
}<br />
<br />
.icon-bar::-webkit-scrollbar {<br />
height: 6px;<br />
}<br />
<br />
.icon-bar::-webkit-scrollbar-track {<br />
background: transparent;<br />
}<br />
<br />
.icon-bar::-webkit-scrollbar-thumb {<br />
background: #151515;<br />
border-radius: 3px;<br />
}<br />
<br />
:root {<br />
--icon-size: 39px;<br />
--icon-radius: 8px;<br />
/* ring width and colors (icons-only overrides) */<br />
--icon-ring-w: 2px;<br />
--icon-idle: #bbb;<br />
--icon-active: #FFD257; /* amarelo agradável */<br />
--icon-active-ring: rgba(255,210,87,.45);<br />
--icon-active-glow: rgba(255,210,87,.35);<br />
}<br />
<br />
/* ensure each icon is vertically centered inside the bar */<br />
.icon-bar .skill-icon {<br />
/* keep original sizing and alignment but ensure perfect clipping */<br />
width: var(--icon-size);<br />
height: var(--icon-size);<br />
position: relative;<br />
flex: 0 0 auto;<br />
border-radius: var(--icon-radius);<br />
overflow: hidden; /* hard clip the image */<br />
contain: paint; /* reduce subpixel leakage */<br />
margin-top: 0;<br />
display: flex;<br />
align-items: center;<br />
justify-content: center;<br />
-webkit-tap-highlight-color: transparent;<br />
background-clip: padding-box;<br />
}<br />
<br />
.icon-bar .skill-icon img {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
object-fit: cover;<br />
border-radius: inherit;<br />
clip-path: inset(0 round var(--icon-radius));<br />
-webkit-clip-path: inset(0 round var(--icon-radius));<br />
will-change: transform;<br />
backface-visibility: hidden;<br />
transform: translateZ(0);<br />
transition: transform .12s ease;<br />
}<br />
<br />
/* internal ring implemented via inset box-shadow to avoid border layout changes */<br />
.icon-bar .skill-icon::after {<br />
content: "";<br />
position: absolute;<br />
inset: 0;<br />
border-radius: inherit;<br />
/* internal ring keeps constant thickness between states */<br />
box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle);<br />
pointer-events: none;<br />
z-index: 2;<br />
transition: box-shadow .14s ease;<br />
}<br />
<br />
/* subtle hover color change without changing ring width */<br />
.icon-bar .skill-icon:hover::after {<br />
box-shadow: inset 0 0 0 var(--icon-ring-w) #e0e0e0;<br />
}<br />
<br />
/* separate pseudo for glow so ring thickness does not change */<br />
.icon-bar .skill-icon::before {<br />
content: "";<br />
position: absolute;<br />
inset: 0;<br />
border-radius: inherit;<br />
pointer-events: none;<br />
z-index: 1;<br />
box-shadow: none;<br />
opacity: 0;<br />
transition: opacity .14s ease, box-shadow .14s ease;<br />
}<br />
<br />
.icon-bar .skill-icon.active::after {<br />
box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active);<br />
}<br />
<br />
.icon-bar .skill-icon.active::before {<br />
/* glow only (does not change inner ring thickness) */<br />
box-shadow: 0 0 10px 2px var(--icon-active-glow), 0 0 0 4px var(--icon-active-ring);<br />
opacity: 1;<br />
}<br />
<br />
/* smooth zoom on the image only (keeps ring aligned) */<br />
.icon-bar .skill-icon.active img {<br />
transform: scale(1.10);<br />
}<br />
<br />
@media (prefers-reduced-motion: reduce) {<br />
.icon-bar .skill-icon {<br />
transition: none;<br />
}<br />
}<br />
<br />
/* Title description */<br />
.skill-title {<br />
margin: 0 0 12px;<br />
display: flex;<br />
justify-content: center;<br />
align-items: center;<br />
}<br />
<br />
.skill-title h3 {<br />
margin: 0;<br />
width: 100%;<br />
text-align: center;<br />
font-size: 1.6em;<br />
color: #fff;<br />
}<br />
<br />
/* Description */<br />
/* Description box: remove own card background/shadow so it doesn't stack<br />
on top of the outer .content-card. The .content-card remains the main<br />
visual container. Keep padding and readable colors. */<br />
.desc-box {<br />
padding: 12px 18px; /* breathing room */<br />
background: transparent;<br />
border-radius: 6px;<br />
position: relative;<br />
box-shadow: none;<br />
color: #fff;<br />
transition: all .3s ease;<br />
z-index: 2;<br />
overflow: visible;<br />
text-shadow: none;<br />
/* allow description area to grow but not force whole card height */<br />
height: auto;<br />
min-height: 0;<br />
}<br />
<br />
.desc-box h3 {<br />
font-size: 2.7em;<br />
margin: 0;<br />
text-align: center;<br />
padding-top: 0;<br />
}<br />
<br />
.desc {<br />
font-size: 1.32em !important;<br />
line-height: 1.7 !important;<br />
letter-spacing: .01em;<br />
/* preferred CSS fallback — JS will override to the video height when possible */<br />
max-height : clamp(10rem, 37vh, 21rem);<br />
/* keep scrollbar gutter stable to avoid layout shift of background/content */<br />
overflow-y: auto;<br />
scrollbar-gutter: stable;<br />
margin-top: 10px;<br />
padding-right: 8px;<br />
color: #f1efe9;<br />
/* allow long words/URLs to wrap instead of pushing layout */<br />
overflow-wrap: anywhere;<br />
word-break: break-word;<br />
white-space: normal;<br />
}<br />
<br />
.desc b,<br />
.desc strong {<br />
font-weight: 700;<br />
color: #fff;<br />
}<br />
<br />
.desc::-webkit-scrollbar {<br />
width: 7px;<br />
height: 7px;<br />
}<br />
<br />
.desc::-webkit-scrollbar-thumb {<br />
background: #156bc7;<br />
border-radius: 10px;<br />
}<br />
<br />
.desc::-webkit-scrollbar-track {<br />
background: #151515a8;<br />
border-radius: 10px;<br />
}<br />
<br />
/* Attributes list */<br />
.attrs,<br />
.attr-list {<br />
display: block;<br />
margin: 6px 0 12px;<br />
}<br />
<br />
.desc-box .attrs,<br />
.desc-box .attr-list,<br />
.desc-box .attrs *,<br />
.desc-box .attr-list * {<br />
text-shadow: none;<br />
font-family: 'Noto Sans', sans-serif;<br />
}<br />
<br />
.attrs__row,<br />
.attr-row {<br />
display: flex;<br />
align-items: baseline;<br />
gap: 8px;<br />
min-height: 22px;<br />
line-height: 1.2;<br />
}<br />
<br />
.attrs__row--empty,<br />
.attr-row.is-empty {<br />
visibility: hidden;<br />
}<br />
<br />
.attrs__label,<br />
.attr-label {<br />
font-weight: 700;<br />
color: #f0c87b;<br />
font-size: .98rem;<br />
white-space: nowrap;<br />
margin: 0;<br />
}<br />
<br />
.attrs__value,<br />
.attr-value {<br />
color: #fff;<br />
font-weight: 800;<br />
/* equal size with label for consistent centering */<br />
font-size: .98rem;<br />
letter-spacing: .01em;<br />
margin: 0;<br />
}<br />
<br />
/* ensure rows center both label & value (value vertically centered on label) */<br />
.attr-row {<br />
align-items: center;<br />
}<br />
<br />
/* remove fixed skill pane height and let content decide height */<br />
:root { --skill-pane-height: unset; }<br />
.skills-container { align-items: flex-start; }<br />
<br />
/* Video container: allow the video to display at its original size<br />
while keeping it responsive (max-width:100%). Remove extra inner<br />
shadows so the .content-card is the primary card. Center content. */<br />
.video-container {<br />
position: relative;<br />
width: 100%;<br />
max-width: 100%;<br />
background: transparent;<br />
display: flex;<br />
align-items: center;<br />
justify-content: center;<br />
border-radius: 10px;<br />
box-shadow: none;<br />
overflow: hidden; /* rounded corners */<br />
padding: 0;<br />
z-index: 2;<br />
}<br />
<br />
/* ensure every skill video has consistent visible size to avoid tiny thumbnails;<br />
videos fill the video column (responsive) using 16:9 to avoid layout jumps */<br />
.video-container>video {<br />
/* Preencher a coluna do vídeo; mostrar conteúdo inteiro sem recorte */<br />
width: 100%;<br />
max-width: 100%;<br />
height: auto;<br />
aspect-ratio: 16 / 9;<br />
object-fit: contain;<br />
object-position: center;<br />
z-index: 2;<br />
display: block;<br />
border-radius: 6px;<br />
background: #000;<br />
}<br />
<br />
/* Center the placeholder/logo while videos load. Keep it as an overlay<br />
so it doesn't shift layout. */<br />
.video-placeholder {<br />
position: absolute;<br />
inset: 0;<br />
z-index: 6;<br />
display: flex;<br />
align-items: center;<br />
justify-content: center;<br />
pointer-events: none;<br />
opacity: 1;<br />
transition: opacity .28s ease;<br />
background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)); /* transparent overlay but keeps stacking context */<br />
}<br />
<br />
.video-placeholder img {<br />
max-width: 160px;<br />
width: auto;<br />
height: auto;<br />
opacity: 0.98;<br />
display: block;<br />
}<br />
<br />
/* fade-out helper used by JS removePlaceholder() */<br />
.video-placeholder.fade-out {<br />
opacity: 0;<br />
}<br />
<br />
@media (max-width:1100px) {<br />
.top-rail {<br />
flex-direction: column;<br />
align-items: stretch;<br />
}<br />
.top-rail .icon-bar {<br />
order: 2;<br />
width: 100%;<br />
flex-wrap: wrap;<br />
}<br />
.content-card.skills-grid { grid-template-columns: 1fr; }<br />
}<br />
<br />
@media (max-aspect-ratio: 3/4) {<br />
.character-header .character-art {<br />
display: none;<br />
}<br />
<br />
.video-container {<br />
width: 80%;<br />
border-radius: 3%;<br />
margin-top: 2%;<br />
align-self: center;<br />
}<br />
}<br />
<br />
<br />
<br />
/* Tiers */<br />
.tier-bronze .topbar-icon,<br />
.tier-bronze .tier {<br />
outline: 2px solid #7b4e2f;<br />
}<br />
<br />
.tier-silver .topbar-icon,<br />
.tier-silver .tier {<br />
outline: 2px solid #d6d2d2;<br />
}<br />
<br />
.tier-gold .topbar-icon,<br />
.tier-gold .tier {<br />
outline: 2px solid #fcd300;<br />
}<br />
<br />
.tier-diamond .topbar-icon,<br />
.tier-diamond .tier {<br />
outline: 2px solid #60dae2;<br />
}<br />
<br />
/* Top rail: created dynamically by JS; styles for tabs header */<br />
.top-rail {<br />
display:flex;<br />
align-items:center;<br />
justify-content:center;<br />
width:max-content;<br />
max-width:96vw;<br />
margin:8px auto;<br />
padding:8px 12px;<br />
background:rgba(0,0,0,.55);<br />
border: 2px solid rgba(255,255,255,.08);<br />
border-radius: 12px;<br />
box-shadow: 0 4px 12px rgba(0,0,0,.25);<br />
-webkit-backdrop-filter:blur(2px);<br />
backdrop-filter:blur(2px);<br />
}<br />
<br />
/* hide title by default (skills rail won't show it) */<br />
.top-rail .rail-title { display:none; }<br />
<br />
/* skins variant shows the title at left */<br />
.top-rail.skins .rail-title {<br />
display:block;<br />
font-weight:800;<br />
font-size:clamp(20px,2.2vw,28px);<br />
color:#fff;<br />
margin-right:auto;<br />
}<br />
<br />
/* center icons and keep scroll behavior if overflow */<br />
.top-rail .icon-bar {<br />
width:auto;<br />
justify-content:center;<br />
margin:0;<br />
overflow-x:auto; /* preserve horizontal scroll */<br />
}<br />
<br />
/* Card sizing: larger but constrained to viewport; padding included via box-sizing */<br />
.content-card {<br />
width: min(1600px, 96vw);<br />
max-width: 96vw;<br />
margin: 10px auto;<br />
background: #26211C;<br />
border-radius: 12px;<br />
box-shadow: 0 8px 24px rgba(0,0,0,.30);<br />
padding: 18px;<br />
z-index: 2; /* above overlay */<br />
}<br />
<br />
/* layout specific for skills card: larger grid */<br />
/* Make the video column wider so the video has more space.<br />
minmax garante largura mínima para o vídeo e permite expansão até 70% do card. */<br />
.content-card.skills-grid {<br />
display: grid;<br />
/* user requested layout for testing: description column wider, video a bit smaller */<br />
grid-template-columns: minmax(320px, 60%) minmax(320px, 45%);<br />
gap: 16px; /* menor gap para evitar overflow */<br />
align-items: start; /* don't stretch items vertically */<br />
grid-auto-rows: auto;<br />
margin: 10px auto 0;<br />
}<br />
<br />
@media (max-width:1100px) {<br />
.top-rail {<br />
flex-direction: column;<br />
align-items: stretch;<br />
}<br />
.top-rail .icon-bar {<br />
order: 2;<br />
width: 100%;<br />
flex-wrap: wrap;<br />
}<br />
.content-card.skills-grid { grid-template-columns: 1fr; gap: 12px; }<br />
.video-container { width: 80%; max-width: 820px; align-self: center; }<br />
}<br />
<br />
@media (max-width:600px) {<br />
/* Make the card fit symmetrically on small screens (same left/right limit) */<br />
.content-card {<br />
box-sizing: border-box;<br />
/* limitar ao viewport menos safe-area + margem interna */<br />
max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);<br />
width: 100%;<br />
margin: 10px auto;<br />
padding: 12px;<br />
border-radius: 10px;<br />
overflow: hidden; /* evita scroll horizontal causado por filhos */<br />
}<br />
<br />
/* ensure the skills grid collapses to single column and doesn't overflow */<br />
.content-card.skills-grid {<br />
grid-template-columns: 1fr;<br />
gap: 12px;<br />
}<br />
<br />
/* top-rail full width, icon bar flush edge-to-edge */<br />
.top-rail {<br />
width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));<br />
max-width: 100%;<br />
margin: 0 auto 8px;<br />
padding: 6px 8px;<br />
border-radius: 0;<br />
box-sizing: border-box;<br />
overflow: hidden;<br />
}<br />
.top-rail .icon-bar {<br />
width: 100%;<br />
padding: 0 6px;<br />
gap: 12px;<br />
justify-content: flex-start;<br />
overflow-x: auto;<br />
-webkit-overflow-scrolling: touch;<br />
}<br />
<br />
/* larger, more visible icons on mobile */<br />
:root { --icon-size: 92px; } /* overrides default on mobile */<br />
.icon-bar .skill-icon {<br />
width: var(--icon-size);<br />
height: var(--icon-size);<br />
flex: 0 0 auto;<br />
}<br />
<br />
/* limitar explicitamente elementos do vídeo/skins para não extrapolarem */<br />
.video-container,<br />
.skins-carousel-wrapper,<br />
.skins-carousel {<br />
max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);<br />
box-sizing: border-box;<br />
}<br />
.video-container > video,<br />
.video-container img,<br />
.skins-carousel img {<br />
max-width: 100%;<br />
width: 100%;<br />
height: auto;<br />
}<br />
<br />
/* extra safety: prevent horizontal scroll coming from other elements using 100vw */<br />
html, body, .mw-body, .mw-body-content {<br />
overflow-x: hidden;<br />
}<br />
}<br />
<br />
/* ===========================<br />
Base — mobile/overflow guards<br />
=========================== */<br />
/* evitar qualquer elemento extrapolar o viewport e respeitar safe-area (iPhone notch) */<br />
html, body, .mw-body, .mw-body-content {<br />
box-sizing: border-box;<br />
max-width: 100vw;<br />
overflow-x: hidden;<br />
-webkit-overflow-scrolling: touch;<br />
}<br />
<br />
/* garantir imagens / vídeos internos não forçarem overflow */<br />
.content-card, .top-rail, .video-container, .skins-carousel-wrapper, .skins-carousel {<br />
box-sizing: border-box;<br />
max-width: 100%;<br />
}<br />
/* impedir filhos de extrapolarem a coluna do card */<br />
.content-card *,<br />
.top-rail *,<br />
.video-container * {<br />
max-width: 100%;<br />
box-sizing: border-box;<br />
}<br />
<br />
/* ---------------------------<br />
Visual tweaks: icons, attrs, desc<br />
--------------------------- */<br />
/* override base icon size (desktop) */<br />
:root {<br />
--icon-size: 56px; /* desktop icons larger */<br />
--icon-radius: 10px;<br />
}<br />
<br />
/* make skill icons use the variable (safety if other rules exist) */<br />
.icon-bar .skill-icon {<br />
width: var(--icon-size) !important;<br />
height: var(--icon-size) !important;<br />
}<br />
<br />
/* Icon active color variables (only for icon visuals: border + glow) */<br />
:root {<br />
--icon-active: #F7D34B;<br />
--icon-active-ring: rgba(247,211,75,.35);<br />
--icon-active-glow: rgba(247,211,75,.32);<br />
}<br />
<br />
/* Ensure perfect clipping and aligned border for skill icons */<br />
.icon-bar .skill-icon {<br />
overflow: hidden;<br />
border-radius: var(--icon-radius);<br />
contain: paint;<br />
width: var(--icon-size) !important;<br />
height: var(--icon-size) !important;<br />
position: relative; /* keep stacking for pseudo element */<br />
}<br />
<br />
.icon-bar .skill-icon img {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
object-fit: cover;<br />
border-radius: inherit;<br />
clip-path: inset(0 round var(--icon-radius));<br />
}<br />
<br />
.icon-bar .skill-icon::after {<br />
border-radius: inherit;<br />
/* keep neutral/inactive ring defined elsewhere; this ensures radius matches image */<br />
}<br />
<br />
.icon-bar .skill-icon.active::after {<br />
border-color: var(--icon-active);<br />
box-shadow: 0 0 0 2px var(--icon-active), 0 0 0 4px var(--icon-active-ring), 0 0 10px 2px var(--icon-active-glow);<br />
}<br />
<br />
/* Tooltip style (single global tooltip attached to body to avoid clipping) */<br />
.skill-tooltip {<br />
position: fixed;<br />
z-index: 9999;<br />
pointer-events: none;<br />
padding: 6px 8px;<br />
border-radius: 6px;<br />
background: rgba(17,17,17,.9);<br />
color: #fff;<br />
font-size: 14px;<br />
box-shadow: 0 4px 12px rgba(0,0,0,.5);<br />
opacity: 0;<br />
transition: opacity .12s ease, transform .08s ease;<br />
white-space: nowrap;<br />
}<br />
<br />
/* Icon clipping, ring and active halo (overrides; scoped to icons only) */<br />
:root {<br />
--icon-ring-w: 2px;<br />
--icon-idle: #bbb;<br />
--icon-active: #FFD95A; /* amarelo mais visível */<br />
--icon-active-ring: rgba(255,217,90,.50);<br />
--icon-active-glow: rgba(255,217,90,.38);<br />
}<br />
<br />
.icon-bar .skill-icon {<br />
position: relative;<br />
border: none !important;<br />
outline: none !important;<br />
overflow: hidden;<br />
border-radius: var(--icon-radius);<br />
contain: paint;<br />
isolation: isolate;<br />
will-change: transform;<br />
transform: translateZ(0);<br />
/* keep original sizing/flow from existing rules (do not change --icon-size) */<br />
}<br />
<br />
.icon-bar .skill-icon img {<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
object-fit: cover;<br />
border-radius: inherit;<br />
-webkit-clip-path: inset(0 round var(--icon-radius));<br />
clip-path: inset(0 round var(--icon-radius));<br />
transition: transform .12s ease;<br />
backface-visibility: hidden;<br />
transform: translateZ(0);<br />
}<br />
<br />
.icon-bar .skill-icon::after {<br />
content: "";<br />
position: absolute;<br />
inset: 0;<br />
border-radius: inherit;<br />
pointer-events: none;<br />
z-index: 2;<br />
/* internal ring that NEVER changes thickness between states */<br />
box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle);<br />
transition: box-shadow .12s ease;<br />
}<br />
<br />
.icon-bar .skill-icon::before {<br />
content: "";<br />
position: absolute;<br />
inset: -2px;<br />
border-radius: calc(var(--icon-radius) + 2px);<br />
pointer-events: none;<br />
z-index: 1;<br />
box-shadow: none;<br />
opacity: 0;<br />
transition: opacity .12s ease, box-shadow .12s ease;<br />
}<br />
<br />
/* Active state: gentle scale + yellow ring + halo. No change in ring thickness. */<br />
.icon-bar .skill-icon.active {<br />
transform: scale(1.08);<br />
}<br />
.icon-bar .skill-icon.active::after {<br />
box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active);<br />
}<br />
.icon-bar .skill-icon.active::before {<br />
opacity: 1;<br />
box-shadow:<br />
0 0 12px 3px var(--icon-active-glow),<br />
0 0 0 4px var(--icon-active-ring);<br />
}<br />
.icon-bar .skill-icon.active img {<br />
transform: scale(1.08);<br />
}<br />
<br />
/* Hover should never change ring thickness — only color hint */<br />
.icon-bar .skill-icon:hover:not(.active)::after {<br />
box-shadow: inset 0 0 0 var(--icon-ring-w) #e0e0e0;<br />
}<br />
<br />
/* ===========================<br />
Fixed background (scoped to article content only)<br />
=========================== */<br />
/* aplicar o background apenas quando .character-box estiver dentro do conteúdo do artigo */<br />
.mw-body-content .character-box {<br />
background-image: url("https://i.imgur.com/RktmgO8.png");<br />
background-position: center top;<br />
background-repeat: no-repeat;<br />
/* keep the visual background stable when content height changes.<br />
using fixed attachment prevents the artwork from scaling as the box grows. */<br />
background-size: cover;<br />
background-attachment: fixed;<br />
position: relative; /* stacking context para pseudo-elementos */<br />
z-index: 1;<br />
}<br />
<br />
/* overlay interno (escuro) acima do background mas abaixo do conteúdo da caixa */<br />
.mw-body-content .character-box::before {<br />
content: "";<br />
position: absolute;<br />
inset: 0;<br />
pointer-events: none;<br />
background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.60));<br />
z-index: 0; /* abaixo do conteúdo (.character-box deve ter z-index > 0) */<br />
}<br />
<br />
/* remove any previous global fixed rules that targeted body.character-bg .character-box<br />
NOTE: original reset removed the background we want; removed to keep .character-box background. */<br />
/* (reset removed) */<br />
</style></div>
Lucky Jao