/* Memória — all styles scoped under .jl-memoria. No external requests, no assets. */
.jl-memoria{--jl-bg:#101418;--jl-fg:#e8f0e8;--jl-accent:#2E7D32;--jl-card:#1b232b;--jl-card2:#26313b;
  position:absolute;inset:0;display:flex;flex-direction:column;background:var(--jl-bg);
  color:var(--jl-fg);font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  user-select:none;-webkit-user-select:none;overflow:hidden;touch-action:manipulation}
.jl-memoria *{box-sizing:border-box;margin:0;padding:0}
/* Six counters (stage, marks, pairs, best, moves, time). A 3x2 grid stays legible
   at 320px, where a single row of six would collapse. */
.jl-memoria-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 6px;
  padding:5px 10px;font-size:14px;font-weight:600;letter-spacing:.02em;flex:0 0 auto}
.jl-memoria-hudbox{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.jl-memoria-hudbox .jl-memoria-lab{font-size:9.5px;font-weight:700;opacity:.62;
  text-transform:uppercase;letter-spacing:.03em}
.jl-memoria-hudbox b{font-size:16px}
/* Low marks must shout: this is the number that ends the run. */
.jl-memoria-hudbox.jl-low b{color:#FF5252;animation:jl-memoria-low 1s ease-in-out infinite}
@keyframes jl-memoria-low{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.jl-memoria-hudbox.jl-low b{animation:none}}
.jl-memoria-hud b{font-variant-numeric:tabular-nums}
.jl-memoria-lab{opacity:.72;font-weight:500;font-size:12px;text-transform:uppercase;display:block}
.jl-memoria-bar{display:flex;gap:6px;padding:0 10px 6px;flex:0 0 auto;
  flex-wrap:wrap;justify-content:center}
.jl-memoria-tab{flex:1 1 0;min-width:72px;min-height:44px;border:1px solid #2f3a44;border-radius:10px;
  background:#1b232b;color:var(--jl-fg);font-size:14px;font-weight:600;cursor:pointer;
  padding:0 8px;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.jl-memoria-tab[aria-pressed="true"]{background:#2E7D32;border-color:#43A047;color:#fff}
.jl-memoria-tab:focus-visible{outline:2px solid #64B5F6;outline-offset:2px}
.jl-memoria-intro{flex:0 0 auto;text-align:center;font-size:14px;opacity:.85;padding:2px 12px 6px}
.jl-memoria-intro[hidden]{display:none}
.jl-memoria-boardwrap{flex:1 1 auto;min-height:0;position:relative;display:flex;
  align-items:center;justify-content:center;padding:2px 6px}
.jl-memoria-board{display:grid;gap:8px;grid-template-columns:repeat(var(--jl-ncols,4),var(--jl-cw));
  grid-auto-rows:var(--jl-ch);justify-content:center;align-content:center;touch-action:manipulation}
.jl-memoria-card{width:var(--jl-cw);height:var(--jl-ch);min-width:44px;min-height:44px;
  padding:0;border:0;background:transparent;perspective:520px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit;color:inherit}
.jl-memoria-card:focus-visible{outline:2px solid #64B5F6;outline-offset:3px;border-radius:10px}
.jl-memoria-inner{position:relative;display:block;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .26s ease}
.jl-memoria-face{position:absolute;inset:0;border-radius:10px;display:flex;align-items:center;
  justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.jl-memoria-front{border:1px solid #36424d;
  background-color:var(--jl-card);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 5px,transparent 5px 10px)}
.jl-memoria-back{transform:rotateY(180deg);background:#eef2f6;border:1px solid #c9d2da}
.jl-memoria-card.jl-flip .jl-memoria-inner{transform:rotateY(180deg)}
.jl-memoria-card[aria-disabled="true"]{cursor:default}
.jl-memoria-card.jl-done .jl-memoria-back{background:#cdd8d2;border:2px solid #43A047;
  box-shadow:inset 0 0 0 2px rgba(67,160,71,.35)}
.jl-memoria-card.jl-done .jl-memoria-glyph{color:#5f7a68}
.jl-memoria-card.jl-done::after{content:"\2713";position:absolute;top:2px;right:5px;font-size:12px;
  line-height:1;color:#2E7D32;font-weight:700}
.jl-memoria-card.jl-done{pointer-events:none;position:relative}
.jl-memoria-glyph{font-size:calc(var(--jl-ch) * .58);line-height:1;color:#12202b}
.jl-memoria-shape{display:block;width:calc(var(--jl-ch) * .52);height:calc(var(--jl-ch) * .52);
  background:currentColor}
.jl-memoria-s0{-webkit-clip-path:circle(50%);clip-path:circle(50%)}
.jl-memoria-s1{border-radius:3px}
.jl-memoria-s2{-webkit-clip-path:polygon(50% 0,100% 100%,0 100%);clip-path:polygon(50% 0,100% 100%,0 100%)}
.jl-memoria-s3{-webkit-clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.jl-memoria-s4{-webkit-clip-path:polygon(25% 2%,75% 2%,98% 50%,75% 98%,25% 98%,2% 50%);clip-path:polygon(25% 2%,75% 2%,98% 50%,75% 98%,25% 98%,2% 50%)}
.jl-memoria-s5{-webkit-clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.jl-memoria-s6{-webkit-clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.jl-memoria-s7{-webkit-clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}
.jl-memoria-s8{-webkit-clip-path:polygon(50% 0,62% 38%,100% 38%,69% 60%,81% 100%,50% 76%,19% 100%,31% 60%,0 38%,38% 38%);clip-path:polygon(50% 0,62% 38%,100% 38%,69% 60%,81% 100%,50% 76%,19% 100%,31% 60%,0 38%,38% 38%)}
.jl-memoria-s9{-webkit-clip-path:polygon(50% 0,100% 75%,50% 100%,0 75%);clip-path:polygon(50% 0,100% 75%,50% 100%,0 75%)}
.jl-memoria-card.jl-bad .jl-memoria-back{border:3px solid #E53935;animation:jl-memoria-pulse .24s ease 2}
@keyframes jl-memoria-pulse{50%{transform:rotateY(180deg) scale(1.08)}}
.jl-memoria-card.jl-hint .jl-memoria-front{border-color:#FFD54F;box-shadow:inset 0 0 0 2px #FFD54F}
.jl-memoria-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(9,12,15,.9);z-index:3}
.jl-memoria-veil[hidden]{display:none}
.jl-memoria-veil h1{font-size:21px;font-weight:700;line-height:1.25}
.jl-memoria-veil p{font-size:15px;opacity:.88;max-width:280px}
.jl-memoria-veil .jl-memoria-rec{color:#FFD54F;font-weight:700}
.jl-memoria-cta{min-height:48px;min-width:150px;padding:0 20px;border:0;border-radius:12px;
  background:#2E7D32;color:#fff;font-size:16px;font-weight:700;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.jl-memoria-cta:focus-visible{outline:2px solid #64B5F6;outline-offset:2px}
.jl-memoria-err{font-size:15px;line-height:1.5;max-width:300px}
.jl-memoria-err a{color:#64B5F6}
@media (max-height:640px){.jl-memoria-hud{font-size:14px;padding:4px 10px}
  .jl-memoria-tab{font-size:13px}.jl-memoria-intro{font-size:13px;padding-bottom:4px}
  .jl-memoria-board{gap:6px}}
@media (prefers-reduced-motion:reduce){.jl-memoria-inner{transition:none}
  .jl-memoria-card.jl-bad .jl-memoria-back{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. */

/* --- help button + guideline panel ---------------------------------------
   Sits directly above the sound button so both controls share one corner.
   44x44 to match SH-22. */
/* 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}


/* --- shared chrome v2: ad strip + blocking control bar -------------------- */
.jl-chrome{flex:0 0 auto;display:flex;flex-direction:column;width:100%}

/* 1. In-house advert strip. ~40px, placeholder content, dismissible. */
.jl-ad{display:flex;align-items:center;gap:6px;height:40px;padding:0 6px 0 12px;
  background:linear-gradient(90deg,#243447,#2f4a63);color:#dbeafe;
  font-size:12px;line-height:1.2;cursor:pointer;overflow:hidden}
.jl-ad[hidden]{display:none}
.jl-ad-txt{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jl-ad-go{flex:0 0 auto;font-weight:700;color:#93c5fd;font-size:11.5px}
.jl-ad-x{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#dbeafe;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent}

/* --- title banner: icon + game name, above the controls ----------------- */
.jl-titlebar{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:40px;min-height:40px;padding:0 12px;
  background:var(--jl-grad,linear-gradient(90deg,#374151,#4b5563));color:#fff;
  overflow:hidden}

/* The title, now a chip INSIDE the control bar rather than its own 40px row.
   `min-width:0` plus the ellipsis is what lets it shrink instead of pushing the
   buttons off the edge on a narrow phone — the controls must always win, because
   they are the tap targets. */
.jl-chip{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;
  justify-content:center;overflow:hidden}
.jl-chip .jl-tbar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jl-tbar-icon{flex:0 0 auto;font-size:19px;line-height:1}
.jl-tbar-name{flex:1 1 auto;min-width:0;font-size:15px;font-weight:800;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(0,0,0,.28)}

/* --- control bar: the six blocking controls ----------------------------- */
.jl-cbar{display:flex;align-items:center;justify-content:space-between;gap:4px;
  /* 48px, not 56px: the title row above it is gone, and the reclaimed height is what
     makes room for the seventh control without shrinking further. */
  height:48px;padding:0 6px;
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.34))}
/* 40px, NOT 44px, and that is a deliberate trade rather than an oversight.
   Seven controls at 44px need 336px of a 360px phone, leaving 24px for the title
   chip - unreadable. At 40px they need 308px and leave 52px. Material and Apple
   both recommend 44-48px for a touch target; the mitigations here are that the row
   sits on the top edge of the screen, the 4px gaps stay so a near-miss does not hit
   a neighbour, and the 40px row reclaimed above it goes to the BOARD, which is what
   the player is actually touching. Stated rather than hidden. */
.jl-cbtn{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:9px;border:0;
  background:rgba(0,0,0,.22);color:#fff;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  flex:0 0 auto;-webkit-tap-highlight-color:transparent}
.jl-cbtn:active{transform:scale(.93);background:rgba(0,0,0,.38)}
.jl-cbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.jl-cbtn-home{font-size:20px;font-weight:800}
.jl-cbtn-user{font-size:16px}
/* Very narrow phones: drop the score label text before anything shrinks. */
@media (max-width:340px){
    .jl-tbar-name{font-size:14px}
}
/* --- help button + guideline panel ---------------------------------------
   Sits directly above the sound button so both controls share one corner.
   44x44 to match SH-22. */
/* 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}


.jl-chrome{flex:0 0 auto;display:flex;flex-direction:column;width:100%}




.jl-cbtn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:10px;border:0;
  background:rgba(0,0,0,.24);color:#fff;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent}
.jl-cbtn:active{transform:scale(.94)}
.jl-cbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.jl-cbtn.jl-cbtn-login{width:auto;min-width:44px;padding:0 11px;font-size:12.5px;font-weight:700;gap:5px}
/* --- jackpot card ------------------------------------------------------- */
/* A single golden card that appears in ~10% of boards. Clearly distinct from
   the ordinary fruit/animal cards, and pays 100 points when flipped. */
.jl-memoria-card.jl-memoria-jpcard .jl-memoria-back{background:linear-gradient(160deg,#FFD54F,#F9A825);
  border:2px solid #FFF59D;box-shadow:0 0 10px rgba(255,213,79,.55)}
.jl-memoria-glyph.jl-memoria-jp{font-size:1em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.jl-memoria-jackpot{position:absolute;left:50%;top:40%;transform:translateX(-50%);
  font-size:30px;font-weight:800;color:#FFD54F;pointer-events:none;z-index:30;
  text-shadow:0 2px 10px rgba(0,0,0,.85);animation:jl-memoria-jp 1s ease-out forwards}
@keyframes jl-memoria-jp{
  0%{opacity:0;transform:translate(-50%,10px) scale(.7)}
  30%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-46px) scale(1)}
}
@media (prefers-reduced-motion:reduce){.jl-memoria-jackpot{animation:none}}
/* --- finish screen ------------------------------------------------------ */
/* An attractive win panel: celebration sparks, a 3-star rating, a trophy and a
   stat grid. All CSS and emoji — no image assets (SH-52). */
.jl-memoria-win{background:linear-gradient(160deg,#1a1030,#0d0a18 60%)}
.jl-memoria-burst{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.jl-memoria-burst span{position:absolute;top:-10px;width:7px;height:7px;border-radius:50%;
  opacity:0;animation:jl-memoria-fall 1.9s linear infinite}
.jl-memoria-spark0{left:6%;background:#FFD54F;animation-delay:0s}
.jl-memoria-spark1{left:15%;background:#FF8A65;animation-delay:.18s}
.jl-memoria-spark2{left:26%;background:#4DD0E1;animation-delay:.36s}
.jl-memoria-spark3{left:37%;background:#BA68C8;animation-delay:.54s}
.jl-memoria-spark4{left:48%;background:#81C784;animation-delay:.72s}
.jl-memoria-spark5{left:59%;background:#FFD54F;animation-delay:.9s}
.jl-memoria-spark6{left:68%;background:#FF8A65;animation-delay:1.08s}
.jl-memoria-spark7{left:77%;background:#4DD0E1;animation-delay:1.26s}
.jl-memoria-spark8{left:85%;background:#BA68C8;animation-delay:1.44s}
.jl-memoria-spark9{left:92%;background:#81C784;animation-delay:1.62s}
.jl-memoria-spark10{left:22%;background:#FFD54F;animation-delay:1.8s}
.jl-memoria-spark11{left:71%;background:#4DD0E1;animation-delay:1.98s}
@keyframes jl-memoria-fall{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:1}
  100%{opacity:0;transform:translateY(48vh) scale(1.1)}
}
.jl-memoria-winpanel{position:relative;z-index:2;width:100%;max-width:340px;margin:auto;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.jl-memoria-trophy{font-size:46px;line-height:1;animation:jl-memoria-pop .5s ease-out}
@keyframes jl-memoria-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.jl-memoria-stars{display:flex;gap:6px;font-size:30px;line-height:1}
.jl-memoria-star{color:#3a3450;transition:none}
.jl-memoria-star.jl-on{color:#FFD54F;text-shadow:0 0 12px rgba(255,213,79,.65);
  animation:jl-memoria-star .45s ease-out backwards}
.jl-memoria-star.jl-on:nth-child(1){animation-delay:.05s}
.jl-memoria-star.jl-on:nth-child(2){animation-delay:.20s}
.jl-memoria-star.jl-on:nth-child(3){animation-delay:.35s}
@keyframes jl-memoria-star{0%{transform:scale(0) rotate(-45deg)}100%{transform:scale(1) rotate(0)}}
.jl-memoria-winpanel h1{font-size:22px;font-weight:800;color:#fff}
.jl-memoria-winpanel p{font-size:14px;opacity:.9;color:#e9e4f5}
.jl-memoria-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;width:100%;margin-top:6px}
.jl-memoria-stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);
  border-radius:10px;padding:8px 6px}
.jl-memoria-stat b{display:block;font-size:19px;font-variant-numeric:tabular-nums;color:#fff}
.jl-memoria-stat span{font-size:10px;opacity:.72;text-transform:uppercase;letter-spacing:.04em}
.jl-memoria-jpnote{color:#FFD54F!important;font-weight:700}
.jl-memoria-cta.jl-memoria-next{background:#7B3FE4}
@media (prefers-reduced-motion:reduce){
  .jl-memoria-burst,.jl-memoria-trophy,.jl-memoria-star.jl-on{animation:none}
  .jl-memoria-burst{display:none}
}

/* --- game over (out of marks) ------------------------------------------- */
.jl-memoria-veil.jl-memoria-over{background:linear-gradient(160deg,#2a0f14,#0d0a18 60%)}
/* A secondary action must not compete with the primary one. */
.jl-memoria-cta.jl-memoria-ghost{background:transparent;border:2px solid rgba(255,255,255,.28);
  color:#e9eef5;font-size:14px;min-height:44px}
.jl-memoria-winpanel .jl-memoria-cta{width:100%;max-width:280px}

/* Six 44px bar controls need 264px + gaps. At 320px the title yields entirely:
   the controls are the tap targets and must never be pushed off-screen. */
@media (max-width:359px){
  .jl-cbar{gap:2px;padding:0 3px}
  .jl-tbar-name{display:none}
}

/* THE TITLE CHIP CANNOT FIT BESIDE SEVEN 44px CONTROLS, and on a 400px phone it was
   showing "C..." — 24px of width for a 44px word. Measured on all six games: five of them
   clipped, and "Junta Números" needed 112px for the 24px it had.
 *
 * THERE IS NOTHING TO GAIN BY KEEPING A ONE-LETTER CHIP. The game's name is in the page
   title, in the browser or in-app tab above the board, and on the home screen the player
   just came from. A truncated chip is not a shorter version of that information; it is a
   row of pixels that says "C".
 *
 * SO BELOW 430px THE CHIP GOES AND THE SPACE GOES TO THE CONTROLS. 430px is where the chip
 * can show a full short name with the existing sizes: seven 40px targets, six 4px gaps and
 * the padding leave about 80px, which fits "Cobra" and "Trio" but not "Junta Números". Above
 * it the chip stays, because a wider screen has room and the name is a useful orientation
 * cue.
 *
 * `sr-only` rather than `display:none` for the NAME: the heading is what a screen reader
 * announces as the game it has opened, and removing it entirely would leave that heading
 * empty. The visible chip is decoration on top of an accessible label. */
@media (max-width:430px){
  .jl-chip{flex:0 0 auto;justify-content:flex-end}
  .jl-chip .jl-tbar-name{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .jl-chip .jl-tbar-icon{font-size:18px}
}