/* Sidebar del juego: V10 MMORPG */
.game-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:80;background:linear-gradient(180deg,#0a0d12 0%,#06080c 100%);border-right:1px solid rgba(var(--hero-rgb),.35);box-shadow:20px 0 60px rgba(0,0,0,.55);display:flex;flex-direction:column;transition:width .24s ease,transform .24s ease}
.game-sidebar:after{content:"";position:absolute;right:-1px;top:0;width:2px;height:34%;background:linear-gradient(var(--hero),transparent);box-shadow:0 0 22px var(--hero);pointer-events:none}

.sidebar-brand{height:84px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(var(--hero-rgb),.14),transparent 58%)}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--hero);font-weight:1000;letter-spacing:-2px;color:var(--hero2);clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,18% 100%,0 82%)}
.brand-copy{display:flex;flex-direction:column;font-size:15px;line-height:1;min-width:0;transition:opacity .2s ease,transform .2s ease}
.brand-copy span{font-size:10px;letter-spacing:.24em;color:var(--hero2);margin-top:5px}
.sidebar-collapse-btn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(var(--hero-rgb),.3);background:rgba(255,255,255,.02);color:#c6d0dc;cursor:pointer;font-size:16px;line-height:1;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.sidebar-collapse-btn:hover{background:rgba(var(--hero-rgb),.15);color:#fff;border-color:rgba(var(--hero-rgb),.55);transform:translateX(-1px)}

