/* Force Data Web — tema negro y oro (capa aditiva sobre styles.css) */
:root{
  --bg:#000000;--bg2:#070707;--bg3:#0e0d0b;--bg4:#1a1712;--bg5:#2a251b;
  --gold:#d4af37;--gold-dim:#a8871f;--gold-light:#f6dc83;
  --blue:#d4af37;--blue-dim:#a8871f;--blue-light:#f6dc83;
  --text:#f5f1e6;--text2:#b9b09a;--text3:#6f6957;
  --glass:rgba(8,8,8,.82);--glass-border:rgba(212,175,55,.18);
  --shadow-gold:0 0 32px rgba(212,175,55,.22);
  --font-display:'Cinzel','Space Grotesk',serif;
  --font:'Inter',system-ui,sans-serif;
}
html,body{background:#000}
body{color:var(--text)}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:.04em}
/* #lobby-screen a proposito NO lleva background aqui: este override con #000 solido era
   justo lo que tapaba el campo de estrellas de fx.js en el login (se pintaba encima por ir
   despues en el DOM). #app-shell si se queda opaco: el panel de trabajo no necesita el cielo
   de fondo, solo el login/lobby. */
#app-shell{background:#000}
.lobby-bg-grid{background-image:radial-gradient(rgba(212,175,55,.09) 1px,transparent 1px)}

/* Campo de estrellas interactivo (fondo fijo) */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#lobby-screen,#app-shell{position:relative;z-index:1}

/* Anillo de logo y títulos */
.logo-icon-wrap img,.sidebar-brand img{border-radius:50%;box-shadow:0 0 0 1px rgba(212,175,55,.35),0 0 24px rgba(212,175,55,.25)}
.lobby-logo h1{font-size:2rem;letter-spacing:.12em;text-transform:uppercase}
.lobby-subtitle{letter-spacing:.3em}

/* Tarjetas */
.lobby-card,.stat-card,.chart-card,.profile-card,.plan-card{background:linear-gradient(160deg,rgba(18,16,12,.92),rgba(4,4,4,.96));border:1px solid var(--glass-border);box-shadow:0 10px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(246,220,131,.06)}
.stat-card:hover,.plan-card:hover{border-color:rgba(212,175,55,.55);box-shadow:var(--shadow-gold)}
.btn-primary{background:linear-gradient(135deg,#f6dc83,#d4af37 45%,#8a6a16);color:#050505;box-shadow:0 6px 18px rgba(212,175,55,.2)}
.btn-primary:hover{box-shadow:0 10px 32px rgba(212,175,55,.45)}
.sidebar-nav-btn.active{background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(212,175,55,.03))}
#sidebar{background:rgba(3,3,3,.94);backdrop-filter:blur(10px)}
.form-group input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.16)}

/* ── PERFIL PREMIUM ── */
.profile-hero{position:relative;display:flex;align-items:center;gap:24px;padding:28px;border-radius:18px;border:1px solid var(--glass-border);background:radial-gradient(circle at 15% 0%,rgba(212,175,55,.14),transparent 55%),linear-gradient(160deg,#0d0c09,#000);overflow:hidden;margin-bottom:22px}
.profile-hero::after{content:'';position:absolute;inset:-40% -10% auto auto;width:360px;height:360px;background:radial-gradient(circle,rgba(246,220,131,.12),transparent 65%);pointer-events:none}
.profile-avatar{position:relative;width:96px;height:96px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%,#f6dc83,#8a6a16 70%);color:#050505;font-family:var(--font-display);font-size:2rem;font-weight:700;box-shadow:0 0 0 3px #000,0 0 0 4px rgba(212,175,55,.5),0 0 40px rgba(212,175,55,.35)}
.profile-avatar::before{content:'';position:absolute;inset:-12px;border-radius:50%;border:1px dashed rgba(212,175,55,.35);animation:spin 26s linear infinite}
.profile-hero-info h3{font-size:1.5rem;color:var(--text);margin-bottom:6px}
.profile-hero-info p{color:var(--text2);font-size:.85rem}
.profile-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.profile-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid rgba(212,175,55,.3);color:var(--gold-light);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(212,175,55,.06)}
.profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.pstat{padding:18px;border-radius:14px;border:1px solid var(--glass-border);background:rgba(10,9,7,.9);display:flex;flex-direction:column;gap:10px;transition:var(--transition)}
.pstat:hover{transform:translateY(-3px);border-color:rgba(212,175,55,.5)}
.pstat .pstat-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.2)}
.pstat .pstat-label{font-size:.7rem;color:var(--text3);letter-spacing:.14em;text-transform:uppercase}
.pstat .pstat-value{font-family:var(--font-display);font-size:1.35rem;color:var(--text)}
.credit-bar{height:6px;border-radius:6px;background:#1a1712;overflow:hidden;margin-top:4px}
.credit-bar span{display:block;height:100%;background:linear-gradient(90deg,#8a6a16,#f6dc83);border-radius:6px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.profile-section-title{display:flex;align-items:center;gap:10px;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin:6px 0 14px}
.profile-section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(212,175,55,.5),transparent)}

/* Calificación con estrellas interactivas */
.star-rating{display:inline-flex;gap:6px;margin-top:8px}
.star-rating button{background:none;border:none;padding:4px;cursor:pointer;color:#3a3427;transition:transform .2s,color .2s,filter .2s;line-height:0}
.star-rating button svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.6;fill:none}
.star-rating button.on{color:var(--gold);filter:drop-shadow(0 0 8px rgba(212,175,55,.55))}
.star-rating button:hover{transform:scale(1.2) rotate(-8deg);color:var(--gold-light)}
.star-rating.is-set button.on svg{fill:currentColor}
.star-rating-msg{font-size:.78rem;color:var(--text3);margin-top:8px;min-height:1.2em}

/* Riel de categorías tipo planeta (inspirado en la sección Explora de WormShop) */
.planet-rail{display:flex;gap:22px;overflow-x:auto;padding:18px 6px 12px;scroll-behavior:auto;scrollbar-width:none}
.planet-rail::-webkit-scrollbar{display:none}
.planet-tile{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:none;cursor:pointer;color:var(--text2);width:96px}
.planet-ring{width:84px;height:84px;border-radius:50%;padding:4px;background:conic-gradient(from 0deg,#8a6a16,#f6dc83,#8a6a16,#d4af37,#8a6a16);transition:transform .35s;box-shadow:0 0 22px rgba(212,175,55,.18)}
.planet-ring-inner{width:100%;height:100%;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--font-display);font-size:1.5rem}
.planet-tile:hover .planet-ring{transform:translateY(-4px) scale(1.06)}
.planet-name{font-size:.72rem;text-align:center;line-height:1.25;letter-spacing:.04em}
.planet-tile.active .planet-name{color:var(--gold-light)}