:root{
  --bg1:#0b1220;
  --bg2:#0f1b33;
  --card:#0f172a;
  --card2:#111c35;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --primary:#3b82f6;
  --danger:#ef4444;
  --good:#34d399;
}

*{
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}


*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); }

.bg{
  min-height: 100vh;
  background-color: var(--bg1);
  background:
    radial-gradient(1000px 600px at 15% 15%, #1b2a55 0%, transparent 55%),
    radial-gradient(1000px 600px at 85% 25%, #1b4b57 0%, transparent 55%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg1) 60%, var(--bg2) 100%);
  background-attachment: fixed;
}
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .container{ grid-template-columns: 1fr; }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.card.inner{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  margin-top: 12px;
}

h1{ margin: 0 0 10px; font-size: 26px; }
h2{ margin: 0 0 10px; font-size: 18px; }

.muted{ color: var(--muted); }
.small{ font-size: 12px; }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px){
  .grid2{ grid-template-columns: 1fr; }
}

.field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.field.inline{
  flex-direction:row;
  align-items:center;
  gap: 10px;
}
.field > span{ font-size: 12px; color: var(--muted); }

input{
  background: rgba(0,0,0,.22);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  outline:none;
}
input:focus{ border-color: rgba(59,130,246,.6); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

.row{ display:flex; align-items:center; gap: 10px; }

.actions{ display:flex; gap: 10px; margin-top: 12px; flex-wrap:wrap; }

.btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.btn:hover{ background: rgba(255,255,255,.10); }
.btn.primary{ background: rgba(59,130,246,.25); border-color: rgba(59,130,246,.35); }
.btn.primary:hover{ background: rgba(59,130,246,.33); }
.btn.danger{ background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35); }
.btn.danger:hover{ background: rgba(239,68,68,.25); }
.btn.warn{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.35); }
.btn.warn:hover{ background: rgba(245,158,11,.25); }

.error{ margin-top: 10px; color: #fca5a5; }

.rooms{ display:flex; flex-direction:column; gap: 10px; }
.roomRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  cursor:pointer;
}
.roomRow:hover{ background: rgba(0,0,0,.25); }
.roomRow.full{ cursor:not-allowed; opacity:.65; }
.roomTitle{ display:flex; align-items:center; gap: 8px; }

.tag{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
}
.tag.private{ border-color: rgba(168,85,247,.35); background: rgba(168,85,247,.18); }
.tag.fullTag{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.18); }

.cats{ margin-top: 10px; }
.catsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.catItem{
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
}
.diffs{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 10px;
}

/* ===== ROOM UI ===== */
.roomShell{ padding: 14px; max-width: 1300px; margin: 0 auto; }
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow);
}
.topbar .left, .topbar .right{ display:flex; align-items:center; gap: 10px; }
.topbar .center{ text-align:center; flex: 1; }

.badge{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
}
.roundBadge{ white-space: nowrap; }
.timer{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.35);
  background: rgba(245,158,11,.14);
}
.word{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 1px;
}

.roomMain{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 12px;
}
@media (max-width: 1020px){
  .roomMain{ grid-template-columns: 1fr; }
}

.boardCard{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow);
  padding: 5px;
}
#board{
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;
  display:block;
  touch-action: none;



  overscroll-behavior: contain;}
.toolbar{
  margin-top: 6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}
.colors{ display:flex; gap: 8px; flex-wrap:wrap; }
.color{
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.25);
  cursor:pointer;
  outline:none;
}
.color.active{ box-shadow: 0 0 0 3px rgba(255,255,255,.25); }

.tools{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }

.side{ display:flex; flex-direction:column; gap: 12px; }

.players{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 6px; }
.players li{
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.16);
}

.chat{
  height: 320px;
  overflow:auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  padding: 10px;
}
.msg{ padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); margin-bottom: 8px; border: 1px solid var(--border); }
.msg.system{ background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.25); }
.msg .meta{ font-size: 11px; color: var(--muted); margin-bottom: 4px; }

