/* =========================================
   PopQuest Side Quest — Mobile-First QWERTY UI
   Scope: only the Side Quest native embed/teaser markup
   Goals:
   - No horizontal scroll
   - 2x2 clue grid on phones
   - Keyboard fits every device width
   - Sexy pill/card aesthetic consistent with PopQuest
   ========================================= */

.pq-native-embed--sidequest,
.pq-native-embed--sidequest * { box-sizing: border-box; }

.pq-native-embed--sidequest { width:100%; max-width:100%; overflow-x:clip; }

/* Base card */
.pq-native-embed--sidequest .pqs-wrap{
  width:100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 22px;
  border: 2px solid #000;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  position: relative;
}

/* Title / sub */
.pq-native-embed--sidequest .pqs-title{
  font-weight: 1000;
  letter-spacing: -0.4px;
  font-size: clamp(26px, 6.2vw, 42px);
  line-height: 1.05;
  margin: 0;
}
.pq-native-embed--sidequest .pqs-sub{
  margin-top: 8px;
  font-size: 14px;
  font-weight: 800;
  opacity: .78;
}

/* Labels */
.pq-native-embed--sidequest .pqs-clues__label,
.pq-native-embed--sidequest .pqs-guess__label{
  margin-top: 14px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .6px;
  text-transform: uppercase;
  opacity: .85;
}

