/* ══════════ JUEGOS DE MESA — estantería de cajas ══════════ */
.jdm{
  --jdm-c1:#D99A4E; --jdm-c2:#995A24; --jdm-acento:#FFCF5C;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, var(--jdm-c1), var(--jdm-c2) 68%);
  border-radius:var(--radio); padding:16px 12px 18px; margin:0 -4px; color:#FFF8ED;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.22); position:relative; overflow:hidden;
}
.jdm::before{
  content:"¡A JUGAR! ✶ PARTIDA ✶ VICTORIA ✶ ¡A JUGAR! ✶ PARTIDA ✶ VICTORIA ✶ ¡A JUGAR! ✶ PARTIDA ✶ VICTORIA ✶";
  display:block; white-space:nowrap; overflow:hidden;
  font-family:'IBM Plex Mono',monospace; font-size:.56rem; letter-spacing:.28em; font-weight:700;
  color:#4A2A08; background:linear-gradient(90deg,#FFCF5C,#FF8A5C 55%,#FF6B95);
  padding:5px 8px; margin:-16px -12px 14px;
}
.jdm-estantes{display:flex; gap:6px; margin-bottom:10px}
.jdm-estantes button{
  flex:1; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.64rem;
  padding:8px 4px; border-radius:9px; border:1.5px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.22); color:#FFF8ED; cursor:pointer; text-align:center; line-height:1.2;
}
.jdm-estantes button.on{background:var(--e); color:#2A1A0E; border-color:var(--e)}
.jdm-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.jdm-kpi{background:rgba(0,0,0,.24); border-radius:10px; padding:9px 5px; text-align:center; position:relative}
.jdm-kpi b{display:block; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.05rem; color:var(--jdm-acento)}
.jdm-kpi span{font-family:'IBM Plex Mono',monospace; font-size:.52rem; text-transform:uppercase; letter-spacing:.03em; color:rgba(255,255,255,.75); display:block; margin-top:2px}
.jdm-kpi .trofeo{position:absolute; top:4px; right:6px; font-size:.8rem}
.jdm-subnav{display:flex; gap:6px; margin-bottom:14px}
.jdm-subnav button{
  flex:1; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.72rem;
  padding:8px 6px; border-radius:10px; border:1.5px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.2); color:#FFEDD3; cursor:pointer; text-align:center;
}
.jdm-subnav button.on{background:var(--jdm-acento); color:#4A2A08; border-color:var(--jdm-acento)}
/* El canto de madera del estante se dibuja con un degradado repetido, y su
   periodo depende de la ALTURA EXACTA de una caja. Va en variables para que al
   cambiar el tamaño de las carátulas no haya que recalcular a mano tres
   números y que se desalineen los estantes sin avisar.

   alto de caja = carátula + bloque de información + 2px de borde arriba y abajo */
.jdm-grid{
  /* 132px sale de dividir el ancho de caja en móvil (~176px) por 4:3. En
     escritorio la caja es más estrecha y el valor se ajusta en 11-escritorio. */
  --jdm-caratula:132px;
  /* 64px = título (1 línea) + DOS filas de etiquetas + relleno. Es lo que
     garantiza que el contador de partidas nunca se quede fuera. */
  --jdm-info:64px;
  --jdm-caja-alto:calc(var(--jdm-caratula) + var(--jdm-info));
  --jdm-hueco:9px;

  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--jdm-hueco) 7px;
  background-image:repeating-linear-gradient(180deg,
    rgba(255,255,255,.16) 0 3px,
    rgba(0,0,0,.32) 3px 9px,
    transparent 9px calc(var(--jdm-caja-alto) + var(--jdm-hueco)));
  background-position:0 var(--jdm-caja-alto);
}
/* Altura FIJA e igual al periodo del degradado del estante, para que el canto
   de madera caiga siempre justo al pie de la fila.
   El marco claro va como sombra INTERIOR, no como `border`, y eso no es
   cosmético: con box-sizing:border-box y un devicePixelRatio fraccionario
   (1.25 en el portátil), el navegador redondeaba el borde de 2px a 2 píxeles
   físicos —1,6 CSS— y la caja salía 0,8px más baja de lo declarado. Sobre
   cinco filas son 4px de desvío y los estantes se veían torcidos. Una sombra
   interior no ocupa espacio, así que la altura es exactamente la pedida. */
