/* Clickbait: Full Story Theme – Breaking News Yellow headlines, blue accents */
.headlines {
  color: #ffd23f; /* breaking-news yellow headlines */
  font-family: 'clickbait', 'Headline', sans-serif;
}
a:link,
a:visited {
  color: #ffd23f;
}
a:hover {
  color: #ffe27a; /* lighter on hover */
}
/* Game theme selected state — add new .selected selectors here as needed */
.wizardChoice.selected,
.hostVoteBtn.selected {
    background: linear-gradient(135deg, #2a2a2a, #0a223a, #0a3f8a) !important;
    border-top: 0.25vw solid #4aa8ff !important;
    border-left: 0.25vw solid #4aa8ff !important;
    border-right: 0.25vw solid #00264a !important;
    border-bottom: 0.25vw solid #00264a !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, select:active, div.checkboxGroup label:focus, div.checkboxGroup label:active, textarea:focus, input[type="number"], input[type="datetime-local"]:focus {
    border-top: 0.25vw solid #4aa8ff !important;
    border-left: 0.25vw solid #4aa8ff !important;
    border-right: 0.25vw solid #00264a !important;
    border-bottom: 0.25vw solid #00264a !important;
}
@media (min-width: 768px) {
    .wizardChoice.selected,
    .hostVoteBtn.selected {
        border-top-width: 2px !important;
        border-left-width: 2px !important;
        border-right-width: 2px !important;
        border-bottom-width: 2px !important;
    }
    input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, select:active, div.checkboxGroup label:focus, div.checkboxGroup label:active, textarea:focus, input[type="number"], input[type="datetime-local"]:focus {
        border-top-width: 2px !important;
        border-left-width: 2px !important;
        border-right-width: 2px !important;
        border-bottom-width: 2px !important;
    }
}
@keyframes drift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Supporting copy under a headline (voting + reveal cards) ──── */
.votingAnswerExtra, .revealAnswerExtra {
  font-family: 'Open Sans', sans-serif;
  font-size: 3.4vw;
  line-height: 140%;
  font-weight: normal;
  margin: 2vw 0vw 0vw 0vw;
  opacity: 0.88;
}
@media (min-width: 768px) {
  .votingAnswerExtra, .revealAnswerExtra { font-size: 17px; margin: 8px 0px 0px 0px; }
}
@media (min-width: 1140px) {
  .votingAnswerExtra, .revealAnswerExtra { font-size: 18px; }
}

/* Reveal pop-up: headline plus its story as one excerpt. The story sits right under the headline,
   reads at body size, and the card gets breathing room at the bottom (the card itself has no bottom padding). */
#revealSpotlightContent h2.revealAnswerText { margin-bottom: 0vw; }
#revealSpotlightContent .revealAnswerExtra { font-size: 4.4vw; margin: 1.5vw 0vw 0vw 0vw; padding: 0vw 4vw 6vw 4vw; opacity: 0.92; }
@media (min-width: 768px) {
  #revealSpotlightContent .revealAnswerExtra { font-size: 20px; margin: 8px 0px 0px 0px; padding: 0px 16px 24px 16px; }
}
@media (min-width: 1140px) {
  #revealSpotlightContent .revealAnswerExtra { font-size: 22px; }
}

/* Article topic line — plain body-font text so it reads as a subject, not a finished headline */
.cbTopic { font-family: 'Open Sans'; font-size: 4.5vw; font-weight: bold; line-height: 140%; margin: 0vw 0vw 2vw 0vw; }
@media (min-width: 768px) {
    .cbTopic { font-size: 22px; margin: 0px 0px 12px 0px; }
}
@media (min-width: 1140px) {
    .cbTopic { font-size: 24px; }
}