.table1{
    width: 100%;

    border-width: 10px;
    border-style: solid;
    border-image-source: url('img/content/table1-border2.png'); 
    border-image-slice: 10 fill; 
    border-image-repeat: repeat; 
    padding: 4px;
    color: var(--hx-text);
    z-index: 1;
    background-color: var(--hx-panel);
    position: relative;
}
.table1.dark{
    background-color: var(--hx-panel-2);
}
.heading1{
    border-width: 6px;
    border-radius: 4px;
    border-style: solid;
    border-image-source: url('img/content/table1heading-border.png'); 
    border-image-slice: 6 fill; 
    border-image-repeat: repeat; 
    padding-left: 9px;
    height: 36px;
    line-height: 24px;
    text-align: left;
    margin: 0 -2px -4px -2px;
    z-index: 2;

    position: relative;


    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: var(--hx-heading);
}
.heading1.active{
    border-image-source: url('img/content/table1heading-border-target.png'); 
    color: var(--hx-warn-text);
}
.table1 td{ 

}
.content-table{
    box-shadow: 3px 3px 3px var(--hx-shadow);
    outline: 1px solid var(--hx-outline);
    position: relative;
    width: 100%;
    background-color: var(--hx-row-a);
    padding: 0px;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
}
.content-table td, .content-table th{
        border: 1px solid var(--hx-hairline);
        padding: 2px 5px;
}
.content-table .heading{
    font-weight: bold;
    white-space: nowrap;
}
/* whoisonline server status: label/value pairs. Grid instead of two
   inline-block columns, which dropped the values below the labels once the
   two fixed widths no longer fit the phone-width cell. */
.serverstatus-grid{
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 12px;
    line-height: 1.6;
    padding-right: 40px;   /* clear the absolutely positioned world-type icon */
}

.content-table tr:nth-child(even) td{
    background-color: var(--hx-row-b);
}
.content-table tr.even td{
    background-color: var(--hx-row-b) !important;
}
.content-table tr:nth-child(odd) td{
    background-color: var(--hx-row-a);
}
.content-table tr.odd td{
    background-color: var(--hx-row-a) !important;
}
.content-table tr[bgcolor] td{
    background-color: transparent;
}
.content-table table{
        border-collapse: collapse;
}
.txt-bold{
    font-weight: bold;
}
.content-table.dark{
    border: 1px solid var(--hx-hairline);
}
.content-table.dark td{
    background-color: var(--hx-row-a) !important;
    border: 0 none transparent;
}
table.nopadding tr td{
    padding: 0 !important;
}
/* button */
.btn{
    font-family: "Roboto", sans-serif;
    position: relative;
    background: transparent;
    height: 31px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: normal;
    user-select: none;
    -webkit-user-select: none;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  border: 0 none;
  z-index: 1;
  image-rendering: auto;
    transition: color ease .2s;
    padding: 0 10px;
    font-size: 13px;
    color: #ffd18c !important;
    text-shadow: var(--text-shadow-outline);
    width: max-content;
}
.btn.wide{
    width: 135px;
}
.btn::before, .btn::after{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    z-index: -1;
    transition: opacity .15s;
    pointer-events: none;
    background-image: url(img/content/btn/btn-left.png?v=hx2), url(img/content/btn/btn-right.png?v=hx2), url(img/content/btn/btn-body.png?v=hx2);
    background-repeat: no-repeat;
    background-position: left center, right center, center center;
    background-size: auto 100%, auto 100%, calc(100% - 16px) 100%;
}
html.strike .btn::after{ animation: hxChromeStrike .9s ease-out; }
.btn::after{
    background-image: url(img/content/btn/btn-left-hover.png?v=hx2), url(img/content/btn/btn-right-hover.png?v=hx2), url(img/content/btn/btn-body-hover.png?v=hx2);
    opacity: 0;
}
.btn:hover{
    color: #fff78c !important;
}
.btn:hover::after{
    opacity: 1;
}
/* red button */
.btn.red::before {background-image: url(img/content/btn/red/btn-left.png?v=hx2), url(img/content/btn/red/btn-right.png?v=hx2), url(img/content/btn/red/btn-body.png?v=hx2);}
.btn.red::after {background-image: url(img/content/btn/red/btn-left-hover.png?v=hx2), url(img/content/btn/red/btn-right-hover.png?v=hx2), url(img/content/btn/red/btn-body-hover.png?v=hx2);}

/* green button */
.btn.green::before {background-image: url(img/content/btn/green/btn-left.png?v=hx2), url(img/content/btn/green/btn-right.png?v=hx2), url(img/content/btn/green/btn-body.png?v=hx2);}
.btn.green::after {background-image: url(img/content/btn/green/btn-left-hover.png?v=hx2), url(img/content/btn/green/btn-right-hover.png?v=hx2), url(img/content/btn/green/btn-body-hover.png?v=hx2);}

/*  yellow button */
.btn.yellow::before {background-image: url(img/content/btn/yellow/btn-left.png?v=hx2), url(img/content/btn/yellow/btn-right.png?v=hx2), url(img/content/btn/yellow/btn-body.png?v=hx2);}
.btn.yellow::after {background-image: url(img/content/btn/yellow/btn-left-hover.png?v=hx2), url(img/content/btn/yellow/btn-right-hover.png?v=hx2), url(img/content/btn/yellow/btn-body-hover.png?v=hx2);}

/*  gray button */
.btn.gray::before {background-image: url(img/content/btn/gray/btn-left.png?v=hx2), url(img/content/btn/gray/btn-right.png?v=hx2), url(img/content/btn/gray/btn-body.png?v=hx2);}
.btn.gray::after {background-image: url(img/content/btn/gray/btn-left-hover.png?v=hx2), url(img/content/btn/gray/btn-right-hover.png?v=hx2), url(img/content/btn/gray/btn-body-hover.png?v=hx2);}


.btn.sm{
    height: 23px !important;
    font-size: 12px;
}
.btn.sbtn{
    height: 18px;
    font-size: 12px;
    background: url(img/content/btn-gray.png) repeat-x center center;
    line-height: 18px;
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-weight: 600;
    color: #ebebeb !important;
    text-shadow: unset !important;
    border-radius: 6px;
    padding: 0 18px;
    font-size: 10px;
    box-shadow: 0 1px 1px #fff5 inset;
}
.btn.bbtn{
    height: 35px;
    color: #d9f7ff !important;
    text-shadow: 0 1px 3px #000;
    font-weight: bold;
}
.btn.bbtn::before, .btn.bbtn::after{
    background-size: auto 100%, auto 100%, calc(100% - 26px) 100%;
}
.btn.bbtn::before {background-image: url(img/content/btn/bbtn/btn-left.png?v=hx2), url(img/content/btn/bbtn/btn-right.png?v=hx2), url(img/content/btn/bbtn/btn-body.png?v=hx2);}
.btn.bbtn::after {background-image: url(img/content/btn/bbtn/btn-left-hover.png?v=hx2), url(img/content/btn/bbtn/btn-right-hover.png?v=hx2), url(img/content/btn/bbtn/btn-body-hover.png?v=hx2);}
.cbtn{
    background: var(--hx-chrome-3);
    color: var(--hx-btn-text);
    margin: 0 2px;
    padding: 2px 6px;
    outline: 2px solid transparent;
    transition: background-color ease .1s, color ease .1s, outline-color ease .2s;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    border: 0 none transparent;
    cursor: pointer;
}
.cbtn:hover{
    text-decoration: none !important;
    background: var(--hx-accent);
    color: var(--hx-btn-text-hover) !important;
}
.cbtn:active{
    outline-color: var(--hx-accent-a25);
}
.btn.sbtn:hover{
    color: #fff !important;
}
.btn.sbtn::before, .btn.sbtn::after{
    background: transparent;
    display: none;
}
/*TABS*/
.tabs {
    display: flex;
    padding-left: 2px;
}
.tab-button {
    padding: 7px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all ease 0.3s;
    color: unset;
    margin-right: 2px;
    border-radius: 2px 2px 0 0;
    /* an unselected tab needs a visible edge or it does not read as a tab at all;
       .active below still wins with the stronger --hx-outline */
    border: 1px solid var(--hx-hairline);
    background: transparent;
        border-bottom: 0 none transparent;
}

.tab-button:hover {
    background: var(--hx-accent-a12);
    border-color: var(--hx-outline);
}

.tab-button.active {
    background: linear-gradient(var(--hx-accent-a25), var(--hx-row-a));
    color: var(--hx-accent-glow);
    opacity: 1;
    border: 1px solid var(--hx-accent);
        border-bottom: 0 none transparent;
    box-shadow: 0 2px 0 var(--hx-accent-glow) inset, 0 0 10px var(--hx-glow);
    position: relative;
    z-index: 1;
}
.tab-button:focus-visible {
    outline: 2px solid var(--hx-accent-glow);
    outline-offset: 2px;
}
.tab-content {
    opacity: 0; 
    visibility: hidden;
    display: none;
    transition: opacity 0.1s ease, visibility 0s 0.1s; 
}
.tab-content.active {
    opacity: 1; 
    visibility: visible;
    display: revert;
    transition: opacity .3s ease, visibility .3s ease; 
}

