MediaWiki:Common.css: Difference between revisions

From TimeRO Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(41 intermediate revisions by the same user not shown)
Line 1: Line 1:
/**************************************
/* ═══════════════════════════════════════════════════════════════════════
   Global & Body
  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 {
html, body {
  margin: 0;
    background:
  padding: 0;
        radial-gradient(circle at 15% 10%, rgba(0,212,255,0.045), transparent 22%),
  background-color: #f9f9f9;  
        radial-gradient(circle at 85% 12%, rgba(143,99,255,0.045), transparent 22%),
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        linear-gradient(180deg,
  color: #202122;
            var(--timero-bg-0)  0%,
  line-height: 1.6;
            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;
}
}


/* Override default link style */
html, body,
a {
.mw-body, #content,
  color: #0645AD;
.mw-parser-output,
  text-decoration: none;
.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;
}
}
a:hover,
 
a:focus {
 
  text-decoration: underline;
/* ════════════════════════════════════════════════════════
  §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,
  Headings
.vector-header-start,
***************************************/
.vector-header-end,
#firstHeading, /* The main page title */
.vector-page-toolbar-container,
.mw-headline { /* Section headings within content */
.vector-user-links,
  font-weight: normal;
.vector-user-menu,
  margin: 1.3em 0 0.6em 0;
#p-personal,
  line-height: 1.2;
#p-vector-user-menu-overflow {
    background: transparent !important;
    box-shadow: none !important;
}
}
#firstHeading {
 
  font-size: 1.8em;
/* 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;
}
}
.mw-headline {
.vector-header a:hover,
  font-size: 1.5em;
.vector-sticky-header a:hover,
  margin-top: 1.5em;
.vector-page-toolbar a:hover,
#mw-head a:hover,
#mw-navigation a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}
}


/**************************************
/* Nav tabs */
  Site Notice (if used)
.vector-menu-tabs .vector-menu-content-list,
***************************************/
.vector-menu-tabs-legacy .vector-menu-content-list,
#siteNotice {
.vector-page-toolbar-container { background: transparent !important; }
  margin: 0;
 
  padding: 0.5em 1em;
.vector-menu-tabs li,
  background-color: #fff8c4;
.vector-menu-tabs-legacy li {
  border-bottom: 1px solid #ddd;
    background: transparent !important;
  font-size: 0.95em;
    border-color: var(--timero-border) !important;
  left: 2em;
}
.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 */
  Navigation (Vector/MonoBook panels)
#mw-panel,
***************************************/
.vector-column-start,
#mw-head, /* top part of Vector skin with logo and tabs */
.vector-sidebar,
#mw-head-base {
.vector-sidebar-container,
  background-color: #ffffff;
.vector-menu,
  border-bottom: 1px solid #ddd;
.vector-menu-portal,
  left: 2em !important;
.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;
}
}
#mw-panel {
.vector-menu-portal, .portal {
  background-color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 0.5em 1em;
    background: transparent !important;
  border-right: 1px solid #ddd;
}
}
#mw-panel .portal {
.vector-menu-heading, #mw-panel h3, .portal h3 {
  margin-bottom: 1em;
    color: #ffffff !important;
    font-family: var(--timero-font-display) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
}
}
#mw-panel .portal h3 {
#mw-panel a, .vector-column-start a,
  margin-top: 0.5em;
.vector-sidebar a, .vector-menu a, .portal a {
  font-size: 1.1em;
    color: #bfe8ff !important;
  border-bottom: 1px solid #ccc;
    text-decoration: none !important;
  padding-bottom: 0.2em;
    transition: color .15s;
}
}
#mw-panel .portal ul {
#mw-panel a:hover, .vector-column-start a:hover,
  list-style: none;
.vector-sidebar a:hover, .vector-menu a:hover, .portal a:hover {
  margin: 0;
    color: #ffffff !important;
  padding: 0;
}
}
#mw-panel .portal ul li {
.vector-column-start, .vector-column-end { background: transparent !important; }
  margin: 0.4em 0;
 
/* 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));
}
}
#mw-panel .portal ul li a {
 
  text-decoration: none;
/* Footer */
  font-size: 0.95em;
#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 {
  Content Area
    color: #8fdfff !important;
***************************************/
    text-decoration: none !important;
#content, /* Vector container for content */
.mw-body {
  padding: 1em 1.5em;
  margin-left: 12em !important;
}
}
#bodyContent, /* Inside #content */
#footer a:hover, .mw-footer a:hover,
.mw-body-content,
.vector-footer a:hover, .vector-footer-container a:hover {
.mw-parser-output {
    color: #ffffff !important;
  background-color: #fff;
  padding: 1em;
}
}
#footer ul, .mw-footer ul, .vector-footer ul { color: #a9bfd8 !important; }


/* Subheader beneath #firstHeading */
#contentSub {
  font-size: 0.95em;
  color: #555;
  margin-bottom: 1em;
}


/**************************************
/* ════════════════════════════════════════════════════════
  Page Tabs, Personal Tools
  §5  MAIN PAGE — full-bleed, no shell
***************************************/
════════════════════════════════════════════════════════ */
#p-personal ul { /* personal links top-right (username, talk, preferences, etc.) */
body.page-Main_Page #content,
  list-style: none;
body.page-Main_Page .mw-body {
  margin: 0;
    padding: 0 !important; border: none !important;
  padding: 0;
    background: transparent !important;
    box-shadow: none !important; border-radius: 0 !important;
}
}
#p-personal li {
body.page-Main_Page #bodyContent,
  display: inline-block;
body.page-Main_Page .mw-body-content,
  margin: 0 0.5em;
body.page-Main_Page .mw-parser-output {
    background: transparent !important;
    padding: 0 !important; margin: 0 !important;
}
}
#p-personal li a {
body.page-Main_Page #firstHeading,
  text-decoration: none;
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 */
}
}


.vectorTabs li.selected a,
/* article shell: keep the rounded panel but remove inner spacing */
.vectorTabs li.selected a:hover {
body.page-Beginner_Leveling_Guide #bodyContent,
  background-color: #ececec;
body.page-Beginner_Leveling_Guide .mw-body-content,
  color: #202122;
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 */
  Footer
body.page-Beginner_Leveling_Guide #firstHeading,
***************************************/
body.page-Beginner_Leveling_Guide .mw-first-heading,
#footer, .mw-footer,
body.page-Beginner_Leveling_Guide #contentSub,
#mw-footer {
body.page-MVP_Hunting_Guide #firstHeading,
  clear: both;
body.page-MVP_Hunting_Guide .mw-first-heading,
  margin-top: 2em;
body.page-MVP_Hunting_Guide #contentSub,
  padding: 1em;
body.page-Farming_Guide #firstHeading,
  color: #777;
body.page-Farming_Guide .mw-first-heading,
  font-size: 0.9em;
body.page-Farming_Guide #contentSub,
  text-align: center;
body.page-Card_System #firstHeading,
  border-top: 1px solid #ddd;
body.page-Card_System .mw-first-heading,
  background-color: #fff;
body.page-Card_System #contentSub,
}
body.page-Corrida_ao_99 #firstHeading,
#footer a, .mw-footer a {
body.page-Corrida_ao_99 .mw-first-heading,
  color: #0645AD;
body.page-Corrida_ao_99 #contentSub { display: none !important; }
  text-decoration: none;
 
}
/* Article shell: keep rounded panel, hide overflow cleanly */
#footer a:hover {
body.page-Beginner_Leveling_Guide #content,
  text-decoration: underline;
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; }


