:root {
  --night: #020814;
  --blue: #78caff;
  --gold: #f7d36d;
  --text: #f6f8fc;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: var(--night); }
body { color: var(--text); font-family: Georgia, "Times New Roman", serif; overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; }
.page, .hero { width: 100%; height: 100%; min-height: 100%; }
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #020814;
}

/* Portada Full HD real (1920×1080).
   Se rellena toda la ventana sin deformarse. Cuando la barra del navegador
   reduce la altura útil y obliga a recortar algo, se conserva SIEMPRE la
   parte superior (logo, menú y Discord) y el recorte se hace por abajo. */
.art-stage {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #020814;
}
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* Movimiento ambiental suave. */
.cloud-haze {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 58%;
  height: 25%;
  border-radius: 50%;
  filter: blur(34px);
  opacity: .085;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(188,224,255,.30), transparent 48%),
    radial-gradient(ellipse at 70% 40%, rgba(110,181,255,.18), transparent 52%);
}
.haze-a { top: 16%; left: -25%; animation: hazeAcross 32s ease-in-out infinite alternate; }
.haze-b { top: 41%; right: -24%; opacity: .06; animation: hazeBack 42s ease-in-out infinite alternate; }
@keyframes hazeAcross { from { transform: translateX(0) scale(1); } to { transform: translateX(38vw) scale(1.12); } }
@keyframes hazeBack { from { transform: translateX(0) scale(1.06); } to { transform: translateX(-32vw) scale(.98); } }
.water-shimmer {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 66%; top: 57%; width: 22%; height: 36%;
  opacity: .12;
  filter: blur(8px);
  mix-blend-mode: screen;
  background: repeating-linear-gradient(176deg,
    rgba(198,229,255,0) 0 8px,
    rgba(198,229,255,.24) 10px,
    rgba(198,229,255,0) 13px 22px);
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 72%, transparent);
  animation: waterMove 9s ease-in-out infinite alternate;
}
@keyframes waterMove { from { transform: translate3d(-1%,0,0) skewX(-1deg); } to { transform: translate3d(1.5%,1%,0) skewX(1deg); } }
.right-diffusion {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 9%;
  right: -7%;
  width: 41%;
  height: 82%;
  opacity: .16;
  filter: blur(42px);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 30% 22%, rgba(185,222,255,.22), transparent 40%),
    radial-gradient(ellipse at 56% 50%, rgba(131,188,255,.12), transparent 45%),
    linear-gradient(270deg, rgba(144,197,255,.12), rgba(144,197,255,0) 66%);
  mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.96) 55%, transparent 100%);
}
.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 52%, rgba(1,7,18,.16) 76%, rgba(1,7,18,.34) 100%),
    linear-gradient(180deg, rgba(1,6,16,.10), rgba(1,6,16,0) 20%, rgba(1,6,16,0) 70%, rgba(1,6,16,.14));
}
.particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; opacity: .96; }