.alert{
    width: 100%;
    margin: 10px 0;
    padding: 15px;
    border-radius: 4px;
    border-style: solid;
    border-image: url(img/content/warning-border.png) 7 repeat;
    border-image-width: 7px;
    border-image-outset: 1px;
    background-color: var(--hx-err-dim);
    box-shadow: 0 0 10px rgb(255 0 0 / 34%) inset;
    color: var(--hx-err-text);
    font-size: 14px;
    position: relative;
}
.alert .icon{ /* could be done better but need to keep compatibility with all alerts we already have in pages */
    position: absolute;
    left: 0;
    top: 0;
    vertical-align: middle;
    height: 100%; 
    width: 65px;
    text-align: center;
    font-size: 40px;
    border-right: 1px solid #0000005b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert .icon.small{ /* alternative small icon */
    position: unset;
    vertical-align: middle;
    height: auto; 
    width: auto; 
    text-align: left;
    font-size: inherit;
    border-right: none;
    display: inline;
}
.alert .text{
    margin-left: 65px;
}
.alert:has(.icon.small) .text {
    margin-left: 0;
    display: inline;
}
.alert.yellow{
    border-image-source: url(img/content/warning-border-yellow.png);
    box-shadow: 0 0 20px rgb(167 116 1 / 59%) inset;
    color: var(--hx-warn-text);
    background-color: var(--hx-warn-dim);
}
.alert.green{
    border-image-source: url(img/content/warning-border-green.png);
    box-shadow: 0 0 20px rgba(67, 167, 1, 0.59) inset;
    color: var(--hx-ok-text);
    background-color: var(--hx-ok-dim);
}
.alert.blue{
    border-image-source: url(img/content/warning-border-blue.png);
    box-shadow: 0 0 20px rgba(1, 156, 167, 0.59) inset;
    color: var(--hx-info-text);
    background-color: var(--hx-info-dim);
}
/* progressbar */
.progressbar{
    width: 100%;
    border-width: 4px;
    border-style: solid;
    border-radius: 4px;
    border-image-source: url('img/content/border2.png'); 
    border-image-slice: 4; 
    border-image-repeat: repeat; 
    height: 25px;
    color: #eef3f5;
    text-shadow: var(--text-shadow-outline);
    z-index: 1;
    background-color: var(--hx-panel-3);
    position: relative;
} 
.progressbar div{
    height: 17px;
    background: url(img/content/progressbar.png);
}
.progressbar.red div{
    background: url(img/content/progressbar-red.png);
}
.progressbar.blue div{
    background: url(img/content/progressbar-blue.png);
}
.progressbar.yellow div{
    background: url(img/content/progressbar-yellow.png);
}
.progressbar.orange div{
    background: url(img/content/progressbar-orange.png);
}
.progressbar span{
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 17px;
    z-index: 2;
    top: 0;
    left: 0;
    font-size: 14px;
}
table.no-padding td{
    padding: 0 !important;
}
table.clear td{
    border: 0 none transparent !important;
    padding: 0 !important;
}
.eqbox{
    display: flex;
    flex-direction: row;
    gap: 2px;
    margin: 10px;
    justify-content: center;
    position: relative;
}
.eqbox .row{
    gap: 2px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.eqbox .item .img{
    display: block;
    width: 32px;
    height: 32px;
    margin: 2px;
    margin: 2px;
    image-rendering: pixelated;
    background-position: center center;
    background-repeat: no-repeat;
}

.eqbox .item{
    border: 1px solid var(--hx-hairline);
    overflow: hidden;
    width: 36px;
    height: 36px;
    box-sizing: content-box;
    background: var(--hx-panel-2);
    box-shadow: 0 3px 5px var(--hx-shadow);
    z-index: 9;

    transition: ease .1s;
}
.eqbox .item.green{border-color: var(--hx-ok-dim);background-color: var(--hx-rar-common);}
.eqbox .item.green .img{box-shadow: inset 0 0 16px var(--hx-ok-dim);}
.itemname-green {font-weight: bold;color: var(--hx-rar-common-txt);}

.eqbox .item.purple{border-color: var(--hx-accent);background-color: var(--hx-rar-epic);}
.eqbox .item.purple .img{box-shadow: inset 0 0 16px var(--hx-accent);}
.itemname-purple {font-weight: bold;color: var(--hx-rar-epic-txt);}

.eqbox .item.blue{border-color: var(--hx-info-dim);background-color: var(--hx-rar-uncommon);}
.eqbox .item.blue .img{box-shadow: inset 0 0 16px var(--hx-info-dim);}
.itemname-blue {font-weight: bold;color: var(--hx-rar-uncommon-txt);}

.eqbox .item.red{border-color: var(--hx-err-dim);background-color: var(--hx-rar-rare);}
.eqbox .item.red .img{box-shadow: inset 0 0 16px rgb(0 0 0 / 60%);}
.itemname-red {font-weight: bold;color: var(--hx-rar-rare-txt);}

.eqbox .item.yellow{border-color: var(--hx-warn-dim);background-color: var(--hx-rar-legend);}
.eqbox .item.yellow .img{box-shadow: inset 0 0 16px var(--hx-warn-dim);}
.itemname-yellow {font-weight: bold;color: var(--hx-rar-legend-txt);}

.eqbox .item.grey{border-color: var(--hx-outline);background-color: var(--hx-rar-myth);}
.eqbox .item.grey .img{box-shadow: inset 0 0 16px var(--hx-outline);}
.itemname-grey {font-weight: bold;color: var(--hx-rar-myth-txt);}

.eqbox .cap, .eqbox .soul{
height: 20px;
    font-size: 10px;
    padding: 1px 0;
    font-weight: 600;
    line-height: 10px;
    text-align: center;
}
.eqbox .item.tooltip-trigger:hover{
    cursor: help;  
    transform: scale(1.1);
    z-index: 10;
}
.tooltip-black {
    position: relative;
    border-width: 1px;
    border-style: solid;
    background: var(--hx-chrome-3);
    color: var(--hx-text);
    filter: drop-shadow(0 2px 5px #000000b6);
    padding: 10px;
    width: max-content;
    max-width: 300px;
    /* text-align: center; */
    /* font-weight: 500; */
    /* text-shadow: var(--text-shadow-outline); */
    font-size: 13px;
    border: 1px solid #000000;
    border-radius: 4px;
    box-shadow: 0 0 15px #0005 inset;
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
}
.tooltip-black::before{
    content: "";
    position: absolute;
    left: -8px;
    top: 2px;
    width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-right: 7px solid #000;
	border-bottom: 7px solid transparent;
}
.tooltip-black .tooltip-header{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.tooltip-black .tooltip-header .item{
    position: relative;
    width: 42px;
    height: 42px;
    background: #0008;
    border: 1px solid #000;
    border-radius: 99px;
    margin: 0 5px 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tooltip-black .tooltip-header .info{
    font-size: 12px;
    height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.tooltip-black .tooltip-header .info .title{
    font-size: 14px;
    font-weight: bold;
}


.tooltip-simple {
    position: relative;
    border-width: 1px;
    border-style: solid;
    background: #0009;
    color: var(--hx-text);
    border-radius: 0;
    filter: drop-shadow(0 2px 5px #000000b6);
    padding: 10px;
    width: max-content;
    max-width: 300px;
    text-align: center;
    font-weight: 500;
    text-shadow: var(--text-shadow-outline);
    font-size: 13px;
    border: 1px solid #000000;
    box-shadow: 0 0 15px #0005 inset;
}
.tooltip-simple::before{
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-right: 7px solid #000;
	border-bottom: 7px solid transparent;
}

.tooltip-item {
    position: relative;
    border-width: 1px;
    border-style: solid;
    background: var(--hx-panel-2);
    color: var(--hx-text);
    border-radius: 0;
    filter: drop-shadow(0 2px 5px #000000b6);
    padding: 10px;
    width: max-content;
    max-width: 300px;
    text-align: center;
    font-weight: 500;
    text-shadow: var(--text-shadow-outline);
    font-size: 13px;
    border-color: var(--hx-outline);
    box-shadow: 0 0 15px #0005 inset;
    outline: 1px solid var(--hx-hairline);
}
.tooltip-item::before{
    content: "";
    position: absolute;
    left: -14px;
    top: 0;
    width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-right: 14px solid var(--hx-outline);
	border-bottom: 7px solid transparent;
}
.tooltip-item .title{
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--hx-hairline);
    margin-bottom: 4px;
    color: #ffffff;
    text-align: center;
    display: block;
}
.tooltip-item.green {
    border-color: var(--hx-rar-common);
    box-shadow: 0 0 35px var(--hx-ok-dim) inset;
    outline-color: var(--hx-ok-dim);
}
.tooltip-item.green::before{border-right-color: var(--hx-rar-common);}
.tooltip-item.green .title{color: var(--hx-rar-common-txt);}

.tooltip-item.red {
    border-color: var(--hx-rar-rare);
    box-shadow: 0 0 35px var(--hx-err-dim) inset;
    outline-color: var(--hx-err-dim);
}
.tooltip-item.red::before{border-right-color: var(--hx-rar-rare);}
.tooltip-item.red .title{color: var(--hx-rar-rare-txt);}

.tooltip-item.yellow {
    border-color: var(--hx-rar-legend);
    box-shadow: 0 0 35px var(--hx-warn-dim) inset;
    outline-color: var(--hx-warn-dim);
}
.tooltip-item.yellow::before{border-right-color: var(--hx-rar-legend);}
.tooltip-item.yellow .title{color: var(--hx-rar-legend-txt);}

.tooltip-item.gray {
    border-color: var(--hx-rar-myth);
    box-shadow: 0 0 35px var(--hx-outline) inset;
    outline-color: var(--hx-outline);
}
.tooltip-item.gray::before{border-right-color: var(--hx-rar-myth);}
.tooltip-item.gray .title{color: var(--hx-rar-myth-txt);}

.tooltip-item.purple {
    border-color: var(--hx-rar-epic);
    box-shadow: 0 0 35px var(--hx-rar-epic-dim) inset;
    outline-color: var(--hx-rar-epic-dim);
}
.tooltip-item.purple::before{border-right-color: var(--hx-rar-epic);}
.tooltip-item.purple .title{color: var(--hx-rar-epic-txt);}

.tooltip-item.blue {
    border-color: var(--hx-rar-uncommon);
    box-shadow: 0 0 35px var(--hx-info-dim) inset;
    outline-color: var(--hx-info-dim);
}
.tooltip-item.blue::before{border-right-color: var(--hx-rar-uncommon);}
.tooltip-item.blue .title{color: var(--hx-rar-uncommon-txt);}

.tooltip-eqitem {
    position: relative;
    border: 5px solid;
    border-image: url(img/content/tooltip-border.png) 4 repeat;
    border-image-width: 4px;
    font-size: 11px;
    border-radius: 2px;
    box-shadow: 0 0 5px #0009;
    color: var(--hx-text);
    text-shadow: 0 0 3px #000;
    background: linear-gradient(var(--hx-panel-2), #000000);
    min-width: 150px;
    max-width: 250px;
    width: max-content;
}
.tooltip-eqitem::before{
    content: "";
    position: absolute;
    left: -12px;
    top: -3px;
    width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-right: 7px solid var(--hx-panel);
	border-bottom: 7px solid transparent;
}
.tooltip-eqitem .title{
    text-align: center;
    display: block;
    font-size: 15px;
    font-weight: bold;
    text-transform: capitalize;
}
.tooltip-eqitem .title::after, .tooltip-eqitem .attr::before, .tooltip-eqitem .desc::before{
    content: "";
    width: 100%;
    display: block;
    background: url(img/content/tooltip-spacer.png) center center;
    height: 5px;
    margin: 5px 0;
    opacity: 0.6;
}

.tooltip-eqitem .inside{
    padding: 5px 10px 10px 10px;
}
.tooltip-eqitem .desc i{
    margin: 3px 0;
    padding: 3px;
    border: 1px solid #c5c5c544;
    color: var(--hx-dim);
    border-radius: 2px;
    background: #fff1;
    display: block; 
    width: auto; 
    text-align: center;
    overflow-wrap: break-word; 
    word-wrap: break-word;
    white-space: normal;
}

 /*YELLOW TOOLTIP*/
.tooltip-eqitem.yellow .title::before{
    content: 'LEGENDARY';
    color: #fff;
    font-size: 10px;
    display: block;
    text-align: center;
}
.tooltip-eqitem.yellow .inside{
    border: 3px solid;
    border-image: url(img/content/tooltip-border-inside-gold.png) 3 repeat;
    border-image-width: 3px;
    box-shadow: 0 0 12px var(--hx-rar-legend) inset;
}
.tooltip-eqitem.yellow {background: linear-gradient(var(--hx-warn-dim), #000000);}
.tooltip-eqitem.yellow .title{color: var(--hx-rar-legend-txt);}

 /*PURPLE TOOLTIP*/
.tooltip-eqitem.purple .title::before{
    content: 'EPIC';
    color: #fff;
    font-size: 10px;
    display: block;
    text-align: center;
}
.tooltip-eqitem.purple .inside{
    border: 3px solid;
    border-image: url(img/content/tooltip-border-inside-purple.png) 3 repeat;
    border-image-width: 3px;
    box-shadow: 0 0 12px var(--hx-rar-epic-dim) inset;
}
.tooltip-eqitem.purple {background: linear-gradient(var(--hx-rar-epic-dim), #000000);}
.tooltip-eqitem.purple .title{color: var(--hx-rar-epic-txt);}

 /*green TOOLTIP*/
.tooltip-eqitem.green .title::before{
    content: 'COMMON';
    color: #fff;
    font-size: 10px;
    display: block;
    text-align: center;
}
.tooltip-eqitem.green .inside{
    border: 3px solid;
    border-image: url(img/content/tooltip-border-inside-green.png) 3 repeat;
    border-image-width: 3px;
    box-shadow: 0 0 12px var(--hx-rar-common) inset;
}
.tooltip-eqitem.green {background: linear-gradient(var(--hx-ok-dim), #000000);}
.tooltip-eqitem.green .title{color: var(--hx-rar-common-txt);}

 /*blue TOOLTIP*/
.tooltip-eqitem.blue .title::before{
    content: 'UNCOMMON';
    color: #fff;
    font-size: 10px;
    display: block;
    text-align: center;
}
.tooltip-eqitem.blue .inside{
    border: 3px solid;
    border-image: url(img/content/tooltip-border-inside-blue.png) 3 repeat;
    border-image-width: 3px;
    box-shadow: 0 0 12px var(--hx-rar-uncommon) inset;
}
.tooltip-eqitem.blue {background: linear-gradient(var(--hx-info-dim), #000000);}
.tooltip-eqitem.blue .title{color: var(--hx-rar-uncommon-txt);}


 /*red TOOLTIP*/
.tooltip-eqitem.red .title::before{
    content: 'RARE';
    color: #fff;
    font-size: 10px;
    display: block;
    text-align: center;
}
.tooltip-eqitem.red .inside{
    border: 3px solid;
    border-image: url(img/content/tooltip-border-inside-red.png) 3 repeat;
    border-image-width: 3px;
    box-shadow: 0 0 12px var(--hx-rar-rare) inset;
}
.tooltip-eqitem.red {background: linear-gradient(var(--hx-err-dim), #000000);}
.tooltip-eqitem.red .title{color: var(--hx-rar-rare-txt);}

 /*grey TOOLTIP*/
.tooltip-eqitem.grey .title::before{
    content: '[MYTHICAL]';
    color: #fff;
    font-size: 10px;
    display: block;
    text-align: center;
}
.tooltip-eqitem.grey .inside{
    border: 3px solid;
    border-image: url(img/content/tooltip-border-inside-grey.png) 3 repeat;
    border-image-width: 3px;
    box-shadow: 0 0 12px var(--hx-rar-myth) inset;
}
.tooltip-eqitem.grey {background: linear-gradient(var(--hx-outline), #000000);}
.tooltip-eqitem.grey .title{color: var(--hx-rar-myth-txt);}


.tooltip-eqitem .magical-attrs .title::before, .tooltip-eqitem .magical-attrs .title::after, .tooltip-paper .magical-attrs .title::before, .tooltip-paper .magical-attrs .title::after{
    display: none !important;
    content: unset !important;
}
.tooltip-eqitem .magical-attrs .title{
        text-align: inherit !important;
    font-size: 90% !important;
    text-shadow: 0 0 0 transparent !important;
}
.tooltip-eqitem .source{
    color:var(--hx-dim); font-size:9px; margin-top:5px; text-align:right;
}

.tooltip-paper {
    border-image: url(img/paper.png) 9 fill;
    border-image-width: 9px;
    border-width: 9px;
    border-style: solid;
    border-radius: 0;
    filter: drop-shadow(0 2px 5px #000000b6);
    color: var(--hx-text);
    padding: 5px;
    max-width: 250px;
    font-size: 12px;
}
.tooltip-paper p{
    margin: 0;
}
.tooltip-paper .label{
    background: #0002;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 900;
    font-size: 9px;
    color: var(--hx-ok-text);
    margin: 0 3px 0 0;
    text-shadow: 0 0 0 transparent;
    background: var(--hx-ok-dim);
    border: 1px solid var(--hx-hairline);
}
.tooltip-paper .title{
    font-size: 14px;
    font-weight: bold;
    text-transform: capitalize;
}
.tooltip-paper .inside .title{
    text-align: center;
}
.tooltip-paper .magical-attrs .title{
    display: block !important;
    font-size: 13px !important;
    text-shadow: 0 0 0 transparent !important;
    color: var(--hx-rar-epic-txt) !important;
    text-align: left !important;
}
.tooltip-paper .magical-attrs{
    color: inherit !important;
    text-shadow: 0 0 0 transparent !important;
}
.tooltip-paper .source{
    color:var(--hx-muted); font-size:10px; margin-top:5px; text-align:right; font-weight: bold;
}
.tooltip-paper .desc{
    margin-top: 5px;
}
.tooltip-paper .inside{

}
.tooltip-paper .stat-diff{
    padding: 0px 2px;
    border-radius: 3px;
    /* font-weight: 900; */
    font-size: 10px;
    color: var(--hx-outline-ink);
    margin: 0px 3px 0 0;
    text-shadow: 0 0 0 transparent;
    background: var(--hx-warn);
    outline: 1px solid var(--hx-hairline);
    box-shadow: 0 0 0 transparent;
}
 .tooltip-paper .title::after,  .tooltip-paper .magical-attrs::before{
    content: "";
    width: 100%;
    display: block;
    background: var(--hx-hairline);
    height: 1px;
    margin: 5px 0;
    opacity: 1;
}
.tooltip-paper .title::before{
    color: var(--hx-muted);
    font-size: 10px;
    display: block;
    text-align: center;
    text-shadow: 0 0 0 transparent;
}

.tooltip-paper.yellow .title::before{content: 'LEGENDARY';}
.tooltip-paper.yellow .title{color: var(--hx-rar-legend-txt);text-shadow: var(--text-shadow-outline);}

.tooltip-paper.purple .title::before{content: 'EPIC';}
.tooltip-paper.purple .title{color: var(--hx-rar-epic-txt);text-shadow: var(--text-shadow-outline);}

.tooltip-paper.green .title::before{content: 'COMMON';}
.tooltip-paper.green .title{color: var(--hx-rar-common-txt);text-shadow: var(--text-shadow-outline);}

.tooltip-paper.blue .title::before{content: 'UNCOMMON';}
.tooltip-paper.blue .title{color: var(--hx-rar-uncommon-txt);text-shadow: var(--text-shadow-outline);}

.tooltip-paper.red .title::before{content: 'RARE';}
.tooltip-paper.red .title{color: var(--hx-rar-rare-txt);text-shadow: var(--text-shadow-outline);}

.tooltip-paper.grey .title::before{content: 'MYTHICAL';}
.tooltip-paper.grey .title{color: var(--hx-rar-myth-txt);text-shadow: var(--text-shadow-outline);}


.itembox.tooltip-trigger{
    cursor: help;
}
.stat-diff {
    color: var(--hx-ok-text);
    outline: 1px solid var(--hx-ok);
    padding: 0px 3px;
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    font-family: arial;
    color: var(--hx-ok-text);
    text-shadow: 0 0 0 transparent;
    border-radius: 3px;
    font-weight: 600;
    box-shadow: 0 0 5px #10ff00, 0 0 5px #10ff00 inset;
    margin-left: 3px;
}
.magical-attrs{
        margin-top: 5px;
            color: #fff;
       text-shadow: 0 0 4px #fff;
}
.itembox:hover img{
    /*filter: drop-shadow(-1px 0 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 0 6px #fff);*/
}
.itembox {
    border: 1px solid var(--hx-outline);
    width: 32px;
    height: 32px;
    box-sizing: content-box;
    background: radial-gradient(var(--hx-panel-3), var(--hx-panel));
    outline: 1px solid var(--hx-outline);
    display: block;
    position: relative;
}
.itembox .item-count{
    background: #0008;
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 8px;
    font-weight: 400;
    border-radius: 2px;
    bottom: 0;
    right: 0;
    position: absolute;
    padding: 0 3px;
}
.itembox .item-count-big{
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10px;
    text-shadow: var(--text-shadow-outline);
    font-weight: bold;
    border-radius: 2px;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    position: absolute;
}
.itembox .item-count-premium{
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10px;
    text-shadow: var(--text-shadow-outline);
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    position: absolute;
}
.itembox .item-count-premium span{
    color: var(--hx-rar-legend-txt);
    font-size: 8px;
}
.itembox img {
    transition: ease .1s;
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
.itembox.green {background: radial-gradient(var(--hx-rar-common), #096900);border-color: var(--hx-rar-common);outline-color: #0b8000;}
.itembox.blue {background: radial-gradient(var(--hx-rar-uncommon), #003dab);border-color: var(--hx-rar-uncommon);outline-color: #000d80;}
.itembox.red {background: radial-gradient(var(--hx-rar-rare), #6b0a0a);border-color: var(--hx-rar-rare);outline-color: #930000;}
.itembox.purple {background: radial-gradient(var(--hx-rar-epic), #5f0a6b);border-color: var(--hx-rar-epic);outline-color: #830093;}
.itembox.yellow {background: radial-gradient(var(--hx-rar-legend), #695d00);border-color: var(--hx-rar-legend);outline-color: #7d8000;}
.itembox.grey {background: radial-gradient(var(--hx-rar-myth), #525252);border-color: var(--hx-rar-myth);outline-color: var(--hx-outline);}
.itembox.transparent{
    background: transparent;
    border: 1px solid transparent;
    outline-color: transparent;
}

.houseimg{
    background-color: #0003;
    width: 150px;
    height: 150px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-bottom: 10px;
    margin-right: 10px;
    border: 1px solid var(--hx-hairline);
    box-sizing: content-box;
    image-rendering: pixelated;
    position: relative;
    cursor: zoom-in;
    transition: background-size ease .2s;
}
.houseimg.zoomed{
    cursor: zoom-out;
}
.houseimg::after{
    content: "+";
    color: #fff;
    font-family: Verdana, sans-serif;
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    line-height: 10px;
    pointer-events: none;
    font-size: 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow-outline);
}
/* forum */
.forum-hr{
    border: 0 none;
    width: 100%;
    height: 1px;
    background: var(--hx-hairline);
    margin: 3px 0;
}
blockquote.forum-quote {
    margin-left: 0.25em;
    padding-left: 0.5em;
    border-left: 0.25em solid var(--hx-ok-dim);
    color: var(--hx-ok-text);
}
blockquote.forum-code {
    margin-left: 0.25em;
    padding-left: 0.5em;
    border-left: 0.25em solid var(--hx-outline);
    color: var(--hx-dim);
}
.reac-btn-container:hover .reac-picker { opacity: 1;visibility:visible;transform: translatey(0);}
.reac-picker { 
    display: flex; position: absolute; bottom: calc(100% + 12px); right: 0;opacity: 0;visibility:hidden;
    background: linear-gradient(var(--hx-panel-2), var(--hx-panel)); border: 1px solid var(--hx-outline);outline: 1px solid var(--hx-outline); padding: 4px 8px;border-radius: 3px;
    gap: 8px; font-size: 18px; z-index: 999;
    transition: all ease-out .1s;transform: translatey(5px);
    box-shadow: 3px 3px 3px var(--hx-shadow);
}
.reac-picker::before {
    content: \"\";
    position: absolute;
    right: 12px;
    bottom: -8px;
    width: 0;
    height: 0;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--hx-outline) (fix content: "" at line 1085 first);
    border-left: 7px solid transparent;
}
.reac-picker::after {
    content: \"\";
    position: absolute;
    right: 0;
    bottom: -13px;
    width: 100%;
    height: 12px;
}
.btn-like:hover, .reac-btn-container:hover .btn-like{
    text-decoration: none;
}
.reac-picker span { cursor: pointer; transition: transform 0.1s; }
.reac-picker span:hover { transform: scale(1.4); }
.btn-like {cursor: pointer; display: block;border: 1px solid transparent;transition: all ease .2s;}
#reac-modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; min-width:300px; color:#fff; max-height: 80vh;overflow: auto;}
#modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:999; }
#reac-content{ padding: 10px; }
#reac-modal::-webkit-scrollbar { width: 10px; }
#reac-modal::-webkit-scrollbar-track { background: linear-gradient(var(--hx-panel), var(--hx-panel-2), #aa8b67);border-radius: 10px; border: 1px solid #000000; }
#reac-modal::-webkit-scrollbar-thumb { background: var(--hx-accent);  border-radius: 10px; box-shadow: 0 0 10px #000; }
#reac-modal::-webkit-scrollbar-thumb:hover { background: var(--hx-accent); }
.reac-summary{
    transition: opacity ease .2s;
}
.forum-post-content, .forum-post-preview{
    word-break: normal;
    overflow-wrap: break-word;
}

/* keep user-authored embeds inside their column at any viewport width */
.news-text,
.news-ticker .text,
#FeaturedArticle #TeaserText,
.forum-post-content,
.forum-post-preview{
    max-width: 100%;
    overflow-wrap: break-word;
}
.news-text img,
.news-ticker .text img,
#FeaturedArticle #TeaserText img,
.forum-post-content img,
.forum-post-preview img,
.news-text video,
.forum-post-content video,
.news-text iframe,
.news-ticker .text iframe,
#FeaturedArticle #TeaserText iframe,
.forum-post-content iframe,
.forum-post-preview iframe,
.news-text embed,
.forum-post-content embed,
.news-text object,
.forum-post-content object{
    max-width: 100%;
    height: auto;
}
/* tables/code scroll internally instead of pushing the page sideways */
.news-text table,
#FeaturedArticle #TeaserText table,
.forum-post-content.news-text table,
.news-text pre,
#FeaturedArticle #TeaserText pre,
.forum-post-content pre{
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
#forumtxteditor{
    width: 100%;
    min-height: 300px;
}
/* never let the editor grow past its column */
.sceditor-container{
    max-width: 100% !important;
    box-sizing: border-box;
}
.sceditor-container iframe,
.sceditor-container textarea{
    max-width: 100% !important;
}
body.sceditor-maximize .dragon, body.sceditor-maximize .heading1, body.sceditor-maximize,body.sceditor-maximize .bigbtn,body.sceditor-maximize .corner,body.sceditor-maximize .box-side::After,body.sceditor-maximize .outline, body.sceditor-maximize .col-side *{z-index:-1 !important;}
body.sceditor-maximize .table1{position: unset !important;}
/*end forum */
.player-flag{
    display: inline-block;
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--hx-outline);
    border-radius: 12px;
    vertical-align: bottom;
    background-size: auto 14px;
}
/* CREATE ACCOUNT check classes*/
/* createaccount classes */

.PWStrengthIndicator {
	text-align: center;
	border: 1px solid #0006;
    border-top: 0 none;
	color: #fff;
    text-shadow: var(--text-shadow-outline);
    font-weight: bold;
	width: 100%;
    font-size: 11px;
    padding: 1px 0;
    margin: 0 ;
	text-transform: capitalize;
    border-radius: 0 0 4px 4px;
}

.PWStrengthLevel0,
.PWStrengthLevel1 {
	background: linear-gradient(var(--hx-err), var(--hx-err-dim))
}

.PWStrengthLevel2 {
	background: linear-gradient(var(--hx-warn), var(--hx-warn-dim))
}

.PWStrengthLevel3 {
	background: linear-gradient(var(--hx-rar-legend), var(--hx-warn-dim))
}

.PWStrengthLevel4 {
	background: linear-gradient(var(--hx-ok), var(--hx-ok-dim))
}
.PWStrengthContainer{
    position: relative;
    width: 100%;
}
.PWStrengthToolTip {
    position: absolute;
    color: var(--hx-text);
    box-shadow: 0 3px 11px var(--hx-shadow-soft);
	display: none;
	width: 220px;
	top: -20px;
	font-size: 12px;
	z-index: 1000;
	right: -250px;

    padding: 8px;
    border: 1px double var(--hx-outline);
    color: var(--hx-text);
    background-image: url(img/paper-only-lt.png);
    z-index: 1000;
}

.TextInputLine .PWStrengthToolTip {
	left: 270px;
	min-width: 250px
}

.PWStrengthToolTipHeadline {
	font-weight: 700;
    margin-bottom: 5px;
    color: var(--hx-heading);
}


.PWStrengthToolTip .HelperDivArrow {
	position: absolute;
	top: 2px;
	left: -7px;

    width: 0; 
    height: 0; 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 
    border-right:6px solid var(--hx-outline); 
}
.PWStrengthToolTip .InputIndicator{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;

    border: 1px solid;
}


.PWStrengthToolTip .InputIndicatorOK{
    border-color: var(--hx-ok-dim);
    background: linear-gradient(var(--hx-ok), var(--hx-ok-dim));
}
.PWStrengthToolTip .InputIndicatorNotOK{
    border-color: var(--hx-err-dim);
    background: linear-gradient(var(--hx-err), var(--hx-err-dim));
}
input.ok{
    outline-color: var(--hx-ok) !important;
}
input.nok{
    outline-color: var(--hx-err) !important;
}
input.nok::after{
    content: "x";
    position: absolute;
    right: -20px;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 8px;
}
input.ok, input.nok{
    position: relative;
}
.cafield-cnt{
    position: relative;
    width: max-content;
}
.ca-checkbox{
    border-radius: 50%;
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    right: -20px;
    top: 5px;
    background: linear-gradient(var(--hx-panel-2), var(--hx-panel-3));
    border: 1px solid var(--hx-outline);
}
#page-createaccount #cflag{
    position: absolute;
    right: -20px;
    top: 3px;
}
.ca-checkbox::before{
    position: absolute;
    width: 13px;
    height: 13px;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 13px;
    font-family: "Font Awesome 7 Pro";
    font-size: 9px;
    color: var(--hx-err-text);
    content: "\f00d";
    text-shadow: 0 0 2px rgb(0, 0, 0);
    font-weight: 900 !important;
    transition: color ease .4s, box-shadow ease .4s;
}
.ca-checkbox.ok{
    box-shadow: 0 0 5px var(--hx-ok);
}
.ca-checkbox.ok::before{
    content: "\f00c";
    color: var(--hx-ok-text);
}
#acc_name_check, #email_check, #password_check2, #name_check{
    color: var(--hx-err-text);
    font-size: 11px;
    padding: 4px 0 0 0;
    float: left;
    width: 100%;
    transition: all ease .2s;
    opacity: 1;
    font-weight: bold;
}
#acc_name_check:empty, #email_check:empty, #password_check2:empty, #name_check:empty{
    height: 0;
    padding: 0;
    opacity: 0;
}
input[type="text"], input[type="search"], input[type="password"], select, textarea{
    height: 25px;
    border-radius: 4px;
    outline: 2px solid transparent;
    background: var(--hx-panel-3);
    color: var(--hx-text);
    border: 1px solid var(--hx-outline);
    transition: outline-color ease .2s;
}
textarea{ height: auto; }
input::placeholder, textarea::placeholder{ color: var(--hx-muted); opacity: 1; }
/* the browser's yellow autofill wash is unreadable on a dark field */
input:-webkit-autofill, input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--hx-text);
    -webkit-box-shadow: 0 0 0 1000px var(--hx-panel-3) inset;
}
input[type="text"].sm, input[type="password"].sm{
    height: 16px;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus{
    outline-color: var(--hx-accent);
    background: var(--hx-chrome-3);
}
#page-createaccount select{
    width: 250px;
}
.cafield-cnt input{
    width: 250px;
}
#page-createaccount #char_name{

}
#page-createaccount #verify{
    width: 150px;
    height: 30px;
    border-radius: 0 4px 4px 0;
    border-left: 0 none;
}
#page-createaccount #passor{
    border-radius: 4px 4px 0 0;
}
#page-accountmanagement #logout-btn {
    position: absolute;right: 0;top: 5px;
}
@media only screen and (max-width: 1252px) {
    #page-accountmanagement #logout-btn {
        position: relative;
        display: flex;
        margin: 0 auto;
    }
    #page-createaccount #verify{
        width: calc(100% - 100px);
    }
    .col-middle input[type=text], .col-middle input[type=password]{
        width: 100%;
    }
    .col-middle textarea{
        width: 100%;
    }
    .responsive-img{
        width: 100%;
        height: auto;
    }

    input[type="text"], input[type="password"], select{

    }
    #page-createaccount select{
        width: 100% !important;
    }
    .cafield-cnt{
        width: calc(100% - 20px);
    }
    .PWStrengthToolTip {
        position: unset;
        width: 100%;
        font-size: 9px !important;
    }
    .PWStrengthToolTip .HelperDivArrow{
        display: none;
    }
    .sex-input label{
        width: max-content;
        width: 50%;
        padding: 0 0 !important;
    }
    .sex-input {
        width: calc(100% - 20px);
    }
    .charname-input{

    }
    .choosevoc{
        transform: scale(0.7);
    }
    .crac-checkbox:checked + label .choosevoc {
    transform: scale(0.8) !important;
    }
    #page-createaccount td[width="150"]{
        max-width: 130px !important;
    }
    .hfieldarea div{
        margin: 10px 0 !important;
    }
    .hfieldarea{
        flex-direction: column;
    }
    #character-skills-table img{
        width: 25px;
        height: auto;
    }
    #character-skills-table .captions{
        font-size: 2.2vw;
    }
    /* Same treatment for the perk table. It needs the extra two rules because the perk
       names ("Prosperity", "Endurance") are roughly twice as long as the skill ones, so
       9 columns only fit once the cell padding is dropped and long names may break. */
    #character-perks-table img{
        width: 25px;
        height: auto;
    }
    #character-perks-table .captions,
    #character-perks-table .perk-levels{
        font-size: 2.2vw;
    }
    #character-perks-table td{
        padding: 2px 1px;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .spotlight-table .toptd-container{
        display: grid !important; 
        grid-template-columns: 1fr 1fr 1fr;
    }
    .toptd .imgtop{
        
    }
    .toptd{
        width: 100% !important;
    }
    .toptd .toptext{
        font-size: 10px;
        word-break: break-all;
    }
     .mobile-wrap{
        word-break: break-all;
     }
     .mobileaccpanel .bigbtn{
        width: 100%;
     }
     .exptable-container{
        grid-template-columns: 1fr 1fr !important;
     }

}
@media only screen and (max-width: 600px) {
     #page-magicitems #attributes{
        overflow: scroll;
     }
     .shop-category-box{
        font-size: 9px !important;
        margin-right: 2px !important;
        padding: 3px 3px !important;
     }
     .shop-category-box, .tab-button{
        font-size: 2.2vw !important;
     }
     .btn{
        white-space: nowrap;
        font-size: 11px !important;
     }
}
.hfieldarea{
    display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;
}
.charname-input{
    float: left;
}
.sex-input{
    height: 25px;
    border-radius: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--hx-outline);
}
.sex-input label{
    display: inline-block;
    background: linear-gradient(var(--hx-panel-2), var(--hx-panel));
    padding: 0 10px;
    cursor: pointer;
    /* color: #fff; */
    font-size: 13px;
    box-shadow: 0 2px 2px var(--hx-inset-hi) inset;
    white-space: nowrap;
        text-align: center;
    height: 25px;
    line-height: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
   user-select: none;  
}
.sex-input input{
    display: none;
}
.sex-input input:checked + label {
    box-shadow: 0 2px 5px #000 inset;
    font-weight: bold;
}

.gen-name-btn{
    position: absolute;
    height: 25px;
    width: 30px;
    right: 0;
    line-height: 25px;
    font-size: 16px;
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--hx-outline);
    /* border-left: 0 none; */
    box-shadow: 0 2px 2px var(--hx-inset-hi) inset;
    outline: 2px solid transparent;
    background: linear-gradient(var(--hx-panel-2), var(--hx-panel));
    transition: outline-color 
                ease .2s, color 
                ease .2s;
    display: block;
    float: left;
    text-align: center;
    color: var(--hx-btn-text);
}
.gen-name-btn:hover{
    color: var(--hx-btn-text-hover) !important;
}
.gen-name-btn:active{
    outline-color: var(--hx-outline);
}
.vocation-option{
    display: inline-flex;
    width: 25%;
    align-content: space-around;
    justify-content: center;
}
/* Create Character */
#crac-description{
    display: block;
    position: relative;
    text-align: center;
    color: var(--hx-text);
    padding: 5px;
    background: #181716e8;
    border: 1px solid var(--hx-hairline);
    border-radius: 2px;
    transition: all ease .2s;
    z-index: 1;
    width: 100%;
    opacity: 1;
    visibility: visible;
    font-size: auto;
}
#crac-description.first::after {left: 12%;}
#crac-description.second::after {left: 38%;}
#crac-description.third::after {left: 63%;}
#crac-description.fourth::after {left: 88%;}
#crac-description::after {
    content: " ";
    position: absolute;
    bottom: calc(100%);
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color:  transparent transparent var(--hx-hairline) transparent;

    transition: all ease .2s;
}
#crac-description:empty {
    visibility: hidden;
    opacity: 0;
    font-size: 0;
}

.choosevoc {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    margin: 10px 0 0 0;
    background: radial-gradient(var(--hx-panel-2), var(--hx-panel-3));
    box-sizing: border-box;
    transition: border 
ease .2s, box-shadow 
ease .4s, transform 
ease .2s !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 3px 3px 3px var(--hx-shadow), 1px 0 var(--hx-inset-hi) inset, -1px 0 var(--hx-inset-hi) inset, 0 1px var(--hx-inset-hi) inset, 0 -1px var(--hx-inset-hi) inset;
    outline: 1px solid var(--hx-outline);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.choosevoc .text{
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 12px 0;
    text-align: center;
    left: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-shadow: var(--text-shadow-outline);
    transition: all ease .1s;
}
.choosevoc .vocimg{
    position: relative;
    width: 100px;
    height: 100px;
    z-index: 15;
}
.choosevoc .vocimg img{
position: absolute;
    right: 34px;
    bottom: 36px;
    transition: all 
ease .2s;
    /* transform: scale(2); */
    image-rendering: pixelated;
    z-index: 10;
}
.crac-checkbox{
    display: none;
}
.crac-checkbox:checked + label .choosevoc .text{
    color: var(--hx-heading);
    text-shadow: 0 0 6px var(--hx-accent), 0 1px 0 var(--hx-outline-ink);
    font-size: 15px;
}
.crac-checkbox:checked + label .choosevoc .vocimg img{
    filter: drop-shadow(0 0 1px var(--hx-accent-glow)) drop-shadow(0 0 2px var(--hx-accent-glow)) drop-shadow(0 0 12px var(--hx-accent));
}
.crac-checkbox:checked + label .choosevoc {
    background: radial-gradient(circle at 50% 42%, #4a2f8f 0%, #2a1c52 58%, #150f28 100%);
    box-shadow: 0 0 0 1px var(--hx-accent), 0 0 18px -2px var(--hx-glow);
}
.crac-checkbox + label .choosevoc::after {
    content: "";
    width: 102px;
    height: 102px;
    position: absolute;
    top: 0;
    left: 0;    
    background-image: url(img/circle-100px.png);
    opacity: 0;
    transition: opacity ease .2s;
}
.crac-checkbox:checked + label .choosevoc::after {
    opacity: 1;
}
.page-item{
    display: inline-block;
    margin: 0 2px;
    padding: 1px 4px;
    background-color: var(--hx-panel-2);
    border-radius: 3px;
    color: unset;
    outline: 2px solid transparent;
    transition: background-color ease .1s, color ease .1s, outline-color ease .2s;
}
.page-item:not(.disabled):not(.dots):not(.active):hover{
    background-color: var(--hx-panel-3);
    cursor: pointer;
    color: unset !important;
    text-decoration: none !important;
}
.page-item:not(.disabled):not(.dots):not(.active):active{
    outline-color: var(--hx-outline);
}
.page-item.disabled{
    cursor: default !important;
    opacity: 0.5;
}
.page-item.active{
    cursor: default !important;
    background-color: var(--hx-accent);
    color: var(--hx-btn-text);
}
.page-item.dots{
    background-color: transparent;
    cursor: default !important;
}
.pedestal-sm{
    width: 51px;
    height: 51px;
    background-image: url(img/content/pedestal-sm.png);
    background-repeat: no-repeat;
    position: relative;
    margin: 3px;
}
.pedestal-sm img{   
    position: absolute;
    bottom: 10px;
    right: 10px;
    image-rendering: pixelated;
}
.status-badge{
    width: 15px;
    height: 15px;
    display: flex;
    font-size: 9pt;
    border-radius: 50%;
    justify-content: center;
    flex-wrap: wrap;
    background: var(--hx-panel-3);
    border: 1px solid var(--hx-hairline);
    box-shadow: 0 0 5px var(--hx-shadow);
    box-sizing: content-box;
    /* outline: 1px solid #5a4e35; */
    /* text-shadow: 0 0 5px #000; */
    align-content: space-around;
    color: var(--hx-text);

}
.status-badge.red{
    background: var(--hx-err-dim);
    border: 1px solid var(--hx-err-dim);
    box-shadow: 0 0 5px var(--hx-err-dim);
}
.status-badge.green{
    background: var(--hx-ok-dim);
    border: 1px solid var(--hx-ok-dim);
    box-shadow: 0 0 5px var(--hx-ok-dim);
    text-shadow: 0 0 2px var(--hx-outline-ink);
    color: var(--hx-ok-text);
}
.quest-container {
        margin-bottom: 6px;
        font-size: 14px;
        box-shadow: 3px 3px 3px var(--hx-shadow);
}
.quest-header {
    background-clip: padding-box;
    padding: 0;
    background-color: var(--hx-panel-2);
    display: flex;
    border: 1px solid var(--hx-hairline);
    outline: 1px solid var(--hx-outline);
    justify-content: space-between;
    align-items: center;
    z-index: 0;
    position: relative;
}
.quest-togglebtn i{
    transition: all ease .3s;
}
.quest-header.active .quest-togglebtn i{
    transform: rotate3d(1 , 0, 0, 180deg);
}
.quest-name{
    width: 100%;
    font-weight: 600;
    padding: 8px;
}
.quest-status {
    padding: 8px;
    border-radius: 3px;
}
.quest-difficulty {
    padding: 8px;
    white-space: nowrap;
}
.quest-difficulty i:not(.muted){
    color: var(--hx-text);
    text-shadow: 0 0 5px #0003;
}
.quest-difficulty i.muted{
    color: var(--hx-muted);
}
.quest-togglebtn {
    padding: 8px;
    height: 100%;
    transition: background ease .3s;
    cursor: pointer;
}
.quest-header.active .quest-togglebtn, .quest-togglebtn:hover {
    background: #fff2;
}
.status-done { background-color: var(--hx-ok); }
.status-undone { background-color: var(--hx-err); }
.quest-details {
    padding: 5px;
    outline: 1px solid var(--hx-outline);
    margin-top: -1px;
    background-color: var(--hx-panel);
    display: none;
    box-shadow: -1px 0 0 var(--hx-inset-hi) inset, 1px 0 0 var(--hx-inset-hi) inset, 0 -1px 0 var(--hx-inset-hi) inset, 0 1px 0 var(--hx-inset-hi) inset;
}
.quest-details .inside-details{
    display: flex;
    justify-content: space-between;
}
.quest-details-headline{
    font-size: 10px;
    font-weight: 600;
    border-bottom: 1px solid var(--hx-hairline);
    margin-bottom: 10px;
    color: var(--hx-dim);
}
.quest-hidden.hidden{
    display: none;
}
.reward-item {
    border: 1px solid var(--hx-hairline);
    overflow: hidden;
    width: 32px;
    height: 32px;
    box-sizing: content-box;
    background: radial-gradient(var(--hx-panel-3), var(--hx-bg));
    outline: 1px solid var(--hx-outline);
    display: inline-block;
    margin: 0 5px 0 0;
    position: relative;
}
.reward-item .item-count{
    background: #0008;
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 8px;
    font-weight: 400;
    border-radius: 2px;
    bottom: 0;
    right: 0;
    position: absolute;
    padding: 0 3px;
}
.reward-item img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
.badge{
    display: inline-block;
    /* vertical-align: middle; */
    padding: 1px 6px;
    border-radius: 5px;
    background-color: var(--hx-outline);
    color: #ffffff;
    font-size: 12px;
    text-shadow: 0 0 1px #000;
    font-weight: 500;
    box-shadow: 0 -1px 1px #00000038 inset;
}
.badge.green{background-color: var(--hx-ok-dim);}
.badge.red{background-color: var(--hx-err-dim);}
.badge.blue{background-color: var(--hx-info-dim);}
.badge.yellow{background-color: var(--hx-warn-dim);color: #ffffff;}
.badge.purple{background-color: #8b2ab9;}
.news-ticker{
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 8px;
    min-height: 28px;
    max-height: 30px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), background-color .15s;
}
.news-ticker:focus-visible{
    outline: 1px solid var(--hx-accent, #8b2ab9);
    outline-offset: -1px;
}
.news-ticker .tk-date,
.news-ticker .tk-title{
    flex: none;
    display: inline-block;
    padding: 1px 8px;
    margin-top: 2px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
}
.news-ticker .tk-date{
    background: var(--hx-panel-2, #e9d6b5);
    border: 1px solid var(--hx-hairline, #c9b28e);
    color: var(--hx-muted, #6b4a2b);
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}
.news-ticker .tk-title{
    background: var(--hx-accent-a25, #d8c2ee);
    border: 1px solid var(--hx-accent-a25, #b99ad8);
    color: var(--hx-accent-glow, #4a1d7a);
    font-weight: 600;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-ticker .text{
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    max-height: 20px;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
.news-ticker .tk-foot{
    display: none;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--hx-hairline, #d4c0a1);
    font-size: 12px;
}
.news-ticker .tk-foot a{
    color: var(--hx-accent-glow, #5a2800);
}
.news-ticker .plusminus{
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    background-image: url(img/plus.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.news-ticker.active .plusminus{
    background-image: url(img/minus.gif);
}
.news-ticker.active{
    max-height: 2000px;
    transition: max-height 1s ease;
}
.news-ticker.active .text{
    display: block;
    max-height: 2000px;
    transition: max-height 1s ease;
}
.news-ticker.active .tk-foot{
    display: block;
}
.news-ticker:nth-child(even){
    background: var(--hx-row-a, #F1E0C6);
}
.news-ticker:nth-child(odd){
    background: var(--hx-row-b, #D4C0A1);
}
.news-ticker:hover{
    background: var(--hx-accent-a12, #e2cfa9);
}
#NewsTicker .bar{
    position: relative;
}
#NewsTicker .bar .tk-all{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4; /* .bar h2 is full-width at z-index 3 and would swallow the click */
}
@media (max-width: 600px){
    .news-ticker{
        gap: 6px;
        padding: 4px 6px;
    }
    .news-ticker .tk-title{
        flex: 0 0 auto;
        max-width: 45%;
    }
    /* expanded on a phone: pills on their own line with the full title, text underneath */
    .news-ticker.active{
        flex-wrap: wrap;
    }
    .news-ticker.active .tk-title{
        max-width: calc(100% - 124px);
        white-space: normal;
        line-height: 15px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    .news-ticker.active .plusminus{
        order: 2;
    }
    .news-ticker.active .text{
        flex-basis: 100%;
        order: 3;
        padding-top: 6px;
    }
}
.checkbox{
    display: flex;
    align-items: top;
}
.checkbox input[type="checkbox"]{
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    position: absolute;
}
.checkbox label{
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
}
.checkbox label::before{
    content: "\f00c";
    color: transparent;
    outline: 2px solid transparent;
    font-family: "Font Awesome 7 Pro"; 
    font-weight: 400;
    width: 12px;
    height: 12px;
    text-align:center;
    font-size: 9px;
    border: 2px solid var(--hx-dim);
    border-radius: 3px;
    line-height: 12px;
    transition: all ease .3s;
    margin-right: 6px;
}
.checkbox input:checked + label::before{
    font-weight: 900;
    color: var(--hx-btn-text);
    background: var(--hx-accent);
    transition: all ease .3s;
}
.checkbox input:active + label::before{
    outline-color: var(--hx-accent-a25);
    transition: all ease .3s;
}

/* player spotlight */
.spotlight-table{
    width: 100%;
    border-spacing: 5px;
    border-collapse: separate;
}
.spotlight-table .toptd-container, .topguilds-container{
    display: flex; 
    gap: 5px;
    justify-content: space-evenly;
}

.toptd{
    width: 100%;
    text-align: center;
    background: url(img/paper-only-lt.png);
    vertical-align: top;
    box-shadow: 0 0 50px var(--hx-inset-lo) inset, 2px 2px 3px #00000085;
    position: relative;
    border: 4px solid;
    border-image: url(img/content//border2.png) 4 repeat;
    border-image-width: 4px;
    transition: box-shadow ease .2s;
    border-radius: 3px;

    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}
.toptd .title{
    color: var(--hx-heading);
    font-family: 'Martel';
    font-weight: normal;
    font-size: 14px;
    text-shadow: var(--text-shadow-outline);
    white-space: nowrap;
    margin-top: 5px;
}
.toptd .imgtop{
    width: 84px;
    height: 84px;
    border-radius: 999px;
    position: relative;
    display: block;
    margin: 0 auto 7px auto;
    background: radial-gradient(var(--hx-panel), var(--hx-panel-3));
    box-shadow: 0 0 9px var(--hx-glow);
    cursor: pointer;
    transition: transform ease .2s, box-shadow ease .3s, color ease .3s;
}
		.toptd .hpbar{
			position: absolute;
    display: block;
    width: 27px;
    height: 4px;
    border: 1px solid #000;
    background: #000;
    left: calc(50% - 13px);
    bottom: 0;
		}
		.toptd .hpbar div{
			height: 2px;
			background: var(--hx-ok);
		}
			.toptd .nick{
			color: var(--hx-ok);
    font-weight: bold;
    font-size: 11px;
    text-shadow: var(--text-shadow-outline-tibia);
    font-family: verdana;
    bottom: 6px;
    position: absolute;
    width: 100px;
    left: calc(50% - 50px);
    word-break: break-all;

    transition: color ease .1s;
		}
			
/*
.toptd .imgtop::after{
    content: "";
    width: 84px;
    height: 84px;
    display: block;
    background-image: url(img/circle-100px.png);
    background-size:     cover;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    border-radius: 999px;
}*/
.toptd .imgtop .outfit{
    position: absolute;
    bottom: 0px;
    right: 18px;
    
    z-index: 2;
}
.toptd .toptext:hover .imgtop .outfit{

}
.toptd .toptext:hover .imgtop .nick{
    color: var(--hx-ok-text);
}
.toptd .toptext:hover .charname{
    font-size: 16px;
    color: var(--hx-warn-text);
}
.toptd .toptext{
    text-decoration: none !important;
    display: block;
    transition: color ease .2s;
        width: 100%;
}
.toptd .badge{
    width: 100%;
    display: block;
    height: 25px;
    text-align: center;
    background: linear-gradient(transparent, var(--hx-shadow));
    line-height: 20px;
    border-radius: 0;
    text-shadow: 0 1px 2px #000;
}
.topguild{
    width: 33%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.guildrankimg{
    width: 96px;
    height: 96px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 5px auto;

    transition: all ease .2s;
}
.guildrankimg img{
    z-index: 2 !important;
    border-radius: 999px;
}
.guildrankimg .kills{
    position: absolute;
    bottom: 12px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0px 3px #000;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 4;
}
.guildrankimg::after{
    content: "";
    border-radius: 999px;
    width: 64px;
    height: 64px;
    background: radial-gradient(var(--hx-gold), #000000);
    position: absolute;
    display: block;
    z-index: 1 !important;
}
.guildrankimg::before{
    content: "";
    width: 96px;
    height: 96px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3 !important;
}
.topguild .text{
    margin-bottom: 5px;
}
.topguild-kills{
    font-size: 12px;
    opacity: .75;
    margin-bottom: 5px;
}
.guildrankimg.rank1::before{background-image: url(../../images/guildranks/1.png);}
.guildrankimg.rank2::before{background-image: url(../../images/guildranks/2.png);}
.guildrankimg.rank3::before{background-image: url(../../images/guildranks/3.png);}
.toptd .text{
    height: 17px;
}
.toptd .toptext:hover .guildrankimg{
    transform: translateY(-3px);
    filter: drop-shadow(0 3px 9px var(--hx-glow));
}
.toptd .topguildrank{
    font-family: sans-serif;
    text-shadow: none;
    font-weight: 900;
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 10px;
    text-transform: uppercase;
    box-shadow: 0 1px 6px #0005, 0 1px 0 #fff5 inset;
    color: #fffceee7;
}
.toptd .topguildrank .txt{
    color: transparent;
    background-clip: text;
}
.toptd .topguildrank.rank1{
    background: linear-gradient(#ffe256, #977806);
    border-bottom: 1px solid #493a03;
}
.toptd .topguildrank.rank1 .txt{
    background-image: linear-gradient(360deg, rgb(104, 93, 29), rgb(86 74 0));
    filter: drop-shadow(0 1px 0 rgba(255, 238, 144, 0.219)) drop-shadow(0 -1px 0 rgba(46, 20, 5, 0.185));
}
.toptd .topguildrank.rank2{
    background: linear-gradient(#d3d3d3, #88989b);
    border-bottom: 1px solid #3f3f3f;
}
.toptd .topguildrank.rank2 .txt{
    background-image: linear-gradient(360deg, rgb(97, 97, 97), rgb(37, 37, 37));
    filter: drop-shadow(0 1px 0 rgba(158, 158, 158, 0.76)) drop-shadow(0 -1px 0 rgba(46, 20, 5, 0.185));
}
.toptd .topguildrank.rank3{
    background: linear-gradient(#f3ca95, #957645);
    border-bottom: 1px solid #271500;
}
.toptd .topguildrank.rank3 .txt{
    background-image: linear-gradient(360deg, rgb(134, 96, 24), rgb(86 74 0));
    filter: drop-shadow(0 1px 0 rgba(255, 220, 144, 0.219)) drop-shadow(0 -1px 0 rgba(46, 20, 5, 0.185));
}
.toptd .topguildrank{}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.text-bold{
    font-weight: bold;
}
.card-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.card-container .card{
    background: linear-gradient(var(--hx-panel-2), var(--hx-panel));
    border: 1px solid var(--hx-hairline);
    outline: 1px solid var(--hx-outline);
    padding: 10px;
    box-shadow: 3px 6px 5px var(--hx-shadow);
    transition: transform 0.3s 
    ease, box-shadow 0.3s 
    ease, border-color 0.3s 
    ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    text-decoration: none !important;
}
.card-container .card .header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-container .card .icofx{
    height: 90px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}
.card-container .card .fa{
    font-size: 70px;
    opacity: 0.07;
    position: absolute;
    top: -7px;
    right: 0;
    color: var(--hx-text);
    z-index: 0;
    transition: all ease .3s;
}
.card-container .card .header .title {
    font-size: 16px;
    font-weight: 600;
    z-index: 1;
    transition: color ease .2s;
}
.card-container .card .desc {
    font-size: 13px;
    color: var(--hx-dim);
    font-weight: 500;
    z-index: 1;
    text-shadow: none;
}
.card-container .card .icon{
    position: relative;
}
/* wiki cards frame their icon like an inventory slot */
.wiki-content .card-container .card .icon{
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    background: radial-gradient(var(--hx-chrome-3), var(--hx-panel-2));
    box-shadow: 3px 3px 3px var(--hx-shadow), 1px 0 var(--hx-inset-hi) inset, -1px 0 var(--hx-inset-hi) inset, 0 1px var(--hx-inset-hi) inset, 0 -1px var(--hx-inset-hi) inset;
    outline: 1px solid var(--hx-outline);
}
.wiki-content .card-container .card .icon img{
    position: absolute;
    bottom: 3px;
    right: 3px;
    max-width: 32px;
    max-height: 32px;
    image-rendering: pixelated;
}
/* description sat 1px under the icon frame while the card bottom had 11px */
.wiki-content .card-container .card .desc{
    margin-top: 4px;
}
/* humanoid outfits fill only the bottom-right quadrant of their 64px canvas:
   render bigger and offset so the sprite itself lands centred in the frame */
.wiki-content .card-container .card .icon img.outfit-zoom{
    max-width: 48px;
    max-height: 48px;
    right: 4px;
    bottom: 5px;
}
.card-container .card:hover, .card-container .card.active{ 
    box-shadow: 3px 3px 3px var(--hx-shadow), 0 0 50px var(--hx-glow) inset;
    transform: translateY(3px);
    border-color: #ffffff;
}
.card-container .card:hover .fa, .card-container .card.active .fa{
    transform: scale(1.1);
}
.card-container .card:hover .header .title, .card-container .card.active .header .title{
    color: var(--hx-heading);
}
.shop-category-header{
    height: 20px;
    padding: 0;
    position: relative;
    margin-top: 15px;
}
.shop-category-header .shop-categories{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.shop-category-header .shop-categories .shop-category-box{
    border-width: 4px 4px 0 4px;
    border-style: solid;
    border-image-source: url(img/content/border2.png);
    border-image-slice: 4;
    border-image-repeat: repeat;
    display: flex;
    background: linear-gradient(var(--hx-chrome-3), var(--hx-chrome));
    padding: 3px 8px;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0px 6px #000000, 0 1px 2px var(--hx-inset-hi) inset;
    margin-right: 4px;
    white-space: nowrap;
    text-shadow: 0 1px 3px #000;
    mask-image: linear-gradient(#000 79%, transparent 100%);
    color: var(--hx-btn-text);
    transition: color 
ease .2s, transform 
ease .2s, filter 
ease .2s;
    text-decoration: none !important;
    font-weight: normal;
    /* line-height: 1px; */
    align-items: center;
}
.shop-category-header .shop-categories .shop-category-box:hover{
    color: var(--hx-btn-text-hover);
    cursor: pointer;
    transform: translateY(-2px);
    filter: brightness(1.2);
}
.shop-category-header .shop-categories .shop-category-box.active{
    background: linear-gradient(var(--hx-gold), var(--hx-gold-dim));
    transform: translateY(-2px);
    font-weight: bold;
    color: #fff1d2;
}
.exptable-container{
	display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 5px;
}
/*faq page */
    .accordion-group {
        overflow: hidden;
        box-shadow: 3px 3px 3px var(--hx-shadow-soft);
        border-top: 1px solid var(--hx-outline);
        border-left: 1px solid var(--hx-outline);
        border-right: 1px solid var(--hx-outline);
    }
    
    .accordion-header {
        background-color: var(--hx-panel-2);
        cursor: pointer;
        padding: 12px 15px;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s ease;
        background-color: var(--hx-row-a);
        display: flex;
        border-bottom: 1px solid var(--hx-hairline);
        box-shadow: 0 0 0 1px var(--hx-inset-hi) inset;
        margin: 0px 0px;
    }
    .accordion-header:hover { background-color: var(--hx-row-b);}
    .accordion-header.active { background-color: var(--hx-row-b); }
    
    .accordion-header .chevron { transition: transform 0.3s ease;}
    .accordion-header.active .chevron { transform: rotate3d(1 , 0, 0, 180deg); }

    .accordion-content {
        padding: 20px 25px;
        display: none;
        line-height: 1.6;
        border-bottom: 1px solid var(--hx-outline);
        background-color: var(--hx-panel);
    }

    .preview-button {
        padding: 5px 10px;
    }
    .preview-button:hover, .preview-button.btn-active { background: var(--hx-accent);color: var(--hx-btn-text-hover) !important; }
    .preview-button i { margin-right: 8px; }

    .video-wrapper {
        display: none;
        background: #000;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        margin-top: 15px;
    }
    .video-wrapper video {
        width: 100% !important;
        height: auto !important;
        display: block;
    }


.vip-badge{
    /*background: linear-gradient(#1b8bff, #070954);*/
    display: inline-flex;
    /*width: 18px;*/
    height: 18px;
    line-height: 20px;
    text-align: center;
    /*color: #ccecff;
    border-radius: 18px;
    box-shadow: 0 2px 5px #0005;*/
    align-items: center;
    font-size: 11px;
    justify-content: center;
    /*outline: 1px solid #bbdcff;*/
    margin-left: 3px;
}

.wiki-container { display: flex; gap: 10px;}
.wiki-nav { width: 170px;min-width:170px; background: var(--hx-panel-2); border: 1px solid var(--hx-hairline); padding-bottom: 10px; }
.wiki-nav ul { list-style: none; padding: 0; margin: 0; }
.wiki-nav a { text-decoration: none; display: block; padding: 5px 10px; border-bottom: 1px solid var(--hx-hairline); color: var(--hx-text); font-size: 13px; transition: background 0.2s; }
.wiki-nav a:hover { background: var(--hx-row-b); }
.wiki-nav a.active { background: var(--hx-panel-3); font-weight: bold; border-left: 4px solid var(--hx-accent); }

.submenu { background: var(--hx-row-a); border-top: 1px solid var(--hx-hairline); }
.submenu a { padding-left: 10px; font-size: 11px;}
.submenu a.active-sub { font-weight: bold;padding-left: 20px; }

.wiki-search { padding: 10px; background: var(--hx-panel); border-bottom: 1px solid var(--hx-hairline); }
.wiki-search input { width: 100%; padding: 6px; box-sizing: border-box; border: 1px solid var(--hx-hairline); border-radius: 3px; font-size: 12px; }

.wiki-content-wrapper { width: 100%; }
.wiki-content { border: 1px solid var(--hx-hairline); padding: 10px; background: var(--hx-panel); min-height: 400px; }

.wiki-breadcrumbs { margin-bottom: 10px; background: var(--hx-panel-2); padding: 8px; border-radius: 4px; font-size: 11px; border: 1px solid var(--hx-hairline); }
.wiki-breadcrumbs a { color: var(--hx-link); font-weight: bold; text-decoration: none; }

.wiki-search-results { list-style: none; padding: 0; }
.wiki-search-results li { margin-bottom: 15px; border-bottom: 1px solid var(--hx-hairline); padding-bottom: 10px; }
.wiki-search-results a { font-size: 16px; color: var(--hx-link); text-decoration: none; }
.wiki-search-results a:hover { text-decoration: underline; }
.wiki-search-results p { font-size: 12px; color: var(--hx-dim); margin: 5px 0 0 0; font-style: italic; }

#lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
#lightbox-content {
    position: relative;
    background: #000;
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#lightbox-close {
    position: absolute;
    top: -40px; right: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}
#lightbox-dynamic-content img {
    display: block;
    max-width: 100%;
    height: auto;
}
#lightbox-dynamic-content iframe {
    width: 80vw;
    height: 80vh;
    border: none;
}
.outfit-box{
    width: 38px;
    height: 38px;
    position: relative;
    margin: 4px;
    border-radius: 3px;
    display: inline-block;
    background: radial-gradient(var(--hx-panel), var(--hx-panel-2));
    box-shadow: 3px 3px 3px var(--hx-shadow), 1px 0 var(--hx-inset-hi) inset, -1px 0 var(--hx-inset-hi) inset, 0 1px var(--hx-inset-hi) inset, 0 -1px var(--hx-inset-hi) inset !important;
    outline: 1px solid var(--hx-outline) !important;
}
.outfit-box .outfitbox-name{
    text-align: center;
    color: var(--hx-ok);
    font-weight: bold;
    font-size: 11px;
    text-shadow: var(--text-shadow-outline-tibia);
    font-family: verdana;
    top: -25px;
    z-index: 9;
    position: absolute;
    white-space: nowrap;
    transform: translateX(-50%);
}
.outfit-box img, .outfit-box .outfit-shader{
    position: absolute;
    bottom: 4px;
    right: 4px;
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
}
/* outftit shaders and outlines */

.outfit-shader {
    width: 64px;
    height: 64px;
    display: block;
    background: var(--mask-url);
    position: relative;
}
.outfit-shader.red-outline{
    filter: drop-shadow(1px 0 0 red) 
            drop-shadow(0 1px 0 red) 
            drop-shadow(0 -1px 0 red) 
            drop-shadow(-1px 0 0 red);
}
.outfit-shader.rainbow-outline{
    filter: drop-shadow(1px 0 0 red) 
            drop-shadow(0 1px 0 red) 
            drop-shadow(0 -1px 0 red) 
            drop-shadow(-1px 0 0 red);
    animation: rainbow-outline 4s linear infinite;
}
@keyframes rainbow-outline {
    0%, 100% {
        filter: drop-shadow(1px 0 0 red) drop-shadow(0 1px 0 red) drop-shadow(0 -1px 0 red) drop-shadow(-1px 0 0 red);
    }
    50% {
        filter: drop-shadow(1px 0 0 green) drop-shadow(0 1px 0 green) drop-shadow(0 -1px 0 green) drop-shadow(-1px 0 0 green);
    }
    75% {
        filter: drop-shadow(1px 0 0 blue) drop-shadow(0 1px 0 blue) drop-shadow(0 -1px 0 blue) drop-shadow(-1px 0 0 blue);
    }
}

.outfit-shader::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0px !important;
    right: 0px !important;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: var(--mask-url);
    mask-image: var(--mask-url);
    -webkit-mask-size: contain;
    mask-size: contain;
}
.sun-shader::after{
    background: url(../../images/shaders/sun.png);
    --mix-blend-mode: screen;
    mix-blend-mode: overlay;
    animation: slide-img-x 40s linear infinite;
}
.rainbow-shader::after{
    background: url(../../images/shaders/rainbow_new.png);
    --mix-blend-mode: screen;
    mix-blend-mode: overlay;
    animation: slide-img-x 40s linear infinite;
}
@keyframes slide-img-x {
    from { background-position: 0 0; }
    to   { background-position: 0 1000px; }
}

/* end outfit shaders and outlines */
.bordered{
    background: radial-gradient(var(--hx-accent-a12) 30%, #00000015);
    border-image: url(img/content/border2.png) 4 repeat;
    border-image-width: 4px;
    border-image-outset: 4px;
    margin: 6px;
}
.client-bordered{
    border-image: url(img/content/client-border.png) 6 fill repeat;
    border-image-width: 6px;
    border-image-outset: 6px;
    margin: 6px;
}
.client-bordered.thin{
    border-image: url(img/content/client-border-thin.png) 4 fill repeat;
    border-image-width: 4px;
    border-image-outset: 4px;
    margin: 4px;
}

.avatar {
    position: relative;
    width: 256px;
    height: 256px;
}

.base {
    width: 100%;
    height: 100%;
    display: block;
}

/* Rainbow overlay */
.rainbow {
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* Rainbow gradient */
    background: linear-gradient(90deg,
        red, orange, yellow, lime, cyan, blue, purple, red
    );
    background-size: 200% 100%;

    /* Use the mask APNG */
    -webkit-mask-image: url("/outfitter/animoutfit.php?id=201&mode=mask");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    mask-image: url("/outfitter/animoutfit.php?id=201&mode=mask");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-composite: intersect;

    /* Make the base visible underneath */
    mix-blend-mode: overlay; /* optional for glow effect */
    z-index: 1;
}

/* wiki + card grid responsiveness */
.wiki-content-wrapper{ min-width: 0; }
.wiki-content{ overflow-x: auto; }
@media only screen and (max-width: 1252px) {
    .wiki-container{ flex-direction: column; }
    .wiki-nav{ width: 100%; min-width: 0; }
    .card-container{ grid-template-columns: 1fr 1fr; }
}
@media only screen and (max-width: 600px) {
    .card-container{ grid-template-columns: 1fr; }
    .wiki-content table.content-table{ font-size: 12px; }
}

/* Tables too wide for a phone scroll inside their own box (responsive.js wraps
   them at load) instead of dragging the whole column -- the wiki used to scroll
   .wiki-content itself, which slid the headings and boxes off screen with it. */
.table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-scroll > table{
    margin-bottom: 3px;   /* room for the .content-table drop shadow */
}
@media only screen and (max-width: 1252px) {
    /* nowrap heading cells are the main reason these tables overflow at all */
    .content-table .heading{ white-space: normal; }
}
@media only screen and (max-width: 600px) {
    .content-table{ font-size: 12px; }
    .content-table td, .content-table th{ padding: 2px 3px; }
}

/* No single image may drag the page sideways on a phone -- a news post or wiki
   screenshot wider than the column used to scroll the whole layout. Sprites and
   anything with an explicit height attribute keep their exact size. */
@media only screen and (max-width: 1252px) {
    .col-middle img:not([height]) { max-width: 100%; }
    /* ...but never sprites: they are exact-size pixel art, and squeezing one to
       fit a narrow cell resamples it while its border-image outset keeps drawing
       at full size, so the frame ends up over the next column */
    .col-middle img.client-bordered,
    .col-middle .itembox img { max-width: none; }
}

/* Shop tab strip: six tabs on one absolutely-positioned nowrap row overran the
   board by ~11px at 375px, clipping the first and last labels. Tightening the
   padding is enough to fit them; the row cannot wrap without breaking the header. */
@media only screen and (max-width: 600px) {
    .shop-category-header .shop-categories .shop-category-box{
        padding: 3px 4px !important;
        margin-right: 2px !important;
    }
    /* "VIP Items" -> "VIP" etc: six tabs only just fit at 375px, and the word
       adds nothing the icon and the heading below don't already say */
    .shop-category-header .shop-categories .shop-category-box .cat-word{
        display: none;
    }
}

/* ---- legacy inline colours in database-authored content --------------------
   News posts and page HTML written through the admin panel carry the OLD parchment
   palette inline (color:#5a2800 body text, color:#004294 links, and the cream fills),
   and an inline style beats every selector. These substring matches re-point exactly
   those legacy values and nothing else; they are scoped to .page-content so they can
   never touch layout chrome. Remove a line here once the stored HTML is cleaned up. */
.page-content [style*="#5a2800" i]{ color: var(--hx-text) !important; }
.page-content [style*="#5f4d41" i]{ color: var(--hx-dim) !important; }
.page-content [style*="#004294" i],
.page-content [style*="#0063dc" i]{ color: var(--hx-link) !important; }
.page-content [style*="background-color:#f1e0c6" i],
.page-content [style*="background-color: #f1e0c6" i]{ background-color: var(--hx-row-b) !important; }
.page-content [style*="background-color:#d4c0a1" i],
.page-content [style*="background-color: #d4c0a1" i]{ background-color: var(--hx-row-a) !important; }

/* ---- tag filter buttons ----------------------------------------------------
   Previously defined ONLY inline in pages/market.php (and copy-pasted into
   wikipages/raids.php), so wikipages/monsters.php rendered them unstyled. Defining
   them here covers every page that emits one. */
.tag-btn{
    display: inline-block;
    background: linear-gradient(var(--hx-panel-2), var(--hx-panel));
    color: var(--hx-btn-text);
    padding: 0 10px;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--hx-outline);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 var(--hx-inset-hi);
    transition: all ease .2s;
}
.tag-btn:hover{
    background: linear-gradient(var(--hx-panel-3), var(--hx-panel-2));
    color: var(--hx-btn-text-hover);
    border-color: var(--hx-accent);
}
.tag-btn.active{
    background: linear-gradient(var(--hx-accent), #6d3fd0);
    color: #fff;
    border-color: var(--hx-accent-glow);
    box-shadow: 0 0 8px var(--hx-glow), inset 0 1px 0 var(--hx-inset-hi);
}

/* DataTables reads these; the bundled html.dark block defines the other three. */
html.dark{
    --dt-html-background: var(--hx-panel);
    --dt-row-selected: 139, 92, 246;
    --dt-row-selected-text: 255, 255, 255;
    --dt-row-selected-link: 245, 240, 255;
}

/* ---- View Guild (pages/guilds.php action=show) ---- */
.guild-hero{display:flex;flex-direction:row;align-items:center;text-align:center;gap:22px;padding:22px 24px;margin-bottom:14px;position:relative;overflow:hidden;
    background:radial-gradient(ellipse 60% 70% at 50% 0%,rgba(139,92,246,.16),transparent 70%),linear-gradient(var(--hx-panel-2, #2a2233), var(--hx-panel, #1c1723));border:1px solid var(--hx-hairline, #3a3045);outline:1px solid var(--hx-outline, #120e18);box-shadow:3px 6px 5px var(--hx-shadow, rgba(0,0,0,.4));border-radius:3px;}
.guild-hero::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,163,255,.55),transparent);}
.guild-crest{position:relative;width:136px;height:136px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.guild-crest .crest-halo{position:absolute;inset:0;top:0;right:0;bottom:0;left:0;border-radius:50%;
    background:radial-gradient(circle,rgba(139,92,246,.35) 0%,rgba(139,92,246,.10) 45%,transparent 70%);animation:hxCrestBreathe 6s ease-in-out infinite;}
.guild-crest::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;
    background:conic-gradient(from 200deg,#4a3a6a,#c4a3ff 25%,#4a3a6a 50%,#d9a83a 75%,#4a3a6a);
    -webkit-mask:radial-gradient(circle,transparent 55px,#000 56px,#000 59.5px,transparent 60.5px);mask:radial-gradient(circle,transparent 55px,#000 56px,#000 59.5px,transparent 60.5px);}
.guild-crest img{position:relative;width:104px;height:104px;border-radius:50%;object-fit:cover;background:#120e18;box-shadow:0 0 0 3px #0f0b16,0 6px 16px rgba(0,0,0,.6);image-rendering:auto;}
@keyframes hxCrestBreathe{0%,100%{opacity:.6;transform:scale(.96);}50%{opacity:1;transform:scale(1.04);}}
html.strike .guild-crest::before{animation:hxGuildPlateStrike .9s ease-out;}
.guild-hero-body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;min-width:0;}
.guild-hero-body .guild-mark{margin:0 0 10px;}
.guild-motd{font-style:italic;color:var(--hx-text-dim, #b9b0c6);margin:0 0 10px;max-width:640px;}
.guild-motd .fa-solid{opacity:.5;font-size:11px;}
.guild-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:10px;max-width:760px;}
.guild-chips .badge a{color:inherit;text-decoration:none;}
.guild-chips .badge .fa-solid{font-size:11px;margin-right:2px;opacity:.85;}
.guild-desc{margin-top:4px;line-height:1.5;max-width:640px;color:var(--hx-text, inherit);}
.guild-manage{position:absolute;top:12px;right:12px;white-space:nowrap;}
.guild-section-title{font-family:'Martel',serif;color:var(--hx-heading, #e8dfc4);font-size:15px;margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--hx-hairline, #3a3045);}
.guild-rank-head{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font-weight:bold;color:var(--hx-heading, #e8dfc4);}
.guild-rank-head img{width:22px;height:22px;}
.guild-rank-head .badge{font-weight:normal;}
.guild-members .card-container + .guild-rank-head{margin-top:20px;}
.card.guild-member{flex-direction:row;align-items:flex-start;gap:8px;padding:8px;}
.card.guild-member .pedestal-sm,.skill-tile .pedestal-sm,.fragger .pedestal-sm{flex:0 0 51px;margin:0;}
.gm-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.gm-name{display:flex;align-items:center;gap:5px;font-weight:bold;flex-wrap:wrap;}
.gm-name .status-badge{width:9px;height:9px;flex:0 0 auto;}
.gm-name .player-flag{margin:0;}
.gm-crown{color:var(--hx-gold, #d9a83a);font-size:11px;}
.gm-skull{vertical-align:middle;}
.gm-voc{width:16px;height:16px;vertical-align:-3px;margin-right:4px;}
.gm-meta{font-size:12px;color:var(--hx-text-dim, #b9b0c6);}
.gm-sub{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--hx-text-dim, #b9b0c6);}
.gm-nick{font-style:italic;}
.gm-seen{opacity:.8;}
.gm-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px;}
.gm-actions .badge{text-decoration:none;cursor:pointer;}
.gm-nick-form{display:inline-flex;gap:4px;align-items:center;margin:0;}
.gm-nick-form input.sm{width:110px;}
.guild-empty{padding:14px;text-align:center;color:var(--hx-text-dim, #b9b0c6);font-style:italic;}
.stat-tiles .stat-tile{align-items:center;text-align:center;justify-content:center;gap:2px;min-height:64px;}
.stat-tile .stat-value{font-size:18px;font-weight:bold;color:var(--hx-heading, #e8dfc4);}
.stat-tile .stat-value small{font-weight:normal;font-size:12px;color:var(--hx-text-dim, #b9b0c6);}
.stat-tile .stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--hx-text-dim, #b9b0c6);}
.stat-tile .outfit-box,.skill-tile .outfit-box{margin:0 0 4px;}
.outfit-box img{position:absolute;bottom:0;right:0;image-rendering:pixelated;}
.voc-bar{display:flex;height:34px;border-radius:4px;overflow:hidden;border:1px solid var(--hx-hairline, #3a3045);outline:1px solid var(--hx-outline, #120e18);background:var(--hx-panel-3, #241d2c);}
.voc-bar .seg{display:flex;align-items:center;justify-content:center;gap:4px;font-weight:bold;color:#fff;text-shadow:0 1px 2px #000;min-width:44px;}
.voc-bar .seg + .seg{border-left:1px solid rgba(0,0,0,.35);}
.voc-bar .voc1{background:linear-gradient(#7b3fc4,#4d2480);}
.voc-bar .voc2{background:linear-gradient(#3f9a4a,#245a2b);}
.voc-bar .voc3{background:linear-gradient(#c49a2a,#7a5d12);}
.voc-bar .voc4{background:linear-gradient(#c43f3f,#7a2020);}
.voc-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;font-size:12px;color:var(--hx-text-dim, #b9b0c6);}
.card.skill-tile{flex-direction:row;align-items:center;gap:8px;padding:8px;}
.skill-tile .skill-ico{width:24px;height:24px;flex:0 0 24px;image-rendering:pixelated;}
.skill-tile .badge{align-self:flex-start;}
.top-fraggers{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.fragger{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;text-decoration:none !important;position:relative;
    background:linear-gradient(var(--hx-panel-2, #2a2233), var(--hx-panel, #1c1723));border:1px solid var(--hx-hairline, #3a3045);outline:1px solid var(--hx-outline, #120e18);box-shadow:3px 6px 5px var(--hx-shadow, rgba(0,0,0,.4));border-radius:3px;}
.fragger .fragger-rank{font-weight:900;font-family:sans-serif;color:var(--hx-gold, #d9a83a);font-size:14px;}
.fragger.rank2 .fragger-rank{color:#c0c0c0;}
.fragger.rank3 .fragger-rank{color:#cd7f32;}
.fragger .badge{align-self:flex-start;}
.war-score{display:inline-flex;align-items:center;gap:6px;font-size:18px;font-weight:bold;}
.war-score .badge{font-size:16px;padding:2px 10px;}
@media only screen and (max-width: 600px) {
    .guild-hero{flex-direction:column;gap:8px;padding:18px 10px 14px;}
    .guild-manage{position:static;margin-top:10px;}
}

/* ---- guild name mark: pale stone letters on a dark crystal plate, lit by the storm ---- */
.guild-mark{position:relative;display:inline-block;padding:8px 38px 10px;margin:2px 0 8px;max-width:100%;}
.gmk-plate{position:absolute;inset:0;top:0;right:0;bottom:0;left:0;
    clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);
    background:linear-gradient(180deg,#2a2236 0%,#171220 55%,#0f0b16 100%);
    box-shadow:0 0 0 1px var(--hx-hairline, #3a3045) inset;}
.gmk-plate::after{content:"";position:absolute;inset:3px;top:3px;right:3px;bottom:3px;left:3px;
    clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);
    background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(139,92,246,0) 45%,rgba(139,92,246,.10));
    border-top:1px solid rgba(196,163,255,.35);opacity:.9;}
.gmk-word{position:relative;display:inline-block;line-height:1.05;}
.gmk-text{font-family:'New Rocker','Martel',serif;font-weight:400;font-size:36px;letter-spacing:.02em;white-space:nowrap;display:inline-block;}
.gmk-text.hx-obsidian{background-image:url(img/vein-tile.png),linear-gradient(180deg,#f3eefc 0%,#cfc3e6 34%,#9d8fbf 62%,#6f6290 100%);}
.gmk-flash{position:absolute;left:0;top:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;
    background:linear-gradient(180deg,#ffffff 0%,#e4d6ff 45%,#b48cff 100%);-webkit-background-clip:text;background-clip:text;opacity:0;
    filter:drop-shadow(0 0 6px rgba(212,190,255,.9)) drop-shadow(0 0 14px rgba(139,92,246,.7));}
html.strike .gmk-flash{animation:hxStrike .8s ease-out;}
@keyframes hxGuildPlateStrike{0%,100%{filter:drop-shadow(0 0 0 rgba(139,92,246,0));}6%,28%{filter:drop-shadow(0 0 6px rgba(196,163,255,.75)) drop-shadow(0 0 16px rgba(139,92,246,.6));}16%,45%{filter:drop-shadow(0 0 4px rgba(139,92,246,.35));}}
html.strike .gmk-plate{animation:hxGuildPlateStrike .9s ease-out;}
@media only screen and (max-width: 600px){
    .guild-hero-body .guild-mark{padding:6px 26px 8px;}
    .gmk-text{font-size:26px;white-space:normal;}
}

/* ---- guild wars: versus cards + kill feed ---- */
.war-card{display:grid;grid-template-columns:150px 1fr 150px;gap:10px;align-items:center;margin:0 0 12px;padding:12px;position:relative;
    background:linear-gradient(var(--hx-panel-2, #2a2233),var(--hx-panel, #1c1723));border:1px solid var(--hx-hairline, #3a3045);outline:1px solid var(--hx-outline, #120e18);box-shadow:3px 6px 5px var(--hx-shadow, rgba(0,0,0,.4));border-radius:3px;}
.war-card.status-1{border-color:var(--hx-err-dim, #7a2020);box-shadow:0 0 18px rgba(196,63,63,.18),3px 6px 5px var(--hx-shadow, rgba(0,0,0,.4));}
.war-card.status-1::before{content:"";position:absolute;inset:0;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:3px;
    background:radial-gradient(ellipse at 50% 0%,rgba(196,63,63,.14),transparent 60%);}
.war-card.status-2,.war-card.status-3{opacity:.75;}
.war-side{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.war-side a{text-decoration:none !important;display:flex;flex-direction:column;align-items:center;gap:4px;}
.war-side .guildrankimg{margin:0;}
.war-side.winner .guildrankimg::after{background:radial-gradient(var(--hx-gold, #d9a83a),#000);}
.war-side.winner .war-guild-name::before{content:"\2605 ";color:var(--hx-gold, #d9a83a);}
.war-guild-name{font-weight:bold;color:var(--hx-heading, #e8dfc4);}
.war-center{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;}
.war-status{font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.war-score{display:flex;align-items:center;gap:14px;font-family:'New Rocker','Martel',serif;font-size:40px;line-height:1;color:var(--hx-text-dim, #b9b0c6);}
.war-score .vs{font-size:14px;font-family:'Roboto',sans-serif;text-transform:uppercase;letter-spacing:.2em;opacity:.6;}
.war-score .side1.lead{color:var(--hx-err-text, #ff6b6b);text-shadow:0 0 10px rgba(255,107,107,.45);}
.war-score .side2.lead{color:var(--hx-ok, #6ee06e);text-shadow:0 0 10px rgba(110,224,110,.45);}
.war-bar{position:relative;width:100%;max-width:320px;height:14px;border-radius:7px;overflow:hidden;background:var(--hx-panel-3, #241d2c);border:1px solid var(--hx-hairline, #3a3045);}
.war-bar .fill1{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#7a2020,#c43f3f);}
.war-bar .fill2{position:absolute;right:0;top:0;bottom:0;background:linear-gradient(270deg,#245a2b,#3f9a4a);}
.war-bar-label{position:absolute;inset:0;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#fff;text-shadow:0 1px 2px #000;}
.war-result{font-weight:bold;color:var(--hx-gold, #d9a83a);}
.war-meta{font-size:12px;color:var(--hx-text-dim, #b9b0c6);}
.war-rules{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;}
.war-rules .badge .fa-solid{font-size:10px;margin-right:2px;}
.war-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px;}
.war-actions .btn{padding:0 14px;text-decoration:none;}
.war-feed{margin:-6px 0 14px;padding:8px 10px;max-height:320px;overflow-y:auto;border:1px solid var(--hx-hairline, #3a3045);border-top:0;background:var(--hx-panel-3, #241d2c);}
.war-mvp{font-size:12px;margin-bottom:6px;color:var(--hx-gold, #d9a83a);}
.war-kill{display:flex;gap:10px;align-items:baseline;padding:3px 8px;font-size:12px;border-left:3px solid transparent;}
.war-kill.side1{border-left-color:#c43f3f;}
.war-kill.side2{border-left-color:#3f9a4a;}
.war-kill + .war-kill{border-top:1px solid rgba(255,255,255,.04);}
.war-kill-time{flex:0 0 90px;color:var(--hx-text-dim, #b9b0c6);font-variant-numeric:tabular-nums;}
.war-kill .fa-skull{opacity:.6;font-size:10px;margin:0 4px;}
.war-declare{margin-top:14px;}
@media only screen and (max-width: 600px){
    .war-card{grid-template-columns:1fr;}
    .war-side{flex-direction:row;justify-content:center;gap:10px;}
    .war-side a{flex-direction:row;}
}

/* ---- staff / tutors page (pages/team.php) ---- */
.staff-intro{text-align:center;max-width:760px;margin:6px auto 18px;}
.staff-title{font-size:38px;margin:0 0 8px;display:inline-block;}
.staff-intro p{line-height:1.55;margin:0;color:var(--hx-text, inherit);}
.staff-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;}
.staff-paths-2{grid-template-columns:repeat(2,1fr);margin-bottom:22px;}
.card.staff-path{align-items:center;text-align:center;gap:6px;padding:16px 14px;
    background:linear-gradient(var(--hx-panel-2, #2a2233),var(--hx-panel, #1c1723));border:1px solid var(--hx-hairline, #3a3045);outline:1px solid var(--hx-outline, #120e18);box-shadow:3px 6px 5px var(--hx-shadow, rgba(0,0,0,.4));display:flex;flex-direction:column;}
.card.staff-path.warn{background:linear-gradient(#2e2230,var(--hx-panel, #1c1723));}
.card.staff-path p{margin:0 0 6px;line-height:1.5;font-size:13px;color:var(--hx-text-dim, #b9b0c6);flex:1 1 auto;}
.staff-path-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#e9dfff;
    background:radial-gradient(circle at 40% 35%,#8b5cf6,#3a2470 70%);box-shadow:0 0 0 2px #0f0b16,0 0 14px rgba(139,92,246,.45);margin-bottom:4px;}
.card.staff-path.warn .staff-path-icon{background:radial-gradient(circle at 40% 35%,#c43f3f,#5a1c1c 70%);box-shadow:0 0 0 2px #0f0b16,0 0 14px rgba(196,63,63,.4);}
.staff-path-title{font-weight:bold;font-size:15px;color:var(--hx-heading, #e8dfc4);}
.staff-path .btn{margin-top:4px;text-decoration:none;}
.staff-section{padding:12px 14px;}
.staff-legend{text-align:center;margin:4px 0 12px;color:var(--hx-text-dim, #b9b0c6);font-size:13px;}
.card.staff-role{gap:6px;padding:12px;}
.card.staff-role .header .title{font-weight:bold;font-size:15px;color:var(--hx-heading, #e8dfc4);display:flex;align-items:center;gap:8px;}
.card.staff-role p{margin:0;font-size:13px;line-height:1.5;color:var(--hx-text-dim, #b9b0c6);}
.card.staff-role ul{list-style:none;margin:2px 0 0;padding:0;font-size:12px;}
.card.staff-role li{padding:2px 0;}
.card.staff-role li .fa-check{color:var(--hx-ok, #6ee06e);font-size:10px;margin-right:4px;}
.staff-role-kind{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--hx-text-dim, #b9b0c6);}
.card.staff-role.tutor{border-left:3px solid var(--hx-ok-dim, #245a2b);}
.card.staff-role.staff{border-left:3px solid #8b2ab9;}
.staff-role-icon{font-size:18px;width:26px;text-align:center;}
.staff-role-icon.gold{color:var(--hx-gold, #d9a83a);}
.staff-role-icon.purple{color:#b48cff;}
.staff-role-icon.red{color:var(--hx-err-text, #ff6b6b);}
.staff-role-icon.blue{color:#6fb1ff;}
.staff-role-icon.green{color:var(--hx-ok, #6ee06e);}
.staff-card.tutor{border-left:3px solid var(--hx-ok-dim, #245a2b);}
.staff-card.staff{border-left:3px solid #8b2ab9;}
.staff-online-now{color:var(--hx-ok, #6ee06e);font-weight:bold;}
.staff-foot{margin-top:16px;padding:10px 12px;font-size:13px;color:var(--hx-text-dim, #b9b0c6);border-top:1px solid var(--hx-hairline, #3a3045);}
.staff-foot .fa-solid{color:#b48cff;margin-right:4px;}
@media only screen and (max-width: 1252px){ .staff-paths{grid-template-columns:1fr 1fr;} }
@media only screen and (max-width: 600px){ .staff-paths,.staff-paths-2{grid-template-columns:1fr;} .staff-title{font-size:30px;} }

/* ---- last deaths (pages/killstatistics.php) ---- */
.kills-page{padding:12px 14px;}
.kills-stats{margin-bottom:6px;}
.kills-spotlight{flex-wrap:wrap;}
.kill-tile{width:auto;flex:1 1 120px;max-width:180px;padding-bottom:6px;}
.kill-plate{position:absolute;width:100px;height:32px;left:calc(50% - 50px);top:3px;z-index:4;}
.kill-tile .imgtop img:not(.outfit){position:absolute;left:calc(50% - 16px);bottom:14px;z-index:2;image-rendering:pixelated;}
.kill-tile .imgtop img.outfit{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);max-width:56px;max-height:56px;right:auto;image-rendering:pixelated;z-index:2;}
.kill-tile .imgtop img.outfit.zoom{max-width:72px;max-height:72px;bottom:8px;transform:translateX(-74%);}
.kill-feed{display:flex;flex-direction:column;gap:6px;}
.kill-row{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border:1px solid var(--hx-hairline, #3a3045);border-left:3px solid var(--hx-outline, #120e18);border-radius:3px;
    background:linear-gradient(90deg,var(--hx-panel-2, #2a2233),var(--hx-panel, #1c1723));}
.kill-row.pvp{border-left-color:#c43f3f;}
.kill-row .pedestal-sm{flex:0 0 51px;margin:0;overflow:hidden;border-radius:4px;}
.kill-when{position:relative;z-index:1;}
.kill-when{flex:0 0 96px;display:flex;flex-direction:column;font-size:12px;color:var(--hx-text-dim, #b9b0c6);line-height:1.25;}
.kill-when small{opacity:.7;font-size:10px;}
.kill-n{font-size:10px;opacity:.5;}
.kill-text{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.4;}
.kill-ico{font-size:11px;opacity:.55;margin-right:2px;}
.kill-text .badge{margin-left:2px;vertical-align:1px;}
.kill-chips{display:flex;gap:6px;flex:0 0 auto;}
.kill-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:bold;white-space:nowrap;background:var(--hx-panel-3, #241d2c);border:1px solid var(--hx-hairline, #3a3045);color:var(--hx-text-dim, #b9b0c6);}
.kill-chip.exp{color:#ff8080;border-color:rgba(196,63,63,.5);}
.kill-chip.bless{color:#8fd0ff;border-color:rgba(111,177,255,.5);}
.kill-chip.nobless{opacity:.55;}
.kill-chip .fa-solid{font-size:10px;}
.kill-line{font-size:13px;}
.kill-level{color:var(--hx-text-dim, #b9b0c6);font-size:12px;}
.kill-by{color:var(--hx-text-dim, #b9b0c6);font-size:12px;}
.kill-by .fa-solid{font-size:10px;opacity:.6;margin-right:2px;}
.kill-assist{opacity:.8;}
.kill-assist::before{content:"\00b7";margin:0 6px;}
.kill-killer-box{flex:0 0 40px;width:40px;height:40px;margin:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--hx-text-dim, #b9b0c6);font-size:16px;text-decoration:none !important;}
.kill-killer-box img{position:absolute;bottom:2px;right:2px;max-width:36px;max-height:36px;image-rendering:pixelated;}
.kill-killer-box img.zoom{max-width:52px;max-height:52px;right:2px;bottom:3px;}
.kill-killer-box img:not(.outfit){position:static;width:32px;height:32px;}
@media only screen and (max-width: 600px){
    .kill-when{flex-basis:70px;}
    .kill-row{flex-wrap:wrap;}
    .kill-text{flex-basis:100%;order:3;}
    .kill-chips{order:4;}
}

/* ---- who is online (pages/whoisonline.php) ---- */
.who-page{padding:12px 14px;}
.who-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--hx-hairline, #3a3045);}
.who-sorts,.who-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.who-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--hx-text-dim, #b9b0c6);margin-right:2px;}
.who-sort,.who-filter{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:4px;font-size:12px;text-decoration:none !important;
    background:var(--hx-panel-3, #241d2c);border:1px solid var(--hx-hairline, #3a3045);color:var(--hx-text, inherit);transition:border-color .15s,background .15s;}
.who-sort:hover,.who-filter:hover{border-color:#8b5cf6;}
.who-sort.active,.who-filter.active{background:linear-gradient(#5b3bb0,#3a2470);border-color:#b48cff;color:#fff;box-shadow:0 0 8px rgba(139,92,246,.35);}
.who-sort .fa-solid,.who-filter .fa-solid{font-size:11px;opacity:.85;}
.who-filter .badge{font-size:10px;padding:0 5px;}
.who-filter .gm-voc{margin-right:0;}
.who-grid .who-card .gm-sub .fa-solid{font-size:10px;opacity:.6;}
@media only screen and (max-width: 600px){ .who-toolbar{flex-direction:column;align-items:flex-start;} }
/* forum (2026-09-04): boards grid, topic rows, nameplate posts, editor */
.forum-notice{padding:10px 14px;margin:0 0 12px;border:1px solid var(--hx-hairline, #c9b28e);border-left:3px solid var(--hx-accent, #8b2ab9);border-radius:3px;background:var(--hx-panel-2, #f1e0c6);color:var(--hx-dim, #5a2800);font-size:13px;}
.forum-notice .fa-solid{margin-right:4px;opacity:.7;}
.forum-crumbs{font-size:12px;margin:0 0 10px;color:var(--hx-dim, #6b4a2b);}
.forum-crumbs span{opacity:.5;margin:0 4px;}
.fpill{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:11px;line-height:16px;white-space:nowrap;background:var(--hx-accent-a25, #d8c2ee);border:1px solid var(--hx-accent-a25, #b99ad8);color:var(--hx-accent-glow, #4a1d7a);font-weight:600;}
.fpill.date{background:var(--hx-panel-2, #e9d6b5);border-color:var(--hx-hairline, #c9b28e);color:var(--hx-muted, #6b4a2b);font-weight:normal;letter-spacing:.03em;}
/* boards index */
.forum-stats-head{margin-top:18px;}
.card-container.forum-stats{margin-top:14px;grid-template-columns:repeat(4,1fr);}
.card-container.forum-boards{grid-template-columns:1fr 1fr;margin-top:14px;}
.fb-top{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;gap:8px;margin:-10px -10px 0;padding:10px 10px 12px;border-radius:3px 3px 0 0;text-decoration:none !important;color:inherit;background:linear-gradient(180deg,var(--hx-accent-a25, #d8c2ee) 0%,var(--hx-accent-a12, #e2cfa9) 100%);background-size:100% 200%;background-position:0 100%;background-repeat:no-repeat;transition:background-position .25s ease;}
.fb-top:hover{background-position:0 0;}
.fb-top:hover .title{color:var(--hx-heading, #5a2800);}

.card-container .card.forum-board{gap:0;cursor:default;}
.forum-board .header{z-index:1;}
.forum-board .fb-ico{font-size:20px;color:var(--hx-accent-glow, #4a1d7a);width:26px;text-align:center;flex:0 0 26px;}
.fb-chips{display:flex;gap:6px;flex-wrap:wrap;z-index:1;}
.fb-last{display:flex;align-items:center;gap:8px;margin:0 -10px -10px;flex:0 0 auto;padding:8px 10px 10px;border-top:1px solid var(--hx-hairline, #d4c0a1);font-size:12px;z-index:1;min-height:60px;text-decoration:none !important;color:inherit;border-radius:0 0 3px 3px;transition:background .15s;}
a.fb-last{position:relative;z-index:1;background:linear-gradient(0deg,var(--hx-accent-a25, #d8c2ee) 0%,var(--hx-accent-a12, #e2cfa9) 100%);background-size:100% 200%;background-position:0 0;background-repeat:no-repeat;transition:background-position .25s ease;}
a.fb-last:hover{background-position:0 100%;}
a.fb-last:hover .fb-last-title{color:var(--hx-accent-glow, #4a1d7a);}
.fb-last .pedestal-sm{flex:0 0 51px;margin:0;display:block;}
.fb-last-body{display:flex;flex-direction:column;min-width:0;}
.fb-last-title{font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hx-text, #5a2800);}
.fb-last-meta{color:var(--hx-dim, #6b4a2b);}
.fb-last.fb-empty{color:var(--hx-dim, #6b4a2b);font-style:italic;}
/* topic rows */
.card-container.forum-topics{grid-template-columns:1fr;gap:6px;}
.forum-topics .forum-notice{margin:0;}
.card.forum-topic{align-items:center;}
.forum-topic .pedestal-sm{display:block;}
.forum-topic .gm-name a{font-size:14px;}
.ft-trash{color:var(--hx-err-text, #b00000);margin-right:4px;font-size:12px;}
.ft-teaser{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ft-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--hx-dim, #6b4a2b);text-align:right;}
.ft-chips{display:flex;gap:6px;}
.ft-last{white-space:nowrap;}
.forum-pager{font-size:13px;margin:10px 0;display:flex;gap:4px;align-items:center;flex-wrap:wrap;color:var(--hx-dim, #6b4a2b);}
.forum-pager a,.forum-pager b{display:inline-block;min-width:24px;padding:2px 6px;text-align:center;border-radius:4px;border:1px solid var(--hx-hairline, #c9b28e);background:var(--hx-panel-2, #e9d6b5);}
.forum-pager b{background:var(--hx-accent-a25, #d8c2ee);color:var(--hx-accent-glow, #4a1d7a);}
.forum-actions{text-align:right;margin-top:10px;}
/* thread */
.forum-thread-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0;}
.forum-thread{display:flex;flex-direction:column;gap:12px;}
.forum-post{display:flex;border:1px solid var(--hx-hairline, #c9b28e);outline:1px solid var(--hx-outline, #8a6d3b);border-radius:4px;background:linear-gradient(var(--hx-panel-2, #f1e0c6),var(--hx-panel, #e9d6b5));box-shadow:3px 6px 5px var(--hx-shadow, #00000040);}
.forum-post-goldenframe{border:3px solid;border-image:url(../../images/forum/forum-thread-border-gold.png) 3 repeat;border-image-width:3px;}
.forum-post-author{flex:0 0 190px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border-right:1px solid var(--hx-hairline, #d4c0a1);background:var(--hx-panel-3, #ecd8b3);}
.forum-post-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.fp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--hx-hairline, #d4c0a1);font-size:12px;color:var(--hx-dim, #6b4a2b);}
.fp-num{font-weight:bold;opacity:.6;}
.fp-ago{opacity:.75;}
.fp-edited{margin-left:auto;font-style:italic;opacity:.7;}
.forum-post-content{flex:1 1 auto;min-height:120px;padding:12px;}
.fp-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 12px;border-top:1px solid var(--hx-hairline, #d4c0a1);min-height:34px;}
.forum-post-footer-content-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:auto;}
.forum-post-footer-content-btns a{font-size:12px;margin:0;}
.forum-post-footer-content-btns .badge{text-decoration:none;cursor:pointer;}
.forum-post-footer-content-btns .btn-like.badge{display:inline-block;}
.fp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;font-size:12px;}
.fp-chips .badge{white-space:nowrap;}
.fp-chips .badge a{color:inherit;}
.fp-chips .badge .gm-voc{vertical-align:-3px;margin-right:3px;width:14px;height:14px;}
.fp-chips .player-flag{margin:0;}
.fp-seen{font-size:11px;color:var(--hx-dim, #6b4a2b);opacity:.8;}
/* nameplate: the highscores disc with the character's name and real hp bar */
.forum-plate{display:block;text-decoration:none !important;}
.fp-disc{display:block;width:84px;height:84px;border-radius:999px;position:relative;margin:0 auto;background:radial-gradient(circle at 50% 58%,var(--hx-accent-a25, #d8c2ee) 0,var(--hx-panel-3, #ecd8b3) 48%,var(--hx-panel, #e9d6b5) 100%);border:1px solid var(--hx-hairline, #c9b28e);box-shadow:0 0 9px var(--hx-glow, #8b2ab955);overflow:hidden;transition:box-shadow ease .3s;}
.forum-plate:hover .fp-disc{box-shadow:0 0 14px var(--hx-accent, #8b2ab9);}
.fp-disc .kill-plate{position:absolute;width:100px;height:32px;left:calc(50% - 50px);top:3px;z-index:4;}
.fp-disc .nick{color:#3ddc84;font-weight:bold;font-size:11px;text-shadow:var(--text-shadow-outline-tibia, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000);font-family:verdana;position:absolute;bottom:6px;width:100px;left:calc(50% - 50px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-disc .hpbar{position:absolute;display:block;width:27px;height:4px;border:1px solid #000;background:#000;left:calc(50% - 13px);bottom:0;}
.fp-disc .hpbar div{height:2px;}
.fp-disc img.outfit{position:absolute;left:50%;bottom:8px;max-width:72px;max-height:72px;transform:translateX(-74%);image-rendering:pixelated;z-index:2;}
.fp-mini .forum-post-author{flex:0 0 130px;padding:10px 6px;}
.fp-mini .fp-disc{width:64px;height:64px;}
.fp-mini .fp-disc img.outfit{max-width:56px;max-height:56px;bottom:6px;}
.fp-mini .forum-post-content{min-height:0;font-size:13px;}
/* editor */
.forum-editor{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--hx-hairline, #c9b28e);outline:1px solid var(--hx-outline, #8a6d3b);border-radius:4px;background:linear-gradient(var(--hx-panel-2, #f1e0c6),var(--hx-panel, #e9d6b5));margin-bottom:14px;}
.fe-row{display:flex;flex-direction:column;gap:6px;}
.fe-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--hx-dim, #6b4a2b);font-weight:bold;}
.fe-input{width:100%;max-width:420px;}
.fe-hint{font-size:11px;color:var(--hx-dim, #6b4a2b);}
.fe-foot{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.fe-opt{font-size:12px;color:var(--hx-dim, #6b4a2b);display:flex;align-items:center;gap:6px;}
.forum-char-pick{display:flex;flex-wrap:wrap;gap:8px;}
.fcp-tile{position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--hx-hairline, #c9b28e);border-radius:4px;background:var(--hx-panel-3, #ecd8b3);cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.fcp-tile input{position:absolute;opacity:0;width:0;height:0;}
.fcp-tile .pedestal-sm{margin:0;flex:0 0 51px;}
.fcp-body{display:flex;flex-direction:column;}
.fcp-name{font-weight:bold;font-size:13px;}
.fcp-meta{font-size:11px;color:var(--hx-dim, #6b4a2b);}
.fcp-meta .gm-voc{width:14px;height:14px;vertical-align:-3px;margin-right:3px;}
.fcp-tile:hover{border-color:var(--hx-accent, #8b2ab9);}
.fcp-tile.sel{border-color:var(--hx-accent, #8b2ab9);box-shadow:0 0 0 1px var(--hx-accent, #8b2ab9),0 0 12px var(--hx-glow, #8b2ab955) inset;}
.forum-review .heading1{margin-top:14px;}
@media only screen and (max-width: 600px){
    .card-container.forum-stats{grid-template-columns:1fr 1fr;}
    .card-container.forum-boards{grid-template-columns:1fr;}
    .card.forum-topic{flex-wrap:wrap;overflow:hidden;}
    .forum-topic .gm-body{flex:1 1 0;min-width:0;}
    .ft-side{flex-basis:100%;flex-direction:row;justify-content:space-between;align-items:center;padding-left:59px;}
    .ft-last{white-space:normal;}
    .forum-post{flex-direction:column;}
    .forum-post-author{flex:0 0 auto;flex-direction:row;justify-content:flex-start;border-right:0;border-bottom:1px solid var(--hx-hairline, #d4c0a1);padding:10px;}
    .forum-post-author .forum-plate{flex:0 0 84px;}
    .fp-chips{justify-content:flex-start;}
    .fp-mini .forum-post-author{flex:0 0 auto;flex-direction:row;}
}
/* thread view 2: reaction chips, permalinks, hero, quick reply */
.reac-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:24px;transition:opacity .2s;}
.reac-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:bold;line-height:18px;border:1px solid var(--hx-hairline, #c9b28e);background:var(--hx-panel-3, #ecd8b3);color:var(--hx-text, #5a2800);text-decoration:none !important;transition:border-color .15s,background .15s,transform .1s;}
.reac-chip:hover{border-color:var(--hx-accent, #8b2ab9);transform:translateY(-1px);}
.reac-chip.mine{border-color:var(--hx-accent, #8b2ab9);background:var(--hx-accent-a25, #d8c2ee);color:var(--hx-accent-glow, #4a1d7a);}
.reac-chip .reac-emoji{font-size:14px;line-height:1;}
.reac-chip.reac-add{font-weight:normal;color:var(--hx-dim, #6b4a2b);}
.reac-btn-container{position:relative;display:inline-block;}
.reac-who{font-size:11px;color:var(--hx-dim, #6b4a2b);opacity:.7;margin-left:2px;}
.reac-who:hover{opacity:1;}
.fp-link{margin-left:auto;font-size:11px;opacity:.45;color:inherit;}
.fp-edited + .fp-link{margin-left:6px;}
.fp-link:hover{opacity:1;color:var(--hx-accent-glow, #4a1d7a);}
.forum-post:target{outline:2px solid var(--hx-accent, #8b2ab9);outline-offset:2px;box-shadow:0 0 18px var(--hx-glow, #8b2ab955),3px 6px 5px var(--hx-shadow, #00000040);}
.fp-hero{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--hx-hairline, #d4c0a1);}
.fp-hero .fpill{font-size:12px;line-height:18px;}
.ft-jump{margin-left:auto;text-decoration:none !important;}
.ft-jump:hover{background:var(--hx-accent, #8b2ab9);color:#fff;}
.forum-quick-head{margin-top:18px;}
@media only screen and (max-width: 600px){
    .ft-jump{margin-left:0;}
}
/* sceditor chrome in the dark layout (huxera only; blazera keeps the stock light theme).
   The stock theme <link> sits in the page body AFTER this sheet, so equal-specificity rules lose:
   every selector here is prefixed (.page-content / body) to out-rank it.
   Icons are the monocons SVG set, so they take their colour from `fill` here. */
.page-content .sceditor-container{background:var(--hx-panel);border:1px solid var(--hx-hairline);outline:1px solid var(--hx-outline);border-radius:4px;color:var(--hx-text);font-family:"Roboto",sans-serif;}
.page-content .sceditor-container iframe,.page-content .sceditor-container textarea{background:var(--hx-panel);color:var(--hx-text);}
.page-content .sceditor-container textarea{font-family:Consolas,"Courier New",monospace;font-size:13px;}
.page-content div.sceditor-toolbar{background:linear-gradient(var(--hx-panel-3),var(--hx-panel-2));border-bottom:1px solid var(--hx-hairline);padding:4px 5px 3px;}
.page-content div.sceditor-group{background:var(--hx-panel);border:1px solid var(--hx-hairline);border-bottom-color:var(--hx-outline);border-radius:4px;margin:1px 5px 1px 0;padding:1px;}
.page-content .sceditor-button{border-radius:3px;transition:background .12s;}
.page-content .sceditor-button svg{fill:var(--hx-dim);}
.page-content .sceditor-button.active,.page-content .sceditor-button:active,.page-content .sceditor-button:hover{background:var(--hx-accent-a25);box-shadow:none;}
.page-content .sceditor-button.active{box-shadow:0 0 0 1px var(--hx-accent) inset;}
.page-content .sceditor-button.active svg,.page-content .sceditor-button:hover svg{fill:var(--hx-accent-glow);}
.page-content .sceditor-button.disabled svg{fill:var(--hx-hairline);}
.page-content .sceditor-button.disabled:hover{background:transparent;box-shadow:none;}
.page-content .sceditor-button.disabled:hover svg{fill:var(--hx-hairline);}
.page-content div.sceditor-grip svg{fill:var(--hx-dim);}
body div.sceditor-dropdown{background:var(--hx-panel-2);border:1px solid var(--hx-hairline);outline:1px solid var(--hx-outline);color:var(--hx-text);box-shadow:3px 6px 10px var(--hx-shadow);border-radius:4px;}
body div.sceditor-dropdown a,body div.sceditor-dropdown a:link,body .sceditor-font-option,body .sceditor-fontsize-option,body .sceditor-format a{color:var(--hx-text);}
body .sceditor-font-option:hover,body .sceditor-fontsize-option:hover,body .sceditor-format a:hover{background:var(--hx-accent-a12);}
body div.sceditor-dropdown label{color:var(--hx-dim);}
body div.sceditor-dropdown input,body div.sceditor-dropdown textarea{background:var(--hx-panel);color:var(--hx-text);border:1px solid var(--hx-hairline);border-radius:3px;}
body div.sceditor-dropdown input:focus,body div.sceditor-dropdown textarea:focus{border-color:var(--hx-accent);box-shadow:0 0 6px var(--hx-glow);}
body div.sceditor-dropdown .button{background:var(--hx-panel-3);border:1px solid var(--hx-hairline);color:var(--hx-text);border-radius:3px;}
body div.sceditor-dropdown .button:hover{background:var(--hx-accent-a25);box-shadow:none;}
body .sceditor-insertemoticon img{border-radius:3px;}
body .sceditor-insertemoticon:hover{background:var(--hx-accent-a12);}
.page-content div.sceditor-dnd-cover{background:rgba(22,20,28,.6);border-color:var(--hx-accent);color:var(--hx-accent-glow);}
/* front page news (2026-09-04): entry header/footer, older-news rows, featured frame, ticker count */
.news-entry{margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--hx-hairline, #d4c0a1);}
.news-entry:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.ne-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;}
.ne-head .pedestal-sm{flex:0 0 51px;margin:0;display:block;}
.ne-card{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--hx-hairline, #c9b28e);outline:1px solid var(--hx-outline, #8a6d3b);border-radius:4px;background:linear-gradient(90deg,var(--hx-panel-2, #f1e0c6),var(--hx-panel, #e9d6b5));}
.ne-title{margin:0;font-size:17px;font-weight:600;line-height:1.2;color:var(--hx-heading, #5a2800);min-width:0;}
.ne-title a{color:inherit;}
.ne-by{font-size:12px;color:var(--hx-dim, #6b4a2b);white-space:nowrap;}
.ne-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ne-right .badge{text-decoration:none;}
.news-entry .news-text{padding:0 6px;}
.ne-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding:8px 6px 0;border-top:1px dashed var(--hx-hairline, #d4c0a1);}
.ne-foot-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;font-size:12px;color:var(--hx-dim, #6b4a2b);}
/* news-post [table]s render as feature cards on the front page, in thread view and in the featured box; overrides the generic display:block scroll guard above */
.news-entry .news-text table,.forum-post-content.news-text table,#FeaturedArticle #TeaserText table,#FeaturedArticle #TeaserText table{display:table;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:8px;margin:4px -8px 8px;}
.news-entry .news-text table td,.forum-post-content.news-text table td,#FeaturedArticle #TeaserText table td,#FeaturedArticle #TeaserText table td,.news-entry .news-text table th,.forum-post-content.news-text table th,#FeaturedArticle #TeaserText table th,#FeaturedArticle #TeaserText table th{vertical-align:top;position:relative;padding:10px 12px;border:1px solid var(--hx-hairline);outline:1px solid var(--hx-outline);border-radius:4px;background:linear-gradient(180deg,var(--hx-panel-2),var(--hx-panel));line-height:1.45;font-size:13px;}
.news-entry .news-text table th,.forum-post-content.news-text table th,#FeaturedArticle #TeaserText table th,#FeaturedArticle #TeaserText table th{background:var(--hx-panel-3);color:var(--hx-heading);text-align:center;padding:6px 10px;}
.news-entry .news-text table td strong,.forum-post-content.news-text table td strong,#FeaturedArticle #TeaserText table td strong,#FeaturedArticle #TeaserText table td strong{color:var(--hx-heading);display:block;margin-bottom:2px;}
.news-entry .news-text table td:has(img),.forum-post-content.news-text table td:has(img),#FeaturedArticle #TeaserText table td:has(img),#FeaturedArticle #TeaserText table td:has(img){padding-left:64px;}
.news-entry .news-text table td img,.forum-post-content.news-text table td img,#FeaturedArticle #TeaserText table td img,#FeaturedArticle #TeaserText table td img{position:absolute;left:12px;top:12px;width:40px;height:40px;object-fit:contain;float:none;margin:0;}
/* a cell whose first child is a link is clickable as a whole */
.news-entry .news-text table td > a:first-child,.forum-post-content.news-text table td > a:first-child,#FeaturedArticle #TeaserText table td > a:first-child,#FeaturedArticle #TeaserText table td > a:first-child{display:block;}
.news-entry .news-text table td > a:first-child::after,.forum-post-content.news-text table td > a:first-child::after,#FeaturedArticle #TeaserText table td > a:first-child::after,#FeaturedArticle #TeaserText table td > a:first-child::after{content:"";position:absolute;inset:0;}
.news-entry .news-text table td:has(> a:first-child):hover,.forum-post-content.news-text table td:has(> a:first-child):hover,#FeaturedArticle #TeaserText table td:has(> a:first-child):hover,#FeaturedArticle #TeaserText table td:has(> a:first-child):hover{border-color:var(--hx-accent);outline-color:var(--hx-accent-a25);background:linear-gradient(180deg,var(--hx-panel-3),var(--hx-panel-2));}
.news-entry .news-text table td > a:first-child strong,.forum-post-content.news-text table td > a:first-child strong,#FeaturedArticle #TeaserText table td > a:first-child strong,#FeaturedArticle #TeaserText table td > a:first-child strong{color:var(--hx-link);}
.news-entry .news-text table td:has(> a:first-child):hover strong,.forum-post-content.news-text table td:has(> a:first-child):hover strong,#FeaturedArticle #TeaserText table td:has(> a:first-child):hover strong,#FeaturedArticle #TeaserText table td:has(> a:first-child):hover strong{color:var(--hx-link-hover);}
.news-entry .news-text [style*="font-size: large"],.forum-post-content.news-text [style*="font-size: large"],#FeaturedArticle #TeaserText [style*="font-size: large"],#FeaturedArticle #TeaserText [style*="font-size: large"]{display:block;margin:14px 0 6px;color:var(--hx-gold);letter-spacing:.02em;}
.news-entry .news-text [style*="font-size: x-large"],.forum-post-content.news-text [style*="font-size: x-large"],#FeaturedArticle #TeaserText [style*="font-size: x-large"],#FeaturedArticle #TeaserText [style*="font-size: x-large"]{color:var(--hx-heading);}
.news-entry .news-text ol,.forum-post-content.news-text ol,#FeaturedArticle #TeaserText ol,#FeaturedArticle #TeaserText ol{margin:6px 0 4px 26px;padding:0;line-height:1.5;}
.news-entry .news-text ol li,.forum-post-content.news-text ol li,#FeaturedArticle #TeaserText ol li,#FeaturedArticle #TeaserText ol li{margin:4px 0;}
@media (max-width: 700px){.news-entry .news-text table,.forum-post-content.news-text table,#FeaturedArticle #TeaserText table,#FeaturedArticle #TeaserText table,.news-entry .news-text table tbody,.forum-post-content.news-text table tbody,#FeaturedArticle #TeaserText table tbody,#FeaturedArticle #TeaserText table tbody,.news-entry .news-text table tr,.forum-post-content.news-text table tr,#FeaturedArticle #TeaserText table tr,#FeaturedArticle #TeaserText table tr,.news-entry .news-text table td,.forum-post-content.news-text table td,#FeaturedArticle #TeaserText table td,#FeaturedArticle #TeaserText table td{display:block;width:auto;}.news-entry .news-text table td,.forum-post-content.news-text table td,#FeaturedArticle #TeaserText table td,#FeaturedArticle #TeaserText table td{margin:0 0 8px;}}
.reac-chip.ro{cursor:pointer;}
.reac-chip.ro:hover{transform:none;}
.reac-empty{font-size:12px;color:var(--hx-dim, #6b4a2b);font-style:italic;}
.news-older-head{margin-top:4px;}
.card-container.news-older{grid-template-columns:1fr;gap:6px;margin-top:12px;}
.card-container .card.news-row{align-items:center;color:inherit;}
.news-row .pedestal-sm{display:block;}
.news-row .gm-name{font-size:14px;color:var(--hx-heading, #5a2800);}
.news-row .gm-sub .badge{text-decoration:none;}
.news-archive{margin-top:14px;}
/* featured article: thumbnail framed like an inventory slot, text column with room to breathe */
#FeaturedArticle .border-1 .ft-frame{float:right;width:64px;height:64px;margin:12px 15px 6px 12px;border-radius:4px;display:flex;align-items:center;justify-content:center;background:radial-gradient(var(--hx-panel-3, #ecd8b3),var(--hx-panel-2, #f1e0c6));outline:1px solid var(--hx-outline, #8a6d3b);box-shadow:3px 3px 3px var(--hx-shadow, #00000040),1px 0 var(--hx-inset-hi, #ffffff33) inset,-1px 0 var(--hx-inset-hi, #ffffff33) inset,0 1px var(--hx-inset-hi, #ffffff33) inset,0 -1px var(--hx-inset-hi, #ffffff33) inset;}
#FeaturedArticle .border-1 #TeaserThumbnail{float:none;margin:0;width:48px;height:auto;max-height:54px;image-rendering:auto;pointer-events:none;}
#FeaturedArticle .border-1 #TeaserText{padding:6px 6px 4px 2px;line-height:1.55;}
/* change-log rows: comment count on the collapsed line */
.news-ticker .tk-count{flex:none;font-size:11px;color:var(--hx-dim, #6b4a2b);margin-top:3px;white-space:nowrap;}
.news-ticker .tk-count .fa-solid{font-size:10px;opacity:.7;}
@media only screen and (max-width: 600px){
    .ne-foot-right{margin-left:0;}
    .ne-right{margin-left:0;}
    .news-ticker .tk-count{display:none;}
}
/* post type selector (News board, news author only) + featured article headline/footer */
.fe-kind{display:flex;flex-wrap:wrap;gap:8px;}
.fe-kind-opt{position:relative;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:1px solid var(--hx-hairline, #c9b28e);border-radius:4px;background:var(--hx-panel-3, #ecd8b3);cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:220px;}
.fe-kind-opt input{position:absolute;opacity:0;width:0;height:0;}
.fe-kind-opt > .fa-solid{font-size:18px;color:var(--hx-dim, #6b4a2b);width:22px;text-align:center;}
.fe-kind-opt.sel > .fa-solid{color:var(--hx-accent-glow, #4a1d7a);}
.fk-body{display:flex;flex-direction:column;}
.fk-name{font-weight:bold;font-size:13px;}
.fk-desc{font-size:11px;color:var(--hx-dim, #6b4a2b);}
.fe-kind-opt:hover{border-color:var(--hx-accent, #8b2ab9);}
.fe-kind-opt.sel{border-color:var(--hx-accent, #8b2ab9);box-shadow:0 0 0 1px var(--hx-accent, #8b2ab9),0 0 12px var(--hx-glow, #8b2ab955) inset;}
.fpill.gold{background:var(--hx-warn-dim, #f1dfa0);border-color:var(--hx-warn-dim, #d9b84a);color:var(--hx-warn-text, #6d5312);}
#FeaturedArticle .border-1 .ft-title{margin:8px 0 6px;font-size:18px;font-weight:600;line-height:1.2;color:var(--hx-heading, #5a2800);}
#FeaturedArticle .border-1 .ft-title a{color:inherit;}
#FeaturedArticle .border-1 a.ft-frame{cursor:pointer;transition:box-shadow .2s,transform .2s;}
#FeaturedArticle .border-1 a.ft-frame:hover{box-shadow:0 0 14px var(--hx-glow, #8b2ab955),3px 3px 3px var(--hx-shadow, #00000040);transform:translateY(-1px);}
#FeaturedArticle .border-1 #TeaserThumbnail{pointer-events:auto;}
#FeaturedArticle .border-1 .ft-excerpt{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--hx-text, #2b1b0e);}
#FeaturedArticle .border-1 .ft-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--hx-hairline, #d4c0a1);}
#FeaturedArticle .border-1 .ft-meta{font-size:12px;color:var(--hx-dim, #6b4a2b);}
.ft-tip{min-width:180px;}
.ft-tip-title{margin-top:4px;font-weight:bold;}
.ft-tip-meta{margin-top:2px;font-size:11px;opacity:.8;}
@media only screen and (max-width: 600px){
    .fe-kind-opt{min-width:0;flex:1 1 100%;}
}
/* character page collection: owned outfits, mounts, wings, auras (lib/collection.php) */
.col-section{margin-top:10px;}
.col-head{display:flex;align-items:center;gap:10px;cursor:pointer;}
.pedestal-sm.mounted img{width:64px;height:64px;max-width:none;left:-24px;top:-18px;right:auto;bottom:auto;transform:none !important;}
.content-table td > a.toggle-btn{display:inline-block;min-width:18px;line-height:0;}
.content-table td > a.toggle-btn img{max-width:none;}
.col-head .badge{font-weight:normal;font-size:11px;}
.col-head .toggle-btn{margin-left:auto;display:inline-flex;}
.col-grid{display:flex;flex-wrap:wrap;gap:10px;padding:10px;}
.col-tile{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;text-decoration:none !important;color:var(--hx-dim, #6b4a2b);cursor:default;}
.col-img{position:relative;width:64px;height:64px;border-radius:4px;overflow:hidden;background:radial-gradient(var(--hx-panel-3, #ecd8b3),var(--hx-panel-2, #f1e0c6));outline:1px solid var(--hx-outline, #8a6d3b);box-shadow:3px 3px 3px var(--hx-shadow, #00000040),1px 0 var(--hx-inset-hi, #ffffff33) inset,-1px 0 var(--hx-inset-hi, #ffffff33) inset,0 1px var(--hx-inset-hi, #ffffff33) inset,0 -1px var(--hx-inset-hi, #ffffff33) inset;transition:box-shadow .2s;}
.col-tile:hover .col-img{box-shadow:0 0 12px var(--hx-glow, #8b2ab955),3px 3px 3px var(--hx-shadow, #00000040);}
.col-img img{position:absolute;right:0;bottom:0;image-rendering:pixelated;}
.col-img.humanoid img{right:8px;bottom:8px;}
.col-sprite{position:absolute;background-repeat:no-repeat;image-rendering:pixelated;animation-name:colanim;animation-iteration-count:infinite;}
@keyframes colanim{to{background-position-x:var(--fw);}}
.col-img .col-noart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;color:var(--hx-hairline, #c9b28e);}
.col-img.effect{background:radial-gradient(circle at 50% 55%,var(--hx-accent-a25, #d8c2ee) 0,var(--hx-panel-3, #ecd8b3) 55%,var(--hx-panel-2, #f1e0c6) 100%);}
.col-img.current::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:0 0 0 2px var(--hx-accent, #8b2ab9) inset;pointer-events:none;}
.col-name{font-size:11px;text-align:center;line-height:1.2;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hx-text, #5a2800);}
.col-addons{display:flex;gap:4px;}
.col-addons i{width:7px;height:7px;border-radius:50%;background:var(--hx-hairline, #c9b28e);}
.col-addons i.on{background:var(--hx-accent-glow, #4a1d7a);box-shadow:0 0 4px var(--hx-glow, #8b2ab955);}
.col-empty{padding:12px;font-style:italic;color:var(--hx-dim, #6b4a2b);font-size:12px;}
.col-tip{min-width:150px;}
.col-tip-sub{font-size:11px;opacity:.8;margin-top:2px;}
@media only screen and (max-width: 600px){
    .col-grid{gap:6px;padding:8px;justify-content:center;}
    .col-tile{width:70px;}
}
.deaths-more-row{text-align:center;padding:8px 0 2px;}
.deaths-more-row .btn{display:inline-flex;}
.eqbox .item.empty .img{opacity:.85;}
/* casino shop (pages/casinoshop.php) - the Greedy Goblin's counter */
.cs-hero{display:flex;gap:18px;align-items:stretch;padding:14px;margin-bottom:12px;border-radius:6px;background:linear-gradient(135deg,var(--hx-panel-3, #ecd8b3),var(--hx-panel, #f1e0c5) 60%);border:1px solid var(--hx-hairline, #c9b28e);outline:1px solid var(--hx-outline, #8a6d3b);box-shadow:3px 3px 3px var(--hx-shadow, #00000040);}
.cs-hero-art{flex:0 0 132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.cs-goblin{position:relative;width:104px;height:104px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--hx-accent-a25, #d8c2ee),var(--hx-panel-3, #ecd8b3) 72%);outline:1px solid var(--hx-outline, #8a6d3b);box-shadow:0 0 16px var(--hx-glow, #8b2ab955),0 1px var(--hx-inset-hi, #ffffff33) inset;}
.cs-goblin img{position:absolute;right:28px;bottom:28px;image-rendering:pixelated;transform:scale(1.5);transform-origin:bottom right;}
.cs-goblin-tag{font-size:11px;font-weight:bold;color:var(--hx-ok-text, #0a7a0a);text-shadow:0 1px 1px #000;white-space:nowrap;}
.cs-hero-body{flex:1 1 auto;min-width:0;}
.cs-title{margin:0 0 6px;}
.cs-hero-body p{margin:0 0 6px;line-height:1.55;}
.cs-hero-note{font-size:12px;color:var(--hx-dim, #6b4a2b);}
.cs-hero-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.cs-hero-links .btn{display:inline-flex;}
.cs-stats{margin-bottom:12px;grid-template-columns:repeat(4,1fr);gap:10px;}
.cs-section{padding:10px;}
.cs-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
.card-container .card.cs-card{align-items:center;text-align:center;gap:6px;padding:14px 10px 12px;overflow:hidden;}
.card-container .card.cs-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--cs-tier, var(--hx-hairline, #c9b28e));box-shadow:0 0 8px var(--cs-tier, transparent);}
.cs-card.tier-green{--cs-tier:var(--hx-rar-common, #2aa52a);}
.cs-card.tier-blue{--cs-tier:var(--hx-rar-uncommon, #2f78d6);}
.cs-card.tier-red{--cs-tier:var(--hx-rar-rare, #d63a3a);}
.cs-card.tier-purple{--cs-tier:var(--hx-rar-epic, #9b3fd6);}
.cs-card.tier-yellow{--cs-tier:var(--hx-rar-legend, #d6a51f);}
.cs-card.tier-grey{--cs-tier:var(--hx-rar-myth, #8a8a8a);}
.cs-card .cs-art{cursor:default;}
.cs-name{font-weight:bold;color:var(--hx-heading, #5a2800);}
.cs-meta{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;font-size:12px;}
.cs-tier{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:bold;color:#fff;text-shadow:0 1px 1px #000;line-height:16px;}
.cs-tier.green{background:#0b8000;}
.cs-tier.blue{background:#0f4fc0;}
.cs-tier.red{background:#930000;}
.cs-tier.purple{background:#6f0a8a;}
.cs-tier.yellow{background:#8a7300;}
.cs-tier.grey{background:#525252;}
.cs-price{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.cs-price small{color:var(--hx-dim, #6b4a2b);}
.cs-token{width:22px;height:22px;image-rendering:pixelated;vertical-align:middle;}
.cs-note{margin-top:10px;font-size:12px;color:var(--hx-dim, #6b4a2b);line-height:1.6;}
.cs-note .cs-tier{margin-left:2px;}
.cs-desc{font-size:12px;color:var(--hx-dim, #6b4a2b);}
.cs-boost-ico{vertical-align:middle;width:20px;height:20px;}
.cs-items .itembox{margin:0;flex:0 0 auto;}
.cs-item-cell{display:flex;align-items:center;gap:10px;}
.cs-item-card .cs-meta{flex-direction:column;gap:5px;padding-top:2px;}
.cs-items td{vertical-align:middle;}
.cs-grid-4{grid-template-columns:repeat(4,1fr);}
.card-container .card.cs-item-card{gap:5px;padding:12px 8px 10px;}
.cs-item-art .itembox{margin:0 auto;}
.cs-choice{font-size:11px;line-height:1.4;color:var(--hx-dim, #6b4a2b);}
.cs-item-card .cs-desc{line-height:1.4;}
.cs-sources{grid-template-columns:repeat(4,1fr);gap:10px;}
.card-container .card.cs-source{align-items:center;text-align:center;gap:4px;padding:12px 8px;color:inherit;cursor:pointer;}
.cs-source i{font-size:20px;color:var(--hx-gold, #a07a2c);margin-bottom:2px;}
.cs-source b{color:var(--hx-heading, #5a2800);}
.cs-source span{font-size:12px;color:var(--hx-dim, #6b4a2b);line-height:1.4;}
@media only screen and (max-width: 600px){
    .cs-hero{flex-direction:column;align-items:center;text-align:center;}
    .cs-hero-links{justify-content:center;}
    .cs-stats{grid-template-columns:1fr 1fr;}
    .cs-grid{grid-template-columns:1fr;}
    .cs-grid-4{grid-template-columns:1fr 1fr;}
    .cs-sources{grid-template-columns:1fr 1fr;}
}