MediaWiki:Common.css: Difference between revisions

From TimeRO Wiki
Jump to navigation Jump to search
(Created page with "→‎CSS placed here will be applied to all skins: body { background: url("https://ragnarok-infinitezero.com.br/images/card.jpg") no-repeat center center fixed; background-size: cover; }")
 
No edit summary
 
(144 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* ═══════════════════════════════════════════════════════════════════════
body {
  TimeRO Wiki — Unified Design System  v2.0
     background: url("https://ragnarok-infinitezero.com.br/images/card.jpg") no-repeat center center fixed;
  ───────────────────────────────────────────────────────────────────────
     background-size: cover;
  Pages covered:
    Main_Page              → .timero-wiki-root    (full-bleed, no shell)
    Beginner_Leveling_Guide→ #leveling-guide-root (full-bleed)
    MVP_Hunting_Guide      → #mvp-guide-root      (full-bleed)
    Farming_Guide          → #farming-guide-root  (full-bleed)
    Card_System            → #card-system-root    (full-bleed)
    Corrida_ao_99          → (inline sections,    full-bleed)
    All other wiki pages  → dark article shell  (auto)
 
  Sections:
    1  Font import
    2  Design tokens (harmonises inline vars across all pages)
    3  Global base — html, body, font
    4  Vector chrome — header, sidebar, footer dark
    5  Main Page overrides
    6  Custom guide page overrides (full-bleed shell)
    7  Generic article shell (non-custom pages)
    8  Typography
    9  Content flow — no paragraph balloons
    10  Links
    11  Lists / HR / blockquote / code
    12  TOC
    13  Wikitables
    14  Forms / inputs / buttons
    15  Categories / thumbs / messages
    16  ── KEYFRAMES — all pages unified ──
    17  Component tokens shared by guide roots
    18  Guide root normalisations (headings, code, links)
    19  Leveling Guide (leveling-guide-root)
    20  MVP Hunting Guide (mvp-guide-root)
    21  Farming Guide (farming-guide-root)
    22  Card System (card-system-root)
    23  Corrida ao 99 (corrida99 inline page)
    24  Main Page component classes
    25  Responsive
    26  Print
═══════════════════════════════════════════════════════════════════════ */
 
 
/* ════════════════════════════════════════════════════════
  §1  FONT IMPORT
════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,700;1,800&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');
 
 
/* ════════════════════════════════════════════════════════
  §2  DESIGN TOKENS
  Single source of truth. Guide pages reference these via
  CSS variables so inline --c / --ok / --bad etc. resolve
  to the same hues. Values reconciled across all pages.
════════════════════════════════════════════════════════ */
:root {
    /* ── Backgrounds ── */
    --timero-bg-0:          #030508;        /* deepest void */
    --timero-bg-1:          #050810;        /* body base */
    --timero-bg-2:          #07101e;        /* section alternates */
    --timero-bg-3:          #0a1628;        /* raised panels */
    --timero-panel:        rgba(8,18,32,0.94);
    --timero-panel-2:      rgba(10,22,40,0.96);
    --timero-panel-soft:    rgba(255,255,255,0.03);
    --timero-glass:        rgba(6,12,22,0.88);
 
    /* ── Text ── */
    --timero-text:          #e8eef8;
    --timero-text-soft:    #d2dded;
    --timero-text-muted:    #7ea0c8;
    --timero-text-dim:      #3d5570;
 
    /* ── Accent colours (reconciled with guide inline vars) ── */
    /* Cyan  — guide pages call this --c */
    --timero-cyan:          #00d4ff;
    --timero-cyan-soft:    rgba(0,212,255,0.10);
    --timero-cyan-line:    rgba(0,212,255,0.20);
    --timero-cyan-glow:    rgba(0,212,255,0.28);
 
    /* Gold  — guide pages call this --g / --gold (farming = #f9c500) */
    --timero-gold:          #f9a826;        /* standard gold */
    --timero-gold-bright:  #f9c500;        /* farming/zeny gold */
    --timero-gold-soft:    rgba(249,168,38,0.10);
    --timero-gold-line:    rgba(249,168,38,0.22);
 
    /* Green — guide pages call this --ok */
    --timero-green:        #00ff88;
    --timero-green-soft:    rgba(0,255,136,0.09);
    --timero-green-line:    rgba(0,255,136,0.20);
 
    /* Red  — guide pages call this --bad */
    --timero-red:          #ff3d5a;
    --timero-red-soft:      rgba(255,61,90,0.09);
    --timero-red-line:      rgba(255,61,90,0.22);
 
    /* Purple — item DB (#b06cff) / card system (#7c6aff) / global (#8f63ff) */
    --timero-purple:        #8f63ff;        /* global */
    --timero-purple-item:  #b06cff;        /* item database */
    --timero-purple-arcane: #7c6aff;        /* card system */
    --timero-purple-soft:  rgba(143,99,255,0.10);
    --timero-purple-line:  rgba(143,99,255,0.22);
 
    /* Fire  — corrida ao 99 / MVP guide */
    --timero-fire:          #ff6b00;
    --timero-fire2:        #ff9500;
    --timero-fire-soft:    rgba(255,107,0,0.08);
    --timero-fire-line:    rgba(255,107,0,0.22);
 
    /* Blue  — misc accent */
    --timero-blue:          #4c89ff;
    --timero-blue-soft:    rgba(76,137,255,0.10);
 
    /* Podium metals */
    --timero-gold-medal:    #f9c500;
    --timero-silver:        #c8d8e8;
    --timero-bronze:        #cd7f32;
 
    /* ── Borders ── */
    --timero-border:        rgba(255,255,255,0.07);
    --timero-border-mid:    rgba(255,255,255,0.11);
    --timero-border-bright: rgba(255,255,255,0.16);
 
    /* ── Shadows ── */
    --timero-shadow-xl:    0 35px 90px rgba(0,0,0,0.60);
    --timero-shadow-lg:    0 24px 64px rgba(0,0,0,0.50);
    --timero-shadow-md:    0 14px 36px rgba(0,0,0,0.35);
 
    /* ── Radii ── */
    --timero-radius-xs:    6px;
    --timero-radius-sm:    10px;
    --timero-radius-md:    14px;
    --timero-radius-lg:    18px;
    --timero-radius-xl:    22px;
    --timero-radius-2xl:    28px;
 
    /* ── Typography ── */
    --timero-font-display:  'Barlow Condensed', 'Segoe UI', sans-serif;
    --timero-font-body:    'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --timero-font-mono:    'Share Tech Mono', monospace;
    --timero-font-racing:  'Bebas Neue', sans-serif; /* corrida ao 99 */
 
    /* ── Article layout ── */
    --timero-article-px:        32px;
    --timero-article-py-top:    28px;
    --timero-article-py-bottom: 34px;
}
 
 
/* ════════════════════════════════════════════════════════
  §3  GLOBAL BASE
════════════════════════════════════════════════════════ */
html, body {
    background:
        radial-gradient(circle at 15% 10%, rgba(0,212,255,0.045), transparent 22%),
        radial-gradient(circle at 85% 12%, rgba(143,99,255,0.045), transparent 22%),
        linear-gradient(180deg,
            var(--timero-bg-0)  0%,
            var(--timero-bg-1) 45%,
            var(--timero-bg-2) 100%) !important;
    color: var(--timero-text) !important;
    font-family: var(--timero-font-body) !important;
    font-size: 16px;
}
 
html, body,
.mw-body, #content,
.mw-parser-output,
.vector-body,
.vector-body p, .vector-body li,
.vector-body dd, .vector-body dt,
.vector-body td, .vector-body th,
.vector-body input, .vector-body select,
.vector-body textarea, .vector-body button {
    font-family: var(--timero-font-body) !important;
}
 
 
/* ════════════════════════════════════════════════════════
  §4  VECTOR CHROME — header, sidebar, footer dark
════════════════════════════════════════════════════════ */
.vector-sticky-header,
.vector-header,
#mw-page-base,
#mw-head,
#mw-navigation,
.vector-page-toolbar,
.vector-pinnable-header,
.vector-pinnable-element {
    background: linear-gradient(180deg, #07101e 0%, #0a1628 100%) !important;
    color: var(--timero-text) !important;
    border-color: var(--timero-border) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
 
.vector-header-container,
.vector-header-start,
.vector-header-end,
.vector-page-toolbar-container,
.vector-user-links,
.vector-user-menu,
#p-personal,
#p-vector-user-menu-overflow {
    background: transparent !important;
    box-shadow: none !important;
}
 
/* Header links */
.vector-header a,
.vector-sticky-header a,
.vector-page-toolbar a,
.vector-pinnable-header a,
#mw-head a,
#mw-navigation a {
    color: #c8ecff !important;
    text-decoration: none !important;
    transition: color .15s;
}
.vector-header a:hover,
.vector-sticky-header a:hover,
.vector-page-toolbar a:hover,
#mw-head a:hover,
#mw-navigation a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}
 
/* Nav tabs */
.vector-menu-tabs .vector-menu-content-list,
.vector-menu-tabs-legacy .vector-menu-content-list,
.vector-page-toolbar-container { background: transparent !important; }
 
.vector-menu-tabs li,
.vector-menu-tabs-legacy li {
    background: transparent !important;
    border-color: var(--timero-border) !important;
}
.vector-menu-tabs li a,
.vector-menu-tabs-legacy li a { color: #d8efff !important; }
.vector-menu-tabs .selected a,
.vector-menu-tabs-legacy .selected a {
    color: #ffffff !important;
    border-bottom: 2px solid var(--timero-cyan) !important;
}
 
/* Sidebar */
#mw-panel,
.vector-column-start,
.vector-sidebar,
.vector-sidebar-container,
.vector-menu,
.vector-menu-portal,
.vector-toc {
    background: linear-gradient(180deg, #07101e 0%, #081423 100%) !important;
    color: #dfe9f7 !important;
    border-color: rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
}
.vector-menu-portal, .portal {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    background: transparent !important;
}
.vector-menu-heading, #mw-panel h3, .portal h3 {
    color: #ffffff !important;
    font-family: var(--timero-font-display) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
}
#mw-panel a, .vector-column-start a,
.vector-sidebar a, .vector-menu a, .portal a {
    color: #bfe8ff !important;
    text-decoration: none !important;
    transition: color .15s;
}
#mw-panel a:hover, .vector-column-start a:hover,
.vector-sidebar a:hover, .vector-menu a:hover, .portal a:hover {
    color: #ffffff !important;
}
.vector-column-start, .vector-column-end { background: transparent !important; }
 
/* Logo */
.mw-wiki-logo,
.vector-header-container .mw-logo,
.vector-header-container .mw-logo-wordmark,
.vector-header-container .mw-logo-tagline {
    filter: drop-shadow(0 0 10px rgba(0,212,255,0.18));
}
 
/* Footer */
#footer, .mw-footer,
.vector-footer-container, footer {
    background: linear-gradient(180deg, #07101e 0%, #05080f 100%) !important;
    color: #a9bfd8 !important;
    border-top: 1px solid var(--timero-border) !important;
    margin-top: 40px;
}
#footer a, .mw-footer a,
.vector-footer a, .vector-footer-container a {
    color: #8fdfff !important;
    text-decoration: none !important;
}
#footer a:hover, .mw-footer a:hover,
.vector-footer a:hover, .vector-footer-container a:hover {
    color: #ffffff !important;
}
#footer ul, .mw-footer ul, .vector-footer ul { color: #a9bfd8 !important; }
 
 
/* ════════════════════════════════════════════════════════
  §5  MAIN PAGE — full-bleed, no shell
════════════════════════════════════════════════════════ */
body.page-Main_Page #content,
body.page-Main_Page .mw-body {
    padding: 0 !important; border: none !important;
    background: transparent !important;
    box-shadow: none !important; border-radius: 0 !important;
}
body.page-Main_Page #bodyContent,
body.page-Main_Page .mw-body-content,
body.page-Main_Page .mw-parser-output {
    background: transparent !important;
    padding: 0 !important; margin: 0 !important;
}
body.page-Main_Page #firstHeading,
body.page-Main_Page .mw-first-heading,
body.page-Main_Page #contentSub { display: none !important; }
 
 
/* ════════════════════════════════════════════════════════
  §6  CUSTOM GUIDE PAGES — full-bleed inside article shell
  All roots: leveling / mvp / farming / card / corrida
  Pattern: zero out inner padding so root fills the shell.
════════════════════════════════════════════════════════ */
 
/* — Page list — each root class and its body.page-* trigger — */
body.page-Beginner_Leveling_Guide,
body.page-MVP_Hunting_Guide,
body.page-Farming_Guide,
body.page-Card_System,
body.page-Corrida_ao_99 {
    /* nothing on body itself — handled per-section below */
}
 
/* article shell: keep the rounded panel but remove inner spacing */
body.page-Beginner_Leveling_Guide #bodyContent,
body.page-Beginner_Leveling_Guide .mw-body-content,
body.page-Beginner_Leveling_Guide .mw-parser-output,
body.page-MVP_Hunting_Guide #bodyContent,
body.page-MVP_Hunting_Guide .mw-body-content,
body.page-MVP_Hunting_Guide .mw-parser-output,
body.page-Farming_Guide #bodyContent,
body.page-Farming_Guide .mw-body-content,
body.page-Farming_Guide .mw-parser-output,
body.page-Card_System #bodyContent,
body.page-Card_System .mw-body-content,
body.page-Card_System .mw-parser-output,
body.page-Corrida_ao_99 #bodyContent,
body.page-Corrida_ao_99 .mw-body-content,
body.page-Corrida_ao_99 .mw-parser-output {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
 
/* Hide default h1 and subtitle on custom pages */
body.page-Beginner_Leveling_Guide #firstHeading,
body.page-Beginner_Leveling_Guide .mw-first-heading,
body.page-Beginner_Leveling_Guide #contentSub,
body.page-MVP_Hunting_Guide #firstHeading,
body.page-MVP_Hunting_Guide .mw-first-heading,
body.page-MVP_Hunting_Guide #contentSub,
body.page-Farming_Guide #firstHeading,
body.page-Farming_Guide .mw-first-heading,
body.page-Farming_Guide #contentSub,
body.page-Card_System #firstHeading,
body.page-Card_System .mw-first-heading,
body.page-Card_System #contentSub,
body.page-Corrida_ao_99 #firstHeading,
body.page-Corrida_ao_99 .mw-first-heading,
body.page-Corrida_ao_99 #contentSub { display: none !important; }
 
/* Article shell: keep rounded panel, hide overflow cleanly */
body.page-Beginner_Leveling_Guide #content,
body.page-Beginner_Leveling_Guide .mw-body,
body.page-MVP_Hunting_Guide #content,
body.page-MVP_Hunting_Guide .mw-body,
body.page-Farming_Guide #content,
body.page-Farming_Guide .mw-body,
body.page-Card_System #content,
body.page-Card_System .mw-body,
body.page-Corrida_ao_99 #content,
body.page-Corrida_ao_99 .mw-body { overflow: hidden !important; }
 
/* ── :has() fallback for future guide pages (modern browsers) ── */
body:not(.page-Main_Page):has(.timero-wiki-root) #bodyContent,
body:not(.page-Main_Page):has(.timero-wiki-root) .mw-body-content,
body:not(.page-Main_Page):has(.timero-wiki-root) .mw-parser-output,
body:not(.page-Main_Page):has(#leveling-guide-root) #bodyContent,
body:not(.page-Main_Page):has(#leveling-guide-root) .mw-body-content,
body:not(.page-Main_Page):has(#leveling-guide-root) .mw-parser-output,
body:not(.page-Main_Page):has(#mvp-guide-root) #bodyContent,
body:not(.page-Main_Page):has(#mvp-guide-root) .mw-body-content,
body:not(.page-Main_Page):has(#mvp-guide-root) .mw-parser-output,
body:not(.page-Main_Page):has(#farming-guide-root) #bodyContent,
body:not(.page-Main_Page):has(#farming-guide-root) .mw-body-content,
body:not(.page-Main_Page):has(#farming-guide-root) .mw-parser-output,
body:not(.page-Main_Page):has(#card-system-root) #bodyContent,
body:not(.page-Main_Page):has(#card-system-root) .mw-body-content,
body:not(.page-Main_Page):has(#card-system-root) .mw-parser-output {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
body:not(.page-Main_Page):has(.timero-wiki-root) #firstHeading,
body:not(.page-Main_Page):has(.timero-wiki-root) .mw-first-heading,
body:not(.page-Main_Page):has(.timero-wiki-root) #contentSub,
body:not(.page-Main_Page):has(#leveling-guide-root) #firstHeading,
body:not(.page-Main_Page):has(#leveling-guide-root) .mw-first-heading,
body:not(.page-Main_Page):has(#leveling-guide-root) #contentSub,
body:not(.page-Main_Page):has(#mvp-guide-root) #firstHeading,
body:not(.page-Main_Page):has(#mvp-guide-root) .mw-first-heading,
body:not(.page-Main_Page):has(#mvp-guide-root) #contentSub,
body:not(.page-Main_Page):has(#farming-guide-root) #firstHeading,
body:not(.page-Main_Page):has(#farming-guide-root) .mw-first-heading,
body:not(.page-Main_Page):has(#farming-guide-root) #contentSub,
body:not(.page-Main_Page):has(#card-system-root) #firstHeading,
body:not(.page-Main_Page):has(#card-system-root) .mw-first-heading,
body:not(.page-Main_Page):has(#card-system-root) #contentSub { display: none !important; }
 
 
/* ════════════════════════════════════════════════════════
  §7  GENERIC ARTICLE SHELL  (non-custom pages)
════════════════════════════════════════════════════════ */
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) #content,
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) .mw-body {
    background: linear-gradient(180deg, rgba(10,22,40,0.94) 0%, rgba(7,16,29,0.96) 100%) !important;
    color: var(--timero-text) !important;
    border: 1px solid var(--timero-border) !important;
    border-radius: var(--timero-radius-xl) !important;
    box-shadow: var(--timero-shadow-lg);
    margin-top: 16px !important;
    overflow: hidden;
    position: relative;
}
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) .mw-body::before,
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) #content::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--timero-cyan), var(--timero-purple), transparent);
    opacity: .88;
}
body:not(.page-Main_Page) #bodyContent,
body:not(.page-Main_Page) .mw-body-content,
body:not(.page-Main_Page) .mw-parser-output {
    color: var(--timero-text) !important;
    background: transparent !important;
}
 
 
/* ════════════════════════════════════════════════════════
  §8  TYPOGRAPHY
════════════════════════════════════════════════════════ */
.mw-body h1,.mw-body h2,.mw-body h3,
.mw-body h4,.mw-body h5,.mw-body h6,
#firstHeading,.mw-first-heading {
    font-family: var(--timero-font-display) !important;
    color: #ffffff !important;
    letter-spacing: .02em;
    line-height: 1;
}
body:not(.page-Main_Page) #firstHeading,
body:not(.page-Main_Page) .mw-first-heading {
    margin-bottom: 18px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--timero-cyan-line);
    text-shadow: 0 3px 12px rgba(0,0,0,.20);
}
body:not(.page-Main_Page) .mw-body h2,
body:not(.page-Main_Page) .mw-body h3 {
    border-bottom: 1px solid rgba(0,212,255,0.12);
    padding-bottom: 8px;
    margin-top: 28px;
    margin-bottom: 12px;
}
body:not(.page-Main_Page) .mw-body h2 { font-size: clamp(1.8rem,2.6vw,2.35rem); }
body:not(.page-Main_Page) .mw-body h3 { font-size: clamp(1.35rem,2.2vw,1.7rem); }
.mw-parser-output p { line-height: 1.8; color: var(--timero-text-soft); }
 
 
/* ════════════════════════════════════════════════════════
  §9  CONTENT FLOW  (no paragraph balloons)
════════════════════════════════════════════════════════ */
body:not(.page-Main_Page) .mw-parser-output > p,
body:not(.page-Main_Page) .mw-parser-output > ul,
body:not(.page-Main_Page) .mw-parser-output > ol,
body:not(.page-Main_Page) .mw-parser-output > table,
body:not(.page-Main_Page) .mw-parser-output > blockquote,
body:not(.page-Main_Page) .mw-parser-output > pre,
body:not(.page-Main_Page) .mw-parser-output > .toc,
body:not(.page-Main_Page) .mw-parser-output > #toc {
    background: transparent !important;
    border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; box-shadow: none !important;
}
body:not(.page-Main_Page) .mw-parser-output > * + * { margin-top: 14px; }
 
 
/* ════════════════════════════════════════════════════════
  §10  LINKS
════════════════════════════════════════════════════════ */
.mw-body a,
.mw-parser-output a,
.vector-body a {
    color: #66dfff !important;
    text-decoration: none;
    transition: color .18s, text-shadow .18s;
}
.mw-body a:hover,
.mw-parser-output a:hover,
.vector-body a:hover {
    color: #ffffff !important;
    text-decoration: none;
    text-shadow: 0 0 14px rgba(0,212,255,.32);
}
.mw-body a:visited,
.mw-parser-output a:visited { color: #9adfff !important; }
 
/* Suppress external link arrows inside guide roots */
.timero-wiki-root a.external::after,
.timero-wiki-root a.extiw::after,
#leveling-guide-root a.external::after,
#leveling-guide-root a.extiw::after,
#mvp-guide-root a.external::after,
#mvp-guide-root a.extiw::after,
#farming-guide-root a.external::after,
#farming-guide-root a.extiw::after,
#card-system-root a.external::after,
#card-system-root a.extiw::after { display: none !important; }
 
/* Guide-root links inherit colour from their styled containers */
.timero-wiki-root a,
#leveling-guide-root a,
#mvp-guide-root a,
#farming-guide-root a,
#card-system-root a {
    color: inherit !important;
    text-decoration: none !important;
}
.timero-wiki-root a:hover,
#leveling-guide-root a:hover,
#mvp-guide-root a:hover,
#farming-guide-root a:hover,
#card-system-root a:hover {
    color: inherit !important;
    text-decoration: none !important;
    filter: brightness(1.1);
}
 
 
/* ════════════════════════════════════════════════════════
  §11  LISTS / HR / BLOCKQUOTE / CODE  (article pages)
════════════════════════════════════════════════════════ */
.mw-parser-output ul,
.mw-parser-output ol { padding-left: 1.6rem; }
 
.mw-parser-output hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 28px 0;
}
.mw-parser-output blockquote {
    background: linear-gradient(180deg, rgba(0,212,255,0.05), rgba(255,255,255,.02));
    border-left: 3px solid rgba(0,212,255,.35);
    padding: 14px 16px;
    color: #d5e4f5;
    border-radius: 12px;
}
.mw-parser-output code,
.mw-parser-output pre,
.mw-code {
    background: rgba(0,0,0,.26) !important;
    color: #d8f2ff !important;
    border: 1px solid var(--timero-border);
    border-radius: 10px;
    font-family: var(--timero-font-mono) !important;
}
.mw-parser-output code { padding: 2px 6px; }
.mw-parser-output pre  { padding: 14px; overflow: auto; }
 
 
/* ════════════════════════════════════════════════════════
  §12  TOC
════════════════════════════════════════════════════════ */
#toc, .toc, .mw-parser-output .toc {
    background: linear-gradient(180deg, rgba(8,18,32,.95), rgba(10,22,40,.90)) !important;
    border: 1px solid var(--timero-cyan-line) !important;
    border-radius: var(--timero-radius-md);
    padding: 14px 16px;
    color: var(--timero-text);
    box-shadow: var(--timero-shadow-md);
}
#toc .toctitle, .toc .toctitle {
    color: #ffffff;
    font-family: var(--timero-font-display);
}
 
 
/* ════════════════════════════════════════════════════════
  §13  WIKITABLES
════════════════════════════════════════════════════════ */
.wikitable, table.wikitable {
    background: rgba(10,20,36,.94) !important;
    color: var(--timero-text) !important;
    border: 1px solid var(--timero-cyan-line) !important;
    border-collapse: collapse;
    border-radius: var(--timero-radius-md);
    overflow: hidden;
}
.wikitable th, table.wikitable th {
    background: linear-gradient(180deg, rgba(0,212,255,.12), rgba(0,212,255,.06)) !important;
    color: #ffffff !important;
    border: 1px solid var(--timero-border) !important;
    font-weight: 700;
    padding: 10px 12px;
    font-family: var(--timero-font-display) !important;
    letter-spacing: .04em;
}
.wikitable td, table.wikitable td {
    background: rgba(255,255,255,.02) !important;
    color: var(--timero-text-soft) !important;
    border: 1px solid var(--timero-border) !important;
    padding: 10px 12px;
}
.wikitable tr:nth-child(even) td,
table.wikitable tr:nth-child(even) td {
    background: rgba(255,255,255,.032) !important;
}
 
 
/* ════════════════════════════════════════════════════════
  §14  FORMS / INPUTS / BUTTONS
════════════════════════════════════════════════════════ */
input, select, textarea, button {
    font-family: var(--timero-font-body);
}
input[type="text"],input[type="search"],input[type="password"],
input[type="email"],input[type="number"],
select, textarea,
.vector-search-box-input,
.cdx-text-input__input,
#searchInput {
    background: rgba(12,18,28,.95) !important;
    color: #eef6ff !important;
    border: 1px solid var(--timero-border-mid) !important;
    border-radius: var(--timero-radius-sm) !important;
    box-shadow: none !important;
}
input:focus,select:focus,textarea:focus,
.vector-search-box-input:focus,
.cdx-text-input__input:focus,
#searchInput:focus {
    outline: none;
    border-color: var(--timero-cyan-line) !important;
    box-shadow: 0 0 0 3px var(--timero-cyan-soft) !important;
}
button,
input[type="submit"],
input[type="button"],
.mw-htmlform input[type="submit"] {
    background: linear-gradient(135deg, #00d4ff, #7a37ff) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--timero-radius-sm);
    font-weight: 700;
    transition: transform .2s, box-shadow .2s;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,212,255,.22);
}
 
 
/* ════════════════════════════════════════════════════════
  §15  CATEGORIES / THUMBS / MESSAGES
════════════════════════════════════════════════════════ */
.catlinks {
    background: rgba(10,20,36,.88) !important;
    border: 1px solid var(--timero-border) !important;
    border-radius: var(--timero-radius-sm);
    padding: 10px 12px;
}
.thumbinner, div.thumbinner, .infobox {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid var(--timero-border) !important;
    border-radius: var(--timero-radius-sm);
}
.messagebox,.ambox,.tmbox,.cmbox,.ombox {
    background: rgba(10,20,36,.90) !important;
    color: #eef6ff !important;
    border: 1px solid var(--timero-cyan-line) !important;
    border-radius: var(--timero-radius-sm);
}
 
 
/* ════════════════════════════════════════════════════════
  §16  KEYFRAMES — ALL PAGES UNIFIED
  Canonical set: every animation used anywhere in the wiki.
════════════════════════════════════════════════════════ */
 
/* ── Universal ── */
@keyframes timero-fade-up {
    from { opacity:0; transform:translateY(20px); filter:blur(3px); }
    to  { opacity:1; transform:none;            filter:none; }
}
@keyframes timero-shimmer {
    0%      { background-position: -200% center; }
    60%,100% { background-position:  200% center; }
}
@keyframes timero-blink {
    0%,100% { opacity:1; }
    50%    { opacity:.22; }
}
@keyframes timero-grid-drift {
    from { background-position: 0 0; }
    to  { background-position: 0 48px; }
}
@keyframes timero-pulse-ring {
    0%  { transform:scale(1);  opacity:.55; }
    100% { transform:scale(2.2); opacity:0; }
}
@keyframes timero-float {
    0%,100% { transform:translateY(0); }
    50%    { transform:translateY(-7px); }
}
@keyframes timero-halo-spin { to { transform:rotate(360deg); } }
@keyframes timero-spin      { to { transform:rotate(360deg); } }
 
/* ── Leveling Guide ── */
@keyframes guide-phase-in {
    from { opacity:0; transform:translateY(24px); }
    to  { opacity:1; transform:none; }
}
@keyframes guide-bar-fill {
    from { width:0; opacity:0; }
}
@keyframes guide-hero-gradient {
    0%,100% { background-position: 0  center; }
    50%    { background-position: 100% center; }
}
@keyframes guide-trophy-float {
    0%,100% { transform:translateY(0) scale(1); }
    50%    { transform:translateY(-6px) scale(1.05); }
}
@keyframes guide-dot-pulse {
    0%,100% { box-shadow: 0 0 12px rgba(0,255,136,.40); }
    50%    { box-shadow: 0 0 24px rgba(0,255,136,.65), 0 0 48px rgba(0,255,136,.18); }
}
 
/* ── MVP Guide ── */
@keyframes mvp-card-in {
    from { opacity:0; transform:translateY(20px); }
    to  { opacity:1; transform:none; }
}
@keyframes respawn-pulse {
    0%  { opacity:1; }
    100% { opacity:.35; }
}
@keyframes timer-blink {
    0%,100% { opacity:1; box-shadow:0 0 8px var(--timero-cyan); }
    50%    { opacity:.28; box-shadow:none; }
}
 
/* ── Farming Guide ── */
@keyframes ticker-scroll {
    0%  { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}
@keyframes method-in {
    from { opacity:0; transform:translateY(12px); }
    to  { opacity:1; transform:none; }
}
@keyframes route-in {
    from { opacity:0; transform:translateY(8px); }
    to  { opacity:1; transform:none; }
}
@keyframes fade-up {  /* alias — same as timero-fade-up */
    from { opacity:0; transform:translateY(20px); }
    to  { opacity:1; transform:none; }
}
 
/* ── Card System ── */
@keyframes card-row-in {
    from { opacity:0; transform:translateY(6px); }
    to  { opacity:1; transform:none; }
}
@keyframes detail-expand {
    from { opacity:0; transform:translateY(-5px); }
    to  { opacity:1; transform:none; }
}
@keyframes rune-spin { to { transform:rotate(360deg); } }
 
/* ── Corrida ao 99 / Podium ── */
@keyframes fireRise {
    0%,100% { transform:scaleY(1) translateY(0); }
    50%    { transform:scaleY(1.06) translateY(-3px); }
}
@keyframes podiumRise {
    from { opacity:0; transform:translateY(40px) scale(.95); }
    to  { opacity:1; transform:none; }
}
@keyframes goldShine {
    0%      { background-position:-200% center; }
    60%,100% { background-position: 200% center; }
}
@keyframes raceLines {
    from { background-position:0 0; }
    to  { background-position:0 80px; }
}
@keyframes countFlip {
    from { opacity:0; transform:translateY(-12px); }
    to  { opacity:1; transform:none; }
}
@keyframes haloSpin { to { transform:rotate(360deg); } }
@keyframes bgBreath {
    0%  { filter:brightness(1); }
    100% { filter:brightness(1.07) saturate(1.10); }
}
@keyframes nebulaShift {
    0%  { filter:brightness(1); }
    100% { filter:brightness(1.06) saturate(1.08); }
}
@keyframes revealUp {
    from { opacity:0; transform:translateY(18px); filter:blur(3px); }
    to  { opacity:1; transform:none; filter:none; }
}
 
 
/* ════════════════════════════════════════════════════════
  §17  COMPONENT TOKENS
  Injected as CSS vars on every guide root so inline styles
  that reference e.g. var(--c) resolve consistently.
════════════════════════════════════════════════════════ */
#leveling-guide-root,
#mvp-guide-root,
#farming-guide-root,
#card-system-root,
.timero-wiki-root {
    /* map short-hand vars to canonical tokens */
    --c:    var(--timero-cyan);
    --g:    var(--timero-gold);
    --ok:    var(--timero-green);
    --bad:  var(--timero-red);
    --txt:  var(--timero-text);
    --muted: var(--timero-text-muted);
    --void:  var(--timero-bg-0);
    --panel: var(--timero-panel);
    --ln:    var(--timero-border);
    --ln2:  var(--timero-border-mid);
}
 
 
/* ════════════════════════════════════════════════════════
  §18  GUIDE ROOT NORMALISATIONS  (all five roots)
  Applied uniformly: box-sizing, font, heading borders,
  code neutralisation, link inheritance, dimensions.
════════════════════════════════════════════════════════ */
.timero-wiki-root,
#leveling-guide-root,
#mvp-guide-root,
#farming-guide-root,
#card-system-root {
    display: block;
    margin: 0 !important;
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    font-family: var(--timero-font-body) !important;
    color: var(--timero-text);
}
 
.timero-wiki-root > div,
#leveling-guide-root > div,
#mvp-guide-root > div,
#farming-guide-root > div,
#card-system-root > div {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
 
/* headings — strip wiki borders, use display font */
.timero-wiki-root h1, .timero-wiki-root h2, .timero-wiki-root h3,
.timero-wiki-root h4, .timero-wiki-root h5, .timero-wiki-root h6,
#leveling-guide-root h1, #leveling-guide-root h2, #leveling-guide-root h3,
#leveling-guide-root h4, #leveling-guide-root h5, #leveling-guide-root h6,
#mvp-guide-root h1, #mvp-guide-root h2, #mvp-guide-root h3,
#mvp-guide-root h4, #mvp-guide-root h5, #mvp-guide-root h6,
#farming-guide-root h1, #farming-guide-root h2, #farming-guide-root h3,
#farming-guide-root h4, #farming-guide-root h5, #farming-guide-root h6,
#card-system-root h1, #card-system-root h2, #card-system-root h3,
#card-system-root h4, #card-system-root h5, #card-system-root h6 {
     font-family: var(--timero-font-display) !important;
    border: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    color: #fff !important;
}
 
/* code/pre — neutralise wiki styling completely */
.timero-wiki-root pre, .timero-wiki-root code, .timero-wiki-root .mw-code,
#leveling-guide-root pre, #leveling-guide-root code, #leveling-guide-root .mw-code,
#mvp-guide-root pre, #mvp-guide-root code, #mvp-guide-root .mw-code,
#farming-guide-root pre, #farming-guide-root code, #farming-guide-root .mw-code,
#card-system-root pre, #card-system-root code, #card-system-root .mw-code {
    display: inline !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
    overflow: visible !important;
}
 
 
/* ════════════════════════════════════════════════════════
  §19  LEVELING GUIDE  (#leveling-guide-root)
  Accent: green #00ff88. Phase nav, bars, checklists.
════════════════════════════════════════════════════════ */
#leveling-guide-root {
    background: #05080f;
}
 
/* Phase navigator — ensure it sits above the article shell header */
#phase-nav {
    z-index: 9800 !important;
    transition: background .15s;
}
#phase-nav a.pnav-item {
    transition: background .15s, color .15s;
    border-radius: 8px;
    margin: 0 4px;
    text-decoration: none !important;
}
#phase-nav a.pnav-item:hover { background: rgba(0,255,136,.09) !important; }
 
/* Class filter bar — sticky above content */
#leveling-guide-root > div:nth-child(4) {
    position: sticky;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
 
/* Phase blocks */
.phase-block {
    animation: guide-phase-in .65s cubic-bezier(.22,1,.36,1) both;
}
#phase-1 { animation-delay:.05s; }
#phase-2 { animation-delay:.12s; }
#phase-3 { animation-delay:.19s; }
#phase-4 { animation-delay:.26s; }
#phase-5 { animation-delay:.33s; }
 
/* Class filter buttons */
.cf-btn {
    transition: opacity .18s, transform .15s, background .18s;
    cursor: pointer;
    user-select: none;
}
.cf-btn:hover { transform: translateY(-2px); opacity: 1 !important; }
 
/* Monster entries */
.mob-entry {
    transition: border-color .18s, box-shadow .18s;
    cursor: pointer;
}
.mob-entry:hover { box-shadow: 0 4px 16px rgba(0,0,0,.36); }
 
/* Checklist items */
.check-item {
    transition: background .15s, border-color .15s, transform .15s;
    user-select: none;
    cursor: pointer;
}
.check-item:hover {
    background: rgba(0,255,136,.04) !important;
    border-color: rgba(0,255,136,.20) !important;
    transform: translateX(3px);
}
.check-item[data-checked="1"] {
    background: rgba(0,255,136,.04) !important;
    border-color: rgba(0,255,136,.16) !important;
}
 
/* Accordion */
.accord-head { transition: background .15s; cursor: pointer; }
.accord-head:hover { background: rgba(255,255,255,.068) !important; }
.accord-icon { transition: transform .22s cubic-bezier(.22,1,.36,1); }
 
/* Efficiency / progress bars (leveling progress strip) */
.eff-bar { transition: width .8s cubic-bezier(.22,1,.36,1); }
 
/* Guide bar-fill: animate on scroll via IntersectionObserver (JS handles it),
  this just ensures the CSS transition is present as fallback */
[style*="animation:guide-bar-fill"] {
    animation-play-state: paused;
}
 
/* Hero title shimmer */
#leveling-guide-root [style*="background:linear-gradient(90deg,#00ff88,#00d4ff)"] {
    background-size: 200% auto;
    animation: guide-hero-gradient 4s ease infinite;
}
 
/* Trophy float */
[style*="font-size:2.5rem;margin-bottom:8px"] {
    display: inline-block;
    animation: guide-trophy-float 3s ease-in-out infinite;
}
 
 
/* ════════════════════════════════════════════════════════
  §20  MVP HUNTING GUIDE  (#mvp-guide-root)
  Accent: crimson #ff3d5a + fire #ff6b00.
════════════════════════════════════════════════════════ */
#mvp-guide-root {
    background: #04060d;
}
 
/* Tier filter bar — sticky with high z-index */
#tier-filter-bar {
    position: sticky;
    top: 0;
    z-index: 300;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
 
/* Tier/sort buttons */
.tf-btn, .sort-btn {
    transition: opacity .18s, background .18s, transform .15s;
    cursor: pointer;
}
.tf-btn:hover, .sort-btn:hover { transform: translateY(-2px); }
 
/* Boss cards */
.boss-card {
    animation: mvp-card-in .5s ease both;
    transition: box-shadow .25s;
}
.boss-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.60) !important; }
 
/* Boss dossier expand */
.boss-dossier { animation: detail-expand .3s ease both; }
 
/* Boss chevron */
.boss-chevron {
    transition: transform .22s cubic-bezier(.22,1,.36,1);
    display: inline-block;
}
 
/* Respawn pulse bar */
[style*="animation:respawn-pulse"] {
    animation: respawn-pulse 2s ease-in-out infinite alternate;
}
 
/* Timer blink dot */
[style*="animation:timer-blink"] {
    animation: timer-blink 1.2s ease infinite;
}
 
/* Class MVP accordion */
.class-mvp-row { cursor: pointer; }
.class-chevron {
    transition: transform .22s cubic-bezier(.22,1,.36,1);
    display: inline-block;
}
 
/* Manual timer input fields */
#manual-mvp-name:focus,
#manual-mvp-respawn:focus {
    border-color: rgba(0,212,255,.38) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.10) !important;
    outline: none;
}
 
 
/* ════════════════════════════════════════════════════════
  §21  FARMING GUIDE  (#farming-guide-root)
  Accent: gold #f9c500. Ticker, method tabs, routes, calc.
════════════════════════════════════════════════════════ */
#farming-guide-root {
    background: #030508;
}
 
/* Market ticker */
.ticker-track {
    animation: ticker-scroll 38s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
 
/* Method tab hover */
#methods-section button {
    transition: background .18s, color .18s, font-weight .1s;
}
 
/* Route pills */
.route-pill {
    transition: transform .18s, box-shadow .18s, opacity .18s;
    cursor: pointer;
}
.route-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.40); }
 
/* Route detail card */
.route-detail { animation: route-in .3s ease both; }
 
/* Method panel */
.method-panel { animation: method-in .3s ease both; }
 
/* Efficiency bars */
#farming-guide-root .eff-bar {
    transition: width .8s cubic-bezier(.22,1,.36,1);
}
 
/* Loadout items */
.loadout-item {
    transition: background .15s, border-color .15s, transform .15s;
    cursor: pointer;
}
.loadout-item:hover { transform: translateX(3px); }
 
/* Calculator inputs */
#calc-method:focus {
    border-color: rgba(0,212,255,.38) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.10) !important;
    outline: none;
}
#card-search:focus {
    border-color: rgba(124,106,255,.40) !important;
    box-shadow: 0 0 0 3px rgba(124,106,255,.10) !important;
    outline: none;
}
 
