MediaWiki:Common.css: Difference between revisions

Latest revision as of 14:28, 1 January 2026

/* CSS placed here will be applied to all skins */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@font-face {
    font-family: "Outfit";
    src: url("/fonts/Outfit.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Daedalus";
    src: url("/fonts/000webfont.ttf") format("truetype");
}
:root,
.view-dark {
    --content-link-color: #ffc05f;
    --content-border-color: #feffe5;
    --heading-font-family: "Daedalus", sans-serif;
    --body-font-family: "Outfit", sans-serif;
    --accent-link-color: #22214d;
    --content-link-label-color: #0b101b;
}

:root{
    --is-top-logo: 1;
    --logo-file-width: 160;
    --logo-file-height: 160;
    --logo-height: calc(var(--logo-file-height)*1px);
    --logo-margin: 15px;
    --is-navigation-inside-content: 0;
}

/*****************************
*     Sound      *
******************************/
.sound-button,.sound-button a,.sound-button a.image,.sound-button img {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important
}

.sound-button img {
    filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);
    transition: filter 0.2s ease-in-out;
    display: inline-block !important; 
    vertical-align: middle;
    margin: 0 !important;
}

.sound-button {
    cursor: pointer;
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 2px !important;
    line-height: 1;
    white-space: nowrap;
}

.sound-button:hover img,.sound-button.playing img {
    filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(115%) contrast(100%) drop-shadow(0 0 2px rgba(201,225,230,0.7))
}

.sound-button a:hover,.sound-button a:focus {
    background: none !important;
    border: none !important
}
/*****************************
*   End Sound    *
******************************/

/*****************************
*     PortableInfoboxes      *
******************************/
:root {
    image-rendering: pixelated !important;
    --pi-background: var(--background-color-base);
    --pi-secondary-background: var(--color-progressive);
    --pi-secondary-background-label: var(--content-link-label-color);
    --pi-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
    text-align:center;
    font-size:1.5em;
    background: color-mix(in srgb, var(--color-progressive) 75%, transparent);
    color:var(--pi-secondary-background-label);
}

.portable-infobox .pi-data {
    background: color-mix(in srgb, var(--color-progressive) 18%, transparent);
    font-size: 115%;
    word-wrap: normal;
}

.miniboss-box .portable-infobox {
    box-shadow: 3px 3px 6px var(--content-border-color);
}

.portable-infobox .pi-image {
    padding: 8px;
}

.pi-image-thumbnail {
    max-width:100%;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
    background: var(--pi-secondary-background);
    color: var(--pi-secondary-background-label);
}

.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
    text-shadow: 0 0 5px var(--color-progressive);
    border-bottom: 0;
    font-family: var(--heading-font-family);
    font-weight: 550;
    margin: 0;
    word-wrap: normal;
}

.mw-body .portable-infobox  {
    border-radius:5px;
    border-image-source: var(--border-image-base);
    border-image-slice: 15 16;
    border-image-width: 15px;
    border-image-repeat: stretch;
}

.mw-body .portable-infobox h3 {
    font-size: 80%;
    font-weight: 500;
}
/*****************************
*   End PortableInfoboxes    *
******************************/

/** as of Module:navbox version 1.2.2 **/

/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    /*
     * don't trust the note that says margin doesn't work with inline
     * removing margin: 0 makes dds have margins again
     * We also want to reset margin-right in Minerva
     */
    margin: 0; 
    display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
    display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
    display: none;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
 * seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
    content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
    /* "space, Middle Dot, space" 
    We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
    The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
    /* content: "\20\00B7\20"; font-weight: bold; */
    /* "space &nbsp; • &nbsp; space" 
       There may (and likely) be an extra whitespace between <li>s, 
       therefore we have to use a space character as last character of this sequence. 
       By this way, the last space and the next whitespce will collapse as a single space,
       to make the whitespace on both sides of the middle dot the same width.
    */
    content: "\20\A0\2022\A0\20"; 
    font-weight: inherit;
}

/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
    content: "\20(";
    font-weight: inherit;
}

.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
    content: ")";
    font-weight: inherit;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}

.hlist ol > li {
    counter-increment: listitem;
}

.hlist ol > li::before {
    content: " " counter(listitem) ".\20";
}

/* Progressive enhancement:
 * try to make the dot always follow the list item in same line
 */
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
    display: inline-block;
}

/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
  --navbox-background: none;
  --navbox-margin: 0.5em auto;
  --navbox-padding: 4px;
  --navbox-gap: 3px;
  --navbox-outer-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
  --navbox-outer-border-width: 1px;
  --navbox-outer-border-style: solid;
  --navbox-outer-border-radius: 0px;
  --navbox-font-size: calc(1em - 2px);
  --navbox-title-color: var(--content-link-label-color);
  --navbox-title-font-size: calc(125%);
  --navbox-title-background: var(--color-progressive);
  --navbox-title-icon-color: var(--content-link-label-color);
  --navbox-title-link-color: var(--navbox-title-color);
  --navbox-title-link-color--visited: var(--navbox-title-link-color);
  --navbox-title-link-color--hover: var(--accent-link-color);
  --navbox-title-redlink-color: var(--navbox-title-link-color);
  --navbox-title-link-decoration: underline solid;
  --navbox-title-redlink-decoration: underline wavy;
  --navbox-title-padding--y: 0.5em;
  --navbox-above-background: color-mix(in srgb, var(--color-base) 15%, transparent);
  --navbox-above-color: var(--color-base);
  --navbox-above-padding: var(--navbox-list-padding);
  --navbox-below-background: var(--navbox-above-background);
  --navbox-below-color: var(--navbox-above-color);
  --navbox-below-padding: var(--navbox-above-padding);
  --navbox-header-color: var(--navbox-title-color);
  --navbox-header-font-size: calc(110%);
  --navbox-header-background: var(--navbox-title-background);
  --navbox-header-icon-color: var(--navbox-title-icon-color);
  --navbox-header-link-color: var(--navbox-title-link-color);
  --navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
  --navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
  --navbox-header-redlink-color: var(--navbox-title-redlink-color);
  --navbox-header-link-decoration: var(--navbox-title-link-decoration);
  --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
  --navbox-header-padding--y: 0.3em;
  --navbox-subheader-font-size: calc(100%);
  --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
  --navbox-list-background: color-mix(in srgb, var(--color-base) 5%, transparent);
  --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 8%, transparent);
  --navbox-list-color: var(--color-base);
  --navbox-list-padding: 0.25em 0.5em;
  --navbox-group-text-align: left;
  --navbox-group-text-align--mobile: left;
  --navbox-group-background: color-mix(in srgb, var(--color-progressive) 20%, transparent);
  --navbox-group-color: var(--color-base);
  --navbox-group-padding: var(--navbox-list-padding);
  --navbox-tree-line-color: color-mix(in srgb, var(--color-progressive) 30%, transparent);
  --navbox-tree-line-width: 2px;
  --navbox-tree-indent: 1em;
  --navbox-tree-line-indent: 0.5em;
  --navbox-tree-line-spacing: var(--navbox-gap);
  --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
  --navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
}
.ranger-navbox.pill, 
.ranger-navbox.pill-mobile{
  --navbox-pill-gap: 0.3em;
  --navbox-pill-padding: 0.25em 0.75em;
  --navbox-pill-border-radius: 3px;
  --navbox-pill-box-shadow: none;
  --navbox-pill-background: color-mix(in srgb, var(--color-base) 5%, transparent);
  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
  --navbox-pill-background--hover: var(--navbox-pill-background);
  --navbox-list-background: none;
  --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 3%, transparent);
}
.ranger-navbox.no-underline-title-links{
  --navbox-title-link-color: var(--accent-link-color);
  --navbox-title-link-decoration: none;
  --navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
  --navbox-padding: 0px;
  --navbox-outer-border-width: 0px;
}

/******************************
* Fallback for older browsers *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
    .ranger-navbox {
        --navbox-above-background: var(--background-color-neutral-subtle);
        --navbox-list-background: transparent;
        --navbox-list-background--striped: var(--background-color-neutral-subtle);
        --navbox-group-background: var(--background-color-neutral-subtle);
        --navbox-tree-line-color: var(--background-color-neutral-subtle);
    }
    .ranger-navbox.pill, 
    .ranger-navbox.pill-mobile {
      --navbox-pill-background: var(--background-color-neutral-subtle);
      --navbox-list-background--striped: transparent;
    }
}
/***************
* End fallback *
****************/

.ranger-navbox{
  border-color: var(--navbox-outer-border-color);
  border-style: var(--navbox-outer-border-style);
  border-width: var(--navbox-outer-border-width);
  border-radius: var(--navbox-outer-border-radius);
  padding: var(--navbox-padding);
  font-size: var(--navbox-font-size);
  margin: var(--navbox-margin);
  background: var(--navbox-background);
  line-height: 1.5;
  clear:both;
}

.ranger-navbox * {
  border: 0;
}
.ranger-navbox .center *{
  margin-left: unset;
  margin-right: unset;
}
.ranger-navbox, 
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
  text-align: center;
  min-height: 1.5em;
  position: relative;
  z-index: 0;
  font-weight: bold;
}
.ranger-navbox .ranger-title{
  color: var(--navbox-title-color);
  background: var(--navbox-title-background);
  font-size: var(--navbox-title-font-size);
  padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
    text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
    text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
  color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
  color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
    color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
  color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
  color: var(--navbox-header-color);
  background: var(--navbox-header-background);
  font-size: var(--navbox-header-font-size);
  padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-sublist .ranger-header{
  font-size: var(--navbox-subheader-font-size);
  padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
    text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
    text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
  color: var(--navbox-header-link-color);
}
.ranger-navbox .ranger-header a:visited{
  color: var(--navbox-header-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
    color:var(--navbox-header-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
  color:var(--navbox-header-link-color--hover);
}
.ranger-navbox .ranger-meta{
  font-size: var(--navbox-title-font-size);
  position: absolute;
  left: var(--navbox-icon-offset--x);
  top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
  display: block;
}
.ranger-navbox .ranger-meta .nv{
  --mask: var(--icon-metalinks);
  display: block;
  width: 0.84em; /* based on the icon graph */
  height: 0.84em;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--navbox-title-icon-color);
}
.ranger-navbox .ranger-meta .nv > a{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ranger-navbox .ranger-meta:has(.mw-selflink){
    display: none;
}
.ranger-navbox,
.ranger-navbox .ranger-section{
  position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
  display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
  pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
  pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
  --mask: var(--icon-chevron-down);
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  width: 1.5em;
  height: 1.5em;
  right: var(--navbox-icon-offset--x);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: var(--navbox-icon-offset--x);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--navbox-title-icon-color);
  transform: scaleY(-1);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
  top: 0;
  right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  background-color: var(--navbox-header-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
  transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
  display: none;
}
.ranger-navbox .ranger-list{
  width: unset;
  padding: var(--navbox-list-padding);
}
.ranger-navbox .ranger-above{
  background: var(--navbox-above-background);
  color: var(--navbox-above-color);
  padding: var(--navbox-above-padding);
  width: unset;
}
.ranger-navbox .ranger-below{
  background: var(--navbox-below-background);
  color: var(--navbox-below-color);
  padding: var(--navbox-below-padding);
  width: unset;
}
.ranger-navbox .ranger-sublist{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-section-body{
  display: grid;
  gap: var(--navbox-gap);
  grid-template-columns: auto minmax(0,1fr);
}
/* gap fix for collapsed content */
.ranger-navbox [class^="ranger-"][hidden="until-found"]{
  margin-top: calc(0px - var(--navbox-gap)) !important;
}
.ranger-navbox .ranger-row{
  display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
  text-align: var(--navbox-group-text-align);
  white-space: nowrap;
  font-weight: bold;
  background: var(--navbox-group-background);
  color: var(--navbox-group-color);
  padding: var(--navbox-group-padding);
  width: unset;
}
/* for desktop view */
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup{
  --navbox-group-text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup{
  --navbox-group-text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup{
  --navbox-group-text-align: right;
}
/* for mobile view */
.ranger-navbox.mobile-group-align-left .ranger-group,
.ranger-navbox.mobile-group-align-left .ranger-subgroup{
  --navbox-group-text-align--mobile: left;
}

.ranger-navbox.mobile-group-align-center .ranger-group,
.ranger-navbox.mobile-group-align-center .ranger-subgroup{
  --navbox-group-text-align--mobile: center;
}

.ranger-navbox.mobile-group-align-right .ranger-group,
.ranger-navbox.mobile-group-align-right .ranger-subgroup{
  --navbox-group-text-align--mobile: right;
}

.ranger-navbox .ranger-listbox > .ranger-wrap{
  background: var(--navbox-list-background);
  color: var(--navbox-list-color);
  flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
  flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
  grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
  display: grid;
  justify-items: stretch;
  align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
  background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
    display: inline-block;
}

.ranger-navbox .align-left,
.ranger-navbox .alignleft{
  text-align: left;
}
.ranger-navbox .align-center,
.ranger-navbox .aligncenter{
  text-align: center;
}
.ranger-navbox .align-right,
.ranger-navbox .alignright{
  text-align: right;
}

/* responsive */
@media screen and (max-width: 720px) {
  .ranger-navbox .ranger-section-body,
  .ranger-navbox .ranger-sublist {
    display: flex;
    flex-flow: column;
  }
  .ranger-navbox .ranger-row{
    display: block;
  }
  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
  .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
    margin-top: var(--navbox-gap);
  }
  .ranger-navbox .ranger-listbox.empty{
    display: none;
  }
  .ranger-navbox .ranger-group,
  .ranger-navbox .ranger-subgroup{
    text-align: var(--navbox-group-text-align--mobile);
    white-space: normal;
  }
  
  .ranger-navbox .ranger-sublist {
    padding-left: var(--navbox-tree-indent);
    margin-left: var(--navbox-tree-line-indent);
  }
  .ranger-navbox .ranger-subgroup,
  .ranger-navbox .ranger-listbox {
    position:relative;
  }
  .ranger-navbox .ranger-group br,
  .ranger-navbox .ranger-subgroup br{
    display: none;
  }
  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
  }
  .ranger-navbox .ranger-sublist .ranger-row > ::before{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent));
    top: 0;
    width: var(--navbox-tree-line-width);
    height: 100%;
    content: '';
    display: block;
    background-color: var(--navbox-tree-line-color);
  }
  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
    height: calc(100% + var(--navbox-gap));
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
    display: none;
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
    display: block;
    height: calc(50% + var(--navbox-tree-line-width)/2);
  }
  .ranger-navbox .ranger-subgroup::after,
  .ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
    height: var(--navbox-tree-line-width);
    content: '';
    background-color: var(--navbox-tree-line-color);
  }
  /* increase height for links */
  .ranger-navbox .hlist{
    line-height: 2;
  }
}
/**** `.pill` class: the "pill" style  ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
  display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
  display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
  display: inline-flex;
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
  padding: var(--navbox-pill-padding);
  border-radius: var(--navbox-pill-border-radius);
  box-shadow: var(--navbox-pill-box-shadow);
  background: var(--navbox-pill-background);
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap); 
  flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
  box-shadow: var(--navbox-pill-box-shadow--hover);
  background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
    /* remove middle dots betweem items */
    .ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
    .ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
      display: none;
    }
    /* remove parentheses around nested lists*/
    .ranger-navbox.pill-mobile .hlist dd ol::before,
    .ranger-navbox.pill-mobile .hlist dd ul::before,
    .ranger-navbox.pill-mobile .hlist dd dl::before,
    .ranger-navbox.pill-mobile .hlist dt ol::before,
    .ranger-navbox.pill-mobile .hlist dt ul::before,
    .ranger-navbox.pill-mobile .hlist dt dl::before,
    .ranger-navbox.pill-mobile .hlist li ol::before,
    .ranger-navbox.pill-mobile .hlist li ul::before,
    .ranger-navbox.pill-mobile .hlist li dl::before,
    .ranger-navbox.pill-mobile .hlist dd ol::after,
    .ranger-navbox.pill-mobile .hlist dd ul::after,
    .ranger-navbox.pill-mobile .hlist dd dl::after,
    .ranger-navbox.pill-mobile .hlist dt ol::after,
    .ranger-navbox.pill-mobile .hlist dt ul::after,
    .ranger-navbox.pill-mobile .hlist dt dl::after,
    .ranger-navbox.pill-mobile .hlist li ol::after,
    .ranger-navbox.pill-mobile .hlist li ul::after,
    .ranger-navbox.pill-mobile .hlist li dl::after {
      display: none;
    }
    /* make lists inline-flex */
    .ranger-navbox.pill-mobile .hlist ul,
    .ranger-navbox.pill-mobile .hlist ol,
    .ranger-navbox.pill-mobile .hlist dl{
      display: inline-flex;
      gap: var(--navbox-pill-gap);
      flex-wrap: wrap;
    }
    .ranger-navbox.pill-mobile .hlist li,
    .ranger-navbox.pill-mobile .hlist dt,
    .ranger-navbox.pill-mobile .hlist dd{
      padding: var(--navbox-pill-padding);
      border-radius: var(--navbox-pill-border-radius);
      box-shadow: var(--navbox-pill-box-shadow);
      background: var(--navbox-pill-background);
      display: flex;
      align-items: center;
      gap: var(--navbox-pill-gap);
      flex-wrap: wrap;
    }
    /* Add a hover / focus feedback style */
    .ranger-navbox.pill-mobile .hlist dd:hover,
    .ranger-navbox.pill-mobile .hlist dd:focus,
    .ranger-navbox.pill-mobile .hlist dt:hover,
    .ranger-navbox.pill-mobile .hlist dt:focus,
    .ranger-navbox.pill-mobile .hlist li:hover,
    .ranger-navbox.pill-mobile .hlist li:focus {
      box-shadow: var(--navbox-pill-box-shadow--hover);
      background: var(--navbox-pill-background--hover);
    }
}
/*********************
* End Template:Navbox*
**********************/

.mp-box {
    display:flex;
    flex-flow:column nowrap;
    width: calc(100% - 2px);
    box-sizing: border-box;
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.12) 0%, transparent 35%, rgba(76, 87, 181, 0.1) 65%, rgba(66, 162, 241, 0.12) 100%),
        radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.15), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(76, 87, 181, 0.12), transparent 50%),
        var(--background-color-transparent);
    padding:0;
    box-shadow: 
        0 0 50px 10px rgba(66, 162, 241, 0.2),
        0 0 80px 15px rgba(0, 0, 0, 0.8),
        inset 0 0 80px 15px rgba(66, 162, 241, 0.08),
        0 0 0 1px rgba(66, 162, 241, 0.3),
        inset 0 0 0 1px rgba(66, 162, 241, 0.2);
    margin-top: 1em;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.mp-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.6) 15%, 
        rgba(66, 162, 241, 1) 50%, 
        rgba(66, 162, 241, 0.6) 85%, 
        transparent);
    box-shadow: 
        0 0 15px rgba(66, 162, 241, 0.8),
        0 0 25px rgba(66, 162, 241, 0.5);
}

.mp-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.4) 20%, 
        rgba(66, 162, 241, 0.7) 50%, 
        rgba(66, 162, 241, 0.4) 80%, 
        transparent);
    box-shadow: 0 0 10px rgba(66, 162, 241, 0.6);
}

.mp-body {
    height: 100%;
    display: flex;
    padding:0.5em;
    flex-flow: column nowrap;
}

.mp-box.centered-content .mp-body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
}

.mp-box.has-floating-image {
    display:block;
}

.mp-box.has-floating-image .mp-body {
    height:unset;
    display:block;
}

.mp-box h2 {
    text-align:center;
    font-weight:bold;
    font-family: "Daedalus";
    overflow: initial;
    font-size: 4em;
    margin: 0.5em 0;
    padding: 0.5em 0;
    text-shadow: 
        0 0 30px rgba(66, 162, 241, 0.8),
        0 0 15px rgba(66, 162, 241, 0.6),
        0 2px 5px rgba(0, 0, 0, 0.8);
    color:var(--content-border-color);
    background: 
        linear-gradient(90deg, transparent 0%, rgba(66, 162, 241, 0.08) 50%, transparent 100%),
        radial-gradient(ellipse at center, rgba(26, 26, 34, 0.6), transparent 70%);
    border-radius: 8px;
    position: relative;
}

.mp-box h2::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.3) 30%, rgba(66, 162, 241, 0.5) 50%, rgba(66, 162, 241, 0.3) 70%, transparent);
}

.mp-box .welcome-message {
    font-size: 5.5em;
    margin: 0;
    padding: 0.4em 0;
    color: #fff;
    font-family: "Daedalus";
    text-shadow: 
        0 0 50px rgba(66, 162, 241, 1),
        0 0 35px rgba(66, 162, 241, 0.9),
        0 0 20px rgba(66, 162, 241, 0.7),
        0 0 10px rgba(255, 255, 255, 0.8),
        0 6px 12px rgba(0, 0, 0, 1),
        0 0 80px rgba(66, 162, 241, 0.6);
    letter-spacing: 0.08em;
    position: relative;
    animation: welcome-pulse 4s ease-in-out infinite;
    background: 
        linear-gradient(90deg, 
            transparent 0%, 
            rgba(66, 162, 241, 0.05) 30%, 
            rgba(66, 162, 241, 0.08) 50%, 
            rgba(66, 162, 241, 0.05) 70%, 
            transparent 100%);
    padding: 0.5em 1em;
    border-radius: 8px;
}

.mp-box .welcome-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.6) 20%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(66, 162, 241, 0.6) 80%, 
        transparent);
    box-shadow: 
        0 0 15px rgba(66, 162, 241, 1),
        0 0 25px rgba(66, 162, 241, 0.6);
}

.mp-box .welcome-message::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.5) 20%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(66, 162, 241, 0.5) 80%, 
        transparent);
    box-shadow: 
        0 0 12px rgba(66, 162, 241, 0.8),
        0 0 20px rgba(66, 162, 241, 0.5);
}

@keyframes welcome-pulse {
    0%, 100% { 
        text-shadow: 
            0 0 50px rgba(66, 162, 241, 1),
            0 0 35px rgba(66, 162, 241, 0.9),
            0 0 20px rgba(66, 162, 241, 0.7),
            0 0 10px rgba(255, 255, 255, 0.8),
            0 6px 12px rgba(0, 0, 0, 1),
            0 0 80px rgba(66, 162, 241, 0.6);
    }
    50% { 
        text-shadow: 
            0 0 65px rgba(66, 162, 241, 1),
            0 0 45px rgba(66, 162, 241, 1),
            0 0 30px rgba(66, 162, 241, 0.8),
            0 0 15px rgba(255, 255, 255, 1),
            0 6px 12px rgba(0, 0, 0, 1),
            0 0 100px rgba(66, 162, 241, 0.8);
    }
}

#mp-banner-container {
    position: relative;
}

#mp-box-welcome {
    text-align:center;
    position:relative;
    overflow:hidden;
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 30%, rgba(76, 87, 181, 0.12) 70%, rgba(66, 162, 241, 0.15) 100%),
        radial-gradient(ellipse at center, rgba(66, 162, 241, 0.18), transparent 60%),
        var(--background-color-transparent);
    box-shadow: 
        0 0 60px 12px rgba(66, 162, 241, 0.25),
        0 0 100px 20px rgba(0, 0, 0, 0.8),
        inset 0 0 100px 20px rgba(66, 162, 241, 0.1),
        0 0 0 1px rgba(66, 162, 241, 0.4),
        inset 0 0 0 1px rgba(66, 162, 241, 0.3);
}

#mp-welcome {
    display:flex;
    flex-flow:column nowrap;
    position: relative;
    height: 100%;
    font-family: var(--heading-font-family);
    z-index: 2;
    box-sizing: border-box;
    padding: 1em;
}

#mp-welcome .welcome-subtitle {
    height: 100%;
    font-family: var(--body-font-family);
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 50%, rgba(76, 87, 181, 0.08)),
        color-mix(in srgb, var(--background-color-base) 85%, transparent);
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
    padding: 1em;
    border-radius: 4px;
    box-shadow: 
        inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(66, 162, 241, 0.2);
}

#mp-banner {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(5px);
    z-index: -1;
    background: url(/images/e/e0/MP_banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.view-dark #mp-banner {
    filter: blur(5px) brightness(50%);
}

.view-light #mp-banner {
    filter: blur(5px) contrast(50%);
}

/* [[Template:MP_link]] */
.mp-links {
  --gap:10px;
  font-size: 1.5em;
}

.mp-links > ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    margin: 2px;
    gap:var(--gap);
}

.mp-main > .mp-links > ul { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(5em, 1fr));
}

@media screen and (max-width: 720px) {
    .mp-main > .mp-links > ul { 
        grid-template-columns: 1fr;
        gap: 1em;
    }
    
    .mp-main > .mp-links > ul > li {
        margin: 0 0.5em;
    }
}

.mp-links > ul > li {
    display:flex;
    flex-flow:column nowrap;
    align-items:stretch;
    text-align: center;
    box-sizing:border-box;
    padding-top: 0.5em;
    border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
    border-image-slice: 6;
    border-image-width: 6px;
    border-image-repeat: repeat repeat;
}

