/* Trio — styles scoped under .jl-trio. No external requests. */
.jl-trio{--jl-bg:#141018;--jl-fg:#f2ecf7;--jl-slot:#241d2e;--jl-line:#3a3149;
  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-trio *{box-sizing:border-box;margin:0;padding:0}
.jl-trio-hud{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:6px 12px;flex:0 0 auto}
.jl-trio-hud .jl-trio-cell{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.jl-trio-hud .jl-trio-lab{display:block;font-size:11px;font-weight:500;opacity:.7;
  text-transform:uppercase;letter-spacing:.04em}
.jl-trio-hud .jl-trio-right{text-align:right}
.jl-trio-hud .jl-trio-mid{text-align:center}
.jl-trio-board-wrap{position:relative;flex:1 1 auto;min-height:0;margin:0 8px;
  display:flex;align-items:center;justify-content:center}
.jl-trio-board{position:relative;background:#191322;border-radius:8px}
.jl-trio-tile{position:absolute;border:0;border-radius:9px;background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  -webkit-tap-highlight-color:transparent;transition:transform .12s ease,opacity .12s ease;
  line-height:1;will-change:transform}
/* A covered tile must be OBVIOUSLY unplayable. It was only 15% dimmer, so 24% of
   the board's clickable pixels were covered tiles that still looked normal — the
   player clicks one and nothing happens. Now: much darker, desaturated, sunken,
   with a dashed outline. It also has pointer-events:none, so clicks pass through. */
.jl-trio-tile.jl-cov{filter:brightness(.52) saturate(.45);opacity:.82;
  box-shadow:inset 0 0 0 2px rgba(180,160,210,.22)}
.jl-trio-tile.jl-cov::after{content:'';position:absolute;inset:0;border-radius:9px;
  background:rgba(10,7,14,.42)}
.jl-trio-tile:focus-visible{outline:2px solid #B388FF;outline-offset:2px}
.jl-trio-tile.jl-gone{opacity:0;transform:scale(.55)}
.jl-trio-tray{flex:0 0 auto;display:flex;justify-content:center;gap:5px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.jl-trio-slot{flex:1 1 0;max-width:52px;aspect-ratio:1;border-radius:8px;background:var(--jl-slot);
  border:1px dashed var(--jl-line);display:flex;align-items:center;justify-content:center;
  font-size:clamp(16px,5.4vw,26px);line-height:1;overflow:hidden}
.jl-trio-slot.jl-filled{border-style:solid;background:#2C2438}
.jl-trio-warn{position:absolute;left:50%;top:8px;transform:translateX(-50%);
  background:#B3261E;color:#fff;font-size:13px;font-weight:700;padding:4px 12px;
  border-radius:999px;z-index:20;pointer-events:none}
.jl-trio-warn[hidden]{display:none}
.jl-trio-combo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:26px;font-weight:800;color:#FFD54F;z-index:21;pointer-events:none;
  text-shadow:0 2px 8px rgba(0,0,0,.7)}
.jl-trio-combo[hidden]{display:none}
.jl-trio-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,8,16,.9);z-index:30}
.jl-trio-veil[hidden]{display:none}
.jl-trio-veil h1{font-size:22px;font-weight:700}
.jl-trio-veil p{font-size:15px;opacity:.88;max-width:290px}
.jl-trio-veil .jl-trio-rec{color:#FFD54F;font-weight:700}
.jl-trio-cta{min-height:48px;min-width:150px;padding:0 20px;border:0;border-radius:12px;
  background:#7B3FE4;color:#fff;font-size:16px;font-weight:700;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.jl-trio-cta:focus-visible{outline:2px solid #B388FF;outline-offset:2px}
.jl-trio-err{font-size:15px;line-height:1.5;max-width:300px}
.jl-trio-err a{color:#B388FF}
@media (prefers-reduced-motion:reduce){.jl-trio-tile{transition: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}

/* --- motion effects (all CSS; skipped under prefers-reduced-motion) ------- */
/* A free tile softly invites a tap. */
.jl-trio-tile.jl-free{animation:jl-trio-breathe 3.2s ease-in-out infinite}
@keyframes jl-trio-breathe{
  0%,100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:inset 0 0 0 2px rgba(185,150,255,.28)}
}
/* Tap feedback: the tile dips then lifts, so the tap feels physical. */
.jl-trio-tile.jl-press{animation:jl-trio-press 170ms ease-out}
@keyframes jl-trio-press{
  0%{transform:scale(1)}
  45%{transform:scale(.9)}
  100%{transform:scale(1)}
}
/* A tile on its way to the tray: shrink and fade towards the tray. */
.jl-trio-tile.jl-fly{animation:jl-trio-fly 220ms ease-in forwards;pointer-events:none}
@keyframes jl-trio-fly{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.35) translateY(60px)}
}
/* A slot that receives a tile pops. */
.jl-trio-slot.jl-pop{animation:jl-trio-slotpop 260ms ease-out}
@keyframes jl-trio-slotpop{
  0%{transform:scale(1)}
  40%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
/* The three cleared tiles flash and shrink out of the tray. */
.jl-trio-slot.jl-clear{animation:jl-trio-clearout 320ms ease-out forwards}
@keyframes jl-trio-clearout{
  0%{transform:scale(1);filter:brightness(1)}
  35%{transform:scale(1.22);filter:brightness(1.9)}
  100%{transform:scale(.7);filter:brightness(1);opacity:.25}
}
/* Emoji burst when tiles are uncovered: they settle in with a small drop. */
.jl-trio-tile.jl-reveal{animation:jl-trio-reveal 260ms ease-out}
@keyframes jl-trio-reveal{
  0%{transform:translateY(-7px) scale(.94);filter:brightness(1.5)}
  100%{transform:translateY(0) scale(1);filter:brightness(1)}
}
/* Score popup, like the one in Junta Números. */
.jl-trio-gain{position:absolute;font-weight:800;pointer-events:none;z-index:80;
  color:#E1BEE7;text-shadow:0 1px 4px rgba(0,0,0,.8);animation:jl-trio-gain 700ms ease-out forwards}
@keyframes jl-trio-gain{
  0%{opacity:0;transform:translateY(0) scale(.85)}
  25%{opacity:1;transform:translateY(-8px) scale(1.05)}
  100%{opacity:0;transform:translateY(-34px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .jl-trio-tile.jl-free,.jl-trio-tile.jl-press,.jl-trio-tile.jl-fly,
  .jl-trio-slot.jl-pop,.jl-trio-slot.jl-clear,.jl-trio-tile.jl-reveal,
  .jl-trio-gain{animation:none}
}

/* --- 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}