/* Related guide cards */
#farming-guide-root [style*="padding:20px 18px;border-radius:14px"],
#card-system-root [style*="padding:18px 16px;border-radius:12px"] {
    transition: transform .2s ease, box-shadow .2s ease;
}
#farming-guide-root [style*="padding:20px 18px;border-radius:14px"]:hover,
#card-system-root [style*="padding:18px 16px;border-radius:12px"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,.50);
}
 
 
/* ════════════════════════════════════════════════════════
  §22  CARD SYSTEM  (#card-system-root)
  Accent: arcane violet #7c6aff + collection gold #f9c500.
════════════════════════════════════════════════════════ */
#card-system-root {
    background: #030408;
}
 
/* Live search */
#card-search {
    transition: border-color .18s, box-shadow .18s;
}
 
/* Category tabs */
#card-db-section button {
    transition: background .16s, color .16s;
}
 
/* Table rows */
.card-row {
    animation: card-row-in .25s ease both;
    transition: background .14s;
    cursor: pointer;
}
.card-row:hover { background: rgba(124,106,255,.07) !important; }
 
/* Sort indicators */
.th-cell.sortable {
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
.th-cell.sortable:hover { color: #9d8fff !important; }
.sort-ind { transition: color .15s; }
 
/* Collection group cards */
.cg-card {
    transition: box-shadow .2s;
    cursor: pointer;
}
.cg-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.45); }
.cg-chevron {
    transition: transform .22s cubic-bezier(.22,1,.36,1);
    display: inline-block;
}
 