/**************************************
/* ════════════════════════════════════════════════════════
  Tables
  §7  GENERIC ARTICLE SHELL  (non-custom pages)
***************************************/
════════════════════════════════════════════════════════ */
table {
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,
  border-collapse: collapse;
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 {
  margin: 1em 0;
    background: linear-gradient(180deg, rgba(10,22,40,0.94) 0%, rgba(7,16,29,0.96) 100%) !important;
  width: 100%;
    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;
}
}
table thead {
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,
  background-color: #f2f2f2;
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 {
  font-weight: bold;
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--timero-cyan), var(--timero-purple), transparent);
    opacity: .88;
}
}
table td,
body:not(.page-Main_Page) #bodyContent,
table th {
body:not(.page-Main_Page) .mw-body-content,
  border: 1px solid #ddd;
body:not(.page-Main_Page) .mw-parser-output {
  padding: 0.6em;
    color: var(--timero-text) !important;
    background: transparent !important;
}
}


/**************************************
 
  TOC (Table of Contents)
/* ════════════════════════════════════════════════════════
***************************************/
  §8  TYPOGRAPHY
#toc, .toc {
════════════════════════════════════════════════════════ */
  margin: 1em 0;
.mw-body h1,.mw-body h2,.mw-body h3,
  border: 1px solid #ddd;
.mw-body h4,.mw-body h5,.mw-body h6,
  background-color: #f7f7f7;
#firstHeading,.mw-first-heading {
  padding: 0.6em;
    font-family: var(--timero-font-display) !important;
  font-size: 0.95em;
    color: #ffffff !important;
    letter-spacing: .02em;
    line-height: 1;
}
}
#toc h2, .toc h2 {
body:not(.page-Main_Page) #firstHeading,
  border-bottom: 1px solid #ccc;
body:not(.page-Main_Page) .mw-first-heading {
  margin-top: 0;
    margin-bottom: 18px !important;
  margin-bottom: 0.5em;
    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); }


/**************************************
  Blockquotes
***************************************/
blockquote {
  margin: 1em 2em;
  padding: 0.5em 1em;
  border-left: 3px solid #ccc;
  background-color: #f6f6f6;
  font-style: italic;
}


/**************************************
/* ════════════════════════════════════════════════════════
  Code
  §9  CONTENT FLOW  (no paragraph balloons)
***************************************/
════════════════════════════════════════════════════════ */
pre, code {
body:not(.page-Main_Page) .mw-parser-output > p,
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
body:not(.page-Main_Page) .mw-parser-output > ul,
  background-color: #f3f3f3;
body:not(.page-Main_Page) .mw-parser-output > ol,
  padding: 0.2em 0.4em;
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; }


/**************************************
  Images
***************************************/
img {
  max-width: 100%;
  height: auto;
  border: none;
}


/**************************************
/* ════════════════════════════════════════════════════════
  Utility Classes
  §10  LINKS
***************************************/
════════════════════════════════════════════════════════ */
.clearfix::after {
.mw-body a,
  content: "";
.mw-parser-output a,
  display: table;
.vector-body a {
  clear: both;
    color: #66dfff !important;
    text-decoration: none;
    transition: color .18s, text-shadow .18s;
}
}
.hidden {
.mw-body a:hover,
  display: none !important;
.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; }


'''Common [[Cascading Style Sheets|CSS]] for all skins'''
/* 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; }


'''Notice to Administrators!'''
/* 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);
}


<!--
'''<span style="color: #f00;">Please note that due to caching effects any April Fools' joke placed here can last for several days! So will any block resulting from such actions.</span>'''
--> 


Always check with the [http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fen.wikipedia.org%2Fw%2Findex.php%3Ftitle%3DMediaWiki%3ACommon.css%26action%3Draw%26ctype%3Dtext%2Fcss&usermedium=all W3C CSS Validation Service] ([http://qa-dev.w3.org:8001/css-validator/validator?uri=http%3A%2F%2Fen.wikipedia.org%2Fw%2Findex.php%3Ftitle%3DMediaWiki%3ACommon.css%26action%3Draw%26ctype%3Dtext%2Fcss&warning=2&profile=css3&usermedium=all CVS version]) after any changes.
/* ════════════════════════════════════════════════════════
  §11  LISTS / HR / BLOCKQUOTE / CODE  (article pages)
════════════════════════════════════════════════════════ */
.mw-parser-output ul,
.mw-parser-output ol { padding-left: 1.6rem; }


Thank you.
.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; }


(In [[Mozilla]] and [[Opera (web browser)|Opera]], you can test style changes dynamically with the [http://www.squarefree.com/bookmarklets/webdevel.html test styles] bookmarklet from squarefree.com.  It pops up a window for adding style rules, and updates the page as you type.)


See also the [[Wikipedia:Catalogue of CSS classes|catalogue of CSS classes]].
/* ════════════════════════════════════════════════════════
{{interwiki-all}}
  §12  TOC
<pre><nowiki>*/
════════════════════════════════════════════════════════ */
#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);
}


/**** Added by Frelo for RoseWiki ****/


/* Main Page style */
/* ════════════════════════════════════════════════════════
.roseMainTitle {
  §13  WIKITABLES
     margin:0;
════════════════════════════════════════════════════════ */
     background-color:#3399BB; /*AAAAAA;*/
.wikitable, table.wikitable {
    font-size:120%;
     background: rgba(10,20,36,.94) !important;
    font-weight:bold;
     color: var(--timero-text) !important;
     border:1px solid #117799; /*666666;*/
     border: 1px solid var(--timero-cyan-line) !important;
     text-align:left;
     border-collapse: collapse;
     color:#FFF; /*000;*/
     border-radius: var(--timero-radius-md);
     padding:0.2em 0.4em;
     overflow: hidden;
}
}
 
.wikitable th, table.wikitable th {
.roseMainFrame {
    background: linear-gradient(180deg, rgba(0,212,255,.12), rgba(0,212,255,.06)) !important;
     border: 1px solid #AAAABB; /*666666;*/
    color: #ffffff !important;
     padding: .5em 1em;  
     border: 1px solid var(--timero-border) !important;
     margin: 1em;  
    font-weight: 700;
     background-color: #EEEEFF; /*EEEEEE;*/
     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;
}
}


/**** Added by Resplendent for iRO Wiki ****/


/* Main Page style */
/* ════════════════════════════════════════════════════════
.iwMainTitle {
  §14  FORMS / INPUTS / BUTTONS
    margin:0;
════════════════════════════════════════════════════════ */
    background-color:#a7bdf4; /*AAAAAA;*/
input, select, textarea, button {
     font-family: 'Trebuchet MS', Helvetica, sans-serif;
     font-family: var(--timero-font-body);
    font-size:120%;
    font-weight:bold;
    border:1px solid #a7bdf4; /*666666;*/
    text-align:left;
    color:#3b3b3b; /*000;*/
    padding:0.2em 0.4em;
}
}
 
input[type="text"],input[type="search"],input[type="password"],
.iwMainFrame {
input[type="email"],input[type="number"],
     border: 1px solid #a7d7f9; /*666666;*/
select, textarea,
     padding: .5em 1em;  
.vector-search-box-input,
     margin: 1em;  
.cdx-text-input__input,
     background-color: #e7edfb; /*EEEEEE;*/
#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,
/* Main page fixes */
.vector-search-box-input:focus,
.interwiki-completelist {
.cdx-text-input__input:focus,
     font-weight: bold;
#searchInput:focus {
     outline: none;
    border-color: var(--timero-cyan-line) !important;
    box-shadow: 0 0 0 3px var(--timero-cyan-soft) !important;
}
}
 
button,
/* Add space below the toolbar */
input[type="submit"],
#toolbar {
input[type="button"],
     margin-bottom: 6px;
