/* Imported from the community wiki's MediaWiki:Common.css.
   Kept verbatim so the armor-*/ep-* layouts render as they did there.
   CC BY-SA 4.0, by Avinere and contributors. */

/* ==========================================================
 Empire of Praxia Wiki Theme v2
 Part 1 - Core Foundation

 Black & Gold Fantasy Theme
 ========================================================== */

@import url(
'https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600;700&display=swap'
);

/* ==========================================================
 1. Theme Variables
 ========================================================== */

:root {

 /* Colors */

 --ep-bg:
 #0b0b0b;

 --ep-bg-light:
 #111111;

 --ep-panel:
 #151515;

 --ep-panel-light:
 #1d1d1d;

 --ep-panel-hover:
 #242424;

 --ep-gold:
 #d4af37;

 --ep-gold-light:
 #ffe27a;

 --ep-border:
 #8b6b21;

 --ep-border-light:
 #b8943f;

 --ep-text:
 #f2f2f2;

 --ep-text-muted:
 #bdbdbd;

 --ep-shadow:
 0 0 20px rgba(0,0,0,.55);

 --ep-gold-shadow:
 0 0 20px rgba(212,175,55,.25);


 /* Sizes */

 --ep-radius:
 14px;

 --ep-radius-small:
 8px;


 /* Fonts */

 --ep-heading-font:
 "Cinzel", serif;

 --ep-body-font:
 "Inter", sans-serif;

}



/* ==========================================================
 2. Fonts (at the top)
 ========================================================== */



/* ==========================================================
 3. Global Reset
 ========================================================== */


html {

 scroll-behavior:
 smooth;

}


body {

 background:
 var(--ep-bg);

 color:
 var(--ep-text);

 font-family:
 var(--ep-body-font);

 font-size:
 16px;

 line-height:
 1.6;

}



/* ==========================================================
 4. Main Wiki Content
 ========================================================== */


#content,
.mw-body {

 background:
 var(--ep-panel);

 color:
 var(--ep-text);

}



#content {

 border:
 1px solid var(--ep-border);

 border-radius:
 var(--ep-radius);

 box-shadow:
 var(--ep-shadow);

}



/* Main article text */

.mw-body-content,
.mw-parser-output {

 color:
 var(--ep-text);

}



.mw-parser-output p,
.mw-parser-output li {

 color:
 var(--ep-text);

}



/* ==========================================================
 5. Typography
 ========================================================== */


.firstHeading,
.mw-page-title-main {

 font-family:
 var(--ep-heading-font);

 color:
 var(--ep-gold);

 font-weight:
 700;

 letter-spacing:
 1px;

 border-bottom:
 2px solid var(--ep-border-light);

 padding-bottom:
 10px;

}



.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {

 font-family:
 var(--ep-heading-font);

 color:
 var(--ep-gold);

 font-weight:
 600;

 letter-spacing:
 .5px;

}



.mw-parser-output h2,
.mw-parser-output h3 {

 border-bottom:
 1px solid var(--ep-border);

}



/* Bold text */

strong,
b {

 color:
 #ffffff;

}



/* ==========================================================
 6. Links
 ========================================================== */


a {

 color:
 var(--ep-gold);

 transition:
 color .2s ease;

}



a:hover {

 color:
 var(--ep-gold-light);

 text-decoration:
 none;

}



/* ==========================================================
 7. Images
 ========================================================== */


.mw-file-element {

 background:
 transparent !important;

}



/* Prevent white boxes behind transparent images */

img {

 background:
 transparent;

}



/* ==========================================================
 8. Tables
 ========================================================== */


.wikitable {

 background:
 var(--ep-panel);

 color:
 var(--ep-text);

 border:
 1px solid var(--ep-border);

 border-radius:
 var(--ep-radius-small);

 overflow:
 hidden;

}



.wikitable th {

 background:
 #4c3910;

 color:
 white;

 font-weight:
 600;

}



.wikitable td {

 background:
 var(--ep-panel);

 color:
 var(--ep-text);

 border-color:
 #444;

}



/* ==========================================================
 9. Forms
 ========================================================== */


input,
textarea,
select {

 background:
 var(--ep-panel-light);

 color:
 white;

 border:
 1px solid var(--ep-border);

 border-radius:
 var(--ep-radius-small);

}



input:focus,
textarea:focus,
select:focus {

 outline:
 none;

 border-color:
 var(--ep-gold);

 box-shadow:
 0 0 10px rgba(212,175,55,.3);

}



/* ==========================================================
 10. Text Selection
 ========================================================== */


::selection {

 background:
 var(--ep-gold);

 color:
 black;

}



/* ==========================================================
 11. Scrollbar
 ========================================================== */


::-webkit-scrollbar {

 width:
 10px;

}



::-webkit-scrollbar-track {

 background:
 var(--ep-bg);

}



::-webkit-scrollbar-thumb {

 background:
 var(--ep-border);

 border-radius:
 10px;

}



::-webkit-scrollbar-thumb:hover {

 background:
 var(--ep-gold);

}



/* ==========================================================
 End Part 1
 Part 2 will add:
 - Vector 2022 header
 - Sidebar
 - Tabs
 - Search
 - Footer
 - User menu
 ========================================================== */
/* ==========================================================
 Empire of Praxia Wiki Theme v2
 Part 2 - Vector 2022 Interface
 ========================================================== */


/* ==========================================================
 12. Vector Header
 ========================================================== */


.vector-header-container,
.vector-sticky-header {

 background:
 linear-gradient(
 180deg,
 #050505,
 #151515
 ) !important;

 border-bottom:
 1px solid var(--ep-border);

}



.vector-sticky-header {

 box-shadow:
 0 5px 20px rgba(0,0,0,.5);

}



/* ==========================================================
 13. Logo Area
 ========================================================== */


.mw-logo {

 filter:
 drop-shadow(
 0 0 8px rgba(212,175,55,.25)
 );

}



.mw-logo-icon {

 background:
 transparent;

}



/* ==========================================================
 14. Sidebar
 ========================================================== */


#mw-panel {

 font-family:
 var(--ep-body-font);

}



.vector-menu-portal {

 background:
 var(--ep-panel);

 border:
 1px solid var(--ep-border);

 border-radius:
 var(--ep-radius-small);

 padding:
 12px;

 margin-bottom:
 15px;

 box-shadow:
 var(--ep-shadow);

}



.vector-menu-heading {

 color:
 var(--ep-gold) !important;

 font-family:
 var(--ep-heading-font);

 font-weight:
 600;

}



.vector-menu-content a {

 color:
 var(--ep-text-muted);

 transition:
 .2s ease;

}



.vector-menu-content a:hover {

 color:
 var(--ep-gold-light);

 background:
 rgba(212,175,55,.08);

 border-radius:
 6px;

}



/* ==========================================================
 15. Page Tabs
 Read / Edit / History
 ========================================================== */


.vector-page-toolbar,
.vector-page-toolbar-container {

 background:
 transparent !important;

}



.vector-menu-tabs,
.vector-menu-dropdown {

 background:
 transparent !important;

}



.vector-menu-tabs .vector-tab a,
.vector-menu-tabs .vector-tab span,
.vector-menu-dropdown .vector-menu-heading {


 background:
 var(--ep-panel);


 color:
 var(--ep-gold) !important;


 border:
 1px solid var(--ep-border);


 border-radius:
 8px 8px 0 0;


 transition:
 .2s ease;

}



.vector-menu-tabs .vector-tab a:hover,
.vector-menu-dropdown .vector-menu-heading:hover {


 background:
 var(--ep-panel-hover);


 color:
 var(--ep-gold-light) !important;


 box-shadow:
 0 0 10px rgba(212,175,55,.25);

}



/* Active tab */


.vector-menu-tabs .selected a,
.vector-menu-tabs .selected span {


 background:

 linear-gradient(
 180deg,
 #3a2a0a,
 #151515
 ) !important;


 color:
 var(--ep-gold-light) !important;


}



/* ==========================================================
 16. Search Bar
 ========================================================== */


.vector-search-box {


 font-family:
 var(--ep-body-font);

}



.vector-search-box-input,
.cdxe-text-input__input,
input[type="search"] {


 background:
 var(--ep-panel-light) !important;


 color:
 white !important;


 border:
 1px solid var(--ep-border) !important;


 border-radius:
 10px !important;


}



.vector-search-box-input::placeholder {

 color:
 var(--ep-text-muted);

}



.vector-search-box-input:focus {


 border-color:
 var(--ep-gold) !important;


 box-shadow:

 0 0 12px rgba(212,175,55,.35);

}



/* ==========================================================
 17. User Menu
 ========================================================== */


.vector-user-links {


 background:
 transparent;

}



.vector-user-links a {


 color:
 var(--ep-gold);

}



.vector-user-links a:hover {


 color:
 var(--ep-gold-light);

}



/* ==========================================================
 18. Dropdown Menus
 ========================================================== */


.vector-dropdown-content {


 background:
 var(--ep-panel) !important;


 border:
 1px solid var(--ep-border) !important;


 border-radius:
 var(--ep-radius-small);


 box-shadow:
 var(--ep-shadow);

}



.vector-dropdown-content a {


 color:
 var(--ep-text);


}



.vector-dropdown-content a:hover {


 background:
 var(--ep-panel-hover);


 color:
 var(--ep-gold-light);

}



/* ==========================================================
 19. Footer
 ========================================================== */


.vector-footer,
.mw-footer {


 background:
 #080808 !important;


 color:
 var(--ep-text-muted);


 border-top:
 1px solid var(--ep-border);


}



.vector-footer a,
.mw-footer a {


 color:
 var(--ep-gold);

}



.vector-footer a:hover,
.mw-footer a:hover {


 color:
 var(--ep-gold-light);

}



/* ==========================================================
 20. Edit Links
 ========================================================== */


.mw-editsection a {


 color:
 var(--ep-gold) !important;


 font-size:
 .85em;


}



.mw-editsection a:hover {


 color:
 var(--ep-gold-light) !important;


}



/* ==========================================================
 21. Hide Table of Contents
 ========================================================== */


#toc,
.toc,
.vector-toc {


 display:
 none !important;


}



/* ==========================================================
 22. Notification Panels
 ========================================================== */


.mw-notification {


 background:
 var(--ep-panel) !important;


 color:
 var(--ep-text);


 border:
 1px solid var(--ep-border);


}



/* ==========================================================
 23. General Buttons
 ========================================================== */


button,
input[type="submit"],
.oo-ui-buttonElement-button {


 background:
 var(--ep-panel);


 color:
 var(--ep-gold);


 border:
 1px solid var(--ep-border);


 border-radius:
 8px;


 transition:
 .2s ease;


}



button:hover,
input[type="submit"]:hover,
.oo-ui-buttonElement-button:hover {


 background:
 var(--ep-panel-hover);


 color:
 var(--ep-gold-light);


 box-shadow:
 0 0 12px rgba(212,175,55,.35);


}



/* ==========================================================
 24. Global Animations
 ========================================================== */


a,
button,
.vector-menu-content a,
.ep-button,
.resource-card {


 transition:
 background .2s ease,
 color .2s ease,
 border-color .2s ease,
 transform .2s ease,
 box-shadow .2s ease;

}



/* ==========================================================
 End Part 2

 Part 3 will add:
 - Empire buttons
 - Resource cards
 - Armor templates
 - Weapon templates
 - Skill pages
 - Monster pages
 - Mobile optimization
 ========================================================== */
/* ==========================================================
 Empire of Praxia Wiki Theme v2
 Part 3 - Custom Wiki Components
 ========================================================== */


/* ==========================================================
 25. Shared Panels
 ========================================================== */


.ep-panel {

 background:
 var(--ep-panel);

 border:
 1px solid var(--ep-border);

 border-radius:
 var(--ep-radius);

 padding:
 25px;

 box-shadow:
 var(--ep-shadow);

}



/* ==========================================================
 26. Main Page Header
 ========================================================== */


.ep-container {

 max-width:
 1100px;

 margin:
 auto;

 padding:
 0 24px;

 box-sizing:
 border-box;

}



.ep-header {

 background:

 linear-gradient(
 135deg,
 #050505,
 #3a2a0a
 );


 color:
 var(--ep-gold);


 padding:
 40px;


 text-align:
 center;


 border:
 2px solid var(--ep-border-light);


 border-radius:
 var(--ep-radius);


 box-shadow:
 var(--ep-gold-shadow);

}



.ep-title {

 font-family:
 var(--ep-heading-font);


 font-size:
 40px;


 font-weight:
 700;


 letter-spacing:
 1px;

}



.ep-subtitle {

 color:
 var(--ep-text);

}



/* ==========================================================
 27. Main Page Button Grid
 ========================================================== */


.ep-grid {

 display:
 grid;


 grid-template-columns:
 repeat(3,1fr);


 gap:
 20px;


 margin-top:
 25px;

}



/* ==========================================================
 28. Wiki Buttons
 ========================================================== */


.ep-button {


 display:
 block;


 background:

 linear-gradient(
 145deg,
 var(--ep-panel-light),
 #090909
 );


 border:
 1px solid var(--ep-border);


 border-radius:
 var(--ep-radius);


 padding:
 25px;


 text-align:
 center;


 font-family:
 var(--ep-heading-font);


 font-size:
 20px;


 font-weight:
 600;


 box-shadow:
 var(--ep-shadow);


}



.ep-button a {

 display:
 block;


 color:
 var(--ep-gold);


 text-decoration:
 none;

}



.ep-button span {


 display:
 block;


 margin-top:
 10px;


 color:
 var(--ep-text-muted);


 font-family:
 var(--ep-body-font);


 font-size:
 13px;


}



.ep-button img {


 display:
 block;


 margin:
 0 auto 12px;


 max-width:
 80px;


}



.ep-button:hover {


 transform:
 translateY(-5px);


 border-color:
 var(--ep-gold-light);


 background:
 var(--ep-panel-hover);


 box-shadow:
 0 0 25px rgba(212,175,55,.4);

}



.ep-button:hover img {


 transform:
 scale(1.08);

}



/* ==========================================================
 29. Level Badge
 ========================================================== */


.ep-level {


 display:
 inline-block;


 background:
 #242424;


 color:
 var(--ep-gold-light);


 border:
 1px solid var(--ep-border);


 border-radius:
 20px;


 padding:
 5px 14px;


 font-weight:
 600;

}



/* ==========================================================
 30. Resource Cards
 ========================================================== */


.resource-card {


 display:
 flex;


 align-items:
 center;


 gap:
 35px;


 margin:
 30px 0;


 padding:
 25px;


 background:
 var(--ep-panel);


 border:
 1px solid var(--ep-border);


 border-radius:
 var(--ep-radius);


 box-shadow:
 var(--ep-shadow);

}



.resource-card:hover {


 border-color:
 var(--ep-gold);


}



.resource-image {


 flex:
 0 0 170px;


 text-align:
 center;

}



.resource-image img {


 image-rendering:
 pixelated;

}



.resource-info {


 flex:
 1;

}



.resource-info h3 {


 margin-top:
 0;


 color:
 var(--ep-gold);


 font-family:
 var(--ep-heading-font);

}



/* ==========================================================
 31. Armor Pages
 ========================================================== */


.armor-container {


 max-width:
 900px;


 margin:
 auto;

}



.armor-header {


 display:
 flex;


 flex-direction:
 column;


 align-items:
 center;


 text-align:
 center;


 background:
 var(--ep-panel);


 border:
 1px solid var(--ep-border);


 border-radius:
 var(--ep-radius);


 padding:
 40px;


 box-shadow:
 var(--ep-shadow);

}



.armor-name {


 font-family:
 var(--ep-heading-font);


 color:
 var(--ep-gold);


 font-size:
 36px;


 font-weight:
 700;

}



.armor-image img {


 max-width:
 250px;


 margin-top:
 25px;

}



.armor-stats {


 margin-top:
 25px;

}



.armor-table {


 width:
 100%;

}



/* ==========================================================
 32. Weapon Pages
 ========================================================== */


.weapon-container {


 max-width:
 900px;


 margin:
 auto;

}



.weapon-header {


 display:
 flex;


 flex-direction:
 column;


 align-items:
 center;


 text-align:
 center;


 background:
 var(--ep-panel);


 border:
 1px solid var(--ep-border);


 border-radius:
 var(--ep-radius);


 padding:
 40px;


 box-shadow:
 var(--ep-shadow);

}



