/* ================================================
   By charly — Rediseño Visual 2026
   Estética: Dark Fantasy RPG — Morado Oscuro y Azul Claro
   ================================================ */
@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap";

:root {
  --gold:        #5dade2;
  --gold-light:  #a9d6f5;
  --gold-dark:   #4a2073;
  --amber:       #9b59b6;
  --dark-bg:     #120a1f;
  --dark-card:   #1a0f2e;
  --dark-panel:  #211337;
  --text-main:   #dce3f0;
  --text-muted:  #9086ab;
  --text-bright: #f3eefc;
  --radius-sm:   4px;
  --radius-md:   8px;
  --shadow-gold: 0 0 20px rgba(93,173,226,.25), 0 2px 8px rgba(0,0,0,.6);
  --shadow-deep: 0 4px 24px rgba(0,0,0,.7);
  --transition:  .22s cubic-bezier(.4,0,.2,1);
}

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure,figcaption,button{padding:0;margin:0;font-size:inherit;color:inherit;background:transparent}
h1,h2,h3,h4,h5,h6{font-weight:400}a{text-decoration:none}table{border-spacing:0}fieldset,img,button,textarea{border:0}strong{font-weight:700}ol,ul{list-style:none;margin:0;padding:0}caption,th{text-align:left}input{border:0;margin:0}i{font-style:normal;font-weight:700}textarea{resize:none}a,button,input[type=submit]{cursor:pointer}.clear{clear:both}.clear-right{clear:right}.clear-left{clear:left}
::selection{background:var(--gold-dark);color:var(--text-bright)}