.chatbox{ display:flex; gap: 10px; margin-top: 10px; }
.chatbox input{ flex:1; }

/* ===== Overlay victory + confetti ===== */
.overlay{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  z-index: 9999;
  padding: 16px;
}
.overlay.hidden{ display:none; }

.confetti{
  position: fixed;
  inset: 0;
  pointer-events:none;
  overflow:hidden;
  z-index: 10000;
}

.overlayCard{
  z-index: 10001;
  width: min(520px, 92vw);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding: 18px;
  text-align:center;
}
.trophy{ font-size: 44px; }
.winnerBig{
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: 1px;
  margin-top: 8px;
  text-transform: uppercase;
  text-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.leaderboard{
  margin-top: 12px;
  text-align:left;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  padding: 10px;
  max-height: 220px;
  overflow:auto;
}
.lbRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  margin-bottom: 8px;
}

.confetti-piece{
  position:absolute;
  top:-12vh;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  opacity:.95;
  animation-name: confetti-fall, confetti-spin;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: 1,1;
}
@keyframes confetti-fall{ to { transform: translateY(120vh); } }
@keyframes confetti-spin{ 0%{ rotate:0deg; } 100%{ rotate:720deg; } }
/* ===== MOBILE/TABLET: orden correcto + scroll con dedo ===== */
@media (max-width: 900px) {

#board{
  touch-action: none;          /* bloquea scroll/zoom encima del canvas */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ===== MÓVIL: paleta + botones + chat más pequeño ===== */

/* Paleta de colores (cuadritos) */
.colors { gap: 6px; }
.color {
  width: 16px;
  height: 14px;
  border-radius: 5px;
}

/* Toolbar general (debajo del canvas) */
.toolbar { gap: 8px; }

/* Texto de "Tamaño" y slider */
.field.inline > span { font-size: 8px; }
#size { width: 140px; }

/* Botones de herramientas: Borrar trazo / Limpiar */
.tools { gap: 8px; }
.tools .btn {
  padding: 7px 9px;
  font-size: 12px;
  border-radius: 10px;
}

/* Si quieres que “Limpiar” sea más pequeño aún */
#clearBtn { padding: 6px 9px; }

/* Chat más pequeño */
.chat {
  height: 220px;      /* antes 320px */
  max-height: 26vh;   /* reduce el espacio que ocupa */
  font-size: 11px;
  padding: 8px;
}

/* Mensajes más compactos */
.msg {
  padding: 6px 8px;
  margin-bottom: 6px;
}
.msg .meta { font-size: 10px; }

/* Caja de escribir */
.chatbox { gap: 8px; }
.chatbox input {
  padding: 8px 10px;
  font-size: 14px;
}
.chatbox .btn {
  padding: 8px 10px;
  font-size: 13px;
}

   /* ===== TOPBAR MÁS COMPACTA EN MÓVIL ===== */
.topbar {
  padding: 6px 8px;          /* antes era 12px */
  gap: 6px;
}

.topbar .left,
.topbar .right {
  gap: 6px;
}

.badge,
.timer {
  padding: 4px 8px;
  font-size: 12px;
}

.word {
  font-size: 28px;           /* antes ~30px */
  line-height: 1.1;
}

.topbar .center .muted {
  font-size: 11px;
}

#roleText {
  font-size: 11px;
}

/* Botones del topbar */
.topbar .btn {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 10px;
}