.sidebar-hero{padding:14px 14px 13px;border-bottom:1px solid var(--line);position:relative;transition:opacity .2s ease,transform .2s ease}
.sidebar-hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--hero);box-shadow:0 0 15px var(--hero)}
.sidebar-hero-kicker{font-size:9px;letter-spacing:.18em;color:#6d798a;font-weight:900}
.sidebar-hero strong{display:block;margin-top:5px;font-size:16px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.game-nav{padding:10px 0 16px;overflow-y:auto;display:block;flex:1}
.nav-separator{height:1px;margin:8px 12px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent)}
.nav-group{margin:0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(0,0,0,.35);position:relative}
.nav-group-toggle{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#e8edf4;padding:11px 14px;cursor:pointer;font-weight:800;letter-spacing:.015em;text-transform:uppercase;transition:background .2s ease,color .2s ease}
.nav-group-toggle:hover{background:rgba(var(--hero-rgb),.11);color:#fff}
.nav-group-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--hero2);font-size:18px;flex:0 0 28px}
.nav-group-label{flex:1;text-align:left;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-group-caret{font-size:11px;color:#7a8798;transition:transform .22s ease,color .2s ease}
.nav-group.is-open .nav-group-caret{transform:rotate(180deg);color:#c8d0db}

.nav-group-items{display:none;padding:2px 0 8px}
.nav-group.is-open .nav-group-items{display:block;animation:nav-group-fade .16s ease}
.nav-group-item{padding:0}
.nav-group-item a,.nav-group-item .nav-placeholder{display:block;padding:8px 14px 8px 54px;color:#adb7c6;text-decoration:none;font-size:13px;border-left:2px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease}
.nav-group-item a:hover,.nav-group-item a.active{background:linear-gradient(90deg,rgba(var(--hero-rgb),.22),rgba(var(--hero-rgb),.08));color:#fff;border-left-color:var(--hero)}
.nav-group-item .nav-placeholder{color:#6f7b8d;opacity:.92}

.nav-admin,.nav-logout{display:flex;align-items:center;gap:10px;margin:10px 10px 0;padding:10px 12px;color:#f4f6fb;text-decoration:none;border:1px solid rgba(var(--hero-rgb),.26);background:linear-gradient(135deg,rgba(var(--hero-rgb),.14),rgba(255,255,255,.02));font-weight:800;letter-spacing:.02em;text-transform:uppercase;transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;position:relative}
.nav-admin:hover,.nav-logout:hover{background:linear-gradient(135deg,rgba(var(--hero-rgb),.23),rgba(255,255,255,.04));border-color:rgba(var(--hero-rgb),.52);color:#fff;transform:translateY(-1px)}
.nav-admin i,.nav-logout i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--hero2)}

.game-sidebar.is-collapsed{width:86px}
.game-sidebar.is-collapsed .brand-copy,
.game-sidebar.is-collapsed .sidebar-hero,
.game-sidebar.is-collapsed .nav-group-label,
.game-sidebar.is-collapsed .nav-group-caret,
.game-sidebar.is-collapsed .nav-separator,
.game-sidebar.is-collapsed .nav-admin b,
.game-sidebar.is-collapsed .nav-logout b{opacity:0;transform:translateX(-6px);pointer-events:none}
.game-sidebar.is-collapsed .sidebar-brand{justify-content:center;padding:0 8px;gap:8px}
.game-sidebar.is-collapsed .brand-mark{margin-left:0}
.game-sidebar.is-collapsed .sidebar-collapse-btn{margin-left:0}
.game-sidebar.is-collapsed .nav-group-toggle{justify-content:center;padding:11px 8px}
.game-sidebar.is-collapsed .nav-group-items{display:none!important}
.game-sidebar.is-collapsed .nav-admin,
.game-sidebar.is-collapsed .nav-logout{justify-content:center;padding:10px 8px;margin:10px 8px 0}
.game-sidebar.is-collapsed .nav-group:hover:after,
.game-sidebar.is-collapsed .nav-admin:hover:after,
.game-sidebar.is-collapsed .nav-logout:hover:after{opacity:1;transform:translate(0,-50%)}
.game-sidebar.is-collapsed .nav-group:after{content:attr(data-label);position:absolute;left:94px;top:50%;transform:translate(-6px,-50%);background:#091018;color:#d6e0eb;border:1px solid rgba(var(--hero-rgb),.45);padding:7px 10px;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 12px 26px rgba(0,0,0,.45);z-index:90}
.game-sidebar.is-collapsed .nav-admin:after{content:attr(title);position:absolute;left:94px;transform:translate(-6px,-50%);top:50%;background:#091018;color:#d6e0eb;border:1px solid rgba(var(--hero-rgb),.45);padding:7px 10px;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 12px 26px rgba(0,0,0,.45);z-index:90}
.game-sidebar.is-collapsed .nav-logout:after{content:attr(title);position:absolute;left:94px;transform:translate(-6px,-50%);top:50%;background:#091018;color:#d6e0eb;border:1px solid rgba(var(--hero-rgb),.45);padding:7px 10px;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 12px 26px rgba(0,0,0,.45);z-index:90}

@keyframes nav-group-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:900px){
  .game-sidebar{width:220px;transform:translateX(-100%)}
  .game-sidebar.is-collapsed{width:220px}
  .game-sidebar.is-open{transform:none}
  .sidebar-collapse-btn{display:none}
}

/* Navegación de la Ciudadela: interfaz de fantasía oscura, no dependiente de emojis. */
:root{--sidebar:268px}
.game-sidebar{--side-ink:#06110d;--side-panel:#0b1b15;--side-line:rgba(108,224,154,.18);--side-glow:#48df93;--side-gold:#e6bd78;width:var(--sidebar);isolation:isolate;overflow:hidden;background:radial-gradient(460px 320px at -20% -8%,rgba(74,224,146,.2),transparent 62%),radial-gradient(400px 280px at 120% 16%,rgba(224,175,92,.09),transparent 62%),linear-gradient(180deg,#0b1712 0%,#06100d 48%,#030805 100%);border-right:1px solid rgba(104,232,157,.34);box-shadow:18px 0 54px rgba(0,0,0,.62),inset -1px 0 rgba(230,190,121,.13)}
.game-sidebar::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.55;background:repeating-linear-gradient(135deg,transparent 0 34px,rgba(136,255,187,.018) 35px 36px),linear-gradient(90deg,rgba(0,0,0,.28),transparent 28%,transparent 82%,rgba(0,0,0,.22))}
.game-sidebar::after{right:-1px;top:0;width:2px;height:100%;background:linear-gradient(transparent 0 3%,var(--side-glow) 20%,rgba(230,190,121,.74) 50%,var(--side-glow) 80%,transparent 98%);box-shadow:0 0 16px rgba(72,223,147,.65)}

.sidebar-brand{height:92px;flex:0 0 92px;gap:11px;padding:0 15px;position:relative;background:linear-gradient(125deg,rgba(87,228,148,.17),rgba(9,24,18,.72) 50%,rgba(225,181,109,.08));border-bottom:1px solid rgba(126,235,171,.22)}
.sidebar-brand::before{content:"";position:absolute;inset:auto 15px 0;height:1px;background:linear-gradient(90deg,transparent,rgba(222,186,116,.72),transparent)}
.brand-mark{width:44px;height:44px;flex:0 0 44px;color:#d7ff9e;border:1px solid rgba(125,245,169,.74);background:linear-gradient(145deg,rgba(73,216,135,.2),rgba(7,31,20,.88));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 18px rgba(63,225,133,.16);clip-path:polygon(50% 0,93% 20%,100% 65%,70% 100%,30% 100%,0 65%,7% 20%)}
.brand-copy{font-family:Georgia,"Times New Roman",serif;font-size:14px;font-weight:900;letter-spacing:.05em;color:#f6f0df;text-shadow:0 2px 7px rgba(0,0,0,.75)}
.brand-copy span{margin-top:5px;font-family:Arial,sans-serif;font-size:9px;font-weight:800;letter-spacing:.32em;color:#a7ef8b}
.sidebar-collapse-btn{width:34px;height:34px;border-radius:9px;border:1px solid rgba(155,241,184,.28);background:rgba(5,17,12,.7);color:#c6f7db;box-shadow:inset 0 1px rgba(255,255,255,.06);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.sidebar-collapse-btn:hover{background:rgba(62,202,120,.18);border-color:rgba(171,255,201,.65);transform:translateX(-2px)}
.sidebar-collapse-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.sidebar-collapse-btn.is-collapsed-control .sidebar-collapse-icon{transform:rotate(180deg)}

.sidebar-hero{margin:13px 13px 8px;padding:15px 15px 14px;border:1px solid rgba(103,226,151,.28);border-radius:12px;background:linear-gradient(135deg,rgba(48,150,101,.18),rgba(7,28,19,.78));box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 22px rgba(0,0,0,.16)}
.sidebar-hero::before{left:-1px;top:12px;bottom:12px;width:3px;background:linear-gradient(var(--side-glow),#c7f58a);box-shadow:0 0 14px rgba(72,223,147,.68)}
.sidebar-hero-kicker{color:#7fa895;font-size:9px;letter-spacing:.22em}
.sidebar-hero strong{margin-top:6px;color:#f6f1df;font-size:17px;letter-spacing:.06em;text-shadow:0 2px 8px rgba(0,0,0,.7)}

.game-nav{padding:7px 10px 18px;gap:7px;scrollbar-width:thin;scrollbar-color:rgba(91,231,149,.56) transparent}
.game-nav::-webkit-scrollbar{width:5px}.game-nav::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(var(--side-glow),rgba(230,190,121,.7))}
.nav-separator{height:8px;margin:2px 0;background:transparent;border:0}.nav-separator::after{content:"";display:block;height:1px;margin:4px 4px;background:linear-gradient(90deg,transparent,rgba(111,223,153,.2),transparent)}
.nav-group{margin:0;border:1px solid rgba(126,218,163,.18);border-radius:11px;background:linear-gradient(135deg,rgba(18,45,33,.92),rgba(5,16,11,.88));box-shadow:inset 0 1px rgba(255,255,255,.035),0 7px 15px rgba(0,0,0,.12);overflow:hidden}
.nav-group::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(230,190,121,.46),transparent);opacity:.68}
.nav-group:hover{border-color:rgba(133,238,177,.4)}
.nav-group.is-open{border-color:rgba(89,231,145,.58);background:linear-gradient(135deg,rgba(24,66,45,.95),rgba(5,20,13,.94));box-shadow:inset 0 1px rgba(215,255,225,.1),0 0 0 1px rgba(47,197,112,.08),0 12px 24px rgba(0,0,0,.2)}
.nav-group-toggle{min-height:54px;padding:9px 10px;gap:11px;color:#dce9e0;background:transparent;font-weight:800;letter-spacing:.07em}
.nav-group-toggle:hover{background:linear-gradient(90deg,rgba(75,220,137,.12),rgba(226,184,113,.04));color:#fff}
.nav-group-icon{width:34px;height:34px;flex:0 0 34px;border:1px solid rgba(139,235,178,.24);border-radius:9px;color:#a2d7b6;background:linear-gradient(145deg,rgba(76,191,124,.16),rgba(3,16,10,.8));box-shadow:inset 0 1px rgba(255,255,255,.05);transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.nav-icon-svg{display:block;width:19px;height:19px}
.nav-group:hover .nav-group-icon,.nav-group.is-open .nav-group-icon{color:#e9f5b0;border-color:rgba(174,251,190,.62);background:linear-gradient(145deg,rgba(67,221,132,.28),rgba(11,48,29,.92));box-shadow:0 0 15px rgba(69,220,132,.18),inset 0 1px rgba(255,255,255,.1)}
.nav-group-label{font-size:12px;letter-spacing:.09em}
.nav-group-caret{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:#83aa93;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease,stroke .2s ease}
.nav-group.is-open .nav-group-caret{color:inherit;stroke:#d7efae;transform:rotate(180deg)}

.nav-group-items{padding:1px 8px 10px;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28))}
.nav-group.is-open .nav-group-items{animation:nav-group-fade .2s ease}
.nav-group-item a,.nav-group-item .nav-placeholder{position:relative;margin:2px 0;padding:9px 11px 9px 47px;border:1px solid transparent;border-radius:8px;color:#aebeb4;font-size:11px;font-weight:700;letter-spacing:.075em;text-transform:uppercase}
.nav-group-item a::before,.nav-group-item .nav-placeholder::before{content:"";position:absolute;left:22px;top:50%;width:5px;height:5px;border-radius:50%;transform:translateY(-50%);background:#4c7360;box-shadow:0 0 0 3px rgba(76,115,96,.1)}
.nav-group-item a:hover,.nav-group-item a.active{border-left:1px solid rgba(165,251,191,.56);background:linear-gradient(90deg,rgba(71,224,135,.22),rgba(31,122,78,.08));color:#f7f5e9;box-shadow:inset 3px 0 #64e79e,0 0 14px rgba(65,215,130,.09)}
.nav-group-item a:hover::before,.nav-group-item a.active::before{background:#cef89b;box-shadow:0 0 11px rgba(193,247,139,.68)}
.nav-group-item .nav-placeholder{color:#60766a}.nav-group-item .nav-placeholder::before{background:#3a5045}

.nav-admin,.nav-logout{margin:12px 0 0;padding:11px 12px;border:1px solid rgba(126,218,163,.2);border-radius:10px;background:linear-gradient(135deg,rgba(29,73,49,.64),rgba(4,16,10,.88));box-shadow:inset 0 1px rgba(255,255,255,.04)}
.nav-admin:hover,.nav-logout:hover{background:linear-gradient(135deg,rgba(57,172,105,.32),rgba(8,32,19,.92));border-color:rgba(153,245,185,.56);transform:translateY(-1px)}
.nav-admin i,.nav-logout i{width:22px;height:22px;color:#a8e5bd}.nav-admin i .nav-icon-svg,.nav-logout i .nav-icon-svg{width:18px;height:18px}
.nav-logout{color:#e7d9c6;border-color:rgba(224,169,112,.22)}.nav-logout i{color:#e6bd78}.nav-logout:hover{border-color:rgba(237,190,125,.55);background:linear-gradient(135deg,rgba(176,99,57,.24),rgba(34,17,10,.92))}

.game-sidebar.is-collapsed{width:82px}.game-sidebar.is-collapsed .sidebar-brand{height:80px;flex-basis:80px}.game-sidebar.is-collapsed .sidebar-collapse-btn{margin-left:0}.game-sidebar.is-collapsed .nav-group-toggle{min-height:52px;padding:9px}.game-sidebar.is-collapsed .nav-group-icon{width:36px;height:36px;flex-basis:36px}.game-sidebar.is-collapsed .nav-group:after{left:91px;background:#0b1d15;border-color:rgba(129,242,175,.42);border-radius:8px;color:#e9f5e8}.game-sidebar.is-collapsed .nav-admin:after,.game-sidebar.is-collapsed .nav-logout:after{left:91px;background:#0b1d15;border-color:rgba(129,242,175,.42);border-radius:8px}

@media(max-width:900px){:root{--sidebar:238px}.game-sidebar{width:238px}.sidebar-brand{height:78px;flex-basis:78px}.sidebar-hero{margin-top:10px}.game-nav{padding-bottom:24px}.nav-group-toggle{min-height:50px}}

/* Logo oficial del juego en lugar de texto recreado. */
.brand-logo{display:block;min-width:0;width:calc(100% - 43px);height:70px;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 7px rgba(0,0,0,.72))}
.game-sidebar.is-collapsed .brand-logo{display:none}

/* Marco universal: el PNG no contiene texto ni icono; el menú coloca ambos encima. */
.game-nav{padding:8px 7px 18px;gap:3px}
.nav-group{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.nav-group::before{display:none}
.nav-group-toggle{position:relative;min-height:62px;padding:0 28px 0 61px;border:0!important;border-radius:0!important;background:transparent url('../img/ui/menu-button-frame.webp?v=3') center/100% 100% no-repeat!important;box-shadow:none!important;color:#f4e5c2!important;letter-spacing:.1em}
.nav-group-toggle:hover,.nav-group.is-open .nav-group-toggle{background-color:transparent!important;filter:brightness(1.13) drop-shadow(0 0 8px rgba(239,180,67,.24))}
.nav-group-icon{position:absolute;left:21px;top:50%;width:26px;height:26px;transform:translateY(-50%);border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#efc264!important}
.nav-group-icon .nav-icon-svg{width:22px;height:22px;filter:drop-shadow(0 1px 3px #000)}
.nav-group-label{position:absolute;left:68px;right:40px;font-family:Georgia,'Times New Roman',serif;font-size:12px;letter-spacing:.11em;text-align:center;text-shadow:0 2px 3px #000}
.nav-group-caret{position:absolute;right:23px;color:#f1ca78;stroke:#f1ca78}
.nav-group.is-open{background:transparent;box-shadow:none}.nav-group.is-open .nav-group-toggle{color:#fff3d0!important}
.nav-group-items{margin:-3px 16px 2px;padding:5px 8px 7px;border:1px solid rgba(184,143,66,.24);border-top:0;border-radius:0;background:linear-gradient(180deg,rgba(7,12,8,.94),rgba(2,6,4,.9))}
.game-sidebar.is-collapsed .nav-group-toggle{min-height:52px;padding:9px;background-image:none!important;filter:none}.game-sidebar.is-collapsed .nav-group-icon{position:static;transform:none;width:36px;height:36px;border:1px solid rgba(139,235,178,.24)!important;border-radius:9px!important;background:linear-gradient(145deg,rgba(76,191,124,.16),rgba(3,16,10,.8))!important}

/* Menú compacto: los marcos quedan unidos visualmente y todos los textos centrados. */
.game-nav{padding:5px 7px 12px;gap:0}.nav-separator{height:2px;margin:0}.nav-separator::after{margin:0;opacity:.35}.nav-group{margin:-1px 0 0}.nav-group-item a,.nav-group-item .nav-placeholder{margin:0;padding-top:7px;padding-bottom:7px}