.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,
/* make the list of references look smaller */
input[type="submit"]:hover,
ol.references {
input[type="button"]:hover {
  font-size: 100%;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,212,255,.22);
}
}


.references-small { font-size: 90%;}


/* VALIDATOR NOTICE: the following is correct, but the W3C validator doesn't accept it */
/* ════════════════════════════════════════════════════════
/* -moz-* is a vendor-specific extension (CSS 2.1 4.1.2.1) */
  §15  CATEGORIES / THUMBS / MESSAGES
/* column-count is from the CSS3 module "CSS Multi-column Layout" */
════════════════════════════════════════════════════════ */
/* Please ignore any validator errors caused by these two lines */
.catlinks {
.references-2column {
    background: rgba(10,20,36,.88) !important;
  font-size: 90%;
    border: 1px solid var(--timero-border) !important;
  -moz-column-count:2;
    border-radius: var(--timero-radius-sm);
  -webkit-column-count:2;
    padding: 10px 12px;
  column-count:2;
}
.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);
}
}


.same-bg { background: none }


/* Highlight clicked reference in blue to help navigation */
/* ════════════════════════════════════════════════════════
  §16  KEYFRAMES — ALL PAGES UNIFIED
  Canonical set: every animation used anywhere in the wiki.
════════════════════════════════════════════════════════ */


ol.references > li:target {
/* ── Universal ── */
background-color: #DEF;
@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 {
sup.reference:target {  
    0%,100% { opacity:1; }
   background-color: #DEF;
    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); } }


/* Styling for Citations */
/* ── Leveling Guide ── */
 
@keyframes guide-phase-in {
cite {
     from { opacity:0; transform:translateY(24px); }
     font-style: normal;
     to  { opacity:1; transform:none; }
     word-wrap: break-word;
}
}
 
@keyframes guide-bar-fill {
/* If there is an inline link to a full citation, the full citation will turn blue when the inline link is clicked */
    from { width:0; opacity:0; }
 
cite:target {
  background-color: #DEF;
}
}
 
@keyframes guide-hero-gradient {
/* Do not expand URLs within citations for printing. The urls should be included explicitly, to avoid confusion */
     0%,100% { background-position: 0  center; }
 
     50%    { background-position: 100% center; }
@media print {
     #content cite a.external.text:after {
        display: none;
     }
}
}
 
@keyframes guide-trophy-float {
/* For linked citation numbers and document IDs, where the number need not be shown on a screen or a handheld, but should be included in the printed version */
     0%,100% { transform:translateY(0) scale(1); }
 
     50%    { transform:translateY(-6px) scale(1.05); }
@media screen, handheld, projection {
     cite *.printonly {
        display: none;
     }
}
}
 
@keyframes guide-dot-pulse {
/* wikitable/prettytable class for skinning normal tables */
    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); }
table.wikitable,
table.prettytable {
  margin: 1em 1em 1em 0;
  background: #e8ebf0;
  border: 1px #aaa solid;
  border-collapse: collapse;
}
}


table.wikitable,
/* ── MVP Guide ── */
table.prettytableclear {
@keyframes mvp-card-in {
  margin: 1em 1em 1em 0;
    from { opacity:0; transform:translateY(20px); }
  background: #f9f9f9;
    to   { opacity:1; transform:none; }
   border: 0px #aaa solid;
  border-collapse: collapse;
}
}
table.wikitable th, table.wikitable td,
@keyframes respawn-pulse {
table.prettytableclear th, table.prettytableclear td {
    0%   { opacity:1; }
   border: 0px #aaa solid;
    100% { opacity:.35; }
  padding: 0.2em;
}
}
 
@keyframes timer-blink {
 
    0%,100% { opacity:1; box-shadow:0 0 8px var(--timero-cyan); }
table.wikitable th, table.wikitable td,
    50%    { opacity:.28; box-shadow:none; }
table.prettytable th, table.prettytable td {
  border: 1px #aaa solid;
  padding: 0.2em;
}
}


table.wikitable th,
/* ── Farming Guide ── */
table.prettytable th {
@keyframes ticker-scroll {
   background: #e8ebf0;
    0%   { transform:translateX(0); }
  text-align: center;
    100% { transform:translateX(-50%); }
}
}
 
@keyframes method-in {
table.wikitable caption,
    from { opacity:0; transform:translateY(12px); }
table.prettytable caption {
    to   { opacity:1; transform:none; }
  margin-left: inherit;
   margin-right: inherit;
  font-weight: bold;
}
}
 
@keyframes route-in {
table.prettytable code,
    from { opacity:0; transform:translateY(8px); }
table.wikitable code {
    to   { opacity:1; transform:none; }
   background-color: transparent;
}
}
 
@keyframes fade-up {  /* alias — same as timero-fade-up */
/* default skin for navigation boxes */
    from { opacity:0; transform:translateY(20px); }
table.navbox {
     to  { opacity:1; transform:none; }
    background-color: #f9f9f9;
    border: 1px solid #aaa;
     clear: both;
    font-size: 90%;
    margin: 1em 0em 0em;
    padding: 2px;
    text-align: center;
    width: 100%;
}
}


table.navbox th {
/* ── Card System ── */
     background-color: #ccf;
@keyframes card-row-in {
     padding-left: 1em;
     from { opacity:0; transform:translateY(6px); }
    padding-right: 1em;
     to  { opacity:1; transform:none; }
}
}
 
@keyframes detail-expand {
table.navbox tr:not(:first-child) th {
    from { opacity:0; transform:translateY(-5px); }
     background-color: #ddf;
     to  { opacity:1; transform:none; }
}
}
@keyframes rune-spin { to { transform:rotate(360deg); } }


 
/* ── Corrida ao 99 / Podium ── */
.collapseButton {        /* 'show'/'hide' buttons created dynamically by the        */
@keyframes fireRise {
     float: right;       /* CollapsibleTables JavaScript in [[MediaWiki:Common.js]] */
     0%,100% { transform:scaleY(1) translateY(0); }
     font-weight: normal;    /* are styled here so they can be customised.         */
     50%    { transform:scaleY(1.06) translateY(-3px); }
    text-align: right;
    width: auto;
}
}
 
@keyframes podiumRise {
@media print {
     from { opacity:0; transform:translateY(40px) scale(.95); }
     .navbox {
    to  { opacity:1; transform:none; }
        display: none;
    }
}
}
 
@keyframes goldShine {
/* Infobox template style */
    0%      { background-position:-200% center; }
 
    60%,100% { background-position: 200% center; }
.infobox {
  border: 1px solid #aaa;
  background-color: #f9f9f9;
  color: black;
  margin-bottom: 0.5em;
  margin-left: 1em;
  padding: 0.2em;
  float: right;
  clear: right;
}
}
.infobox td,
@keyframes raceLines {
.infobox th {
    from { background-position:0 0; }
  vertical-align: top;
    to  { background-position:0 80px; }
}
}
.infobox caption {
@keyframes countFlip {
  font-size: larger;
    from { opacity:0; transform:translateY(-12px); }
  margin-left: inherit;
    to  { opacity:1; transform:none; }
}
}
.infobox.bordered {
@keyframes haloSpin { to { transform:rotate(360deg); } }
  border-collapse: collapse;
@keyframes bgBreath {
    0%  { filter:brightness(1); }
    100% { filter:brightness(1.07) saturate(1.10); }
}
}
.infobox.bordered td,
@keyframes nebulaShift {
.infobox.bordered th {
    0%  { filter:brightness(1); }
  border: 1px solid #aaa;
    100% { filter:brightness(1.06) saturate(1.08); }
}
}
.infobox.bordered .borderless td,
@keyframes revealUp {
.infobox.bordered .borderless th {
    from { opacity:0; transform:translateY(18px); filter:blur(3px); }
  border: 0;
    to  { opacity:1; transform:none; filter:none; }
}
}


