/* Defiende el Trono — V8 UI REBORN */
:root{--hero:#7f8ea3;--hero2:#cbd5e1;--hero-rgb:127,142,163;--sidebar:252px;--ink:#07090d;--metal:#11151c;--line:rgba(255,255,255,.11);--color-bg-main:#07090d;--color-panel-main:#0f141c;--color-panel-alt:#141b25;--color-panel-deep:#0b1017;--color-text-main:#e8edf4;--color-text-secondary:#a9b4c6;--color-border:rgba(255,255,255,.11);--color-hover:rgba(255,255,255,.08);--color-gold:#d9a441;--color-gems:#57b8ff;--color-life:#ff7272;--color-mana:#65b7ff;--color-stamina:#f4c86d;--color-error:#ff4d5e;--color-warning:#f5b544;--color-success:#48c774;--bg-main:var(--color-bg-main);--panel-main:var(--color-panel-main);--text-main:var(--color-text-main);--text-secondary:var(--color-text-secondary);--border-main:var(--color-border);--hover-main:var(--color-hover)}

/* ===================================
   V11.0.5 Semantic Design Tokens
   Reusable across the entire game UI
=================================== */
:root{
  /* Main colors */
  --gold-color:var(--color-gold);
  --gems-color:var(--color-gems);
  --hp-color:var(--color-life);
  --mana-color:var(--color-mana);
  --stamina-color:var(--color-stamina);
  --success-color:var(--color-success);
  --warning-color:var(--color-warning);
  --danger-color:var(--color-error);
  --info-color:var(--hero2);

  /* Shadows */
  --shadow-small:0 4px 10px rgba(0,0,0,.22);
  --shadow-medium:0 10px 24px rgba(0,0,0,.30);
  --shadow-large:0 18px 44px rgba(0,0,0,.40);

  /* Radii */
  --radius-small:6px;
  --radius-medium:10px;
  --radius-large:16px;

  /* Spacing */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;

  /* Transitions */
  --transition-fast:.15s ease;
  --transition-normal:.25s ease;
  --transition-slow:.4s ease;

  /* Typography */
  --font-main:"Segoe UI",Tahoma,Verdana,sans-serif;
  --font-title:"Trebuchet MS","Segoe UI",Tahoma,sans-serif;
  --font-size-xs:11px;
  --font-size-sm:12px;
  --font-size-md:14px;
  --font-size-lg:16px;
  --font-size-xl:20px;
}

body[data-hero="valkron"]{--hero:#d21f32;--hero2:#ff6a3d;--hero-rgb:210,31,50}body[data-hero="nyxor"]{--hero:#8b3dff;--hero2:#d05cff;--hero-rgb:139,61,255}body[data-hero="zareth"]{--hero:#248cff;--hero2:#67d7ff;--hero-rgb:36,140,255}body[data-hero="thorgar"]{--hero:#d3a62d;--hero2:#8fcf62;--hero-rgb:211,166,45}body[data-hero="lirael"]{--hero:#39b86c;--hero2:#b7e35b;--hero-rgb:57,184,108}body[data-hero="malgor"]{--hero:#e44720;--hero2:#ff9b35;--hero-rgb:228,71,32}body[data-hero="vorlis"]{--hero:#7138c9;--hero2:#b65cff;--hero-rgb:113,56,201}body[data-hero="xilara"]{--hero:#c51e2d;--hero2:#ff4c23;--hero-rgb:197,30,45}body[data-hero="drakon"]{--hero:#2c82d8;--hero2:#83e8ff;--hero-rgb:44,130,216}body[data-hero="morvek"]{--hero:#50a83c;--hero2:#9ae64f;--hero-rgb:80,168,60}
body.ui-reborn{background:var(--bg-main);color:var(--text-main);overflow-x:hidden}.ui-reborn *{border-radius:0!important}.game-shell{min-height:100vh}.game-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:80;background:linear-gradient(180deg,#0d1117 0%,#080a0e 100%);border-right:1px solid rgba(var(--hero-rgb),.35);box-shadow:18px 0 50px rgba(0,0,0,.5);display:flex;flex-direction:column}.game-sidebar:after{content:"";position:absolute;right:-1px;top:0;width:2px;height:28%;background:linear-gradient(var(--hero),transparent);box-shadow:0 0 20px var(--hero)}.sidebar-brand{height:82px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(var(--hero-rgb),.15),transparent 60%)}.brand-mark{width:40px;height:40px;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}.brand-copy span{font-size:10px;letter-spacing:.28em;color:var(--hero2);margin-top:5px}.sidebar-hero{padding:17px 18px 16px;border-bottom:1px solid var(--line);position:relative}.sidebar-hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hero);box-shadow:0 0 15px var(--hero)}.sidebar-hero-kicker,.nav-group>span{font-size:9px;letter-spacing:.2em;color:#697383;font-weight:900}.sidebar-hero strong{display:block;margin-top:5px;font-size:17px;text-transform:uppercase}.sidebar-hero>span:last-child{display:block;font-size:10px;color:var(--hero2);margin-top:3px;letter-spacing:.14em}.game-nav{padding:12px 0 18px;overflow-y:auto;display:block;flex:1}.nav-group{padding:8px 0}.nav-group>span{display:block;padding:0 18px 7px}.game-nav a{height:42px;padding:0 18px;display:flex;align-items:center;gap:12px;color:#9aa5b4!important;border:0!important;border-left:3px solid transparent!important;background:transparent!important;text-decoration:none!important;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:.16s}.game-nav a i{width:19px;text-align:center;font-style:normal;color:#596574}.game-nav a:hover,.game-nav a.active{color:#fff!important;background:linear-gradient(90deg,rgba(var(--hero-rgb),.2),transparent 88%)!important;border-left-color:var(--hero)!important}.game-nav a.active i{color:var(--hero2);text-shadow:0 0 12px var(--hero)}.game-nav .nav-logout{margin-top:10px;border-top:1px solid var(--line)!important;color:#a86b70!important}.game-stage{min-height:100vh;margin-left:var(--sidebar);position:relative;background:radial-gradient(900px 520px at 78% 8%,rgba(var(--hero-rgb),.12),transparent 64%),linear-gradient(180deg,#0a0d12,#07090d 72%)}.hero-atmosphere{position:fixed;pointer-events:none;z-index:0;left:var(--sidebar);right:0;top:0;height:260px;background:linear-gradient(110deg,rgba(var(--hero-rgb),.09),transparent 45%),repeating-linear-gradient(115deg,transparent 0 90px,rgba(var(--hero-rgb),.025) 91px 92px);border-bottom:1px solid rgba(var(--hero-rgb),.12)}.game-content{position:relative;z-index:1;width:min(1460px,calc(100% - 56px));margin:0 auto;padding:30px 0 50px}.ui-reborn h1,.ui-reborn h2,.ui-reborn h3{text-transform:uppercase;letter-spacing:.055em}.ui-reborn h1{font-size:27px;border-left:3px solid var(--hero);padding-left:13px;text-shadow:0 0 24px rgba(var(--hero-rgb),.18)}.ui-reborn .stat,.ui-reborn .card,.ui-reborn .panel,.ui-reborn .ov-hero,.ui-reborn .resource-card{border:1px solid var(--line)!important;border-top-color:rgba(var(--hero-rgb),.32)!important;background:linear-gradient(145deg,rgba(18,23,31,.96),rgba(8,11,16,.97))!important;box-shadow:0 18px 35px rgba(0,0,0,.32)!important}.ui-reborn button,.ui-reborn .btn{border:1px solid rgba(var(--hero-rgb),.48)!important;background:linear-gradient(90deg,rgba(var(--hero-rgb),.22),rgba(var(--hero-rgb),.06))!important;color:#f5f7fb!important;text-transform:uppercase;letter-spacing:.07em}.ui-reborn button:hover,.ui-reborn .btn:hover{background:rgba(var(--hero-rgb),.28)!important;box-shadow:inset 3px 0 0 var(--hero),0 0 18px rgba(var(--hero-rgb),.12)}.ui-reborn input,.ui-reborn select{border:1px solid #29303a!important;background:#0a0d12!important;color:#e8edf4!important}.ui-reborn input:focus,.ui-reborn select:focus{border-color:var(--hero)!important;box-shadow:0 0 0 1px var(--hero)!important}.ui-reborn .ov-expfill,.ui-reborn .bar-fill,.ui-reborn .progress-fill{background:linear-gradient(90deg,var(--hero),var(--hero2))!important;box-shadow:0 0 14px rgba(var(--hero-rgb),.35)}.ui-reborn a{color:var(--hero2)}.ui-reborn table{border:1px solid var(--line)!important}.ui-reborn th{background:rgba(var(--hero-rgb),.09)!important;border-bottom:1px solid rgba(var(--hero-rgb),.24)!important}.ui-reborn .footer{margin:0;padding:15px 28px;text-align:right;border-top:1px solid var(--line);color:#5f6977;background:#080a0e}.nav-toggle{display:none}
@media(max-width:900px){:root{--sidebar:220px}.game-sidebar{transform:translateX(-100%);transition:.2s}.game-sidebar.is-open{transform:none}.game-stage{margin-left:0}.hero-atmosphere{left:0}.nav-toggle{display:block;position:fixed;z-index:100;left:14px;top:14px;width:42px!important;height:42px;padding:10px!important;background:#0b0e13!important;border:1px solid var(--hero)!important}.nav-toggle span{display:block;height:2px;background:#fff;margin:4px 0}.game-content{width:calc(100% - 28px);padding-top:70px}}.game-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;margin:18px auto 0;width:min(1240px,calc(100% - 36px));min-height:84px;background:linear-gradient(180deg,rgba(10,14,20,.95),rgba(7,9,13,.9));border:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(var(--hero-rgb),.3);box-shadow:0 18px 40px rgba(0,0,0,.45);backdrop-filter:blur(14px)}.game-header__left,.game-header__center,.game-header__right{display:flex;align-items:center}.game-header__left{gap:16px;min-width:220px}.game-header__realm,.game-header__player{display:flex;flex-direction:column;gap:2px}.game-header__eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#6d7a8a}.game-header__realm strong{font-size:18px;font-weight:800;color:#f3f5f9}.game-header__player span{font-size:13px;color:#89a0b7}.game-header__center{flex:1;justify-content:center;gap:12px;flex-wrap:wrap}.resource-bar{min-width:220px;flex:1 1 220px;max-width:280px;display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.resource-bar__head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;letter-spacing:.02em}.resource-bar--life .resource-bar__head{color:#ff7272}.resource-bar--mana .resource-bar__head{color:#65b7ff}.resource-bar--stamina .resource-bar__head{color:#f4c86d}.resource-bar__track{height:8px;width:100%;background:#0b1017;border:1px solid rgba(255,255,255,.06);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}.resource-bar__fill{display:block;height:100%;width:0%;transition:width .6s ease;background:linear-gradient(90deg,rgba(255,255,255,.15),transparent),var(--resource-fill);box-shadow:0 0 10px rgba(255,255,255,.12)}.resource-bar--life .resource-bar__fill{--resource-fill:linear-gradient(90deg,#ff5b5b 0%,#d11f2f 100%)}.resource-bar--mana .resource-bar__fill{--resource-fill:linear-gradient(90deg,#3fa9ff 0%,#1053d1 100%)}.resource-bar--stamina .resource-bar__fill{--resource-fill:linear-gradient(90deg,#ffdb6d 0%,#c68400 100%)}.resource-bar__value{font-size:11px;color:#7d8aa5;letter-spacing:.08em;text-transform:uppercase}.game-header__right{gap:12px;align-items:center}.header-currency{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.header-currency__item{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#e8edf4;font-size:12px;min-height:38px}.header-currency__item i{color:#f4c86d;font-style:normal}.header-currency__item strong{color:#f8fbff;font-weight:700}.header-currency__item--notify{background:linear-gradient(135deg,rgba(var(--hero-rgb),.2),rgba(255,255,255,.03));border-color:rgba(var(--hero-rgb),.25)}.header-profile{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}.header-profile__avatar{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(var(--hero-rgb),.35);background:linear-gradient(135deg,rgba(var(--hero-rgb),.25),rgba(255,255,255,.06));font-weight:900;color:#fff}.header-profile__meta{display:flex;flex-direction:column;gap:2px}.header-profile__meta strong{font-size:13px}.header-profile__meta span{font-size:11px;color:#7d8aa5}.header-profile__menu{border:0;background:transparent;color:#cfd8e8;padding:0 4px;font-size:14px;cursor:pointer}.game-content{padding-top:0}@media(max-width:1100px){.game-header{flex-wrap:wrap}.game-header__left,.game-header__right{width:100%;justify-content:space-between}.game-header__center{order:3;width:100%;justify-content:space-between}.resource-bar{max-width:none}}@media(max-width:900px){.game-header{margin-top:70px;width:calc(100% - 28px);padding:14px}.game-header__center{flex-direction:column;align-items:stretch}.resource-bar{max-width:none;min-width:0}.game-header__right{flex-wrap:wrap;justify-content:flex-start}}

.nav-group{margin:0 4px 4px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border-radius:12px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.nav-group-toggle{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#e8edf4;padding:11px 12px;cursor:pointer;font-weight:700;letter-spacing:.02em;transition:background .2s ease,color .2s ease}.nav-group-toggle:hover{background:rgba(255,255,255,.04);color:#fff}.nav-group-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--hero2);font-size:14px}.nav-group-label{flex:1;text-align:left}.nav-group-caret{font-size:11px;color:#697383;transition:transform .2s ease}.nav-group.is-open .nav-group-caret{transform:rotate(180deg)}.nav-group-items{display:none;padding:2px 0 7px}.nav-group.is-open .nav-group-items{display:block}.nav-group-item{padding:1px 0}.nav-group-item a,.nav-group-item .nav-placeholder{display:block;padding:8px 12px 8px 42px;color:#aab4c2;text-decoration:none;font-size:13px;border-left:2px solid transparent;transition:all .2s ease}.nav-group-item a:hover,.nav-group-item a.active{background:linear-gradient(90deg,rgba(var(--hero-rgb),.18),rgba(var(--hero-rgb),.08));color:#fff;border-left-color:var(--hero);box-shadow:inset 0 0 0 1px rgba(var(--hero-rgb),.16)}.nav-group-item .nav-placeholder{color:#697383;opacity:.9}.nav-admin,.nav-logout{display:flex;align-items:center;gap:10px;margin:10px 8px 0;padding:10px 12px;color:#f4f6fb;text-decoration:none;border:1px solid rgba(var(--hero-rgb),.22);background:linear-gradient(135deg,rgba(var(--hero-rgb),.14),rgba(255,255,255,.03));border-radius:10px;font-weight:700;letter-spacing:.02em}.nav-admin:hover,.nav-logout:hover{background:linear-gradient(135deg,rgba(var(--hero-rgb),.22),rgba(255,255,255,.06));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-nav{scrollbar-width:thin;scrollbar-color:rgba(var(--hero-rgb),.45) transparent}.game-nav::-webkit-scrollbar{width:6px}.game-nav::-webkit-scrollbar-thumb{background:rgba(var(--hero-rgb),.45);border-radius:999px}.game-sidebar::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(var(--hero-rgb),.15),transparent 45%);pointer-events:none}.sidebar-brand{position:relative;overflow:hidden}.sidebar-brand::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--hero-rgb),.35),transparent)}.sidebar-hero{margin:12px;border:1px solid rgba(var(--hero-rgb),.24);background:linear-gradient(135deg,rgba(var(--hero-rgb),.16),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* =============================
   Reusable UI Components V11
   Base visual layer for future screens
============================= */
:root{
  --ui-surface-1:var(--color-panel-main);
  --ui-surface-2:var(--color-panel-alt);
  --ui-surface-3:var(--color-panel-deep);
  --ui-text-1:var(--color-text-main);
  --ui-text-2:var(--color-text-secondary);
  --ui-line-1:var(--color-border);
  --ui-line-2:var(--hover-main);
  --ui-accent:var(--hero);
  --ui-accent-2:var(--hero2);
  --ui-icon-size:14px;
  --ui-icon-size-sm:12px;
  --ui-icon-size-lg:18px;
  --ui-icon-box:18px;
  --ui-icon-gap:8px;
}

.ui-icon-row{
  display:inline-flex;
  align-items:center;
  gap:var(--ui-icon-gap);
}

.ui-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--ui-icon-box);
  height:var(--ui-icon-box);
  min-width:var(--ui-icon-box);
  flex:0 0 var(--ui-icon-box);
  line-height:1;
  font-size:var(--ui-icon-size);
  vertical-align:middle;
}

.ui-icon--sm{font-size:var(--ui-icon-size-sm)}
.ui-icon--lg{font-size:var(--ui-icon-size-lg)}
.ui-icon--muted{color:var(--ui-text-2)}
.ui-icon--accent{color:var(--ui-accent-2)}

.ui-icon-label{
  display:inline-flex;
  align-items:center;
  gap:var(--ui-icon-gap);
  min-width:0;
}

.ui-icon-label > .ui-icon,
.ui-btn > .ui-icon,
.ui-badge > .ui-icon,
.ui-tag > .ui-icon,
.ui-panel-title > .ui-icon,
.ui-stat-label > .ui-icon{
  margin:0;
}

.ui-panel{
  position:relative;
  display:block;
  background:linear-gradient(180deg,var(--ui-surface-2),var(--ui-surface-3));
  border:1px solid var(--ui-line-1);
  box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
  padding:16px;
}

.ui-panel--secondary{
  background:linear-gradient(180deg,#101722,#0b1017);
  border-color:var(--ui-line-2);
}

.ui-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  padding:0 0 10px;
  border-bottom:1px solid var(--ui-line-2);
}

.ui-panel-title{
  margin:0;
  color:var(--ui-text-1);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
}

.ui-panel-subtitle{
  color:var(--ui-text-2);
  font-size:12px;
}

.ui-card{
  display:block;
  background:rgba(255,255,255,.02);
  border:1px solid var(--ui-line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  padding:14px;
}

.ui-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border:1px solid transparent;
  color:var(--ui-text-1);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  background:#1b2330;
  cursor:pointer;
}

.ui-btn--primary{
  background:linear-gradient(180deg,rgba(var(--hero-rgb),.35),rgba(var(--hero-rgb),.2));
  border-color:rgba(var(--hero-rgb),.55);
  color:#fff;
}

.ui-btn--secondary{
  background:linear-gradient(180deg,#1b2330,#141b25);
  border-color:var(--ui-line-1);
  color:var(--ui-text-2);
}

.ui-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 9px;
  border:1px solid rgba(var(--hero-rgb),.55);
  background:rgba(var(--hero-rgb),.16);
  color:#fff;
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  font-weight:800;
}

.ui-tag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border:1px solid var(--ui-line-1);
  background:rgba(255,255,255,.03);
  color:var(--ui-text-2);
  font-size:12px;
  font-weight:600;
}

.ui-progress{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ui-progress__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--ui-text-2);
}

.ui-progress__track{
  width:100%;
  height:10px;
  border:1px solid var(--ui-line-1);
  background:#0a0f16;
  overflow:hidden;
}

.ui-progress__fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2));
}