/* Reduce altura visual general */
.topbar {
  min-height: unset;
}

  /* 1) Deja que la página haga scroll */
  html, body {
    height: auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 2) No fijes la altura del contenedor principal (evita "pantalla bloqueada") */
  .roomShell {
    height: auto !important;
    min-height: 100vh;
  }

  /* 3) Topbar arriba (palabra/tiempo/voto) */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(15, 23, 42, 0.92); /* ajusta si tu tema es otro */
    backdrop-filter: blur(8px);
  }

  /* 4) Orden: pizarra arriba, chat abajo, info abajo del chat */
  .roomMain {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto !important;
    overflow: visible !important;
  }

  /* Pizarra primero */
  .boardCard {
    order: 1;
  }

  /* Side (contenedor de chat/jugadores) debajo */
  .side {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible !important;
  }

  /* Si tu HTML tiene 2 cards en .side:
     - normalmente: primera = jugadores, última = chat
     Queremos: chat primero, jugadores debajo del chat */
  .side .card:last-child { order: 1; } /* chat */
  .side .card:first-child { order: 2; } /* jugadores/info */

  /* 5) Canvas responsive (alto razonable en móvil) */
  #board, canvas {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 12;
    max-height: 76vh;  /* para que el chat quede visible sin tener que bajar tanto */
    display: block;
  }


/* 5b) Más alto REAL del canvas en móvil sin deformar:
   - El canvas escala por ancho (height:auto).
   - Si el contenedor tiene mucho padding/gap, el ancho real baja y el canvas queda “bajito”.
   - Esto recupera ancho → el canvas crece hacia abajo automáticamente. */
.roomShell{ padding: 6px !important; }   /* antes 14px */
.boardCard{ padding: 0 !important; }     /* antes 5px */
  .roomMain{ gap: 8px !important; }
  .side{ gap: 8px !important; }


  /* 6) Chat: NO lo fijes a altura rígida: deja que la página scrollee */
  .chat {
    max-height: 32vh;          /* mensajes con scroll interno */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 7) Caja de escribir siempre visible dentro del chat card */
  .chatbox {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: rgba(15, 23, 42, 0.92);
    border-top: 1px solid var(--border);
  }

  /* Evita zoom del input en iPhone */
  .chatbox input { font-size: 16px; }
}



/* ===== Overlay palabra dentro del canvas (base) ===== */
.boardCard{ position: relative; }
.canvasWord { display: none; }

/* ===== MÓVIL: palabra del dibujante dentro del canvas ===== */
@media (max-width: 900px){
  /* Oculta palabra grande de arriba en móvil */
  .topbar .center{ display:none; }

  /* Topbar más delgada */
  .topbar{
    padding:4px 6px;
    gap:6px;
  }

  .roomMain{ margin-top:6px; }

  .canvasWord{
    display: block;
    position:absolute;
    top:8px;
    left:8px;
    padding:6px 10px;
    background: rgba(0,0,0,.55);
    color:#34d399;
    font-weight:800;
    font-size:16px;
    border-radius:10px;
    z-index:5;
    pointer-events:none;
  }
  .canvasWord.hidden{ display:none; }
}
.logo-title{ font-size: 26px; letter-spacing: 2px; }
  .logo-slogan{ font-size: 12px; }


.branding .logo-title{ margin-top: 30px; } /* antes -46px */


/* ===== LOBBY BRANDING (GARIXO) – logo grande + texto debajo ===== */

.branding{
  text-align: center;
  margin-top: 0;
  margin-bottom: 14px;
}

.logo-img{
  width: 400px;        /* logo grande */
  max-width: 95%;
  height: auto;
  display: block;
  margin: -40px auto -106px;  /* casi pegado al texto */
}