.jdm-caja{
  position:relative; border-radius:9px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  border:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), 0 6px 12px rgba(0,0,0,.35);
  transition:transform .12s; background:#3B2408;
  height:var(--jdm-caja-alto);
}
.jdm-caja:active{transform:scale(.97)}
/* La carátula NO lleva altura fija: se queda con lo que sobra dentro de la
   caja. Así absorbe el redondeo del borde y el bloque de información conserva
   sus 64px exactos, que es lo que necesita para las dos filas de etiquetas.
   La proporción resultante ronda 4:3 en ambos tamaños. */
.jdm-caja-visual{
  position:relative; flex:1 1 auto; min-height:0; width:100%; background-color:rgba(0,0,0,.15);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:inset 0 10px 16px rgba(255,255,255,.16), inset 0 -8px 14px rgba(0,0,0,.2);
}
.jdm-caja b.titulo{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.92rem; line-height:1.18;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); display:block;
}
/* Crema en lugar del marrón oscuro de antes: con las carátulas más pequeñas y
   más juntas, el marrón hacía la rejilla muy pesada. El texto pasa a oscuro y
   pierde la sombra, que sobre fondo claro solo ensucia. */
.jdm-caja-info{
  padding:5px 5px 6px; background:#F6E9D2;
  flex:0 0 var(--jdm-info,64px);   /* no se encoge: las dos filas caben siempre */
  box-sizing:border-box; overflow:hidden;
  display:flex; flex-direction:column; gap:4px;
}
.jdm-caja-info b.titulo{
  font-size:.66rem; margin-bottom:0; line-height:1.15; color:#3B2408; text-shadow:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 0 auto;
}
/* Las cuatro etiquetas, EN UNA SOLA FILA. Y con holgura, no por los pelos.
 *
 * El `flex-wrap:wrap` sigue ahí como red de seguridad —antes esto tenía
 * height:16px con overflow:hidden y el contador de partidas se iba a una segunda
 * fila invisible y desaparecía—, pero ya no debería hacer falta nunca, y ese es
 * justo el objetivo: si unas cajas parten en dos filas y sus vecinas no, la
 * rejilla queda desigual, que es lo que se veía.
 *
 * La cuenta, medida en el sitio más justo (un móvil de 375px deja 166px de
 * ancho útil), con los peores valores posibles a la vez —nota decimal, rango de
 * jugadores largo y un contador de tres cifras: "⭐ 8.1 · 👤 7.5 · 👥 3–10 ·
 * 🎲 120×"—:
 *
 *     con /10, hueco de 3px y relleno de 4px …… 179px → DOS filas
 *     sin /10 (ver Juegos.tsx) ………………………… 168px → DOS filas, por 2px
 *     y además apretando hueco y relleno ……… 157px → una fila, con 9px de sobra
 *
 * Los 9px de sobra son el margen que hace que esto siga cuadrando cuando un
 * juego llegue a las 1.000 partidas. */
.jdm-caja .jdm-pie{
  display:flex; flex-wrap:wrap; gap:2px; align-content:flex-start;
  flex:1 1 auto; min-height:0; overflow:hidden;
}
/* Relleno lateral más justo SOLO en la estantería: la ficha del juego usa las
   mismas etiquetas pero tiene una línea propia que se desliza, y allí sobra
   sitio (ver .jdm-ficha-badges en 12-react.css). */
.jdm-caja .jdm-badge{ padding:2px 3px }
/* El número de partidas es el dato que siempre interesa ver, así que si algo
   tiene que quedar fuera, que no sea este. */