.weapon-name {


 font-family:
 var(--ep-heading-font);


 color:
 var(--ep-gold);


 font-size:
 42px;


 font-weight:
 700;

}



.weapon-image img {


 max-width:
 250px;


}



/* ==========================================================
 33. Monster Grid
 ========================================================== */


.monsters-grid {


 display:
 grid;


 grid-template-columns:
 repeat(2,1fr);


 gap:
 24px;


 max-width:
 900px;


 margin:
 auto;

}



/* ==========================================================
 34. Item Sections
 ========================================================== */


.armor-section,
.weapon-section {


 margin-top:
 35px;

}



.armor-section h2,
.weapon-section h2 {


 font-family:
 var(--ep-heading-font);


 color:
 var(--ep-gold);

}



/* ==========================================================
 35. Category Links
 ========================================================== */


.catlinks {


 background:
 var(--ep-panel);


 border:
 1px solid var(--ep-border);


 border-radius:
 var(--ep-radius-small);


 padding:
 12px;

}



/* ==========================================================
 36. Mobile Optimization
 ========================================================== */


@media(max-width:900px){


 .ep-grid {


 grid-template-columns:
 repeat(2,1fr);

 }


}



@media(max-width:700px){


 .ep-grid,
 .monsters-grid {


 grid-template-columns:
 1fr;

 }



 .resource-card {


 flex-direction:
 column;


 text-align:
 center;

 }



 .ep-title {


 font-size:
 30px;

 }



 .armor-name {


 font-size:
 28px;

 }



 .weapon-name {


 font-size:
 32px;

 }


}



/* ==========================================================
 End Part 3

 Part 4 will add:
 - Page fade animation
 - Advanced polish
 - Infobox redesign
 - Skill page improvements
 - Extra utility classes
 - Final mobile fixes
 ========================================================== */
/* ==========================================================
 Empire of Praxia Wiki Theme v2
 Part 4 - Final Polish & Utilities
 ========================================================== */


/* ==========================================================
 37. Page Fade Animation
 ========================================================== */


@keyframes epPageFade {

 from {

 opacity:
 0;

 transform:
 translateY(12px);

 }


 to {

 opacity:
 1;

 transform:
 translateY(0);

 }

}



.mw-body-content,
.mw-parser-output,
#mw-content-text,
#content {


 animation:

 epPageFade .45s ease-out;


}



/* ==========================================================
 38. Infobox Redesign
 ========================================================== */


.infobox {


 background:
 var(--ep-panel);


 color:
 var(--ep-text);


 border:
 1px solid var(--ep-border);


 border-radius:
 var(--ep-radius);


 overflow:
 hidden;


 box-shadow:
 var(--ep-shadow);


}



.infobox th {


 background:

 linear-gradient(

 90deg,

 #5c430d,

 #b8943f

 );


 color:
 white;


 font-family:
 var(--ep-heading-font);


}



.infobox td {


 background:
 var(--ep-panel);


 color:
 var(--ep-text);


 border-color:
 #333;


}



/* ==========================================================
 39. Crafting Recipe Styling
 ========================================================== */


.recipe {


 display:
 flex;


 align-items:
 center;


 gap:
 10px;


 background:
 var(--ep-panel);


 border:
 1px solid var(--ep-border);


 border-radius:
 var(--ep-radius-small);


 padding:
 10px 15px;


 margin:
 10px 0;


}



.recipe img {


 width:
 32px;


 height:
 32px;


}



/* ==========================================================
 40. Skill Page Sections
 ========================================================== */


.skill-section {


 background:
 var(--ep-panel);


 border:
 1px solid var(--ep-border);


 border-radius:
 var(--ep-radius);


 padding:
 25px;


 margin:
 25px 0;


 box-shadow:
 var(--ep-shadow);


}



.skill-section h2 {


 margin-top:
 0;


 color:
 var(--ep-gold);


 font-family:
 var(--ep-heading-font);


}



/* ==========================================================
 41. Resource Database Tables
 ========================================================== */


.resource-table {


 width:
 100%;


 border-collapse:
 collapse;


}



.resource-table th {


 background:
 #4c3910;


 color:
 white;


}



.resource-table td {


 background:
 var(--ep-panel);


 color:
 var(--ep-text);


}



/* ==========================================================
 42. Item Display Cards
 Future Armor / Weapons / Accessories
 ========================================================== */


.item-card {


 background:
 var(--ep-panel);


 border:
 1px solid var(--ep-border);


 border-radius:
 var(--ep-radius);


 padding:
 25px;


 text-align:
 center;


 box-shadow:
 var(--ep-shadow);


 transition:
 .2s ease;


}



.item-card:hover {


 transform:
 translateY(-5px);


 border-color:
 var(--ep-gold);


 box-shadow:

 0 0 25px rgba(212,175,55,.35);


}



.item-card img {


 max-width:
 200px;


}



/* ==========================================================
 43. Item Names
 ========================================================== */


.item-name {


 font-family:
 var(--ep-heading-font);


 color:
 var(--ep-gold);


 font-size:
 28px;


 font-weight:
 700;


}



/* ==========================================================
 44. Description Text
 ========================================================== */


.description {


 color:
 var(--ep-text);


 line-height:
 1.7;


}



/* ==========================================================
 45. Muted Text
 ========================================================== */


.ep-muted {


 color:
 var(--ep-text-muted);


}



/* ==========================================================
 46. Gold Divider
 ========================================================== */


.ep-divider {


 height:
 1px;


 background:

 linear-gradient(

 90deg,

 transparent,

 var(--ep-gold),

 transparent

 );


 margin:
 30px 0;


}



/* ==========================================================
 47. Glow Effect Utility
 ========================================================== */


.ep-glow {


 box-shadow:

 0 0 20px rgba(212,175,55,.35);


}



/* ==========================================================
 48. Center Utility
 ========================================================== */


.ep-center {


 text-align:
 center;


 margin-left:
 auto;


 margin-right:
 auto;


}



/* ==========================================================
 49. Transparent Image Support
 ========================================================== */


.transparent-image img {


 background:
 transparent !important;


}



/* ==========================================================
 50. Final Mobile Improvements
 ========================================================== */


@media(max-width:600px){


 #content {


 padding:
 15px;


 }



 .ep-header {


 padding:
 25px;


 }



 .wikitable {


 display:
 block;


 overflow-x:
 auto;


 }



 .infobox {


 max-width:
 100%;


 }



 .mw-parser-output img {


 max-width:
 100%;


 height:
 auto;


 }


}



/* ==========================================================
 51. Reduced Motion Support
 ========================================================== */


@media(prefers-reduced-motion: reduce){


 *,
 *::before,
 *::after {


 animation-duration:
 0.01ms !important;


 transition-duration:
 0.01ms !important;


 }


}



/* ==========================================================
 Empire of Praxia Wiki Theme v2
 COMPLETE
 ========================================================== */
/* ==========================================================
 Empire of Praxia v2 Fixes
 Vector 2022 White Override Patch
 ========================================================== */


/* ==========================================================
 Page Header / Top Area
 ========================================================== */


#mw-page-base,
.vector-header-container,
.vector-sticky-header,
.vector-page-titlebar {

 background:
 linear-gradient(
 180deg,
 #050505,
 #151515
 ) !important;

}



/* ==========================================================
 Main Article Background
 ========================================================== */


.mw-page-container,
.mw-body,
.vector-body,
#content {

 background:
 #151515 !important;

 color:
 #f2f2f2 !important;

}



/* ==========================================================
 Infobox Fix
 ========================================================== */


.infobox {

 background:
 #151515 !important;

 color:
 #f2f2f2 !important;

 border:
 1px solid #b8943f !important;

}



.infobox th {

 background:

 linear-gradient(
 90deg,
 #5c430d,
 #b8943f
 ) !important;


 color:
 white !important;

}



.infobox td {

 background:
 #151515 !important;

 color:
 #f2f2f2 !important;

 border-color:
 #333 !important;

}



/* ==========================================================
 Generic Table Fix
 ========================================================== */


.wikitable,
.wikitable tr,
.wikitable td {

 background:
 #151515 !important;

 color:
 #f2f2f2 !important;

}



.wikitable th {

 background:
 #4c3910 !important;

 color:
 white !important;

}



/* ==========================================================
 Top Tabs Fix
 ========================================================== */


.vector-menu-tabs .vector-tab a,
.vector-menu-tabs .vector-tab span {

 background:
 #151515 !important;

 color:
 #d4af37 !important;

 border-color:
 #8b6b21 !important;

}
/* ==========================================================
Visited Link Color Fix
========================================================== */

a:visited {
 color: #c49b2e !important;
}

a:hover {
 color: var(--ep-gold-light) !important;
}

a:active {
 color: var(--ep-gold-light) !important;
}
/* ==========================================================
Remove All Image Size Restrictions
========================================================== */

img,
.mw-file-element,
.mw-parser-output img,
.thumbimage,
.thumbinner img {

 max-width: none !important;
 max-height: none !important;


 image-rendering: pixelated;

}


/* Remove MediaWiki thumbnail size restrictions */

.thumbinner,
.thumb {

 max-width: none !important;
 background: transparent !important;

}


/* Preserve pixel art quality */

img[src$=".gif"],
img[src$=".png"] {

 image-rendering: pixelated;

}
/* ==========================================================
Empire of Praxia - Vector 2022 Clean Tabs Fix
========================================================== */


/* Remove Vector default tab backgrounds */

.vector-menu-tabs,
.vector-menu-tabs ul,
.vector-menu-tabs li,
.vector-menu-dropdown,
.vector-dropdown,
#p-views,
#p-cactions,
#p-namespaces {

 background:transparent !important;

}


/* Main buttons */

.vector-menu-tabs .mw-list-item a,
#p-views .mw-list-item a,
#p-cactions .mw-list-item a,
#p-namespaces .mw-list-item a {

 background:#151515 !important;

 color:#d4af37 !important;

 border:1px solid #8b6b21 !important;

 border-radius:8px !important;

 padding:8px 14px !important;

 box-shadow:none !important;

}


/* Remove Vector's extra borders/shadows */

.vector-menu-tabs .mw-list-item,
.vector-menu-tabs .selected,
.vector-menu-tabs .mw-list-item a {

 box-shadow:none !important;

}


/* Selected tab */

.vector-menu-tabs .selected a,
#p-views .selected a,
#p-cactions .selected a,
#p-namespaces .selected a {

 background:
 linear-gradient(
 180deg,
 #3a2a0a,
 #151515
 ) !important;

 color:#ffe27a !important;

}


/* Hover */

.vector-menu-tabs .mw-list-item a:hover,
#p-views .mw-list-item a:hover,
#p-cactions .mw-list-item a:hover,
#p-namespaces .mw-list-item a:hover {

 background:#242424 !important;

 color:#ffe27a !important;

}


/* ==========================================================
Dropdown Fix
========================================================== */


/* Dropdown button itself */

.vector-dropdown .vector-dropdown-label {

 background:#151515 !important;

 color:#d4af37 !important;

 border:1px solid #8b6b21 !important;

 border-radius:8px !important;

}


/* Dropdown panel */

.vector-dropdown-content,
.vector-menu-dropdown .vector-menu-content {

 background:#151515 !important;

 border:1px solid #8b6b21 !important;

 border-radius:8px !important;

 box-shadow:0 0 20px rgba(0,0,0,.55) !important;

}


/* Remove dropdown white corner pieces */

.vector-dropdown-content::before,
.vector-dropdown-content::after,
.vector-menu-dropdown::before,
.vector-menu-dropdown::after {

 display:none !important;

}


/* Dropdown links */

.vector-dropdown-content a,
.vector-menu-dropdown a {

 color:#d4af37 !important;

}


.vector-dropdown-content a:hover,
.vector-menu-dropdown a:hover {

 background:#242424 !important;

 color:#ffe27a !important;

}
/* ==========================================================
Monster Template
========================================================== */

.monster-container{

 max-width:1000px;

 margin:auto;

}

/* Header */

.monster-header{

 background:
 linear-gradient(
 180deg,
 #202020,
 #111111
 );

 border:1px solid var(--ep-border);

 border-radius:var(--ep-radius);

 padding:35px;

 text-align:center;

 box-shadow:var(--ep-shadow);

 margin-bottom:30px;

}

.monster-name{

 font-family:var(--ep-heading-font);

 font-size:42px;

 color:var(--ep-gold);

 font-weight:700;

 margin-bottom:20px;

 letter-spacing:1px;

}

.monster-header img{

 image-rendering:pixelated;

 background:transparent;

}

/* Information table */

.monster-table{

 width:100%;

 margin-top:25px;

 border-collapse:collapse;

}

.monster-table th{

 width:220px;

 background:
 linear-gradient(
 90deg,
 #5c430d,
 #b8943f
 );

 color:white;

 font-family:var(--ep-heading-font);

 text-align:left;

}

.monster-table td{

 background:var(--ep-panel);

 color:var(--ep-text);

}

/* Drop table */

.drops-table{

 width:100%;

 margin-top:35px;

 border-collapse:collapse;

}

.drops-table th{

 background:
 linear-gradient(
 90deg,
 #5c430d,
 #b8943f
 );

 color:white;

 font-family:var(--ep-heading-font);

}

.drops-table td{

 background:var(--ep-panel);

 color:var(--ep-text);

 vertical-align:middle;

}

.drops-table img{

 image-rendering:pixelated;

 vertical-align:middle;

 margin-right:10px;

}

/* Description */

.monster-container h2{

 color:var(--ep-gold);

 font-family:var(--ep-heading-font);

 margin-top:40px;

 border-bottom:1px solid var(--ep-border);

 padding-bottom:8px;

}

.monster-container p{

 line-height:1.7;

}

/* Map */

.monster-container > img{

 margin-top:25px;

 border:1px solid var(--ep-border);

 border-radius:var(--ep-radius);

 box-shadow:var(--ep-shadow);

}

/* Mobile */

@media(max-width:700px){

.monster-name{

 font-size:30px;

}

.monster-table th{

 width:150px;

}

}
/* ==========================================================
Drop Rate Badges
========================================================== */

.drop-rate{

 display:inline-block;

 min-width:120px;

 text-align:center;

 font-weight:700;

 padding:6px 12px;

 border-radius:999px;

 color:white;

 text-transform:uppercase;

 letter-spacing:.5px;

 border:1px solid rgba(255,255,255,.15);

}

/* Common */

.drop-common{

 background:#2e7d32;

}

/* Uncommon */

.drop-uncommon{

 background:#c9a227;

 color:#111;

}

/* Rare */

.drop-rare{

 background:#ef6c00;

}

/* Super Rare */

.drop-superrare{

 background:#b71c1c;

}
/* Related page navigation cards */

.ep-related {
 display: grid !important;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 25px !important;
 width: 100%;
 align-items: start;
}

.ep-related .ep-button {
 width: auto !important;
 min-height: 180px;
 margin: 0 !important;
}


/* Mobile layout */

@media (max-width: 700px) {

 .ep-related {
 grid-template-columns: 1fr !important;
 }

}
/* Remove empty paragraphs inside button grids */
.ep-grid > p {
 display: none !important;
}
/* ==========================================================
 Empire of Praxia Wiki Theme v3
 Consolidated Overrides and Global Components
 ========================================================== */

/* ==========================================================
 52. Content and Toolbar Spacing
 Keeps page tabs and custom cards away from outer borders.
 ========================================================== */

.vector-page-toolbar-container,
.vector-page-toolbar {
 box-sizing: border-box;
 padding-inline: 12px;
}

/* Vector Legacy fallback */
#left-navigation {
 margin-left: 12px;
}

#right-navigation {
 margin-right: 12px;
}

/* Prevent custom content from touching the article edge. */
.ep-container,
.armor-container,
.weapon-container,
.monster-container {
 box-sizing: border-box;
}

@media (max-width: 700px) {
 .ep-container {
 padding-inline: 12px;
 }

 .vector-page-toolbar-container,
 .vector-page-toolbar {
 padding-inline: 6px;
 }

 #left-navigation {
 margin-left: 6px;
 }

 #right-navigation {
 margin-right: 6px;
 }
}