@font-face{font-family:'FontAwesome';src:url(../fonts/fontawesome/fontawesome-webfont.eot?v=4.4.0);src:url(../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.4.0) format("embedded-opentype"),url(../fonts/fontawesome/fontawesome-webfont.woff2?v=4.4.0) format("woff2"),url(../fonts/fontawesome/fontawesome-webfont.woff?v=4.4.0) format("woff"),url(../fonts/fontawesome/fontawesome-webfont.ttf?v=4.4.0) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'proxima-nova_regular';src:url(../fonts/ProximaNova-Regular.woff) format("woff"),url(../fonts/ProximaNova-Regular.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'proxima-nova_bold';src:url(../fonts/ProximaNova-Bold.woff) format("woff"),url(../fonts/ProximaNova-Bold.ttf) format("truetype");font-weight:400;font-style:normal}

*{position:relative;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:focus{outline:2px solid var(--gold-dark);outline-offset:2px}
strong{font-family:'proxima-nova_bold',serif;font-weight:400}a{color:inherit}
html,body{font-family:'Crimson Pro','proxima-nova_regular',Georgia,serif;width:100%;height:100%;min-height:100%}
/* FONDO DEL SITIO: para cambiar la imagen, reemplaza el archivo template/img/background.jpg por tu imagen */
html{background:url(../img/background.jpg) no-repeat center top fixed;background-size:cover;background-color:var(--dark-bg)}
html::before{content:'';position:fixed;inset:0;background:linear-gradient(180deg,rgba(12,7,20,.82) 0%,rgba(18,11,30,.75) 40%,rgba(15,9,26,.88) 100%);z-index:0;pointer-events:none}
body{padding-top:380px;z-index:1}
.ct{width:1100px;max-width:100%;padding:0 25px;margin:auto}
@media screen and (max-width:415px){.ct{padding:0 12px}}

.alert{color:var(--text-bright);padding:11px 16px!important;margin-top:10px;border-radius:var(--radius-sm);font-size:15px;border-left:3px solid currentColor;display:flex;align-items:center;gap:8px}
.alert.infos{background:rgba(36,96,168,.3);color:#7ab0e8}
.alert.error{background:rgba(139,32,32,.3);color:#e87a7a}
.alert.valid{background:rgba(74,122,40,.3);color:#90c060}
.alert.warning{background:rgba(200,140,30,.3);color:var(--amber)}

/* HEADER */
header{z-index:900;background:linear-gradient(90deg,rgba(15,9,26,.93),rgba(22,14,36,.88) 50%,rgba(15,9,26,.93));height:65px;inset:.75rem 1rem;border-radius:var(--radius-md);position:fixed;backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(93,173,226,.2),0 4px 24px rgba(0,0,0,.7);border-bottom:1px solid rgba(93,173,226,.15)}
header .ct{height:100%}
header #logotype{left:50%;margin-left:-80px;font-family:'Cinzel',serif;text-transform:uppercase;text-align:center;font-weight:900;z-index:900;position:absolute;width:160px;background:linear-gradient(160deg,var(--gold-dark),var(--gold) 50%,var(--gold-dark));height:72px;padding-top:10px;text-shadow:0 1px 3px rgba(0,0,0,.5);font-size:22px;line-height:28px;color:var(--dark-bg);border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--shadow-gold);letter-spacing:1px;transition:var(--transition)}
header #logotype::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 50%);border-radius:inherit;pointer-events:none}
header #logotype:hover{background:linear-gradient(160deg,#2f0f52,var(--amber) 50%,#2f0f52);box-shadow:0 0 30px rgba(93,173,226,.4),0 4px 12px rgba(0,0,0,.7)}
header #logotype small{font-family:'Crimson Pro',serif;font-weight:400;display:block;line-height:15px;text-transform:none;font-size:10px;letter-spacing:0;opacity:.75;font-style:italic}
header nav{height:100%;font-family:'Cinzel',serif}
header nav ul li.sub span{transition:var(--transition)}
main aside .butt,header nav{user-select:none}
main aside .item .illu{display:flex;flex-wrap:wrap}
header nav .nav{height:100%;border-left:1px solid rgba(93,173,226,.1)}
header nav .nav li,header .panel{color:var(--text-main);width:calc(16.666% - 25px);height:100%;float:left;border-right:1px solid rgba(93,173,226,.1)}
header nav .nav li:nth-child(3){border-right:0}
header nav .nav li:hover{z-index:150}
header nav .nav li a,header .panel a{color:var(--text-main);padding-top:20px;float:left;text-align:center;width:100%;display:inline-block;height:100%;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.5px;transition:var(--transition)}
header nav .nav li.sub{padding-top:20px;text-align:center;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.5px;cursor:default}
header nav .nav li a:hover,header nav ul li.sub:hover,header .panel a:hover{background:rgba(93,173,226,.08);color:var(--gold-light)}
header nav .nav li span{position:absolute;bottom:11px;text-align:center;left:0;display:block;margin:auto;width:100%;color:var(--gold)!important;transition:var(--transition);font-size:10px}
header nav .nav li.sub:hover span{bottom:6px;color:var(--gold-light)!important}
header nav .nav li.logotype{width:160px;height:72px}
header nav .nav li ul.submenu{height:0;overflow:hidden;box-shadow:var(--shadow-deep);padding:0 6px;width:190px;background:linear-gradient(160deg,#211337,#1a0f2e);border:1px solid rgba(93,173,226,.2);border-top:2px solid var(--gold);position:absolute;left:50%;margin-left:-95px;top:65px;border-radius:0 0 var(--radius-sm) var(--radius-sm)}
header nav .nav li:hover ul.submenu{height:auto;overflow:visible;padding:6px}
header nav .nav li ul.submenu li{width:100%;float:none;height:34px;border-right:0;margin-bottom:4px}
header nav .nav li ul.submenu li a{font-size:11px;background:rgba(93,173,226,.06);border:1px solid rgba(93,173,226,.1);padding-top:0;height:100%;line-height:34px;border-radius:var(--radius-sm);color:var(--text-muted);letter-spacing:.3px}
header nav .nav li ul.submenu li a:hover{background:rgba(93,173,226,.15);color:var(--gold-light);border-color:rgba(93,173,226,.3)}
header .panel{position:absolute;right:16px;height:100%;top:0}
header .panel .link{cursor:pointer;width:calc(50% - 15px);font-size:20px;display:inline-block;border-right:1px solid rgba(93,173,226,.1);color:var(--text-muted);transition:var(--transition)}
header .panel .link:hover{color:var(--gold-light);background:rgba(93,173,226,.06)}
header .panel .link.menu{display:none}
header .panel .link div{top:-2px;left:1px}
@media screen and (min-width:1000px){header nav{left:0!important}}
@media screen and (max-width:1000px){
header nav{overflow-x:scroll;padding-bottom:40px;position:fixed;height:calc(100vh - 65px);width:210px;background:rgba(17,10,28,.97);border-right:1px solid rgba(93,173,226,.15);top:65px;left:-210px;z-index:850;box-shadow:4px 0 20px rgba(0,0,0,.5)}
header nav .nav li{width:100%;height:auto;border-right:0}
header nav .nav li a,header nav .nav li.sub{text-align:left!important;padding-left:20px}
header nav .nav li.sub{padding-top:15px}
header nav .nav li a:hover,header nav .nav li.sub:hover{background:transparent}
header nav .nav li.logotype,header nav .nav li span{display:none}
header nav .nav li ul.submenu{padding-top:6px;top:0;height:auto!important;position:relative;background:transparent;box-shadow:none;border:0;width:100%!important;margin-left:0;left:0}
header nav .nav li ul.submenu li{height:auto;padding:0;margin-bottom:2px}
header nav .nav li ul.submenu li a{line-height:15px;padding-left:0;font-size:10px!important;font-weight:400;background:transparent;box-shadow:none;border:0;height:auto!important}
header nav .nav li ul.submenu li a:hover{background:transparent;color:var(--gold-light)!important}
header nav .nav li a:hover{color:var(--gold-light)!important}
header #logotype{margin-left:0;left:20px}
header .panel{width:213px;border-left:1px solid rgba(93,173,226,.1)}
header .panel .link{width:60px}
header .panel .link.menu{display:inline-block}
}
@media screen and (max-width:415px){header #logotype{left:5px}header .panel{right:5px}header .panel .link{width:60px}header .panel .link.menu{display:inline-block}}
@media screen and (max-width:378px){header .panel{width:calc(100% - 165px);padding-right:30px}header .panel .link{width:33.333%;font-size:14px}header .panel .link div{top:4px}}
#logo{position:absolute;top:-230px;right:110px}
@media screen and (max-width:620px){#logo{right:0;width:100%;display:inline-block;text-align:center}#logo img{max-width:80%}}

/* MAIN */
main{background:linear-gradient(180deg,rgba(18,11,30,.9),rgba(22,14,36,.93));backdrop-filter:blur(8px);width:100%;border-top:1px solid rgba(93,173,226,.15)}
main aside{padding:12px;background:linear-gradient(180deg,rgba(22,14,36,.6),rgba(18,11,30,.8));position:absolute;top:0;right:0;width:250px;height:100%;border-left:1px solid rgba(93,173,226,.12)}
main aside .panel{padding:8px;background:var(--dark-panel);border:1px solid rgba(93,173,226,.12);border-radius:var(--radius-sm);color:var(--text-main);margin-bottom:10px;box-shadow:0 2px 12px rgba(0,0,0,.4)}
main aside .panel li{width:100%;padding-bottom:4px}
main aside .panel li:last-child{padding-bottom:0}
main aside .panel li a{opacity:.75;overflow:hidden;display:inline-block;background:rgba(93,173,226,.05);border:1px solid rgba(93,173,226,.1);border-radius:var(--radius-sm);width:100%;padding:7px 12px;font-size:13px;transition:var(--transition)}
main aside .panel li a:hover{opacity:1;background:rgba(93,173,226,.12);border-color:rgba(93,173,226,.25);color:var(--gold-light)}
main aside .panel li a.blue{background:rgba(36,96,168,.25);border-color:rgba(36,96,168,.3)}
main aside .panel li a.red{background:rgba(139,32,32,.25);border-color:rgba(139,32,32,.3)}
main aside .butt{text-shadow:0 1px 3px rgba(0,0,0,.3);margin-bottom:8px;padding:14px 0 0 58px;height:60px;width:100%;line-height:16px;color:var(--text-bright);font-size:14px;font-family:'Cinzel',serif;text-transform:uppercase;font-weight:700;display:inline-block;border-radius:var(--radius-sm);border:1px solid rgba(0,0,0,.3);box-shadow:0 2px 8px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.06) inset;transition:var(--transition);letter-spacing:.3px}
main aside .butt:hover{filter:brightness(1.12);box-shadow:0 4px 16px rgba(0,0,0,.5);transform:translateY(-1px)}
main aside .butt small{display:block;width:100%;font-size:11px;font-weight:400;text-transform:initial;font-family:'Crimson Pro',serif;opacity:.75}
main aside .butt .illu{position:absolute;top:0;left:4px;display:inline-block;width:50px;height:50px;background:url(../img/sprite.png) top center no-repeat;background-size:92% auto}
main aside .butt.discord{background:#5865F2}
main aside .butt.discord .illu{background-position:center -2508px}
main aside .butt.twitter{background:#1DA1F2}
main aside .butt.twitter .illu{background-position:center -2555px}
main aside .butt.facebook{background:#1877F2}
main aside .butt.facebook .illu{background-position:center -2600px}
main aside .butt.joins{background:linear-gradient(135deg,#b06010,var(--gold-dark));border-color:rgba(93,173,226,.2)}
main aside .butt.joins .illu{background-position:center -302px;margin-bottom:-5px}
main aside .butt.vote{background:linear-gradient(135deg,#7a5a10,var(--amber))}
main aside .butt.vote .illu{background-position:center -2239px}
main aside .butt.ladder{background:linear-gradient(135deg,#4a3a1a,#8a7040)}
main aside .butt.ladder .illu{background-position:center -964px}
main aside .butt.shop{background:linear-gradient(135deg,#0a5a60,#2fc9d3)}
main aside .butt.shop .illu{background-position:center -2050px}
main aside .butt.forum{background:linear-gradient(135deg,#1a5a20,#2aaa30)}
main aside .butt.forum .illu{background-position:center -482px}
main aside .item{text-align:center;background:var(--dark-panel);border:1px solid rgba(93,173,226,.12);height:55px;margin:-10px 0 10px;border-radius:var(--radius-sm);overflow:hidden}
main aside .item .illu{float:left;width:25%;height:100%;background:rgba(10,157,170,.15);border-right:1px solid rgba(93,173,226,.08);align-items:center;justify-content:center;transition:var(--transition)}
main aside .item .illu:last-child{border-right:0}
main aside .item .illu:hover{background:rgba(53,171,181,.25)}
main aside .item .illu img{margin:auto;width:36px}
main aside .price{width:100%;background:var(--dark-card)}
main #content{min-height:502px;width:calc(100% - 250px);padding:14px}
main #content h1{text-transform:uppercase;color:var(--text-bright);line-height:22px;padding:13px 16px;text-shadow:0 1px 3px rgba(0,0,0,.5);background:linear-gradient(90deg,var(--gold-dark),rgba(74,32,115,.4));border-left:3px solid var(--gold);font-size:18px;font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px}
main #content #breadcrump{line-height:14px;margin-bottom:10px;background:rgba(93,173,226,.05);border-bottom:1px solid rgba(93,173,226,.1);padding:8px 16px 9px;color:var(--text-muted);font-size:12px}
main #content #breadcrump li{display:inline;line-height:15px}
main #content #breadcrump li:after{color:var(--gold-dark)!important;margin:0 4px 0 6px;position:relative;top:1px}
main #content #breadcrump li:last-child:after{display:none}
main #content #breadcrump li:last-child{font-family:'Crimson Pro',serif}
main #content #breadcrump li a:hover{text-decoration:underline;color:var(--gold-light)}
main #content #middle{overflow:hidden;color:var(--text-main);background:var(--dark-card);border:1px solid rgba(93,173,226,.1);border-top:0}
main #content #middle h2{background:linear-gradient(90deg,rgba(74,32,115,.35),transparent);border-left:2px solid var(--gold);color:var(--gold-light);line-height:18px;padding:11px 16px;font-size:14px;text-transform:uppercase;font-family:'Cinzel',serif;font-weight:700;letter-spacing:.8px}
main #content #middle h2 a:hover{color:var(--gold)}
main #content #middle p{font-size:16px;line-height:26px;padding:12px 16px 6px;color:var(--text-main)}
main #content form{width:100%;padding:24px;margin:10px auto 0}
main #content form label{display:block;color:var(--text-muted);line-height:14px;font-family:'Cinzel',serif;font-size:12px;text-transform:uppercase;font-weight:600;letter-spacing:.5px}
main #content form label small{padding-bottom:10px;display:block;font-size:14px;text-transform:initial;font-weight:400;font-family:'Crimson Pro',serif;color:var(--text-muted);letter-spacing:0}
main #content form label span{color:#e06040}
main #content form textarea,main #content form input[type=text],main #content form input[type=password]{background:rgba(15,9,26,.6);border:1px solid rgba(93,173,226,.2);border-radius:var(--radius-sm);font-size:15px;width:320px;height:46px;margin-bottom:16px;padding:0 14px;font-family:'Crimson Pro',serif;color:var(--text-main);transition:var(--transition)}
main #content form textarea:focus,main #content form input[type=text]:focus,main #content form input[type=password]:focus{border-color:var(--gold);background:rgba(93,173,226,.04);outline:none;box-shadow:0 0 0 3px rgba(93,173,226,.1)}
main #content .btn{font-size:11px!important;text-align:center;padding:10px!important;width:100%!important}
main #content .btn,main #content form button{background:linear-gradient(135deg,var(--gold-dark),var(--gold) 50%,var(--gold-dark));display:block;text-transform:uppercase;color:var(--dark-bg);font-family:'Cinzel',serif;padding:14px 20px;font-weight:700;font-size:13px;letter-spacing:1px;border-radius:var(--radius-sm);border:1px solid rgba(93,173,226,.3);box-shadow:var(--shadow-gold);transition:var(--transition)}
main #content .btn:hover,main #content form button:hover{background:linear-gradient(135deg,#2f0f52,var(--amber) 50%,#2f0f52);box-shadow:0 0 30px rgba(93,173,226,.35),0 4px 12px rgba(0,0,0,.6);transform:translateY(-1px)}
main #content form textarea{width:100%;height:125px;resize:none;padding-top:10px;padding-bottom:10px}
main #content .principal{color:var(--gold-light)}
@media screen and (max-width:764px){main aside{width:100%;position:relative;border-left:0}main #content{width:100%;min-height:auto}}
@media screen and (max-width:400px){main #content form label{text-align:center}main #content form button,main #content form input[type=text],main #content form input[type=password]{width:100%}}

/* TABLAS LADDER */
main table.ladder{width:100%;margin-bottom:-5px;border-collapse:collapse}
main table.ladder.carac{margin-bottom:0;width:calc(50% - 5px);float:left;background:var(--dark-panel)}
main table.ladder.carac.primaire{margin-right:10px}
main table.ladder thead tr{background:linear-gradient(90deg,rgba(74,32,115,.6),rgba(45,20,70,.4))}
main table.ladder th{border-bottom:2px solid var(--gold-dark);border-right:1px solid rgba(93,173,226,.1);color:var(--gold-light);padding:10px 10px 9px;font-size:11px;font-family:'Cinzel',serif;text-transform:uppercase;letter-spacing:.8px;font-weight:700}
main table.ladder td{height:46px;border-bottom:1px solid rgba(93,173,226,.07);padding:7px 10px;border-right:1px solid rgba(93,173,226,.05);color:var(--text-main);font-size:14px;transition:var(--transition)}
main table.ladder.carac th,main table.ladder.carac td{font-size:12px}
main table.ladder.carac td{height:30px;padding-top:7px}
main table.ladder tr:hover td{background:rgba(93,173,226,.05);color:var(--text-bright)}
main table.ladder tr:last-child td{border-bottom:0}
main table.ladder tbody tr:nth-child(even) td{background:rgba(0,0,0,.15)}
main table.ladder tbody tr:nth-child(even):hover td{background:rgba(93,173,226,.07)}
main table.ladder tr td .rang,main table.ladder tr td .RankId,main table.ladder tr td .RangId{display:inline-block;width:34px;height:34px;vertical-align:middle;line-height:34px;text-align:center;border-radius:50%;font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:var(--dark-bg)}
main table.ladder tr:nth-child(1) td .rang,main table.ladder tr:nth-child(1) td .RankId,main table.ladder tr:nth-child(1) td .RangId{background:linear-gradient(145deg,#b88a20,#a9d6f5,#b88a20);box-shadow:0 0 12px rgba(240,192,96,.5),0 2px 4px rgba(0,0,0,.5);font-size:15px}
main table.ladder tr:nth-child(2) td .rang,main table.ladder tr:nth-child(2) td .RankId,main table.ladder tr:nth-child(2) td .RangId{background:linear-gradient(145deg,#606060,#c8c8c8,#606060);box-shadow:0 0 8px rgba(180,180,180,.4),0 2px 4px rgba(0,0,0,.5)}
main table.ladder tr:nth-child(3) td .rang,main table.ladder tr:nth-child(3) td .RankId,main table.ladder tr:nth-child(3) td .RangId{background:linear-gradient(145deg,#7a3810,#cd8050,#7a3810);box-shadow:0 0 8px rgba(205,128,80,.4),0 2px 4px rgba(0,0,0,.5)}
main table.ladder tr:nth-child(n+4) td .rang,main table.ladder tr:nth-child(n+4) td .RankId,main table.ladder tr:nth-child(n+4) td .RangId{background:rgba(93,173,226,.1);border:1px solid rgba(93,173,226,.2);color:var(--text-muted);font-size:12px}
main table.ladder .l{text-align:left}main table.ladder .r{text-align:right}main table.ladder .c{text-align:center}
main table.ladder td.i{width:40px}
main table.ladder td .class{width:35px;vertical-align:middle;border-radius:3px;border:1px solid rgba(93,173,226,.15)}
@media screen and (max-width:875px){main table.ladder.carac{width:100%;margin-right:0}}

/* Badges ranking */
.badge-bonta{display:inline-block;background:rgba(89,215,255,.15);border:1px solid rgba(89,215,255,.3);color:#59d7ff;padding:2px 8px;border-radius:10px;font-size:11px;font-family:'Cinzel',serif}
.badge-brakmar{display:inline-block;background:rgba(255,97,97,.15);border:1px solid rgba(255,97,97,.3);color:#ff6161;padding:2px 8px;border-radius:10px;font-size:11px;font-family:'Cinzel',serif}
.badge-neutral{display:inline-block;background:rgba(93,173,226,.12);border:1px solid rgba(93,173,226,.2);color:var(--text-muted);padding:2px 8px;border-radius:10px;font-size:11px;font-family:'Cinzel',serif}
.honor-max{color:#FFD700;font-family:'Cinzel',serif;font-weight:700;text-shadow:0 0 8px rgba(255,215,0,.5);letter-spacing:.5px}
.ratio-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-family:'Cinzel',serif;font-weight:700}
.ratio-high{background:rgba(74,122,40,.2);border:1px solid rgba(144,192,96,.3);color:#90c060}
.ratio-mid{background:rgba(200,140,30,.15);border:1px solid rgba(232,160,48,.3);color:var(--amber)}
.ratio-low{background:rgba(139,32,32,.2);border:1px solid rgba(232,120,120,.3);color:#e87a7a}

/* NOTICIAS */
main #news{margin-bottom:-10px;display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}
main article{background:var(--dark-card);border:1px solid rgba(93,173,226,.1);border-radius:var(--radius-sm);font-size:14px;float:left;flex:1 calc(50% - 6px);overflow:hidden;transition:var(--transition)}
main article:hover{border-color:rgba(93,173,226,.25);box-shadow:var(--shadow-gold)}
main article:nth-child(3n + 3){flex:1 95%}
main article .header{color:var(--text-bright);aspect-ratio:1 / .5;background-size:cover;background-position:center center}
main article .header time{display:inline-block;background:rgba(18,11,30,.85);border:1px solid rgba(93,173,226,.2);left:12px;width:55px;text-align:center;font-family:'Cinzel',serif;font-size:20px;padding:10px 0 8px;line-height:14px;text-transform:uppercase;font-weight:700;border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);color:var(--gold-light)}
main article .header time span{width:100%;display:inline-block;font-weight:400;font-size:12px;color:var(--text-muted)}
main article .header h2{font-family:'Cinzel',serif;width:100%;position:absolute;bottom:0;font-weight:700;letter-spacing:.5px;text-shadow:0 0 8px #000,0 0 3px #000;font-size:18px;line-height:22px;padding:20px 15px 12px;background:linear-gradient(to top,rgba(15,9,26,.95) 15%,transparent);text-transform:uppercase;color:var(--text-bright)}
main article p{line-height:22px;padding:12px 16px;height:150px;overflow:hidden;color:var(--text-muted);font-size:15px}
main article .footer{background:rgba(93,173,226,.05);border-top:1px solid rgba(93,173,226,.1);padding-left:14px;line-height:40px;font-size:11px;height:40px;color:var(--text-muted)}
main article .footer time{font-weight:600;color:var(--gold-dark)}
main article .footer a{float:right;background:transparent;height:40px;font-weight:600;font-size:14px;padding:0 12px;color:var(--gold);transition:var(--transition)}
main article .footer a:hover{background:rgba(93,173,226,.08);color:var(--gold-light)}
main #news.read{margin-bottom:0}
main #news.read article{width:100%}
main #news.read article p{height:auto}
@media screen and (max-width:900px){main article{width:100%}}
@media screen and (max-width:764px){main article{width:calc(50% - 6px)}}
@media screen and (max-width:609px){main article{width:100%}}
main .butt-points{max-width:100%;background:linear-gradient(135deg,#0a3a44,#04485B);border:1px solid rgba(4,72,91,.5);border-radius:var(--radius-sm);overflow:hidden;padding:20px 0 0;text-align:center;height:60px;width:280px;margin:15px auto 5px;display:block;line-height:16px;color:var(--text-bright);font-size:14px;font-family:'Cinzel',serif;text-transform:uppercase;font-weight:700;box-shadow:0 2px 12px rgba(0,0,0,.5);transition:var(--transition)}
main .butt-points:hover{background:linear-gradient(135deg,#0d4858,#147182)}
main .butt-points img{position:absolute;top:-70px;left:-70px}
main .butt-points span{z-index:100}
main .comm{vertical-align:-20%;margin-bottom:-5px;top:-2px;margin-right:6px;margin-left:-3px}
main .comment li{min-height:130px;width:100%;background:var(--dark-panel);border:1px solid rgba(93,173,226,.08);padding:20px 20px 15px;margin:10px auto 0;border-radius:var(--radius-sm)}
main .comment li .left{float:left;width:90px;height:90px;background:rgba(93,173,226,.08);border:1px solid rgba(93,173,226,.15);border-radius:var(--radius-sm)}
main .comment li .left .ico_user{font-size:50px;opacity:.15;left:27px;top:20px;color:var(--gold)}
main .comment li .right{border:1px solid rgba(93,173,226,.1);width:calc(100% - 100px);background:var(--dark-card);margin-left:105px;padding-bottom:7px;padding-top:2px;border-radius:var(--radius-sm)}
main .comment li .right p{line-height:17px!important}
main .comment li .right p .time{display:block;font-size:11px;margin-bottom:5px;color:var(--gold-dark);opacity:.8}
@media screen and (max-width:470px){main .comment li{min-height:auto;padding:10px}main .comment li .left{display:none}main .comment li .right{width:100%;margin-left:0}}
.join{padding:0;overflow:hidden;background:var(--dark-card)}
.join .download{width:100%;height:315px;background:url(../img/bg-join.jpg) no-repeat;background-size:cover}
.join .download a.dn{top:90px;right:20px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#8b2020,#aa2828);border:1px solid rgba(255,80,80,.2);font-family:'Cinzel',serif;transition:var(--transition);padding-top:16px;line-height:24px;letter-spacing:3px;color:#ffd0d0;width:270px;height:92px;display:inline-block;text-align:center;text-transform:uppercase;position:absolute;font-size:12px;box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 20px rgba(180,40,40,.3)}
.join .download a.dn span{width:100%;display:inline-block;font-size:28px}
.join .download a.dn:hover{color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 30px rgba(220,50,50,.4);transform:translateY(-1px)}
.join .download a.mac{opacity:.5;transition:var(--transition);color:var(--text-main);text-transform:uppercase;letter-spacing:2px;position:absolute;font-size:11px;top:195px;right:50px}
.join .download a.mac:hover{opacity:1}
@media screen and (max-width:430px){.join .download a.dn{position:relative;right:auto!important;left:auto;display:block;width:90%;margin:auto}}
footer{color:var(--text-muted);font-size:12px;text-align:right;padding:20px 25px;border-top:1px solid rgba(93,173,226,.08);font-family:'Crimson Pro',serif;font-style:italic;opacity:.6}
footer a{font-family:'proxima-nova_bold',serif;color:var(--gold-dark);font-style:normal;transition:var(--transition)}
footer a:hover{color:var(--gold)}
dialog.modal{position:fixed;inset:0;backdrop-filter:blur(6px);border:0;outline:0;width:100%;max-height:100%;z-index:10000;background:transparent}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog[open]{display:block}
.modal{background:var(--dark-card)!important;border:1px solid rgba(93,173,226,.2)!important;border-top:2px solid var(--gold)!important;border-radius:var(--radius-md);box-shadow:0 20px 60px rgba(0,0,0,.8),var(--shadow-gold);padding:0!important}
.modal h1{background:linear-gradient(90deg,var(--gold-dark),transparent);color:var(--gold-light);padding:14px 20px;font-family:'Cinzel',serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(93,173,226,.15)}
.modal #breadcrump{padding:10px 20px!important;color:var(--text-muted);font-size:14px;border-bottom:1px solid rgba(93,173,226,.08);background:transparent!important}
.modal #middle{padding:20px!important}
.langBtn{display:grid;place-items:center;position:fixed;bottom:.75em;right:.75em;border-radius:50%;width:2.5em;aspect-ratio:1/1;cursor:pointer;transition:var(--transition);z-index:300;background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:var(--dark-bg);font-size:1.3rem;box-shadow:var(--shadow-gold);border:1px solid rgba(93,173,226,.3)}
.langBtn:hover,.langBtn:focus{background:linear-gradient(135deg,#2f0f52,var(--amber));transform:scale(1.08)}