body  {
	background-image: url("../img/shaiyahera.png");
	background-color: #0f0f0f;
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	background-attachment: fixed;
    height: 100%;
	color: #ffffff;
}
#logo{
	background-image: url('../img/logo.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 220px;
	width: min(560px, 100%);
	max-width: 100%;
	display: block;
	margin: 0 auto;
	text-align: center;
}
#Scontainer input{
   margin-left: -5px; 
}
#logo:hover{
	background-image: url('../img/logo_hover.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#navigacija {
	background-image: url('../img/navigacija.png');
	background-size: 100% 100%;
	text-align: center;
	height: 53px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	color: #908f90;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	box-sizing: border-box;
	position: relative;
}

#navigacija a {
	text-align: center;
	width: 88px;
	height: 53px;
	color: #585858;
	display: inline-block;
	font-family: Trajan pro;
	font-size: 11px;
	padding-top: 19px;
	box-sizing: border-box;
}

#navigacija a:hover {
	background-image: url('../img/hoveris.png');
	text-shadow: #ffffff 1px 0px 4px;
	background-repeat: repeat-x;
	text-decoration: none;
	color: #FFFFFF;
}

/* Sign In / Sign Up junto ao Donate (sem margin-left:auto, que afastava). */
#navigacija .nav-donate-btn {
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}
#navigacija .nav-donate-btn img {
	height: 34px;
	width: auto;
	display: block;
}
#navigacija .auth-links {
	display: inline-flex;
	align-items: center;
	margin-left: 4px;
	margin-right: 0;
	flex-shrink: 0;
}
#navigacija .auth-links a {
	width: auto;
	min-width: 0;
	padding: 19px 8px 0 8px;
	height: 53px;
	font-size: 11px;
	white-space: nowrap;
}

/* Slider table had no desktop-width rule at all — only the tablet/mobile
   breakpoints defined it, so on desktop it fell back to default table
   behavior and sat flush against the left edge instead of centering
   under the nav bar/logo above it. */
.annonces-table {
	width: 620px;
	margin: 0 auto;
}

.home-slider {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
}
.home-slide {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.home-slide.active {
    opacity: 1;
}
.home-slide-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 10px 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
    color: #fff;
    font-size: 15px;
    z-index: 2;
}

/* Abas fixas laterais — Discord e Facebook, visíveis em todas as páginas */
#social-tabs {
    position: fixed;
    left: 0;
    top: 38%;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.social-tab {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.2s ease;
}
.social-tab:hover {
    transform: translateX(6px);
}
#tab-discord {
    width: 78px;
    height: 175px;
    background-image: url('../img/discord_tab_v2.png');
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
    #tab-discord { width: 56px; height: 122px; }
}
@media screen and (max-width: 767px) {
    #social-tabs {
        top: 100px;
        bottom: auto;
        left: 0;
        flex-direction: column;
        gap: 6px;
    }
    #tab-discord { width: 40px; height: 88px; }
}

input[type=text], input[type=number], input[type=password], input[type=email], select {
    margin: 5px;
    padding: 3px 5px;
    background-color: #291811;
    color: #C2A66F;
    border: 2px solid #2C1A16;
    border-radius: 4px;
    outline: none;
    transition: .5s;
    font-family: "CrimsonText-Roman";
    -webkit-box-shadow: 0px 0px 1px 0px rgba(226,198,143,.5);
    -moz-box-shadow: 0px 0px 1px 0px rgba(226,198,143,.5);
    box-shadow: 0px 0px 1px 0px rgba(226,198,143,.5);
	
	
	
	
}
input[type=button][disabled], input[type=submit][disabled] {
    cursor: default;
}
input[type=button], input[type=submit] {
    font-weight: bold;
    font-variant: small-caps;
    display: inline-block;
    min-width: 76px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin: 5px;
    padding: 0 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    background: url(../img/button_left.png) 0 0 no-repeat,
 url(../img/button_right.png) 0 0 no-repeat,
 url(../img/button_center.png) 0 0 repeat-x;
    background-position: left center,
 right center,
 center center;
    color: #C2A66F;
    font-family: "CrimsonText-Roman";
    font-size: 16px;
    transition: .5s;
    border-radius: 4px;
    border: none;
    outline: none;
}
input[type=button]:hover, input[type=submit]:hover {
	color:white;
	transition:.5s
}
.text_center {
    text-align: center;
}
* {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}
#container {
	width: 870px;
	margin-left: auto;
	margin-right: auto;
}

#statusas,
.server-status {
	background-image: none;
	width: auto;
	min-width: 0;
	height: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 6px 12px;
	margin: 0;
	box-sizing: border-box;
	text-align: left;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #3a2f1a;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.server-status-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
}
.server-status-item,
.server-status-players,
.server-time-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.server-status-label {
	color: #a68f5c;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.server-status-value {
	color: #e8dcc0;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
}
.server-status-players {
	padding-top: 2px;
	border-top: 1px solid rgba(58, 47, 26, 0.85);
}
.server-time-row {
	justify-content: space-between;
	padding-top: 4px;
	border-top: 1px solid rgba(58, 47, 26, 0.85);
}
.server-time-value {
	color: #ffd375;
	font-size: 12px;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.server-time-zone {
	color: #a68f5c;
	font-size: 9px;
	font-weight: bold;
	white-space: nowrap;
}

.site-top {
	width: min(870px, 96%);
	margin: 10px auto 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}
.site-logo-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
}
.site-logo-link {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.site-chrome {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	column-gap: 16px;
	width: 100%;
	margin: 0;
	min-height: 0;
	box-sizing: border-box;
}
.site-chrome-right {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	justify-self: end;
	width: 100%;
	max-width: 280px;
	min-width: 0;
}
.site-chrome-right #user-session-bar:empty {
	display: none;
}
.site-chrome-right .user-session {
	width: 100%;
	justify-content: space-between;
	box-sizing: border-box;
}
.site-chrome-right .server-status {
	width: 100%;
	box-sizing: border-box;
}

