:root{
      --piece-fill: #6366f1;
      --piece-stroke: #0f172a;
      --heart-fill: #ef4444;
      --heart-hover: #dc2626;
      --hint-text: #0f172a;
      --hint-bg: rgba(255,255,255,.92);
      --panel-bg: transparent;
      --spin-duration: 1500ms;
      --piece-size: 280px;
      --hint-font-size: 15px;
      --pulse-scale-min: .985;
      --pulse-scale-max: 1.03;
      --fade-ms: 160;
      --dwell-ms: 520;
    }
  
  
    .card-game-jigsaw{background:#fff;max-width:560px;width:100%;border-radius:14px;padding:16px;box-shadow:0 14px 24px rgba(0,0,0,.08);text-align:center}
 .card-game-jigsaw h2{margin:0 0 8px;font-size:26px;color:#1f2937; text-align:center}
 .card-game-jigsaw p{margin:0 0 16px;color:#4b5563}
    .row-card-game-jigsaw{display:flex;gap:10px;justify-content:center;align-items:center;margin:6px 0 10px}
    .toggle{display:flex;align-items:center;gap:10px;user-select:none}
    .toggle input{width:42px;height:24px;appearance:none;background:#d1d5db;border-radius:999px;position:relative;cursor:pointer;outline:none;border:none}
    .toggle input:before{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}
    .toggle input:checked{background:#6366f1}
    .toggle input:checked:before{transform:translateX(18px)}
    #status-game-jigsaw{margin-top:6px;background:#dbeafe;color:#1e40af;padding:6px 8px;border-radius:8px;font-weight:600;text-align:left}
    .picker-game-jigsaw{position:relative;display:inline-block}
    #piece-game-jigsaw{width:var(--piece-size);height:var(--piece-size);background:var(--panel-bg);border-radius:12px;cursor:pointer;transition:opacity .15s;display:block}
    #piece-game-jigsaw:hover{opacity:.96}
    #piece-game-jigsaw.disabled{cursor:wait;opacity:.5;pointer-events:none}
    #spin-game-jigsaw{transform-box:fill-box;transform-origin:center;will-change:transform}
    #icon-game-jigsaw{transform-box:fill-box;transform-origin:center;will-change:opacity,transform}
    .jigsaw-game-jigsaw path,.heart-game-jigsaw path{vector-effect:non-scaling-stroke;stroke-width:5;stroke:var(--piece-stroke)}
    .jigsaw-game-jigsaw{opacity:1;transition:opacity var(--fade-ms) linear}
    .heart-game-jigsaw{opacity:0;transition:opacity var(--fade-ms) linear}
    .picker-game-jigsaw:hover .jigsaw-game-jigsaw,.picker-game-jigsaw:focus-within .jigsaw-game-jigsaw{opacity:0}
    .picker-game-jigsaw:hover .heart-game-jigsaw,.picker-game-jigsaw:focus-within .heart-game-jigsaw{opacity:1}
    .picker-game-jigsaw.spinning .jigsaw-game-jigsaw{opacity:1!important}
    .picker-game-jigsaw.spinning .heart-game-jigsaw{opacity:0!important}
    .heart-game-jigsaw path{fill:var(--heart-fill)}
    .picker-game-jigsaw:hover .heart-game-jigsaw path,.picker-game-jigsaw:focus-within .heart-game-jigsaw path{fill:var(--heart-hover)}
    @keyframes pulse-game-jigsaw{0%{transform:scale(var(--pulse-scale-min))}50%{transform:scale(var(--pulse-scale-max))}100%{transform:scale(var(--pulse-scale-min))}}
    .picker-game-jigsaw:hover #icon-game-jigsaw,.picker-game-jigsaw.armed #icon-game-jigsaw{animation:pulse-game-jigsaw 1.4s ease-in-out infinite alternate}
    .hint-game-jigsaw{position:absolute;left:50%;top:0%;transform:translate(-50%,12px);background:var(--hint-bg);color:var(--hint-text);font-weight:700;font-size:var(--hint-font-size);line-height:1;padding:8px 12px;border-radius:8px;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.08);opacity:0;visibility:hidden;transition:opacity .12s ease,visibility .12s ease;pointer-events:none}
    .picker-game-jigsaw:hover .hint-game-jigsaw{opacity:1;visibility:visible}
    .picker-game-jigsaw.armed .hint-game-jigsaw,.picker-game-jigsaw.spinning .hint-game-jigsaw{opacity:0!important;visibility:hidden!important}
    @media (prefers-reduced-motion:reduce){.picker-game-jigsaw:hover #icon-game-jigsaw,.picker-game-jigsaw.armed #icon-game-jigsaw{animation:none}}

/* :target { scroll-margin-top: 72px; }  */  /* adjust to your header height */  

.btn-slim{
  padding:6px 10px; border-radius:10px; border:1px solid #cbd5e1; background:#f8fafc;
  font-weight:600; cursor:pointer; margin-left:8px; margin-top:15px}
.btn-slim:hover{ background:#eef2ff }

#toast-game-jigsaw{ position:relative; margin-top:8px }
.jpz-toast{
  position:relative; display:inline-block; padding:10px 12px; border-radius:12px;
  background:#fef3c7; color:#7c2d12; font-weight:700; box-shadow:0 8px 18px rgba(0,0,0,.12);
  animation: jpzFadeSlide .35s ease-out both;
}
@keyframes jpzFadeSlide{
  from{ opacity:0; transform:translateY(-6px) }
  to  { opacity:1; transform:translateY(0) }
}