.infobox.sisterproject {
 
   width: 20em;
/* ════════════════════════════════════════════════════════
   font-size: 90%;
  §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);
}
}


@media print {
 
    .infobox.sisterproject {
/* ════════════════════════════════════════════════════════
        display: none;
  §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);
}
}


/* styles for bordered infobox with merged rows */
.timero-wiki-root > div,
.infobox.bordered .mergedtoprow td,
#leveling-guide-root > div,
.infobox.bordered .mergedtoprow th {
#mvp-guide-root > div,
  border: 0;
#farming-guide-root > div,
  border-top: 1px solid #aaa;
#card-system-root > div {
  border-right: 1px solid #aaa;
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
}


.infobox.bordered .mergedrow td,
/* headings — strip wiki borders, use display font */
.infobox.bordered .mergedrow th {
.timero-wiki-root h1, .timero-wiki-root h2, .timero-wiki-root h3,
  border: 0;
.timero-wiki-root h4, .timero-wiki-root h5, .timero-wiki-root h6,
  border-right: 1px solid #aaa;
#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;
}


/* styles for geography infoboxes, e.g. countries, country subdivisions, cities, etc. */


.infobox.geography {
/* ════════════════════════════════════════════════════════
   text-align: left;
   §19  LEVELING GUIDE  (#leveling-guide-root)
  border-collapse: collapse;
   Accent: green #00ff88. Phase nav, bars, checklists.
   line-height: 1.2em;
════════════════════════════════════════════════════════ */
  font-size: 90%;
#leveling-guide-root {
    background: #05080f;
}
}


.infobox.geography  td,
/* Phase navigator — ensure it sits above the article shell header */
.infobox.geography  th {
#phase-nav {
  border-top: solid 1px #aaa;
    z-index: 9800 !important;
  padding: 0.4em 0.6em 0.4em 0.6em;
    transition: background .15s;
}
}
.infobox.geography .mergedtoprow td,
#phase-nav a.pnav-item {
.infobox.geography .mergedtoprow th {
    transition: background .15s, color .15s;
  border-top: solid 1px #aaa;
    border-radius: 8px;
  padding: 0.4em 0.6em 0.2em 0.6em;
    margin: 0 4px;
    text-decoration: none !important;
}
}
#phase-nav a.pnav-item:hover { background: rgba(0,255,136,.09) !important; }


.infobox.geography .mergedrow td,
/* Class filter bar — sticky above content */
.infobox.geography .mergedrow th {
#leveling-guide-root > div:nth-child(4) {
      border: 0;
    position: sticky;
      padding: 0 0.6em 0.2em 0.6em;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
}


.infobox.geography .mergedbottomrow td,
/* Phase blocks */
.infobox.geography .mergedbottomrow th {
.phase-block {
  border-top: 0;
    animation: guide-phase-in .65s cubic-bezier(.22,1,.36,1) both;
  border-bottom: solid 1px #aaa;
  padding: 0 0.6em 0.4em 0.6em;
}
}
#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; }


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


/* Style for "notices" */
/* Monster entries */
.notice {
.mob-entry {
     margin: 1em;
     transition: border-color .18s, box-shadow .18s;
     padding: 0.2em;
     cursor: pointer;
}
}
.mob-entry:hover { box-shadow: 0 4px 16px rgba(0,0,0,.36); }


#disambig {
/* Checklist items */
     border-top: 1px solid #ccc;  
.check-item {
     border-bottom: 1px solid #ccc;
     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;
}
}


.spoiler {
/* Accordion */
    border-top: 2px solid #ddd;
.accord-head { transition: background .15s; cursor: pointer; }
    border-bottom: 2px solid #ddd;
.accord-head:hover { background: rgba(255,255,255,.068) !important; }
}
.accord-icon { transition: transform .22s cubic-bezier(.22,1,.36,1); }


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


.Talk-Notice  {
/* Guide bar-fill: animate on scroll via IntersectionObserver (JS handles it),
    border: 1px solid #C0C090;
  this just ensures the CSS transition is present as fallback */
    background-color: #F8EABA;
[style*="animation:guide-bar-fill"] {
    margin-bottom: 3px;
     animation-play-state: paused;
    width: 85%;
    border-spacing: 3px;
     margin-left: auto;
    margin-right: auto;
}
}


.Talk-Notice:after {
/* Hero title shimmer */
  content: "The CSS for this template should be changed. See [[Wikipedia:Template Standardisation]].";
#leveling-guide-root [style*="background:linear-gradient(90deg,#00ff88,#00d4ff)"] {
    background-size: 200% auto;
    animation: guide-hero-gradient 4s ease infinite;
}
}


/* Make template background appear correctly on all browsers */
/* Trophy float */
.Talk-Notice td {
[style*="font-size:2.5rem;margin-bottom:8px"] {
     background: inherit;
     display: inline-block;
    animation: guide-trophy-float 3s ease-in-out infinite;
}
}


/* Persondata */
table.persondata {
    border: 1px solid #aaa;
    display: none;
    speak: none;
}
.persondata-label {
    color: #aaa;
}


/* Makes redirects appear in italics in categories and on [[Special:Allpages]] */
/* ════════════════════════════════════════════════════════
.redirect-in-category, .allpagesredirect {
  §20  MVP HUNTING GUIDE  (#mvp-guide-root)
     font-style: italic;
  Accent: crimson #ff3d5a + fire #ff6b00.
════════════════════════════════════════════════════════ */
#mvp-guide-root {
     background: #04060d;
}
}


/* Class for links with loudspeaker icon next to them */
/* Tier filter bar — sticky with high z-index */
/* (Used in [[Template:Audio]] and the like to make the speaker clickable) */
#tier-filter-bar {
 
     position: sticky;
.audiolink a {
    top: 0;
     background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/11px-Loudspeaker.svg.png") center left no-repeat !important;
    z-index: 300;
     padding-left: 16px !important;
     backdrop-filter: blur(18px) saturate(1.2);
     padding-right: 0 !important;
     -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
}


/* Icons for medialist templates [[Template:Listen]], [[Template:Multi-listen_start]], [[Template:Video]], [[Template:Multi-video_start]] */
/* Tier/sort buttons */
 
.tf-btn, .sort-btn {
div.listenlist {
     transition: opacity .18s, background .18s, transform .15s;
     background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/30px-Gnome-speakernotes.png");
     cursor: pointer;
     padding-left: 40px;
}
}
.tf-btn:hover, .sort-btn:hover { transform: translateY(-2px); }