/* FAQ entries */
.faq-entry > div:first-child {
    cursor: pointer;
    transition: background .15s;
}
.faq-entry > div:first-child:hover { background: rgba(255,255,255,.06) !important; }
.faq-chev {
    transition: transform .22s ease;
    display: inline-block;
}
 
/* Rune spin ornament */
[style*="animation:rune-spin"] {
    animation: rune-spin 18s linear infinite;
}
 
 
/* ════════════════════════════════════════════════════════
  §23  CORRIDA AO 99  (body.page-Corrida_ao_99)
  Accent: fire #ff6b00 + gold podium. Bebas Neue font.
════════════════════════════════════════════════════════ */
body.page-Corrida_ao_99 .page-wrap h1,
body.page-Corrida_ao_99 .page-wrap h2,
body.page-Corrida_ao_99 .page-wrap h3 {
    font-family: 'Bebas Neue', var(--timero-font-display) !important;
}
 
/* Background animation */
[style*="animation:bgBreath"],
[style*="animation:nebulaShift"] {
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
[style*="animation:raceLines"] {
    animation: raceLines 1.5s linear infinite;
}
[style*="animation:haloSpin"] {
    animation: haloSpin 58s linear infinite;
}
 
/* Podium animations */
.podium-slot { animation: podiumRise .8s cubic-bezier(.22,1,.36,1) both; }
.podium-slot.rank-1 { animation-delay: .10s; }
.podium-slot.rank-2 { animation-delay: .25s; }
.podium-slot.rank-3 { animation-delay: .40s; }
 
/* Podium hover sweep */
.podium-block-inner {
    transition: box-shadow .25s;
    overflow: hidden;
}
.podium-slot:hover .podium-block-inner {
    box-shadow: 0 0 20px rgba(249,197,0,.22);
}
 
/* Prize badge shimmer */
.prize-badge { position: relative; overflow: hidden; }
.prize-badge::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
    transform: translateX(-100%);
}
.prize-badge:hover::before {
    transform: translateX(200%);
    transition: transform .55s ease;
}
 
/* Countdown digit flip */
[style*="animation:countFlip"] { animation: countFlip .2s ease both; }
 
/* Fire button hover */
.btn-fire { transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s; }
.btn-fire:hover { transform: translateY(-3px); }
 
/* Leaderboard rows */
.lb-row { transition: background .16s; }
 
/* FAQ accordion (Corrida uses same .faq-item pattern as leveling) */
.faq-item > .faq-q { cursor: pointer; transition: background .15s; }
.faq-item > .faq-q i { transition: transform .2s; }
.faq-item.open .faq-q i { transform: rotate(180deg); }
 
 
/* ════════════════════════════════════════════════════════
  §24  MAIN PAGE COMPONENT CLASSES
  All .timero-* and .timero-db2-* preserved exactly.
════════════════════════════════════════════════════════ */
 
/* ── Guide card section ── */
.timero-guides-section {
    width: min(1180px, calc(100% - 42px));
    margin: 0 auto;
    padding: 72px 0 36px;
}
.timero-guides-head { text-align: center; margin-bottom: 38px; }
.timero-guides-kicker {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 0 18px; border-radius: 999px;
    border: 1px solid rgba(121,82,255,.35);
    background: rgba(62,32,110,.22);
    color: #9f73ff;
    font-size: .68rem; font-weight: 800; letter-spacing: .22em;
    text-transform: uppercase; margin-bottom: 18px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}
