/* Shared shell for the 3 game pages: honest, todays-5, spot-the-lie */

body.game-page { background: #0B0B0E; }

.game { max-width: 720px; margin: 0 auto; padding: 140px 24px 100px; }
.game-h { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin: 18px 0 22px; color: var(--ink-1); text-wrap: balance; }
.game-h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink-2); }
.game-lede { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 56px; max-width: 600px; text-wrap: pretty; }
.game-foot { margin-top: 56px; color: var(--ink-3); font-size: 13px; text-align: center; }

/* ============================================================
   Honest Streak
   ============================================================ */
.honest-card { padding: 56px 36px; border: 1px solid var(--line-1); border-radius: 18px; background: linear-gradient(180deg, rgba(77,163,255,0.025), transparent 80%); }
.honest-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 24px; }
.honest-q { font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink-1); margin: 0 0 48px; text-wrap: balance; }
.honest-q-small { font-size: 1.25rem; color: var(--ink-2); margin-bottom: 28px; font-weight: 400; }
.honest-buttons { display: flex; gap: 14px; }
.honest-btn { flex: 1; padding: 18px 24px; border-radius: 14px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-1); font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; transition: border-color 200ms ease, background 200ms ease, transform 200ms ease; }
.honest-btn:hover { border-color: var(--line-3); background: rgba(255,255,255,0.025); transform: translateY(-1px); }
.honest-yes:hover { border-color: rgba(77,163,255,0.35); color: #4DA3FF; }
.honest-reveal { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.125rem, 2.4vw, 1.4rem); line-height: 1.45; color: #EDE8DC; margin: 0; }
.honest-back { margin-top: 36px; padding: 10px 18px; background: transparent; color: var(--ink-3); border: 1px solid var(--line-1); border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; transition: color 200ms ease, border-color 200ms ease; }
.honest-back:hover { color: var(--ink-1); border-color: var(--line-3); }

/* ============================================================
   Today's 5 (quiz)
   ============================================================ */
.quiz-stage { padding: 0; }
.quiz-progress-bar { height: 2px; background: var(--line-1); border-radius: 2px; margin-bottom: 14px; overflow: hidden; }
.quiz-progress-fill { height: 100%; background: #4DA3FF; transition: width 400ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.quiz-counter { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 0 0 28px; }
.quiz-prompt { font-size: clamp(1.4rem, 3.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; margin: 0 0 28px; color: var(--ink-1); text-wrap: balance; }
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt { padding: 18px 22px; border-radius: 14px; border: 1px solid var(--line-1); background: transparent; color: var(--ink-1); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; transition: border-color 200ms ease, background 200ms ease, transform 200ms ease; }
.quiz-opt:hover { border-color: var(--line-3); background: rgba(255,255,255,0.025); transform: translateY(-1px); }
.quiz-opt.correct { border-color: #4ADE80; background: rgba(74,222,128,0.08); }
.quiz-opt.wrong   { border-color: #F87171; background: rgba(248,113,113,0.06); }
.quiz-reveal { margin-top: 32px; padding: 24px; border: 1px solid var(--line-1); border-radius: 14px; background: rgba(77,163,255,0.04); }
.quiz-reveal-line { font-size: 1rem; line-height: 1.55; color: #EDEDED; margin: 0 0 18px; }
.quiz-next { padding: 12px 24px; background: transparent; color: var(--ink-1); border: 1px solid var(--line-2); border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; transition: border-color 200ms ease, background 200ms ease; }
.quiz-next:hover { border-color: var(--line-3); background: rgba(255,255,255,0.025); }
.quiz-finish { padding: 60px 0 0; text-align: center; border-top: 1px solid var(--line-1); margin-top: 60px; }
.quiz-finish-h { font-size: clamp(1.875rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; margin: 16px 0 18px; color: var(--ink-1); }
.quiz-finish-sub { font-style: italic; font-family: var(--font-serif); color: var(--ink-2); font-size: 1.25rem; margin: 0 0 36px; }
.quiz-app { color: #4DA3FF; font-size: 15px; font-weight: 500; }

/* ============================================================
   Spot the Lie
   ============================================================ */
.spot-stage { user-select: none; }
.spot-counter { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 0 0 24px; }
.spot-card { position: relative; min-height: 320px; padding: 44px 36px; background: linear-gradient(180deg, #1A1A22, #15151A); border: 1px solid var(--line-2); border-radius: 22px; display: flex; align-items: center; justify-content: center; cursor: grab; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6); }
.spot-card:active { cursor: grabbing; }
.spot-card-text { font-size: clamp(1.4rem, 3.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.018em; line-height: 1.4; color: var(--ink-1); margin: 0; text-align: center; text-wrap: balance; }
.spot-card-stamp { position: absolute; top: 24px; padding: 8px 18px; border: 2px solid; border-radius: 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; opacity: 0; transition: opacity 120ms ease; pointer-events: none; }
.spot-stamp-lie { left: 24px; color: #F87171; border-color: #F87171; transform: rotate(-12deg); }
.spot-stamp-truth { right: 24px; color: #4ADE80; border-color: #4ADE80; transform: rotate(12deg); }
.spot-buttons { display: flex; gap: 14px; margin-top: 24px; }
.spot-btn { flex: 1; padding: 16px 22px; border-radius: 14px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-1); font: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: border-color 200ms ease, background 200ms ease; }
.spot-btn:hover { border-color: var(--line-3); background: rgba(255,255,255,0.025); }
.spot-lie:hover   { border-color: #F87171; color: #F87171; background: rgba(248,113,113,0.04); }
.spot-truth:hover { border-color: #4ADE80; color: #4ADE80; background: rgba(74,222,128,0.04); }

.spot-review { padding: 0; }
.spot-review-h { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.025em; margin: 18px 0 36px; color: var(--ink-1); text-wrap: balance; }
.spot-review-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.spot-review-item { padding: 22px 24px; border: 1px solid var(--line-1); border-radius: 14px; background: rgba(255,255,255,0.012); }
.spot-review-card { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.spot-review-tag { font-size: 11px; letter-spacing: 0.16em; font-weight: 700; padding: 3px 10px; border-radius: 4px; }
.spot-tag-lie { color: #F87171; background: rgba(248,113,113,0.10); }
.spot-tag-truth { color: #4ADE80; background: rgba(74,222,128,0.10); }
.spot-correct { color: #4ADE80; font-size: 18px; }
.spot-wrong { color: #F87171; font-size: 18px; }
.spot-review-text { font-style: italic; color: var(--ink-1); margin: 0 0 8px; line-height: 1.45; font-size: 1rem; }
.spot-review-why { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.spot-review-cta { display: inline-flex; gap: 12px; margin-top: 36px; align-items: center; flex-wrap: wrap; }
.spot-again { padding: 14px 24px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-1); font: inherit; font-size: 14px; cursor: pointer; transition: border-color 200ms ease, background 200ms ease; }
.spot-again:hover { border-color: var(--line-3); background: rgba(255,255,255,0.025); }
.spot-app { color: #4DA3FF; font-size: 14px; padding: 14px 18px; }