div.videolist, div.multivideolist {
/* Boss cards */
     background: url("http://upload.wikimedia.org/wikipedia/en/thumb/2/20/Tango-video-x-generic.png/40px-Tango-video-x-generic.png");
.boss-card {
     padding-left: 50px;
     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; }


/* Style rules for media list templates */
/* Boss dossier expand */
.boss-dossier { animation: detail-expand .3s ease both; }


div.medialist {
/* Boss chevron */
     min-height: 50px;
.boss-chevron {
    margin: 1em;
     transition: transform .22s cubic-bezier(.22,1,.36,1);
    background-position: top left;
     display: inline-block;
     background-repeat: no-repeat;
}
}


div.medialist ul {
/* Respawn pulse bar */
    list-style-type: none;
[style*="animation:respawn-pulse"] {
     list-style-image: none;
     animation: respawn-pulse 2s ease-in-out infinite alternate;
    margin: 0;
}
}


div.medialist ul li {
/* Timer blink dot */
     padding-bottom: 0.5em;
[style*="animation:timer-blink"] {
     animation: timer-blink 1.2s ease infinite;
}
}


div.medialist ul li li {
/* Class MVP accordion */
     font-size: 91%;
.class-mvp-row { cursor: pointer; }
     padding-bottom: 0;
.class-chevron {
     transition: transform .22s cubic-bezier(.22,1,.36,1);
     display: inline-block;
}
}


/* Change the external link icon to an Adobe icon for all PDF files */
/* Manual timer input fields */
/* (in browsers that support these CSS selectors, like Mozilla and Opera) */
#manual-mvp-name:focus,
#bodyContent a[href$=".pdf"].external,  
#manual-mvp-respawn:focus {
#bodyContent a[href*=".pdf?"].external,
    border-color: rgba(0,212,255,.38) !important;
#bodyContent a[href*=".pdf#"].external,
     box-shadow: 0 0 0 3px rgba(0,212,255,.10) !important;
#bodyContent a[href$=".PDF"].external,  
     outline: none;
#bodyContent a[href*=".PDF?"].external,  
#bodyContent a[href*=".PDF#"].external {
     background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Icons-mini-file_acrobat.gif/15px-Icons-mini-file_acrobat.gif) center right no-repeat;
     padding-right: 16px;
}
}


/* Change the external link icon to an Adobe icon anywhere the PDFlink class */
/* is used (notably Template:PDFlink). This works in IE, unlike the above. */
span.PDFlink a {
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Icons-mini-file_acrobat.gif/15px-Icons-mini-file_acrobat.gif) center right no-repeat !important;
    padding-right: 17px !important;
}


span.geolink a {
/* ════════════════════════════════════════════════════════
    background: url(http://upload.wikimedia.org/wikipedia/en/a/a7/Monobook-globe.png) center right no-repeat !important;
  §21  FARMING GUIDE  (#farming-guide-root)
     padding-right: 11px !important;
  Accent: gold #f9c500. Ticker, method tabs, routes, calc.
════════════════════════════════════════════════════════ */
#farming-guide-root {
     background: #030508;
}
}


/* Content in columns with CSS instead of tables [[Template:Columns]] */
/* Market ticker */
div.columns-2 div.column {
.ticker-track {
     float: left;
     animation: ticker-scroll 38s linear infinite;
    width: 50%;
    min-width: 300px;
}
}
.ticker-track:hover { animation-play-state: paused; }


div.columns-3 div.column {
/* Method tab hover */
     float: left;
#methods-section button {
    width: 33.3%;
     transition: background .18s, color .18s, font-weight .1s;
    min-width: 200px;
}
}


div.columns-4 div.column {
/* Route pills */
     float: left;
.route-pill {
     width: 25%;
     transition: transform .18s, box-shadow .18s, opacity .18s;
    min-width: 150px;
     cursor: pointer;
}
}
.route-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.40); }


div.columns-5 div.column {
/* Route detail card */
    float: left;
.route-detail { animation: route-in .3s ease both; }
    width: 20%;
    min-width: 120px;
}


/*Add formatting to make sure that "external references" from [[Template:Ref]] do
/* Method panel */
  not get URL expansion, not even when printed. The mechanism up to MediaWiki 1.4 was
.method-panel { animation: method-in .3s ease both; }
  that the HTML code contained a SPAN following the anchor A; this SPAN had the class
  "urlexpansion", which was not displayed on screen, but was shown when the medium was
  "print". The rules below ensure (a) that there is no extra padding to the right of
  the anchor (displayed as "[<number>]"), (b) that there is no "external link arrow" for
  the link, and (c) that this SPAN of class "urlexpansion" is never shown.
  [[User:Ema|Ema]] ([[User talk:Ema|talk]]) 18:12, 23 April 2020 (UTC)
*/


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


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


/* Make sure that ext links displayed within "plainlinksneverexpand" don't get
/* Calculator inputs */
  the arrow...
#calc-method:focus {
*/
    border-color: rgba(0,212,255,.38) !important;
.plainlinksneverexpand a {
    box-shadow: 0 0 0 3px rgba(0,212,255,.10) !important;
  background: none !important;
    outline: none;
  padding: 0 !important;
}
#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;
}
}


/* With MediaWiki 1.5, the mechanism has changed: instead of a SPAN of class "urlexpansion"
/* Related guide cards */
  following the anchor A, the anchor itself now has class "external autonumber" and the
#farming-guide-root [style*="padding:20px 18px;border-radius:14px"],
  expansion is inserted when printing (see the common printing style sheet at
#card-system-root [style*="padding:18px 16px;border-radius:12px"] {
  http://en.wikipedia.org/skins-1.5/common/commonPrint.css) using the ":after" pseudo-
    transition: transform .2s ease, box-shadow .2s ease;
  element of CSS. We have to switch this off for links due to Template:Ref!
  [[User:Ema|Ema]] ([[User talk:Ema|talk]]) 18:12, 23 April 2020 (UTC)
*/
.plainlinksneverexpand a.external.text:after {
  display: none !important;
}
}
.plainlinksneverexpand a.external.autonumber:after {
#farming-guide-root [style*="padding:20px 18px;border-radius:14px"]:hover,
  display: none !important;
#card-system-root [style*="padding:18px 16px;border-radius:12px"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,.50);
}
}


/* Messagebox templates */


.messagebox {
/* ════════════════════════════════════════════════════════
   border: 1px solid #aaa;
   §22  CARD SYSTEM  (#card-system-root)
   background-color: #f9f9f9;
   Accent: arcane violet #7c6aff + collection gold #f9c500.
  width: 45%;
════════════════════════════════════════════════════════ */
  text-align: center;
#card-system-root {
  margin: 0 auto 1em auto;
    background: #030408;
  padding: .2em;
}
}
.messagebox.merge {
 
  border: 1px solid #c0b8cc;
/* Live search */
  background-color: #f0e5ff;
#card-search {
  text-align: center;
    transition: border-color .18s, box-shadow .18s;
}
}
.messagebox.cleanup {
 
  border: 1px solid #9f9fff;
/* Category tabs */
  background-color: #efefff;
#card-db-section button {
  text-align: center;
    transition: background .16s, color .16s;
}
}
.messagebox.standard-talk {
 
  border: 1px solid #c0c090;
/* Table rows */
  background-color: #f8eaba;
.card-row {
    animation: card-row-in .25s ease both;
    transition: background .14s;
    cursor: pointer;
}
}
.messagebox.nested-talk {
.card-row:hover { background: rgba(124,106,255,.07) !important; }
  border: 1px solid #c0c090;
 
  background-color: #f8eaba;
/* Sort indicators */
  width: 100%;
.th-cell.sortable {
  margin: 2px 4px 2px 4px;
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
}
.messagebox.small {
.th-cell.sortable:hover { color: #9d8fff !important; }
  width: 238px;
.sort-ind { transition: color .15s; }
  font-size: 85%;
 
  float: right;
/* Collection group cards */
  clear: both;
.cg-card {
  margin: 0 0 1em 1em;
    transition: box-shadow .2s;
  line-height: 1.25em;  
    cursor: pointer;
}
}
.messagebox.small-talk {
.cg-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.45); }
  width: 238px;
.cg-chevron {
  font-size: 85%;
    transition: transform .22s cubic-bezier(.22,1,.36,1);
  float: right;
    display: inline-block;
  clear: both;
  margin: 0 0 1em 1em;
  line-height: 1.25em;  
  background: #F8EABA;
}
}