/* ==========================================================
 53. Contributor Intro
 One consolidated version with particles, glow and letters.
 ========================================================== */

.contrib-intro {
 position: fixed;
 inset: 0;
 z-index: 999999;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 background: #000;
 animation: epIntroFade 1s ease forwards 6s;
}

.contrib-particles {
 position: absolute;
 inset: 0;
 overflow: hidden;
 pointer-events: none;
}

.contrib-particle {
 position: absolute;
 bottom: -20px;
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--ep-gold);
 box-shadow: 0 0 8px var(--ep-gold), 0 0 18px var(--ep-gold-light);
 opacity: .75;
 animation: epParticleFloat linear infinite;
}

.contrib-particle:nth-child(1) { left: 8%; animation-duration: 11s; animation-delay: 0s; }
.contrib-particle:nth-child(2) { left: 16%; animation-duration: 8s; animation-delay: 1s; }
.contrib-particle:nth-child(3) { left: 25%; animation-duration: 10s; animation-delay: .4s; }
.contrib-particle:nth-child(4) { left: 34%; animation-duration: 13s; animation-delay: 1.4s; }
.contrib-particle:nth-child(5) { left: 43%; animation-duration: 9s; animation-delay: .7s; }
.contrib-particle:nth-child(6) { left: 52%; animation-duration: 12s; animation-delay: 1.7s; }
.contrib-particle:nth-child(7) { left: 61%; animation-duration: 10s; animation-delay: .2s; }
.contrib-particle:nth-child(8) { left: 70%; animation-duration: 14s; animation-delay: 1.2s; }
.contrib-particle:nth-child(9) { left: 79%; animation-duration: 9s; animation-delay: .8s; }
.contrib-particle:nth-child(10) { left: 87%; animation-duration: 12s; animation-delay: 1.9s; }
.contrib-particle:nth-child(11) { left: 94%; animation-duration: 10s; animation-delay: .5s; }
.contrib-particle:nth-child(12) { left: 48%; animation-duration: 15s; animation-delay: 2.2s; }

.contrib-box {
 position: relative;
 z-index: 2;
 max-width: calc(100vw - 32px);
 text-align: center;
}

.contrib-box img {
 width: 220px;
 max-width: 60vw;
 height: auto;
 padding: 12px;
 border: 4px solid var(--ep-gold);
 border-radius: 18px;
 opacity: 0;
 transform: translateX(-100px);
 box-shadow: 0 0 12px var(--ep-gold),
 0 0 25px rgba(212,175,55,.6),
 0 0 55px rgba(212,175,55,.35);
 animation: epContributorSlide .9s ease forwards,
 epGlowPulse 2s ease-in-out .9s infinite;
}

.contrib-name {
 margin-top: 22px;
 color: var(--ep-gold-light);
 font-family: var(--ep-heading-font);
 font-size: 56px;
 font-weight: 700;
 line-height: 1.1;
 letter-spacing: 8px;
 text-shadow: 0 0 8px var(--ep-gold),
 0 0 22px rgba(255,226,122,.8);
}

.contrib-name span {
 display: inline-block;
 opacity: 0;
 animation: epLetterReveal .2s ease forwards;
}

.contrib-name span:nth-child(1) { animation-delay: .8s; }
.contrib-name span:nth-child(2) { animation-delay: 1.2s; }
.contrib-name span:nth-child(3) { animation-delay: 1.6s; }
.contrib-name span:nth-child(4) { animation-delay: 2s; }
.contrib-name span:nth-child(5) { animation-delay: 2.4s; }
.contrib-name span:nth-child(6) { animation-delay: 2.8s; }
.contrib-name span:nth-child(7) { animation-delay: 3.2s; }
.contrib-name span:nth-child(8) { animation-delay: 3.6s; }
.contrib-name span:nth-child(9) { animation-delay: 4s; }
.contrib-name span:nth-child(10) { animation-delay: 4.4s; }
.contrib-name span:nth-child(11) { animation-delay: 4.8s; }
.contrib-name span:nth-child(12) { animation-delay: 5.2s; }

.contrib-title,
.contrib-game {
 opacity: 0;
 animation: epFadeUp .7s ease forwards;
}

.contrib-title {
 margin-top: 14px;
 color: #ddd;
 font-size: 22px;
 animation-delay: 2.3s;
}

.contrib-game {
 margin-top: 10px;
 color: #888;
 animation-delay: 2.8s;
}

@keyframes epContributorSlide {
 from { opacity: 0; transform: translateX(-100px); }
 to { opacity: 1; transform: translateX(0); }
}

@keyframes epGlowPulse {
 0%, 100% {
 box-shadow: 0 0 8px var(--ep-gold),
 0 0 20px rgba(212,175,55,.5);
 }
 50% {
 box-shadow: 0 0 20px var(--ep-gold-light),
 0 0 45px rgba(255,226,122,.85);
 }
}

@keyframes epParticleFloat {
 0% { transform: translateY(0) scale(.5); opacity: 0; }
 15% { opacity: 1; }
 100% { transform: translateY(-115vh) scale(1.3); opacity: 0; }
}

@keyframes epLetterReveal {
 from {
 opacity: 0;
 transform: translateY(20px) scale(.8);
 filter: blur(8px);
 }
 to {
 opacity: 1;
 transform: translateY(0) scale(1);
 filter: blur(0);
 }
}

@keyframes epFadeUp {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

@keyframes epIntroFade {
 to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 600px) {
 .contrib-box img {
 width: 150px;
 max-width: 55vw;
 padding: 9px;
 border-width: 3px;
 }

 .contrib-name {
 font-size: 34px;
 letter-spacing: 4px;
 }

 .contrib-title {
 font-size: 16px;
 }

 .contrib-particle {
 width: 4px;
 height: 4px;
 }
}

/* ==========================================================
 54. Optional Template Navigation
 Used only when .ep-nav is placed in page/template content.
 ========================================================== */

.ep-nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 16px;
 box-sizing: border-box;
 margin: 0 0 25px;
 padding: 14px 24px;
 background: linear-gradient(180deg,#161616,#101010);
 border: 1px solid var(--ep-border);
 border-radius: var(--ep-radius);
 box-shadow: var(--ep-shadow);
}

.ep-nav-logo {
 font-family: var(--ep-heading-font);
 font-size: 26px;
 font-weight: 700;
}

.ep-nav-logo a {
 color: var(--ep-gold);
 text-decoration: none;
}

.ep-nav-links {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 24px;
}

.ep-nav-links > a,
.ep-nav-dropdown > span {
 color: var(--ep-text);
 font-weight: 600;
 text-decoration: none;
 cursor: pointer;
}

.ep-nav-links > a:hover,
.ep-nav-dropdown:hover > span {
 color: var(--ep-gold-light);
}

.ep-nav-dropdown {
 position: relative;
}

.ep-nav-menu {
 position: absolute;
 top: calc(100% + 10px);
 left: 0;
 z-index: 500;
 display: none;
 min-width: 190px;
 padding: 8px;
 overflow: hidden;
 background: #161616;
 border: 1px solid var(--ep-border);
 border-radius: 12px;
 box-shadow: 0 10px 25px rgba(0,0,0,.55);
}

.ep-nav-dropdown:hover .ep-nav-menu,
.ep-nav-dropdown:focus-within .ep-nav-menu {
 display: block;
}

.ep-nav-menu a {
 display: block;
 padding: 10px 12px;
 color: var(--ep-text);
 text-decoration: none;
 border-radius: 8px;
}

.ep-nav-menu a:hover {
 color: var(--ep-gold-light);
 background: var(--ep-panel-hover);
}

@media (max-width: 768px) {
 .ep-nav {
 justify-content: center;
 padding: 14px;
 text-align: center;
 }

 .ep-nav-logo {
 width: 100%;
 }

 .ep-nav-links {
 width: 100%;
 justify-content: center;
 gap: 14px;
 }

 .ep-nav-menu {
 left: 50%;
 transform: translateX(-50%);
 }
}

/* ==========================================================
 55. JavaScript-Injected Global Navigation
 Retained for compatibility with the current Common.js.
 ========================================================== */

.ep-global-nav {
 position: sticky;
 top: 0;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 box-sizing: border-box;
 width: min(1100px, calc(100% - 32px));
 margin: 15px auto;
 padding: 12px 24px;
 background: linear-gradient(180deg,#161616,#0d0d0d);
 border: 1px solid var(--ep-border);
 border-radius: var(--ep-radius);
 box-shadow: var(--ep-shadow);
 transition: transform .3s ease;
}

.ep-global-nav.nav-hidden {
 transform: translateY(calc(-100% - 20px));
}

.ep-nav-brand a {
 display: flex;
 align-items: center;
 gap: 12px;
 text-decoration: none;
}

.ep-nav-brand img {
 width: 42px;
 height: 42px;
 object-fit: contain;
}

.ep-nav-title {
 color: var(--ep-gold);
 font-family: var(--ep-heading-font);
 font-size: 24px;
 font-weight: 700;
 line-height: 1.1;
}

.ep-nav-subtitle {
 color: var(--ep-text-muted);
 font-size: 12px;
}

.ep-global-nav .ep-nav-links {
 flex-wrap: nowrap;
}

.ep-nav-dropdown-menu {
 position: absolute;
 top: calc(100% + 8px);
 left: 0;
 z-index: 500;
 display: none;
 min-width: 170px;
 padding: 8px;
 background: #161616;
 border: 1px solid var(--ep-border);
 border-radius: 10px;
 box-shadow: var(--ep-shadow);
}

.ep-nav-dropdown:hover .ep-nav-dropdown-menu,
.ep-nav-dropdown:focus-within .ep-nav-dropdown-menu {
 display: block;
}

.ep-nav-dropdown-menu a {
 display: block;
 padding: 10px;
 border-radius: 8px;
}

.ep-nav-dropdown-menu a:hover {
 background: var(--ep-panel-hover);
}

/* Keep native Vector menus above the custom bar. */
.vector-menu-dropdown .vector-menu-content,
.vector-dropdown-content,
.vector-menu-content,
.vector-dropdown .vector-dropdown-content {
 z-index: 1000 !important;
}

@media (max-width: 900px) {
 .ep-global-nav {
 position: relative;
 top: auto;
 width: calc(100% - 20px);
 margin: 10px auto;
 padding: 15px;
 flex-direction: column;
 gap: 16px;
 }

 .ep-nav-brand,
 .ep-nav-brand a {
 width: 100%;
 justify-content: center;
 text-align: center;
 }

 .ep-global-nav .ep-nav-links {
 width: 100%;
 justify-content: center;
 flex-wrap: wrap;
 gap: 14px;
 }

 .ep-nav-dropdown-menu {
 left: 50%;
 transform: translateX(-50%);
 }
}

/* ==========================================================
 56. Global Footer
 Supports both template footer and Common.js footer classes.
 ========================================================== */

.ep-footer,
.ep-global-footer {
 box-sizing: border-box;
 width: 100%;
 margin-top: 60px;
 padding: 35px 20px;
 text-align: center;
 background: linear-gradient(180deg,#111111,#050505);
 border-top: 1px solid var(--ep-border);
 box-shadow: 0 -10px 30px rgba(0,0,0,.5);
}

.ep-footer-icon img {
 width: 48px;
 height: 48px;
 margin-bottom: 10px;
 object-fit: contain;
}

.ep-footer-title {
 margin-bottom: 15px;
 color: var(--ep-gold);
 font-family: var(--ep-heading-font);
 font-size: 24px;
 font-weight: 700;
}

.ep-footer-links {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: 10px;
 font-size: 15px;
}

.ep-footer-links a,
.ep-footer-links a.external {
 color: var(--ep-gold-light);
 text-decoration: none;
}

.ep-footer-links a:hover,
.ep-footer-links a.external:hover {
 color: #fff;
}

.ep-footer-text {
 margin-top: 18px;
 color: var(--ep-text-muted);
 font-size: 13px;
}

@media (max-width: 600px) {
 .ep-footer,
 .ep-global-footer {
 padding: 25px 12px;
 }

 .ep-footer-title {
 font-size: 20px;
 }
}

/* ==========================================================
 Theme v3 End
 ========================================================== */

/* ==========================================================
 56. Clean Mobile Vector Layout
 One coherent mobile header and one horizontal action strip.
 ========================================================== */

@media screen and (max-width: 900px) {

 /* Prevent any interface element from widening the page. */
 html,
 body,
 #mw-page-container,
 .mw-page-container,
 #content,
 .mw-body,
 .vector-page-toolbar-container,
 .vector-page-toolbar {
 max-width: 100% !important;
 box-sizing: border-box !important;
 }

 html,
 body {
 overflow-x: hidden !important;
 }

 /* ------------------------------------------------------
 Mobile header
 ------------------------------------------------------ */

 .vector-header-container,
 .vector-header,
 .mw-header,
 .vector-header-start,
 .vector-header-end {
 background: #0d0d0d !important;
 background-image: none !important;
 box-shadow: none !important;
 }

 .vector-header-container {
 border-bottom: 1px solid var(--ep-border) !important;
 }

 .vector-header {
 display: flex !important;
 flex-wrap: wrap !important;
 align-items: center !important;
 width: 100% !important;
 margin: 0 !important;
 padding: 10px 12px !important;
 gap: 10px !important;
 }

 /* Logo/name area: plain background with no hard-edged box. */
 .mw-logo,
 .mw-logo-container,
 .mw-logo a,
 .mw-logo-wordmark,
 .mw-logo-tagline {
 background: transparent !important;
 background-image: none !important;
 border: 0 !important;
 border-radius: 0 !important;
 box-shadow: none !important;
 filter: none !important;
 }

 .mw-logo-container {
 flex: 1 1 auto !important;
 min-width: 0 !important;
 }

 .mw-logo-wordmark,
 .mw-logo-tagline {
 color: var(--ep-gold) !important;
 opacity: 1 !important;
 text-shadow: none !important;
 }

 /* Header icon row. */
 .vector-header-end,
 .vector-user-links {
 display: flex !important;
 flex: 1 0 100% !important;
 flex-flow: row nowrap !important;
 align-items: center !important;
 justify-content: flex-start !important;
 width: 100% !important;
 min-width: 0 !important;
 margin: 0 !important;
 padding: 8px 0 2px !important;
 gap: 8px !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 scrollbar-width: none;
 -webkit-overflow-scrolling: touch;
 }

 .vector-header-end::-webkit-scrollbar,
 .vector-user-links::-webkit-scrollbar {
 display: none;
 }

 .vector-header-end > *,
 .vector-user-links > * {
 flex: 0 0 auto !important;
 margin: 0 !important;
 }

 .vector-header .cdx-button,
 .vector-header button,
 .vector-header .vector-dropdown-label {
 width: 46px !important;
 min-width: 46px !important;
 height: 46px !important;
 margin: 0 !important;
 padding: 8px !important;
 background: var(--ep-panel) !important;
 border: 1px solid var(--ep-border) !important;
 border-radius: 10px !important;
 box-shadow: none !important;
 }

 /* Remove the second frame around the profile control. */
 .vector-user-menu-legacy,
 .vector-user-menu-legacy.vector-dropdown,
 .vector-user-links .vector-user-menu,
 .vector-user-links .vector-dropdown {
 background: transparent !important;
 border: 0 !important;
 border-radius: 0 !important;
 box-shadow: none !important;
 margin: 0 !important;
 padding: 0 !important;
 }

 /* ------------------------------------------------------
 Page title
 ------------------------------------------------------ */

 .vector-page-titlebar,
 .mw-first-heading-container,
 .firstHeading,
 #firstHeading,
 .mw-page-title-main {
 background: transparent !important;
 background-color: transparent !important;
 background-image: none !important;
 box-shadow: none !important;
 }

 .vector-page-titlebar,
 .mw-first-heading-container {
 position: relative !important;
 margin: 0 !important;
 padding: 16px 0 8px !important;
 border: 0 !important;
 }

 .firstHeading,
 #firstHeading,
 .mw-page-title-main {
 margin: 0 !important;
 padding: 0 0 10px !important;
 border: 0 !important;
 border-bottom: 1px solid rgba(212,175,55,.55) !important;
 }

 /* Remove the floating table-of-contents/list button on phones. */
 .vector-toc-toggle,
 .vector-page-titlebar-toc,
 .vector-page-titlebar .mw-ui-icon-wikimedia-listBullet {
 display: none !important;
 }

 /* ------------------------------------------------------
 One horizontal, swipeable action strip
 ------------------------------------------------------ */

 .vector-page-toolbar-container {
 display: block !important;
 width: 100% !important;
 min-width: 0 !important;
 margin: 0 !important;
 padding: 8px 0 12px !important;
 overflow: hidden !important;
 border: 0 !important;
 border-bottom: 1px solid rgba(255,255,255,.22) !important;
 }

 .vector-page-toolbar {
 display: flex !important;
 flex-flow: row nowrap !important;
 align-items: center !important;
 justify-content: flex-start !important;
 width: 100% !important;
 min-width: 0 !important;
 margin: 0 !important;
 padding: 0 4px 6px !important;
 gap: 8px !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 white-space: nowrap !important;
 scrollbar-width: none;
 -webkit-overflow-scrolling: touch;
 scroll-snap-type: x proximity;
 }

 .vector-page-toolbar::-webkit-scrollbar {
 display: none;
 }

 /* Merge Vector's left and right action groups into the same flex row. */
 #left-navigation,
 #right-navigation {
 display: contents !important;
 float: none !important;
 width: auto !important;
 margin: 0 !important;
 padding: 0 !important;
 }

 #p-namespaces,
 #p-associated-pages,
 #p-views,
 #p-cactions,
 .vector-page-toolbar .vector-menu-tabs,
 .vector-page-toolbar .vector-menu-dropdown {
 display: flex !important;
 flex: 0 0 auto !important;
 align-items: center !important;
 width: auto !important;
 min-width: max-content !important;
 height: 42px !important;
 margin: 0 !important;
 padding: 0 !important;
 position: relative !important;
 }

 #p-namespaces ul,
 #p-associated-pages ul,
 #p-views ul,
 #p-namespaces .vector-menu-content-list,
 #p-associated-pages .vector-menu-content-list,
 #p-views .vector-menu-content-list,
 .vector-page-toolbar .vector-menu-content-list {
 display: flex !important;
 flex-flow: row nowrap !important;
 align-items: center !important;
 width: max-content !important;
 margin: 0 !important;
 padding: 0 !important;
 gap: 8px !important;
 }

 #p-namespaces li,
 #p-associated-pages li,
 #p-views li,
 .vector-page-toolbar .mw-list-item {
 display: flex !important;
 flex: 0 0 auto !important;
 align-items: center !important;
 width: auto !important;
 min-width: max-content !important;
 height: 42px !important;
 margin: 0 !important;
 padding: 0 !important;
 scroll-snap-align: start;
 }

 #p-namespaces li a,
 #p-associated-pages li a,
 #p-views li a,
 .vector-page-toolbar .mw-list-item a,
 #p-cactions .vector-dropdown-label,
 .vector-page-toolbar .vector-dropdown-label {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: auto !important;
 min-width: max-content !important;
 height: 42px !important;
 margin: 0 !important;
 padding: 0 13px !important;
 background: var(--ep-panel) !important;
 color: var(--ep-gold) !important;
 border: 1px solid var(--ep-border) !important;
 border-radius: 9px !important;
 box-shadow: none !important;
 font-size: 14px !important;
 line-height: 1 !important;
 white-space: nowrap !important;
 }

 #p-namespaces .selected a,
 #p-associated-pages .selected a,
 #p-views .selected a {
 background: #2b210d !important;
 color: var(--ep-gold-light) !important;
 }

 .vector-page-toolbar::after {
 content: "";
 display: block;
 flex: 0 0 18px;
 width: 18px;
 height: 1px;
 }

 /* ------------------------------------------------------
 Main content spacing
 ------------------------------------------------------ */

 #content,
 .mw-body {
 width: auto !important;
 max-width: none !important;
 margin: 14px 10px !important;
 padding: 14px !important;
 border-radius: 14px !important;
 }

 .ep-container {
 width: 100% !important;
 max-width: 100% !important;
 margin: 0 auto !important;
 padding: 0 !important;
 }
}
/* ==========================================================
 FINAL MOBILE TOOLBAR ALIGNMENT FIX
 ========================================================== */

@media screen and (max-width: 900px) {

 /* The visible scrolling window */
 .vector-page-toolbar-container {
 width: 100% !important;
 max-width: 100% !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;

 padding: 8px 0 12px !important;

 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 }

 .vector-page-toolbar-container::-webkit-scrollbar {
 display: none;
 }

 /* One long row containing every group */
 .vector-page-toolbar {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 align-items: center !important;
 justify-content: flex-start !important;

 width: max-content !important;
 min-width: 100% !important;

 margin: 0 !important;
 padding: 0 6px !important;

 gap: 8px !important;

 overflow: visible !important;
 white-space: nowrap !important;
 }

 /* Vector's left and right toolbar sections */
 #left-navigation,
 #right-navigation {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 align-items: center !important;

 flex: 0 0 auto !important;

 float: none !important;
 position: static !important;

 width: max-content !important;
 height: 42px !important;

 margin: 0 !important;
 padding: 0 !important;

 gap: 8px !important;
 }

 /* Every menu group */
 #p-namespaces,
 #p-associated-pages,
 #p-views,
 #p-cactions,
 .vector-page-toolbar .vector-menu-tabs,
 .vector-page-toolbar .vector-menu-dropdown {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 align-items: center !important;

 flex: 0 0 auto !important;

 position: static !important;
 float: none !important;
 transform: none !important;

 width: max-content !important;
 min-width: max-content !important;
 height: 42px !important;

 margin: 0 !important;
 padding: 0 !important;
 }

 /* Lists inside the menu groups */
 #p-namespaces ul,
 #p-associated-pages ul,
 #p-views ul,
 #p-namespaces .vector-menu-content-list,
 #p-associated-pages .vector-menu-content-list,
 #p-views .vector-menu-content-list,
 .vector-page-toolbar .vector-menu-content-list {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 align-items: center !important;

 position: static !important;
 float: none !important;

 width: max-content !important;
 height: 42px !important;

 margin: 0 !important;
 padding: 0 !important;

 gap: 8px !important;
 }

 /* Individual items */
 #p-namespaces li,
 #p-associated-pages li,
 #p-views li,
 .vector-page-toolbar .mw-list-item {
 display: flex !important;
 align-items: center !important;

 flex: 0 0 auto !important;

 position: static !important;
 float: none !important;

 width: auto !important;
 min-width: max-content !important;
 height: 42px !important;

 margin: 0 !important;
 padding: 0 !important;
 }

 /* Actual buttons */
 #p-namespaces li a,
 #p-associated-pages li a,
 #p-views li a,
 .vector-page-toolbar .mw-list-item a,
 #p-cactions .vector-dropdown-label,
 .vector-page-toolbar .vector-dropdown-label {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;

 position: static !important;
 float: none !important;
 transform: none !important;

 width: auto !important;
 min-width: max-content !important;
 height: 42px !important;

 margin: 0 !important;
 padding: 0 13px !important;

 line-height: 1 !important;
 white-space: nowrap !important;
 box-sizing: border-box !important;
 }

 /* Room after Tools */
 .vector-page-toolbar::after {
 content: "";
 display: block;
 flex: 0 0 20px;
 width: 20px;
 height: 1px;
 }
}
/* ==========================================================
   Mobile Header — Dropdown + Hide-on-Scroll Fix
   ========================================================== */