/* Hotspots 100 % invisibles. No hover, no líneas, no brillos, no recuadros. */
.hotspot, button.hotspot, a.hotspot,
.hotspot:hover, .hotspot:active, .hotspot:focus, .hotspot:focus-visible {
  position: absolute;
  z-index: 5;
  display: block;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: pointer;
  color: inherit;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.hotspot::before, .hotspot::after,
.hotspot:hover::before, .hotspot:hover::after {
  content: none !important;
  display: none !important;
}


.music-player {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 15;
  width: min(356px, calc(100vw - 36px));
  padding: 10px 12px 11px;
  border: 1px solid rgba(245,211,111,.18);
  border-radius: 16px;
  color: #f7e8b6;
  background:
    linear-gradient(180deg, rgba(8,20,38,.92), rgba(2,10,22,.90)),
    radial-gradient(circle at top right, rgba(249,215,122,.08), transparent 34%);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 36px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
  font-family: Arial, sans-serif;
}
.music-player::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247,211,109,.45), transparent);
}
.music-player.minimized {
  width: auto;
  min-width: 214px;
  padding-bottom: 10px;
}
.player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.player-title-wrap {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.player-kicker {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  color: #f6d978;
}
.track-now {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eef7ff;
  font: 600 13px/1.15 Arial, sans-serif;
}
.player-toggle {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(247,211,109,.16);
  border-radius: 50%;
  color: #f8e8b3;
  background: rgba(15,35,58,.76);
  cursor: pointer;
  font: 700 14px/1 Arial, sans-serif;
}
.player-body { display: grid; gap: 8px; }
.player-row { min-width: 0; display: grid; gap: 4px; }
.player-select-label {
  color: rgba(227,237,247,.68);
  font: 11px/1 Arial, sans-serif;
}
.track-select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(137,191,255,.18);
  border-radius: 9px;
  color: #edf6ff;
  background: rgba(6,22,43,.84);
  outline: none;
  font: 12px/1 Arial, sans-serif;
}
.player-controls {
  display: grid;
  grid-template-columns: 28px 34px 28px minmax(106px, 1fr);
  gap: 7px;
  align-items: center;
}
.player-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(247,211,109,.18);
  border-radius: 50%;
  color: #f8e8b3;
  background: rgba(13,32,54,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  outline: none;
  cursor: pointer;
  font: 11px/1 Arial, sans-serif;
  transition: none;
}
.player-btn-main {
  width: 34px;
  height: 34px;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(35,73,118,.88), rgba(12,29,52,.90));
  border-color: rgba(115,173,255,.28);
}
.player-btn:hover, .player-btn:focus, .player-btn:active,
.player-toggle:hover, .player-toggle:focus, .player-toggle:active,
.track-select:hover, .track-select:focus,
.track-progress:hover, .volume-slider:hover {
  box-shadow: none;
  filter: none;
  transform: none;
}
.progress-wrap { min-width: 0; }
.track-progress,
.volume-slider {
  width: 100%;
  height: 13px;
  margin: 0;
  padding: 0;
  accent-color: #e9c75e;
  cursor: pointer;
}
.time-row {
  display: flex;
  justify-content: space-between;
  margin-top: 1px;
  color: rgba(224,234,245,.62);
  font-size: 9px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.player-foot {
  display: grid;
  grid-template-columns: 18px minmax(100px, 1fr) 42px;
  gap: 8px;
  align-items: center;
}
.volume-icon { font-size: 12px; text-align: center; }
.volume-value {
  color: rgba(238,245,255,.80);
  font-size: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.glass-dialog {
  width: min(92vw, 640px);
  max-height: 88vh;
  padding: 0;
  border: 1px solid rgba(143,197,255,.26);
  border-radius: 18px;
  color: white;
  background: transparent;
  overflow: auto;
  box-shadow: 0 30px 100px rgba(0,0,0,.65), 0 0 40px rgba(38,117,206,.12);
}
.glass-dialog::backdrop { background: rgba(0,7,17,.82); backdrop-filter: blur(9px); }
.glass-card {
  position: relative;
  padding: 38px 76px 36px 36px;
  background:
    radial-gradient(circle at 100% 0%, rgba(58,132,218,.24), transparent 34%),
    linear-gradient(160deg, rgba(9,27,50,.985), rgba(2,10,20,.99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.eyebrow { margin: 0 0 10px; color: var(--gold); font-size: 12px; letter-spacing: .24em; }
.glass-card h2 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 43px); font-weight: 500; }
.info-body, .modal-copy { color: #c2cfdb; font: 16px/1.7 Arial, sans-serif; }
.info-body p { margin: 0 0 12px; }
.modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  color: #fff; background: rgba(5,18,35,.72); cursor: pointer;
  font: 400 28px/1 Arial, sans-serif;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.modal-close:hover, .modal-close:focus {
  border-color: rgba(244,221,161,.68);
  background: rgba(16,39,68,.94);
  outline: none;
}
.game-download-row { margin-top: 18px !important; }
.game-download-link {
  color: #f4dda1;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.game-download-link:hover, .game-download-link:focus { color: #fff2bf; }
.register-card label { display: grid; gap: 7px; margin: 13px 0; }
.register-card label > span { color: #dfe9f3; font: 600 12px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.register-card input:not([type="checkbox"]) {
  width: 100%; border: 1px solid rgba(142,193,255,.22); border-radius: 10px;
  background: rgba(4,13,26,.82); color: white; padding: 13px 14px; outline: none; font: 15px/1.2 Arial, sans-serif;
}
.register-card input:not([type="checkbox"]):focus { border-color: rgba(127,200,255,.72); box-shadow: 0 0 0 3px rgba(72,147,230,.12); }
.check-row { display: flex !important; align-items: center; gap: 10px !important; color: #b9c5d1; font: 13px Arial, sans-serif; }
.check-row span { text-transform: none !important; letter-spacing: 0 !important; color: #b9c5d1 !important; }
.register-submit {
  width: 100%; margin-top: 12px; padding: 15px 18px;
  border: 1px solid #ffe7a1; border-radius: 999px;
  color: #152032; background: linear-gradient(180deg,#ffe9a3,#e8bd55);
  font: 700 15px/1 Georgia, serif; letter-spacing: .06em; cursor: pointer;
  box-shadow: 0 0 28px rgba(244,197,79,.2);
}
.register-status { min-height: 20px; margin: 13px 0 0; text-align: center; color: #b9d9ff; font: 13px/1.4 Arial, sans-serif; }
.register-status.error { color: #ffb8b8; }
.register-status.success { color: #bfffd7; }

@media (max-width: 720px) {
  .music-player { right: 8px; bottom: 8px; width: calc(100vw - 16px); padding: 9px 9px 10px; }
  .music-player.minimized { min-width: 188px; }
  .player-head { margin-bottom: 7px; }
  .player-kicker { display: none; }
  .track-now { font-size: 12px; }
  .player-select-label { font-size: 10px; }
  .player-controls { grid-template-columns: 28px 34px 28px minmax(76px,1fr); gap: 5px; }
  .player-foot { grid-template-columns: 16px minmax(80px,1fr) 36px; gap: 6px; }
  .glass-card { padding: 31px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}


/* =========================================================
   MÓVIL V11 — MISMA ESTÉTICA
   El escritorio no se modifica. En móvil se reutilizan:
   - los mismos colores
   - la misma tipografía
   - el mismo fondo original
   - los mismos botones dorado/azul
   - los mismos modales y reproductor
   ========================================================= */
.dbo-mobile { display:none; }

@media (max-width: 700px) {
  html, body {
    width:100%;
    height:100%;
    overflow:hidden;
    background:#020814;
  }

  /* Ocultamos únicamente la composición 1920x1080 pintada.
     No cambiamos la versión de escritorio. */
  #inicio > .hero { display:none !important; }

  .dbo-mobile {
    position:fixed;
    inset:0;
    z-index:1;
    display:block;
    overflow:hidden;
    background:#020814;
  }

  .dbo-mobile-bg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    user-select:none;
    pointer-events:none;
    filter:brightness(.74) saturate(.94);
  }

  .dbo-mobile::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(1,8,20,.28) 0%, rgba(1,8,20,.04) 28%, rgba(1,8,20,.12) 62%, rgba(1,8,20,.48) 100%),
      linear-gradient(90deg, rgba(1,8,20,.50) 0%, rgba(1,8,20,.18) 70%, rgba(1,8,20,.08) 100%);
  }

  /* Barra superior inspirada directamente en la original. */
  .dbo-mobile-header {
    position:absolute;
    left:0;
    right:0;
    top:0;
    z-index:4;
    padding:11px 13px 8px;
    border-bottom:1px solid rgba(226,192,102,.28);
    background:linear-gradient(180deg,rgba(3,14,30,.94),rgba(3,14,30,.82));
    backdrop-filter:blur(7px);
  }

  .dbo-mobile-logo {
    margin-bottom:9px;
    color:#f0d484;
    text-align:center;
    font:600 17px/1 Georgia,"Times New Roman",serif;
    letter-spacing:.105em;
    text-shadow:0 1px 3px #000;
  }

  /* Mismos apartados, sin inventar un menú nuevo.
     Se desplaza horizontalmente si el móvil es muy estrecho. */
  .dbo-mobile-nav {
    display:flex;
    gap:3px;
    overflow-x:auto;
    scrollbar-width:none;
    padding:0 1px 3px;
    -webkit-overflow-scrolling:touch;
  }
  .dbo-mobile-nav::-webkit-scrollbar { display:none; }

  .dbo-mobile-nav button,
  .dbo-mobile-nav a {
    flex:0 0 auto;
    height:31px;
    padding:0 11px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:0;
    color:#eaf0f5;
    background:transparent;
    text-decoration:none;
    text-transform:uppercase;
    font:600 9px/1 Arial,sans-serif;
    letter-spacing:.055em;
    white-space:nowrap;
    cursor:pointer;
  }
  .dbo-mobile-nav button:active,
  .dbo-mobile-nav a:active {
    color:#f0d176;
    background:rgba(221,185,90,.08);
  }

  /* El bloque principal NO es una tarjeta.
     Flota sobre el paisaje como en tu portada de PC. */
  .dbo-mobile-copy {
    position:absolute;
    z-index:3;
    left:22px;
    right:22px;
    top:25%;
    color:#f4f6fa;
    text-shadow:0 1px 3px rgba(0,0,0,.92);
  }

  .dbo-mobile-kicker {
    margin-bottom:7px;
    color:#e9c96d;
    font:600 11px/1 Arial,sans-serif;
    letter-spacing:.24em;
  }

  .dbo-mobile-copy h2 {
    margin:0;
    color:#fff9e7;
    font:500 clamp(31px,9.2vw,42px)/.98 Georgia,"Times New Roman",serif;
    letter-spacing:-.025em;
    text-shadow:0 2px 5px #000,0 0 16px rgba(239,205,111,.08);
  }

  .dbo-mobile-rule {
    position:relative;
    height:1px;
    margin:13px 0 15px;
    background:linear-gradient(90deg,rgba(222,188,95,.90),rgba(222,188,95,.18),transparent);
  }
  .dbo-mobile-rule span {
    position:absolute;
    left:48%;
    top:50%;
    transform:translate(-50%,-52%);
    padding:0 5px;
    color:#e0bf63;
    background:transparent;
    font-size:10px;
  }

  .dbo-mobile-copy p {
    max-width:390px;
    margin:0 0 11px;
    color:#f1f3f6;
    font:13px/1.45 Georgia,"Times New Roman",serif;
  }
  .dbo-mobile-copy p strong {
    color:#f0cf73;
    font-weight:600;
  }

  .dbo-mobile-actions {
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:9px;
    margin-top:15px;
  }

  .dbo-mobile-actions a {
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:11px;
    font:700 11px/1 Arial,sans-serif;
    letter-spacing:.03em;
    text-shadow:none;
  }

  .dbo-mobile-discord {
    color:#251800;
    border:1px solid #f0ce70;
    background:linear-gradient(180deg,#ffe9a1,#d7a344);
    box-shadow:0 0 17px rgba(230,179,56,.20),inset 0 0 0 2px rgba(255,255,255,.20);
  }

  .dbo-mobile-create {
    color:#f4f8ff;
    border:1px solid rgba(89,166,229,.88);
    background:linear-gradient(180deg,#123f6a,#08223f);
    box-shadow:inset 0 0 0 1px rgba(119,185,240,.08);
  }

  .dbo-mobile-slogan {
    margin-top:14px;
    display:flex;
    align-items:center;
    gap:9px;
    color:#e6c975;
    font:600 9px/1.2 Georgia,"Times New Roman",serif;
    letter-spacing:.06em;
    white-space:nowrap;
  }
  .dbo-mobile-slogan span {
    height:1px;
    flex:1;
    background:linear-gradient(90deg,transparent,#d1ad51);
  }
  .dbo-mobile-slogan span:last-child {
    background:linear-gradient(90deg,#d1ad51,transparent);
  }

  /* Contador online: mismo diseño existente, solo recolocado. */
  .dbo-online-mini {
    left:14px !important;
    top:91px !important;
    bottom:auto !important;
    width:190px !important;
    height:52px !important;
    padding:7px 11px !important;
    z-index:15 !important;
  }
  #dboOnlineCount { font-size:18px !important; }
  #dboOnlineLabel { font-size:10px !important; }
  .dbo-online-name { font-size:8px !important; }

  /* En móvil el pregón se oculta únicamente por falta de espacio.
     No se elimina del escritorio. */
  .dbo-herald { display:none !important; }

  /* Reproductor: MISMO reproductor, solo reducido para que no tape la portada. */
  .music-player {
    right:10px !important;
    left:10px !important;
    bottom:10px !important;
    width:auto !important;
    border-radius:13px !important;
    padding:8px 10px 9px !important;
    z-index:20 !important;
  }

  .music-player.minimized {
    left:auto !important;
    width:210px !important;
    min-width:0 !important;
  }

  .music-player:not(.minimized) {
    max-height:38svh;
    overflow:auto;
  }

  .player-kicker { font-size:8px !important; }
  .track-now { font-size:11px !important; }
  .player-select-label { font-size:9px !important; }
  .track-select { height:28px !important; font-size:10px !important; }
  .player-controls {
    grid-template-columns:27px 32px 27px minmax(88px,1fr) !important;
    gap:5px !important;
  }

  /* Modales: mismos colores y cristal, solo ajustados al ancho del móvil. */
  .glass-dialog {
    width:calc(100vw - 20px) !important;
    max-width:none !important;
    max-height:calc(100svh - 26px) !important;
    border-radius:14px !important;
  }
  .glass-card {
    padding:28px 18px 20px !important;
  }
  .glass-card h2 {
    padding-right:35px;
    font-size:27px !important;
    line-height:1.08 !important;
  }
  .info-body {
    font-size:13px !important;
    line-height:1.52 !important;
  }
  .modal-close {
    right:10px !important;
    top:10px !important;
  }

  /* Noticias nuevas también conservan el diseño actual, solo caben mejor. */
  #infoBody .dbo-news-list { gap:10px !important; }
  #infoBody .dbo-news-card { padding:13px 13px 12px 15px !important; }
  #infoBody .dbo-news-card h3 { font-size:16px !important; }
  #infoBody .dbo-news-card p { font-size:12px !important; line-height:1.48 !important; }
}

/* Móviles bajos/apaisados: compactamos sin cambiar el estilo. */
@media (max-width:700px) and (max-height:690px) {
  .dbo-mobile-copy { top:24%; }
  .dbo-mobile-copy h2 { font-size:29px; }
  .dbo-mobile-copy p { font-size:11px; line-height:1.36; margin-bottom:8px; }
  .dbo-mobile-actions { margin-top:10px; }
  .dbo-mobile-actions a { min-height:38px; }
  .dbo-mobile-slogan { display:none; }
  .dbo-online-mini { display:none !important; }
}



/* ================================ */


    .seo-h1{
      position:absolute!important;
      width:1px!important;height:1px!important;
      padding:0!important;margin:-1px!important;
      overflow:hidden!important;clip:rect(0,0,0,0)!important;
      white-space:nowrap!important;border:0!important;
    }
  

/* ================================ */


    /* Añadidos MMO: contador online + pregón. No interfieren con los botones. */
    .dbo-online-mini{
      position:fixed;
      left:18px;
      bottom:18px;
      z-index:14;
      width:204px;
      height:56px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 13px;
      border:1px solid rgba(226,191,104,.46);
      border-radius:10px;
      color:#eef7fb;
      background:linear-gradient(180deg,rgba(8,24,39,.91),rgba(3,12,23,.94));
      box-shadow:0 14px 34px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.02);
      backdrop-filter:blur(10px);
      pointer-events:none;
      font-family:Arial,sans-serif;
    }
    .dbo-online-mini::before{
      content:"";
      position:absolute;
      left:8px;
      right:8px;
      top:5px;
      height:1px;
      background:linear-gradient(90deg,transparent,rgba(221,185,96,.50),transparent);
    }
    .dbo-online-dot{
      width:10px;
      height:10px;
      flex:none;
      border-radius:50%;
      background:#9ef765;
      box-shadow:0 0 9px rgba(137,255,84,.9),0 0 18px rgba(137,255,84,.24);
      animation:dboOnlinePulse 1.7s ease-in-out infinite;
    }
    @keyframes dboOnlinePulse{
      50%{transform:scale(.82);opacity:.72}
    }
    .dbo-online-copy{min-width:0;display:flex;flex-direction:column;line-height:1}
    .dbo-online-main{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
    #dboOnlineCount{
      color:#c9efff;
      font-size:20px;
      font-weight:700;
      text-shadow:0 0 8px rgba(94,189,255,.20);
    }
    #dboOnlineLabel{
      color:#eef7fb;
      font-size:11px;
      font-weight:700;
      letter-spacing:.02em;
    }
    .dbo-online-name{
      margin-top:4px;
      color:#9ab1c4;
      font-size:9px;
      letter-spacing:.13em;
      white-space:nowrap;
    }

    .dbo-herald{
      position:fixed;
      left:50%;
      bottom:20px;
      transform:translateX(-50%);
      z-index:13;
      width:min(470px,calc(100vw - 650px));
      min-width:360px;
      height:44px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 48px;
      border-top:1px solid rgba(231,199,116,.38);
      border-bottom:1px solid rgba(231,199,116,.20);
      color:#f0ddb0;
      background:linear-gradient(90deg,transparent,rgba(4,17,31,.80) 15%,rgba(4,17,31,.90) 50%,rgba(4,17,31,.80) 85%,transparent);
      text-align:center;
      pointer-events:none;
    }
    .dbo-herald::before,.dbo-herald::after{
      content:"\2726";
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      color:#d6b45e;
      font-size:11px;
      text-shadow:0 0 7px rgba(255,216,111,.34);
    }
    .dbo-herald::before{left:31px}
    .dbo-herald::after{right:31px}
    .dbo-herald strong{
      display:block;
      color:#f0ddb0;
      font:600 12px/1.15 Georgia,"Times New Roman",serif;
      letter-spacing:.06em;
      text-shadow:0 1px 2px #000;
    }
    .dbo-herald span{
      display:block;
      margin-top:3px;
      color:#90b4ce;
      font:9px/1 Arial,sans-serif;
      letter-spacing:.07em;
    }
    .dbo-herald-text{
      opacity:1;
      transition:opacity .28s ease;
    }
    .dbo-herald-text.is-changing{opacity:0}

    @media(max-width:1120px){
      .dbo-herald{display:none}
    }
    @media(max-width:560px){
      .dbo-online-mini{
        left:8px;
        bottom:8px;
        width:178px;
        height:50px;
        padding:7px 10px;
      }
      #dboOnlineCount{font-size:18px}
      #dboOnlineLabel{font-size:10px}
      .dbo-online-name{font-size:8px}
    }
  

/* ================================ */


    #infoBody .dbo-news-intro{
      margin:0 0 18px;
      color:#9fb0be;
      font:13px/1.5 Arial,sans-serif;
    }
    #infoBody .dbo-news-list{
      display:grid;
      gap:14px;
      margin-top:12px;
    }
    #infoBody .dbo-news-card{
      position:relative;
      padding:17px 19px 16px 21px;
      border:1px solid rgba(134,107,57,.54);
      border-left:3px solid #c7a04d;
      border-radius:5px;
      background:linear-gradient(180deg,rgba(11,35,54,.80),rgba(5,21,35,.92));
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
    }
    #infoBody .dbo-news-meta{
      display:flex;
      align-items:center;
      gap:9px;
      margin-bottom:8px;
      color:#7592a7;
      font:700 9px/1 Arial,sans-serif;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    #infoBody .dbo-news-badge{
      padding:4px 7px;
      border:1px solid rgba(199,160,77,.42);
      border-radius:3px;
      color:#d4b96f;
      background:rgba(132,97,37,.12);
    }
    #infoBody .dbo-news-card h3{
      margin:0 0 8px;
      color:#f1d58b;
      font:500 19px/1.2 Georgia,"Times New Roman",serif;
    }
    #infoBody .dbo-news-card p{
      margin:0;
      color:#c6d0d8;
      font:13px/1.58 Arial,sans-serif;
    }
    #infoBody .dbo-news-card strong{
      color:#e9c96e;
      font-weight:600;
    }
    #infoBody .dbo-news-foot{
      margin-top:16px;
      padding-top:12px;
      border-top:1px solid rgba(128,99,47,.30);
      color:#71899a;
      text-align:center;
      font:9px/1.4 Arial,sans-serif;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
  

/* ================================ */


@media (max-width:700px){

  /* Cabecera más compacta */
  .dbo-mobile-header{
    padding:8px 10px 6px !important;
  }
  .dbo-mobile-logo{
    margin-bottom:6px !important;
    font-size:15px !important;
    letter-spacing:.09em !important;
  }
  .dbo-mobile-nav{
    gap:1px !important;
    padding-bottom:1px !important;
  }
  .dbo-mobile-nav button,
  .dbo-mobile-nav a{
    height:27px !important;
    padding:0 8px !important;
    font-size:8px !important;
    letter-spacing:.045em !important;
  }

  /* Contenido principal con más aire */
  .dbo-mobile-copy{
    top:27% !important;
    left:20px !important;
    right:20px !important;
  }
  .dbo-mobile-kicker{
    font-size:10px !important;
    margin-bottom:6px !important;
  }
  .dbo-mobile-copy h2{
    font-size:clamp(28px,8vw,36px) !important;
    line-height:1 !important;
  }
  .dbo-mobile-rule{
    margin:11px 0 13px !important;
  }
  .dbo-mobile-copy p{
    font-size:12px !important;
    line-height:1.42 !important;
    margin-bottom:9px !important;
  }
  .dbo-mobile-actions{
    gap:8px !important;
    margin-top:12px !important;
  }
  .dbo-mobile-actions a{
    min-height:41px !important;
    font-size:10px !important;
  }
  .dbo-mobile-slogan{
    margin-top:11px !important;
    font-size:8px !important;
  }

  /* Jugadores online vuelve a aparecer arriba sin tapar nada */
  .dbo-online-mini{
    display:flex !important;
    left:auto !important;
    right:10px !important;
    top:74px !important;
    bottom:auto !important;
    width:166px !important;
    height:44px !important;
    padding:6px 9px !important;
    gap:7px !important;
    border-radius:8px !important;
    z-index:30 !important;
  }
  .dbo-online-dot{
    width:7px !important;
    height:7px !important;
  }
  #dboOnlineCount{
    font-size:15px !important;
  }
  #dboOnlineLabel{
    font-size:8px !important;
  }
  .dbo-online-name{
    margin-top:3px !important;
    font-size:6.5px !important;
    letter-spacing:.09em !important;
  }

  /* El reproductor original vuelve a estar visible y compacto */
  .music-player{
    display:block !important;
    left:auto !important;
    right:8px !important;
    bottom:8px !important;
    width:205px !important;
    min-width:0 !important;
    padding:7px 9px 8px !important;
    border-radius:12px !important;
    z-index:40 !important;
    pointer-events:auto !important;
  }
  .music-player.minimized{
    width:205px !important;
    min-width:0 !important;
  }
  .player-head{
    margin-bottom:0 !important;
  }
  .player-kicker{
    display:none !important;
  }
  .track-now{
    font-size:10px !important;
  }
  .player-toggle{
    width:28px !important;
    height:28px !important;
    font-size:17px !important;
  }

  /* Si se abre, que no ocupe media pantalla */
  .music-player:not(.minimized){
    width:calc(100vw - 16px) !important;
    max-height:37svh !important;
    overflow:auto !important;
  }
}

/* En móviles bajitos NO ocultamos el contador */
@media (max-width:700px) and (max-height:690px){
  .dbo-online-mini{
    display:flex !important;
  }
  .dbo-mobile-copy{
    top:25% !important;
  }
  .dbo-mobile-copy h2{
    font-size:27px !important;
  }
  .dbo-mobile-copy p{
    font-size:11px !important;
    line-height:1.34 !important;
  }
  .dbo-mobile-actions a{
    min-height:37px !important;
  }
}


/* ================================ */


@media (max-width:700px){

  /* Contador más discreto, misma estética */
  .dbo-online-mini{
    right:10px !important;
    top:76px !important;
    width:148px !important;
    height:40px !important;
    padding:5px 8px !important;
    gap:6px !important;
    border-radius:8px !important;
  }
  .dbo-online-dot{
    width:6px !important;
    height:6px !important;
  }
  #dboOnlineCount{
    font-size:13px !important;
  }
  #dboOnlineLabel{
    font-size:7px !important;
  }
  .dbo-online-name{
    margin-top:2px !important;
    font-size:5.8px !important;
    letter-spacing:.08em !important;
  }

  /* Reproductor: al entrar ocupa solo una pequeña tira.
     El + abre exactamente el mismo reproductor de siempre. */
  .music-player{
    left:auto !important;
    right:8px !important;
    bottom:8px !important;
  }

  .music-player.minimized{
    width:184px !important;
    min-width:0 !important;
    padding:6px 8px !important;
  }

  /* Importante: el CSS original daba display:grid al body y
     podía ignorar el atributo hidden en algunos navegadores. */
  .music-player.minimized .player-body{
    display:none !important;
  }

  .music-player.minimized .player-head{
    margin:0 !important;
    min-height:30px !important;
  }

  .music-player.minimized .player-title-wrap{
    gap:0 !important;
  }

  .music-player.minimized .track-now{
    font-size:10px !important;
  }

  .music-player.minimized .player-toggle{
    width:29px !important;
    height:29px !important;
    font-size:17px !important;
  }

  /* Abierto: sigue cabiendo entero en el móvil */
  .music-player:not(.minimized){
    width:calc(100vw - 16px) !important;
    max-height:36svh !important;
    overflow:auto !important;
  }
}