.timero-guides-head h2 {
    margin: 0 0 10px;
    font-family: var(--timero-font-display) !important;
    font-size: clamp(2.2rem,4vw,3.5rem);
    line-height: 1; font-weight: 900; color: #fff !important;
    letter-spacing: -.02em;
    border: none !important;
    text-shadow: 0 3px 12px rgba(0,0,0,.22);
}
.timero-guides-head p { margin:0; font-size:1rem; color:rgba(108,152,214,.88); letter-spacing:.02em; }
 
.timero-guides-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
.timero-guide-card {
    border-radius: 22px; overflow: hidden;
    background: linear-gradient(180deg,#07111d 0%,#050b14 100%);
    border: 1px solid rgba(0,212,255,.12);
    box-shadow: 0 20px 44px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.02) inset;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.timero-guide-card:hover { transform: translateY(-4px); }
.timero-guide-top {
    min-height: 122px; padding: 26px 26px 20px;
    border-bottom: 1px solid rgba(255,255,255,.06); position: relative;
}
.timero-guide-bottom { padding: 20px 22px 22px; background: rgba(3,9,16,.72); }
.timero-guide-icon { font-size:1.85rem; margin-bottom:12px; line-height:1; }
.timero-guide-label { font-size:.68rem; font-weight:900; letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px; }
.timero-guide-title { font-family:var(--timero-font-display); font-size:1.75rem; line-height:1; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.2); }
.timero-guide-desc { color:rgba(103,146,208,.9); font-size:.98rem; line-height:1.85; margin-bottom:18px; }
.timero-guide-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.timero-guide-tags span {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:28px; padding:0 12px; border-radius:999px;
    font-size:.78rem; font-weight:800; letter-spacing:.02em;
    border:1px solid currentColor; background:rgba(255,255,255,.02);
}
.timero-guide-link a {
    font-family:var(--timero-font-display);
    font-size:1.02rem; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; text-decoration:none !important;
}
.timero-guide-link a:hover { filter:brightness(1.08); text-decoration:none !important; }
 