@media screen and (max-width: 900px) {

    /*
       Sticky header wrapper
    */

    .vector-header-container,
    .vector-header {
        position: sticky !important;
        top: 0 !important;

        z-index: 800 !important;

        overflow: visible !important;

        transform: translateY(0);
        opacity: 1;

        transition:
            transform .28s ease,
            opacity .28s ease !important;

        will-change: transform;
    }


    /*
       Hide the complete header while scrolling down
    */

    .vector-header-container.ep-mobile-header-hidden,
    .vector-header.ep-mobile-header-hidden {
        transform: translateY(-110%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /*
       Allow dropdown menus to escape the header
    */

    .vector-header-start,
    .vector-header-end,
    .vector-user-links,
    .vector-dropdown,
    .vector-menu-dropdown,
    .vector-menu-content,
    .vector-dropdown-content {
        overflow: visible !important;
    }


    /*
       Put open dropdowns above the sticky header
    */

    .vector-dropdown-content,
    .vector-menu-dropdown .vector-menu-content,
    .vector-user-menu .vector-dropdown-content,
    .vector-header .vector-dropdown-content {
        position: absolute !important;

        z-index: 5000 !important;

        background: var(--ep-panel) !important;

        border:
            1px solid var(--ep-border) !important;

        border-radius: 10px !important;

        box-shadow:
            0 12px 28px rgba(0, 0, 0, .72) !important;
    }


    /*
       Keep the page toolbar beneath open header menus
    */

    .vector-page-toolbar-container,
    .vector-page-toolbar,
    .mw-body,
    #content {
        position: relative;
        z-index: 1 !important;
    }
}
/* ==========================================================
 z0ne Contributor Profile
 ========================================================== */

.zone-profile {
 --zone-gold: #f7c948;
 --zone-gold-dark: #c9a227;
 --zone-cream: #fff6e4;
 --zone-muted: #cbc5b8;
 --zone-panel: #171208;
 --zone-panel-light: #2b2008;

 width: 100%;
 max-width: 900px;
 margin: 0 auto;
 box-sizing: border-box;
}


/* Hero */

.zone-hero {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 22px;

 padding: 24px;

 background:
 linear-gradient(
 135deg,
 #1a1408 0%,
 var(--zone-panel-light) 45%,
 var(--zone-panel) 100%
 );

 border: 2px solid var(--zone-gold-dark);
 border-radius: 16px;

 box-shadow:
 0 0 24px rgba(201, 162, 39, .35);
}

.zone-avatar {
 flex: 0 0 auto;
 text-align: center;
}

.zone-avatar img {
 display: block;
 max-width: 300px !important;
 height: auto;
 image-rendering: pixelated;
}

.zone-identity {
 flex: 1;
 min-width: 240px;
}

.zone-name {
 color: var(--zone-cream);

 font-family: var(--ep-heading-font);
 font-size: 42px;
 font-weight: 700;

 letter-spacing: 2px;
 line-height: 1.1;

 text-shadow:
 0 2px 8px rgba(0, 0, 0, .8);
}

.zone-title {
 margin: 6px 0 12px;

 color: var(--zone-gold);

 font-size: 18px;
 font-weight: 600;
 letter-spacing: 1px;
}

.zone-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
}

.zone-chip {
 display: inline-flex;
 align-items: center;

 padding: 5px 12px;

 color: var(--zone-gold);

 background: var(--zone-panel-light);

 border: 1px solid var(--zone-gold-dark);
 border-radius: 999px;

 font-size: 14px;
}

.zone-quote {
 margin-top: 14px;

 color: var(--zone-muted);

 font-style: italic;
}


/* About */

.zone-about {
 color: #e8e2d4;
 line-height: 1.75;
}


/* Skills */

.zone-skills-layout {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(240px, .75fr);
 gap: 24px;
 align-items: start;
}

.zone-skill {
 margin-bottom: 14px;
}

.zone-skill-row {
 display: flex;
 justify-content: space-between;
 gap: 15px;

 color: var(--zone-muted);

 font-size: 14px;
}

.zone-skill-row b {
 color: var(--zone-cream);
}

.zone-rank {
 color: var(--zone-gold);
}

.zone-xp {
 margin-left: 5px;

 color: #8a8270;

 font-size: 12px;
}

.zone-track {
 height: 13px;
 margin-top: 4px;

 overflow: hidden;

 background: #241c0c;

 border: 1px solid #3a2f14;
 border-radius: 7px;
}

.zone-fill {
 width: var(--zone-width, 0%);
 height: 100%;

 background:
 linear-gradient(
 90deg,
 var(--zone-gold-dark),
 var(--zone-gold)
 );

 box-shadow:
 0 0 10px rgba(247, 201, 72, .25);

 transform-origin: left center;

 animation:
 zoneBarReveal 1.1s cubic-bezier(.2, .7, .3, 1);
}

@keyframes zoneBarReveal {
 from {
 width: 0;
 }

 to {
 width: var(--zone-width, 0%);
 }
}

.zone-skill-note {
 padding: 18px;

 color: var(--zone-muted);

 background: rgba(23, 18, 8, .72);

 border: 1px solid rgba(201, 162, 39, .55);
 border-radius: 12px;

 line-height: 1.7;
}

.zone-sync-status {
 margin-top: 12px;

 color: #756e60;

 font-size: 12px;
}


/* Tool cards */

.zone-card-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 14px;
}

.zone-card {
 padding: 18px;

 background:
 linear-gradient(
 145deg,
 var(--zone-panel),
 #0f0c06
 );

 border: 1px solid var(--zone-gold-dark);
 border-radius: 12px;

 transition:
 transform .2s ease,
 border-color .2s ease,
 box-shadow .2s ease;
}

.zone-card:hover {
 transform: translateY(-4px);

 border-color: var(--zone-gold);

 box-shadow:
 0 0 18px rgba(201, 162, 39, .28);
}

.zone-card-title {
 margin-bottom: 7px;

 color: var(--zone-gold);

 font-family: var(--ep-heading-font);
 font-size: 18px;
}

.zone-card-text {
 color: var(--zone-muted);
 line-height: 1.55;
}


/* Formulas */

.zone-math-note {
 margin-bottom: 10px;

 color: var(--zone-muted);
}

.zone-formula {
 display: grid;
 grid-template-columns: 150px minmax(0, 1fr);
 gap: 12px;

 margin: 8px 0;
 padding: 11px 14px;

 color: var(--zone-cream);

 background: #0f0c06;

 border: 1px solid #3a2f14;
 border-left: 3px solid var(--zone-gold-dark);
 border-radius: 7px;
}

.zone-formula span {
 color: var(--zone-gold);
}

.zone-formula code {
 color: var(--zone-cream);
 background: transparent;
 overflow-wrap: anywhere;
}


/* Mobile */

@media (max-width: 700px) {

 .zone-profile {
 padding: 0;
 }

 .zone-hero {
 flex-direction: column;
 padding: 20px 16px;
 text-align: center;
 }

 .zone-avatar img {
 width: 200px;
 max-width: 65vw !important;
 }

 .zone-identity {
 min-width: 0;
 width: 100%;
 }

 .zone-name {
 font-size: 34px;
 }

 .zone-chips {
 justify-content: center;
 }

 .zone-skills-layout {
 grid-template-columns: 1fr;
 }

 .zone-card-grid {
 grid-template-columns: 1fr;
 }

 .zone-formula {
 grid-template-columns: 1fr;
 gap: 3px;
 }

 .zone-skill-row {
 align-items: flex-start;
 flex-direction: column;
 gap: 2px;
 }
}

/* ==========================================================
   Desktop Vector 2022 Polish
   Seamless title area, clean search, and article padding
   ========================================================== */

@media screen and (min-width: 901px) {

    /* Give the entire article comfortable spacing from its border. */
    #content,
    .mw-body {
        padding: 26px 30px 34px !important;
        box-sizing: border-box !important;
    }

    /* Keep the title area inside the article padding and blend it smoothly
       into the normal #151515 article background. */
    .vector-page-titlebar,
    .mw-first-heading-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background:
            linear-gradient(
                90deg,
                #070707 0%,
                #101010 42%,
                var(--ep-panel) 100%
            ) !important;
        background-color: var(--ep-panel) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .firstHeading,
    .mw-page-title-main {
        margin: 0 !important;
        padding: 6px 0 10px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Align the page tabs with the title and article content. */
    .vector-page-toolbar-container,
    .vector-page-toolbar {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Remove inherited margins that push the two tab groups against
       opposite article borders. */
    #left-navigation {
        margin-left: 0 !important;
    }

    #right-navigation {
        margin-right: 0 !important;
    }
}

/* ==========================================================
   Clean Vector Search Bar
   Removes the gray outline while preserving the gold theme
   ========================================================== */

.vector-search-box,
.vector-search-box-form,
.vector-search-box-inner,
#searchform,
#simpleSearch {
    box-shadow: none !important;
    outline: none !important;
}