/* ================================ */


.mobile-mini-controls{display:none}

@media (max-width:700px){
  /* Barra compacta un poco más ancha para meter controles rápidos */
  .music-player.minimized{
    width:318px !important;
    max-width:calc(100vw - 16px) !important;
    padding:6px 8px !important;
  }

  .music-player.minimized .player-head{
    display:grid !important;
    grid-template-columns:minmax(88px,1fr) auto 30px !important;
    gap:7px !important;
    align-items:center !important;
  }

  .music-player.minimized .player-title-wrap{
    min-width:0 !important;
  }

  .music-player.minimized .track-now{
    display:block !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    font-size:10px !important;
  }

  .music-player.minimized .mobile-mini-controls{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
  }

  .mobile-mini-controls button{
    width:27px !important;
    height:27px !important;
    padding:0 !important;
    border:1px solid rgba(214,181,93,.28) !important;
    border-radius:50% !important;
    background:rgba(7,25,45,.88) !important;
    color:#efd27b !important;
    font:700 11px/1 Arial,sans-serif !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .mobile-mini-controls button:active{
    transform:scale(.94);
    background:rgba(20,59,94,.96) !important;
  }

  #mobilePlayStop{
    border-color:rgba(80,165,229,.55) !important;
    color:#d8efff !important;
  }

  .music-player.minimized .player-toggle{
    width:29px !important;
    height:29px !important;
    font-size:17px !important;
  }

  /* Cuando se abre el reproductor completo, ocultamos los controles duplicados */
  .music-player:not(.minimized) .mobile-mini-controls{
    display:none !important;
  }
}