.ui-stat-box{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--ui-line-2);
  background:rgba(255,255,255,.02);
}

.ui-stat-label{
  color:var(--ui-text-2);
  font-size:12px;
}

.ui-stat-value{
  color:var(--ui-text-1);
  font-size:16px;
  font-weight:800;
}

/* ===================================
   V11.0.6 Reusable Base Components
   Semantic-token driven layer
=================================== */
.ui-panel{
  font-family:var(--font-main);
  border-radius:var(--radius-medium);
  box-shadow:var(--shadow-medium);
}

.ui-panel-header{
  font-family:var(--font-title);
  gap:var(--space-md);
  padding-bottom:var(--space-sm);
}

.ui-panel-body{
  display:block;
  padding:var(--space-md);
  color:var(--text-main);
  font-family:var(--font-main);
  font-size:var(--font-size-md);
}

.ui-card{
  border-radius:var(--radius-medium);
  box-shadow:var(--shadow-small);
  font-family:var(--font-main);
}

.ui-card-hover{
  transition:box-shadow var(--transition-normal),border-color var(--transition-normal),background var(--transition-normal);
}

.ui-card-hover:hover{
  box-shadow:var(--shadow-medium);
  border-color:var(--hover-main);
}

.ui-button-primary,
.ui-button-secondary,
.ui-button-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  min-height:calc(var(--space-xl) + var(--space-lg));
  padding:0 var(--space-lg);
  border:1px solid var(--border-main);
  border-radius:var(--radius-small);
  font-family:var(--font-main);
  font-size:var(--font-size-md);
  font-weight:700;
  text-decoration:none;
  color:var(--text-main);
  box-shadow:var(--shadow-small);
  transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),color var(--transition-fast);
}