.lang-bar-wrap {
	justify-self: start;
	align-self: start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.lang-bar {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	max-width: 100%;
}
#currency-switcher,
.lang-switcher {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	padding: 5px 8px;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid #3a2f1a;
	border-radius: 8px;
	box-sizing: border-box;
	max-width: 100%;
}
.user-session {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid #3a2f1a;
	border-radius: 4px;
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
	max-width: 100%;
}
.user-session-name {
	color: #e8c881;
	font-weight: bold;
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.user-session-ap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid #cf9139;
	border-radius: 3px;
	background: rgba(207, 145, 57, 0.16);
	color: #ffd375;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: bold;
}
.user-session-ap-value {
	font-variant-numeric: tabular-nums;
}

#copyright {
}
#newsseparator {
background-image:url('../img/line.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 100%;
max-width: 446px;
height:29px;
margin: 0 auto;
}
#leftpix{
	margin-left:-10px;
}

#kontentas {
	width: 620px;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
    margin-top: -120px;
}

#k_1 {
	/*background-image: url('../img/k_1.png');*/
	background-repeat: no-repeat;
	font-family: arial;
	font-size: 13px;
	color:#ffffff;
	height: 9px;
	width: 620px;
	text-align: center;
}

#k_2 {
	/*background-image: url('../img/k_2.png');*/
	background-repeat: repeat-y;
	font-family: arial;
	font-size: 12px;
	width: 590px;
	text-align: justify;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 7px;
	color: #C2A66F;
}

#k_3 {
	/*background-image: url('../img/k_3.png');*/
	background-repeat: no-repeat;
	width: 620px;
	height: 11px;
	font-family: arial;
	font-size: 12px;
	color: #C2A66F;
}

#marea {
	z-index:999;
}
#marea ul {
	list-style-image: url('../img/bullet.png');
	text-align: left;
    margin-left:15px;margin-top:15px;

}
#marea li {
	height:18px;
}
#footer1 {
	color: black;
    background-clip: padding-box;
    border: 22px solid rgba(255,255,255,0.5);
    border-image: url(../img/border.png) 23 22 23 22 stretch stretch;
    background-color: rgba(0,0,0,0.70);
    background-position: center;
    background-repeat: no-repeat;
    min-height: 90px;
    width: 780px;
    max-width: 90%;
    margin: 50px auto 0 auto;
    font-family: arial;
    font-size: 11px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#footer2 {
	color: black;
	background-position:center;
	background-repeat:no-repeat;
	font-family: arial;
	font-size: 11px;
	color: #ffffff;
    max-width: 780px;
    margin: 4px auto 0 auto;
    text-align: center;
	padding-right: 20px;
}
#Scontainer{

    position: relative;
    margin-top: 8px;
    border: 22px solid rgba(255,255,255,0.5);
    border-image: url('../img/border.png') 23 22 23 22 stretch stretch;
    background-clip: padding-box;
	background-color:rgba(0,0,0,0.70);
	width: 165px;
	margin-left:-3px;
}
#Mcontainer{
    bottom: -1px;
    position: relative;
    margin-top: 7px;
    margin-left: auto;
    margin-right: auto;
    border: 22px solid rgba(255,255,255,0.5);
    border-image: url('../img/border.png') 23 22 23 22 stretch stretch;
    background-clip: padding-box;
	background-color:rgba(0,0,0,0.70);
    width: 575px;
    max-width: 90%;

}

/* ============================================
   Classes de conteúdo compartilhadas — usadas em
   DropList, Features, Story, Start, Races, Classes,
   Modes, Blessing, Combat.
   ============================================ */