/* ================================ */


.mobile-particles{display:none}

@media (max-width:700px){
  .mobile-particles{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:2;
    pointer-events:none;
    opacity:.92;
  }

  /* El contenido sigue por encima de las luciérnagas */
  .dbo-mobile-header,
  .dbo-mobile-copy{
    z-index:4 !important;
  }
}


/* ================================ */


@media (max-width:700px){
  .mobile-particles{
    opacity:.72 !important;
    mix-blend-mode:screen;
  }
}


/* ================================ */


.accounts-overlay{
  position:fixed;
  inset:0;
  z-index:55;
  display:none;
  background:#020814;
}
.accounts-overlay.open{display:block}

.accounts-shell{
  position:absolute;
  inset:0;
  background:#020814;
}

.accounts-topbar{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:46px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  border-bottom:1px solid rgba(223,190,96,.28);
  background:linear-gradient(180deg,rgba(4,18,35,.98),rgba(3,13,26,.96));
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  font-family:Arial,sans-serif;
}
.accounts-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#9cb6c9;
  font:700 9px/1 Arial,sans-serif;
  letter-spacing:.12em;
}

.accounts-frame{
  position:absolute;
  left:0;
  right:0;
  top:46px;
  bottom:0;
  width:100%;
  height:calc(100% - 46px);
  border:0;
  background:#020814;
}