#simpleSearch,
.vector-search-box-inner {
    overflow: hidden !important;
    background: var(--ep-panel-light) !important;
    border: 1px solid var(--ep-border) !important;
    border-radius: 8px !important;
}

#simpleSearch input,
.vector-search-box-inner input,
.vector-search-box-input,
#searchInput {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

#simpleSearch:focus-within,
.vector-search-box-inner:focus-within {
    border-color: var(--ep-gold) !important;
    box-shadow: 0 0 10px rgba(212,175,55,.22) !important;
}

#simpleSearch .searchButton,
.vector-search-box-inner .searchButton {
    background: var(--ep-panel) !important;
    color: var(--ep-gold-light) !important;
    border: 0 !important;
    border-left: 1px solid var(--ep-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#simpleSearch .searchButton:hover,
.vector-search-box-inner .searchButton:hover {
    background: var(--ep-panel-hover) !important;
    color: #fff !important;
}

/* ==========================================================
   z0ne Desktop Layout + Seamless Page Title Final Fix
   ========================================================== */

@media screen and (min-width: 901px) {

    /* Fade the dark title treatment softly on every side. */
    .vector-page-titlebar,
    .mw-first-heading-container {
        position: relative !important;
        isolation: isolate !important;
        overflow: visible !important;
        background: transparent !important;
        background-image: none !important;
    }

    .vector-page-titlebar::before,
    .mw-first-heading-container::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -18px -28px -16px -28px;
        pointer-events: none;
        background: radial-gradient(
            ellipse 78% 95% at 18% 48%,
            rgba(4,4,4,.98) 0%,
            rgba(7,7,7,.88) 30%,
            rgba(12,12,12,.56) 54%,
            rgba(21,21,21,0) 82%
        ) !important;
    }

    .vector-page-titlebar *,
    .mw-first-heading-container *,
    .firstHeading,
    .mw-page-title-main {
        background-color: transparent !important;
        background-image: none !important;
    }

    /* Center the complete z0ne profile within the article. */
    .zone-profile {
        width: min(100%, 980px) !important;
        max-width: 980px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Use one centered column for skills instead of an empty split layout. */
    .zone-skills-layout {
        display: block !important;
        width: 100% !important;
    }

    .zone-skill-list,
    .zone-skill-note {
        width: min(100%, 760px) !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .zone-skill-note {
        margin-top: 24px !important;
    }

    /* Keep all project cards in one clean, evenly spaced row. */
    .zone-card-grid {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 18px !important;
        width: 100% !important;
    }

    /* MediaWiki can insert empty paragraphs between divs; do not let them
       occupy layout positions and create a checkerboard pattern. */
    .zone-card-grid > p,
    .zone-card-grid > br {
        display: none !important;
    }

    .zone-card-grid > .zone-card {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

@media screen and (max-width: 900px) {
    .zone-card-grid > p,
    .zone-card-grid > br {
        display: none !important;
    }
}
/* ==========================================================
   Final Vector Header Corrections
   Search, desktop branding, mobile dropdowns and scrolling
   ========================================================== */


/* ----------------------------------------------------------
   1. Search bar — remove the gray/gold outer frame
   ---------------------------------------------------------- */

.vector-search-box,
.vector-search-box-form,
.vector-search-box-inner,
#searchform,
#simpleSearch {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* Style only the actual search field */

#simpleSearch .vector-search-box-input,
.vector-search-box-inner .vector-search-box-input,
#searchInput,
.cdx-text-input__input[type="search"],
.cdx-search-input__input {
    background: var(--ep-panel-light) !important;
    color: var(--ep-text) !important;

    border: 1px solid var(--ep-border) !important;
    border-radius: 9px !important;

    outline: 0 !important;
    box-shadow: none !important;
}


/* Gold focus instead of gray browser focus */

#simpleSearch .vector-search-box-input:focus,
.vector-search-box-inner .vector-search-box-input:focus,
#searchInput:focus,
.cdx-text-input__input[type="search"]:focus,
.cdx-search-input__input:focus {
    border-color: var(--ep-gold) !important;
    outline: 0 !important;
    box-shadow: 0 0 9px rgba(212, 175, 55, .2) !important;
}


/* Do not let search buttons create a second frame */

#simpleSearch .searchButton,
.vector-search-box-inner .searchButton,
.vector-search-box button,
.cdx-search-input button {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* ----------------------------------------------------------
   2. Desktop wiki wordmark — make it gold
   ---------------------------------------------------------- */

@media screen and (min-width: 901px) {

    .mw-logo,
    .mw-logo-container,
    .mw-logo a {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /*
       Vector often uses an image for the wordmark.
       This filter converts the dark image to gold.
    */

    .mw-logo-wordmark {
        filter:
            brightness(0)
            saturate(100%)
            invert(71%)
            sepia(54%)
            saturate(697%)
            hue-rotate(5deg)
            brightness(92%)
            contrast(87%) !important;

        opacity: 1 !important;
    }

    .mw-logo-tagline {
        filter: none !important;
        color: var(--ep-gold-light) !important;
        opacity: .8 !important;
    }

    /*
       Covers installations where the name is real text
       instead of a wordmark image.
    */

    .mw-logo-container,
    .mw-logo-container span,
    .mw-logo-container a,
    .mw-logo-wordmark,
    .mw-logo-tagline {
        color: var(--ep-gold) !important;
    }
}


/* ----------------------------------------------------------
   3. Mobile header — reliable hide animation
   Only move the outer wrapper, not both nested elements
   ---------------------------------------------------------- */

@media screen and (max-width: 900px) {

    .vector-header-container {
        position: sticky !important;
        top: 0 !important;
        z-index: 800 !important;

        overflow: visible !important;

        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;

        transition:
            transform .28s ease,
            opacity .28s ease !important;

        will-change: transform, opacity;
    }

    /*
       Do not independently transform the inner header.
       Moving both wrappers can cancel or distort the effect.
    */

    .vector-header {
        position: relative !important;
        top: auto !important;

        transform: none !important;
        opacity: 1 !important;

        overflow: visible !important;
    }

    .vector-header-container.ep-mobile-header-hidden {
        transform: translate3d(0, calc(-100% - 4px), 0) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .vector-header.ep-mobile-header-hidden {
        transform: none !important;
        opacity: 1 !important;
    }


    /* ------------------------------------------------------
       4. Mobile Appearance menu — open inside the screen
       ------------------------------------------------------ */

    #vector-appearance-dropdown,
    .vector-appearance-dropdown,
    .vector-appearance-landmark,
    .vector-client-prefs,
    .vector-client-prefs-landmark {
        position: relative !important;
    }

    #vector-appearance-dropdown .vector-dropdown-content,
    .vector-appearance-dropdown .vector-dropdown-content,
    .vector-appearance-landmark .vector-dropdown-content,
    .vector-client-prefs .vector-dropdown-content,
    .vector-client-prefs-landmark .vector-dropdown-content {
        left: auto !important;
        right: 0 !important;

        transform: none !important;

        width: min(320px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;

        box-sizing: border-box !important;
    }

    /*
       Fallback for Vector versions where Appearance has no
       unique parent class but sits in the header's right side.
    */

    .vector-header-end .vector-dropdown:last-child
    .vector-dropdown-content,
    .vector-user-links .vector-dropdown:last-child
    .vector-dropdown-content {
        left: auto !important;
        right: 0 !important;

        transform: none !important;

        width: min(320px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }


    /* Keep all mobile header dropdowns above the page */

    .vector-header-container .vector-dropdown-content,
    .vector-header-container .vector-menu-content {
        z-index: 5000 !important;
    }
}
/* ==========================================================
   FINAL VECTOR CLEANUP
   Hide page toolbar, fix desktop logo, and repair mobile header
   ========================================================== */


/* ==========================================================
   1. Remove the Page / Discussion / Read / Edit toolbar
   Desktop and mobile
   ========================================================== */

.vector-page-toolbar-container,
.vector-page-toolbar,
#left-navigation,
#right-navigation {
    display: none !important;
}


/* Remove the empty space left behind by the toolbar */

.vector-page-titlebar + .vector-page-toolbar-container,
.mw-first-heading-container + .vector-page-toolbar-container {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
}


/* ==========================================================
   2. Desktop Empire of Praxia logo text
   Remove the tinted image and replace it with clean gold text
   ========================================================== */

@media screen and (min-width: 901px) {

    /* Remove the glow/tint from the entire logo area */

    .mw-logo,
    .mw-logo-container,
    .mw-logo-container a {
        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        text-shadow: none !important;
    }


    /*
       Hide Vector's dark wordmark image.
       This is what causes the strange black/gold treatment.
    */

    .mw-logo-wordmark {
        display: none !important;
    }


    /*
       Replace the wordmark image with normal text.
       It remains part of the home-page link.
    */

    .mw-logo-container a::after {
        content: "Empire of Praxia";

        display: inline-block;

        margin-left: 10px;

        color: var(--ep-gold) !important;

        font-family: var(--ep-heading-font) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        letter-spacing: .3px !important;

        background: transparent !important;

        filter: none !important;
        text-shadow: none !important;
    }


    .mw-logo-container a:hover::after {
        color: var(--ep-gold-light) !important;
    }
}


/* ==========================================================
   3. Mobile header — one sticky wrapper only
   ========================================================== */

@media screen and (max-width: 900px) {

    /*
       The outer container is the only sticky/moving element.
    */

    .vector-header-container {
        position: sticky !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        z-index: 2000 !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow: visible !important;

        background: #0d0d0d !important;
        background-image: none !important;

        border-bottom: 1px solid var(--ep-border) !important;
        box-shadow: none !important;

        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;

        transition:
            transform .28s ease,
            opacity .28s ease !important;

        will-change: transform, opacity;
    }


    /*
       The inner header must not also be sticky.
    */

    .vector-header,
    .mw-header {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        z-index: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow: visible !important;

        transform: none !important;
        opacity: 1 !important;

        background: #0d0d0d !important;
        background-image: none !important;
    }


    /*
       Hide the complete header when JavaScript adds the class.
    */

    .vector-header-container.ep-mobile-header-hidden {
        transform: translate3d(
            0,
            calc(-100% - 6px),
            0
        ) !important;

        opacity: 0 !important;
        pointer-events: none !important;
    }


    /*
       Do not transform the inner header separately.
    */

    .vector-header.ep-mobile-header-hidden,
    .mw-header.ep-mobile-header-hidden {
        transform: none !important;
        opacity: 1 !important;
    }


    /* ======================================================
       4. Mobile dropdown menus
       ====================================================== */

    .vector-header-start,
    .vector-header-end,
    .vector-user-links,
    .vector-dropdown,
    .vector-menu-dropdown {
        overflow: visible !important;
    }


    .vector-header-container .vector-dropdown-content,
    .vector-header-container .vector-menu-content {
        position: absolute !important;

        z-index: 10000 !important;

        box-sizing: border-box !important;

        background: var(--ep-panel) !important;

        border: 1px solid var(--ep-border) !important;
        border-radius: 10px !important;

        box-shadow:
            0 12px 28px rgba(0, 0, 0, .75) !important;
    }


    /* ======================================================
       5. Appearance menu must stay inside the phone screen
       ====================================================== */

    #vector-appearance-dropdown,
    .vector-appearance-dropdown,
    .vector-appearance-landmark,
    .vector-client-prefs,
    .vector-client-prefs-landmark {
        position: relative !important;
    }


    #vector-appearance-dropdown .vector-dropdown-content,
    .vector-appearance-dropdown .vector-dropdown-content,
    .vector-appearance-landmark .vector-dropdown-content,
    .vector-client-prefs .vector-dropdown-content,
    .vector-client-prefs-landmark .vector-dropdown-content {
        left: auto !important;
        right: 0 !important;

        transform: none !important;

        width: min(320px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;

        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /*
       Fallback for versions of Vector where Appearance does
       not have the expected class.
    */

    .vector-header-end .vector-dropdown:last-child
    .vector-dropdown-content,
    .vector-user-links .vector-dropdown:last-child
    .vector-dropdown-content {
        left: auto !important;
        right: 0 !important;

        transform: none !important;

        width: min(320px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
    }


    /*
       Keep page content beneath opened header menus.
    */

    #content,
    .mw-body,
    .mw-page-container,
    #mw-page-container {
        position: relative !important;
        z-index: 1 !important;
    }
}
@media screen and (max-width: 900px) {

    .ep-nav-dropdown.ep-dropdown-open
    .ep-nav-dropdown-menu {
        display: block !important;
    }

}
/* ==========================================================
   Administrator Floating Edit Control
   ========================================================== */

.ep-admin-edit-control {

    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 20000;

    font-family: var(--ep-body-font);

}


/* Main floating button */

.ep-admin-edit-toggle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;


    min-width: 92px;

    height: 44px;

    padding: 0 16px;


    background:
        linear-gradient(
            180deg,
            #201a0c,
            #111111
        ) !important;


    color:
        var(--ep-gold-light) !important;


    border:
        1px solid var(--ep-border-light) !important;


    border-radius:
        999px !important;


    box-shadow:
        0 8px 24px rgba(0, 0, 0, .65),
        0 0 14px rgba(212, 175, 55, .2) !important;


    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

}


/* Hover */

.ep-admin-edit-toggle:hover {

    background:
        var(--ep-panel-hover) !important;

    color:
        #ffffff !important;

    border-color:
        var(--ep-gold-light) !important;

    transform:
        translateY(-2px);

}


/* Pencil */

.ep-admin-edit-icon {

    color:
        var(--ep-gold);

    font-size:
        20px;

    line-height:
        1;

}


/* Dropdown menu */

.ep-admin-edit-menu {

    position: absolute;

    right: 0;

    bottom:
        calc(100% + 10px);


    display: none;

    min-width:
        170px;

    overflow:
        hidden;


    background:
        #151515;


    border:
        1px solid var(--ep-border);

    border-radius:
        12px;


    box-shadow:
        0 12px 30px rgba(0, 0, 0, .75);

}


/* Open state */

.ep-admin-edit-control.ep-admin-edit-open
.ep-admin-edit-menu {

    display:
        block;

}


/* Menu links */

.ep-admin-edit-menu a,
.ep-admin-edit-menu a:visited {

    display:
        block;

    padding:
        11px 14px;


    color:
        var(--ep-gold) !important;

    text-decoration:
        none !important;


    border-bottom:
        1px solid rgba(139, 107, 33, .35);

}


.ep-admin-edit-menu a:last-child {

    border-bottom:
        0;

}


.ep-admin-edit-menu a:hover {

    background:
        var(--ep-panel-hover) !important;

    color:
        var(--ep-gold-light) !important;

}


/* Mobile */

@media screen and (max-width: 600px) {

    .ep-admin-edit-control {

        right:
            14px;

        bottom:
            14px;

    }


    .ep-admin-edit-toggle {

        min-width:
            46px;

        width:
            46px;

        height:
            46px;

        padding:
            0;

    }


    .ep-admin-edit-label {

        display:
            none;

    }


    .ep-admin-edit-menu {

        min-width:
            160px;

        max-width:
            calc(100vw - 28px);

    }

}
/* ==========================================================
   EMPIRE OF PRAXIA
   FINAL MOBILE HEADER OVERRIDE
   Paste at the ABSOLUTE BOTTOM of Common.css
   ========================================================== */


/* ==========================================================
   MOBILE HEADER
   ========================================================== */

@media screen and (max-width: 900px) {

    /* ------------------------------------------------------
       Disable Vector's separate sticky header.
       We use the normal header instead.
       ------------------------------------------------------ */

    .vector-sticky-header-container,
    #vector-sticky-header {
        display: none !important;
    }


    /* ------------------------------------------------------
       Main mobile header wrapper
       ------------------------------------------------------ */

    .vector-header-container:not(.vector-sticky-header-container) {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        z-index: 5000 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #0d0d0d !important;
        background-image: none !important;

        border-bottom:
            1px solid var(--ep-border) !important;

        box-shadow:
            0 6px 18px rgba(0,0,0,.45) !important;

        opacity: 1 !important;

        transform:
            translate3d(0,0,0) !important;

        transition:
            transform .25s ease,
            opacity .25s ease !important;

        will-change:
            transform,
            opacity;

        overflow:
            visible !important;

    }


    /* ------------------------------------------------------
       Hidden state when scrolling down
       ------------------------------------------------------ */

    .vector-header-container.ep-mobile-header-hidden:not(
        .vector-sticky-header-container
    ) {

        transform:
            translate3d(
                0,
                calc(-100% - 5px),
                0
            ) !important;

        opacity:
            0 !important;

        pointer-events:
            none !important;

    }


    /* ------------------------------------------------------
       Inner header
       ------------------------------------------------------ */

    .vector-header,
    .mw-header {

        position:
            relative !important;

        top:
            auto !important;

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        grid-template-rows:
            auto auto !important;

        gap:
            5px !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            7px 10px 6px !important;

        box-sizing:
            border-box !important;

        background:
            #0d0d0d !important;

        background-image:
            none !important;

        box-shadow:
            none !important;

        transform:
            none !important;

        overflow:
            visible !important;

    }


    /* ------------------------------------------------------
       TOP ROW
       Hamburger + Empire of Praxia
       ------------------------------------------------------ */

    .vector-header-start {

        grid-row:
            1 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        gap:
            9px !important;

        width:
            100% !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            visible !important;

    }


    /* Hamburger */

    #vector-main-menu-dropdown-label {

        width:
            40px !important;

        min-width:
            40px !important;

        height:
            40px !important;

        min-height:
            40px !important;

        margin:
            0 !important;

        padding:
            7px !important;

        box-sizing:
            border-box !important;

        background:
            var(--ep-panel) !important;

        border:
            1px solid var(--ep-border) !important;

        border-radius:
            10px !important;

        box-shadow:
            none !important;

    }


    /* Wiki logo link */

    .mw-logo {

        display:
            flex !important;

        align-items:
            center !important;

        flex:
            1 1 auto !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        background-image:
            none !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        filter:
            none !important;

    }


    .mw-logo-container {

        display:
            block !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        filter:
            none !important;

    }


    .mw-logo-wordmark {

        display:
            block !important;

        margin:
            0 !important;

        padding:
            0 !important;

        color:
            var(--ep-gold) !important;

        font-family:
            var(--ep-heading-font) !important;

        font-size:
            19px !important;

        font-weight:
            700 !important;

        line-height:
            1.1 !important;

        letter-spacing:
            .2px !important;

        white-space:
            nowrap !important;

        background:
            transparent !important;

        background-image:
            none !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        text-shadow:
            none !important;

        filter:
            none !important;

    }


    /* ------------------------------------------------------
       SECOND ROW
       Search / Appearance / Notifications / Profile
       ------------------------------------------------------ */

    .vector-header-end {

        grid-row:
            2 !important;

        display:
            flex !important;

        flex-flow:
            row nowrap !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        gap:
            6px !important;

        width:
            100% !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            2px 0 0 !important;

        overflow:
            visible !important;

    }


    /* Search container */

    #p-search,
    .vector-search-box {

        flex:
            0 0 auto !important;

        width:
            auto !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

    }


    /* Hide desktop search input on mobile.
       Keep only search icon. */

    .vector-header
    .vector-typeahead-search-container {

        display:
            none !important;

    }


    .vector-header
    .search-toggle {

        display:
            inline-flex !important;

    }


    /* User links wrapper */

    .vector-user-links {

        display:
            flex !important;

        flex:
            1 1 auto !important;

        flex-flow:
            row nowrap !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        gap:
            6px !important;

        width:
            auto !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            visible !important;

    }


    .vector-user-links-main {

        display:
            flex !important;

        flex:
            0 1 auto !important;

        flex-flow:
            row nowrap !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        gap:
            6px !important;

        width:
            auto !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            visible !important;

    }


    /* ------------------------------------------------------
       Hide the redundant username link.
       Profile icon already provides user access.
       ------------------------------------------------------ */

    #p-vector-user-menu-userpage,
    #p-vector-user-menu-preferences {

        display:
            none !important;

    }


    /* ------------------------------------------------------
       Remove outer frames that caused the overlapping boxes
       ------------------------------------------------------ */

    .vector-user-menu,
    .vector-user-menu-logged-in,
    .vector-user-menu-legacy,

    #p-vector-user-menu-notifications,
    #p-vector-user-menu-overflow,

    .vector-user-links .vector-dropdown,
    .vector-user-links .vector-menu {

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        background-image:
            none !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;

        transform:
            none !important;

    }


    /* ------------------------------------------------------
       Individual header buttons
       ------------------------------------------------------ */

    .vector-header
    .cdx-button,

    .vector-header
    button,

    .vector-header
    .vector-dropdown-label,

    .vector-header
    .search-toggle,

    #pt-notifications-alert a,

    #pt-notifications-notice a,

    #pt-watchlist-2 a {

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        flex:
            0 0 40px !important;

        width:
            40px !important;

        min-width:
            40px !important;

        max-width:
            40px !important;

        height:
            40px !important;

        min-height:
            40px !important;

        max-height:
            40px !important;

        margin:
            0 !important;

        padding:
            7px !important;

        box-sizing:
            border-box !important;

        background:
            var(--ep-panel) !important;

        background-image:
            none !important;

        border:
            1px solid var(--ep-border) !important;

        border-radius:
            10px !important;

        box-shadow:
            none !important;

        transform:
            none !important;

    }


    /* Profile button slightly wider */

    #vector-user-links-dropdown-label {

        flex-basis:
            48px !important;

        width:
            48px !important;

        min-width:
            48px !important;

        max-width:
            48px !important;

    }


    /* ------------------------------------------------------
       Fix icons themselves
       ------------------------------------------------------ */

    .vector-header
    .vector-icon {

        width:
            22px !important;

        height:
            22px !important;

        min-width:
            22px !important;

        min-height:
            22px !important;

        margin:
            0 !important;

        transform:
            none !important;

    }


    /* ------------------------------------------------------
       Dropdown parent elements
       ------------------------------------------------------ */

    .vector-header
    .vector-dropdown {

        position:
            relative !important;

        overflow:
            visible !important;

    }


    /* ------------------------------------------------------
       Generic mobile dropdown
       ------------------------------------------------------ */

    .vector-header
    .vector-dropdown-content {

        position:
            absolute !important;

        z-index:
            15000 !important;

        top:
            calc(100% + 6px) !important;

        background:
            var(--ep-panel) !important;

        background-image:
            none !important;

        border:
            1px solid var(--ep-border) !important;

        border-radius:
            10px !important;

        box-shadow:
            0 14px 30px
            rgba(0,0,0,.8) !important;

        box-sizing:
            border-box !important;

    }


    /* ------------------------------------------------------
       Appearance menu
       Open as a centered/mobile-safe panel
       ------------------------------------------------------ */

    #vector-appearance-dropdown
    .vector-dropdown-content {

        position:
            fixed !important;

        top:
            96px !important;

        left:
            10px !important;

        right:
            10px !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        max-height:
            calc(100vh - 116px) !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            none !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        -webkit-overflow-scrolling:
            touch;

    }


    /* ------------------------------------------------------
       Profile menu
       Keep inside right edge
       ------------------------------------------------------ */

    #vector-user-links-dropdown
    .vector-dropdown-content {

        left:
            auto !important;

        right:
            0 !important;

        width:
            min(
                280px,
                calc(100vw - 20px)
            ) !important;

        max-width:
            calc(100vw - 20px) !important;

        transform:
            none !important;

    }


    /* ------------------------------------------------------
       Main hamburger menu
       Keep inside left edge
       ------------------------------------------------------ */

    #vector-main-menu-dropdown
    .vector-dropdown-content {

        left:
            0 !important;

        right:
            auto !important;

        width:
            min(
                285px,
                calc(100vw - 20px)
            ) !important;

        max-width:
            calc(100vw - 20px) !important;

        transform:
            none !important;

    }


    /* ------------------------------------------------------
       Content offset for fixed header
       ------------------------------------------------------ */

    .mw-page-container {

        padding-top:
            101px !important;

    }


    /* ------------------------------------------------------
       Keep article below header menus
       ------------------------------------------------------ */

    #content,
    .mw-body,
    .mw-content-container,
    .mw-page-container {

        z-index:
            1 !important;

    }

}


/* ==========================================================
   EXTRA SMALL PHONES
   ========================================================== */

@media screen and (max-width: 420px) {

    .vector-header,
    .mw-header {

        padding:
            6px 7px 5px !important;

        gap:
            4px !important;

    }


    .vector-header-end,
    .vector-user-links,
    .vector-user-links-main {

        gap:
            4px !important;

    }


    .vector-header
    .cdx-button,

    .vector-header
    button,

    .vector-header
    .vector-dropdown-label,

    .vector-header
    .search-toggle,

    #pt-notifications-alert a,

    #pt-notifications-notice a,

    #pt-watchlist-2 a {

        flex-basis:
            37px !important;

        width:
            37px !important;

        min-width:
            37px !important;

        max-width:
            37px !important;

        height:
            37px !important;

        min-height:
            37px !important;

        max-height:
            37px !important;

        padding:
            6px !important;

    }


    #vector-main-menu-dropdown-label {

        width:
            37px !important;

        min-width:
            37px !important;

        height:
            37px !important;

        min-height:
            37px !important;

    }


    #vector-user-links-dropdown-label {

        flex-basis:
            44px !important;

        width:
            44px !important;

        min-width:
            44px !important;

        max-width:
            44px !important;

    }


    .mw-logo-wordmark {

        font-size:
            17px !important;

    }


    .mw-page-container {

        padding-top:
            92px !important;

    }


    #vector-appearance-dropdown
    .vector-dropdown-content {

        top:
            88px !important;

        max-height:
            calc(100vh - 108px) !important;

    }

}
/* ==========================================================
   EMPIRE OF PRAXIA
   FINAL MOBILE HEADER FIX v2
   Fixes:
   - doubled icon borders
   - overlapping notification buttons
   - dropdowns leaving screen
   - main menu width
   - appearance/profile menu positioning
   ========================================================== */

@media screen and (max-width: 900px) {


    /* ======================================================
       1. REMOVE ALL WRAPPER BOXES
       Only actual clickable buttons should have borders.
       ====================================================== */

    .vector-header .vector-menu,
    .vector-header .vector-menu-content,
    .vector-header .vector-menu-content-list,
    .vector-header .vector-dropdown,
    .vector-header .vector-user-menu,
    .vector-header .vector-user-links-main,
    .vector-header .vector-user-links,

    #p-vector-user-menu-notifications,
    #p-vector-user-menu-overflow,
    #p-vector-user-menu-userpage,
    #p-vector-user-menu-preferences {

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        outline: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

    }


    /* Lists must not become boxes */

    .vector-header
    .vector-menu-content-list {

        display: flex !important;

        flex-flow: row nowrap !important;

        align-items: center !important;

        gap: 6px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

    }


    /* Individual list items must also be transparent */

    .vector-header
    .vector-menu-content-list > li {

        display: flex !important;

        flex: 0 0 auto !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

    }


    /* ======================================================
       2. REAL CLICKABLE ICON BUTTONS
       ====================================================== */

    .vector-header .search-toggle,

    #vector-main-menu-dropdown-label,

    #vector-appearance-dropdown-label,

    #vector-user-links-dropdown-label,

    #pt-notifications-alert > a,

    #pt-notifications-notice > a,

    #pt-watchlist-2 > a {

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 7px !important;

        background: #171717 !important;
        background-image: none !important;

        border: 1px solid var(--ep-border) !important;

        border-radius: 10px !important;

        box-shadow: none !important;

        transform: none !important;

    }


    /* Slightly wider profile button */

    #vector-user-links-dropdown-label {

        flex-basis: 48px !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

    }


    /* ======================================================
       3. NOTIFICATION BUTTON GROUP
       Stop bell + inbox from being wrapped in one giant box.
       ====================================================== */

    #p-vector-user-menu-notifications
    .vector-menu-content {

        display: block !important;

        position: static !important;

        width: auto !important;

        overflow: visible !important;

    }


    #p-vector-user-menu-notifications
    .vector-menu-content-list {

        display: flex !important;

        flex-flow: row nowrap !important;

        gap: 6px !important;

    }


    #pt-notifications-alert,
    #pt-notifications-notice {

        position: static !important;

        width: 40px !important;

    }


    /* ======================================================
       4. CLEAN HEADER ROW
       ====================================================== */

    .vector-header-end {

        display: flex !important;

        flex-flow: row nowrap !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 6px !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 3px 0 1px !important;

        overflow: visible !important;

    }


    .vector-user-links {

        display: flex !important;

        flex-flow: row nowrap !important;

        align-items: center !important;

        gap: 6px !important;

        width: auto !important;

        overflow: visible !important;

    }


    .vector-user-links-main {

        display: flex !important;

        flex-flow: row nowrap !important;

        align-items: center !important;

        gap: 6px !important;

        width: auto !important;

        overflow: visible !important;

    }


    /* ======================================================
       5. DROPDOWNS
       Every important mobile dropdown becomes an on-screen
       fixed panel instead of opening outside the viewport.
       ====================================================== */

    #vector-main-menu-dropdown
    .vector-dropdown-content,

    #vector-appearance-dropdown
    .vector-dropdown-content,

    #vector-user-links-dropdown
    .vector-dropdown-content {

        position: fixed !important;

        left: 10px !important;
        right: 10px !important;

        width: auto !important;

        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;

        background: #151515 !important;

        border: 1px solid var(--ep-border) !important;

        border-radius: 12px !important;

        box-shadow:
            0 16px 35px
            rgba(0, 0, 0, .82) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        z-index: 30000 !important;

        -webkit-overflow-scrolling: touch;

    }


    /* ======================================================
       6. MAIN HAMBURGER MENU
       ====================================================== */

    #vector-main-menu-dropdown
    .vector-dropdown-content {

        top: 57px !important;

        max-height:
            calc(100vh - 75px) !important;

    }


    /* Main menu internals */

    #vector-main-menu-dropdown
    .vector-main-menu,

    #vector-main-menu-dropdown
    .vector-unpinned-container,

    #vector-main-menu-dropdown
    .vector-menu {

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;

    }


    /* Main menu lists become normal vertical lists */

    #vector-main-menu-dropdown
    .vector-menu-content-list {

        display: block !important;

        width: 100% !important;

    }


    #vector-main-menu-dropdown
    .vector-menu-content-list > li {

        display: block !important;

        width: 100% !important;

    }


    #vector-main-menu-dropdown
    .vector-menu-content-list > li > a {

        display: block !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 10px 12px !important;

        color: var(--ep-gold) !important;

        border: 0 !important;
        border-radius: 7px !important;

        background: transparent !important;

    }


    #vector-main-menu-dropdown
    .vector-menu-content-list > li > a:hover {

        background:
            var(--ep-panel-hover) !important;

    }


    /* ======================================================
       7. APPEARANCE MENU
       ====================================================== */

    #vector-appearance-dropdown
    .vector-dropdown-content {

        top: 101px !important;

        max-height:
            calc(100vh - 120px) !important;

    }


    #vector-appearance-dropdown
    .vector-unpinned-container,

    #vector-appearance-dropdown
    .vector-appearance,

    #vector-appearance-dropdown
    .vector-menu {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

    }


    /* Appearance options should be vertical */

    #vector-appearance-dropdown
    .vector-menu-content-list {

        display: block !important;

        width: 100% !important;

    }


    #vector-appearance-dropdown
    .vector-menu-content-list > li {

        display: block !important;

        width: 100% !important;

    }


    /* ======================================================
       8. PROFILE MENU
       ====================================================== */

    #vector-user-links-dropdown
    .vector-dropdown-content {

        top: 101px !important;

        max-height:
            calc(100vh - 120px) !important;

    }


    #vector-user-links-dropdown
    .vector-menu-content-list {

        display: block !important;

        width: 100% !important;

    }


    #vector-user-links-dropdown
    .vector-menu-content-list > li {

        display: block !important;

        width: 100% !important;

    }


    #vector-user-links-dropdown
    .vector-menu-content-list > li > a {

        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 10px 12px !important;

    }


    /* ======================================================
       9. DO NOT LET GENERIC DROPDOWN CSS REPOSITION
       THESE THREE MENUS
       ====================================================== */

    #vector-main-menu-dropdown,
    #vector-appearance-dropdown,
    #vector-user-links-dropdown {

        position: static !important;

    }


    /* ======================================================
       10. HEADER ICON SIZE
       ====================================================== */

    .vector-header
    .vector-icon {

        width: 21px !important;

        min-width: 21px !important;

        height: 21px !important;

        min-height: 21px !important;

        margin: 0 !important;

    }

}


