/* =========================================================
   🎮 TOKENS
========================================================= */

:root{
  --brand-primary:#6366f1;
  --brand-secondary:#8b5cf6;

  --text-main:#0f172a;
  --text-muted:#64748b;

  --border-soft:#e2e8f0;

  --density-comfort:1;
  --density-compact:.88;

  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:24px;

  --tap-min:44px;
}

/* =========================================================
   🧱 RESET BASE
========================================================= */

*{
  box-sizing:border-box;
}

html, body{
  overflow-x:hidden;
  min-height:100%;
  background: #0f172a;
}

body{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  margin:0;
  font-family:'Inter',system-ui,-apple-system;
  line-height:1.45;

  background:
    radial-gradient(circle at 20% 20%, rgba(99,102,241,.10), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(168,85,247,.10), transparent 40%),
    linear-gradient(180deg,#f8fafc,#eef2ff);

  color:var(--text-main);
}

/* glow global suave */

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:
    radial-gradient(circle at 10% 10%, rgba(99,102,241,.08), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(168,85,247,.08), transparent 40%);
}

/* =========================================================
   🚀 BOOT LOADING — FIX DEFINITIVO (GLOBAL)
========================================================= */

#bootLoading{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    radial-gradient(circle at 50% 20%, rgba(99,102,241,.18), transparent 60%),
    rgba(15,23,42,.65);

  backdrop-filter: blur(6px);
  z-index: 999999;

  margin: 0 !important;
  padding: 0 !important;
}

#bootLoading.hide{
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.boot-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;

  padding:28px 32px;
  border-radius:18px;

  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid #e2e8f0;

  box-shadow:
    0 30px 80px rgba(15,23,42,.25),
    0 0 0 1px rgba(255,255,255,.6) inset;
}

.boot-sword{
  font-size:32px;
  animation:bootFloat 1.6s ease-in-out infinite;
}

@keyframes bootFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

.boot-text{
  font-weight:800;
  color:#0f172a;
}

/* =========================================================
   🧠 SMART TEXT FLOW
========================================================= */

.player-name,
.rank-name,
.mission-title,
.card h1,
.card h2,
.card h3{
  line-height:1.25;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.card p,
.mission,
.rank-row{
  line-height:1.4;
}

/* =========================================================
   📱 MOBILE DENSITY SYSTEM
========================================================= */

@media (max-width:480px){

  body{
    font-size:14px;
    -webkit-font-smoothing:antialiased;
  }

  h1{ font-size:22px; }
  h2{ font-size:20px; }
  h3{ font-size:18px; }

  .card,
  .pvp-top,
  .mission,
  .rank-row{
    margin-left:12px;
    margin-right:12px;
    padding-left:16px;
    padding-right:16px;
    border-radius:18px;
  }

  .pvp-btn,
  .btn,
  button{
    min-height:var(--tap-min);
  }

}

/* ================================
   🔴 OFFLINE BANNER
================================ */

#offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  background: linear-gradient(90deg, #ff3c3c, #ff6b3c);
  color: white;
  text-align: center;
  padding: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  animation: slideDown 0.4s ease-out;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.offline-content {
  font-size: 14px;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

#network-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  z-index: 99999;
  transition: all .3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

#network-banner.offline {
  background: linear-gradient(90deg, #ff3c3c, #ff6b3c);
  color: white;
}

#network-banner.reconnecting {
  background: linear-gradient(90deg, #ffb300, #ff9800);
  color: white;
}

#network-banner.online {
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  color: white;
}

.pwa-mode .premium-badge {
  display: inline-block;
}

.premium-badge {
  display: none;
}