.mp-main > .mp-links > ul > li {
    background: 
        linear-gradient(135deg, #42a2f125 0%, transparent 50%, #4c57b525 100%),
        linear-gradient(to bottom, #42a2f140, #4c57b550, #42a2f130);
    margin: 0 3em;
    box-shadow: 
        inset 0 0 15px 3px #42a2f160,
        inset 0 -2px 8px 0 #4c57b540,
        0 2px 12px 0 rgba(66, 162, 241, 0.2),
        inset 2px 0 2px -1px rgba(255, 255, 255, 0.15),
        inset -2px 0 2px -1px rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(66, 162, 241, 0.3);
    border-radius: 4px;
    padding-top: 1em;
    padding-bottom: 0.5em;
    position: relative;
    overflow: hidden;
}

.mp-main > .mp-links > ul > li::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: tech-shimmer 3s infinite;
}

@keyframes tech-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.mp-main > .mp-links > ul > li:hover {
    background: 
        linear-gradient(135deg, #42a2f140 0%, transparent 50%, #4c57b540 100%),
        linear-gradient(to bottom, #42a2f155, #4c57b565, #42a2f145);
    box-shadow: 
        inset 0 0 20px 5px #42a2f180,
        inset 0 -2px 10px 0 #4c57b560,
        0 4px 20px 2px rgba(66, 162, 241, 0.35),
        inset 2px 0 4px -1px rgba(255, 255, 255, 0.25),
        inset -2px 0 4px -1px rgba(255, 255, 255, 0.25);
    border-color: rgba(66, 162, 241, 0.5);
}

.mp-links > ul > li::before {
    transition: opacity 0.5s ease-in-out; 
    z-index: 0;
    pointer-events: none; 
}
.mp-links > ul > li:hover::before {
    opacity: 0.2;
}
.mp-links > ul > li:hover {
    background-color: #42a2f180; 
}

.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}

.mp-links > ul > li {
    cursor: pointer;
}

.mp-links > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
    flex:1 1 auto;
    box-sizing:border-box;
    padding:5px;
    pointer-events: auto;
}

.mp-links > ul > li > a:first-child {
  height:100%;
}

.mp-links > ul > li > a:last-child:not(:first-child) {
  height:unset;
}

.mp-links.stretch,
.mp-links.stretch > ul {
    height:100%;
}

.mp-links.side-image li {
    flex-flow:row nowrap;
}

/* MP icon lists */
.mp-iconlists {
    display: flex;
    flex-flow: wrap;
    gap: 5px 20px;
}

.mp-iconlists > .mp-iconlist {
    flex: 1;
    min-width: fit-content;
}

.mp-iconlist {
    font-size: 4em;
}

.mp-iconlist > h3 {
    padding: 0;
    margin: 0;
}

.mp-iconlist > ul {
    list-style: none;
    margin: 0;
}

/* MP gallery */
.mp-box ul.gallery {
    display: flex;
    flex-flow: wrap;
    gap: 5px 10px;
    align-items: flex-end;
    justify-content: space-evenly;
    margin: 0;
}

.mp-box ul.gallery .gallerytext {
    margin-top: 1em;
    padding: 0;
    background-color: var(--background-color-neutral-subtle);
}

.mp-box .gallerybox:hover .gallerytext {
    background-color: color-mix(in srgb, var(--content-link-color) 20%, transparent);
}

.mp-box ul.gallery .gallerytext > p {
    margin: 0;
}

.mp-box ul.gallery .gallerytext a {
    display: block;
    padding: .5em 0;
}

/***********************
* End main page layout *
************************/

/***********************
* Start DRUID infoboxes *
************************/

.druid-container {
    --druid-background-color: var(--background-color-base);
    --druid-secondary-background-color: var(--color-progressive);
    --druid-secondary-background-label-color: var(--content-link-label-color);
    --druid-tertiary-background-color: var(--background-color-neutral-subtle);
    --druid-border-color: var(--content-border-color);
    --druid-link-color: var(--content-link-color);
    --druid-link-label-color: var(--content-link-label-color);
}

.npc-infobox {
    border-radius:5px;
    border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
    border-image-slice: 6;
    border-image-width: 6px;
    border-image-repeat: repeat;
    position: relative;
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.05) 0%, transparent 40%, rgba(76, 87, 181, 0.05) 100%),
        radial-gradient(ellipse at top, rgba(66, 162, 241, 0.08), transparent 60%),
        var(--druid-background-color);
    box-shadow: 
        0 0 40px 8px rgba(66, 162, 241, 0.15),
        inset 0 0 60px 10px rgba(66, 162, 241, 0.05),
        0 0 0 1px rgba(66, 162, 241, 0.2);
    overflow: hidden;
}

.npc-infobox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.4) 20%, 
        rgba(66, 162, 241, 0.8) 50%, 
        rgba(66, 162, 241, 0.4) 80%, 
        transparent);
    box-shadow: 0 0 15px rgba(66, 162, 241, 0.8);
    animation: data-scan 3s linear infinite;
}

@keyframes data-scan {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.npc-infobox::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.3) 30%, 
        rgba(66, 162, 241, 0.6) 50%, 
        rgba(66, 162, 241, 0.3) 70%, 
        transparent);
}

.druid-container {
    background: var(--druid-background-color);
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
    padding: 0.5em;
    width:100%;
    max-width:26em;
    box-sizing: border-box;
    border-collapse: separate;
}

@media screen and (max-width: 720px) {
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}

.druid-main-images-file,
.druid-main-image {
    text-align:center;
}

.druid-infobox .druid-title,
.druid-infobox .druid-section {
    text-align:center;
    padding:1px;
    border-radius: 0.1em;
}

.npc-infobox .druid-title {
    background: 
        linear-gradient(135deg, 
            rgba(66, 162, 241, 0.25) 0%, 
            rgba(76, 87, 181, 0.2) 40%,
            rgba(66, 162, 241, 0.15) 80%,
            rgba(66, 162, 241, 0.25) 100%),
        radial-gradient(ellipse at center, rgba(66, 162, 241, 0.2), transparent 70%),
        linear-gradient(90deg, 
            color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%, 
            color-mix(in srgb, var(--druid-secondary-background-color) 70%, transparent) 100%);
    color: var(--druid-secondary-background-label-color);
    text-shadow: 
        0 0 20px rgba(66, 162, 241, 1),
        0 0 15px rgba(66, 162, 241, 0.8),
        0 0 8px rgba(66, 162, 241, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.9);
    font-size: 1.3em;
    letter-spacing: 0.08em;
    line-height: 1;
    position: relative;
    box-shadow: 
        inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(66, 162, 241, 0.4);
    border-radius: 2px;
    padding: 0.5em 0.8em;
}

.npc-infobox .druid-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.6) 20%, 
        rgba(66, 162, 241, 1) 50%, 
        rgba(66, 162, 241, 0.6) 80%, 
        transparent);
    box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}

.npc-infobox .druid-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.4) 30%, 
        rgba(66, 162, 241, 0.8) 50%, 
        rgba(66, 162, 241, 0.4) 70%, 
        transparent);
    box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
}

.npc-infobox .druid-section {
    background: 
        linear-gradient(90deg, 
            color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%, 
            color-mix(in srgb, var(--druid-secondary-background-color) 60%, transparent) 100%),
        linear-gradient(135deg, rgba(66, 162, 241, 0.1), transparent 50%);
    color:var(--druid-secondary-background-label-color);
    text-shadow: 
        0 0 15px rgba(66, 162, 241, 0.8),
        0 0 8px rgba(66, 162, 241, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8);
    position: relative;
    box-shadow: 
        inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.5);
}

.npc-infobox .druid-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 50%, transparent);
    box-shadow: 0 0 6px rgba(66, 162, 241, 0.4);
}

.druid-infobox .druid-section {
    font-size: 1.25em;
    font-weight: 500;
}

.druid-label {
    font-weight:bold;
    text-align: right;
    box-sizing: border-box;
}

.druid-row > .druid-label {
    width: 40%;
    flex-shrink: 0;
}

.druid-row > .druid-label,
.druid-row > .druid-data {
    padding-inline: 0.3em;
}

.druid-main-image,
.druid-main-images {
    padding:5px;
}

.druid-main-image img, 
.druid-main-images img {
    max-width:100%;
    height:auto;
}

.druid-main-images-labels {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    margin:0.25em;
    gap:0.25em;
}

.druid-main-images-label {
    cursor:pointer;
    flex:1 1 auto;
    text-align:center;
    transition:.1s ease-in;
    outline:1px solid var(--druid-link-color);
}

.druid-main-images-label.focused {
    background:var(--druid-link-color);
    color:var(--druid-link-label-color);
}

.druid-main-images-label:not(.focused):hover {
    background:rgba(var(--druid-link-color--rgb), 0.25);
}

.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
    display:none;
}

.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
    display:none;
}

.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display:none;
}

.druid-grid {
    display:grid;
    gap: 0.3em;
    padding: 0.35em;
}

.druid-grid-item {
    background:var(--druid-tertiary-background-color);
    padding:0.25em;
    border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
    border-radius: 2px;
}

.druid-grid-item > .druid-label,
.druid-grid-item > .druid-data {
    text-align: center;
}

.druid-section-container > .druid-collapsible {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.druid-collapsed {
    display:none!important;
}

.druid-collapsible {
    cursor:pointer;
    position:relative;
}

.druid-collapsible::after {
    content:'\2013';
    display:block;
    position:absolute;
    right:10px;
    font-size:20px;
    font-weight:bold;
    color:var(--druid-secondary-background-label-color);
}

.druid-collapsible-collapsed::after {
    content:'+';
}

.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
  display: none;
}

body .has-worn-variant .image-base {
    display: block !important;
}

body .has-worn-variant .image-worn {
    display: none !important;
}

body .has-worn-variant.is-worn-active .image-base {
    display: none !important;
}

body .has-worn-variant.is-worn-active .image-worn {
    display: block !important;
}

.image-base img, .image-worn img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100%;
    height: auto;
}

.worn-toggle-button {
    display: inline-block !important;
    margin-top: 10px;
    padding: 5px 15px;
    background: #333 !important;
    color: #fff !important;
    border: 1px solid #666 !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}
.is-worn-active .worn-toggle-button {
    background: #833 !important;
}

/*****************************************
Div support
*****************************************/

div.druid-row {
    display:flex;
    margin-block: 1px;
}

div.druid-row + div.druid-row {
    margin-top: 0;
}

.npc-infobox div.druid-row {
    background: linear-gradient(90deg, rgba(66, 162, 241, 0.02), transparent 60%);
}

.npc-infobox div.druid-row > .druid-label {
    background: 
        linear-gradient(90deg, 
            color-mix(in srgb, var(--druid-tertiary-background-color) 80%, #42a2f1) 0%, 
            var(--druid-tertiary-background-color) 100%);
    text-shadow: 0 0 8px rgba(66, 162, 241, 0.4);
    border-right: 1px solid rgba(66, 162, 241, 0.2);
}

.npc-infobox div.druid-row > .druid-data {
    text-shadow: 0 0 6px rgba(66, 162, 241, 0.3);
}

.druid-infobox #toc {
    display:none;
}

/***********************
* End DRUID infoboxes  *
************************/

/*** Miscellaneous ***/
.responsive-image {
    max-width:100%;
    height:auto;
}

.view-dark .invert-on-dark,
.view-light .invert-on-light {
    filter:invert(100%);
}

@media screen and (min-width:720px) {
    .mobileonly {
        display:none;
    }
}
@media screen and (max-width:720px) {
    .nomobile {
        display:none;
    }
}

/**************************
* Start Modular Templates *
**************************/

/********* [[Template:Ambox]] *********/
.ambox {
    border: 1px solid var(--content-border-color);
    border-left: 10px solid var(--ambox-color);
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: .6em;
    margin: 1em 0;
    padding: 3px .6em;
    background-color: var(--background-color-neutral-subtle);
    box-shadow: 2px 2px 5px 0px #0002;
}

@media (min-width: 720px) {
    .ambox {
        margin-inline: 10%;
    }
}

.ambox.tiny {
    padding: .04rem .5em;
    margin-inline: 0;
    width: fit-content;
}

.ambox + .ambox {
    margin-top: -.6em;
}

.ambox-content p {
    margin: .15em 0;
}

.ambox-title {
    font-weight: bold;
}

/********* [[Template:Hatnote]] *********/
.hatnote {
    padding: 1px 0 1px 1.6em;
    margin-bottom: 0.5em;
    font-style: italic;
    border-top: 1px solid var(--border-color-subtle);
    border-bottom: 1px solid var(--border-color-subtle);
}

.hatnote.icon {
    padding-left: 0;    
}

/********* [[Template:Spoiler]] *********/
.spoiler-content {
  background-color: rgb(127, 127, 127);
  transition: all 0.3s;
  cursor: pointer;
}

.spoiler-content > span {
  opacity: 0;
  transition: all 0.3s;
}

.spoiler-content > * {
  pointer-events:none;
}

.spoiler-content.show > * {
  pointer-events:unset;
}

.spoiler-content.show {
  background-color: rgba(127, 127, 127, 0);
}

.spoiler-content.show > span {
  opacity: 1;
}

/********* [[Template:Link icon]] *********/
.link-icon {
    display: inline-flex; 
    align-items: center;
    height: var(--link-icon-line-height);
    vertical-align: bottom;
}

.link-icon .regular {
    align-self: center;
}

.link-icon .regular a {
    display: flex;
}

.link-icon .regular img {
    height: var(--link-icon-size);
    max-width: var(--link-icon-size);
}

.link-icon .fallback {
    outline: 1px solid var(--color-base);
    border-radius: 50%;
    text-align: center;
    width: var(--link-icon-size);
    line-height: var(--link-icon-size);
}

.link-icon.notext .fallback {
    display: inline-block;
}

.link-icon.notext {
    display: inline;
}

/********* [[Template:Quote]] *********/
.quote {
    background: var(--background-color-neutral-subtle);
    border-radius: 5px;
    border: 2px solid var(--content-border-color);
    margin: .5em 0;
    padding: .5em;
}

.quote .block {
    display: block;
}

.quote .title {
    font-size: large;
    font-weight: bold;
}

.quote .content {
    font-style: italic;
}

.quote .author {
    font-weight: bold;
    text-align: end;
}

.quote .marks-wrapper {
    display: flex;
    gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
    font-size: 100px;
    line-height: 0px;
}

.quote .marks-wrapper::before {
    content: "\201C";
    margin-top: 40px;
}

.quote .marks-wrapper::after {
    content: "\201D";
    align-self: end;
    margin-bottom: -10px;
}

/************************
* End Modular Templates *
*************************/

.button-expand-header {
    margin-top: 0.5em;
    width: 100%;
    padding: 14px 18px;
    padding-right: 60px;
    background: var(--background-color-base);
    color: var(--color-progressive);
    border: 2px solid var(--color-progressive);
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 20px #42a2f180;
}

.button-expand-header:hover {
    background: var(--background-color-transparent);
    box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 30px #4c57b580,
                0 0 10px #4c57b5a0;
}

.button-expand-header:active {
    border-radius: 20px;
    transition: 0.2s;
}

.button-expand-header::before {
    content: '[ + ]';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.button-expand-header:has(+ .mw-collapsible:not(.mw-collapsed))::before {
    content: '[ - ]';
}

.button-expand-header > span:not([typeof]) {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.2s;
}




@media screen and (max-width:720px) {
    h2.mw-customtoggle > span:not([typeof])::after {
        display: none;
    }
}

a.tabber__tab {
    margin-top: 0.7em;
    font-size: 2em;
    margin-left: 0.6em;
    margin-bottom: 0.7em;
}

header.tabber__header {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

a.tabber__tab[aria-selected="true"]{
    background: var(--background-color-transparent);
    color: var(--color-progressive);
    border: 2px solid var(--color-progressive);
    box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 20px #42a2f180;
}

@media (hover: hover) {
    .tabber__tab:hover {
        box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 30px #4c57b580,
                0 0 10px #4c57b5a0;
        background-color: var(--background-color-base); 
    }
}

.tabber__panel > div.mw-heading.mw-heading2 > h2 {
    border-bottom: 1px solid var(--color-progressive) !important;
    padding-bottom: 0.5em;
    text-shadow: 0 0 20px black;
}

.tabber__panel > div > h2 > span {
    text-shadow: 0 0 10px black;
    color: var(--content-link-color);
    margin-left: 0.1em;
    padding: 0 0.5em 0;
}

header.tabber__header {
    box-shadow: none;
}

.tabber__header__prev, 
.tabber__header__next {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.12) 100%),
        rgba(26, 26, 34, 0.8);
    border: 1px solid rgba(66, 162, 241, 0.5);
    color: var(--color-base);
    padding: 0.6em 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
        0 2px 10px rgba(66, 162, 241, 0.2);
    border-radius: 4px;
    position: relative;
    backdrop-filter: blur(3px);
}

.tabber__header__prev::before,
.tabber__header__next::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.6) 30%, 
        rgba(66, 162, 241, 0.9) 50%, 
        rgba(66, 162, 241, 0.6) 70%, 
        transparent);
    box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
}

.tabber__header__prev:hover, 
.tabber__header__next:hover {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.25) 0%, rgba(76, 87, 181, 0.2) 100%),
        rgba(26, 26, 34, 0.9);
    border-color: rgba(66, 162, 241, 0.7);
    box-shadow: 
        inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
        0 4px 15px rgba(66, 162, 241, 0.3),
        0 0 25px rgba(66, 162, 241, 0.2);
    transform: scale(1.05);
    text-shadow: 
        0 0 10px rgba(66, 162, 241, 0.8),
        0 0 5px rgba(66, 162, 241, 0.5);
}

.tabber__header .tabber__header__prev::after, .tabber__header .tabber__header__next::after {
    display: block;
    width: inherit;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1em;
    filter: drop-shadow(0 0 4px rgba(66, 162, 241, 0.6));
}
@media screen and (max-width: 720px) {
    .button-expand-header {
        background-color: #8dbec280;
        box-shadow: 0 0 40px var(--color-progressive);
    }
    .button-expand-header > span:after {
        position: relative;
        font-size: 1em;
        opacity: 1;
        left: 0;
        bottom: 0;
        text-align: inherit;
    }
}

.button-expand-header > img { 
    padding: 0 1em 0;
}

.button-expand-header:hover > span:after{
  opacity: 1;
  font-size: 0.75em;
}

.class-box {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.06) 0%, transparent 50%, rgba(76, 87, 181, 0.06) 100%),
        linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 0.98));
    box-shadow: 
        0 0 30px 5px rgba(0, 0, 0, 0.8),
        inset 0 0 40px 5px rgba(66, 162, 241, 0.08),
        0 0 0 1px rgba(66, 162, 241, 0.25);
    padding: 0 0.5em 0;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.class-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.4) 30%, 
        rgba(66, 162, 241, 0.6) 50%, 
        rgba(66, 162, 241, 0.4) 70%, 
        transparent);
}


/* ===============================
   MP elements
   =============================== */

.main-page-links {
    font-weight: bold;
    text-shadow: 0 0 6px #000000;
    margin: 1em;
}

.mp-box pre {
    font-family: var(--body-font-family);
    color: var(--color-progressive);
    border-radius:5px;
    border-image-source: var(--border-image-base);
    border-image-slice: 6;
    border-image-width: 6px;
    border-image-repeat: repeat repeat;
    text-align: center;
}


/* ===============================
   DRUID Boss Infoboxes
   =============================== */
/* UNHOLY */
.druid-data-Unholy a, .druid-data-Unholy a:visited {
    color: black;
    text-shadow: 
    0 0 5px white, 0 0 10px white, 0 0 15px white;
}
/* VOIDBOUND */
.druid-data-Voidbound a, .druid-data-Voidbound a:visited {
    color: #e48cff;
    text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
}
/* BLOODSHOT */
.druid-data-Bloodshot a, .druid-data-Bloodshot a:visited {
    color: #d23c3c;
    text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
}
/* ROYAL */
.druid-data-Royal a, .druid-data-Royal a:visited {
    color: #a86dff;
    text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
}
/* GILDED */
.druid-data-Gilded a, .druid-data-Gilded a:visited {
    color: #ffb84d;
    text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
}
/* IRRADIATED */
.druid-data-Irradiated a, .druid-data-Irradiated a:visited {
    color: #4dff4d;
    text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600;
}
/* COMPANION */
.druid-data-Companion a, .druid-data-Companion a:visited {
    color: #ffd700;
    text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
}
/* RUNES */
.druid-data-Rune a, .druid-data-Rune a:visited {
    color: #bfbfbf;
    text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
}

.druid-row[data-druid-section-row="Loot"] div {
    padding-top: 0.75em;
    padding-bottom: 0.5em;
    flex-wrap: nowrap;
    flex-direction: row;
    display: block;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    width: 100%;
}

div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
    border-top: none;
}

.druid-data .image {
    margin-left: 0%;
}

.loot-category-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.75em;
    margin: 0.75em 0 0.3em 0;
    background: 
        linear-gradient(90deg, rgba(66, 162, 241, 0.12) 0%, transparent 100%),
        rgba(26, 26, 34, 0.4);
    border-left: 2px solid rgba(66, 162, 241, 0.5);
    border-radius: 3px;
    box-shadow: 
        inset 0 0 15px 2px rgba(66, 162, 241, 0.05),
        0 1px 4px rgba(0, 0, 0, 0.4);
}

.loot-category-title {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--color-base);
    text-shadow: 
        0 0 6px rgba(66, 162, 241, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.02em;
}

.loot-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3em 0.75em;
    margin: 0.15em 0;
    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.02) 50%, transparent);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.loot-item-row:hover {
    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.06) 50%, transparent);
    padding-left: 1em;
}

.boss-percent {
    color: var(--content-border-color);
    text-shadow: 
        0 0 8px rgba(66, 162, 241, 0.5),
        0 0 4px rgba(66, 162, 241, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: bold;
    font-size: 1.05em;
}

.loot-data-infobox {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.item-infobox div[data-druid-section] > .druid-section {
    font-weight: bolder;
    text-shadow: 0px 2px black;
}

.druid-infobox .druid-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content-border-color);
    font-family: "Daedalus", sans-serif;
    line-height: 1em;
    font-weight: 1000;
    font-size: 3em;
    min-height: 2.2em;
    flex-wrap: wrap;
    text-shadow: 0 0 20px black;
}

.boss-infobox-subtitle {
    font-weight: 500;
    font-size: 0.75em;
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    width: 100%;
    position: relative;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 
        0 0 10px rgba(66, 162, 241, 0.6),
        0 0 5px rgba(66, 162, 241, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.8);
    animation: subtitle-pulse 4s ease-in-out infinite;
    background: linear-gradient(90deg, 
        rgba(66, 162, 241, 0.05) 0%, 
        rgba(66, 162, 241, 0.08) 50%, 
        rgba(66, 162, 241, 0.05) 100%);
    background-size: 200% 100%;
    animation: subtitle-scan 6s linear infinite, subtitle-pulse 4s ease-in-out infinite;
    padding: 0.3em 0.5em;
    border-radius: 2px;
    letter-spacing: 0.03em;
}

.boss-infobox-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, 
        transparent, 
        rgba(66, 162, 241, 0.8) 50%, 
        transparent);
    box-shadow: 0 0 6px rgba(66, 162, 241, 0.8);
    animation: subtitle-indicator 2s ease-in-out infinite;
}

@keyframes subtitle-pulse {
    0%, 100% { 
        text-shadow: 
            0 0 10px rgba(66, 162, 241, 0.6),
            0 0 5px rgba(66, 162, 241, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.8);
    }
    50% { 
        text-shadow: 
            0 0 15px rgba(66, 162, 241, 0.9),
            0 0 8px rgba(66, 162, 241, 0.6),
            0 0 4px rgba(255, 255, 255, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.8);
    }
}

@keyframes subtitle-scan {
    0% { 
        background-position: 0% 0%;
    }
    100% { 
        background-position: 200% 0%;
    }
}

@keyframes subtitle-indicator {
    0%, 100% { 
        opacity: 0.4;
        box-shadow: 0 0 6px rgba(66, 162, 241, 0.6);
    }
    50% { 
        opacity: 1;
        box-shadow: 0 0 10px rgba(66, 162, 241, 1);
    }
}
/* ===============================
   Dungeon Page CSS
   =============================== */


.dungeon-page-box {
    background-color: transparent;
    box-shadow: none;
    transition: 0.5s;
    padding: 1em;
    position: relative;
    padding: 0 1em;
    border-radius: 0px;
}

.dungeon-page-smaller-box li {
    display: inline-block;
    width: 18%;
    margin: 0 1% 1% 0;
    vertical-align: top;
    text-align: center;
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 60%),
        linear-gradient(to bottom, rgba(26, 26, 34, 0.9), rgba(26, 26, 34, 0.95));
    border-radius: 4px;
    border: 1px solid rgba(66, 162, 241, 0.2);
    box-shadow: 
        inset 0 0 20px 3px rgba(66, 162, 241, 0.05),
        0 2px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dungeon-page-smaller-box li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4), transparent);
}

.dungeon-page-smaller-box a {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    padding: 0.5em;
}

.dungeon-page-smaller-box li:hover,
.mp-links.dungeon-page-smaller-box > ul > li:hover {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 60%),
        linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 1));
    border-color: rgba(66, 162, 241, 0.4);
    box-shadow: 
        inset 0 0 25px 5px rgba(66, 162, 241, 0.1),
        0 4px 15px rgba(66, 162, 241, 0.3),
        0 0 20px rgba(66, 162, 241, 0.2);
    transform: translateY(-2px);
}

.pre-dungeon {
    max-width: 100%;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;   
    display: block;
}

.dungeon-enemies {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: center;
}

.dungeon-enemies .druid-container {
    margin: 2%;
}

.tipstricks {
    display: flex;
    max-width: 100%;
}

.pre-dungeon p {
     margin: 1em 0;
     padding: 0.9em 1.2em 0.9em 1.5em;
     border-radius: 3px 12px 8px 3px;
    box-shadow: 
         -2px 0 0 0 rgba(66, 162, 241, 0.4),
         0 4px 15px rgba(0, 0, 0, 0.6),
         inset 0 0 20px rgba(66, 162, 241, 0.03);
     display: block;
     width: auto;
    background: 
         linear-gradient(90deg, 
             rgba(66, 162, 241, 0.06) 0%, 
             rgba(26, 26, 34, 0.8) 15%, 
             rgba(26, 26, 34, 0.6) 85%, 
             transparent 100%);
     border-left: 2px solid rgba(66, 162, 241, 0.5);
     color: var(--color-base);
     line-height: 1.6;
     position: relative;
     backdrop-filter: blur(2px);
}

