/* Palavras — styles scoped under .jl-palavras. No external requests. */
.jl-palavras{--jl-bg:#12151a;--jl-fg:#eef2f7;--jl-correct:#2E7D32;--jl-present:#B8860B;
  --jl-absent:#3a424c;--jl-line:#2c333c;
  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-palavras *{box-sizing:border-box;margin:0;padding:0}
.jl-palavras-head{flex:0 0 auto;padding:8px 12px 4px;display:flex;
  justify-content:space-between;align-items:flex-start;gap:8px}
.jl-palavras-title{font-size:17px;font-weight:700}
.jl-palavras-sub{font-size:12px;opacity:.72;margin-top:2px}
.jl-palavras-modes{display:flex;gap:6px}
.jl-palavras-mode{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--jl-line);
  background:#1a1f27;color:var(--jl-fg);font-size:13px;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.jl-palavras-mode.jl-active{background:#3a4757;border-color:#5b6b7d}
.jl-palavras-mode:focus-visible{outline:2px solid #64B5F6;outline-offset:2px}
.jl-palavras-note{flex:0 0 auto;font-size:11px;opacity:.66;padding:0 12px 4px;text-align:center}
/* Always-visible instruction line. */
.jl-palavras-hint{flex:0 0 auto;font-size:12.5px;text-align:center;padding:5px 12px 2px;
  color:#9fe8d8;font-weight:600}
/* Compact legend that mirrors the board's colour + shape language. */
.jl-palavras-legend{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;
  padding:2px 12px 4px;max-width:330px;margin:0 auto;width:100%}
.jl-palavras-legend-row{display:flex;align-items:center;gap:7px;font-size:11px;line-height:1.3}
.jl-palavras-legend-txt{opacity:.8;min-width:0}
.jl-palavras-legend-sw{flex:0 0 auto;width:20px;height:20px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.jl-palavras-legend-sw.jl-correct{background:#2E7D32;border:2px solid #7CC47F}
.jl-palavras-legend-sw.jl-present{background:#B8860B;border:2px dashed #FFD54F}
.jl-palavras-legend-sw.jl-absent{background:#3a424c;border:2px dotted #5a636e;opacity:.85}
/* The grid takes only the height LEFT OVER after the chrome, header, legend and
   keyboard. It used to size tiles from the width (aspect-ratio:1) inside a
   flex:0 1 auto box, so on screens shorter than ~874px the 6 rows could not
   shrink and the keyboard's last row was pushed off-screen - the Enter key
   became unreachable and the game was unplayable. */
/* THE WRAPPER IS WHAT BOUNDS THE GRID, and it had no rule at all.
   `.jl-palavras-grid` says `flex:1 1 auto; min-height:0` — which does nothing unless its
   parent gives it a height to flex WITHIN. The wrapper was a plain block, so the grid grew
   to its full content height (1492px for 31 rows) and pushed the keyboard off the screen.
   Measured before this rule: grid clientHeight 1492 = scrollHeight, keyboard top 1757 in an
   820px viewport. The keyboard is the only way to play, so this made the game unusable. */
.jl-palavras-grid-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.jl-palavras-grid{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;gap:4px;
  padding:4px 12px;margin:0 auto;width:100%;max-width:300px}
.jl-palavras-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;
  /* A FIXED ROW HEIGHT, because the board can now hold 31 of them. Sizing rows by
     a fraction of the container worked for six and would make thirty unreadable. */
  flex:0 0 auto;height:clamp(34px,11vw,46px)}
.jl-palavras-tile{aspect-ratio:auto;height:100%;min-height:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--jl-line);border-radius:6px;font-size:clamp(18px,6.4vw,26px);
  font-weight:700;text-transform:uppercase;background:#171c23;line-height:1}
/* SH-81: colour is never the only signal. Each state also has a distinct BORDER STYLE
   and a distinct corner MARK, so a colour-blind player can still read the board. */
.jl-palavras-tile.jl-correct{background:var(--jl-correct);border-color:#7CC47F;border-style:solid}
.jl-palavras-tile.jl-present{background:var(--jl-present);border-color:#FFD54F;border-style:dashed}
.jl-palavras-tile.jl-absent{background:var(--jl-absent);border-color:#5a636e;border-style:dotted;opacity:.85}
.jl-palavras-tile::after{content:'';position:absolute}
.jl-palavras-tile{position:relative}
.jl-palavras-tile.jl-correct::after{content:'\2714';position:absolute;top:1px;right:3px;font-size:9px;
  opacity:.9}
.jl-palavras-tile.jl-present::after{content:'\2022';position:absolute;top:0;right:4px;font-size:13px;
  opacity:.95}
.jl-palavras-tile.jl-absent::after{content:'\2715';position:absolute;top:2px;right:3px;font-size:8px;
  opacity:.7}
.jl-palavras-tile.jl-flip{animation:jl-palavras-flip .28s ease both}
@keyframes jl-palavras-flip{from{transform:rotateX(90deg);opacity:.4}to{transform:rotateX(0);opacity:1}}
.jl-palavras-tile.jl-filled{border-color:#5b6b7d}
.jl-palavras-mid{flex:1 1 auto;min-height:8px;display:flex;align-items:center;
  justify-content:center;padding:0 12px}
.jl-palavras-msg{font-size:14px;font-weight:600;text-align:center}

/* The hint button sits beside the message. Calm and secondary: it is an escape hatch,
   not the main action, and it should not compete with the keyboard. */
.jl-palavras-reveal{display:block;margin:6px auto 0;padding:7px 12px;border-radius:7px;
  border:1px solid var(--jl-line);background:#171c23;color:var(--jl-fg);
  font:inherit;font-size:13px;cursor:pointer}
.jl-palavras-reveal:active{transform:translateY(1px)}
.jl-palavras-reveal[disabled]{opacity:.45;cursor:default}
.jl-palavras-reveal[hidden]{display:none}

/* A REVEALED LETTER IS MARKED, so the player can tell a given letter from one they worked
   out. Dashed border rather than a colour, because colour already carries the guess result
   (green/amber/grey) and a fourth meaning would be unreadable. Declared AFTER the tile
   rules so it wins on equal specificity.

   A DASHED BORDER ALONE WAS NOT ENOUGH. Reported as "when I press delete the first letter
   cannot be removed": the revealed letter sat in the row looking like a typed one, backspace
   dutifully stopped at it, and the row still showed a letter — so the game looked broken rather
   than locked. It now also reads as LOCKED: a slightly recessed face, a muted letter, and a
   small key mark, none of which collides with the green/amber/grey guess colours because they
   are drawn on the current row, which has no guess result yet. */
.jl-palavras-tile.jl-given{
  border-style:dashed;
  border-color:#55606e;
  background:#1b212a;
  color:#c3ccd9;
}
/* The mark, top-right, the size of the guess markers so the row stays aligned. It says the cell
   was GIVEN rather than typed, without needing a legend. */
.jl-palavras-tile.jl-given::after{
  content:'\1F511';
  position:absolute;top:1px;right:3px;
  font-size:9px;line-height:1;
  opacity:.75;
}
.jl-palavras-msg.jl-bad{color:#FF8A80}
.jl-palavras-msg.jl-good{color:#A5D6A7}
/* SH-22: keys must be >= 44px tall. A 10-key row cannot give every key 44px WIDTH at
   320px (10x44 = 440 > 320), so the keyboard takes the full viewport width with 2px
   gaps and every key is >= 44px tall; the top row of a physical keyboard is exactly
   this shape. Rows of 9 keys do reach 44px wide at 360px and above. */
.jl-palavras-kb{flex:0 0 auto;padding:4px 0 calc(6px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:5px;width:100%}
.jl-palavras-krow{display:flex;justify-content:center;gap:2px}
.jl-palavras-key{min-width:0;flex:1 1 0;height:46px;min-height:44px;border-radius:6px;
  border:1px solid var(--jl-line);background:#232a33;color:var(--jl-fg);font-size:15px;
  font-weight:700;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;
  justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.jl-palavras-key:active{background:#39434f}
.jl-palavras-key:focus-visible{outline:2px solid #64B5F6;outline-offset:1px}
/* All keys are the same width: a 1.6x wide key steals width from its six siblings
   and pushes them below the 44px SH-22 floor at 320px. */
.jl-palavras-key.jl-wide{flex:1 1 0;font-size:13px}
.jl-palavras-key.jl-correct{background:var(--jl-correct);border-color:#7CC47F}
.jl-palavras-key.jl-present{background:var(--jl-present);border-color:#FFD54F}
.jl-palavras-key.jl-absent{background:#171c23;opacity:.35}
.jl-palavras-veil{position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:8px;text-align:center;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  background:#0e1116;z-index:40;overflow-y:auto;touch-action:pan-y}
.jl-palavras-veil[hidden]{display:none}
.jl-palavras-veil h1{font-size:20px;font-weight:700}
.jl-palavras-veil p{font-size:14px;opacity:.9;max-width:300px}
.jl-palavras-veil .jl-palavras-rec{color:#FFD54F;font-weight:700}
.jl-palavras-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;
  max-width:320px;margin-top:4px}
.jl-palavras-stat{background:#1b212a;border-radius:8px;padding:9px 3px;min-width:0}
.jl-palavras-stat b{display:block;font-size:19px;line-height:1.15;font-variant-numeric:tabular-nums}
.jl-palavras-stat span{font-size:9px;line-height:1.2;opacity:.75;text-transform:uppercase;
  letter-spacing:.02em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jl-palavras-dist{width:100%;max-width:280px;margin-top:8px}
.jl-palavras-dist h2{font-size:12px;opacity:.72;text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:6px;font-weight:600}
.jl-palavras-distrow{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:12px}
.jl-palavras-distrow b{font-variant-numeric:tabular-nums}
.jl-palavras-distrow b:first-child{width:10px;text-align:right;opacity:.75}
.jl-palavras-distrow b:last-child{width:20px;text-align:left}
.jl-palavras-bar{height:13px;background:#7B3FE4;border-radius:3px;min-width:3px;
  flex:0 0 auto;transition:width .2s ease}
.jl-palavras-bar.jl-zero{background:#2a323c}
.jl-palavras-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.jl-palavras-cta{min-height:44px;min-width:120px;padding:0 18px;border:0;border-radius:10px;
  background:#7B3FE4;color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.jl-palavras-cta.jl-alt{background:#2f3a46}
.jl-palavras-cta:focus-visible{outline:2px solid #B388FF;outline-offset:2px}
.jl-palavras-copy{width:100%;max-width:320px}
.jl-palavras-copy textarea{width:100%;min-height:120px;border-radius:8px;border:1px solid var(--jl-line);
  background:#0d1116;color:var(--jl-fg);font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;
  padding:8px;resize:vertical}
.jl-palavras-copy p{font-size:12px;opacity:.8;margin-bottom:4px}
.jl-palavras-err{font-size:15px;line-height:1.5;max-width:300px}
.jl-palavras-err a{color:#B388FF}
@media (max-height:640px){
  .jl-palavras-key{height:44px;font-size:13px}
  .jl-palavras-grid{gap:3px;padding:2px 8px}
  .jl-palavras-tile{border-width:1px}
}
@media (prefers-reduced-motion:reduce){
  .jl-palavras-tile.jl-flip{animation:none}
}
/* --- audio mute toggle ---------------------------------------------------
   Palavras owns the bottom of the screen with its keyboard and the top-right
   with the mode tabs, so this game places the control in the header instead:
   a static, in-flow button rather than a floating one. */
.jl-palavras-head{gap:5px;align-items:center}
.jl-palavras-head .jl-palavras-modes{gap:5px}
@media (max-width:400px){.jl-palavras-mode{padding:0 10px;font-size:12.5px}}

/* --- 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}
/* 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. */
.jl-cbar{gap:3px;padding:0 4px}
@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}

/* --- language toggle ---------------------------------------------------- */
.jl-palavras-lang{min-height:44px;min-width:44px;padding:0 11px;border-radius:999px;
  border:1px solid #2f6f63;background:#134e43;color:#bff0e6;font-size:13px;font-weight:800;
  letter-spacing:.03em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center}
.jl-palavras-lang:active{transform:scale(.94)}
/* English has no C-cedilla: the key is hidden, not rebuilt. */
/* THE C KEY CARRIES A SMALL CEDILLA MARK. It is the only key for that letter, and it accepts
   a cedilla as well as a bare C, because the answers are stored unaccented. Without a mark a
   player who types Ç sees an unremarkable "C" and cannot tell whether it was accepted; with
   "Ç" alone they would think the bare letter is wrong. A corner mark says both. */
.jl-palavras-key.jl-key-cc{position:relative}
.jl-palavras-key.jl-key-cc::after{
  content:'\00B7';position:absolute;right:5px;bottom:2px;font-size:11px;opacity:.55;line-height:1}
/* The mark is decoration on a key that still works — never the only signal (SH-81). */
@media (prefers-contrast:more){.jl-palavras-key.jl-key-cc::after{opacity:1}}


/* --- stage 0: guided first run ------------------------------------------ */
.jl-tut{position:absolute;inset:0;z-index:40;display:flex;align-items:center;
  justify-content:center;padding:16px;background:rgba(4,10,9,.94);overflow:auto}
.jl-tut[hidden]{display:none}
.jl-tut-panel{width:100%;max-width:330px;display:flex;flex-direction:column;
  align-items:center;gap:10px;text-align:center;color:#e9eef5}
.jl-tut-badge{font-size:11px;font-weight:800;letter-spacing:.08em;opacity:.6}
.jl-tut-panel h2{font-size:20px;font-weight:800;color:#fff}
.jl-tut-body{font-size:14px;line-height:1.45;opacity:.92;margin:0}
.jl-tut-big{font-size:26px;font-weight:800;letter-spacing:.34em;color:#26A69A;
  padding:6px 0 2px;text-indent:.34em}
.jl-tut-demo{display:flex;gap:5px;justify-content:center;margin:2px 0}
.jl-palavras-tile.jl-demo{width:38px;height:38px;font-size:16px}
.jl-tut-legend{display:flex;flex-direction:column;gap:5px;width:100%;max-width:280px;
  margin-top:2px;text-align:left}
.jl-tut-lrow{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.3}
.jl-tut-sw{flex:0 0 auto;width:18px;height:18px;border-radius:4px}
.jl-tut-sw.jl-correct{background:#2E7D32;border:2px solid #7CC47F}
.jl-tut-sw.jl-present{background:#B8860B;border:2px dashed #FFD54F}
.jl-tut-sw.jl-absent{background:#3a424c;border:2px dotted #5a636e}
.jl-tut-kb{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:4px 0}
.jl-tut-key{width:34px;height:42px;border-radius:6px;background:#1e2a28;
  border:1px solid #2f4744;color:#bff0e6;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.jl-tut-dots{display:flex;gap:6px;margin-top:2px}
.jl-tut-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.jl-tut-dot.jl-on{background:#26A69A}
.jl-tut-nav{display:flex;gap:8px;width:100%;justify-content:center;margin-top:4px}
.jl-tut-btn{min-height:48px;min-width:130px;padding:0 18px;border:0;border-radius:12px;
  background:#2E7D32;color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.jl-tut-btn.jl-ghost{background:transparent;border:2px solid rgba(255,255,255,.28);
  font-size:14px;min-width:90px}
.jl-tut-skip{background:none;border:0;color:#9fb3c8;font-size:12.5px;cursor:pointer;
  padding:6px;text-decoration:underline;-webkit-tap-highlight-color:transparent}

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

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