.logo-title{
  margin-top: -6px; /* ← sube el texto */
  margin-bottom: 0;
  font-size: 58px;
  font-weight: 1000;
  letter-spacing: 4px;
  text-transform: uppercase;

  /* Urban / graffiti style */
  background: linear-gradient(
    180deg,
    #ffd000 0%,
    #ffb300 45%,
    #1e40af 70%,
    #0b3ea8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    -2px 2px 0 rgba(0,0,0,.85),
    0 12px 30px rgba(0,0,0,.65);
}

.logo-slogan{
  margin-top: 2px;
  font-size: 14px;
  letter-spacing: .6px;
  opacity: .8;
}

/* Móvil */
@media (max-width: 768px){
  .logo-img{ width: 260px; }
  .logo-title{
    font-size: 38px;
    letter-spacing: 3px;
    width: 350px;
    margin-top: 50px;
  }
  .logo-slogan{ font-size: 12px; }
}


/* ===== PATCH (solo solicitado): Chat arriba + Jugadores en 2 columnas (5x2) ===== */

/* Desktop y móvil: poner Chat por encima de Jugadores en el sidebar */
.side{ display:flex; flex-direction:column; }
.side .card:nth-child(1){ order: 2; } /* Jugadores (si es la primera card) */
.side .card:nth-child(2){ order: 1; } /* Chat (si es la segunda card) */

/* Lista de jugadores: 2 columnas, 5 filas (máx 10) dentro del contenedor */
.players{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 6px;
}
.players li{ width: 100%; }

/* ===== FIX CHAT: el texto NO se sale del contenedor ===== */

.msg {
  max-width: 100%;
  overflow-wrap: break-word;     /* rompe palabras largas */
  word-wrap: break-word;         /* compatibilidad */
  word-break: break-word;        /* evita desbordes */
  white-space: pre-wrap;         /* respeta saltos de línea */
}

.msg span,
.msg div,
.msg p {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* URLs largas */
.msg a {
  word-break: break-all;
}




/* ===== LOBBY (solo solicitado): 
   - Botón "Crear sala" arriba de categorías (desktop y móvil)
   - "Salas activas" arriba de categorías SOLO en móvil ===== */

/* Botón arriba de "Palabras" sin mover el HTML */
.container > .card:first-child{
  display: flex;
  flex-direction: column;
}
.container > .card:first-child > .grid2{ order: 1; }
.container > .card:first-child > .card.inner.mobileOnly{ order: 2; } /* Salas activas móvil */
.container > .card:first-child > .actions{ order: 3; }              /* Crear sala */
.container > .card:first-child > .card.inner:not(.mobileOnly){ order: 4; } /* Palabras */
.container > .card:first-child > #error{ order: 5; }

/* Solo móvil: mostrar bloque Salas activas arriba de Palabras y ocultar card duplicada */
.mobileOnly{ display: none; }

@media (max-width: 980px){
  .mobileOnly{ display: block; }
  /* Oculta la card original de “Salas activas” (la segunda card del lobby) solo en móvil */
  .container > .card:nth-child(2){ display: none; }
}


/* ===== PATCH: LOBBY salas activas con paginación + 2 columnas en móvil ===== */

/* 2 columnas SOLO para la lista de móvil (JS agrega la clase) */
.rooms.roomsGrid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Pager */
.roomsPager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 10px;
}

.pagerBtn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.pagerBtn:hover{ background: rgba(255,255,255,.10); }
.pagerBtn:disabled{ opacity:.45; cursor:not-allowed; }

.pagerInfo{
  min-width: 52px;
  text-align:center;
}

/* En móvil: botón "Crear sala" encima de "Salas activas" (solo re-ordena, no toca HTML) */
@media (max-width: 980px){
  .container > .card:first-child > .actions{ order: 2; }
  .container > .card:first-child > .card.inner.mobileOnly{ order: 3; }
}
/* ===== PATCH (solo solicitado): Slider de volumen para música de fondo (Sala) =====
   - Se usa con el control insertado por client.js (music volume UI).
   - No afecta lobby; solo se ve donde exista el contenedor/clases.
   - Compacto al lado del icono 🔊 y con track “relleno” al 100% (sin blanco al final).
*/
.musicVolWrap{
  display: inline-flex;
  align-items:center;
  gap: 6px;
  margin-left: 6px;
  max-width: 180px;
}

.musicVolVal{
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Slider compacto con fill por --pct */
.musicVolSlider{
  --pct: 0%;
  width: 110px;
  max-width: 34vw;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(59,130,246,.95) 0 0) 0/var(--pct) 100% no-repeat,
    rgba(255,255,255,.10);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

/* WebKit track */
.musicVolSlider::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  background: transparent;
}

/* WebKit thumb */
.musicVolSlider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(59,130,246,.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  cursor: pointer;
  margin-top: -4px; /* centra el thumb en el track */
}

/* Firefox */
.musicVolSlider::-moz-range-track{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--border);
}
.musicVolSlider::-moz-range-progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(59,130,246,.95);
}
.musicVolSlider::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(59,130,246,.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  cursor: pointer;
}