.pre-dungeon p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, 
        rgba(66, 162, 241, 0.8) 0%, 
        rgba(66, 162, 241, 0.3) 50%, 
        rgba(66, 162, 241, 0.8) 100%);
    opacity: 0.6;
}

.dlog {
    margin-bottom: 2%;
    background: 
        linear-gradient(to right, rgba(31, 35, 77, 0.95) 0%, rgba(31, 35, 77, 0.9) 70%, rgba(31, 35, 77, 0) 100%),
        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%);
    padding: 0.75em;
    border: 3px solid;
    border-image: linear-gradient(to right, 
        rgba(66, 162, 241, 0.8) 0%, 
        rgba(71, 75, 117, 1) 30%, 
        rgba(71, 75, 117, 0.8) 70%, 
        rgba(71, 75, 117, 0) 100%) 1 stretch;
    border-right: none;
    border-top: none;
    border-bottom: none;
    min-width: 20%;
    max-width: 70%;
    width: fit-content;
    text-wrap: balance;
    font-size: 2em;
    position: relative;
    box-shadow: 
        -3px 0 15px rgba(66, 162, 241, 0.3),
        inset 2px 0 20px rgba(66, 162, 241, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.5);
    border-radius: 0 4px 4px 0;
    backdrop-filter: blur(3px);
}

.dlog::before {
    content: url("/wiki/Special:Redirect/file/DNexus.png") " " url("/wiki/Special:Redirect/file/Dlog-text.png");
    display: inline-block;
    background: 
        linear-gradient(to right, 
            rgba(66, 162, 241, 0.25) 0%, 
            rgba(66, 162, 241, 0.15) 50%, 
            transparent 100%),
        linear-gradient(135deg, rgba(76, 87, 181, 0.2), transparent 60%);
    padding: 0.5em 0.8em;
    border-radius: 3px 0 0 3px;
    margin-right: 12px;
    box-shadow: 
        inset -2px 0 10px rgba(66, 162, 241, 0.3),
        2px 0 8px rgba(66, 162, 241, 0.2);
    border-right: 1px solid rgba(66, 162, 241, 0.4);
    position: relative;
}

.dlog::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, 
        rgba(66, 162, 241, 0.8) 0%, 
        rgba(66, 162, 241, 1) 50%, 
        rgba(66, 162, 241, 0.8) 100%);
    box-shadow: 
        0 0 8px rgba(66, 162, 241, 0.8),
        0 0 15px rgba(66, 162, 241, 0.5);
    animation: dlog-pulse 3s ease-in-out infinite;
}

@keyframes dlog-pulse {
    0%, 100% { 
        opacity: 0.7;
        box-shadow: 
            0 0 8px rgba(66, 162, 241, 0.8),
            0 0 15px rgba(66, 162, 241, 0.5);
    }
    50% { 
        opacity: 1;
        box-shadow: 
            0 0 12px rgba(66, 162, 241, 1),
            0 0 20px rgba(66, 162, 241, 0.7);
    }
}

.dlog p {
    position: relative;
    color: #f1f1f1;
    font-family: "Daedalus", Sans-Serif;
    font-size: 1em;
    line-height: 1.3;
    text-shadow: 
        0 0 8px rgba(66, 162, 241, 0.8),
        0 0 4px rgba(66, 162, 241, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.9);
    word-wrap: break-word;
    padding: 0.8em;
    padding-top: 0.5em;
    background: linear-gradient(90deg, rgba(66, 162, 241, 0.03), transparent 80%);
    border-radius: 2px;
}

@media only screen and (max-width: 768px) {
  .daedalus-log {
    display: none;
  }
}


/* ===============================
   Skill Tree
   =============================== */
   /**
 * ==============================
 * Tooltips Gadget (Base Styles)
 * ==============================
 */
.main-tooltip {
    border-radius:5px;
    border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
    border-image-slice: 6;
    border-image-width: 6px;
    border-image-repeat: repeat repeat;
    box-shadow: 0 0 10px black;
    margin-bottom: 5px;
    padding: 1em 1em;
    background-color: #312b38;
}

#tooltip-wrapper {
    padding: 0.3em;
}

.has-redlinks,
.tooltip-loading,
.advanced-tooltip .tooltip-contents {
    display: none;
}

.tooltips-init-complete {
    cursor: help;
}

.main-tooltip img {
    vertical-align: middle;
}

.advanced-tooltip img {
    box-shadow: 0 0 10px #000000;
}

.advanced-tooltip .imhoveringit {
    position: relative;
    display: inline-block;
}

.advanced-tooltip .tooltip-base-image,
.advanced-tooltip .tooltip-hover-image {
    transition: opacity 0.2s ease;
}

.advanced-tooltip .tooltip-hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.advanced-tooltip .tooltip-base-image {
    opacity: 1;
}

.advanced-tooltip:hover .tooltip-base-image {
    opacity: 0;
}

.advanced-tooltip:hover .tooltip-hover-image {
    opacity: 1;
    pointer-events: auto;
}

.tabber__panel {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabber__panel::-webkit-scrollbar {
    display: none;
}
/**
 * ==============================
 * Skill Tree Layout
 * ==============================
 */
.skill-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px; /* vertical spacing between rows */
}

/* Rows */
.skill-tree .row {
    display: flex;
    justify-content: center;
}
.skill-tree .row-1 { gap: 0; }
.skill-tree .row-2 { gap: 40px; }
.skill-tree .row-3 { gap: 20px; }
.skill-tree .wide-gap { gap: 80px; } /* For Trap tree rows */

/* Nodes */
.node {
    display: inline-block;
    width: 80px; /* keeps nodes aligned */
    text-align: center;
}

/* Node Title Style */
.skill-title {
  font-weight: bold;
  color: #fca801;
  text-shadow: 2px 2px 8px black;
  border-bottom: 1px solid #fca801;
  padding-bottom: 0.5em;
}
.main-tooltip p {
    color: #54fc55;
}
.main-tooltip span {
    color: #54fcfc;
    text-shadow: 0 0 2px #54fcfc;
}


/* item pages */

.display-items {
    display: flex;
    flex-wrap: wrap;
}

a.tabber__tab {
    font-size: 2em;
    text-shadow: 1px 1px 12px black;
}
.druid-main-images-label {
    font-size: 1.2em;
}
.druid-main-images-label.focused {
    box-shadow: 0 0 20px var(--druid-link-color);
}

.hoverbox:hover {
    background-color: #1a1a22E0;
    box-shadow: 0 0 30px 30px var(--background-color-base);
    border-radius: 0 0 15px 15px;
    border-top: 0.1em solid var(--color-progressive--hover);
    transition: 0.4s;
}

.hoverbox {
    background-color: transparent;
    box-shadow: none;
    transition: 0.5s;
    padding: 0 1em 1em;
    margin: 1em 0 1em -0.5em;
    position: relative;
    z-index: 0;
    border-top: 0.1em solid var(--color-progressive);
    display: flow-root;
}

.hoverbox > div > h3 > a {
    border-bottom: 2px solid currentColor;
    background: no-repeat cover;
}

.hoverbox > div {
    overflow: visible;
}

.dungeon-clear {
    max-width: 100%;
    overflow: visible;
}

.lore {
    max-width: 100%;
    overflow: visible;
}

.mp-main {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    aspect-ratio: 16 / 9;
    padding-top: 1em;
    padding-bottom: 1em;
}

.class-rarities {
    display:flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    align-items: center;
}

.class-rarities > div {
    margin: 1em 0 1em;
    padding: 1em 1.5em;
    border-radius: 8px;
    position: relative;
    background: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
        linear-gradient(to right, transparent, rgba(255, 255, 255, 0.03), transparent);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.class-rarities > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
    opacity: 0.3;
    filter: blur(1px);
}

.class-rarities > div > p > img {
    margin: 0 2em 0 0;
    border-radius: 100px;
    background: #1a1a2280;
    box-shadow: 0 0 10px black;
}

.class-rarities > div > p > span > img {
    text-shadow: 0 0 10px black;
}

.class-rarities > div > p > a {
    text-shadow: 0 0 10px black;
}

.class-irradiated {
    box-shadow: 0 0 20px #4dff4d;
    background-color: #4dff4d80;
}

.class-gilded {
    box-shadow: 0 0 20px #ffb84d;
    background-color: #ffb84d80;
}

.class-royal{
   box-shadow: 0 0 20px #a86dff;
   background-color: #a86dff80;
}

.class-bloodshot {
    box-shadow: 0 0 20px #d23c3c;
    background-color: #d23c3c80;
}

.class-voidbound{
    box-shadow: 0 0 20px #e48cff;
    background-color: #e48cff80;
}

.class-unholy {
    box-shadow: 0 0 20px black;
    background-color: #00000080;
}

div.class-rarities > div > p > a {
    font-weight: bold;
}
/* TABLES */

.wikitable td,
.wikitable th {
  border: none !important;
}

.wikitable {
    margin: 0;
}

td > div.mw-collapsible > button {
    margin: 1.5em;
    padding: 1.2em;
    background-color: #8dbec280;
    box-shadow: 0 0 20px #8dbec2FF;
    border-radius: 30px;
}

.wikitable td,
.wikitable th {
    font-size: 1.1em;
}

td > div.mw-collapsible > button > span.mw-collapsible-text {
    text-shadow: 0 0 4px black;
}

td > div.mw-collapsible > button > span.mw-collapsible-text:hover {
    text-decoration: none;
}

td > div.mw-collapsible > button.mw-collapsible-toggle-default::after {
    content: '';
}

td > div.mw-collapsible > button.mw-collapsible-toggle-default::before {
    content: '';
}

/* Inline Image Template */

.inline-image-image {
    position: relative;
    display: inline-block;
}

.inline-image-image > p > span > span > img {
    box-shadow: 
        0 0 30px 5px rgba(66, 162, 241, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.8),
        inset 0 0 40px 5px rgba(66, 162, 241, 0.05);
    border-radius: 8px;
    border: 2px solid rgba(66, 162, 241, 0.5);
    background: linear-gradient(135deg, rgba(66, 162, 241, 0.02), transparent 50%);
    padding: 4px;
    transition: all 0.3s ease;
}

.inline-image-image > p > span > span > img:hover {
    box-shadow: 
        0 0 40px 8px rgba(66, 162, 241, 0.5),
        0 6px 25px rgba(0, 0, 0, 0.9),
        inset 0 0 50px 8px rgba(66, 162, 241, 0.08);
    border-color: rgba(66, 162, 241, 0.7);
    transform: translateY(-2px);
}

.inline-image-caption {
    margin-top: 0.5em;
    position: relative;
}

.inline-image-caption > p {
    background: 
        linear-gradient(90deg, 
            rgba(66, 162, 241, 0.12) 0%, 
            rgba(26, 26, 34, 0.8) 15%, 
            rgba(26, 26, 34, 0.6) 85%, 
            transparent 100%);
    border-left: 3px solid rgba(66, 162, 241, 0.6);
    border-radius: 3px;
    padding: 0.6em 1em;
    margin: 0;
    box-shadow: 
        inset 0 0 20px 2px rgba(66, 162, 241, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.inline-image-caption > p > span {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--color-base);
    text-shadow: 
        0 0 8px rgba(66, 162, 241, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.02em;
}

.inline-image-caption > p > span::before {
    content: '❖ ';
    color: rgba(66, 162, 241, 0.8);
    text-shadow: 
        0 0 10px rgba(66, 162, 241, 0.9),
        0 0 5px rgba(66, 162, 241, 0.6);
    margin-right: 0.3em;
}

.inline-image-caption > p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, 
        rgba(66, 162, 241, 0.8) 0%, 
        rgba(66, 162, 241, 0.4) 50%, 
        rgba(66, 162, 241, 0.8) 100%);
    opacity: 0.7;
}

/* dynamic gif display css ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */
.dynamic-gif-container {
    padding-top: 8em;
    width: fit-content;
    max-width: 100%;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    z-index: 100;
    transition: all 0.3s ease;
    display: block !important;
    visibility: visible !important;
    clear: both;
}

/* Override for flexbox container */
.gif-tabber-display-container .dynamic-gif-container {
    padding-top: 0;
    margin: 0;
    clear: none;
}

.dynamic-gif-container.expanded .gif-display-area {
    max-height: none;
    height: auto;
    opacity: 1;
    padding: 15px;
    overflow: visible;
}

.gif-display-area {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
        radial-gradient(ellipse at center, rgba(66, 162, 241, 0.12), transparent 60%),
        rgba(26, 26, 34, 0.95);
    border-radius: 6px;
    overflow: visible;
    height: auto;
    min-height: auto;
    opacity: 1;
    padding: 12px;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 30px 5px rgba(66, 162, 241, 0.2),
        inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
        0 4px 20px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(66, 162, 241, 0.4);
    display: block !important;
    visibility: visible !important;
    position: relative;
    backdrop-filter: blur(4px);
    width: fit-content;
}

.gif-display-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.6) 20%, 
        rgba(66, 162, 241, 0.9) 50%, 
        rgba(66, 162, 241, 0.6) 80%, 
        transparent);
    box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}

.gif-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-progressive);
}

.gif-title {
    font-size: 2em;
    font-weight: bold;
    font-family: var(--heading-font-family);
    color: var(--color-progressive);
    margin: 0;
}

.gif-toggle-btn {
    background: none;
    border: 1px solid #4a4a4a;
    color: #e0e0e0;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.2s ease;
}

.gif-toggle-btn:hover {
    background: #2a2a2a;
    border-color: #5a5a5a;
}

.gif-image-container {
    width: 100%;
    height: 400px;
    min-height: 400px;
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color-base);
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
}

.gif-image-container img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: block;
    border-radius: 4px;
    object-fit: contain;
}

.gif-image-container.loading::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-progressive--hover);
    border-top-color: #e0e0e0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gif-error {
    color: var(--color-destructive);
    font-size: 1em;
    text-align: center;
    padding: 20px;
}

.gif-caption {
    text-align: center;
    color: var(--color-base);
    font-size: 1em;
    font-style: italic;
    padding: 5px;
    background: var(--color-progressive--hover);
    border-radius: 4px;
    text-shadow: 0 0 5px var(--content-border-color);
    display: none;
}

.gif-placeholder {
    color: var(--color-progressive--hover);
    font-size: 1em;
    text-align: center;
    padding: 60px 20px;
    height: 500px;
}

@media (max-width: 768px) {
    .dynamic-gif-container {
        position: relative;
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
    }
    
    .dynamic-gif-container.expanded .gif-display-area {
        max-height: none;
    }
}

.skill-tree-section::after {
    content: "";
    display: table;
    clear: both;
}

.tabber .tabbertab {
    clear: both;
    overflow: auto;
}

.gif-tabber-display-container {
    display: flex;
    flex-direction: row;
    gap: 1.5em;
    align-items: flex-start;
}

.gif-tabber-display-container > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.gif-tabber-display-container > .dynamic-gif-container {
    flex: 0 0 auto;
    position: sticky;
    top: 1em;
    align-self: flex-start;
    padding-top: 0;
    margin: 0;
    min-width: 500px;
    max-width: 600px;
}

@media screen and (max-width: 1200px) {
    .gif-tabber-display-container {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    .gif-tabber-display-container > .dynamic-gif-container {
        position: static;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        order: 2; /* Move gif display below tabber */
        margin-top: 1em;
    }
    
    .gif-tabber-display-container > div:first-child {
        order: 1; /* Keep tabber on top */
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
    }
    
    /* Ensure tabber content doesn't overflow */
    .gif-tabber-display-container #List\ of\ Skill\ Trees,
    .gif-tabber-display-container .tabber,
    .gif-tabber-display-container .tabbertab {
        max-width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }
    
    /* Hide gif display by default on mobile, show when expanded */
    .gif-tabber-display-container > .dynamic-gif-container:not(.expanded) {
        display: none;
    }
    
    /* When expanded on mobile, make it compact */
    .gif-tabber-display-container > .dynamic-gif-container.expanded {
        display: block;
    }
    
    .gif-tabber-display-container > .dynamic-gif-container .gif-display-area {
        max-width: 100%;
    }
}

.decor-page {
    border-image: url(/wiki/Special:Redirect/file/Wiki-border-book.png);
    border-image-slice: 65 122 65 122;
    border-image-width: 100% 100% 100% 100%;
    border-image-repeat: stretch stretch;
    border-image-outset: 0;
    border-style: solid;
    color: var(--background-color-base);
    width: 492px;
    height: 262px;
}

.decor-page > p{
    padding: 3.5em;
    font-family: var(--heading-font-family);
}
.swap-silverling {
  position: relative;
  display: inline-block;
  width: 7em;
  text-align: left;
  text-shadow: 0 0 10px currentColor;
  font-weight: bold;
}
.swap-silverling::before,
.swap-silverling::after {
  position: absolute;
  left: 0;
  bottom: -0.45em;
  width: 140%;
  text-align: inherit;
  animation: fadeSwap 5s infinite ease-in-out;
}
.swap-silverling::before {
  content: "Silverlings.";
  opacity: 1;
}
.swap-silverling::after {
  content: "Players.";
  opacity: 0;
  animation-delay: 2.5s; 
}
@keyframes fadeSwap {
  0%, 40%   { opacity: 1; }
  50%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}
.main-welcome {
    text-shadow: 0 0 2px black;
    font-weight: bold;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.5em;
    padding: 14px 18px;
    padding-right: 60px;
    background: var(--background-color-base);
    color: var(--color-progressive);
    border: 2px solid var(--color-progressive);
    font-family: var(--body-font-family);
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 20px #42a2f180;
    padding: 1em;
}

.welcome-text {
  flex: 2;
  min-width: 300px;
  border-left: 2px solid var(--color-progressive);
  padding: 1em;
  font-size: 2em;
}

div.main-welcome > .mp-links {
  flex: 1;
  min-width: 250px;
  margin: 1em;
}

div.main-welcome > .mp-links > ul > li {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
        linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15));
    box-shadow: 
        inset 0 0 20px 4px rgba(66, 162, 241, 0.12),
        0 4px 15px rgba(66, 162, 241, 0.2),
        0 0 30px rgba(66, 162, 241, 0.15);
    border: 1px solid rgba(66, 162, 241, 0.4);
    border-radius: 4px;
    padding: 1em 0.8em;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

div.main-welcome > .mp-links > ul > li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.6) 30%, 
        rgba(66, 162, 241, 0.9) 50%, 
        rgba(66, 162, 241, 0.6) 70%, 
        transparent);
    box-shadow: 0 0 8px rgba(66, 162, 241, 0.8);
}

div.main-welcome > .mp-links > ul > li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.4) 30%, 
        rgba(66, 162, 241, 0.6) 50%, 
        rgba(66, 162, 241, 0.4) 70%, 
        transparent);
}

div.main-welcome > .mp-links > ul > li:hover {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 50%, rgba(76, 87, 181, 0.15) 100%),
        linear-gradient(to bottom, rgba(66, 162, 241, 0.25), rgba(76, 87, 181, 0.3), rgba(66, 162, 241, 0.25));
    box-shadow: 
        inset 0 0 30px 6px rgba(66, 162, 241, 0.2),
        0 6px 20px rgba(66, 162, 241, 0.3),
        0 0 40px rgba(66, 162, 241, 0.25);
    border-color: rgba(66, 162, 241, 0.6);
    transform: translateY(-2px);
}

div.main-welcome > .mp-links > ul > li > a {
    color: var(--color-base);
    text-shadow: 
        0 0 8px rgba(66, 162, 241, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}

div.main-welcome > .mp-links > ul > li:hover > a {
    text-shadow: 
        0 0 12px rgba(66, 162, 241, 0.9),
        0 0 6px rgba(66, 162, 241, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
}

.mw-collapsible {
    padding-top: 2em;
    display: flow-root;
}

.tab-gif-container {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
        radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.12), transparent 60%),
        rgba(26, 26, 34, 0.95);
    border: 1px solid rgba(66, 162, 241, 0.4);
    border-radius: 6px;
    padding: 12px;
    margin: 1em 0;
    box-shadow: 
        0 0 30px 5px rgba(66, 162, 241, 0.2),
        inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
        0 4px 20px rgba(0, 0, 0, 0.6);
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    position: relative;
    backdrop-filter: blur(4px);
}

.tab-gif-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.6) 20%, 
        rgba(66, 162, 241, 0.9) 50%, 
        rgba(66, 162, 241, 0.6) 80%, 
        transparent);
    box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}

.tab-gif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-size: 2em;
    border-bottom: 1px solid var(--color-progressive);
}

.tab-gif-title {
    font-size: 1.5em;
    font-weight: bold;
    font-family: var(--heading-font-family);
    color: var(--color-progressive);
    margin: 0;
}

.tab-gif-toggle-btn {
    background: none;
    border: 1px solid #4a4a4a;
    color: #e0e0e0;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.tab-gif-toggle-btn:hover {
    background: #2a2a2a;
    border-color: #5a5a5a;
}

.tab-gif-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-progressive);
}

.tab-gif-tab {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 60%),
        rgba(26, 26, 34, 0.6);
    color: var(--color-base);
    border: 1px solid rgba(66, 162, 241, 0.4);
    font-family: var(--body-font-family);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-shadow: 
        0 0 6px rgba(66, 162, 241, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8);
    box-shadow: 
        inset 0 0 15px 2px rgba(66, 162, 241, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.4);
    position: relative;
}

.tab-gif-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(66, 162, 241, 0.5) 30%, 
        rgba(66, 162, 241, 0.7) 50%, 
        rgba(66, 162, 241, 0.5) 70%, 
        transparent);
}

.tab-gif-tab:hover {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.15), transparent 60%),
        rgba(26, 26, 34, 0.8);
    color: #ffffff;
    border-color: rgba(66, 162, 241, 0.6);
    box-shadow: 
        inset 0 0 20px 3px rgba(66, 162, 241, 0.15),
        0 4px 12px rgba(66, 162, 241, 0.3),
        0 0 20px rgba(66, 162, 241, 0.2);
    text-shadow: 
        0 0 10px rgba(66, 162, 241, 0.8),
        0 0 5px rgba(66, 162, 241, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
}

.tab-gif-tab.tab-gif-active {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.3) 0%, rgba(76, 87, 181, 0.25) 100%),
        rgba(66, 162, 241, 0.2);
    color: #ffffff;
    border-color: rgba(66, 162, 241, 0.8);
    font-weight: bold;
    box-shadow: 
        inset 0 0 25px 5px rgba(66, 162, 241, 0.2),
        0 4px 15px rgba(66, 162, 241, 0.4),
        0 0 30px rgba(66, 162, 241, 0.3);
    text-shadow: 
        0 0 12px rgba(66, 162, 241, 1),
        0 0 8px rgba(66, 162, 241, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.8);
}

.tab-gif-display-area {
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 50%),
        rgba(26, 26, 34, 0.4);
    border-radius: 4px;
    padding: 8px;
    min-height: auto;
    box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.08);
    border: 1px solid rgba(66, 162, 241, 0.15);
}

.tab-gif-display-area .gif-image-container {
    width: fit-content;
    min-height: auto;
    max-height: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: 
        linear-gradient(135deg, rgba(66, 162, 241, 0.05), transparent 60%),
        rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    position: relative;
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: 
        0 0 20px 3px rgba(66, 162, 241, 0.15),
        inset 0 0 15px 2px rgba(66, 162, 241, 0.05);
    border: 1px solid rgba(66, 162, 241, 0.3);
    padding: 4px;
}

.tab-gif-display-area .gif-image-container img {
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
    border-radius: 2px;
    object-fit: contain;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tab-gif-display-area .gif-image-container.loading::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-progressive--hover);
    border-top-color: #e0e0e0;
    border-radius: 50%;
    animation: tab-gif-spin 1s linear infinite;
}

@keyframes tab-gif-spin {
    to { transform: rotate(360deg); }
}

.tab-gif-display-area .gif-placeholder {
    color: var(--color-progressive--hover);
    font-size: 1em;
    text-align: center;
    padding: 60px 20px;
    font-style: italic;
}

.tab-gif-display-area .gif-error {
    color: var(--color-destructive);
    font-size: 1em;
    text-align: center;
    padding: 20px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 4px;
}

