/* The lesson pages: plain, readable, printable. Same colours and font as the game. */
@font-face { font-family: 'Baloo Bhaijaan 2'; src: url('/fonts/baloo-bhaijaan-2-latin.woff2') format('woff2'); font-weight: 400 800; unicode-range: U+0000-00FF, U+2010-201F; }
@font-face { font-family: 'Baloo Bhaijaan 2'; src: url('/fonts/baloo-bhaijaan-2-arabic.woff2') format('woff2'); font-weight: 400 800; }
:root { --ink: #0b0f2e; --panel: #141a4a; --sun: #ffd23f; --volt: #20c4e8; --candy: #ff5fa2; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at top, #1d2a7a 0%, var(--ink) 60%) fixed; color: #fff; font: 18px/1.7 'Baloo Bhaijaan 2', system-ui, sans-serif; }
header { display: flex; justify-content: space-between; align-items: center; max-width: 820px; margin: 0 auto; padding: 16px; }
.brand { font-weight: 800; font-size: 24px; letter-spacing: 1px; text-decoration: none; background: linear-gradient(90deg, #5fe3ff, var(--sun), var(--candy)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lang { color: #fff; opacity: .75; font-weight: 700; }
main { max-width: 820px; margin: 0 auto; padding: 8px 16px 48px; }
h1 { font-size: 34px; line-height: 1.25; margin: 8px 0; }
h2 { font-size: 22px; margin: 28px 0 8px; color: var(--sun); }
a { color: var(--volt); }
.dek { font-size: 20px; opacity: .85; }
.meta, .crumb, .need { opacity: .7; font-size: 16px; }
.need { background: rgb(255 255 255 / .06); border-radius: 14px; padding: 10px 14px; opacity: .85; }
ul, ol { padding-inline-start: 22px; }
.steps li { margin: 8px 0; }
.steps b { color: var(--sun); margin-inline-end: 6px; }
.words span { display: inline-block; background: rgb(255 255 255 / .1); border-radius: 999px; padding: 2px 12px; margin: 0 0 6px 6px; }
.list { list-style: none; padding: 0; }
.list a { display: block; background: rgb(255 255 255 / .06); border-radius: 18px; padding: 14px 16px; margin: 10px 0; color: #fff; text-decoration: none; }
.list a:hover { background: rgb(255 255 255 / .11); }
.list b { display: block; font-size: 20px; }
.list span { display: block; opacity: .75; }
.list em { font-style: normal; font-size: 14px; color: var(--sun); }
.cta { margin-top: 36px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 10px 18px; border-radius: 14px; background: rgb(255 255 255 / .12); color: #fff; font-weight: 800; text-decoration: none; }
.btn.sun { background: var(--sun); color: #3b2a00; }
@media print { body { background: #fff; color: #000; } .cta, header .lang { display: none; } h2 { color: #000; } }