.ui-button-primary{
  background:var(--info-color);
}

.ui-button-secondary{
  background:var(--panel-main);
  color:var(--text-secondary);
}

.ui-button-danger{
  background:var(--danger-color);
}

.ui-button-primary:hover,
.ui-button-secondary:hover,
.ui-button-danger:hover{
  border-color:var(--hover-main);
  box-shadow:var(--shadow-medium);
}

.ui-badge{
  font-family:var(--font-main);
  font-size:var(--font-size-xs);
  border-radius:var(--radius-small);
}

.ui-badge-gold,
.ui-badge-success,
.ui-badge-warning,
.ui-badge-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  min-height:calc(var(--space-sm) + var(--space-sm) + var(--space-sm));
  padding:0 var(--space-sm);
  border:1px solid var(--border-main);
  border-radius:var(--radius-small);
  color:var(--text-main);
  font-family:var(--font-main);
  font-size:var(--font-size-xs);
  font-weight:800;
  box-shadow:var(--shadow-small);
}

.ui-badge-gold{background:var(--gold-color)}
.ui-badge-success{background:var(--success-color)}
.ui-badge-warning{background:var(--warning-color)}
.ui-badge-danger{background:var(--danger-color)}

.ui-progress{
  gap:var(--space-xs);
}

.ui-progress-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--info-color);
  transition:width var(--transition-normal),background var(--transition-normal);
}

