@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Inter:wght@400;500;600&display=swap');
  :root{
    --bg: #17262a;
    --panel: #1f363b;
    --panel-2: #26424780;
    --amber: #e8a33d;
    --amber-dim: #e8a33d55;
    --cream: #f3ede2;
    --muted: #a9c0c2;
    --line: #3a5459;
    --text: #23343c;        /* texto sobre el fondo claro de la página */
    --text-muted: #5c7176;  /* texto secundario sobre el fondo claro de la página */
  }
  *{box-sizing:border-box;}
  .rompecabezas-app{
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
  }
  .rompecabezas-app h1{
    font-family: 'Fraunces', serif;
    font-weight:700;
    font-size: clamp(24px, 3.5vw, 34px);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
  }
  .subtitle{
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 22px;
    max-width: 620px;
  }
  .rzp-wrap{ max-width: 980px; margin: 0 auto; }
  .controls{
    display:flex;
    flex-wrap:wrap;
    gap: 10px 18px;
    align-items:center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    color: var(--cream);
  }
  .field{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
  .field label{ white-space:nowrap; }
  .rompecabezas-app select, .rompecabezas-app input[type="number"]{
    background:#0f2023;
    color: var(--cream);
    border:1px solid var(--line);
    border-radius:8px;
    padding:6px 10px;
    font-family:inherit;
    font-size:13px;
  }
  .toggle{ display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
  .toggle input{ accent-color: var(--amber); width:16px; height:16px; }
  .rompecabezas-app button{
    background: var(--amber);
    color: #1b1206;
    border:none;
    font-family:inherit;
    font-weight:600;
    font-size:13px;
    padding: 8px 16px;
    border-radius:8px;
    cursor:pointer;
    transition: transform .12s ease, filter .12s ease;
  }
  .rompecabezas-app button:hover{ filter: brightness(1.08); transform: translateY(-1px); }
  .rompecabezas-app button.secondary{
    background: transparent;
    color: var(--cream);
    border:1px solid var(--line);
  }
  .status{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
  }
  .status strong{ color: var(--text); }
  #board-holder{
    position:relative;
    background: transparent;
    overflow:hidden;
    height: min(85vh, 1200px);
    border-radius: 16px;
    cursor: grab;
    touch-action: none;
  }
  #board-holder.panning{ cursor: grabbing; }
  #board-holder.zoom-disabled{ cursor: default; }
  #board-holder.no-cap{ overflow: visible; }
  #svgViewport{
    position:absolute;
    top:0; left:0;
    transform-origin: 0 0;
  }
  .rompecabezas-app svg{ display:block; touch-action:none; overflow:visible; }
  .zoom-controls{
    position:absolute;
    right:14px; bottom:14px;
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:6;
  }
  .zoom-controls button{
    width:38px; height:38px;
    padding:0;
    font-size:18px;
    line-height:1;
    border-radius:9px;
    background: var(--panel);
    color: var(--cream);
    border: 1px solid var(--line);
  }
  .zoom-controls button:hover{ filter:none; background:#2a4a50; transform:none; }
  .board-frame{
    fill: var(--panel);
    stroke: var(--line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55));
  }
  .piece{ cursor:grab; }
  .piece.locked{ cursor:default; }
  .piece path.outline{
    fill:none;
    stroke: rgba(10,20,22,0.55);
    stroke-width:1.4;
    vector-effect: non-scaling-stroke;
  }
  .piece.locked path.outline{ stroke: rgba(10,20,22,0.22); }
  @keyframes lockFlash{
    0%   { stroke: var(--amber); stroke-width: 6; filter: drop-shadow(0 0 6px var(--amber-dim)); }
    100% { stroke: rgba(10,20,22,0.22); stroke-width: 1.4; filter: none; }
  }
  .piece.just-locked path.outline{ animation: lockFlash 0.7s ease-out forwards; }
  .win-banner{
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    background: linear-gradient(180deg, #0000 0%, #0b1416cc 55%, #0b1416ee 100%);
    text-align:center;
    z-index:8;
  }
  .win-banner.show{ display:flex; }
  .win-title{
    font-family:'Fraunces', serif;
    font-size: clamp(22px, 4vw, 34px);
    font-weight:700;
    color: var(--amber);
    letter-spacing:0.01em;
  }
  .win-stars{ font-size: clamp(28px, 5vw, 44px); color: var(--amber); letter-spacing:6px; }
  .win-stars .dim{ color:#5a6f73; }
  .win-stats{ font-size:15px; color: var(--cream); display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
  .win-stats strong{ color: var(--amber); }
  .timer{
    font-variant-numeric: tabular-nums;
    font-weight:600;
    color: var(--cream);
    background:#0f2023;
    border:1px solid var(--line);
    padding:2px 10px;
    border-radius:7px;
  }
  .preview-modal{
    position:fixed; inset:0;
    background: rgba(8,14,16,0.82);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:50;
  }
  .preview-modal.show{ display:flex; }
  .preview-modal-inner{
    background: var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    max-width:92vw;
    max-height:92vh;
  }
  .preview-modal-inner img{
    max-width:85vw;
    max-height:75vh;
    border-radius:8px;
    display:block;
  }
  .stage{ width:100%; max-width:1800px; margin:0 auto; }
  .hint{ font-size:12px; color:var(--text-muted); margin:10px auto 0; max-width:900px; }
  .rompecabezas-app code{ background:#0f2023; padding:1px 6px; border-radius:5px; color: var(--amber); }

  /* miniaturas del hub que disparan la carga del puzzle (rompecabezas_thumb / rompecabezas_gallery) */
  .rzp-thumb-trigger{
    all: unset;
    cursor: pointer;
    display: block;
    width: 100%;
    border: 2px solid #f29053;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff7f3 0%, #fff 100%);
    box-shadow: 0 2px 10px rgba(162, 56, 51, 0.1);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
  }
  .rzp-thumb-trigger img{
    display:block;
    width:100%;
    margin: 0; /* anula el margin-bottom que el tema le pone a cualquier <img> del sitio */
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .rzp-thumb-trigger:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(162, 56, 51, 0.18);
  }
  .rzp-thumb-trigger:focus-visible{ outline: 2px solid #f29053; outline-offset: 2px; }

  /* envuelve el grupo de miniaturas con esta clase para que se vean como galería */
  .rzp-gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* máximo 3 columnas en escritorio, sin importar el ancho */
    gap: 20px;
    margin: 18px 0;
  }
  @media (max-width: 700px){
    .rzp-gallery{
      grid-template-columns: repeat(2, 1fr); /* exactamente 2 columnas en mobile */
      gap: 10px;
    }
  }

  /* algunos temas/bloques de WordPress (ej. la Galería nativa envolviendo
     shortcodes) agregan su propio margen/fondo por elemento — lo neutralizamos
     para que no se cuele un borde/franja blanca debajo de las miniaturas */
  .wp-block-gallery figure,
  .wp-block-gallery .blocks-gallery-item,
  .rzp-gallery figure{
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .rzp-empty-state{
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted, #5c7176);
    font-size: 15px;
  }

  .rzp-poll{ margin-top: 14px; }
  .rzp-poll-question{ font-size: 14px; color: var(--cream); margin: 0 0 8px; }
  .rzp-poll-buttons{ display: flex; gap: 10px; justify-content: center; }