/* El reproductor del PADRE queda por encima:
   así la canción no se corta y aún puedes controlarla. */
.accounts-overlay.open ~ .music-player,
body.accounts-open .music-player{
  z-index:70 !important;
}

@media(max-width:700px){
  .accounts-topbar{
    height:42px;
    padding:0 9px;
  }
  .accounts-title{
    font-size:7px;
  }
  .accounts-frame{
    top:42px;
    height:calc(100% - 42px);
  }

  /* En cuentas, el reproductor se queda pequeño abajo a la derecha */
  body.accounts-open .music-player{
    left:auto !important;
    right:8px !important;
    bottom:8px !important;
    width:318px !important;
    max-width:calc(100vw - 16px) !important;
  }
  body.accounts-open .music-player .player-body{
    display:none !important;
  }
  body.accounts-open .music-player{
    min-height:auto !important;
  }
}


/* ================================ */


.accounts-topbar{
  position:static !important;
  height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}


.accounts-title{
  display:none !important;
}

.accounts-frame{
  top:0 !important;
  height:100% !important;
}

@media(max-width:700px){

  .accounts-frame{
    top:0 !important;
    height:100% !important;
  }
}


/* ============================================================
   DBO · RANKING TOP 50 GLOBAL
   Añadido sin alterar la portada ni el HUD existente.
   ============================================================ */