/* Guide card colour variants */
.timero-guide-card-green {
    border-color:rgba(0,199,122,.22);
    box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 24px rgba(0,199,122,.06);
}
.timero-guide-card-green .timero-guide-top {
    background:linear-gradient(135deg,rgba(0,112,77,.34) 0%,rgba(0,61,58,.22) 100%);
    border-bottom-color:rgba(0,199,122,.18);
}
.timero-guide-card-green .timero-guide-icon,
.timero-guide-card-green .timero-guide-label,
.timero-guide-card-green .timero-guide-link a,
.timero-guide-card-green .timero-guide-tags span { color:#00ff88 !important; }
.timero-guide-card-green .timero-guide-tags span { background:rgba(0,255,136,.08); border-color:rgba(0,255,136,.28); }
 
.timero-guide-card-red {
    border-color:rgba(255,47,92,.22);
    box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 24px rgba(255,47,92,.05);
}
.timero-guide-card-red .timero-guide-top {
    background:linear-gradient(135deg,rgba(70,17,40,.58) 0%,rgba(34,20,70,.30) 100%);
    border-bottom-color:rgba(255,47,92,.16);
}
.timero-guide-card-red .timero-guide-icon,
.timero-guide-card-red .timero-guide-label,
.timero-guide-card-red .timero-guide-link a,
.timero-guide-card-red .timero-guide-tags span { color:#ff355e !important; }
.timero-guide-card-red .timero-guide-tags span { background:rgba(255,53,94,.08); border-color:rgba(255,53,94,.26); }
 
.timero-guide-card-gold {
    border-color:rgba(255,176,32,.22);
    box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 24px rgba(255,176,32,.05);
}
.timero-guide-card-gold .timero-guide-top {
    background:linear-gradient(135deg,rgba(70,52,17,.42) 0%,rgba(36,36,36,.18) 100%);
    border-bottom-color:rgba(255,176,32,.16);
}
.timero-guide-card-gold .timero-guide-icon,
.timero-guide-card-gold .timero-guide-label,
.timero-guide-card-gold .timero-guide-link a,
.timero-guide-card-gold .timero-guide-tags span { color:#ffb020 !important; }
.timero-guide-card-gold .timero-guide-tags span { background:rgba(255,176,32,.08); border-color:rgba(255,176,32,.24); }
 
/* ── Database section (main page) ── */
.timero-db2-section {
    background:linear-gradient(180deg,#07101e 0%,#05080f 100%);
    padding:72px 42px;
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.timero-db2-head {
    width:min(1220px,calc(100% - 40px));
    margin:0 auto 28px; text-align:center;
}
.timero-db2-kicker {
    display:inline-flex; align-items:center;
    min-height:32px; padding:0 16px; border-radius:999px;
    background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.18);
    color:#00d4ff; font-size:.68rem; font-weight:800;
    letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px;
}
.timero-db2-head h2 {
    margin:0 0 10px; color:#fff !important;
    font-family:var(--timero-font-display) !important;
    font-size:clamp(2rem,3.8vw,3rem); font-weight:900; line-height:1;
    border:none !important;
}
.timero-db2-head p { margin:0; color:rgba(130,165,215,.82); font-size:1rem; line-height:1.8; }
.timero-db2-grid {
    width:min(1220px,calc(100% - 40px));
    margin:0 auto;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.timero-db2-quest-row {
    width:min(1220px,calc(100% - 40px));
    margin:16px auto 0; justify-content:center; align-items:center;
    display:inline-flex;
}
.timero-db2-quest { max-width:calc((100% - 48px) / 4); }
.timero-db2-card {
    border-radius:22px; overflow:hidden;
    background:linear-gradient(180deg,rgba(8,18,32,.96),rgba(5,10,18,.98));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;
}
.timero-db2-card:hover { transform:translateY(-4px); filter:brightness(1.03); }
.timero-db2-card > a { display:block; text-decoration:none !important; color:inherit !important; }
.timero-db2-link {
    min-height:124px; padding:20px 22px;
    display:flex; align-items:center; gap:16px;
    text-decoration:none !important; color:inherit !important;
}
.timero-db2-icon {
    width:56px; height:56px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.45rem; flex:0 0 auto;
    background:rgba(255,255,255,.04);
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
.timero-db2-copy { display:flex; flex-direction:column; min-width:0; }
.timero-db2-title {
    color:#fff; font-family:var(--timero-font-display);
    font-size:1.6rem; font-weight:800; line-height:1; margin-bottom:6px;
}
.timero-db2-sub { font-size:.84rem; font-weight:700; letter-spacing:.04em; line-height:1.4; }
 
/* DB card colour variants */
.timero-db2-red    { border-color:rgba(255,53,94,.24);  box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(255,53,94,.06); }
.timero-db2-red    .timero-db2-icon { color:#ff6a8a; } .timero-db2-red    .timero-db2-sub { color:#ff355e; }
.timero-db2-gold  { border-color:rgba(255,176,32,.24);  box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(255,176,32,.06); }
.timero-db2-gold  .timero-db2-icon { color:#dff6ff; }  .timero-db2-gold  .timero-db2-sub { color:#ffb020; }
.timero-db2-cyan  { border-color:rgba(0,212,255,.24);  box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(0,212,255,.06); }
.timero-db2-cyan  .timero-db2-icon { color:#63e9ff; }  .timero-db2-cyan  .timero-db2-sub { color:#00d4ff; }
.timero-db2-purple { border-color:rgba(143,99,255,.24);  box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(143,99,255,.06); }
.timero-db2-purple .timero-db2-icon { color:#ffe45f; }  .timero-db2-purple .timero-db2-sub { color:#ab84ff; }
.timero-db2-green  { border-color:rgba(0,255,136,.24);  box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(0,255,136,.06); }
.timero-db2-green  .timero-db2-icon { color:#f2dfcb; }  .timero-db2-green  .timero-db2-sub { color:#00ff88; }
 
/* Nav cards */
.timero-nav-card { cursor:pointer; }
.timero-nav-card:hover { transform:translateY(-4px); box-shadow:0 22px 48px rgba(0,0,0,.28) !important; filter:brightness(1.04); }
 
/* ── Timero card (general) ── */
.timero-card {
    background:linear-gradient(160deg,rgba(10,20,36,.9),rgba(6,12,24,.95));
    border:1px solid rgba(0,212,255,.16);
    border-radius:var(--timero-radius-lg);
    padding:28px 22px;
    position:relative; overflow:hidden;
    transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
.timero-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,212,255,.18); }
 
/* Timero hero */
.timero-hero {
    position:relative;
    background:linear-gradient(160deg,#02040a 0%,#071020 40%,#0a1628 70%,#06101e 100%);
    padding:64px 48px 52px; text-align:center; overflow:hidden;
    border-bottom:1px solid rgba(0,212,255,.15);
    animation:timero-fade-up .8s cubic-bezier(.22,1,.36,1) both;
}
.timero-hero > div:first-child { animation:timero-grid-drift 8s linear infinite; }
 
/* Grid helpers */
.timero-grid { display:grid; gap:16px; }
.timero-grid-2 { grid-template-columns:repeat(2,1fr); }
.timero-grid-3 { grid-template-columns:repeat(3,1fr); }
.timero-grid-4 { grid-template-columns:repeat(4,1fr); }
.timero-section { background:#07101e; padding:56px 48px; border-bottom:1px solid rgba(255,255,255,.06); }
 
/* Timero button */
.timero-btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px; padding:12px 18px; border-radius:var(--timero-radius-sm);
    background:linear-gradient(135deg,#00d4ff,#7a37ff);
    color:#fff !important; text-decoration:none !important;
    font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    box-shadow:0 12px 36px rgba(0,212,255,.25);
    transition:transform .2s,box-shadow .2s;
}
.timero-btn:hover { transform:translateY(-3px); box-shadow:0 18px 50px rgba(0,212,255,.35); text-decoration:none !important; color:#fff !important; }
 
 
/* ════════════════════════════════════════════════════════
  §25  RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
    .timero-db2-grid { grid-template-columns:repeat(2,1fr); }
    .timero-db2-quest { max-width:100%; }
}
@media (max-width: 980px) {
    .timero-guides-grid { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
    /* Leveling guide: hide fixed phase nav */
    #phase-nav { display:none !important; }
 
    .timero-grid-4 { grid-template-columns:repeat(2,1fr); }
    .timero-grid-3 { grid-template-columns:repeat(2,1fr); }
    .timero-grid-2 { grid-template-columns:1fr; }
 
    /* Boss grid: 1 column */
    #boss-grid { grid-template-columns:1fr !important; }
 
    /* Table header + rows: collapse to 3 cols on MVP */
    #tier-filter-bar { padding:12px 16px !important; }
 
    /* Farming: 1-col grids */
    #methods-section [style*="grid-template-columns:1fr 1fr"],
    #routes-section  [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns:1fr !important;
    }
 
    /* Card system table: simplified columns on tablet */
    #table-header,
    .card-row {
        grid-template-columns:60px 1fr 90px !important;
    }
    #table-header > div:nth-child(4),
    #table-header > div:nth-child(5),
    .card-row > div:nth-child(4),
    .card-row > div:nth-child(5) { display:none !important; }
 
    /* Corrida: podium simplified */
    .podium-name { font-size:1.1rem; }
    .podium-medal { font-size:2.5rem; }
}
 
@media (max-width: 640px) {
    /* Global padding normalisation for guide pages */
    #leveling-guide-root  [style*="padding:52px 80px"],
    #leveling-guide-root  [style*="padding:56px 80px"],
    #mvp-guide-root      [style*="padding:52px 64px"],
    #mvp-guide-root      [style*="padding:56px 64px"],
    #mvp-guide-root      [style*="padding:60px 64px"],
    #farming-guide-root  [style*="padding:52px 64px"],
    #farming-guide-root  [style*="padding:48px 64px"],
    #farming-guide-root  [style*="padding:28px 64px"],
    #card-system-root    [style*="padding:52px 64px"],
    #card-system-root    [style*="padding:48px 64px"],
    #card-system-root    [style*="padding:56px 64px"] {
        padding-left:  18px !important;
        padding-right: 18px !important;
    }
 
    /* Global grids → 1 col */
    .timero-grid-4,
    .timero-grid-3,
    .timero-grid-2 { grid-template-columns:1fr; }
 
    .timero-db2-grid { grid-template-columns:1fr; }
    .timero-db2-link { min-height:96px; padding:16px 18px; }
    .timero-db2-title { font-size:1.65rem; }
    .timero-db2-sub { font-size:.80rem; }
 
    /* Corrida */
    .hero-race-num { font-size:clamp(4rem,22vw,8rem) !important; }
    .prizes-grid { grid-template-columns:1fr !important; }
    .countdown-units { gap:10px; }
    .cd-num { font-size:2.4rem !important; }
 
    /* Farming methods metrics grid */
    [style*="grid-template-columns:1fr 1fr"]:not(#farming-guide-root [style*="gap:16px"]) {
        /* Careful not to collapse all 2-col grids — only safe targets */
    }
 
    /* Card system table: further collapse */
    #table-header,
    .card-row { grid-template-columns:56px 1fr !important; }
    #table-header > div:nth-child(3),
    .card-row > div:nth-child(3) { display:none !important; }
 
    /* Card detail panel: stack columns */
    .card-row + div [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns:1fr !important;
    }
 
    /* Loadout grid */
    #loadout-items { grid-template-columns:1fr 1fr !important; }
 
    /* Hero CTAs */
    .timero-hero [style*="display:flex;gap:12px;justify-content:center"] {
        flex-direction:column !important; align-items:center !important;
    }
}
 
 
/* ════════════════════════════════════════════════════════
  §26  PRINT
════════════════════════════════════════════════════════ */
@media print {
    .timero-hero [style*="position:absolute"],
    #phase-nav,
    #tier-filter-bar,
    .ticker-track,
    .bg-nebula,.bg-track,.bg-grid,.bg-scan,
    .bg-halo,.db-bg,.db-grid,.db-scan,
    #bgCanvas,#dbCanvas { display:none !important; }
 
    /* Force readable light colours */
    html,body { background:#fff !important; color:#111 !important; }
    .mw-body,#content { background:#fff !important; color:#111 !important; border:none !important; }
 
    /* Ensure accordion / dossier content is visible */
    .accord-body,
    .boss-dossier,
    .method-panel,
    .route-detail,
    .faq-body,
    .cg-detail,
    .class-mvp-detail { display:block !important; max-height:none !important; }
 
    /* Navigation links unnecessary in print */
    #footer, .catlinks { display:none; }
}
/* TimeRO monster chips */
.monster-link-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    vertical-align: middle !important;
    overflow: visible !important;
}
 
.monster-link-chip .monster-gif-wrap {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    line-height: 0 !important;
}
 
.monster-link-chip .monster-gif-wrap img {
    display: block !important;
    max-width: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    vertical-align: middle !important;
    image-rendering: auto !important;
}
 
.monster-link-chip .monster-name-wrap,
.monster-link-chip .monster-name-wrap a {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.1 !important;
    color: #73d9ff !important;
    text-decoration: none !important;
}
 
/* Daily quest table alignment */
.wikitable td,
.wikitable th {
    vertical-align: middle !important;
}
 
.wikitable td .monster-link-chip {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
/* Daily Quest table layout */
.daily-task-cell,
.daily-reward-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-height: 70px !important;
}
 
.daily-task-label {
    color: #d8e8ff !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}
 
.daily-reward-cell {
    justify-content: center !important;
}
 
.daily-reward-extra {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 13px !important;
    border-radius: 12px !important;
     background: rgba(0,0,0,0.30) !important;
    border: 1px solid rgba(120,190,255,0.18) !important;
    color: #d8f3ff !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}
 
.daily-reward-plus {
    color: #73d9ff !important;
    font-weight: 900 !important;
}
 
/* Keep table cells vertically centered */
.wikitable td,
.wikitable th {
    vertical-align: middle !important;
}
 
/* Monster chip inside daily tables */
.wikitable .monster-link-chip {
    margin: 0 !important;
}
}

Latest revision as of 21:05, 28 April 2026

/* ═══════════════════════════════════════════════════════════════════════
   TimeRO Wiki — Unified Design System  v2.0
   ───────────────────────────────────────────────────────────────────────
   Pages covered:
     Main_Page              → .timero-wiki-root    (full-bleed, no shell)
     Beginner_Leveling_Guide→ #leveling-guide-root (full-bleed)
     MVP_Hunting_Guide      → #mvp-guide-root      (full-bleed)
     Farming_Guide          → #farming-guide-root  (full-bleed)
     Card_System            → #card-system-root    (full-bleed)
     Corrida_ao_99          → (inline sections,    full-bleed)
     All other wiki pages   → dark article shell   (auto)

   Sections:
     1  Font import
     2  Design tokens (harmonises inline vars across all pages)
     3  Global base — html, body, font
     4  Vector chrome — header, sidebar, footer dark
     5  Main Page overrides
     6  Custom guide page overrides (full-bleed shell)
     7  Generic article shell (non-custom pages)
     8  Typography
     9  Content flow — no paragraph balloons
    10  Links
    11  Lists / HR / blockquote / code
    12  TOC
    13  Wikitables
    14  Forms / inputs / buttons
    15  Categories / thumbs / messages
    16  ── KEYFRAMES — all pages unified ──
    17  Component tokens shared by guide roots
    18  Guide root normalisations (headings, code, links)
    19  Leveling Guide (leveling-guide-root)
    20  MVP Hunting Guide (mvp-guide-root)
    21  Farming Guide (farming-guide-root)
    22  Card System (card-system-root)
    23  Corrida ao 99 (corrida99 inline page)
    24  Main Page component classes
    25  Responsive
    26  Print
═══════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════
   §1  FONT IMPORT
════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,700;1,800&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');


/* ════════════════════════════════════════════════════════
   §2  DESIGN TOKENS
   Single source of truth. Guide pages reference these via
   CSS variables so inline --c / --ok / --bad etc. resolve
   to the same hues. Values reconciled across all pages.
════════════════════════════════════════════════════════ */
:root {
    /* ── Backgrounds ── */
    --timero-bg-0:          #030508;        /* deepest void */
    --timero-bg-1:          #050810;        /* body base */
    --timero-bg-2:          #07101e;        /* section alternates */
    --timero-bg-3:          #0a1628;        /* raised panels */
    --timero-panel:         rgba(8,18,32,0.94);
    --timero-panel-2:       rgba(10,22,40,0.96);
    --timero-panel-soft:    rgba(255,255,255,0.03);
    --timero-glass:         rgba(6,12,22,0.88);

    /* ── Text ── */
    --timero-text:          #e8eef8;
    --timero-text-soft:     #d2dded;
    --timero-text-muted:    #7ea0c8;
    --timero-text-dim:      #3d5570;

    /* ── Accent colours (reconciled with guide inline vars) ── */
    /* Cyan  — guide pages call this --c */
    --timero-cyan:          #00d4ff;
    --timero-cyan-soft:     rgba(0,212,255,0.10);
    --timero-cyan-line:     rgba(0,212,255,0.20);
    --timero-cyan-glow:     rgba(0,212,255,0.28);

    /* Gold  — guide pages call this --g / --gold (farming = #f9c500) */
    --timero-gold:          #f9a826;        /* standard gold */
    --timero-gold-bright:   #f9c500;        /* farming/zeny gold */
    --timero-gold-soft:     rgba(249,168,38,0.10);
    --timero-gold-line:     rgba(249,168,38,0.22);

    /* Green — guide pages call this --ok */
    --timero-green:         #00ff88;
    --timero-green-soft:    rgba(0,255,136,0.09);
    --timero-green-line:    rgba(0,255,136,0.20);

    /* Red   — guide pages call this --bad */
    --timero-red:           #ff3d5a;
    --timero-red-soft:      rgba(255,61,90,0.09);
    --timero-red-line:      rgba(255,61,90,0.22);

    /* Purple — item DB (#b06cff) / card system (#7c6aff) / global (#8f63ff) */
    --timero-purple:        #8f63ff;        /* global */
    --timero-purple-item:   #b06cff;        /* item database */
    --timero-purple-arcane: #7c6aff;        /* card system */
    --timero-purple-soft:   rgba(143,99,255,0.10);
    --timero-purple-line:   rgba(143,99,255,0.22);

    /* Fire  — corrida ao 99 / MVP guide */
    --timero-fire:          #ff6b00;
    --timero-fire2:         #ff9500;
    --timero-fire-soft:     rgba(255,107,0,0.08);
    --timero-fire-line:     rgba(255,107,0,0.22);

    /* Blue  — misc accent */
    --timero-blue:          #4c89ff;
    --timero-blue-soft:     rgba(76,137,255,0.10);

    /* Podium metals */
    --timero-gold-medal:    #f9c500;
    --timero-silver:        #c8d8e8;
    --timero-bronze:        #cd7f32;

    /* ── Borders ── */
    --timero-border:        rgba(255,255,255,0.07);
    --timero-border-mid:    rgba(255,255,255,0.11);
    --timero-border-bright: rgba(255,255,255,0.16);

    /* ── Shadows ── */
    --timero-shadow-xl:     0 35px 90px rgba(0,0,0,0.60);
    --timero-shadow-lg:     0 24px 64px rgba(0,0,0,0.50);
    --timero-shadow-md:     0 14px 36px rgba(0,0,0,0.35);

    /* ── Radii ── */
    --timero-radius-xs:     6px;
    --timero-radius-sm:     10px;
    --timero-radius-md:     14px;
    --timero-radius-lg:     18px;
    --timero-radius-xl:     22px;
    --timero-radius-2xl:    28px;

    /* ── Typography ── */
    --timero-font-display:  'Barlow Condensed', 'Segoe UI', sans-serif;
    --timero-font-body:     'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --timero-font-mono:     'Share Tech Mono', monospace;
    --timero-font-racing:   'Bebas Neue', sans-serif; /* corrida ao 99 */

    /* ── Article layout ── */
    --timero-article-px:        32px;
    --timero-article-py-top:    28px;
    --timero-article-py-bottom: 34px;
}


/* ════════════════════════════════════════════════════════
   §3  GLOBAL BASE
════════════════════════════════════════════════════════ */
html, body {
    background:
        radial-gradient(circle at 15% 10%, rgba(0,212,255,0.045), transparent 22%),
        radial-gradient(circle at 85% 12%, rgba(143,99,255,0.045), transparent 22%),
        linear-gradient(180deg,
            var(--timero-bg-0)  0%,
            var(--timero-bg-1) 45%,
            var(--timero-bg-2) 100%) !important;
    color: var(--timero-text) !important;
    font-family: var(--timero-font-body) !important;
    font-size: 16px;
}

html, body,
.mw-body, #content,
.mw-parser-output,
.vector-body,
.vector-body p, .vector-body li,
.vector-body dd, .vector-body dt,
.vector-body td, .vector-body th,
.vector-body input, .vector-body select,
.vector-body textarea, .vector-body button {
    font-family: var(--timero-font-body) !important;
}


/* ════════════════════════════════════════════════════════
   §4  VECTOR CHROME — header, sidebar, footer dark
════════════════════════════════════════════════════════ */
.vector-sticky-header,
.vector-header,
#mw-page-base,
#mw-head,
#mw-navigation,
.vector-page-toolbar,
.vector-pinnable-header,
.vector-pinnable-element {
    background: linear-gradient(180deg, #07101e 0%, #0a1628 100%) !important;
    color: var(--timero-text) !important;
    border-color: var(--timero-border) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}

.vector-header-container,
.vector-header-start,
.vector-header-end,
.vector-page-toolbar-container,
.vector-user-links,
.vector-user-menu,
#p-personal,
#p-vector-user-menu-overflow {
    background: transparent !important;
    box-shadow: none !important;
}

/* Header links */
.vector-header a,
.vector-sticky-header a,
.vector-page-toolbar a,
.vector-pinnable-header a,
#mw-head a,
#mw-navigation a {
    color: #c8ecff !important;
    text-decoration: none !important;
    transition: color .15s;
}
.vector-header a:hover,
.vector-sticky-header a:hover,
.vector-page-toolbar a:hover,
#mw-head a:hover,
#mw-navigation a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Nav tabs */
.vector-menu-tabs .vector-menu-content-list,
.vector-menu-tabs-legacy .vector-menu-content-list,
.vector-page-toolbar-container { background: transparent !important; }

.vector-menu-tabs li,
.vector-menu-tabs-legacy li {
    background: transparent !important;
    border-color: var(--timero-border) !important;
}
.vector-menu-tabs li a,
.vector-menu-tabs-legacy li a { color: #d8efff !important; }
.vector-menu-tabs .selected a,
.vector-menu-tabs-legacy .selected a {
    color: #ffffff !important;
    border-bottom: 2px solid var(--timero-cyan) !important;
}

/* Sidebar */
#mw-panel,
.vector-column-start,
.vector-sidebar,
.vector-sidebar-container,
.vector-menu,
.vector-menu-portal,
.vector-toc {
    background: linear-gradient(180deg, #07101e 0%, #081423 100%) !important;
    color: #dfe9f7 !important;
    border-color: rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
}
.vector-menu-portal, .portal {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    background: transparent !important;
}
.vector-menu-heading, #mw-panel h3, .portal h3 {
    color: #ffffff !important;
    font-family: var(--timero-font-display) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
}
#mw-panel a, .vector-column-start a,
.vector-sidebar a, .vector-menu a, .portal a {
    color: #bfe8ff !important;
    text-decoration: none !important;
    transition: color .15s;
}
#mw-panel a:hover, .vector-column-start a:hover,
.vector-sidebar a:hover, .vector-menu a:hover, .portal a:hover {
    color: #ffffff !important;
}
.vector-column-start, .vector-column-end { background: transparent !important; }

/* Logo */
.mw-wiki-logo,
.vector-header-container .mw-logo,
.vector-header-container .mw-logo-wordmark,
.vector-header-container .mw-logo-tagline {
    filter: drop-shadow(0 0 10px rgba(0,212,255,0.18));
}

/* Footer */
#footer, .mw-footer,
.vector-footer-container, footer {
    background: linear-gradient(180deg, #07101e 0%, #05080f 100%) !important;
    color: #a9bfd8 !important;
    border-top: 1px solid var(--timero-border) !important;
    margin-top: 40px;
}
#footer a, .mw-footer a,
.vector-footer a, .vector-footer-container a {
    color: #8fdfff !important;
    text-decoration: none !important;
}
#footer a:hover, .mw-footer a:hover,
.vector-footer a:hover, .vector-footer-container a:hover {
    color: #ffffff !important;
}
#footer ul, .mw-footer ul, .vector-footer ul { color: #a9bfd8 !important; }


/* ════════════════════════════════════════════════════════
   §5  MAIN PAGE — full-bleed, no shell
════════════════════════════════════════════════════════ */
body.page-Main_Page #content,
body.page-Main_Page .mw-body {
    padding: 0 !important; border: none !important;
    background: transparent !important;
    box-shadow: none !important; border-radius: 0 !important;
}
body.page-Main_Page #bodyContent,
body.page-Main_Page .mw-body-content,
body.page-Main_Page .mw-parser-output {
    background: transparent !important;
    padding: 0 !important; margin: 0 !important;
}
body.page-Main_Page #firstHeading,
body.page-Main_Page .mw-first-heading,
body.page-Main_Page #contentSub { display: none !important; }


/* ════════════════════════════════════════════════════════
   §6  CUSTOM GUIDE PAGES — full-bleed inside article shell
   All roots: leveling / mvp / farming / card / corrida
   Pattern: zero out inner padding so root fills the shell.
════════════════════════════════════════════════════════ */

/* — Page list — each root class and its body.page-* trigger — */
body.page-Beginner_Leveling_Guide,
body.page-MVP_Hunting_Guide,
body.page-Farming_Guide,
body.page-Card_System,
body.page-Corrida_ao_99 {
    /* nothing on body itself — handled per-section below */
}

/* article shell: keep the rounded panel but remove inner spacing */
body.page-Beginner_Leveling_Guide #bodyContent,
body.page-Beginner_Leveling_Guide .mw-body-content,
body.page-Beginner_Leveling_Guide .mw-parser-output,
body.page-MVP_Hunting_Guide #bodyContent,
body.page-MVP_Hunting_Guide .mw-body-content,
body.page-MVP_Hunting_Guide .mw-parser-output,
body.page-Farming_Guide #bodyContent,
body.page-Farming_Guide .mw-body-content,
body.page-Farming_Guide .mw-parser-output,
body.page-Card_System #bodyContent,
body.page-Card_System .mw-body-content,
body.page-Card_System .mw-parser-output,
body.page-Corrida_ao_99 #bodyContent,
body.page-Corrida_ao_99 .mw-body-content,
body.page-Corrida_ao_99 .mw-parser-output {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide default h1 and subtitle on custom pages */
body.page-Beginner_Leveling_Guide #firstHeading,
body.page-Beginner_Leveling_Guide .mw-first-heading,
body.page-Beginner_Leveling_Guide #contentSub,
body.page-MVP_Hunting_Guide #firstHeading,
body.page-MVP_Hunting_Guide .mw-first-heading,
body.page-MVP_Hunting_Guide #contentSub,
body.page-Farming_Guide #firstHeading,
body.page-Farming_Guide .mw-first-heading,
body.page-Farming_Guide #contentSub,
body.page-Card_System #firstHeading,
body.page-Card_System .mw-first-heading,
body.page-Card_System #contentSub,
body.page-Corrida_ao_99 #firstHeading,
body.page-Corrida_ao_99 .mw-first-heading,
body.page-Corrida_ao_99 #contentSub { display: none !important; }

/* Article shell: keep rounded panel, hide overflow cleanly */
body.page-Beginner_Leveling_Guide #content,
body.page-Beginner_Leveling_Guide .mw-body,
body.page-MVP_Hunting_Guide #content,
body.page-MVP_Hunting_Guide .mw-body,
body.page-Farming_Guide #content,
body.page-Farming_Guide .mw-body,
body.page-Card_System #content,
body.page-Card_System .mw-body,
body.page-Corrida_ao_99 #content,
body.page-Corrida_ao_99 .mw-body { overflow: hidden !important; }

/* ── :has() fallback for future guide pages (modern browsers) ── */
body:not(.page-Main_Page):has(.timero-wiki-root) #bodyContent,
body:not(.page-Main_Page):has(.timero-wiki-root) .mw-body-content,
body:not(.page-Main_Page):has(.timero-wiki-root) .mw-parser-output,
body:not(.page-Main_Page):has(#leveling-guide-root) #bodyContent,
body:not(.page-Main_Page):has(#leveling-guide-root) .mw-body-content,
body:not(.page-Main_Page):has(#leveling-guide-root) .mw-parser-output,
body:not(.page-Main_Page):has(#mvp-guide-root) #bodyContent,
body:not(.page-Main_Page):has(#mvp-guide-root) .mw-body-content,
body:not(.page-Main_Page):has(#mvp-guide-root) .mw-parser-output,
body:not(.page-Main_Page):has(#farming-guide-root) #bodyContent,
body:not(.page-Main_Page):has(#farming-guide-root) .mw-body-content,
body:not(.page-Main_Page):has(#farming-guide-root) .mw-parser-output,
body:not(.page-Main_Page):has(#card-system-root) #bodyContent,
body:not(.page-Main_Page):has(#card-system-root) .mw-body-content,
body:not(.page-Main_Page):has(#card-system-root) .mw-parser-output {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
body:not(.page-Main_Page):has(.timero-wiki-root) #firstHeading,
body:not(.page-Main_Page):has(.timero-wiki-root) .mw-first-heading,
body:not(.page-Main_Page):has(.timero-wiki-root) #contentSub,
body:not(.page-Main_Page):has(#leveling-guide-root) #firstHeading,
body:not(.page-Main_Page):has(#leveling-guide-root) .mw-first-heading,
body:not(.page-Main_Page):has(#leveling-guide-root) #contentSub,
body:not(.page-Main_Page):has(#mvp-guide-root) #firstHeading,
body:not(.page-Main_Page):has(#mvp-guide-root) .mw-first-heading,
body:not(.page-Main_Page):has(#mvp-guide-root) #contentSub,
body:not(.page-Main_Page):has(#farming-guide-root) #firstHeading,
body:not(.page-Main_Page):has(#farming-guide-root) .mw-first-heading,
body:not(.page-Main_Page):has(#farming-guide-root) #contentSub,
body:not(.page-Main_Page):has(#card-system-root) #firstHeading,
body:not(.page-Main_Page):has(#card-system-root) .mw-first-heading,
body:not(.page-Main_Page):has(#card-system-root) #contentSub { display: none !important; }


/* ════════════════════════════════════════════════════════
   §7  GENERIC ARTICLE SHELL  (non-custom pages)
════════════════════════════════════════════════════════ */
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) #content,
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) .mw-body {
    background: linear-gradient(180deg, rgba(10,22,40,0.94) 0%, rgba(7,16,29,0.96) 100%) !important;
    color: var(--timero-text) !important;
    border: 1px solid var(--timero-border) !important;
    border-radius: var(--timero-radius-xl) !important;
    box-shadow: var(--timero-shadow-lg);
    margin-top: 16px !important;
    overflow: hidden;
    position: relative;
}
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) .mw-body::before,
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) #content::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--timero-cyan), var(--timero-purple), transparent);
    opacity: .88;
}
body:not(.page-Main_Page) #bodyContent,
body:not(.page-Main_Page) .mw-body-content,
body:not(.page-Main_Page) .mw-parser-output {
    color: var(--timero-text) !important;
    background: transparent !important;
}


/* ════════════════════════════════════════════════════════
   §8  TYPOGRAPHY
════════════════════════════════════════════════════════ */
.mw-body h1,.mw-body h2,.mw-body h3,
.mw-body h4,.mw-body h5,.mw-body h6,
#firstHeading,.mw-first-heading {
    font-family: var(--timero-font-display) !important;
    color: #ffffff !important;
    letter-spacing: .02em;
    line-height: 1;
}
body:not(.page-Main_Page) #firstHeading,
body:not(.page-Main_Page) .mw-first-heading {
    margin-bottom: 18px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--timero-cyan-line);
    text-shadow: 0 3px 12px rgba(0,0,0,.20);
}
body:not(.page-Main_Page) .mw-body h2,
body:not(.page-Main_Page) .mw-body h3 {
    border-bottom: 1px solid rgba(0,212,255,0.12);
    padding-bottom: 8px;
    margin-top: 28px;
    margin-bottom: 12px;
}
body:not(.page-Main_Page) .mw-body h2 { font-size: clamp(1.8rem,2.6vw,2.35rem); }
body:not(.page-Main_Page) .mw-body h3 { font-size: clamp(1.35rem,2.2vw,1.7rem); }
.mw-parser-output p { line-height: 1.8; color: var(--timero-text-soft); }


/* ════════════════════════════════════════════════════════
   §9  CONTENT FLOW  (no paragraph balloons)
════════════════════════════════════════════════════════ */
body:not(.page-Main_Page) .mw-parser-output > p,
body:not(.page-Main_Page) .mw-parser-output > ul,
body:not(.page-Main_Page) .mw-parser-output > ol,
body:not(.page-Main_Page) .mw-parser-output > table,
body:not(.page-Main_Page) .mw-parser-output > blockquote,
body:not(.page-Main_Page) .mw-parser-output > pre,
body:not(.page-Main_Page) .mw-parser-output > .toc,
body:not(.page-Main_Page) .mw-parser-output > #toc {
    background: transparent !important;
    border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; box-shadow: none !important;
}
body:not(.page-Main_Page) .mw-parser-output > * + * { margin-top: 14px; }


/* ════════════════════════════════════════════════════════
   §10  LINKS
════════════════════════════════════════════════════════ */
.mw-body a,
.mw-parser-output a,
.vector-body a {
    color: #66dfff !important;
    text-decoration: none;
    transition: color .18s, text-shadow .18s;
}
.mw-body a:hover,
.mw-parser-output a:hover,
.vector-body a:hover {
    color: #ffffff !important;
    text-decoration: none;
    text-shadow: 0 0 14px rgba(0,212,255,.32);
}
.mw-body a:visited,
.mw-parser-output a:visited { color: #9adfff !important; }

/* Suppress external link arrows inside guide roots */
.timero-wiki-root a.external::after,
.timero-wiki-root a.extiw::after,
#leveling-guide-root a.external::after,
#leveling-guide-root a.extiw::after,
#mvp-guide-root a.external::after,
#mvp-guide-root a.extiw::after,
#farming-guide-root a.external::after,
#farming-guide-root a.extiw::after,
#card-system-root a.external::after,
#card-system-root a.extiw::after { display: none !important; }

/* Guide-root links inherit colour from their styled containers */
.timero-wiki-root a,
#leveling-guide-root a,
#mvp-guide-root a,
#farming-guide-root a,
#card-system-root a {
    color: inherit !important;
    text-decoration: none !important;
}
.timero-wiki-root a:hover,
#leveling-guide-root a:hover,
#mvp-guide-root a:hover,
#farming-guide-root a:hover,
#card-system-root a:hover {
    color: inherit !important;
    text-decoration: none !important;
    filter: brightness(1.1);
}


/* ════════════════════════════════════════════════════════
   §11  LISTS / HR / BLOCKQUOTE / CODE  (article pages)
════════════════════════════════════════════════════════ */
.mw-parser-output ul,
.mw-parser-output ol { padding-left: 1.6rem; }

.mw-parser-output hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 28px 0;
}
.mw-parser-output blockquote {
    background: linear-gradient(180deg, rgba(0,212,255,0.05), rgba(255,255,255,.02));
    border-left: 3px solid rgba(0,212,255,.35);
    padding: 14px 16px;
    color: #d5e4f5;
    border-radius: 12px;
}
.mw-parser-output code,
.mw-parser-output pre,
.mw-code {
    background: rgba(0,0,0,.26) !important;
    color: #d8f2ff !important;
    border: 1px solid var(--timero-border);
    border-radius: 10px;
    font-family: var(--timero-font-mono) !important;
}
.mw-parser-output code { padding: 2px 6px; }
.mw-parser-output pre  { padding: 14px; overflow: auto; }


/* ════════════════════════════════════════════════════════
   §12  TOC
════════════════════════════════════════════════════════ */
#toc, .toc, .mw-parser-output .toc {
    background: linear-gradient(180deg, rgba(8,18,32,.95), rgba(10,22,40,.90)) !important;
    border: 1px solid var(--timero-cyan-line) !important;
    border-radius: var(--timero-radius-md);
    padding: 14px 16px;
    color: var(--timero-text);
    box-shadow: var(--timero-shadow-md);
}
#toc .toctitle, .toc .toctitle {
    color: #ffffff;
    font-family: var(--timero-font-display);
}


/* ════════════════════════════════════════════════════════
   §13  WIKITABLES
════════════════════════════════════════════════════════ */
.wikitable, table.wikitable {
    background: rgba(10,20,36,.94) !important;
    color: var(--timero-text) !important;
    border: 1px solid var(--timero-cyan-line) !important;
    border-collapse: collapse;
    border-radius: var(--timero-radius-md);
    overflow: hidden;
}
.wikitable th, table.wikitable th {
    background: linear-gradient(180deg, rgba(0,212,255,.12), rgba(0,212,255,.06)) !important;
    color: #ffffff !important;
    border: 1px solid var(--timero-border) !important;
    font-weight: 700;
    padding: 10px 12px;
    font-family: var(--timero-font-display) !important;
    letter-spacing: .04em;
}
.wikitable td, table.wikitable td {
    background: rgba(255,255,255,.02) !important;
    color: var(--timero-text-soft) !important;
    border: 1px solid var(--timero-border) !important;
    padding: 10px 12px;
}
.wikitable tr:nth-child(even) td,
table.wikitable tr:nth-child(even) td {
    background: rgba(255,255,255,.032) !important;
}


/* ════════════════════════════════════════════════════════
   §14  FORMS / INPUTS / BUTTONS
════════════════════════════════════════════════════════ */
input, select, textarea, button {
    font-family: var(--timero-font-body);
}
input[type="text"],input[type="search"],input[type="password"],
input[type="email"],input[type="number"],
select, textarea,
.vector-search-box-input,
.cdx-text-input__input,
#searchInput {
    background: rgba(12,18,28,.95) !important;
    color: #eef6ff !important;
    border: 1px solid var(--timero-border-mid) !important;
    border-radius: var(--timero-radius-sm) !important;
    box-shadow: none !important;
}
input:focus,select:focus,textarea:focus,
.vector-search-box-input:focus,
.cdx-text-input__input:focus,
#searchInput:focus {
    outline: none;
    border-color: var(--timero-cyan-line) !important;
    box-shadow: 0 0 0 3px var(--timero-cyan-soft) !important;
}
button,
input[type="submit"],
input[type="button"],
.mw-htmlform input[type="submit"] {
    background: linear-gradient(135deg, #00d4ff, #7a37ff) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--timero-radius-sm);
    font-weight: 700;
    transition: transform .2s, box-shadow .2s;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,212,255,.22);
}


/* ════════════════════════════════════════════════════════
   §15  CATEGORIES / THUMBS / MESSAGES
════════════════════════════════════════════════════════ */
.catlinks {
    background: rgba(10,20,36,.88) !important;
    border: 1px solid var(--timero-border) !important;
    border-radius: var(--timero-radius-sm);
    padding: 10px 12px;
}
.thumbinner, div.thumbinner, .infobox {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid var(--timero-border) !important;
    border-radius: var(--timero-radius-sm);
}
.messagebox,.ambox,.tmbox,.cmbox,.ombox {
    background: rgba(10,20,36,.90) !important;
    color: #eef6ff !important;
    border: 1px solid var(--timero-cyan-line) !important;
    border-radius: var(--timero-radius-sm);
}


/* ════════════════════════════════════════════════════════
   §16  KEYFRAMES — ALL PAGES UNIFIED
   Canonical set: every animation used anywhere in the wiki.
════════════════════════════════════════════════════════ */

/* ── Universal ── */
@keyframes timero-fade-up {
    from { opacity:0; transform:translateY(20px); filter:blur(3px); }
    to   { opacity:1; transform:none;             filter:none; }
}
@keyframes timero-shimmer {
    0%       { background-position: -200% center; }
    60%,100% { background-position:  200% center; }
}
@keyframes timero-blink {
    0%,100% { opacity:1; }
    50%     { opacity:.22; }
}
@keyframes timero-grid-drift {
    from { background-position: 0 0; }
    to   { background-position: 0 48px; }
}
@keyframes timero-pulse-ring {
    0%   { transform:scale(1);   opacity:.55; }
    100% { transform:scale(2.2); opacity:0; }
}
@keyframes timero-float {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-7px); }
}
@keyframes timero-halo-spin { to { transform:rotate(360deg); } }
@keyframes timero-spin      { to { transform:rotate(360deg); } }

/* ── Leveling Guide ── */
@keyframes guide-phase-in {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:none; }
}
@keyframes guide-bar-fill {
    from { width:0; opacity:0; }
}
@keyframes guide-hero-gradient {
    0%,100% { background-position: 0   center; }
    50%     { background-position: 100% center; }
}
@keyframes guide-trophy-float {
    0%,100% { transform:translateY(0) scale(1); }
    50%     { transform:translateY(-6px) scale(1.05); }
}
@keyframes guide-dot-pulse {
    0%,100% { box-shadow: 0 0 12px rgba(0,255,136,.40); }
    50%     { box-shadow: 0 0 24px rgba(0,255,136,.65), 0 0 48px rgba(0,255,136,.18); }
}

/* ── MVP Guide ── */
@keyframes mvp-card-in {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:none; }
}
@keyframes respawn-pulse {
    0%   { opacity:1; }
    100% { opacity:.35; }
}
@keyframes timer-blink {
    0%,100% { opacity:1; box-shadow:0 0 8px var(--timero-cyan); }
    50%     { opacity:.28; box-shadow:none; }
}

/* ── Farming Guide ── */
@keyframes ticker-scroll {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}
@keyframes method-in {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:none; }
}
@keyframes route-in {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:none; }
}
@keyframes fade-up {   /* alias — same as timero-fade-up */
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:none; }
}

/* ── Card System ── */
@keyframes card-row-in {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:none; }
}
@keyframes detail-expand {
    from { opacity:0; transform:translateY(-5px); }
    to   { opacity:1; transform:none; }
}
@keyframes rune-spin { to { transform:rotate(360deg); } }

/* ── Corrida ao 99 / Podium ── */
@keyframes fireRise {
    0%,100% { transform:scaleY(1) translateY(0); }
    50%     { transform:scaleY(1.06) translateY(-3px); }
}
@keyframes podiumRise {
    from { opacity:0; transform:translateY(40px) scale(.95); }
    to   { opacity:1; transform:none; }
}
@keyframes goldShine {
    0%       { background-position:-200% center; }
    60%,100% { background-position: 200% center; }
}
@keyframes raceLines {
    from { background-position:0 0; }
    to   { background-position:0 80px; }
}
@keyframes countFlip {
    from { opacity:0; transform:translateY(-12px); }
    to   { opacity:1; transform:none; }
}
@keyframes haloSpin { to { transform:rotate(360deg); } }
@keyframes bgBreath {
    0%   { filter:brightness(1); }
    100% { filter:brightness(1.07) saturate(1.10); }
}
@keyframes nebulaShift {
    0%   { filter:brightness(1); }
    100% { filter:brightness(1.06) saturate(1.08); }
}
@keyframes revealUp {
    from { opacity:0; transform:translateY(18px); filter:blur(3px); }
    to   { opacity:1; transform:none; filter:none; }
}


/* ════════════════════════════════════════════════════════
   §17  COMPONENT TOKENS
   Injected as CSS vars on every guide root so inline styles
   that reference e.g. var(--c) resolve consistently.
════════════════════════════════════════════════════════ */
#leveling-guide-root,
#mvp-guide-root,
#farming-guide-root,
#card-system-root,
.timero-wiki-root {
    /* map short-hand vars to canonical tokens */
    --c:     var(--timero-cyan);
    --g:     var(--timero-gold);
    --ok:    var(--timero-green);
    --bad:   var(--timero-red);
    --txt:   var(--timero-text);
    --muted: var(--timero-text-muted);
    --void:  var(--timero-bg-0);
    --panel: var(--timero-panel);
    --ln:    var(--timero-border);
    --ln2:   var(--timero-border-mid);
}


/* ════════════════════════════════════════════════════════
   §18  GUIDE ROOT NORMALISATIONS  (all five roots)
   Applied uniformly: box-sizing, font, heading borders,
   code neutralisation, link inheritance, dimensions.
════════════════════════════════════════════════════════ */
.timero-wiki-root,
#leveling-guide-root,
#mvp-guide-root,
#farming-guide-root,
#card-system-root {
    display: block;
    margin: 0 !important;
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    font-family: var(--timero-font-body) !important;
    color: var(--timero-text);
}

.timero-wiki-root > div,
#leveling-guide-root > div,
#mvp-guide-root > div,
#farming-guide-root > div,
#card-system-root > div {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* headings — strip wiki borders, use display font */
.timero-wiki-root h1, .timero-wiki-root h2, .timero-wiki-root h3,
.timero-wiki-root h4, .timero-wiki-root h5, .timero-wiki-root h6,
#leveling-guide-root h1, #leveling-guide-root h2, #leveling-guide-root h3,
#leveling-guide-root h4, #leveling-guide-root h5, #leveling-guide-root h6,
#mvp-guide-root h1, #mvp-guide-root h2, #mvp-guide-root h3,
#mvp-guide-root h4, #mvp-guide-root h5, #mvp-guide-root h6,
#farming-guide-root h1, #farming-guide-root h2, #farming-guide-root h3,
#farming-guide-root h4, #farming-guide-root h5, #farming-guide-root h6,
#card-system-root h1, #card-system-root h2, #card-system-root h3,
#card-system-root h4, #card-system-root h5, #card-system-root h6 {
    font-family: var(--timero-font-display) !important;
    border: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    color: #fff !important;
}

/* code/pre — neutralise wiki styling completely */
.timero-wiki-root pre, .timero-wiki-root code, .timero-wiki-root .mw-code,
#leveling-guide-root pre, #leveling-guide-root code, #leveling-guide-root .mw-code,
#mvp-guide-root pre, #mvp-guide-root code, #mvp-guide-root .mw-code,
#farming-guide-root pre, #farming-guide-root code, #farming-guide-root .mw-code,
#card-system-root pre, #card-system-root code, #card-system-root .mw-code {
    display: inline !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
    overflow: visible !important;
}


/* ════════════════════════════════════════════════════════
   §19  LEVELING GUIDE  (#leveling-guide-root)
   Accent: green #00ff88. Phase nav, bars, checklists.
════════════════════════════════════════════════════════ */
#leveling-guide-root {
    background: #05080f;
}

/* Phase navigator — ensure it sits above the article shell header */
#phase-nav {
    z-index: 9800 !important;
    transition: background .15s;
}
#phase-nav a.pnav-item {
    transition: background .15s, color .15s;
    border-radius: 8px;
    margin: 0 4px;
    text-decoration: none !important;
}
#phase-nav a.pnav-item:hover { background: rgba(0,255,136,.09) !important; }

/* Class filter bar — sticky above content */
#leveling-guide-root > div:nth-child(4) {
    position: sticky;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

/* Phase blocks */
.phase-block {
    animation: guide-phase-in .65s cubic-bezier(.22,1,.36,1) both;
}
#phase-1 { animation-delay:.05s; }
#phase-2 { animation-delay:.12s; }
#phase-3 { animation-delay:.19s; }
#phase-4 { animation-delay:.26s; }
#phase-5 { animation-delay:.33s; }

/* Class filter buttons */
.cf-btn {
    transition: opacity .18s, transform .15s, background .18s;
    cursor: pointer;
    user-select: none;
}
.cf-btn:hover { transform: translateY(-2px); opacity: 1 !important; }

/* Monster entries */
.mob-entry {
    transition: border-color .18s, box-shadow .18s;
    cursor: pointer;
}
.mob-entry:hover { box-shadow: 0 4px 16px rgba(0,0,0,.36); }

/* Checklist items */
.check-item {
    transition: background .15s, border-color .15s, transform .15s;
    user-select: none;
    cursor: pointer;
}
.check-item:hover {
    background: rgba(0,255,136,.04) !important;
    border-color: rgba(0,255,136,.20) !important;
    transform: translateX(3px);
}
.check-item[data-checked="1"] {
    background: rgba(0,255,136,.04) !important;
    border-color: rgba(0,255,136,.16) !important;
}

/* Accordion */
.accord-head { transition: background .15s; cursor: pointer; }
.accord-head:hover { background: rgba(255,255,255,.068) !important; }
.accord-icon { transition: transform .22s cubic-bezier(.22,1,.36,1); }

/* Efficiency / progress bars (leveling progress strip) */
.eff-bar { transition: width .8s cubic-bezier(.22,1,.36,1); }

/* Guide bar-fill: animate on scroll via IntersectionObserver (JS handles it),
   this just ensures the CSS transition is present as fallback */
[style*="animation:guide-bar-fill"] {
    animation-play-state: paused;
}

/* Hero title shimmer */
#leveling-guide-root [style*="background:linear-gradient(90deg,#00ff88,#00d4ff)"] {
    background-size: 200% auto;
    animation: guide-hero-gradient 4s ease infinite;
}

/* Trophy float */
[style*="font-size:2.5rem;margin-bottom:8px"] {
    display: inline-block;
    animation: guide-trophy-float 3s ease-in-out infinite;
}


/* ════════════════════════════════════════════════════════
   §20  MVP HUNTING GUIDE  (#mvp-guide-root)
   Accent: crimson #ff3d5a + fire #ff6b00.
════════════════════════════════════════════════════════ */
#mvp-guide-root {
    background: #04060d;
}

/* Tier filter bar — sticky with high z-index */
#tier-filter-bar {
    position: sticky;
    top: 0;
    z-index: 300;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* Tier/sort buttons */
.tf-btn, .sort-btn {
    transition: opacity .18s, background .18s, transform .15s;
    cursor: pointer;
}
.tf-btn:hover, .sort-btn:hover { transform: translateY(-2px); }

/* Boss cards */
.boss-card {
    animation: mvp-card-in .5s ease both;
    transition: box-shadow .25s;
}
.boss-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.60) !important; }

/* Boss dossier expand */
.boss-dossier { animation: detail-expand .3s ease both; }

/* Boss chevron */
.boss-chevron {
    transition: transform .22s cubic-bezier(.22,1,.36,1);
    display: inline-block;
}

/* Respawn pulse bar */
[style*="animation:respawn-pulse"] {
    animation: respawn-pulse 2s ease-in-out infinite alternate;
}

/* Timer blink dot */
[style*="animation:timer-blink"] {
    animation: timer-blink 1.2s ease infinite;
}

/* Class MVP accordion */
.class-mvp-row { cursor: pointer; }
.class-chevron {
    transition: transform .22s cubic-bezier(.22,1,.36,1);
    display: inline-block;
}

/* Manual timer input fields */
#manual-mvp-name:focus,
#manual-mvp-respawn:focus {
    border-color: rgba(0,212,255,.38) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.10) !important;
    outline: none;
}


/* ════════════════════════════════════════════════════════
   §21  FARMING GUIDE  (#farming-guide-root)
   Accent: gold #f9c500. Ticker, method tabs, routes, calc.
════════════════════════════════════════════════════════ */
#farming-guide-root {
    background: #030508;
}

/* Market ticker */
.ticker-track {
    animation: ticker-scroll 38s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }

/* Method tab hover */
#methods-section button {
    transition: background .18s, color .18s, font-weight .1s;
}

/* Route pills */
.route-pill {
    transition: transform .18s, box-shadow .18s, opacity .18s;
    cursor: pointer;
}
.route-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.40); }

