MediaWiki:Common.css: Difference between revisions

Latest revision as of 23:47, 15 June 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;
	}

	/* fixed 492px decor/book pages overflow a phone and force zoom-out */
	.decor-page {
		width: 100% !important;
		max-width: 492px !important;
		height: auto !important;
		box-sizing: border-box !important;
	}

	.decor-page > p {
		padding: 1.5em !important;
	}
}


/* ============================================================
   THE ARCHIVES — MAIN PAGE v2
   Scoped entirely to .archive-page ([[Telos Realms Wiki]]).
   Built from the wiki's own vocabulary: kurva pixel frames,
   embossed Daedalus, Courier ledger notes, Minecraft palette.
   Shared classes (.mp-links, .mp-box, .dlog) untouched.
   ============================================================ */

.archive-page {
    --ar-accent: #42a2f1;
    --ar-accent-bright: #7cc2ff;
    --ar-cream: #feffe5;
    --ar-line: rgba(66, 162, 241, 0.18);
    --ar-panel: rgba(10, 14, 24, 0.85);
    --ar-panel-raised: rgba(15, 20, 33, 0.88);
    --ar-text: #dde5f2;
    --ar-text-dim: #93a0b8;
    --ar-gold: #ffc05f;
    --ar-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --ar-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    max-width: 1280px;
    margin: 0 auto;
    font-family: var(--body-font-family);
    color: var(--ar-text);
}

/* --- one-time entry cascade (no looping motion) --- */
@keyframes ar-enter {
    from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.archive-page > * { animation: ar-enter 0.55s var(--ar-ease-out) both; }
.archive-page > *:nth-child(1) { animation-delay: 0.05s; }
.archive-page > *:nth-child(2) { animation-delay: 0.12s; }
.archive-page > *:nth-child(3) { animation-delay: 0.19s; }
.archive-page > *:nth-child(4) { animation-delay: 0.25s; }
.archive-page > *:nth-child(5) { animation-delay: 0.30s; }
.archive-page > *:nth-child(6) { animation-delay: 0.34s; }
.archive-page > *:nth-child(n+7) { animation-delay: 0.38s; }

/* --- hero: centered greeting panel --- */
.archive-hero {
    text-align: center;
    padding: 2.4em 2.4em 0;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(66, 162, 241, 0.14), transparent 60%),
        var(--ar-panel);
    border-style: solid;
    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;
}

.archive-hero p { margin: 0; }

.ar-hero-emblem img { filter: drop-shadow(0 0 18px rgba(66, 162, 241, 0.55)); }

.ar-hero-eyebrow {
    margin-top: 0.9em;
    font-style: italic;
    font-size: 0.98em;
    color: #8493ad;
}

.ar-hero-title {
    font-family: var(--heading-font-family);
    font-size: clamp(2.8em, 6.5vw, 4.6em);
    line-height: 1.02;
    margin-top: 0.12em;
    color: var(--ar-cream);
    text-rendering: geometricPrecision;
    text-shadow:
        0 0.06em 0 color-mix(in srgb, currentColor 50%, black),
        0 0.12em 0 color-mix(in srgb, currentColor 10%, black),
        0 0 0.2em currentColor;
}

.ar-hero-sub {
    margin: 0.6em auto 0;
    max-width: 38em;
    color: var(--ar-text-dim);
    font-size: 1.08em;
    line-height: 1.6;
    text-wrap: balance;
}

.archive-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em 2.4em;
    margin: 1.8em -2.4em 0;
    padding: 0.85em 1.5em 1em;
    border-top: 1px solid var(--ar-line);
    font-size: 0.92em;
    color: #7d92b3;
}

.ar-stat b { color: var(--ar-cream); font-weight: 600; margin-right: 0.15em; font-variant-numeric: tabular-nums; }

.ar-stat-note {
    color: #54fc54;
    text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, black);
}

/* --- D's welcome ledger + the three starting records --- */
.archive-comm {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 14px;
    margin-top: 14px;
    align-items: stretch;
}

.archive-transmission {
    background: var(--ar-panel);
    border-left: 3px solid var(--ar-accent);
    padding: 1.2em 1.6em 1.1em;
    box-shadow: inset 0 0 24px 4px rgba(66, 162, 241, 0.07);
}

.ar-comm-eyebrow {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.88em;
    color: #7d92b3;
}

.ar-comm-greeting {
    font-family: var(--heading-font-family);
    font-size: 2em;
    margin-top: 0.3em;
    color: var(--ar-cream);
    text-rendering: geometricPrecision;
    text-shadow:
        0 0.08em 0 color-mix(in srgb, currentColor 35%, black),
        0 0 0.2em color-mix(in srgb, currentColor 60%, transparent);
}
.ar-comm-greeting .swap-silverling { color: var(--ar-accent-bright); width: 6.5em; }

.archive-transmission p {
    margin: 0.8em 0 0;
    color: #bcc8dd;
    line-height: 1.62;
}

.ar-sign {
    margin-top: 0.45em;
    text-align: right;
    font-family: var(--heading-font-family);
    font-size: 1.7em;
    color: var(--ar-accent-bright);
    text-shadow: 0 0 14px rgba(66, 162, 241, 0.6), 0 2px 0 rgba(0, 0, 0, 0.6);
}

.ar-d {
    color: var(--ar-accent-bright);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(66, 162, 241, 0.65);
}

.ar-silver {
    color: #cfd6e2;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(207, 214, 226, 0.4);
}

.archive-directives { display: flex; flex-direction: column; gap: 10px; }

.ar-directives-label {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.88em;
    color: #7d92b3;
    padding-left: 2px;
}

.ar-directive {
    display: flex;
    align-items: center;
    gap: 0.9em;
    flex: 1;
    padding: 0.6em 1em;
    background: var(--ar-panel-raised);
    border: 1px solid var(--ar-line);
    cursor: pointer;
    transition:
        background-color 0.22s var(--ar-ease),
        border-color 0.22s var(--ar-ease),
        transform 0.22s var(--ar-ease),
        box-shadow 0.22s var(--ar-ease);
}

.ar-directive:hover {
    background: rgba(24, 33, 54, 0.92);
    border-color: rgba(66, 162, 241, 0.5);
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 16px 2px rgba(66, 162, 241, 0.15),
        0 4px 14px rgba(0, 0, 0, 0.45);
}

.ar-directive:active { transform: translateY(0) scale(0.99); }

.ar-directive p { margin: 0; }
.ar-directive > a,
.ar-directive > span[typeof] { flex-shrink: 0; }
.ar-directive img { display: block; }

.ar-directive-title a {
    font-family: var(--heading-font-family);
    font-size: 1.3em;
    line-height: 1;
    color: var(--ar-cream);
    text-decoration: none;
    text-shadow: 0 2px 0 color-mix(in srgb, currentColor 20%, black);
}
.ar-directive-title a:visited { color: var(--ar-cream); }

.ar-directive-sub { color: var(--ar-text-dim); font-size: 0.88em; margin-top: 2px; }

.ar-directive-go {
    margin-left: auto;
    font-size: 1.5em;
    line-height: 1;
    color: #5e7795;
    transition: transform 0.22s var(--ar-ease), color 0.22s var(--ar-ease);
}
.ar-directive:hover .ar-directive-go { transform: translateX(3px); color: var(--ar-accent-bright); }

/* --- section headers: ❖ marker, embossed Daedalus, D's aside --- */
.ar-sect {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    margin: 2.2em 0 0.9em;
}

.ar-sect-mark {
    color: var(--ar-accent-bright);
    text-shadow: 0 0 10px rgba(124, 194, 255, 0.9), 0 0 5px rgba(124, 194, 255, 0.6);
}

.ar-sect-name {
    font-family: var(--heading-font-family);
    font-size: 2.1em;
    line-height: 1;
    color: var(--ar-cream);
    text-rendering: geometricPrecision;
    text-shadow:
        0 0.06em 0 color-mix(in srgb, currentColor 50%, black),
        0 0.12em 0 color-mix(in srgb, currentColor 10%, black),
        0 0 0.2em currentColor;
}

.ar-sect-sub {
    font-style: italic;
    color: #7d8ba5;
    font-size: 0.95em;
    margin-left: 0.3em;
}

.ar-sect::after {
    content: '';
    flex: 1;
    align-self: center;
    height: 1px;
    background: linear-gradient(90deg, rgba(66, 162, 241, 0.5), var(--ar-line) 40%, transparent);
}

/* --- record cards --- */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.ar-card {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    grid-column: span 4;
    padding: 1.05em 1.15em 1em;
    background-color: var(--ar-panel);
    border-style: solid;
    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;
    cursor: pointer;
    transition:
        background-color 0.22s var(--ar-ease),
        transform 0.22s var(--ar-ease),
        box-shadow 0.22s var(--ar-ease);
}

.ar-w6 { grid-column: span 6; }
.ar-w4 { grid-column: span 4; }
.ar-w3 { grid-column: span 3; }

.ar-card:hover {
    background-color: rgba(20, 28, 46, 0.92);
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 20px 4px rgba(66, 162, 241, 0.16),
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 0 22px -6px rgba(66, 162, 241, 0.45);
}

.ar-card:active { transform: translateY(0) scale(0.99); }

.ar-card > a,
.ar-card > span[typeof] { flex-shrink: 0; }

.ar-card img {
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    transition: transform 0.22s var(--ar-ease);
}
.ar-card:hover img { transform: translateY(-2px); }

.ar-card-body { flex: 1; min-width: 0; }

.ar-card-titles { display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap; }
.ar-card-titles p { margin: 0; }

.ar-card-titles a {
    font-family: var(--heading-font-family);
    font-size: 1.5em;
    line-height: 1.05;
    color: var(--ar-cream);
    text-decoration: none;
    text-rendering: geometricPrecision;
    text-shadow:
        0 0.08em 0 color-mix(in srgb, currentColor 35%, black),
        0 0 0.15em color-mix(in srgb, currentColor 40%, transparent);
    transition: text-shadow 0.2s var(--ar-ease);
}
.ar-card-titles a:visited { color: var(--ar-cream); }
.ar-card:hover .ar-card-titles a {
    text-shadow:
        0 0.08em 0 color-mix(in srgb, currentColor 35%, black),
        0 0 0.4em currentColor;
}