.droplist-table { width:100%; border-collapse:collapse; font-size:13px; margin: 10px 0 20px 0; }
.droplist-table th { padding:8px; text-align:left; border-bottom:2px solid #cf9139; color:#C2A66F; }
.droplist-table td { padding:8px; border-bottom:1px solid #333; color:#C2A66F; vertical-align:top; }

.droplist-section {
    margin: 18px 0;
    padding: 12px 14px;
    background: rgba(0,0,0,0.25);
    border: 1px solid #2e2717;
    border-radius: 6px;
}
.droplist-boss-title {
    color: #C2A66F;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    border-bottom: 1px solid #3a2f1a;
    padding-bottom: 6px;
}
.droplist-meta {
    color: #999;
    font-size: 12px;
    margin-bottom: 8px;
}
.droplist-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    color: #C2A66F;
}
.droplist-list li {
    padding: 4px 0;
}
.droplist-note {
    background: rgba(207,145,57,0.08);
    border: 1px solid #4a3a1f;
    border-radius: 4px;
    padding: 10px 14px;
    color: #C2A66F;
    font-size: 12px;
    margin-bottom: 16px;
}

/* "Chips" — cada item de drop vira um bloco próprio que quebra linha
   naturalmente, em vez de um parágrafo corrido separado por "•". */
.drop-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(194,166,111,0.08);
    border: 1px solid #3a2f1a;
    border-radius: 5px;
    padding: 4px 10px 4px 8px;
    margin: 3px 4px 3px 0;
    font-size: 13px;
    color: #C2A66F;
}
.drop-label {
    display: block;
    color: #cf9139;
    font-size: 12px;
    font-weight: bold;
    margin: 10px 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.drop-label:first-child { margin-top: 0; }

/* Formato mais limpo: badge de porcentagem em destaque à direita do
   chip, sem precisar de travessão/pontuação extra separando do nome. */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.drop-pct {
    margin-left: 8px;
    padding: 1px 6px;
    background: rgba(207,145,57,0.18);
    border-radius: 10px;
    font-size: 11px;
    color: #f0dcb0;
    font-weight: bold;
}
/*SOCIAL*/
.Like0{
	height:33px;
	width:33px;
	display:  inline-block;
	background-image:url('../img/icon/social/heart.png');
}
.Like1{
	height:33px;
	width:33px;
	display:  inline-block;
	background-image:url('../img/icon/social/heart-full.png');
}
.Comment{
	height:33px;
	width:33px;
	display:  inline-block;
	background-image:url('../img/icon/social/comment.png');
}
/*FACTIONS*/
#FactionAoL{
	height:26px;
	width:26px;
	display:  inline-block;
	background-image:url('../img/icon/faction/aol.png');
}
#FactionUoF{
	height:26px;
	width:26px;
	display:  inline-block;
	background-image:url('../img/icon/faction/uof.png');
}
#Country0{
	height:13px;
	width:13px;
	display:  inline-block;
	background-image:url('../img/icon/faction/faction0.png');
}
#Country1{
	height:13px;
	width:13px;
	display:  inline-block;
	background-image:url('../img/icon/faction/faction1.png');
}
/*JOBS*/
#Class0{
	height:24px;
	width:24px;
display:  inline-block;	background-image:url('../img/icon/class/0.png');
}
#Class1{
	height:26px;
	width:24px;
display:  inline-block;	background-image:url('../img/icon/class/1.png');
}
#Class2{
	height:26px;
	width:24px;
display:  inline-block;	background-image:url('../img/icon/class/2.png');
}
#Class3{
	height:26px;
	width:24px;
display:  inline-block;	background-image:url('../img/icon/class/3.png');
}
#Class4{
	height:26px;
	width:24px;
display:  inline-block;	background-image:url('../img/icon/class/4.png');
}
#Class5{
	height:26px;
	width:24px;
display:  inline-block;	background-image:url('../img/icon/class/5.png');
}
/*PVP RANKS*/
#Grade0{
	width:26px;
	height:14px;
    
	background-image:url('../img/icon/grade/0.png');
}
#Grade1{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/1.png');
}
#Grade2{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/2.png');
}
#Grade3{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/3.png');
}
#Grade4{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/4.png');
}
#Grade5{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/5.png');
}
#Grade6{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/6.png');
}
#Grade7{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/7.png');
}
#Grade8{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/8.png');
}
#Grade9{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/9.png');
}
#Grade10{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/10.png');
}
#Grade11{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/11.png');
}
#Grade12{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/12.png');
}
#Grade13{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/13.png');
}
#Grade14{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/14.png');
}
#Grade15{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/15.png');
}
#Grade16{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/16.png');
}
#Grade17{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/17.png');
}
#Grade18{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/18.png');
}
#Grade19{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/19.png');
}
#Grade20{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/20.png');
}
#Grade21{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/21.png');
}
#Grade22{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/22.png');
}
#Grade23{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/23.png');
}
#Grade24{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/24.png');
}
#Grade25{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/25.png');
}
#Grade26{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/26.png');
}
#Grade27{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/27.png');
}
#Grade28{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/28.png');
}
#Grade29{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/29.png');
}
#Grade30{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/30.png');
}
#Grade31{
	width:26px;
	height:14px;

	background-image:url('../img/icon/grade/31.png');
}

.tarpas {
	margin-top: 5px;
	vertical-align: top;
}

