.js-loading * {
    transition: none !important;
    animation: none !important;
}


:root{
    /* ================= Huxera arcane palette =================
       Single source of truth. Legacy names below are derived from these,
       so anything already reading --main-bg-color et al. follows along. */

    /* page & chrome */
    --hx-bg:            #0b0a12;
    --hx-chrome:        #14121f;
    --hx-chrome-2:      #1b1828;
    --hx-chrome-3:      #221d33;
    --hx-chrome-border: #2c2740;
    --hx-accent:        #8b5cf6;
    --hx-accent-glow:   #c4a3ff;
    --hx-accent-a25:    #8b5cf640;
    --hx-accent-a12:    #8b5cf61f;
    --hx-gold:          #d8b26a;
    --hx-gold-dim:      #8a6f3c;

    /* content panels - declared now, consumed from Phase 3 */
    --hx-panel:         #16141c;
    --hx-panel-2:       #1d1a25;
    --hx-panel-3:       #241f2e;
    --hx-row-a:         #191620;
    --hx-row-b:         #211d2b;
    --hx-hairline:      #3a3348;
    --hx-outline:       #4a4157;
    --hx-text:          #e8e2f0;
    --hx-dim:           #a79bbd;
    --hx-heading:       #f3ecff;
    --hx-muted:         #9a93b3;
    --hx-side-text:     #d7d3e4;

    /* elevation & light */
    --hx-shadow:        #00000099;
    --hx-shadow-soft:   #00000059;
    --hx-inset-hi:      #ffffff14;
    --hx-inset-lo:      #00000059;
    --hx-glow:          #8b5cf655;

    /* links & buttons */
    --hx-link:           #9d8cff;
    --hx-link-hover:     #c4a3ff;
    --hx-btn-text:       #e9dcff;
    --hx-btn-text-hover: #fff8d9;

    /* semantic: fill / dim / text-on-dark */
    --hx-ok:   #3ddc84;  --hx-ok-dim:   #1e6e3c;  --hx-ok-text:   #7ef0aa;
    --hx-err:  #ff5d5d;  --hx-err-dim:  #7a1f1f;  --hx-err-text:  #ff8f8f;
    --hx-warn: #e8b93a;  --hx-warn-dim: #6d5312;  --hx-warn-text: #ffd76a;
    --hx-info: #4aa8ff;  --hx-info-dim: #123c66;  --hx-info-text: #8ccbff;

    /* rarity tiers: fill + on-dark text */
    --hx-rar-common:   #4ade4a;  --hx-rar-common-txt:   #86f086;
    --hx-rar-uncommon: #4aa8ff;  --hx-rar-uncommon-txt: #8ccbff;
    --hx-rar-rare:     #ff5d5d;  --hx-rar-rare-txt:     #ff9494;
    --hx-rar-epic:     #c46bff;  --hx-rar-epic-dim:     #5f2a78;  --hx-rar-epic-txt: #dda6ff;
    --hx-rar-legend:   #ffd34d;  --hx-rar-legend-txt:   #ffe28a;
    --hx-rar-myth:     #cfc8dd;  --hx-rar-myth-txt:     #e3ddef;

    /* the glyph outline: near-black with a violet cast, not pure #000 */
    --hx-outline-ink:   #0a0812;

    /* ================= legacy names, now derived ================= */
    --main-bg-color: var(--hx-bg);

    --initial-txt-color: var(--hx-text);
    --middle-txt-color: var(--hx-text);
    --side-txt-color: var(--hx-side-text);
    --col-side-width: 200px;
    --col-middle-width: 785px;
    --col-gap: 25px;

    --decorative-corner-spacing-horizontal: -5px;
    --decorative-corner-spacing-vertical: -15px;

    --bar-title-color: var(--hx-heading);
    --bar-title-border: var(--hx-outline-ink);

    --bar-icon-color: var(--hx-gold);
    --bar-icon-border: var(--hx-outline-ink);

    --text-shadow-outline: -1px -1px 0 var(--bar-icon-border), 0 -1px 0 var(--bar-icon-border), 1px -1px 0 var(--bar-icon-border), 1px 0 0 var(--bar-icon-border), 1px 1px 0 var(--bar-icon-border), 0 1px 0 var(--bar-icon-border), -1px 1px 0 var(--bar-icon-border), -1px 0 0 var(--bar-icon-border);
   
   
    --text-shadow-outline-tibia: -1px 0 0 var(--bar-icon-border), 1px 0 0 var(--bar-icon-border), 0 -1px 0 var(--bar-icon-border), 0 1px 0 var(--bar-icon-border),  -1px 0 0 var(--bar-icon-border), 1px 0 0 var(--bar-icon-border), 0 -1px 0 var(--bar-icon-border), 0 1px 0 var(--bar-icon-border);

    --linklist-bg-color: var(--hx-chrome);
        --linklist-bg-color-hover: var(--hx-accent-a12);
}