.dbo-ranking-trigger{
  position:fixed;
  left:232px;
  bottom:18px;
  z-index:15;
  width:132px;
  height:56px;
  padding:7px 10px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid rgba(226,191,104,.58);
  border-radius:10px;
  color:#f2d786;
  background:
    linear-gradient(180deg,rgba(15,39,57,.95),rgba(4,16,28,.97));
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(10px);
  cursor:pointer;
  font-family:Arial,sans-serif;
  text-align:center;
}
.dbo-ranking-trigger::before{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:5px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,194,102,.62),transparent);
}
.dbo-ranking-trigger strong{
  color:#f4dda1;
  font:700 12px/1 Arial,sans-serif;
  letter-spacing:.13em;
  text-shadow:0 0 10px rgba(221,180,76,.16);
}
.dbo-ranking-trigger span{
  color:#91a9bd;
  font:700 7px/1 Arial,sans-serif;
  letter-spacing:.12em;
}
.dbo-ranking-trigger:hover,
.dbo-ranking-trigger:focus-visible{
  border-color:rgba(244,221,161,.88);
  background:linear-gradient(180deg,rgba(21,52,74,.97),rgba(5,20,34,.98));
  outline:none;
  box-shadow:
    0 15px 36px rgba(0,0,0,.40),
    0 0 20px rgba(205,162,67,.10),
    inset 0 0 0 1px rgba(255,255,255,.035);
}