/* little colored annotations, same palette as the item infoboxes */
.ar-card-tag {
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black);
}
.ar-mc-yellow { color: #fcfc54; }
.ar-mc-aqua   { color: #54fcfc; }
.ar-mc-red    { color: #fc5454; }
.ar-mc-green  { color: #54fc54; }
.ar-mc-gold   { color: #ffc05f; }

.ar-card-desc {
    margin-top: 0.45em;
    color: var(--ar-text-dim);
    font-size: 0.93em;
    line-height: 1.58;
}
.ar-card-desc p { margin: 0; }

.ar-card-links {
    margin-top: 0.75em;
    padding-top: 0.65em;
    border-top: 1px solid rgba(66, 162, 241, 0.14);
    font-size: 0.9em;
    line-height: 1.9;
    color: #51617c;
}
.ar-card-links p { margin: 0; }
.ar-see { font-style: italic; color: #5d6c85; margin-right: 0.3em; }
.ar-card-links a { color: var(--ar-gold); text-decoration: none; }
.ar-card-links a:visited { color: var(--ar-gold); }
.ar-card-links a:hover { color: #ffd28a; text-decoration: underline; }

/* --- footer --- */
.archive-footer {
    margin-top: 2.4em;
    padding: 1.5em 1em 0.5em;
    border-top: 1px solid var(--ar-line);
    text-align: center;
}

.ar-footer-quote {
    font-style: italic;
    font-size: 1.05em;
    color: #aab6cc;
    max-width: 42em;
    margin: 0 auto 0.9em;
    text-wrap: balance;
}
.ar-footer-quote .ar-d { font-style: normal; }

.ar-footer-line { color: #7e8ca6; font-size: 0.95em; }

.ar-footer-links { margin-top: 0.7em; font-size: 0.92em; color: #51617c; }
.ar-footer-links a { color: var(--ar-gold); text-decoration: none; }
.ar-footer-links a:hover { text-decoration: underline; }

/* --- keyboard focus --- */
.archive-page a:focus-visible {
    outline: 2px solid var(--ar-accent-bright);
    outline-offset: 2px;
}

/* --- responsive --- */
@media screen and (max-width: 1060px) {
    .archive-comm { grid-template-columns: 1fr; }
    .ar-w6 { grid-column: span 12; }
    .ar-w4, .ar-w3 { grid-column: span 6; }
}

@media screen and (max-width: 720px) {
    .archive-grid { display: flex; flex-direction: column; }
    .archive-hero { padding: 1.6em 1.2em 0; }
    .archive-status { margin-inline: -1.2em; padding-inline: 1.2em; gap: 0.4em 1.4em; }
    .ar-sect { flex-wrap: wrap; margin-top: 1.8em; }
    .ar-sect-name { font-size: 1.6em; }
    .ar-sect-sub { flex-basis: 100%; margin-left: 1.5em; }
    .ar-card { padding: 1em; }
    .ar-comm-greeting { font-size: 1.6em; }
}

/* --- reduced motion: everything appears instantly --- */
@media (prefers-reduced-motion: reduce) {
    .archive-page > *,
    .archive-page .swap-silverling::before,
    .archive-page .swap-silverling::after { animation: none !important; }
    .archive-page *,
    .archive-page *::before,
    .archive-page *::after { transition-duration: 0.01ms !important; }
}

/* ============================================================
   END THE ARCHIVES — MAIN PAGE v2
   ============================================================ */



/* ============================================================
   DUNGEON PAGES v2
   1) .dungeon-index / .dungeon-jump — the [[Dungeons]] list page,
      danger-graded via --tier (green → void)
   2) .npc-infobox — compact infobox chrome + single-line loot rows;
      model renders keep their template sizes
   3) .dungeon-page — wiki-article layout for dungeon pages
   Heading selectors are written long to out-rank Minerva's
   `.content .mw-parser-output .mw-heading { display:block }`.
   ============================================================ */

/* smooth anchor jumps (jump bar, TOC links) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* --- 1) the dungeon index --- */

/* danger palette, shared by pills, markers, rules, tile glows */
.tier-g, .dj-g { --tier: #54fc54; }
.tier-o, .dj-o { --tier: #fca854; }
.tier-p, .dj-p { --tier: #cd08cd; }
.tier-r, .dj-r { --tier: #c20f0f; }
.tier-u, .dj-u { --tier: #8d9f97; }

/* jump bar: one tap to any tier bracket */
.dungeon-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0.9em 0 0.3em;
}

.dungeon-jump .dj {
    display: inline-block;
    padding: 0.3em 0.85em;
    background: rgba(15, 20, 33, 0.88);
    border: 1px solid color-mix(in srgb, var(--tier, #42a2f1) 30%, transparent);
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.95em;
    color: var(--tier, #dde5f2);
    text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black);
    transition:
        border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        background-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.dungeon-jump .dj a { color: inherit; text-decoration: none; }

.dungeon-jump .dj:hover {
    background: rgba(24, 33, 54, 0.92);
    border-color: color-mix(in srgb, var(--tier, #42a2f1) 70%, transparent);
    transform: translateY(-1px);
}

/* bracket headings — long selectors beat Minerva's .mw-heading{display:block} */
.dungeon-index .mw-heading3,
.content .mw-parser-output .dungeon-index .mw-heading3 {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin: 1.6em 0 0.8em;
    border: none;
    min-width: 0;
}

.dungeon-index .mw-heading3::before {
    content: '❖';
    font-size: 1.1em;
    color: var(--tier, #7cc2ff);
    text-shadow: 0 0 10px currentColor, 1px 1px color-mix(in srgb, currentColor 20%, black);
}

.dungeon-index .mw-heading3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--tier, #42a2f1) 50%, transparent),
        color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent) 45%,
        transparent);
}

.dungeon-index h3,
.content .mw-parser-output .dungeon-index h3 {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--heading-font-family);
    font-size: 2em;
    line-height: 1;
    font-weight: normal;
    color: #feffe5;
    text-rendering: geometricPrecision;
    text-shadow:
        0 0.06em 0 color-mix(in srgb, currentColor 50%, black),
        0 0.12em 0 color-mix(in srgb, currentColor 10%, black),
        0 0 0.2em currentColor;
}

/* portal tiles: .mp-links supplies the kurva frame + whole-tile click JS */
.dungeon-grid { font-size: 1em; }

.dungeon-grid > ul {
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
}

.dungeon-grid > ul > li {
    gap: 4px;
    padding: 0.9em 1.1em 0.8em;
    background-color: rgba(10, 14, 24, 0.85);
    transition:
        background-color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.dungeon-grid > ul > li:hover {
    background-color: rgba(20, 28, 46, 0.92);
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 20px 4px color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent),
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 0 24px -6px var(--tier, #42a2f1);
}

/* --- 2) boss & enemy infoboxes --- */
.druid-container.npc-infobox {
    max-width: 21.5em;
    padding: 0.35em;
    font-size: 0.94em;
}

.npc-infobox .druid-title {
    font-size: 1.7em;
    min-height: auto;
    padding: 0.3em 0.5em;
}

.npc-infobox .druid-section {
    font-size: 1.05em;
    padding: 2px;
}

.npc-infobox div.druid-row > .druid-label,
.npc-infobox div.druid-row > .druid-data {
    padding-block: 1px;
}

/* loot: one line per drop — name + icon left, % right.
   The old `.druid-row[data-druid-section-row="Loot"] div` rule sets
   display:block, width:100% and justify-content:space-between on every
   div in here; width:100% + padding overflows the box (clipped %s),
   so everything below resets to width:auto / border-box. */
.npc-infobox .druid-row[data-druid-section-row="Loot"] div {
    padding: 0;
    display: block;
    width: auto;
    box-sizing: border-box;
}

.npc-infobox .druid-row[data-druid-section-row="Loot"] > .druid-data {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-category-header,
.npc-infobox .loot-category-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45em;
    padding: 0.25em 0.5em;
    margin: 0.45em 0 0.15em;
}

.npc-infobox .loot-category-header img { width: 24px; height: auto; }

.npc-infobox .loot-category-title { font-size: 0.9em; }

.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-item-row,
.npc-infobox .loot-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.15em 0.6em;
    padding: 0.12em 0.4em 0.12em 0.6em;
    margin: 0;
    font-size: 0.95em;
    line-height: 1.35;
}

.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-data-infobox,
.npc-infobox .loot-data-infobox {
    display: flex;
    align-items: center;
    gap: 0.45em;
    min-width: 0;
}

.npc-infobox .loot-data-infobox img { max-height: 26px; width: auto; }

.npc-infobox .boss-percent { font-size: 1em; flex-shrink: 0; }

/* enemy boxes inside a dungeon page: compact cards */
.dungeon-enemies .druid-container.npc-infobox {
    max-width: 18em;
    font-size: 0.9em;
    float: none;
    margin: 0.4em;
}

.dungeon-enemies .npc-infobox .druid-title { font-size: 1.35em; }

/* --- 3) individual dungeon pages (.dungeon-page wrapper) --- */

/* flat sections: the heading rule does the separating, not boxes */
.dungeon-page .hoverbox,
.dungeon-page .hoverbox:hover {
    background: none;
    background-color: transparent;
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0.2em 0.2em;
    margin: 0.2em 0 0.6em;
}

/* wiki-style headings: ❖ marker + underline rule.
   Long selectors beat Minerva's display:block / flex-basis:0. */
.dungeon-page .mw-heading2,
.content .mw-parser-output .dungeon-page .mw-heading2 {
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin: 1em 0 0.45em;
    padding-bottom: 0.22em;
    border-bottom: 1px solid rgba(66, 162, 241, 0.3);
    min-width: 0;
}

.dungeon-page .mw-heading2::before {
    content: '❖';
    color: #7cc2ff;
    text-shadow: 0 0 10px rgba(124, 194, 255, 0.9);
}

.dungeon-page h2,
.content .mw-parser-output .dungeon-page h2 {
    flex: 0 0 auto;
    font-size: 1.9em;
    margin: 0;
}

.dungeon-page > p,
.dungeon-page .hoverbox > p {
    line-height: 1.65;
    max-width: 72ch;
}

/* attack patterns: slim ledger rows */
.dungeon-page .pre-dungeon p {
    margin: 0.4em 0;
    padding: 0.45em 0.85em;
    font-size: 0.97em;
    border-radius: 2px;
    border-left: 2px solid rgba(66, 162, 241, 0.45);
    background: linear-gradient(90deg, rgba(66, 162, 241, 0.07), rgba(26, 26, 34, 0.6) 30%, transparent 96%);
    box-shadow: none;
    backdrop-filter: none;
}

.dungeon-page .pre-dungeon p::before { display: none; }

.dungeon-page .dlog {
    font-size: 1.4em;
    margin-bottom: 0.8em;
}

.dungeon-page .mw-collapsible { padding-top: 0.6em; }

.dungeon-page .button-expand-header {
    font-size: 14px;
    padding: 10px 50px 10px 14px;
}

/* dialogue tables must wrap, never force sideways scroll */
.dungeon-page .wikitable td,
.dungeon-page .wikitable th,
.mw-parser-output .dungeon-page .wikitable td,
.mw-parser-output .dungeon-page .wikitable th {
    white-space: normal !important;
    word-break: normal !important;
}

/* anchor jumps land clear of the (mobile-sticky) jump bar */
.dungeon-index .mw-heading3 { scroll-margin-top: 4.5em; }

/* --- mobile: the dungeon section must be readable one-handed --- */
@media screen and (max-width: 720px) {
    /* jump bar pins to the top and scrolls sideways — one thumb-swipe
       to reach any tier bracket from anywhere on the page */
    .dungeon-jump {
        position: sticky;
        top: 0;
        z-index: 5;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 0.5em 6px;
        margin: 0.6em -6px 0.3em;
        background: rgba(10, 13, 20, 0.96);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dungeon-jump::-webkit-scrollbar { display: none; }
    .dungeon-jump .dj {
        flex-shrink: 0;
        padding: 0.45em 0.8em;
        font-size: 1em;
    }

    .dungeon-index .mw-heading3 { margin-top: 1.3em; }
    .dungeon-index h3,
    .content .mw-parser-output .dungeon-index h3 { font-size: 1.5em; }

    /* two-up portal tiles, capped images (overrides the old 45px cap) */
    .dungeon-grid > ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .dungeon-grid > ul > li {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0.7em 0.4em !important;
        background: rgba(10, 14, 24, 0.85) !important;
    }
    .dungeon-grid > ul > li img {
        max-width: 116px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* infoboxes go full width and stack */
    .druid-container.npc-infobox { max-width: 100%; }
    .dungeon-enemies { flex-direction: column; align-items: center; }
    .dungeon-enemies .druid-container.npc-infobox { width: 100%; max-width: 24em; }

    .dungeon-page .hoverbox,
    .dungeon-page .hoverbox:hover { margin-inline: 0; padding-inline: 0; }

    .dungeon-page .pre-dungeon p { font-size: 0.88em; padding: 0.45em 0.7em; }
    .dungeon-page .dlog { font-size: 1.1em !important; }

    /* keep dialogue tables inside the screen */
    .dungeon-page .wikitable { width: 100%; }
}

/* ============================================================
   END DUNGEON PAGES v2
   ============================================================ */


/* ============================================================
   MOBILE READABILITY FIXES (added)
   Keeps page content from rendering wider than the phone screen
   (Minerva clips horizontal overflow, so over-wide content is lost
   off the right edge) and shrinks boss/enemy infoboxes from
   full-screen blocks back into readable cards.
   ============================================================ */
@media screen and (max-width: 720px) {
    /* nothing should size itself wider than the viewport */
    .mw-parser-output,
    .dungeon-page,
    .hoverbox,
    .dungeon-clear,
    .lore,
    .pre-dungeon {
        max-width: 100% !important;
        box-sizing: border-box;
        overflow-wrap: break-word;
    }

    /* .pre-dungeon is `width: fit-content`; a long non-wrapping heading
       inside it stretches the whole section past the screen. Let it
       fill the available width instead. */
    .pre-dungeon {
        width: auto !important;
    }

    /* ❖-marker headings are flex rows; the heading was `flex: 0 0 auto`
       so it could neither shrink nor wrap and ran off the screen edge.
       Allow the row to wrap and the heading to shrink + wrap its text. */
    .dungeon-page .mw-heading2,
    .content .mw-parser-output .dungeon-page .mw-heading2,
    .dungeon-index .mw-heading3,
    .content .mw-parser-output .dungeon-index .mw-heading3 {
        /* keep the ❖ marker on the same flex line as the title and let
           the TITLE wrap inside itself — don't wrap the flex items, or
           the marker gets stranded on its own line */
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        min-width: 0 !important;
    }
    .dungeon-page h2,
    .content .mw-parser-output .dungeon-page h2,
    .dungeon-index h3,
    .content .mw-parser-output .dungeon-index h3 {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        font-size: 1.35em !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* boss / enemy infoboxes: centered cards, not full-screen blocks
       (the 3D render + bossbar were filling the whole width) */
    .dungeon-page .druid-container.npc-infobox,
    .dungeon-enemies .druid-container.npc-infobox {
        max-width: 19em !important;
        margin: 0.6em auto !important;
        font-size: 0.82em;
    }
}


/* ============================================================
   MOBILE — FLATTEN DECORATION FOR ACCESSIBILITY (added)
   On phones, trade the neon glow / frame chrome / motion for flat,
   solid, high-contrast surfaces and clean text. Desktop is untouched.
   ============================================================ */
@media screen and (max-width: 720px) {

    /* 1) blurry colored text-shadows wreck legibility — remove them
          from body text entirely... */
    .mw-parser-output p,
    .mw-parser-output li,
    .mw-parser-output dd,
    .mw-parser-output dt,
    .mw-parser-output td,
    .mw-parser-output th,
    .mw-parser-output a,
    .druid-data, .druid-label,
    .npc-infobox div.druid-row > .druid-label,
    .npc-infobox div.druid-row > .druid-data,
    .boss-percent, .loot-category-title,
    .footer-content > ul > li > a,
    .footer-section > ul > li,
    .ar-card-titles a, .ar-directive-title a, .ar-card-desc {
        text-shadow: none !important;
    }
    /* ...and reduce headings to a single clean dark shadow (kept for
       legibility over the page's background image) */
    .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
    .dungeon-page h2, .dungeon-index h3,
    .druid-title, .druid-section, .druid-infobox .druid-title,
    .npc-infobox .druid-title, .npc-infobox .druid-section,
    .mp-box h2, .mp-box .welcome-message,
    .ar-hero-title, .ar-sect-name {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    }

    /* 2) the page frame (nexus border-image + blue inner glow) eats
          width and contrast — drop it on phones */
    #bodyContent {
        border-image: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 1em 0.7em !important;
    }

    /* 3) flatten neon box-shadow glows + backdrop blur on containers */
    .npc-infobox, .druid-container,
    .wikitable, table.wikitable,
    .dlog, .pre-dungeon p, .hoverbox, .hoverbox:hover,
    .mp-box, #mp-box-welcome, .class-box, .main-welcome,
    .button-expand-header,
    .tab-gif-container, .gif-display-area, .tab-gif-display-area,
    .inline-image-image > p > span > span > img,
    .ar-card, .ar-directive, .archive-hero, .archive-transmission {
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 4) replace the border-image frames (tables, portal tiles,
          infoboxes, archive cards) with flat solid borders + bg */
    .wikitable, table.wikitable,
    .npc-infobox, .druid-container.npc-infobox,
    .mp-links > ul > li,
    .ar-card, .archive-hero {
        border-image: none !important;
        border: 1px solid rgba(66, 162, 241, 0.35) !important;
        background: #15151c !important;
    }

    /* 5) hide purely-decorative glow bars / scan lines (NOT the ❖
          heading markers, which are real content) */
    .mp-box::before, .mp-box::after,
    .mp-box h2::after,
    .mp-box .welcome-message::before, .mp-box .welcome-message::after,
    .npc-infobox::before, .npc-infobox::after,
    .npc-infobox .druid-title::before, .npc-infobox .druid-title::after,
    .npc-infobox .druid-section::after,
    .mw-footer::before,
    .tab-gif-container::before, .gif-display-area::before,
    .dlog::after, .pre-dungeon p::before,
    .inline-image-caption > p::before {
        display: none !important;
    }

    /* 6) stop the looping pulse / scan / shimmer animations */
    .npc-infobox::before, .mw-footer::before,
    .boss-infobox-subtitle, .boss-infobox-subtitle::before,
    .dlog::after, .mp-box .welcome-message,
    .mp-main > .mp-links > ul > li::before,
    .archive-page > * {
        animation: none !important;
    }
}


/* ============================================================
   MOBILE — READABLE TABLES (added)
   The forced `white-space: nowrap` made text-heavy cells refuse to
   wrap, so tables ballooned far wider than the phone and Minerva
   clipped them to a sliver. Let cells wrap so the table fits the
   screen; shrink/contain wide bits; give genuinely wide all-number
   tables a horizontal swipe instead. No `display` change on the
   generic rule, so layout tables are unaffected.
   ============================================================ */
@media screen and (max-width: 720px) {
    .mw-parser-output .wikitable,
    .mw-parser-output table.wikitable {
        width: 100% !important;
        margin-inline: 0 !important;
    }

    /* the key fix: cells wrap instead of forcing the table off-screen */
    .mw-parser-output .wikitable td,
    .mw-parser-output .wikitable th {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere;
        font-size: 0.82em !important;
        padding: 6px 5px !important;
        vertical-align: top;
    }

    /* oversized in-cell icons (e.g. the 128px ruleset banners) */
    .mw-parser-output .wikitable td img,
    .mw-parser-output .wikitable th img {
        max-width: 64px !important;
        height: auto !important;
    }

    /* math formulas don't wrap; shrink them and let any that are still
       too wide scroll inside their own box. overflow:auto also drops
       their min-content width to 0 so they stop stretching the cell. */
    .wikitable div[style*="font-size:150%"],
    .wikitable div[style*="font-size: 150%"] {
        font-size: 105% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wikitable .mwe-math-element,
    .wikitable .mwe-math-fallback-image-inline,
    .wikitable .mwe-math-fallback-image-display {
        max-width: 100%;
        height: auto;
    }

    /* the 8-column "Max Base Class Stats" table is all short numbers —
       a clean left-to-right swipe reads far better than cramped wrap */
    #mp-box-basestats .wikitable {
        display: block;
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #mp-box-basestats .wikitable td,
    #mp-box-basestats .wikitable th {
        white-space: nowrap !important;
    }
}

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
-@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
-@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');
+@font-face {
-@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Caudex:ital,wght@0,400;0,700;1,400;1,700&family=Cinzel+Decorative:wght@400;700;900&family=Pixelify+Sans:[email protected]&display=swap');
+    font-family: "Outfit";
-@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
+    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: url(filepath://Site-background-image.jpg);
+     --content-link-color: #ffc05f;
-    --wiki-body-background-color: #1a1a22;
+     --content-border-color: #feffe5;
-     --wiki-body-background-color--rgb: 26,26,34;
+     --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;
-    --wiki-body-dynamic-color--secondary--inverted: #333333;
-    --wiki-body-dynamic-color--secondary--inverted--rgb: 51,51,51;
-    --wiki-body-font-family: "Outfit", serif;
-    --wiki-pixel-font: "Silkscreen", sans-serif;
-    --wiki-content-background-color: #1a1a22;
-    --wiki-content-background-color--rgb: 26,26,34;
-    --wiki-content-background-opacity: 0.92;
-    --wiki-content-background-color--secondary: #1b1b1b;
-    --wiki-content-background-color--secondary--rgb: 11,0,0;
-    --wiki-content-border-color--secondary: color-mix(in srgb, var(--wiki-content-border-color) 50%, transparent);
-    --wiki-content-border-color--accent: color-mix(in srgb, var(--wiki-accent-color) 50%, transparent);
-    --wiki-content-border-color: #fefcd3;
-    --wiki-content-border-color--rgb: 254,252,211;
-    --wiki-content-text-color: #ededed;
-    --wiki-content-text-color--rgb: 237,237,237;
-    --wiki-content-link-color: #ffc05f;
-     --wiki-content-link-color--rgb: 255,192,95;
-    --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: #f57c51;
-    --wiki-content-redlink-color--rgb: 245,124,81;
-    --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);
+:root{
-     --wiki-heading-color--rgb: var(--wiki-content-text-color--rgb);
+     --is-top-logo: 1;
-     --wiki-heading-font-family: "Pixelify Sans", sans-serif;
+    --logo-file-width: 160;
+     --logo-file-height: 160;
+    --logo-height: calc(var(--logo-file-height)*1px);
+    --logo-margin: 15px;
+     --is-navigation-inside-content: 0;
+}
-     --wiki-accent-color: #8dbec2;
+/*****************************
-     --wiki-accent-color--rgb: 141,190,194;
+*     Sound      *
-     --wiki-accent-color--hover: #ba453c;
+******************************/
-     --wiki-accent-color--hover--rgb: 186,69,60;
+.sound-button,.sound-button a,.sound-button a.image,.sound-button img {
-     --wiki-accent-label-color: #0b101b;
+    background: none !important;
-     --wiki-accent-label-color--rgb: 11,16,27;
+     background-color: transparent !important;
-     --wiki-accent-link-color: #22214d;
+     border: none !important;
-     --wiki-accent-link-color--rgb: 34, 33, 77;
+     outline: none !important;
+     box-shadow: none !important;
+     text-decoration: none !important;
+     padding: 0 !important;
+     margin: 0 !important
+}
-     --wiki-sidebar-background-color: var(--wiki-content-background-color);
+.sound-button img {
-    --wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
+     filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);
-    --wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
+     transition: filter 0.2s ease-in-out;
-    --wiki-sidebar-border-color: var(--wiki-content-border-color);
+     display: inline-block !important;
-    --wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb);
+     vertical-align: middle;
-     --wiki-sidebar-link-color: var(--wiki-content-link-color);
+     margin: 0 !important;
-     --wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb);
+}
-     --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 {
-    --wiki-navigation-background-color--rgb: var(--wiki-content-background-color--secondary--rgb);
+     cursor: pointer;
-    --wiki-navigation-background-color--secondary: var(--wiki-content-background-color);
+     display: inline-block !important;
-    --wiki-navigation-background-color--secondary--rgb: var(--wiki-content-background-color--rgb);
+     vertical-align: middle;
-    --wiki-navigation-border-color: var(--wiki-content-border-color);
+     margin: 0 2px !important;
-    --wiki-navigation-border-color--rgb: var(--wiki-content-border-color--rgb);
+     line-height: 1;
-    --wiki-navigation-text-color: var(--wiki-content-link-color);
+     white-space: nowrap;
-     --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:hover img,.sound-button.playing img {
-    --wiki-alert-color--rgb: 206,0,24;
+     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-alert-label-color: #000000;
-    --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%);
-    --wiki-content-border-image: url(filepath://Wiki-border.png);
 }
-:root{
+.sound-button a:hover,.sound-button a:focus {
-		/***********************
+    background: none !important;
-	  start logo position
+    border: none !important
-	----------------------*/
-	--wiki-is-top-logo: 1; /* 1 = center logo at the top of the page; 0 = logo at the top left of the page */
-	--wiki-logo-file-width: 160; /* Width of the image file in px. Put a number without the letters `px`. */
-	--wiki-logo-file-height: 160; /* Height of the image file in px. Put a number without the letters `px`. */
-	--wiki-logo-height: calc(var(--wiki-logo-file-height)*1px); /* Valid only when --wiki-is-top-logo is 1. The height the logo should be shown */
-	--wiki-logo-margin: 15px; /* the width of margin below the logo. When --wiki-is-top-logo is 1, this is also the default value of --wiki-top-spacing */
-	/*-----------------------
-	   end logo position
-	***********************/
-	--wiki-is-navigation-inside-content: 0; /* 0 = default navigation tabs layout; 1 = navigation tabs inside content box */
 }
+/*****************************
+*   End Sound    *
+******************************/
 /*****************************
@@ Line 133: / Line 79: @@
 ******************************/
 :root {
-	image-rendering: pixelated !important;
+    image-rendering: pixelated !important;
-	--pi-background: var(--wiki-content-background-color);
+    --pi-background: var(--background-color-base);
-	--pi-secondary-background: var(--wiki-accent-color);
+    --pi-secondary-background: var(--color-progressive);
-	--pi-secondary-background--rgb: var(--wiki-accent-color--rgb);
+    --pi-secondary-background-label: var(--content-link-label-color);
-	--pi-secondary-background-label: var(--wiki-accent-label-color);
+    --pi-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
-	--pi-border-color: rgba(var(--pi-secondary-background--rgb),0.5);
 }
 .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%;
+    font-size: 115%;
-	word-wrap: normal;
+    word-wrap: normal;
 }
-/*************************************************
+.miniboss-box .portable-infobox {
-.tiered1 .portable-infobox{
+    box-shadow: 3px 3px 6px var(--content-border-color);
 }
-.tiered2 .portable-infobox{
+.portable-infobox .pi-image {
+    padding: 8px;
 }
-.tiered3 .portable-infobox{
+.pi-image-thumbnail {
+    max-width:100%;
 }
-.tiered4 .portable-infobox{
+.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);
 }
-.tiered5 .portable-infobox{
+.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;
 }
-.tiered6 .portable-infobox{
+.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;
 }
-.tiered7 .portable-infobox{
+.mw-body .portable-infobox h3 {
+    font-size: 80%;
+    font-weight: 500;
 }
+/*****************************
+*   End PortableInfoboxes    *
+******************************/
+/** as of Module:navbox version 1.2.2 **/
-.tiered8 .portable-infobox{
+/*********************************************************************************************************************
+* 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;
 }
-.tiered9 .portable-infobox{
+/* 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;
 }
-.tiered10 .portable-infobox{
+/* 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;
 }
-.tiered11 .portable-infobox{
+/* Hide empty list items */
+.hlist .mw-empty-li {
+    display: none;
 }
-.companion .portable-infobox{
+/* 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,
-.irradiated .portable-infobox{
+.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;
 }
-.royal .portable-infobox{
+/* 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;
 }
-.bloodshot .portable-infobox{
+.hlist dd ol::after,
+.hlist dd ul::after,
-}
+.hlist dd dl::after,
+.hlist dt ol::after,
-.cross .portable-infobox{
+.hlist dt ul::after,
+.hlist dt dl::after,
+.hlist li ol::after,
+.hlist li ul::after,
+.hlist li dl::after {
+    content: ")";
+    font-weight: inherit;
 }
-********************************/
-.miniboss-box .portable-infobox {
+/* Put ordinals in front of ordered list items */
-	box-shadow: 3px 3px 6px var(--wiki-content-border-color);
+.hlist ol {
+    counter-reset: listitem;
 }
-.portable-infobox .pi-image {
+.hlist ol > li {
-	padding: 8px;
+    counter-increment: listitem;
 }
-.pi-image-thumbnail {
+.hlist ol > li::before {
-	max-width:100%;
+    content: " " counter(listitem) ".\20";
 }
-.pi-section-navigation .pi-section-tab.pi-section-active,
+/* Progressive enhancement:
-.pi-section-navigation .pi-section-tab.current,
+ * try to make the dot always follow the list item in same line
-.pi-media-collection .pi-tab-link.current {
+ */
-	background: var(--pi-secondary-background);
+.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
-	color: var(--pi-secondary-background-label);
+    display: inline-block;
 }
-/* overqualify these to overwrite normal content heading styles */
+/********************************************
-.mw-body .portable-infobox h2,
+* End semantically-correct horizontal lists *
-.mw-body .portable-infobox h3 {
+*********************************************/
-	text-shadow: var(--wiki-accent-color);
-	border-bottom: 0;
-	font-family: var(--wiki-heading-font-family);
-	font-weight: 550;
-	margin: 0;
-	word-wrap: normal;
-}
-.mw-body .portable-infobox  {
+/**********************************************************
-	border-radius:5px;
+* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
-	border-image-source: var(--wiki-content-border-image);
+***********************************************************/
-	border-image-slice: 15 16;
+.ranger-navbox{
-	border-image-width: 15px;
+  --navbox-background: none;
-	border-image-repeat: stretch;
+  --navbox-margin: 0.5em auto;
-}
+  --navbox-padding: 4px;
+  --navbox-gap: 3px;
-.mw-body .portable-infobox h3 {
+  --navbox-outer-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
-	font-size: 80%;
+  --navbox-outer-border-width: 1px;
-	font-weight: 500;
+  --navbox-outer-border-style: solid;
-}
+  --navbox-outer-border-radius: 0px;
-/*****************************
+  --navbox-font-size: calc(1em - 2px);
-*   End PortableInfoboxes    *
+  --navbox-title-color: var(--content-link-label-color);
-******************************/
+  --navbox-title-font-size: calc(125%);
+  --navbox-title-background: var(--color-progressive);
-/** as of Module:navbox version 1.2.2 **/
+  --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);
-* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
+  --navbox-title-link-color--hover: var(--accent-link-color);
-**********************************************************************************************************************/
+  --navbox-title-redlink-color: var(--navbox-title-link-color);
-.hlist dl,
+  --navbox-title-link-decoration: underline solid;
-.hlist ol,
+  --navbox-title-redlink-decoration: underline wavy;
-.hlist ul {
+  --navbox-title-padding--y: 0.5em;
-	margin: 0;
+  --navbox-above-background: color-mix(in srgb, var(--color-base) 15%, transparent);
-	padding: 0;
+  --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,
-/* Display list items inline */
+.ranger-navbox.pill-mobile{
-.hlist dd,
+  --navbox-pill-gap: 0.3em;
-.hlist dt,
+  --navbox-pill-padding: 0.25em 0.75em;
-.hlist li {
+  --navbox-pill-border-radius: 3px;
-	/*
+  --navbox-pill-box-shadow: none;
-	 * don't trust the note that says margin doesn't work with inline
+  --navbox-pill-background: color-mix(in srgb, var(--color-base) 5%, transparent);
-	 * removing margin: 0 makes dds have margins again
+  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
-	 * We also want to reset margin-right in Minerva
+  --navbox-pill-background--hover: var(--navbox-pill-background);
-	 */
+  --navbox-list-background: none;
-	margin: 0;
+  --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 3%, transparent);
-	display: inline;
+}
+.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;
 }
-/* Display requested top-level lists inline */
+/******************************
-.hlist.inline,
+* Fallback for older browsers *
-.hlist.inline dl,
+*******************************/
-.hlist.inline ol,
+@supports not (color:color-mix(in srgb, #000, transparent)) {
-.hlist.inline ul,
+    .ranger-navbox {
-/* Display nested lists inline */
+        --navbox-above-background: var(--background-color-neutral-subtle);
-.hlist dl dl,
+        --navbox-list-background: transparent;
-.hlist dl ol,
+        --navbox-list-background--striped: var(--background-color-neutral-subtle);
-.hlist dl ul,
+        --navbox-group-background: var(--background-color-neutral-subtle);
-.hlist ol dl,
+        --navbox-tree-line-color: var(--background-color-neutral-subtle);
-.hlist ol ol,
+    }
-.hlist ol ul,
+    .ranger-navbox.pill,
-.hlist ul dl,
+    .ranger-navbox.pill-mobile {
-.hlist ul ol,
+      --navbox-pill-background: var(--background-color-neutral-subtle);
-.hlist ul ul {
+      --navbox-list-background--striped: transparent;
-	display: inline;
+    }
 }
+/***************
+* End fallback *
+****************/
-/* Hide empty list items */
+.ranger-navbox{
-.hlist .mw-empty-li {
+  border-color: var(--navbox-outer-border-color);
-	display: none;
+  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;
 }
-/* TODO: :not() can maybe be used here to remove the later rule. naive test
+.ranger-navbox * {
- * seems to work. more testing needed. like so: */
+  border: 0;
-.hlist dt:not(:last-child)::after {
+}
-	content: ":\20";
+.ranger-navbox .center *{
+  margin-left: unset;
+  margin-right: unset;
 }
-.hlist dd:not(:last-child)::after,
+.ranger-navbox,
-.hlist li:not(:last-child)::after {
+.ranger-navbox .ranger-section,
-	/* "space, Middle Dot, space"
+.ranger-navbox .ranger-listbox{
-	We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
+  display: flex;
-	The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
+  flex-direction: column;
-	/* content: "\20\00B7\20"; font-weight: bold; */
+  gap: var(--navbox-gap);
-    /* "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;
 }
+.ranger-navbox .ranger-title,
-/* Add parentheses around nested lists */
+.ranger-navbox .ranger-header{
-.hlist dd ol::before,
+  text-align: center;
-.hlist dd ul::before,
+  min-height: 1.5em;
-.hlist dd dl::before,
+  position: relative;
-.hlist dt ol::before,
+  z-index: 0;
-.hlist dt ul::before,
+  font-weight: bold;
-.hlist dt dl::before,
-.hlist li ol::before,
-.hlist li ul::before,
-.hlist li dl::before {
-	content: "\20(";
-	font-weight: inherit;
 }
+.ranger-navbox .ranger-title{
-.hlist dd ol::after,
+  color: var(--navbox-title-color);
-.hlist dd ul::after,
+  background: var(--navbox-title-background);
-.hlist dd dl::after,
+  font-size: var(--navbox-title-font-size);
-.hlist dt ol::after,
+  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 */
-.hlist dt ul::after,
-.hlist dt dl::after,
-.hlist li ol::after,
-.hlist li ul::after,
-.hlist li dl::after {
-	content: ")";
-	font-weight: inherit;
 }
+.ranger-navbox .ranger-title a,
-/* Put ordinals in front of ordered list items */
+.ranger-navbox .ranger-title a:visited,
-.hlist ol {
+.ranger-navbox .ranger-title a:hover,
-	counter-reset: listitem;
+.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,
-.hlist ol > li {
+.ranger-navbox .ranger-title a.external,
-	counter-increment: listitem;
+.ranger-navbox .ranger-title a.external:visited {
+  color: var(--navbox-title-link-color);
 }
+.ranger-navbox .ranger-title a:visited{
-.hlist ol > li::before {
+  color: var(--navbox-title-link-color--visited);
-	content: " " counter(listitem) ".\20";
 }
+.ranger-navbox .ranger-title a.new,
-/* Progressive enhancement:
+.ranger-navbox .ranger-title a.new:visited{
- * try to make the dot always follow the list item in same line
+    color:var(--navbox-title-redlink-color);
- */
-.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
-	display: inline-block;
 }
+.ranger-navbox .ranger-title a:hover,
-/********************************************
+.ranger-navbox .ranger-title a:visited:hover,
-* End semantically-correct horizontal lists *
+.ranger-navbox .ranger-title a.external:hover,
-*********************************************/
+.ranger-navbox .ranger-title a.external:visited:hover {
+   color:var(--navbox-title-link-color--hover);
-/**********************************************************
+}
-* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
+.ranger-navbox .ranger-header{
-***********************************************************/
+   color: var(--navbox-header-color);
-.ranger-navbox{
+   background: var(--navbox-header-background);
-  --navbox-background: none; /* for entire navbox */
+   font-size: var(--navbox-header-font-size);
-  --navbox-margin: 0.5em auto;
+   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-padding: 4px;
+}
-  --navbox-gap: 3px; /* when using zero-value, it must be 0px */
+.ranger-navbox .ranger-sublist .ranger-header{
-  --navbox-outer-border-color: var(--wiki-content-border-color--accent);
+   font-size: var(--navbox-subheader-font-size);
-  --navbox-outer-border-width: 1px;
+   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-outer-border-style: solid;
+}
-   --navbox-outer-border-radius: 0px;
+.ranger-navbox .ranger-header a,
-  --navbox-font-size: calc(1em - 2px);
+.ranger-navbox .ranger-header a:visited,
-  --navbox-title-color: var(--wiki-accent-label-color);
+.ranger-navbox .ranger-header a:hover,
-  --navbox-title-font-size: calc(125%);
+.ranger-navbox .ranger-header a.external,
-  --navbox-title-background: var(--wiki-accent-color);
+.ranger-navbox .ranger-header a.external:visited,
-  --navbox-title-icon-color: var(--wiki-accent-label-color);
+.ranger-navbox .ranger-header a.external:hover {
-   --navbox-title-link-color: var(--navbox-title-color);
+    text-decoration: var(--navbox-header-link-decoration);
-   --navbox-title-link-color--visited: var(--navbox-title-link-color);
+}
-   --navbox-title-link-color--hover: var(--wiki-accent-link-color);
+.ranger-navbox .ranger-header a.new,
-   --navbox-title-redlink-color: var(--navbox-title-link-color);
+.ranger-navbox .ranger-header a.new:visited {
-  --navbox-title-link-decoration: underline solid;
+    text-decoration: var(--navbox-header-redlink-decoration);
-  --navbox-title-redlink-decoration: underline wavy;
+}
-  --navbox-title-padding--y: 0.5em;
+.ranger-navbox .ranger-header a,
-  --navbox-above-background: color-mix(in srgb, var(--wiki-content-text-color) 15%, transparent);
+.ranger-navbox .ranger-header a.external,
-  --navbox-above-color: var(--wiki-content-text-color);
+.ranger-navbox .ranger-header a.external:visited {
-  --navbox-above-padding: var(--navbox-list-padding);
+   color: var(--navbox-header-link-color);
-   --navbox-below-background: var(--navbox-above-background);
+}
-  --navbox-below-color: var(--navbox-above-color);
+.ranger-navbox .ranger-header a:visited{
-   --navbox-below-padding: var(--navbox-above-padding);
+   color: var(--navbox-header-link-color--visited);
-  --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(--wiki-content-text-color) 5%, transparent);
-  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 8%, transparent);
-  --navbox-list-color: var(--wiki-content-text-color);
-  --navbox-list-padding: 0.25em 0.5em;
-  /* --navbox-group-* also apply to .ranger-subgroup */
-  --navbox-group-text-align: left;
-   --navbox-group-text-align--mobile: left; /* only for mobile view */
-  --navbox-group-background: color-mix(in srgb, var(--wiki-accent-color) 20%, transparent);
-  --navbox-group-color: var(--wiki-content-text-color);
-  --navbox-group-padding: var(--navbox-list-padding);
-  --navbox-tree-line-color: color-mix(in srgb, var(--wiki-accent-color) 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 .ranger-header a.new,
-.ranger-navbox.pill-mobile{
+.ranger-navbox .ranger-header a.new:visited{
-  /** vars for the "pill" style only (`.pill` and ".pill-mobile" clases) **/
+    color:var(--navbox-header-redlink-color);
-  --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(--wiki-content-text-color) 5%, transparent);
-  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
-  --navbox-pill-background--hover: var(--navbox-pill-background);
-  /* remove list cell background */
-  --navbox-list-background: none;
-  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 3%, transparent);
 }
-.ranger-navbox.no-underline-title-links{
+.ranger-navbox .ranger-header a:hover,
-  --navbox-title-link-color: var(--wiki-accent-link-color);
+.ranger-navbox .ranger-header a:visited:hover,
-  --navbox-title-link-decoration: none;
+.ranger-navbox .ranger-header a.external:hover,
-  --navbox-title-redlink-decoration: none;
+.ranger-navbox .ranger-header a.external:visited:hover {
+  color:var(--navbox-header-link-color--hover);
 }
-.ranger-navbox.noborder,
+.ranger-navbox .ranger-meta{
-.ranger-navbox.no-border{
+  font-size: var(--navbox-title-font-size);
-   --navbox-padding: 0px;
+  position: absolute;
-   --navbox-outer-border-width: 0px;
+   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);
-* Fallback for older browsers *
+  display: block;
-*******************************/
+  width: 0.84em; /* based on the icon graph */
-@supports not (color:color-mix(in srgb, #000, transparent)) {
+  height: 0.84em;
-	.ranger-navbox {
+  -webkit-mask: var(--mask);
-		--navbox-above-background: var(--wiki-content-background-color--secondary);
+  mask: var(--mask);
-		--navbox-list-background: transparent;
+  -webkit-mask-size: 100% 100%;
-		--navbox-list-background--striped: var(--wiki-content-background-color--secondary);
+  mask-size: 100% 100%;
-		--navbox-group-background: var(--wiki-content-background-color--secondary);
+  -webkit-mask-position: center center;
-		--navbox-tree-line-color：var(--wiki-content-background-color--secondary);
+  mask-position: center center;
-	}
+  background-color: var(--navbox-title-icon-color);
-	.ranger-navbox.pill,
-	.ranger-navbox.pill-mobile {
-	  --navbox-pill-background: var(--wiki-content-background-color--secondary);
-	  --navbox-list-background--striped: transparent;
-	}
 }
-/***************
+.ranger-navbox .ranger-meta .nv > a{
-* End fallback *
+   display: block;
-****************/
+   width: 100%;
+   height: 100%;
-.ranger-navbox{
+   opacity: 0;
-   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 .ranger-meta .nv > a > span{
-.ranger-navbox * {
+   display: block;
-   border: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
-.ranger-navbox .center *{
+.ranger-navbox .ranger-meta:has(.mw-selflink){
-  margin-left: unset;
+    display: none;
-  margin-right: unset;
 }
 .ranger-navbox,
-.ranger-navbox .ranger-section,
+.ranger-navbox .ranger-section{
-.ranger-navbox .ranger-listbox{
+   position: relative;
-   display: flex;
-  flex-direction: column;
-  gap: var(--navbox-gap);
 }
-.ranger-navbox .ranger-title,
+.ranger .mw-collapsible-toggle-placeholder{
-.ranger-navbox .ranger-header{
+   display: none;
-   text-align: center;
-  min-height: 1.5em;
-  position: relative;
-  z-index: 0;
-  font-weight: bold;
 }
-.ranger-navbox .ranger-title{
+.ranger-navbox .ranger-title > .ranger-title-text,
-  color: var(--navbox-title-color);
+.ranger-navbox .ranger-header > .ranger-header-text{
-  background: var(--navbox-title-background);
+   pointer-events: none;
-   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 > .ranger-title-text a,
-.ranger-navbox .ranger-title a:visited,
+.ranger-navbox .ranger-header > .ranger-header-text a{
-.ranger-navbox .ranger-title a:hover,
+  pointer-events: auto;
-.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 > .mw-collapsible-toggle,
-.ranger-navbox .ranger-title a.new:visited {
+.ranger-navbox .ranger-header > .mw-collapsible-toggle{
-	text-decoration: var(--navbox-title-redlink-decoration);
+  --mask: var(--icon-chevron-down);
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow:hidden;
 }
-.ranger-navbox .ranger-title a,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
-.ranger-navbox .ranger-title a.external,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
-.ranger-navbox .ranger-title a.external:visited {
+  width: 1.5em;
-   color: var(--navbox-title-link-color);
+  height: 1.5em;
+   right: var(--navbox-icon-offset--x);
 }
-.ranger-navbox .ranger-title a:visited{
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
-   color: var(--navbox-title-link-color--visited);
+   top: var(--navbox-title-padding--y);
 }
-.ranger-navbox .ranger-title a.new,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
-.ranger-navbox .ranger-title a.new:visited{
+  top: var(--navbox-header-padding--y);
-    color:var(--navbox-title-redlink-color);
 }
-.ranger-navbox .ranger-title a:hover,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
-.ranger-navbox .ranger-title a:visited:hover,
+   top: var(--navbox-subheader-padding--y);
-.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{
+.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
-   color: var(--navbox-header-color);
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
-   background: var(--navbox-header-background);
+   content: "";
-   font-size: var(--navbox-header-font-size);
+  display: block;
-   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 */
+  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-sublist .ranger-header{
+.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
-  font-size: var(--navbox-subheader-font-size);
+   top: var(--navbox-title-padding--y);
-   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 > .mw-collapsible-toggle::before{
-.ranger-navbox .ranger-header a:visited,
+  top: var(--navbox-header-padding--y);
-.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-sublist .ranger-header > .mw-collapsible-toggle::before{
-.ranger-navbox .ranger-header a.new:visited {
+  top: var(--navbox-subheader-padding--y);
-	text-decoration: var(--navbox-header-redlink-decoration);
 }
-.ranger-navbox .ranger-header a,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
-.ranger-navbox .ranger-header a.external,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
-.ranger-navbox .ranger-header a.external:visited {
+   top: 0;
-   color: var(--navbox-header-link-color);
+  right: 0;
 }
-.ranger-navbox .ranger-header a:visited{
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
-   color: var(--navbox-header-link-color--visited);
+   background-color: var(--navbox-header-icon-color);
 }
-.ranger-navbox .ranger-header a.new,
+.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
-.ranger-navbox .ranger-header a.new:visited{
+.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
-    color:var(--navbox-header-redlink-color);
+  transform: none;
 }
-.ranger-navbox .ranger-header a:hover,
+.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
-.ranger-navbox .ranger-header a:visited:hover,
+.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
-.ranger-navbox .ranger-header a.external:hover,
+.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
-.ranger-navbox .ranger-header a.external:visited:hover {
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
-   color:var(--navbox-header-link-color--hover);
+   display: none;
 }
-.ranger-navbox .ranger-meta{
+.ranger-navbox .ranger-list{
-   font-size: var(--navbox-title-font-size);
+   width: unset;
-   position: absolute;
+   padding: var(--navbox-list-padding);
-  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{
+.ranger-navbox .ranger-above{
-   --mask: var(--icon-metalinks);
+   background: var(--navbox-above-background);
-   display: block;
+   color: var(--navbox-above-color);
-  width: 0.84em; /* based on the icon graph */
+   padding: var(--navbox-above-padding);
-  height: 0.84em;
+   width: unset;
-  -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{
+.ranger-navbox .ranger-below{
-   display: block;
+   background: var(--navbox-below-background);
-   width: 100%;
+   color: var(--navbox-below-color);
-   height: 100%;
+   padding: var(--navbox-below-padding);
-   opacity: 0;
+   width: unset;
 }
-.ranger-navbox .ranger-meta .nv > a > span{
+.ranger-navbox .ranger-sublist{
-   display: block;
+   display: flex;
-   width: 100%;
+   flex-direction: column;
-   height: 100%;
+   gap: var(--navbox-gap);
-  overflow: hidden;
 }
-.ranger-navbox .ranger-meta:has(.mw-selflink){
+.ranger-navbox .ranger-section-body{
-	display: none;
+  display: grid;
+  gap: var(--navbox-gap);
+  grid-template-columns: auto minmax(0,1fr);
 }
-.ranger-navbox,
+/* gap fix for collapsed content */
-.ranger-navbox .ranger-section{
+.ranger-navbox [class^="ranger-"][hidden="until-found"]{
-   position: relative;
+   margin-top: calc(0px - var(--navbox-gap)) !important;
 }
-.ranger .mw-collapsible-toggle-placeholder{
+.ranger-navbox .ranger-row{
-   display: none;
+   display: contents;
 }
-.ranger-navbox .ranger-title > .ranger-title-text,
+.ranger-navbox .ranger-group,
-.ranger-navbox .ranger-header > .ranger-header-text{
+.ranger-navbox .ranger-subgroup{
-   pointer-events: none;
+  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 .ranger-title > .ranger-title-text a,
+.ranger-navbox.group-align-center .ranger-group,
-.ranger-navbox .ranger-header > .ranger-header-text a{
+.ranger-navbox.group-align-center .ranger-subgroup{
-   pointer-events: auto;
+   --navbox-group-text-align: center;
 }
-.ranger-navbox .ranger-title > .mw-collapsible-toggle,
+.ranger-navbox.group-align-right .ranger-group,
-.ranger-navbox .ranger-header > .mw-collapsible-toggle{
+.ranger-navbox.group-align-right .ranger-subgroup{
-   --mask: var(--icon-chevron-down);
+   --navbox-group-text-align: right;
-  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,
+/* for mobile view */
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
+.ranger-navbox.mobile-group-align-left .ranger-group,
-   width: 1.5em;
+.ranger-navbox.mobile-group-align-left .ranger-subgroup{
-  height: 1.5em;
+   --navbox-group-text-align--mobile: left;
-  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.mobile-group-align-center .ranger-group,
+.ranger-navbox.mobile-group-align-center .ranger-subgroup{
+   --navbox-group-text-align--mobile: center;
 }
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
-   top: var(--navbox-header-padding--y);
+.ranger-navbox.mobile-group-align-right .ranger-group,
+.ranger-navbox.mobile-group-align-right .ranger-subgroup{
+   --navbox-group-text-align--mobile: right;
 }
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
-   top: var(--navbox-subheader-padding--y);
+.ranger-navbox .ranger-listbox > .ranger-wrap{
+   background: var(--navbox-list-background);
+  color: var(--navbox-list-color);
+  flex-grow: 1;
 }
-.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
+.ranger-navbox .ranger-sublist{
-.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
+   flex-grow: var(--count);
-   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{
+.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
-   top: var(--navbox-title-padding--y);
+   grid-column-end: span 2;
 }
-.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
+.ranger-navbox .ranger-group,
-  top: var(--navbox-header-padding--y);
+.ranger-navbox .ranger-subgroup,
+.ranger-navbox .ranger-listbox > .ranger-wrap{
+  display: grid;
+  justify-items: stretch;
+  align-items: center;
 }
-.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
+.ranger-navbox.striped-even .ranger-even,
-   top: var(--navbox-subheader-padding--y);
+.ranger-navbox.striped-odd .ranger-odd{
+   background: var(--navbox-list-background--striped);
 }
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
+/* make links use full line height (larger click box)*/
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
+.ranger-navbox .hlist a{
-  top: 0;
+    display: inline-block;
-  right: 0;
 }
-.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
-   background-color: var(--navbox-header-icon-color);
+.ranger-navbox .align-left,
+.ranger-navbox .alignleft{
+   text-align: left;
 }
-.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
+.ranger-navbox .align-center,
-.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
+.ranger-navbox .aligncenter{
-   transform: none;
+   text-align: center;
 }
-.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
+.ranger-navbox .align-right,
-.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
+.ranger-navbox .alignright{
-.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
+   text-align: right;
-.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
-   display: none;
 }
-.ranger-navbox .ranger-list{
-  width: unset;
+/* responsive */
-   padding: var(--navbox-list-padding);
+@media screen and (max-width: 720px) {
-}
+   .ranger-navbox .ranger-section-body,
-.ranger-navbox .ranger-above{
+  .ranger-navbox .ranger-sublist {
-  background: var(--navbox-above-background);
+    display: flex;
-   color: var(--navbox-above-color);
+    flex-flow: column;
-   padding: var(--navbox-above-padding);
+   }
-  width: unset;
+   .ranger-navbox .ranger-row{
-}
+    display: block;
-.ranger-navbox .ranger-below{
+  }
-  background: var(--navbox-below-background);
+  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
-   color: var(--navbox-below-color);
+   .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
-  padding: var(--navbox-below-padding);
+    margin-top: var(--navbox-gap);
-   width: unset;
+   }
-}
+  .ranger-navbox .ranger-listbox.empty{
-.ranger-navbox .ranger-sublist{
+    display: none;
-  display: flex;
+   }
-   flex-direction: column;
+   .ranger-navbox .ranger-group,
-   gap: var(--navbox-gap);
+  .ranger-navbox .ranger-subgroup{
-}
+    text-align: var(--navbox-group-text-align--mobile);
-.ranger-navbox .ranger-section-body{
+    white-space: normal;
-  display: grid;
+  }
-  gap: var(--navbox-gap);
-  grid-template-columns: auto minmax(0,1fr);
+  .ranger-navbox .ranger-sublist {
-}
+    padding-left: var(--navbox-tree-indent);
-/* gap fix for collapsed content */
+    margin-left: var(--navbox-tree-line-indent);
-.ranger-navbox [class^="ranger-"][hidden="until-found"]{
+  }
-  margin-top: calc(0px - var(--navbox-gap)) !important;
+  .ranger-navbox .ranger-subgroup,
-}
+  .ranger-navbox .ranger-listbox {
-.ranger-navbox .ranger-row{
+    position:relative;
-  display: contents;
+  }
-}
+  .ranger-navbox .ranger-group br,
-.ranger-navbox .ranger-group,
+  .ranger-navbox .ranger-subgroup br{
-.ranger-navbox .ranger-subgroup{
+    display: none;
-   text-align: var(--navbox-group-text-align);
+   }
-   white-space: nowrap;
+  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
-  font-weight: bold;
+    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
-  background: var(--navbox-group-background);
+   }
-  color: var(--navbox-group-color);
+  .ranger-navbox .ranger-sublist .ranger-row > ::before{
-  padding: var(--navbox-group-padding);
+    position: absolute;
-   width: unset;
+    left: calc(0px - var(--navbox-tree-indent));
-}
+    top: 0;
-/* for desktop view */
+    width: var(--navbox-tree-line-width);
-.ranger-navbox.group-align-left .ranger-group,
+    height: 100%;
-.ranger-navbox.group-align-left .ranger-subgroup{
+    content: '';
-  --navbox-group-text-align: left;
+    display: block;
-}
+    background-color: var(--navbox-tree-line-color);
-.ranger-navbox.group-align-center .ranger-group,
+   }
-.ranger-navbox.group-align-center .ranger-subgroup{
+  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
-  --navbox-group-text-align: center;
+  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
-}
+    height: calc(100% + var(--navbox-gap));
-.ranger-navbox.group-align-right .ranger-group,
+  }
-.ranger-navbox.group-align-right .ranger-subgroup{
+  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
-  --navbox-group-text-align: right;
+    display: none;
-}
+  }
-/* for mobile view */
+  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
-.ranger-navbox.mobile-group-align-left .ranger-group,
+    display: block;
-.ranger-navbox.mobile-group-align-left .ranger-subgroup{
+    height: calc(50% + var(--navbox-tree-line-width)/2);
-  --navbox-group-text-align--mobile: left;
+  }
+  .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  ****/
-.ranger-navbox.mobile-group-align-center .ranger-group,
+/* remove middle dots betweem items */
-.ranger-navbox.mobile-group-align-center .ranger-subgroup{
+.ranger-navbox.pill .hlist dd:not(:last-child)::after,
-   --navbox-group-text-align--mobile: center;
+.ranger-navbox.pill .hlist li:not(:last-child)::after{
+   display: none;
 }
+/* remove parentheses around nested lists*/
-.ranger-navbox.mobile-group-align-right .ranger-group,
+.ranger-navbox.pill .hlist dd ol::before,
-.ranger-navbox.mobile-group-align-right .ranger-subgroup{
+.ranger-navbox.pill .hlist dd ul::before,
-  --navbox-group-text-align--mobile: right;
+.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 .ranger-listbox > .ranger-wrap{
+.ranger-navbox.pill .hlist ul,
-   background: var(--navbox-list-background);
+.ranger-navbox.pill .hlist ol,
-   color: var(--navbox-list-color);
+.ranger-navbox.pill .hlist dl{
-   flex-grow: 1;
+   display: inline-flex;
+   gap: var(--navbox-pill-gap);
+   flex-wrap: wrap;
 }
-.ranger-navbox .ranger-sublist{
+/* "pill" style for items */
-   flex-grow: var(--count);
+.ranger-navbox.pill .hlist li,
-}
+.ranger-navbox.pill .hlist dt,
-.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
+.ranger-navbox.pill .hlist dd{
-   grid-column-end: span 2;
+   padding: var(--navbox-pill-padding);
-}
+  border-radius: var(--navbox-pill-border-radius);
-.ranger-navbox .ranger-group,
+   box-shadow: var(--navbox-pill-box-shadow);
-.ranger-navbox .ranger-subgroup,
+  background: var(--navbox-pill-background);
-.ranger-navbox .ranger-listbox > .ranger-wrap{
+   /* 100% height */
-   display: grid;
+   display: flex;
-   justify-items: stretch;
    align-items: center;
+  /* for nested lists */
+  gap: var(--navbox-pill-gap);
+  flex-wrap: wrap;
 }
-.ranger-navbox.striped-even .ranger-even,
+/* Add a hover / focus feedback style */
-.ranger-navbox.striped-odd .ranger-odd{
+.ranger-navbox.pill .hlist dd:hover,
-   background: var(--navbox-list-background--striped);
+.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);
 }
-/* make links use full line height (larger click box)*/
+/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
-.ranger-navbox .hlist a{
+@media screen and (max-width: 720px) {
-	display: inline-block;
+    /* 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*
+**********************/
-.ranger-navbox .align-left,
+.mp-box {
-.ranger-navbox .alignleft{
+    display:flex;
-  text-align: left;
+    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 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;
 }
-.ranger-navbox .align-center,
-.ranger-navbox .aligncenter{
+.mp-box::before {
-  text-align: center;
+    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 15px rgba(66, 162, 241, 0.8),
+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);
 }
-.ranger-navbox .align-right,
-.ranger-navbox .alignright{
+.mp-body {
-  text-align: right;
+    height: 100%;
+    display: flex;
+    padding:0.5em;
+    flex-flow: column nowrap;
 }
-/* responsive */
+.mp-box.centered-content .mp-body {
-@media screen and (max-width: 720px) {
+    height: 100%;
-  .ranger-navbox .ranger-section-body,
-  .ranger-navbox .ranger-sublist {
      display: flex;
-     flex-flow: column;
+     flex-flow: column nowrap;
-  }
+    justify-content: space-evenly;
-  .ranger-navbox .ranger-row{
+}
-     display: block;
-  }
+.mp-box.has-floating-image {
-  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
+     display:block;
-  .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
+}
-     margin-top: var(--navbox-gap);
-  }
+.mp-box.has-floating-image .mp-body {
-  .ranger-navbox .ranger-listbox.empty{
+     height:unset;
-     display: none;
+     display:block;
-  }
+}
-  .ranger-navbox .ranger-group,
-  .ranger-navbox .ranger-subgroup{
+.mp-box h2 {
-     text-align: var(--navbox-group-text-align--mobile);
+     text-align:center;
-     white-space: normal;
+    font-weight:bold;
-  }
+     font-family: "Daedalus";
+    overflow: initial;
-  .ranger-navbox .ranger-sublist {
+    font-size: 4em;
-     padding-left: var(--navbox-tree-indent);
+    margin: 0.5em 0;
-     margin-left: var(--navbox-tree-line-indent);
+    padding: 0.5em 0;
-  }
+     text-shadow:
-  .ranger-navbox .ranger-subgroup,
+0 30px rgba(66, 162, 241, 0.8),
-  .ranger-navbox .ranger-listbox {
+0 15px rgba(66, 162, 241, 0.6),
-     position:relative;
+2px 5px rgba(0, 0, 0, 0.8);
-  }
+     color:var(--content-border-color);
-  .ranger-navbox .ranger-group br,
+    background:
-  .ranger-navbox .ranger-subgroup br{
+        linear-gradient(90deg, transparent 0%, rgba(66, 162, 241, 0.08) 50%, transparent 100%),
-     display: none;
+        radial-gradient(ellipse at center, rgba(26, 26, 34, 0.6), transparent 70%);
-  }
+    border-radius: 8px;
-  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
+     position: relative;
-     margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
+}
-  }
-  .ranger-navbox .ranger-sublist .ranger-row > ::before{
+.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 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;
-    left: calc(0px - var(--navbox-tree-indent));
      top: 0;
-     width: var(--navbox-tree-line-width);
+     left: 5%;
-     height: 100%;
+    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: '';
-     display: block;
+     position: absolute;
-     background-color: var(--navbox-tree-line-color);
+     bottom: 0;
-  }
+     left: 5%;
-  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
+     right: 5%;
-  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
+     height: 2px;
-     height: calc(100% + var(--navbox-gap));
+     background: linear-gradient(90deg,
-  }
+        transparent,
-  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
+        rgba(66, 162, 241, 0.5) 20%,
-     display: none;
+        rgba(255, 255, 255, 0.6) 50%,
-  }
+        rgba(66, 162, 241, 0.5) 80%,
-  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
+        transparent);
-     display: block;
+     box-shadow:
-     height: calc(50% + var(--navbox-tree-line-width)/2);
+0 12px rgba(66, 162, 241, 0.8),
-  }
+0 20px rgba(66, 162, 241, 0.5);
-  .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 */
+@keyframes welcome-pulse {
-.ranger-navbox.pill .hlist dd:not(:last-child)::after,
+%, 100% {
-.ranger-navbox.pill .hlist li:not(:last-child)::after{
+        text-shadow:
-  display: none;
+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);
+    }
 }
-/* remove parentheses around nested lists*/
-.ranger-navbox.pill .hlist dd ol::before,
+#mp-banner-container {
-.ranger-navbox.pill .hlist dd ul::before,
+    position: relative;
-.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,
+#mp-box-welcome {
-.ranger-navbox.pill .hlist ol,
+    text-align:center;
-.ranger-navbox.pill .hlist dl{
+    position:relative;
-  display: inline-flex;
+    overflow:hidden;
-  gap: var(--navbox-pill-gap);
+    background:
-  flex-wrap: wrap;
+        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);
 }
-/* "pill" style for items */
-.ranger-navbox.pill .hlist li,
+#mp-welcome {
-.ranger-navbox.pill .hlist dt,
+    display:flex;
-.ranger-navbox.pill .hlist dd{
+    flex-flow:column nowrap;
-  padding: var(--navbox-pill-padding);
+    position: relative;
-  border-radius: var(--navbox-pill-border-radius);
+    height: 100%;
-  box-shadow: var(--navbox-pill-box-shadow);
+    font-family: var(--heading-font-family);
-  background: var(--navbox-pill-background);
+    z-index: 2;
-  /* 100% height */
+    box-sizing: border-box;
-  display: flex;
+    padding: 1em;
-  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,
+#mp-welcome .welcome-subtitle {
-.ranger-navbox.pill .hlist dd:focus,
+    height: 100%;
-.ranger-navbox.pill .hlist dt:hover,
+    font-family: var(--body-font-family);
-.ranger-navbox.pill .hlist dt:focus,
+    background:
-.ranger-navbox.pill .hlist li:hover,
+        linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 50%, rgba(76, 87, 181, 0.08)),
-.ranger-navbox.pill .hlist li:focus {
+        color-mix(in srgb, var(--background-color-base) 85%, transparent);
-  box-shadow: var(--navbox-pill-box-shadow--hover);
+    margin-left: 4px;
-  background: var(--navbox-pill-background--hover);
+    margin-right: 4px;
-}
+    margin-bottom: 4px;
-/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
+    padding: 1em;
-@media screen and (max-width: 720px) {
+    border-radius: 4px;
-	/* remove middle dots betweem items */
+    box-shadow:
-	.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
+        inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
-	.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
+2px 8px rgba(0, 0, 0, 0.4);
-	  display: none;
+    border: 1px solid rgba(66, 162, 241, 0.2);
-	}
-	/* 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;
-	}
-	/* "pill" style for items */
-	.ranger-navbox.pill-mobile .hlist li,
-	.ranger-navbox.pill-mobile .hlist dt,
-	.ranger-navbox.pill-mobile .hlist dd{
-	  /* 100% height */
-	  display: flex;
-	  align-items: center;
-	  /* for nested lists */
-	  gap: var(--navbox-pill-gap);
-	  flex-wrap: wrap;
-	}
-	/* "pill" style for items */
-	.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);
-	  /* 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-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-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 {
-* Main page layout *
+    filter: blur(5px) brightness(50%);
-********************/
-#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 */
-#mp-layout1-container {
-	display:grid;
-	grid-template-areas:
-		"welcome"
-		"about"
-		"featured"
-		"basics"
-		"gallery"
-		"links"
-		"contribute";
-	grid-template-columns:100%;
-	gap:10px;
-}
-@media screen and (min-width:990px) {
-	#mp-layout1-container {
-		grid-template-areas:
-			"welcome welcome"
-			"about about"
-			"featured basics"
-			"gallery links"
-			"contribute contribute";
-		grid-template-columns:1fr 1fr;
-	}
 }
-@media screen and (min-width:1350px) {
+.view-light #mp-banner {
-	#mp-layout1-container {
+    filter: blur(5px) contrast(50%);
-		grid-template-areas:
-			"welcome welcome welcome"
-			"about about basics"
-			"featured featured basics"
-			"gallery links links"
-			"contribute contribute contribute";
-		grid-template-columns: 2fr 1fr 2fr;
-  }
 }
-/* Example Main Page 2 Grid Layout */
+/* [[Template:MP_link]] */
-#mp-layout2-container {
+.mp-links {
-	display:grid;
+  --gap:10px;
-	grid-template-areas:
+  font-size: 1.5em;
-		"welcome"
-		"links"
-		"about"
-		"gallery"
-		"iconlists"
-		"contribute";
-	grid-template-columns:100%;
-	gap:10px;
 }
-@media screen and (min-width:990px) {
+.mp-links > ul {
-	#mp-layout2-container {
+    display: flex;
-		grid-template-areas:
+    flex-flow: row wrap;
-			"welcome links"
+    justify-content: space-evenly;
-			"gallery about"
+    margin: 2px;
-			"iconlists about"
+    gap:var(--gap);
-			"iconlists contribute";
-		grid-template-columns: 3fr 2fr;
-	}
 }
-@media screen and (min-width:1350px) {
+.mp-main > .mp-links > ul {
-	#mp-layout2-container {
+    display: grid;
-		grid-template-areas:
+    grid-template-columns: repeat(3, minmax(5em, 1fr));
-			"welcome welcome links"
-			"welcome welcome about"
-			"gallery gallery about"
-			"iconlists iconlists contribute";
-		grid-template-columns: 3fr 2fr 2fr;
-  }
 }
-/* Example Main Page 3 Grid Layout */
+@media screen and (max-width: 720px) {
-#mp-layout3-container {
+    .mp-main > .mp-links > ul {
-	display:grid;
+        grid-template-columns: 1fr;
-	grid-template-areas:
+        gap: 1em;
-    "welcome"
+     }
-     "about"
-     "featured"
+     .mp-main > .mp-links > ul > li {
-     "four"
+        margin: 0 0.5em;
-    "priority"
+    }
-		"projects"
-    "wiki";
-	grid-template-columns:100%;
-	gap:10px;
 }
-@media screen and (min-width:990px) {
+.mp-links > ul > li {
-	#mp-layout3-container {
+    display:flex;
-		grid-template-areas:
+    flex-flow:column nowrap;
-      "welcome welcome"
+    align-items:stretch;
-      "about about"
+    text-align: center;
-      "featured four"
+    box-sizing:border-box;
-			"priority projects"
+    padding-top: 0.5em;
-      "wiki wiki";
+    border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
-		grid-template-columns:1fr 1fr;
+    border-image-slice: 6;
-	}
+    border-image-width: 6px;
+    border-image-repeat: repeat repeat;
 }
-@media screen and (min-width:1350px) {
+.mp-main > .mp-links > ul > li {
-	#mp-layout3-container {
+    background:
-		grid-template-areas:
+        linear-gradient(135deg, #42a2f125 0%, transparent 50%, #4c57b525 100%),
-      "welcome welcome welcome"
+        linear-gradient(to bottom, #42a2f140, #4c57b550, #42a2f130);
-      "about about four"
+    margin: 0 3em;
-			"featured featured four"
+    box-shadow:
-			"priority projects projects"
+        inset 0 0 15px 3px #42a2f160,
-			"wiki wiki wiki";
+        inset 0 -2px 8px 0 #4c57b540,
-		grid-template-columns:2fr 1fr 2fr;
+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-box {
+.mp-main > .mp-links > ul > li::before {
-	display:flex;
+    content: '';
-	flex-flow:column nowrap;
+    position: absolute;
-	width: calc(100% - 2px);
+    top: 0;
-	box-sizing: border-box;
+    left: -100%;
-	background:rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
+    width: 100%;
-	padding:0px;
+    height: 2px;
-     border: 3px solid var(--wiki-body-background-color);
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-    box-shadow: 0 0 40px #000000;
+     animation: tech-shimmer 3s infinite;
 }
-/* border-radius:5px;
-    border-image-source: var(--wiki-content-border-image);
-    border-image-slice: 15 16;
-    border-image-width: 15px;
-    border-image-repeat: stretch;
-    */
-.mp-body {
+@keyframes tech-shimmer {
-	height: 100%;
+% { left: -100%; }
-	display: flex;
+% { left: 100%; }
-	padding:0.5em;
-	flex-flow: column nowrap;
 }
-.mp-box.centered-content .mp-body {
+.mp-main > .mp-links > ul > li:hover {
-	height: 100%;
+    background:
-	display: flex;
+        linear-gradient(135deg, #42a2f140 0%, transparent 50%, #4c57b540 100%),
-	flex-flow: column nowrap;
+        linear-gradient(to bottom, #42a2f155, #4c57b565, #42a2f145);
-	justify-content: space-evenly;
+    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-box.has-floating-image {
+.mp-links > ul > li::before {
-	display:block;
+    transition: opacity 0.5s ease-in-out;
+    z-index: 0;
+    pointer-events: none;
 }
+.mp-links > ul > li:hover::before {
-.mp-box.has-floating-image .mp-body {
+    opacity: 0.2;
-	height:unset;
-	display:block;
 }
+.mp-links > ul > li:hover {
-.mp-box h2 {
+     background-color: #42a2f180;
-	text-align:center;
-	font-weight:bold;
-	font-family:var(--wiki-heading-font-family);
-    overflow: initial;
-	font-size: 3em;
-	margin: 0;
-	padding: 5px 0;
-    text-shadow: 0 0 20px #000000;
-	color:var(--wiki-content-border-color);
-     background-color: #1a1a2280;
 }
-.mp-box .welcome-message {
+.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
-    font-size: 200%;
+.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
-    margin: 0;
+.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
-    padding: 5px 0;
+.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
-	color: #fff;
+.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
-	filter: drop-shadow(0px 2px 3px #000);
+.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-banner-container {
+.mp-links > ul > li {
-	position: relative;
+    cursor: pointer;
 }
-#mp-box-welcome {
+.mp-links > ul > li > a {
-	text-align:center;
+    display: flex;
-	position:relative;
+    align-items: center;
-	overflow:hidden;
+    justify-content: center;
+    height:100%;
+    flex:1 1 auto;
+    box-sizing:border-box;
+    padding:5px;
+    pointer-events: auto;
 }
-#mp-welcome {
+.mp-links > ul > li > a:first-child {
-	display:flex;
+  height:100%;
-	flex-flow:column nowrap;
-	position: relative;
-	height: 100%;
-	font-family: var(--wiki-heading-font-family);
-	z-index: 2;
-	box-sizing: border-box;
 }
-#mp-welcome .welcome-subtitle {
+.mp-links > ul > li > a:last-child:not(:first-child) {
-	height: 100%;
+  height:unset;
-	font-family: var(--wiki-body-font-family);
-	background:rgba(var(--wiki-body-background-color--rgb), 0.9);
-	margin-left: 4px;
-	margin-right: 4px;
-	margin-bottom: 4px;
 }
-#mp-banner {
+.mp-links.stretch,
-    position: absolute;
+.mp-links.stretch > ul {
-    width: 100%;
+     height: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 {
+.mp-links.side-image li {
-	filter: blur(5px) brightness(50%);
+    flex-flow:row nowrap;
 }
-.view-light #mp-banner {
+/* MP icon lists */
-	filter: blur(5px) contrast(50%);
+.mp-iconlists {
-}
+    display: flex;
+    flex-flow: wrap;
-/* [[Template:MP_link]] */
+    gap: 5px 20px;
-.mp-links {
-  --gap:10px;
-  font-size: 150%;
 }
-.mp-links > ul {
+.mp-iconlists > .mp-iconlist {
-	display: flex;
+    flex: 1;
-	flex-flow: row wrap;
+    min-width: fit-content;
-	justify-content: space-evenly;
-	margin: 2px;
-	gap:var(--gap);
 }
-.mp-links > ul > li {
+.mp-iconlist {
-	display:flex;
+    font-size: 4em;
-	flex-flow:column nowrap;
-	align-items:stretch;
-	text-align: center;
-	box-sizing:border-box;
-	flex: max(calc(50% - var(--gap)), 5em) 1 1;
-	transition:0.1s ease-in;
 }
-.mp-links > ul > li:hover {
+.mp-iconlist > h3 {
-	background-color:rgba(var(--wiki-content-link-color--rgb), 0.2);
+    padding: 0;
+    margin: 0;
 }
-.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
+.mp-iconlist > ul {
-.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
+    list-style: none;
-.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
+    margin: 0;
-.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:hover a {
-	text-decoration: underline;
 }
-.mp-links > ul > li > a {
+/* MP gallery */
-	display: flex;
+.mp-box ul.gallery {
-	align-items: center;
+    display: flex;
-	justify-content: center;
+    flex-flow: wrap;
-	height:100%;
+    gap: 5px 10px;
-	flex:1 1 auto;
+    align-items: flex-end;
-	box-sizing:border-box;
+    justify-content: space-evenly;
-	padding:5px;
+    margin: 0;
-}
-.mp-links > ul > li > a:first-child {
-  height:100%;
 }
-.mp-links > ul > li > a:last-child:not(:first-child) {
+.mp-box ul.gallery .gallerytext {
-  height:unset;
+    margin-top: 1em;
+    padding: 0;
+    background-color: var(--background-color-neutral-subtle);
 }
-.mp-links.stretch,
+.mp-box .gallerybox:hover .gallerytext {
-.mp-links.stretch > ul {
+    background-color: color-mix(in srgb, var(--content-link-color) 20%, transparent);
-	height:100%;
 }
-.mp-links.side-image li {
+.mp-box ul.gallery .gallerytext > p {
-	flex-flow:row nowrap;
+    margin: 0;
 }
-/* MP icon lists */
+.mp-box ul.gallery .gallerytext a {
-.mp-iconlists {
+    display: block;
-	display: flex;
+     padding: .5em 0;
-    flex-flow: wrap;
-     gap: 5px 20px;
 }
-.mp-iconlists > .mp-iconlist {
+/***********************
-	flex: 1;
+* End main page layout *
-    min-width: fit-content;
+************************/
-}
-.mp-iconlist {
+/***********************
-	font-size: 140%;
+* Start DRUID infoboxes *
-}
+************************/
-.mp-iconlist > h3 {
+.druid-container {
-	padding: 0;
+    --druid-background-color: var(--background-color-base);
-	margin: 0;
+    --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);
 }
-.mp-iconlist > ul {
+.npc-infobox {
-	list-style: none;
+    border-radius:5px;
-	margin: 0;
+    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 40px 8px rgba(66, 162, 241, 0.15),
+        inset 0 0 60px 10px rgba(66, 162, 241, 0.05),
+0 0 1px rgba(66, 162, 241, 0.2);
+    overflow: hidden;
 }
-/* MP gallery */
+.npc-infobox::before {
-.mp-box ul.gallery {
+     content: '';
-     display: flex;
+    position: absolute;
-     flex-flow: wrap;
+    top: 0;
-     gap: 5px 10px;
+     left: 0;
-     align-items: flex-end;
+    right: 0;
-     justify-content: space-evenly;
+     height: 2px;
-     margin: 0;
+     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;
 }
-.mp-box ul.gallery .gallerytext {
+@keyframes data-scan {
-	margin-top: 1em;
+% { opacity: 0.5; }
-	padding: 0;
+% { opacity: 1; }
-     background-color: var(--wiki-content-background-color--secondary);
+% { opacity: 0.5; }
 }
-.mp-box .gallerybox:hover .gallerytext {
+.npc-infobox::after {
-     background-color: rgba(var(--wiki-content-link-color--rgb), 0.2);
+    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);
 }
-.mp-box ul.gallery .gallerytext > p {
+.druid-container {
-	margin: 0;
+     background: var(--druid-background-color);
-}
+     float: right;
-.mp-box ul.gallery .gallerytext a {
-	display: block;
-    padding: .5em 0;
-}
-/***********************
-* End main page layout *
-************************/
-/***********************
-* Start DRUID infoboxes *
-************************/
-.druid-container {
-    /* These variables are designed to inherit from your wiki's color variables.
-       If your wiki uses a different naming scheme, change the inner names to match yours.
-       If your wiki doesn't use color variables you should consider doing so,
-       otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
-    */
-    --druid-background-color: var(--wiki-content-background-color, #ffffff);
-    --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
-    --druid-secondary-background-color: var(--wiki-accent-color, #36c);
-    --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
-    --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
-    --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
-    --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
-    --druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
-    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
-    --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
-    --druid-link-color: var(--wiki-content-link-color, #0645ad);
-    --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
-    --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
-    --druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
-}
-.druid-container {
-    border-radius:5px;
-	border-image-source: url("filepath://Wiki-border-white.png");
-	border-image-slice: 15 16;
-	border-image-width: 15px;
-	border-image-repeat: stretch;
-     background: var(--druid-background-color);
-     float: right;
      clear: right;
      margin: 0 0 1em 1em;
      padding: 0.5em;
-	width:100%;
+    width:100%;
-	max-width:26em;
+    max-width:26em;
      box-sizing: border-box;
      border-collapse: separate;
@@ Line 1,474: / 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;
 }
-.druid-infobox .druid-section {
+.npc-infobox .druid-title {
-     font-size: 1.25em;
+    background:
-     font-weight: 500;
+        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);
+}
+.druid-infobox .druid-section {
+     font-size: 1.25em;
+     font-weight: 500;
 }
@@ Line 1,490: / Line 1,573: @@
      font-weight:bold;
      text-align: right;
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
@@ Line 1,500: / Line 1,583: @@
 .druid-row > .druid-label,
 .druid-row > .druid-data {
-	padding-inline: 0.3em;
+    padding-inline: 0.3em;
 }
@@ Line 1,557: / Line 1,640: @@
      display:grid;
      gap: 0.3em;
-	padding: 0.35em;
+    padding: 0.35em;
 }
@@ Line 1,569: / 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 1,605: / Line 1,688: @@
 }
-/*****************************************
+body .has-worn-variant .image-base {
-Div support
+    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 {
@@ Line 1,615: / 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);
-  font-family: var(--wiki-heading-font-family);
 }
@@ Line 1,638: / Line 1,768: @@
 /*** Miscellaneous ***/
 .responsive-image {
-	max-width:100%;
+    max-width:100%;
-	height:auto;
+    height:auto;
 }
@@ Line 1,648: / 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 1,664: / 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,705: / 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,743: / 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,754: / 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,780: / 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,788: / 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,831: / Line 1,961: @@
 *************************/
-/* ===============================
+.button-expand-header {
-   Random Page Classes (Lots of legacy)
+    margin-top: 0.5em;
-   =============================== */
+    width: 100%;
+    padding: 14px 18px;
-.infoflex {
+    padding-right: 60px;
-	float: left;
+    background: var(--background-color-base);
-	padding: 0.5%;
+    color: var(--color-progressive);
-	display: flex;
+    border: 2px solid var(--color-progressive);
-	flex-wrap: wrap;
+    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;
 }
-.special-header1 {
+.button-expand-header:hover {
-	font-family: var(--wiki-heading-font-family);
+    background: var(--background-color-transparent);
-	font-size: 200%;
+     box-shadow: inset 0 0 0 2px #0f0f0f,
-	text-shadow: 1px 1px var(--wiki-accent-color);
+                inset 0 0 30px #4c57b580,
-	border: 3px inset var(--wiki-content-border-color);
+0 10px #4c57b5a0;
-	justify-content: center;
-	width: fit-content;
-	display: block;
-     margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 2%;
-    padding: 0.5%;
 }
-.special-header1 .dungeon-links {
+.button-expand-header:active {
-	font-family: var(--wiki-heading-font-family);
+     border-radius: 20px;
-	font-size: 200%;
+     transition: 0.2s;
-	text-shadow: 1px 1px var(--wiki-accent-color);
-	justify-content: center;
-	width: fit-content;
-	display: block;
-     margin-left: auto;
-     margin-right: auto;
-    margin-bottom: 2%;
-    padding: 2%;
 }
+.button-expand-header::before {
-h2 {
+    content: '[ + ]';
-	text-shadow: 1px 1px gray;
+    position: absolute;
+    right: 18px;
+    top: 50%;
+    transform: translateY(-50%);
 }
-h1 {
+.button-expand-header:has(+ .mw-collapsible:not(.mw-collapsed))::before {
-	text-shadow: 1px 1px gray;
+    content: '[ - ]';
 }
-.button-expand-header {
+.button-expand-header > span:not([typeof]) {
-	white-space: nowrap;
+    cursor: pointer;
-	text-align: center;
+     display: inline-block;
-	text-shadow: 0 0 20px var(--wiki-content-border-color);
+     position: relative;
-	transition: 0.8s ease-out background-color;
-	margin-top: 3%;
-	border: none !important;
-     border-radius: 40px;
-	padding: 0.5%;
-	display: inline-block;
-	width: stretch;
-	margin-bottom: 2% !important;
-     font-size: 3em !important;
-}
-.button-expand-header:hover {
-	background-color: #8dbec280;
-	box-shadow: 0 0 40px var(--wiki-accent-color);
      transition: 0.2s;
 }
-.button-expand-header:active {
-  box-shadow: 0 0 20px var(--wiki-accent-color);
-}
-.button-expand-header > span {
-  cursor: pointer;
-  display: inline-block;
-  position: relative;
-  transition: 0.2s;
-}
-.button-expand-header > span:after{
-  font-family: 'Pixelify Sans';
+@media screen and (max-width:720px) {
-  color: var(--wiki-content-border-color);
+    h2.mw-customtoggle > span:not([typeof])::after {
-  position: absolute;
+        display: none;
-  opacity: 0;
+    }
-  left: 120%;
-  bottom: 12%;
-  font-size: 2em;
-  transition: 0.5s;
 }
-h2.mw-customtoggle > span::after {
+a.tabber__tab {
-  content: "";
+    margin-top: 0.7em;
-  display: inline-block;
+    font-size: 2em;
-  width: 64px;
+    margin-left: 0.6em;
-  height: 64px;
+    margin-bottom: 0.7em;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='64' height='64' viewBox='0 0 24 24' stroke-width='3' stroke='%23fefcd3ff' 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") center/contain no-repeat;
-  transition: transform 0.3s ease;
-  transform: rotate(0deg);
-  top: 0.1em;
 }
-h2.mw-customtoggle:has(+ .mw-collapsible:not(.mw-collapsed)) > span::after {
+header.tabber__header {
-  transform: rotate(180deg);
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
 }
-h2.mw-customtoggle:has(+ .mw-collapsible:not(.mw-collapsed)){
+a.tabber__tab[aria-selected="true"]{
-     background-color: #8dbec280;
+    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;
 }
-/*mobile*/
+@media (hover: hover) {
-@media screen and (max-width: 720px) {
+     .tabber__tab:hover {
-     .button-expand-header {
+         box-shadow: inset 0 0 0 2px #0f0f0f,
-         background-color: #8dbec280;
+                inset 0 0 30px #4c57b580,
-         box-shadow: 0 0 40px var(--wiki-accent-color);
+0 10px #4c57b5a0;
-    }
+         background-color: var(--background-color-base);
-    .button-expand-header > span:after {
-        position: relative;
-        font-size: 1em;
-        opacity: 1;
-        left: 0;
-        bottom: 0;
-        text-align: inherit;
      }
 }
-.button-expand-header > img {
+.tabber__panel > div.mw-heading.mw-heading2 > h2 {
-     padding: 0 1em 0;
+    border-bottom: 1px solid var(--color-progressive) !important;
+     padding-bottom: 0.5em;
+    text-shadow: 0 0 20px black;
 }
-.button-expand-header:hover > span:after{
+.tabber__panel > div > h2 > span {
-  opacity: 1;
+    text-shadow: 0 0 10px black;
-  font-size: 0.75em;
+    color: var(--content-link-color);
+    margin-left: 0.1em;
+    padding: 0 0.5em 0;
 }
-.class-box {
+header.tabber__header {
-	justify-content: center;
+    box-shadow: none;
-	padding: 0 4%;
 }
+.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,
-   MP elements
+.tabber__header__next::before {
-   =============================== */
+    content: '';
+    position: absolute;
-.main-page-links {
+    top: 0;
-	font-weight: bold;
+    left: 0;
-	text-shadow: 0 0 6px #000000;
+    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);
 }
-.mp-box pre {
+.tabber__header__prev:hover,
-	font-family: var(--wiki-body-font-family);
+.tabber__header__next:hover {
-	color: var(--wiki-accent-color);
+    background:
-	border-radius:5px;
+        linear-gradient(135deg, rgba(66, 162, 241, 0.25) 0%, rgba(76, 87, 181, 0.2) 100%),
-	border-image-source: url("filepath://Wiki-border-white.png");
+        rgba(26, 26, 34, 0.9);
-	border-image-slice: 15 16;
+    border-color: rgba(66, 162, 241, 0.7);
-	border-image-width: 15px;
+    box-shadow:
-	border-image-repeat: stretch;
+        inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
-	text-align: center;
+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;
-   DRUID Boss Infoboxes
+    width: inherit;
-   =============================== */
+    height: 100%;
-/* UNHOLY */
+    background-position: center;
-.druid-data-Unholy a, .druid-data-Unholy a:visited {
+    background-repeat: no-repeat;
-	color: black;
+    background-size: 1em;
-	text-shadow:
+     filter: drop-shadow(0 0 4px rgba(66, 162, 241, 0.6));
-0 5px white, 0 0 10px white, 0 0 15px white;
 }
-/* VOIDBOUND */
+@media screen and (max-width: 720px) {
-.druid-data-Voidbound a, .druid-data-Voidbound a:visited {
+    .button-expand-header {
-	color: #e48cff;
+        background-color: #8dbec280;
-	text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
+        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;
+    }
 }
-/* BLOODSHOT */
-.druid-data-Bloodshot a, .druid-data-Bloodshot a:visited {
+.button-expand-header > img {
-	color: #d23c3c;
+    padding: 0 1em 0;
-	text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
 }
-/* ROYAL */
-.druid-data-Royal a, .druid-data-Royal a:visited {
+.button-expand-header:hover > span:after{
-	color: #a86dff;
+  opacity: 1;
-	text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
+  font-size: 0.75em;
 }
-/* GILDED */
-.druid-data-Gilded a, .druid-data-Gilded a:visited {
+.class-box {
-	color: #ffb84d;
+    background:
-	text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
+        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;
 }
-/* IRRADIATED */
-.druid-data-Irradiated a, .druid-data-Irradiated a:visited {
+.class-box::after {
-	color: #4dff4d;
+    content: '';
-	text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600;
+    position: absolute;
-}
+    bottom: 0;
-/* COMPANION */
+    left: 0;
-.druid-data-Companion a, .druid-data-Companion a:visited {
+    right: 0;
-	color: #ffd700;
+    height: 1px;
-	text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
+    background: linear-gradient(90deg,
-}
+        transparent,
-/* RUNES */
+        rgba(66, 162, 241, 0.4) 30%,
-.druid-data-Rune a, .druid-data-Rune a:visited {
+        rgba(66, 162, 241, 0.6) 50%,
-	color: #bfbfbf;
+        rgba(66, 162, 241, 0.4) 70%,
-	text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
+        transparent);
 }
-.druid-row[data-druid-section-row="Loot"] div {
-    border-top: 1px solid var(--wiki-content-border-color);
-    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;
-}
-div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
+/* ===============================
-	border-top: none;
+   MP elements
-}
+   =============================== */
-.druid-data .image {
+.main-page-links {
-	margin-left: 0%;
+    font-weight: bold;
+    text-shadow: 0 0 6px #000000;
+    margin: 1em;
 }
-.boss-percent {
+.mp-box pre {
-	float: right;
+    font-family: var(--body-font-family);
-	color: var(--wiki-content-border-color);
+    color: var(--color-progressive);
-	text-shadow: 0 0 2px var(--wiki-body-background-color), 0 0 6px var(--wiki-body-background-color), 0 0 10px var(--wiki-body-background-color);
+    border-radius:5px;
-}
+    border-image-source: var(--border-image-base);
+    border-image-slice: 6;
-.loot-data-infobox {
+    border-image-width: 6px;
-	float: left;
+    border-image-repeat: repeat repeat;
-	display: contents;
+     text-align: center;
-     align-items: center;
 }
-@keyframes glowPulse {
-% {
-    color: var(--wiki-content-border-color);
-    text-shadow: 0 0 2px var(--wiki-body-background-color);
-  }
-% {
-  	color: var(--wiki-content-border-color);
-    text-shadow: 0 0 12px var(--wiki-body-background-color);
-  }
-}
-.druid-infobox .druid-title {
-	color: var(--wiki-content-border-color);
-	font-family: "Pixelify Sans", sans-serif;
-	animation: glowPulse 7s infinite alternate;
-    line-height: 1em;
-    font-weight: 1000;
-    font-size: 2em;
-}
-.boss-infobox-subtitle {
-    font-weight: 500;
-    font-size: 0.75em;
-}
 /* ===============================
-    Dungeon Page CSS
+    DRUID Boss Infoboxes
     =============================== */
+/* UNHOLY */
+.druid-data-Unholy a, .druid-data-Unholy a:visited {
-.dungeon-page-box {
+    color: black;
-	margin: 1%;
+    text-shadow:
+0 5px white, 0 0 10px white, 0 0 15px white;
 }
+/* VOIDBOUND */
-.dungeon-page-box h2 {
+.druid-data-Voidbound a, .druid-data-Voidbound a:visited {
-	text-align: left;
+    color: #e48cff;
-	margin-left: 1%;
+    text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
-	margin-right: 2%;
 }
+/* BLOODSHOT */
-.dungeon-page-smaller-box li {
+.druid-data-Bloodshot a, .druid-data-Bloodshot a:visited {
-	display: inline-block;
+    color: #d23c3c;
-	width: 18%;
+    text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
-	margin: 0 1% 1% 0;
-	vertical-align: top;
-	text-align: center;
-	vertical-align: middle;
 }
+/* ROYAL */
-.dungeon-page-smaller-box a {
+.druid-data-Royal a, .druid-data-Royal a:visited {
-	display: flex;
+    color: #a86dff;
-	flex-direction: column;
+    text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
-	align-items: center;
-	text-align: center;
-	vertical-align: middle;
 }
+/* GILDED */
-.dungeon-page-smaller-box img {
+.druid-data-Gilded a, .druid-data-Gilded a:visited {
-     width: 100%;
+     color: #ffb84d;
-     max-width: 256px;
+     text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
-    height: auto;
 }
-.pre-dungeon {
+/* IRRADIATED */
-	width: 50%;
+.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 */
-.dungeon-enemies {
+.druid-data-Companion a, .druid-data-Companion a:visited {
-	display: flex;
+     color: #ffd700;
-     flex-wrap: wrap;
+     text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
-	width: 90%;
-     justify-content: center;
 }
+/* RUNES */
-.dungeon-enemies .druid-container {
+.druid-data-Rune a, .druid-data-Rune a:visited {
-	margin: 2%;
+    color: #bfbfbf;
+    text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
 }
-.tipstricks {
+.druid-row[data-druid-section-row="Loot"] div {
-	display: block flex;
+    padding-top: 0.75em;
-	width: 75%;
+    padding-bottom: 0.5em;
-}
+    flex-wrap: nowrap;
+    flex-direction: row;
+    display: block;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+    width: 100%;
+}
-.pre-dungeon {
+div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
-    width: -moz-fit-content;   /* Firefox, Safari, Chromium */
+     border-top: none;
-    width: -webkit-fit-content;
-     width: fit-content;
-    display: grid;
 }
-.pre-dungeon p {
+.druid-data .image {
-	margin: 2% 0;
+     margin-left: 0%;
-	border-radius:5px;
-	border-image-source: url("filepath://Wiki-border-white.png");
-	border-style: solid;
-    border-width: 0 0 3px 0;
-    border-image-slice: 4 0 4 0;
-     border-image-width: 4px 0 4px;
-    padding-bottom: 1%;
-    background: linear-gradient(to top, rgba(26,26,34, 0) 0%, rgba(26,26,34, 1) 75%, rgba(26,26,34, 1) 100%);
-	display: block;
-	width: auto;
-	padding: 1em;
 }
-.dlog {
+.loot-category-header {
-     margin-bottom: 2%;
+    display: flex;
-     background: linear-gradient(to right,rgba(31, 35, 77, 1) 0%,rgba(31, 35, 77, 1) 75%,rgba(31, 35, 77, 0) 100%);
+    align-items: center;
-     padding: 0.5%;
+    gap: 0.5em;
-     border: 3px solid;
+    padding: 0.5em 0.75em;
-     border-image: linear-gradient(to right, rgba(71, 75, 117, 1) 0%, rgba(71, 75, 117, 1) 75%, rgba(71, 75, 117, 0) 100%) 1 stretch;
+     margin: 0.75em 0 0.3em 0;
-    border-right: none;
+     background:
-    min-width: 20%;
+        linear-gradient(90deg, rgba(66, 162, 241, 0.12) 0%, transparent 100%),
-    max-width: 70%;
+        rgba(26, 26, 34, 0.4);
-    width: fit-content;
+     border-left: 2px solid rgba(66, 162, 241, 0.5);
-    text-wrap: balance;
+     border-radius: 3px;
+     box-shadow:
+        inset 0 0 15px 2px rgba(66, 162, 241, 0.05),
+1px 4px rgba(0, 0, 0, 0.4);
 }
-.dlog::before {
+.loot-category-title {
-     content: url("filepath://DNexus.png") " " url("filepath://Dlog-text.png");
+     font-weight: 600;
-     display: inline-block;
+    font-size: 0.95em;
-     margin-right: 10px;
+    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;
 }
-.dlog p {
+.loot-item-row {
-	position: relative;
+     display: flex;
-     color: #f1f1f1;
+     justify-content: space-between;
-     font-family: "Pixelify Sans", Sans-Serif;
+     align-items: center;
-     font-size: 1em;
+     padding: 0.3em 0.75em;
-     line-height: 1.4;
+     margin: 0.15em 0;
-     text-shadow: 0 0 2px #41a0ee, 0 0 4px #2a5bc7;
+     background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.02) 50%, transparent);
-     word-wrap: break-word;
+     border-radius: 2px;
-     padding: 1%;
+     transition: all 0.2s ease;
-     padding-top: 0.3%;
 }
-@media only screen and (max-width: 768px) {
+.loot-item-row:hover {
-  .daedalus-log {
+    background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.06) 50%, transparent);
-     display: none;
+     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 {
-   Skill Tree
+     display: flex;
-   =============================== */
+     align-items: center;
-   /**
+     gap: 0.5em;
- * ==============================
- * Tooltips Gadget (Base Styles)
- * ==============================
- */
-.main-tooltip {
-     border: 1px solid #cac4b5;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-     margin-bottom: 5px;
-     padding: 2px 5px;
-    background-color: #181818;
 }
-#tooltip-wrapper {
+.item-infobox div[data-druid-section] > .druid-section {
-     padding: 3px 7px 2px 3px;
+     font-weight: bolder;
+    text-shadow: 0px 2px black;
 }
-.has-redlinks,
+.druid-infobox .druid-title {
-.tooltip-loading,
+    display: flex;
-.advanced-tooltip .tooltip-contents {
+    align-items: center;
-     display: none;
+    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;
 }
-.tooltips-init-complete {
+.boss-infobox-subtitle::before {
-     cursor: help;
+     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;
 }
-.main-tooltip img {
+@keyframes subtitle-pulse {
-     vertical-align: middle;
+%, 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 {
- * ==============================
+% {
- * Skill Tree Layout
+        background-position: 0% 0%;
- * ==============================
+     }
- */
+% {
-.skill-tree {
+        background-position: 200% 0%;
-     display: flex;
+     }
-     flex-direction: column;
-     align-items: center;
-     row-gap: 15px; /* vertical spacing between rows */
 }
-/* Rows */
+@keyframes subtitle-indicator {
-.skill-tree .row {
+%, 100% {
-    display: flex;
+        opacity: 0.4;
-    justify-content: center;
+        box-shadow: 0 0 6px rgba(66, 162, 241, 0.6);
+    }
+% {
+        opacity: 1;
+        box-shadow: 0 0 10px rgba(66, 162, 241, 1);
+    }
 }
-.skill-tree .row-1 { gap: 0; }
+/* ===============================
-.skill-tree .row-2 { gap: 40px; }
+   Dungeon Page CSS
-.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;
-}
-/**
+.dungeon-page-box {
- * ==============================
+     background-color: transparent;
- * Tooltip Content Custom Styling
+     box-shadow: none;
- * ==============================
+     transition: 0.5s;
- */
+     padding: 1em;
-.tooltip-contents {
+     position: relative;
-     background-color: #333;
+     padding: 0 1em;
-     color: #fff;
+     border-radius: 0px;
-     padding: 8px;
-     border-radius: 6px;
-     line-height: 1.4em;
-     text-align: left;
-     max-width: 220px;
 }
-/* Node Title Style */
+.dungeon-page-smaller-box li {
-.skill-title {
+    display: inline-block;
-  font-weight: bold;
+    width: 18%;
-  color: #faa701; /* orange-yellow */
+    margin: 0 1% 1% 0;
-  text-shadow: 1px 1px 0px black; /* slight black outline */
+    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;
 }
-.main-tooltip p {
-	color: #54fb53;
+.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);
 }
-.main-tooltip span {
-	color: #55faf4;
+.dungeon-page-smaller-box a {
-}
+    display: flex;
-/* Node Text Style (default green, but can have inline blue words) */
+    flex-direction: column;
-.skill-text {
+    align-items: center;
-  color: #00aa00; /* green */
+    text-align: center;
+    padding: 0.5em;
 }
-.skill-text .blue {
+.dungeon-page-smaller-box li:hover,
-  color: #0066ff; /* blue for special words */
+.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);
 }
-/* item pages */
+.pre-dungeon {
+    max-width: 100%;
-.button-expand-items {
+    width: -moz-fit-content;
-  display: block;
+    width: -webkit-fit-content;
-  width: 100%;
+    width: fit-content;
-  border-radius: 200px;
+    display: block;
-  background: linear-gradient(207deg, #00000047, #ffffff54);
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  text-align: center;
 }
-h2.button-expand-items.mw-customtoggle {
+.dungeon-enemies {
-	border-bottom: 2px ridge;
+    display: flex;
-	border-image: linear-gradient(207deg, #ffffff, #000000);
+    flex-wrap: wrap;
+    max-width: 100%;
+    justify-content: center;
 }
-h3.button-expand-items.mw-customtoggle {
+.dungeon-enemies .druid-container {
-	width: 50%;
+     margin: 2%;
-    margin-left: 25%;
-     margin-top: 3%;
-    border: 1px solid transparent;
-    border-image: linear-gradient(90deg, #ffffff7a, #00000040) 1;
-    border-radius: 0px;
-    padding: 0.5%;
-    font-family: 'Outfit';
 }
-.button-expand-items:hover {
+.tipstricks {
-  transform: translateY(-2px); /* subtle lift */
+    display: flex;
-  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
+    max-width: 100%;
 }
-.button-expand-items:active {
+.pre-dungeon p {
-  transform: translateY(0);    /* pressed down */
+     margin: 1em 0;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+     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);
 }
-.display-items {
+.pre-dungeon p::before {
-	display: flex;
+    content: '';
-     flex-wrap: wrap;
+    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;
 }
-header.tabber__header {
+.dlog {
-     margin-bottom: 2em;
+     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%),
-a.tabber__tab {
+        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);
 }
-.druid-main-images-label {
-     font-size: 1.2em;
+.dlog::before {
-}
+     content: url("/wiki/Special:Redirect/file/DNexus.png") " " url("/wiki/Special:Redirect/file/Dlog-text.png");
-.druid-main-images-label.focused {
+    display: inline-block;
-     box-shadow: 0 0 20px var(--druid-link-color);
+    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;
 }
-.hoverbox:hover {
+.dlog::after {
-     background-color: var(--wiki-body-background-color);
+     content: '';
-     box-shadow: 0 0 80px var(--wiki-body-background-color);
+    position: absolute;
-     transition: 0.5s;
+     left: 0;
-     border-radius:5px;
+    top: 0;
-     border-image-source: url("filepath://Wiki-border-white.png");
+     bottom: 0;
-     border-image-slice: 15 16;
+     width: 2px;
-    border-image-width: 15px;
+     background: linear-gradient(180deg,
-     border-image-repeat: stretch;
+        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;
 }
-.hoverbox {
+@keyframes dlog-pulse {
-     background-color: none;
+%, 100% {
-    box-shadow: none;
+        opacity: 0.7;
-    border-image: none;
+        box-shadow:
-    transition: 0.5s;
+0 8px rgba(66, 162, 241, 0.8),
-     padding: 1em;
+0 15px rgba(66, 162, 241, 0.5);
-    margin-left: -0.5em;
+     }
+% {
+        opacity: 1;
+        box-shadow:
+0 12px rgba(66, 162, 241, 1),
+0 20px rgba(66, 162, 241, 0.7);
+    }
 }
-.hoverbox p {
+.dlog p {
-     padding-left: 1em;
+    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;
+	}
+	/* fixed 492px decor/book pages overflow a phone and force zoom-out */
+	.decor-page {
+		width: 100% !important;
+		max-width: 492px !important;
+		height: auto !important;
+		box-sizing: border-box !important;
+	}
+	.decor-page > p {
+		padding: 1.5em !important;
+	}
+}
+/* ============================================================
+   THE ARCHIVES — MAIN PAGE v2
+   Scoped entirely to .archive-page ([[Telos Realms Wiki]]).
+   Built from the wiki's own vocabulary: kurva pixel frames,
+   embossed Daedalus, Courier ledger notes, Minecraft palette.
+   Shared classes (.mp-links, .mp-box, .dlog) untouched.
+   ============================================================ */
+.archive-page {
+    --ar-accent: #42a2f1;
+    --ar-accent-bright: #7cc2ff;
+    --ar-cream: #feffe5;
+    --ar-line: rgba(66, 162, 241, 0.18);
+    --ar-panel: rgba(10, 14, 24, 0.85);
+    --ar-panel-raised: rgba(15, 20, 33, 0.88);
+    --ar-text: #dde5f2;
+    --ar-text-dim: #93a0b8;
+    --ar-gold: #ffc05f;
+    --ar-ease: cubic-bezier(0.32, 0.72, 0, 1);
+    --ar-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+    max-width: 1280px;
+    margin: 0 auto;
+    font-family: var(--body-font-family);
+    color: var(--ar-text);
+}
+/* --- one-time entry cascade (no looping motion) --- */
+@keyframes ar-enter {
+    from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
+    to   { opacity: 1; transform: none; filter: none; }
+}
+.archive-page > * { animation: ar-enter 0.55s var(--ar-ease-out) both; }
+.archive-page > *:nth-child(1) { animation-delay: 0.05s; }
+.archive-page > *:nth-child(2) { animation-delay: 0.12s; }
+.archive-page > *:nth-child(3) { animation-delay: 0.19s; }
+.archive-page > *:nth-child(4) { animation-delay: 0.25s; }
+.archive-page > *:nth-child(5) { animation-delay: 0.30s; }
+.archive-page > *:nth-child(6) { animation-delay: 0.34s; }
+.archive-page > *:nth-child(n+7) { animation-delay: 0.38s; }
+/* --- hero: centered greeting panel --- */
+.archive-hero {
+    text-align: center;
+    padding: 2.4em 2.4em 0;
+    background:
+        radial-gradient(ellipse at 50% -10%, rgba(66, 162, 241, 0.14), transparent 60%),
+        var(--ar-panel);
+    border-style: solid;
+    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;
+}
+.archive-hero p { margin: 0; }
+.ar-hero-emblem img { filter: drop-shadow(0 0 18px rgba(66, 162, 241, 0.55)); }
+.ar-hero-eyebrow {
+    margin-top: 0.9em;
+    font-style: italic;
+    font-size: 0.98em;
+    color: #8493ad;
+}
+.ar-hero-title {
+    font-family: var(--heading-font-family);
+    font-size: clamp(2.8em, 6.5vw, 4.6em);
+    line-height: 1.02;
+    margin-top: 0.12em;
+    color: var(--ar-cream);
+    text-rendering: geometricPrecision;
+    text-shadow:
+0.06em 0 color-mix(in srgb, currentColor 50%, black),
+0.12em 0 color-mix(in srgb, currentColor 10%, black),
+0 0.2em currentColor;
+}
+.ar-hero-sub {
+    margin: 0.6em auto 0;
+    max-width: 38em;
+    color: var(--ar-text-dim);
+    font-size: 1.08em;
+    line-height: 1.6;
+    text-wrap: balance;
+}
+.archive-status {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.4em 2.4em;
+    margin: 1.8em -2.4em 0;
+    padding: 0.85em 1.5em 1em;
+    border-top: 1px solid var(--ar-line);
+    font-size: 0.92em;
+    color: #7d92b3;
+}
+.ar-stat b { color: var(--ar-cream); font-weight: 600; margin-right: 0.15em; font-variant-numeric: tabular-nums; }
+.ar-stat-note {
+    color: #54fc54;
+    text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, black);
+}
+/* --- D's welcome ledger + the three starting records --- */
+.archive-comm {
+    display: grid;
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+    gap: 14px;
+    margin-top: 14px;
+    align-items: stretch;
+}
+.archive-transmission {
+    background: var(--ar-panel);
+    border-left: 3px solid var(--ar-accent);
+    padding: 1.2em 1.6em 1.1em;
+    box-shadow: inset 0 0 24px 4px rgba(66, 162, 241, 0.07);
+}
+.ar-comm-eyebrow {
+    font-family: 'Courier New', monospace;
+    font-weight: 700;
+    font-size: 0.88em;
+    color: #7d92b3;
+}
+.ar-comm-greeting {
+    font-family: var(--heading-font-family);
+    font-size: 2em;
+    margin-top: 0.3em;
+    color: var(--ar-cream);
+    text-rendering: geometricPrecision;
+    text-shadow:
+0.08em 0 color-mix(in srgb, currentColor 35%, black),
+0 0.2em color-mix(in srgb, currentColor 60%, transparent);
+}
+.ar-comm-greeting .swap-silverling { color: var(--ar-accent-bright); width: 6.5em; }
+.archive-transmission p {
+    margin: 0.8em 0 0;
+    color: #bcc8dd;
+    line-height: 1.62;
+}
+.ar-sign {
+    margin-top: 0.45em;
+    text-align: right;
+    font-family: var(--heading-font-family);
+    font-size: 1.7em;
+    color: var(--ar-accent-bright);
+    text-shadow: 0 0 14px rgba(66, 162, 241, 0.6), 0 2px 0 rgba(0, 0, 0, 0.6);
+}
+.ar-d {
+    color: var(--ar-accent-bright);
+    font-weight: 700;
+    text-shadow: 0 0 12px rgba(66, 162, 241, 0.65);
+}
+.ar-silver {
+    color: #cfd6e2;
+    font-weight: 600;
+    text-shadow: 0 0 10px rgba(207, 214, 226, 0.4);
+}
+.archive-directives { display: flex; flex-direction: column; gap: 10px; }
+.ar-directives-label {
+    font-family: 'Courier New', monospace;
+    font-weight: 700;
+    font-size: 0.88em;
+    color: #7d92b3;
+    padding-left: 2px;
+}
+.ar-directive {
+    display: flex;
+    align-items: center;
+    gap: 0.9em;
+    flex: 1;
+    padding: 0.6em 1em;
+    background: var(--ar-panel-raised);
+    border: 1px solid var(--ar-line);
+    cursor: pointer;
+    transition:
+        background-color 0.22s var(--ar-ease),
+        border-color 0.22s var(--ar-ease),
+        transform 0.22s var(--ar-ease),
+        box-shadow 0.22s var(--ar-ease);
+}
+.ar-directive:hover {
+    background: rgba(24, 33, 54, 0.92);
+    border-color: rgba(66, 162, 241, 0.5);
+    transform: translateY(-1px);
+    box-shadow:
+        inset 0 0 16px 2px rgba(66, 162, 241, 0.15),
+4px 14px rgba(0, 0, 0, 0.45);
+}
+.ar-directive:active { transform: translateY(0) scale(0.99); }
+.ar-directive p { margin: 0; }
+.ar-directive > a,
+.ar-directive > span[typeof] { flex-shrink: 0; }
+.ar-directive img { display: block; }
+.ar-directive-title a {
+    font-family: var(--heading-font-family);
+    font-size: 1.3em;
+    line-height: 1;
+    color: var(--ar-cream);
+    text-decoration: none;
+    text-shadow: 0 2px 0 color-mix(in srgb, currentColor 20%, black);
+}
+.ar-directive-title a:visited { color: var(--ar-cream); }
+.ar-directive-sub { color: var(--ar-text-dim); font-size: 0.88em; margin-top: 2px; }
+.ar-directive-go {
+    margin-left: auto;
+    font-size: 1.5em;
+    line-height: 1;
+    color: #5e7795;
+    transition: transform 0.22s var(--ar-ease), color 0.22s var(--ar-ease);
+}
+.ar-directive:hover .ar-directive-go { transform: translateX(3px); color: var(--ar-accent-bright); }
+/* --- section headers: ❖ marker, embossed Daedalus, D's aside --- */
+.ar-sect {
+    display: flex;
+    align-items: baseline;
+    gap: 0.6em;
+    margin: 2.2em 0 0.9em;
+}
+.ar-sect-mark {
+    color: var(--ar-accent-bright);
+    text-shadow: 0 0 10px rgba(124, 194, 255, 0.9), 0 0 5px rgba(124, 194, 255, 0.6);
+}
+.ar-sect-name {
+    font-family: var(--heading-font-family);
+    font-size: 2.1em;
+    line-height: 1;
+    color: var(--ar-cream);
+    text-rendering: geometricPrecision;
+    text-shadow:
+0.06em 0 color-mix(in srgb, currentColor 50%, black),
+0.12em 0 color-mix(in srgb, currentColor 10%, black),
+0 0.2em currentColor;
+}
+.ar-sect-sub {
+    font-style: italic;
+    color: #7d8ba5;
+    font-size: 0.95em;
+    margin-left: 0.3em;
+}
+.ar-sect::after {
+    content: '';
+    flex: 1;
+    align-self: center;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(66, 162, 241, 0.5), var(--ar-line) 40%, transparent);
+}
+/* --- record cards --- */
+.archive-grid {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 14px;
+}
+.ar-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 1em;
+    grid-column: span 4;
+    padding: 1.05em 1.15em 1em;
+    background-color: var(--ar-panel);
+    border-style: solid;
+    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;
+    cursor: pointer;
+    transition:
+        background-color 0.22s var(--ar-ease),
+        transform 0.22s var(--ar-ease),
+        box-shadow 0.22s var(--ar-ease);
+}
+.ar-w6 { grid-column: span 6; }
+.ar-w4 { grid-column: span 4; }
+.ar-w3 { grid-column: span 3; }
+.ar-card:hover {
+    background-color: rgba(20, 28, 46, 0.92);
+    transform: translateY(-2px);
+    box-shadow:
+        inset 0 0 20px 4px rgba(66, 162, 241, 0.16),
+8px 22px rgba(0, 0, 0, 0.45),
+0 22px -6px rgba(66, 162, 241, 0.45);
+}
+.ar-card:active { transform: translateY(0) scale(0.99); }
+.ar-card > a,
+.ar-card > span[typeof] { flex-shrink: 0; }
+.ar-card img {
+    display: block;
+    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
+    transition: transform 0.22s var(--ar-ease);
+}
+.ar-card:hover img { transform: translateY(-2px); }
+.ar-card-body { flex: 1; min-width: 0; }
+.ar-card-titles { display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap; }
+.ar-card-titles p { margin: 0; }
+.ar-card-titles a {
+    font-family: var(--heading-font-family);
+    font-size: 1.5em;
+    line-height: 1.05;
+    color: var(--ar-cream);
+    text-decoration: none;
+    text-rendering: geometricPrecision;
+    text-shadow:
+0.08em 0 color-mix(in srgb, currentColor 35%, black),
+0 0.15em color-mix(in srgb, currentColor 40%, transparent);
+    transition: text-shadow 0.2s var(--ar-ease);
+}
+.ar-card-titles a:visited { color: var(--ar-cream); }
+.ar-card:hover .ar-card-titles a {
+    text-shadow:
+0.08em 0 color-mix(in srgb, currentColor 35%, black),
+0 0.4em currentColor;
+}
+/* little colored annotations, same palette as the item infoboxes */
+.ar-card-tag {
+    font-size: 0.8em;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    white-space: nowrap;
+    text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black);
+}
+.ar-mc-yellow { color: #fcfc54; }
+.ar-mc-aqua   { color: #54fcfc; }
+.ar-mc-red    { color: #fc5454; }
+.ar-mc-green  { color: #54fc54; }
+.ar-mc-gold   { color: #ffc05f; }
+.ar-card-desc {
+    margin-top: 0.45em;
+    color: var(--ar-text-dim);
+    font-size: 0.93em;
+    line-height: 1.58;
+}
+.ar-card-desc p { margin: 0; }
+.ar-card-links {
+    margin-top: 0.75em;
+    padding-top: 0.65em;
+    border-top: 1px solid rgba(66, 162, 241, 0.14);
+    font-size: 0.9em;
+    line-height: 1.9;
+    color: #51617c;
+}
+.ar-card-links p { margin: 0; }
+.ar-see { font-style: italic; color: #5d6c85; margin-right: 0.3em; }
+.ar-card-links a { color: var(--ar-gold); text-decoration: none; }
+.ar-card-links a:visited { color: var(--ar-gold); }
+.ar-card-links a:hover { color: #ffd28a; text-decoration: underline; }
+/* --- footer --- */
+.archive-footer {
+    margin-top: 2.4em;
+    padding: 1.5em 1em 0.5em;
+    border-top: 1px solid var(--ar-line);
+    text-align: center;
+}
+.ar-footer-quote {
+    font-style: italic;
+    font-size: 1.05em;
+    color: #aab6cc;
+    max-width: 42em;
+    margin: 0 auto 0.9em;
+    text-wrap: balance;
+}
+.ar-footer-quote .ar-d { font-style: normal; }
+.ar-footer-line { color: #7e8ca6; font-size: 0.95em; }
+.ar-footer-links { margin-top: 0.7em; font-size: 0.92em; color: #51617c; }
+.ar-footer-links a { color: var(--ar-gold); text-decoration: none; }
+.ar-footer-links a:hover { text-decoration: underline; }
+/* --- keyboard focus --- */
+.archive-page a:focus-visible {
+    outline: 2px solid var(--ar-accent-bright);
+    outline-offset: 2px;
+}
+/* --- responsive --- */
+@media screen and (max-width: 1060px) {
+    .archive-comm { grid-template-columns: 1fr; }
+    .ar-w6 { grid-column: span 12; }
+    .ar-w4, .ar-w3 { grid-column: span 6; }
+}
+@media screen and (max-width: 720px) {
+    .archive-grid { display: flex; flex-direction: column; }
+    .archive-hero { padding: 1.6em 1.2em 0; }
+    .archive-status { margin-inline: -1.2em; padding-inline: 1.2em; gap: 0.4em 1.4em; }
+    .ar-sect { flex-wrap: wrap; margin-top: 1.8em; }
+    .ar-sect-name { font-size: 1.6em; }
+    .ar-sect-sub { flex-basis: 100%; margin-left: 1.5em; }
+    .ar-card { padding: 1em; }
+    .ar-comm-greeting { font-size: 1.6em; }
+}
+/* --- reduced motion: everything appears instantly --- */
+@media (prefers-reduced-motion: reduce) {
+    .archive-page > *,
+    .archive-page .swap-silverling::before,
+    .archive-page .swap-silverling::after { animation: none !important; }
+    .archive-page *,
+    .archive-page *::before,
+    .archive-page *::after { transition-duration: 0.01ms !important; }
+}
+/* ============================================================
+   END THE ARCHIVES — MAIN PAGE v2
+   ============================================================ */
+/* ============================================================
+   DUNGEON PAGES v2
+) .dungeon-index / .dungeon-jump — the [[Dungeons]] list page,
+      danger-graded via --tier (green → void)
+) .npc-infobox — compact infobox chrome + single-line loot rows;
+      model renders keep their template sizes
+) .dungeon-page — wiki-article layout for dungeon pages
+   Heading selectors are written long to out-rank Minerva's
+   `.content .mw-parser-output .mw-heading { display:block }`.
+   ============================================================ */
+/* smooth anchor jumps (jump bar, TOC links) */
+@media (prefers-reduced-motion: no-preference) {
+    html { scroll-behavior: smooth; }
+}
+/* --- 1) the dungeon index --- */
+/* danger palette, shared by pills, markers, rules, tile glows */
+.tier-g, .dj-g { --tier: #54fc54; }
+.tier-o, .dj-o { --tier: #fca854; }
+.tier-p, .dj-p { --tier: #cd08cd; }
+.tier-r, .dj-r { --tier: #c20f0f; }
+.tier-u, .dj-u { --tier: #8d9f97; }
+/* jump bar: one tap to any tier bracket */
+.dungeon-jump {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0.9em 0 0.3em;
+}
+.dungeon-jump .dj {
+    display: inline-block;
+    padding: 0.3em 0.85em;
+    background: rgba(15, 20, 33, 0.88);
+    border: 1px solid color-mix(in srgb, var(--tier, #42a2f1) 30%, transparent);
+    border-radius: 2px;
+    font-weight: 700;
+    font-size: 0.95em;
+    color: var(--tier, #dde5f2);
+    text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black);
+    transition:
+        border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
+        background-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
+        transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
+}
+.dungeon-jump .dj a { color: inherit; text-decoration: none; }
+.dungeon-jump .dj:hover {
+    background: rgba(24, 33, 54, 0.92);
+    border-color: color-mix(in srgb, var(--tier, #42a2f1) 70%, transparent);
+    transform: translateY(-1px);
+}
+/* bracket headings — long selectors beat Minerva's .mw-heading{display:block} */
+.dungeon-index .mw-heading3,
+.content .mw-parser-output .dungeon-index .mw-heading3 {
+    display: flex;
+    align-items: center;
+    gap: 0.7em;
+    margin: 1.6em 0 0.8em;
+    border: none;
+    min-width: 0;
+}
+.dungeon-index .mw-heading3::before {
+    content: '❖';
+    font-size: 1.1em;
+    color: var(--tier, #7cc2ff);
+    text-shadow: 0 0 10px currentColor, 1px 1px color-mix(in srgb, currentColor 20%, black);
+}
+.dungeon-index .mw-heading3::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--tier, #42a2f1) 50%, transparent),
+        color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent) 45%,
+        transparent);
+}
+.dungeon-index h3,
+.content .mw-parser-output .dungeon-index h3 {
+    flex: 0 0 auto;
+    margin: 0;
+    font-family: var(--heading-font-family);
+    font-size: 2em;
+    line-height: 1;
+    font-weight: normal;
+    color: #feffe5;
+    text-rendering: geometricPrecision;
+    text-shadow:
+0.06em 0 color-mix(in srgb, currentColor 50%, black),
+0.12em 0 color-mix(in srgb, currentColor 10%, black),
+0 0.2em currentColor;
+}
+/* portal tiles: .mp-links supplies the kurva frame + whole-tile click JS */
+.dungeon-grid { font-size: 1em; }
+.dungeon-grid > ul {
+    justify-content: flex-start;
+    gap: 12px;
+    margin: 0;
+}
+.dungeon-grid > ul > li {
+    gap: 4px;
+    padding: 0.9em 1.1em 0.8em;
+    background-color: rgba(10, 14, 24, 0.85);
+    transition:
+        background-color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
+        transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
+        box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1);
+}
+.dungeon-grid > ul > li:hover {
+    background-color: rgba(20, 28, 46, 0.92);
+    transform: translateY(-2px);
+    box-shadow:
+        inset 0 0 20px 4px color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent),
+8px 22px rgba(0, 0, 0, 0.45),
+0 24px -6px var(--tier, #42a2f1);
+}
+/* --- 2) boss & enemy infoboxes --- */
+.druid-container.npc-infobox {
+    max-width: 21.5em;
+    padding: 0.35em;
+    font-size: 0.94em;
+}
+.npc-infobox .druid-title {
+    font-size: 1.7em;
+    min-height: auto;
+    padding: 0.3em 0.5em;
+}
+.npc-infobox .druid-section {
+    font-size: 1.05em;
+    padding: 2px;
+}
+.npc-infobox div.druid-row > .druid-label,
+.npc-infobox div.druid-row > .druid-data {
+    padding-block: 1px;
+}
+/* loot: one line per drop — name + icon left, % right.
+   The old `.druid-row[data-druid-section-row="Loot"] div` rule sets
+   display:block, width:100% and justify-content:space-between on every
+   div in here; width:100% + padding overflows the box (clipped %s),
+   so everything below resets to width:auto / border-box. */
+.npc-infobox .druid-row[data-druid-section-row="Loot"] div {
+    padding: 0;
+    display: block;
+    width: auto;
+    box-sizing: border-box;
+}
+.npc-infobox .druid-row[data-druid-section-row="Loot"] > .druid-data {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: 100%;
+}
+.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-category-header,
+.npc-infobox .loot-category-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.45em;
+    padding: 0.25em 0.5em;
+    margin: 0.45em 0 0.15em;
+}
+.npc-infobox .loot-category-header img { width: 24px; height: auto; }
+.npc-infobox .loot-category-title { font-size: 0.9em; }
+.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-item-row,
+.npc-infobox .loot-item-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 0.15em 0.6em;
+    padding: 0.12em 0.4em 0.12em 0.6em;
+    margin: 0;
+    font-size: 0.95em;
+    line-height: 1.35;
+}
+.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-data-infobox,
+.npc-infobox .loot-data-infobox {
+    display: flex;
+    align-items: center;
+    gap: 0.45em;
+    min-width: 0;
+}
+.npc-infobox .loot-data-infobox img { max-height: 26px; width: auto; }
+.npc-infobox .boss-percent { font-size: 1em; flex-shrink: 0; }
+/* enemy boxes inside a dungeon page: compact cards */
+.dungeon-enemies .druid-container.npc-infobox {
+    max-width: 18em;
+    font-size: 0.9em;
+    float: none;
+    margin: 0.4em;
+}
+.dungeon-enemies .npc-infobox .druid-title { font-size: 1.35em; }
+/* --- 3) individual dungeon pages (.dungeon-page wrapper) --- */
+/* flat sections: the heading rule does the separating, not boxes */
+.dungeon-page .hoverbox,
+.dungeon-page .hoverbox:hover {
+    background: none;
+    background-color: transparent;
+    border-top: 0;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0 0.2em 0.2em;
+    margin: 0.2em 0 0.6em;
+}
+/* wiki-style headings: ❖ marker + underline rule.
+   Long selectors beat Minerva's display:block / flex-basis:0. */
+.dungeon-page .mw-heading2,
+.content .mw-parser-output .dungeon-page .mw-heading2 {
+    display: flex;
+    align-items: center;
+    gap: 0.55em;
+    margin: 1em 0 0.45em;
+    padding-bottom: 0.22em;
+    border-bottom: 1px solid rgba(66, 162, 241, 0.3);
+    min-width: 0;
+}
+.dungeon-page .mw-heading2::before {
+    content: '❖';
+    color: #7cc2ff;
+    text-shadow: 0 0 10px rgba(124, 194, 255, 0.9);
+}
+.dungeon-page h2,
+.content .mw-parser-output .dungeon-page h2 {
+    flex: 0 0 auto;
+    font-size: 1.9em;
+    margin: 0;
+}
+.dungeon-page > p,
+.dungeon-page .hoverbox > p {
+    line-height: 1.65;
+    max-width: 72ch;
+}
+/* attack patterns: slim ledger rows */
+.dungeon-page .pre-dungeon p {
+    margin: 0.4em 0;
+     padding: 0.45em 0.85em;
+    font-size: 0.97em;
+    border-radius: 2px;
+    border-left: 2px solid rgba(66, 162, 241, 0.45);
+    background: linear-gradient(90deg, rgba(66, 162, 241, 0.07), rgba(26, 26, 34, 0.6) 30%, transparent 96%);
+    box-shadow: none;
+    backdrop-filter: none;
+}
+.dungeon-page .pre-dungeon p::before { display: none; }
+.dungeon-page .dlog {
+    font-size: 1.4em;
+    margin-bottom: 0.8em;
+}
+.dungeon-page .mw-collapsible { padding-top: 0.6em; }
+.dungeon-page .button-expand-header {
+    font-size: 14px;
+    padding: 10px 50px 10px 14px;
+}
+/* dialogue tables must wrap, never force sideways scroll */
+.dungeon-page .wikitable td,
+.dungeon-page .wikitable th,
+.mw-parser-output .dungeon-page .wikitable td,
+.mw-parser-output .dungeon-page .wikitable th {
+    white-space: normal !important;
+    word-break: normal !important;
+}
+/* anchor jumps land clear of the (mobile-sticky) jump bar */
+.dungeon-index .mw-heading3 { scroll-margin-top: 4.5em; }
+/* --- mobile: the dungeon section must be readable one-handed --- */
+@media screen and (max-width: 720px) {
+    /* jump bar pins to the top and scrolls sideways — one thumb-swipe
+       to reach any tier bracket from anywhere on the page */
+    .dungeon-jump {
+        position: sticky;
+        top: 0;
+        z-index: 5;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        gap: 6px;
+        padding: 0.5em 6px;
+        margin: 0.6em -6px 0.3em;
+        background: rgba(10, 13, 20, 0.96);
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+    }
+    .dungeon-jump::-webkit-scrollbar { display: none; }
+    .dungeon-jump .dj {
+        flex-shrink: 0;
+        padding: 0.45em 0.8em;
+        font-size: 1em;
+    }
+    .dungeon-index .mw-heading3 { margin-top: 1.3em; }
+    .dungeon-index h3,
+    .content .mw-parser-output .dungeon-index h3 { font-size: 1.5em; }
+    /* two-up portal tiles, capped images (overrides the old 45px cap) */
+    .dungeon-grid > ul {
+        display: grid !important;
+        grid-template-columns: 1fr 1fr !important;
+        gap: 8px !important;
+    }
+    .dungeon-grid > ul > li {
+        width: 100% !important;
+        min-height: 0 !important;
+        margin: 0 !important;
+        padding: 0.7em 0.4em !important;
+        background: rgba(10, 14, 24, 0.85) !important;
+    }
+    .dungeon-grid > ul > li img {
+        max-width: 116px !important;
+        height: auto !important;
+        margin: 0 auto !important;
+    }
+    /* infoboxes go full width and stack */
+    .druid-container.npc-infobox { max-width: 100%; }
+    .dungeon-enemies { flex-direction: column; align-items: center; }
+    .dungeon-enemies .druid-container.npc-infobox { width: 100%; max-width: 24em; }
+    .dungeon-page .hoverbox,
+    .dungeon-page .hoverbox:hover { margin-inline: 0; padding-inline: 0; }
+    .dungeon-page .pre-dungeon p { font-size: 0.88em; padding: 0.45em 0.7em; }
+    .dungeon-page .dlog { font-size: 1.1em !important; }
+    /* keep dialogue tables inside the screen */
+    .dungeon-page .wikitable { width: 100%; }
+}
+/* ============================================================
+   END DUNGEON PAGES v2
+   ============================================================ */
+/* ============================================================
+   MOBILE READABILITY FIXES (added)
+   Keeps page content from rendering wider than the phone screen
+   (Minerva clips horizontal overflow, so over-wide content is lost
+   off the right edge) and shrinks boss/enemy infoboxes from
+   full-screen blocks back into readable cards.
+   ============================================================ */
+@media screen and (max-width: 720px) {
+    /* nothing should size itself wider than the viewport */
+    .mw-parser-output,
+    .dungeon-page,
+    .hoverbox,
+    .dungeon-clear,
+    .lore,
+    .pre-dungeon {
+        max-width: 100% !important;
+        box-sizing: border-box;
+        overflow-wrap: break-word;
+    }
+    /* .pre-dungeon is `width: fit-content`; a long non-wrapping heading
+       inside it stretches the whole section past the screen. Let it
+       fill the available width instead. */
+    .pre-dungeon {
+        width: auto !important;
+    }
+    /* ❖-marker headings are flex rows; the heading was `flex: 0 0 auto`
+       so it could neither shrink nor wrap and ran off the screen edge.
+       Allow the row to wrap and the heading to shrink + wrap its text. */
+    .dungeon-page .mw-heading2,
+    .content .mw-parser-output .dungeon-page .mw-heading2,
+    .dungeon-index .mw-heading3,
+    .content .mw-parser-output .dungeon-index .mw-heading3 {
+        /* keep the ❖ marker on the same flex line as the title and let
+           the TITLE wrap inside itself — don't wrap the flex items, or
+           the marker gets stranded on its own line */
+        flex-wrap: nowrap !important;
+        align-items: baseline !important;
+        min-width: 0 !important;
+    }
+    .dungeon-page h2,
+    .content .mw-parser-output .dungeon-page h2,
+    .dungeon-index h3,
+    .content .mw-parser-output .dungeon-index h3 {
+        flex: 0 1 auto !important;
+        min-width: 0 !important;
+        font-size: 1.35em !important;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+    }
+    /* boss / enemy infoboxes: centered cards, not full-screen blocks
+       (the 3D render + bossbar were filling the whole width) */
+    .dungeon-page .druid-container.npc-infobox,
+    .dungeon-enemies .druid-container.npc-infobox {
+        max-width: 19em !important;
+        margin: 0.6em auto !important;
+        font-size: 0.82em;
+    }
+}
+/* ============================================================
+   MOBILE — FLATTEN DECORATION FOR ACCESSIBILITY (added)
+   On phones, trade the neon glow / frame chrome / motion for flat,
+   solid, high-contrast surfaces and clean text. Desktop is untouched.
+   ============================================================ */
+@media screen and (max-width: 720px) {
+    /* 1) blurry colored text-shadows wreck legibility — remove them
+          from body text entirely... */
+    .mw-parser-output p,
+    .mw-parser-output li,
+    .mw-parser-output dd,
+    .mw-parser-output dt,
+    .mw-parser-output td,
+    .mw-parser-output th,
+    .mw-parser-output a,
+    .druid-data, .druid-label,
+    .npc-infobox div.druid-row > .druid-label,
+    .npc-infobox div.druid-row > .druid-data,
+    .boss-percent, .loot-category-title,
+    .footer-content > ul > li > a,
+    .footer-section > ul > li,
+    .ar-card-titles a, .ar-directive-title a, .ar-card-desc {
+        text-shadow: none !important;
+    }
+    /* ...and reduce headings to a single clean dark shadow (kept for
+       legibility over the page's background image) */
+    .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
+    .dungeon-page h2, .dungeon-index h3,
+    .druid-title, .druid-section, .druid-infobox .druid-title,
+    .npc-infobox .druid-title, .npc-infobox .druid-section,
+    .mp-box h2, .mp-box .welcome-message,
+    .ar-hero-title, .ar-sect-name {
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
+    }
+    /* 2) the page frame (nexus border-image + blue inner glow) eats
+          width and contrast — drop it on phones */
+    #bodyContent {
+        border-image: none !important;
+        border: none !important;
+        box-shadow: none !important;
+        padding: 1em 0.7em !important;
+    }
+    /* 3) flatten neon box-shadow glows + backdrop blur on containers */
+    .npc-infobox, .druid-container,
+    .wikitable, table.wikitable,
+    .dlog, .pre-dungeon p, .hoverbox, .hoverbox:hover,
+    .mp-box, #mp-box-welcome, .class-box, .main-welcome,
+    .button-expand-header,
+    .tab-gif-container, .gif-display-area, .tab-gif-display-area,
+    .inline-image-image > p > span > span > img,
+    .ar-card, .ar-directive, .archive-hero, .archive-transmission {
+        box-shadow: none !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+    }
+    /* 4) replace the border-image frames (tables, portal tiles,
+          infoboxes, archive cards) with flat solid borders + bg */
+    .wikitable, table.wikitable,
+    .npc-infobox, .druid-container.npc-infobox,
+    .mp-links > ul > li,
+    .ar-card, .archive-hero {
+        border-image: none !important;
+        border: 1px solid rgba(66, 162, 241, 0.35) !important;
+        background: #15151c !important;
+    }
+    /* 5) hide purely-decorative glow bars / scan lines (NOT the ❖
+          heading markers, which are real content) */
+    .mp-box::before, .mp-box::after,
+    .mp-box h2::after,
+    .mp-box .welcome-message::before, .mp-box .welcome-message::after,
+    .npc-infobox::before, .npc-infobox::after,
+    .npc-infobox .druid-title::before, .npc-infobox .druid-title::after,
+    .npc-infobox .druid-section::after,
+    .mw-footer::before,
+    .tab-gif-container::before, .gif-display-area::before,
+    .dlog::after, .pre-dungeon p::before,
+    .inline-image-caption > p::before {
+        display: none !important;
+    }
+    /* 6) stop the looping pulse / scan / shimmer animations */
+    .npc-infobox::before, .mw-footer::before,
+    .boss-infobox-subtitle, .boss-infobox-subtitle::before,
+    .dlog::after, .mp-box .welcome-message,
+    .mp-main > .mp-links > ul > li::before,
+    .archive-page > * {
+        animation: none !important;
+    }
+}
+/* ============================================================
+   MOBILE — READABLE TABLES (added)
+   The forced `white-space: nowrap` made text-heavy cells refuse to
+   wrap, so tables ballooned far wider than the phone and Minerva
+   clipped them to a sliver. Let cells wrap so the table fits the
+   screen; shrink/contain wide bits; give genuinely wide all-number
+   tables a horizontal swipe instead. No `display` change on the
+   generic rule, so layout tables are unaffected.
+   ============================================================ */
+@media screen and (max-width: 720px) {
+    .mw-parser-output .wikitable,
+    .mw-parser-output table.wikitable {
+        width: 100% !important;
+        margin-inline: 0 !important;
+    }
+    /* the key fix: cells wrap instead of forcing the table off-screen */
+    .mw-parser-output .wikitable td,
+    .mw-parser-output .wikitable th {
+        white-space: normal !important;
+        word-break: normal !important;
+        overflow-wrap: anywhere;
+        font-size: 0.82em !important;
+        padding: 6px 5px !important;
+        vertical-align: top;
+    }
+    /* oversized in-cell icons (e.g. the 128px ruleset banners) */
+    .mw-parser-output .wikitable td img,
+    .mw-parser-output .wikitable th img {
+        max-width: 64px !important;
+        height: auto !important;
+    }
+    /* math formulas don't wrap; shrink them and let any that are still
+       too wide scroll inside their own box. overflow:auto also drops
+       their min-content width to 0 so they stop stretching the cell. */
+    .wikitable div[style*="font-size:150%"],
+    .wikitable div[style*="font-size: 150%"] {
+        font-size: 105% !important;
+        max-width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    .wikitable .mwe-math-element,
+    .wikitable .mwe-math-fallback-image-inline,
+    .wikitable .mwe-math-fallback-image-display {
+        max-width: 100%;
+        height: auto;
+    }
+    /* the 8-column "Max Base Class Stats" table is all short numbers —
+       a clean left-to-right swipe reads far better than cramped wrap */
+    #mp-box-basestats .wikitable {
+        display: block;
+        width: -moz-max-content;
+        width: max-content;
+        max-width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    #mp-box-basestats .wikitable td,
+    #mp-box-basestats .wikitable th {
+        white-space: nowrap !important;
+    }
 }