.ui-stat{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--border-main);
  border-radius:var(--radius-medium);
  background:var(--panel-main);
  color:var(--text-main);
  font-family:var(--font-main);
  font-size:var(--font-size-sm);
  box-shadow:var(--shadow-small);
}

/* ===================================
   V11.2 Header MMORPG Professional
=================================== */
.game-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-lg);
  padding:var(--space-md) var(--space-xl);
  border:1px solid var(--border-main);
  box-shadow:var(--shadow-medium);
  background:linear-gradient(180deg,var(--panel-main),var(--color-panel-deep));
}

.game-header__left,
.game-header__center,
.game-header__right{
  display:flex;
  align-items:center;
}

.game-header__left{justify-content:flex-start}
.game-header__center{justify-content:center}
.game-header__right{justify-content:flex-end}

.header-economy{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--border-main);
  border-radius:var(--radius-medium);
  background:linear-gradient(180deg,var(--panel-main),var(--color-panel-deep));
  box-shadow:var(--shadow-small);
  backdrop-filter:blur(4px);
}

.header-economy__item{
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  padding:0 var(--space-md);
  justify-content:center;
  min-height:calc(var(--space-xl) + var(--space-sm));
  min-width:calc(var(--space-xl) * 3);
  color:var(--text-main);
  border-color:var(--border-main);
  border-style:solid;
  border-width:1px;
  border-radius:var(--radius-small);
  background:linear-gradient(180deg,var(--panel-main),var(--color-panel-alt));
  box-shadow:var(--shadow-small);
  font-size:var(--font-size-md);
  font-weight:700;
  line-height:1;
  text-rendering:geometricPrecision;
  transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);
}