.col-side{
    width: var(--col-side-width);
}
.col-middle{
    width: var(--col-middle-width);
    margin-left: var(--col-gap);
    margin-right: var(--col-gap);
}
@font-face {
  font-family: 'Martel';
  src: url('Martel.woff2') format('woff2'),
    url('Martel.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
            background-image: url(img/bg.webp);
    background-color: var(--main-bg-color);
    background-repeat: no-repeat, repeat;
    background-position: center top, left top;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
    color: var(--initial-txt-color);
     overflow-x: hidden;
}
a{
    text-decoration: none;
    transition: color ease .2s;
    font-weight: bold;
    color: var(--hx-link);
}
.col-middle a:hover {
    text-decoration: underline;
    color: var(--hx-link-hover);
}
.page-wrapper {
    display: flex;
    justify-content: center; 
}
.container {
    width: calc(var(--col-middle-width) + var(--col-side-width) + var(--col-side-width) + var(--col-gap) + var(--col-gap));
    display: flex;
    flex-wrap: wrap;
    margin: 0; 
}
.logo{
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
}
/* ---- obsidian wordmark ------------------------------------------------------
   Every image here is generated by tools/logo/build_logo_dark.py. The box is sized
   exactly to the 1024x248 canvas (aspect 4.1290) so every child's 100% mask and
   every clip-path percentage maps 1:1 onto PNG coordinates; --wm-h and top are
   what the generator prints.
   Layer order (DOM = z): base stone -> smoke (masked to the letter interiors, screen)
   -> veins glow (masked to the crack network) -> surge -> six ignite copies. Only
   transform/opacity animate; masks and backgrounds are static. */
.wordmark{
    --wm-h: 141px;
    position: absolute;
    left: 50%;
    top: 42px;               /* ink bottom lands at 176px, flush with the side widgets */
    width: calc(var(--wm-h) * 4.1290);
    height: var(--wm-h);
    margin-left: calc(var(--wm-h) * -2.0645);
    isolation: isolate;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.wordmark > div{
    position: absolute;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
}
.wm-base{
    background: url(img/wordmark.png) 0 0 / 100% 100% no-repeat;
}
.wm-smoke, .wm-veins, .wm-surge, .wm-ignite, .wm-flash, .wm-rim, .wm-lift{
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
}
.wm-smoke{
    -webkit-mask-image: url(img/wordmark-silhouette.png);
            mask-image: url(img/wordmark-silhouette.png);
    mix-blend-mode: screen;
    opacity: .40;
    overflow: hidden;
}
/* two drifting copies of one tileable noise; travel is a whole tile so the loop never jumps */
.wm-smoke::before, .wm-smoke::after{
    content: "";
    position: absolute;
    left: -256px;
    top: -256px;
    width: calc(100% + 512px);
    height: calc(100% + 512px);
    background: url(img/smoke-tile.png) 0 0 / 256px 256px repeat;
    will-change: transform;
}
.wm-smoke::before{ animation: hxSmokeA 48s linear infinite; }
.wm-smoke::after { animation: hxSmokeB 71s linear infinite; opacity: .7; }
@keyframes hxSmokeA{ to{ transform: translate3d(256px, -256px, 0); } }
@keyframes hxSmokeB{ to{ transform: translate3d(-256px, -256px, 0); } }

.wm-veins, .wm-surge, .wm-ignite, .wm-flash{
    -webkit-mask-image: url(img/wordmark-veins.png);
            mask-image: url(img/wordmark-veins.png);
}
/* light sliding along the fissures: a horizontal two-period gradient translated by
   exactly one period, plus a slow breathe on the whole layer */
.wm-veins{
    animation: hxVeinBreathe 7s ease-in-out infinite;
    will-change: opacity;
}
.wm-veins::before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 200%;
    background: repeating-linear-gradient(90deg,
        #5b3bb0 0%, #c4a3ff 14%, #8b5cf6 27%, #d9c6ff 38%, #5b3bb0 50%);
    animation: hxVeinDrift 26s linear infinite;
    will-change: transform;
}
@keyframes hxVeinDrift{ to{ transform: translate3d(-50%, 0, 0); } }
@keyframes hxVeinBreathe{ 0%, 100%{ opacity: .50; } 50%{ opacity: .92; } }

/* a surge runs H -> A THROUGH the cracks: masked to the veins and screen-blended, so
   it never glosses the stone faces the way the old shine sweep did */
.wm-surge{
    mix-blend-mode: screen;
}
.wm-surge::before{
    content: "";
    position: absolute;
    top: -10%; bottom: -10%;
    left: 0;
    width: 22%;
    background: linear-gradient(100deg,
        rgba(243,236,255,0) 0%, rgba(243,236,255,.95) 50%, rgba(243,236,255,0) 100%);
    transform: translateX(-100%);
    opacity: 0;
    animation: hxSurge 11s ease-in infinite 4s;
    will-change: transform;
}
@keyframes hxSurge{
    0%        { transform: translateX(-100%); opacity: 0; }
    2%        { opacity: 1; }
    15%       { transform: translateX(455%);  opacity: 1; }
    16%, 100% { transform: translateX(455%);  opacity: 0; }
}

/* ignite: one copy per letter, clipped to that letter's column, flared in sequence.
   --l/--r are the cut lines printed by build_logo_dark.py (re-paste after a rebuild).
   Armed by html.wm-ready, which layout.php sets once the two images have decoded. */
.wm-ignite{
    background: linear-gradient(180deg, #f3ecff 0%, #c4a3ff 55%, #8b5cf6 100%);
    opacity: 0;
    clip-path: inset(0 var(--r) 0 var(--l));
}
html.wm-ready .wm-ignite{
    animation: hxIgnite 1s ease-out both;
    animation-delay: calc(250ms + var(--i) * 150ms);
}
@keyframes hxIgnite{ 0%{ opacity: 0; } 25%{ opacity: 1; } 100%{ opacity: 0; } }
.wm-ignite.l1{ --i: 0; --l: 0%;     --r: 80.76%; }
.wm-ignite.l2{ --i: 1; --l: 19.24%; --r: 65.53%; }
.wm-ignite.l3{ --i: 2; --l: 34.47%; --r: 49.27%; }
.wm-ignite.l4{ --i: 3; --l: 50.73%; --r: 35.79%; }
.wm-ignite.l5{ --i: 4; --l: 64.21%; --r: 20.61%; }
.wm-ignite.l6{ --i: 5; --l: 79.39%; --r: 0%; }

/* lightning tie-in: sky.js adds .strike to .wordmark in the same instant as the stage flash.
   The fissures blaze (veins mask) and the stone catches a cold rim light (silhouette mask). */
.wm-flash{
    background: linear-gradient(180deg, #f6f0ff 0%, #d2bcff 50%, #9d6dff 100%);
    opacity: 0;
}
.wm-rim, .wm-lift{
    -webkit-mask-image: url(img/wordmark-silhouette.png);
            mask-image: url(img/wordmark-silhouette.png);
    background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(236, 228, 255, .9) 0%, rgba(236, 228, 255, .25) 60%, rgba(236, 228, 255, 0) 100%);
    opacity: 0;
}
.wordmark.strike .wm-flash{ animation: hxStrike .8s ease-out both; }
.wordmark.strike .wm-rim{ animation: hxStrikeRim .8s ease-out both; }
@keyframes hxStrikeRim{ 0%{ opacity: 0; } 6%{ opacity: .34; } 16%{ opacity: .06; } 28%{ opacity: .42; } 45%{ opacity: .1; } 100%{ opacity: 0; } }
.bar{
    width: 100%;
    background: url(img/bar-green.png) center bottom repeat-x;
    height: 36px;
    border-bottom: 1px solid #000;
    display: block;
}
.bar.red{
    background: url(img/bar-red.png) center bottom repeat-x;
    border-bottom: 0 none;
    height: 35px;
}
.bar.gray{
    background: url(img/bar-gray.png) center bottom repeat-x;
    
}
.bar h2{
    position: relative;
    z-index: 3;
    font-family: 'Martel';
  font-size: 20px;
  font-weight: normal;
    color: var(--bar-title-color);
    margin: 0;
    line-height: 35px;
    padding-left: 14px;
    text-transform: capitalize;
    text-shadow: -1px -1px 0 var(--bar-title-border), 0 -1px 0 var(--bar-title-border), 1px -1px 0 var(--bar-title-border), 1px 0 0 var(--bar-title-border), 1px 1px 0 var(--bar-title-border), 0 1px 0 var(--bar-title-border), -1px 1px 0 var(--bar-title-border), -1px 0 0 var(--bar-title-border);
}
.bar h2 i{
    margin-right: 6px;
    font-size: 19px;
    color: var(--bar-icon-color);
    text-shadow: -1px -1px 0 var(--bar-icon-border), 0 -1px 0 var(--bar-icon-border), 1px -1px 0 var(--bar-icon-border), 1px 0 0 var(--bar-icon-border), 1px 1px 0 var(--bar-icon-border), 0 1px 0 var(--bar-icon-border), -1px 1px 0 var(--bar-icon-border), -1px 0 0 var(--bar-icon-border);
}
.infobar {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    width: 100%;
    height: 35px;
    color: #fff;
    padding: 0 10px;
}
.infobar a{
    color: #d9c9c9;
    font-size: 11px;
    display: inline-block;
    font-weight: normal;
    padding: 3px 6px;
    border-radius: 5px;
    transition: background ease .2s;
}
.infobar a::before{
    content: unset !important;
}
.infobar a:hover{
    background: #a3a19659;
    color: inherit;
}
.infobar a i.big{
    font-size: 16px;
    margin-right: 5px;
    color: #fff;
    vertical-align: middle;
}
.infobar a span.txt{
    vertical-align: middle;
    height: 16px;
    display: inline-block;
    line-height: 16px;
}
.infobar .l {
  
}
.infobar .r {
    
}
.box-info{
    /*background: #ffdd9f24;*/
    background: url(img/infobox-bg.png) center;
    padding: 3px 0 0 0;
    position: relative;
    border-style: solid;
    border-color: inherit;
    border-image-source: url(img/content/table1-border2.png);
    border-image-width: 10px 10px 0 10px;
    border-image-slice: 10 fill;
    border-image-outset: 2px;
    border-image-repeat: repeat;
    border-radius: 3px;
    margin-left: 34px;
    margin-right: 34px;
    color: var(--middle-txt-color);
    font-size: 13px;
    text-align: center;
    font-weight: 500;
    color: #ffffff;
    text-shadow: var(--text-shadow-outline);
    position: relative;
    overflow: hidden;
    height: 26px;
}
.box-info .item{
    max-width: calc(var(--col-middle-width) - 90px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 2px auto;
    height: 17px;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-150%);
    transition: transform 0.8s ease-in-out;
    pointer-events: none;
}
.box-info .ticker-link,
.box-info .ticker-link:visited {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.box-info .ticker-link:hover,
.box-info .ticker-link:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .8);
    text-underline-offset: 2px;
    text-shadow: var(--text-shadow-outline), 0 0 6px rgba(255, 255, 255, .55);
}
.box-info .ticker-link:focus-visible {
    outline: 1px dotted rgba(255, 255, 255, .8);
    outline-offset: 2px;
}
.box-paper{

    /* padding: 10px; */
    position: relative;
    border-image-source: url(img/paper.png);
    border-image-width: 12px 12px;
    border-image-slice: 12;
    border-image-repeat: repeat;
    border-radius: 0;
    /* z-index: 5; */
    color: var(--middle-txt-color);
}
.box-info .item.no-transition {transition: none;}
.box-info .item.active {transform: translateY(0);pointer-events: auto;}
.box-info .item.exiting {transform: translateY(150%);}
.box-1{
    /*background: url(img/paper-only.png);*/
    background-color: var(--hx-panel);
    /* padding: 10px; */
    position: relative;
    border-width: 12px 2px;
    border-style: solid;
    border-color: inherit;
    border-image-source: url(img/border-outerbox3.png);
    border-image-width: 12px 2px;
    border-image-slice: 12;
    border-image-repeat: repeat;
    border-radius: 0;
    /* z-index: 5; */
    color: var(--middle-txt-color);
}
.box-side{
    /*background: url(img/paper-only.png);*/
    position: relative;
    border-width: 21px 21px;
    border-style: solid;
    border-color: inherit;
    border-image: url(img/chainborderfull.png) 21 fill repeat;
    border-image-width: 21px;
    border-radius: 0;
    /* z-index: 5; */
    padding: 0 3px;
    color: var(--side-txt-color);
    margin-bottom: calc(var(--col-gap) - 10px);
}
.box-side::after, .box-side-widget::after, .box-side-widget.gold::after{
    content: "";
    width: 190px;
    height: 30px;
    bottom: -34px;
    left: 50%;
    margin-left: -95px;
    background: url(img/sep-shard.png) no-repeat center top;
    position: absolute;
    z-index: 4;
    pointer-events: none;
}
/* the glow twin: same box, screen-blended, flashed by the storm (sky.js sets html.strike) */
.box-side::before, .box-side-widget::before, .box-side-widget.gold::before{
    content: "";
    width: 190px;
    height: 30px;
    bottom: -34px;
    left: 50%;
    margin-left: -95px;
    background: url(img/sep-shard-glow.png) no-repeat center top;
    height: 60px;
    bottom: -49px;
    position: absolute;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
}
.box-side-widget::after, .box-side-widget.gold::after{
    bottom: -26px;
}
.box-side-widget::before, .box-side-widget.gold::before{
    bottom: -41px;
}
/* NO fill-mode on any chrome strike: a finished `both` animation pins opacity 0 over the
   cascade and the hover state can never win again (that shipped once). sky.js also clears
   html.strike 1s after each flash. */
html.strike .box-side::before, html.strike .box-side-widget::before{ animation: hxChromeStrike .9s ease-out; }
/* deliberately soft (owner's call): a shadowed shimmer, not a flash - peaks ~30% under the stage bolt */
@keyframes hxChromeStrike{ 0%{ opacity: 0; } 1%, 99%{ visibility: visible; } 6%{ opacity: .58; } 16%{ opacity: .1; } 28%{ opacity: .68; } 45%{ opacity: .16; } 100%{ opacity: 0; } }
@keyframes hxIconStrike{
    0%, 100%{ filter: drop-shadow(0 0 7px #0007); }
    6%, 28%{ filter: drop-shadow(0 0 4px #c4a3ffb3) drop-shadow(0 0 10px #8b5cf6a6); }
    16%, 45%{ filter: drop-shadow(0 0 7px #0007) drop-shadow(0 0 5px #8b5cf659); }
}
html.strike .widget-title img{ animation: hxIconStrike .9s ease-out; }
html.strike .corner{ animation: hxIconStrike .9s ease-out; }
.widget-title{
    position: relative;
    width: 100%;
    height: 43px;
    background-image: url(img/plaque-red.png);
    background-repeat: repeat-x;
    margin-top: -15px;
}
.widget-title img{
position: absolute;
    left: 8px;
    top: 4px;
    z-index: 6;
    filter: drop-shadow(0 0 7px #0007);
    width: 32px;
    height: 32px;
}
.widget-title span{
    position: relative;
    z-index: 4;
    PADDING-LEFT: 24px;
    width: 100%;
    line-height: 43px;
    height: 43px;
    font-size: 17px;
    text-align: center;
    display: block;
    font-family: "Martel";
    text-shadow: var(--text-shadow-outline), 0 0 5px #000;
    color: #fff3c6;
}
.widget-title::before{
    content: "";
    position: absolute;
    left: -15px;
    top: 0;
    pointer-events: none;
    z-index: 3;
    background-image: url(img/plaque-red.png);
    background-repeat: no-repeat;
    background-position: 0 -43px;
    width: 55px;
    height: 43px;
}
.widget-title::after{
    content: "";
    position: absolute;
    right: -15px;
    top: 0;
    pointer-events: none;
    z-index: 3;
    background-image: url(img/plaque-red.png);
    background-repeat: no-repeat;
    background-position: 0 -86px;
    width: 35px;
    height: 43px;
}
.widget-title.pink, .widget-title.pink::before, .widget-title.pink::after{
    background-image: url(img/plaque-pink.png);
}
.widget-title.blue, .widget-title.blue::before, .widget-title.blue::after{
    background-image: url(img/plaque-blue.png);
}
.widget-title.green, .widget-title.green::before, .widget-title.green::after{
    background-image: url(img/plaque-green.png);
}
.widget-title.gray span{
    color: #ececde;
}
.box-side-widget{
    background: url(img/paper-only.png);
    position: relative;
    border-width: 7px 7px;
    border-style: solid;
    border-color: inherit;
    border-image: url(img/border-side.png) 7 fill repeat;
    border-image-width: 7px;
    border-radius: 0;
    /* z-index: 5; */
    padding: 0;
    color: var(--hx-text);
    margin-bottom: calc(var(--col-gap) + 10px);
}
.box-side-widget.gold{
    background: url(img/paper-only.png);
    position: relative;
    border-width: 7px 7px;
    border-style: solid;
    border-color: inherit;
    border-image: url(img/border-side2.png?v=2) 7 fill repeat;
    border-image-width: 7px;
    border-radius: 0;
    /* z-index: 5; */
    padding: 0;
    color: var(--hx-text);
    margin-bottom: calc(var(--col-gap) + 10px);
}
.linkmenu{
    margin: -3px;
}
.box-side .create-link{
    font-size: 13px;
    font-weight: 500;
    color: var(--hx-btn-text);
    text-shadow: var(--text-shadow-outline);
    display: block;
        text-align: center;
}
.box-side .create-link:hover{
    color: var(--hx-btn-text-hover);
}
.border-1{
  position: relative;
  border: 3px solid transparent;
  border-width: 11px 11px;
  border-image: url(img/cnt-inner.png) 22 fill repeat; 
  border-image-width: 22px 22px;
  margin: 4px;
    position: relative;
    box-sizing: content-box;
    image-rendering: auto !important;
}
.border-2{
    background: url(img/paper-only.png);
    font-size: 13px;
    padding: 6px;
    border-radius: 1px;
    border: 1px solid var(--hx-outline);
    box-shadow: 0 0 10px #0007 inset;
    position: relative;
}
.lady{
    width: 180px;
    height: 143px;
    background: url(img/lady.png) left bottom no-repeat;
    position: absolute;
    left: -7px;
    top: -34px;
    z-index: 2;
    pointer-events: none;
}
.content-lady, .content-pointsshop{
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.content-lady .text-desc{
    margin-left: 88px;
    text-align: center;
    font-size: 19px;
    line-height: 16px;
    font-weight: bold;
    font-family: "Martel";
    color: var(--hx-dim);
    position: absolute;
    right: 5%;
    top: 5%;
    z-index: 1;
    background-image: linear-gradient(130deg, #e8709f, #d8b26a);
    color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(8, 6, 14, 0.85)) drop-shadow(0 -1px 0 rgba(196, 163, 255, 0.22));
}
.content-lady .button, .content-pointsshop .button{
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 3;
}
.content-pointsshop .pointsshop-background{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(img/pointsshop.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    border: 1px solid var(--hx-gold-dim);
}
.content-pointsshop .text-desc{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 50px;
    text-align: center;

    color: var(--hx-text);
    font-size: 9px;
    font-family: 'Verdana';
    filter: drop-shadow(0 0 5px #000);
}
.content-pointsshop .text-desc img{
    margin: 5px 0;
}
.corner {
    background: url(img/corner-shard.png) no-repeat left top;
    width: 38px;
    height: 38px;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    /*filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.795));*/
}
.corner.lt {
    left: var(--decorative-corner-spacing-horizontal);
    top: var(--decorative-corner-spacing-vertical);
}
.corner.rt {
    right: var(--decorative-corner-spacing-horizontal);
    top: var(--decorative-corner-spacing-vertical);
    transform: rotate(90deg);
}
.corner.rb {
    right: var(--decorative-corner-spacing-horizontal);
    bottom: var(--decorative-corner-spacing-vertical);
    transform: rotate(180deg);
}
.corner.lb {
    left: var(--decorative-corner-spacing-horizontal);
    bottom: var(--decorative-corner-spacing-vertical);
    transform: rotate(270deg);
}
.chain-spacer {
    width: 100%;
    height: var(--col-gap);
    background: url(img/chain-spacer-l.png) 5px -14px repeat-y, url(img/chain-spacer-r.png) calc(100% - 5px) -14px repeat-y;
}
.col-side .chain-spacer{
    margin: -5px 0;
}
/* ---- the mascot: a real Tibia creature wreathed in a game aura (was dragon.webm) ----
   Frameless on purpose. An earlier pass put an ornate SVG picture frame around this and it
   read as a framed screenshot bolted into the sidebar; the dragon it replaced had no UI
   border either. So the creature floats and its glow bleeds into the page - no hard edge
   anywhere, nothing clipped.

   Three stacked layers, matching how the client actually renders auras
   (GameAuraFrontAndBack -> outfit.cpp draws aura layer 0 behind the creature and layer 1
   in front): aura-back, creature, aura-front. The creature ends up INSIDE the effect
   instead of under a decal. Art is baked by tools/dark_mascot.py; the aura is re-rolled
   per page load in mascot.php. */
.mascot {
    display: block;
    width: 233px;
    height: 215px;
    margin: -200px 0 -30px calc((var(--col-side-width) - 233px)/2);
    z-index: 5;
    position: relative;
}
.hx-mascot { position: relative; width: 233px; height: 215px; }
.hx-mascot .m-glow,
.hx-mascot .m-motes { position: absolute; inset: 0; width: 233px; height: 215px;
                      pointer-events: none; }

/* the plinth he stands on - the ornate base of the right-hand pedestal widget */
.hx-mascot .m-dais {
    position: absolute;
    left: 50%;
    /* The dais is what visually ATTACHES to the login box directly below it, so it is the
       thing that must sit on the sidebar's centre line - not the creature, and not the
       creature+block pair. An earlier pass shifted this +15px to centre the pair and that
       put the join 15px right of the login box, which reads as a misaligned seam. His body
       leaning left of his feet is the sprite's own asymmetry; the structural join wins. */
    margin-left: -72px;
    bottom: 0;
    width: 144px;
    height: 117px;
    pointer-events: none;
}
.hx-mascot .m-stage {
    position: absolute;
    inset: 0;
}
.hx-mascot .m-stage img {
    position: absolute;
    left: 50%;
    /* Anchored the way the pedestal widget anchors its sprites, not by bounding box.
       His ground contact sits 70.3% across the raw 64px cell (measured, see
       tools/dark_mascot.py STAND_X), so the art is offset by that fraction of its width
       rather than centred: -105px of 150. Bounding-box centring put him a fifth of a
       cell off the plinth. tools/dark_mascot.py build prints all of these numbers. */
    /* Anchored on the creature's OCCUPIED TILE, the way the pedestal widget anchors its
       sprites - the bottom-right 32x32 of the 64x64 cell, i.e. 0.75 across (STAND_X in
       tools/dark_mascot.py). Bounding-box centring hangs his feet off the block; the
       per-frame mean contact is worse, it swings across half the cell mid-stride.
       Every number here is printed by `python tools/dark_mascot.py build`. */
    margin-left: -90px;
    bottom: 54px;                     /* dais 117 tall, ground line 63 below its top */
    width: 120px;
    height: 120px;
    /* baked at final size by tools/dark_mascot.py (Scale3x x2, then LANCZOS down), so
       the browser never resamples - no nearest-neighbour stair-stepping, no bilinear mush */
    image-rendering: auto;
    transition: opacity .25s ease, transform .25s ease;
    transform-origin: 50% 100%;
}
/* No drop-shadow() on .m-creature: the browser re-derives the filter every animation
   frame, which is what made the shadow flicker. The contact shadow is a static ellipse
   in the SVG instead. */
/* Full aura behind the body, and the same frames again in front but clipped to the
   bottom of the cell, so the near arc of a ground ring crosses the feet instead of the
   face. This is the CSS stand-in for the client's two-layer aura draw. */
.hx-mascot .m-aura.back  { opacity: .95; }
.hx-mascot .m-aura.front { opacity: 1; clip-path: inset(62% 0 0 0); }

/* Floating nametag over the creature. Same recipe as the player spotlight's .toptd .nick
   (content.css): Verdana bold 11px on --hx-ok with --text-shadow-outline-tibia, which is a
   4-way 1px outline with every offset listed TWICE to double the alpha - that doubling is
   what makes it read as an in-game nametag instead of a heading. The font stack itself comes
   from the layout's existing .tibiatext class rather than being declared a third time.
   Offset -80 not -50 because the creature sits 30px left of the container centre. */
.hx-mascot .m-tag {
    position: absolute;
    left: 50%;
    margin-left: -80px;
    top: 40px;
    width: 100px;
    text-align: center;
    pointer-events: none;
    z-index: 3;
}
.hx-mascot .m-nick {
    display: block;
    color: var(--hx-ok);
    line-height: 13px;
}
.hx-mascot .m-hpbar {
    display: block;
    width: 38px;                      /* the spotlight's 27px is 32% of its 84px sprite */
    height: 4px;
    margin: 3px auto 0 auto;
    border: 1px solid #000;
    background: #000;
}
.hx-mascot .m-hpbar i {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--hx-ok);
}

/* Say-text above the nametag, the way statictext.cpp draws creature speech: the block is
   anchored by its BOTTOM (215 - .m-tag's top 40 + 2px gap) so a second line grows upward,
   and it is centred on the creature (50% - 30px, see .m-tag) rather than the box.
   mascot.js fills it, toggles .on, and adds .link for lines that go somewhere. */
.hx-mascot .m-say {
    position: absolute;
    left: 50%;
    margin-left: -130px;
    bottom: 177px;
    width: 200px;
    text-align: center;
    line-height: 13px;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}
.hx-mascot .m-say.on { opacity: 1; }
.hx-mascot .m-say.on.link { pointer-events: auto; cursor: pointer; }
.hx-mascot .m-say.link:hover .m-say-text { text-decoration: underline !important; }

@keyframes hxBreathe { 0%,100%{opacity:.62;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
@keyframes hxMote    { 0%{opacity:0;transform:translate(0,0) scale(.5)}
                       14%{opacity:.85}
                       100%{opacity:0;transform:translate(var(--x),-74px) scale(1)} }
@keyframes hxIdle    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

.hx-mascot .m-halo    { animation:hxBreathe 6.5s ease-in-out infinite; transform-origin:116px 96px; }
.hx-mascot .m-pool    { animation:hxBreathe 6.5s ease-in-out infinite .5s; transform-origin:116px 168px; }
.hx-mascot .mote      { animation:hxMote 7.5s linear infinite; animation-delay:var(--d); opacity:0; }
.hx-mascot .m-stage   { animation:hxIdle 5.5s ease-in-out infinite; }

/* hover: the whole thing wakes up rather than just highlighting */
.mascot:hover .m-creature { transform: scale(1.04); }
.mascot:hover .m-aura     { opacity: 1; transform: scale(1.07); }
.mascot:hover .m-aura.back{ opacity: 1; }
.mascot:hover .m-halo     { opacity: 1; }

@media (prefers-reduced-motion: reduce){
    .hx-mascot .m-halo, .hx-mascot .m-pool,
    .hx-mascot .mote, .hx-mascot .m-stage { animation: none; }
    .hx-mascot .mote { opacity: .5; }
    .hx-mascot .m-stage img { transition: none; }
    .hx-mascot .m-say { transition: none; }
}
.pedestal{
    position: relative;
    background-repeat: no-repeat;
    width: 233px;
    height: 215px;
    margin: -184px 0 -30px calc((var(--col-side-width) - 233px)/2);
    z-index: 5;
}
.pedestal{
    background: url(img/pedestal.png?v=hx3) no-repeat center bottom;
    margin-bottom: -27px; /* 16px lower than blazera sat it: the plate floats a hair above the Top Players band */
}
/* the gate's glow twin: fissures + plate halo, breathing at idle, shimmering on a strike */
.pedestal::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 146px;
    background: url(img/pedestal-glow.png) no-repeat center bottom;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
    animation: hxGateBreathe 9s ease-in-out infinite;
}
@keyframes hxGateBreathe{ 0%, 100%{ opacity: .22; } 50%{ opacity: .5; } }
html.strike .pedestal::before{ animation: hxChromeStrike .9s ease-out, hxGateBreathe 9s ease-in-out infinite; }
.pedestal .monster-container, .pedestal .txt{ z-index: 1; }
.pedestal + .box-side-widget{ z-index: 6; }
.pedestal .txt{
    width: 90px;
    position: absolute;
    bottom: 41px;
    height: 18px;
    left: 72px;
    text-align: center;
    font-size: 12px;
    color: var(--hx-heading);
}
#status-countdown{
    visibility: hidden;
    opacity: 0;
    font-size: 10px;
    line-height: 10px;

}
#status-countdown .muted{
    opacity: 0.7;
}
.pedestal .statustext:hover #status-original{
    visibility: hidden;
    opacity: 0;
}
.pedestal .statustext:hover #status-countdown{
    visibility: visible;
    opacity: 1;
}
.pedestal #status-original, .pedestal #status-countdown{
    position: absolute;
    transition: opacity ease .2s;
}
.pedestal .statustext{
    display: flex;
    position: relative;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 18px;
}
.monster-container {
    position: absolute;
    bottom: 106px;
    right: 106px;
    width: 32px;
    height: 32px;
    transition: all ease .3s;
}
.monster-container:hover {
    background: #ffb71b46;
    box-shadow: 0 0 3px #ffb71b, 0 0 3px #ffb71b inset;
    border-radius: 50%;
}
.rotating-monster {
    position: absolute;
    right: 0;
    bottom: 0;
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
    cursor: help;
}
.boss-orb-sprite {
    display: block;
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    animation-name: boss-orb-walk;
    animation-iteration-count: infinite;
}
@keyframes boss-orb-walk {
    to { background-position: var(--boss-strip-end) 0; }
}
.rotating-monster.hidden {
    opacity: 0;
    pointer-events: none;
}
.col-side .bigbtn{
    width: 100%;
    z-index: 6;
}
.bigbtn{
    background-image: url(img/bigbtn-violet.png);
    background-position-x: center;
    background-repeat: repeat-x;
    height: 49px;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    /* the repeat-x body is a rectangle; clip it to the caps' crystal profile (26px caps, 16px tips) */
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
}
/* colourways are real sprites now (the hue-rotate derivation is gone with bigbtn-spr.png) */
.bigbtn.green, .bigbtn.green::before, .bigbtn.green::after{ background-image: url(img/bigbtn-green.png); }
.bigbtn.green .hover, .bigbtn.green .hover::before, .bigbtn.green .hover::after{ background-image: url(img/bigbtn-green-hover.png) !important; }
.bigbtn.red, .bigbtn.red::before, .bigbtn.red::after{ background-image: url(img/bigbtn-red.png); }
.bigbtn.red .hover, .bigbtn.red .hover::before, .bigbtn.red .hover::after{ background-image: url(img/bigbtn-red-hover.png) !important; }
html.strike .bigbtn .hover{ animation: hxChromeStrike .9s ease-out; }
.bigbtn::before, .bigbtn::after, .bigbtn .hover::before, .bigbtn .hover::after{
    content: "";
    width: 26px;
    height: 49px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    background-image: url(img/bigbtn-violet.png);
    background-position: 0 -98px;
    background-repeat: no-repeat;
}
.bigbtn::after, .bigbtn .hover::after{
    left: 0 !important;
    background-position-y: -49px;
}
.bigbtn .text{
    z-index: 5;
    font-weight: bold;
    font-size: 18px;
    margin: 0 20px;
    color: #d9f7ff;
    text-shadow: 0 1px 3px #0009;
    transition: text-shadow ease .2s, color ease .2s;
    white-space: nowrap;
}
.bigbtn:hover .text{
    color: #fff;
    text-shadow: 0 1px 4px #000;
    text-decoration: none !important;
}
.bigbtn .hover{
    background-image: url(img/bigbtn-violet-hover.png) !important;
    background-position-x: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 49px;
    opacity: 0;
    transition: opacity ease .2s, visibility ease .2s;
    visibility: hidden;
    z-index: 3;
}
.bigbtn:hover .hover{
    opacity: 1;
    visibility: visible;
}
.bigbtn .hover::before, .bigbtn .hover::after{
    background-image: url(img/bigbtn-violet-hover.png) !important;
}
/* .emerald is the sidebar hero (Login / Account): the brighter amethyst with the silver rim */
.bigbtn.emerald, .bigbtn.emerald::before, .bigbtn.emerald::after{
    background-image: url(img/bigbtn-hero.png) !important;
}
.bigbtn.emerald .hover, .bigbtn.emerald .hover::before, .bigbtn.emerald .hover::after{
    background-image: url(img/bigbtn-hero-hover.png) !important;
}
.bigbtn.emerald .text{
    color: #d9fbff;
}
.socials i{
    color: var(--bar-title-color) !important;
}
.menucategory{
    position: relative;
        text-align: center;
        transition: filter ease .2s;

}
.menucategory:hover, .menucategory.active{
    filter: brightness(1.2);
}
.menucategory h2{
    padding-left: 32px;
}
.menucategory img{
    position: absolute;
    left: 0;
    top: 0;
    filter: drop-shadow(0 1px 3px #0009);
}
.menucategory::after{
    content: "";
    position: absolute;
    bottom: 2px;
    right: -1px;
    width: 12px;
    height: 12px;
    background: url(img/plus.gif) no-repeat center center;
}
.menucategory.active::after{
    background: url(img/minus.gif) no-repeat center center;
}
.linklist{
    margin: 0;
    padding: 0;
    background-color: var(--linklist-bg-color);
    list-style: none;
    position: relative;
    overflow: hidden;
    display: none;
}
.linklist li{
    position: relative;
}
.linklist li a{
        position: relative;
    display: block;
    padding: 3px 3px 3px 13px;
    color: var(--hx-side-text);
    font-weight: 600;
    transition: color ease .2s, background-color ease .1s;
    font-size: 13px;
    border-bottom: 1px solid var(--hx-hairline);
}
.linklist li a::before{
    content: "";
    left: -8px;
    top: 0;
    position: absolute;
    transition: left ease .2s, transform ease .2s;

    background: url(img/icon-activesubmenu.gif) no-repeat left center;
    width:15px;
    height: 23px;
    display: inline-block;
    vertical-align: top;
    transform: scaleX(0);
}
.linklist li a:hover{
    color: #fff;
    background-color: var(--linklist-bg-color-hover);


}.linklist li a.active{
    color: #fff;
    background: var(--hx-accent-a25);
}
.linklist li a:hover::before, .linklist li a.active::before{
    left: 1px;
    transform: scale(1);
    opacity: 1;
}
.box-side-widget .btn{
    width: calc(100% - 15px);
    font-family: 'Martel';
    font-size: 16px;
    font-weight: normal !important;
}

.outline{
    text-shadow: var(--text-shadow-outline);
}
.top-players{
    display: flex;
    flex-direction: column;
    margin: -5px;
    z-index: 3;
    position: relative;
}
.player-row{
    display: flex;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--hx-hairline);
    transition: all ease .2s;
}
.player-row:nth-child(even){
    background: var(--hx-row-b);
}
.player-row:nth-child(odd){
    background: var(--hx-row-a);
}
.player-row .l{
    margin-right: 5px
}
.player-row .l .outfit{
    width: 32px;
    height: 32px;
    display: block;
    background: var(--hx-panel-3);
    border-radius: 50%;
    position: relative;
    margin-left: 3px;
    transition: box-shadow ease .2s;
}
.player-row .l .outfit img{
    position: absolute;
    right: 0;
    bottom: 0;
    user-select: none;
    pointer-events: none;
}
.player-row .r{
    flex: 1;
}
.player-row .m{
position: relative;
    height: 30px;
    display: block;
}
.player-row .name{
    font-weight: 700;
    font-size: 13px;
    display: block;
    height: 17px;
    max-width: calc(var(--col-side-width) - 60px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: all ease-out .2s;

}
.player-row .level{
    font-size: 11px;
    color: var(--hx-dim);
    font-weight: bold;
}
.player-row .vocation{
    color: var(--hx-text);
    font-size: 13px;
    margin-left: 3px;
}
.player-row .vocation .fa-fire-flame-curved{color:var(--hx-err-text);}
.player-row .vocation .fa-snowflake{color:var(--hx-info-text);}
.player-row .vocation .fa-bow-arrow{color:var(--hx-gold);}
.player-row .vocation .fa-sword{color:var(--hx-muted);}
.player-row .rank-new{
font-weight: 600;
    font-size: 11px;
    color: var(--hx-heading);
    width: 16px;
    height: 16px;
    display: inline-block;
    text-align: center;
    line-height: 16px;
    border-radius: 50%;
    background: var(--hx-warn-dim);
    vertical-align: middle;
    vertical-align: top;
    text-shadow: 0 0 0 transparent;
}
.player-row .rank{
    font-weight: 600;
    font-size: 11px;
    color: var(--hx-text);
    width: 16px;
    height: 16px;
    display: inline-block;
    text-align: center;
    line-height: 16px;
    border-radius: 50%; 
    background: var(--hx-accent-a25);
    vertical-align: top;
    text-shadow: 0 0 0 transparent
}
.player-row:hover{
    padding-left: 5px;
    background: var(--hx-accent-a12);
}
.player-row:hover .name{
    color: var(--hx-link-hover);
    font-size: 14px;
}
.player-row:hover .outfit{
    box-shadow: 0 0 5px var(--hx-glow);
}
.footer{
    text-align: center;
    font-size: 11px;
    margin: 5px 0 80px 0;
}
/* PARALLAX BACKGROUND
   The art is 2688px wide and drawn 1:1; the stage itself spans the viewport so ultrawide
   monitors don't see it end. Full-width layers use `contain` (same aspect as the stage, so
   the art stays centred), the clouds and rain tile across, and .frame's pseudo-elements paint
   the strips beyond the art in the frame's own edge colour AT THE FRAME'S Z-LEVEL: the frame
   is near-opaque at its edges and hides the clouds there, so a strip that let the clouds show
   through read brighter than the art next to it. Characters are placed from --hx-stage-x, the
   left edge of the centred art, not from the stage edge. */
.parallax-container {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    width: max(2688px, 100vw);
    height: 1050px;
    overflow: hidden;
}
.parallax-stage {
    --hx-stage-x: calc(50% - 1344px);
    --hx-stage-edge: linear-gradient(180deg, #120522 0, #120522 850px, var(--main-bg-color) 1050px);
    position: relative;
    width: 100%;
    height: 1050px;
    overflow: hidden;
    background: var(--hx-stage-edge);
}
/* Base layer style */
.layer {
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

/* Background */
.background {
    background-image: url('img/background/background.webp');
    z-index: 1;
    width: 100%;
    height: 1050px;
    top: 0;
    left: 0;
}
.frame {
    background-image: url('img/background/frame.webp');
    z-index: 4;
    width: 100%;
    height: 1050px;
    top: 0;
    left: 0;
}
.frame::before, .frame::after {
    content: "";
    position: absolute;
    top: 0;
    width: max(0px, var(--hx-stage-x));
    height: 100%;
    background: var(--hx-stage-edge);
}
.frame::before { left: 0; }
.frame::after { right: 0; }
/* Bottom fade, drawn in CSS above the art. frame.webp is fully opaque from row 850 down, so
   the last 200px of the stage are nothing but its edge colour ramping to the page colour --
   and lossy WebP turns that near-black ramp into visible 8px blocks (in frame.webp AND in
   dirt.webp's tail). A gradient has no blocks, and it also makes the side strips and the art
   fade identically instead of a level or two apart. Starts feathering at 720 so the hand-off
   from the image's own vignette is invisible. */
.parallax-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(18, 5, 34, 0)   720px,
        rgba(18, 5, 34, .7)  790px,
        #120522              840px,
        var(--main-bg-color) 1050px);
}
.character {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}
.character1{
    background-image: url('img/background/char1.webp');
    width: 638px;
    height: 563px;
    right: calc(var(--hx-stage-x) + 260px);
    top: 0;
    transform: translate(30px, -10px);
}
.character2{
    background-image: url('img/background/char2.webp');
    width: 725px;
    height: 418px;
    right: calc(var(--hx-stage-x) + 80px);
    top: 310px;
    transform: translate(30px, 10px);
}
.character3{
    background-image: url('img/background/char3.webp');
    width: 591px;
    height: 577px;
    left: calc(var(--hx-stage-x) + 220px);
    top: 0;
    transform: translate(-30px, -10px);
}
.character4{
    background-image: url('img/background/char4.webp');
    width: 658px;
    height: 603px;
    left: calc(var(--hx-stage-x) + 200px);
    top: 190px;
    transform: translate(-30px, 10px);
}
.effects {
    background-image: url('img/background/dirt.webp');
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 1050px;
}
/* Sky. Two cloud banks generated by tools/dark_sky.py, each a 2x-wide strip translated by
   exactly one tile so the loop never jumps; the far bank drifts slower than the near one for
   depth. They sit between the scene and the characters like the old fog did. */
.effects2{
    z-index: 1;
    top: 0;
    left: 0;
    height: 1050px;
    width: 100%;
    overflow: hidden;
}
.effects2 .cloud{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 2688px);
    height: 1050px;
    background-repeat: repeat-x;
    background-size: 2688px 1050px;
    will-change: transform;
}
.effects2 .cloud-far { background-image: url('img/background/clouds-far.webp');  animation: hxDrift 170s linear infinite; }
.effects2 .cloud-near{ background-image: url('img/background/clouds-near.webp'); animation: hxDrift 105s linear infinite reverse; opacity: .85; }
@keyframes hxDrift{ to{ transform: translate3d(-2688px, 0, 0); } }
/* Phone sky: both banks at roughly half scale so they read as clouds passing, not one
   sheet sliding over the page; each layer loops by its own tile width so both wrap
   cleanly at the end of the cycle. */
.mobilefog{
    background-image: url('img/background/clouds-near.webp'), url('img/background/clouds-far.webp');
    background-size: 1100px auto, 1500px auto;
    background-repeat: repeat-x, repeat-x;
    background-position: 0 -40px, 0 0;
    opacity: .6;
    animation: hxMobileSky 220s linear infinite;
}
@keyframes hxMobileSky{ to{ background-position: -1100px -40px, -1500px 0; } }
@keyframes slide-bg {
    from { background-position: 0 0; }
    to   { background-position: 2688px 0; }
}
/* Rain: one 256x512 tile at two scales, each translated by a whole tile along its own slant.
   Under the vignette frame (z 4) so it fades at the stage edges; low opacity on purpose. */
.rain{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 1050px;
    z-index: 3;
    overflow: hidden;
    opacity: .38;
    pointer-events: none;
}
.rain::before, .rain::after{
    content: "";
    position: absolute;
    left: -384px;
    top: -768px;
    width: calc(100% + 768px);
    height: calc(100% + 1536px);
    background: url('img/background/rain.png') 0 0 / 256px 512px repeat;
    will-change: transform;
    animation: hxRainA 1.15s linear infinite;
}
.rain::after{
    background-size: 384px 768px;
    opacity: .6;
    animation: hxRainB 1.8s linear infinite;
}
@keyframes hxRainA{ to{ transform: translate3d(-72px, 512px, 0); } }
@keyframes hxRainB{ to{ transform: translate3d(-108px, 768px, 0); } }
/* Lightning: a screen-blended flash above the frame, centred where sky.js puts --lx,
   double-pulsed like a real strike. */
.lightning{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 1050px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(ellipse 40% 60% at var(--lx, 50%) 10%,
        rgba(230, 220, 255, .95) 0%,
        rgba(170, 140, 255, .55) 32%,
        rgba(120, 90, 220, 0)   72%);
}
.lightning.strike{ animation: hxStrike .8s ease-out both; }
@keyframes hxStrike{ 0%{ opacity: 0; } 6%{ opacity: .9; } 16%{ opacity: .12; } 28%{ opacity: 1; } 45%{ opacity: .2; } 100%{ opacity: 0; } }

/* MOBILEB navigation bar */
.mobilenav {
    /* no ornament band: the mark and the gems carry their own plates, so the storm shows
       through. A dark scrim fading downward keeps them legible over scrolling content. */
    background: linear-gradient(180deg, rgba(11, 10, 18, .88) 0%, rgba(11, 10, 18, .55) 60%, rgba(11, 10, 18, 0) 100%);
    box-shadow: none;
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    display: none;
    transition: transform ease .2s, top ease .4s, box-shadow ease .4s;
    z-index: 55;
    justify-content: space-between;
    align-items: center;
}
.mobilenav.hidden {
    top: -70px;
    box-shadow: 0 0 0 transparent;
}
/* The nav mark is the desktop's layered wordmark with MOBILE sources: a baked base of pale
   stone letters on a dark crystal plate (tools/logo/build_logo_mobile.py) plus its own
   veins / silhouette masks, so smoke, breathe, surge and the lightning flash all run on the
   phone. No ignite here (its per-letter cut lines are desktop-canvas percentages). The
   dark obsidian stack was unreadable at 58px on the ornament band; this one is not
   (owner's call, 2026-09-05). The aspect is what the generator prints. */
.mobilenav .wm-mobile{
    --wm-h: 48px;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    left: auto;
    top: auto;
    margin-left: 0;
    width: calc(var(--wm-h) * 4.1047);
    flex: 0 0 auto;
    overflow: visible;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7));
}
.wm-mobile .wm-base{
    background-image: url(img/wordmark-mobile.png?v=hx5);
}
.wm-mobile .wm-smoke, .wm-mobile .wm-rim{
    -webkit-mask-image: url(img/wordmark-mobile-sil.png?v=hx5);
            mask-image: url(img/wordmark-mobile-sil.png?v=hx5);
}
.wm-mobile .wm-veins, .wm-mobile .wm-surge, .wm-mobile .wm-flash{
    -webkit-mask-image: url(img/wordmark-mobile-veins.png?v=hx5);
            mask-image: url(img/wordmark-mobile-veins.png?v=hx5);
}

.mobilenav a {
  color: var(--hx-side-text);
  /* no grey tap box on the mark or the gems */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
a.menutrigger, a.accpaneltrigger{
    background-image: url(img/nav-gem.png?v=hx5);
    background-repeat: no-repeat;
    background-position: center top;
    height: 62px;
    width: 62px;
    text-align: center;
    font-size: 24px;
    position: relative;
    color: var(--hx-gold);
    text-shadow: 0 1px 3px #000;
    display: block;
    margin: 4px;
}
a.menutrigger.active, a.accpaneltrigger.active{
    background-position: center bottom;
}
.menutrigger .fa , .accpaneltrigger .fa {
  transition: opacity ease .2s, visibility ease .2s;
  position: absolute;
  left: 0;
  top: 0;
  height: 62px;
  width: 62px;
  line-height: 62px;
}

.menutrigger .fa-xmark,
.menutrigger.active .fa-bars {
  visibility: hidden;
  opacity: 0;
}

.menutrigger.active .fa-xmark {
  visibility: visible;
  opacity: 1;
}

.mobilemenu {
  overflow: auto;
  display: none;
  width: 100%;
  background: rgba(0, 0, 0, 0.658);
  max-width: unset;
  max-height: unset;
  position: fixed;
  top: 70px;
  bottom: 0;
  left: 0;
  right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;  
  backdrop-filter: blur(1px);
}
/* opening: the dimmed backdrop fades in (jQuery fadeToggle) while the panel itself pops
   down from a few px above - not a slide reveal, which read as a curtain scrolling down */
.mobilemenu > *{
  animation: hxMenuPop .22s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes hxMenuPop{ from{ opacity: 0; transform: translateY(-10px); } to{ opacity: 1; transform: none; } }
.mobileaccpanel{
    position: absolute;
    right: 1px;
    top: 1px;
    width: 250px;
    background: url(img/paper-only.png);
    background-clip: padding-box; 
    border-image: url(img/paper.png) 9 repeat;
    border-image-width: 9px;
    border-width: 9px; 
    border-style: solid; 
    border-radius: 0;
    filter: drop-shadow(0 1px 5px #000);
    color: var(--middle-txt-color);
    padding: 5px;
}
.mobileaccpanel .bigbtn{
    margin: 2px 0;
    border-radius: 0;
}
.mobilemenu::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.mobilemenu .mobilemenulink {
    width: 250px;
    height: 50px;
    display: block;
    line-height: 50px;
    font-size: 25px;
    padding: 0 20px;
    background: var(--hx-chrome-2);
    border: 2px solid var(--hx-chrome-border);
    font-family: "Martel", serif;
    color: var(--hx-text);
    position: relative;
    text-transform: Capitalize;
}

.mobilemenu .mobilemenulink.active {
    background: var(--hx-chrome-3);
    color: var(--hx-gold);
}

.mobilemenu .mobilemenulink::after {
  content: "\2b";
    position: absolute;
     color: var(--hx-warn-text);
    height: 25px;
    width: 25px;
    line-height: 25px;
    font-size: 20px;
    text-align: center;
    right: 10px;
    top: 10px;
    font-family: 'fontawesome';
    background: linear-gradient(var(--hx-ok), var(--hx-ok), var(--hx-ok-dim));
    border: 1px solid var(--hx-gold);
    border-radius: 5px;
    text-shadow: 0 1px 2px #000;
    box-shadow: 0 0 2px #000 inset;
}

.mobilemenu .mobilemenulink.active::After {
    content: "\f00d";
    color: var(--hx-gold);
    background: linear-gradient(var(--hx-err), var(--hx-err-dim), var(--hx-err-dim));
}

.mobilemenu ul {
    list-style: none;
    width: 250px;
    margin: 0;
    padding: 0;
    display: none;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
}

.mobilemenu ul li a {
    width: 100%;
    display: block;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: 500;
    background: var(--hx-chrome);
}

.mobilemenu ul li a.active {
    background: var(--hx-gold-dim);
    color: #fff;
}
.mobilefog {
    display: none;
}

@media only screen and (max-width: 1252px) {
    body{
        background-size: 135%;
    }
  .col-side, .parallax-container {
    display: none;
  }
  .hide-mobile{
    display: none !important;
  }
  .col-middle {
    width: 100%;
    margin: 0 5px;
  }

  .container {
    width: 100%;
  }

  .nav .right {
    display: none;
    position: absolute;
  }
  .container.main {
    margin: 140px auto 50px auto;
  }

  .mobilenav {
    display: flex;
  }
  .logo{
    display: none !important;
  }
  .mobilefog {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}
  /* server activity ticker: stays a one-line bar on mobile too -- the few
     messages that don't fit get the desktop nowrap+ellipsis treatment */
  .box-info {
    margin-left: 34px;       /* desktop inset: ends at the corner ornaments of the bar below */
    margin-right: 34px;
  }
  .box-info .item {
    max-width: 100%;         /* replace desktop 695px cap */
    padding: 0 8px;          /* keep the ellipsis off the border */
  }
}
@media only screen and (max-width: 480px) {
  /* narrowest phones: step the ticker down a size so fewer messages clip */
  .box-info {
    font-size: 12px;
  }
}
#tooltip {
    position: fixed;
    z-index: 50;
    padding: 0;
    background: transparent;
    border: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity ease-in-out 0.2s;
    /* no transform offset: tooltip.js does the offsetting and clamps the panel
       to the viewport, and a transform here would push it back off screen */
    max-width: calc(100vw - 16px);
}
/* the panels size to their content, so cap them against the viewport too --
   the 300px desktop cap is wider than a phone */
#tooltip > * {
    max-width: min(300px, calc(100vw - 16px));
}
#tooltip > .tooltip-eqitem {
    max-width: min(250px, calc(100vw - 16px));
}
/* flipped = panel sits left of the cursor, so the arrow moves to its right edge */
/* pinned = no room on either side of the cursor, so the arrow has nothing to
   point at and is hidden rather than left aiming into the page */
#tooltip.pinned > *::before {
    display: none;
}
#tooltip.flip .tooltip-black::before,
#tooltip.flip .tooltip-simple::before {
    left: auto;
    right: -8px;
    transform: scaleX(-1);
}
#tooltip.flip .tooltip-item::before {
    left: auto;
    right: -14px;
    transform: scaleX(-1);
}
#tooltip.flip .tooltip-eqitem::before {
    left: auto;
    right: -12px;
    transform: scaleX(-1);
}
#tooltip.active {
    opacity: 1;
}
.tibiatext{
    font-weight: bold;
    font-size: 11px;
    text-shadow: var(--text-shadow-outline-tibia);
    font-family: verdana;

    text-decoration: none !important;
}
.tibiatext:hover{
    text-decoration: none !important;
}