/* ==========================================================
   EXTRA SMALL PHONES
   ========================================================== */

@media screen and (max-width: 420px) {

    .vector-header-end,
    .vector-user-links,
    .vector-user-links-main {

        gap: 4px !important;

    }


    .vector-header .search-toggle,

    #vector-main-menu-dropdown-label,

    #vector-appearance-dropdown-label,

    #vector-user-links-dropdown-label,

    #pt-notifications-alert > a,

    #pt-notifications-notice > a,

    #pt-watchlist-2 > a {

        flex-basis: 37px !important;

        width: 37px !important;
        min-width: 37px !important;
        max-width: 37px !important;

        height: 37px !important;
        min-height: 37px !important;
        max-height: 37px !important;

        padding: 6px !important;

    }


    #vector-user-links-dropdown-label {

        flex-basis: 44px !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

    }

}
/* ==========================================================
   EMPIRE OF PRAXIA
   MOBILE HEADER FIX v4
   ========================================================== */

@media screen and (max-width: 900px) {

    /* Disable Vector's secondary sticky header */
    .vector-sticky-header-container,
    #vector-sticky-header {
        display: none !important;
    }


    /* ======================================================
       MAIN HEADER CONTAINER
       ====================================================== */

    body > .vector-header-container:first-of-type {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 10000 !important;

        background: #0d0d0d !important;
        background-image: none !important;

        border-bottom: 1px solid var(--ep-border) !important;

        box-shadow: 0 5px 18px rgba(0,0,0,.45) !important;

        transform: translateY(0) !important;
        opacity: 1 !important;

        transition:
            transform .25s ease,
            opacity .20s ease !important;

        overflow: visible !important;
    }


    /* Header hidden while scrolling down */

    body > .vector-header-container:first-of-type.ep-mobile-header-hidden {
        transform: translateY(-105%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /* ======================================================
       INNER HEADER
       ====================================================== */

    body > .vector-header-container:first-of-type .vector-header,
    body > .vector-header-container:first-of-type .mw-header {
        position: relative !important;

        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;

        gap: 5px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 7px 10px 6px !important;

        box-sizing: border-box !important;

        background: #0d0d0d !important;
        background-image: none !important;

        border: 0 !important;

        box-shadow: none !important;

        overflow: visible !important;

        transform: none !important;
    }


    /* ======================================================
       LOGO / HAMBURGER ROW
       ====================================================== */

    body > .vector-header-container:first-of-type .vector-header-start {
        display: flex !important;

        align-items: center !important;

        gap: 9px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    #vector-main-menu-dropdown-label {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 7px !important;

        box-sizing: border-box !important;

        background: #171717 !important;
        background-image: none !important;

        border: 1px solid var(--ep-border) !important;

        border-radius: 10px !important;

        box-shadow: none !important;
    }


    .mw-logo,
    .mw-logo-container {
        background: transparent !important;
        background-image: none !important;

        border: 0 !important;

        box-shadow: none !important;

        filter: none !important;
    }


    .mw-logo {
        flex: 1 1 auto !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .mw-logo-wordmark {
        color: var(--ep-gold) !important;

        font-family: var(--ep-heading-font) !important;

        font-size: 18px !important;
        font-weight: 700 !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;

        text-shadow: none !important;

        filter: none !important;
    }


    /* ======================================================
       ICON ROW
       ====================================================== */

    body > .vector-header-container:first-of-type .vector-header-end {
        display: flex !important;

        flex-flow: row nowrap !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 6px !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 2px 0 0 !important;

        overflow: visible !important;
    }


    body > .vector-header-container:first-of-type .vector-user-links,
    body > .vector-header-container:first-of-type .vector-user-links-main {
        display: flex !important;

        flex-flow: row nowrap !important;

        align-items: center !important;

        gap: 6px !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    /* Hide redundant username/preference blocks */

    #p-vector-user-menu-userpage,
    #p-vector-user-menu-preferences {
        display: none !important;
    }


    /* ======================================================
       REMOVE WRAPPER BOXES
       ====================================================== */

    #p-vector-user-menu-notifications,
    #p-vector-user-menu-overflow,
    .vector-user-menu,
    .vector-user-menu-logged-in {
        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;
    }


    /* ======================================================
       REAL TOP ICON BUTTONS ONLY
       ====================================================== */

    body > .vector-header-container:first-of-type .search-toggle,
    #vector-main-menu-dropdown-label,
    #vector-appearance-dropdown-label,
    #vector-user-links-dropdown-label,
    #pt-notifications-alert > a,
    #pt-notifications-notice > a,
    #pt-watchlist-2 > a {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;

        padding: 7px !important;

        box-sizing: border-box !important;

        background: #171717 !important;
        background-image: none !important;

        border: 1px solid var(--ep-border) !important;

        border-radius: 10px !important;

        box-shadow: none !important;

        transform: none !important;
    }


    #vector-user-links-dropdown-label {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }


    body > .vector-header-container:first-of-type .vector-icon {
        width: 21px !important;
        min-width: 21px !important;

        height: 21px !important;
        min-height: 21px !important;

        margin: 0 !important;
    }


    /* ======================================================
       NOTIFICATION GROUP
       ====================================================== */

    #p-vector-user-menu-notifications .vector-menu-content {
        position: static !important;

        display: block !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        box-shadow: none !important;

        overflow: visible !important;
    }


    #p-vector-user-menu-notifications .vector-menu-content-list {
        display: flex !important;

        flex-flow: row nowrap !important;

        align-items: center !important;

        gap: 6px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #p-vector-user-menu-notifications .vector-menu-content-list > li {
        display: block !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    /* ======================================================
       MOBILE DROPDOWN PANELS
       ====================================================== */

    #vector-main-menu-dropdown .vector-dropdown-content,
    #vector-appearance-dropdown .vector-dropdown-content,
    #vector-user-links-dropdown .vector-dropdown-content {
        position: fixed !important;

        top: 100px !important;
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        max-height: calc(100vh - 120px) !important;

        margin: 0 !important;

        padding: 16px !important;

        box-sizing: border-box !important;

        transform: none !important;

        background: #151515 !important;
        background-image: none !important;

        border: 1px solid var(--ep-border) !important;

        border-radius: 14px !important;

        box-shadow: 0 16px 40px rgba(0,0,0,.85) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        z-index: 50000 !important;

        -webkit-overflow-scrolling: touch;
    }


    /* ======================================================
       IMPORTANT:
       Undo 40px button sizing inside dropdown menus
       ====================================================== */

    #vector-main-menu-dropdown .vector-dropdown-content a,
    #vector-main-menu-dropdown .vector-dropdown-content button,
    #vector-appearance-dropdown .vector-dropdown-content a,
    #vector-appearance-dropdown .vector-dropdown-content button,
    #vector-user-links-dropdown .vector-dropdown-content a,
    #vector-user-links-dropdown .vector-dropdown-content button {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        transform: none !important;
    }


    /* Hide Vector move/hide pin buttons inside mobile menus */

    #vector-main-menu-dropdown .vector-pinnable-header-toggle-button,
    #vector-appearance-dropdown .vector-pinnable-header-toggle-button {
        display: none !important;
    }


    /* ======================================================
       MAIN MENU CONTENT
       ====================================================== */

    #vector-main-menu-dropdown .vector-main-menu,
    #vector-main-menu-dropdown .vector-unpinned-container,
    #vector-main-menu-dropdown .vector-menu,
    #vector-main-menu-dropdown .vector-menu-content {
        position: static !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        background: transparent !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    #vector-main-menu-dropdown .vector-menu-content-list {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #vector-main-menu-dropdown .vector-menu-content-list > li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #vector-main-menu-dropdown .vector-menu-content-list > li > a {
        display: block !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 10px 12px !important;

        color: var(--ep-gold-light) !important;

        background: transparent !important;

        border: 0 !important;

        border-radius: 8px !important;

        font-size: 15px !important;

        line-height: 1.3 !important;

        white-space: normal !important;
    }


    #vector-main-menu-dropdown .vector-menu-heading {
        display: block !important;

        width: 100% !important;

        margin: 12px 0 5px !important;

        color: var(--ep-gold) !important;

        font-family: var(--ep-heading-font) !important;

        font-size: 15px !important;
    }


    /* ======================================================
       PROFILE MENU
       ====================================================== */

    #vector-user-links-dropdown .vector-menu,
    #vector-user-links-dropdown .vector-menu-content {
        position: static !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    #vector-user-links-dropdown .vector-menu-content-list {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #vector-user-links-dropdown .vector-menu-content-list > li {
        display: block !important;

        width: 100% !important;
    }


    #vector-user-links-dropdown .vector-menu-content-list > li > a {
        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 11px 12px !important;

        color: var(--ep-gold-light) !important;

        white-space: normal !important;
    }


    /* ======================================================
       APPEARANCE MENU
       ====================================================== */

    #vector-appearance-dropdown .vector-menu,
    #vector-appearance-dropdown .vector-menu-content,
    #vector-appearance-dropdown form {
        position: static !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    #vector-appearance-dropdown .vector-menu-content-list {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ======================================================
       SPACE PAGE BELOW FIXED HEADER
       ====================================================== */

    .mw-page-container {
        padding-top: 101px !important;
    }

}


