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