/* Evitar arrastre de enlaces/iconos (bug de la web trabada al arrastrar) */
/* Quitar el resaltado azul al tocar en móvil */
*{-webkit-tap-highlight-color:transparent}
button,a{-webkit-tap-highlight-color:transparent}
.btn,.hbtn,.icon-btn,.m-auth-btn,.navlinks>a,.nav-drop>button,.lang-btn,.brand,.m-item,.mobile-lang button,.scroll-top{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.btn svg,.hbtn svg,.icon-btn svg,.m-auth-btn svg,.nav-ic,.brand img,.crest-img,.flag{pointer-events:none;-webkit-user-drag:none;user-select:none}

:root{
  --bg:#0a0a0a;--bg2:#111111;--panel:#141414;--panel2:#1a1a1a;--panel3:#1f1f1f;
  --accent:#d4a843;--accent-bright:#e0b855;--accent-deep:#b8922e;
  --gold:#d4a843;--gold-soft:#e0b855;--gold-deep:#7a6020;
  --ink:#e8e0cc;--muted:#9a9080;--faint:#5a5548;--line:rgba(212,168,67,.12);--ok:#5db075;--off:#b5504a;
  --ember:#c8853a;--ember-bright:#e0a94a;--shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4{font-family:'Cinzel',serif}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}
button{font-family:inherit;cursor:pointer}
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,10,.75);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:flex-start;height:84px;gap:28px;max-width:1600px;margin:0 auto;padding:0 24px 0 40px;width:100%}
.brand{display:flex;align-items:center;gap:12px;font-family:'Cinzel',serif;font-weight:900;font-size:20px;letter-spacing:.03em;cursor:pointer;flex-shrink:0;position:relative}
.brand:hover::before{opacity:1}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.crest-img{animation:none}}

.crest-img{width:55px;height:55px;border-radius:50%;object-fit:cover;position:relative;z-index:1;margin-top:5px;animation:logoFloat 5s ease-in-out infinite;transition:filter .3s}
.brand:hover .crest-img{filter:drop-shadow(0 0 10px rgba(224,184,85,.85)) drop-shadow(0 0 20px rgba(224,184,85,.5))}
.logo-txt .ro,.logo-txt .ta,.logo-txt .ku{color:var(--ink)}


.navlinks{display:flex;gap:34px;align-items:center;flex-shrink:0;margin-right:auto}
.navlinks>a,.nav-drop>button{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#c9bda9;transition:.2s;display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:inherit}
.navlinks>a:hover .nav-ic,.nav-drop>button:hover .nav-ic{opacity:1}
/* opción activa (página actual) */
.navlinks>a.active .nav-ic,.nav-drop>button.active .nav-ic{opacity:1}

.nav-ic{display:none}
.navlinks>a:hover .nav-ic{opacity:1}
/* dropdown de rankings */
.nav-drop{position:relative}
.nav-drop-menu{position:absolute;top:calc(100% + 22px);left:calc(50% - 8px);transform:translateX(-50%) translateY(-8px);background:rgba(17,17,17,.97);border:1px solid rgba(212,168,67,.15);border-radius:12px;min-width:210px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s;box-shadow:0 18px 44px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.03);z-index:60;padding:6px}
.nav-drop-menu::after{content:"";position:absolute;top:-22px;left:0;right:0;height:22px;background:transparent}


.nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{display:block;padding:11px 16px;color:#c9bda9;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;border-radius:8px;transition:background .18s,color .18s;position:relative;text-align:center}
.nav-drop-menu a{position:relative}
.nav-drop-menu a::before{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#d4a843,transparent);opacity:0;transition:opacity .28s;pointer-events:none}
.nav-drop-menu a:hover{color:#e0b855;text-shadow:0 0 10px rgba(224,184,85,.7)}
.nav-drop-menu a:hover::before{opacity:1}
.nav-drop-menu a:not(:last-child)::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);pointer-events:none}


/* Botones de icono (Register/Login/My Account/Logout) */
.icon-btn{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);position:relative;border:none;flex-shrink:0}
.icon-btn svg{width:20px;height:20px}
.icon-btn[data-tip]{position:relative}
.icon-btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);background:rgba(17,17,17,.97);color:#c9bda9;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:5px 10px;border-radius:6px;white-space:nowrap;border:1px solid rgba(212,168,67,.15);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;pointer-events:none;z-index:120}
.icon-btn[data-tip]:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.icon-btn-gold{background:none;color:#e8e0cc;border:none}
.icon-btn-gold:hover{color:var(--accent)}
.icon-btn-ghost{background:none;color:#e8e0cc;border:none}
.icon-btn-ghost:hover{color:var(--accent)}

.icon-btn svg{position:relative;z-index:2}

/* Tooltip */


/* Iconos móviles (junto al hamburguesa) */
.mobile-icons{display:none;align-items:center;gap:7px;margin-left:auto;margin-right:0}
.mobile-icons .icon-btn{width:29px;height:29px}
.mobile-icons .icon-btn svg{width:20px;height:20px}

.mobile-icons form{display:flex}


/* ===== Menú: efecto split (nombre partido + línea al centro, SOLO en el texto) ===== */
.navlinks>a,.nav-drop>button{position:relative}
.navlinks>a:hover,.nav-drop>button:hover{color:#e0b855;text-shadow:0 0 10px rgba(224,184,85,.7)}
.navlinks>a::after{content:"";position:absolute;left:15%;right:15%;bottom:-2px;height:1px;background:linear-gradient(90deg,transparent,#d4a843,transparent);opacity:0;transition:opacity .28s;pointer-events:none}
.navlinks>a:hover::after{opacity:1}
/* En botones con submenú, la línea va SOLO bajo el nombre (no la flecha) */
.nav-drop>button span[data-i18n]{position:relative}
.nav-drop>button span[data-i18n]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:linear-gradient(90deg,transparent,#d4a843,transparent);opacity:0;transition:opacity .28s;pointer-events:none}
.nav-drop>button:hover span[data-i18n]::after,.nav-drop:hover>button span[data-i18n]::after{opacity:1}
/* contenedor del texto partido (la línea va DENTRO, solo cubre el texto) */
.nav-split{position:relative;display:inline-block;line-height:1.1}
/* Split desactivado: mostrar solo el texto base, ocultar capas que se separan */
.nav-split .ns-top,.nav-split .ns-bot,.nav-split .nav-line{display:none!important}
.nav-split .ns-base{visibility:visible!important}
.navlinks>a:hover .ns-top,.nav-drop>button:hover .ns-top,.navlinks>a:hover .ns-bot,.nav-drop>button:hover .ns-bot,.nav-drop-menu a:hover .ns-top,.nav-drop-menu a:hover .ns-bot{transform:none!important}
/* HOVER: partir el nombre poquito + mostrar línea corta */
.navlinks>a:hover .ns-top,.nav-drop>button:hover .ns-top{transform:translateX(-2px)}
.navlinks>a:hover .ns-bot,.nav-drop>button:hover .ns-bot{transform:translateX(2px)}
.navlinks>a:hover .nav-line,.nav-drop>button:hover .nav-line{width:calc(100% + 6px);opacity:.85}
/* Item ACTIVO: color dorado apagado, se mantiene en hover */
.navlinks>a.active,.nav-drop>button.active{color:#d4a843}
.navlinks>a.active .nav-ic,.nav-drop>button.active .nav-ic{opacity:1}
.navlinks>a.active .nav-line,.nav-drop>button.active .nav-line{background:#d4a843}
/* Subitems del dropdown: MISMO efecto split (línea al centro del texto) */
.nav-drop-menu a .nav-split .nav-line{background:#d4a843;height:1px}
.nav-drop-menu a .nav-split{display:inline-block;position:relative;width:fit-content;flex:0 0 auto}
.nav-drop-menu a:hover .ns-top{transform:translateX(-2px)}
.nav-drop-menu a:hover .ns-bot{transform:translateX(2px)}
.nav-drop-menu a:hover .nav-line{width:calc(100% + 6px);opacity:.85}
.nav-drop-menu a.active{color:#d4a843}
/* 3 puntitos centrados bajo el nombre (truco box-shadow de GodLike) */
.nav-caret{display:inline-flex;align-items:center;color:var(--muted);transition:transform .25s,color .2s;text-shadow:none!important}
.nav-caret svg{width:13px;height:13px;display:block}
.nav-drop:hover>button .nav-caret,.nav-drop>button:hover .nav-caret{transform:rotate(180deg);color:var(--accent);text-shadow:none!important}
.nav-drop>button.active .nav-caret{color:var(--accent);text-shadow:none!important}
.nav-drop .drop-arrow{position:absolute;left:calc(50% - 8px);top:calc(100% + 16px);transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:rgba(17,17,17,.97);border-left:1px solid rgba(212,168,67,.15);border-top:1px solid rgba(212,168,67,.15);border-radius:2px 0 0 0;opacity:0;visibility:hidden;transition:opacity .2s;z-index:61;pointer-events:none}
.nav-drop:hover .drop-arrow{opacity:1;visibility:visible}



.nav-cta{display:flex;gap:16px;align-items:center;margin-left:auto;flex-shrink:0}
.btn{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:12px 24px;border-radius:6px;border:none;transition:all .25s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;position:relative;overflow:hidden;cursor:pointer}
.btn-gold{background:var(--accent);color:#0a0a0a}
.btn-gold::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-gold:hover::after{left:130%}
.btn-gold:hover{background:var(--accent-bright)}
.btn-ghost{background:transparent;color:#f0dcb4;border:1.5px solid #4d3a23}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-bright)}
.btn-sm{padding:10px 16px;font-size:13px;font-weight:700;min-width:150px;justify-content:center}
.nav-cta .lang{position:relative}
.nav-cta .lang::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:1px;height:26px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent)}
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;background:none;border:none;padding:8px 11px;border-radius:8px;color:#c9bda9;font-size:15px;font-weight:500;transition:.2s;position:relative}
.lang-globe{width:17px;height:17px;flex-shrink:0;color:#c9bda9;transition:color .2s}
.lang:hover .lang-globe{color:#e0b855;filter:drop-shadow(0 0 6px rgba(224,184,85,.6))}
.lang:hover .lang-btn{color:#e0b855;text-shadow:0 0 10px rgba(224,184,85,.7)}
.lang-btn .lang-caret{display:inline-flex;align-items:center;margin-left:3px;color:currentColor;transition:transform .25s,color .2s}
.lang-btn .lang-caret svg{width:13px;height:13px;display:block}
.lang:hover .lang-caret{color:var(--accent);transform:rotate(180deg)}
.lang.just-picked .lang-caret{transform:rotate(0)}
.lang .lang-arrow{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:rgba(17,17,17,.97);border-left:1px solid rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);border-radius:2px 0 0 0;opacity:0;visibility:hidden;transition:opacity .2s;z-index:51;pointer-events:none}
.lang:hover .lang-arrow{opacity:1;visibility:visible}


.lang-btn>*{position:relative;z-index:2}

.lang-btn .flag{width:20px;height:14px;border-radius:2px;object-fit:cover}
.lang-menu{position:absolute;top:calc(100% + 18px);right:0;background:rgba(17,17,17,.97);border:1px solid rgba(212,168,67,.15);border-radius:12px;min-width:210px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility .22s;box-shadow:0 18px 44px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.03);z-index:50;padding:6px}
.lang-menu::after{content:"";position:absolute;top:-18px;left:0;right:0;height:18px;background:transparent}

.lang-menu.open,.lang:hover .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang.just-picked .lang-menu{opacity:0!important;visibility:hidden!important;transform:translateY(-8px)!important}
.lang.just-picked .lang-menu button:hover{background:none;color:#c9bda9}
.lang.just-picked .lang-menu button.active:hover{color:var(--accent)}
.lang.just-picked .lang-btn,.lang.just-picked .lang-globe{color:#c9bda9}
.lang.just-picked,.lang.just-picked *{cursor:default!important}
.lang.just-picked .lang-caret{color:#c9bda9}
.lang-menu button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:11px 14px;background:none;border:none;color:#c9bda9;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;border-radius:8px;transition:background .18s,color .18s;cursor:pointer;position:relative;text-align:center;white-space:nowrap}
.lang-menu button:hover{color:#e0b855;text-shadow:0 0 10px rgba(224,184,85,.7)}
.lang-menu button::before{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#d4a843,transparent);opacity:0;transition:opacity .28s;pointer-events:none}
.lang-menu button:hover::before{opacity:1}
.lang-menu button:not(:last-child)::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);pointer-events:none}

.lang-menu button.active{color:#d4a843}
.lang-menu button .flag{width:22px;height:15px}
.flag{width:30px;height:20px;border-radius:3px;display:inline-block;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.3);overflow:hidden;vertical-align:middle}
.flag svg{display:block;width:100%;height:100%}
/* hamburger */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;cursor:pointer;margin-left:auto}
.m-lang{display:none}
.mobile-panel{display:none}
.burger span{width:26px;height:3px;background:#fff;border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
main{flex:1;display:flex;flex-direction:column}
footer{background:var(--bg2);border-top:1px solid var(--line);padding:44px 0 30px;margin-top:auto}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.foot-left{display:flex;flex-direction:column;gap:20px}
.foot-links-row{display:flex;align-items:center;flex-wrap:wrap;gap:5px 11px}
.foot-links-row a{color:var(--ink);font-size:13.5px;transition:.2s;opacity:.82;white-space:nowrap}
.foot-links-row a:hover{color:var(--accent-bright);opacity:1}
.foot-sep{color:var(--faint);opacity:.35;font-size:12px;user-select:none}
.foot-logo-link{display:inline-block;width:fit-content}
.foot-logos{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.foot-logo{height:64px;width:auto;max-width:100%;display:block}
.foot-logo-kafra{height:40px;width:auto;max-width:100%;display:block;opacity:.92}
.foot-copy{color:var(--faint);font-size:12.5px;line-height:1.7;font-weight:500}
.foot-copy p{margin:2px 0}
.foot-social{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0}
.foot-social h4{font-family:'Cinzel',serif;font-size:14px;color:var(--accent-bright);text-transform:uppercase;letter-spacing:.04em;margin:0}
.foot-social-icons{display:flex;gap:14px}
.foot-social-icons a{color:var(--muted);transition:.2s;display:inline-flex}
.foot-social-icons a:hover{color:var(--accent-bright);transform:translateY(-2px)}
.foot-social-icons svg{width:24px;height:24px}
/* MOBILE */
@media(max-width:960px){
  .nav{padding:0 16px 0 20px;gap:12px}
  .burger{display:flex}
  .nav-desktop{display:none}
  /* Menú a PANTALLA COMPLETA, entra deslizando desde la IZQUIERDA */
  .mobile-panel{display:block;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;min-height:100vh;min-height:100dvh;
    background:rgba(10,10,10,.9);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:150;
    transform:translateX(-100%);visibility:hidden;
    transition:transform .35s cubic-bezier(.4,0,.2,1),visibility .35s;
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobile-panel.open{transform:translateX(0);visibility:visible}
  /* Logo arriba centrado */
  .m-logo{display:flex;justify-content:center;padding:26px 24px 0}
  .m-logo img{width:120px;max-width:42%;height:auto;display:block;margin-left:-14px}
  /* Decoración que separa el logo del menú */
  .m-divider{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 0 10px}
  .mobile-panel>.m-divider{margin:0 24px}
  .m-divider::before,.m-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,67,.45),transparent)}
  .m-divider i{width:6px;height:6px;background:var(--accent);transform:rotate(45deg);flex-shrink:0;display:block}
  .mobile-inner{padding:4px 24px 40px;display:flex;flex-direction:column;gap:0;position:relative;box-sizing:border-box}
  /* Botón X para cerrar, arriba a la derecha */
  .m-close{position:fixed;top:22px;right:20px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:#c9bda9;z-index:151;padding:0}
  .m-close svg{width:26px;height:26px;display:block}
  .m-close:hover{color:var(--accent-bright)}
  body.menu-open{overflow:hidden}
  body.menu-open header{opacity:0;pointer-events:none}
  /* Acordeón mobile */
  .m-item{position:relative;display:flex;align-items:center;justify-content:center;width:100%;margin:0;padding:16px 8px;line-height:20px;color:#c9bda9;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;background:none;border:none;text-align:center;font-family:inherit;box-sizing:border-box;-webkit-appearance:none;appearance:none}
  /* Línea separadora IGUAL para todos los items */
  .m-row,.m-acc{width:100%;display:block;position:relative}
  /* Separador identico para TODAS las opciones (con y sin submenu) */
  .m-langrow{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 0 4px;flex-wrap:wrap}
  .m-langrow button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#8a8074;padding:4px 2px;transition:color .2s,text-shadow .2s}
  .m-langrow button.active{color:var(--accent-bright)}
  .m-langrow button:hover{color:var(--accent-bright);text-shadow:0 0 10px rgba(224,184,85,.6)}
  .m-langdot{color:#4a453c;font-size:13px}
  .m-social{display:flex;align-items:center;justify-content:center;gap:22px;padding:14px 0 4px}
  .m-social a{color:#8a8074;display:flex;transition:color .2s,transform .2s}
  .m-social svg{width:21px;height:21px;display:block}
  .m-social a:hover{color:var(--accent-bright);transform:translateY(-2px)}
  .m-sep{width:100%;height:1px;min-height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,67,.3),transparent);flex:0 0 1px;transform:translateZ(0)}
  /* La ultima opcion del menu no lleva linea */


  .m-item.active{color:var(--accent-bright)}
  /* El nombre se centra solo; la flecha va absoluta para no descentrarlo */
  .m-label{position:relative;display:inline-block}
  .m-hasdots{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:3px;display:inline-flex;align-items:center;color:var(--muted);transition:transform .25s,color .2s}
  .m-hasdots svg{width:14px;height:14px;display:block}
  .m-acc.open .m-acc-btn .m-hasdots{transform:translateY(-50%) rotate(180deg);color:var(--accent-bright)}
  /* Cuerpo del acordeón: oculto, se expande al abrir */
  .m-acc-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}
  .m-acc-body>*{min-width:0}
  .m-acc-inner{min-height:0;overflow:hidden}
  .m-acc.open .m-acc-body{grid-template-rows:1fr}
  .m-acc-inner{padding:2px 0 8px}
  .m-acc-body a{position:relative;display:flex;align-items:center;justify-content:center;padding:12px 8px;line-height:18px;color:#8a8074;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}


  .m-acc-body a.active{color:var(--accent-bright)}
  /* El último elemento del menú NO lleva línea (la aporta mobile-auth) */


  .mobile-auth{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:20px;position:relative;justify-content:center}
  .mobile-auth{margin-top:0;padding-top:14px}
  .mobile-auth .auth-btn{flex:0 1 auto;min-width:140px;max-width:180px;justify-content:center;height:46px}
  .mobile-auth .m-auth-form{flex:0 1 auto;min-width:140px;max-width:180px;margin:0;display:flex}
  .mobile-auth .m-auth-form .auth-btn{width:100%}
  .m-auth-btn{flex:1 1 165px;min-width:165px;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;border-radius:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;cursor:pointer;white-space:nowrap;box-sizing:border-box;isolation:isolate}
  .m-auth-btn svg{width:16px;height:16px;flex-shrink:0;position:relative;z-index:1}
  .m-auth-form{margin:0;flex:1 1 165px;min-width:165px;display:inline-flex;max-width:100%}
  .m-auth-form .m-auth-btn{width:100%}
  .m-auth-btn span{white-space:nowrap;position:relative;z-index:1}
  .m-auth-gold{background:var(--accent);color:#0a0a0a;border:none;clip-path:inset(0 round 8px)}
  .m-auth-gold::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease;border-radius:inherit;z-index:0;pointer-events:none}
  .m-auth-gold:hover::after{left:130%}
  .m-auth-gold:hover{background:var(--accent-bright)}
  .m-auth-ghost{background:rgba(17,17,17,.9);color:#e8e0cc;border:1.5px solid rgba(255,255,255,.2)}
  .m-auth-ghost:hover{background:rgba(25,21,17,.95);border-color:var(--accent);color:var(--accent-bright)}
  /* Ocultar la vieja barra de idioma dentro del menú (ya no existe) */
  .mobile-lang{display:none}

  /* Selector de idioma mobile (globo) al lado del hamburguer */
  .m-lang{display:block;position:relative;margin-left:auto}
  .m-lang-caret{display:inline-flex;align-items:center;margin-left:2px;color:var(--muted);transition:transform .25s}
  .m-lang-caret svg{width:13px;height:13px;display:block}
  .m-lang.open .m-lang-caret{transform:rotate(180deg)}
  .m-lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;
    padding:8px 0;border-radius:8px;color:#e8e0cc;font-size:15px;font-weight:600;cursor:pointer}
  .m-lang-btn svg{width:18px;height:18px;color:var(--muted)}
  .m-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;
    background:rgba(17,17,17,.97);border:1px solid rgba(212,168,67,.15);border-radius:10px;
    padding:6px;box-shadow:0 18px 44px -12px rgba(0,0,0,.8);z-index:120;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s,transform .2s,visibility .2s}
  .m-lang-arrow{position:absolute;top:-6px;right:16px;width:12px;height:12px;
    background:rgba(17,17,17,.97);border-left:1px solid rgba(212,168,67,.15);
    border-top:1px solid rgba(212,168,67,.15);transform:rotate(45deg);border-radius:2px 0 0 0;pointer-events:none}
  .m-lang-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
  .m-lang-menu button{display:block;width:100%;text-align:center;padding:11px 14px;
    background:none;border:none;border-radius:7px;color:#c9bda9;font-size:13.5px;font-weight:600;
    cursor:pointer;font-family:inherit;transition:background .18s,color .18s;position:relative}
  .m-lang-menu button:not(:last-child)::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);pointer-events:none}
  .m-lang-menu button:hover{background:rgba(212,168,67,.1);color:var(--accent)}
  .m-lang-menu button.active{color:var(--accent)}

  /* El hamburguer ya no empuja con margin-left (lo hace el m-lang) */
  .burger{margin-left:auto;margin-right:10px}
  .brand{margin-left:10px}

  /* Opciones del menú hamburguer CENTRADAS */
  .m-item{justify-content:center;text-align:center}
  .m-acc-body a{text-align:center}
}
@media(max-width:768px){.foot-grid{flex-direction:column;gap:24px;align-items:center;text-align:center}.foot-left{display:contents}.foot-links-row{order:1;justify-content:flex-start}.foot-logos{justify-content:center;gap:20px;order:2}.foot-social{align-items:center;order:3}.foot-copy{text-align:center;order:4}.foot-logo{height:52px}.foot-logo-kafra{height:34px}}



/* ===== PAGE BORDER (imágenes del theme GodLike) ===== */
.nk-page-border div{position:fixed;pointer-events:none;user-select:none;background-size:100% 100%;z-index:2000}
.nk-page-border .pb-t,.nk-page-border .pb-b{left:0;width:100%;height:100px}
.nk-page-border .pb-t{top:0;background-image:url('/theme/images/border-top.png')}
.nk-page-border .pb-b{bottom:0;background-image:url('/theme/images/border-bottom.png')}
.nk-page-border .pb-r,.nk-page-border .pb-l{top:0;width:100px;height:100%}
.nk-page-border .pb-r{right:0;background-image:url('/theme/images/border-right.png')}
.nk-page-border .pb-l{left:0;background-image:url('/theme/images/border-left.png')}
@media(max-width:500px){.nk-page-border .pb-t,.nk-page-border .pb-b{height:50px}.nk-page-border .pb-r,.nk-page-border .pb-l{width:50px}}
/* ===== PRELOADER DE FUEGO (sprite real del theme) ===== */
#preloader{position:fixed;inset:0;z-index:3000;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .4s ease,visibility .4s ease;overflow:hidden}
#preloader.done{opacity:0;visibility:hidden}
/* La capa de fuego: sprite de 23 frames (16352x400, cada frame 710x400).
   Se anima con steps(22) moviendo el background de derecha a izquierda. */
.pl-fire{position:absolute;inset:0;background-image:url('/theme/images/preloader-bg.png');background-repeat:no-repeat;background-size:2300% 100%;background-position:100% 50%;z-index:1;opacity:0}
.pl-content{position:relative;z-index:2;text-align:center;transition:opacity .35s ease;flex-shrink:0;width:100%;max-width:520px}
.pl-logo{width:200px;max-width:58vw;height:auto;flex-shrink:0;margin:0 auto 24px;display:block;transform:translateX(-9px);filter:none;box-shadow:none}
.pl-dots{display:flex;gap:9px;justify-content:center}
.pl-dots span{width:7px;height:7px;border-radius:50%;background:#fff;animation:pldot 1.4s ease-in-out infinite}
.pl-dots span:nth-child(2){animation-delay:.2s}.pl-dots span:nth-child(3){animation-delay:.4s}
@keyframes pldot{0%,60%,100%{opacity:.25;transform:scale(.8)}30%{opacity:1;transform:scale(1.2)}}
/* APERTURA (revelar la web con fuego): logo desaparece, luego fuego color 100->0 revela */
#preloader.revealing .pl-content{opacity:0}
#preloader.revealing .pl-fire{opacity:1;animation:plreveal 1.2s steps(22) forwards}
@keyframes plreveal{from{background-position:100% 50%}to{background-position:0% 50%}}
/* CIERRE al navegar (tapar la web con fuego b&w 0->100) */
#preloader.covering{opacity:1;visibility:visible}
#preloader.covering .pl-content{opacity:0}
#preloader.covering .pl-fire{opacity:1;background-image:url('/theme/images/preloader-bg-bw.png');background-position:0% 50%;animation:plcover 1s steps(22) forwards}
@keyframes plcover{from{background-position:0% 50%}to{background-position:100% 50%}}
.pl-skip{position:absolute;right:40px;bottom:40px;color:#8a7f74;font-size:13px;cursor:pointer;z-index:3;transition:.2s;font-family:'Cinzel',serif}
.pl-skip:hover{color:#e0b855}

/* Botón subir arriba */
.scroll-top{position:fixed;bottom:24px;right:24px;width:40px;height:40px;border-radius:11px;background:#15110d;color:#fff;border:2px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease,visibility .3s,box-shadow .2s;box-shadow:0 6px 18px -6px rgba(0,0,0,.6);z-index:90;overflow:hidden}
.scroll-top svg{width:19px;height:19px;position:relative;z-index:2}
.scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top.visible:hover{transform:translateY(-4px)}
@media(max-width:600px){.scroll-top{bottom:18px;right:18px;width:38px;height:38px}}

/* ============================================================
   SISTEMA DE SUBPAGINAS  —  v100
   Base compartida por todas las subpaginas (server info, shop,
   rankings, login, panel...). Las subpaginas NO redefinen colores
   ni tipografia: usan estas clases y solo aportan su layout.

   ROLES DE COLOR (importante):
     ambar  -> accion principal. UNO por vista.
     crema  -> titulos y valores. (Antes eran ambar = ruido)
     piedra -> etiquetas y texto de apoyo.
     verde  -> online / activo / ok
     rojo   -> offline / error
     azul   -> info neutra, tags
   ============================================================ */

:root{
  --steel:#5b7c99;--steel-soft:#7d9bb5;--steel-bg:rgba(91,124,153,.12);
  --ok-bg:rgba(93,176,117,.12);--off-bg:rgba(181,80,74,.12);
  --line-soft:#241d18;
}

/* ---- Contenedor de subpagina ---- */
.pg{padding-top:104px;padding-bottom:72px;min-height:100vh}
.pg-inner{max-width:1280px;margin:0 auto;padding:0 24px;width:100%}
.pg-narrow{max-width:760px}

/* ---- Cabecera de pagina (igual en todas) ---- */
.pg-head{text-align:center;margin-bottom:38px}
.pg-title{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(26px,4vw,38px);
  color:var(--ink);letter-spacing:.03em;margin:0}
.pg-title em{font-style:normal;color:var(--accent)}
.pg-rule{width:54px;height:2px;background:var(--accent);margin:12px auto 0;border-radius:2px}
.pg-sub{color:var(--muted);font-size:14px;margin:14px auto 0;max-width:560px;line-height:1.6}

/* ---- Panel ---- */
.pnl{background:linear-gradient(180deg,rgba(39,31,24,.6),rgba(30,24,19,.66));
  backdrop-filter:blur(4px);
  border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.pnl-t{font-family:'Cinzel',serif;font-size:19px;font-weight:700;color:var(--ink);
  letter-spacing:.04em;margin:0 0 16px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}

/* ---- Tarjeta de estadistica ---- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:22px}
.stat-c{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:12px;padding:16px 12px;text-align:center;transition:border-color .2s}
.stat-c:hover{border-color:#4a3c2e}
.stat-k{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.stat-v{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:var(--ink);line-height:1}
.stat-c.hot .stat-v{color:var(--accent-bright)}
.stat-u{font-size:11px;color:var(--faint);margin-top:5px}

/* ---- Tabla de datos (filas etiqueta/valor) ---- */
.dl{width:100%;border-collapse:collapse}
.dl tr{border-bottom:1px solid var(--line-soft)}
.dl tr:last-child{border-bottom:none}
.dl td{padding:13px 0;font-size:14.5px;vertical-align:top}
.dl td:first-child{color:var(--muted);width:44%}
.dl td:last-child{text-align:right;color:var(--ink);font-family:'JetBrains Mono',monospace}
.dl .tbd{color:var(--faint);font-style:italic;font-family:'Inter',sans-serif;font-size:12px}
.dl .note{display:block;color:var(--faint);font-size:11px;font-family:'Inter',sans-serif;
  margin-top:3px;text-align:right;font-style:normal}

/* ---- Layout con barra lateral ---- */
.pg-split{display:block}
.pg-split{display:block}
.side{position:static;width:auto;
  display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;
  background:linear-gradient(180deg,rgba(24,19,16,.7),rgba(15,11,8,.6));
  border:1px solid rgba(224,136,33,.2);border-radius:12px;
  padding:8px;margin-bottom:20px;overflow-x:auto;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.side a{position:relative;display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:8px;
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;white-space:nowrap;
  transition:all .18s;cursor:pointer}
.side a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.side a.on{color:var(--accent-bright);background:linear-gradient(180deg,rgba(224,136,33,.15),rgba(224,136,33,.04));
  font-weight:600}
.side a svg{width:17px;height:17px;flex-shrink:0}
.side svg{width:17px;height:17px;flex-shrink:0}

/* ---- Chips de estado ---- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:5px;
  font-size:11px;font-weight:600;letter-spacing:.03em;font-family:'Inter',sans-serif}
.chip-ok{background:var(--ok-bg);color:var(--ok)}
.chip-off{background:var(--off-bg);color:var(--off)}
.chip-info{background:var(--steel-bg);color:var(--steel-soft)}
.chip-warn{background:rgba(232,154,60,.12);color:var(--gold)}

/* ---- Boton secundario neutro (NO dorado: baja el ruido) ---- */
.btn-quiet{background:transparent;color:var(--muted);border:1.5px solid #3a3029}
.btn-quiet:hover{color:var(--ink);border-color:#5a4c3e;background:rgba(255,255,255,.03)}

/* ---- Responsive ---- */
@media(max-width:860px){
  .side{padding:6px;gap:4px}
  .side a{padding:9px 13px;font-size:13px}
}
@media(max-width:600px){
  .pg{padding-top:88px}
  .pg-inner{padding:0 16px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .stat-v{font-size:21px}
  .dl td{font-size:13.5px}
}

/* ---- Scroll a anclas: sin quedar bajo el header ----
   El header es fijo (84px) y el navegador dejaba el <section> en top:0,
   asi que el titulo quedaba tapado. scroll-margin-top lo compensa.

   El desplazamiento suave NO se hace aqui: scroll-behavior solo aplica al
   elemento que scrollea, y aqui scrollea el documento, no .pg. Ponerlo en
   html{} global romperia home.blade.php, que usa scrollTo({top:0}) sin
   behavior y espera un salto instantaneo al cambiar de vista.
   Por eso el smooth va en el JS de cada subpagina (ver info/server.blade.php),
   que ademas respeta prefers-reduced-motion. */
.pg section[id]{scroll-margin-top:104px}
@media(max-width:860px){.pg section[id]{scroll-margin-top:88px}}

/* ---- Paneles como pestañas ----
   Solo se muestra la seccion activa. La barra lateral pasa a ser
   navegacion real y la pagina deja de medir 5 pantallas.

   Progresivo a proposito: la clase .tabs la pone el JS sobre el
   contenedor. Si el JS no carga (o falla), NINGUNA regla de aqui
   aplica y se ven todas las secciones apiladas: contenido visible
   siempre, nunca una pagina en blanco. */
.tabs > section[id]{display:none}
.tabs > section[id].show{display:block;animation:tab-in .22s ease-out}
@keyframes tab-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .tabs > section[id].show{animation:none}
}
/* Con pestañas no hay scroll entre secciones: el margen ya no hace falta. */
.tabs > section[id]{scroll-margin-top:0}

/* ---- Tarjeta compacta (dentro de un panel) ----
   Para grupos de valores cortos tipo rates. Los datos con texto largo
   van en .dl (tabla), que los maneja mejor. */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.mini{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:14px 10px;text-align:center;transition:border-color .2s}
.mini:hover{border-color:#4a3c2e}
.mini-k{font-size:11.5px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-bottom:7px}
.mini-v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--ink);line-height:1.1}
.mini-v.tbd{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400;
  color:var(--faint);font-style:italic;padding:5px 0}

/* Botonera al pie de una subpagina */
.si-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}

/* ---- Movil: componentes nuevos de subpagina ---- */
@media(max-width:600px){
  /* 2 columnas fijas: auto-fit con minmax(128px) dejaba 1 sola en pantallas
     angostas y las tarjetas quedaban enormes. */
  .mini-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .mini{padding:12px 8px}
  .mini-v{font-size:19px}
  .mini-k{font-size:10.5px;letter-spacing:.05em}
  .mini-v.tbd{font-size:11.5px}

  /* Botones al ancho completo: apilados se ven mejor que estirados. */
  .si-cta{flex-direction:column;gap:8px}
  .si-cta .btn{width:100%;justify-content:center}

  /* La tabla necesita mas aire para la etiqueta cuando hay nota debajo. */
  .dl td:first-child{width:48%}
  .dl .note{font-size:10.5px}

  /* Titulo de panel proporcional al ancho. */
  .pnl-t{font-size:17px}
  .pnl{padding:16px 14px}
}

/* Pantallas muy angostas (360px y menos) */
@media(max-width:380px){
  .mini-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr;gap:7px}
  .dl td{font-size:12.5px}
}

/* Barra lateral en movil: la pestaña activa se centra sola al tocarla */
@media(max-width:860px){
  .side{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
  .side::-webkit-scrollbar{height:3px}
  .side::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
}

/* ============================================================
   ATMOSFERA DE SUBPAGINA
   Fondo compartido por todas las subpaginas: gradientes + brasas.
   CSS puro, 0 KB de imagenes.

   Deliberadamente MAS TENUE que el hero del home: aqui la gente
   viene a leer datos, no a mirar el paisaje. El fondo acompaña,
   no compite.
   ============================================================ */
.pg{position:relative;isolation:isolate}

/* Capa de gradientes. Fija: no se mueve al hacer scroll. */
.pg::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(224,136,33,.10), transparent 60%),
    radial-gradient(circle at 12% 88%, rgba(91,124,153,.05), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(224,136,33,.045), transparent 38%);
}

/* Viñeta: oscurece los bordes y empuja la vista al centro. */
.pg::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, rgba(10,8,7,.5));
}

/* Brasas: mismo efecto del hero pero menos y mas tenues. */
.pg-embers{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pg-ember{position:absolute;bottom:-12px;border-radius:50%;
  background:var(--ember);box-shadow:0 0 6px 1.5px rgba(200,133,58,.4);
  animation:pg-rise linear infinite;opacity:0}
@keyframes pg-rise{
  0%{transform:translateY(0) scale(1);opacity:0}
  12%{opacity:.45}
  88%{opacity:.2}
  100%{transform:translateY(-100vh) scale(.3);opacity:0}
}

/* Los paneles se opacan un poco para separarse del fondo. */
.pg .pnl,.pg .stat-c{backdrop-filter:blur(2px)}

/* Accesibilidad: sin animacion si el usuario la desactivo en su SO. */
@media(prefers-reduced-motion:reduce){
  .pg-ember{animation:none;opacity:0}
}

/* Movil: menos brasas (bateria) y viñeta mas suave. */
@media(max-width:600px){
  .pg::after{background:radial-gradient(ellipse 85% 85% at 50% 50%, transparent 60%, rgba(10,8,7,.35))}
  .pg .pnl,.pg .stat-c{backdrop-filter:none}
}

/* ============================================================
   BOTONES COMPARTIDOS  —  .hbtn
   Movidos aqui desde home.blade.php para que el MISMO boton
   (con su brillo deslizante) exista en todas las subpaginas.
   Antes vivian solo en el home y las subpaginas no los tenian.

   .hbtn-gold  -> accion principal. UNO por vista.
   .hbtn-ghost -> secundaria.
   ============================================================ */
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:12px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);text-decoration:none;
  text-align:center;position:relative;overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;border:none}
.hbtn svg{width:18px;height:18px;flex-shrink:0;position:relative;z-index:1;
  pointer-events:none;-webkit-user-drag:none}
.hbtn span{position:relative;z-index:1}

.hbtn-gold{background:var(--accent);color:#0a0a0a;border:none;clip-path:inset(0 round 12px)}
/* Brillo que barre el boton al pasar el mouse. */
.hbtn-gold::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .6s ease;z-index:0;pointer-events:none}
.hbtn-gold:hover::after{left:130%}
.hbtn-gold:hover{background:var(--accent-bright)}

.hbtn-ghost{background:rgba(17,17,17,.9);color:#e8e0cc;border:1.5px solid rgba(255,255,255,.2)}
.hbtn-ghost:hover{background:rgba(25,21,17,.95);border-color:var(--accent);color:var(--accent-bright)}

/* Deshabilitado: sin brillo ni hover. */
.hbtn:disabled,.hbtn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.hbtn:disabled::after,.hbtn[aria-disabled="true"]::after{display:none}
.hbtn-block{width:100%}

/* Accesibilidad: foco visible al navegar con teclado. */
.hbtn:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .hbtn-gold::after{transition:none;display:none}
}

/* ============================================================
   FORMULARIOS  —  compartido por login, registro, reset...
   ============================================================ */
.form-card{max-width:540px;margin:0 auto;
  background:linear-gradient(180deg,rgba(39,31,24,.6),rgba(30,24,19,.66));
  backdrop-filter:blur(4px);
  border:1px solid var(--line);border-radius:16px;padding:32px 28px;
  box-shadow:var(--shadow)}
.form-card .pg-head{margin-bottom:26px}
/* Fila de dos columnas para el registro (se apila en movil) */
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.fld-row{grid-template-columns:1fr;gap:0}}

.fld{margin-bottom:16px}
.fld-l{display:block;font-size:12px;font-weight:600;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px}
.fld-i{width:100%;background:var(--bg);border:1.5px solid var(--line);
  border-radius:9px;padding:12px 14px;color:var(--ink);font-size:14.5px;
  font-family:'Inter',system-ui,sans-serif;transition:border-color .2s,background .2s}
.fld-i::placeholder{color:var(--faint)}
.fld-i:focus{outline:none;border-color:var(--accent);background:var(--bg2)}
.fld-i:disabled{opacity:.5;cursor:not-allowed}
/* Campo con error */
.fld-i.bad{border-color:var(--off)}
.fld-e{display:block;color:var(--off);font-size:12px;margin-top:6px}

/* Input con boton dentro (ojo de ver contraseña) */
.fld-wrap{position:relative}
.fld-wrap .fld-i{padding-right:44px}
.fld-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--faint);cursor:pointer;padding:8px;
  display:flex;align-items:center;border-radius:6px;transition:color .2s}
.fld-eye:hover{color:var(--muted)}
.fld-eye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fld-eye svg{width:18px;height:18px}

/* Fila: recordarme / olvidé mi contraseña */
.login-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:20px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13px;color:var(--muted);user-select:none}
.chk input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0}
.lnk{color:var(--muted);font-size:13px;text-decoration:none;transition:color .2s}
.lnk:hover{color:var(--accent-bright)}

/* Pie del formulario: "¿no tienes cuenta?" */
.form-foot{text-align:center;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.form-foot a{color:var(--accent);text-decoration:none;font-weight:600}
.form-foot a:hover{color:var(--accent-bright)}

/* Avisos (error de login, sesion expirada, etc) */
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border-radius:9px;font-size:13.5px;line-height:1.5;margin-bottom:18px}
.alert svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.alert-err{background:var(--off-bg);color:#e08b84;border:1px solid rgba(181,80,74,.3)}
.alert-ok{background:var(--ok-bg);color:#7cc492;border:1px solid rgba(93,176,117,.3)}
.alert-info{background:var(--steel-bg);color:var(--steel-soft);border:1px solid rgba(91,124,153,.3)}

@media(max-width:600px){
  .form-card{padding:24px 18px;border-radius:14px}
  .fld-row{gap:10px}
}

/* Pista bajo un campo de formulario */
.fld-hint{display:block;font-size:11.5px;color:var(--faint);margin-top:6px;line-height:1.4}

/* ---- Panel de cuentas de juego ---- */
.acc-credits-bar{display:inline-flex;align-items:center;gap:7px;margin:0;flex-shrink:0;
  font-size:14px;color:var(--muted);background:none;border:none;padding:0;line-height:1}
.acc-credits-bar > span{line-height:1;display:inline-flex;align-items:center}
.acc-credits-bar strong{color:#8fd3a8;font-size:14px;font-weight:700;line-height:1;
  display:inline-flex;align-items:center}
.acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:8px}
.acc-card{background:linear-gradient(165deg,#1a1510,#0d0a07);
  border:1px solid rgba(224,136,33,.5);
  border-radius:12px;padding:15px;padding-top:15px;position:relative;overflow:hidden;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.7)}
/* Tarjetas de slots COMPRADOS (4ta en adelante): estrella giratoria */
.acc-premium::after{content:"\2726";position:absolute;top:8px;right:11px;
  color:#e0a838;font-size:14px;line-height:1;pointer-events:none;
  text-shadow:0 0 8px rgba(224,136,33,.6);
  animation:accStarSpin 6s linear infinite}
@keyframes accStarSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.acc-premium::after{animation:none}}
.acc-premium .acc-credits-top{margin-right:22px}
.acc-card.active{border-color:rgba(87,199,106,.4)}
.acc-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.acc-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:17px;font-weight:700;
  background:linear-gradient(135deg,#e0a838,#a86a1a);color:#1a1105;
  box-shadow:0 0 0 2px #0d0a07,0 0 0 3.5px #e0a838}
.acc-head-info{min-width:0}
.acc-card .acc-name{font-family:Georgia,serif;font-size:15px;color:var(--ink);margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-card .acc-id{font-size:11px;color:var(--faint);font-family:monospace}
.acc-card .acc-label{font-size:12px;color:var(--muted);margin:0 0 10px}
.acc-badge{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:10px;background:rgba(87,199,106,.15);color:#7fce8c;border:1px solid rgba(87,199,106,.3)}
.acc-badge-dot{width:6px;height:6px;border-radius:50%;background:#57c76a;box-shadow:0 0 6px #57c76a}
.acc-actions{display:flex;gap:6px;margin-top:4px}
.acc-btn{font-size:11px;padding:8px 12px;border-radius:8px;cursor:pointer;text-align:center;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);transition:all .18s;
  display:inline-block;text-decoration:none}
.acc-btn:hover{color:var(--ink);border-color:var(--accent)}
.acc-btn-use{width:100%;background:rgba(224,136,33,.12);border-color:rgba(224,136,33,.3);color:var(--accent-bright)}
.acc-btn-inuse{background:rgba(87,199,106,.12);border-color:rgba(87,199,106,.3);color:#7fce8c;cursor:default;text-align:center}
.acc-btn-buy{width:100%;margin-top:10px;background:rgba(224,136,33,.15);border-color:rgba(224,136,33,.4);color:var(--accent-bright);font-weight:600}
.acc-empty{text-align:center;padding:34px 20px;color:var(--muted)}
.acc-empty svg{width:40px;height:40px;opacity:.4;margin-bottom:12px}

/* Chips de estado en ajustes (GRATIS / costo en creditos) */
.chip-ok{background:var(--ok-bg);color:var(--ok)}
.chip-cost{background:var(--accent-soft,rgba(224,136,33,.15));color:var(--accent-bright)}

/* ---- Tarjeta crear (+) y tarjeta bloqueada (comprar slot) ---- */
.acc-add,.acc-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:130px;cursor:pointer;font-family:inherit;transition:border-color .2s,background .2s;text-align:center}
.acc-add{background:transparent;border:1.5px dashed rgba(224,136,33,.35);color:var(--accent-bright)}
.acc-add:hover{border-color:var(--accent);background:rgba(224,136,33,.06)}
.acc-add-circle{width:40px;height:40px;border-radius:50%;background:rgba(224,136,33,.15);
  display:flex;align-items:center;justify-content:center}
.acc-add-circle svg{width:22px;height:22px}
.acc-add-t{font-size:12.5px;font-weight:600}
.acc-add-sub{font-size:10.5px;color:var(--muted)}
.acc-locked{background:rgba(30,24,19,.4);border:1.5px dashed rgba(120,110,100,.3);color:var(--muted)}
.acc-locked:hover{border-color:rgba(224,136,33,.4)}
.acc-lock-circle{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center}
.acc-lock-circle svg{width:20px;height:20px;color:var(--muted)}
.cp-credits{display:flex;align-items:center;justify-content:space-between;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.cp-set{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.cp-set-h{display:flex;align-items:center;gap:8px;font-family:Georgia,serif;font-size:14px;color:var(--ink)}
.cp-note{background:rgba(224,136,33,.08);border:1px solid rgba(224,136,33,.3);border-radius:12px;padding:14px 16px}

/* ---- Avatar + menu del header ---- */
.avatar-wrap{position:relative;display:inline-flex;align-items:center;gap:10px;margin-left:10px}

/* Contador USDT en el header (borde tenue, con botón +) */
.hdr-usdt{display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:0 6px 0 13px;height:42px;box-sizing:border-box;
  text-decoration:none}
.hdr-usdt-ico{width:17px;height:17px;flex-shrink:0;display:block}
.hdr-usdt-n{color:#8fd3a8;font-weight:700;font-size:14px;line-height:1}
.hdr-usdt-plus{width:24px;height:24px;border-radius:6px;flex-shrink:0;cursor:pointer;
  background:rgba(38,161,123,.18);border:1px solid rgba(38,161,123,.4);
  color:#3ec99a;display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s}
.hdr-usdt-plus:hover{background:rgba(38,161,123,.38)}
.hdr-usdt-plus svg{width:13px;height:13px;display:block}

/* Botón de usuario dorado */
.user-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:linear-gradient(180deg,#d4a843,#b8922e);
  border:1px solid #d4a843;border-radius:6px;padding:0 16px 0 6px;height:42px;box-sizing:border-box;
  color:#0a0a0a;font-weight:700;font-size:13.5px;font-family:inherit;
  text-transform:uppercase;letter-spacing:.03em;
  transition:box-shadow .18s,transform .12s,filter .12s}
.user-btn-ico-wrap{width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:#0a0a0a;display:inline-flex;align-items:center;justify-content:center}
.user-btn-ico{width:16px;height:16px;display:block;stroke:#d4a843}
.user-btn-name{line-height:1;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:center}
.user-btn:hover{box-shadow:0 0 16px rgba(212,168,67,.5);
  transform:translateY(-2px);filter:brightness(1.04)}
.user-btn:active{transform:translateY(0)}
.user-btn[aria-expanded="true"]{box-shadow:0 0 14px rgba(212,168,67,.45)}

.avatar-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center}
.avatar-circle{width:34px;height:34px;border-radius:50%;background:rgba(224,136,33,.15);
  border:1px solid rgba(224,136,33,.4);color:var(--accent-bright);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s;
  overflow:hidden;background-size:cover;background-position:center top}
.avatar-btn:hover .avatar-circle{border-color:var(--accent);background:rgba(224,136,33,.25)}
.avatar-circle-lg{width:44px;height:44px;font-size:18px}
.avatar-menu{position:absolute;top:calc(100% + 8px);right:0;width:262px;
  background:rgba(17,17,17,.97);border:1px solid rgba(212,168,67,.15);
  border-radius:12px;padding:6px;z-index:200;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.03);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.avatar-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.avatar-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px}
.avatar-head-txt{min-width:0}
.avatar-email{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.avatar-credits{font-size:11.5px;color:var(--muted);margin-top:3px;
  white-space:nowrap;display:flex;align-items:center;gap:5px;line-height:1}
.avatar-credits strong{color:#8fd3a8;font-size:13px;line-height:1}
.avatar-role-badge{position:relative;display:inline-block;margin-top:5px;
  font-size:9.5px;font-weight:800;letter-spacing:.14em;padding:3px 11px;border-radius:4px;
  color:#2a1c0e;overflow:hidden;
  background:linear-gradient(135deg,#f5d78e,#e0a838 45%,#c9852a 55%,#f0cf82);
  box-shadow:0 2px 8px rgba(224,136,33,.35),inset 0 1px 0 rgba(255,245,215,.7)}
.avatar-role-badge::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  animation:ownerShine 3.5s ease-in-out infinite}
@keyframes ownerShine{0%,72%{left:-140%}88%,100%{left:150%}}
.avatar-links{border-top:1px solid var(--line);padding-top:6px}
.avatar-links a{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:8px;
  font-size:13px;color:#c9bda9;text-decoration:none;white-space:nowrap;
  transition:background .18s,color .18s}
.avatar-links a:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.avatar-admin{color:var(--accent-bright) !important}
.avatar-admin svg{color:var(--accent-bright)}
.avatar-links a svg{width:16px;height:16px;flex-shrink:0}
.avatar-foot{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.avatar-logout{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  font-size:12.5px;color:var(--danger,#c9645b);background:none;border:none;cursor:pointer;
  font-family:inherit;transition:background .15s}
.avatar-logout:hover{background:rgba(201,100,91,.1)}
.avatar-logout svg{width:16px;height:16px;flex-shrink:0}

/* ---- Fecha de nacimiento: tres menus ---- */
.bd-row{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px}
.bd-row .fld-i{padding-left:8px;padding-right:6px;text-align:center;text-align-last:center}
.bd-row.bad .fld-i{border-color:var(--danger,#c9645b)}
/* ---- Checkbox de terminos ---- */
.terms-check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px;cursor:pointer}
.terms-check input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--accent)}
.terms-txt{font-size:12.5px;color:var(--muted);line-height:1.5}
.terms-txt a{color:var(--accent-bright);text-decoration:none}
.terms-txt a:hover{text-decoration:underline}
.terms-check.bad .terms-txt{color:var(--danger,#c9645b)}
@media (max-width:520px){.bd-row{grid-template-columns:1fr 1fr 1.4fr}}

/* ---- Fondo de mapa fijo global (todas las subpaginas) ---- */
.map-bg{position:fixed;inset:0;z-index:-2;
  background:url(/theme/images/map-bg.png) center center/cover no-repeat;
  pointer-events:none;opacity:0;transition:opacity .3s}
.map-bg::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,14,.82),rgba(18,16,14,.88))}
/* El mapa se muestra solo en subpaginas (las que tienen .pg). El home usa su hero. */
body:has(.pg) .map-bg{opacity:1}
body:has(.pg){background:transparent}

/* ---- Registro en dos paneles (info + formulario) ---- */
.reg-split{display:grid;grid-template-columns:1fr 1.05fr;max-width:1120px;margin:0 auto;
  background:linear-gradient(180deg,rgba(30,24,19,.55),rgba(18,16,14,.62));
  backdrop-filter:blur(4px);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
/* Panel izquierdo: info del servidor, centrada */
.reg-info{position:relative;padding:44px 40px;
  background:linear-gradient(160deg,rgba(224,136,33,.05),transparent 60%);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center}
.reg-info-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:10px}
.reg-info-t{font-family:Georgia,serif;font-size:30px;line-height:1.15;color:var(--ink);margin:0 0 16px;text-transform:uppercase}
.reg-info-t em{color:var(--accent-bright);font-style:normal}
.reg-info-rule{position:relative;width:130px;height:14px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.reg-info-rule::before,.reg-info-rule::after{content:"";position:absolute;top:50%;height:1px;width:50px;
  background:linear-gradient(90deg,transparent,var(--accent))}
.reg-info-rule::before{left:0}
.reg-info-rule::after{right:0;background:linear-gradient(90deg,var(--accent),transparent)}
.reg-info-rule i{width:7px;height:7px;background:var(--accent-bright);transform:rotate(45deg);
  box-shadow:0 0 8px rgba(224,136,33,.6)}
.reg-status{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:20px;
  background:rgba(70,180,90,.12);border:1px solid rgba(70,180,90,.35);color:#7fce8c;
  font-size:9.5px;letter-spacing:.03em;margin-bottom:18px}
.reg-status-dot{width:8px;height:8px;border-radius:50%;background:#57c76a;box-shadow:0 0 8px #57c76a}
.reg-status.offline{background:rgba(180,70,70,.12);border-color:rgba(180,70,70,.35);color:#d98c8c}
.reg-status.offline .reg-status-dot{background:#c95b5b;box-shadow:0 0 8px #c95b5b}
.reg-info-lead{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0 0 18px;max-width:100%;text-align:left;align-self:flex-start}
.reg-info-list{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:12px;text-align:left;max-width:100%;align-self:stretch}
.reg-info-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink);line-height:1.5}
.reg-info-list svg{width:17px;height:17px;color:var(--accent-bright);flex-shrink:0;margin-top:1px}
.reg-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px;width:100%}
.reg-form-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-bright);font-weight:600}
.reg-info-card{background:rgba(30,24,19,.5);border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  display:flex;align-items:center;gap:11px;text-align:left;min-width:0}
.reg-ic-i{width:22px;height:22px;color:var(--accent-bright);flex-shrink:0}
.reg-ic-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.reg-ic-v{font-size:14px;color:var(--ink);font-weight:600;text-transform:uppercase;white-space:nowrap}
/* Panel derecho: formulario */
.reg-form{padding:40px 38px}
@media (max-width:820px){
  .reg-split{grid-template-columns:1fr;max-width:520px}
  .reg-info{border-right:none;border-bottom:1px solid var(--line);padding:30px 26px;align-items:center}
  .reg-info-t{font-size:25px}
  .reg-form{padding:30px 26px}
  .reg-info-lead,.reg-info-list,.reg-info-grid{align-self:center;margin-left:auto;margin-right:auto}
  .reg-info-grid{grid-template-columns:1fr;max-width:340px}
}

/* ---- Icono de ojo para contraseñas ---- */
.pw-wrap{position:relative}
.pw-wrap .fld-i{padding-right:42px}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:6px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;transition:color .15s}
.pw-eye:hover{color:var(--ink)}
.pw-eye svg{width:18px;height:18px}
.pw-eye.on{color:var(--accent-bright)}

/* ---- Placeholder gris en selects de fecha y pais ---- */
.fld-i.placeholder-dim{color:var(--muted)}
select.fld-i option[value=""]{color:var(--muted)}
select.fld-i option{color:var(--ink)}

/* ---- Asterisco de campo obligatorio ---- */
.req-star{color:var(--accent-bright);margin-left:2px;font-weight:700}

/* ---- Botón de registro: más alto y font mayor ---- */
.reg-submit{padding-top:15px;padding-bottom:15px;font-size:15px}

/* ============ Modal de crear cuenta (pergamino) ============ */
.pmodal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.pmodal.open{display:flex}
.pmodal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);animation:pmFade .2s ease}
@keyframes pmFade{from{opacity:0}to{opacity:1}}
.pmodal-box{position:relative;width:100%;max-width:530px;
  border-style:solid;border-width:158px 86px;border-color:transparent;
  border-image:url('/theme/images/parchment-clean.png') 70 fill stretch;
  animation:pmPop .25s cubic-bezier(.34,1.3,.5,1);
  filter:drop-shadow(0 22px 45px rgba(0,0,0,.55))}
@keyframes pmPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.pmodal-x{position:absolute;top:-10px;right:-45px;width:34px;height:34px;
  border:none;background:none;color:#e0a838;
  font-size:35px;line-height:1;cursor:pointer;z-index:3;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:color .18s}
.pmodal-x:hover{color:#ffd27a}
.pmodal-inner{padding:35px 2px 45px}
.pmodal-form .fld{margin-bottom:15px}
.pmodal-form .fld-i{padding:9px 11px;font-size:13px}
.pmodal-form .fld-l{font-size:11px;margin-bottom:4px}
.pmodal-form .fld-hint{font-size:11px;line-height:1.5;color:#7d5426;font-weight:500}
.pmodal-title{margin-top:0;font-family:Georgia,'Cinzel',serif;font-size:19px;font-weight:700;color:#5a3d1e;
  text-align:center;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px;
  text-shadow:0 1px 0 rgba(255,245,220,.4);display:flex;align-items:center;justify-content:center;gap:12px;
  white-space:nowrap}
.pmodal-title span{white-space:nowrap}
.pmodal-title::before,.pmodal-title::after{content:"";height:1px;width:22px;flex-shrink:0;
  background:linear-gradient(90deg,transparent,#a87838)}
.pmodal-title::after{background:linear-gradient(90deg,#a87838,transparent)}
/* Campos dentro del pergamino: tonos tierra */
.pmodal-form .fld-l{color:#6a4a28;font-weight:600;font-size:12px}
.pmodal-form .fld-i{background:rgba(255,250,238,.55);border:1px solid rgba(110,80,45,.35);color:#4a3418}
.pmodal-form .fld-i:focus{border-color:#a87838;background:rgba(255,250,240,.75);
  box-shadow:0 0 0 3px rgba(168,120,56,.15)}
.pmodal-form .fld-i::placeholder{color:rgba(106,74,40,.45)}
.pmodal-form .fld-hint{color:#7d5426;font-weight:500}
.pmodal-form option{background:#e8d5ad;color:#4a3418}
.pmodal-btn{width:100%;margin-top:8px;padding:13px;border-radius:6px;cursor:pointer;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff5e6;border:1px solid #7a4d1a;
  background:linear-gradient(180deg,#b5772e,#8a541c);
  box-shadow:0 3px 8px rgba(80,50,20,.35),inset 0 1px 0 rgba(255,220,160,.35);transition:all .18s}
.pmodal-btn:hover{background:linear-gradient(180deg,#c9853a,#9a5f22);transform:translateY(-1px)}
@media (max-width:700px){
  .pmodal-box{border-width:84px 52px;max-width:100%}
  .pmodal-x{top:-6px;right:-20px;font-size:35px}
}
@media (max-width:480px){
  .pmodal-box{border-width:58px 36px}
  .pmodal-title{font-size:16px}
  .gsel{gap:12px}
}

/* ============ Acceso social (Google / Facebook) ============ */
/* Aun no funcionales: se activan cuando se configure OAuth. */
.soc-div{display:flex;align-items:center;gap:12px;margin:22px 0 14px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.soc-div::before,.soc-div::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.soc-row{display:flex;gap:12px;justify-content:center}
.soc-btn{width:46px;height:46px;border-radius:50%;cursor:not-allowed;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--panel2);
  transition:all .2s;opacity:.55}
.soc-btn:not(:disabled){cursor:pointer;opacity:1}
.soc-btn:not(:disabled):hover{transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 6px 16px rgba(0,0,0,.35)}
.soc-google{background:#fff}
.soc-fb{background:#1877F2;border-color:#1877F2}
.soc-soon{text-align:center;font-size:10.5px;color:var(--faint);margin-top:9px;
  letter-spacing:.05em;text-transform:uppercase}

/* ---- Selector de genero con sprites (dentro del pergamino) ---- */
.gfld{text-align:center}
.gfld .fld-l{display:block;text-align:center}
.gsel{display:flex;gap:12px;justify-content:center;margin-top:6px}
.gsel-opt{cursor:pointer}
.gsel-opt input{position:absolute;opacity:0;width:0;height:0}
.gsel-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:62px;height:58px;box-sizing:border-box;padding:6px 4px;border-radius:7px;
  border:2px solid rgba(110,80,45,.22);background:rgba(255,250,238,.3);
  transition:all .18s;opacity:.5}
.gsel-img{width:15px;height:26px;object-fit:contain;flex-shrink:0;
  image-rendering:pixelated;image-rendering:crisp-edges}
.gsel-t{font-size:8.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:#8a6c48}
.gsel-opt input:checked + .gsel-card{opacity:1;border-color:#a87838;
  background:rgba(255,250,238,.62);box-shadow:0 3px 12px rgba(168,120,56,.32)}
.gsel-opt input:checked + .gsel-card .gsel-t{color:#5a3d1e}
.gsel-opt:hover .gsel-card{opacity:.85}
.gsel-opt input:focus-visible + .gsel-card{outline:2px solid #a87838;outline-offset:2px}

/* ---- Disponibilidad del nombre de usuario ---- */
.uname-wrap{position:relative}
.uname-wrap .fld-i{padding-right:34px}
.uname-mark{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;pointer-events:none}
.uname-mark.wait::after{content:"";display:block;width:13px;height:13px;
  border:2px solid rgba(110,80,45,.3);border-top-color:#8a6c48;border-radius:50%;
  animation:unspin .7s linear infinite}
@keyframes unspin{to{transform:rotate(360deg)}}
.uname-mark.ok::after{content:"✓";display:block;color:#2d7d3e;font-size:16px;
  font-weight:700;line-height:1}
.uname-mark.bad::after{content:"✕";display:block;color:#b03a2e;font-size:15px;
  font-weight:700;line-height:1}
.fld-hint.uname-ok{color:#2d7d3e !important;font-weight:600}
.fld-hint.uname-bad{color:#b03a2e !important;font-weight:600}

/* ---- Boton del pergamino: hover mejorado ---- */
.pmodal-btn{position:relative;overflow:hidden;margin-bottom:0}
.pmodal-btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,235,190,.45),transparent);
  transition:left .55s ease}
.pmodal-btn:hover::after{left:130%}
.pmodal-btn:hover{box-shadow:0 6px 18px rgba(120,75,25,.45),inset 0 1px 0 rgba(255,225,170,.5)}
.pmodal-btn:active{transform:translateY(0)}

/* ---- Iconos en las etiquetas del pergamino ---- */
.pmodal-form .fld-l{display:flex;align-items:center;gap:6px;line-height:1}
.gfld .fld-l{justify-content:center}
.fld-ic{width:14px;height:14px;flex-shrink:0;opacity:.8;display:block;
  position:relative;top:-.5px}

/* ---- Aviso de error dentro del pergamino ---- */
.pmodal-err{display:none;margin:0 0 14px;padding:9px 12px;border-radius:6px;
  font-size:12px;font-weight:600;line-height:1.4;
  background:rgba(176,58,46,.14);border:1px solid rgba(176,58,46,.45);color:#8f2d22}
.pmodal-err.on{display:block;animation:pmErr .2s ease}
@keyframes pmErr{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- Destello en la tarjeta recien creada ---- */
.acc-card.acc-new{animation:accNew 1.1s ease-out 10}
@keyframes accNew{
  0%,100%{box-shadow:0 0 0 0 rgba(224,136,33,0);border-color:var(--line)}
  35%{box-shadow:0 0 0 4px rgba(224,136,33,.35),0 0 22px rgba(224,136,33,.4);
      border-color:var(--accent-bright)}
}

/* ---- Boton "Ver cuenta" en la tarjeta ---- */
.acc-btn-view{width:100%;background:rgba(224,136,33,.12);
  border-color:rgba(224,136,33,.32);color:var(--accent-bright);font-weight:600}
.acc-btn-view:hover{background:rgba(224,136,33,.2);border-color:var(--accent);
  color:var(--accent-bright)}

/* ---- Confeti de celebracion al crear una cuenta ---- */
.confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:2000;overflow:hidden}
.confetti-p{position:absolute;top:-20px;display:block;border-radius:2px;
  animation:confFall linear forwards}
@keyframes confFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  100%{transform:translateY(105vh) rotate(720deg);opacity:.15}
}
@media (prefers-reduced-motion:reduce){
  .confetti-wrap{display:none}
  .acc-card.acc-new{animation:none}
}

/* ---- Ojo de contrasena dentro del pergamino ---- */
.pmodal-form .pw-eye{color:rgba(106,74,40,.6)}
.pmodal-form .pw-eye:hover{color:#5a3d1e}
.pmodal-form .pw-eye.on{color:#a87838}
.pmodal-form .pw-wrap .fld-i{padding-right:34px}

/* ---- Cabecera de Game Accounts: titulo + creditos en una linea ---- */
.acc-hdr{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.acc-hdr .pnl-t{margin:0;padding-bottom:0;border-bottom:none;line-height:1.2}
.acc-hdr .acc-credits-bar{align-self:center}
@media (max-width:520px){
  .acc-hdr{gap:10px}
}

/* ---- Tarjeta de cuenta: etiquetas, stats y pie ---- */
.acc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.acc-tag{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  padding:2px 7px;border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--muted)}
.acc-tag-gm{background:rgba(224,136,33,.15);border-color:rgba(224,136,33,.35);color:var(--accent-bright)}
.acc-tag-adm{background:rgba(176,58,46,.18);border-color:rgba(176,58,46,.4);color:#e08a80}
.acc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin:13px 0 11px;padding:11px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.acc-stat{display:flex;flex-direction:column;gap:3px;text-align:center;min-width:0}
.acc-stat-k{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.acc-stat-v{font-size:14px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.acc-foot{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.acc-foot-row{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted)}
.acc-foot-row span:last-child{color:var(--muted);font-family:monospace}

/* ---- Tipo de cuenta en la tarjeta ---- */
.acc-type{font-size:11.5px;color:var(--muted);margin-top:4px;letter-spacing:.01em}
.acc-type-k{color:var(--muted)}
.acc-type-v{font-weight:700;color:var(--ink)}
.acc-type-vip{color:#9db8e8}
.acc-type-gm{color:#e0a838}
.acc-type-adm{color:#e08a80}

/* ---- Boton + para transferir cash ---- */


/* ---- Modal de transferencia ---- */
.tr-avail{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;margin-bottom:15px;border-radius:7px;
  background:rgba(120,90,50,.13);border:1px solid rgba(110,80,45,.3);
  font-size:14px;font-weight:700;color:#5a3d1e}
.tr-avail strong{font-size:14px;color:#2f7a52;font-weight:700}
.tr-dest{padding:9px 11px;border-radius:6px;font-size:13px;font-weight:600;color:#4a3418;
  background:rgba(255,250,238,.5);border:1px solid rgba(110,80,45,.3)}

/* ---- Creditos arriba a la derecha de la tarjeta ---- */
.acc-card{padding-top:14px}
.acc-credits-top{margin-left:auto;align-self:center;
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.acc-credits-k{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:10px;
  font-weight:600;line-height:1;display:inline-flex;align-items:center}
.acc-credits-v{color:#8fd3a8;font-weight:700;font-size:14px;
  line-height:1;display:inline-flex;align-items:center}
.acc-credits-add{width:19px;height:19px;padding:0;border:none;border-radius:5px;cursor:pointer;
  background:rgba(143,211,168,.18);color:#8fd3a8;
  transition:background .18s,color .18s;
  display:inline-flex;align-items:center;justify-content:center;
  line-height:0;vertical-align:middle}
.acc-credits-add svg{width:11px;height:11px;display:block}
.acc-credits-add:hover{background:rgba(143,211,168,.32);color:#c8f0d8}
/* La cabecera deja espacio para no chocar con los creditos */

.acc-stats-2{grid-template-columns:repeat(2,1fr)}

/* El + de comprar creditos (arriba) usa el mismo estilo que el de transferir */
.acc-credits-buy{text-decoration:none;flex-shrink:0}

/* Grilla de cuentas responsive: 3 -> 2 -> 1 */
@media (max-width:900px){.acc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.acc-grid{grid-template-columns:1fr}}

/* Logout en la barra de pestañas: empujado a la derecha */
.cp-logout-form{margin:0 0 0 auto;display:flex;align-items:center}
.cp-logout{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:8px;
  background:none;border:none;cursor:pointer;white-space:nowrap;
  color:var(--muted);font-size:13.5px;font-weight:500;font-family:inherit;
  transition:all .18s}
.cp-logout svg{width:17px;height:17px;flex-shrink:0}
.cp-logout:hover{color:#e0857a;background:rgba(176,80,74,.1)}
@media(max-width:860px){
  .cp-logout-form{margin-left:auto}
  .cp-logout{padding:9px 13px;font-size:13px}
}

/* Título "Control Panel" dentro de la barra de pestañas (opción E) */
.cp-title{display:inline-flex;align-items:center;gap:5px;
  font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:#fff;
  letter-spacing:.02em;padding:0 6px 0 10px;white-space:nowrap}
.cp-title span{color:#fff}
.cp-title-sep{width:1px;height:22px;background:rgba(224,136,33,.25);margin:0 4px;flex-shrink:0;align-self:center}
@media(max-width:860px){
  .cp-title{font-size:13.5px;padding-left:6px}
  .cp-title-sep{display:none}
}

/* ============================================================
   Botones Login / Register con icono + texto (estilo 4)
   ============================================================ */
.auth-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:0 16px;height:40px;box-sizing:border-box;border-radius:6px;
  font-size:13px;font-weight:700;font-family:inherit;
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
  transition:all .2s;flex-shrink:0}
.auth-btn svg{width:15px;height:15px;flex-shrink:0;display:block}
/* Login: ghost (contorno sutil) */
.auth-btn-ghost{color:#c9bda9;border:1px solid rgba(255,255,255,.15);background:transparent}
.auth-btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
/* Register: dorado plano y sobrio (paleta Guabina) */
.auth-btn-gold{color:#0a0a0a;border:1px solid #e0b855;
  background:linear-gradient(180deg,#e0b855,#c9a038);
  border-radius:6px}
.auth-btn-gold:hover{background:linear-gradient(180deg,#f0c95e,#dcac40);
  border-color:#f2d574;
  box-shadow:0 0 14px rgba(224,184,85,.55)}
/* En móviles muy chicos, esconder el texto y dejar solo icono */
@media(max-width:560px){
  .nav-cta .auth-btn{padding:0 12px;gap:0}
  .nav-cta .auth-btn span{display:none}
  .mobile-auth .auth-btn{padding:0 16px;gap:7px}
  .mobile-auth .auth-btn span{display:inline}
}