/* PopQuest UI styles (v1.6.2)
   Goal: consistent layout across states + clean keyboard with action row.
*/

/* Desktop hero container */
.pq{
  /* Desktop sizing variables */
  --pq-tile: 112px;
  --pq-gap: 10px;
  /* Accent green (no other greens) */
  --pq-blue:#91F88D;
  --pq-accent:#91F88D;
  max-width:1120px;
  margin:0 auto;
  /* closer to top, but leaves room for a future site header */
  padding:24px 18px 10px 18px;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

/* Hide common theme page titles when the shortcode is used */
body.pq-hide-title .entry-title,
body.pq-hide-title .wp-block-post-title,
body.pq-hide-title .page-title{display:none !important;}

/* Hero heading */
.pq__header{display:block;margin:0 0 50px 0;}
.pq__title{margin:0;font-size:22px;font-weight:700;letter-spacing:-0.01em;}
.pq__welcomeDate{margin:0;font-size:14px;font-weight:700;line-height:1.3;}

/* Identity bar (welcome only) */
.pq__identity{display:flex;justify-content:center;align-items:center;margin:10px 0 0 0;}
.pq__welcome{font-size:14px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#0f172a;}

/* Welcome line at top (shown once name exists; JS can turn it on) */
.pq__welcomeTop{display:none;margin:0 0 8px 0;font-size:14px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#0f172a;}
.pq__welcomeTop.is-on{display:block;}

/* Hide legacy header bits (we no longer render them, but keep safe if present) */
/* Hide legacy header bits (we no longer render them, but keep safe if present) */
.pq__kicker,.pq__meta{display:none;}

/* One-column hero layout */
.pq__layout{display:none;}
.pq__side{display:block;}
.pq__main{position:static;}

/* Board */
.pq__board{display:block;position:relative;}
.pq__label{font-size:18px;font-weight:800;margin:26px 0 16px 0;}
.pq__labelStar{display:none;}

/* Clues panel (solid background) */
.pq__clues{background:#f1f5f9;border:1px solid #e2e8f0;padding:16px;border-radius:0;margin:12px 0 14px 0;text-align:center;}
.pq__clueLine{display:flex;flex-wrap:wrap;gap:10px;margin:0;justify-content:center;}

.pq__cluesTitle{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#64748b;margin:0 0 12px 0;}

.pq__clueChunk{display:inline-flex;align-items:center;justify-content:center;height:var(--pq-tile);min-height:var(--pq-tile);padding:0 14px;border:1px solid #cbd5e1;border-radius:0;line-height:1.1;background:#fff;font-weight:700;font-size:var(--pq-clue-font,18px);}
.pq__clueChunk--redacted{background:#e5e7eb;color:transparent;}
.pq__clueChunk--revealed{background:var(--pq-blue);border-color:var(--pq-blue);color:#000;font-family:inherit;}

@media (max-width: 520px){
  .pq{ --pq-tile: 54px; --pq-gap: 8px; padding-top:18px; }
  .pq__title{font-size:18px;}
  .pq__clues{padding:12px;}
  .pq__clueChunk{padding:0 10px;}
}

/* Answer inputs */
.pq__answer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:calc(var(--pq-gap) * 1.4);margin:0 0 20px 0;}
.pq__word{display:flex;gap:8px;flex-wrap:nowrap;}
.pq__space{width:14px;height:1px;}

.pq__char{
  caret-color: transparent;

  font-family:inherit;
  font-weight:800;
  width:var(--pq-ans-tile, var(--pq-tile));
  height:var(--pq-ans-tile, var(--pq-tile));
  border:2px solid #cbd5e1;
  background:#fff;
  font-size:36px;
  line-height:var(--pq-ans-tile, var(--pq-tile));
  text-align:center;
  padding:0;
  border-radius:0;
}
.pq__char:focus{outline:2px solid var(--pq-blue);outline-offset:2px;}

.pq__char--hit,
.pq__char--ok{background:var(--pq-accent);border-color:var(--pq-accent);color:#000;}
.pq__char--miss{background:#e2e8f0;border-color:#cbd5e1;color:#000;}
.pq__char--fixed{background:#f1f5f9;}

/* Shake animation on wrong submit */
@keyframes pq-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.pq__answer--shake{animation: pq-shake 420ms ease-in-out;}

/* Star marker for revealed letter cells (top-right)
   NOTE: pseudo-elements do not render reliably on `input` elements, so we use a background SVG. */
.pq__char--revealed{
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Ctext x=%2750%27 y=%2772%27 text-anchor=%27middle%27 font-size=%2780%27 fill=%27%2338b6ff%27%3E%E2%98%85%3C/text%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:92% 18%;
  background-size:22px 22px;
}


/* Keyboard */
.pq__kbdWrap{display:inline-block;width:auto;}
.pq__kbd{
  margin-top:0;
  display:inline-block;
  width:auto;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  padding:14px 14px 12px 14px;
  border-radius:10px;
}
.pq__kbdRow{display:flex;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:nowrap;}

.pq__key{
  border:1px solid #cbd5e1;
  background:#fff;
  border-radius:10px;
  height:48px;
  min-width:48px;
  padding:0 12px;
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  line-height:46px;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(15,23,42,.10);
}
.pq__key:not(.pq__key--submit):hover{background:#f1f5f9;}
.pq__key--submit:hover{background:#0f172a;}
.pq__key:active{transform:translateY(1px);}
.pq__key--wide{min-width:84px;}

/* Keyboard action row (submit + reveal) */
.pq__kbdRow--actions{margin-top:10px;margin-bottom:0;gap:10px;justify-content:center;}
.pq__key--action{min-width:160px;max-width:none;height:48px;padding:0 14px;font-size:14px;letter-spacing:.5px;}
.pq__key--submit{background:#0f172a;border-color:#0f172a;color:#fff;}
.pq__key--ghost{background:#fff;color:#0f172a;}
.pq__key[disabled]{opacity:.55;cursor:not-allowed;}

@media (max-width: 520px){
  .pq__char{font-size:22px;line-height:var(--pq-ans-tile, var(--pq-tile));}
  .pq__kbdRow{display:flex;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:nowrap;}
  .pq__key{height:40px;min-width:36px;line-height:40px;font-size:14px;}
  .pq__key--wide{min-width:70px;}
  .pq__key--action{min-width:160px;max-width:none;height:48px;padding:0 14px;font-size:14px;letter-spacing:.5px;}
  .pq__kbdRow--actions{margin-top:10px;margin-bottom:0;gap:10px;justify-content:center;}
}

/* Small phones: prevent multi-word answers overflowing by slightly shrinking ONLY the answer tiles */
@media (max-width: 420px){
  .pq{ --pq-gap: 6px; }
  .pq{ --pq-ans-tile: 44px; }
  .pq__word{ gap: 6px; }
  .pq__answer{ gap: 10px; }
}

/* Tablet + mobile layout: stack keyboard/attempts, keep everything centered */
@media (min-width: 521px) and (max-width: 820px){
  .pq{--pq-tile: 68px;}
  .pq__playRow{flex-direction:column;align-items:center;gap:16px;}
  .pq__history{align-items:center;min-width:auto;}
  .pq__attempts{align-items:stretch;}
  .pq__kbdWrap{display:block;}
  .pq__kbd{max-width:100%;}
  .pq__belowRow{justify-content:center;}
}

/* Status */
.pq__status{margin-top:10px;min-height:18px;font-size:14px;color:#334155;text-align:center;}

/* Attempts */
.pq__history{margin-top:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:220px;}
.pq__historyTitle{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin:0;}

/* Slightly more breathing room above the attempts grid */
.pq__historyTitle{margin:0 0 12px 0;}

.pq__attempts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.pq__attemptRow{display:flex;gap:8px;align-items:flex-start;justify-content:flex-start;}
.pq__attemptWord{display:flex;gap:6px;}

/* Attempts grid cells (used by JS: .pq__cell) */
.pq__cell{width:28px;height:28px;border:1px solid #cbd5e1;border-radius:0;display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:14px;background:#fff;position:relative;
}
.pq__cellChar{position:relative;z-index:1;}
.pq__cell--ok{background:var(--pq-accent);border-color:var(--pq-accent);color:#000;}
.pq__cell--bad{background:#dc2626;border-color:#dc2626;color:#fff;}
.pq__cell--given{background:#f1f5f9;border-color:#cbd5e1;color:#000;}
.pq__cell--revealed::after{content:"★";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;line-height:1;color:var(--pq-blue);opacity:0.25;pointer-events:none;z-index:0;}
.pq__cellChar{position:relative;z-index:1;}

@media (max-width: 900px){
  .pq__history{align-items:flex-start;}
  .pq__kbd{margin-top:18px;display:inline-block;width:auto;background:transparent;border:none;padding:0;border-radius:0;}
  .pq__char{width:52px;height:52px;font-size:28px;line-height:52px;}
}

/* Sidebar cards (legacy) */
.pq__sideCard{border:1px solid #e2e8f0;background:#fff;padding:14px;margin-bottom:14px;}
.pq__sideTitle{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin-bottom:8px;}
.pq__sideBig{font-family:inherit;font-size:36px;line-height:1;margin-bottom:10px;}
.pq__sideRow{display:flex;justify-content:space-between;font-size:14px;color:#334155;margin:6px 0;}
.pq__sideHint{font-size:12px;color:#64748b;margin-top:10px;}

.pq__lb{margin:0;padding-left:18px;color:#334155;font-size:14px;}
.pq__lb li{margin:6px 0;}

/* Completion summary */
.pq__complete{margin-top:12px;border-top:1px solid #e2e8f0;padding-top:12px;}
.pq__completeTitle{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin-bottom:8px;}
.pq__completeLine{font-size:14px;color:#0f172a;margin:6px 0;}
.pq__completeLine--cta{font-weight:700;}

/* (Removed duplicate clue styles below; kept earlier definitions) */


/* Keyboard + Attempts row */
.pq__playRow{display:flex;justify-content:center;align-items:flex-start;gap:22px;margin-top:18px;flex-wrap:nowrap;}

@media (max-width: 980px){
  .pq__playRow{flex-wrap:wrap;}
  .pq__history{min-width:auto;align-items:center;}
}



/* Sticky leaderboard (desktop) */
.pq__belowRow{display:flex;justify-content:flex-end;align-items:flex-start;margin-top:18px;}
.pq__side--sticky{
  position:sticky;
  top:24px;
  width:280px;
  max-height:calc(100vh - 60px);
  overflow:auto;
  display:block;
}
.pq__side--sticky .pq__sideCard{box-shadow:0 1px 4px rgba(15,23,42,.08);}
@media (max-width: 1100px){
  .pq__belowRow{justify-content:center;}
  .pq__side--sticky{position:static;width:auto;max-height:none;}
}



/* Clue sizing by count */
.pq__clueLine--few .pq__clueChunk{flex:1 1 0;}
.pq__clueLine--many .pq__clueChunk{padding:0 10px;}

.pq__cellChar{position:relative;z-index:1;}


/* Completion modal */

.pq__modal{position:fixed;inset:0;z-index:9999;}
.pq__modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);}
.pq__modalCard{position:relative;max-width:520px;margin:12vh auto 0 auto;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 18px 55px rgba(0,0,0,.18);padding:18px;}
.pq__modalClose{position:absolute;top:10px;right:10px;border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;}
.pq__modalTitle{font-size:18px;font-weight:800;margin:4px 0 10px 0;text-transform:uppercase;letter-spacing:.04em;}
.pq__modalLine{margin:6px 0;font-size:15px;}
.pq__modalCta{margin-top:12px;font-size:14px;color:#222;}
.pq__modalLink{color:#2563eb;font-weight:800;text-decoration:none;}
.pq__modalActions{display:flex;justify-content:flex-end;margin-top:14px;}
.pq__btn{border:1px solid #ddd;background:#fff;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;}


/* v1.7.7 layout fixes: attempts under keyboard + flush wrapping */

/* Center the whole answer block, but keep wrapped lines flush-left within it */
.pq__answerRow{ text-align:center; }
.pq__tiles{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
  gap:var(--pq-gap);
}
.pq__tiles .pq__word{ display:flex; gap:var(--pq-gap); }
.pq__tiles .pq__word + .pq__word{ margin-left:calc(var(--pq-gap) * 1.5); }

/* Ensure attempts sits beneath keyboard on desktop */
.pq__keyboardRow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

/* Compact score summary under attempts */
.pq__afterAttempts{max-width:720px;width:100%;margin:0 auto;}
.pq__sideCard--inline{width:100%;border:1px solid #e6e6e6;border-radius:14px;padding:12px 14px;background:#fff;}
.pq__sideTitle{text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:#444;margin:0 0 6px 0;}
.pq__sideBig{font-size:28px;font-weight:800;margin:0 0 8px 0;}
.pq__sideRow{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:2px 0;}
.pq__completeLine{font-size:13px;color:#333;margin-top:4px;}

/* Hide any leftover leaderboard containers if theme outputs them */
.pq__side--sticky, .pq__leaderboard, .pq__belowRow{display:none !important;}

@media (max-width: 900px){
  .pq__tiles{gap:8px;}
}


/* v1.7.8 fix: keep attempts + summary under keyboard */

.pq__playRow{display:flex;flex-direction:column;align-items:center;gap:16px;}
.pq__kbdWrap{width:min(760px,100%);}
.pq__history{width:min(760px,100%);margin:0 auto;}
.pq__afterAttempts{width:min(760px,100%);margin:0 auto;}
/* prevent any floating/overlap */
.pq__history, .pq__afterAttempts{position:relative;z-index:1;}


/* v1.7.9: make attempts grid flush like answer grid */

/* Attempts: center block, flush-left wrapping inside */
.pq__history{ text-align:center; }
.pq__attempts{ display:block; }
.pq__attemptRow{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
  gap:var(--pq-gap);
}
.pq__attemptRow .pq__word{
  display:flex;
  gap:var(--pq-gap);
  margin:0;
}
.pq__attemptRow .pq__word + .pq__word{
  margin-left:calc(var(--pq-gap) * 1.5);
}


/* v1.8.2: enforce flush attempts + consistent widths */

/* Keep the whole play area aligned to one width */
.pq__kbdWrap, .pq__history, .pq__afterAttempts{max-width:760px;width:100%;}
/* Attempts rendering: ensure words are horizontal not stacked */
.pq__attemptRow{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--pq-gap);}
.pq__word--attempt{display:flex !important;flex-direction:row !important;gap:var(--pq-gap);}
.pq__cell{display:flex;align-items:center;justify-content:center;}
/* Center the attempts block while keeping inner wrap flush-left */
.pq__history{text-align:center;}
.pq__attempts{display:inline-block;}


/* v1.9.0 refactor: single column layout */

.pq-play-column{width:min(760px,100%); margin:0 auto; display:flex; flex-direction:column; gap:18px; align-items:stretch;}
.pq__playRow{width:100%; display:flex; justify-content:center;}
.pq__kbdWrap{width:100%; display:flex; justify-content:center;}
.pq__history{width:100%;}
.pq__afterAttempts{width:100%;}

.pq__history{
  text-align:left;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  padding:16px;
  border-radius:0;
}
.pq__historyTitle{margin-left:2px;}
.pq__attempts{width:100%;}
.pq__attemptRow{display:flex; flex-wrap:wrap; gap:var(--pq-gap); align-items:flex-start;}
.pq__word--attempt{display:flex; flex-direction:row; gap:var(--pq-gap);}

.pq__answerRow{display:flex; justify-content:center;}
.pq__tiles{display:inline-flex; flex-wrap:wrap; justify-content:flex-start; gap:var(--pq-gap);}


/* v1.9.1: align answer rows + improve mobile */

/* Answer grid: keep word integrity but center each wrapped line consistently */
.pq__answerRow{display:flex;justify-content:center;}
.pq__tiles{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* center each line */
  align-items:flex-start;
  gap:var(--pq-gap);
  width:min(760px, 100%);
  margin:0 auto;
}
/* Word blocks */
.pq__tiles .pq__word{display:flex;gap:var(--pq-gap);margin:0;}
.pq__tiles .pq__word + .pq__word{margin-left:calc(var(--pq-gap) * 1.5);}

/* Mobile: stack tighter, shrink tiles/keys, prevent overflow */
@media (max-width: 560px){
  .pq-play-column{width:100%; padding:0 14px;}
  .pq__tiles{width:100%; gap:10px;}
  .pq__cell{width:64px; height:64px; font-size:28px;}
  .pq__kbdWrap{padding:12px;}
  .pq__key{min-width:34px; height:44px; padding:0 6px; font-size:14px;}
  .pq__keyRow{gap:8px;}
  .pq__actionRow{flex-direction:column; gap:10px;}
  .pq__actionBtn{width:100%;}
  .pq__attempts{width:100%;}
  .pq__attemptRow{justify-content:center;} /* attempts block remains centered on small screens */
}

/* ------------------------------
   v1.9.6 layout + spacing overrides
---------------------------------*/

.pq__welcomeTop{
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0f172a;
  margin:0 0 10px 0;
}

/* Keep everything nicely centred and stacked */
.pq__playRow{display:block;}
.pq-play-column{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:100%;
}

/* Wider keyboard on desktop, still centred */
.pq__kbdWrap{
  width:min(860px, 100%);
  margin:0 auto;
  display:flex;
  justify-content:center;
}
.pq__kbd{
  width:100%;
}

/* Attempts + score boxes styled like clues */
.pq__history,
.pq__afterAttempts{
  width:min(860px, 100%);
  margin:0 auto;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,0.12);
  border-radius:18px;
  padding:14px;
}

.pq__historyTitle,
.pq__sideTitle{
  letter-spacing:.18em;
}

/* Ensure decent spacing between blocks on all screens */
.pq__board{gap:18px;}

/* Mobile polish */
@media (max-width: 520px){
  .pq__kbdWrap{width:100%;}
  .pq__history,
  .pq__afterAttempts{padding:12px;border-radius:16px;}
}



/* =========================
   Pop Quest UI overrides (v1.10.0)
   Mobile-first stacked layout + wide keyboard + stable clue cards
   ========================= */

/* Header spacing */
.pq__header{margin:0 0 18px 0;}
.pq__welcomeTop{
  font-size:14px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#0f172a;
  margin:0 0 8px 0;
}
.pq__title{margin:0;font-size:20px;font-weight:800;letter-spacing:-0.01em;}

/* First-time name prompt */
.pq__namePrompt{
  margin-top:14px;
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  text-align:left;
}
.pq__namePromptTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#64748b;
  margin:0 0 10px 0;
}
.pq__namePromptRow{
  display:flex;
  gap:10px;
  align-items:center;
}
.pq__nameInput{
  flex:1 1 auto;
  height:44px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:0 12px;
  font-size:16px;
  font-weight:700;
  background:#fff;
}
.pq__namePromptHelp{
  margin-top:8px;
  font-size:13px;
  color:#475569;
  font-weight:600;
}
.pq__namePromptError{
  margin-top:8px;
  font-size:13px;
  color:#ef4444;
  font-weight:700;
  min-height:18px;
}

/* Optional account section */
.pq__authToggle{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pq__linkBtn{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  font-weight:900;
  color:#0f172a;
  text-decoration:underline;
  cursor:pointer;
}
.pq__muted{color:#64748b; font-weight:700; font-size:13px;}
.pq__authBlock{margin-top:10px; padding-top:10px; border-top:1px solid #e2e8f0;}
.pq__authRow{margin-top:10px;}
.pq__authBtns{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;}

/* Layout: always stacked */
.pq__board{display:block;}
.pq__playRow{display:block;}
.pq-play-column{
  width:100%;
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Clues: stable cards + swipe on mobile */
.pq__clueChunk{
  min-width: 8ch; /* prevents shrinking when revealed text is shorter */
  justify-content:center;
}

/* Swipe containers (JS adds these classes on mobile) */
.pq__clueViewport{
  overflow:hidden;
  width:100%;
}
/* When clue line is converted into a viewport on mobile, override the base flex-wrap row styles */
.pq__clueLine.pq__clueViewport{
  display:block;
  flex-wrap:nowrap;
  gap:0;
  justify-content:initial;
}

.pq__clueTrack{
  display:flex;
  width:100%;
  transform: translateX(0%);
  transition: transform 220ms ease;
}
.pq__clueSlide{
  flex:0 0 100%;
  display:flex;
  justify-content:center;
}

/* Mobile clue controls: arrows + dots */
.pq__clueControls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}
.pq__clueArrow{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:#fff;
  font-size:22px;
  line-height:32px;
  font-weight:900;
  cursor:pointer;
}
.pq__clueArrow:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.pq__clueDots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}
.pq__clueControls .pq__clueDots{margin-top:0;}
.pq__clueDot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid #94a3b8;
  background:#fff;
  padding:0;
  cursor:pointer;
}
.pq__clueDot.is-active{
  background:#0f172a;
  border-color:#0f172a;
}

/* Keyboard: full width and centered */
.pq__kbdWrap{width:100%;}
.pq__kbd{
  width:100%;
  box-sizing:border-box;
}
.pq__kbdRow{
  flex-wrap:nowrap;
}
.pq__key{
  flex:1 1 0;
  min-width:0;
}
.pq__key--wide{
  flex:1.4 1 0;
}

/* Attempts + score cards: match clue card style */
.pq__history,
.pq__afterAttempts,
.pq__sideCard{
  width:100%;
  max-width:760px;
  margin:0 auto;
}

/* Tighten overall spacing on small screens */
@media (max-width: 520px){
  .pq{padding:18px 14px 10px 14px;}
  .pq__title{font-size:18px;}
  .pq__namePromptRow{flex-direction:column; align-items:stretch;}
  .pq__nameInput{width:100%;}
  .pq__btn{width:100%;}
  .pq__key{font-size:14px; padding:12px 0;}
}


/* ---------- v1.10.1 layout fixes: always stacked keyboard -> attempts -> score ---------- */
.pq__playRow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:100%;
  margin-top:16px;
}

/* v1.10.2: force single-column stack everywhere + prevent mobile overflow */
.pq{overflow-x:hidden;}
.pq__board{width:100%;}
.pq__playRow{flex-direction:column !important;flex-wrap:nowrap !important;}
.pq__kbdWrap,.pq__card{max-width:760px;width:100%;}

/* Tiles: responsive sizing so the grid is always contained */
.pq{--pq-tile: clamp(44px, 9.5vw, 72px);} /* slightly bigger tiles on desktop */
.pq__char{width:var(--pq-tile);height:var(--pq-tile);line-height:var(--pq-tile);} 

/* Attempts: cleaner, centered, contained */
.pq__attempts{width:100%; display:flex; flex-direction:column; gap:12px; align-items:center; overflow-x:hidden;}
.pq__attemptRow{width:100%; display:flex; justify-content:center; flex-wrap:wrap; gap:14px;}
.pq__attemptWord{display:flex; gap:6px; flex-wrap:nowrap;}
.pq__cell{width: clamp(22px, 5vw, 28px); height: clamp(22px, 5vw, 28px); font-size: clamp(12px, 3vw, 14px);} 

/* Mobile: keep everything comfortably within viewport */
@media (max-width: 520px){
  .pq{padding:16px 14px 10px 14px;}
  .pq__kbdRow{gap:6px;}
  .pq__key{height:38px;font-size:13px;line-height:38px;}
  .pq__key--action{height:44px;font-size:13px;}
}

/* Make keyboard align with the rest of the page */
.pq__kbdWrap{
  width:100%;
  max-width: 760px;
  display:block;
}
.pq__kbd{
  width:100%;
  display:block;
  margin:0;
}

/* Keyboard rows should not overflow; let keys shrink slightly */
.pq__kbdRow{
  flex-wrap:nowrap;
  gap:8px;
}
.pq__key{
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
}
.pq__key--wide{
  flex: 1.35 1 0;
}
.pq__key--action{
  flex: 1 1 0;
  min-width: 0;
}

/* Attempts + Score cards styled like clue cards */
.pq__card{
  width:100%;
  max-width: 760px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:14px;
}
.pq__card--score{background:#fff;}

.pq__attempts{width:100%;}

/* Attempts grid - prevent overflow on mobile */
.pq__attemptRow{flex-wrap:wrap;}
.pq__attemptWord{flex-wrap:nowrap;}

/* Mobile tuning */
@media (max-width: 520px){
  .pq{padding-left:14px;padding-right:14px;}
  .pq__kbdWrap, .pq__card{max-width: 100%;}
  .pq__key{height:40px;font-size:13px;line-height:40px;}
  .pq__key--action{height:46px;font-size:13px;}
}


/* --- Mobile polish --- */
@media (max-width: 520px){
  .pq__kbd{padding:12px 10px;}
  .pq__kbdRow{gap:6px;}
  .pq__key{flex:1 1 0;min-width:0;height:38px;line-height:38px;font-size:13px;}
  .pq__key--wide{flex:1.3 1 0;}
  .pq__kbdRow--actions{gap:10px;flex-wrap:nowrap;}
  .pq__key--action{flex:1 1 0;min-width:0;height:46px;font-size:13px;}
}

/* Ensure clue carousel only shows one clue at a time on mobile */
@media (max-width: 520px){
  .pq__clueLine.pq__clueViewport{max-width:100%;}
  .pq__clueTrack{will-change:transform;}
}

/* ===== v1.10.6 tweaks ===== */

/* Mobile keyboard: proper centering + cleaner spacing */
.pq__key{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.pq__kbdRow--actions .pq__key--action{
  white-space:normal;
  text-align:center;
  padding:0 10px;
  overflow:hidden;
}

@media (max-width: 520px){
  /* Mobile tiles were fine before; keep them tighter */
  .pq{ --pq-tile: 54px; }
  .pq__key{height:40px;font-size:13px;}
  .pq__key--action{height:50px;font-size:13px;}
}

/* Attempts: number each attempt row */
.pq__attempts{counter-reset: pqattempt;}
.pq__attemptRow{counter-increment:pqattempt; position:relative; padding-left:32px; gap:12px;}
.pq__attemptRow::before{
  content: counter(pqattempt) '.';
  position:absolute;
  left:0;
  top:6px; transform:none;
  font-weight:900;
  color:#64748b;
  font-size:12px;
  width:22px;
  text-align:right;
}

@media (max-width: 520px){
  .pq__attempts{overflow-x:hidden;}
  .pq__attemptRow{padding-left:28px; gap:10px; flex-wrap:wrap; align-items:flex-start; box-sizing:border-box;}
  .pq__attemptRow::before{font-size:11px; width:24px;}
  .pq__attemptRow .pq__word{max-width:100%;}
  .pq__attemptRow .pq__word + .pq__word{margin-left:0; margin-top:6px;}
}

/* Clue arrows: side placement (JS builds arrows overlay) */
.pq__clueArrows{
  position:absolute;
  top:50%;
  left:8px;
  right:8px;
  transform:translateY(-50%);
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}
.pq__clueArrows .pq__clueArrow{pointer-events:auto;}

.pq__clueViewport{position:relative;}




/* ============================
   v1.10.11 Mobile fit + compact keyboard
   ============================ */

/* Answer tiles: keep each word on one line, centered, never overflow */
.pq__answerRow{width:100%;}
.pq__tiles{
  display:flex;
  width:100%;
  justify-content:center;
  align-items:flex-start;
  gap:var(--pq-gap);
  flex-wrap:wrap; /* allow explicit word line-breaks */
}
.pq__tiles .pq__word{
  display:flex;
  gap:var(--pq-gap);
  flex-wrap:nowrap;
}

/* Force each word onto its own line: .pq__space is inserted between words in markup */
.pq__tiles .pq__space{
  flex-basis:100%;
  width:100%;
  height:0;
  padding:0;
  margin:0;
}

/* Attempts: prevent wrapping so letters never drop a line */
.pq__attemptRow{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  justify-content:flex-start;
  align-items:flex-start;
}
.pq__attemptRow .pq__word{flex-wrap:nowrap;}

/* Keyboard: center labels properly */
.pq__key{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Mobile tuning */
@media (max-width: 520px){
  /* Smaller tiles on mobile so 7-letter words always fit */
  .pq{ --pq-gap:6px; --pq-tile: clamp(34px, 9vw, 44px); }
  .pq__answerRow{overflow:hidden;}
  .pq__tiles{flex-wrap:wrap;}
  .pq__tiles .pq__word{flex-wrap:nowrap;}

  /* Attempts layout */
  .pq__attempts{align-items:stretch;}
  .pq__attemptRow{gap:8px;}
  .pq__attemptRow .pq__word{gap:6px;}

  /* Compact keyboard */
  .pq__kbd{width:100%;}
  .pq__kbdRow{
    display:flex;
    justify-content:center;
    gap:6px;
  }
  .pq__key{
    height:52px;
    min-width:0;
    padding:0;
    border-radius:8px;
    flex: 1 1 0;
    font-size:15px;
  }
  .pq__key--wide{flex:1.35 1 0;}
  .pq__key--submit{flex:1.75 1 0;}
}



/* Hamburger menu stats (read-only UI) */
.pq-panel-hello{
  font-family: 'Archivo Black', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;
  font-size: 18px;
  margin: 12px 0 10px;
}
.pq-ham-title{
  margin: 14px 0 10px;
  font-size: 14px;
  letter-spacing: .08em;
}
.pq-hs-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.pq-hs-label{ opacity:.9; font-size:13px; }
.pq-hs-value{ font-size:14px; font-weight:700; white-space:nowrap; }

/* Mobile: stack attempt words (avoid cramped single line) */
@media (max-width: 520px){
  .pq__attemptRow{
    align-items:flex-start;
  }
  .pq__attemptWords{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
  }
  .pq__attemptWord{
    flex-wrap:nowrap;
  }
}

/* Mobile: slightly bigger keys for thumbs */
@media (max-width: 520px){
  .pq__kbdKey{
    min-height:46px;
    padding:10px 10px;
    font-size:16px;
  }
}

@media (max-width: 520px){
  .pq__attemptRow{padding-left:42px;}
  .pq__attemptRow::before{width:30px;}
  .pq__attemptRow{flex-direction:column;}
  .pq__attemptRow .pq__word--attempt{max-width:100%;}
  .pq__attempts{max-width:100%;overflow-x:hidden;}
}


/* --- Completion banner (desktop centered) --- */
.pq-complete-banner{
  margin:16px 0;
  padding:12px 14px;
  border:1px solid #e2e8f0;
  background:rgba(241,245,249,.9);
  border-radius:12px;
  font-weight:800;
}
.pq-complete-banner__sub{
  margin-top:6px;
  font-weight:700;
  font-size:14px;
}
@media (min-width: 769px){
  .pq-complete-banner{
    max-width:780px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}

/* --- Lock overlay after completion --- */
.pq-lock-overlay{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  border-radius:12px;
  z-index:20;
}
.pq-lock-overlay__icon{
  font-size:42px;
  line-height:1;
}
.pq-lock-overlay__text{
  font-weight:900;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:center;
  padding:0 12px;
}

/* --- Slightly bigger mobile keys (tap-friendly) --- */
@media (max-width: 480px){
  .pq__key{
    height:52px;
    line-height:50px;
    min-width:44px;
    padding:0 10px;
    font-size:17px;
    border-radius:12px;
  }
  .pq__kbdRow{gap:6px;}
}


/* v20: mobile keyboard sizing without overflow + share button */
@media (max-width: 520px){
  .pq__kbdWrap{display:block;width:100%;}
  .pq__kbd{display:block;width:100%;box-sizing:border-box; padding:0 10px;}
  /* Centered rows prevent edge clipping on iOS while keeping keys large */
  .pq__kbdRow{justify-content:center;gap:6px;flex-wrap:nowrap;}
  .pq__key{flex:1 1 0;min-width:0;height:44px;line-height:44px;font-size:15px;padding:0 6px;}
  .pq__key--wide{flex:1.35 1 0;}
  .pq__kbdRow--actions{gap:10px; flex-wrap:wrap;}
  .pq__key--action{flex:1 1 100%;min-width:0;height:52px;line-height:52px;font-size:14px;}
}
.pq-complete-banner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;}
.pq-complete-banner__share{border:1px solid #cbd5e1;background:#fff;color:#0f172a;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer;}
.pq-complete-banner__share:active{transform:translateY(1px);} 
@media (min-width: 769px){
  .pq-complete-banner{justify-content:center;}
}

/* Bonus attempts: add clearer spacing between rows/tiles */
#pqb-attempts{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch;
}
#pqb-attempts .pq__attemptRow{
  gap:16px;
  padding-left:40px;
}
#pqb-attempts .pq__attemptRow::before{
  width:32px;
  font-size:12px;
}
#pqb-attempts .pq__word--attempt{
  gap:8px;
}
#pqb-attempts .pq__space--attempt{
  width:16px;
}

/* ---------------- Hamburger menu stacking (mobile + SwipeQuiz) ----------------
   On mobile, SwipeQuiz runs in a fixed, high z-index "app mode" wrapper.
   Ensure the global hamburger panel/overlay always sits above it.
   Uses data attributes from popquest-hamburger.js.
------------------------------------------------------------------------------- */
[data-pq-overlay]{
  position:fixed;
  inset:0;
  z-index:1000000;
}
[data-pq-panel]{
  position:fixed;
  z-index:1000001;
}
[data-pq-burger]{
  position:relative;
  z-index:1000002;
}

/* ---------------- SwipeQuiz: prevent brief 0/0 + 0 flash while loading ----------------
   During initial boot, SwipeQuiz sets body.pqs-ready before questions render.
   The meta row (.pqs-top) can briefly show 0/0 + 0 points, which feels jarring.
   Hide it until play actually begins.
-------------------------------------------------------------------------------------- */
body.pqs-ready:not(.pqs-playing) .pqs-top{
  display:none !important;
}

/* New approach: some pages don't set body.pqs-ready.
   Hide the meta row by default and only show it once the quiz is actually in play
   (or on the end screen). This removes the brief 0/0 flash without affecting gameplay. */
.pqs-top{ display:none !important; }
body.pqs-playing .pqs-top,
.pqs-is-playing .pqs-top,
.pqs-is-done .pqs-top{
  display:flex !important;
}



/* ================================
   Side Quest shortcode tweaks
   - hide name prompt
   - show score only at end (modal)
   ================================ */
.pq-native-embed--sidequest #pq-name-prompt{display:none !important;}
.pq-native-embed--sidequest .pq__card--score{display:none !important;}

/* End-of-game score modal (Side Quest) */
.pq-native-embed--sidequest .pq-sq-scoreModal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);}
.pq-native-embed--sidequest .pq-sq-scoreModal.is-open{display:flex;}
.pq-native-embed--sidequest .pq-sq-scoreModal__panel{width:min(520px,92vw);background:#fff;border:3px solid #000;border-radius:22px;padding:18px 18px 16px;}
.pq-native-embed--sidequest .pq-sq-scoreModal__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.pq-native-embed--sidequest .pq-sq-scoreModal__title{font-family:PQFranklin, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:800;font-size:18px;letter-spacing:.2px;color:#000;}
.pq-native-embed--sidequest .pq-sq-scoreModal__x{appearance:none;border:2px solid #000;background:#fff;color:#000;border-radius:999px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;cursor:pointer;line-height:1;}
.pq-native-embed--sidequest .pq-sq-scoreModal__big{font-family:PQFranklin, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:900;font-size:40px;line-height:1.05;color:#000;margin:2px 0 10px;}
.pq-native-embed--sidequest .pq-sq-scoreModal__meta{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-size:14px;color:#000;display:flex;flex-direction:column;gap:6px;}
.pq-native-embed--sidequest .pq-sq-scoreModal__row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #000;padding-top:6px;}
.pq-native-embed--sidequest .pq-sq-scoreModal__cta{margin-top:12px;display:flex;justify-content:flex-end;}
.pq-native-embed--sidequest .pq-sq-scoreModal__btn{appearance:none;border:3px solid #000;background:#91F88D;color:#000;border-radius:18px;padding:12px 16px;font-family:PQFranklin, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:900;cursor:pointer;}