.dbo-ranking-dialog{
  width:min(92vw,760px);
  max-height:88vh;
  padding:0;
  border:1px solid rgba(185,149,75,.55);
  border-radius:16px;
  color:#edf5fb;
  background:transparent;
  overflow:auto;
  box-shadow:0 32px 110px rgba(0,0,0,.76),0 0 45px rgba(40,116,186,.13);
}
.dbo-ranking-dialog::backdrop{
  background:rgba(0,7,16,.84);
  backdrop-filter:blur(9px);
}
.dbo-ranking-card{
  position:relative;
  min-height:340px;
  padding:34px 34px 25px;
  background:
    radial-gradient(circle at 50% -5%,rgba(42,111,171,.22),transparent 36%),
    radial-gradient(circle at 100% 0%,rgba(75,122,176,.13),transparent 34%),
    linear-gradient(165deg,rgba(8,28,46,.995),rgba(2,11,20,.998));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.dbo-ranking-card::before,
.dbo-ranking-card::after{
  content:"";
  position:absolute;
  top:76px;
  width:29%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(204,164,75,.44));
}
.dbo-ranking-card::before{left:6%}
.dbo-ranking-card::after{right:6%;transform:scaleX(-1)}
.dbo-ranking-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#f4f7fa;
  background:rgba(4,18,31,.76);
  cursor:pointer;
  font:400 27px/1 Arial,sans-serif;
}
.dbo-ranking-close:hover,
.dbo-ranking-close:focus-visible{
  border-color:rgba(238,206,126,.72);
  background:rgba(15,39,61,.98);
  outline:none;
}
.dbo-ranking-eyebrow{
  margin:0 0 6px;
  color:#b99348;
  text-align:center;
  font:700 9px/1 Arial,sans-serif;
  letter-spacing:.27em;
}
.dbo-ranking-card h2{
  margin:0;
  color:#ead18d;
  text-align:center;
  font:500 clamp(31px,5vw,43px)/1.05 Georgia,"Times New Roman",serif;
  letter-spacing:.04em;
  text-shadow:0 0 20px rgba(210,166,70,.12);
}
.dbo-ranking-subtitle{
  margin:9px 0 22px;
  color:#7693a9;
  text-align:center;
  font:700 9px/1.2 Arial,sans-serif;
  letter-spacing:.16em;
}
.dbo-ranking-status{
  margin:22px 0 16px;
  padding:18px;
  border:1px solid rgba(92,128,153,.22);
  border-radius:8px;
  color:#9fb3c3;
  background:rgba(2,15,26,.58);
  text-align:center;
  font:12px/1.45 Arial,sans-serif;
}
.dbo-ranking-table-wrap{
  overflow:hidden;
  border:1px solid rgba(125,102,59,.38);
  border-radius:7px;
  background:rgba(2,15,25,.56);
}
.dbo-ranking-head,
.dbo-ranking-row{
  display:grid;
  grid-template-columns:90px minmax(180px,1fr) 170px;
  align-items:center;
}
.dbo-ranking-head{
  min-height:34px;
  padding:0 15px;
  color:#7892a5;
  background:linear-gradient(180deg,rgba(11,37,57,.92),rgba(7,27,43,.94));
  border-bottom:1px solid rgba(147,118,61,.34);
  font:700 8px/1 Arial,sans-serif;
  letter-spacing:.16em;
}
.dbo-ranking-list{
  max-height:min(54vh,540px);
  overflow:auto;
  scrollbar-color:#645334 #071724;
  scrollbar-width:thin;
}
.dbo-ranking-row{
  min-height:45px;
  padding:0 15px;
  border-bottom:1px solid rgba(71,101,120,.17);
  color:#cbd7df;
  font-family:Arial,sans-serif;
}
.dbo-ranking-row:last-child{border-bottom:0}
.dbo-ranking-row:nth-child(even){background:rgba(10,33,50,.23)}
.dbo-ranking-row:hover{background:rgba(20,53,73,.34)}
.dbo-ranking-position{
  color:#72899a;
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.dbo-ranking-player{
  min-width:0;
  color:#eef4f7;
  font-size:13px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dbo-ranking-race{
  color:#9db2c0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}
.dbo-ranking-row.is-top-1{
  background:linear-gradient(90deg,rgba(173,128,31,.19),rgba(9,31,47,.22));
}
.dbo-ranking-row.is-top-2{
  background:linear-gradient(90deg,rgba(144,160,173,.13),rgba(9,31,47,.20));
}
.dbo-ranking-row.is-top-3{
  background:linear-gradient(90deg,rgba(151,89,45,.13),rgba(9,31,47,.20));
}
.dbo-ranking-row.is-top-1 .dbo-ranking-position,
.dbo-ranking-row.is-top-1 .dbo-ranking-player{color:#f0ce6e}
.dbo-ranking-row.is-top-2 .dbo-ranking-position,
.dbo-ranking-row.is-top-2 .dbo-ranking-player{color:#d5e0e7}
.dbo-ranking-row.is-top-3 .dbo-ranking-position,
.dbo-ranking-row.is-top-3 .dbo-ranking-player{color:#d59a6b}
.dbo-ranking-medal{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-right:8px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:10px;
  vertical-align:middle;
  opacity:.92;
}
.dbo-ranking-foot{
  margin:15px 0 0;
  color:#5f788b;
  text-align:center;
  font:8px/1 Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}

@media (max-width:700px){
  .dbo-ranking-trigger{
    left:auto !important;
    right:166px !important;
    top:76px !important;
    bottom:auto !important;
    width:108px !important;
    height:40px !important;
    padding:5px 6px !important;
    gap:2px !important;
    border-radius:8px !important;
    z-index:31 !important;
  }
  .dbo-ranking-trigger strong{
    font-size:9px !important;
    letter-spacing:.10em !important;
  }
  .dbo-ranking-trigger span{
    font-size:5.7px !important;
    letter-spacing:.08em !important;
  }
  .dbo-ranking-dialog{
    width:calc(100vw - 18px);
    max-height:calc(100svh - 20px);
    border-radius:13px;
  }
  .dbo-ranking-card{
    padding:28px 12px 18px;
  }
  .dbo-ranking-card::before,
  .dbo-ranking-card::after{
    top:65px;
    width:21%;
  }
  .dbo-ranking-card h2{
    font-size:29px;
  }
  .dbo-ranking-subtitle{
    margin-bottom:16px;
    font-size:7px;
  }
  .dbo-ranking-head,
  .dbo-ranking-row{
    grid-template-columns:64px minmax(120px,1fr) 100px;
  }
  .dbo-ranking-head{
    padding:0 9px;
    font-size:6.5px;
  }
  .dbo-ranking-row{
    min-height:42px;
    padding:0 9px;
  }
  .dbo-ranking-position{font-size:10px}
  .dbo-ranking-player{font-size:11px}
  .dbo-ranking-race{font-size:9px}
  .dbo-ranking-medal{
    width:18px;
    height:18px;
    margin-right:5px;
    font-size:8px;
  }
  .dbo-ranking-list{
    max-height:55svh;
  }
}

@media (max-width:390px){
  .dbo-ranking-trigger{
    right:160px !important;
    width:96px !important;
  }
  .dbo-ranking-head,
  .dbo-ranking-row{
    grid-template-columns:58px minmax(100px,1fr) 88px;
  }
}