/* ===========================================================================
   THE COLLECTION CHROME — shared by every game. See `_shared/chrome.js`.
   
   WHY THIS IS A SEPARATE FILE. It was copied into each game's stylesheet: about 7.7 KB
   of identical rules, six times. With twenty more games that is 154 KB of duplication,
   and the contract already records what duplication costs here — a bug copied into six
   files is six places to fix, and this codebase has paid for that lesson repeatedly.
   
   Each game still owns its own `--jl-grad` and its play area; only the frame is shared.
   Extracted verbatim from `blocos/game.css`, which is the reference implementation.
   =========================================================================== */

.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}
/* Six 44px controls plus a title and score do not fit 390px if the chip is wide.
   Budget: 6*44 + 6*4 gaps = 288px, leaving ~100px. So the chip drops its label
   and the title truncates — controls always win, they are the tap targets. */

@media (min-width:400px){
}
/* --- 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}

/* At 320px six 44px controls need 264px + gaps. 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}
  }
@media (min-width:360px){
}

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