/* Article message box template styles */
/* FAQ entries */
table.ambox {
.faq-entry > div:first-child {
  width: 80%;  
    cursor: pointer;
  margin: 0 auto;
    transition: background .15s;
  border-collapse: collapse;
  background: #fbfbfb;
  border: 1px solid #aaa;  
  border-left: 10px solid #1e90ff;      /* Default "notice" blue */
}
}
table.ambox th, table.ambox td {     /* The message body cell(s) */
.faq-entry > div:first-child:hover { background: rgba(255,255,255,.06) !important; }
  padding: 0.25em 0.5em;             /* 0.5em left/right */
.faq-chev {
    transition: transform .22s ease;
    display: inline-block;
}
}
table.ambox td.ambox-image {          /* The left image cell */
 
  width: 52px;
/* Rune spin ornament */
  padding: 2px 0px 2px 0.5em;        /* 0.5em left, 0px right */
[style*="animation:rune-spin"] {
  text-align: center;  
    animation: rune-spin 18s linear infinite;
}
}
table.ambox td.ambox-imageright {    /* The right image cell */
 
  width: 52px;
 
  padding: 2px 4px 2px 0px;          /* 0px left, 4px right */
/* ════════════════════════════════════════════════════════
  text-align: center;  
  §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;
}
}
table.ambox-notice {
 
  border-left: 10px solid #1e90ff;      /* Blue */
/* Background animation */
/* border-right: 10px solid #1e90ff; */  /* If you want two blue bars */
[style*="animation:bgBreath"],
[style*="animation:nebulaShift"] {
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
}
table.ambox-serious {
[style*="animation:raceLines"] {
  border-left: 10px solid #b22222;       /* Red */
    animation: raceLines 1.5s linear infinite;
}
}
table.ambox-content {
[style*="animation:haloSpin"] {
  border-left: 10px solid #f28500;       /* Orange */
    animation: haloSpin 58s linear infinite;
}
}
table.ambox-style {
 
  border-left: 10px solid #f4c430;       /* Yellow */
/* 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;
}
}
table.ambox-merge {
.podium-slot:hover .podium-block-inner {
  border-left: 10px solid #9932cc;       /* Purple */
    box-shadow: 0 0 20px rgba(249,197,0,.22);
}
}
table.ambox-growth {
 
  border-left: 10px solid #228b22;       /* Green */
/* 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%);
}
}
table.ambox-protection {
.prize-badge:hover::before {
  border-left: 10px solid #bba;          /* Gray */
     transform: translateX(200%);
}
     transition: transform .55s ease;
table.ambox.ambox-mini {                /* small floating box variant */
    float: right;
    clear: right;
     margin: 0 0 0 1em;
     width: 25%;
}
}


/* Put a checker background at the image description page only visible if the image has transparent background */
/* 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; }


#file img {background: url("http://upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat;}
/* 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); }


/* Support for Template:IPA, Template:Unicode and Template:Polytonic. The inherit declaration resets the font for all browsers except MSIE6.  The empty comment must remain. Please copy any changes to [[Template:IPA fonts]] and [[Template:Unicode fonts]]. */
.IPA {
        font-family: "Chrysanthi Unicode", "Doulos SIL", Gentium, GentiumAlt, Code2000, "TITUS Cyberbit Basic", "DejaVu Sans", "Bitstream Cyberbit", "Arial Unicode MS", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "Matrix Unicode";
        font-family /**/:inherit;
}
.Unicode {
        font-family: Code2000, Code2001, "Free Serif", "TITUS Cyberbit Basic", "Doulos SIL", "Chrysanthi Unicode", "Bitstream Cyberbit", "Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt, "Lucida Grande", "Free Sans", "Arial Unicode MS", "Microsoft Sans Serif", "Lucida Sans Unicode";
        font-family /**/:inherit;
}
.latinx {
        font-family: Code2000, Code2001, "TITUS Cyberbit Basic", "Microsoft Sans Serif";
        font-family /**/:inherit;
}
.polytonic {
        font-family: Athena, Gentium, "Palatino Linotype", "Arial Unicode MS", "Lucida Sans Unicode", "Lucida Grande", Code2000;
        font-family /**/:inherit;
}
.mufi {
        font-family: Alphabetum, Cardo, LeedsUni, Junicode, "TITUS Cyberbit Basic", ALPHA-Demo;
}


/* pseudo-classes in support of [[Template:lang]]. */
/* ════════════════════════════════════════════════════════
  §24  MAIN PAGE COMPONENT CLASSES
  All .timero-* and .timero-db2-* preserved exactly.
════════════════════════════════════════════════════════ */


:lang(he) {
/* ── Guide card section ── */
      font-family: "SBL Hebrew", "Ezra SIL SR", "Ezra SIL", Cardo, "Chrysanthi Unicode", "TITUS Cyberbit Basic", "Arial Unicode MS", Narkisim, "Times New Roman";
.timero-guides-section {
      font-family /**/:inherit;
    width: min(1180px, calc(100% - 42px));
    margin: 0 auto;
    padding: 72px 0 36px;
}
}
:lang(fa) {
.timero-guides-head { text-align: center; margin-bottom: 38px; }
      font-family: "Nafees Nastaleeq", "Pak Nastaleeq", PDMS_Jauhar;
.timero-guides-kicker {
      font-family /**/:inherit;
    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;
}
}
:lang(ps) {
.timero-guides-head h2 {
      font-family: "Nafees Nastaleeq", "Pak Nastaleeq", PDMS_Jauhar;
    margin: 0 0 10px;
      font-family /**/:inherit;
    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);
}
}
:lang(ur) {
.timero-guides-head p { margin:0; font-size:1rem; color:rgba(108,152,214,.88); letter-spacing:.02em; }
      font-family: "Nafees Nastaleeq", "Pak Nastaleeq", PDMS_Jauhar;
 
      font-family /**/:inherit;
.timero-guides-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
}
:lang(sux-Xsux) {
.timero-guide-card {
      font-family: Akkadian;
    border-radius: 22px; overflow: hidden;
      font-family /**/:inherit;
    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;
}
}
:lang(ja) {
.timero-guide-card:hover { transform: translateY(-4px); }
      font-family: Code2000, "Arial Unicode MS", "Bitstream Cyberbit", "Bitstream CyberCJK", IPAGothic, IPAPGothic, IPAUIGothic, "Kochi Gothic", IPAMincho, IPAPMincho;
.timero-guide-top {
      font-family /**/:inherit;
    min-height: 122px; padding: 26px 26px 20px;
    border-bottom: 1px solid rgba(255,255,255,.06); position: relative;
}
}
:lang(ko) {
.timero-guide-bottom { padding: 20px 22px 22px; background: rgba(3,9,16,.72); }
      font-family: "Adobe Myungjo Std M", AppleMyungjo, "Baekmuk Batang", "Baekmuk Gulim", Batang, Dotum, DotumChe, Gulim, GulimChe, HYGothic-Extra, HYMyeongJo-Extra, "New Gulim", UnBatang, UnDotum, UnYetgul, UWKMJF;
.timero-guide-icon { font-size:1.85rem; margin-bottom:12px; line-height:1; }
      font-family /**/:inherit;
.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);
}
}
:lang(zh-Hans) {
.timero-guide-link a {
      font-family: "Adobe Song Std L", "AR PL ShanHeiSun Uni", "AR PL ShanHeiSun Uni MBE", "MS Hei", "MS Song", SimHei;
    font-family:var(--timero-font-display);
      font-family /**/:inherit;
    font-size:1.02rem; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; text-decoration:none !important;
}
}
:lang(zh-Hant) {
.timero-guide-link a:hover { filter:brightness(1.08); text-decoration:none !important; }
      font-family: "Adobe Ming Std L", "AR PL New Sung", "AR PL ZenKai Uni", "AR PL ZenKai Uni MBE", MingLiU, PMingLiU;
 
      font-family /**/:inherit;
/* 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);
}
}
:lang(grc) {
.timero-guide-card-green .timero-guide-top {
      font-family: Athena, Gentium, "Palatino Linotype", "Arial Unicode MS", "Lucida Sans Unicode", "Lucida Grande", Code2000;
    background:linear-gradient(135deg,rgba(0,112,77,.34) 0%,rgba(0,61,58,.22) 100%);
      font-family /**/:inherit;
    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); }


