*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000}
body{
overflow-x:hidden;
color:#b9afaa;
font:11px Arial,Helvetica,sans-serif;
background:#000 url('../img/background.jpg') center top/1476px auto no-repeat;
}
a{color:inherit;text-decoration:none}
img{display:block}
.viewport{width:1004px;margin:0 auto}
.site{width:1004px;position:relative;transform-origin:top center}
/* FULL supplied reference header: 1004x316, no crop/no scaling distortion */
.reference-header{
width:1004px;height:414px;
background:url('../img/background-principal.jpg') left top/1004px 414px no-repeat;
position:relative;
}
/* Original duel strip directly under the full header */
.duels{width:622px;height:116px;margin:0 auto;position:relative;z-index:20;overflow:hidden}
.duels img{display:block;width:622px;height:116px}
/* ÚLTIMOS DUELOS: estilo grande, centrado y tipo arcade como la referencia */
.duels-overlay{position:absolute;left:32px;top:46px;width:402px;height:46px;z-index:5;display:flex;flex-direction:column;justify-content:center;gap:0;padding:0 3px;overflow:hidden;color:#fff;font-family:"Arial Black",Arial,Helvetica,sans-serif;text-shadow:2px 2px 3px #000;pointer-events:none}
.duel-item{width:100%;height:23px;display:grid;grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr);align-items:center;column-gap:2px;white-space:nowrap;overflow:hidden}
.duel-player{min-width:0;display:flex;align-items:center;justify-content:center!important;gap:0;overflow:hidden;text-overflow:ellipsis;color:#d79a32;font-family:"Arial Black",Arial,Helvetica,sans-serif;font-size:16px;font-weight:900;line-height:23px;letter-spacing:-.2px;text-shadow:2px 2px 3px #000,-1px -1px 0 #6b2b00}
.duel-player img{display:none!important}
.duel-player span{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;text-align:center}
.duel-player-left,.duel-player-right{justify-content:center;text-align:center}
.duel-winner{color:#f2b13d;font-weight:900}
.duel-score{display:flex;justify-content:center;align-items:center;gap:4px;font-family:"Arial Black",Arial,Helvetica,sans-serif;font-size:17px;font-weight:900;line-height:23px;text-align:center;text-shadow:2px 2px 3px #000}
.duel-score b{font-style:normal;font-weight:900}
.duel-score-left{color:#2f67ff}
.duel-score-right{color:#f04444}
.duel-score i{font-style:normal;color:#f04444;font-weight:900}
.duel-empty{text-align:center;color:#c6b7aa;font-family:"Arial Black",Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;line-height:23px}
/* Main three columns */
.columns{
width:1004px;
margin-top:-101px;
display:grid;
grid-template-columns:192px 622px 189px;
align-items:start;
}
/* LEFT */
.left{
width:192px;
margin-top:-20px;
min-height:900px;
position:relative;
background:
url('../img/side-left.jpg') top left/192px 471px no-repeat,
url('../img/back_5.jpg') 0 471px/192px 365px no-repeat,
#070605;
}
.menu-module{
width:192px;
height:362px;
margin-top:40px;
position:relative;
overflow:hidden;
background:url('../img/menu_frame_user.jpg') left top/192px 362px no-repeat;
}
.menu-gif{width:192px;height:65px;position:absolute;left:0;top:0;z-index:2;object-fit:cover}
/* INFO */
.info-module{
width:192px;height:159px;position:relative;overflow:hidden;margin:0;
background:url('../img/info_frame_user.jpg') top left/192px 159px no-repeat;
}
.info-gif{width:192px;height:65px;object-fit:cover;position:relative;z-index:3}
.info-body{width:174px;margin:0 auto;position:relative;z-index:4;background:url('../img/info_bg_serverbtm.gif') left bottom/174px 88px repeat-y}
.info-row{height:20px;padding:4px 7px 3px;color:#c2b4a9;font-size:9px;line-height:12px;border-bottom:1px solid rgba(83,57,38,.45);background:rgba(10,8,7,.32)}
.info-row:last-child{border-bottom:0}
.info-top{display:flex;justify-content:space-between;color:#d89b43;background:rgba(12,9,7,.7)}
.info-row strong{color:#dfd1c3}
/* LINKS */
.links-module{
width:192px;height:200px;margin-top:15px;overflow:hidden;position:relative;
background:url('../img/links_frame_user.jpg') left top/192px 200px no-repeat;
}
.links-gif{width:192px;height:65px;object-fit:cover;position:relative;z-index:3}
.links-body{width:174px;min-height:65px;margin:0 auto;padding:10px 8px;color:#c6bbb4;position:relative;z-index:4}
.links-body img{display:inline-block;width:9px;height:9px;margin-right:4px;vertical-align:middle}
/* CENTER */
.center{
width:622px;min-height:900px;position:relative;overflow:hidden;
background:url('../img/sidebar_bg.jpg') repeat;
}
.center-inner{
width:622px;min-height:900px;position:relative;padding:20px 31px 40px;
background:url('../img/background_12.png') top right/600px 487px no-repeat;
}
.center-inner:before{content:'';position:absolute;left:0;top:0;bottom:0;width:11px;background:url('../img/main_left.jpg') repeat-y}
.center-inner:after{content:'';position:absolute;right:0;top:0;bottom:0;width:11px;background:url('../img/main_rigth.jpg') repeat-y}
.panel{position:relative;z-index:2;width:560px;margin-bottom:12px;border:1px solid #3c2b1d;background:rgba(10,8,7,.84);box-shadow:inset 0 0 18px #000}
.panel-title{height:34px;padding:0;color:transparent;font:0/0 Georgia,serif;background-repeat:no-repeat;background-position:left top;background-size:560px 34px;border-bottom:0;overflow:hidden}
.panel-news .panel-title{background-image:url('../img/background_4.png')}
.panel-events .panel-title{background-image:url('../img/background_7.png')}
.line{height:29px;padding:7px 9px;border-bottom:1px solid #231b15;font-size:9px}
.line:last-child{border-bottom:0}
.line time{float:right;color:#7e6553;font-size:8px}
.line time b{color:#e23b18;font-weight:normal}
.blank{height:185px}
.promo{display:block;position:relative;z-index:2;width:472px;margin:0 auto 12px}
.promo img{width:472px;height:auto}
/* TOP GENS: the artwork remains untouched; real database values are overlaid. */
.gens-top-card{height:182px;overflow:hidden;position:relative;cursor:default}
.gens-top-card>img{position:absolute;left:0;top:0;width:472px;height:182px;z-index:1}
.gens-points,.gens-leader{position:absolute;z-index:2;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;text-shadow:1px 1px 2px #000,-1px -1px 1px rgba(0,0,0,.45)}
.gens-points{top:5px;width:204px;height:37px;padding:4px 8px;font:bold 24px Arial,Helvetica,sans-serif;line-height:29px;letter-spacing:.2px}
.gens-points-duprian{left:8px;color:#e4302e}
.gens-points-vanert{left:260px;color:#334de0}
.gens-leader{top:139px;width:118px;height:24px;padding:0 5px;display:flex;align-items:center;justify-content:center;font:12px/1 Arial,Helvetica,sans-serif;color:#f4eee8}
.gens-leader-duprian{left:42px}
.gens-leader-vanert{left:312px}
/* RIGHT */
.right{
width:189px;
margin-top:-16px;min-height:900px;position:relative;
background:url('../img/back_4.jpg') top left/189px 471px no-repeat,#070605;
}
.login-module{
width:189px;height:180px;position:relative;overflow:hidden;
background:url('../img/login_frame_reference.jpg') top left/189px 180px no-repeat;
}
.login-gif{width:189px;height:65px;object-fit:cover;position:relative;z-index:3}
.login-frame-body{width:171px;min-height:105px;margin:0 auto;padding:5px 6px 7px;position:relative;z-index:4;background:rgba(7,5,4,.78)}
.time{color:#f0781d;font-size:8px;white-space:nowrap;margin-bottom:5px}
.login-form{position:relative;height:47px}
.login-form input{position:absolute;left:0;width:100px;height:20px;background:#070707;border:1px solid #514036;color:#ddd;padding:2px 5px;font-size:8px}
.login-form .user{top:0}.login-form .pass{top:23px}
.enter{position:absolute;right:0;top:0;width:53px;height:48px}
.code{margin:2px 0 5px;color:#8e8076;font-size:8px}
.code b{display:inline-block;margin-left:7px;color:#ddd;font-size:11px}
.login-frame-body a{display:block;margin:3px 0;color:#b4673e;font-size:8px}
.login-frame-body a strong{color:#d98435}
/* RANK */
.rank-module{width:189px;position:relative;margin-top:0}
.rank-gif{width:189px;height:65px;object-fit:cover}
.rank{width:189px;min-height:340px;padding:4px 5px 6px;background:url('../img/ranking_frame_user.jpg') top left/189px 340px no-repeat}
.r-title{height:19px;display:flex;align-items:center;padding:0 3px;color:#e58b24;font-size:8px;border-bottom:1px solid rgba(93,58,33,.45)}
.r-title span{margin-left:auto}
.r-row{height:17px;display:grid;grid-template-columns:19px 18px 1fr auto;align-items:center;padding:0 2px;font-size:8px}
.r-row em{font-style:normal;color:#e43b16}
.r-row i{font-style:normal}
.r-row b{font-size:9px}
.r-row.clan{grid-template-columns:19px 1fr}
.empty{height:18px;padding:4px 3px;color:#827a75;font-size:8px;white-space:nowrap;overflow:hidden}
@media(max-width:1004px){.viewport{margin-left:0;margin-right:0}}
/* Fine visual adjustment: lateral modules raised further */
.left,.right{position:relative;z-index:12}
.center{z-index:10}
/* Final reference alignment:
center starts after a ~103px overlap with Últimos Duelos;
side modules sit another 20px higher. */
.columns{position:relative;z-index:12}
.left,.right{position:relative;z-index:13}
.center{position:relative;z-index:12}
/* Personaje: debajo de Castle Siege, dentro del centro */
.castle-character{
width:472px;
min-height:285px;
margin:4px auto 0;
position:relative;
overflow:visible;
text-align:center;
}
.castle-character .cru-character{
display:block;
width:320px;
height:auto;
max-width:none;
margin:0 auto;
transform:translateY(36px);
object-fit:contain;
}
.castle-character .new-user-badge-link{
position:absolute;
left:calc(50% - 160px);
top:2px;
width:91px;
height:auto;
z-index:6;
display:block;
line-height:0;
cursor:pointer;
}
.castle-character .new-user-badge{
display:block;
width:91px;
height:auto;
z-index:5;
}
/* Top navigation: supplied original image buttons */
.top-nav-img{
position:absolute;
left:50%;
top:84px;
transform:translateX(-50%);
z-index:20;
height:24px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
white-space:nowrap;
}
.top-nav-img a{
display:block;
height:24px;
line-height:24px;
}
.top-nav-img img{
display:block;
height:24px;
width:auto;
max-width:none;
}
/* Red MENU buttons restored */
.menu-buttons{
width:150px;
position:absolute;
left:21px;
top:68px;
z-index:3;
}
.menu-buttons a{
display:block;
width:150px;
height:33px;
margin:5px 0;
}
.menu-buttons img{
display:block;
width:150px;
height:33px;
}
/* Small original buttons belong only in the top navigation bar */
.top-nav-img{
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:5px;
z-index:6;
height:24px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
white-space:nowrap;
}
.top-nav-img a,.top-nav-img img{
display:block;
height:24px;
width:auto;
}
/* Ajuste final de la barra horizontal superior */
/* FINAL: barra horizontal más abajo + botones dentro de la zona marrón */
.reference-header .top-nav-img a,
.reference-header .top-nav-img img{
display:block !important;
height:24px !important;
width:auto !important;
max-width:none !important;
}
/* BARRA HORIZONTAL — BAJADA A LA ALTURA DE LA REFERENCIA */
.reference-header{
position:relative !important;
}
.reference-header:after{
content:'';
position:absolute;
left:50%;
top:262px !important;
bottom:auto !important;
transform:translateX(-50%);
width:862px !important;
height:155px !important;
background:url('../img/menu_fondo.png') left top/862px 155px no-repeat !important;
z-index:20 !important;
}
.reference-header .top-nav-img{
position:absolute !important;
left:50% !important;
top:330px !important;
bottom:auto !important;
transform:translateX(-50%) !important;
z-index:31 !important;
height:24px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:9px !important;
white-space:nowrap !important;
}
.reference-header .top-nav-img a,
.reference-header .top-nav-img img{
display:block !important;
height:24px !important;
width:auto !important;
max-width:none !important;
}
/* Rank rows background supplied by user */
.rank-module{width:189px;position:relative;margin-top:0}
.rank-gif{width:189px;height:65px;object-fit:cover}
.rank{
width:189px;
min-height:340px;
padding:4px 5px 6px;
background:url('../img/rank_rows_bg.gif') left top/189px 88px repeat-y;
border-left:1px solid rgba(70,53,42,.9);
border-right:1px solid rgba(70,53,42,.9);
border-bottom:1px solid rgba(70,53,42,.9);
box-shadow:inset 0 0 10px rgba(0,0,0,.55);
}
.r-title{
height:19px;
display:flex;
align-items:center;
padding:0 3px;
color:#e58b24;
font-size:8px;
border-bottom:1px solid rgba(93,58,33,.45);
background:rgba(25,16,10,.28);
}
.r-title span{margin-left:auto;color:#c77c21}
.r-row{
height:17px;
display:grid;
grid-template-columns:19px 18px 1fr auto;
align-items:center;
padding:0 2px;
font-size:8px;
background:transparent;
}
.r-row em{font-style:normal;color:#e43b16}
.r-row i{font-style:normal}
.r-row b{font-size:9px}
.r-row.clan{grid-template-columns:19px 1fr auto}
.empty{
height:18px;
padding:4px 3px;
color:#827a75;
font-size:8px;
white-space:nowrap;
overflow:hidden;
background:transparent;
}
/* WebEngine path fix: primary Zupreme header */
.reference-header{
width:1004px;
height:414px;
background:url('../img/background-principal.jpg') left top/1004px 414px no-repeat !important;
position:relative;
}
/* =========================================================
RANKINGS — REFERENCE FRAME + WEBENGINE CONTROLS
========================================================= */
.rankings-page-module{
width:560px !important;
margin:0 auto !important;
position:relative !important;
color:#d6cbc2 !important;
}
.ranking-selector-reference{
width:560px;
height:187px;
margin:0 auto 16px;
position:relative;
background:url('../img/ranking_selector_reference.png') center top/560px 187px no-repeat;
}
.ranking-selector-controls{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
font-family:Arial,Helvetica,sans-serif;
}
.ranking-selector-controls label{
position:absolute;
left:184px;
top:39px;
color:#fff;
font-size:11px;
font-weight:bold;
text-shadow:1px 1px 2px #000;
}
.ranking-selector-controls select{
position:absolute;
left:294px;
top:35px;
width:180px;
height:29px;
border:2px solid #8e6427;
border-radius:4px;
background:#f3f3f3;
color:#111;
padding:2px 6px;
font-size:12px;
box-shadow:0 0 0 1px #1c1209, 0 0 7px rgba(0,0,0,.7);
}
.ranking-selector-controls button{
position:absolute;
left:181px;
top:99px;
width:198px;
height:38px;
border:1px solid #c98c25;
border-radius:3px;
background:linear-gradient(#1a0f05,#070504);
color:#ffd45d;
font:bold 15px Georgia,"Times New Roman",serif;
text-shadow:1px 1px 2px #000;
box-shadow:inset 0 0 0 2px #1f1208, 0 0 8px rgba(0,0,0,.55);
cursor:pointer;
}
.ranking-selector-controls button:hover{
color:#fff3c7;
border-color:#e4b04d;
}
/* Native WebEngine ranking menu */
.rankings-page-module .rankings_menu{
width:560px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:5px;
margin:0 auto 12px;
padding:6px;
border:1px solid #3e2d20;
background:#0b0907;
}
.rankings-page-module .rankings_menu a{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:82px;
height:26px;
padding:0 9px;
border:1px solid #65462d;
background:linear-gradient(#302016,#100c09);
color:#d8a15b;
text-decoration:none;
font:10px Georgia,"Times New Roman",serif;
}
.rankings-page-module .rankings_menu a.active{
border-color:#a97a40;
color:#fff0c5;
background:linear-gradient(#5b2b14,#1d0d07);
}
/* Class filter under the ranking selector */
.rankings-page-module .text-center{
width:560px;
margin:0 auto 12px;
text-align:center;
}
.rankings-page-module .rankings-class-filter{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:flex-start !important;
gap:8px !important;
width:560px !important;
margin:0 !important;
padding:8px 0 !important;
list-style:none !important;
}
.rankings-page-module .rankings-class-filter li{
width:70px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
.rankings-page-module .rankings-class-filter-selection{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
width:70px !important;
min-height:86px !important;
color:#c7b8ab !important;
font-size:8px !important;
text-decoration:none !important;
}
.rankings-page-module .rankings-class-filter-image{
display:block !important;
width:54px !important;
height:54px !important;
margin:0 auto 4px !important;
object-fit:cover !important;
border:1px solid #5b422f !important;
background:#090807 !important;
}
/* Ranking data table */
.rankings-page-module .rankings-table{
width:560px !important;
margin:10px auto 0 !important;
border-collapse:collapse !important;
background:rgba(7,6,5,.86) !important;
border:1px solid #3e2d20 !important;
color:#d2c7bf !important;
font-size:9px !important;
}
.rankings-page-module .rankings-table td{
padding:6px 7px !important;
border-bottom:1px solid #241a13 !important;
}
.rankings-page-module .rankings-table tr:first-child{
color:#dc9d52 !important;
background:linear-gradient(#21160e,#0c0907) !important;
}
.rankings-page-module .rankings-table tr:nth-child(even){
background:rgba(55,38,25,.18) !important;
}
.rankings-page-module .rankings-class-image{
width:42px !important;
height:42px !important;
object-fit:cover !important;
}
/* =========================================================
RANKING SELECTOR — compact dropdown only
========================================================= */
.rankings-page-module .ranking-selector-reference{
width:560px;
height:187px;
margin:0 auto 16px;
position:relative;
background:url('../img/ranking_selector_reference.png') center top/560px 187px no-repeat;
}
.rankings-page-module .ranking-selector-controls{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.rankings-page-module .ranking-selector-controls label{
position:absolute;
left:184px;
top:39px;
color:#fff;
font-size:11px;
font-weight:bold;
text-shadow:1px 1px 2px #000;
}
.rankings-page-module .ranking-selector-controls select{
position:absolute;
left:294px;
top:35px;
width:180px;
height:29px;
border:2px solid #8e6427;
border-radius:4px;
background:#f3f3f3;
color:#111;
padding:2px 6px;
font-size:12px;
box-shadow:0 0 0 1px #1c1209,0 0 7px rgba(0,0,0,.7);
}
.rankings-page-module .ranking-selector-controls button{
position:absolute;
left:181px;
top:99px;
width:198px;
height:38px;
border:1px solid #c98c25;
border-radius:3px;
background:linear-gradient(#1a0f05,#070504);
color:#ffd45d;
font:bold 15px Georgia,"Times New Roman",serif;
text-shadow:1px 1px 2px #000;
box-shadow:inset 0 0 0 2px #1f1208,0 0 8px rgba(0,0,0,.55);
cursor:pointer;
}
.rankings-page-module .ranking-selector-controls button:hover{
color:#fff3c7;
border-color:#e4b04d;
}
/* Do not show the giant class/avatar selector underneath.
The user requested a dropdown instead. */
.rankings-page-module .rankings-class-filter,
.rankings-page-module .rankings-class-filter + *,
.rankings-page-module .rankings_menu{
display:none !important;
}
/* Keep only the actual ranking results table below the selector. */
.rankings-page-module .rankings-table{
width:560px !important;
margin:0 auto !important;
border-collapse:collapse !important;
background:rgba(7,6,5,.86) !important;
border:1px solid #3e2d20 !important;
color:#d2c7bf !important;
font-size:9px !important;
}
.rankings-page-module .rankings-table td,
.rankings-page-module .rankings-table th{
padding:6px 7px !important;
border-bottom:1px solid #241a13 !important;
}
.rankings-page-module .rankings-table tr:first-child{
color:#dc9d52 !important;
background:linear-gradient(#21160e,#0c0907) !important;
}
.rankings-page-module .rankings-table tr:nth-child(even){
background:rgba(55,38,25,.18) !important;
}
/* Full Season 21 class selector */
.rankings-page-module .ranking-selector-controls select{
width:220px !important;
}
.rankings-page-module .ranking-selector-controls label{
left:150px !important;
}
.rankings-page-module .ranking-selector-controls button{
left:181px !important;
}
/* =========================================================
ZUPREME USERCP — REFERENCE DASHBOARD
========================================================= */
.center:has(.zupreme-usercp){
min-height:1200px !important;
}
.zupreme-usercp{
width:560px;
margin:34px auto 40px;
color:#cfc5bd;
font-size:9px;
}
.zupreme-usercp-head{
height:36px;
width:560px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 10px;
border:1px solid #4b3728;
background:linear-gradient(90deg,#21140c,#0a0806);
box-shadow:inset 0 0 12px rgba(0,0,0,.85);
}
.zupreme-usercp-account{
display:flex;
align-items:baseline;
gap:6px;
color:#dca45b;
}
.zupreme-usercp-account .label{
color:#7f6b5c;
font-size:8px;
}
.zupreme-usercp-account strong{
color:#eee2d5;
font-size:10px;
}
.zupreme-usercp-title{
color:#c58b47;
font:12px Georgia,"Times New Roman",serif;
text-shadow:1px 1px 2px #000;
}
.zupreme-ucp-tabs{
width:560px;
height:42px;
margin:10px 0 14px;
padding:5px 7px;
border:1px solid #583925;
background:url('../img/background_4.png') left center/560px 34px no-repeat, #170f09;
box-shadow:inset 0 0 12px rgba(0,0,0,.8);
}
.zupreme-ucp-nav-list{
height:30px;
margin:0;
padding:0;
list-style:none;
display:flex;
justify-content:center;
align-items:center;
gap:0;
}
.zupreme-ucp-nav-list li{
list-style:none;
margin:0;
padding:0;
}
.zupreme-ucp-nav-list li:not(:last-child)::after{
content:'•';
margin:0 8px;
color:#7b532d;
}
.zupreme-ucp-nav-list a{
color:#d7a15a;
font:11px Georgia,"Times New Roman",serif;
text-decoration:none;
text-shadow:1px 1px #000;
}
.zupreme-ucp-nav-list a:hover{
color:#fff0c8;
}
.zupreme-ucp-nav-list .zupreme-ucp-logout a{
color:#a95c38;
}
.zupreme-character-table-wrap{
width:560px;
overflow-x:auto;
padding:0 1px 3px;
}
.zupreme-character-table{
width:560px;
min-width:560px;
border-collapse:separate;
border-spacing:0;
border:1px solid #6b5137;
background:#070707;
box-shadow:0 0 0 2px #17110d, inset 0 0 12px rgba(0,0,0,.85);
table-layout:fixed;
}
.zupreme-label-col{width:92px;}
.zupreme-character-col{width:93.6px;}
.zupreme-character-table tr{
height:21px;
}
.zupreme-character-table th,
.zupreme-character-table td{
border-right:1px solid #2b1e16;
border-bottom:1px solid #211811;
padding:3px 5px;
line-height:14px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.zupreme-character-table th:last-child,
.zupreme-character-table td:last-child{
border-right:0;
}
.zupreme-field-label{
width:92px;
text-align:left;
color:#cabfb5;
background:#151515;
font-weight:bold;
}
.zupreme-character-cell{
text-align:center;
color:#d9d0c8;
background:#090909;
}
.zupreme-character-table tbody tr:nth-child(even) .zupreme-character-cell{
background:#101010;
}
.zupreme-character-table tbody tr:first-child th,
.zupreme-character-table tbody tr:first-child td{
color:#ead0ad;
background:linear-gradient(#34150d,#180b07);
font-weight:bold;
}
.zupreme-character-table tbody tr:nth-child(3) .zupreme-character-cell{
color:#dfbd76;
}
.zupreme-character-table td:nth-child(n+2){
font-size:9px;
}
.zupreme-divider-row{
height:4px !important;
background:#281a11;
}
.zupreme-divider-row td{
height:4px !important;
padding:0 !important;
border-bottom:1px solid #563e2a;
background:#140e0a !important;
}
.zupreme-gens-row{
height:88px !important;
}
.zupreme-gens-row th{
vertical-align:middle;
white-space:normal;
background:#121212;
}
.zupreme-gens-cell{
height:88px;
vertical-align:middle;
text-align:center;
background:#120f0d !important;
padding:0 !important;
}
.zupreme-gens-value{
min-height:54px;
display:flex;
align-items:center;
justify-content:center;
color:#d87f31;
font-size:16px;
border-bottom:1px solid #3b2a1e;
}
.zupreme-gens-cell span{
display:block;
padding:6px 3px;
color:#c46522;
font-weight:bold;
font-size:8px;
}
.zupreme-empty-cell{
color:#4f443c !important;
}
.zupreme-ucp-note{
width:560px;
margin:9px 0 0;
padding:7px 9px;
border:1px solid #36271d;
background:#0b0908;
color:#7f746c;
text-align:center;
}
/* Keep native UserCP submodules aligned to the same visual area. */
.webengine-module .page-title{
margin-left:auto;
margin-right:auto;
}
/* =========================================================
ZUPREME USERCP FINAL — REFERENCE LOOK
========================================================= */
.center:has(.zupreme-usercp-ref){
min-height:1100px !important;
}
.zupreme-usercp-ref{
width:560px;
margin:28px auto 40px;
color:#d4cbc4;
font-family:Arial,Helvetica,sans-serif;
font-size:9px;
}
.zupreme-ucp-titlebar{
width:560px;
min-height:38px;
display:flex;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
padding:5px 10px;
border:2px solid #443126;
background:linear-gradient(#281910,#0b0907);
box-shadow:inset 0 0 12px #000,0 0 0 1px #17110d;
}
.zupreme-ucp-user{
display:flex;
align-items:center;
gap:6px;
}
.zupreme-ucp-user span{
color:#8a7667;
font-size:8px;
}
.zupreme-ucp-user strong{
color:#ead6bb;
font-size:10px;
}
.zupreme-ucp-title{
color:#d39b55;
font:bold 12px Georgia,"Times New Roman",serif;
text-shadow:1px 1px #000;
}
.zupreme-ucp-nav{
width:540px;
min-height:30px;
margin:9px auto 12px;
padding:5px 9px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border:1px solid #66462c;
background:linear-gradient(#431b0f,#170b07);
box-shadow:inset 0 0 10px #000;
}
.zupreme-ucp-nav a{
color:#d8a161;
font:10px Georgia,"Times New Roman",serif;
text-decoration:none;
text-shadow:1px 1px #000;
}
.zupreme-ucp-nav a:hover{color:#fff0c9}
.zupreme-ucp-nav span{margin:0 9px;color:#82552d}
.zupreme-ucp-frame{
width:560px;
padding:6px;
box-sizing:border-box;
border:2px solid #5b4637;
background:#060606;
box-shadow:0 0 0 2px #17110d,inset 0 0 16px rgba(0,0,0,.9);
position:relative;
}
.zupreme-ucp-frame:before{
content:"";
position:absolute;
inset:3px;
border:1px solid #312319;
pointer-events:none;
}
.zupreme-ucp-caption{
width:100%;
height:25px;
box-sizing:border-box;
padding:6px 9px;
color:#d6a15d;
font:11px Georgia,"Times New Roman",serif;
text-shadow:1px 1px #000;
background:linear-gradient(90deg,#2b1910,#0b0907,#2b1910);
border-bottom:1px solid #503925;
}
.zupreme-ucp-table{
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:0;
background:#080808;
}
.zupreme-ucp-table col.label{width:84px}
.zupreme-ucp-table th,
.zupreme-ucp-table td{
box-sizing:border-box;
height:23px;
padding:4px 5px;
border-right:1px solid #282019;
border-bottom:1px solid #1e1711;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.zupreme-ucp-table th:last-child,
.zupreme-ucp-table td:last-child{border-right:0}
.zupreme-ucp-table .field{
text-align:left;
color:#c8bdb5;
background:#141414;
font-weight:bold;
}
.zupreme-ucp-table td{
text-align:center;
color:#d4cbc2;
background:#0a0a0a;
}
.zupreme-ucp-table tbody tr:nth-child(even) td{
background:#11100f;
}
.zupreme-ucp-table thead th{
height:73px;
vertical-align:middle;
background:linear-gradient(#31150e,#120b08);
color:#edd4b4;
border-bottom:1px solid #5d3c25;
}
.zupreme-ucp-table thead th.field{
vertical-align:bottom;
padding-bottom:8px;
}
.zupreme-ucp-table .char-head img{
width:48px;
height:48px;
display:block;
margin:0 auto 3px;
object-fit:cover;
border:1px solid #6e4c30;
}
.zupreme-ucp-table .char-head strong{
display:block;
color:#f0d5b7;
font-size:8px;
overflow:hidden;
text-overflow:ellipsis;
}
.empty-char{color:#665c55;font-size:8px}
.zupreme-ucp-table tbody tr:nth-child(1) td{color:#ddb06d}
.zupreme-ucp-table tbody tr:nth-child(5) td,
.zupreme-ucp-table tbody tr:nth-child(6) td,
.zupreme-ucp-table tbody tr:nth-child(7) td{
color:#e0c557;
}
.zupreme-ucp-table .gens-row{
height:89px;
}
.zupreme-ucp-table .gens-row .field{
vertical-align:middle;
white-space:normal;
}
.zupreme-ucp-table .gens-cell{
height:89px;
vertical-align:middle;
background:#12100e !important;
padding:4px !important;
}
.gens-cell img{
width:30px;
height:30px;
display:block;
object-fit:contain;
margin:0 auto 2px;
opacity:.95;
}
.gens-name{
color:#d98431;
font-size:9px;
}
.gens-cell span{
display:block;
margin-top:3px;
color:#c36322;
font-size:8px;
}
.gens-none{
color:#d74220;
font-size:12px;
line-height:17px;
}
.zupreme-ucp-actions{
width:560px;
margin:10px auto 0;
padding:7px;
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:5px;
border:1px solid #3e2e22;
background:#0a0908;
}
.zupreme-ucp-actions a{
display:block;
padding:5px 10px;
border:1px solid #5c402a;
background:linear-gradient(#2c1a10,#100b08);
color:#d2a064;
text-decoration:none;
font-size:8px;
}
.zupreme-ucp-actions a:hover{
color:#fff0c9;
border-color:#9d6b39;
}
@media(max-width:600px){
.zupreme-usercp-ref,
.zupreme-ucp-titlebar,
.zupreme-ucp-frame,
.zupreme-ucp-actions{width:100%}
.zupreme-ucp-table{min-width:560px}
.zupreme-ucp-frame{overflow-x:auto}
.zupreme-ucp-nav{width:100%}
}
/* =========================================================
USERCP FINAL — FORMAL FRAME / TABLE DESIGN
========================================================= */
.center:has(.zupreme-usercp){
min-height:1250px !important;
}
.zupreme-usercp{
width:560px !important;
margin:46px auto 70px !important;
position:relative;
box-sizing:border-box;
color:#d5cbc2 !important;
font-family:Arial,Helvetica,sans-serif;
}
/* Main framed card */
.zupreme-usercp > .zupreme-usercp-head{
width:560px !important;
height:58px !important;
box-sizing:border-box;
padding:8px 13px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
border:2px solid #5b4635 !important;
background:
linear-gradient(90deg,rgba(42,23,13,.97),rgba(7,7,7,.98) 52%,rgba(39,22,12,.96)),
url('../img/background_12.png') right center/600px 487px no-repeat !important;
box-shadow:
0 0 0 2px #17110c,
0 4px 12px rgba(0,0,0,.95),
inset 0 0 20px #000 !important;
}
.zupreme-usercp > .zupreme-usercp-head:before,
.zupreme-usercp > .zupreme-usercp-head:after{
content:"";
width:38px;
height:2px;
background:linear-gradient(90deg,transparent,#a9733d,transparent);
position:absolute;
top:27px;
}
.zupreme-usercp > .zupreme-usercp-head:before{left:5px}
.zupreme-usercp > .zupreme-usercp-head:after{right:5px}
.zupreme-usercp-account{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:1px !important;
}
.zupreme-usercp-account .label{
font-size:7px !important;
letter-spacing:1px !important;
color:#796a5d !important;
}
.zupreme-usercp-account strong{
font-size:11px !important;
color:#f0d8bb !important;
text-shadow:1px 1px 3px #000 !important;
}
.zupreme-usercp-title{
color:#e0aa68 !important;
font:bold 15px Georgia,"Times New Roman",serif !important;
text-transform:uppercase;
text-shadow:0 0 6px #000,1px 1px #000 !important;
}
.zupreme-ucp-tabs{
width:544px !important;
height:34px !important;
box-sizing:border-box;
margin:10px auto 12px !important;
padding:0 8px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid #63442b !important;
background:
linear-gradient(#3a1b0f,#120b07),
url('../img/background_5.png') center/100% 20px repeat-x !important;
box-shadow:inset 0 0 12px #000 !important;
}
.zupreme-ucp-nav-list{
width:100% !important;
height:30px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
.zupreme-ucp-nav-list li{
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
.zupreme-ucp-nav-list li:not(:last-child):after{
margin:0 10px !important;
color:#80542e !important;
}
.zupreme-ucp-nav-list a{
color:#dfaa68 !important;
font:10px Georgia,"Times New Roman",serif !important;
text-decoration:none !important;
}
.zupreme-ucp-nav-list a:hover{
color:#fff0ce !important;
}
.zupreme-character-table-wrap{
width:548px !important;
margin:0 auto !important;
padding:5px !important;
box-sizing:border-box;
border:3px solid #4a3a2d !important;
background:
linear-gradient(rgba(6,6,6,.85),rgba(5,5,5,.95)),
url('../img/background_12.png') right top/600px 487px no-repeat !important;
box-shadow:
0 0 0 2px #17110c,
0 0 18px rgba(0,0,0,.95),
inset 0 0 16px #000 !important;
position:relative;
}
.zupreme-character-table-wrap:before,
.zupreme-character-table-wrap:after{
content:"";
position:absolute;
left:8px;
right:8px;
height:1px;
background:linear-gradient(90deg,transparent,#805939,#c09258,#805939,transparent);
opacity:.65;
}
.zupreme-character-table-wrap:before{top:2px}
.zupreme-character-table-wrap:after{bottom:2px}
.zupreme-character-table{
width:536px !important;
min-width:536px !important;
margin:0 auto !important;
border:2px solid #6e5238 !important;
border-collapse:separate !important;
border-spacing:0 !important;
table-layout:fixed !important;
background:#070707 !important;
box-shadow:inset 0 0 14px #000 !important;
}
.zupreme-label-col,
.zupreme-label-col:first-child{width:80px !important}
.zupreme-character-col{width:91.2px !important}
.zupreme-character-table thead th{
height:89px !important;
padding:4px !important;
vertical-align:middle !important;
border-right:1px solid #493322 !important;
border-bottom:2px solid #68462c !important;
background:
linear-gradient(rgba(60,26,13,.93),rgba(15,9,6,.97)),
url('../img/background_12.png') right center/600px 487px no-repeat !important;
}
.zupreme-character-table thead th.field{
vertical-align:middle !important;
text-align:center !important;
color:#a88d75 !important;
font-size:8px !important;
letter-spacing:.4px;
}
.char-card{
width:100% !important;
height:80px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-end !important;
}
.char-avatar{
width:46px !important;
height:46px !important;
margin:0 auto 3px !important;
border:2px solid #61472f !important;
background:#020202 !important;
box-shadow:0 0 0 1px #1a120d,inset 0 0 8px #000 !important;
overflow:hidden !important;
border-radius:0 !important;
}
.char-avatar img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center top !important;
}
.char-card strong{
max-width:83px !important;
color:#f0d2ae !important;
font-size:8px !important;
line-height:10px !important;
text-align:center !important;
}
.char-card span{
max-width:83px !important;
color:#aa784c !important;
font-size:7px !important;
line-height:9px !important;
text-align:center !important;
}
.zupreme-character-table tbody th,
.zupreme-character-table tbody td{
height:24px !important;
padding:4px 5px !important;
box-sizing:border-box !important;
border-right:1px solid #2b2119 !important;
border-bottom:1px solid #211811 !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
.zupreme-character-table tbody .field{
color:#c6bbb2 !important;
font-weight:bold !important;
font-size:8px !important;
background:linear-gradient(90deg,#191919,#0f0f0f) !important;
text-align:left !important;
}
.zupreme-character-table tbody td{
color:#d8d0c9 !important;
font-size:8px !important;
text-align:center !important;
background:#080808 !important;
}
.zupreme-character-table tbody tr:nth-child(even) td{
background:#12110f !important;
}
.zupreme-character-table tbody tr:hover td{
background:#1a120c !important;
}
.zupreme-character-table tbody tr:first-child td{
color:#e3bd84 !important;
}
.zupreme-character-table tbody tr:nth-child(4) td,
.zupreme-character-table tbody tr:nth-child(5) td,
.zupreme-character-table tbody tr:nth-child(6) td{
color:#e0c65d !important;
}
.zupreme-divider-row{
display:none !important;
}
.zupreme-gens-row,
.zupreme-gens-row th,
.zupreme-gens-row td{
height:86px !important;
}
.zupreme-gens-row .field{
vertical-align:middle !important;
white-space:normal !important;
text-align:center !important;
}
.zupreme-gens-cell{
padding:4px !important;
background:
linear-gradient(rgba(27,18,12,.94),rgba(11,8,6,.98)),
url('../img/background_12.png') right center/600px 487px no-repeat !important;
vertical-align:middle !important;
}
.gens-none{
color:#e13e26 !important;
font-size:11px !important;
font-weight:bold !important;
}
.gens-medal{
width:28px !important;
height:28px !important;
margin:0 auto 3px !important;
border:1px solid #8c6235 !important;
color:#e4b76f !important;
background:radial-gradient(circle,#4c2a15,#0c0805 70%) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:12px !important;
}
.gens-name{
color:#e08b38 !important;
font-size:8px !important;
font-weight:bold !important;
}
.gens-cell span{
color:#9b5b2d !important;
font-size:7px !important;
}
.zupreme-ucp-actions{
width:544px !important;
box-sizing:border-box;
margin:10px auto 0 !important;
padding:6px !important;
display:grid !important;
grid-template-columns:repeat(6,1fr) !important;
gap:5px !important;
border:1px solid #483427 !important;
background:linear-gradient(#16100c,#090806) !important;
box-shadow:inset 0 0 10px #000 !important;
}
.zupreme-ucp-actions a{
min-height:40px !important;
box-sizing:border-box;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
border:1px solid #5a3e27 !important;
background:linear-gradient(#2b1a10,#100b08) !important;
color:#dda363 !important;
text-decoration:none !important;
}
.zupreme-ucp-actions a:hover{
background:linear-gradient(#432414,#170c07) !important;
border-color:#a1703d !important;
color:#fff1d1 !important;
}
.zupreme-ucp-actions b{font-size:7px !important;letter-spacing:.6px}
.zupreme-ucp-actions small{font-size:6px !important;color:#776960 !important;margin-top:2px}
.zupreme-ucp-note{
width:544px !important;
box-sizing:border-box;
margin:9px auto 0 !important;
padding:6px !important;
border:1px solid #3d2b1e !important;
background:#0a0908 !important;
color:#756960 !important;
text-align:center !important;
font-size:7px !important;
}
/* =========================================================
CHARACTER NAME — HOVER + CLICK
========================================================= */
.zupreme-character-name{
display:inline-block;
max-width:100%;
padding:2px 4px;
border:0;
background:transparent;
color:#e1b477;
font:inherit;
font-weight:bold;
cursor:pointer;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 2px #000;
transition:color .15s ease, text-shadow .15s ease, background .15s ease;
}
.zupreme-character-name:hover,
.zupreme-character-name.is-hovered{
color:#ffd98f;
background:rgba(112,62,24,.28);
text-shadow:0 0 5px rgba(224,160,79,.38),1px 1px 2px #000;
}
/* =========================================================
CHARACTER QUICK ACTIONS POPUP
========================================================= */
.zupreme-character-popup{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}
.zupreme-character-popup.is-open{
display:flex;
}
.zupreme-character-popup-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.64);
}
.zupreme-character-popup-box{
position:relative;
z-index:2;
width:340px;
padding:7px;
box-sizing:border-box;
border:2px solid #6d5037;
background:
linear-gradient(rgba(16,10,7,.96),rgba(5,5,5,.98)),
url('../img/background_12.png') right top/600px 487px no-repeat;
box-shadow:
0 0 0 2px #17100c,
0 12px 35px rgba(0,0,0,.95),
inset 0 0 18px #000;
}
.zupreme-character-popup-box:before{
content:"";
position:absolute;
inset:3px;
border:1px solid #3f2b1d;
pointer-events:none;
}
.zupreme-character-popup-close{
position:absolute;
right:7px;
top:5px;
width:22px;
height:22px;
z-index:5;
padding:0;
border:1px solid #5d402b;
background:#130b07;
color:#c9874b;
font:16px Georgia,"Times New Roman",serif;
line-height:18px;
cursor:pointer;
}
.zupreme-character-popup-close:hover{
color:#fff0c8;
border-color:#a6723f;
}
.zupreme-character-popup-head{
height:50px;
padding:7px 34px 6px 9px;
box-sizing:border-box;
border:1px solid #563d29;
background:linear-gradient(90deg,#2c160e,#0c0907,#25130c);
box-shadow:inset 0 0 10px #000;
}
.zupreme-character-popup-head span{
display:block;
color:#7f6b5c;
font-size:7px;
letter-spacing:1px;
}
.zupreme-character-popup-head strong{
display:block;
margin-top:3px;
color:#f0d0a5;
font:14px Georgia,"Times New Roman",serif;
text-shadow:1px 1px 2px #000;
}
.zupreme-character-popup-actions{
margin-top:7px;
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
}
.zupreme-character-popup-actions button{
min-height:32px;
padding:5px 7px;
border:1px solid #60432a;
background:linear-gradient(#2d1b11,#0d0907);
color:#d5a165;
font-size:8px;
font-weight:bold;
text-align:left;
cursor:pointer;
box-shadow:inset 0 0 7px rgba(0,0,0,.75);
}
.zupreme-character-popup-actions button:hover{
border-color:#a1703f;
background:linear-gradient(#4a2415,#160b07);
color:#fff0cf;
}
.zupreme-character-popup-note{
margin-top:7px;
padding:6px 7px;
border-top:1px solid #39281d;
color:#796c63;
font-size:7px;
text-align:center;
}
/* Give the main UCP table enough visual contrast that the clickable names
read as character selectors rather than loose text. */
.zupreme-character-table tbody tr:first-child td{
background:linear-gradient(#2a130b,#0f0a08) !important;
}
.zupreme-character-table tbody tr:first-child td:hover{
background:linear-gradient(#3b1d10,#140b08) !important;
}
/* =========================================================
FINAL CHARACTER CLICK MENU — FLOATING INSIDE USERCP
========================================================= */
.zupreme-character-popup{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
display:none !important;
z-index:9999 !important;
pointer-events:none !important;
}
.zupreme-character-popup.is-open{
display:block !important;
}
.zupreme-character-popup-box{
position:absolute !important;
left:8px;
top:8px;
width:300px !important;
padding:5px !important;
box-sizing:border-box;
border:1px solid #a00000 !important;
border-radius:0 !important;
background:#070707 !important;
box-shadow:
0 0 0 2px #17100c,
0 8px 20px rgba(0,0,0,.92),
inset 0 0 12px #000 !important;
pointer-events:auto !important;
}
.zupreme-character-popup-box:before{
content:"";
position:absolute;
left:0;
top:0;
right:0;
height:2px;
background:linear-gradient(90deg,#5d0000,#c13b21,#5d0000);
}
.zupreme-character-popup-close{
right:4px !important;
top:3px !important;
width:20px !important;
height:20px !important;
font-size:15px !important;
line-height:17px !important;
color:#cf8d55 !important;
background:#140b07 !important;
border:1px solid #68472f !important;
}
.zupreme-character-popup-head{
height:34px !important;
padding:5px 30px 4px 7px !important;
background:linear-gradient(90deg,#25140b,#0a0806) !important;
border:1px solid #463224 !important;
box-shadow:inset 0 0 8px #000 !important;
}
.zupreme-character-popup-head span{
font-size:6px !important;
color:#8d7461 !important;
letter-spacing:.8px !important;
}
.zupreme-character-popup-head strong{
margin-top:1px !important;
font-size:11px !important;
color:#eed2ab !important;
}
.zupreme-character-popup-actions{
display:flex !important;
flex-direction:column !important;
gap:2px !important;
margin-top:5px !important;
}
.zupreme-action-row{
min-height:24px;
display:grid;
grid-template-columns:132px 1fr;
align-items:center;
column-gap:4px;
}
.zupreme-action-row > span{
color:#e2f0ff;
font-size:8px;
font-weight:bold;
text-align:left;
padding-left:2px;
}
.zupreme-action-row > button{
justify-self:start;
min-width:90px;
height:20px;
padding:0 9px;
border:1px solid #555 !important;
border-radius:0 !important;
background:linear-gradient(#5a5a5a,#1e1e1e) !important;
color:#e5e5e5 !important;
font-size:8px !important;
font-weight:bold !important;
letter-spacing:.3px;
cursor:pointer;
box-shadow:inset 0 0 5px rgba(0,0,0,.8);
}
.zupreme-action-row > button:hover{
border-color:#9a6a3a !important;
color:#fff2cf !important;
background:linear-gradient(#6d4425,#23140c) !important;
}
.zupreme-action-row.vip{
grid-template-columns:132px 1fr;
}
.zupreme-action-row.vip b{
color:#f12a24;
font-size:8px;
font-weight:bold;
}
.zupreme-character-popup-note{
margin-top:4px !important;
padding:4px !important;
color:#766960 !important;
font-size:6px !important;
text-align:center !important;
border-top:1px solid #2d2118 !important;
}
@media(max-width:600px){
.zupreme-character-popup-box{
width:280px !important;
}
.zupreme-action-row{
grid-template-columns:120px 1fr;
}
.zupreme-action-row.vip{
grid-template-columns:120px 1fr;
}
}
/* ===== FUNCTIONAL USERCP ACTIONS ===== */
.zupreme-action-notice{
width:548px;
margin:0 auto 8px;
padding:8px 10px;
box-sizing:border-box;
border:1px solid #5a3d26;
background:#100b08;
box-shadow:inset 0 0 8px #000;
text-align:center;
font-size:8px;
}
.zupreme-action-notice.success{color:#aac974;border-color:#4a5b2b}
.zupreme-action-notice.error{color:#ef7954;border-color:#7a2e1e}
.zupreme-character-popup{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
display:none !important;
z-index:9999 !important;
pointer-events:none !important;
}
.zupreme-character-popup.is-open{
display:block !important;
}
.zupreme-character-popup-box{
position:absolute !important;
width:300px !important;
padding:5px !important;
box-sizing:border-box;
border:1px solid #a00000 !important;
border-radius:0 !important;
background:#070707 !important;
box-shadow:0 0 0 2px #17100c,0 8px 20px rgba(0,0,0,.92),inset 0 0 12px #000 !important;
pointer-events:auto !important;
}
.zupreme-character-popup-head{
height:34px !important;
padding:5px 30px 4px 7px !important;
}
.zupreme-character-popup-actions{
display:flex !important;
flex-direction:column !important;
gap:2px !important;
margin-top:5px !important;
}
.zupreme-action-row{
min-height:24px;
display:grid;
grid-template-columns:132px 1fr;
align-items:center;
column-gap:4px;
}
.zupreme-action-row > span{
color:#e2f0ff;
font-size:8px;
font-weight:bold;
}
.zupreme-action-row > button{
justify-self:start;
min-width:90px;
height:20px;
border:1px solid #555 !important;
border-radius:0 !important;
background:linear-gradient(#5a5a5a,#1e1e1e) !important;
color:#eee !important;
font-size:8px !important;
font-weight:bold !important;
cursor:pointer;
}
.zupreme-action-row > button:hover{
border-color:#a16f3b !important;
background:linear-gradient(#704525,#211209) !important;
}
.zupreme-stats-form{
margin-top:5px;
padding:6px;
box-sizing:border-box;
border:1px solid #463124;
background:#090807;
}
.zupreme-stats-title{
padding:5px;
border:1px solid #4a3423;
background:linear-gradient(#2b180e,#0e0907);
color:#dda363;
text-align:center;
font-size:8px;
}
.zupreme-stats-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:4px;
margin-top:6px;
}
.zupreme-stats-grid label{
color:#b9aaa0;
font-size:7px;
}
.zupreme-stats-grid input{
display:block;
width:100%;
height:23px;
box-sizing:border-box;
margin-top:2px;
border:1px solid #4b3829;
border-radius:0;
background:#050505;
color:#e1d8cf;
}
.zupreme-stats-grid label:last-child{grid-column:1 / span 2}
.zupreme-stats-buttons{
display:flex;
justify-content:center;
gap:5px;
margin-top:6px;
}
.zupreme-stats-buttons button{
min-width:95px;
height:24px;
border:1px solid #64462d;
border-radius:0;
background:linear-gradient(#382015,#100b08);
color:#dda363;
font-size:7px;
font-weight:bold;
cursor:pointer;
}
/* =========================================================
DEFINITIVE CHARACTER CLICK POPUP
========================================================= */
body.zupreme-popup-open{
overflow:hidden;
}
.zupreme-character-name{
display:inline-block !important;
position:relative !important;
z-index:30 !important;
cursor:pointer !important;
pointer-events:auto !important;
padding:2px 5px !important;
border:0 !important;
background:transparent !important;
color:#e3b16d !important;
text-decoration:none !important;
font-weight:bold !important;
text-shadow:1px 1px 2px #000 !important;
}
.zupreme-character-name:hover{
color:#fff0c8 !important;
background:rgba(118,61,24,.30) !important;
text-shadow:0 0 6px rgba(234,170,91,.55),1px 1px 2px #000 !important;
}
.zupreme-character-popup{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
display:none !important;
z-index:2147483646 !important;
pointer-events:none !important;
}
.zupreme-character-popup.is-open{
display:block !important;
pointer-events:auto !important;
}
.zupreme-character-popup-backdrop{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
background:rgba(0,0,0,.62) !important;
cursor:default !important;
}
.zupreme-character-popup-box{
position:absolute !important;
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
width:320px !important;
max-width:calc(100vw - 24px) !important;
box-sizing:border-box !important;
padding:5px !important;
border:2px solid #8d1a10 !important;
background:
linear-gradient(rgba(12,8,6,.98),rgba(4,4,4,.99)),
url('../img/background_12.png') right top/600px 487px no-repeat !important;
box-shadow:0 0 0 2px #120d09,0 12px 30px rgba(0,0,0,.95),inset 0 0 14px #000 !important;
}
.zupreme-character-popup-box:before{
content:"" !important;
position:absolute !important;
left:2px !important;
right:2px !important;
top:2px !important;
height:2px !important;
background:linear-gradient(90deg,#5d0805,#d15b31,#5d0805) !important;
}
.zupreme-character-popup-close{
position:absolute !important;
right:5px !important;
top:5px !important;
z-index:3 !important;
width:22px !important;
height:22px !important;
padding:0 !important;
border:1px solid #65432e !important;
background:#130b07 !important;
color:#d99a5c !important;
font:17px Georgia,"Times New Roman",serif !important;
line-height:19px !important;
cursor:pointer !important;
}
.zupreme-character-popup-close:hover{
color:#fff0c8 !important;
border-color:#a67442 !important;
}
.zupreme-character-popup-head{
height:36px !important;
box-sizing:border-box !important;
padding:6px 32px 5px 8px !important;
border:1px solid #51392a !important;
background:linear-gradient(90deg,#2b150d,#0c0806,#21120b) !important;
box-shadow:inset 0 0 8px #000 !important;
}
.zupreme-character-popup-head span{
display:block !important;
color:#8b7462 !important;
font-size:6px !important;
letter-spacing:1px !important;
}
.zupreme-character-popup-head strong{
display:block !important;
margin-top:1px !important;
color:#efd1aa !important;
font:12px Georgia,"Times New Roman",serif !important;
}
.zupreme-character-popup-actions{
display:flex !important;
flex-direction:column !important;
gap:2px !important;
margin-top:5px !important;
}
.zupreme-action-row{
min-height:25px !important;
display:grid !important;
grid-template-columns:135px 1fr !important;
align-items:center !important;
}
.zupreme-action-row > span{
color:#dbe9f7 !important;
font-size:8px !important;
font-weight:bold !important;
}
.zupreme-action-row > button{
justify-self:start !important;
min-width:90px !important;
height:21px !important;
padding:0 10px !important;
border:1px solid #5b5b5b !important;
border-radius:0 !important;
background:linear-gradient(#626262,#1d1d1d) !important;
color:#eeeeee !important;
font-size:8px !important;
font-weight:bold !important;
cursor:pointer !important;
box-shadow:inset 0 0 5px rgba(0,0,0,.75) !important;
}
.zupreme-action-row > button:hover{
border-color:#a16f3a !important;
background:linear-gradient(#734827,#21130a) !important;
color:#fff3d4 !important;
}
.zupreme-action-row.vip > button{
color:#ef8b57 !important;
}
.zupreme-character-popup-note{
margin-top:5px !important;
padding:4px !important;
border-top:1px solid #34251b !important;
color:#776b63 !important;
font-size:6px !important;
text-align:center !important;
}
.zupreme-stats-form{
margin-top:5px !important;
padding:6px !important;
border:1px solid #453224 !important;
background:#080706 !important;
}
/* UserCP route is handled by index.php only when page=usercp and no subpage. */
.center:has(.zupreme-usercp){
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* =========================================================
STABLE USERCP — ONLY CENTER COLUMN, NO HASH, NO JS
========================================================= */
.zupreme-ucp-stable{position:relative!important;width:560px!important;margin:26px auto 70px!important;z-index:50!important}
.zupreme-stable-name{display:inline-block!important;padding:3px 7px!important;color:#e5b56f!important;font:bold 9px Arial,sans-serif!important;cursor:pointer!important;text-shadow:1px 1px 2px #000!important;border:1px solid transparent!important;background:transparent!important}
.zupreme-stable-name:hover{color:#fff1cc!important;background:#27160e!important;border-color:#69472e!important}
.zupreme-stable-class{margin-top:2px!important;color:#c5b7aa!important;font-size:7px!important}
.zupreme-stable-toggle,.zupreme-stable-stage{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.zupreme-stable-popup{display:none!important;position:absolute!important;left:50%!important;top:115px!important;transform:translateX(-50%)!important;width:410px!important;z-index:300!important}
.zupreme-stable-toggle:checked + .zupreme-stable-popup{display:block!important}
.zupreme-stable-box{position:relative!important;width:410px!important;max-height:760px!important;overflow:auto!important;box-sizing:border-box!important;padding:6px!important;border:2px solid #75462c!important;background:linear-gradient(#160d08,#050505)!important;box-shadow:0 0 0 2px #15100c,0 14px 35px rgba(0,0,0,.96),inset 0 0 18px #000!important}
.zupreme-stable-close,.zupreme-stable-back{display:flex!important;align-items:center!important;justify-content:center!important;position:absolute!important;right:5px!important;top:5px!important;width:22px!important;height:22px!important;border:1px solid #70492f!important;background:#140c08!important;color:#dba065!important;text-decoration:none!important;font:16px Georgia,serif!important;cursor:pointer!important;z-index:5!important}
.zupreme-stable-head{height:40px!important;box-sizing:border-box!important;padding:6px 32px 4px 8px!important;border:1px solid #4d3627!important;background:linear-gradient(90deg,#2b170e,#0c0806,#24130b)!important}
.zupreme-stable-head span{display:block!important;color:#87705f!important;font-size:6px!important;letter-spacing:1px!important}
.zupreme-stable-head strong{display:block!important;margin-top:2px!important;color:#efd0a8!important;font:13px Georgia,serif!important}
.zupreme-stable-stage:checked ~ .zupreme-stable-module-menu{display:none!important}
.zupreme-stable-screen{display:none!important;position:relative!important;margin-top:6px!important;padding:6px!important;border:1px solid #4c3526!important;background:#080706!important}
/* General stage switching for all character indexes without :has(). */
.zupreme-stable-box > #zupremeStable-reset-0:checked ~ .zupreme-screen-reset{display:block!important}
.zupreme-stable-box > #zupremeStable-master-0:checked ~ .zupreme-screen-master{display:block!important}
.zupreme-stable-box > #zupremeStable-c4-0:checked ~ .zupreme-screen-c4{display:block!important}
.zupreme-stable-box > #zupremeStable-vipreset-0:checked ~ .zupreme-screen-vipreset{display:block!important}
.zupreme-stable-box > #zupremeStable-vipmaster-0:checked ~ .zupreme-screen-vipmaster{display:block!important}
.zupreme-stable-box > #zupremeStable-vipc4-0:checked ~ .zupreme-screen-vipc4{display:block!important}
.zupreme-stable-box > #zupremeStable-addstats-0:checked ~ .zupreme-screen-addstats{display:block!important}
.zupreme-stable-box > #zupremeStable-resetstats-0:checked ~ .zupreme-screen-resetstats{display:block!important}
.zupreme-stable-box > #zupremeStable-clearpk-0:checked ~ .zupreme-screen-clearpk{display:block!important}
.zupreme-stable-box > #zupremeStable-unstick-0:checked ~ .zupreme-screen-unstick{display:block!important}
.zupreme-stable-box > #zupremeStable-skill-0:checked ~ .zupreme-screen-skill{display:block!important}
.zupreme-stable-box > #zupremeStable-reset-1:checked ~ .zupreme-screen-reset{display:block!important}
.zupreme-stable-box > #zupremeStable-master-1:checked ~ .zupreme-screen-master{display:block!important}
.zupreme-stable-box > #zupremeStable-c4-1:checked ~ .zupreme-screen-c4{display:block!important}
.zupreme-stable-box > #zupremeStable-vipreset-1:checked ~ .zupreme-screen-vipreset{display:block!important}
.zupreme-stable-box > #zupremeStable-vipmaster-1:checked ~ .zupreme-screen-vipmaster{display:block!important}
.zupreme-stable-box > #zupremeStable-vipc4-1:checked ~ .zupreme-screen-vipc4{display:block!important}
.zupreme-stable-box > #zupremeStable-addstats-1:checked ~ .zupreme-screen-addstats{display:block!important}
.zupreme-stable-box > #zupremeStable-resetstats-1:checked ~ .zupreme-screen-resetstats{display:block!important}
.zupreme-stable-box > #zupremeStable-clearpk-1:checked ~ .zupreme-screen-clearpk{display:block!important}
.zupreme-stable-box > #zupremeStable-unstick-1:checked ~ .zupreme-screen-unstick{display:block!important}
.zupreme-stable-box > #zupremeStable-skill-1:checked ~ .zupreme-screen-skill{display:block!important}
.zupreme-stable-box > #zupremeStable-reset-2:checked ~ .zupreme-screen-reset{display:block!important}
.zupreme-stable-box > #zupremeStable-master-2:checked ~ .zupreme-screen-master{display:block!important}
.zupreme-stable-box > #zupremeStable-c4-2:checked ~ .zupreme-screen-c4{display:block!important}
.zupreme-stable-box > #zupremeStable-vipreset-2:checked ~ .zupreme-screen-vipreset{display:block!important}
.zupreme-stable-box > #zupremeStable-vipmaster-2:checked ~ .zupreme-screen-vipmaster{display:block!important}
.zupreme-stable-box > #zupremeStable-vipc4-2:checked ~ .zupreme-screen-vipc4{display:block!important}
.zupreme-stable-box > #zupremeStable-addstats-2:checked ~ .zupreme-screen-addstats{display:block!important}
.zupreme-stable-box > #zupremeStable-resetstats-2:checked ~ .zupreme-screen-resetstats{display:block!important}
.zupreme-stable-box > #zupremeStable-clearpk-2:checked ~ .zupreme-screen-clearpk{display:block!important}
.zupreme-stable-box > #zupremeStable-unstick-2:checked ~ .zupreme-screen-unstick{display:block!important}
.zupreme-stable-box > #zupremeStable-skill-2:checked ~ .zupreme-screen-skill{display:block!important}
.zupreme-stable-box > #zupremeStable-reset-3:checked ~ .zupreme-screen-reset{display:block!important}
.zupreme-stable-box > #zupremeStable-master-3:checked ~ .zupreme-screen-master{display:block!important}
.zupreme-stable-box > #zupremeStable-c4-3:checked ~ .zupreme-screen-c4{display:block!important}
.zupreme-stable-box > #zupremeStable-vipreset-3:checked ~ .zupreme-screen-vipreset{display:block!important}
.zupreme-stable-box > #zupremeStable-vipmaster-3:checked ~ .zupreme-screen-vipmaster{display:block!important}
.zupreme-stable-box > #zupremeStable-vipc4-3:checked ~ .zupreme-screen-vipc4{display:block!important}
.zupreme-stable-box > #zupremeStable-addstats-3:checked ~ .zupreme-screen-addstats{display:block!important}
.zupreme-stable-box > #zupremeStable-resetstats-3:checked ~ .zupreme-screen-resetstats{display:block!important}
.zupreme-stable-box > #zupremeStable-clearpk-3:checked ~ .zupreme-screen-clearpk{display:block!important}
.zupreme-stable-box > #zupremeStable-unstick-3:checked ~ .zupreme-screen-unstick{display:block!important}
.zupreme-stable-box > #zupremeStable-skill-3:checked ~ .zupreme-screen-skill{display:block!important}
.zupreme-stable-box > #zupremeStable-reset-4:checked ~ .zupreme-screen-reset{display:block!important}
.zupreme-stable-box > #zupremeStable-master-4:checked ~ .zupreme-screen-master{display:block!important}
.zupreme-stable-box > #zupremeStable-c4-4:checked ~ .zupreme-screen-c4{display:block!important}
.zupreme-stable-box > #zupremeStable-vipreset-4:checked ~ .zupreme-screen-vipreset{display:block!important}
.zupreme-stable-box > #zupremeStable-vipmaster-4:checked ~ .zupreme-screen-vipmaster{display:block!important}
.zupreme-stable-box > #zupremeStable-vipc4-4:checked ~ .zupreme-screen-vipc4{display:block!important}
.zupreme-stable-box > #zupremeStable-addstats-4:checked ~ .zupreme-screen-addstats{display:block!important}
.zupreme-stable-box > #zupremeStable-resetstats-4:checked ~ .zupreme-screen-resetstats{display:block!important}
.zupreme-stable-box > #zupremeStable-clearpk-4:checked ~ .zupreme-screen-clearpk{display:block!important}
.zupreme-stable-box > #zupremeStable-unstick-4:checked ~ .zupreme-screen-unstick{display:block!important}
.zupreme-stable-box > #zupremeStable-skill-4:checked ~ .zupreme-screen-skill{display:block!important}
.zupreme-stable-title{padding:7px 8px!important;border:1px solid #4a3424!important;background:linear-gradient(#2b180e,#0d0907)!important}
.zupreme-stable-title b{display:block!important;color:#e0aa68!important;font:10px Georgia,serif!important}
.zupreme-stable-title small{display:block!important;margin-top:2px!important;color:#786960!important;font-size:6px!important}
.zupreme-stable-module-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;margin-top:6px!important}
.zupreme-stable-module-menu{margin-top:6px!important;padding:6px!important;border:1px solid #4c3526!important;background:#080706!important}
.zupreme-stable-module{min-height:48px!important;display:grid!important;grid-template-columns:25px 1fr 12px!important;grid-template-rows:1fr auto!important;align-items:center!important;gap:0 5px!important;box-sizing:border-box!important;padding:5px!important;border:1px solid #37291f!important;background:linear-gradient(#18130f,#0a0908)!important;cursor:pointer!important}
.zupreme-stable-module:hover{border-color:#805a37!important;background:linear-gradient(#2a1a10,#100b08)!important}
.zupreme-stable-module.vip{border-color:#48271f!important}
.zupreme-stable-module .ico{grid-row:1/span 2!important;width:24px!important;height:24px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid #66462e!important;background:radial-gradient(circle,#4a2714,#0d0805)!important;color:#dfad67!important;font-size:11px!important}
.zupreme-stable-module b{color:#e8cea8!important;font-size:7px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.zupreme-stable-module small{grid-column:2!important;color:#786960!important;font-size:6px!important}
.zupreme-stable-module em{color:#a4784b!important;font-style:normal!important;text-align:center!important}
.zupreme-stable-module.vip em{color:#ea694a!important;font-size:8px!important}
.zupreme-stable-req{margin-top:6px!important;padding:3px!important;border:1px solid #2e241d!important;background:#090807!important}
.zupreme-stable-req>div{min-height:28px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:4px 7px!important;box-sizing:border-box!important;border-bottom:1px solid #211913!important;background:linear-gradient(90deg,#15120f,#0c0b09)!important}
.zupreme-stable-req>div:last-child{border-bottom:0!important}
.zupreme-stable-req span{color:#becbd8!important;font-size:8px!important;font-weight:bold!important}
.zupreme-stable-req b{color:#dfbd78!important;font-size:8px!important;text-align:right!important;max-width:65%!important}
.zupreme-stable-lock{margin-top:6px!important;padding:8px!important;border:1px solid #63382e!important;background:#120907!important;color:#e87551!important;text-align:center!important;font-size:7px!important}
.zupreme-stable-actions{margin-top:7px!important;display:flex!important;justify-content:center!important;gap:6px!important}
.zupreme-stable-actions label,.zupreme-stable-actions button{min-width:105px!important;height:28px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;border:1px solid #66472f!important;background:linear-gradient(#392217,#100b08)!important;color:#dda464!important;font-size:8px!important;font-weight:bold!important;cursor:pointer!important;text-decoration:none!important}
.zupreme-stable-actions button{border-color:#875536!important;color:#f0bd79!important}
.zupreme-stable-actions label:hover,.zupreme-stable-actions button:hover{color:#fff0d0!important;border-color:#a37543!important}
.zupreme-stats-grid-ref{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;margin-top:6px!important}
.zupreme-stats-grid-ref label{color:#b8aaa0!important;font-size:7px!important}
.zupreme-stats-grid-ref input{width:100%!important;height:24px!important;margin-top:2px!important;box-sizing:border-box!important;border:1px solid #4c382a!important;background:#050505!important;color:#e2dcd6!important}
.zupreme-stats-grid-ref label:last-child{grid-column:1/span 2!important}
.zupreme-stable-note{margin-top:5px!important;padding:4px!important;border-top:1px solid #2d2119!important;color:#6f645d!important;font-size:6px!important;text-align:center!important}
.zupreme-hidden-frame{position:absolute!important;left:-10000px!important;top:-10000px!important;width:1px!important;height:1px!important;border:0!important}
/* =========================================================
ZUPREME FOOTER
========================================================= */
.zupreme-site-footer{
width:100%;
min-height:62px;
box-sizing:border-box;
margin:0;
padding:16px 10px 13px;
border-top:1px solid #1d1a18;
background:#050505;
color:#b8a89c;
text-align:center;
font:12px Arial, Helvetica, sans-serif;
line-height:18px;
box-shadow:0 -2px 8px rgba(0,0,0,.55);
}
.zupreme-site-footer div:first-child{
color:#d0b6a1;
}
.zupreme-site-footer div:last-child{
color:#d09a45;
}
.zupreme-site-footer a{
color:#d09a45;
text-decoration:none;
}
.zupreme-site-footer a:hover{
color:#f2c27a;
text-decoration:underline;
}
/* =========================================================
LINKS — ONLY WHATSAPP + FACEBOOK
========================================================= */
.links-module{
width:192px;
height:200px;
margin-top:15px;
overflow:hidden;
position:relative;
background:url('../img/links_frame_user.jpg') left top/192px 200px no-repeat;
}
.links-gif{
width:192px;
height:65px;
object-fit:cover;
position:relative;
z-index:3;
}
.links-body{
width:174px;
min-height:80px;
margin:0 auto;
padding:7px 5px;
box-sizing:border-box;
color:#c6bbb4;
position:relative;
z-index:4;
font:8px Arial, Helvetica, sans-serif;
}
.links-body .social-link{
height:24px;
display:flex;
align-items:center;
gap:4px;
box-sizing:border-box;
padding:2px 5px 2px 2px;
border-bottom:1px solid rgba(83,57,38,.45);
background:rgba(10,8,7,.25);
color:#c9bdb5;
text-decoration:none;
font:8px Arial, Helvetica, sans-serif;
}
.links-body .social-link:hover{
color:#e2a865;
background:rgba(43,28,18,.45);
}
.links-body .social-link img{
width:20px !important;
height:20px !important;
margin:0 !important;
object-fit:contain;
vertical-align:middle;
}
.links-body .social-arrow{
width:10px;
height:13px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
background:#b5642c;
color:#fff0d4;
font:bold 11px Arial, Helvetica, sans-serif;
line-height:13px;
}
.links-body .social-link span:last-child{
color:#d1c3b9;
font:8px Arial, Helvetica, sans-serif;
text-shadow:1px 1px #000;
}
/* =========================================================
RANK — SUPPLIED POINT IMAGE + ORDERED 1 / 2 / 3
========================================================= */
.rank{
width:189px;
min-height:340px;
padding:4px 5px 6px;
box-sizing:border-box;
background:url('../img/ranking_frame_user.jpg') top left/189px 340px no-repeat;
font-family:Arial, Helvetica, sans-serif;
}
.r-title{
height:19px;
display:flex;
align-items:center;
padding:0 3px;
color:#e58b24;
font:8px Arial, Helvetica, sans-serif;
text-shadow:1px 1px #000;
border-bottom:1px solid rgba(93,58,33,.45);
}
.r-row{
height:17px;
display:grid;
grid-template-columns:34px 18px 1fr auto;
align-items:center;
padding:0 2px;
font:8px Arial, Helvetica, sans-serif;
}
.r-row em{
font:normal 8px Arial, Helvetica, sans-serif;
color:#e43b16;
}
.r-row b{
font-size:9px;
line-height:1;
}
.r-row i{
font:normal 8px Arial, Helvetica, sans-serif;
color:#ded1c8;
}
.rank-position{
display:flex;
align-items:center;
gap:3px;
width:32px;
}
.rank-position img{
width:9px !important;
height:8px !important;
object-fit:contain;
flex:0 0 auto;
}
.r-row.clan{
grid-template-columns:34px 1fr auto;
}
.r-row.clan .rank-position{
width:32px;
}
.empty{
height:18px;
padding:4px 3px;
color:#827a75;
font:8px Arial, Helvetica, sans-serif;
white-space:nowrap;
overflow:hidden;
text-shadow:1px 1px #000;
}
/* =========================================================
RANKING PAGE — LOWER THE REFERENCE IMAGE
========================================================= */
.rankings-page-module{
padding-top:82px !important;
}
.rankings-page-module .ranking-selector-reference{
margin-top:0 !important;
}
/* =========================================================
RANK — POINT ICON FIX, MATCHING THE REFERENCE
The supplied 40x36 asset is intentionally rendered as a
tiny 11x10 marker so it does not overlap the rank text.
========================================================= */
.rank-module,
.rank-module .rank,
.rank-module .r-title,
.rank-module .r-row,
.rank-module .empty{
font-family:Arial, Helvetica, sans-serif !important;
}
.rank-module .rank{
width:189px !important;
min-height:340px !important;
padding:4px 5px 6px !important;
box-sizing:border-box !important;
}
.rank-module .r-title{
height:19px !important;
line-height:19px !important;
padding:0 3px !important;
font-size:8px !important;
white-space:nowrap !important;
}
.rank-module .r-row{
height:17px !important;
min-height:17px !important;
display:grid !important;
grid-template-columns:32px 18px minmax(0,1fr) auto !important;
align-items:center !important;
box-sizing:border-box !important;
padding:0 2px !important;
margin:0 !important;
font-size:8px !important;
line-height:17px !important;
overflow:hidden !important;
}
.rank-module .r-row.clan{
grid-template-columns:32px minmax(0,1fr) auto !important;
}
.rank-module .rank-position{
width:30px !important;
height:17px !important;
display:flex !important;
align-items:center !important;
gap:3px !important;
overflow:hidden !important;
}
.rank-module .rank-position img{
display:block !important;
width:11px !important;
height:10px !important;
min-width:11px !important;
min-height:10px !important;
max-width:11px !important;
max-height:10px !important;
object-fit:contain !important;
object-position:center !important;
margin:0 !important;
padding:0 !important;
flex:0 0 11px !important;
vertical-align:middle !important;
}
.rank-module .rank-position i{
display:block !important;
width:10px !important;
font:normal 8px/17px Arial, Helvetica, sans-serif !important;
color:#ddd2ca !important;
text-align:left !important;
}
.rank-module .r-row>b{
display:block !important;
width:18px !important;
font:normal 9px/17px Arial, Helvetica, sans-serif !important;
overflow:hidden !important;
}
.rank-module .r-row>span:not(.rank-position){
display:block !important;
min-width:0 !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font:normal 8px/17px Arial, Helvetica, sans-serif !important;
}
.rank-module .r-row>em{
display:block !important;
font:normal 8px/17px Arial, Helvetica, sans-serif !important;
color:#e43b16 !important;
white-space:nowrap !important;
text-align:right !important;
}
.rank-module .empty{
height:18px !important;
line-height:18px !important;
padding:0 3px !important;
box-sizing:border-box !important;
font-size:8px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.rank-module .rank-point-icon{
width:11px !important;
height:10px !important;
min-width:11px !important;
min-height:10px !important;
max-width:11px !important;
max-height:10px !important;
}
/* =========================================================
RANK LIMPIO — SIN NOMBRES NI VALORES A LA DERECHA
Mantiene punto + posición + bandera.
========================================================= */
.rank-module .rank-clean-row{
grid-template-columns:32px 16px minmax(0,1fr) !important;
justify-content:start !important;
width:100% !important;
gap:0 !important;
}
.rank-module .rank-clean-row > em{
display:none !important;
}
.rank-module .rank-clean-row .rank-position{
grid-column:1 !important;
}
.rank-module .rank-clean-row > b{
display:none !important;
}
.rank-module .rank-clean-row .rank-country-flag{
grid-column:2 !important;
display:block !important;
width:13px !important;
height:9px !important;
min-width:13px !important;
max-width:13px !important;
object-fit:cover !important;
object-position:center !important;
margin:0 !important;
padding:0 !important;
align-self:center !important;
}
.rank-module .rank-clean-row .rank-character-name{
grid-column:3 !important;
display:block !important;
min-width:0 !important;
max-width:100% !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
color:#ddd2ca !important;
font:normal 8px/17px Arial, Helvetica, sans-serif !important;
padding-left:3px !important;
}
.rank-module .rank-clean-row .rank-no-name{
color:#777 !important;
}
.rank-module .rank-clean-row.rank-empty-row{
opacity:.55 !important;
}
/* Ranking selector result message */
.rankings-page-module .zupreme-no-class-result{
width:560px;
box-sizing:border-box;
margin:10px auto 0;
padding:9px 12px;
border:1px solid #4a3320;
background:rgba(8,6,5,.9);
color:#d58a39;
font:10px Arial,Helvetica,sans-serif;
text-align:center;
}
/* =========================================================
RANKING SELECTOR — MAKE THE BUTTON/FORM CLICKABLE
========================================================= */
.rankings-page-module .ranking-selector-controls{
z-index:50 !important;
pointer-events:auto !important;
}
.rankings-page-module .ranking-selector-controls select,
.rankings-page-module .ranking-selector-controls button{
z-index:60 !important;
pointer-events:auto !important;
}
.rankings-page-module .ranking-selector-controls button{
cursor:pointer !important;
}
/* =========================================================
RANKING SELECTOR — hide any native WebEngine class selector
that may still be injected by the rankings module. Keep only
the custom selector created by this template.
========================================================= */
.rankings-page-module select:not(#zupremeRankingSelect),
.rankings-page-module .rankings-class-filter,
.rankings-page-module .rankings-class-filter-selection,
.rankings-page-module .rankings-class-filter + select,
.rankings-page-module .rankings-class-filter + * select{
display:none !important;
visibility:hidden !important;
}
/* Make the custom selector frame sit above any leftover native control. */
.rankings-page-module .ranking-selector-reference{
position:relative !important;
z-index:100 !important;
}
.rankings-page-module .ranking-selector-controls{
z-index:110 !important;
}
/* Sidebar Top 3: keep flag + name visible and aligned. */
.rank-module .rank-clean-row{
grid-template-columns:34px 18px minmax(0,1fr) !important;
column-gap:0 !important;
overflow:hidden !important;
}
.rank-module .rank-country-flag{
display:block !important;
width:13px !important;
height:10px !important;
object-fit:cover !important;
margin:0 !important;
}
.rank-module .rank-character-name{
display:block !important;
min-width:0 !important;
max-width:122px !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
color:#e4d8cf !important;
font:8px Arial,Helvetica,sans-serif !important;
line-height:12px !important;
text-shadow:1px 1px #000 !important;
}
/* =========================================================
AJUSTE FINAL LOGIN + SIDE-RIGHT
side-right queda arriba/detras; LOGIN baja ligeramente.
========================================================= */
.right{
position:relative !important;
background:
url('../img/side-right.jpg') top left/189px 471px no-repeat,
url('../img/back_4.jpg') top left/189px 471px no-repeat,
#070605 !important;
}
/* LOGIN baja sin alterar su tamaño ni su diseño */
.right .login-module{
margin-top:40px !important;
position:relative !important;
z-index:5 !important;
}
/* side-right permanece por detrás y su parte superior queda
claramente visible antes de comenzar LOGIN */
.right::before{
content:'' !important;
position:absolute !important;
left:0 !important;
top:0 !important;
width:189px !important;
height:471px !important;
background:url('../img/side-right.jpg') top left/189px 471px no-repeat !important;
z-index:1 !important;
pointer-events:none !important;
}
.right .login-module,
.right .rank-module{
z-index:5 !important;
}
/* SOLO 2 CAMBIOS SOLICITADOS */
/* 1. Bajar la seccion NOTICIAS */
.panel-news{
margin-top:120px !important;
}
/* 2. Colocar entrar.png en el boton ENTRAR, sin deformarlo */
.login-form .enter{
width:59px !important;
height:60px !important;
background:url('../img/entrar.png') center center/59px 60px no-repeat !important;
background-color:transparent !important;
border:0 !important;
padding:0 !important;
color:transparent !important;
font-size:0 !important;
text-indent:-9999px !important;
cursor:pointer !important;
}
/* =========================================================
RANK — AJUSTE VISUAL SEGUN REFERENCIA
Solo modifica el modulo RANK.
========================================================= */
.rank-module .rank{
width:189px !important;
min-height:340px !important;
padding:5px 5px 6px !important;
box-sizing:border-box !important;
background:url('../img/background_ranking.jpg') top left/189px 340px no-repeat !important;
font-family:Arial,Helvetica,sans-serif !important;
overflow:hidden !important;
}
.rank-module .r-title{
height:24px !important;
display:flex !important;
align-items:center !important;
padding:0 3px !important;
box-sizing:border-box !important;
color:#ff9b18 !important;
font:bold 9px/24px Arial,Helvetica,sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
border-bottom:1px solid rgba(111,72,40,.75) !important;
background:rgba(17,11,7,.72) !important;
}
.rank-module .r-title span{
margin-left:auto !important;
width:14px !important;
height:14px !important;
line-height:12px !important;
text-align:center !important;
color:#ff9b18 !important;
font:bold 13px/12px Arial,Helvetica,sans-serif !important;
border:1px solid #c87818 !important;
background:#120b07 !important;
border-radius:2px !important;
text-shadow:none !important;
}
.rank-module .r-row{
height:17px !important;
display:grid !important;
align-items:center !important;
padding:0 2px !important;
box-sizing:border-box !important;
background:rgba(12,10,8,.58) !important;
border-bottom:1px solid rgba(67,50,37,.65) !important;
font:8px/17px Arial,Helvetica,sans-serif !important;
}
.rank-module .r-row em{
color:#f02b18 !important;
font:bold 8px/17px Arial,Helvetica,sans-serif !important;
text-shadow:1px 1px 1px #000 !important;
}
.rank-module .r-row i{
color:#e6ded8 !important;
font:normal 8px/17px Arial,Helvetica,sans-serif !important;
}
.rank-module .rank-point-icon{
filter:hue-rotate(-25deg) saturate(1.8) brightness(.95) !important;
}
.rank-module .rank-character-name{
color:#e7dfd8 !important;
font:8px/17px Arial,Helvetica,sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
}
.rank-module .rank-country-flag{
width:13px !important;
height:9px !important;
object-fit:cover !important;
}
.rank-module .empty{
height:24px !important;
padding:5px 3px !important;
box-sizing:border-box !important;
color:#9c938c !important;
font:8px/14px Arial,Helvetica,sans-serif !important;
background:rgba(10,8,7,.52) !important;
border-bottom:1px solid rgba(67,50,37,.65) !important;
text-shadow:1px 1px 2px #000 !important;
}
/* SOLO: mostrar los PUNTOS/VALORES rojos en el RANK */
.rank-module .rank-clean-row{
grid-template-columns:34px 18px minmax(0,1fr) 42px !important;
column-gap:0 !important;
overflow:hidden !important;
}
.rank-module .rank-clean-row > b{
display:block !important;
grid-column:4 !important;
width:42px !important;
min-width:42px !important;
max-width:42px !important;
padding:0 2px !important;
box-sizing:border-box !important;
color:#f02b18 !important;
font:bold 8px/17px Arial,Helvetica,sans-serif !important;
text-align:right !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:clip !important;
text-shadow:1px 1px 1px #000 !important;
}
.rank-module .rank-clean-row .rank-character-name{
grid-column:3 !important;
max-width:none !important;
}
/* SOLO: mostrar los puntos de los TOPS a la derecha */
.rank-module .rank-clean-row > em{
display:block !important;
grid-column:4 !important;
width:42px !important;
min-width:42px !important;
max-width:42px !important;
padding:0 2px !important;
box-sizing:border-box !important;
color:#f02b18 !important;
font:bold 8px/17px Arial,Helvetica,sans-serif !important;
text-align:right !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
text-shadow:1px 1px 1px #000 !important;
}
/* SOLO: mostrar los NUMEROS de los TOP 1, 2 y 3 */
.rank-module .rank-clean-row{
grid-template-columns:34px 18px minmax(0,1fr) 42px !important;
overflow:visible !important;
}
.rank-module .rank-clean-row > b,
.rank-module .rank-clean-row > em,
.rank-module .rank-clean-row > span:not(.rank-position):not(.rank-character-name):not(.rank-country-flag){
grid-column:4 !important;
display:block !important;
width:42px !important;
min-width:42px !important;
max-width:42px !important;
height:17px !important;
margin:0 !important;
padding:0 2px !important;
box-sizing:border-box !important;
color:#f02b18 !important;
font:bold 8px/17px Arial,Helvetica,sans-serif !important;
text-align:right !important;
white-space:nowrap !important;
overflow:visible !important;
visibility:visible !important;
opacity:1 !important;
text-shadow:1px 1px 1px #000 !important;
z-index:20 !important;
}
/* SOLO: mostrar los VALORES DE PUNTOS reales de cada TOP a la derecha */
.rank-module .rank-clean-row{
position:relative !important;
padding-right:45px !important;
box-sizing:border-box !important;
}
.rank-module .rank-clean-row > *:last-child{
display:block !important;
position:absolute !important;
right:2px !important;
top:0 !important;
width:42px !important;
height:17px !important;
line-height:17px !important;
color:#f02b18 !important;
font:bold 8px/17px Arial,Helvetica,sans-serif !important;
text-align:right !important;
white-space:nowrap !important;
overflow:visible !important;
visibility:visible !important;
opacity:1 !important;
z-index:30 !important;
text-shadow:1px 1px 1px #000 !important;
}
.rank-module .rank-clean-row .rank-character-name{
padding-right:2px !important;
}
/* CORRECCION FINAL — solo mostrar los numeros de puntos sin mover los nombres */
.rank-module .rank-clean-row{
position:relative !important;
grid-template-columns:34px 18px minmax(0,1fr) !important;
padding-right:2px !important;
overflow:visible !important;
}
.rank-module .rank-clean-row .rank-character-name{
grid-column:3 !important;
position:relative !important;
max-width:100% !important;
padding-right:0 !important;
}
.rank-module .rank-clean-row > em{
display:block !important;
position:absolute !important;
right:2px !important;
top:0 !important;
grid-column:auto !important;
width:42px !important;
min-width:42px !important;
max-width:42px !important;
height:17px !important;
margin:0 !important;
padding:0 2px !important;
box-sizing:border-box !important;
color:#f02b18 !important;
font:bold 8px/17px Arial,Helvetica,sans-serif !important;
text-align:right !important;
white-space:nowrap !important;
overflow:visible !important;
visibility:visible !important;
opacity:1 !important;
z-index:30 !important;
text-shadow:1px 1px 1px #000 !important;
}
/* SOLO: mostrar los numeros de puntos sin mover los nombres */
.rank-module .rank-clean-row{
position:relative !important;
overflow:visible !important;
}
.rank-module .rank-clean-row .rank-character-score{
position:absolute !important;
right:2px !important;
top:0 !important;
width:44px !important;
height:17px !important;
line-height:17px !important;
display:block !important;
color:#f02b18 !important;
font:bold 8px/17px Arial,Helvetica,sans-serif !important;
text-align:right !important;
white-space:nowrap !important;
overflow:visible !important;
z-index:100 !important;
text-shadow:1px 1px 1px #000 !important;
pointer-events:none !important;
}
/* =========================================================
TIPOGRAFIA MEJORADA — ajuste visual general
========================================================= */
body, input, button, select, textarea{
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif !important;
}
.panel-title, .panel-body, .login-frame-body, .links-body,
.news-item, .event-item, .footer, .menu, .content, .center, .right, .left{
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif;
}
/* RANK — letras un poco mas grandes y legibles */
.rank-module .r-title{
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif !important;
font-size:10px !important;
font-weight:700 !important;
}
.rank-module .r-row{
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif !important;
font-size:9px !important;
line-height:18px !important;
height:18px !important;
min-height:18px !important;
}
.rank-module .r-row em,
.rank-module .r-row i{
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif !important;
font-size:9px !important;
line-height:18px !important;
}
.rank-module .rank-character-name{
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif !important;
font-size:9px !important;
line-height:18px !important;
}
.rank-module .rank-position{
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif !important;
font-size:9px !important;
}
.rank-module .empty{
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif !important;
font-size:9px !important;
}
.rank-module .rank-clean-row > em,
.rank-module .rank-clean-row > span:not(.rank-position):not(.rank-character-name):not(.rank-country-flag){
font-family:"Segoe UI",Tahoma,Arial,Helvetica,sans-serif !important;
font-size:9px !important;
}
/* =========================================================
REGISTER — DISEÑO VISUAL
SOLO afecta al formulario nativo de WebEngine /register/
No modifica otros formularios de la plantilla.
========================================================= */
body:has(#webengineRegistration1) .webengine-module{
width:560px;
margin:0 auto;
padding:0 0 28px;
color:#c9c0b9;
}
body:has(#webengineRegistration1) .webengine-module .page-title{
width:560px;
height:48px;
margin:0 0 14px;
padding:13px 18px 0;
text-align:center;
color:#e6a34d;
background:
linear-gradient(180deg,rgba(55,25,8,.92),rgba(9,7,6,.96)),
url('../img/background_7.png') center/560px 34px no-repeat;
border:1px solid #70431f;
border-bottom:2px solid #b66a2a;
box-shadow:0 0 14px rgba(0,0,0,.8),inset 0 0 18px rgba(0,0,0,.65);
font:700 19px/20px Georgia,"Times New Roman",serif;
letter-spacing:.7px;
text-shadow:2px 2px 3px #000,0 0 7px rgba(225,137,47,.18);
}
body:has(#webengineRegistration1) .webengine-module form.form-horizontal{
position:relative;
width:560px;
margin:0 auto;
padding:22px 28px 20px;
background:
radial-gradient(circle at 50% 0%,rgba(126,62,18,.16),transparent 42%),
linear-gradient(180deg,rgba(10,9,8,.97),rgba(3,3,3,.94));
border:1px solid #4d3827;
box-shadow:
0 0 22px rgba(0,0,0,.9),
inset 0 0 28px rgba(0,0,0,.75),
inset 0 1px rgba(255,190,91,.08);
}
body:has(#webengineRegistration1) .webengine-module form.form-horizontal:before{
content:"CREA TU CUENTA";
display:block;
margin:0 0 20px;
padding-bottom:9px;
color:#d99845;
border-bottom:1px solid rgba(139,82,35,.55);
text-align:center;
font:700 15px/18px Georgia,"Times New Roman",serif;
letter-spacing:1.2px;
text-shadow:1px 1px 2px #000;
}
body:has(#webengineRegistration1) .webengine-module .form-group{
display:flex;
align-items:flex-start;
margin:0 0 14px;
padding:0;
}
body:has(#webengineRegistration1) .webengine-module .form-group:last-child{
margin-bottom:0;
}
body:has(#webengineRegistration1) .webengine-module .form-group > .control-label{
width:145px;
flex:0 0 145px;
margin:0;
padding:8px 13px 0 0;
color:#d5cbc2;
text-align:right;
font:700 11px/15px Arial,Helvetica,sans-serif;
text-shadow:1px 1px 2px #000;
}
body:has(#webengineRegistration1) .webengine-module .form-group > .col-sm-8,
body:has(#webengineRegistration1) .webengine-module .form-group > .col-sm-offset-4{
width:auto;
flex:1 1 auto;
margin:0;
padding:0;
}
body:has(#webengineRegistration1) .webengine-module #webengineRegistration1,
body:has(#webengineRegistration1) .webengine-module #webengineRegistration2,
body:has(#webengineRegistration1) .webengine-module #webengineRegistration3,
body:has(#webengineRegistration1) .webengine-module #webengineRegistration4{
display:block;
width:100%;
height:34px;
padding:7px 10px;
color:#eee6df;
background:linear-gradient(180deg,#16120f,#080706);
border:1px solid #493629;
border-radius:2px;
outline:none;
box-shadow:inset 0 2px 7px rgba(0,0,0,.75),0 0 0 rgba(218,132,49,0);
font:11px Arial,Helvetica,sans-serif;
transition:border-color .18s ease,box-shadow .18s ease;
}
body:has(#webengineRegistration1) .webengine-module #webengineRegistration1:focus,
body:has(#webengineRegistration1) .webengine-module #webengineRegistration2:focus,
body:has(#webengineRegistration1) .webengine-module #webengineRegistration3:focus,
body:has(#webengineRegistration1) .webengine-module #webengineRegistration4:focus{
border-color:#b36b2c;
box-shadow:inset 0 2px 7px rgba(0,0,0,.75),0 0 7px rgba(204,112,35,.2);
}
body:has(#webengineRegistration1) .webengine-module .help-block{
display:block;
margin:5px 0 0;
color:#776e67;
font:9px/12px Arial,Helvetica,sans-serif;
}
body:has(#webengineRegistration1) .webengine-module .form-group:nth-last-child(2){
margin-top:3px;
padding:10px 0 2px 145px;
border-top:1px solid rgba(92,58,35,.38);
}
body:has(#webengineRegistration1) .webengine-module .form-group:nth-last-child(2) .col-sm-offset-4{
color:#82766d;
font:9px/14px Arial,Helvetica,sans-serif;
}
body:has(#webengineRegistration1) .webengine-module .form-group:nth-last-child(2) a{
color:#c77b31;
text-decoration:underline;
}
body:has(#webengineRegistration1) .webengine-module .form-group:last-child{
justify-content:flex-end;
padding:5px 0 0 145px;
}
body:has(#webengineRegistration1) .webengine-module button[name="webengineRegister_submit"]{
min-width:170px;
height:38px;
padding:0 20px;
color:#f7eadc;
background:linear-gradient(180deg,#9b4d19 0%,#6e2c0e 52%,#3b1608 100%);
border:1px solid #d17b31;
border-radius:2px;
box-shadow:inset 0 1px rgba(255,220,163,.22),0 3px 10px rgba(0,0,0,.65);
cursor:pointer;
font:700 12px/36px Arial,Helvetica,sans-serif;
text-shadow:1px 1px 2px #000;
transition:filter .18s ease,box-shadow .18s ease,transform .18s ease;
}
body:has(#webengineRegistration1) .webengine-module button[name="webengineRegister_submit"]:hover{
filter:brightness(1.18);
box-shadow:inset 0 1px rgba(255,220,163,.28),0 0 12px rgba(215,117,37,.28);
}
body:has(#webengineRegistration1) .webengine-module button[name="webengineRegister_submit"]:active{
transform:translateY(1px);
}
body:has(#webengineRegistration1) .webengine-module .g-recaptcha{
transform-origin:left top;
}
body:has(#webengineRegistration1) .webengine-module .alert,
body:has(#webengineRegistration1) .webengine-module .alert-danger,
body:has(#webengineRegistration1) .webengine-module .alert-success{
margin:0 0 12px;
padding:9px 12px;
background:#100b08;
border:1px solid #5d3925;
color:#d8c5b6;
}
/* SOLO: bajar el formulario de Cambiar contraseña */
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module{
padding-top:65px !important;
}
/* SOLO: diseño del formulario Cambiar contraseña */
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module form{
width:420px !important;
margin:0 auto !important;
padding:22px 26px 24px !important;
box-sizing:border-box !important;
background:
linear-gradient(180deg,rgba(20,12,8,.94),rgba(5,5,5,.96)),
url('../img/background_12.png') center/cover no-repeat !important;
border:1px solid #5b3b25 !important;
box-shadow:0 0 18px rgba(0,0,0,.85),inset 0 0 18px rgba(0,0,0,.8) !important;
border-radius:2px !important;
}
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module form:before{
content:"CAMBIAR CONTRASEÑA";
display:block;
margin:0 0 18px;
padding:0 0 9px;
text-align:center;
color:#d99a4d;
border-bottom:1px solid rgba(159,91,39,.55);
font:bold 15px/18px Georgia,"Times New Roman",serif;
letter-spacing:1px;
text-shadow:1px 1px 3px #000,0 0 7px rgba(211,128,48,.18);
}
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module form label{
display:block !important;
margin:0 0 5px !important;
color:#d8c5b6 !important;
font:700 10px/14px Arial,Helvetica,sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
}
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module form input[type="password"]{
display:block !important;
width:100% !important;
height:32px !important;
box-sizing:border-box !important;
margin:0 0 12px !important;
padding:6px 9px !important;
color:#eee6df !important;
background:linear-gradient(180deg,#18120e,#090807) !important;
border:1px solid #5a3c29 !important;
border-radius:2px !important;
outline:none !important;
box-shadow:inset 0 2px 7px rgba(0,0,0,.8) !important;
font:11px Arial,Helvetica,sans-serif !important;
}
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module form input[type="password"]:focus{
border-color:#b66a2c !important;
box-shadow:inset 0 2px 7px rgba(0,0,0,.8),0 0 7px rgba(204,112,35,.22) !important;
}
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module form button,
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module form input[type="submit"]{
min-width:145px !important;
height:34px !important;
margin-top:2px !important;
padding:0 16px !important;
color:#f7eadc !important;
background:linear-gradient(180deg,#9b4d19,#68270d 55%,#351207) !important;
border:1px solid #d17b31 !important;
border-radius:2px !important;
box-shadow:inset 0 1px rgba(255,220,163,.22),0 3px 9px rgba(0,0,0,.65) !important;
cursor:pointer !important;
font:700 11px/32px Arial,Helvetica,sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
}
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module form button:hover,
body:has(.webengine-module input[type="password"]):not(:has(#webengineRegistration1)) .webengine-module form input[type="submit"]:hover{
filter:brightness(1.15) !important;
box-shadow:inset 0 1px rgba(255,220,163,.28),0 0 11px rgba(215,117,37,.25) !important;
}
/* =========================================================
AJUSTE DE POSICION — GENS / CASTLE SIEGE / PERSONAJE
Solo cambia la ubicación del personaje de usuario nuevo.
========================================================= */
.center{
overflow:visible;
}
.center .castle-character{
position:absolute;
left: 500px;
top:430px;
width:320px;
min-height:400px;
margin:0;
z-index:30;
}
.center .castle-character .cru-character{
width:320px;
height:auto;
margin:0;
transform:none;
}
.center .castle-character .new-user-badge-link{
left:0;
top:2px;
}
/* AJUSTE SOLO: Gens + Castle Siege más abajo y hacia la izquierda */
.center .gens-top-card{margin-top:80px;margin-left:0;}
.center .gens-top-card + .promo{margin-left:0;}
/* AJUSTE SOLO: bajar el personaje un poco más */
.center .castle-character{top: 530px;}
/* AJUSTE SOLO: bajar cru.png — posición solicitada */
.center .castle-character .cru-character{
transform: translateY(84px) !important;
}
/* AJUSTE FINAL SOLICITADO — SOLO PERSONAJE Y BADGE */
.center{
z-index:20 !important;
}
.center .castle-character{
z-index:999 !important;
}
.center .castle-character .cru-character{
position:relative !important;
z-index:1000 !important;
}
.center .castle-character .new-user-badge-link{
top:5px !important;
z-index:1001 !important;
}
/* AJUSTE SOLICITADO — SOLO CRU Y BADGE */
.center .castle-character .cru-character{
position:relative !important;
z-index:1000 !important;
}
.center .castle-character .new-user-badge-link{
left:70px !important;
top:70px !important;
z-index:1001 !important;
}
/* SOLO CORRECCIÓN: PARTE-BAJA.PNG MÁS PEQUEÑA Y CENTRADA */
.zupreme-site-footer img[src*="parte-baja.png"]{
display:block !important;
width:1500px !important;
max-width:1100px !important;
height:auto !important;
margin:0 auto !important;
}
/* SOLO AJUSTE SOLICITADO */
.zupreme-site-footer{
position:relative !important;
}
.zupreme-site-footer img[src*="parte-baja.png"]{
position:absolute !important;
left:50% !important;
top:0 !important;
transform:translateX(-50%) !important;
}
.zupreme-site-footer > div{
position:absolute !important;
left:50% !important;
width:900px !important;
transform:translateX(-50%) !important;
margin:0 !important;
text-align:center !important;
z-index:5 !important;
}
.zupreme-site-footer > div:first-of-type{
top:27px !important;
padding:0 !important;
}
.zupreme-site-footer > div:last-of-type{
top:43px !important;
}
/* img_01.gif: un poco más arriba y ligeramente a la izquierda */
.center .castle-character .new-user-badge,
.center .castle-character .new-user-badge-link{
left:25px !important;
top: 28px !important;
}
/* AJUSTE SOLICITADO: SOLO BAJAR EL FORMULARIO DE RECUPERAR CONTRASEÑA */
.center.forgotpassword-page .webengine-module{
margin-top:110px !important;
}
/* =========================================================
DISEÑO SOLICITADO — RECUPERAR CONTRASEÑA
Solo afecta la página de recuperar contraseña.
========================================================= */
.center.forgotpassword-page .webengine-module{
box-sizing:border-box !important;
width:420px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:24px 28px 28px !important;
background:
linear-gradient(180deg,rgba(18,12,8,.96),rgba(5,5,5,.97)),
url('../img/background_12.png') center/cover no-repeat !important;
border:1px solid #5a3924 !important;
box-shadow:0 0 18px rgba(0,0,0,.85),inset 0 0 18px rgba(0,0,0,.75) !important;
border-radius:2px !important;
}
.center.forgotpassword-page .webengine-module:before{
content:"RECUPERAR CONTRASEÑA";
display:block !important;
margin:0 0 18px !important;
padding:0 0 10px !important;
text-align:center !important;
color:#e0a04c !important;
border-bottom:1px solid rgba(159,91,39,.55) !important;
font:bold 16px/18px Georgia,"Times New Roman",serif !important;
letter-spacing:1px !important;
text-shadow:1px 1px 3px #000,0 0 7px rgba(211,128,48,.18) !important;
}
.center.forgotpassword-page .webengine-module p{
margin:0 0 18px !important;
color:#cfc2b7 !important;
font:11px/17px Arial,Helvetica,sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
}
.center.forgotpassword-page .webengine-module form{
margin:0 !important;
padding:0 !important;
}
.center.forgotpassword-page .webengine-module form label{
display:block !important;
margin:0 0 6px !important;
color:#d8c5b6 !important;
font:700 10px/14px Arial,Helvetica,sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
}
.center.forgotpassword-page .webengine-module form input[type="text"],
.center.forgotpassword-page .webengine-module form input[type="email"]{
display:block !important;
width:100% !important;
height:34px !important;
box-sizing:border-box !important;
margin:0 0 14px !important;
padding:7px 10px !important;
color:#eee6df !important;
background:linear-gradient(180deg,#18120e,#090807) !important;
border:1px solid #5a3c29 !important;
border-radius:2px !important;
outline:none !important;
box-shadow:inset 0 2px 7px rgba(0,0,0,.8) !important;
font:11px Arial,Helvetica,sans-serif !important;
}
.center.forgotpassword-page .webengine-module form input[type="text"]:focus,
.center.forgotpassword-page .webengine-module form input[type="email"]:focus{
border-color:#b66a2c !important;
box-shadow:inset 0 2px 7px rgba(0,0,0,.8),0 0 7px rgba(204,112,35,.22) !important;
}
.center.forgotpassword-page .webengine-module form button,
.center.forgotpassword-page .webengine-module form input[type="submit"]{
min-width:210px !important;
height:35px !important;
margin:0 !important;
padding:0 18px !important;
color:#f7eadc !important;
background:linear-gradient(180deg,#a6531c,#6b290e 55%,#351207) !important;
border:1px solid #d17b31 !important;
border-radius:2px !important;
box-shadow:inset 0 1px rgba(255,220,163,.22),0 3px 9px rgba(0,0,0,.65) !important;
cursor:pointer !important;
font:700 11px/33px Arial,Helvetica,sans-serif !important;
text-shadow:1px 1px 2px #000 !important;
}
.center.forgotpassword-page .webengine-module form button:hover,
.center.forgotpassword-page .webengine-module form input[type="submit"]:hover{
filter:brightness(1.15) !important;
box-shadow:inset 0 1px rgba(255,220,163,.28),0 0 11px rgba(215,117,37,.25) !important;
}
/* =========================================================
ZUPREMEMU - DISEÑO EXCLUSIVO DE LA PÁGINA DE DESCARGAS
Solo afecta a los bloques generados por modules/downloads.php.
========================================================= */
.center .webengine-module .panel-downloads{
box-sizing:border-box !important;
width:100% !important;
margin:0 0 16px !important;
padding:0 !important;
overflow:hidden !important;
border:1px solid #654326 !important;
background:linear-gradient(135deg,rgba(30,20,13,.97),rgba(7,7,6,.97) 62%) !important;
box-shadow:inset 0 1px rgba(255,190,103,.06),0 4px 12px rgba(0,0,0,.42) !important;
}
.center .webengine-module .panel-downloads .panel-body{
padding:0 !important;
background:transparent !important;
}
.center .webengine-module .panel-downloads .panel-title{
display:block !important;
width:auto !important;
height:auto !important;
margin:0 !important;
padding:11px 13px !important;
overflow:visible !important;
color:#f0b35c !important;
background:linear-gradient(90deg,rgba(113,54,20,.55),rgba(28,17,10,.94)) !important;
border:0 !important;
border-bottom:1px solid #58371e !important;
font:bold 12px/16px Georgia,"Times New Roman",serif !important;
letter-spacing:.8px !important;
text-shadow:1px 1px 2px #000 !important;
text-transform:uppercase !important;
}
.center .webengine-module .panel-downloads table.table{
width:100% !important;
margin:0 !important;
border:0 !important;
border-collapse:separate !important;
border-spacing:0 !important;
table-layout:fixed !important;
color:#d1c3b7 !important;
background:transparent !important;
}
.center .webengine-module .panel-downloads table.table tr{
background:rgba(0,0,0,.12) !important;
transition:background .15s ease !important;
}
.center .webengine-module .panel-downloads table.table tr:hover{
background:rgba(120,66,29,.18) !important;
}
.center .webengine-module .panel-downloads table.table td{
box-sizing:border-box !important;
padding:12px 10px !important;
vertical-align:middle !important;
border:0 !important;
border-bottom:1px solid rgba(112,76,48,.35) !important;
color:#d8c9bb !important;
font:11px/16px Arial,Helvetica,sans-serif !important;
}
.center .webengine-module .panel-downloads table.table tr:last-child td{
border-bottom:0 !important;
}
.center .webengine-module .panel-downloads table.table td:first-child{
width:60% !important;
padding-left:14px !important;
color:#f0c17b !important;
font-weight:bold !important;
overflow-wrap:anywhere !important;
}
.center .webengine-module .panel-downloads .download-description{
display:block !important;
margin-top:3px !important;
color:#928174 !important;
font:10px/14px Arial,Helvetica,sans-serif !important;
font-weight:normal !important;
}
.center .webengine-module .panel-downloads table.table td:nth-child(2){
width:20% !important;
color:#c7b8a8 !important;
text-align:center !important;
white-space:normal !important;
font-size:10px !important;
}
.center .webengine-module .panel-downloads table.table td:nth-child(3){
width:20% !important;
padding-right:12px !important;
text-align:center !important;
}
.center .webengine-module .panel-downloads .btn.btn-primary.btn-xs{
display:inline-flex !important;
min-width:74px !important;
min-height:28px !important;
box-sizing:border-box !important;
align-items:center !important;
justify-content:center !important;
padding:6px 9px !important;
color:#fff0dc !important;
background:linear-gradient(180deg,#a85a25,#713313) !important;
border:1px solid #c17b3d !important;
border-radius:2px !important;
box-shadow:inset 0 1px rgba(255,220,170,.16),0 2px 5px rgba(0,0,0,.4) !important;
font:bold 10px/14px Arial,Helvetica,sans-serif !important;
text-decoration:none !important;
text-shadow:1px 1px 2px #000 !important;
white-space:nowrap !important;
transition:filter .15s ease,transform .15s ease !important;
}
.center .webengine-module .panel-downloads .btn.btn-primary.btn-xs:hover{
color:#fff !important;
filter:brightness(1.2) !important;
transform:translateY(-1px) !important;
box-shadow:0 0 9px rgba(211,124,52,.25) !important;
}
@media(max-width:620px){
.center .webengine-module .panel-downloads table.table td{
padding:9px 6px !important;
font-size:10px !important;
}
.center .webengine-module .panel-downloads table.table td:first-child{
padding-left:8px !important;
}
.center .webengine-module .panel-downloads .btn.btn-primary.btn-xs{
min-width:60px !important;
padding:5px 6px !important;
}
}
/* AJUSTE EXCLUSIVO: bajar la sección de Descargas */
.center .webengine-module .panel-downloads{
position:relative !important;
top:100px !important;
}