.tarpastarpnaujienu {
	margin-top: 12px;
	vertical-align: top;
}
ol {
	list-style:none;
}
ol li {
	display:block;
	clear:both;
}
ol li label {
	display:block;
	margin:0;
	padding:16px 0 0 0;
}
ol li select {
	width:256px;
	border:1px solid #b6ff08;
	margin:0;
	padding:5px 2px;
	color:#fff;
	background-color:#131313;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
ol li select:focus {
	background-color:#fff;
	color:#000;
}





A:link {text-decoration: none; color: #cf9139;}
A:visited {text-decoration: none; color: #cf9139;}
A:active {text-decoration: none; color: #cf9139;}
A:hover {text-decoration: none; color: #ffffff;}

/* ============================================
   RESPONSIVE - Hera Classic Ep 4.5
   Breakpoints: Desktop (>1024px) / Tablet (768-1024px) / Mobile (<768px)
   ============================================ */

* { box-sizing: border-box; }

/* --- TABLET (max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    .site-top {
        width: min(870px, 96%);
    }
    #logo {
        width: min(460px, 100%) !important;
        height: 180px !important;
        margin: 0 auto;
    }
    #navigacija {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: 53px;
        padding: 5px 0;
        flex-wrap: wrap;
    }
    #navigacija a {
        width: auto !important;
        padding: 10px 14px !important;
        font-size: 13px;
    }
    .annonces-table {
        width: 92% !important;
        margin: 0 auto;
    }
    #annonces-slider {
        width: 100% !important;
    }
    #Mcontainer {
        width: 90% !important;
        max-width: 640px;
        margin: 10px auto !important;
        padding: 15px;
    }
    #Mcontainer.pvp-page {
        max-width: 720px !important;
    }
    #footer1 table {
        margin: 0 auto;
        left: 0 !important;
    }
}

/* --- MOBILE (max-width: 767px) --- */
@media screen and (max-width: 767px) {
    /* O bug: background-size:cover no body é calculado com base na
       ALTURA TOTAL DA PÁGINA (que muda muito entre uma página curta
       e uma longa como a DropList), não com base no tamanho da tela.
       Por isso o fundo parecia "mudar de tamanho" ao trocar de página.
       Solução: mover o fundo para um elemento fixo do tamanho exato
       da viewport (100vw/100vh), independente da altura do conteúdo. */
    body {
        background-image: none !important;
    }
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: url("../img/shaiyahera.png");
        background-color: #0f0f0f;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        z-index: -1;
    }
    #statusas {
        font-size: 12px;
        padding: 8px;
    }
    #logo {
        width: min(300px, 100%) !important;
        height: 123px !important;
    }
    #navigacija {
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-image: none !important;
        background-color: rgba(20,20,20,0.85);
        border-radius: 4px;
        padding: 6px 0;
    }
    #navigacija a {
        width: auto !important;
        flex: 0 0 auto;
        padding: 8px 10px !important;
        font-size: 13px;
        height: auto !important;
    }
    #navigacija div[style*="float:right"],
    #navigacija .auth-links {
        float: none !important;
        margin: 0 !important;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .annonces-table {
        width: 95% !important;
    }
    #annonces-slider {
        width: 100% !important;
        padding: 10px;
        font-size: 13px;
    }
    #Mcontainer {
        width: 92% !important;
        margin: 8px auto !important;
        padding: 12px;
        font-size: 13px;
    }
    #Mcontainer.pvp-page {
        max-width: 720px !important;
    }
    #Mcontainer font[style*="font-size: 20px"] {
        font-size: 16px !important;
    }
    input[type=submit] {
        width: 100%;
        max-width: 220px;
    }
    #footer1 {
        padding: 10px;
    }
    #footer1 table {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 0;
        top: 0 !important;
        left: 0 !important;
    }
    #footer2, #copyright {
        font-size: 11px;
        padding: 8px;
    }
}

/* --- SMALL MOBILE (max-width: 400px) --- */
@media screen and (max-width: 400px) {
    #logo {
        width: 240px !important;
        height: 98px !important;
    }
    #navigacija a {
        font-size: 12px;
        padding: 7px 8px !important;
    }
}
/* Shared authenticated chrome; login links stay in the nav when logged out. */
.auth-links { display: inline-flex; align-items: center; min-height: 28px; }
.btn-site-logout {
	border: 0;
	background: transparent;
	color: #c07070;
	cursor: pointer;
	font: inherit;
	font-size: 11px;
	font-weight: bold;
	padding: 0;
	opacity: 0.9;
}
.btn-site-logout:hover,
.btn-site-logout:focus {
	color: #ff8a8a;
	text-decoration: underline;
	opacity: 1;
}
@media (max-width: 760px) {
	.site-top {
		width: 96%;
		gap: 10px;
	}
	.site-chrome {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 8px;
	}
	.site-chrome-right {
		justify-self: center;
		width: 100%;
		max-width: 360px;
		order: 1;
	}
	.lang-bar-wrap {
		justify-self: center;
		justify-content: center;
		order: 2;
		width: 100%;
	}
	.lang-bar {
		justify-content: center;
		width: 100%;
	}
	#currency-switcher,
	.lang-switcher {
		border-radius: 12px;
		max-width: 100%;
		justify-content: center;
	}
	#logo {
		height: 160px;
		width: min(420px, 100%);
	}
	.user-session {
		justify-content: center;
		flex-wrap: wrap;
	}
}

.currency-btn,
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 10px 5px 6px;
    border: 1px solid #3a2f1a;
    border-radius: 999px;
    background: rgba(12, 10, 6, 0.65);
    color: #c2a66f;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.03em;
    line-height: 1;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.currency-btn:hover,
.lang-btn:hover {
    background: rgba(42, 34, 20, 0.9);
    color: #f0dcb0;
    border-color: #cf9139;
}
.currency-btn.active,
.lang-btn.active {
    border-color: #cf9139;
    background: rgba(207, 145, 57, 0.18);
    color: #ffd375;
    box-shadow: 0 0 0 1px rgba(207, 145, 57, 0.25);
}
.flag-icon {
    display: inline-block;
    width: 22px;
    height: 15px;
    border-radius: 3px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}
.flag-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.currency-code {
    min-width: 1.5em;
}
#epvp { background-image:url('../img/logo/epvp_logo.png'); width:90px; height:62px; }
#epvp:hover { background-image:url('../img/logo/epvp_logo_hover.png'); }
#jquery { background-image:url('../img/logo/jquery_logo.png'); width:154px; height:39px; }
#jquery:hover { background-image:url('../img/logo/jquery_logo_hover.png'); }