#wpSave {
.timero-guide-card-red {
  font-weight: bold;
    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 {
/* class hiddenStructure is defunct. See [[Wikipedia:hiddenStructure]] */
    background:linear-gradient(135deg,rgba(70,17,40,.58) 0%,rgba(34,20,70,.30) 100%);
.hiddenStructure {
    border-bottom-color:rgba(255,47,92,.16);
  display: inline ! important;
  color: #f00;
  background-color: #0f0;
}
}
.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); }


/* Removes underlines from links */
.timero-guide-card-gold {
.nounderlines a {
    border-color:rgba(255,176,32,.22);
  text-decoration: none;
    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 {
/* Remove underline from IPA links */
    background:linear-gradient(135deg,rgba(70,52,17,.42) 0%,rgba(36,36,36,.18) 100%);
.IPA a:link, .IPA a:visited {
     border-bottom-color:rgba(255,176,32,.16);
  text-decoration: none;
}
 
/* Removes useless links from printout */
@media print {
     #privacy, #about, #disclaimer {display:none;}
}
}
.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); }


#EnWpMpBook { background-image: url(http://upload.wikimedia.org/wikipedia/en/7/7e/MP-open-book.png); }
/* ── Database section (main page) ── */
#EnWpMpSearch { background: url(http://upload.wikimedia.org/wikipedia/en/a/ae/MP-magnifying-glass.png) no-repeat top right; }
.timero-db2-section {
#EnWpMpSearchInner { float: right; width: 20em; text-align: center; }
    background:linear-gradient(180deg,#07101e 0%,#05080f 100%);
#EnWpMpBook2 { background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/8e/MP-open-book2.png); }
    padding:72px 42px;
 
    border-top:1px solid rgba(255,255,255,.05);
/* Standard Navigationsleisten, aka box hiding thingy from .de.  Documentation at [[Wikipedia:NavFrame]]. */
    border-bottom:1px solid rgba(255,255,255,.05);
 
div.Boxmerge,
div.NavFrame {
        margin: 0px;
        padding: 4px;
        border: 1px solid #aaa;
        text-align: center;
        border-collapse: collapse;
        font-size: 95%;
}
}
div.Boxmerge div.NavFrame {
.timero-db2-head {
        border-style: none;
    width:min(1220px,calc(100% - 40px));
        border-style: hidden;
    margin:0 auto 28px; text-align:center;
}
}
div.NavFrame + div.NavFrame {
.timero-db2-kicker {
        border-top-style: none;
    display:inline-flex; align-items:center;
        border-top-style: hidden;
    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;
}
}
div.NavPic {
.timero-db2-head h2 {
        background-color: #fff;
    margin:0 0 10px; color:#fff !important;
        margin: 0px;
    font-family:var(--timero-font-display) !important;
        padding: 2px;
    font-size:clamp(2rem,3.8vw,3rem); font-weight:900; line-height:1;
        float: left;
    border:none !important;
}
}
div.NavFrame div.NavHead {
.timero-db2-head p { margin:0; color:rgba(130,165,215,.82); font-size:1rem; line-height:1.8; }
        height: 1.6em;
.timero-db2-grid {
        font-weight: bold;
    width:min(1220px,calc(100% - 40px));
        background-color: #ccf;
    margin:0 auto;
        position:relative;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
}
div.NavFrame p {
.timero-db2-quest-row {
        font-size: 100%;
    width:min(1220px,calc(100% - 40px));
    margin:16px auto 0; justify-content:center; align-items:center;
    display:inline-flex;
}
}
div.NavFrame div.NavContent {
.timero-db2-quest { max-width:calc((100% - 48px) / 4); }
        font-size: 100%;
.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;
}
}
div.NavFrame div.NavContent p {
.timero-db2-card:hover { transform:translateY(-4px); filter:brightness(1.03); }
        font-size: 100%;
.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;
}
}
div.NavEnd {
.timero-db2-icon {
        margin: 0px;
    width:56px; height:56px; border-radius:18px;
        padding: 0px;
    display:flex; align-items:center; justify-content:center;
        line-height: 1px;
    font-size:1.45rem; flex:0 0 auto;
        clear: both;
    background:rgba(255,255,255,.04);
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
}
a.NavToggle {
.timero-db2-copy { display:flex; flex-direction:column; min-width:0; }
        position:absolute;
.timero-db2-title {
        top:0px;
    color:#fff; font-family:var(--timero-font-display);
        right:3px;
    font-size:1.6rem; font-weight:800; line-height:1; margin-bottom:6px;
        font-weight:normal;
        font-size:smaller;
}
}
.timero-db2-sub { font-size:.84rem; font-weight:700; letter-spacing:.04em; line-height:1.4; }


/* Coloured watchlist numbers */
/* DB card colour variants */
.mw-plusminus-pos {
.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); }
   color: #006400; /* darkgreen */
.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; }


/* .mw-plusminus-null currently at developer default */
/* 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); }


.mw-plusminus-neg {
/* ── Timero card (general) ── */
  color: #8B0000; /* darkred */
.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); }


.dablink {
/* Timero hero */
  font-style: italic;
.timero-hero {
  padding-left: 2em;
    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); }


.dablink i {
/* Timero button */
  font-style: normal;
.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; }


/* Style for horizontal UL lists */
.horizontal ul {
  padding: 0;
  margin: 0;
}


.horizontal li {  
/* ════════════════════════════════════════════════════════
  padding: 0 0.6em 0 0.4em;
  §25  RESPONSIVE
  display: inline;
════════════════════════════════════════════════════════ */
  border-right: 1px solid;
@media (max-width: 1180px) {
    .timero-db2-grid { grid-template-columns:repeat(2,1fr); }
    .timero-db2-quest { max-width:100%; }
}
}
 
@media (max-width: 980px) {
.horizontal li:last-child {
    .timero-guides-grid { grid-template-columns:1fr; }
  border-right: none;
  padding-right: 0;
}
}
@media (max-width: 900px) {
    /* Leveling guide: hide fixed phase nav */
    #phase-nav { display:none !important; }


/* Geographical coordinates
    .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; }


To display coordinates using the notation in the source code, write this in your User:Username/monobook.css:
    /* Boss grid: 1 column */
  .geo-default { display: inline } .geo-nondefault { display: none }
    #boss-grid { grid-template-columns:1fr !important; }
  .geo-dec { display: inline } .geo-dms { display: inline }


To display coordinates using decimal notation, write this in your User:Username/monobook.css:
    /* Table header + rows: collapse to 3 cols on MVP */
  .geo-default { display: inline } .geo-nondefault { display: inline }
    #tier-filter-bar { padding:12px 16px !important; }
  .geo-dec { display: inline } .geo-dms { display: none }


To display coordinates using DMS notation, write this in your User:Username/monobook.css:
    /* Farming: 1-col grids */
  .geo-default { display: inline } .geo-nondefault { display: inline }
    #methods-section [style*="grid-template-columns:1fr 1fr"],
  .geo-dec { display: none }  .geo-dms { display: inline }
    #routes-section  [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns:1fr !important;
    }


To display coordinates in both decimal and DMS notation, write this in your User:Username/monobook.css:
    /* Card system table: simplified columns on tablet */
  .geo-default { display: inline } .geo-nondefault { display: inline }
    #table-header,
  .geo-dec { display: inline }  .geo-dms { display: inline }
    .card-row {
  .geo-multi-punct { display: inline }
        grid-template-columns:60px 1fr 90px !important;
 
    }