/* Móvil: aún más compacto para no empujar “Salir” */
@media (max-width: 900px){
  .musicVolWrap{ max-width: 160px; }
  .musicVolSlider{
    width: 92px;
    max-width: 30vw;
  }
  .musicVolVal{ font-size: 11px; min-width: 32px; }
}


/* ===== PATCH (solo solicitado): MÓVIL - evitar que "Salir" se salga de la topbar
   y hacer la barra superior más robusta cuando hay controles extra (volumen, etc).
   Nota: solo afecta <=900px, desktop queda intacto. ===== */
@media (max-width: 900px){
  /* Permite que la topbar envuelva en 2 líneas si hace falta, en vez de desbordar */
  .topbar{
    flex-wrap: wrap;
    align-items: center;
  }

  /* Evita que grupos crezcan sin control */
  .topbar .left,
  .topbar .right{
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  /* El grupo derecho nunca debe encoger el botón Salir */
  .topbar .right{
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Botón Salir: no partir texto y no salirse */
  .topbar .btn.danger{
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Volumen: más compacto en móvil para no empujar "Salir" */
  .musicVolWrap{
    max-width: 128px;
    margin-left: 0;
  }
  .musicVolSlider{
    width: 72px;
    max-width: 22vw;
  }
  .musicVolVal{
    min-width: 30px;
    font-size: 11px;
  }
}

/* ===== PATCH (solo solicitado): MÓVIL - marcador de ronda debajo del canvas (hook)
   Si client.js añade data-round a .boardCard (ej: boardCard.dataset.round = 'Ronda 1/10'),
   en móvil se mostrará abajo a la derecha sin tocar desktop. ===== */
@media (max-width: 900px){
  .boardCard[data-round]::after{
    content: attr(data-round);
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.45);
    color: var(--muted);
    pointer-events: none;
    z-index: 6;
  }
}
/* ===== PATCH (solo solicitado): 
   1) Slider de tamaño del lápiz que ocupe TODO el ancho disponible (móvil)
   2) (Preparación) Ronda abajo-derecha debajo del canvas usando data-round (requiere hook)
===== */

/* 1) Slider tamaño lápiz: que estire completo dentro de la toolbar */
@media (max-width: 900px){
  /* El bloque "Tamaño + slider" debe poder crecer */
  .toolbar .field.inline{
    flex: 1 1 260px;
    min-width: 220px;
  }

  /* El range ocupa el ancho disponible (anula el width fijo anterior sin editarlo) */
  #size{
    width: 100% !important;
    flex: 1 1 auto;
    min-width: 160px;
    max-width: 100%;
  }
}

/* 2) Ronda abajo-derecha debajo del canvas (MÓVIL)
   - Esto YA existe en tu CSS como hook:
     .boardCard[data-round]::after { ... }
   - Para que funcione, alguien debe setear el atributo data-round en .boardCard
     (por ejemplo: "Ronda 1/10"). Eso no se puede inferir con CSS puro.
*/

/* ===== PATCH-UI-ROUND-SLIDER-2026-01-26 =====
   SOLO agregado (no modifica reglas existentes): 
   - Slider "Tamaño" (móvil + desktop) llega al 100% sin espacios.
   - En móvil, el slider es más compacto.
   - "Ronda X/Y" se muestra abajo-derecha del canvas en móvil (requiere hook en client.js que setea data-round).
================================================ */

/* ===== 1) Slider "Tamaño" (DESKTOP + general): que el range ocupe todo el ancho disponible ===== */
 .tools .field.inline{
  flex: 0 0 auto;
  min-width: 0;
}


.tools .field.inline input[type="range"]{
  flex: 1 1 auto;
}

#size{
  width: 100%;
  max-width: 420px;
}