.forum-table { width:100%; border-collapse:collapse; font-size:13px; }
.forum-table th { padding:8px; text-align:left; border-bottom:2px solid #cf9139; color:#cf9139; }
.forum-table td { padding:8px; border-bottom:1px solid #333; vertical-align:top; }
.forum-cat-title { font-size:16px; color:#cf9139; margin:0; }
.forum-cat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0 4px 0;
}
.forum-cat-desc {
    margin: 0 0 6px 0;
    color: #999;
    font-size: 12px;
}
.forum-admin-actions,
.forum-admin-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    justify-content: flex-end;
}
.forum-edit-details {
    position: relative;
}
.forum-edit-details > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #3a2f1a;
    border-radius: 4px;
    background: rgba(0,0,0,0.45);
    color: #cf9139;
    font-size: 11px;
    font-weight: bold;
}
.forum-edit-details > summary::-webkit-details-marker { display: none; }
.forum-edit-details[open] > summary {
    border-color: #cf9139;
}
.forum-inline-form {
    margin-top: 8px;
    min-width: 220px;
    max-width: 320px;
    padding: 10px;
    background: rgba(0,0,0,0.75);
    border: 1px solid #3a2f1a;
    border-radius: 6px;
}
.forum-inline-form label {
    display: block;
    color: #a68f5c;
    font-size: 11px;
    margin: 6px 0 3px;
}
.forum-inline-form input[type=text],
.forum-inline-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 7px;
    background: #1a1208;
    border: 1px solid #3a2f1a;
    color: #e8dcc0;
    border-radius: 3px;
}
.forum-inline-delete { margin: 0; }
.forum-btn-danger {
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid #5a2020;
    border-radius: 4px;
    background: rgba(80, 16, 16, 0.55);
    color: #ff8a8a;
    font-size: 11px;
    font-weight: bold;
}
.forum-btn-danger:hover {
    background: rgba(120, 24, 24, 0.75);
}
.forum-sub-icon {
    vertical-align: middle;
    margin-right: 6px;
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.forum-sub-has-image {
    color: #cf9139;
    font-size: 11px;
}
.forum-table img.forum-sub-icon {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
}
.forum-section-banner {
    margin: 0 auto 16px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
}
.forum-section-banner img {
    display: block;
    margin: 0 auto;
    width: 100% !important;
    max-width: 760px !important;
    max-height: 320px !important;
    height: auto !important;
    object-fit: contain;
    border: 1px solid #3a2f1a;
    border-radius: 4px;
}
.forum-post-image {
    margin-top: 10px;
    overflow: hidden;
}
.forum-post-image img {
    display: block;
    max-width: 100% !important;
    max-height: 420px !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid #3a2f1a;
    border-radius: 4px;
}
.forum-comment-box textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
}
.forum-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
    max-height: 180px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0,0,0,0.35);
    border: 1px solid #3a2f1a;
    border-radius: 6px;
}
.forum-icon-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    background: rgba(26, 18, 8, 0.85);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.forum-icon-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.forum-icon-choice img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: auto;
}
.forum-icon-choice:hover {
    border-color: #a68f5c;
}
.forum-icon-choice.is-selected,
.forum-icon-choice:has(input:checked) {
    border-color: #cf9139;
    background: rgba(80, 50, 10, 0.55);
    box-shadow: 0 0 0 1px rgba(207, 145, 57, 0.35);
}
.forum-icon-none {
    width: auto;
    min-width: 56px;
    padding: 4px 8px;
    color: #a68f5c;
    font-size: 11px;
}
.forum-icon-empty {
    margin: 0;
    color: #888;
    font-size: 12px;
}
.forum-post-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #3a2f1a;
    border-radius: 4px;
}
.notice-card {
    text-align: left;
    margin: 0 0 18px 0;
    padding: 12px 14px;
    background: rgba(0,0,0,0.28);
    border: 1px solid #3a2f1a;
    border-radius: 6px;
}
.notice-title {
    margin: 0 0 6px 0;
    color: #e8c881;
    font-size: 18px;
    font-family: Trajan Pro, serif;
}
.notice-meta {
    color: #a68f5c;
    font-size: 11px;
    margin-bottom: 10px;
}
.notice-body {
    color: #ddd;
    font-size: 13px;
    line-height: 1.5;
}
.notice-image {
    margin: 8px 0 12px 0;
}
.notice-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #3a2f1a;
    border-radius: 4px;
}
.notice-admin-row {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.notice-edit-btn {
    display: inline-block;
    text-decoration: none;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.4;
}

.forum-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 12px 0 8px;
}
.forum-admin-form {
    text-align: left;
    padding: 14px;
    background: rgba(0,0,0,0.35);
    border: 1px solid #3a2f1a;
    border-radius: 6px;
}
.forum-admin-form h3 {
    color: #cf9139;
    font-size: 14px;
    margin: 0 0 10px 0;
}
.forum-admin-form label {
    display: block;
    color: #a68f5c;
    font-size: 11px;
    margin: 8px 0 4px;
}
.forum-admin-form input[type=text],
.forum-admin-form select,
.forum-admin-form textarea,
.forum-admin-form input[type=file] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    background: #1a1208;
    border: 1px solid #3a2f1a;
    color: #e8dcc0;
    border-radius: 3px;
}
.forum-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    background: #1a1208;
    border: 1px solid #3a2f1a;
    color: #e8dcc0;
    border-radius: 3px;
}
.forum-admin-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 10px !important;
    color: #e8dcc0 !important;
    font-size: 12px !important;
}
.forum-admin-form button {
    margin-top: 12px;
}


