/* ===============================
   POP SIDE QUEST (classic quiz)
   Palette: black / white / #91F88D + result colors
   Scoped to .pq-side-quest so it will NOT affect the Swipe Quiz.
   =============================== */

:root{
  --pq-green:#91F88D;
  --pq-black:#000;
  --pq-white:#fff;
  --pq-red:#e11d48;
  --pq-amber:#f59e0b;
}

/* Side Quest should feel primarily black/white, with green as an accent. */
.pq-side-quest{ color: var(--pq-black); }

/* Ensure classic quiz stays within palette */
.pq-side-quest .pq{
  --pq-accent: var(--pq-green);
  --pq-bg: var(--pq-white);
  --pq-fg: var(--pq-black);
}

/* Default buttons/controls: white with black border (green is an accent, not the fill). */
.pq-side-quest .pq button,
.pq-side-quest .pq .pq__btn,
.pq-side-quest .pq a.pq__btn,
.pq-side-quest .pq .pq__shareBtn{
  background: var(--pq-white) !important;
  color: var(--pq-black) !important;
  border: 2px solid var(--pq-black) !important;
  border-radius: 16px !important;
  font-weight: 800 !important;
}

/* Primary CTAs only (Save / Submit / Share): use green fill. */
.pq-side-quest .pq .pq__btn--primary,
.pq-side-quest .pq .pq__shareBtn,
.pq-side-quest .pq button.pq__btn--primary,
.pq-side-quest .pq button[type="submit"]{
  background: var(--pq-green) !important;
}

/* Auth links: keep them clean (no green pill). */
.pq-side-quest .pq .pq__authLink,
.pq-side-quest .pq a.pq__authLink{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--pq-green);
}

/* On-screen keyboard keys should be white with black text. */
.pq-side-quest .pq .pq__kbd .pq__key,
.pq-side-quest .pq .pq__kbd .pq__kbdKey,
.pq-side-quest .pq .pq__kbd button{
  background: var(--pq-white) !important;
  color: var(--pq-black) !important;
  border: 2px solid var(--pq-black) !important;
}

/* Tiny green accent on active/pressed keys */
.pq-side-quest .pq .pq__kbd .pq__key:active,
.pq-side-quest .pq .pq__kbd .pq__kbdKey:active,
.pq-side-quest .pq .pq__kbd button:active{
  background: var(--pq-green) !important;
}

/* Tiles / input boxes (best-effort selectors) */
.pq-side-quest .pq [class*="tile"],
.pq-side-quest .pq [class*="Tile"],
.pq-side-quest .pq [class*="guess"],
.pq-side-quest .pq [class*="Guess"],
.pq-side-quest .pq .pq__tile,
.pq-side-quest .pq .pq__guess{
  border-color: var(--pq-black) !important;
}

/* Correct / wrong / skipped (common classnames used in earlier builds) */
.pq-side-quest .pq .is-correct,
.pq-side-quest .pq .correct{
  background: var(--pq-green) !important;
  color: var(--pq-black) !important;
}

.pq-side-quest .pq .is-wrong,
.pq-side-quest .pq .wrong,
.pq-side-quest .pq .incorrect{
  background: var(--pq-red) !important;
  color: var(--pq-white) !important;
}

.pq-side-quest .pq .is-skipped,
.pq-side-quest .pq .skipped{
  background: var(--pq-amber) !important;
  color: var(--pq-black) !important;
}

/* === PopQuest Qwerty — Native Embed Safety === */
.pq-native-embed--sidequest, .pq-native-embed--sidequest *{ box-sizing:border-box; }
.pq-native-embed--sidequest{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}
/* Prevent any vw-based full bleed tricks inside embeds */
.pq-native-embed--sidequest .pqs-fullbleed,
.pq-native-embed--sidequest .pq-fullbleed,
.pq-native-embed--sidequest [style*="100vw"]{
  width:100% !important;
  max-width:100% !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}