/* Clues box: 2x2 chips on mobile; 4 across on wider */
.pq-native-embed--sidequest .pqs-clues__box{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 560px){
  .pq-native-embed--sidequest .pqs-clues__box{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.pq-native-embed--sidequest .pqs-clues__box > * ,
.pq-native-embed--sidequest .pqs-clues__box:empty::before{
  content: attr(data-pq-placeholder);
}
.pq-native-embed--sidequest .pqs-clues__box:empty{
  min-height: 0;
}

/* For teaser, render “chips” using the dots as placeholders */
.pq-native-embed--sidequest .pqs-dots{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pq-native-embed--sidequest .pqs-dots span{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  border: 2px solid #000;
  background: #91F88D;
  height: 54px;
  min-width: 0;
}
@media (max-width: 380px){
  .pq-native-embed--sidequest .pqs-dots span{ height: 50px; border-radius: 14px; }
}

/* Guess row */
.pq-native-embed--sidequest .pqs-guess__boxes{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.pq-native-embed--sidequest .pqs-guess__boxes span{
  height: 56px;
  border-radius: 16px;
  border: 2px solid rgba(0,0,0,.22);
  background:#fff;
  min-width:0;
}
@media (max-width: 380px){
  .pq-native-embed--sidequest .pqs-guess__boxes span{ height: 52px; border-radius: 14px; }
}

/* Keyboard: always fits, no fixed widths */
.pq-native-embed--sidequest .pqs-keys{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  width:100%;
}
.pq-native-embed--sidequest .pqs-keys__row{
  display:flex;
  gap: 6px;
  width:100%;
}
.pq-native-embed--sidequest .pqs-keys__row span{
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,.20);
  background:#f6f7fb;
  font-weight: 1000;
  font-size: 15px;
  color:#000;
}
@media (max-width: 380px){
  .pq-native-embed--sidequest .pqs-keys__row span{ height: 42px; font-size: 14px; border-radius: 12px; }
}

/* Actions */
.pq-native-embed--sidequest .pqs-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items: stretch;
}
.pq-native-embed--sidequest .pqs-btn{
  flex: 1 1 0;
  border-radius: 999px;
  border: 2px solid #000;
  background:#fff;
  color:#000;
  font-weight: 1000;
  padding: 12px 14px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Ensure action buttons never get clipped */
.pq-native-embed--sidequest{ overflow: visible; }
.pq-native-embed--sidequest .pqs-wrap{ overflow: visible; }

/* Locked overlay gets nicer spacing on mobile */
.pq-native-embed--sidequest .pq-embed-locked__overlay{
  padding: 14px;
}



/* === QWERTY landing full-bleed fix (only when inside Game Landing Template) === */
body .pq-glBleed--qwerty .pq-native-embed--sidequest .pqs-wrap{
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
}



/* === Bigger QWERTY keyboard (mobile enhancement) === */
@media (max-width: 768px){

  .pq-native-embed--sidequest .pqs-keys__row{
    gap: 8px;
  }

  .pq-native-embed--sidequest .pqs-key{
    height: 56px;
    min-height: 56px;
    font-size: 18px;
    border-radius: 14px;
  }

  .pq-native-embed--sidequest .pqs-key--wide{
    min-width: 64px;
  }

}



/* === Reveal Next Clue: dopamine tuning (mobile) === */
@media (max-width: 768px){

  /* Rebalance vertical rhythm after bigger keys */
  .pq-native-embed--sidequest .pqs-guess{ margin-bottom: 14px; }
  .pq-native-embed--sidequest .pqs-keys{ margin-top: 10px; }
  .pq-native-embed--sidequest .pqs-reveal{ margin-top: 16px; }

  /* Make the Reveal CTA feel “rewardy” without breaking B/W brand */
  .pq-native-embed--sidequest .pqs-reveal{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 2px solid #000;
    background: #fff;
    color: #000;
    font-weight: 1000;
    letter-spacing: -0.01em;
    text-transform: none;
    box-shadow: 0 10px 0 rgba(0,0,0,.14);
    transform: translateY(0);
    transition: transform .08s ease, box-shadow .08s ease, filter .18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* Press feels juicy */
  .pq-native-embed--sidequest .pqs-reveal:active{
    transform: translateY(2px);
    box-shadow: 0 6px 0 rgba(0,0,0,.14);
  }

  /* Subtle “it’s ready” pulse when enabled */
  .pq-native-embed--sidequest .pqs-reveal:not([disabled]):not(.is-disabled){
    animation: pqRevealPulse 1.6s ease-in-out infinite;
  }

  /* If the plugin marks disabled via [disabled] or .is-disabled, calm it down */
  .pq-native-embed--sidequest .pqs-reveal[disabled],
  .pq-native-embed--sidequest .pqs-reveal.is-disabled{
    opacity: .55;
    box-shadow: none;
    animation: none;
  }

  /* Optional: add a tiny “spark” dot via ::after (no markup changes) */
  .pq-native-embed--sidequest .pqs-reveal:not([disabled]):not(.is-disabled)::after{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #91F88D;
    margin-left: 10px;
    box-shadow: 0 0 10px rgba(145,248,141,.65);
    flex: 0 0 auto;
  }
}

@keyframes pqRevealPulse{
  0%, 100% { filter: drop-shadow(0 0 0 rgba(145,248,141,0)); }
  50%      { filter: drop-shadow(0 0 10px rgba(145,248,141,.45)); }
}

/* === v67 QWERTY archive/fullscreen repair === */
html.pq-qwerty-playing-html,
body.pq-qwerty-playing{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
body.pq-qwerty-playing .pq-side-quest[data-pq-fullscreen-active="1"]{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(10px,2vw,22px) !important;
  box-sizing:border-box !important;
  background:#fff !important;
  overflow:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.pq-qwerty-playing .pq-side-quest[data-pq-fullscreen-active="1"] .pq{
  width:min(1500px,100%) !important;
  max-width:none !important;
  margin:0 auto !important;
}
body.pq-qwerty-playing .pq-side-quest[data-pq-fullscreen-active="1"] .pq__header,
body.pq-qwerty-playing .pq-side-quest[data-pq-fullscreen-active="1"] .pq__welcomeTop{
  display:none !important;
}
body.pq-qwerty-playing .pq-side-quest[data-pq-fullscreen-active="1"] .pq__game,
body.pq-qwerty-playing .pq-side-quest[data-pq-fullscreen-active="1"] .pq__quiz{
  margin:0 !important;
  max-width:none !important;
}
@media (orientation:landscape) and (max-width: 950px){
  body.pq-qwerty-playing .pq-side-quest[data-pq-fullscreen-active="1"]{
    padding:8px env(safe-area-inset-right) 8px env(safe-area-inset-left) !important;
  }
  body.pq-qwerty-playing .pq-side-quest[data-pq-fullscreen-active="1"] .pq{
    transform-origin:center center;
  }
}
.pqQwertyArchiveMain .pqQwertyArchive--hub{padding-top:clamp(24px,4vw,58px)}
.pqQwertyArchiveGrid .pqDailyArchiveCard h2{font-size:clamp(32px,3.2vw,54px)!important;line-height:.9!important;letter-spacing:-.06em!important}
.pqQwertyArchiveGrid .pqDailyArchiveCard{overflow:hidden!important}