.header-economy__item strong{
  font-size:var(--font-size-md);
  letter-spacing:calc(var(--space-xs) * .6);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-shadow:var(--shadow-small);
}

.header-logo{
  margin:0;
  padding:var(--space-sm) var(--space-xl);
  border:1px solid var(--border-main);
  border-radius:var(--radius-medium);
  min-height:calc(var(--space-xl) + var(--space-lg));
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,var(--panel-main),var(--color-panel-deep));
  box-shadow:var(--shadow-small);
  position:relative;
  isolation:isolate;
}

.header-logo strong{
  font-family:var(--font-title);
  font-size:var(--font-size-xl);
  color:var(--text-main);
  letter-spacing:var(--space-sm);
  text-transform:uppercase;
  font-weight:900;
  text-shadow:var(--shadow-medium);
  line-height:1;
}

.header-logo::after{
  content:"";
  position:absolute;
  inset:auto var(--space-md) 0 var(--space-md);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--hover-main),transparent);
  opacity:.85;
  pointer-events:none;
}

.header-player-panel{
  display:flex;
  align-items:center;
  gap:var(--space-lg);
  padding:var(--space-sm) var(--space-lg);
  border:1px solid var(--border-main);
  border-radius:var(--radius-medium);
  background:linear-gradient(180deg,var(--panel-main),var(--color-panel-deep));
  box-shadow:var(--shadow-small);
  backdrop-filter:blur(4px);
  transition:box-shadow var(--transition-normal),border-color var(--transition-normal),transform var(--transition-fast);
}