.tab-gif-display-area .gif-caption {
    text-align: center;
    color: var(--color-base);
    font-size: 1em;
    font-style: italic;
    padding: 6px 10px;
    background: 
        linear-gradient(90deg, 
            rgba(66, 162, 241, 0.2) 0%, 
            rgba(66, 162, 241, 0.3) 50%, 
            rgba(66, 162, 241, 0.2) 100%),
        rgba(26, 26, 34, 0.6);
    border-radius: 3px;
    text-shadow: 
        0 0 8px rgba(66, 162, 241, 0.8),
        0 0 4px rgba(66, 162, 241, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.9);
    margin-top: 6px;
    border: 1px solid rgba(66, 162, 241, 0.4);
    box-shadow: 
        inset 0 0 15px 2px rgba(66, 162, 241, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .tab-gif-container {
        display: block;
        width: 100%;
        min-width: auto;
        margin: 1em 0;
    }
    
    .tab-gif-tabs {
        flex-direction: column;
    }
    
    .tab-gif-tab {
        width: 100%;
        text-align: center;
    }
    
    .tab-gif-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .tab-gif-toggle-btn {
        width: 100%;
    }
}

.tab-gif-container.full-width {
    display: block;
    width: 100%;
}

.tab-gif-container.float-left {
    float: left;
    margin-right: 1em;
}

.tab-gif-container.float-right {
    float: right;
    margin-left: 1em;
}

/* ============================================================
    MOBILE ADJUSTMENTS
   ============================================================ */

@media screen and (max-width: 720px) {
    /* 1. BOX  FIX */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    .mp-main {
        aspect-ratio: auto !important;
        height: auto !important;
        background-size: cover !important; 
    }

    /* 2. HEIGHT & OVERFLOW */
    .mp-box, .mp-body, .main-welcome, .mp-links, .welcome-text, #mp-box-welcome, #mp-welcome {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important; 
        min-height: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        float: none !important;
        overflow: visible !important; 
        display: block !important;
    }

    /* 3. WELCOME BOX */
    .main-welcome {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
        align-items: stretch !important;
        border-radius: 4px !important;
    }

    .welcome-text {
        font-size: 1em !important;
        border-left: none !important;
        border-bottom: 2px solid var(--color-progressive);
        margin-bottom: 15px;
        padding: 8px 0 !important;
        text-align: left;
    }

/* 4. MASTER GRID */
    .mp-main, .mp-links, .mp-links > ul {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .mp-main {
        margin-top: 20px !important; 
    }

    .mp-links > ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        list-style: none !important;
    }

    /* 5. INDIVIDUAL BUTTON STYLING */
    .mp-links > ul > li {
        flex: none !important; 
        width: 100% !important; 
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important; 
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 110px !important;
        padding: 10px 5px !important;
        
        background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
                    linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15)) !important;
        box-shadow: inset 0 0 15px rgba(66, 162, 241, 0.12), 0 2px 8px rgba(0,0,0,0.3) !important;
        border: 1px solid rgba(66, 162, 241, 0.4) !important;
        border-radius: 6px !important;
    }
    

    div.main-welcome > .mp-links > ul > li:nth-child(3) {
        grid-column: span 2 !important;
        width: 100% !important; 
        justify-self: center !important;
    }

    /* 7. ICON & TEXT GLOW */
    .mp-links img {
        max-width: 45px !important;
        height: auto !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    .mp-links > ul > li > a {
        font-size: 0.85em !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        text-align: center !important;
        color: #fff !important;
        text-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 4px rgba(66, 162, 241, 0.5), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .mp-box h2 { font-size: 1.5em !important; padding: 0.2em 0 !important; }
    .mp-box .welcome-message { font-size: 1.3em !important; padding: 0.4em !important; }
    .druid-infobox .druid-title { font-size: 1.3em !important; min-height: auto !important; }
    a.tabber__tab { font-size: 1.1em !important; }
    .node { width: 45px !important; }

    /* 9. DUNGEON PAGE */
    .dungeon-page-smaller-box ul {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .dungeon-page-smaller-box li {
        display: block !important;
        width: 100% !important; 
        max-width: 100% !important;
        margin: 10px 0 !important;
        padding: 1em !important;
        flex: none !important;
        border: 1px solid rgba(66, 162, 241, 0.3) !important;
        box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.05), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    }

    .dungeon-page-smaller-box a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .dungeon-page-box h2, .mp-box h2 {
        text-align: center !important;
        width: 100% !important;
    }

    /* 10. GENERAL PAGE */
    .mw-parser-output h2 {
        font-size: 1.6em !important;
        margin-top: 0.1em !important;
        margin-bottom: 0.05em !important;
        padding: 0 !important;
        border: none !important;
    }
    .mp-box h2::after { bottom: -2px !important; }
    .mw-parser-output p, .mw-parser-output li {
        font-size: 0.9em !important; 
        line-height: 1.5 !important;
        margin-top: 0.2em !important;
    }
    
    /* 11. BUTTONS */
    .button-expand-header {
        background: var(--background-color-base) !important; 
        box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 20px #42a2f180 !important; 
        padding-right: 65px !important;
        font-size: 14px !important; 
        white-space: normal !important; 
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        border-radius: 4px !important;
        min-height: 60px !important;
    }

    .button-expand-header img {
        flex-shrink: 0 !important; 
        width: 45px !important; 
        height: 45px !important; 
        object-fit: contain !important; 
        margin-right: 6px !important; 
    }

    /* 12. MAIN PAGE TITLE */
    h1#firstHeading, 
    .mw-body h1, 
    .section-heading h1 {
        font-size: 1.5em !important; 
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin: 10px 0 !important;
        letter-spacing: 0.05em !important;
    }

    /* 13. TABS */
    .header-container,
    .pre-content,
    .page-header-bar {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        width: 100% !important;
    }

    .minerva__tab-container {
        display: flex !important;
        width: 100% !important;
        justify-content: stretch !important;
        margin-bottom: 5px !important;
    }
    .minerva__tab-container .tab {
        flex: 1 !important;
        text-align: center !important;
    }

    .page-actions-menu {
        width: 100% !important;
        display: block !important;
    }
    .page-actions-menu__list {
        display: flex !important;
        width: 100% !important;
        justify-content: space-around !important; 
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .page-actions-menu__list li {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 14. TABLE STACK */
    .mw-parser-output div[style*="display:flex"]:has(.wikitable) {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        width: 100% !important;
        gap: 20px !important;
    }
    
    .mw-parser-output .wikitable td, 
    .mw-parser-output .wikitable th {
        white-space: nowrap !important; 
        word-break: normal !important;
        padding: 10px 5px !important;
    }
    
    /* 15. DLOG STUFF */
	.dlog {
        font-size: 1em !important;
        max-width: 100% !important;
        padding: 0.5em !important; /* Optional: tightens the box for mobile */
    }

    .dlog::before {
        zoom: 0.6; 
        margin-bottom: 5px; 
        display: block; 
        width: fit-content;
    }
    
    /* 16. INLINE IMAGE STUFF */
    .inline-image-template {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 1em 0 !important;
	}
	
	.inline-image-image {
	    display: block !important;
	    width: 100% !important;
	    text-align: center;
	}
	
	.inline-image-image img, 
	.inline-image-image > p > span > span > img {
	    max-width: 100% !important;
	    height: auto !important;
	    width: auto !important;
	}
	
	.inline-image-caption {
	    width: 100% !important;
	    box-sizing: border-box !important;
	}
	
	.inline-image-caption > p {
	    font-size: 0.7em !important;
	    white-space: normal !important; 
	}
	
	/* 17. OTHER */
	 .pre-dungeon p {
		font-size: 0.8em !important;
		padding: 0.7em 1em !important;
	}
}

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
+@font-face {
+    font-family: "Outfit";
+    src: url("/fonts/Outfit.ttf") format("truetype");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: "Daedalus";
+    src: url("/fonts/000webfont.ttf") format("truetype");
+}
 :root,
 .view-dark {
-     --wiki-body-background-image: none;
+     --content-link-color: #ffc05f;
-    --wiki-body-background-color: #111827;
+     --content-border-color: #feffe5;
-     --wiki-body-background-color--rgb: 17, 24, 39;
+     --heading-font-family: "Daedalus", sans-serif;
-    --wiki-body-dynamic-color: #ffffff;
+     --body-font-family: "Outfit", sans-serif;
-     --wiki-body-dynamic-color--rgb: 255,255,255;
+     --accent-link-color: #22214d;
-    --wiki-body-dynamic-color--inverted: #000000;
+     --content-link-label-color: #0b101b;
-     --wiki-body-dynamic-color--inverted--rgb: 0,0,0;
+}
-    --wiki-body-dynamic-color--secondary: #dddddd;
-    --wiki-body-dynamic-color--secondary--rgb: 221,221,221;
+:root{
-    --wiki-body-dynamic-color--secondary--inverted: #333333;
+     --is-top-logo: 1;
-    --wiki-body-dynamic-color--secondary--inverted--rgb: 51,51,51;
+     --logo-file-width: 160;
-    --wiki-body-font-family: "Segoe UI", Arial, sans-serif;
+     --logo-file-height: 160;
+     --logo-height: calc(var(--logo-file-height)*1px);
-     --wiki-content-background-color: #151e30;
+     --logo-margin: 15px;
-     --wiki-content-background-color--rgb: 21,30,48;
+     --is-navigation-inside-content: 0;
-    --wiki-content-background-opacity: 1.0;
+}
-    --wiki-content-background-color--secondary: #182338;
-    --wiki-content-background-color--secondary--rgb: 24,35,56;
-    --wiki-content-border-color: #ffc15f;
-    --wiki-content-border-color--rgb: 255,193,95;
-     --wiki-content-text-color: #ededed;
-    --wiki-content-text-color--rgb: 237,237,237;
-    --wiki-content-link-color: #fffa7e;
-     --wiki-content-link-color--rgb: 255,250,126;
-     --wiki-content-link-label-color: #0b101b;
-     --wiki-content-link-label-color--rgb: 11,16,27;
-    --wiki-content-link-color--visited: var(--wiki-content-link-color);
-    --wiki-content-link-color--visited--rgb: var(--wiki-content-link-color--rgb);
-    --wiki-content-link-color--hover: var(--wiki-content-link-color);
-     --wiki-content-link-color--hover--rgb: var(--wiki-content-link-color--rgb);
-    --wiki-content-redlink-color: #fbf7a5;
-    --wiki-content-redlink-color--rgb: 251,247,165;
-     --wiki-content-text-mix-color: #868686;
-    --wiki-content-text-mix-color--rgb: 134,134,134;
-    --wiki-content-text-mix-color-95: #2a2a2a;
-    --wiki-content-text-mix-color-95--rgb: 42,42,42;
-    --wiki-content-dynamic-color: #ffffff;
-    --wiki-content-dynamic-color--rgb: 255, 255, 255;
-    --wiki-content-dynamic-color--inverted: #000000;
-    --wiki-content-dynamic-color--inverted--rgb: 0, 0, 0;
-    --wiki-content-dynamic-color--secondary: #dddddd;
-    --wiki-content-dynamic-color--secondary--rgb: 221, 221, 221;
-    --wiki-content-dynamic-color--secondary--inverted: #333333;
-    --wiki-content-dynamic-color--secondary--inverted--rgb: 51, 51, 51;
-     --wiki-heading-color:  var(--wiki-content-text-color);
+/*****************************
-     --wiki-heading-color--rgb: var(--wiki-content-text-color--rgb);
+*     Sound      *
-     --wiki-heading-font-family: 'Linux Libertine','Georgia','Times',serif;
+******************************/
+.sound-button,.sound-button a,.sound-button a.image,.sound-button img {
+    background: none !important;
+    background-color: transparent !important;
+    border: none !important;
+     outline: none !important;
+    box-shadow: none !important;
+    text-decoration: none !important;
+     padding: 0 !important;
+    margin: 0 !important
+}
-    --wiki-accent-color: #f57b50;
+.sound-button img {
-     --wiki-accent-color--rgb: 245,123,80;
+     filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);
-     --wiki-accent-color--hover: #dca753;
+     transition: filter 0.2s ease-in-out;
-     --wiki-accent-color--hover--rgb: 220,167,83;
+     display: inline-block !important;
-    --wiki-accent-label-color: #0b101b;
+     vertical-align: middle;
-     --wiki-accent-label-color--rgb: 11,16,27;
+     margin: 0 !important;
-     --wiki-accent-link-color: #22214d;
+}
-    --wiki-accent-link-color--rgb: 34, 33, 77;
-    --wiki-sidebar-background-color: var(--wiki-content-background-color);
+.sound-button {
-     --wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
+     cursor: pointer;
-     --wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
+     display: inline-block !important;
-     --wiki-sidebar-border-color: var(--wiki-content-border-color);
+     vertical-align: middle;
-     --wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb);
+     margin: 0 2px !important;
-     --wiki-sidebar-link-color: var(--wiki-content-link-color);
+     line-height: 1;
-    --wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb);
+     white-space: nowrap;
-     --wiki-sidebar-heading-color: var(--wiki-heading-color);
+}
-    --wiki-sidebar-heading-color--rgb: var(--wiki-heading-color--rgb);
-    --wiki-navigation-background-color: var(--wiki-content-background-color--secondary);
+.sound-button:hover img,.sound-button.playing img {
-     --wiki-navigation-background-color--rgb: var(--wiki-content-background-color--secondary--rgb);
+     filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(115%) contrast(100%) drop-shadow(0 0 2px rgba(201,225,230,0.7))
-    --wiki-navigation-background-color--secondary: var(--wiki-content-background-color);
+}
-    --wiki-navigation-background-color--secondary--rgb: var(--wiki-content-background-color--rgb);
-    --wiki-navigation-border-color: var(--wiki-content-border-color);
-    --wiki-navigation-border-color--rgb: var(--wiki-content-border-color--rgb);
-    --wiki-navigation-text-color: var(--wiki-content-link-color);
-    --wiki-navigation-text-color--rgb: var(--wiki-content-link-color--rgb);
-    --wiki-navigation-selected-background-color: var(--wiki-content-background-color);
-    --wiki-navigation-selected-background-color--rgb: var(--wiki-content-background-color--rgb);
-    --wiki-navigation-selected-border-color: var(--wiki-navigation-border-color);
-    --wiki-navigation-selected-border-color--rgb: var(--wiki-navigation-border-color--rgb);
-    --wiki-navigation-selected-text-color: var(--wiki-content-text-color);
-    --wiki-navigation-selected-text-color-rgb: var(--wiki-content-text-color--rgb);
-    --wiki-alert-color: #ce0018;
+.sound-button a:hover,.sound-button a:focus {
-    --wiki-alert-color--rgb: 206,0,24;
+     background: none !important;
-    --wiki-alert-label-color: #000000;
+     border: none !important
-    --wiki-alert-label-color--rgb: 0,0,0;
-    --wiki-warning-color:#cf721c;
-    --wiki-warning-color--rgb: 207,114,28;
-     --wiki-warning-label-color: #000000;
-     --wiki-warning-label-color--rgb: 0, 0, 0;
-    --wiki-success-color: #0c742f;
-    --wiki-success-color--rgb: 12,116,47;
-    --wiki-success-label-color: #000000;
-    --wiki-success-label-color--rgb: 0,0,0;
-    --wiki-icon-general-filter: invert(100%);
-    --wiki-icon-to-link-filter: invert(60%) sepia(70%) saturate(3715%) hue-rotate(206deg) brightness(101%) contrast(97%);
 }
+/*****************************
+*   End Sound    *
+******************************/
 /*****************************
@@ Line 107: / Line 79: @@
 ******************************/
 :root {
-	--pi-background: var(--wiki-content-background-color);
+    image-rendering: pixelated !important;
-	--pi-secondary-background: var(--wiki-accent-color);
+    --pi-background: var(--background-color-base);
-	--pi-secondary-background--rgb: var(--wiki-accent-color--rgb);
+    --pi-secondary-background: var(--color-progressive);
-	--pi-secondary-background-label: var(--wiki-accent-label-color);
+    --pi-secondary-background-label: var(--content-link-label-color);
-	--pi-border-color: rgba(var(--pi-secondary-background--rgb),0.5);
+    --pi-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
 }
 .portable-infobox .pi-title,
 .portable-infobox .pi-header {
-	text-align:center;
+    text-align:center;
-	font-size:1.5em;
+    font-size:1.5em;
-	background:rgba(var(--pi-secondary-background--rgb), 0.75);
+    background: color-mix(in srgb, var(--color-progressive) 75%, transparent);
-	color:var(--pi-secondary-background-label);
+    color:var(--pi-secondary-background-label);
 }
 .portable-infobox .pi-data {
-	background:rgba(var(--pi-secondary-background--rgb), 0.18);
+    background: color-mix(in srgb, var(--color-progressive) 18%, transparent);
+    font-size: 115%;
+    word-wrap: normal;
+}
+.miniboss-box .portable-infobox {
+    box-shadow: 3px 3px 6px var(--content-border-color);
 }
 .portable-infobox .pi-image {
-	padding: 8px;
+    padding: 8px;
 }
 .pi-image-thumbnail {
-	max-width:100%;
+    max-width:100%;
 }
@@ Line 137: / Line 115: @@
 .pi-section-navigation .pi-section-tab.current,
 .pi-media-collection .pi-tab-link.current {
-	background: var(--pi-secondary-background);
+    background: var(--pi-secondary-background);
-	color: var(--pi-secondary-background-label);
+    color: var(--pi-secondary-background-label);
 }
-/* overqualify these to overwrite normal content heading styles */
 .mw-body .portable-infobox h2,
 .mw-body .portable-infobox h3 {
-	border-bottom: 0;
+    text-shadow: 0 0 5px var(--color-progressive);
-	font-family: inherit;
+    border-bottom: 0;
-	font-weight: 700;
+    font-family: var(--heading-font-family);
-	margin: 0;
+    font-weight: 550;
+    margin: 0;
+    word-wrap: normal;
+}
+.mw-body .portable-infobox  {
+    border-radius:5px;
+    border-image-source: var(--border-image-base);
+    border-image-slice: 15 16;
+    border-image-width: 15px;
+    border-image-repeat: stretch;
+}
+.mw-body .portable-infobox h3 {
+    font-size: 80%;
+    font-weight: 500;
 }
 /*****************************
 *   End PortableInfoboxes    *
 ******************************/
+/** as of Module:navbox version 1.2.2 **/
 /*********************************************************************************************************************
@@ Line 159: / Line 153: @@
 .hlist ol,
 .hlist ul {
-	margin: 0;
+    margin: 0;
-	padding: 0;
+    padding: 0;
 }
@@ Line 167: / Line 161: @@
 .hlist dt,
 .hlist li {
-	/*
+    /*
-	 * don't trust the note that says margin doesn't work with inline
+     * don't trust the note that says margin doesn't work with inline
-	 * removing margin: 0 makes dds have margins again
+     * removing margin: 0 makes dds have margins again
-	 * We also want to reset margin-right in Minerva
+     * We also want to reset margin-right in Minerva
-	 */
+     */
-	margin: 0;
+    margin: 0;
-	display: inline;
+    display: inline;
 }
@@ Line 191: / Line 185: @@
 .hlist ul ol,
 .hlist ul ul {
-	display: inline;
+    display: inline;
 }
 /* Hide empty list items */
 .hlist .mw-empty-li {
-	display: none;
+    display: none;
 }
@@ Line 202: / Line 196: @@
   * seems to work. more testing needed. like so: */
 .hlist dt:not(:last-child)::after {
-	content: ": ";
+    content: ":\20";
 }
 .hlist dd:not(:last-child)::after,
 .hlist li:not(:last-child)::after {
-	content: " \00B7 ";;
+    /* "space, Middle Dot, space"
-	font-weight: bold;
+    We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
+    The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
+    /* content: "\20\00B7\20"; font-weight: bold; */
+    /* "space &nbsp; • &nbsp; space"
+       There may (and likely) be an extra whitespace between <li>s,
+       therefore we have to use a space character as last character of this sequence.
+       By this way, the last space and the next whitespce will collapse as a single space,
+       to make the whitespace on both sides of the middle dot the same width.
+    */
+    content: "\20\A0\2022\A0\20";
+    font-weight: inherit;
 }
 /* Add parentheses around nested lists */