.jdm-caja .jdm-badge.veces{order:-1}
.jdm-badge{
  font-family:'IBM Plex Mono',monospace; font-size:.48rem; font-weight:700; letter-spacing:.01em;
  padding:2px 4px; border-radius:4px; white-space:nowrap; color:#fff;
}
.jdm-badge.bgg{background:var(--jdm-acento); color:#4A2A08}
.jdm-badge.nota{background:#FF6B95}
.jdm-badge.jug{background:#3FC5E8; color:#04303D}
.jdm-badge.veces{background:#5CD98A; color:#04321D}
.jdm-ribbon{
  position:absolute; top:6px; right:-3px; font-family:'IBM Plex Mono',monospace; font-size:.44rem;
  font-weight:700; letter-spacing:.03em; padding:2px 6px 2px 5px; color:#fff; text-transform:uppercase;
  box-shadow:0 2px 4px rgba(0,0,0,.3); z-index:2;
}
.jdm-ribbon::after{content:""; position:absolute; right:0; top:100%; border-width:4px 3px; border-style:solid;
  border-color:transparent currentColor currentColor transparent; filter:brightness(.6);}
.jdm-ribbon.tienes{background:#2E6E4E; color:#2E6E4E}
.jdm-ribbon.quieres{background:#A4243B; color:#A4243B}
.jdm-ribbon.fuera{background:#5A5A5A; color:#5A5A5A}
.jdm-ribbon.tienes span,.jdm-ribbon.quieres span,.jdm-ribbon.fuera span{color:#fff; position:relative}
.jdm-caja-nueva{
  border:2px dashed rgba(255,255,255,.5); border-radius:9px; min-height:120px;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px;
  color:#FFEDD3; cursor:pointer; background:rgba(0,0,0,.15); font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:.66rem; text-align:center; padding:6px;
}
.jdm-caja-nueva .mas{font-size:1.6rem; line-height:1}
.jdm-vacio{
  background:rgba(0,0,0,.18); border:1.5px dashed rgba(255,255,255,.35); border-radius:12px; padding:20px 14px;
  text-align:center; color:#FFEDD3; font-family:'IBM Plex Mono',monospace; font-size:.72rem; line-height:1.6;
}
/* ── Detalle de juego ── */
.jdm-detalle-top{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.jdm-detalle-top button.volver{
  width:34px; height:34px; border-radius:8px; border:1.5px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.2); color:#FFF8ED; font-size:1rem; flex-shrink:0; cursor:pointer;
}
.jdm-portada{
  border-radius:12px; margin-bottom:14px; position:relative; overflow:hidden; height:170px;
  display:flex; align-items:flex-end; box-shadow:0 8px 18px rgba(0,0,0,.35);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.jdm-portada .velo{position:relative; z-index:1; width:100%; padding:14px 16px; background:linear-gradient(0deg, rgba(0,0,0,.65), transparent)}
.jdm-portada h2{font-family:'Bricolage Grotesque',sans-serif; font-size:1.3rem; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.4); margin:0}
.jdm-ficha{
  background:rgba(0,0,0,.22); border-radius:10px; padding:10px 12px; margin-bottom:12px;
}
.jdm-ficha-fila{display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.18); font-size:.78rem}
.jdm-ficha-fila:last-child{border-bottom:0}
.jdm-ficha-fila span.k{color:#FFDDA8; font-family:'IBM Plex Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em}
.jdm-ficha-fila span.v{font-family:'IBM Plex Mono',monospace; font-weight:700}
.jdm-peso{display:flex; gap:3px}
.jdm-peso i{width:10px; height:10px; border-radius:2px; background:rgba(255,255,255,.22); display:inline-block}
.jdm-peso i.on{background:var(--jdm-acento)}
.jdm-btn{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:.76rem; padding:9px 14px;
  border-radius:9px; border:1.5px solid rgba(255,255,255,.3); background:rgba(0,0,0,.22); color:#FFF8ED; cursor:pointer;
}
.jdm-btn.primario{background:var(--jdm-acento); color:#4A2A08; border-color:var(--jdm-acento)}
.jdm-btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.jdm-hist-item{background:rgba(0,0,0,.18); border-radius:8px; padding:8px 10px; margin-bottom:6px; font-size:.78rem}
.jdm-hist-item .f{font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:#FFDDA8; display:block; margin-bottom:2px}
.jdm-hist-item .g{font-weight:700}
/* Las partidas que Carlos registra en BGG: mismo bloque en la pestaña
   "Partidas" y en la ficha de un juego, así que el espaciado vive aquí y no
   repetido en cada sitio que lo monta. */
.jdm-bgg-bloque{margin-top:18px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.25)}
/* ── Formularios ── */
.jdm-form{background:rgba(0,0,0,.2); border-radius:12px; padding:14px}
.jdm-form label{display:block; font-family:'IBM Plex Mono',monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:#FFDDA8; margin:12px 0 5px}
.jdm-form label:first-child{margin-top:0}
.jdm-form input[type=text],.jdm-form input[type=number],.jdm-form input[type=date],.jdm-form input[type=url],.jdm-form select,.jdm-form textarea{
  width:100%; box-sizing:border-box; font-family:'Instrument Sans',sans-serif; font-size:.88rem;
  padding:9px 10px; border-radius:8px; border:1.5px solid rgba(255,255,255,.25); background:#FFF8ED; color:#3B2408;
}
.jdm-form textarea{min-height:60px; resize:vertical}
.jdm-preview-img{width:100%; height:140px; background-size:cover; background-position:center; border-radius:8px; margin-top:8px; display:none}
.jdm-chips{display:flex; flex-wrap:wrap; gap:6px}
.jdm-chip{
  font-family:'Bricolage Grotesque',sans-serif; font-size:.76rem; font-weight:700; padding:6px 12px;
  border-radius:999px; border:1.5px solid rgba(255,255,255,.3); background:rgba(0,0,0,.2); color:#FFF8ED; cursor:pointer;
}
.jdm-chip.on{background:#2E6E4E; border-color:#2E6E4E; color:#fff}
.jdm-toggle-row{display:flex; gap:8px}
.jdm-toggle-row .jdm-chip{flex:1; text-align:center}
.jdm-bgg-box{background:rgba(255,207,92,.18); border:1.5px dashed var(--jdm-acento); border-radius:10px; padding:10px 12px; margin-top:10px; font-size:.76rem; line-height:1.6}
.jdm-bgg-box b{color:var(--jdm-acento); font-family:'IBM Plex Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:4px}
/* La lista de candidatos de BGG a elegir — mismo trato que las sugerencias
   de Cine con TMDB, pero en los colores de esta sección. */
.jdm-bgg-box .sin-resultados{color:#FFDDA8}
.jdm-sugerencia{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 8px; border-radius:6px; cursor:pointer; background:rgba(0,0,0,.18);
}
.jdm-sugerencia:hover, .jdm-sugerencia:active{background:rgba(255,207,92,.25)}
.jdm-sugerencia + .jdm-sugerencia{margin-top:4px}
/* La carátula, de verdad: sin ella la lista es puro texto y dos ediciones
   del mismo juego se leen igual. Con imagen o sin ella ocupa lo mismo,
   así que la lista no salta al ir cargando las miniaturas. */
.jdm-sugerencia .miniatura{
  width:32px; height:32px; border-radius:5px; background-size:cover; background-position:center;
  background-color:rgba(255,255,255,.08); flex-shrink:0;
}
.jdm-sugerencia .info{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.jdm-sugerencia .nombre{font-size:.8rem; color:#FFF8ED; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jdm-sugerencia .anio{font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:#FFDDA8}
.jdm-sugerencia .nota-bgg{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--jdm-acento); font-weight:700; flex-shrink:0}
/* ── Estadísticas: tablón ── */
.jdm-stat-card{background:rgba(0,0,0,.22); border-radius:10px; padding:12px; margin-bottom:10px; border-left:4px solid var(--jdm-acento)}
.jdm-stat-card h4{font-family:'Bricolage Grotesque',sans-serif; font-size:.86rem; margin:0 0 10px; color:#FFF8ED}
.jdm-rank-row{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:.84rem}
.jdm-rank-row .n{width:22px; font-size:.9rem; text-align:center}
.jdm-rank-row .nombre{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.jdm-rank-row .val{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.8rem; color:var(--jdm-acento)}
.jdm-rank-bar{height:6px; border-radius:3px; background:rgba(255,255,255,.14); margin:2px 0 10px; overflow:hidden}
.jdm-rank-bar i{display:block; height:100%; background:var(--jdm-acento)}
.jdm-rank-bar.oro i{background:#FFD700}
.jdm-rank-bar.plata i{background:#D7DEE3}
.jdm-rank-bar.bronce i{background:#CD7F32}

@media (min-width:640px){
  h1{font-size:2.4rem}
  .resumen{grid-template-columns:repeat(6,1fr)}
  .resumen.tres{grid-template-columns:repeat(3,1fr)}
}