.header-player-panel__identity{
  display:flex;
  align-items:center;
  gap:var(--space-md);
}

.header-player-panel__avatar{
  width:calc(var(--space-xl) + var(--space-lg));
  height:calc(var(--space-xl) + var(--space-lg));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-main);
  border-radius:var(--radius-medium);
  background:var(--panel-main);
  box-shadow:var(--shadow-small);
  font-size:var(--font-size-lg);
  color:var(--text-main);
  transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast);
}

.header-player-panel__name{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  line-height:1;
}

.header-player-panel__name strong{
  font-family:var(--font-main);
  font-size:var(--font-size-lg);
  color:var(--text-main);
  line-height:1;
  letter-spacing:var(--space-xs);
  text-shadow:var(--shadow-small);
  white-space:nowrap;
}

.header-player-panel__name span{
  font-family:var(--font-main);
  font-size:var(--font-size-sm);
  color:var(--text-secondary);
  letter-spacing:var(--space-xs);
  text-transform:uppercase;
  opacity:.95;
  white-space:nowrap;
}

.header-player-panel__meta{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  flex-wrap:wrap;
}

.header-player-panel__meta .ui-tag{
  min-height:calc(var(--space-md) + var(--space-sm));
  padding:0 var(--space-md);
  background:linear-gradient(180deg,var(--panel-main),var(--color-panel-alt));
  border-color:var(--border-main);
  box-shadow:var(--shadow-small);
  border-radius:var(--radius-small);
  font-weight:700;
  transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),color var(--transition-fast);
}