See [[Template:Coor link]] for how these are used.
    #table-header > div:nth-child(4),
 
    #table-header > div:nth-child(5),
Note that the classes "geo", "longitude", and "latitude" are not just styles but also used by the [[Geo microformat]], so the names should not be changed.
    .card-row > div:nth-child(4),
    .card-row > div:nth-child(5) { display:none !important; }


*/
    /* Corrida: podium simplified */
 
    .podium-name { font-size:1.1rem; }
.geo-default { display: inline; }
    .podium-medal { font-size:2.5rem; }
.geo-nondefault { display: none; }
.geo-dms { display: inline; }
.geo-dec { display: inline; }
.geo-multi-punct { display: none; }
 
.longitude .latitude {
  white-space: nowrap;
}
}


/* This is used for the Geo microformat, but no style is needed for now other than .geo-dec. */
@media (max-width: 640px) {
.geo { }
    /* 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;
    }


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


/* When <div class="nonumtoc"> is used on the table of contents, the ToC will display without numbers */
    .timero-db2-grid { grid-template-columns:1fr; }
.nonumtoc .tocnumber { display:none; }
    .timero-db2-link { min-height:96px; padding:16px 18px; }
.nonumtoc #toc ul,
    .timero-db2-title { font-size:1.65rem; }
.nonumtoc .toc ul {
    .timero-db2-sub { font-size:.80rem; }
  line-height: 1.5em;
  list-style: none;
  margin: .3em 0 0;
  padding: 0;
}
.nonumtoc #toc ul ul,
.nonumtoc .toc ul ul {  
margin: 0 0 0 2em;  
}


/* Allow limiting of which header levels are shown in a TOC; <div class="toclimit-3">, for
    /* Corrida */
  instance, will limit to showing ==headings== and ===headings=== but no further (as long as
    .hero-race-num { font-size:clamp(4rem,22vw,8rem) !important; }
  there are no =headings= on the page, which there shouldn't be according to the MoS). */
    .prizes-grid { grid-template-columns:1fr !important; }
.toclimit-2 .toclevel-2 {display:none;}
    .countdown-units { gap:10px; }
.toclimit-3 .toclevel-3 {display:none;}
    .cd-num { font-size:2.4rem !important; }
.toclimit-4 .toclevel-4 {display:none;}
.toclimit-5 .toclevel-5 {display:none;}
.toclimit-6 .toclevel-6 {display:none;}
.toclimit-7 .toclevel-7 {display:none;}


/* Allow transcluded pages to display in lists rather than a table. Compatible in Firefox; incompatible in IE6. */
    /* Farming methods metrics grid */
.listify td {display:list-item}
    [style*="grid-template-columns:1fr 1fr"]:not(#farming-guide-root [style*="gap:16px"]) {
.listify tr {display:block}
        /* Careful not to collapse all 2-col grids — only safe targets */
.listify table {display:block}
    }


/* Styling for Template:Quote */
    /* 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; }


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


blockquote.templatequote div.templatequotecite {
     /* Loadout grid */
     line-height: 1em;
     #loadout-items { grid-template-columns:1fr 1fr !important; }
     text-align: left;
    padding-left: 2em;
    margin-top: 0;
}


blockquote.templatequote div.templatequotecite cite {
    /* Hero CTAs */
    font-size: smaller;
    .timero-hero [style*="display:flex;gap:12px;justify-content:center"] {
        flex-direction:column !important; align-items:center !important;
    }
}
}


div.user-block {
    padding: 5px;
    border: 1px solid #A9A9A9;
    background-color: #FFEFD5;
}


/* Prevents line breaks in links; see docs at Template:Nowraplinks */
/* ════════════════════════════════════════════════════════
  §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; }


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


/* Enables borders on PNG images in IE 5.5 and 6 */
    /* Ensure accordion / dossier content is visible */
 
    .accord-body,
.thumbborder {
    .boss-dossier,
border:1px solid #DDDDDD;
    .method-panel,
}
    .route-detail,
    .faq-body,
    .cg-detail,
    .class-mvp-detail { display:block !important; max-height:none !important; }


/* For template documentation */
    /* Navigation links unnecessary in print */
.template-documentation {
    #footer, .catlinks { display:none; }
  clear: both;
  margin: 25px 0 0 0;
  border: 1px solid #aaa;
  background-color: #ecfcf4;
  padding: 5px;
}
}
 
/* TimeRO monster chips */
/* wikitable/prettytable class for centered normal tables*/
.monster-link-chip {
 
    display: inline-flex !important;
table.wikitablec,
    align-items: center !important;
table.prettytable {
    justify-content: flex-start !important;
  margin: 1em 1em 1em 0;
    vertical-align: middle !important;
  background: #f9f9f9;
    overflow: visible !important;
  border: 1px #aaa solid;
  border-collapse: collapse;
}
}


table.wikitablecenter,
.monster-link-chip .monster-gif-wrap {
table.prettytable {
    width: 54px !important;
  margin-left: auto;
    height: 54px !important;
  margin-right: auto;
    flex: 0 0 54px !important;
  background: #f9f9f9;
    min-width: 54px !important;
  border: 1px #aaa solid;
    max-width: 54px !important;
  border-collapse: collapse;
    display: inline-flex !important;
}
    align-items: center !important;
 
    justify-content: center !important;
table.wikitablec th, table.wikitablec td,
    overflow: visible !important;
table.prettytable th, table.prettytable td {
    line-height: 0 !important;
  border: 1px #aaa solid;
  padding: 0.2em;
  text-align: center;
}
}


table.wikitablec th,
.monster-link-chip .monster-gif-wrap img {
table.prettytable th {
    display: block !important;
  background: #f2f2f2;
    max-width: 50px !important;
  text-align: center;
    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;
}
}


table.wikitablec caption,
.monster-link-chip .monster-name-wrap,
table.prettytable caption {
.monster-link-chip .monster-name-wrap a {
  margin-left: inherit;
    display: inline-flex !important;
  margin-right: inherit;
    align-items: center !important;
  font-weight: bold;
    line-height: 1.1 !important;
    color: #73d9ff !important;
    text-decoration: none !important;
}
}


table.prettytablec code,
/* Daily quest table alignment */
table.wikitablec code {
.wikitable td,
  background-color: transparent;
.wikitable th {
    vertical-align: middle !important;
}
}


table.wikitablecenter th, table.wikitablecenter td,
.wikitable td .monster-link-chip {
table.prettytable th, table.prettytable td {
    margin-top: 4px !important;
  border: 1px #aaa solid;
    margin-bottom: 4px !important;
  padding: 0.2em;
  text-align: center;
}
}
 
/* Daily Quest table layout */
table.wikitablecenter th,
.daily-task-cell,
table.prettytable th {
.daily-reward-cell {
  background: #f2f2f2;
    display: flex !important;
  text-align: center;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-height: 70px !important;
}
}


table.wikitablecenter caption,
.daily-task-label {
table.prettytable caption {
    color: #d8e8ff !important;
  margin-left: inherit;
    font-weight: 700 !important;
  margin-right: inherit;
    white-space: nowrap !important;
  font-weight: bold;
}
}


table.prettytablecenter code,
.daily-reward-cell {
table.wikitablecenter code {
    justify-content: center !important;
  background-color: transparent;
}
}


table.elements {}
.daily-reward-extra {
 
    display: inline-flex !important;
table.elements th, table.elements td {
    align-items: center !important;
padding: 0.5em;
    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;
}
}


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


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


td.nullified {
/* Monster chip inside daily tables */
background-color: #FFBFBF;
.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"