.tibiatext.green{
    color: #00F000;
}
/* the over-the-head say colour (otc statictext.cpp), not the console's #FFFF00 */
.tibiatext.yellow{
    color: #EFEF00;
}

/* ---- obsidian display type ---------------------------------------------------
   The wordmark's material for small type: New Rocker like the logo, a dark stone
   gradient, and img/vein-tile.png (periodic Worley cracks, tools/dark_sky.py) layered
   under it, all clipped to the glyphs, so headings carry the same violet fissures.
   Outline and under-glow are drop-shadow()s: a text-shadow would show through the
   transparent fill. The tile drifts slowly so the cracks feel lit from within. */
.hx-obsidian, .news-dropcap{
    font-family: 'New Rocker', 'Martel', serif;
    font-weight: 400;
    background-image:
        url(img/vein-tile.png),
        linear-gradient(180deg, #a094c4 0%, #6e628f 36%, #3d3452 64%, #292238 100%);
    background-size: 96px 96px, auto;
    background-repeat: repeat, no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 1px #0a0812) drop-shadow(0 1px 0 #0a0812) drop-shadow(0 0 7px rgba(139, 92, 246, .42));
    animation: hxVeinTile 40s linear infinite;
}
@keyframes hxVeinTile{ to{ background-position: 96px 96px, 0 0; } }

/* drop cap span added by newsDropCap() - front page + news board */
.news-dropcap {
    font-size: 40px;
    text-transform: uppercase;
    line-height: 0.7;
    margin-right: 3px;
}
.btn-container{
    display: flex;
    justify-content: space-around;
}
.server-timer{
    
}
.server-timer{
    text-align: center;
    background: #00b1cf1c;
    border-radius: 3px;
    border: 1px solid var(--hx-hairline);
    padding: 5px;
}
.timer-label{
    display: block;
    font-size: 16px;
    font-weight: bold;
    font-family: "Martel";
    background-image: linear-gradient(360deg, #7c4ee0, #c4a3ff);
    color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(8, 6, 14, 0.85)) drop-shadow(0 -1px 0 rgba(196, 163, 255, 0.22));
}
#countdown{
padding: 5px 0;
    text-align: center;
    font-size: 19px;
    color: #fff3c6;
    font-weight: 900;
    background-image: linear-gradient(360deg, #b98a3f, #f6e6bd);
    color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(8, 6, 14, 0.85)) drop-shadow(0 -1px 0 rgba(196, 163, 255, 0.22));
}
.timer-label{
    display: block;
    font-size: 16px;
    font-weight: bold;
    font-family: "Martel";
    background-image: linear-gradient(360deg, #7c4ee0, #c4a3ff);
    color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(8, 6, 14, 0.85)) drop-shadow(0 -1px 0 rgba(196, 163, 255, 0.22));
}
.events-timer{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.event-item{
    background: linear-gradient(45deg, var(--hx-panel-2) 50%, var(--hx-panel) 90%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    text-shadow: 0 1px 0px var(--hx-inset-hi);
    padding: 5px;
    border-radius: 3px;
    border: 1px solid var(--hx-outline);
    outline: 1px solid var(--hx-outline);
}
.event-item.orchid{background: linear-gradient(45deg, var(--hx-panel-2) 50%, #d791be 90%);box-shadow: 0 0 7px var(--hx-rar-epic) inset;}
.event-item.orchid .event-title{color: var(--hx-rar-epic-txt);}

.event-item.brown{background: linear-gradient(45deg, var(--hx-panel-2) 50%, #cf8d54 90%);box-shadow: 0 0 7px var(--hx-gold-dim) inset;}
.event-item.brown .event-title{color: var(--hx-gold);}

.event-item.red{background: linear-gradient(45deg, var(--hx-panel-2) 50%, var(--hx-err-dim) 90%);box-shadow: 0 0 7px var(--hx-err) inset;}
.event-item.red .event-title{color: var(--hx-err-text);}

.event-item.gray{background: linear-gradient(45deg, var(--hx-panel-2) 50%, var(--hx-outline) 90%);box-shadow: 0 0 7px #0000005e inset;}
.event-item.gray .event-title{color: var(--hx-dim);}

.event-item.green{background: linear-gradient(45deg, var(--hx-panel-2) 50%, #8fd17e 90%);box-shadow: 0 0 7px #8fd17e inset;}
.event-item.green .event-title{color: var(--hx-ok-text);}

.event-item.blue{background: linear-gradient(45deg, var(--hx-panel-2) 50%, var(--hx-info-dim) 90%);box-shadow: 0 0 7px #7db1d7 inset;}
.event-item.blue .event-title{color: var(--hx-info-text);}

.event-item.purple{background: linear-gradient(45deg, var(--hx-panel-2) 50%, var(--hx-accent-a25) 90%);box-shadow: 0 0 7px #b17ed7 inset;}
.event-item.purple .event-title{color: var(--hx-accent-glow);}

.event-item.orange{background: linear-gradient(45deg, var(--hx-panel-2) 50%, var(--hx-warn-dim) 90%);box-shadow: 0 0 7px #d17e4c inset;}
.event-item.orange .event-title{color: var(--hx-warn-text);}

.event-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--hx-heading);
}
.event-timer{
    color: var(--hx-text);
    font-weight: 500;
    font-size: 12px;
}
.events-timer{

}
.tibiatext.orange{
    color: #ff9900;
}
.tibiatext.white{
    color: #ffffff;
}
.box-side-widget.gold.daily-event::after{
    display: none;
}
.box-side-widget.daily-event .border-2::after, .box-side-widget.daily-event .border-2::before{
    content: "";
    width: 34px;
    height: 79px;
    bottom: -19px;
    left: -11px;
    background: url(img/dailyevent-scrollside.png) no-repeat center top;
    position: absolute;
    z-index: 4;
    pointer-events: none;
}
.box-side-widget.daily-event{
    margin: -10px 0 25px !important;
}
.box-side-widget.daily-event .border-2::before{
    left: auto;
    right: -11px;
    transform: scaleX(-1);
}
.daily-event-border{
    height:44px;
    padding: 5px 15px !important;
}
.daily-event-box{
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 5px;
    background: var(--hx-inset-hi);
    flex-direction: row;
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    border-radius: 5px;
    box-shadow: 1px 1px 0 var(--hx-inset-hi) inset, -1px -1px 0 #00000030 inset;
    outline: 1px solid var(--hx-outline);
    cursor: pointer;
    transition: ease .1s;
    text-decoration: none;
}
.daily-event-box:hover{
    background: var(--hx-row-b);
    box-shadow: 1px 1px 0 var(--hx-inset-hi) inset, -1px -1px 0 #00000030 inset, 0 0 7px #0007;
}
/* The scroll box is 154px wide and shares it with the "?" badge, so the title has to
   stay under ~115px: 16px New Rocker, no tracking, nowrap. At that size the stone
   gradient reads too dark on the ornament, so this instance gets lighter stops and a
   fuller violet glow than the drop cap. */
.daily-event .title{
    margin-bottom: -2px;
    font-size: 16px;
    letter-spacing: 0;
    white-space: nowrap;
    min-width: 0;
    text-transform: uppercase;
    text-align: center;
    background-image:
        url(img/vein-tile.png),
        linear-gradient(180deg, #e2d8fb 0%, #b7a9df 40%, #8a7bb4 68%, #5d4f84 100%);
    filter: drop-shadow(0 0 1px #0a0812) drop-shadow(0 1px 0 #0a0812)
            drop-shadow(0 0 5px rgba(196, 163, 255, .65)) drop-shadow(0 0 12px rgba(139, 92, 246, .5));
}
.daily-event .info{
    font-size: 20px;
    color: var(--hx-dim);
}

/* Menu label that used to be ten consecutive <font> tags, one per letter. Same
   violet-to-cyan sweep, one element, and it stays above 4.5:1 for every glyph. */
.grad-magicitems{
    background-image: linear-gradient(100deg, #c4a3ff 0%, #8b5cf6 32%, #6d8cff 62%, #8ccbff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(8, 6, 14, .9));
    font-weight: 700;
}
/* siblings: shared construction, one sweep each. Bounty = amethyst into ember, Wiki = lilac
   into silver; both stay inside the layout's violet family instead of flat gold / warn-yellow. */
.grad-bounty, .grad-wiki{
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(8, 6, 14, .9));
    font-weight: 700;
}
.grad-bounty{ background-image: linear-gradient(100deg, #c4a3ff 0%, #b07cff 38%, #ff9a6a 78%, #ffd18c 100%); }
.grad-wiki{ background-image: linear-gradient(100deg, #d8caf4 0%, #b8a0ff 40%, #9d8cff 70%, #e3ddef 100%); }

/* ---- hero band -------------------------------------------------------------
   Around the obsidian wordmark (see .wordmark above): a shadow pocket with a
   violet under-light behind the letters. Nothing else - the old rune divider and
   its diamond were removed so the word sits flush with the side widgets. */
.logo-aura{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* a pocket of shadow behind the stone so near-black letters read by contrast,
       with a faint violet under-light rising from the veins' side */
    background:
        radial-gradient(ellipse 32% 44% at 50% 56%,
            rgba(8, 6, 14, .58) 0%,
            rgba(8, 6, 14, 0)   100%),
        radial-gradient(ellipse 42% 40% at 50% 80%,
            rgba(139, 92, 246, .24) 0%,
            rgba(139, 92, 246, .09) 46%,
            rgba(139, 92, 246, 0)   72%);
    animation: hxAura 9s ease-in-out infinite;
}
@keyframes hxAura{
    0%, 100% { opacity: .72; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce){ .logo-aura{ animation: none; } }