-.hlist dd dd:first-child::before,
+.hlist dd ol::before,
-.hlist dd dt:first-child::before,
+.hlist dd ul::before,
-.hlist dd li:first-child::before,
+.hlist dd dl::before,
-.hlist dt dd:first-child::before,
+.hlist dt ol::before,
-.hlist dt dt:first-child::before,
+.hlist dt ul::before,
-.hlist dt li:first-child::before,
+.hlist dt dl::before,
-.hlist li dd:first-child::before,
+.hlist li ol::before,
-.hlist li dt:first-child::before,
+.hlist li ul::before,
-.hlist li li:first-child::before {
+.hlist li dl::before {
-	content: " (";
+    content: "\20(";
-	font-weight: normal;
+    font-weight: inherit;
 }
-.hlist dd dd:last-child::after,
+.hlist dd ol::after,
-.hlist dd dt:last-child::after,
+.hlist dd ul::after,
-.hlist dd li:last-child::after,
+.hlist dd dl::after,
-.hlist dt dd:last-child::after,
+.hlist dt ol::after,
-.hlist dt dt:last-child::after,
+.hlist dt ul::after,
-.hlist dt li:last-child::after,
+.hlist dt dl::after,
-.hlist li dd:last-child::after,
+.hlist li ol::after,
-.hlist li dt:last-child::after,
+.hlist li ul::after,
-.hlist li li:last-child::after {
+.hlist li dl::after {
-	content: ")";
+    content: ")";
-	font-weight: normal;
+    font-weight: inherit;
 }
 /* Put ordinals in front of ordered list items */
 .hlist ol {
-	counter-reset: listitem;
+    counter-reset: listitem;
 }
 .hlist ol > li {
-	counter-increment: listitem;
+    counter-increment: listitem;
 }
 .hlist ol > li::before {
-	content: " " counter(listitem) "\a0";
+    content: " " counter(listitem) ".\20";
 }
-.hlist dd ol > li:first-child::before,
+/* Progressive enhancement:
-.hlist dt ol > li:first-child::before,
+ * try to make the dot always follow the list item in same line
-.hlist li ol > li:first-child::before {
+ */
-	content: " (" counter(listitem) "\a0";
+.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
+    display: inline-block;
 }
 /********************************************
 * End semantically-correct horizontal lists *
@@ Line 260: / Line 266: @@
 /**********************************************************
-* Template:Navbox (needs semantic horizontal lists above) *
+* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
 ***********************************************************/
-.navbox {
+.ranger-navbox{
-	clear: both;
+  --navbox-background: none;
-	margin: 1em 0;
+  --navbox-margin: 0.5em auto;
-	padding: 3px;
+  --navbox-padding: 4px;
-	font-size: 90%;
+  --navbox-gap: 3px;
-	width: 100%;
+  --navbox-outer-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
-	border: 1px solid var(--wiki-content-border-color);
+  --navbox-outer-border-width: 1px;
-	box-sizing: border-box;
+  --navbox-outer-border-style: solid;
+  --navbox-outer-border-radius: 0px;
+  --navbox-font-size: calc(1em - 2px);
+  --navbox-title-color: var(--content-link-label-color);
+  --navbox-title-font-size: calc(125%);
+  --navbox-title-background: var(--color-progressive);
+  --navbox-title-icon-color: var(--content-link-label-color);
+  --navbox-title-link-color: var(--navbox-title-color);
+  --navbox-title-link-color--visited: var(--navbox-title-link-color);
+  --navbox-title-link-color--hover: var(--accent-link-color);
+  --navbox-title-redlink-color: var(--navbox-title-link-color);
+  --navbox-title-link-decoration: underline solid;
+  --navbox-title-redlink-decoration: underline wavy;
+  --navbox-title-padding--y: 0.5em;
+  --navbox-above-background: color-mix(in srgb, var(--color-base) 15%, transparent);
+  --navbox-above-color: var(--color-base);
+  --navbox-above-padding: var(--navbox-list-padding);
+  --navbox-below-background: var(--navbox-above-background);
+  --navbox-below-color: var(--navbox-above-color);
+  --navbox-below-padding: var(--navbox-above-padding);
+  --navbox-header-color: var(--navbox-title-color);
+  --navbox-header-font-size: calc(110%);
+  --navbox-header-background: var(--navbox-title-background);
+  --navbox-header-icon-color: var(--navbox-title-icon-color);
+  --navbox-header-link-color: var(--navbox-title-link-color);
+  --navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
+  --navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
+  --navbox-header-redlink-color: var(--navbox-title-redlink-color);
+  --navbox-header-link-decoration: var(--navbox-title-link-decoration);
+  --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
+  --navbox-header-padding--y: 0.3em;
+  --navbox-subheader-font-size: calc(100%);
+  --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
+  --navbox-list-background: color-mix(in srgb, var(--color-base) 5%, transparent);
+  --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 8%, transparent);
+  --navbox-list-color: var(--color-base);
+  --navbox-list-padding: 0.25em 0.5em;
+  --navbox-group-text-align: left;
+  --navbox-group-text-align--mobile: left;
+  --navbox-group-background: color-mix(in srgb, var(--color-progressive) 20%, transparent);
+  --navbox-group-color: var(--color-base);
+  --navbox-group-padding: var(--navbox-list-padding);
+  --navbox-tree-line-color: color-mix(in srgb, var(--color-progressive) 30%, transparent);
+  --navbox-tree-line-width: 2px;
+  --navbox-tree-indent: 1em;
+  --navbox-tree-line-indent: 0.5em;
+  --navbox-tree-line-spacing: var(--navbox-gap);
+  --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E");
+  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
+  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
+  --navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
+}
+.ranger-navbox.pill,
+.ranger-navbox.pill-mobile{
+  --navbox-pill-gap: 0.3em;
+  --navbox-pill-padding: 0.25em 0.75em;
+  --navbox-pill-border-radius: 3px;
+  --navbox-pill-box-shadow: none;
+  --navbox-pill-background: color-mix(in srgb, var(--color-base) 5%, transparent);
+  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
+  --navbox-pill-background--hover: var(--navbox-pill-background);
+  --navbox-list-background: none;
+  --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 3%, transparent);
+}
+.ranger-navbox.no-underline-title-links{
+  --navbox-title-link-color: var(--accent-link-color);
+  --navbox-title-link-decoration: none;
+  --navbox-title-redlink-decoration: none;
+}
+.ranger-navbox.noborder,
+.ranger-navbox.no-border{
+  --navbox-padding: 0px;
+  --navbox-outer-border-width: 0px;
+}
+/******************************
+* Fallback for older browsers *
+*******************************/
+@supports not (color:color-mix(in srgb, #000, transparent)) {
+    .ranger-navbox {
+        --navbox-above-background: var(--background-color-neutral-subtle);
+        --navbox-list-background: transparent;
+        --navbox-list-background--striped: var(--background-color-neutral-subtle);
+        --navbox-group-background: var(--background-color-neutral-subtle);
+        --navbox-tree-line-color: var(--background-color-neutral-subtle);
+    }
+    .ranger-navbox.pill,
+    .ranger-navbox.pill-mobile {
+      --navbox-pill-background: var(--background-color-neutral-subtle);
+      --navbox-list-background--striped: transparent;
+    }
+}
+/***************
+* End fallback *
+****************/
+.ranger-navbox{
+  border-color: var(--navbox-outer-border-color);
+  border-style: var(--navbox-outer-border-style);
+  border-width: var(--navbox-outer-border-width);
+  border-radius: var(--navbox-outer-border-radius);
+  padding: var(--navbox-padding);
+  font-size: var(--navbox-font-size);
+  margin: var(--navbox-margin);
+  background: var(--navbox-background);
+  line-height: 1.5;
+  clear:both;
+}
+.ranger-navbox * {
+  border: 0;
+}
+.ranger-navbox .center *{
+  margin-left: unset;
+  margin-right: unset;
+}
+.ranger-navbox,
+.ranger-navbox .ranger-section,
+.ranger-navbox .ranger-listbox{
+  display: flex;
+  flex-direction: column;
+  gap: var(--navbox-gap);
+}
+.ranger-navbox .ranger-title,
+.ranger-navbox .ranger-header{
+  text-align: center;
+  min-height: 1.5em;
+  position: relative;
+  z-index: 0;
+  font-weight: bold;
+}
+.ranger-navbox .ranger-title{
+  color: var(--navbox-title-color);
+  background: var(--navbox-title-background);
+  font-size: var(--navbox-title-font-size);
+  padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
 }
-.navbox-inner,
+.ranger-navbox .ranger-title a,
-.navbox-subgroup {
+.ranger-navbox .ranger-title a:visited,
-	border-spacing: 0;
+.ranger-navbox .ranger-title a:hover,
-	width: 100%;
+.ranger-navbox .ranger-title a.external,
+.ranger-navbox .ranger-title a.external:visited,
+.ranger-navbox .ranger-title a.external:hover {
+    text-decoration: var(--navbox-title-link-decoration);
 }
-/* Reduce spacing between adjacent navboxes */
+.ranger-navbox .ranger-title a.new,
-.navbox + .navbox {
+.ranger-navbox .ranger-title a.new:visited {
-	margin-top: -1px;
+    text-decoration: var(--navbox-title-redlink-decoration);
 }
-/* Spacing between rows */
+.ranger-navbox .ranger-title a,
-.navbox-spacer {
+.ranger-navbox .ranger-title a.external,
-	height: 2px;
+.ranger-navbox .ranger-title a.external:visited {
+  color: var(--navbox-title-link-color);
 }
-/* Title bars and labels */
+.ranger-navbox .ranger-title a:visited{
-.navbox-title {
+  color: var(--navbox-title-link-color--visited);
-	font-weight: bold;
-	font-size: 115%;
-	padding: 0.25em 0.6em;
-	line-height: 1.5em;
-	color: var(--wiki-accent-label-color);
-	background: var(--wiki-accent-color);
 }
-.navbox-title,
+.ranger-navbox .ranger-title a.new,
-.navbox-abovebelow {
+.ranger-navbox .ranger-title a.new:visited{
-	padding-left: 1em;
+    color:var(--navbox-title-redlink-color);
-	padding-right: 1em;
-	text-align: center;
 }
-.navbox-abovebelow,
+.ranger-navbox .ranger-title a:hover,
-.navbox-group,
+.ranger-navbox .ranger-title a:visited:hover,
-.navbox-subgroup .navbox-title {
+.ranger-navbox .ranger-title a.external:hover,
-	background: rgba(var(--wiki-accent-color--rgb), 0.18);
+.ranger-navbox .ranger-title a.external:visited:hover {
-	color: var(--wiki-content-text-color);
+  color:var(--navbox-title-link-color--hover);
-	border: 1px solid var(--wiki-content-border-color);
 }
-.navbox .navbox-title a,
+.ranger-navbox .ranger-header{
-.navbox .navbox-title a:visited,
+  color: var(--navbox-header-color);
-.navbox .navbox-title a.external,
+  background: var(--navbox-header-background);
-.navbox .navbox-title a.external:visited {
+  font-size: var(--navbox-header-font-size);
-	color: var(--wiki-accent-link-color);
+  padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
 }
-.navbox-title .mw-collapsible-toggle {
+.ranger-navbox .ranger-sublist .ranger-header{
-	font-weight: normal;
+  font-size: var(--navbox-subheader-font-size);
-	text-align: right;
+  padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
 }
-.navbox-title-text {
+.ranger-navbox .ranger-header a,
-	font-size: 105%;
+.ranger-navbox .ranger-header a:visited,
+.ranger-navbox .ranger-header a:hover,
+.ranger-navbox .ranger-header a.external,
+.ranger-navbox .ranger-header a.external:visited,
+.ranger-navbox .ranger-header a.external:hover {
+    text-decoration: var(--navbox-header-link-decoration);
 }
-/* Navbox-related links */
+.ranger-navbox .ranger-header a.new,
-.navbox-title .navbar {
+.ranger-navbox .ranger-header a.new:visited {
-	float: left;
+    text-decoration: var(--navbox-header-redlink-decoration);
-	margin-right: 0.5em;
 }
-.navbox-title .navbar a.external::after {
+.ranger-navbox .ranger-header a,
-    content: unset;
+.ranger-navbox .ranger-header a.external,
+.ranger-navbox .ranger-header a.external:visited {
+  color: var(--navbox-header-link-color);
 }
-/* Groups */
+.ranger-navbox .ranger-header a:visited{
-.navbox-group {
+  color: var(--navbox-header-link-color--visited);
-	font-weight: bold;
-	padding: 0 0.5em;
-	white-space: nowrap;
-	text-align: center;
 }
-/* Zebra colouring for rows */
+.ranger-navbox .ranger-header a.new,
-.navbox-even {
+.ranger-navbox .ranger-header a.new:visited{
-	background: #fff1;
+    color:var(--navbox-header-redlink-color);
 }
-/* Subgroups: equal group labels between different child navboxes */
+.ranger-navbox .ranger-header a:hover,
-.navbox-subgroup > tbody > tr {
+.ranger-navbox .ranger-header a:visited:hover,
-	display: flex;
+.ranger-navbox .ranger-header a.external:hover,
+.ranger-navbox .ranger-header a.external:visited:hover {
+  color:var(--navbox-header-link-color--hover);
 }
-.navbox-subgroup .navbox-title {
+.ranger-navbox .ranger-meta{
-     width: 100%;
+  font-size: var(--navbox-title-font-size);
+  position: absolute;
+  left: var(--navbox-icon-offset--x);
+  top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
+  display: block;
+}
+.ranger-navbox .ranger-meta .nv{
+  --mask: var(--icon-metalinks);
+  display: block;
+  width: 0.84em; /* based on the icon graph */
+  height: 0.84em;
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  background-color: var(--navbox-title-icon-color);
+}
+.ranger-navbox .ranger-meta .nv > a{
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+.ranger-navbox .ranger-meta .nv > a > span{
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.ranger-navbox .ranger-meta:has(.mw-selflink){
+     display: none;
+}
+.ranger-navbox,
+.ranger-navbox .ranger-section{
+  position: relative;
+}
+.ranger .mw-collapsible-toggle-placeholder{
+  display: none;
+}
+.ranger-navbox .ranger-title > .ranger-title-text,
+.ranger-navbox .ranger-header > .ranger-header-text{
+  pointer-events: none;
+}
+.ranger-navbox .ranger-title > .ranger-title-text a,
+.ranger-navbox .ranger-header > .ranger-header-text a{
+  pointer-events: auto;
+}
+.ranger-navbox .ranger-title > .mw-collapsible-toggle,
+.ranger-navbox .ranger-header > .mw-collapsible-toggle{
+  --mask: var(--icon-chevron-down);
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow:hidden;
+}
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
+  width: 1.5em;
+  height: 1.5em;
+  right: var(--navbox-icon-offset--x);
+}
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
+  top: var(--navbox-title-padding--y);
+}
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
+  top: var(--navbox-header-padding--y);
+}
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
+  top: var(--navbox-subheader-padding--y);
+}
+.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
+  content: "";
+  display: block;
+  width: 1.5em;
+  height: 1.5em;
+  position: absolute;
+  right: var(--navbox-icon-offset--x);
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  background-color: var(--navbox-title-icon-color);
+  transform: scaleY(-1);
+}
+.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
+  top: var(--navbox-title-padding--y);
+}
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
+  top: var(--navbox-header-padding--y);
+}
+.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
+  top: var(--navbox-subheader-padding--y);
+}
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
+  top: 0;
+  right: 0;
+}
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
+  background-color: var(--navbox-header-icon-color);
+}
+.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
+.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
+  transform: none;
+}
+.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
+.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
+.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
+  display: none;
+}
+.ranger-navbox .ranger-list{
+  width: unset;
+  padding: var(--navbox-list-padding);
+}
+.ranger-navbox .ranger-above{
+  background: var(--navbox-above-background);
+  color: var(--navbox-above-color);
+  padding: var(--navbox-above-padding);
+  width: unset;
+}
+.ranger-navbox .ranger-below{
+  background: var(--navbox-below-background);
+  color: var(--navbox-below-color);
+  padding: var(--navbox-below-padding);
+  width: unset;
+}
+.ranger-navbox .ranger-sublist{
+  display: flex;
+  flex-direction: column;
+  gap: var(--navbox-gap);
+}
+.ranger-navbox .ranger-section-body{
+  display: grid;
+  gap: var(--navbox-gap);
+  grid-template-columns: auto minmax(0,1fr);
+}
+/* gap fix for collapsed content */
+.ranger-navbox [class^="ranger-"][hidden="until-found"]{
+  margin-top: calc(0px - var(--navbox-gap)) !important;
+}
+.ranger-navbox .ranger-row{
+  display: contents;
+}
+.ranger-navbox .ranger-group,
+.ranger-navbox .ranger-subgroup{
+  text-align: var(--navbox-group-text-align);
+  white-space: nowrap;
+  font-weight: bold;
+  background: var(--navbox-group-background);
+  color: var(--navbox-group-color);
+  padding: var(--navbox-group-padding);
+  width: unset;
 }
-.navbox-subgroup .navbox-group {
+/* for desktop view */
-	display: flex;
+.ranger-navbox.group-align-left .ranger-group,
-	align-items: center;
+.ranger-navbox.group-align-left .ranger-subgroup{
-	justify-content: center;
+  --navbox-group-text-align: left;
-	flex-basis: 11em;
-	flex-grow: 1;
-	flex-shrink: 0;
-	white-space: normal;
 }
-/* Lists */
+.ranger-navbox.group-align-center .ranger-group,
-.navbox-list {
+.ranger-navbox.group-align-center .ranger-subgroup{
-	width: 100%;
+  --navbox-group-text-align: center;
 }
-/* Mobile adjustments */
+.ranger-navbox.group-align-right .ranger-group,
-@media screen and (max-width: 1280px) {
+.ranger-navbox.group-align-right .ranger-subgroup{
-	.mw-body .navbox-inner table {
+  --navbox-group-text-align: right;
-        display: table;
-	}
 }
-@media screen and (max-width: 720px) {
+/* for mobile view */
-	.mw-body .navbox {
+.ranger-navbox.mobile-group-align-left .ranger-group,
-		display: none;
+.ranger-navbox.mobile-group-align-left .ranger-subgroup{
-	}
+  --navbox-group-text-align--mobile: left;
 }
-/**********************
-* End Template:Navbox *
-***********************/
+.ranger-navbox.mobile-group-align-center .ranger-group,
+.ranger-navbox.mobile-group-align-center .ranger-subgroup{
+  --navbox-group-text-align--mobile: center;
+}
-/*******************
+.ranger-navbox.mobile-group-align-right .ranger-group,
-* Main page layout *
+.ranger-navbox.mobile-group-align-right .ranger-subgroup{
-********************/
+  --navbox-group-text-align--mobile: right;
-#mp-box-welcome {grid-area: welcome;}
+}
-#mp-box-about {grid-area: about;}
-#mp-box-links {grid-area: links;}
-#mp-box-contribute {grid-area: contribute;}
-#mp-box-featured {grid-area: featured;}
-#mp-box-basics {grid-area: basics;}
-#mp-box-gallery {grid-area: gallery;}
-#mp-box-iconlists {grid-area: iconlists;}
-/* Example Main Page 1 Grid Layout */
+.ranger-navbox .ranger-listbox > .ranger-wrap{
-#mp-layout1-container {
+  background: var(--navbox-list-background);
-	display:grid;
+  color: var(--navbox-list-color);
-	grid-template-areas:
+  flex-grow: 1;
-		"welcome"
+}
-		"about"
+.ranger-navbox .ranger-sublist{
-		"featured"
+  flex-grow: var(--count);
-		"basics"
+}
-		"gallery"
+.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
-		"links"
+  grid-column-end: span 2;
-		"contribute";
+}
-	grid-template-columns:100%;
+.ranger-navbox .ranger-group,
-	gap:10px;
+.ranger-navbox .ranger-subgroup,
+.ranger-navbox .ranger-listbox > .ranger-wrap{
+  display: grid;
+  justify-items: stretch;
+  align-items: center;
+}
+.ranger-navbox.striped-even .ranger-even,
+.ranger-navbox.striped-odd .ranger-odd{
+  background: var(--navbox-list-background--striped);
+}
+/* make links use full line height (larger click box)*/
+.ranger-navbox .hlist a{
+    display: inline-block;
 }
-@media screen and (min-width:990px) {
+.ranger-navbox .align-left,
-	#mp-layout1-container {
+.ranger-navbox .alignleft{
-		grid-template-areas:
+  text-align: left;
-			"welcome welcome"
+}
-			"about about"
+.ranger-navbox .align-center,
-			"featured basics"
+.ranger-navbox .aligncenter{
-			"gallery links"
+  text-align: center;
-			"contribute contribute";
+}
-		grid-template-columns:1fr 1fr;
+.ranger-navbox .align-right,
-	}
+.ranger-navbox .alignright{
+  text-align: right;
 }
-@media screen and (min-width:1350px) {
+/* responsive */
-	#mp-layout1-container {
+@media screen and (max-width: 720px) {
-		grid-template-areas:
+  .ranger-navbox .ranger-section-body,
-			"welcome welcome welcome"
+  .ranger-navbox .ranger-sublist {
-			"about about basics"
+    display: flex;
-			"featured featured basics"
+    flex-flow: column;
-			"gallery links links"
-			"contribute contribute contribute";
-		grid-template-columns: 2fr 1fr 2fr;
    }
+  .ranger-navbox .ranger-row{
+    display: block;
+  }
+  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
+  .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
+    margin-top: var(--navbox-gap);
+  }
+  .ranger-navbox .ranger-listbox.empty{
+    display: none;
+  }
+  .ranger-navbox .ranger-group,
+  .ranger-navbox .ranger-subgroup{
+    text-align: var(--navbox-group-text-align--mobile);
+    white-space: normal;
+  }
+  .ranger-navbox .ranger-sublist {
+    padding-left: var(--navbox-tree-indent);
+    margin-left: var(--navbox-tree-line-indent);
+  }
+  .ranger-navbox .ranger-subgroup,
+  .ranger-navbox .ranger-listbox {
+    position:relative;
+  }
+  .ranger-navbox .ranger-group br,
+  .ranger-navbox .ranger-subgroup br{
+    display: none;
+  }
+  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
+    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
+  }
+  .ranger-navbox .ranger-sublist .ranger-row > ::before{
+    position: absolute;
+    left: calc(0px - var(--navbox-tree-indent));
+    top: 0;
+    width: var(--navbox-tree-line-width);
+    height: 100%;
+    content: '';
+    display: block;
+    background-color: var(--navbox-tree-line-color);
+  }
+  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
+  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
+    height: calc(100% + var(--navbox-gap));
+  }
+  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
+    display: none;
+  }
+  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
+    display: block;
+    height: calc(50% + var(--navbox-tree-line-width)/2);
+  }
+  .ranger-navbox .ranger-subgroup::after,
+  .ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
+    position: absolute;
+    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
+    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
+    height: var(--navbox-tree-line-width);
+    content: '';
+    background-color: var(--navbox-tree-line-color);
+  }
+  /* increase height for links */
+  .ranger-navbox .hlist{
+    line-height: 2;
+  }
+}
+/**** `.pill` class: the "pill" style  ****/
+/* remove middle dots betweem items */
+.ranger-navbox.pill .hlist dd:not(:last-child)::after,
+.ranger-navbox.pill .hlist li:not(:last-child)::after{
+  display: none;
+}
+/* remove parentheses around nested lists*/
+.ranger-navbox.pill .hlist dd ol::before,
+.ranger-navbox.pill .hlist dd ul::before,
+.ranger-navbox.pill .hlist dd dl::before,
+.ranger-navbox.pill .hlist dt ol::before,
+.ranger-navbox.pill .hlist dt ul::before,
+.ranger-navbox.pill .hlist dt dl::before,
+.ranger-navbox.pill .hlist li ol::before,
+.ranger-navbox.pill .hlist li ul::before,
+.ranger-navbox.pill .hlist li dl::before,
+.ranger-navbox.pill .hlist dd ol::after,
+.ranger-navbox.pill .hlist dd ul::after,
+.ranger-navbox.pill .hlist dd dl::after,
+.ranger-navbox.pill .hlist dt ol::after,
+.ranger-navbox.pill .hlist dt ul::after,
+.ranger-navbox.pill .hlist dt dl::after,
+.ranger-navbox.pill .hlist li ol::after,
+.ranger-navbox.pill .hlist li ul::after,
+.ranger-navbox.pill .hlist li dl::after {
+  display: none;
 }
+/* make lists inline-flex */
-/* Example Main Page 2 Grid Layout */
+.ranger-navbox.pill .hlist ul,
-#mp-layout2-container {
+.ranger-navbox.pill .hlist ol,
-	display:grid;
+.ranger-navbox.pill .hlist dl{
-	grid-template-areas:
+  display: inline-flex;
-		"welcome"
+  gap: var(--navbox-pill-gap);
-		"links"
+  flex-wrap: wrap;
-		"about"
-		"gallery"
-		"iconlists"
-		"contribute";
-	grid-template-columns:100%;
-	gap:10px;
 }
+/* "pill" style for items */
-@media screen and (min-width:990px) {
+.ranger-navbox.pill .hlist li,
-	#mp-layout2-container {
+.ranger-navbox.pill .hlist dt,
-		grid-template-areas:
+.ranger-navbox.pill .hlist dd{
-			"welcome links"
+  padding: var(--navbox-pill-padding);
-			"gallery about"
+  border-radius: var(--navbox-pill-border-radius);
-			"iconlists about"
+  box-shadow: var(--navbox-pill-box-shadow);
-			"iconlists contribute";
+  background: var(--navbox-pill-background);
-		grid-template-columns: 3fr 2fr;
+  /* 100% height */
-	}
+  display: flex;
+  align-items: center;
+  /* for nested lists */
+  gap: var(--navbox-pill-gap);
+  flex-wrap: wrap;
 }
+/* Add a hover / focus feedback style */
-@media screen and (min-width:1350px) {
+.ranger-navbox.pill .hlist dd:hover,
-	#mp-layout2-container {
+.ranger-navbox.pill .hlist dd:focus,
-		grid-template-areas:
+.ranger-navbox.pill .hlist dt:hover,
-			"welcome welcome links"
+.ranger-navbox.pill .hlist dt:focus,
-			"welcome welcome about"
+.ranger-navbox.pill .hlist li:hover,
-			"gallery gallery about"
+.ranger-navbox.pill .hlist li:focus {
-			"iconlists iconlists contribute";
+  box-shadow: var(--navbox-pill-box-shadow--hover);
-		grid-template-columns: 3fr 2fr 2fr;
+  background: var(--navbox-pill-background--hover);
-  }
 }
+/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
-/* Example Main Page 3 Grid Layout */
+@media screen and (max-width: 720px) {
-#mp-layout3-container {
+    /* remove middle dots betweem items */
-	display:grid;
+    .ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
-	grid-template-areas:
+    .ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
-     "welcome"
+      display: none;
-     "about"
+    }
-     "featured"
+    /* remove parentheses around nested lists*/
-     "four"
+    .ranger-navbox.pill-mobile .hlist dd ol::before,
-     "priority"
+    .ranger-navbox.pill-mobile .hlist dd ul::before,
-		"projects"
+    .ranger-navbox.pill-mobile .hlist dd dl::before,
-     "wiki";
+    .ranger-navbox.pill-mobile .hlist dt ol::before,
-	grid-template-columns:100%;
+    .ranger-navbox.pill-mobile .hlist dt ul::before,
-	gap:10px;
+    .ranger-navbox.pill-mobile .hlist dt dl::before,
+    .ranger-navbox.pill-mobile .hlist li ol::before,
+    .ranger-navbox.pill-mobile .hlist li ul::before,
+    .ranger-navbox.pill-mobile .hlist li dl::before,
+    .ranger-navbox.pill-mobile .hlist dd ol::after,
+    .ranger-navbox.pill-mobile .hlist dd ul::after,
+    .ranger-navbox.pill-mobile .hlist dd dl::after,
+    .ranger-navbox.pill-mobile .hlist dt ol::after,
+    .ranger-navbox.pill-mobile .hlist dt ul::after,
+    .ranger-navbox.pill-mobile .hlist dt dl::after,
+    .ranger-navbox.pill-mobile .hlist li ol::after,
+    .ranger-navbox.pill-mobile .hlist li ul::after,
+    .ranger-navbox.pill-mobile .hlist li dl::after {
+      display: none;
+    }
+    /* make lists inline-flex */
+     .ranger-navbox.pill-mobile .hlist ul,
+     .ranger-navbox.pill-mobile .hlist ol,
+     .ranger-navbox.pill-mobile .hlist dl{
+      display: inline-flex;
+      gap: var(--navbox-pill-gap);
+      flex-wrap: wrap;
+     }
+     .ranger-navbox.pill-mobile .hlist li,
+    .ranger-navbox.pill-mobile .hlist dt,
+     .ranger-navbox.pill-mobile .hlist dd{
+      padding: var(--navbox-pill-padding);
+      border-radius: var(--navbox-pill-border-radius);
+      box-shadow: var(--navbox-pill-box-shadow);
+      background: var(--navbox-pill-background);
+      display: flex;
+      align-items: center;
+      gap: var(--navbox-pill-gap);
+      flex-wrap: wrap;
+    }
+    /* Add a hover / focus feedback style */
+    .ranger-navbox.pill-mobile .hlist dd:hover,
+    .ranger-navbox.pill-mobile .hlist dd:focus,
+    .ranger-navbox.pill-mobile .hlist dt:hover,
+    .ranger-navbox.pill-mobile .hlist dt:focus,
+    .ranger-navbox.pill-mobile .hlist li:hover,
+    .ranger-navbox.pill-mobile .hlist li:focus {
+      box-shadow: var(--navbox-pill-box-shadow--hover);
+      background: var(--navbox-pill-background--hover);
+    }
 }
+/*********************
+* End Template:Navbox*
+**********************/
-@media screen and (min-width:990px) {
+.mp-box {
-	#mp-layout3-container {
+    display:flex;
-		grid-template-areas:
+    flex-flow:column nowrap;
-      "welcome welcome"
+    width: calc(100% - 2px);
-      "about about"
+    box-sizing: border-box;
-      "featured four"
+    background:
-			"priority projects"
+        linear-gradient(135deg, rgba(66, 162, 241, 0.12) 0%, transparent 35%, rgba(76, 87, 181, 0.1) 65%, rgba(66, 162, 241, 0.12) 100%),
-      "wiki wiki";
+        radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.15), transparent 50%),
-		grid-template-columns:1fr 1fr;
+        radial-gradient(ellipse at bottom right, rgba(76, 87, 181, 0.12), transparent 50%),
-	}
+        var(--background-color-transparent);
+    padding:0;
+    box-shadow:
+0 50px 10px rgba(66, 162, 241, 0.2),
+0 80px 15px rgba(0, 0, 0, 0.8),
+        inset 0 0 80px 15px rgba(66, 162, 241, 0.08),
+0 0 1px rgba(66, 162, 241, 0.3),
+        inset 0 0 0 1px rgba(66, 162, 241, 0.2);
+    margin-top: 1em;
+    border-radius: 6px;
+    position: relative;
+    overflow: hidden;
 }
-@media screen and (min-width:1350px) {
+.mp-box::before {
-	#mp-layout3-container {
+    content: '';
-		grid-template-areas:
+    position: absolute;
-      "welcome welcome welcome"
+    top: 0;
-      "about about four"
+    left: 0;
-			"featured featured four"
+    right: 0;
-			"priority projects projects"
+    height: 3px;
-			"wiki wiki wiki";
+    background: linear-gradient(90deg,
-		grid-template-columns:2fr 1fr 2fr;
+        transparent,
-  }
+        rgba(66, 162, 241, 0.6) 15%,
+        rgba(66, 162, 241, 1) 50%,
+        rgba(66, 162, 241, 0.6) 85%,
+        transparent);
+    box-shadow:
+0 15px rgba(66, 162, 241, 0.8),
+0 25px rgba(66, 162, 241, 0.5);
 }
