/* Palavra da Baixada: estilos isolados sob .pdb para não brigar com o tema do site. */
.pdb {
  --pdb-surface: #ffffff;
  --pdb-ink: #14202b;
  --pdb-muted: #55626c;
  --pdb-line: #c9d1d5;
  --pdb-sign: #0e3b5c;
  --pdb-on-sign: #ffffff;
  --pdb-hit: #247a4b;
  --pdb-near: #e3b01c;
  --pdb-near-ink: #1a1400;
  --pdb-miss: #66727b;
  --pdb-on-tile: #ffffff;
  --pdb-key: #dce2e5;
  --pdb-focus: #0e6bb5;
  --pdb-bg: #eef1ef;
  --pdb-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  margin: 2.5em auto 1.5em;
  background: var(--pdb-surface);
  color: var(--pdb-ink);
  border: 1px solid var(--pdb-line);
  border-radius: 6px;
  overflow: hidden;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
}
.pdb *, .pdb *::before, .pdb *::after { box-sizing: border-box; }
.pdb :focus-visible { outline: 3px solid var(--pdb-focus); outline-offset: 2px; }
.pdb [hidden] { display: none !important; }

.pdb .pdb-sign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--pdb-sign);
  color: var(--pdb-on-sign);
  padding: 14px 18px;
}
.pdb .pdb-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  color: inherit;
}
.pdb .pdb-title {
  margin: 2px 0 0;
  padding: 0;
  font-family: var(--pdb-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
  color: inherit;
  text-wrap: balance;
}
.pdb .pdb-no {
  margin: 0;
  flex: none;
  font-family: var(--pdb-display);
  font-weight: 700;
  font-size: 15px;
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 4px 9px;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.pdb .pdb-body { padding: 16px 18px 20px; display: grid; gap: 14px; }
.pdb .pdb-lede { margin: 0; color: var(--pdb-muted); font-size: 15px; text-wrap: pretty; }

.pdb .pdb-msg { min-height: 24px; text-align: center; font-weight: 600; font-size: 15px; }
.pdb .pdb-msg.pdb-show { animation: pdb-pop 0.2s ease-out; }

.pdb .pdb-board { display: grid; gap: 6px; width: min(100%, 320px); margin-inline: auto; }
.pdb .pdb-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pdb .pdb-row.pdb-shake { animation: pdb-shake 0.4s; }
.pdb .pdb-tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--pdb-line);
  border-radius: 4px;
  font-family: var(--pdb-display);
  font-weight: 800;
  font-size: clamp(24px, 8vw, 32px);
  text-transform: uppercase;
  background: var(--pdb-surface);
  color: var(--pdb-ink);
  user-select: none;
}
.pdb .pdb-tile[data-filled="1"] { border-color: var(--pdb-muted); animation: pdb-pop 0.12s ease-out; }
.pdb .pdb-tile[data-state] { border-color: transparent; color: var(--pdb-on-tile); }
.pdb .pdb-tile[data-state="hit"] { background: var(--pdb-hit); }
.pdb .pdb-tile[data-state="near"] { background: var(--pdb-near); color: var(--pdb-near-ink); }
.pdb .pdb-tile[data-state="miss"] { background: var(--pdb-miss); }
.pdb .pdb-tile.pdb-flip { animation: pdb-flip 0.46s ease-in-out both; }

.pdb .pdb-hintrow { display: grid; gap: 6px; justify-items: center; text-align: center; }
.pdb button.pdb-link {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 6px 8px;
  margin: 0;
  color: var(--pdb-focus);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.pdb .pdb-hint { margin: 0; max-width: 34ch; font-size: 14px; color: var(--pdb-muted); text-wrap: pretty; }

.pdb .pdb-kb { display: grid; gap: 6px; }
.pdb .pdb-kbrow { display: flex; justify-content: center; gap: 5px; }
.pdb button.pdb-key {
  flex: 1 1 0;
  min-width: 0;
  max-width: 40px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  background: var(--pdb-key);
  color: var(--pdb-ink);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.pdb button.pdb-key.pdb-wide { flex: 1.6 1 0; max-width: 62px; font-size: 12px; }
.pdb button.pdb-key[data-state="hit"] { background: var(--pdb-hit); color: var(--pdb-on-tile); }
.pdb button.pdb-key[data-state="near"] { background: var(--pdb-near); color: var(--pdb-near-ink); }
.pdb button.pdb-key[data-state="miss"] { background: var(--pdb-miss); color: var(--pdb-on-tile); }

.pdb .pdb-end { display: grid; gap: 14px; border-top: 1px solid var(--pdb-line); padding-top: 16px; }
.pdb .pdb-endtitle {
  margin: 0;
  padding: 0;
  font-family: var(--pdb-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  text-transform: none;
  color: var(--pdb-ink);
  text-wrap: balance;
}
.pdb .pdb-end p { margin: 0; text-wrap: pretty; }
.pdb .pdb-answer { font-size: 15px; }
.pdb .pdb-answer strong { font-family: var(--pdb-display); font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
.pdb ul.pdb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pdb ul.pdb-stats li { margin: 0; border: 1px solid var(--pdb-line); border-radius: 4px; padding: 8px 6px; text-align: center; }
.pdb .pdb-stats b { display: block; font-family: var(--pdb-display); font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pdb .pdb-stats span { font-size: 12px; color: var(--pdb-muted); }
.pdb .pdb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pdb button.pdb-btn {
  flex: 1 1 140px;
  min-height: 44px;
  margin: 0;
  border-radius: 4px;
  border: 2px solid var(--pdb-sign);
  background: var(--pdb-sign);
  color: var(--pdb-on-sign);
  box-shadow: none;
  font: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  padding: 8px 14px;
}
.pdb button.pdb-btn.pdb-ghost { background: transparent; color: var(--pdb-ink); border-color: var(--pdb-line); }
.pdb .pdb-next { font-size: 14px; color: var(--pdb-muted); }
.pdb .pdb-next b { font-variant-numeric: tabular-nums; color: var(--pdb-ink); }
.pdb textarea.pdb-fallback {
  width: 100%;
  min-height: 92px;
  border: 1px solid var(--pdb-line);
  border-radius: 4px;
  padding: 8px;
  background: var(--pdb-bg);
  color: var(--pdb-ink);
  font: inherit;
  font-size: 14px;
}
.pdb .pdb-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  border-top: 1px solid var(--pdb-line);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--pdb-muted);
}

@keyframes pdb-pop { 50% { transform: scale(1.08); } }
@keyframes pdb-shake {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
@keyframes pdb-flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pdb .pdb-tile.pdb-flip, .pdb .pdb-tile[data-filled="1"], .pdb .pdb-row.pdb-shake, .pdb .pdb-msg.pdb-show { animation: none; }
}