body[data-page^="riddle"] h1,
body[data-page^="riddle"] h2,
body[data-page^="riddle"] h3 { color: #264f46; }

.riddle-home-promo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 32px; margin-top: 38px; padding: 38px 45px; border: 2px solid #d7e5d4; border-radius: 30px; background: linear-gradient(115deg, #f1f9e9, #fff9ea); box-shadow: 0 12px 26px #365b3b16; }
.riddle-home-promo h2 { margin: 7px 0 13px; color: #295248; font-size: clamp(28px, 3.5vw, 41px); line-height: 1.08; }
.riddle-home-promo p { max-width: 640px; margin: 0 0 22px; color: #53645a; font-size: 16px; line-height: 1.65; }
.riddle-home-promo__art { position: relative; display: grid; min-height: 215px; place-items: center; }
.riddle-home-promo__art span, .riddle-home-promo__art img { position: absolute; width: 155px; height: 155px; border: 6px solid #fff; border-radius: 30px; box-shadow: 0 12px 17px #38503b28; }
.riddle-home-promo__art span { display: grid; place-items: center; background: #81b994; color: #fff; font-family: Georgia, serif; font-size: 115px; transform: translate(-35px, -18px) rotate(-10deg); }
.riddle-home-promo__art img { padding: 6px; background: #fffdf6; object-fit: contain; transform: translate(52px, 24px) rotate(10deg); }

.riddle-hero, .riddle-category-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: 34px; margin-top: 24px; padding: clamp(26px, 4vw, 48px); border: 2px solid #d8e7d6; border-radius: 32px; background: linear-gradient(135deg, #f8fff0, #e9f4ee 67%, #fff7e9); box-shadow: 0 13px 30px #39654818; }
.riddle-hero h1, .riddle-category-hero h1 { margin: 8px 0 15px; font-size: clamp(38px, 5vw, 62px); line-height: 1.02; letter-spacing: -.04em; }
.riddle-hero p, .riddle-category-hero p { max-width: 690px; margin: 0; color: #506157; font-size: clamp(16px, 1.65vw, 19px); line-height: 1.62; }
.riddle-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 25px; }
.riddle-hero__actions > span { color: #617268; font-size: 13px; font-weight: 800; }
.riddle-hero__sample { min-width: 0; padding: 19px; border: 2px solid #e3d8bc; border-radius: 27px; background: #fffcf2; box-shadow: 0 12px 23px #33513b18; transform: rotate(2deg); }
.riddle-sample__question span { color: #8f7e4f; font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.riddle-sample__question p { margin: 8px 0 14px; color: #36524b; font-size: 16px; font-weight: 800; line-height: 1.48; }
.riddle-intro { margin-top: 22px; }
.riddle-intro p { max-width: 850px; padding: 0 4px; color: #576158; font-size: 16px; line-height: 1.7; }
.riddle-topics, .riddle-how, .riddle-next, .riddle-related { margin-top: 56px; margin-bottom: 56px; }
.riddle-topics__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-top: 24px; }
.riddle-topics__grid .riddle-topic[hidden] { display: none; }
.riddle-age-picker { margin-top: 28px; padding: 24px 28px; border: 2px solid #dce7d7; border-radius: 25px; background: #f3f9ef; }
.riddle-age-picker h3 { margin: 5px 0 9px; font-size: clamp(22px, 3vw, 28px); }
.riddle-age-picker > div:first-child p { max-width: 850px; margin: 0; color: #53665a; font-size: 14px; line-height: 1.6; }
.riddle-age-picker__controls { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.riddle-age-picker__controls button { min-height: 44px; padding: 8px 15px; border: 2px solid #c7dcc8; border-radius: 999px; background: #fffdf7; color: #315849; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.riddle-age-picker__controls button:hover, .riddle-age-picker__controls button:focus-visible { border-color: #53936a; outline-color: #eeb646; }
.riddle-age-picker__controls button.is-active { border-color: #4d9567; background: #4d9567; color: #fff; }
.riddle-age-picker__count { margin: 14px 0 0; color: #657467; font-size: 12px; font-weight: 800; }
.riddle-topic { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 2px solid #e5dbc5; border-radius: 25px; background: #fffdf6; box-shadow: 0 7px 0 #e8ddc7, 0 14px 24px #715f3a17; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.riddle-topic:hover, .riddle-topic:focus-visible { transform: translateY(-4px); border-color: var(--riddle-accent); box-shadow: 0 11px 0 #e8ddc7, 0 18px 28px #715f3a1f; }
.riddle-topic__art { display: grid; height: 164px; place-items: center; background: radial-gradient(circle at 50% 45%, #fffdf5 0 26%, color-mix(in srgb, var(--riddle-accent) 24%, white) 100%); }
.riddle-topic__art img { width: 138px; height: 138px; object-fit: contain; filter: drop-shadow(0 9px 8px #334d391d); }
.riddle-topic__body { display: flex; min-height: 210px; flex: 1; flex-direction: column; padding: 17px 17px 20px; }
.riddle-topic__body small { color: #817567; font-size: 11px; font-weight: 900; }
.riddle-topic__body strong { margin: 7px 0; color: #284e45; font-size: 21px; line-height: 1.15; }
.riddle-topic__body > span { color: #6a655d; font-size: 12px; line-height: 1.52; }
.riddle-topic__body b { margin-top: auto; padding-top: 14px; color: #387b64; font-size: 12px; }
.riddle-how { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; padding: 34px; border: 2px solid #e3d9c3; border-radius: 28px; background: #fffdf6; }
.riddle-how h2 { margin: 7px 0; font-size: 33px; }
.riddle-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.riddle-how li { position: relative; padding: 48px 16px 18px; border-radius: 19px; background: #f0f6ed; counter-increment: step; }
.riddle-how li::before { position: absolute; top: 12px; left: 16px; display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #559a68; color: #fff; content: counter(step); font-size: 13px; font-weight: 900; }
.riddle-how li b, .riddle-how li span { display: block; }.riddle-how li b { color: #2f5549; font-size: 15px; }.riddle-how li span { margin-top: 6px; color: #617065; font-size: 12px; line-height: 1.55; }
.riddle-next { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 28px; border: 2px solid #dce6d5; border-radius: 26px; background: #eaf4e7; }
.riddle-next h2 { margin: 0 0 8px; font-size: 26px; }.riddle-next p { margin: 0; color: #526a5b; line-height: 1.5; }
.riddle-category-hero { grid-template-columns: minmax(0, 1fr) 250px; background: linear-gradient(130deg, #fffdf6, color-mix(in srgb, var(--riddle-accent) 18%, white)); }
.riddle-category-hero img { width: 240px; height: 240px; margin: auto; object-fit: contain; filter: drop-shadow(0 11px 13px #35463128); }
.riddle-category-hero__meta { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 23px; }
.riddle-category-hero__meta span { padding: 8px 13px; border-radius: 999px; background: #fffdf3; color: #375949; font-size: 12px; font-weight: 900; }
.riddle-guide { margin-top: 25px; padding: 20px 24px; border-left: 5px solid #dc9b78; border-radius: 0 19px 19px 0; background: #fffdf6; }
.riddle-guide p { margin: 7px 0 0; color: #53645a; font-size: 15px; line-height: 1.65; }
.riddle-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.riddle-card { display: flex; min-width: 0; flex-direction: column; padding: 23px; border: 2px solid #e2dac6; border-radius: 27px; background: #fffdf7; box-shadow: 0 7px 0 #e8ddc7, 0 12px 22px #65543713; }
.riddle-card__number { color: #a27d4f; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.riddle-card__clue { min-height: 80px; margin: 10px 0 20px; color: #314f45; font-size: 19px; font-weight: 800; line-height: 1.55; white-space: pre-line; }
.riddle-answer { display: block; width: 100%; min-height: 188px; margin-top: auto; padding: 0; overflow: hidden; border: 2px solid #cee4d2; border-radius: 21px; background: #eff8ed; box-shadow: inset 0 2px 8px #51846514; perspective: 900px; text-align: center; }
.riddle-answer:hover { border-color: #62aa7a; }.riddle-answer:focus-visible { outline: 4px solid #eeb646; outline-offset: 3px; }
.riddle-flip { position: relative; display: block; width: 100%; height: 184px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.riddle-answer.is-revealed .riddle-flip { transform: rotateY(180deg); }
.riddle-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.riddle-face--front { background: radial-gradient(circle at 50% 30%, #fffdf5, #e7f4e4 78%); }
.riddle-question-art { position: relative; display: grid; width: 96px; height: 96px; place-items: center; border: 4px solid #fff; border-radius: 29px; background: #79b691; box-shadow: 0 8px 0 #4b8f68, 0 13px 18px #315e4228; transform: rotate(-7deg); }
.riddle-question-art::after { position: absolute; right: -16px; bottom: -12px; width: 27px; height: 27px; border: 4px solid #fff; border-radius: 50%; background: #e8aa48; content: ''; }
.riddle-question-art i { color: #fff; font-family: Georgia, serif; font-size: 68px; font-style: normal; line-height: 1; text-shadow: 0 3px #4d9a68; }
.riddle-face small { margin-top: 13px; color: #5f7a66; font-size: 12px; font-weight: 900; }
.riddle-face--back { transform: rotateY(180deg); background: radial-gradient(circle at 50% 40%, #fffefa, #f0f8e9); }
.riddle-face--back img { width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 6px 5px #3a6b4926); }
.riddle-face--back strong { margin-top: 4px; color: #244e3e; font-size: 21px; }.riddle-face--back small { margin-top: 4px; font-size: 11px; }
.riddle-related .section-heading { margin-bottom: 18px; }.riddle-related .section-heading > a { color: #387b64; font-size: 13px; font-weight: 900; }
.riddle-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.riddle-related .riddle-topic__art { height: 120px; }.riddle-related .riddle-topic__art img { width: 100px; height: 100px; }.riddle-related .riddle-topic__body { min-height: 160px; }
.riddle-hero__sample .riddle-answer { margin-top: 0; }

@media (max-width: 900px) { .riddle-hero { grid-template-columns: minmax(0,1fr) 300px; }.riddle-topics__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.riddle-how { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .riddle-home-promo { grid-template-columns: 1fr; padding: 29px 25px; }.riddle-home-promo__art { min-height: 190px; }.riddle-hero, .riddle-category-hero { grid-template-columns: 1fr; gap: 22px; }.riddle-hero__sample { transform: none; }.riddle-category-hero img { width: 180px; height: 180px; }.riddle-list { grid-template-columns: 1fr; }.riddle-related__grid { grid-template-columns: 1fr 1fr; }.riddle-next { align-items: flex-start; flex-direction: column; } }
@media (max-width: 480px) { .riddle-hero, .riddle-category-hero { padding: 24px 20px; border-radius: 25px; }.riddle-hero h1, .riddle-category-hero h1 { font-size: 39px; }.riddle-hero p, .riddle-category-hero p { font-size: 16px; }.riddle-topics, .riddle-how, .riddle-next, .riddle-related { margin-top: 42px; margin-bottom: 42px; }.riddle-age-picker { padding: 21px 17px; }.riddle-age-picker__controls button { flex: 1 1 72px; }.riddle-topics__grid, .riddle-related__grid { grid-template-columns: 1fr; }.riddle-topic { flex-direction: row; min-height: 150px; }.riddle-topic__art { flex: 0 0 125px; height: auto; min-height: 150px; }.riddle-topic__art img { width: 102px; height: 102px; }.riddle-topic__body, .riddle-related .riddle-topic__body { min-height: 0; padding: 15px 13px; }.riddle-topic__body strong { font-size: 18px; }.riddle-topic__body > span { display: none; }.riddle-how { padding: 25px 20px; }.riddle-how ol { grid-template-columns: 1fr; }.riddle-how li { min-height: 104px; }.riddle-card { padding: 18px; }.riddle-card__clue { min-height: 0; font-size: 17px; }.riddle-answer { min-height: 174px; }.riddle-flip { height: 170px; } }
@media (prefers-reduced-motion: reduce) { .riddle-flip, .riddle-topic { transition: none; } }