/* Native embed: played/locked state */
.pq-native-embed--sidequest .pq-played-card{border:2px solid #000;border-radius:22px;padding:18px 16px;background:#fff;max-width:520px;margin:14px auto;}
.pq-native-embed--sidequest .pq-played-title{font-family:PQFranklin, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:800;font-size:20px;letter-spacing:0.02em;color:#000;margin:0 0 6px;}
.pq-native-embed--sidequest .pq-played-sub{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-size:14px;color:#000;margin:0 0 10px;}
.pq-native-embed--sidequest .pq-played-countdown{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:800;font-size:22px;color:#000;}
.pq-native-embed--sidequest .pq-embed-login{border:2px solid #000;border-radius:22px;padding:18px 16px;background:#fff;max-width:520px;margin:14px auto;text-align:center;}
.pq-native-embed--sidequest .pq-embed-login__title{font-family:PQFranklin, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:800;font-size:18px;color:#000;margin-bottom:10px;}
.pq-native-embed--sidequest .pq-embed-login__btn{display:inline-block;padding:12px 18px;border:2px solid #000;border-radius:999px;background:#91F88D;color:#000;text-decoration:none;font-family:PQFranklin, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:800;}

.pq-native-embed--sidequest [id='pq-name-prompt']{display:none !important;}


/* === PopQuest Qwerty — Mobile Embed Tuning === */
@media (max-width: 520px){
  .pq-native-embed--sidequest{ overflow-x:hidden !important; }
  .pq-native-embed--sidequest .pq{ padding: 14px 14px !important; }
  .pq-native-embed--sidequest .pq h1,
  .pq-native-embed--sidequest .pq__h1,
  .pq-native-embed--sidequest .pq__title{
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
  .pq-native-embed--sidequest .pq__sub,
  .pq-native-embed--sidequest .pq__meta,
  .pq-native-embed--sidequest .pq__note{
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .pq-native-embed--sidequest .pq__kbd{ width:100% !important; }
  .pq-native-embed--sidequest .pq__kbdRow{ gap: 6px !important; }
  .pq-native-embed--sidequest .pq__key{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-width: 2px !important;
  }

  .pq-native-embed--sidequest .pq__btn,
  .pq-native-embed--sidequest .pq button.pq__btn{
    padding: 12px 12px !important;
    font-size: 14px !important;
  }

  .pq-native-embed--sidequest .pq__attempts,
  .pq-native-embed--sidequest .pq__attemptsWrap{
    margin-top: 12px !important;
  }
  .pq-native-embed--sidequest .pq__attemptsRow{ gap: 6px !important; }
  .pq-native-embed--sidequest .pq__tile,
  .pq-native-embed--sidequest .pq [class*="tile"],
  .pq-native-embed--sidequest .pq [class*="Tile"]{
    width: 28px !important;
    height: 28px !important;
  }
}
/* === PopQuest Qwerty — Mobile (full-page) === */
@media (max-width: 520px){
  .pq-side-quest{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; }
  .pq-side-quest .pq{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; box-sizing:border-box; padding: 16px 16px 22px !important; }

  /* Stop any inner frames/carousels forcing the layout wider */
  .pq-side-quest .pq__cluesCarousel,
  .pq-side-quest .pq__clueFrame,
  .pq-side-quest .pq__clueInner,
  .pq-side-quest .pq__clueBox,
  .pq-side-quest .pq__clueContent,
  .pq-side-quest .pq__cluesWrap,
  .pq-side-quest .pq__stage{
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* Answer tiles: scale to fit viewport (targeting 5-letter default) */
  .pq-side-quest .pq__answer{ justify-content:center !important; gap:10px !important; }
  .pq-side-quest .pq__char{
    width:clamp(44px, calc((100vw - 48px - 40px)/5), 66px) !important;
    height:clamp(44px, calc((100vw - 48px - 40px)/5), 66px) !important;
    font-size:clamp(18px, 5vw, 26px) !important;
  }

  /* Keyboard: allow wrap, keep keys chunky */
  .pq-side-quest .pq__kbd{ width:100% !important; max-width:100% !important; }
  .pq-side-quest .pq__kbdRow{ flex-wrap:wrap !important; justify-content:center !important; gap:10px !important; }
  .pq-side-quest .pq__kbdKey,
  .pq-side-quest .pq__key{
    width:clamp(34px, calc((100vw - 48px - 9*10px)/10), 46px) !important;
    height:56px !important;
    font-size:clamp(16px, 4.4vw, 22px) !important;
    line-height:1 !important;
  }

  /* Action buttons: stack/wrap if needed */
  .pq-side-quest .pq__actions{ flex-wrap:wrap !important; gap:12px !important; }
  .pq-side-quest .pq__btn{ flex:1 1 46% !important; min-width:150px; }
}


/* iOS device-width fallback (some embeds can ignore viewport width queries) */
@media (max-device-width: 480px) {
  .pq-native-embed--sidequest { padding-left: 16px !important; padding-right: 16px !important; }
  .pq-native-embed--sidequest .pq { padding: 0 !important; }
}


/* =========================
   MOBILE RESPONSIVE OVERRIDES (v2.1.6)
   Fix iOS overflow + keyboard squish without changing desktop look.
   ========================= */
.pq-side-quest, .pq-side-quest * { box-sizing: border-box; }
.pq-side-quest { overflow-x: hidden; }
.pq-side-quest .pq__app,
.pq-side-quest .pq__stage,
.pq-side-quest .pq__wrap { max-width: 100%; overflow-x: hidden; }

@media (max-width: 520px) {
  /* keep the game centred and prevent any accidental viewport overflow */
  .pq-side-quest { padding-left: 0 !important; padding-right: 0 !important; }
  .pq-side-quest .pq__wrap { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  .pq-side-quest .pq__playRow { flex-direction: column !important; align-items: stretch !important; }
  .pq-side-quest .pq__playCol { width: 100% !important; }

  /* CLUES/hero card blocks */
  .pq-side-quest .pq__tiles,
  .pq-side-quest .pq__clues,
  .pq-side-quest .pq__card { max-width: 100% !important; }

  /* Keyboard: make keys fit a 375px-ish screen without wrapping */
  .pq-side-quest .pq__kbd { width: 100% !important; max-width: 100% !important; padding: 10px !important; }
  .pq-side-quest .pq__kbdRow { gap: 4px !important; flex-wrap: nowrap !important; justify-content: center !important; }
  .pq-side-quest .pq__key {
    min-width: 0 !important;
    width: 8vw !important;
    max-width: 34px !important;
    padding: 0 !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
  .pq-side-quest .pq__key--wide {
    width: 11vw !important;
    max-width: 46px !important;
  }

  /* Action buttons: two-up */
  .pq-side-quest .pq__kbdRow--actions {
    display:flex !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
  }
  .pq-side-quest .pq__kbdRow--actions .pq__key--action {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 56px !important;
    height: auto !important;
    line-height: 1.1 !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-radius: 18px !important;
    white-space: nowrap !important;
  }

  /* Guess tiles: keep within viewport */
  .pq-side-quest .pq__guess { max-width: 100% !important; }
  .pq-side-quest .pq__guessRow { gap: 10px !important; }
}


/* ==========================================================
   MOBILE: HARD OVERRIDES (Safari/iOS)
   ----------------------------------------------------------
   Some theme / legacy PQ CSS is more specific and was winning
   on mobile, leaving the keyboard + answer row offset/right.
   These rules intentionally use higher specificity + !important
   to force a clean single-column layout on small screens.
   ========================================================== */

@media (max-width: 768px){
  /* Keep the game panel content sane */
  .pq-side-quest .pq__board{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Centre the answer tiles under the label */
  .pq-side-quest .pq__answer,
  .pq-side-quest .pq__word{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Force play row into a single vertical stack */
  .pq-side-quest .pq__playRow{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* Keyboard block: full width, centred */
  .pq-side-quest .pq__kbdWrap{
    width: 100% !important;
    max-width: none !important;
  }
  .pq-side-quest .pq__kbd{
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }
  .pq-side-quest .pq__kbdKeys{
    width: 100% !important;
  }

  /* Attempts + score cards should be full width */
  .pq-side-quest .pq__card,
  .pq-side-quest .pq__card--attempts,
  .pq-side-quest .pq__card--score{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ==========================================================
   QWERTY MOBILE EDGE-TO-EDGE RESPONSIVE FIX (2026-04-30)
   Fixes iOS/Safari clipping: answer tiles, keyboard rows and
   action buttons now use the full mobile viewport without overflow.
   Scoped to Side Quest only.
   ========================================================== */
@media (max-width: 768px), (max-device-width: 768px), (hover: none) and (pointer: coarse){
  html, body{
    overflow-x: hidden !important;
  }

  .pq-side-quest,
  .pq-native-embed--sidequest{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Edge-to-edge game area on phones, while keeping a tiny safe gutter. */
  .pq-side-quest .pq,
  .pq-native-embed--sidequest .pq{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 8px 10px 18px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    --pq-tile: clamp(44px, 12.4vw, 54px);
    --pq-ans-tile: clamp(44px, 12.4vw, 54px);
    --pq-gap: 6px;
  }

  .pq-side-quest .pq__header,
  .pq-native-embed--sidequest .pq__header{
    margin: 0 0 20px !important;
    padding: 0 !important;
  }

  .pq-side-quest .pq__title,
  .pq-native-embed--sidequest .pq__title{
    font-size: clamp(22px, 6.6vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  .pq-side-quest .pq__board,
  .pq-native-embed--sidequest .pq__board,
  .pq-side-quest .pq__playRow,
  .pq-native-embed--sidequest .pq__playRow{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .pq-side-quest .pq__clues,
  .pq-native-embed--sidequest .pq__clues{
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 22px !important;
    padding: 14px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .pq-side-quest .pq__clueLine,
  .pq-native-embed--sidequest .pq__clueLine{
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
  }

  .pq-side-quest .pq__clueChunk,
  .pq-native-embed--sidequest .pq__clueChunk{
    min-width: 0 !important;
    max-width: 100% !important;
    height: clamp(44px, 12vw, 56px) !important;
    min-height: clamp(44px, 12vw, 56px) !important;
    padding: 0 10px !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .pq-side-quest .pq__label,
  .pq-native-embed--sidequest .pq__label{
    margin: 22px 0 14px !important;
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  /* Answer tiles: never let a long answer force horizontal page scroll. */
  .pq-side-quest .pq__answer,
  .pq-native-embed--sidequest .pq__answer{
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 6px !important;
    margin: 0 0 22px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .pq-side-quest .pq__word,
  .pq-native-embed--sidequest .pq__word{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pq-side-quest .pq__space,
  .pq-native-embed--sidequest .pq__space{
    width: 4px !important;
    min-width: 4px !important;
  }

  .pq-side-quest .pq__char,
  .pq-native-embed--sidequest .pq__char{
    flex: 0 0 var(--pq-ans-tile) !important;
    width: var(--pq-ans-tile) !important;
    height: var(--pq-ans-tile) !important;
    min-width: 0 !important;
    max-width: var(--pq-ans-tile) !important;
    line-height: var(--pq-ans-tile) !important;
    font-size: clamp(22px, 6vw, 30px) !important;
    box-sizing: border-box !important;
  }

  /* Keyboard: full-width, no card padding eating into the rows. */
  .pq-side-quest .pq__kbdWrap,
  .pq-native-embed--sidequest .pq__kbdWrap{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .pq-side-quest .pq__kbd,
  .pq-native-embed--sidequest .pq__kbd{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .pq-side-quest .pq__kbdKeys,
  .pq-native-embed--sidequest .pq__kbdKeys{
    width: 100% !important;
    max-width: 100% !important;
  }

  .pq-side-quest .pq__kbdRow,
  .pq-native-embed--sidequest .pq__kbdRow{
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(3px, 1.15vw, 6px) !important;
    margin: 0 0 8px !important;
    box-sizing: border-box !important;
  }

  .pq-side-quest .pq__key,
  .pq-native-embed--sidequest .pq__key{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: clamp(42px, 11.4vw, 52px) !important;
    min-height: clamp(42px, 11.4vw, 52px) !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: 2px solid #000 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: clamp(14px, 4.2vw, 18px) !important;
    font-weight: 1000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .pq-side-quest .pq__key--wide,
  .pq-native-embed--sidequest .pq__key--wide{
    flex: 1.22 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Action buttons sit side-by-side when there is room, but never clip. */
  .pq-side-quest .pq__kbdRow--actions,
  .pq-native-embed--sidequest .pq__kbdRow--actions{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
  }

  .pq-side-quest .pq__kbdRow--actions .pq__key--action,
  .pq-native-embed--sidequest .pq__kbdRow--actions .pq__key--action{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 10px 8px !important;
    border-radius: 18px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.05 !important;
    font-size: clamp(16px, 4.2vw, 20px) !important;
    letter-spacing: .02em !important;
  }

  .pq-side-quest .pq__key--submit,
  .pq-native-embed--sidequest .pq__key--submit{
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
  }

  .pq-side-quest .pq__card--attempts,
  .pq-native-embed--sidequest .pq__card--attempts{
    margin-top: 22px !important;
  }
}

@media (max-width: 360px), (max-device-width: 360px){
  .pq-side-quest .pq,
  .pq-native-embed--sidequest .pq{
    padding-left: 8px !important;
    padding-right: 8px !important;
    --pq-ans-tile: 40px;
  }
  .pq-side-quest .pq__kbdRow--actions,
  .pq-native-embed--sidequest .pq__kbdRow--actions{
    grid-template-columns: 1fr !important;
  }
}