/* ==========================================================
   EXTRA SMALL PHONES
   ========================================================== */

@media screen and (max-width: 420px) {

    .mw-logo-wordmark {
        font-size: 16px !important;
    }


    #vector-main-menu-dropdown .vector-dropdown-content,
    #vector-appearance-dropdown .vector-dropdown-content,
    #vector-user-links-dropdown .vector-dropdown-content {
        top: 94px !important;

        left: 8px !important;
        right: 8px !important;

        max-height: calc(100vh - 110px) !important;

        padding: 14px !important;
    }

}
/* ==========================================================
   Hide anonymous Create account / Log in links on mobile
   ========================================================== */

@media screen and (max-width: 900px) {

    #pt-createaccount-2,
    #pt-login-2,
    #pt-createaccount,
    #pt-login {
        display: none !important;
    }

}
/* ==========================================
   Remove default MediaWiki footer boxes
   ========================================== */

#footer,
.mw-footer,
#footer-info,
#footer-places,
#footer-icons {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove the black rectangle behind the copyright text */
#footer-info li,
#footer-places li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Give it spacing instead */
#footer {
    margin-top: 40px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--ep-border) !important;
}

/* Match your theme */
#footer-info,
#footer-places {
    color: var(--ep-text-muted) !important;
    font-size: 0.95rem;
}

#footer a {
    color: var(--ep-gold) !important;
}

#footer a:hover {
    color: var(--ep-gold-light) !important;
}
/* ==========================================
   Completely remove the black title background
   ========================================== */