-.mp-box {
+.mp-box::after {
-	display:flex;
+    content: '';
-	flex-flow:column nowrap;
+    position: absolute;
-	width: calc(100% - 2px);
+    bottom: 0;
-	box-sizing: border-box;
+    left: 0;
-	background:rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
+    right: 0;
-	border:1px solid var(--wiki-content-border-color);
+    height: 2px;
-	padding:0px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.4) 20%,
+        rgba(66, 162, 241, 0.7) 50%,
+        rgba(66, 162, 241, 0.4) 80%,
+        transparent);
+    box-shadow: 0 0 10px rgba(66, 162, 241, 0.6);
 }
 .mp-body {
-	height: 100%;
+    height: 100%;
-	display: flex;
+    display: flex;
-	padding:0.5em;
+    padding:0.5em;
-	flex-flow: column nowrap;
+    flex-flow: column nowrap;
 }
 .mp-box.centered-content .mp-body {
-	height: 100%;
+    height: 100%;
-	display: flex;
+    display: flex;
-	flex-flow: column nowrap;
+    flex-flow: column nowrap;
-	justify-content: space-evenly;
+    justify-content: space-evenly;
 }
 .mp-box.has-floating-image {
-	display:block;
+    display:block;
 }
 .mp-box.has-floating-image .mp-body {
-	height:unset;
+    height:unset;
-	display:block;
+    display:block;
 }
 .mp-box h2 {
-	text-align:center;
+    text-align:center;
-	font-weight:bold;
+    font-weight:bold;
-	font-family:var(--wiki-heading-font-family);
+    font-family: "Daedalus";
      overflow: initial;
-	border-bottom: 1px solid var(--wiki-content-border-color);
+    font-size: 4em;
-	font-size: 150%;
+    margin: 0.5em 0;
-	margin: 0;
+    padding: 0.5em 0;
-	padding: 5px 0;
+    text-shadow:
-	color:var(--wiki-heading-color);
+0 30px rgba(66, 162, 241, 0.8),
+0 15px rgba(66, 162, 241, 0.6),
+2px 5px rgba(0, 0, 0, 0.8);
+    color:var(--content-border-color);
+    background:
+        linear-gradient(90deg, transparent 0%, rgba(66, 162, 241, 0.08) 50%, transparent 100%),
+        radial-gradient(ellipse at center, rgba(26, 26, 34, 0.6), transparent 70%);
+    border-radius: 8px;
+    position: relative;
+}
+.mp-box h2::after {
+    content: '';
+    position: absolute;
+    left: 10%;
+    right: 10%;
+    bottom: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.3) 30%, rgba(66, 162, 241, 0.5) 50%, rgba(66, 162, 241, 0.3) 70%, transparent);
 }
 .mp-box .welcome-message {
-     font-size: 200%;
+     font-size: 5.5em;
      margin: 0;
-     padding: 5px 0;
+     padding: 0.4em 0;
-	color: #fff;
+    color: #fff;
-	filter: drop-shadow(0px 2px 3px #000);
+    font-family: "Daedalus";
+    text-shadow:
+0 50px rgba(66, 162, 241, 1),
+0 35px rgba(66, 162, 241, 0.9),
+0 20px rgba(66, 162, 241, 0.7),
+0 10px rgba(255, 255, 255, 0.8),
+6px 12px rgba(0, 0, 0, 1),
+0 80px rgba(66, 162, 241, 0.6);
+    letter-spacing: 0.08em;
+    position: relative;
+    animation: welcome-pulse 4s ease-in-out infinite;
+    background:
+        linear-gradient(90deg,
+            transparent 0%,
+            rgba(66, 162, 241, 0.05) 30%,
+            rgba(66, 162, 241, 0.08) 50%,
+            rgba(66, 162, 241, 0.05) 70%,
+            transparent 100%);
+    padding: 0.5em 1em;
+    border-radius: 8px;
+}
+.mp-box .welcome-message::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 5%;
+    right: 5%;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.6) 20%,
+        rgba(255, 255, 255, 0.8) 50%,
+        rgba(66, 162, 241, 0.6) 80%,
+        transparent);
+    box-shadow:
+0 15px rgba(66, 162, 241, 1),
+0 25px rgba(66, 162, 241, 0.6);
+}
+.mp-box .welcome-message::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 5%;
+    right: 5%;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.5) 20%,
+        rgba(255, 255, 255, 0.6) 50%,
+        rgba(66, 162, 241, 0.5) 80%,
+        transparent);
+    box-shadow:
+0 12px rgba(66, 162, 241, 0.8),
+0 20px rgba(66, 162, 241, 0.5);
+}
+@keyframes welcome-pulse {
+%, 100% {
+        text-shadow:
+0 50px rgba(66, 162, 241, 1),
+0 35px rgba(66, 162, 241, 0.9),
+0 20px rgba(66, 162, 241, 0.7),
+0 10px rgba(255, 255, 255, 0.8),
+6px 12px rgba(0, 0, 0, 1),
+0 80px rgba(66, 162, 241, 0.6);
+    }
+% {
+        text-shadow:
+0 65px rgba(66, 162, 241, 1),
+0 45px rgba(66, 162, 241, 1),
+0 30px rgba(66, 162, 241, 0.8),
+0 15px rgba(255, 255, 255, 1),
+6px 12px rgba(0, 0, 0, 1),
+0 100px rgba(66, 162, 241, 0.8);
+    }
 }
 #mp-banner-container {
-	position: relative;
+    position: relative;
 }
 #mp-box-welcome {
-	text-align:center;
+    text-align:center;
-	position:relative;
+    position:relative;
-	overflow:hidden;
+    overflow:hidden;
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 30%, rgba(76, 87, 181, 0.12) 70%, rgba(66, 162, 241, 0.15) 100%),
+        radial-gradient(ellipse at center, rgba(66, 162, 241, 0.18), transparent 60%),
+        var(--background-color-transparent);
+    box-shadow:
+0 60px 12px rgba(66, 162, 241, 0.25),
+0 100px 20px rgba(0, 0, 0, 0.8),
+        inset 0 0 100px 20px rgba(66, 162, 241, 0.1),
+0 0 1px rgba(66, 162, 241, 0.4),
+        inset 0 0 0 1px rgba(66, 162, 241, 0.3);
 }
 #mp-welcome {
-	display:flex;
+    display:flex;
-	flex-flow:column nowrap;
+    flex-flow:column nowrap;
-	position: relative;
+    position: relative;
-	height: 100%;
+    height: 100%;
-	font-family: var(--wiki-heading-font-family);
+    font-family: var(--heading-font-family);
-	z-index: 2;
+    z-index: 2;
-	box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 1em;
 }
 #mp-welcome .welcome-subtitle {
-	height: 100%;
+    height: 100%;
-	background:rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.85);
+    font-family: var(--body-font-family);
-	padding:0.5em;
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 50%, rgba(76, 87, 181, 0.08)),
+        color-mix(in srgb, var(--background-color-base) 85%, transparent);
+    margin-left: 4px;
+    margin-right: 4px;
+    margin-bottom: 4px;
+    padding: 1em;
+    border-radius: 4px;
+    box-shadow:
+        inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
+2px 8px rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(66, 162, 241, 0.2);
 }
@@ Line 592: / Line 1,166: @@
 .view-dark #mp-banner {
-	filter: blur(5px) brightness(50%);
+    filter: blur(5px) brightness(50%);
 }
 .view-light #mp-banner {
-	filter: blur(5px) contrast(50%);
+    filter: blur(5px) contrast(50%);
 }
@@ Line 602: / Line 1,176: @@
 .mp-links {
    --gap:10px;
+  font-size: 1.5em;
 }
 .mp-links > ul {
-	display: flex;
+    display: flex;
-	flex-flow: row wrap;
+    flex-flow: row wrap;
-	justify-content: space-evenly;
+    justify-content: space-evenly;
-	margin: 2px;
+    margin: 2px;
-	gap:var(--gap);
+    gap:var(--gap);
+}
+.mp-main > .mp-links > ul {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(5em, 1fr));
+}
+@media screen and (max-width: 720px) {
+    .mp-main > .mp-links > ul {
+        grid-template-columns: 1fr;
+        gap: 1em;
+    }
+    .mp-main > .mp-links > ul > li {
+        margin: 0 0.5em;
+    }
 }
 .mp-links > ul > li {
-	display:flex;
+    display:flex;
-	flex-flow:column nowrap;
+    flex-flow:column nowrap;
-	align-items:stretch;
+    align-items:stretch;
-	text-align: center;
+    text-align: center;
-	box-sizing:border-box;
+    box-sizing:border-box;
-	flex: max(calc(50% - var(--gap)), 5em) 1 1;
+    padding-top: 0.5em;
-	outline:1px solid var(--wiki-content-link-color);
+    border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
-	transition:0.1s ease-in;
+    border-image-slice: 6;
+    border-image-width: 6px;
+    border-image-repeat: repeat repeat;
 }
+.mp-main > .mp-links > ul > li {
+    background:
+        linear-gradient(135deg, #42a2f125 0%, transparent 50%, #4c57b525 100%),
+        linear-gradient(to bottom, #42a2f140, #4c57b550, #42a2f130);
+    margin: 0 3em;
+    box-shadow:
+        inset 0 0 15px 3px #42a2f160,
+        inset 0 -2px 8px 0 #4c57b540,
+2px 12px 0 rgba(66, 162, 241, 0.2),
+        inset 2px 0 2px -1px rgba(255, 255, 255, 0.15),
+        inset -2px 0 2px -1px rgba(255, 255, 255, 0.15);
+    border: 1px solid rgba(66, 162, 241, 0.3);
+    border-radius: 4px;
+    padding-top: 1em;
+    padding-bottom: 0.5em;
+    position: relative;
+    overflow: hidden;
+}
+.mp-main > .mp-links > ul > li::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: tech-shimmer 3s infinite;
+}
+@keyframes tech-shimmer {
+% { left: -100%; }
+% { left: 100%; }
+}
+.mp-main > .mp-links > ul > li:hover {
+    background:
+        linear-gradient(135deg, #42a2f140 0%, transparent 50%, #4c57b540 100%),
+        linear-gradient(to bottom, #42a2f155, #4c57b565, #42a2f145);
+    box-shadow:
+        inset 0 0 20px 5px #42a2f180,
+        inset 0 -2px 10px 0 #4c57b560,
+4px 20px 2px rgba(66, 162, 241, 0.35),
+        inset 2px 0 4px -1px rgba(255, 255, 255, 0.25),
+        inset -2px 0 4px -1px rgba(255, 255, 255, 0.25);
+    border-color: rgba(66, 162, 241, 0.5);
+}
+.mp-links > ul > li::before {
+    transition: opacity 0.5s ease-in-out;
+    z-index: 0;
+    pointer-events: none;
+}
+.mp-links > ul > li:hover::before {
+    opacity: 0.2;
+}
 .mp-links > ul > li:hover {
-	background-color:rgba(var(--wiki-content-link-color--rgb), 0.2);
+    background-color: #42a2f180;
 }
@@ Line 635: / Line 1,284: @@
 .mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}
-.mp-links > ul > li:hover a {
+.mp-links > ul > li {
-	text-decoration: underline;
+    cursor: pointer;
 }
 .mp-links > ul > li > a {
-	display: flex;
+    display: flex;
-	align-items: center;
+    align-items: center;
-	justify-content: center;
+    justify-content: center;
-	height:100%;
+    height:100%;
-	flex:1 1 auto;
+    flex:1 1 auto;
-	box-sizing:border-box;
+    box-sizing:border-box;
-	padding:5px;
+    padding:5px;
+    pointer-events: auto;
 }
@@ Line 659: / Line 1,309: @@
 .mp-links.stretch,
 .mp-links.stretch > ul {
-	height:100%;
+    height:100%;
 }
 .mp-links.side-image li {
-	flex-flow:row nowrap;
+    flex-flow:row nowrap;
 }
 /* MP icon lists */
 .mp-iconlists {
-	display: flex;
+    display: flex;
      flex-flow: wrap;
      gap: 5px 20px;
@@ Line 674: / Line 1,324: @@
 .mp-iconlists > .mp-iconlist {
-	flex: 1;
+    flex: 1;
      min-width: fit-content;
+}
+.mp-iconlist {
+    font-size: 4em;
 }
 .mp-iconlist > h3 {
-	padding: 0;
+    padding: 0;
-	margin: 0;
+    margin: 0;
 }
 .mp-iconlist > ul {
-	list-style: none;
+    list-style: none;
-	margin: 0;
+    margin: 0;
 }
@@ Line 699: / Line 1,353: @@
 .mp-box ul.gallery .gallerytext {
-	margin-top: 1em;
+    margin-top: 1em;
-	padding: 0;
+    padding: 0;
-     background-color: var(--wiki-content-background-color--secondary);
+     background-color: var(--background-color-neutral-subtle);
-    border: 1px solid var(--wiki-content-link-color);
 }
 .mp-box .gallerybox:hover .gallerytext {
-     background-color: rgba(var(--wiki-content-link-color--rgb), 0.2);
+     background-color: color-mix(in srgb, var(--content-link-color) 20%, transparent);
 }
 .mp-box ul.gallery .gallerytext > p {
-	margin: 0;
+    margin: 0;
 }
 .mp-box ul.gallery .gallerytext a {
-	display: block;
+    display: block;
      padding: .5em 0;
 }
@@ Line 727: / Line 1,380: @@
 .druid-container {
-    /* These variables are designed to inherit from your wiki's color variables.
+     --druid-background-color: var(--background-color-base);
-       If your wiki uses a different naming scheme, change the inner names to match yours.
+     --druid-secondary-background-color: var(--color-progressive);
-       If your wiki doesn't use color variables you should consider doing so,
+     --druid-secondary-background-label-color: var(--content-link-label-color);
-       otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
+     --druid-tertiary-background-color: var(--background-color-neutral-subtle);
-    */
+     --druid-border-color: var(--content-border-color);
-     --druid-background-color: var(--wiki-content-background-color, #ffffff);
+     --druid-link-color: var(--content-link-color);
-     --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
+     --druid-link-label-color: var(--content-link-label-color);
+}
-     --druid-secondary-background-color: var(--wiki-accent-color, #36c);
-     --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
+.npc-infobox {
-     --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
+    border-radius:5px;
-     --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
+     border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
+    border-image-slice: 6;
-     --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
+    border-image-width: 6px;
-     --druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
+    border-image-repeat: repeat;
+    position: relative;
-    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
+    background:
-     --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
+        linear-gradient(135deg, rgba(66, 162, 241, 0.05) 0%, transparent 40%, rgba(76, 87, 181, 0.05) 100%),
+        radial-gradient(ellipse at top, rgba(66, 162, 241, 0.08), transparent 60%),
-    --druid-link-color: var(--wiki-content-link-color, #0645ad);
+        var(--druid-background-color);
-     --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
+     box-shadow:
-     --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
+0 40px 8px rgba(66, 162, 241, 0.15),
-    --druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
+        inset 0 0 60px 10px rgba(66, 162, 241, 0.05),
+0 0 1px rgba(66, 162, 241, 0.2);
+     overflow: hidden;
+}
+.npc-infobox::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.4) 20%,
+        rgba(66, 162, 241, 0.8) 50%,
+        rgba(66, 162, 241, 0.4) 80%,
+        transparent);
+     box-shadow: 0 0 15px rgba(66, 162, 241, 0.8);
+     animation: data-scan 3s linear infinite;
+}
+@keyframes data-scan {
+% { opacity: 0.5; }
+% { opacity: 1; }
+% { opacity: 0.5; }
+}
+.npc-infobox::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.3) 30%,
+        rgba(66, 162, 241, 0.6) 50%,
+        rgba(66, 162, 241, 0.3) 70%,
+        transparent);
 }
 .druid-container {
-    border: 4px solid var(--druid-border-color);
-    border-radius: 3px;
      background: var(--druid-background-color);
      float: right;
      clear: right;
      margin: 0 0 1em 1em;
-	width:100%;
+    padding: 0.5em;
-	max-width:22em;
+    width:100%;
+    max-width:26em;
      box-sizing: border-box;
-     border-collapse: collapse;
+     border-collapse: separate;
 }
@@ Line 779: / Line 1,471: @@
 .druid-infobox .druid-title,
 .druid-infobox .druid-section {
-    background:rgba(var(--druid-secondary-background-color--rgb), 0.75);
-    color:var(--druid-secondary-background-label-color);
      text-align:center;
-    font-size:1.5em;
      padding:1px;
+    border-radius: 0.1em;
+}
+.npc-infobox .druid-title {
+    background:
+        linear-gradient(135deg,
+            rgba(66, 162, 241, 0.25) 0%,
+            rgba(76, 87, 181, 0.2) 40%,
+            rgba(66, 162, 241, 0.15) 80%,
+            rgba(66, 162, 241, 0.25) 100%),
+        radial-gradient(ellipse at center, rgba(66, 162, 241, 0.2), transparent 70%),
+        linear-gradient(90deg,
+            color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%,
+            color-mix(in srgb, var(--druid-secondary-background-color) 70%, transparent) 100%);
+    color: var(--druid-secondary-background-label-color);
+    text-shadow:
+0 20px rgba(66, 162, 241, 1),
+0 15px rgba(66, 162, 241, 0.8),
+0 8px rgba(66, 162, 241, 0.6),
+2px 4px rgba(0, 0, 0, 0.9);
+    font-size: 1.3em;
+    letter-spacing: 0.08em;
+    line-height: 1;
+    position: relative;
+    box-shadow:
+        inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
+4px 12px rgba(0, 0, 0, 0.6),
+0 0 1px rgba(66, 162, 241, 0.4);
+    border-radius: 2px;
+    padding: 0.5em 0.8em;
+}
+.npc-infobox .druid-title::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.6) 20%,
+        rgba(66, 162, 241, 1) 50%,
+        rgba(66, 162, 241, 0.6) 80%,
+        transparent);
+    box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
+}
+.npc-infobox .druid-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.4) 30%,
+        rgba(66, 162, 241, 0.8) 50%,
+        rgba(66, 162, 241, 0.4) 70%,
+        transparent);
+    box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
+}
+.npc-infobox .druid-section {
+    background:
+        linear-gradient(90deg,
+            color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%,
+            color-mix(in srgb, var(--druid-secondary-background-color) 60%, transparent) 100%),
+        linear-gradient(135deg, rgba(66, 162, 241, 0.1), transparent 50%);
+    color:var(--druid-secondary-background-label-color);
+    text-shadow:
+0 15px rgba(66, 162, 241, 0.8),
+0 8px rgba(66, 162, 241, 0.5),
+2px 4px rgba(0, 0, 0, 0.8);
+    position: relative;
+    box-shadow:
+        inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
+2px 8px rgba(0, 0, 0, 0.5);
+}
+.npc-infobox .druid-section::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 50%, transparent);
+    box-shadow: 0 0 6px rgba(66, 162, 241, 0.4);
 }
@@ Line 794: / Line 1,573: @@
      font-weight:bold;
      text-align: right;
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
 .druid-row > .druid-label {
-     width: 48%;
+     width: 40%;
      flex-shrink: 0;
 }
@@ Line 804: / Line 1,583: @@
 .druid-row > .druid-label,
 .druid-row > .druid-data {
-	padding-inline: 0.3em;
+    padding-inline: 0.3em;
 }
@@ Line 861: / Line 1,640: @@
      display:grid;
      gap: 0.3em;
-	padding: 0.35em;
+    padding: 0.35em;
 }
@@ Line 873: / Line 1,652: @@
 .druid-grid-item > .druid-label,
 .druid-grid-item > .druid-data {
-	text-align: center;
+    text-align: center;
 }
 .druid-section-container > .druid-collapsible {
-	display: flex;
+    display: flex;
-	justify-content: space-between;
+    justify-content: space-between;
-	align-items: center;
+    align-items: center;
 }
@@ Line 907: / Line 1,686: @@
 .druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
    display: none;
+}
+body .has-worn-variant .image-base {
+    display: block !important;
+}
+body .has-worn-variant .image-worn {
+    display: none !important;
+}
+body .has-worn-variant.is-worn-active .image-base {
+    display: none !important;
+}
+body .has-worn-variant.is-worn-active .image-worn {
+    display: block !important;
+}
+.image-base img, .image-worn img {
+    display: block !important;
+    margin: 0 auto !important;
+    max-width: 100%;
+    height: auto;
+}
+.worn-toggle-button {
+    display: inline-block !important;
+    margin-top: 10px;
+    padding: 5px 15px;
+    background: #333 !important;
+    color: #fff !important;
+    border: 1px solid #666 !important;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+.is-worn-active .worn-toggle-button {
+    background: #833 !important;
 }
@@ Line 919: / Line 1,738: @@
 div.druid-row + div.druid-row {
-	margin-top: 0;
+    margin-top: 0;
+}
+.npc-infobox div.druid-row {
+    background: linear-gradient(90deg, rgba(66, 162, 241, 0.02), transparent 60%);
 }