#rankingsFormResult,
.pvp-results {
    width: 100%;
    margin-top: 14px;
}
#Mcontainer.pvp-page {
    width: 820px;
    max-width: 96%;
}
.pvp-live-hint {
    text-align: center;
    color: #a68f5c;
    font-size: 11px;
    margin: -4px 0 12px 0;
}
.pvp-placeholder,
.pvp-empty {
    text-align: center;
    padding: 28px 12px;
    color: #C2A66F;
    margin: 0;
    opacity: 0.8;
}
#rankingsForm.pvp-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 10px 12px;
    align-items: end;
    margin: 0 auto;
    padding: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #3a2f1a;
    border-radius: 6px;
    box-sizing: border-box;
}
.pvp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-width: 0;
}
.pvp-field span {
    color: #cf9139;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.02em;
}
.pvp-field select {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}
button.pvp-btn,
#rankingsFormSubmit.pvp-btn {
    appearance: none;
    -webkit-appearance: none;
    height: 34px;
    min-width: 96px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #cf9139 !important;
    border-radius: 4px;
    background: #1a1208 !important;
    background-image: none !important;
    color: #cf9139 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold;
    font-variant: normal !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 32px;
}
button.pvp-btn:hover,
#rankingsFormSubmit.pvp-btn:hover {
    background: #2a2214;
    color: #f0dcb0;
    border-color: #f0dcb0;
}
button.pvp-btn:disabled,
#rankingsFormSubmit.pvp-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.pvp-summary {
    display: flex;
    justify-content: flex-end;
    margin: 12px 0 8px 0;
    font-size: 11px;
    color: #a68f5c;
}
.pvp-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #3a2f1a;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
}
.pvp-row {
    display: grid;
    grid-template-columns:
        42px
        56px
        minmax(90px, 1.3fr)
        minmax(70px, 0.9fr)
        52px
        minmax(70px, 1fr)
        64px
        72px
        64px
        64px
        48px;
    align-items: center;
    gap: 6px;
    padding: 10px 10px;
    border-bottom: 1px solid #2e2717;
}
.pvp-row:last-child {
    border-bottom: none;
}
.pvp-row-head {
    background: rgba(34, 26, 14, 0.95);
    border-bottom: 1px solid #cf9139;
    padding-top: 9px;
    padding-bottom: 9px;
}
.pvp-row-head .pvp-col {
    color: #cf9139;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.pvp-row-head a {
    color: #cf9139;
    text-decoration: none;
}
.pvp-row-head a:hover {
    color: #f0dcb0;
    text-decoration: underline;
}
.pvp-row:not(.pvp-row-head):hover {
    background: rgba(207, 145, 57, 0.08);
}
.pvp-col {
    min-width: 0;
    color: #e8dcc0;
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pvp-col-pos {
    color: #cf9139;
    font-weight: bold;
    text-align: center;
    font-size: 13px;
}
.pvp-col-rank,
.pvp-col-faction,
.pvp-col-level,
.pvp-col-stat {
    text-align: center;
}
.pvp-col-rank img,
.pvp-col-faction img {
    display: inline-block;
    vertical-align: middle;
}
.pvp-rank-icon {
    width: 48px;
    height: 24px;
    object-fit: contain;
}
.pvp-col-name {
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
}
.pvp-col-guild {
    color: #a68f5c;
}
.pvp-stat-box {
    display: inline-block;
    min-width: 42px;
    padding: 5px 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #2e2717;
    border-radius: 4px;
    color: #e8dcc0;
    font-weight: bold;
    font-size: 12px;
}
.pvp-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12px;
    color: #a68f5c;
}
.pvp-pagination .overview {
    margin-right: 8px;
}
.pvp-pagination a.page {
    display: inline-block;
    min-width: 24px;
    padding: 3px 7px;
    text-align: center;
    color: #C2A66F;
    text-decoration: none;
    border: 1px solid #3a2f1a;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.35);
}
.pvp-pagination a.page.selected,
.pvp-pagination a.page:hover {
    background: #cf9139;
    color: #1a1208;
    border-color: #cf9139;
}
.ajaxLoader {
    width: 28px;
    height: 28px;
    margin: 28px auto;
    display: block;
    border: 2px solid #3a2f1a;
    border-top-color: #cf9139;
    border-radius: 50%;
    animation: pvp-spin 0.7s linear infinite;
}
@keyframes pvp-spin {
    to { transform: rotate(360deg); }
}
@media screen and (max-width: 700px) {
    #rankingsForm.pvp-filters {
        grid-template-columns: 1fr;
    }
    button.pvp-btn,
    #rankingsFormSubmit.pvp-btn {
        width: 100%;
    }
    .pvp-table {
        overflow-x: auto;
    }
    .pvp-row {
        min-width: 800px;
    }
}