.game-header .ui-icon{
  font-size:var(--font-size-sm);
  width:calc(var(--space-md) + var(--space-sm));
  height:calc(var(--space-md) + var(--space-sm));
  line-height:1;
}

.header-economy__item .ui-icon{
  font-size:var(--font-size-xl);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:calc(var(--space-lg) + var(--space-xs));
  height:calc(var(--space-lg) + var(--space-xs));
  border-radius:var(--radius-small);
  background:linear-gradient(180deg,var(--color-panel-alt),var(--panel-main));
}

.header-economy__item:nth-child(1){
  border-color:var(--gold-color);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-color) 28%,transparent),var(--shadow-small);
}

.header-economy__item:nth-child(1) .ui-icon{color:var(--gold-color)}

.header-economy__item:nth-child(2){
  border-color:var(--gems-color);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gems-color) 28%,transparent),var(--shadow-small);
}

.header-economy__item:nth-child(2) .ui-icon{color:var(--gems-color)}

.header-economy__item:nth-child(3){
  border-color:var(--info-color);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--info-color) 28%,transparent),var(--shadow-small);
}

.header-economy__item:nth-child(3) .ui-icon{color:var(--info-color)}

.header-player-panel__meta .ui-tag .ui-icon{
  opacity:.95;
}

.header-player-panel__meta .ui-tag:hover,
.header-economy__item:hover{
  border-color:var(--hover-main);
  box-shadow:var(--shadow-medium);
  transform:translateY(-1px);
}

