/* === MOBILE: header con back.png + ajustes === */
@media (max-width: 900px){
  html,body{max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  #Bodycontainer,#ContentRow,#ContentColumn,#MenuColumn,#ThemeboxesColumn{
    width:100%!important;max-width:100%!important;float:none!important;margin:0!important
  }
  #ThemeboxesColumn{display:none!important}

  /* Barra superior con textura back.png + degradado */
  #mobile-header{
    position:fixed; top:0; left:0; right:0; height:60px; z-index:9999;
    background:
      url('../images/mobile/back.png') center/cover no-repeat,
      radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.07), transparent 60%),
      linear-gradient(180deg, rgba(30,74,29,.92) 0%, rgba(22,56,22,.92) 100%);
    background-blend-mode: normal, multiply, normal;
    border-bottom:2px solid #0f270f;
    transition:background .3s ease;
  }

  /* Logo centrado y más chico */
  #mobile-header .mobile-logo{
    position:absolute; left:50%; transform:translateX(-50%);
    top:8px; height:44px; width:auto; display:block;
    pointer-events:none;
  }

  /* Deja espacio para la barra */
  body{ padding-top:60px; }
  
  
  
  

/* Menú lateral (debajo de la barra) */
#Menu{
    display: none !important;
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 80%;
    max-width: 170px;

    /* Fondo con la misma imagen que la barra */
    background: url('../images/mobile/back.png') center/cover no-repeat,
                rgb(129, 122, 101); /* color de respaldo */
    background-blend-mode: multiply;

    padding: 1px 5px;
    overflow-y: auto;
    z-index: 10001;
}
  #Menu.open{ display:block!important; }



  /* Botón MENU */
  .mobile-btn{
    position:fixed; top:8px; left:20px; z-index:10002;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    background:#204c20; border:1px solid #0f270f; border-radius:10px;
  }
  .mobile-btn img{ width:45px; height:45px; display:block; }

  /* Botón LOGIN */
  .account-btn{
    position:fixed; top:8px; right:20px; z-index:10002;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    background:#204c20; border:1px solid #0f270f; border-radius:8px;
  }
  .account-btn img{ width:45px; height:45px; display:block; }
}

/* Ocultar login en escritorio */
@media (min-width: 901px){
  .account-btn{ display:none; }
  #mobile-header, #mobile-header .mobile-logo, .mobile-btn { display:none!important; }
  body { padding-top:0!important; }
}
@media (max-width: 900px){
  /* botones siempre arriba del overlay/drawer */
  .mobile-btn, .account-btn{ z-index: 10030; pointer-events:auto; }
  #mobile-header{ z-index: 10020; }
  #Menu{ z-index: 10015; }
  #mobile-overlay{ z-index: 10010; }

  /* el logo no bloquea clics */
  #mobile-header .mobile-logo{ z-index: 10021; pointer-events: none; }
}

/* ===== Fix: overlay visible cuando JS añade .show ===== */
#mobile-overlay.show { display: block !important; }

/* ===== Fix: ancho completo + zoom + límites de logo/medios ===== */
@media (max-width:900px){
  /* Evitar recorte lateral y permitir gestos */
  html, body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    touch-action:auto;
  }
  /* Bloquear scroll del fondo cuando el menú lateral está abierto */
  body.mobile-drawer-open{
    overflow:hidden !important;
    height:100vh !important;
    touch-action:none !important;
  }

  /* Wrappers a 100% (a veces vienen fijos en px) */
  #MainHelper1,#MainHelper2,#ArtworkHelper1,#ArtworkHelper2,
  #Bodycontainer,#ContentRow,#ContentColumn,#MenuColumn,#ThemeboxesColumn{
    width:100% !important; max-width:100% !important; min-width:0 !important;
    float:none !important; margin:0 !important; box-sizing:border-box;
  }

  /* Tablas/cajas que desbordan en algunas subpáginas */
  .TableContainer, .TableContent, .TableContainer table{
    width:100% !important; max-width:100% !important;
  }
  .TableContainer table{ table-layout: fixed; }
  .TableContainer td{ word-break:break-word; overflow-wrap:anywhere; }

  /* Medios responsivos en el contenido (sin afectar header/botones) */
  #Bodycontainer img, #ContentRow img, #ContentColumn img,
  #ThemeboxesColumn img, #MenuColumn img,
  #Bodycontainer iframe, #ContentRow iframe, #ContentColumn iframe{
    max-width:100% !important; height:auto !important;
  }

  /* Limitar el tamaño del logo del header para que no tape */
  #mobile-header .mobile-logo{
    height:36px !important;         /* ajusta 32–40px si lo prefieres */
    max-width:140px !important;
    width:auto !important;
    top:8px;
  }

  /* Iconos dentro de los botones: tamaño consistente */
  .mobile-btn img,
  .account-btn img{ width:45px; height:45px; display:block; }

  /* Alineación del overlay con tu header de 60px */
  #mobile-overlay{ top:60px; }
  #Menu{ top:60px; }
}
/* === Overlay y animación del drawer === */
@media (max-width: 900px){
  /* Overlay de fondo (tap para cerrar) */
  #mobile-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none;
    transition:opacity .18s ease-out;
  }
  #mobile-overlay.show{ opacity:1; pointer-events:auto; }

  /* Slide del menú lateral */
  #Menu{
    transform:translateX(-100%);
    transition:transform .18s ease-out;
    will-change: transform;
  }
  #Menu.open{ transform:translateX(0); }

  /* Bloquear scroll del body cuando drawer está abierto */
  body.no-scroll{ overflow:hidden; }

  /* Safe-area (iOS notch) */
  #mobile-header{
    padding-top: max(0px, env(safe-area-inset-top));
    height: calc(60px + env(safe-area-inset-top));
  }
  body{
    padding-top: calc(60px + env(safe-area-inset-top));
  }

  /* Tablas anchas: scroll horizontal suave */
  .BoxContent table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