/* Route detail card */
.route-detail { animation: route-in .3s ease both; }

/* Method panel */
.method-panel { animation: method-in .3s ease both; }

/* Efficiency bars */
#farming-guide-root .eff-bar {
    transition: width .8s cubic-bezier(.22,1,.36,1);
}

/* Loadout items */
.loadout-item {
    transition: background .15s, border-color .15s, transform .15s;
    cursor: pointer;
}
.loadout-item:hover { transform: translateX(3px); }

/* Calculator inputs */
#calc-method:focus {
    border-color: rgba(0,212,255,.38) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.10) !important;
    outline: none;
}
#card-search:focus {
    border-color: rgba(124,106,255,.40) !important;
    box-shadow: 0 0 0 3px rgba(124,106,255,.10) !important;
    outline: none;
}

/* Related guide cards */
#farming-guide-root [style*="padding:20px 18px;border-radius:14px"],
#card-system-root [style*="padding:18px 16px;border-radius:12px"] {
    transition: transform .2s ease, box-shadow .2s ease;
}
#farming-guide-root [style*="padding:20px 18px;border-radius:14px"]:hover,
#card-system-root [style*="padding:18px 16px;border-radius:12px"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,.50);
}


/* ════════════════════════════════════════════════════════
   §22  CARD SYSTEM  (#card-system-root)
   Accent: arcane violet #7c6aff + collection gold #f9c500.
════════════════════════════════════════════════════════ */
#card-system-root {
    background: #030408;
}