.header-player-panel:hover{
  border-color:var(--hover-main);
  box-shadow:var(--shadow-medium);
}

.header-player-panel__avatar:hover{
  border-color:var(--hover-main);
  box-shadow:var(--shadow-medium);
  transform:translateY(-1px);
}

.header-economy__item:hover{
  background:linear-gradient(180deg,var(--color-panel-alt),var(--panel-main));
  filter:saturate(1.07);
}

@media (max-width:1100px){
  .game-header{
    grid-template-columns:1fr;
    justify-items:stretch;
    gap:var(--space-md);
    padding:var(--space-md);
  }

  .game-header__left,
  .game-header__center,
  .game-header__right{
    justify-content:center;
  }

  .header-player-panel{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:var(--space-md);
  }

  .header-logo{
    padding:var(--space-sm) var(--space-md);
  }
}

@media (max-width:820px){
  .header-economy{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }

  .header-economy__item{
    min-height:calc(var(--space-xl) + var(--space-md));
  }

  .header-player-panel__meta{
    justify-content:center;
    width:100%;
  }
}

@media (max-width:620px){
  .game-header{
    padding:var(--space-sm);
    gap:var(--space-sm);
  }

  .header-logo strong{
    font-size:var(--font-size-lg);
    letter-spacing:var(--space-xs);
  }

  .header-economy,
  .header-player-panel{
    padding:var(--space-sm);
  }

  .header-player-panel__identity{
    width:100%;
    justify-content:center;
  }

  .header-player-panel__meta .ui-tag{
    min-height:calc(var(--space-sm) + var(--space-sm) + var(--space-xs));
    padding:0 var(--space-sm);
  }
}

@media (max-width:480px){
  .game-header{
    padding:var(--space-xs);
    gap:var(--space-xs);
  }

  .header-economy{
    gap:var(--space-xs);
    padding:var(--space-xs);
  }

  .header-economy__item{
    min-height:calc(var(--space-xl) + var(--space-xs));
    min-width:calc(var(--space-xl) * 2.5);
    padding:0 var(--space-sm);
    font-size:var(--font-size-sm);
  }

  .header-economy__item strong{
    font-size:var(--font-size-sm);
  }

  .header-economy__item .ui-icon{
    font-size:var(--font-size-md);
    width:calc(var(--space-md) + var(--space-sm));
    height:calc(var(--space-md) + var(--space-sm));
  }

  .header-logo{
    padding:var(--space-xs) var(--space-sm);
  }

  .header-logo strong{
    font-size:var(--font-size-md);
    letter-spacing:var(--space-xs);
  }

  .header-player-panel{
    padding:var(--space-xs);
    gap:var(--space-sm);
  }

  .header-player-panel__avatar{
    width:calc(var(--space-xl) + var(--space-md));
    height:calc(var(--space-xl) + var(--space-md));
    font-size:var(--font-size-md);
  }

  .header-player-panel__name strong{
    font-size:var(--font-size-md);
  }

  .header-player-panel__name span{
    font-size:var(--font-size-xs);
  }

  .header-player-panel__meta{
    gap:var(--space-xs);
  }

  .header-player-panel__meta .ui-tag{
    font-size:var(--font-size-xs);
  }
}

@media (max-width:380px){
  .header-economy,
  .header-player-panel{
    border-radius:var(--radius-small);
  }

  .header-economy__item,
  .header-player-panel__meta .ui-tag{
    padding:0 var(--space-xs);
  }

  .header-logo strong{
    font-size:var(--font-size-sm);
  }
}

/* Interfaz de juego: evita el cursor de edición y la selección accidental. */
body.ui-reborn{
  cursor:default;
  -webkit-user-select:none;
  user-select:none;
}
body.ui-reborn :where(input,textarea,[contenteditable="true"]){
  cursor:text;
  -webkit-user-select:text;
  user-select:text;
}
body.ui-reborn select{
  cursor:pointer;
  -webkit-user-select:auto;
  user-select:auto;
}