/* ========== Boss Time ========== */
#Mcontainer.boss-time-page {
    width: 820px;
    max-width: 96%;
}
.boss-time-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 0 0 14px;
}
.boss-time-heading h1 {
    margin: 0 0 4px;
    color: #f0dcb0;
    font-size: 28px;
}
.boss-time-heading p {
    color: #a68f5c;
    font-size: 12px;
}
.boss-time-clock {
    min-width: 190px;
    padding: 9px 12px;
    border: 1px solid #6f501d;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
}
.boss-time-clock span,
.boss-time-clock small {
    display: block;
    color: #a68f5c;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: .08em;
}
.boss-time-clock strong {
    display: block;
    margin: 3px 0;
    color: #ffd375;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.boss-time-note {
    margin-bottom: 12px;
    padding: 9px 11px;
    border-left: 3px solid #cf9139;
    background: rgba(207, 145, 57, .08);
    color: #bba77d;
    font-size: 11px;
    line-height: 1.45;
}
.boss-time-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}
.boss-filter,
.boss-refresh {
    padding: 7px 11px;
    border: 1px solid #513a17;
    border-radius: 4px;
    background: #171109;
    color: #bda36e;
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}
.boss-filter:hover,
.boss-filter.is-active,
.boss-refresh:hover {
    border-color: #cf9139;
    color: #ffd375;
    background: #2a1d0c;
}
.boss-refresh {
    margin-left: auto;
}
.boss-time-message {
    padding: 18px;
    color: #a68f5c;
    text-align: center;
}
.boss-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.boss-card {
    padding: 12px;
    border: 1px solid #3a2f1a;
    border-radius: 7px;
    background: rgba(0, 0, 0, .52);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .28);
}
.boss-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.boss-card h3 {
    margin: 0;
    color: #f2dfb5;
    font-size: 15px;
}
.boss-card-head p {
    margin: 3px 0 0;
    color: #8f7b52;
    font-size: 10px;
}
.boss-state {
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: .04em;
}
.boss-status-dead .boss-state { color: #e59643; }
.boss-status-expected_alive .boss-state { color: #65c36f; }
.boss-status-unknown .boss-state { color: #999; }
.boss-countdown {
    margin: 11px 0;
    color: #ffd375;
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}
.boss-status-expected_alive .boss-countdown {
    color: #65c36f;
}
.boss-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding-top: 8px;
    border-top: 1px solid #2e2717;
}
.boss-card-details div {
    min-width: 0;
}
.boss-card-details span,
.boss-card-details strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.boss-card-details span {
    color: #806f4d;
    font-size: 9px;
    text-transform: uppercase;
}
.boss-card-details strong {
    margin-top: 2px;
    color: #d7c59f;
    font-size: 10px;
}
.boss-history {
    margin-top: 22px;
}
.boss-history h2 {
    margin-bottom: 9px;
    color: #cf9139;
    font-size: 17px;
}
.boss-history-list {
    border: 1px solid #3a2f1a;
    border-radius: 6px;
    overflow: hidden;
}
.boss-history-row {
    display: grid;
    grid-template-columns: 145px 1fr 1.2fr;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #2e2717;
    background: rgba(0, 0, 0, .42);
    color: #bba77d;
    font-size: 10px;
}
.boss-history-row:last-child {
    border-bottom: 0;
}
.boss-history-row time {
    color: #8f7b52;
    font-variant-numeric: tabular-nums;
}
.boss-history-row strong,
.boss-history-row b {
    color: #ead8b0;
}
.boss-history-row small {
    grid-column: 3;
    color: #806f4d;
}
@media screen and (max-width: 700px) {
    .boss-time-heading {
        align-items: stretch;
        flex-direction: column;
    }
    .boss-time-clock {
        min-width: 0;
    }
    .boss-time-grid {
        grid-template-columns: 1fr;
    }
    .boss-history-row {
        grid-template-columns: 1fr;
    }
    .boss-history-row small {
        grid-column: auto;
    }
}

/* ========== Item Mall / Store ========== */
#Mcontainer.store-page {
    width: 760px;
    max-width: 96%;
}
.store-flash {
    text-align: center;
    margin: 8px 0 12px;
    font-size: 13px;
}
.store-flash-ok { color: #4caf50; }
.store-flash-err { color: #e05a5a; }
.store-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 18px;
}
.store-login-hint {
    margin: 0;
    color: #a68f5c;
    font-size: 13px;
    text-align: center;
}
.store-ap-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #cf9139;
    border-radius: 4px;
}
.store-ap-label {
    color: #a68f5c;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.store-ap-value {
    color: #ffd375;
    font-size: 16px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}
.store-donate-link {
    color: #cf9139;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.store-donate-link:hover {
    color: #f0dcb0;
    border-bottom-color: #f0dcb0;
}
.store-empty {
    text-align: center;
    color: #C2A66F;
    padding: 24px 12px;
    opacity: 0.85;
}
.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
.store-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #3a2f1a;
    border-radius: 6px;
}
.store-card:hover {
    border-color: #cf9139;
    background: rgba(207, 145, 57, 0.08);
}
.store-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
}
.store-icon-sprite {
    display: block;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: scale(1.5);
    transform-origin: center;
}
.store-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #3a2f1a;
    border-radius: 4px;
    color: #a68f5c;
    background: rgba(0, 0, 0, 0.35);
    font-size: 16px;
}
.store-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.store-card-name {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
}
.store-card-price {
    text-align: center;
    color: #ffd375;
}
.store-price-value {
    font-size: 15px;
    font-weight: bold;
}
.store-price-unit {
    font-size: 11px;
    color: #cf9139;
    margin-left: 3px;
}
.store-buy-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.store-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #a68f5c;
    font-size: 11px;
}
.store-qty input {
    width: 48px;
    padding: 4px;
    background: #1a1208;
    border: 1px solid #3a2f1a;
    color: #e8dcc0;
    border-radius: 3px;
    text-align: center;
}
button.store-buy-btn,
a.store-buy-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid #cf9139 !important;
    border-radius: 4px;
    background: #1a1208 !important;
    background-image: none !important;
    color: #cf9139 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold;
    font-variant: normal !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
}
button.store-buy-btn:hover,
a.store-buy-btn:hover {
    background: #2a2214 !important;
    color: #f0dcb0 !important;
    border-color: #f0dcb0 !important;
}
.store-note {
    font-size: 12px;
    color: #999;
    margin-top: 18px;
    text-align: center;
}
@media screen and (max-width: 700px) {
    .store-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 420px) {
    .store-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Vote page --- */
.vote-panel { text-align: center; }
.vote-title {
    margin: 0 0 10px;
    color: #e8dcc0;
    font-family: Trajan Pro, serif;
    letter-spacing: 0.04em;
}
.vote-intro {
    margin: 0 auto 18px;
    max-width: 520px;
    color: #cfc3a6;
    font-size: 14px;
    line-height: 1.45;
}
.vote-ap-badge {
    display: inline-block;
    margin: 0 4px;
    padding: 2px 10px;
    border: 1px solid #8a6a2e;
    border-radius: 4px;
    background: rgba(80, 50, 10, 0.55);
    color: #e8c881;
    font-weight: bold;
    font-size: 13px;
}
.vote-card {
    max-width: 420px;
    margin: 0 auto 16px;
    padding: 20px 18px 16px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid #3a2f1a;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(207, 145, 57, 0.12);
}
.vote-card-locked { padding: 22px; }
.vote-login-msg { margin: 0; color: #cfc3a6; }
.vote-login-msg a { color: #cf9139; font-weight: bold; }
.vote-banner-wrap { margin-bottom: 16px; }
.vote-banner-link[hidden],
.vote-banner-disabled[hidden],
.vote-countdown[hidden],
.vote-claim-box[hidden],
.vote-countdown-until[hidden],
.vote-countdown-done[hidden],
.vote-claim-msg[hidden] {
    display: none !important;
}
.vote-banner-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.vote-banner-link img,
.vote-banner-disabled img {
    display: block;
    border: 1px solid #5a4a28;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(207, 145, 57, 0.25);
}
.vote-banner-link:hover img { border-color: #cf9139; }
.vote-cta {
    color: #e8c881;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.03em;
}
.vote-banner-disabled {
    opacity: 0.4;
    filter: grayscale(0.35);
    margin-bottom: 14px;
}
.vote-banner-disabled img { margin: 0 auto; }
.vote-countdown-label {
    margin: 0 0 10px;
    color: #a68f5c;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.vote-countdown-digits {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.vote-time-block {
    min-width: 54px;
    padding: 8px 6px 6px;
    background: rgba(26, 18, 8, 0.9);
    border: 1px solid #5a4020;
    border-radius: 6px;
}
.vote-time-num {
    display: block;
    color: #e8c881;
    font-size: 26px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    font-family: Trajan Pro, Georgia, serif;
}
.vote-time-unit {
    display: block;
    margin-top: 2px;
    color: #8a7a55;
    font-size: 10px;
    text-transform: uppercase;
}
.vote-time-sep {
    color: #cf9139;
    font-size: 22px;
    font-weight: bold;
    padding-bottom: 12px;
}
.vote-countdown-done {
    margin: 8px 0 0;
    color: #7dcea0;
    font-size: 13px;
    font-weight: bold;
}
.vote-countdown-until {
    margin: 10px 0 0;
    color: #cfc3a6;
    font-size: 12px;
}
.vote-countdown-until strong { color: #e8c881; }
.vote-claim-box {
    margin: 0 0 14px;
    padding: 12px 10px;
    background: rgba(26, 18, 8, 0.55);
    border: 1px solid #5a4020;
    border-radius: 6px;
}
.vote-claim-hint {
    margin: 0 0 10px;
    color: #a68f5c;
    font-size: 12px;
    line-height: 1.4;
}
.vote-claim-btn {
    width: 100%;
    max-width: 320px;
    cursor: pointer;
}
.vote-claim-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}
.vote-claim-msg {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: bold;
}
.vote-claim-msg.is-ok { color: #7dcea0; }
.vote-claim-msg.is-err { color: #e05a5a; }
.vote-card.is-cooldown .vote-countdown { margin-top: 4px; }
.vote-meta {
    display: grid;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid #3a2f1a;
    text-align: left;
}
.vote-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #a68f5c;
    font-size: 12px;
}
.vote-meta-row strong { color: #e8dcc0; font-weight: bold; }
.vote-footer {
    margin: 8px auto 0;
    max-width: 480px;
    color: #777;
    font-size: 11px;
    line-height: 1.4;
}



/* Change password: match existing login/register fields */
.hera-password-input {width:100%;box-sizing:border-box;margin:6px 0 14px 0;padding:6px;background:#111;border:1px solid #444;color:#fff;border-radius:3px;}
.hera-password-input:focus {outline:1px solid #888;}