/* Live search */
#card-search {
    transition: border-color .18s, box-shadow .18s;
}

/* Category tabs */
#card-db-section button {
    transition: background .16s, color .16s;
}

/* Table rows */
.card-row {
    animation: card-row-in .25s ease both;
    transition: background .14s;
    cursor: pointer;
}
.card-row:hover { background: rgba(124,106,255,.07) !important; }

/* Sort indicators */
.th-cell.sortable {
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
.th-cell.sortable:hover { color: #9d8fff !important; }
.sort-ind { transition: color .15s; }

/* Collection group cards */
.cg-card {
    transition: box-shadow .2s;
    cursor: pointer;
}
.cg-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.45); }
.cg-chevron {
    transition: transform .22s cubic-bezier(.22,1,.36,1);
    display: inline-block;
}

/* FAQ entries */
.faq-entry > div:first-child {
    cursor: pointer;
    transition: background .15s;
}
.faq-entry > div:first-child:hover { background: rgba(255,255,255,.06) !important; }
.faq-chev {
    transition: transform .22s ease;
    display: inline-block;
}

/* Rune spin ornament */
[style*="animation:rune-spin"] {
    animation: rune-spin 18s linear infinite;
}


/* ════════════════════════════════════════════════════════
   §23  CORRIDA AO 99  (body.page-Corrida_ao_99)
   Accent: fire #ff6b00 + gold podium. Bebas Neue font.
════════════════════════════════════════════════════════ */
body.page-Corrida_ao_99 .page-wrap h1,
body.page-Corrida_ao_99 .page-wrap h2,
body.page-Corrida_ao_99 .page-wrap h3 {
    font-family: 'Bebas Neue', var(--timero-font-display) !important;
}

/* Background animation */
[style*="animation:bgBreath"],
[style*="animation:nebulaShift"] {
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
[style*="animation:raceLines"] {
    animation: raceLines 1.5s linear infinite;
}
[style*="animation:haloSpin"] {
    animation: haloSpin 58s linear infinite;
}

/* Podium animations */
.podium-slot { animation: podiumRise .8s cubic-bezier(.22,1,.36,1) both; }
.podium-slot.rank-1 { animation-delay: .10s; }
.podium-slot.rank-2 { animation-delay: .25s; }
.podium-slot.rank-3 { animation-delay: .40s; }

/* Podium hover sweep */
.podium-block-inner {
    transition: box-shadow .25s;
    overflow: hidden;
}
.podium-slot:hover .podium-block-inner {
    box-shadow: 0 0 20px rgba(249,197,0,.22);
}

/* Prize badge shimmer */
.prize-badge { position: relative; overflow: hidden; }
.prize-badge::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
    transform: translateX(-100%);
}
.prize-badge:hover::before {
    transform: translateX(200%);
    transition: transform .55s ease;
}

/* Countdown digit flip */
[style*="animation:countFlip"] { animation: countFlip .2s ease both; }

/* Fire button hover */
.btn-fire { transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s; }
.btn-fire:hover { transform: translateY(-3px); }

/* Leaderboard rows */
.lb-row { transition: background .16s; }

/* FAQ accordion (Corrida uses same .faq-item pattern as leveling) */
.faq-item > .faq-q { cursor: pointer; transition: background .15s; }
.faq-item > .faq-q i { transition: transform .2s; }
.faq-item.open .faq-q i { transform: rotate(180deg); }


/* ════════════════════════════════════════════════════════
   §24  MAIN PAGE COMPONENT CLASSES
   All .timero-* and .timero-db2-* preserved exactly.
════════════════════════════════════════════════════════ */

/* ── Guide card section ── */
.timero-guides-section {
    width: min(1180px, calc(100% - 42px));
    margin: 0 auto;
    padding: 72px 0 36px;
}
.timero-guides-head { text-align: center; margin-bottom: 38px; }
.timero-guides-kicker {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 0 18px; border-radius: 999px;
    border: 1px solid rgba(121,82,255,.35);
    background: rgba(62,32,110,.22);
    color: #9f73ff;
    font-size: .68rem; font-weight: 800; letter-spacing: .22em;
    text-transform: uppercase; margin-bottom: 18px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}
.timero-guides-head h2 {
    margin: 0 0 10px;
    font-family: var(--timero-font-display) !important;
    font-size: clamp(2.2rem,4vw,3.5rem);
    line-height: 1; font-weight: 900; color: #fff !important;
    letter-spacing: -.02em;
    border: none !important;
    text-shadow: 0 3px 12px rgba(0,0,0,.22);
}
.timero-guides-head p { margin:0; font-size:1rem; color:rgba(108,152,214,.88); letter-spacing:.02em; }