.vector-page-titlebar,
.vector-page-titlebar-content,
.vector-page-heading,
.vector-page-titlebar-header,
.mw-first-heading,
.firstHeading {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

.vector-page-titlebar::before,
.vector-page-titlebar::after,
.vector-page-heading::before,
.vector-page-heading::after,
.mw-first-heading::before,
.mw-first-heading::after {
    display: none !important;
    content: none !important;
}
/* ==========================================================
   FINAL MOBILE MEDIA + TABLE SYSTEM
   One authoritative mobile block. Do not add old image/table
   patches below this section.
   ========================================================== */

@media screen and (max-width: 900px) {

    /* ------------------------------------------------------
       IMAGES

       IMPORTANT: Do NOT set width here. MediaWiki's source
       size remains authoritative:

       [[File:Thing.png|170px]] -> 170px
       [[File:Thing.png|32px]]  -> 32px

       max-width only prevents genuinely large images/maps from
       widening the phone viewport.
       ------------------------------------------------------ */

    .mw-parser-output img,
    .mw-parser-output img.mw-file-element,
    .mw-file-element,
    .resource-image img,
    .resource-card .resource-image img,
    .armor-image img,
    .weapon-image img,
    .monster-header img,
    .ore-image img,
    .skill-image img,
    .guide-image img,
    .item-image-large img,
    .item-card img,
    .ep-button img,
    .recipe img,
    .drops-table img {
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain;
        image-rendering: pixelated;
    }

    /* Never force a mobile width on MediaWiki images. */
    .mw-parser-output img[width],
    .mw-parser-output .mw-file-element[width] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Image wrappers may shrink with the article, but must not
       stretch the image itself to 100%. */
    .mw-parser-output figure,
    .mw-parser-output .thumb,
    .mw-parser-output .thumbinner,
    .mw-parser-output .mw-default-size,
    .mw-parser-output .mw-halign-center,
    .mw-parser-output .mw-halign-left,
    .mw-parser-output .mw-halign-right {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Maps and other deliberately large images stay responsive. */
    .map-container img,
    .location-map img,
    .monster-container > img,
    .mw-parser-output figure img,
    .mw-parser-output .thumb img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ------------------------------------------------------
       CARDS / CONTENT WIDTH
       ------------------------------------------------------ */

    #content,
    .mw-body,
    .vector-body,
    #mw-content-text,
    .mw-parser-output,
    .item-card,
    .resource-card,
    .skill-section,
    .ep-card,
    .guide-card,
    .progression-card {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Keep centered guide lists tidy without forcing icon sizes. */
    .ep-card ul,
    .guide-card ul,
    .progression-card ul,
    .mw-parser-output .ep-section ul {
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        text-align: left !important;
    }

    /* ------------------------------------------------------
       TABLES
       ------------------------------------------------------ */

    .mw-parser-output table,
    .mw-parser-output .wikitable,
    .monster-table,
    .drops-table,
    .resource-table,
    .armor-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 14px auto !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        box-sizing: border-box !important;
    }

    .mw-parser-output table th,
    .mw-parser-output table td,
    .mw-parser-output .wikitable th,
    .mw-parser-output .wikitable td,
    .monster-table th,
    .monster-table td,
    .drops-table th,
    .drops-table td,
    .resource-table th,
    .resource-table td,
    .armor-table th,
    .armor-table td {
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-wrap: break-word !important;
        word-break: normal !important;
        padding: 8px 9px !important;
    }

    /* Two-column stat tables: give the value side more room. */
    .mw-parser-output .wikitable th:first-child,
    .monster-table th:first-child,
    .armor-table th:first-child {
        width: 40% !important;
    }

    .mw-parser-output table a,
    .mw-parser-output .wikitable a,
    .monster-table a,
    .drops-table a,
    .resource-table a,
    .armor-table a {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Images inside tables keep the exact size requested in
       wiki markup. No 32/34/36px CSS cap is applied here. */
    .mw-parser-output table img,
    .mw-parser-output .wikitable img,
    .monster-table img,
    .drops-table img,
    .resource-table img,
    .armor-table img {
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        vertical-align: middle !important;
    }
}

/* ==========================================================
   MOBILE HEADER CLICK TARGET FIX
   Prevent the hamburger/header-start layer from sitting over
   the search button on mobile.
   ========================================================== */

@media screen and (max-width: 900px) {

    /*
       The top-left Vector header section spans the full row.
       Make its empty area ignore taps so it cannot steal taps
       from the search button on the row below.
    */
    body > .vector-header-container:first-of-type .vector-header-start {
        pointer-events: none !important;
    }

    /*
       Re-enable only the controls that actually belong to the
       top-left row.
    */
    body > .vector-header-container:first-of-type #vector-main-menu-dropdown,
    body > .vector-header-container:first-of-type #vector-main-menu-dropdown-label,
    body > .vector-header-container:first-of-type .mw-logo,
    body > .vector-header-container:first-of-type .mw-logo *,
    body > .vector-header-container:first-of-type .mw-logo-container,
    body > .vector-header-container:first-of-type .mw-logo-container * {
        pointer-events: auto !important;
    }

    /*
       Constrain the hamburger dropdown wrapper to the size of
       the hamburger itself. It must not create an invisible
       click layer across the icon row.
    */
    body > .vector-header-container:first-of-type #vector-main-menu-dropdown {
        position: relative !important;

        flex: 0 0 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    body > .vector-header-container:first-of-type #vector-main-menu-dropdown-label {
        position: relative !important;
        z-index: 2 !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
    }

    /*
       Keep the real search control above surrounding layout
       layers and guarantee it receives the tap.
    */
    body > .vector-header-container:first-of-type .search-toggle {
        position: relative !important;
        z-index: 20 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    /*
       Header-end is the actual icon row. Keep it interactive
       and above the empty first-row layout area.
    */
    body > .vector-header-container:first-of-type .vector-header-end {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
}

/* ==========================================================
   MOBILE RESOURCE CARD COMPACT LAYOUT
   Remove the old 170px flex-basis from the vertical mobile
   layout so smaller showcase images do not leave huge gaps.
   ========================================================== */

@media screen and (max-width: 900px) {

    .resource-card {
        gap: 14px !important;
        padding: 18px !important;
    }

    /*
       Desktop uses flex: 0 0 170px for the left image column.
       On mobile the card becomes a COLUMN, so that 170px turns
       into vertical reserved space. Reset it here.
    */
    .resource-card .resource-image,
    .resource-image {
        flex: 0 0 auto !important;
        flex-basis: auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        line-height: 0 !important;
    }

    .resource-card .resource-image img,
    .resource-image img {
        display: block !important;

        margin: 0 auto !important;

        /*
           Do NOT set width here. The size written in wiki
           markup remains authoritative.
        */
        max-width: 100% !important;
        height: auto !important;
    }

    .resource-card .resource-info,
    .resource-info {
        flex: 0 1 auto !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .resource-info h2,
    .resource-info h3,
    .resource-info h4 {
        margin-top: 4px !important;
    }

    /*
       Keep generic item/skill cards compact too when their
       artwork has been made smaller.
    */
    .item-card,
    .skill-section {
        min-height: 0 !important;
    }

    .item-card > :first-child,
    .skill-section > :first-child {
        margin-top: 0 !important;
    }
}

/* ==========================================================
   MOBILE INLINE SEARCH DROPDOWN
   ========================================================== */

@media screen and (max-width: 900px) {

    .ep-mobile-search-panel {
        position: fixed !important;

        top: var(--ep-search-top, 110px) !important;
        left: 14px !important;
        right: 14px !important;

        z-index: 999999 !important;

        display: block !important;

        padding: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(-8px) scale(.985) !important;

        transition:
            opacity .16s ease,
            transform .16s ease,
            visibility .16s ease !important;
    }


    .ep-mobile-search-panel.ep-mobile-search-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) scale(1) !important;
    }


    .ep-mobile-search-form {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        padding: 8px !important;

        box-sizing: border-box !important;

        background:
            rgba(20,20,20,.98) !important;

        border:
            1px solid var(--ep-border) !important;

        border-radius:
            12px !important;

        box-shadow:
            0 14px 32px rgba(0,0,0,.72) !important;

        backdrop-filter:
            blur(12px);
    }


    .ep-mobile-search-input {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 42px !important;

        margin: 0 !important;
        padding: 0 13px !important;

        box-sizing: border-box !important;

        background:
            #111 !important;

        color:
            var(--ep-text) !important;

        border:
            1px solid #4b4b4b !important;

        border-radius:
            9px !important;

        outline:
            none !important;

        box-shadow:
            none !important;

        font-family:
            var(--ep-body-font) !important;

        font-size:
            16px !important;
    }


    .ep-mobile-search-input::placeholder {
        color:
            #858585 !important;
    }


    .ep-mobile-search-input:focus {
        border-color:
            var(--ep-gold) !important;

        box-shadow:
            0 0 0 2px rgba(212,175,55,.12) !important;
    }


    .ep-mobile-search-submit {
        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 42px !important;

        margin: 0 0 0 8px !important;
        padding: 0 14px !important;

        background:
            #191919 !important;

        color:
            var(--ep-gold) !important;

        border:
            1px solid var(--ep-border) !important;

        border-radius:
            9px !important;

        box-shadow:
            none !important;

        font-family:
            var(--ep-body-font) !important;

        font-size:
            15px !important;
        font-weight:
            700 !important;

        line-height:
            1 !important;
    }


    .ep-mobile-search-submit:active {
        background:
            #242424 !important;
    }


    body > .vector-header-container:first-of-type
    .search-toggle.ep-mobile-search-active {
        background:
            #242424 !important;

        border-color:
            var(--ep-gold) !important;
    }

}


@media screen and (max-width: 430px) {

    .ep-mobile-search-panel {
        left: 10px !important;
        right: 10px !important;
    }


    .ep-mobile-search-form {
        padding: 7px !important;
    }


    .ep-mobile-search-submit {
        padding-inline:
            11px !important;
    }

}
/* ==========================================================
   SEARCH DROPDOWN — KEEP ABOVE PAGE CONTENT
   ========================================================== */

/* Search/header itself */
.vector-header-container,
.vector-header,
.vector-search-box,
.vector-typeahead-search-container,
#p-search {
    position: relative !important;
    z-index: 50000 !important;
    overflow: visible !important;
}

/* Modern Vector / Codex search suggestions */
.cdx-menu,
.cdx-menu__listbox,
.cdx-typeahead-search,
.cdx-typeahead-search__menu,
.cdx-search-input,
.vector-typeahead-search-container .cdx-menu,
.vector-typeahead-search-container [role="listbox"] {
    z-index: 999999 !important;
}

/* Older Vector search suggestions */
.suggestions,
.suggestions-results,
.suggestions-special,
.suggestions-results-container,
.searchsuggestions {
    position: absolute !important;
    z-index: 999999 !important;
}

/* Make sure no header wrapper clips the dropdown */
.vector-header-start,
.vector-header-end,
.vector-header,
.vector-header-container,
.vector-search-box,
.vector-search-box-form,
.vector-search-box-inner {
    overflow: visible !important;
}

/* Keep the actual page below the search suggestions */
.mw-page-container,
.mw-body,
#content,
.vector-body {
    position: relative;
    z-index: 1 !important;
}

/* --- mediawiki core behaviour --- */
/* Blank list items exist in the source wikitext. MediaWiki hides them; without this they
   render as empty bullets. */
.mw-empty-elt { display: none; }

/* Editing furniture is stripped at import, but hide any that survives a future re-import. */
.mw-editsection, .mw-editsection-bracket, .mw-editsection-divider { display: none; }

/* MediaWiki heading wrapper: keep the heading flush rather than inheriting extra spacing. */
.mw-heading { margin: 0; }
.mw-heading h1, .mw-heading h2, .mw-heading h3 { margin-top: 1.2em; }

/* Image alignment helpers used throughout the imported pages. */
.mw-halign-center { margin-inline: auto; text-align: center; }
.mw-halign-right  { float: right; margin: 0 0 .5em 1em; }
.mw-halign-left   { float: left;  margin: 0 1em .5em 0; }
figure[typeof~="mw:File"] { margin: .5em 0; }
figure[typeof~="mw:File"] figcaption { font-size: .9em; opacity: .8; }

/* Wide imported tables must scroll inside their own box, not push the page sideways. */
.mw-parser-output { overflow-wrap: break-word; }

/* ==========================================================================================
   PALETTE HARMONISATION  ·  appended after the imported stylesheet
   ------------------------------------------------------------------------------------------
   The imported wiki was designed against a black-and-brown palette (#050505 -> #3a2a0a with
   dull brass accents). Dropped onto this site's dark green it read as mud.

   Appended rather than edited into the 148 KB import, so a future re-import of the community
   wiki's CSS cannot silently drop these corrections, and reverting is one block delete.

   Colours below are the site's own: ink #060d09, deep #0a1610, moss #122419, edge #2c5239,
   gold #f5b942, ember #e8792c.
   ========================================================================================== */

/* ---- section banners -------------------------------------------------------------------- */
.ep-header {
  background: linear-gradient(135deg, #0a1610 0%, #16301f 55%, #1d3d28 100%) !important;
  border: 2px solid #2c5239 !important;
  color: #f4e9d2 !important;
  /* the brown version had a flat 40px block; a little depth separates it from the page */
  box-shadow: inset 0 1px 0 rgba(245, 185, 66, .12), 0 6px 22px rgba(0, 0, 0, .45) !important;
}

.ep-title {
  color: #f5b942 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55) !important;
}

.ep-subtitle {
  color: #9db897 !important;
}

/* ---- panels and cards ------------------------------------------------------------------- */
.ep-container,
.armor-container {
  background: linear-gradient(180deg, #122419, #0a1610) !important;
  border-color: #2c5239 !important;
  color: #cbdcc3 !important;
}

.ep-button,
.armor-section {
  background: #122419 !important;
  border: 2px solid #2c5239 !important;
  color: #dceada !important;
  transition: border-color .18s, transform .18s cubic-bezier(.2, .7, .3, 1);
}

.ep-button:hover {
  border-color: #f5b942 !important;
  transform: translateY(-2px);
}

.ep-button a,
.ep-button span {
  color: #dceada !important;
}

/* ---- headers inside the imported components --------------------------------------------- */
.armor-header,
.armor-title,
.armor-name {
  color: #f5b942 !important;
}

/* ---- the brass accents the import used for rules and highlights -------------------------- */
.ep-container hr,
.armor-container hr,
hr {
  border: 0 !important;
  border-top: 2px solid #2c5239 !important;
}

/* ---- tables carried over from MediaWiki -------------------------------------------------- */
.wikitable {
  background: #0a1610 !important;
  border: 2px solid #2c5239 !important;
  color: #cbdcc3 !important;
}

.wikitable > * > tr > th {
  background: #1b3323 !important;
  color: #9db897 !important;
  border-color: #2c5239 !important;
}

.wikitable > * > tr > td {
  border-color: rgba(44, 82, 57, .6) !important;
}

/* A wide imported table should scroll in its own box rather than push the page sideways. */
.mw-parser-output > table,
.mw-parser-output > div > table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* ---- links inside imported content ------------------------------------------------------- */
.mw-parser-output a {
  color: #f5b942 !important;
}

.mw-parser-output a:hover {
  color: #ffd171 !important;
}

/* Red links point at pages that never existed; they were stripped at import, but style any
   that survive so they do not look like working links. */
.mw-parser-output a.new {
  color: #9db897 !important;
  cursor: default;
  text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ep-button { transition: none; }
  .ep-button:hover { transform: none; }
}

/* ---- footer navigation ------------------------------------------------------------------
   Rebuilds the community links that lived in the source wiki's sidebar. Without these,
   Contributors and Other Useful Pages exist but nothing points at them. */
.footnav{display:flex;flex-wrap:wrap;gap:.35rem .55rem;align-items:center;justify-content:center;
margin:0 0 .9rem;font-size:.95rem;line-height:2}
.footnav a{color:#9db897 !important;padding:.25rem .15rem}
.footnav a:hover{color:#f5b942 !important}
.footnav .sep{color:#2c5239}

/* ---- live player stats ------------------------------------------------------------------
   Fed by player-stats.js from the game's public leaderboard API. */
.livestats{margin:1.4rem 0}
.livestats h2{margin-bottom:.6rem}
.ls-table{width:100%;border-collapse:collapse;background:#0a1610;border:2px solid #2c5239;
border-radius:10px;overflow:hidden}
.ls-table th{background:#1b3323;color:#9db897;font-size:.8rem;letter-spacing:.06em;
text-transform:uppercase;text-align:left;padding:.55rem .8rem}
.ls-table td{padding:.5rem .8rem;border-top:1px solid rgba(44,82,57,.55);color:#cbdcc3}
.ls-table tfoot td{border-top:2px solid #2c5239;color:#f4e9d2;font-weight:700}
.ls-rank{color:#f5b942;font-weight:700}
.ls-lvl{font-weight:700}
/* Tabular figures stop the XP column jittering when the numbers change on refresh. */
.ls-xp{font-variant-numeric:tabular-nums;text-align:right}
.ls-table td.ls-miss{color:#7f9c86;font-style:italic}
.ls-foot{color:#7f9c86;font-size:.85rem;margin-top:.45rem}
.ls-load,.ls-none{color:#9db897;font-style:italic}
@media (max-width:520px){
  .ls-table th,.ls-table td{padding:.45rem .5rem;font-size:.9rem}
}

/* ---- live contributor stats -------------------------------------------------------------
   player-stats.js refreshes the hand-authored .zone-skill rows from the game's leaderboard. */
.zone-live-stamp{color:#7f9c86;font-size:.82rem;margin:.6rem 0 0;font-style:italic}
/* Numbers change on refresh; tabular figures stop the column jumping when they do. */
.zone-xp,.zone-rank{font-variant-numeric:tabular-nums}
.zone-fill{transition:width .5s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion: reduce){ .zone-fill{transition:none} }

/* ---- language switcher --------------------------------------------------------------------- */
.praxia-lang{position:relative;display:inline-block;margin:.4rem .3rem;font-family:inherit}
.praxia-lang.floating{position:fixed;right:14px;bottom:14px;z-index:40;margin:0}
.praxia-lang-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:38px;
padding:0 .8rem;background:#122419;color:#dceada;border:2px solid #2c5239;border-radius:6px;
cursor:pointer;font-size:.9rem;font-family:inherit}
.praxia-lang-btn:hover{border-color:#f5b942;color:#f5b942}
.praxia-lang-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:60;
background:#0a1610;border:2px solid #2c5239;border-radius:8px;padding:.5rem;
width:min(340px,86vw);max-height:60vh;overflow:auto;
box-shadow:0 10px 30px rgba(0,0,0,.55);
display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem}
.praxia-lang-menu[hidden]{display:none}
.praxia-lang-menu button{min-height:36px;padding:0 .6rem;margin:0;background:transparent;
border:1px solid transparent;border-radius:4px;color:#cbdcc3;cursor:pointer;
font-size:.88rem;text-align:left;font-family:inherit}
.praxia-lang-menu button:hover{background:#122419;border-color:#2c5239;color:#f5b942}
.praxia-lang-menu button.on{color:#f5b942;border-color:#f5b942}
.praxia-lang-note{grid-column:1/-1;margin:.5rem .3rem 0;color:#7f9c86;font-size:.78rem;
line-height:1.5}

/* Google's own banner shoves the page down and sits over the sticky nav. */
.skiptranslate,
iframe.skiptranslate,
#goog-gt-tt,
.goog-te-banner-frame{display:none !important}
body{top:0 !important;position:static !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}

@media (max-width:520px){
  .praxia-lang-menu{grid-template-columns:1fr}
}

/* ---- language menu, readable ---------------------------------------------------------------
   Everything here overrides inherited site styling rather than adding new design: the pixel
   font and uppercase belong to headings, not to a list of language names in ten scripts. */
.praxia-lang,.praxia-lang *{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "Noto Sans","Noto Sans CJK SC","Noto Sans Arabic","Noto Sans Hebrew","Noto Sans Devanagari",
    sans-serif !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-shadow:none !important;
}
.praxia-lang-menu{
  grid-template-columns:repeat(2,minmax(150px,1fr));
  gap:.2rem;
  width:min(420px,90vw);
  padding:.55rem;
}
.praxia-lang-menu button{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:.05rem;min-height:44px;padding:.35rem .6rem;line-height:1.25;
}
.praxia-lang-native{font-size:.95rem;font-weight:600;color:#dceada}
.praxia-lang-en{font-size:.72rem;color:#7f9c86}
.praxia-lang-menu button:hover .praxia-lang-native,
.praxia-lang-menu button.on .praxia-lang-native{color:#f5b942}
.praxia-lang-menu button.on{background:rgba(245,185,66,.10)}
.praxia-lang-note{font-size:.75rem;line-height:1.45;padding-top:.4rem;
border-top:1px solid rgba(44,82,57,.6)}
/* Right-to-left names read wrong when forced left-aligned. */
.praxia-lang-menu button[lang="ar"],.praxia-lang-menu button[lang="he"]{direction:rtl;align-items:flex-end}
.praxia-lang-btn{text-transform:none !important;font-size:.9rem}
@media (max-width:520px){
  .praxia-lang-menu{grid-template-columns:1fr;width:min(300px,92vw)}
}

/* Group headings: the community's own languages first, everything else below. */
.praxia-lang-head{grid-column:1/-1;margin:.5rem .3rem .15rem;color:#f5b942;
font-size:.68rem;letter-spacing:.09em;text-transform:uppercase !important;font-weight:700}
.praxia-lang-head:first-child{margin-top:.1rem}