/* ===== 2) Slider "Tamaño" (MÓVIL): más compacto pero llegando al 100% ===== */
@media (max-width: 900px){
  .toolbar .field.inline{
    flex: 1 1 240px;
    min-width: 200px;
  }

  /* Llega completo al final (sin dejar blanco por width fijo anterior) */
  #size{
    width: 50% !important;
    max-width: 50% !important;
    min-width: 50px;
    height: 8px;
    padding: 0;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,.10);
  }

  /* Track (WebKit) */
  #size::-webkit-slider-runnable-track{
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
  }

  /* Thumb (WebKit) */
  #size::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(59,130,246,.95);
    margin-top: -3px;
  }

  /* Firefox */
  #size::-moz-range-track{
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid var(--border);
  }
  #size::-moz-range-thumb{
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(59,130,246,.95);
  }
}

/* ===== 3) Ronda: mover del topbar al canvas (MÓVIL) ===== */
@media (max-width: 900px){
  /* Oculta el badge de ronda de arriba (solo móvil) */
  #roundBadge{ display:none !important; }

  /* Muestra el badge en la esquina inferior derecha del canvas/card */
  .boardCard[data-round]::after{
    content: attr(data-round);
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(59,130,246,.35);
    color: #ffffff;
    pointer-events: none;
    z-index: 6;
    white-space: nowrap;
  }
}
/* ===== PATCH (solo solicitado): MÓVIL
   - "Tamaño" + "Borrar trazo" + "Limpiar" en la MISMA fila
   - Slider #size: ocupa 100% del espacio disponible, llega al final (sin blanco) y muestra el fill azul
   - Desktop intacto (solo <=900px)
===== */
@media (max-width: 900px){
  /* Mantener todo en una sola fila */
  .tools{
    width: 100%;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  /* El bloque del slider puede crecer y encoger */
  .tools .field.inline{
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  /* Botones: no saltan de línea */
  #undoBtn, #clearBtn{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Slider: sin padding (tu regla global de input le metía padding) */
  #size{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 120px;
    padding: 0 !important;
    height: 8px;
    border-radius: 999px;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--primary);
  }

  /* Ajustes para que el track no deje “blanco” al final */
  #size::-webkit-slider-runnable-track{
    height: 8px;
    border-radius: 999px;
  }
  #size::-webkit-slider-thumb{
    -webkit-appearance: auto;
    appearance: auto;
  }
  #size::-moz-range-track{
    height: 8px;
    border-radius: 999px;
  }
}


/* ===== FIX SOLICITADO (DESKTOP): Slider Tamaño llega al 100% ===== */
/* Solo afecta desktop. No toca móvil ni otros controles. */
@media (min-width: 901px){
  .tools .field.inline{
    flex: 1 1 auto;
    min-width: 0;
  }

  /* El range ocupa todo el espacio disponible de la fila */
  #size{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;                 /* evita el espacio blanco al final */
    accent-color: var(--primary); /* fill azul nativo */
  }
}


/* ===== PATCH SOLICITADO: MÓVIL - Palabras en 2 columnas (5 x 2) ===== */
@media (max-width: 900px){
  .catsGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    gap: 8px;
  }
}

/* ===== NOTIFICACION PROXIMO DIBUJANTE ===== */
.nextDrawerBanner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: bold;
  z-index: 100;
  pointer-events: none;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: opacity 1s ease;
}
.nextDrawerBanner.hidden {
  display: none;
}
@media (max-width: 900px) {
  .nextDrawerBanner {
    width: 100%;
    border-radius: 0;
    font-size: 18px;
    padding: 12px 0;
  }
}