.timero-guides-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
.timero-guide-card {
    border-radius: 22px; overflow: hidden;
    background: linear-gradient(180deg,#07111d 0%,#050b14 100%);
    border: 1px solid rgba(0,212,255,.12);
    box-shadow: 0 20px 44px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.02) inset;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.timero-guide-card:hover { transform: translateY(-4px); }
.timero-guide-top {
    min-height: 122px; padding: 26px 26px 20px;
    border-bottom: 1px solid rgba(255,255,255,.06); position: relative;
}
.timero-guide-bottom { padding: 20px 22px 22px; background: rgba(3,9,16,.72); }
.timero-guide-icon { font-size:1.85rem; margin-bottom:12px; line-height:1; }
.timero-guide-label { font-size:.68rem; font-weight:900; letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px; }
.timero-guide-title { font-family:var(--timero-font-display); font-size:1.75rem; line-height:1; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.2); }
.timero-guide-desc { color:rgba(103,146,208,.9); font-size:.98rem; line-height:1.85; margin-bottom:18px; }
.timero-guide-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.timero-guide-tags span {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:28px; padding:0 12px; border-radius:999px;
    font-size:.78rem; font-weight:800; letter-spacing:.02em;
    border:1px solid currentColor; background:rgba(255,255,255,.02);
}
.timero-guide-link a {
    font-family:var(--timero-font-display);
    font-size:1.02rem; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; text-decoration:none !important;
}
.timero-guide-link a:hover { filter:brightness(1.08); text-decoration:none !important; }

/* Guide card colour variants */
.timero-guide-card-green {
    border-color:rgba(0,199,122,.22);
    box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 24px rgba(0,199,122,.06);
}
.timero-guide-card-green .timero-guide-top {
    background:linear-gradient(135deg,rgba(0,112,77,.34) 0%,rgba(0,61,58,.22) 100%);
    border-bottom-color:rgba(0,199,122,.18);
}
.timero-guide-card-green .timero-guide-icon,
.timero-guide-card-green .timero-guide-label,
.timero-guide-card-green .timero-guide-link a,
.timero-guide-card-green .timero-guide-tags span { color:#00ff88 !important; }
.timero-guide-card-green .timero-guide-tags span { background:rgba(0,255,136,.08); border-color:rgba(0,255,136,.28); }

.timero-guide-card-red {
    border-color:rgba(255,47,92,.22);
    box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 24px rgba(255,47,92,.05);
}
.timero-guide-card-red .timero-guide-top {
    background:linear-gradient(135deg,rgba(70,17,40,.58) 0%,rgba(34,20,70,.30) 100%);
    border-bottom-color:rgba(255,47,92,.16);
}
.timero-guide-card-red .timero-guide-icon,
.timero-guide-card-red .timero-guide-label,
.timero-guide-card-red .timero-guide-link a,
.timero-guide-card-red .timero-guide-tags span { color:#ff355e !important; }
.timero-guide-card-red .timero-guide-tags span { background:rgba(255,53,94,.08); border-color:rgba(255,53,94,.26); }

.timero-guide-card-gold {
    border-color:rgba(255,176,32,.22);
    box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 24px rgba(255,176,32,.05);
}
.timero-guide-card-gold .timero-guide-top {
    background:linear-gradient(135deg,rgba(70,52,17,.42) 0%,rgba(36,36,36,.18) 100%);
    border-bottom-color:rgba(255,176,32,.16);
}
.timero-guide-card-gold .timero-guide-icon,
.timero-guide-card-gold .timero-guide-label,
.timero-guide-card-gold .timero-guide-link a,
.timero-guide-card-gold .timero-guide-tags span { color:#ffb020 !important; }
.timero-guide-card-gold .timero-guide-tags span { background:rgba(255,176,32,.08); border-color:rgba(255,176,32,.24); }

/* ── Database section (main page) ── */
.timero-db2-section {
    background:linear-gradient(180deg,#07101e 0%,#05080f 100%);
    padding:72px 42px;
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.timero-db2-head {
    width:min(1220px,calc(100% - 40px));
    margin:0 auto 28px; text-align:center;
}
.timero-db2-kicker {
    display:inline-flex; align-items:center;
    min-height:32px; padding:0 16px; border-radius:999px;
    background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.18);
    color:#00d4ff; font-size:.68rem; font-weight:800;
    letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px;
}
.timero-db2-head h2 {
    margin:0 0 10px; color:#fff !important;
    font-family:var(--timero-font-display) !important;
    font-size:clamp(2rem,3.8vw,3rem); font-weight:900; line-height:1;
    border:none !important;
}
.timero-db2-head p { margin:0; color:rgba(130,165,215,.82); font-size:1rem; line-height:1.8; }
.timero-db2-grid {
    width:min(1220px,calc(100% - 40px));
    margin:0 auto;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.timero-db2-quest-row {
    width:min(1220px,calc(100% - 40px));
    margin:16px auto 0; justify-content:center; align-items:center;
    display:inline-flex;
}
.timero-db2-quest { max-width:calc((100% - 48px) / 4); }
.timero-db2-card {
    border-radius:22px; overflow:hidden;
    background:linear-gradient(180deg,rgba(8,18,32,.96),rgba(5,10,18,.98));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;
}
.timero-db2-card:hover { transform:translateY(-4px); filter:brightness(1.03); }
.timero-db2-card > a { display:block; text-decoration:none !important; color:inherit !important; }
.timero-db2-link {
    min-height:124px; padding:20px 22px;
    display:flex; align-items:center; gap:16px;
    text-decoration:none !important; color:inherit !important;
}
.timero-db2-icon {
    width:56px; height:56px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.45rem; flex:0 0 auto;
    background:rgba(255,255,255,.04);
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
.timero-db2-copy { display:flex; flex-direction:column; min-width:0; }
.timero-db2-title {
    color:#fff; font-family:var(--timero-font-display);
    font-size:1.6rem; font-weight:800; line-height:1; margin-bottom:6px;
}
.timero-db2-sub { font-size:.84rem; font-weight:700; letter-spacing:.04em; line-height:1.4; }

/* DB card colour variants */
.timero-db2-red    { border-color:rgba(255,53,94,.24);   box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(255,53,94,.06); }
.timero-db2-red    .timero-db2-icon { color:#ff6a8a; } .timero-db2-red    .timero-db2-sub { color:#ff355e; }
.timero-db2-gold   { border-color:rgba(255,176,32,.24);  box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(255,176,32,.06); }
.timero-db2-gold   .timero-db2-icon { color:#dff6ff; }  .timero-db2-gold   .timero-db2-sub { color:#ffb020; }
.timero-db2-cyan   { border-color:rgba(0,212,255,.24);   box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(0,212,255,.06); }
.timero-db2-cyan   .timero-db2-icon { color:#63e9ff; }  .timero-db2-cyan   .timero-db2-sub { color:#00d4ff; }
.timero-db2-purple { border-color:rgba(143,99,255,.24);  box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(143,99,255,.06); }
.timero-db2-purple .timero-db2-icon { color:#ffe45f; }  .timero-db2-purple .timero-db2-sub { color:#ab84ff; }
.timero-db2-green  { border-color:rgba(0,255,136,.24);   box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(0,255,136,.06); }
.timero-db2-green  .timero-db2-icon { color:#f2dfcb; }  .timero-db2-green  .timero-db2-sub { color:#00ff88; }

/* Nav cards */
.timero-nav-card { cursor:pointer; }
.timero-nav-card:hover { transform:translateY(-4px); box-shadow:0 22px 48px rgba(0,0,0,.28) !important; filter:brightness(1.04); }

/* ── Timero card (general) ── */
.timero-card {
    background:linear-gradient(160deg,rgba(10,20,36,.9),rgba(6,12,24,.95));
    border:1px solid rgba(0,212,255,.16);
    border-radius:var(--timero-radius-lg);
    padding:28px 22px;
    position:relative; overflow:hidden;
    transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
.timero-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,212,255,.18); }

/* Timero hero */
.timero-hero {
    position:relative;
    background:linear-gradient(160deg,#02040a 0%,#071020 40%,#0a1628 70%,#06101e 100%);
    padding:64px 48px 52px; text-align:center; overflow:hidden;
    border-bottom:1px solid rgba(0,212,255,.15);
    animation:timero-fade-up .8s cubic-bezier(.22,1,.36,1) both;
}
.timero-hero > div:first-child { animation:timero-grid-drift 8s linear infinite; }

/* Grid helpers */
.timero-grid { display:grid; gap:16px; }
.timero-grid-2 { grid-template-columns:repeat(2,1fr); }
.timero-grid-3 { grid-template-columns:repeat(3,1fr); }
.timero-grid-4 { grid-template-columns:repeat(4,1fr); }
.timero-section { background:#07101e; padding:56px 48px; border-bottom:1px solid rgba(255,255,255,.06); }

/* Timero button */
.timero-btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px; padding:12px 18px; border-radius:var(--timero-radius-sm);
    background:linear-gradient(135deg,#00d4ff,#7a37ff);
    color:#fff !important; text-decoration:none !important;
    font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    box-shadow:0 12px 36px rgba(0,212,255,.25);
    transition:transform .2s,box-shadow .2s;
}
.timero-btn:hover { transform:translateY(-3px); box-shadow:0 18px 50px rgba(0,212,255,.35); text-decoration:none !important; color:#fff !important; }


/* ════════════════════════════════════════════════════════
   §25  RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
    .timero-db2-grid { grid-template-columns:repeat(2,1fr); }
    .timero-db2-quest { max-width:100%; }
}
@media (max-width: 980px) {
    .timero-guides-grid { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
    /* Leveling guide: hide fixed phase nav */
    #phase-nav { display:none !important; }

    .timero-grid-4 { grid-template-columns:repeat(2,1fr); }
    .timero-grid-3 { grid-template-columns:repeat(2,1fr); }
    .timero-grid-2 { grid-template-columns:1fr; }

    /* Boss grid: 1 column */
    #boss-grid { grid-template-columns:1fr !important; }

    /* Table header + rows: collapse to 3 cols on MVP */
    #tier-filter-bar { padding:12px 16px !important; }

    /* Farming: 1-col grids */
    #methods-section [style*="grid-template-columns:1fr 1fr"],
    #routes-section  [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns:1fr !important;
    }

    /* Card system table: simplified columns on tablet */
    #table-header,
    .card-row {
        grid-template-columns:60px 1fr 90px !important;
    }
    #table-header > div:nth-child(4),
    #table-header > div:nth-child(5),
    .card-row > div:nth-child(4),
    .card-row > div:nth-child(5) { display:none !important; }

    /* Corrida: podium simplified */
    .podium-name { font-size:1.1rem; }
    .podium-medal { font-size:2.5rem; }
}

@media (max-width: 640px) {
    /* Global padding normalisation for guide pages */
    #leveling-guide-root  [style*="padding:52px 80px"],
    #leveling-guide-root  [style*="padding:56px 80px"],
    #mvp-guide-root       [style*="padding:52px 64px"],
    #mvp-guide-root       [style*="padding:56px 64px"],
    #mvp-guide-root       [style*="padding:60px 64px"],
    #farming-guide-root   [style*="padding:52px 64px"],
    #farming-guide-root   [style*="padding:48px 64px"],
    #farming-guide-root   [style*="padding:28px 64px"],
    #card-system-root     [style*="padding:52px 64px"],
    #card-system-root     [style*="padding:48px 64px"],
    #card-system-root     [style*="padding:56px 64px"] {
        padding-left:  18px !important;
        padding-right: 18px !important;
    }

    /* Global grids → 1 col */
    .timero-grid-4,
    .timero-grid-3,
    .timero-grid-2 { grid-template-columns:1fr; }

    .timero-db2-grid { grid-template-columns:1fr; }
    .timero-db2-link { min-height:96px; padding:16px 18px; }
    .timero-db2-title { font-size:1.65rem; }
    .timero-db2-sub { font-size:.80rem; }

    /* Corrida */
    .hero-race-num { font-size:clamp(4rem,22vw,8rem) !important; }
    .prizes-grid { grid-template-columns:1fr !important; }
    .countdown-units { gap:10px; }
    .cd-num { font-size:2.4rem !important; }

    /* Farming methods metrics grid */
    [style*="grid-template-columns:1fr 1fr"]:not(#farming-guide-root [style*="gap:16px"]) {
        /* Careful not to collapse all 2-col grids — only safe targets */
    }

    /* Card system table: further collapse */
    #table-header,
    .card-row { grid-template-columns:56px 1fr !important; }
    #table-header > div:nth-child(3),
    .card-row > div:nth-child(3) { display:none !important; }

    /* Card detail panel: stack columns */
    .card-row + div [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns:1fr !important;
    }

    /* Loadout grid */
    #loadout-items { grid-template-columns:1fr 1fr !important; }

    /* Hero CTAs */
    .timero-hero [style*="display:flex;gap:12px;justify-content:center"] {
        flex-direction:column !important; align-items:center !important;
    }
}


/* ════════════════════════════════════════════════════════
   §26  PRINT
════════════════════════════════════════════════════════ */
@media print {
    .timero-hero [style*="position:absolute"],
    #phase-nav,
    #tier-filter-bar,
    .ticker-track,
    .bg-nebula,.bg-track,.bg-grid,.bg-scan,
    .bg-halo,.db-bg,.db-grid,.db-scan,
    #bgCanvas,#dbCanvas { display:none !important; }

    /* Force readable light colours */
    html,body { background:#fff !important; color:#111 !important; }
    .mw-body,#content { background:#fff !important; color:#111 !important; border:none !important; }

    /* Ensure accordion / dossier content is visible */
    .accord-body,
    .boss-dossier,
    .method-panel,
    .route-detail,
    .faq-body,
    .cg-detail,
    .class-mvp-detail { display:block !important; max-height:none !important; }

    /* Navigation links unnecessary in print */
    #footer, .catlinks { display:none; }
}
/* TimeRO monster chips */
.monster-link-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

.monster-link-chip .monster-gif-wrap {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    line-height: 0 !important;
}

.monster-link-chip .monster-gif-wrap img {
    display: block !important;
    max-width: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    vertical-align: middle !important;
    image-rendering: auto !important;
}

.monster-link-chip .monster-name-wrap,
.monster-link-chip .monster-name-wrap a {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.1 !important;
    color: #73d9ff !important;
    text-decoration: none !important;
}

/* Daily quest table alignment */
.wikitable td,
.wikitable th {
    vertical-align: middle !important;
}

.wikitable td .monster-link-chip {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
/* Daily Quest table layout */
.daily-task-cell,
.daily-reward-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-height: 70px !important;
}

.daily-task-label {
    color: #d8e8ff !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.daily-reward-cell {
    justify-content: center !important;
}

.daily-reward-extra {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 13px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,0.30) !important;
    border: 1px solid rgba(120,190,255,0.18) !important;
    color: #d8f3ff !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.daily-reward-plus {
    color: #73d9ff !important;
    font-weight: 900 !important;
}

/* Keep table cells vertically centered */
.wikitable td,
.wikitable th {
    vertical-align: middle !important;
}

/* Monster chip inside daily tables */
.wikitable .monster-link-chip {
    margin: 0 !important;
}
Retrieved from "https://wiki.timero.com.br/index.php?title=MediaWiki:Common.css&oldid=558688"