/* 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}
.jl-palavras-grid{flex:0 1 auto;display:grid;grid-template-rows:repeat(6,1fr);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}
.jl-palavras-tile{aspect-ratio:1;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}
.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-audio-btn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;
  border:1px solid var(--jl-line);background:#1a1f27;color:var(--jl-fg);
  font-size:20px;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-audio-btn:active{transform:scale(.94)}
.jl-audio-btn:focus-visible{outline:2px solid #64B5F6;outline-offset:2px}
.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. */
.jl-help-btn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;
  border:1px solid var(--jl-line);background:#1a1f27;color:var(--jl-fg);
  font-size:19px;font-weight:700;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-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}