/* === ZOOM SÓLO DEL CONTENIDO === */
@media (max-width: 900px){
  /* Contenedor que controla scroll cuando el contenido se escala */
  #zoom-wrapper{
    position: relative;
    width: 100%;
    overflow-x: auto;       /* si se amplía mucho, permite desplazar */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  /* Nodo que realmente se escala */
  #zoom-root{
    transform: scale(1);
    transform-origin: top center;
    will-change: transform;
  }

  /* Asegura que header, botones, menú y overlay NO se escalen */
  #mobile-header,
  .mobile-btn,
  .account-btn,
  #Menu,
  #mobile-overlay{
    transform: none !important;
  }

  /* Safe-area iOS + que el body deje espacio al header fijo */
  #mobile-header{
    padding-top: max(0px, env(safe-area-inset-top));
    height: calc(60px + env(safe-area-inset-top));
  }
  body{
    padding-top: calc(60px + env(safe-area-inset-top));
  }
}


/* === FIXES Account Management === */
@media (max-width: 900px){

  /* Evitar doble padding-top */
  body{
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
  }

  /* Inputs y botones adaptables */
  input[type="text"], input[type="password"], input[type="email"], select, textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;
    padding: 8px;
  }

  input[type="submit"], button, .Button {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px;
    padding: 10px;
  }

  /* Cuadro de login responsivo */
  .TableContainer, .TableContent {
    width: 100% !important;
    max-width: 100% !important;
  }
  .TableContainer table{
    table-layout: auto !important;
  }
  .TableContainer td{
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* Zoom solo del contenido en Account Management */
@media (max-width: 900px){
  body.page-accountmanagement #zoom-wrapper{
    overflow-x: auto;
  }
  body.page-accountmanagement #zoom-root{
    transform: scale(1);
    transform-origin: top center;
  }
}
/* === HOTFIX MOBILE (Gesior) — tablas decorativas e imágenes === */
@media (max-width: 900px){

  /* 1) Revertir el truco global que volvía las tablas en bloques y cortaba el alto */
  .BoxContent table{
    display: table !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .TableContainer table{
    display: table !important;
    width: 100% !important;
    table-layout: auto !important;   /* evita columnas aplastadas */
  }
  .TableContainer{ overflow: visible !important; }

  /* 2) Imágenes dentro de celdas (quedaban muy chicas) */
  .BoxContent td img{
    max-width: 100% !important;
    height: auto !important;
  }

  /* 3) Avatares / outfits en listados: tamaño táctil cómodo */
  .BoxContent td img[outfit],
  .BoxContent td .outfit img{
    width: 64px !important;     /* sube o baja si quieres 56/72 */
    height: auto !important;
  }

  /* 4) Grillas/tabla de “clases” con imágenes (encabezado de whoisonline, etc.) */
  .BoxContent .stats,             /* si existe esa clase */
  .BoxContent .vocations-grid,    /* por si la usas */
  .BoxContent .classes-grid{
    width: 100% !important;
  }
  .BoxContent .stats img,
  .BoxContent .vocations-grid img,
  .BoxContent .classes-grid img{
    display: block;
    margin: 0 auto;
    height: auto !important;
    max-width: 100% !important;
  }

  /* 5) Si alguna tabla SÍ necesita scroll horizontal, usa un wrapper .scroll-x */
  .scroll-x{
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

 
}


/* === WHO IS ONLINE: versión móvil con 10 vocaciones (2x5) === */
@media (max-width:900px){
  /* Mostrar móvil / ocultar escritorio */
  .wo-desktop{ display:none !important; }
  .wo-mobile{ display:block !important; }

  /* Grid vocaciones 2x5 */
  .who-voc-grid10{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:8px;
    margin:8px 0 10px;
  }
  .who-voc-item10{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:8px 6px;
    border:1px solid rgba(0,0,0,.15);
    border-radius:10px;
    background:rgba(255,255,255,.05);
  }
  .who-voc-icon{
    width:28px;
    height:28px;
    margin-bottom:4px;
  }
  .who-voc-name{
    font-size:11px;
    font-weight:700;
    text-align:center;
    line-height:1.1;
  }
  .who-voc-badge{
    margin-top:4px;
    min-width:24px;
    text-align:center;
    font-weight:700;
    padding:2px 6px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.2);
    background:rgba(0,0,0,.08);
    font-size:12px;
  }

  /* Leyenda skulls */
  .who-skull-legend{
    margin:6px 0 10px;
  }
  .who-skull-legend ul{
    list-style:none;
    padding:0;
    margin:0;
  }
  .who-skull-legend li{
    display:flex;
    align-items:center;
    gap:6px;
    padding:2px 0;
    font-size:12px;
  }
  .who-skull-legend img{
    width:16px;
    height:16px;
  }

  /* Tarjetas jugadores */
  .who-card{
    display:block;
    padding:8px 10px;
    margin:6px 0;
    border:1px solid rgba(0,0,0,.15);
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    background:rgba(255,255,255,.05);
  }
  .who-row{
    display:grid;
    grid-template-columns: 52px 1fr auto;
    gap:8px;
    align-items:center;
  }
  .who-outfit{
    width:48px;
    height:auto;
    display:block;
  }
  .who-skull{
    width:16px;
    height:16px;
    margin-left:2px;
    vertical-align:middle;
  }
  .who-name .who-link{
    text-decoration:none;
    color:inherit;
  }
  .who-status.on{
    background-color:#00ff6a;
    color:#000;
    border:1px solid #00cc55;
    padding:4px 8px;
    border-radius:999px;
  }
}

@media (min-width:901px){
  .wo-desktop{ display:block; }
  .wo-mobile{ display:none; }
}
@media (max-width:900px){
  .who-total{ margin-top:-2px; margin-bottom:8px; font-weight:700; }
  .who-skull-note{ margin-top:6px; font-weight:700; text-align:center; }
}

/* === SPELLS: versión móvil (tarjetas) desde spells.xml === */
@media (max-width:900px){
  .sp-desktop{ display:none !important; }
  .sp-mobile{ display:block !important; }
  
  @media (min-width:901px){
  .sp-desktop{ display:block !important; }
  .sp-mobile{ display:none !important; }
}


  .spells-mobile-wrap{ margin-top:2px; }
  .spells-legend{ font-weight:700; font-size:16px; margin-bottom:2px; }
  .spells-sublegend{ font-size:12px; opacity:.8; margin-bottom:8px; }

  .sp-card{
    border:1px solid rgba(0,0,0,.18);
    border-radius:10px;
    background:#d4c0a1; /* tono tibiano */
    box-shadow:0 2px 6px rgba(0,0,0,.1);
    padding:10px;
    margin:8px 0;
  }
  .sp-premium-card{ border-left:4px solid #d4af37; background:#fff7d6; }

  .sp-row{
    display:grid;
    grid-template-columns: 44px 1fr;
    gap:10px; align-items:flex-start;
  }
  .sp-left{ display:flex; align-items:center; justify-content:center; }
  .sp-icon{ width:40px; height:40px; image-rendering:pixelated; }

  .sp-name{ font-weight:800; line-height:1.1; margin-bottom:4px; }
  .sp-prem{
    font-size:11px; font-weight:700;
    padding:2px 6px; border-radius:999px; margin-left:6px;
    border:1px solid rgba(212,175,55,.6); background:rgba(212,175,55,.22);
  }
  .sp-words{ font-style:italic; font-size:12px; margin-bottom:6px; }

  .sp-meta{ display:flex; flex-wrap:wrap; gap:6px; }
  .sp-chip{
    font-size:12px; padding:2px 8px; border-radius:999px;
    border:1px solid rgba(0,0,0,.22); background:rgba(0,0,0,.06);
  }
  .sp-chip.sp-dim{ opacity:.9; }

  /* colores de tipo (heredados de tu escritorio) */
  .badge-instant{ background:#cfe8ff; }
  .badge-conjure{ background:#d7f7d7; }
  .badge-rune{ background:#ffd6d6; }
}

@media (max-width:900px){
  .sp-desktop{ display:none !important; }
  .sp-mobile{ display:block !important; }

  .spells-mobile-filter{
    margin:6px 0 10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  }
  .spells-mobile-filter select,
  .spells-mobile-filter input[type="number"],
  .spells-mobile-filter input[type="submit"]{ font-size:14px; padding:6px 8px; }
  .spells-reset{ font-size:13px; text-decoration:underline; margin-left:4px; }

  .spells-mobile-wrap{ margin-top:2px; }
  .spells-legend{ font-weight:700; font-size:16px; margin-bottom:2px; }
  .spells-sublegend{ font-size:12px; opacity:.8; margin-bottom:8px; }

  .sp-card{ border:1px solid rgba(0,0,0,.18); border-radius:10px; background:#d4c0a1;
           box-shadow:0 2px 6px rgba(0,0,0,.1); padding:10px; margin:8px 0; }
  .sp-premium-card{ border-left:4px solid #d4af37; background:#fff7d6; }
  .sp-row{ display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:flex-start; }
  .sp-icon{ width:40px; height:40px; image-rendering:pixelated; }
  .sp-name{ font-weight:800; line-height:1.1; margin-bottom:4px; }
  .sp-prem{ font-size:11px; font-weight:700; padding:2px 6px; border-radius:999px; margin-left:6px;
            border:1px solid rgba(212,175,55,.6); background:rgba(212,175,55,.22); }
  .sp-words{ font-style:italic; font-size:12px; margin-bottom:6px; }
  .sp-meta{ display:flex; flex-wrap:wrap; gap:6px; }
  .sp-chip{ font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.22); background:rgba(0,0,0,.06); }
  .sp-chip.sp-dim{ opacity:.9; }
  .badge-instant{ background:#cfe8ff; } .badge-conjure{ background:#d7f7d7; } .badge-rune{ background:#ffd6d6; }

  /* === POPUP / MODAL === */
  body.sp-noscroll{ overflow:hidden; touch-action:none; }
  .sp-modal[aria-hidden="true"]{ display:none; }
  .sp-modal{
    position:fixed; inset:0; z-index:10050; display:block;
  }
  .sp-modal-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.65);
  }
  .sp-modal-body{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    background:linear-gradient(#c9a35e,#9b7a3a); padding:3px; border-radius:12px;
    box-shadow:0 12px 28px rgba(0,0,0,.6);
    max-width:90vw; width:auto;
  }
  .sp-modal-body img{ display:block; max-width:86vw; max-height:60vh; background:#1f1b14; border-radius:10px 10px 0 0; }
  .sp-modal-cap{
    background:#26211a; color:#f5e6cc; border-radius:0 0 10px 10px;
    border:1px solid #b39b74; border-top:none; padding:8px 10px; font-family:'Courier New',monospace; font-size:12px;
    text-align:center;
  }
  .sp-modal-close{
    position:absolute; right:-10px; top:-10px; width:28px; height:28px; border-radius:50%;
    border:1px solid rgba(0,0,0,.35); background:#fff; font-weight:700; line-height:16px; text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
  }
}
@media (min-width:901px){
  .sp-desktop{ display:block !important; }
  .sp-mobile{ display:none !important; }
}

/* whoisonline: bandera junto al nombre */
.who-card .who-name {
  display:flex;
  align-items:center;
  gap:6px;
}
.who-flag {
  width:18px; height:12px; object-fit:cover;
  border:1px solid rgba(0,0,0,.25);
  border-radius:10px;
}
@media (max-width: 900px){
  .mobile-online-pill{
    position: absolute;
    top: 8px;
    right: 50px;                  /* deja espacio al botón de usuario */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #1c1a0f;
    color: #fff;
    border: 1px solid #6bbf59;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    z-index: 200;                  /* encima del header */
  }
  .mobile-online-pill .dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #27c93f;
    box-shadow: 0 0 4px #27c93f;
  }
}
@media (min-width: 901px){
  .mobile-online-pill{ display:none; }
}
/* Barra fija que cuelga debajo del header */
#mobile-online-bar{
  position: fixed;
  left: 0;
  right: 0;
  top: 64px;                /* valor por defecto; JS lo corrige */
  z-index: 4000;            /* por encima del arte y debajo de overlays modales */
  text-align: center;
  pointer-events: none;     /* la pastilla sí recibe clics */
  display: none;
}

#mobile-online-bar .online-pill{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 6px auto;
  border-radius: 999px;
  background: rgba(28,26,15,.96);
  color: #fff;
  border: 1px solid #6bbf59;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  line-height: 1;
}

#mobile-online-bar .online-pill .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #27c93f; box-shadow: 0 0 6px #27c93f;
}

/* Solo en móvil aparece; en desktop se oculta */
@media (max-width:900px){
  #mobile-online-bar{ display:block !important; }
}
@media (min-width:901px){
  #mobile-online-bar{ display:none !important; }
}