/* Junta Números — all styles scoped under .jl-jn. No external requests. */
.jl-jn{--jl-bg:#151821;--jl-fg:#eceef5;--jl-lab:#9aa1b6;--jl-accent:#4e5bd6;
  --jl-board:#2b3044;--jl-empty:#373d55;--jl-rec:#ffd166;
  position:absolute;inset:0;display:flex;flex-direction:column;background:var(--jl-bg);
  color:var(--jl-fg);font:16px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  user-select:none;-webkit-user-select:none;overflow:hidden;touch-action:none}
.jl-jn *{box-sizing:border-box;margin:0;padding:0}
.jl-jn-hud{display:flex;justify-content:space-between;align-items:flex-start;
  padding:8px 12px;gap:8px;flex:0 0 auto}
.jl-jn-lab{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--jl-lab)}
.jl-jn-val{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.jl-jn-r{text-align:right}
.jl-jn-hint{font-size:12px;color:var(--jl-lab);max-width:150px}
.jl-jn-new{min-height:44px;min-width:108px;padding:0 14px;border:1px solid #3c4360;
  border-radius:12px;background:#232840;color:var(--jl-fg);font-size:14px;font-weight:600;
  cursor:pointer;align-self:center;-webkit-tap-highlight-color:transparent}
.jl-jn-new:focus-visible{outline:2px solid #8fb4ff;outline-offset:2px}
.jl-jn-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.jl-jn-board{position:relative;padding:6px;border-radius:12px;background:var(--jl-board);
  touch-action:none}
.jl-jn-cell{position:absolute;border-radius:7px;background:var(--jl-empty)}
.jl-jn-tile{position:absolute;left:0;top:0;display:flex;align-items:center;
  justify-content:center;border-radius:7px;font-weight:800;font-variant-numeric:tabular-nums;
  will-change:transform;transform:translate(-1000px,-1000px);
  transition:transform 120ms ease-out}
.jl-jn-pop{animation:jl-jn-pop 120ms ease-out}
.jl-jn-new-anim{animation:jl-jn-in 100ms ease-out}
@keyframes jl-jn-in{from{opacity:.35}to{opacity:1}}
@keyframes jl-jn-pop{0%{transform:scale(1)}45%{transform:scale(1.15)}100%{transform:scale(1)}}
.jl-jn-veil{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;
  background:rgba(12,14,22,.88);z-index:3}
.jl-jn-veil[hidden]{display:none}
.jl-jn-veil h1{font-size:22px;font-weight:700}
.jl-jn-veil p{font-size:15px;opacity:.88;max-width:280px}
.jl-jn-rec{color:var(--jl-rec);font-weight:700}
.jl-jn-cta{min-height:48px;min-width:150px;padding:0 20px;border:0;border-radius:12px;
  background:var(--jl-accent);color:#fff;font-size:16px;font-weight:700;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.jl-jn-cta:focus-visible{outline:2px solid #8fb4ff;outline-offset:2px}
.jl-jn-alt{background:#2b3044}
.jl-jn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.jl-jn-err{font-size:15px;line-height:1.5;max-width:300px}
.jl-jn-err a{color:#8fb4ff}
@media (max-height:620px){.jl-jn-val{font-size:19px}.jl-jn-hud{padding:6px 10px}
  .jl-jn-veil{gap:8px}}
@media (prefers-reduced-motion:reduce){
  .jl-jn-tile{transition:none}
  .jl-jn-pop,.jl-jn-new-anim,.jl-jn-slide,.jl-jn-merge,.jl-jn-gain,.jl-jn-spark{animation:none}
}

/* --- audio mute toggle (shared shape across the six games) ----------------
   Placed bottom-right: every game already uses the top-right for a score or a
   piece preview, so a top-right control collides with it. */
.jl-audio-btn{position:absolute;bottom:calc(8px + env(safe-area-inset-bottom));right:8px;
  z-index:60;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.5);color:#fff;
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;opacity:.85;-webkit-tap-highlight-color:transparent}
.jl-audio-btn:active{transform:scale(.94)}
.jl-audio-btn:focus-visible{outline:2px solid #64B5F6;outline-offset:2px}

/* --- slide & merge feedback --------------------------------------------- */
/* A short glow on the tile that just moved, so a swipe reads as a slide. */
.jl-jn-slide{animation:jl-jn-slide 150ms ease-out}
@keyframes jl-jn-slide{
  0%{filter:brightness(1.5)}
  100%{filter:brightness(1)}
}
/* The merged tile flips bright for a moment. */
.jl-jn-merge{animation:jl-jn-merge 220ms ease-out}
@keyframes jl-jn-merge{
  0%{filter:brightness(1.9) saturate(1.3)}
  60%{filter:brightness(1.15)}
  100%{filter:brightness(1)}
}
/* "+8" floats up from the merge point and fades. */
.jl-jn-gain{position:absolute;font-weight:800;pointer-events:none;z-index:5;
  color:#ffe9a8;text-shadow:0 1px 4px rgba(0,0,0,.75);animation:jl-jn-gain 620ms ease-out forwards}
@keyframes jl-jn-gain{
  0%{opacity:0;transform:translateY(0) scale(.85)}
  22%{opacity:1;transform:translateY(-6px) scale(1)}
  100%{opacity:0;transform:translateY(-30px) scale(1)}
}
/* Four sparks at the merge point. */
.jl-jn-spark{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;
  z-index:5;animation:jl-jn-spark 420ms ease-out forwards}
@keyframes jl-jn-spark{
  0%{opacity:.95;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}
}
/* Theme selector row. */
.jl-jn-themes{display:flex;gap:6px;justify-content:center;padding:2px 10px 4px}
.jl-jn-theme{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid #2b3044;
  background:#1a1f2b;color:#c9d2e3;font-size:12.5px;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.jl-jn-theme.jl-sel{background:#3a4757;border-color:#6b7d95;color:#fff}
.jl-jn-theme:focus-visible{outline:2px solid #64B5F6;outline-offset:2px}

/* --- help button + guideline panel ---------------------------------------
   Sits directly above the sound button so both controls share one corner.
   44x44 to match SH-22. */
.jl-help-btn{position:absolute;bottom:calc(58px + env(safe-area-inset-bottom));right:8px;
  z-index:60;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.5);color:#fff;
  font-size:19px;font-weight:700;line-height:1;display:flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0;opacity:.85;
  -webkit-tap-highlight-color:transparent}
.jl-help-btn:active{transform:scale(.94)}
.jl-help-btn:focus-visible{outline:2px solid #64B5F6;outline-offset:2px}
/* The panel covers the whole game so nothing behind it competes for attention. */
/* Fully opaque: at .97 the board showed faintly through, which was distracting. */
.jl-help{position:fixed;inset:0;z-index:90;background:#080a0e;
  display:flex;flex-direction:column;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.jl-help[hidden]{display:none}
.jl-help h2{font-size:20px;font-weight:700;margin-bottom:12px;text-align:center}
.jl-help ul{list-style:none;display:grid;gap:9px;width:100%;max-width:420px;margin:0 auto}
.jl-help li{display:flex;gap:11px;align-items:flex-start;background:#161c24;
  border:1px solid #232c36;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.45}
.jl-help .jl-help-ico{flex:0 0 auto;width:26px;text-align:center;font-size:18px;line-height:1.3}
.jl-help .jl-help-txt{flex:1 1 auto;min-width:0}
.jl-help-close{min-height:48px;min-width:160px;margin:16px auto 0;padding:0 22px;border:0;
  border-radius:12px;background:#3a4757;color:#fff;font-size:16px;font-weight:700;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.jl-help-close:focus-visible{outline:2px solid #64B5F6;outline-offset:2px}