/* PyQuest — Puzzle */
.puzzle-start-card, .puzzle-card { max-width: 760px; margin: 20px auto 0; padding: clamp(20px, 4vw, 32px); }
.puzzle-start-card { display: grid; justify-items: center; gap: 12px; text-align: center; }
.puzzle-start-card h2 { margin: 0; font: 700 22px var(--display); }
.puzzle-start-card > p { margin: 0; max-width: 520px; color: var(--muted); }
.puzzle-start-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; background: var(--ink); color: var(--yellow); font: 600 17px var(--mono); }
.puzzle-start-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0; }
.puzzle-start-rules span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #f8f9f5; }
.puzzle-xp { font: 600 13px var(--mono); color: var(--blue-d); white-space: nowrap; }
.bilingual-question { display: grid; gap: 2px; margin: 0 0 14px; }
.bilingual-question p { margin: 0; font-size: 16px; }
.bilingual-question b { color: var(--blue); font: 600 12px var(--mono); margin-right: 4px; }
.puzzle-code { min-height: 90px; margin: 0; padding: 18px; overflow: auto; background: var(--code-bg); color: #e5ebf5; border-radius: 8px; font: 14px/1.8 var(--mono); tab-size: 4; white-space: pre; }
.puzzle-code code { font: inherit; }
.puzzle-choice-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.btn-correct, .btn-wrong { min-height: 48px; border: 2px solid; border-radius: 6px; font-size: 15px; font-weight: 600; }
.btn-correct { background: var(--green-l); border-color: var(--green); color: #14583a; }
.btn-correct:hover { background: var(--green); color: #fff; }
.btn-wrong { background: var(--red-l); border-color: var(--red); color: #86261f; }
.btn-wrong:hover { background: var(--red); color: #fff; }
.puzzle-feedback { margin-top: 16px; padding: 14px 16px; border-left: 5px solid; border-radius: 0 8px 8px 0; }
.puzzle-feedback.good { border-color: var(--green); background: var(--green-l); }
.puzzle-feedback.bad { border-color: var(--red); background: var(--red-l); }
.puzzle-feedback > strong { font: 700 17px var(--display); }
.puzzle-feedback > p { margin: 4px 0 10px; font-size: 14px; }
.puzzle-reason { padding: 10px 12px; border-radius: 6px; background: #ffffffb0; font-size: 14px; }
.puzzle-reason p { margin: 6px 0 0; overflow-wrap: anywhere; }
.puzzle-reason p span { color: var(--blue); font: 600 12px var(--mono); }
.puzzle-earned { display: block; margin-top: 8px; font-weight: 700; color: var(--green); }
.puzzle-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 520px) { .puzzle-choice-actions { grid-template-columns: minmax(0, 1fr); } .puzzle-code { padding: 14px; font-size: 12.5px; } .puzzle-actions .btn { width: 100%; } }