-div.druid-row > .druid-label {
+.npc-infobox div.druid-row > .druid-label {
-	background: var(--druid-tertiary-background-color);
+    background:
+        linear-gradient(90deg,
+            color-mix(in srgb, var(--druid-tertiary-background-color) 80%, #42a2f1) 0%,
+            var(--druid-tertiary-background-color) 100%);
+    text-shadow: 0 0 8px rgba(66, 162, 241, 0.4);
+    border-right: 1px solid rgba(66, 162, 241, 0.2);
 }
-.druid-infobox .druid-title {
+.npc-infobox div.druid-row > .druid-data {
-  font-weight: 700;
+    text-shadow: 0 0 6px rgba(66, 162, 241, 0.3);
 }
@@ Line 940: / Line 1,768: @@
 /*** Miscellaneous ***/
 .responsive-image {
-	max-width:100%;
+    max-width:100%;
-	height:auto;
+    height:auto;
 }
@@ Line 950: / Line 1,778: @@
 @media screen and (min-width:720px) {
-	.mobileonly {
+    .mobileonly {
-		display:none;
+        display:none;
-	}
+    }
 }
 @media screen and (max-width:720px) {
-	.nomobile {
+    .nomobile {
-		display:none;
+        display:none;
-	}
+    }
 }
@@ Line 966: / Line 1,794: @@
 /********* [[Template:Ambox]] *********/
 .ambox {
-	border: 1px solid var(--wiki-content-border-color);
+    border: 1px solid var(--content-border-color);
-	border-left: 10px solid var(--ambox-color);
+    border-left: 10px solid var(--ambox-color);
-	border-radius: 2px;
+    border-radius: 2px;
-	display: flex;
+    display: flex;
-	align-items: center;
+    align-items: center;
-	gap: .6em;
+    gap: .6em;
-	margin: 1em 0;
+    margin: 1em 0;
-	padding: 3px .6em;
+    padding: 3px .6em;
-	background-color: var(--wiki-content-background-color--secondary);
+    background-color: var(--background-color-neutral-subtle);
-	box-shadow: 2px 2px 5px 0px #0002;
+    box-shadow: 2px 2px 5px 0px #0002;
 }
 @media (min-width: 720px) {
-	.ambox {
+    .ambox {
-		margin-inline: 10%;
+        margin-inline: 10%;
-	}
+    }
 }
 .ambox.tiny {
-	padding: .04rem .5em;
+    padding: .04rem .5em;
-	margin-inline: 0;
+    margin-inline: 0;
      width: fit-content;
 }
 .ambox + .ambox {
-	margin-top: -.6em;
+    margin-top: -.6em;
 }
 .ambox-content p {
-	margin: .15em 0;
+    margin: .15em 0;
 }
 .ambox-title {
-	font-weight: bold;
+    font-weight: bold;
 }
@@ Line 1,007: / Line 1,835: @@
      margin-bottom: 0.5em;
      font-style: italic;
-     border-top: 1px solid var(--wiki-body-dynamic-color--secondary--inverted);
+     border-top: 1px solid var(--border-color-subtle);
-     border-bottom: 1px solid var(--wiki-body-dynamic-color--secondary--inverted);
+     border-bottom: 1px solid var(--border-color-subtle);
 }
 .hatnote.icon {
-	padding-left: 0;
+    padding-left: 0;
 }
@@ Line 1,045: / Line 1,873: @@
 /********* [[Template:Link icon]] *********/
 .link-icon {
-	display: inline-flex;
+    display: inline-flex;
-	align-items: center;
+    align-items: center;
      height: var(--link-icon-line-height);
      vertical-align: bottom;
@@ Line 1,056: / Line 1,884: @@
 .link-icon .regular a {
-	display: flex;
+    display: flex;
 }
 .link-icon .regular img {
-	height: var(--link-icon-size);
+    height: var(--link-icon-size);
-	max-width: var(--link-icon-size);
+    max-width: var(--link-icon-size);
 }
 .link-icon .fallback {
-	outline: 1px solid var(--wiki-content-text-color);
+    outline: 1px solid var(--color-base);
-	border-radius: 50%;
+    border-radius: 50%;
-	text-align: center;
+    text-align: center;
-	width: var(--link-icon-size);
+    width: var(--link-icon-size);
-	line-height: var(--link-icon-size);
+    line-height: var(--link-icon-size);
 }
 .link-icon.notext .fallback {
-	display: inline-block;
+    display: inline-block;
 }
@@ Line 1,082: / Line 1,910: @@
 /********* [[Template:Quote]] *********/
 .quote {
-     background: var(--wiki-content-background-color--secondary);
+     background: var(--background-color-neutral-subtle);
      border-radius: 5px;
-     border: 2px solid var(--wiki-content-border-color);
+     border: 2px solid var(--content-border-color);
      margin: .5em 0;
      padding: .5em;
@@ Line 1,090: / Line 1,918: @@
 .quote .block {
-	display: block;
+    display: block;
 }
 .quote .title {
-	font-size: large;
+    font-size: large;
      font-weight: bold;
 }
 .quote .content {
-	font-style: italic;
+    font-style: italic;
 }
 .quote .author {
-	font-weight: bold;
+    font-weight: bold;
-	text-align: end;
+    text-align: end;
 }
 .quote .marks-wrapper {
-	display: flex;
+    display: flex;
-	gap: 5px;
+    gap: 5px;
 }
 .quote .marks-wrapper::before,
 .quote .marks-wrapper::after {
-	font-size: 100px;
+    font-size: 100px;
      line-height: 0px;
 }
 .quote .marks-wrapper::before {
-	content: "\201C";
+    content: "\201C";
-	margin-top: 40px;
+    margin-top: 40px;
 }
 .quote .marks-wrapper::after {
-	content: "\201D";
+    content: "\201D";
-	align-self: end;
+    align-self: end;
-	margin-bottom: -10px;
+    margin-bottom: -10px;
 }
@@ Line 1,132: / Line 1,960: @@
 * End Modular Templates *
 *************************/
+.button-expand-header {
+    margin-top: 0.5em;
+    width: 100%;
+    padding: 14px 18px;
+    padding-right: 60px;
+    background: var(--background-color-base);
+    color: var(--color-progressive);
+    border: 2px solid var(--color-progressive);
+    cursor: pointer;
+    font-family: 'Courier New', monospace;
+    font-size: 16px;
+    font-weight: 700;
+    position: relative;
+    transition: all 0.2s ease;
+    box-shadow: inset 0 0 0 2px #0f0f0f,
+                inset 0 0 20px #42a2f180;
+}
+.button-expand-header:hover {
+    background: var(--background-color-transparent);
+    box-shadow: inset 0 0 0 2px #0f0f0f,
+                inset 0 0 30px #4c57b580,
+0 10px #4c57b5a0;
+}
+.button-expand-header:active {
+    border-radius: 20px;
+    transition: 0.2s;
+}
+.button-expand-header::before {
+    content: '[ + ]';
+    position: absolute;
+    right: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.button-expand-header:has(+ .mw-collapsible:not(.mw-collapsed))::before {
+    content: '[ - ]';
+}
+.button-expand-header > span:not([typeof]) {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.2s;
+}
+@media screen and (max-width:720px) {
+    h2.mw-customtoggle > span:not([typeof])::after {
+        display: none;
+    }
+}
+a.tabber__tab {
+    margin-top: 0.7em;
+    font-size: 2em;
+    margin-left: 0.6em;
+    margin-bottom: 0.7em;
+}
+header.tabber__header {
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+}
+a.tabber__tab[aria-selected="true"]{
+    background: var(--background-color-transparent);
+    color: var(--color-progressive);
+    border: 2px solid var(--color-progressive);
+    box-shadow: inset 0 0 0 2px #0f0f0f,
+                inset 0 0 20px #42a2f180;
+}
+@media (hover: hover) {
+    .tabber__tab:hover {
+        box-shadow: inset 0 0 0 2px #0f0f0f,
+                inset 0 0 30px #4c57b580,
+0 10px #4c57b5a0;
+        background-color: var(--background-color-base);
+    }
+}
+.tabber__panel > div.mw-heading.mw-heading2 > h2 {
+    border-bottom: 1px solid var(--color-progressive) !important;
+    padding-bottom: 0.5em;
+    text-shadow: 0 0 20px black;
+}
+.tabber__panel > div > h2 > span {
+    text-shadow: 0 0 10px black;
+    color: var(--content-link-color);
+    margin-left: 0.1em;
+    padding: 0 0.5em 0;
+}
+header.tabber__header {
+    box-shadow: none;
+}
+.tabber__header__prev,
+.tabber__header__next {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.12) 100%),
+        rgba(26, 26, 34, 0.8);
+    border: 1px solid rgba(66, 162, 241, 0.5);
+    color: var(--color-base);
+    padding: 0.6em 1em;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow:
+        inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
+2px 10px rgba(66, 162, 241, 0.2);
+    border-radius: 4px;
+    position: relative;
+    backdrop-filter: blur(3px);
+}
+.tabber__header__prev::before,
+.tabber__header__next::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.6) 30%,
+        rgba(66, 162, 241, 0.9) 50%,
+        rgba(66, 162, 241, 0.6) 70%,
+        transparent);
+    box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
+}
+.tabber__header__prev:hover,
+.tabber__header__next:hover {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.25) 0%, rgba(76, 87, 181, 0.2) 100%),
+        rgba(26, 26, 34, 0.9);
+    border-color: rgba(66, 162, 241, 0.7);
+    box-shadow:
+        inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
+4px 15px rgba(66, 162, 241, 0.3),
+0 25px rgba(66, 162, 241, 0.2);
+    transform: scale(1.05);
+    text-shadow:
+0 10px rgba(66, 162, 241, 0.8),
+0 5px rgba(66, 162, 241, 0.5);
+}
+.tabber__header .tabber__header__prev::after, .tabber__header .tabber__header__next::after {
+    display: block;
+    width: inherit;
+    height: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1em;
+    filter: drop-shadow(0 0 4px rgba(66, 162, 241, 0.6));
+}
+@media screen and (max-width: 720px) {
+    .button-expand-header {
+        background-color: #8dbec280;
+        box-shadow: 0 0 40px var(--color-progressive);
+    }
+    .button-expand-header > span:after {
+        position: relative;
+        font-size: 1em;
+        opacity: 1;
+        left: 0;
+        bottom: 0;
+        text-align: inherit;
+    }
+}
+.button-expand-header > img {
+    padding: 0 1em 0;
+}
+.button-expand-header:hover > span:after{
+  opacity: 1;
+  font-size: 0.75em;
+}
+.class-box {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.06) 0%, transparent 50%, rgba(76, 87, 181, 0.06) 100%),
+        linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 0.98));
+    box-shadow:
+0 30px 5px rgba(0, 0, 0, 0.8),
+        inset 0 0 40px 5px rgba(66, 162, 241, 0.08),
+0 0 1px rgba(66, 162, 241, 0.25);
+    padding: 0 0.5em 0;
+    border-radius: 6px;
+    position: relative;
+    overflow: hidden;
+}
+.class-box::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.4) 30%,
+        rgba(66, 162, 241, 0.6) 50%,
+        rgba(66, 162, 241, 0.4) 70%,
+        transparent);
+}
+/* ===============================
+   MP elements
+   =============================== */
+.main-page-links {
+    font-weight: bold;
+    text-shadow: 0 0 6px #000000;
+    margin: 1em;
+}
+.mp-box pre {
+    font-family: var(--body-font-family);
+    color: var(--color-progressive);
+    border-radius:5px;
+    border-image-source: var(--border-image-base);
+    border-image-slice: 6;
+    border-image-width: 6px;
+    border-image-repeat: repeat repeat;
+    text-align: center;
+}
+/* ===============================
+   DRUID Boss Infoboxes
+   =============================== */
+/* UNHOLY */
+.druid-data-Unholy a, .druid-data-Unholy a:visited {
+    color: black;
+    text-shadow:
+0 5px white, 0 0 10px white, 0 0 15px white;
+}
+/* VOIDBOUND */
+.druid-data-Voidbound a, .druid-data-Voidbound a:visited {
+    color: #e48cff;
+    text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
+}
+/* BLOODSHOT */
+.druid-data-Bloodshot a, .druid-data-Bloodshot a:visited {
+    color: #d23c3c;
+    text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
+}
+/* ROYAL */
+.druid-data-Royal a, .druid-data-Royal a:visited {
+    color: #a86dff;
+    text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
+}
+/* GILDED */
+.druid-data-Gilded a, .druid-data-Gilded a:visited {
+    color: #ffb84d;
+    text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
+}
+/* IRRADIATED */
+.druid-data-Irradiated a, .druid-data-Irradiated a:visited {
+    color: #4dff4d;
+    text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600;
+}
+/* COMPANION */
+.druid-data-Companion a, .druid-data-Companion a:visited {
+    color: #ffd700;
+    text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
+}
+/* RUNES */
+.druid-data-Rune a, .druid-data-Rune a:visited {
+    color: #bfbfbf;
+    text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
+}
+.druid-row[data-druid-section-row="Loot"] div {
+    padding-top: 0.75em;
+    padding-bottom: 0.5em;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    display: block;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+    width: 100%;
+}
+div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
+    border-top: none;
+}
+.druid-data .image {
+    margin-left: 0%;
+}
+.loot-category-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 0.5em 0.75em;
+    margin: 0.75em 0 0.3em 0;
+    background:
+        linear-gradient(90deg, rgba(66, 162, 241, 0.12) 0%, transparent 100%),
+        rgba(26, 26, 34, 0.4);
+    border-left: 2px solid rgba(66, 162, 241, 0.5);
+    border-radius: 3px;
+    box-shadow:
+        inset 0 0 15px 2px rgba(66, 162, 241, 0.05),
+1px 4px rgba(0, 0, 0, 0.4);
+}
+.loot-category-title {
+    font-weight: 600;
+    font-size: 0.95em;
+    color: var(--color-base);
+    text-shadow:
+0 6px rgba(66, 162, 241, 0.4),
+1px 2px rgba(0, 0, 0, 0.8);
+    letter-spacing: 0.02em;
+}
+.loot-item-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.3em 0.75em;
+    margin: 0.15em 0;
+    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.02) 50%, transparent);
+    border-radius: 2px;
+    transition: all 0.2s ease;
+}
+.loot-item-row:hover {
+    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.06) 50%, transparent);
+    padding-left: 1em;
+}
+.boss-percent {
+    color: var(--content-border-color);
+    text-shadow:
+0 8px rgba(66, 162, 241, 0.5),
+0 4px rgba(66, 162, 241, 0.3),
+2px 4px rgba(0, 0, 0, 0.8);
+    font-weight: bold;
+    font-size: 1.05em;
+}
+.loot-data-infobox {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+.item-infobox div[data-druid-section] > .druid-section {
+    font-weight: bolder;
+    text-shadow: 0px 2px black;
+}
+.druid-infobox .druid-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--content-border-color);
+    font-family: "Daedalus", sans-serif;
+    line-height: 1em;
+    font-weight: 1000;
+    font-size: 3em;
+    min-height: 2.2em;
+    flex-wrap: wrap;
+    text-shadow: 0 0 20px black;
+}
+.boss-infobox-subtitle {
+    font-weight: 500;
+    font-size: 0.75em;
+    display: inline-block;
+    white-space: normal;
+    word-break: break-word;
+    width: 100%;
+    position: relative;
+    color: rgba(255, 255, 255, 0.95);
+    text-shadow:
+0 10px rgba(66, 162, 241, 0.6),
+0 5px rgba(66, 162, 241, 0.4),
+2px 4px rgba(0, 0, 0, 0.8);
+    animation: subtitle-pulse 4s ease-in-out infinite;
+    background: linear-gradient(90deg,
+        rgba(66, 162, 241, 0.05) 0%,
+        rgba(66, 162, 241, 0.08) 50%,
+        rgba(66, 162, 241, 0.05) 100%);
+    background-size: 200% 100%;
+    animation: subtitle-scan 6s linear infinite, subtitle-pulse 4s ease-in-out infinite;
+    padding: 0.3em 0.5em;
+    border-radius: 2px;
+    letter-spacing: 0.03em;
+}
+.boss-infobox-subtitle::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 60%;
+    background: linear-gradient(180deg,
+        transparent,
+        rgba(66, 162, 241, 0.8) 50%,
+        transparent);
+    box-shadow: 0 0 6px rgba(66, 162, 241, 0.8);
+    animation: subtitle-indicator 2s ease-in-out infinite;
+}
+@keyframes subtitle-pulse {
+%, 100% {
+        text-shadow:
+0 10px rgba(66, 162, 241, 0.6),
+0 5px rgba(66, 162, 241, 0.4),
+2px 4px rgba(0, 0, 0, 0.8);
+    }
+% {
+        text-shadow:
+0 15px rgba(66, 162, 241, 0.9),
+0 8px rgba(66, 162, 241, 0.6),
+0 4px rgba(255, 255, 255, 0.4),
+2px 4px rgba(0, 0, 0, 0.8);
+    }
+}
+@keyframes subtitle-scan {
+% {
+        background-position: 0% 0%;
+    }
+% {
+        background-position: 200% 0%;
+    }
+}
+@keyframes subtitle-indicator {
+%, 100% {
+        opacity: 0.4;
+        box-shadow: 0 0 6px rgba(66, 162, 241, 0.6);
+    }
+% {
+        opacity: 1;
+        box-shadow: 0 0 10px rgba(66, 162, 241, 1);
+    }
+}
+/* ===============================
+   Dungeon Page CSS
+   =============================== */
+.dungeon-page-box {
+    background-color: transparent;
+    box-shadow: none;
+    transition: 0.5s;
+    padding: 1em;
+    position: relative;
+    padding: 0 1em;
+    border-radius: 0px;
+}
+.dungeon-page-smaller-box li {
+    display: inline-block;
+    width: 18%;
+    margin: 0 1% 1% 0;
+    vertical-align: top;
+    text-align: center;
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 60%),
+        linear-gradient(to bottom, rgba(26, 26, 34, 0.9), rgba(26, 26, 34, 0.95));
+    border-radius: 4px;
+    border: 1px solid rgba(66, 162, 241, 0.2);
+    box-shadow:
+        inset 0 0 20px 3px rgba(66, 162, 241, 0.05),
+2px 10px rgba(0, 0, 0, 0.5);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.dungeon-page-smaller-box li::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4), transparent);
+}
+.dungeon-page-smaller-box a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 0.5em;
+}
+.dungeon-page-smaller-box li:hover,
+.mp-links.dungeon-page-smaller-box > ul > li:hover {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 60%),
+        linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 1));
+    border-color: rgba(66, 162, 241, 0.4);
+    box-shadow:
+        inset 0 0 25px 5px rgba(66, 162, 241, 0.1),
+4px 15px rgba(66, 162, 241, 0.3),
+0 20px rgba(66, 162, 241, 0.2);
+    transform: translateY(-2px);
+}
+.pre-dungeon {
+    max-width: 100%;
+    width: -moz-fit-content;
+    width: -webkit-fit-content;
+    width: fit-content;
+    display: block;
+}
+.dungeon-enemies {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+    justify-content: center;
+}
+.dungeon-enemies .druid-container {
+    margin: 2%;
+}
+.tipstricks {
+    display: flex;
+    max-width: 100%;
+}
+.pre-dungeon p {
+     margin: 1em 0;
+     padding: 0.9em 1.2em 0.9em 1.5em;
+     border-radius: 3px 12px 8px 3px;
+    box-shadow:
+         -2px 0 0 0 rgba(66, 162, 241, 0.4),
+4px 15px rgba(0, 0, 0, 0.6),
+         inset 0 0 20px rgba(66, 162, 241, 0.03);
+     display: block;
+     width: auto;
+    background:
+         linear-gradient(90deg,
+             rgba(66, 162, 241, 0.06) 0%,
+             rgba(26, 26, 34, 0.8) 15%,
+             rgba(26, 26, 34, 0.6) 85%,
+             transparent 100%);
+     border-left: 2px solid rgba(66, 162, 241, 0.5);
+     color: var(--color-base);
+     line-height: 1.6;
+     position: relative;
+     backdrop-filter: blur(2px);
+}
+.pre-dungeon p::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: linear-gradient(180deg,
+        rgba(66, 162, 241, 0.8) 0%,
+        rgba(66, 162, 241, 0.3) 50%,
+        rgba(66, 162, 241, 0.8) 100%);
+    opacity: 0.6;
+}
+.dlog {
+    margin-bottom: 2%;
+    background:
+        linear-gradient(to right, rgba(31, 35, 77, 0.95) 0%, rgba(31, 35, 77, 0.9) 70%, rgba(31, 35, 77, 0) 100%),
+        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%);
+    padding: 0.75em;
+    border: 3px solid;
+    border-image: linear-gradient(to right,
+        rgba(66, 162, 241, 0.8) 0%,
+        rgba(71, 75, 117, 1) 30%,
+        rgba(71, 75, 117, 0.8) 70%,
+        rgba(71, 75, 117, 0) 100%) 1 stretch;
+    border-right: none;
+    border-top: none;
+    border-bottom: none;
+    min-width: 20%;
+    max-width: 70%;
+    width: fit-content;
+    text-wrap: balance;
+    font-size: 2em;
+    position: relative;
+    box-shadow:
+        -3px 0 15px rgba(66, 162, 241, 0.3),
+        inset 2px 0 20px rgba(66, 162, 241, 0.1),
+4px 12px rgba(0, 0, 0, 0.5);
+    border-radius: 0 4px 4px 0;
+    backdrop-filter: blur(3px);
+}
+.dlog::before {
+    content: url("/wiki/Special:Redirect/file/DNexus.png") " " url("/wiki/Special:Redirect/file/Dlog-text.png");
+    display: inline-block;
+    background:
+        linear-gradient(to right,
+            rgba(66, 162, 241, 0.25) 0%,
+            rgba(66, 162, 241, 0.15) 50%,
+            transparent 100%),
+        linear-gradient(135deg, rgba(76, 87, 181, 0.2), transparent 60%);
+    padding: 0.5em 0.8em;
+    border-radius: 3px 0 0 3px;
+    margin-right: 12px;
+    box-shadow:
+        inset -2px 0 10px rgba(66, 162, 241, 0.3),
+px 0 8px rgba(66, 162, 241, 0.2);
+    border-right: 1px solid rgba(66, 162, 241, 0.4);
+    position: relative;
+}
+.dlog::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(180deg,
+        rgba(66, 162, 241, 0.8) 0%,
+        rgba(66, 162, 241, 1) 50%,
+        rgba(66, 162, 241, 0.8) 100%);
+    box-shadow:
+0 8px rgba(66, 162, 241, 0.8),
+0 15px rgba(66, 162, 241, 0.5);
+    animation: dlog-pulse 3s ease-in-out infinite;
+}
+@keyframes dlog-pulse {
+%, 100% {
+        opacity: 0.7;
+        box-shadow:
+0 8px rgba(66, 162, 241, 0.8),
+0 15px rgba(66, 162, 241, 0.5);
+    }
+% {
+        opacity: 1;
+        box-shadow:
+0 12px rgba(66, 162, 241, 1),
+0 20px rgba(66, 162, 241, 0.7);
+    }
+}
+.dlog p {
+    position: relative;
+    color: #f1f1f1;
+    font-family: "Daedalus", Sans-Serif;
+    font-size: 1em;
+    line-height: 1.3;
+    text-shadow:
+0 8px rgba(66, 162, 241, 0.8),
+0 4px rgba(66, 162, 241, 0.6),
+2px 4px rgba(0, 0, 0, 0.9);
+    word-wrap: break-word;
+    padding: 0.8em;
+    padding-top: 0.5em;
+    background: linear-gradient(90deg, rgba(66, 162, 241, 0.03), transparent 80%);
+    border-radius: 2px;
+}
+@media only screen and (max-width: 768px) {
+  .daedalus-log {
+    display: none;
+  }
+}
+/* ===============================
+   Skill Tree
+   =============================== */
+   /**
+ * ==============================
+ * Tooltips Gadget (Base Styles)
+ * ==============================
+ */
+.main-tooltip {
+    border-radius:5px;
+    border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
+    border-image-slice: 6;
+    border-image-width: 6px;
+    border-image-repeat: repeat repeat;
+    box-shadow: 0 0 10px black;
+    margin-bottom: 5px;
+    padding: 1em 1em;
+    background-color: #312b38;
+}
+#tooltip-wrapper {
+    padding: 0.3em;
+}
+.has-redlinks,
+.tooltip-loading,
+.advanced-tooltip .tooltip-contents {
+    display: none;
+}
+.tooltips-init-complete {
+    cursor: help;
+}
+.main-tooltip img {
+    vertical-align: middle;
+}
+.advanced-tooltip img {
+    box-shadow: 0 0 10px #000000;
+}
+.advanced-tooltip .imhoveringit {
+    position: relative;
+    display: inline-block;
+}
+.advanced-tooltip .tooltip-base-image,
+.advanced-tooltip .tooltip-hover-image {
+    transition: opacity 0.2s ease;
+}
+.advanced-tooltip .tooltip-hover-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+}
+.advanced-tooltip .tooltip-base-image {
+    opacity: 1;
+}
+.advanced-tooltip:hover .tooltip-base-image {
+    opacity: 0;
+}
+.advanced-tooltip:hover .tooltip-hover-image {
+    opacity: 1;
+    pointer-events: auto;
+}
+.tabber__panel {
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+.tabber__panel::-webkit-scrollbar {
+    display: none;
+}
+/**
+ * ==============================
+ * Skill Tree Layout
+ * ==============================
+ */
+.skill-tree {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 15px; /* vertical spacing between rows */
+}
+/* Rows */
+.skill-tree .row {
+    display: flex;
+    justify-content: center;
+}
+.skill-tree .row-1 { gap: 0; }
+.skill-tree .row-2 { gap: 40px; }
+.skill-tree .row-3 { gap: 20px; }
+.skill-tree .wide-gap { gap: 80px; } /* For Trap tree rows */
+/* Nodes */
+.node {
+    display: inline-block;
+    width: 80px; /* keeps nodes aligned */
+    text-align: center;
+}
+/* Node Title Style */
+.skill-title {
+  font-weight: bold;
+  color: #fca801;
+  text-shadow: 2px 2px 8px black;
+  border-bottom: 1px solid #fca801;
+  padding-bottom: 0.5em;
+}
+.main-tooltip p {
+    color: #54fc55;
+}
+.main-tooltip span {
+    color: #54fcfc;
+    text-shadow: 0 0 2px #54fcfc;
+}
+/* item pages */
+.display-items {
+    display: flex;
+    flex-wrap: wrap;
+}
+a.tabber__tab {
+    font-size: 2em;
+    text-shadow: 1px 1px 12px black;
+}
+.druid-main-images-label {
+    font-size: 1.2em;
+}
+.druid-main-images-label.focused {
+    box-shadow: 0 0 20px var(--druid-link-color);
+}
+.hoverbox:hover {
+    background-color: #1a1a22E0;
+    box-shadow: 0 0 30px 30px var(--background-color-base);
+    border-radius: 0 0 15px 15px;
+    border-top: 0.1em solid var(--color-progressive--hover);
+    transition: 0.4s;
+}
+.hoverbox {
+    background-color: transparent;
+    box-shadow: none;
+    transition: 0.5s;
+    padding: 0 1em 1em;
+    margin: 1em 0 1em -0.5em;
+    position: relative;
+    z-index: 0;
+    border-top: 0.1em solid var(--color-progressive);
+    display: flow-root;
+}
+.hoverbox > div > h3 > a {
+    border-bottom: 2px solid currentColor;
+    background: no-repeat cover;
+}
+.hoverbox > div {
+    overflow: visible;
+}
+.dungeon-clear {
+    max-width: 100%;
+    overflow: visible;
+}
+.lore {
+    max-width: 100%;
+    overflow: visible;
+}
+.mp-main {
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    aspect-ratio: 16 / 9;
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+.class-rarities {
+    display:flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+}
+.class-rarities > div {
+    margin: 1em 0 1em;
+    padding: 1em 1.5em;
+    border-radius: 8px;
+    position: relative;
+    background:
+        linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
+        linear-gradient(to right, transparent, rgba(255, 255, 255, 0.03), transparent);
+    backdrop-filter: blur(2px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.class-rarities > div::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
+    opacity: 0.3;
+    filter: blur(1px);
+}
+.class-rarities > div > p > img {
+    margin: 0 2em 0 0;
+    border-radius: 100px;
+    background: #1a1a2280;
+    box-shadow: 0 0 10px black;
+}
+.class-rarities > div > p > span > img {
+    text-shadow: 0 0 10px black;
+}
+.class-rarities > div > p > a {
+    text-shadow: 0 0 10px black;
+}
+.class-irradiated {
+    box-shadow: 0 0 20px #4dff4d;
+    background-color: #4dff4d80;
+}
+.class-gilded {
+    box-shadow: 0 0 20px #ffb84d;
+    background-color: #ffb84d80;
+}
+.class-royal{
+   box-shadow: 0 0 20px #a86dff;
+   background-color: #a86dff80;
+}
+.class-bloodshot {
+    box-shadow: 0 0 20px #d23c3c;
+    background-color: #d23c3c80;
+}
+.class-voidbound{
+    box-shadow: 0 0 20px #e48cff;
+    background-color: #e48cff80;
+}
+.class-unholy {
+    box-shadow: 0 0 20px black;
+    background-color: #00000080;
+}
+div.class-rarities > div > p > a {
+    font-weight: bold;
+}
+/* TABLES */
+.wikitable td,
+.wikitable th {
+  border: none !important;
+}
+.wikitable {
+    margin: 0;
+}
+td > div.mw-collapsible > button {
+    margin: 1.5em;
+    padding: 1.2em;
+    background-color: #8dbec280;
+    box-shadow: 0 0 20px #8dbec2FF;
+    border-radius: 30px;
+}
+.wikitable td,
+.wikitable th {
+    font-size: 1.1em;
+}
+td > div.mw-collapsible > button > span.mw-collapsible-text {
+    text-shadow: 0 0 4px black;
+}
+td > div.mw-collapsible > button > span.mw-collapsible-text:hover {
+    text-decoration: none;
+}
+td > div.mw-collapsible > button.mw-collapsible-toggle-default::after {
+    content: '';
+}
+td > div.mw-collapsible > button.mw-collapsible-toggle-default::before {
+    content: '';
+}
+/* Inline Image Template */
+.inline-image-image {
+    position: relative;
+    display: inline-block;
+}
+.inline-image-image > p > span > span > img {
+    box-shadow:
+0 30px 5px rgba(66, 162, 241, 0.3),
+4px 20px rgba(0, 0, 0, 0.8),
+        inset 0 0 40px 5px rgba(66, 162, 241, 0.05);
+    border-radius: 8px;
+    border: 2px solid rgba(66, 162, 241, 0.5);
+    background: linear-gradient(135deg, rgba(66, 162, 241, 0.02), transparent 50%);
+    padding: 4px;
+    transition: all 0.3s ease;
+}
+.inline-image-image > p > span > span > img:hover {
+    box-shadow:
+0 40px 8px rgba(66, 162, 241, 0.5),
+6px 25px rgba(0, 0, 0, 0.9),
+        inset 0 0 50px 8px rgba(66, 162, 241, 0.08);
+    border-color: rgba(66, 162, 241, 0.7);
+    transform: translateY(-2px);
+}
+.inline-image-caption {
+    margin-top: 0.5em;
+    position: relative;
+}
+.inline-image-caption > p {
+    background:
+        linear-gradient(90deg,
+            rgba(66, 162, 241, 0.12) 0%,
+            rgba(26, 26, 34, 0.8) 15%,
+            rgba(26, 26, 34, 0.6) 85%,
+            transparent 100%);
+    border-left: 3px solid rgba(66, 162, 241, 0.6);
+    border-radius: 3px;
+    padding: 0.6em 1em;
+    margin: 0;
+    box-shadow:
+        inset 0 0 20px 2px rgba(66, 162, 241, 0.05),
+2px 8px rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(2px);
+}
+.inline-image-caption > p > span {
+    font-weight: 600;
+    font-size: 0.95em;
+    color: var(--color-base);
+    text-shadow:
+0 8px rgba(66, 162, 241, 0.6),
+2px 4px rgba(0, 0, 0, 0.8);
+    letter-spacing: 0.02em;
+}
+.inline-image-caption > p > span::before {
+    content: '❖ ';
+    color: rgba(66, 162, 241, 0.8);
+    text-shadow:
+0 10px rgba(66, 162, 241, 0.9),
+0 5px rgba(66, 162, 241, 0.6);
+    margin-right: 0.3em;
+}
+.inline-image-caption > p::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: linear-gradient(180deg,
+        rgba(66, 162, 241, 0.8) 0%,
+        rgba(66, 162, 241, 0.4) 50%,
+        rgba(66, 162, 241, 0.8) 100%);
+    opacity: 0.7;
+}
+/* dynamic gif display css ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */
+.dynamic-gif-container {
+    padding-top: 8em;
+    width: fit-content;
+    max-width: 100%;
+    margin-right: 1em;
+    margin-bottom: 1em;
+    margin-left: 1em;
+    z-index: 100;
+    transition: all 0.3s ease;
+    display: block !important;
+    visibility: visible !important;
+    clear: both;
+}
+/* Override for flexbox container */
+.gif-tabber-display-container .dynamic-gif-container {
+    padding-top: 0;
+    margin: 0;
+    clear: none;
+}
+.dynamic-gif-container.expanded .gif-display-area {
+    max-height: none;
+    height: auto;
+    opacity: 1;
+    padding: 15px;
+    overflow: visible;
+}
+.gif-display-area {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
+        radial-gradient(ellipse at center, rgba(66, 162, 241, 0.12), transparent 60%),
+        rgba(26, 26, 34, 0.95);
+    border-radius: 6px;
+    overflow: visible;
+    height: auto;
+    min-height: auto;
+    opacity: 1;
+    padding: 12px;
+    transition: all 0.3s ease;
+    box-shadow:
+0 30px 5px rgba(66, 162, 241, 0.2),
+        inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
+4px 20px rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(66, 162, 241, 0.4);
+    display: block !important;
+    visibility: visible !important;
+    position: relative;
+    backdrop-filter: blur(4px);
+    width: fit-content;
+}
+.gif-display-area::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.6) 20%,
+        rgba(66, 162, 241, 0.9) 50%,
+        rgba(66, 162, 241, 0.6) 80%,
+        transparent);
+    box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
+}
+.gif-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--color-progressive);
+}
+.gif-title {
+    font-size: 2em;
+    font-weight: bold;
+    font-family: var(--heading-font-family);
+    color: var(--color-progressive);
+    margin: 0;
+}
+.gif-toggle-btn {
+    background: none;
+    border: 1px solid #4a4a4a;
+    color: #e0e0e0;
+    padding: 4px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    transition: all 0.2s ease;
+}
+.gif-toggle-btn:hover {
+    background: #2a2a2a;
+    border-color: #5a5a5a;
+}
+.gif-image-container {
+    width: 100%;
+    height: 400px;
+    min-height: 400px;
+    max-height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--background-color-base);
+    border-radius: 4px;
+    position: relative;
+    margin-bottom: 10px;
+    overflow: hidden;
+}
+.gif-image-container img {
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    width: auto;
+    display: block;
+    border-radius: 4px;
+    object-fit: contain;
+}
+.gif-image-container.loading::after {
+    content: '';
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border: 4px solid var(--color-progressive--hover);
+    border-top-color: #e0e0e0;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+.gif-error {
+    color: var(--color-destructive);
+    font-size: 1em;
+    text-align: center;
+    padding: 20px;
+}
+.gif-caption {
+    text-align: center;
+    color: var(--color-base);
+    font-size: 1em;
+    font-style: italic;
+    padding: 5px;
+    background: var(--color-progressive--hover);
+    border-radius: 4px;
+    text-shadow: 0 0 5px var(--content-border-color);
+    display: none;
+}
+.gif-placeholder {
+    color: var(--color-progressive--hover);
+    font-size: 1em;
+    text-align: center;
+    padding: 60px 20px;
+    height: 500px;
+}
+@media (max-width: 768px) {
+    .dynamic-gif-container {
+        position: relative;
+        float: none;
+        width: 100%;
+        margin: 0 0 20px 0;
+    }
+    .dynamic-gif-container.expanded .gif-display-area {
+        max-height: none;
+    }
+}
+.skill-tree-section::after {
+    content: "";
+    display: table;
+    clear: both;
+}
+.tabber .tabbertab {
+    clear: both;
+    overflow: auto;
+}
+.gif-tabber-display-container {
+    display: flex;
+    flex-direction: row;
+    gap: 1.5em;
+    align-items: flex-start;
+}
+.gif-tabber-display-container > div:first-child {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.gif-tabber-display-container > .dynamic-gif-container {
+    flex: 0 0 auto;
+    position: sticky;
+    top: 1em;
+    align-self: flex-start;
+    padding-top: 0;
+    margin: 0;
+    min-width: 500px;
+    max-width: 600px;
+}
+@media screen and (max-width: 1200px) {
+    .gif-tabber-display-container {
+        flex-direction: column;
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+    }
+    .gif-tabber-display-container > .dynamic-gif-container {
+        position: static;
+        width: 100%;
+        max-width: 100%;
+        min-width: 0;
+        order: 2; /* Move gif display below tabber */
+        margin-top: 1em;
+    }
+    .gif-tabber-display-container > div:first-child {
+        order: 1; /* Keep tabber on top */
+        width: 100%;
+        max-width: 100%;
+        min-width: 0;
+        overflow-x: auto;
+    }
+    /* Ensure tabber content doesn't overflow */
+    .gif-tabber-display-container #List\ of\ Skill\ Trees,
+    .gif-tabber-display-container .tabber,
+    .gif-tabber-display-container .tabbertab {
+        max-width: 100%;
+        overflow-x: auto;
+        box-sizing: border-box;
+    }
+    /* Hide gif display by default on mobile, show when expanded */
+    .gif-tabber-display-container > .dynamic-gif-container:not(.expanded) {
+        display: none;
+    }
+    /* When expanded on mobile, make it compact */
+    .gif-tabber-display-container > .dynamic-gif-container.expanded {
+        display: block;
+    }
+    .gif-tabber-display-container > .dynamic-gif-container .gif-display-area {
+        max-width: 100%;
+    }
+}
+.decor-page {
+    border-image: url(/wiki/Special:Redirect/file/Wiki-border-book.png);
+    border-image-slice: 65 122 65 122;
+    border-image-width: 100% 100% 100% 100%;
+    border-image-repeat: stretch stretch;
+    border-image-outset: 0;
+    border-style: solid;
+    color: var(--background-color-base);
+    width: 492px;
+    height: 262px;
+}
+.decor-page > p{
+    padding: 3.5em;
+    font-family: var(--heading-font-family);
+}
+.swap-silverling {
+  position: relative;
+  display: inline-block;
+  width: 7em;
+  text-align: left;
+  text-shadow: 0 0 10px currentColor;
+  font-weight: bold;
+}
+.swap-silverling::before,
+.swap-silverling::after {
+  position: absolute;
+  left: 0;
+  bottom: -0.45em;
+  width: 140%;
+  text-align: inherit;
+  animation: fadeSwap 5s infinite ease-in-out;
+}
+.swap-silverling::before {
+  content: "Silverlings.";
+  opacity: 1;
+}
+.swap-silverling::after {
+  content: "Players.";
+  opacity: 0;
+  animation-delay: 2.5s;
+}
+@keyframes fadeSwap {
+%, 40%   { opacity: 1; }
+%, 90%  { opacity: 0; }
+%      { opacity: 1; }
+}
+.main-welcome {
+    text-shadow: 0 0 2px black;
+    font-weight: bold;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 0.5em;
+    padding: 14px 18px;
+    padding-right: 60px;
+    background: var(--background-color-base);
+    color: var(--color-progressive);
+    border: 2px solid var(--color-progressive);
+    font-family: var(--body-font-family);
+    font-size: 16px;
+    font-weight: 700;
+    transition: all 0.2s ease;
+    box-shadow: inset 0 0 0 2px #0f0f0f,
+                inset 0 0 20px #42a2f180;
+    padding: 1em;
+}
+.welcome-text {
+  flex: 2;
+  min-width: 300px;
+  border-left: 2px solid var(--color-progressive);
+  padding: 1em;
+  font-size: 2em;
+}
+div.main-welcome > .mp-links {
+  flex: 1;
+  min-width: 250px;
+  margin: 1em;
+}
+div.main-welcome > .mp-links > ul > li {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
+        linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15));
+    box-shadow:
+        inset 0 0 20px 4px rgba(66, 162, 241, 0.12),
+4px 15px rgba(66, 162, 241, 0.2),
+0 30px rgba(66, 162, 241, 0.15);
+    border: 1px solid rgba(66, 162, 241, 0.4);
+    border-radius: 4px;
+    padding: 1em 0.8em;
+    position: relative;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(2px);
+}
+div.main-welcome > .mp-links > ul > li::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.6) 30%,
+        rgba(66, 162, 241, 0.9) 50%,
+        rgba(66, 162, 241, 0.6) 70%,
+        transparent);
+    box-shadow: 0 0 8px rgba(66, 162, 241, 0.8);
+}
+div.main-welcome > .mp-links > ul > li::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.4) 30%,
+        rgba(66, 162, 241, 0.6) 50%,
+        rgba(66, 162, 241, 0.4) 70%,
+        transparent);
+}
+div.main-welcome > .mp-links > ul > li:hover {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 50%, rgba(76, 87, 181, 0.15) 100%),
+        linear-gradient(to bottom, rgba(66, 162, 241, 0.25), rgba(76, 87, 181, 0.3), rgba(66, 162, 241, 0.25));
+    box-shadow:
+        inset 0 0 30px 6px rgba(66, 162, 241, 0.2),
+6px 20px rgba(66, 162, 241, 0.3),
+0 40px rgba(66, 162, 241, 0.25);
+    border-color: rgba(66, 162, 241, 0.6);
+    transform: translateY(-2px);
+}
+div.main-welcome > .mp-links > ul > li > a {
+    color: var(--color-base);
+    text-shadow:
+0 8px rgba(66, 162, 241, 0.6),
+2px 4px rgba(0, 0, 0, 0.8);
+    transition: all 0.2s ease;
+}
+div.main-welcome > .mp-links > ul > li:hover > a {
+    text-shadow:
+0 12px rgba(66, 162, 241, 0.9),
+0 6px rgba(66, 162, 241, 0.6),
+2px 4px rgba(0, 0, 0, 0.8);
+}
+.mw-collapsible {
+    padding-top: 2em;
+    display: flow-root;
+}
+.tab-gif-container {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
+        radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.12), transparent 60%),
+        rgba(26, 26, 34, 0.95);
+    border: 1px solid rgba(66, 162, 241, 0.4);
+    border-radius: 6px;
+    padding: 12px;
+    margin: 1em 0;
+    box-shadow:
+0 30px 5px rgba(66, 162, 241, 0.2),
+        inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
+4px 20px rgba(0, 0, 0, 0.6);
+    display: inline-block;
+    width: fit-content;
+    max-width: 100%;
+    position: relative;
+    backdrop-filter: blur(4px);
+}
+.tab-gif-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.6) 20%,
+        rgba(66, 162, 241, 0.9) 50%,
+        rgba(66, 162, 241, 0.6) 80%,
+        transparent);
+    box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
+}
+.tab-gif-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    font-size: 2em;
+    border-bottom: 1px solid var(--color-progressive);
+}
+.tab-gif-title {
+    font-size: 1.5em;
+    font-weight: bold;
+    font-family: var(--heading-font-family);
+    color: var(--color-progressive);
+    margin: 0;
+}
+.tab-gif-toggle-btn {
+    background: none;
+    border: 1px solid #4a4a4a;
+    color: #e0e0e0;
+    padding: 4px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: all 0.2s ease;
+}
+.tab-gif-toggle-btn:hover {
+    background: #2a2a2a;
+    border-color: #5a5a5a;
+}
+.tab-gif-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--color-progressive);
+}
+.tab-gif-tab {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 60%),
+        rgba(26, 26, 34, 0.6);
+    color: var(--color-base);
+    border: 1px solid rgba(66, 162, 241, 0.4);
+    font-family: var(--body-font-family);
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: bold;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    text-shadow:
+0 6px rgba(66, 162, 241, 0.5),
+2px 4px rgba(0, 0, 0, 0.8);
+    box-shadow:
+        inset 0 0 15px 2px rgba(66, 162, 241, 0.08),
+2px 8px rgba(0, 0, 0, 0.4);
+    position: relative;
+}
+.tab-gif-tab::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(66, 162, 241, 0.5) 30%,
+        rgba(66, 162, 241, 0.7) 50%,
+        rgba(66, 162, 241, 0.5) 70%,
+        transparent);
+}
+.tab-gif-tab:hover {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.15), transparent 60%),
+        rgba(26, 26, 34, 0.8);
+    color: #ffffff;
+    border-color: rgba(66, 162, 241, 0.6);
+    box-shadow:
+        inset 0 0 20px 3px rgba(66, 162, 241, 0.15),
+4px 12px rgba(66, 162, 241, 0.3),
+0 20px rgba(66, 162, 241, 0.2);
+    text-shadow:
+0 10px rgba(66, 162, 241, 0.8),
+0 5px rgba(66, 162, 241, 0.6),
+2px 4px rgba(0, 0, 0, 0.8);
+}
+.tab-gif-tab.tab-gif-active {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.3) 0%, rgba(76, 87, 181, 0.25) 100%),
+        rgba(66, 162, 241, 0.2);
+    color: #ffffff;
+    border-color: rgba(66, 162, 241, 0.8);
+    font-weight: bold;
+    box-shadow:
+        inset 0 0 25px 5px rgba(66, 162, 241, 0.2),
+4px 15px rgba(66, 162, 241, 0.4),
+0 30px rgba(66, 162, 241, 0.3);
+    text-shadow:
+0 12px rgba(66, 162, 241, 1),
+0 8px rgba(66, 162, 241, 0.8),
+2px 4px rgba(0, 0, 0, 0.8);
+}
+.tab-gif-display-area {
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 50%),
+        rgba(26, 26, 34, 0.4);
+    border-radius: 4px;
+    padding: 8px;
+    min-height: auto;
+    box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.08);
+    border: 1px solid rgba(66, 162, 241, 0.15);
+}
+.tab-gif-display-area .gif-image-container {
+    width: fit-content;
+    min-height: auto;
+    max-height: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background:
+        linear-gradient(135deg, rgba(66, 162, 241, 0.05), transparent 60%),
+        rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+    position: relative;
+    margin-bottom: 8px;
+    overflow: hidden;
+    box-shadow:
+0 20px 3px rgba(66, 162, 241, 0.15),
+        inset 0 0 15px 2px rgba(66, 162, 241, 0.05);
+    border: 1px solid rgba(66, 162, 241, 0.3);
+    padding: 4px;
+}
+.tab-gif-display-area .gif-image-container img {
+    max-width: 100%;
+    height: auto;
+    width: auto;
+    display: block;
+    border-radius: 2px;
+    object-fit: contain;
+    transition: opacity 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+.tab-gif-display-area .gif-image-container.loading::after {
+    content: '';
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border: 4px solid var(--color-progressive--hover);
+    border-top-color: #e0e0e0;
+    border-radius: 50%;
+    animation: tab-gif-spin 1s linear infinite;
+}
+@keyframes tab-gif-spin {
+    to { transform: rotate(360deg); }
+}
+.tab-gif-display-area .gif-placeholder {
+    color: var(--color-progressive--hover);
+    font-size: 1em;
+    text-align: center;
+    padding: 60px 20px;
+    font-style: italic;
+}
+.tab-gif-display-area .gif-error {
+    color: var(--color-destructive);
+    font-size: 1em;
+    text-align: center;
+    padding: 20px;
+    background: rgba(255, 107, 107, 0.1);
+    border-radius: 4px;
+}
+.tab-gif-display-area .gif-caption {
+    text-align: center;
+    color: var(--color-base);
+    font-size: 1em;
+    font-style: italic;
+    padding: 6px 10px;
+    background:
+        linear-gradient(90deg,
+            rgba(66, 162, 241, 0.2) 0%,
+            rgba(66, 162, 241, 0.3) 50%,
+            rgba(66, 162, 241, 0.2) 100%),
+        rgba(26, 26, 34, 0.6);
+    border-radius: 3px;
+    text-shadow:
+0 8px rgba(66, 162, 241, 0.8),
+0 4px rgba(66, 162, 241, 0.6),
+2px 4px rgba(0, 0, 0, 0.9);
+    margin-top: 6px;
+    border: 1px solid rgba(66, 162, 241, 0.4);
+    box-shadow:
+        inset 0 0 15px 2px rgba(66, 162, 241, 0.1),
+2px 8px rgba(0, 0, 0, 0.4);
+}
+@media (max-width: 768px) {
+    .tab-gif-container {
+        display: block;
+        width: 100%;
+        min-width: auto;
+        margin: 1em 0;
+    }
+    .tab-gif-tabs {
+        flex-direction: column;
+    }
+    .tab-gif-tab {
+        width: 100%;
+        text-align: center;
+    }
+    .tab-gif-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+    .tab-gif-toggle-btn {
+        width: 100%;
+    }
+}
+.tab-gif-container.full-width {
+    display: block;
+    width: 100%;
+}
+.tab-gif-container.float-left {
+    float: left;
+    margin-right: 1em;
+}
+.tab-gif-container.float-right {
+    float: right;
+    margin-left: 1em;
+}
+/* ============================================================
+    MOBILE ADJUSTMENTS
+   ============================================================ */
+@media screen and (max-width: 720px) {
+    /* 1. BOX  FIX */
+    *, *::before, *::after {
+        box-sizing: border-box !important;
+    }
+    .mp-main {
+        aspect-ratio: auto !important;
+        height: auto !important;
+        background-size: cover !important;
+    }
+    /* 2. HEIGHT & OVERFLOW */
+    .mp-box, .mp-body, .main-welcome, .mp-links, .welcome-text, #mp-box-welcome, #mp-welcome {
+        width: 100% !important;
+        max-width: 100% !important;
+        min-width: 0 !important;
+        height: auto !important;
+        min-height: 0 !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        padding-left: 6px !important;
+        padding-right: 6px !important;
+        float: none !important;
+        overflow: visible !important;
+        display: block !important;
+    }
+    /* 3. WELCOME BOX */
+    .main-welcome {
+        display: flex !important;
+        flex-direction: column !important;
+        padding: 10px !important;
+        align-items: stretch !important;
+        border-radius: 4px !important;
+    }
+    .welcome-text {
+        font-size: 1em !important;
+        border-left: none !important;
+        border-bottom: 2px solid var(--color-progressive);
+        margin-bottom: 15px;
+        padding: 8px 0 !important;
+        text-align: left;
+    }
+/* 4. MASTER GRID */
+    .mp-main, .mp-links, .mp-links > ul {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        padding: 0 !important;
+        min-width: 0 !important;
+        box-sizing: border-box !important;
+    }
+    .mp-main {
+        margin-top: 20px !important;
+    }
+    .mp-links > ul {
+        display: grid !important;
+        grid-template-columns: 1fr 1fr !important;
+        gap: 10px !important;
+        list-style: none !important;
+    }
+    /* 5. INDIVIDUAL BUTTON STYLING */
+    .mp-links > ul > li {
+        flex: none !important;
+        width: 100% !important;
+        min-width: 0 !important;
+        box-sizing: border-box !important;
+        margin: 0 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: center !important;
+        min-height: 110px !important;
+        padding: 10px 5px !important;
+        background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
+                    linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15)) !important;
+        box-shadow: inset 0 0 15px rgba(66, 162, 241, 0.12), 0 2px 8px rgba(0,0,0,0.3) !important;
+        border: 1px solid rgba(66, 162, 241, 0.4) !important;
+        border-radius: 6px !important;
+    }
+    div.main-welcome > .mp-links > ul > li:nth-child(3) {
+        grid-column: span 2 !important;
+        width: 100% !important;
+        justify-self: center !important;
+    }
+    /* 7. ICON & TEXT GLOW */
+    .mp-links img {
+        max-width: 45px !important;
+        height: auto !important;
+        margin-bottom: 6px !important;
+        display: block !important;
+    }
+    .mp-links > ul > li > a {
+        font-size: 0.85em !important;
+        line-height: 1.1 !important;
+        white-space: normal !important;
+        text-align: center !important;
+        color: #fff !important;
+        text-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 4px rgba(66, 162, 241, 0.5), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
+        width: 100% !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+    }
+    .mp-box h2 { font-size: 1.5em !important; padding: 0.2em 0 !important; }
+    .mp-box .welcome-message { font-size: 1.3em !important; padding: 0.4em !important; }
+    .druid-infobox .druid-title { font-size: 1.3em !important; min-height: auto !important; }
+    a.tabber__tab { font-size: 1.1em !important; }
+    .node { width: 45px !important; }
+    /* 9. DUNGEON PAGE */
+    .dungeon-page-smaller-box ul {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: center !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        width: 100% !important;
+    }
+    .dungeon-page-smaller-box li {
+        display: block !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 10px 0 !important;
+        padding: 1em !important;
+        flex: none !important;
+        border: 1px solid rgba(66, 162, 241, 0.3) !important;
+        box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.05), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
+    }
+    .dungeon-page-smaller-box a {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        text-align: center !important;
+        width: 100% !important;
+    }
+    .dungeon-page-box h2, .mp-box h2 {
+        text-align: center !important;
+        width: 100% !important;
+    }
+    /* 10. GENERAL PAGE */
+    .mw-parser-output h2 {
+        font-size: 1.6em !important;
+        margin-top: 0.1em !important;
+        margin-bottom: 0.05em !important;
+        padding: 0 !important;
+        border: none !important;
+    }
+    .mp-box h2::after { bottom: -2px !important; }
+    .mw-parser-output p, .mw-parser-output li {
+        font-size: 0.9em !important;
+        line-height: 1.5 !important;
+        margin-top: 0.2em !important;
+    }
+    /* 11. BUTTONS */
+    .button-expand-header {
+        background: var(--background-color-base) !important;
+        box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 20px #42a2f180 !important;
+        padding-right: 65px !important;
+        font-size: 14px !important;
+        white-space: normal !important;
+        text-align: left !important;
+        display: flex !important;
+        align-items: center !important;
+        border-radius: 4px !important;
+        min-height: 60px !important;
+    }
+    .button-expand-header img {
+        flex-shrink: 0 !important;
+        width: 45px !important;
+        height: 45px !important;
+        object-fit: contain !important;
+        margin-right: 6px !important;
+    }
+    /* 12. MAIN PAGE TITLE */
+    h1#firstHeading,
+    .mw-body h1,
+    .section-heading h1 {
+        font-size: 1.5em !important;
+        width: 100% !important;
+        text-align: center !important;
+        display: block !important;
+        margin: 10px 0 !important;
+        letter-spacing: 0.05em !important;
+    }
+    /* 13. TABS */
+    .header-container,
+    .pre-content,
+    .page-header-bar {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        width: 100% !important;
+    }
+    .minerva__tab-container {
+        display: flex !important;
+        width: 100% !important;
+        justify-content: stretch !important;
+        margin-bottom: 5px !important;
+    }
+    .minerva__tab-container .tab {
+        flex: 1 !important;
+        text-align: center !important;
+    }
+    .page-actions-menu {
+        width: 100% !important;
+        display: block !important;
+    }
+    .page-actions-menu__list {
+        display: flex !important;
+        width: 100% !important;
+        justify-content: space-around !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        list-style: none !important;
+    }
+    .page-actions-menu__list li {
+        flex: 1 !important;
+        display: flex !important;
+        justify-content: center !important;
+    }
+    /* 14. TABLE STACK */
+    .mw-parser-output div[style*="display:flex"]:has(.wikitable) {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        width: 100% !important;
+        gap: 20px !important;
+    }
+    .mw-parser-output .wikitable td,
+    .mw-parser-output .wikitable th {
+        white-space: nowrap !important;
+        word-break: normal !important;
+        padding: 10px 5px !important;
+    }
+    /* 15. DLOG STUFF */
+	.dlog {
+        font-size: 1em !important;
+        max-width: 100% !important;
+        padding: 0.5em !important; /* Optional: tightens the box for mobile */
+    }
+    .dlog::before {
+        zoom: 0.6;
+        margin-bottom: 5px;
+        display: block;
+        width: fit-content;
+    }
+    /* 16. INLINE IMAGE STUFF */
+    .inline-image-template {
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    display: block !important;
+    margin: 1em 0 !important;
+	}
+	.inline-image-image {
+	    display: block !important;
+	    width: 100% !important;
+	    text-align: center;
+	}
+	.inline-image-image img,
+	.inline-image-image > p > span > span > img {
+	    max-width: 100% !important;
+	    height: auto !important;
+	    width: auto !important;
+	}
+	.inline-image-caption {
+	    width: 100% !important;
+	    box-sizing: border-box !important;
+	}
+	.inline-image-caption > p {
+	    font-size: 0.7em !important;
+	    white-space: normal !important;
+	}
+	/* 17. OTHER */
+	 .pre-dungeon p {
+		font-size: 0.8em !important;
+		padding: 0.7em 1em !important;
+	}
+}