/* Bookflix — Courses (Block K, round 2). Jost for the interface, EB Garamond for everything meant to be read.
   Tokens: ink #111 · muted #6b6b6b · hairline #E4E1DC · paper #F3EEE6 (practice) · blush #F6E4E8 · accent #B8405F / #8E2F4A. */
:root { --crs-ink: #111; --crs-muted: #6b6b6b; --crs-muted2: #77726b; --crs-hair: #E4E1DC; --crs-paper: #F3EEE6; --crs-blush: #F6E4E8;
        --crs-accent: #B8405F; --crs-accent-ink: #8E2F4A; --crs-serif: "eb-garamond", "EB Garamond", Georgia, serif; }
body.crs-page { color: var(--crs-ink); }
body.crs-paper { background: var(--crs-paper); }
body.crs-paper .site-head { background: #fff; }
body.crs-page main.wrap { max-width: 1180px; padding-top: 40px; }
body.crs-paper main.wrap { max-width: none; padding: 0 0 80px; }

/* ---------- shared type & bits ---------- */
.crs-serif { font-family: var(--crs-serif); font-size: 21px; line-height: 1.55; }
.crs-serif-i { font-family: var(--crs-serif); font-style: italic; font-size: 21px; line-height: 1.45; }
.crs-cap { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--crs-muted); font-family: 'Jost', sans-serif; font-style: normal; }
.crs-muted { color: var(--crs-muted); }
.crs-crumbs { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crs-muted); margin: 0 0 18px; }
.crs-crumbs a { color: var(--crs-muted); }
.crs-h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; }
.crs-h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 500; line-height: 1; margin: 0; }
.crs-h1-serif { font-family: var(--crs-serif); font-weight: 500; font-size: clamp(46px, 7vw, 76px); line-height: 1; letter-spacing: -0.01em; margin: 10px 0 24px; }
.crs-h2-serif { font-family: var(--crs-serif); font-weight: 500; font-size: clamp(30px, 4vw, 44px); line-height: 1; margin: 0; }
.crs-rule { border: 0; border-top: 1px solid var(--crs-ink); margin: 36px 0 48px; }
.crs-pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 24px; }
.crs-lead { max-width: 470px; margin: 0; }
.crs-toast { border: 1px solid var(--crs-ink); display: inline-block; padding: 6px 14px; font-size: 14px; margin: 0 0 18px; background: #fff; }
.crs-err { color: var(--crs-accent-ink); margin: 12px 0 0; }
.crs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--crs-ink); background: #fff; color: var(--crs-ink);
  font: inherit; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-decoration: none; box-sizing: border-box; transition: background .12s, color .12s; }
.crs-btn:hover { background: var(--crs-ink); color: #fff; text-decoration: none; }
.crs-btn-solid { background: var(--crs-ink); color: #fff; }
.crs-btn-solid:hover { background: #fff; color: var(--crs-ink); }
.crs-btn-sm { min-height: 44px; padding: 0 18px; font-size: 13px; }
.crs-btn-wide { width: 100%; margin-top: 14px; }
.crs-textlink { font-size: 16px; color: var(--crs-ink); text-decoration: underline; text-underline-offset: 5px; }
.crs-linkbtn { border: 0; background: none; font: inherit; cursor: pointer; padding: 0; }
.crs-textlink.is-light { color: #fff; }
.crs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.crs-bar { height: 4px; background: #E9E6E1; position: relative; }
.crs-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--crs-ink); }
.crs-bar-thin { height: 3px; background: #ECE7DF; }
.crs-bar-caps { display: flex; justify-content: space-between; margin-top: 8px; }
.crs-progress { max-width: 600px; margin: 8px 0 14px; }
.crs-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--crs-hair); border-bottom: 1px solid var(--crs-hair); padding: 22px 0; max-width: 600px; }
.crs-figs > div { display: flex; flex-direction: column; gap: 6px; }
.crs-figs b { font-family: var(--crs-serif); font-weight: 400; font-size: 44px; line-height: 1; }
img.is-grey { filter: grayscale(1) brightness(1.08) contrast(0.85) opacity(0.6); }
.crs-tag { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crs-accent-ink); background: var(--crs-blush); padding: 4px 9px; font-family: 'Jost', sans-serif; }
.crs-check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: #444; min-height: 44px; cursor: pointer; }
.crs-check input { width: 18px; height: 18px; accent-color: var(--crs-ink); margin: 0; }

/* ---------- the catalogue ---------- */
.crs-feature { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.crs-card.is-feature { display: contents; }
.crs-card-art { flex: 1 1 360px; max-width: 470px; min-height: 540px; background: var(--crs-blush); display: flex; align-items: flex-end; justify-content: center; padding: 56px 44px 0; box-sizing: border-box; position: relative; overflow: hidden; }
.crs-card-art img, .crs-hero-art img { width: 100%; max-width: 360px; display: block; transition: opacity .25s; }
.crs-card-art .crs-art-b, .crs-hero-art .crs-art-b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); opacity: 0; width: calc(100% - 88px); }
.crs-card-art:hover .crs-art-b, .crs-card-art.is-done .crs-art-b, .crs-hero-art:hover .crs-art-b, .crs-hero-art.is-done .crs-art-b { opacity: 1; }
.crs-card-art:hover .crs-art-a, .crs-card-art.is-done .crs-art-a, .crs-hero-art:hover .crs-art-a, .crs-hero-art.is-done .crs-art-a { opacity: 0; }
.crs-card-no { position: absolute; top: 20px; left: 22px; color: #7a3a4c; }
.crs-card-body { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.crs-card-title { text-decoration: none; }
.crs-card-title h2 { margin: 0; font-size: clamp(34px, 4.5vw, 52px); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; }
.crs-card-dek { color: var(--crs-muted); margin: -6px 0 0; font-size: 24px; }
.crs-card-intro p { margin: 0 0 10px; max-width: 600px; }
.crs-minibadges { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.crs-minibadges img { height: 46px; width: auto; max-width: 44px; object-fit: contain; }
.crs-minibadges span { font-size: 14px; color: var(--crs-muted); margin-left: 6px; }
.crs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 32px; }
.crs-grid .crs-card-art { min-height: 360px; padding: 40px 32px 0; }
.crs-grid .crs-card-body { padding-top: 16px; gap: 12px; }
.crs-next-course { margin-top: 96px; border-top: 1px solid var(--crs-hair); padding-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.crs-next-course .crs-serif-i { font-size: 22px; color: #444; }

/* ---------- the course page ---------- */
.crs-hero { display: flex; flex-wrap: wrap; gap: 56px; margin-top: 10px; align-items: flex-start; }
.crs-hero-art { flex: 1 1 320px; max-width: 420px; min-height: 500px; background: var(--crs-blush); display: flex; align-items: flex-end; justify-content: center; padding: 48px 36px 0; box-sizing: border-box; position: relative; overflow: hidden; }
.crs-hero-art img { max-width: 330px; }
.crs-hero-art .crs-art-b { width: calc(100% - 72px); }
.crs-hero-meta { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.crs-hero-intro p { margin: 0 0 12px; max-width: 640px; }
.crs-hero-intro p:last-child { color: #444; }
.crs-price { font-size: 20px; margin: 4px 0 0; }
.crs-claim { border: 1px solid var(--crs-ink); padding: 18px 22px; margin: 32px 0 0; max-width: 720px; background: #fff; }
.crs-claim p { margin: 0 0 12px; }
.crs-part { border-top: 1px solid var(--crs-ink); margin-top: 64px; padding-top: 36px; }
.crs-part-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.crs-part-head .crs-cap { margin: 0 0 10px; }
.crs-part-dek { color: #444; margin: 10px 0 0; max-width: 520px; font-size: 20px; }
.crs-part-tools { display: flex; align-items: center; gap: 20px; }
.crs-part-count { display: inline-flex; align-items: center; gap: 8px; color: var(--crs-ink); font-size: 14px; }
[data-theory="closed"] [data-when="open"], [data-theory="open"] [data-when="closed"] { display: none; }
.crs-theory-line { margin: 28px 0 0; font-size: 20px; line-height: 1.7; color: var(--crs-muted2); max-width: 980px; }
.crs-theory-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.crs-theory-list li a, .crs-theory-list li > span { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid #ECE9E4; text-decoration: none; color: var(--crs-ink); }
.crs-theory-list li a:hover .crs-theory-t { text-decoration: underline; text-underline-offset: 4px; }
.crs-theory-list li.is-next .crs-theory-t { font-weight: 500; }
.crs-theory-n { font-size: 13px; letter-spacing: 0.1em; color: var(--crs-muted2); width: 22px; }
.crs-theory-t { flex: 1; font-size: 18px; }
.crs-theory-min { font-size: 13px; color: var(--crs-muted2); }
.crs-theory-list svg { flex: none; }
.crs-practice { background: var(--crs-paper); margin-top: 64px; }
.crs-practice > .crs-wrap { padding: 64px 0 80px; }
body.crs-page main.wrap > .crs-practice { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 20px; }
.crs-practice-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.crs-practice-head > div { flex: 1 1 520px; padding-bottom: 28px; }
.crs-practice-head .crs-cap { margin-bottom: 14px; }
.crs-practice-head .crs-h2-serif { font-size: clamp(38px, 5vw, 64px); }
.crs-practice-dek { color: #333; margin: 14px 0 0; max-width: 560px; }
.crs-dahl { width: 280px; max-width: 40%; display: block; margin-bottom: -1px; }
.crs-stories { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--crs-ink); padding-top: 10px; }
.crs-story { background: #fff; }
.crs-story.is-soon { opacity: .7; }
.crs-story-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 18px 24px; }
.crs-story-row > img { width: 58px; height: 72px; object-fit: contain; }
.crs-story-name { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; }
.crs-story-title { font-family: var(--crs-serif); font-size: 32px; line-height: 1.05; }
.crs-story-state { width: 180px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #555; }
.crs-story-chev { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--crs-ink); }
.crs-story-chev svg { transition: transform .18s; }
.crs-story.is-open .crs-story-chev svg { transform: rotate(180deg); }
.crs-story-body { border-top: 1px solid #EEE9E1; padding: 18px 24px 28px 106px; }
.crs-reading { margin: 0 0 14px; color: #555; font-size: 19px; }
.crs-stops { list-style: none; margin: 0; padding: 0; }
.crs-stops li { display: flex; gap: 18px; min-height: 50px; position: relative; }
.crs-stops li::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: #D8D2C8; }
.crs-stops li.is-done::before { background: var(--crs-ink); }
.crs-stops li:first-child::before { top: 17px; }
.crs-stops li:last-child::before { bottom: auto; height: 17px; }
.crs-stop-dot { position: relative; z-index: 1; flex: none; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; margin-top: 10px; background: #fff; border: 2px solid #C9C3B9; }
.crs-stops li.is-done .crs-stop-dot { background: var(--crs-ink); border-color: var(--crs-ink); }
.crs-stops li.is-cur .crs-stop-dot { background: var(--crs-blush); border-color: var(--crs-accent); }
.crs-stop-text { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 10px 0; }
.crs-stop-text > a, .crs-stop-text > span:first-child { font-size: 18px; color: var(--crs-ink); text-decoration: none; }
.crs-stops li.is-locked .crs-stop-text > span:first-child { color: var(--crs-muted2); }
.crs-stops li.is-cur .crs-stop-text > a { font-weight: 600; }
.crs-stop-sub { font-size: 18px; color: var(--crs-muted2); }
.crs-here { margin-left: auto; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crs-accent-ink); text-decoration: none; }
.crs-badges-part { margin-top: 72px; }
.crs-badge-wall { display: flex; flex-wrap: wrap; gap: 28px 22px; margin-top: 44px; align-items: flex-end; }
.crs-badge { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 118px; text-align: center; }
.crs-badge img { width: 100px; height: 130px; object-fit: contain; }
.crs-badge.is-main { width: 200px; }
.crs-badge.is-main img { width: 190px; height: 220px; }
.crs-badge-name { font-size: 19px; line-height: 1.15; }
.crs-badge.is-main .crs-badge-name { font-size: 22px; }

/* ---------- a theory lesson ---------- */
.crs-topbar { height: 3px; background: #ECE9E4; position: relative; margin: -40px -20px 0; }
.crs-topbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--crs-ink); }
.crs-lesson { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; padding-top: 48px; }
.crs-lesson-nav { flex: 1 1 220px; max-width: 250px; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; position: sticky; top: 90px; }
.crs-lesson-back { text-decoration: none; margin-bottom: 14px; }
.crs-lesson-nav > .crs-cap { margin: 0 0 8px; }
.crs-lesson-link { font-size: 15px; padding: 6px 0 6px 12px; border-left: 2px solid #ECE9E4; color: #555; text-decoration: none; }
.crs-lesson-link.is-done { color: var(--crs-ink); }
.crs-lesson-link.is-cur { border-left-color: var(--crs-ink); font-weight: 500; color: var(--crs-ink); }
.crs-lesson-link:hover { color: var(--crs-ink); text-decoration: none; border-left-color: #bbb; }
.crs-lesson-more { font-size: 14px; color: var(--crs-muted); padding: 8px 0 0 14px; text-decoration: none; }
.crs-lesson-body { flex: 999 1 560px; min-width: 0; max-width: 720px; }
.crs-lesson-body .crs-h1 { margin: 14px 0 28px; font-size: clamp(38px, 5vw, 64px); }
.crs-read { font-family: var(--crs-serif); font-size: 22px; line-height: 1.62; color: #1a1a1a; margin-top: 36px; }
.crs-read p { margin: 0 0 22px; }
.crs-read h3, .crs-read h4 { font-family: var(--crs-serif); font-weight: 500; font-size: 28px; margin: 34px 0 12px; }
.crs-read blockquote { margin: 30px 0; padding: 0 0 0 20px; border-left: 2px solid var(--crs-ink); font-style: italic; font-size: 26px; line-height: 1.3; }
.crs-read blockquote p:last-child { margin-bottom: 0; }
.crs-read hr { border: 0; border-top: 1px solid var(--crs-hair); margin: 30px 0; }
.crs-read ul, .crs-read ol { padding-left: 24px; margin: 0 0 22px; }
.crs-read code { font-family: ui-monospace, monospace; font-size: 17px; }
.crs-read .crs-table { border-collapse: collapse; width: 100%; margin: 0 0 22px; font-size: 19px; }
.crs-read .crs-table th, .crs-read .crs-table td { border-bottom: 1px solid var(--crs-hair); padding: 10px 12px 10px 0; text-align: left; vertical-align: top; }
.crs-read .crs-table th { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--crs-muted); }
.crs-gloss-link { font-family: 'Jost', sans-serif; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--crs-ink); text-decoration: none; }
.crs-stereo { margin: 10px 0 30px; }
.crs-stereo canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.crs-stereo figcaption { margin-top: 12px; font-size: 18px; }
.crs-stereo-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: -10px 0 30px; }
.crs-stereo-vote .crs-btn.is-on { background: var(--crs-ink); color: #fff; }
.crs-stereo-stat { margin: 0; font-size: 19px; color: var(--crs-muted); flex-basis: 100%; }
.crs-foot { margin-top: 56px; border-top: 1px solid var(--crs-ink); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: stretch; padding-top: 24px; }
.crs-next { display: flex; flex-direction: column; gap: 4px; padding: 14px 22px; background: var(--crs-ink); color: #fff; text-decoration: none; min-width: 260px; box-sizing: border-box; }
.crs-next .crs-cap { color: #bdbdbd; }
.crs-next .crs-serif { font-size: 24px; line-height: 1.2; }
.crs-next:hover { text-decoration: none; background: #333; }
.crs-next.is-off { background: #E6DFD3; color: var(--crs-muted2); cursor: default; }
.crs-next.is-off .crs-cap { color: var(--crs-muted2); }

/* ---------- the player ---------- */
.crs-player { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 10px 0; margin-top: 4px; border-top: 1px solid var(--crs-hair); border-bottom: 1px solid var(--crs-hair); }
body.crs-paper .crs-player { border-color: #E4DED4; }
.crs-narr { position: relative; display: inline-block; margin-left: 10px; vertical-align: 1px; }
.crs-narr-i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--crs-ink); background: #fff; color: var(--crs-ink); font: italic 11px/1 var(--crs-serif); cursor: help; padding: 0; display: inline-grid; place-items: center; -webkit-appearance: none; appearance: none; }
.crs-narr-tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 8; background: var(--crs-ink); color: #fff; font-size: 13px; line-height: 1.4; padding: 8px 12px; width: 240px; letter-spacing: 0; text-transform: none; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .12s; }
.crs-narr:hover .crs-narr-tip, .crs-narr.is-open .crs-narr-tip, .crs-narr-i:focus-visible + .crs-narr-tip { opacity: 1; pointer-events: auto; }
.crs-play { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--crs-ink); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.crs-play svg { fill: #fff; }
.crs-pause-ic { display: none; }
.crs-player.is-playing .crs-play-ic { display: none; }
.crs-player.is-playing .crs-pause-ic { display: block; }
.crs-player-body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.crs-player-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.crs-player-label { font-size: 14px; letter-spacing: 0.14em; white-space: nowrap; display: inline-flex; align-items: center; }
.crs-time { font-size: 13px; color: var(--crs-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crs-seek { height: 3px; background: #DCD8D1; position: relative; cursor: pointer; }
.crs-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--crs-ink); }
.crs-seek-knob { position: absolute; left: 0; top: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--crs-ink); margin-left: -6px; }
.crs-rate { min-width: 48px; height: 44px; border: 1px solid var(--crs-ink); background: transparent; color: var(--crs-ink); font: inherit; font-size: 14px; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 0; }
.crs-rate:hover { background: var(--crs-ink); color: #fff; }
.crs-resume { flex-basis: 100%; margin: -4px 0 0 66px; font-size: 13px; color: var(--crs-muted); }
.crs-player.is-compact { border: 0; padding: 0; margin: 22px 0 0; }
.crs-player.is-compact .crs-play { width: 44px; height: 44px; background: #fff; border: 1px solid var(--crs-ink); }
.crs-player.is-compact .crs-play svg { fill: var(--crs-ink); width: 14px; height: 14px; }
.crs-player.is-compact .crs-narr { display: none; }
.crs-player.is-compact .crs-resume { margin-left: 58px; }

/* ---------- a practice stop ---------- */
.crs-strip { background: #fff; border-bottom: 1px solid #E4DED4; }
.crs-strip-in { max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; }
.crs-strip-story { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--crs-ink); }
.crs-strip-story img { width: 32px; height: 40px; object-fit: contain; }
.crs-strip-story > span { display: flex; flex-direction: column; }
.crs-strip-title { font-family: var(--crs-serif); font-size: 24px; line-height: 1.1; }
.crs-route { flex: 1 1 420px; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.crs-route li { flex: 1 1 0; display: flex; align-items: center; }
.crs-route li:last-child { flex: 0 0 auto; }
.crs-route li::after { content: ''; flex: 1; height: 2px; background: #D8D2C8; }
.crs-route li:last-child::after { display: none; }
.crs-route li.is-done::after { background: var(--crs-ink); }
.crs-route i { display: block; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 2px solid #C9C3B9; }
.crs-route a { display: block; line-height: 0; }
.crs-route li.is-done i { background: var(--crs-ink); border-color: var(--crs-ink); }
.crs-route li.is-cur i { width: 18px; height: 18px; background: var(--crs-blush); border-color: var(--crs-accent); }
.crs-stop { max-width: 820px; margin: 0 auto; padding: 48px 20px 40px; }
.crs-stop > .crs-read { margin-top: 32px; font-size: 23px; }
.crs-turn { margin-top: 36px; background: #fff; padding: 36px 36px 30px; }
.crs-turn-cap { display: flex; align-items: center; gap: 10px; color: var(--crs-accent-ink); margin: 0; }
.crs-turn-cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--crs-accent); display: inline-block; }
.crs-question { margin: 16px 0 0; font-family: var(--crs-serif); font-style: italic; font-size: clamp(24px, 3vw, 32px); line-height: 1.3; }
.crs-answer-form { margin-top: 22px; }
.crs-answer-field { width: 100%; box-sizing: border-box; min-height: 170px; padding: 18px 20px; border: 1px solid var(--crs-ink); background: #FBF9F6; font-family: var(--crs-serif); font-size: 21px; line-height: 1.5; resize: vertical; outline: none; color: var(--crs-ink); }
.crs-answer-field:focus { background: #fff; }
.crs-answer-field::placeholder { color: #8a857d; }
.crs-answer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.crs-yours { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ECE7DF; }
.crs-yours-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.crs-yours-head .crs-textlink { font-size: 14px; color: var(--crs-muted); }
.crs-yours-text { margin: 6px 0 0; font-size: 22px; }
.crs-edit-form { margin-top: 14px; }
.crs-locked { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.crs-lock { background: #EAE3D8; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.crs-lock-head { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 500; }
.crs-lock-note { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #5f5a52; }
.crs-mono { width: 72px; height: 72px; border-radius: 50%; background: var(--crs-blush); display: grid; place-items: center; font-family: var(--crs-serif); font-size: 34px; color: var(--crs-accent-ink); flex: none; }
.crs-mono-s { width: 44px; height: 44px; font-size: 22px; }
.crs-curator { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.crs-curator-s { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.crs-faces { display: flex; }
.crs-faces i { width: 30px; height: 30px; border-radius: 50%; background: #d8cfc2; border: 2px solid #EAE3D8; }
.crs-faces i + i { margin-left: -10px; background: #cbc1b2; }
.crs-faces i + i + i { background: #bfb4a4; }
.crs-after-note { margin: 18px 0 0; font-size: 19px; }
.crs-reveal { margin-top: 56px; }
.crs-reveal-head { display: flex; align-items: center; gap: 18px; }
.crs-reveal-head > div { display: flex; flex-direction: column; gap: 4px; }
.crs-reveal .crs-read { margin-top: 22px; }
.crs-peers { margin-top: 64px; }
.crs-peers-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.crs-peers-head > div { display: flex; flex-direction: column; gap: 6px; }
.crs-peers-intro { margin: 14px 0 0; color: #555; font-size: 20px; }
.crs-sort { display: flex; gap: 4px; background: #E6DFD3; padding: 4px; }
.crs-sort button { min-height: 40px; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: 14px; cursor: pointer; }
.crs-sort button.is-on { background: #fff; }
.crs-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; align-items: start; }
.crs-wcard { background: #fff; padding: 22px 22px 14px; display: flex; flex-direction: column; gap: 12px; }
.crs-wcard.is-own { background: var(--crs-blush); }
.crs-wcard[hidden], .crs-wcard.is-folded { display: none; }
.crs-wall-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }   /* the masonry columns (JS) */
.crs-wcard-who { display: flex; align-items: center; gap: 10px; }
.crs-initial { width: 30px; height: 30px; border-radius: 50%; background: #7a6f62; color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.crs-wcard.is-own .crs-initial { background: var(--crs-ink); }
.crs-wcard-av { display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.crs-wcard-av .avatar { display: block; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.crs-wcard-av .avatar-blank { background: #7a6f62; color: #fff; text-align: center; font-size: 13px; font-family: 'Jost', sans-serif; }
.crs-wcard.is-own .crs-wcard-av .avatar-blank { background: var(--crs-ink); }
.crs-wcard-who .crs-cap a { color: var(--crs-ink); text-decoration: none; } .crs-wcard-who .crs-cap a:hover { text-decoration: underline; }
.crs-wcard-who .crs-cap { color: var(--crs-ink); }
.crs-wcard-text { margin: 0; font-size: 20px; line-height: 1.45; }
.crs-like-form { margin: 0; }
.crs-heart { align-self: flex-start; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 15px; color: #555; cursor: pointer; }
.crs-heart svg { fill: none; stroke: var(--crs-accent-ink); stroke-width: 1.6; }
.crs-heart.on svg { fill: var(--crs-accent); }
.crs-heart.is-static { cursor: default; }
.crs-wall.is-top { }

/* ---------- mini-games ---------- */
.crs-game { margin-top: 36px; background: #fff; padding: 32px; }
.crs-game-tag { margin: 0 0 14px; }
.crs-game-title { font-size: clamp(28px, 3.5vw, 36px); }
.crs-game-lead { margin: 12px 0 0; color: #333; max-width: 640px; }
.crs-sort-pool { display: flex; flex-wrap: wrap; gap: 10px; min-height: 56px; padding: 24px 0; border-bottom: 1px solid #ECE7DF; align-items: center; }
.crs-chip { min-height: 48px; padding: 0 20px; border: 1px solid var(--crs-ink); background: #fff; color: var(--crs-ink); font-family: var(--crs-serif); font-style: italic; font-size: 24px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.crs-chip.is-sel { background: var(--crs-ink); color: #fff; transform: translateY(-3px); box-shadow: 0 6px 0 #E6DFD3; }
.crs-sort-done { font-family: var(--crs-serif); font-style: italic; font-size: 21px; color: var(--crs-muted); }
.crs-sort-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.crs-sort-col { min-height: 200px; padding: 20px; border: 1px solid #E4DED4; background: #fff; text-align: left; display: flex; flex-direction: column; gap: 14px; cursor: pointer; font: inherit; align-items: flex-start; }
.crs-sort-col .crs-cap { color: var(--crs-ink); }
.crs-sort-pool.has-sel ~ .crs-sort-cols .crs-sort-col { border-color: var(--crs-ink); }
.crs-sort-col.is-wine.is-revealed { background: var(--crs-blush); }
.crs-sort-words { display: flex; flex-wrap: wrap; gap: 8px; }
.crs-sort-words span { padding: 6px 12px; background: var(--crs-paper); font-family: var(--crs-serif); font-style: italic; font-size: 21px; cursor: pointer; }
.crs-sort-col[data-col="woman"] .crs-sort-words span { background: var(--crs-blush); }
.crs-game-foot { margin-top: 20px; }
.crs-game-trick { margin-top: 24px; padding: 28px; background: var(--crs-ink); color: #fff; display: flex; flex-direction: column; gap: 12px; }
.crs-game-trick .crs-cap { color: #bdbdbd; }
.crs-game-trick-line { margin: 0; font-size: 30px; line-height: 1.3; }
.crs-game-verdict { margin: 0; color: #ddd; font-size: 22px; }
.crs-game-trick .crs-textlink { align-self: flex-start; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
.crs-game-kicker { margin: 18px 0 10px; }
.crs-poll { display: flex; flex-direction: column; gap: 10px; }
.crs-poll-opt { position: relative; min-height: 64px; padding: 0 22px; border: 1px solid #D8D2C8; background: #fff; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: hidden; font: inherit; }
.crs-poll-opt:hover { border-color: var(--crs-ink); }
.crs-poll-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #EFEAE2; transition: width .4s ease; }
.crs-poll-opt.is-mine { border-color: var(--crs-ink); }
.crs-poll-opt.is-mine .crs-poll-fill { background: var(--crs-blush); }
.crs-poll-label { position: relative; font-size: 24px; }
.crs-poll-mine { color: var(--crs-accent-ink); }
.crs-poll-pct { position: relative; font-size: 18px; font-variant-numeric: tabular-nums; }
.crs-poll.is-voted .crs-poll-opt { cursor: default; }
.crs-poll-note { margin: 14px 0 0; font-size: 14px; }

/* ---------- the notebook (practice only) ---------- */
.crs-nb-btn { position: fixed; right: 24px; bottom: 24px; z-index: 70; min-height: 52px; padding: 0 20px; border: 0; background: var(--crs-ink); color: #fff; font: inherit; font-size: 14px; letter-spacing: 0.16em; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.crs-nb-veil { position: fixed; inset: 0; z-index: 71; background: rgba(17,17,17,0.35); }
.crs-nb { position: fixed; right: 0; top: 0; bottom: 0; width: 400px; max-width: 100%; z-index: 72; background: #fff; border-left: 1px solid var(--crs-ink); display: flex; flex-direction: column; box-sizing: border-box; }
.crs-nb-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid #ECE7DF; }
.crs-nb-head > div { display: flex; flex-direction: column; }
.crs-nb-title { font-family: var(--crs-serif); font-size: 28px; line-height: 1.1; }
.crs-nb-x { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--crs-ink); }
.crs-nb-form { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid #ECE7DF; }
.crs-nb-form label { display: flex; flex-direction: column; gap: 6px; }
.crs-nb-in { border: 0; border-bottom: 1px solid var(--crs-ink); padding: 8px 0; font-family: var(--crs-serif); font-size: 20px; outline: none; background: transparent; }
.crs-nb-form .crs-btn { align-self: flex-start; }
.crs-nb-list { flex: 1; overflow: auto; padding: 8px 24px 24px; }
.crs-nb-row { padding: 14px 0; border-bottom: 1px solid #ECE7DF; display: flex; flex-direction: column; gap: 4px; position: relative; padding-right: 30px; }
.crs-nb-l { font-family: var(--crs-serif); font-size: 20px; }
.crs-nb-r { font-family: var(--crs-serif); font-style: italic; font-size: 19px; color: #555; }
.crs-nb-del { position: absolute; right: 0; top: 12px; margin: 0; }
.crs-nb-rm { border: 0; background: none; font-size: 20px; color: var(--crs-muted); cursor: pointer; padding: 2px 6px; }
.crs-nb-rm:hover { color: var(--crs-ink); }
.crs-nb-empty { font-family: var(--crs-serif); font-style: italic; font-size: 18px; color: var(--crs-muted); padding-top: 10px; }

/* ---------- story complete ---------- */
.crs-complete { max-width: 900px; margin: 0 auto; padding: 64px 20px 96px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.crs-burst { position: relative; width: 420px; max-width: 100%; aspect-ratio: 1; display: grid; place-items: center; margin-top: 12px; animation: crs-pop .5s ease-out both; }
.crs-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.crs-burst img { position: relative; width: 50%; height: 64%; object-fit: contain; }
@keyframes crs-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.crs-complete-title { font-size: clamp(56px, 9vw, 96px); margin: 8px 0 0; }
.crs-complete-dek { margin: 18px 0 0; font-size: 26px; max-width: 560px; color: #333; }
.crs-figs-c { margin-top: 40px; width: 100%; max-width: 620px; gap: 0; border-top: 1px solid var(--crs-ink); border-bottom: 1px solid #D8D2C8; }
.crs-figs-c > div { padding: 22px 0; align-items: center; }
.crs-figs-c > div + div { border-left: 1px solid #D8D2C8; }
.crs-minibadges-c { margin-top: 44px; justify-content: center; align-items: flex-end; gap: 22px; }
.crs-minibadges-c img { height: 58px; max-width: 48px; }
.crs-minibadges-c img.is-main { height: 68px; max-width: 58px; }
.crs-complete > .crs-cap { margin-top: 12px; }
.crs-actions-c { margin-top: 40px; justify-content: center; }
.crs-actions-c .crs-next { text-align: left; }

/* ---------- the glossary ---------- */
.crs-gl { display: flex; flex-wrap: wrap; gap: 56px; margin-top: 48px; align-items: flex-start; max-width: 100%; overflow-x: clip; }
.crs-gl-main, .crs-gl-entry, .crs-gl-body { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.crs-gl-search input { -webkit-appearance: none; appearance: none; border-radius: 0; }
.crs-gl-side { flex: 1 1 240px; max-width: 280px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
.crs-gl-search { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--crs-ink); padding: 10px 0; }
.crs-gl-search input { flex: 1; min-width: 0; border: 0; outline: none; font-family: var(--crs-serif); font-size: 22px; background: transparent; color: var(--crs-ink); }
.crs-gl-cats { display: flex; flex-direction: column; }
.crs-gl-cats button { display: flex; justify-content: space-between; align-items: baseline; min-height: 44px; padding: 0 0 0 14px; border: 0; border-left: 2px solid transparent; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 17px; color: #555; }
.crs-gl-cats button span { font-size: 14px; color: var(--crs-muted2); }
.crs-gl-cats button.is-on { border-left-color: var(--crs-ink); color: var(--crs-ink); font-weight: 500; }
.crs-gl-main { flex: 999 1 560px; min-width: 0; }
.crs-gl-main > .crs-cap { padding-bottom: 14px; margin: 0; }
.crs-gl-entry { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 30px 0; border-top: 1px solid var(--crs-hair); }
.crs-gl-entry[hidden] { display: none; }
.crs-gl-term { flex: 1 1 200px; max-width: 230px; display: flex; flex-direction: column; gap: 8px; }
.crs-gl-term .crs-h2-serif { font-size: 36px; }
.crs-gl-body { flex: 999 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.crs-gl-readings { margin: 0; padding-left: 24px; line-height: 1.45; }
.crs-gl-readings li { padding-left: 6px; margin-bottom: 4px; }
.crs-gl-seen { margin: 0; font-size: 15px; color: var(--crs-muted); }
.crs-gl-seen .crs-serif-i { font-size: 18px; color: #444; }
.crs-gl-none { margin: 0; padding: 40px 0; border-top: 1px solid var(--crs-hair); font-size: 22px; color: #555; }

/* ---------- the profile: statistics + badges (person.php) ---------- */
.pf-head { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.pf-head .avatar { width: 168px; height: 168px; font-size: 72px; line-height: 168px; flex: none; }
.pf-main { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 10px; }
.pf-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.pf-name { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pf-name .page-title { margin: 0; }
.pf-flag { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.pf-flag:hover { text-decoration: none; }
.pf-flag svg { flex: none; }
.pf-flag > span { display: flex; flex-direction: column; gap: 2px; }
.pf-flag-place { font-size: 18px; font-weight: 500; letter-spacing: 0.06em; }
.pf-edit { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); text-decoration: none; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.pf-edit:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.pf-bio { margin: 0; font-weight: 300; font-size: 21px; line-height: 1.5; color: #333; max-width: 620px; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 16px; color: #333; }
.pf-meta a, .pf-meta span { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pf-meta .faint { color: #77726b; }
.pf-meta svg { flex: none; }
.pf-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--crs-hair, #E4E1DC); }
.pf-figs > div { display: flex; flex-direction: column; gap: 6px; padding: 26px 0; }
.pf-figs > div + div { padding-left: 32px; border-left: 1px solid #E4E1DC; }
.pf-figs b { font-weight: 300; font-size: 56px; line-height: 1; }
.pf-figs b small { font-size: 26px; color: #77726b; font-weight: 300; }
.crs-profile-badges { margin-top: 56px; }
.crs-pb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.crs-pb-head a { text-decoration: none; }
.crs-pb-title { margin: 0; font-size: 30px; font-weight: 500; }
.crs-pb-row { display: flex; flex-wrap: wrap; gap: 28px 24px; margin-top: 28px; align-items: flex-end; }
.crs-pb { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 104px; text-align: center; }
.crs-pb img { width: 90px; height: 118px; object-fit: contain; }
.crs-pb.is-main { width: 132px; }
.crs-pb.is-main img { width: 124px; height: 146px; }
.crs-pb span { font-size: 14px; color: #77726b; }
.crs-pb.is-earned span { color: var(--ink); }
.profile-shelf { margin-top: 72px; }

/* ---------- admin ---------- */
.crs-admin-log { white-space: pre-wrap; border: var(--hair); padding: 10px 12px; font-size: 13px; max-height: 320px; overflow: auto; }
.crs-admin-form { padding: 10px 0 4px; }
.crs-admin-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.crs-admin-import { display: block; margin: 8px 0; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .crs-lesson { gap: 28px; padding-top: 28px; }
  .crs-lesson-nav { position: static; max-width: none; flex-basis: 100%; }
  .crs-lesson-nav .crs-lesson-link { display: none; }
  .crs-read { font-size: 20px; }
  .crs-theory-list { grid-template-columns: 1fr; }
  .crs-story-body { padding-left: 24px; }
  .crs-story-state { width: 100%; }
  .crs-locked, .crs-sort-cols { grid-template-columns: 1fr; }
  .crs-turn { padding: 22px 18px 18px; }
  .crs-game { padding: 22px 18px; }
  .crs-wall { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .crs-wcard { flex: 0 0 300px; scroll-snap-align: start; box-sizing: border-box; }
  .crs-wcard.is-folded { display: flex; }   /* the rail carries every card */
  [data-wall-more] { display: none; }
  .crs-sort { display: none; }
  .crs-nb { width: 100%; top: auto; max-height: 82vh; border-left: 0; border-top: 1px solid var(--crs-ink); border-radius: 14px 14px 0 0; }
  .crs-nb-btn { right: 12px; bottom: 12px; }
  .crs-foot .crs-next { min-width: 0; flex: 1 1 100%; }
  .crs-stop { padding: 28px 16px 40px; }
  .crs-stop > .crs-read { font-size: 20px; }
  .crs-strip-in { gap: 10px 16px; justify-content: space-between; }
  .crs-route { display: none; }
  .crs-strip-story img { width: 28px; height: 36px; }
  .crs-player { position: sticky; bottom: 0; z-index: 30; margin: 0 -16px; padding: 10px 16px 14px; background: #fff; border: 0; border-top: 1px solid var(--crs-hair); flex-wrap: nowrap; gap: 10px; }
  body.crs-paper .crs-player { background: var(--crs-paper); border-top-color: #E4DED4; }   /* round 5: no white field — the page's own colour, like the desktop */
  .crs-player-body { flex: 1 1 auto; }
  .crs-play { width: 46px; height: 46px; }
  .crs-narr-tip { left: auto; right: -60px; width: 220px; }
  .crs-btn { width: 100%; }
  .crs-actions { flex-direction: column; align-items: stretch; }
  .crs-actions .crs-textlink { text-align: center; }
  .crs-foot { flex-direction: column; }
  .crs-foot .crs-btn { width: 100%; }
  .crs-story-row .crs-btn { width: auto; }
  .crs-part-tools .crs-btn, .crs-sort button, .crs-stereo-vote .crs-btn { width: auto; }
  .crs-stereo-vote .crs-btn { flex: 1; }
  .crs-gl-cats button { align-items: center; }
  body:not(.crs-paper) .crs-player { background: #fff; }
  .crs-player.is-compact { position: static; margin: 22px 0 0; border: 0; padding: 0; }
  .crs-rate { width: 44px; min-width: 0; }
  .crs-resume { margin-left: 0; }
  .crs-dahl { width: 120px; }
  .crs-practice-head > div { padding-bottom: 14px; }
  .crs-badge-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; justify-items: center; align-items: start; margin-top: 28px; }
  .crs-badge, .crs-badge.is-main { width: 100%; gap: 8px; }
  .crs-badge img { width: 70px; height: 90px; }
  .crs-badge.is-main { grid-column: 1 / -1; }
  .crs-badge.is-main img { width: 150px; height: 174px; }
  .crs-badge-name { font-size: 16px; }
  .crs-badge .crs-cap { font-size: 10px; }
  .crs-gl-side { position: static; max-width: none; flex-basis: 100%; }
  .crs-gl-cats { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .crs-gl-cats button { flex: none; border-left: 0; border: 1px solid var(--crs-hair); padding: 0 12px; min-height: 40px; font-size: 14px; gap: 6px; justify-content: center; }
  .crs-gl-cats button.is-on { border-color: var(--crs-ink); background: var(--crs-ink); color: #fff; }
  .crs-gl-cats button.is-on span { color: #ccc; }
  .crs-gl-term { max-width: none; }
  .pf-head { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .pf-head .avatar { width: 112px; height: 112px; font-size: 50px; line-height: 112px; }
  .pf-main { align-items: center; padding-top: 0; flex: 0 0 auto; width: 100%; }
  .pf-top { flex-direction: column; }
  .pf-name { flex-direction: column; gap: 10px; }
  .pf-meta { flex-direction: column; align-items: center; gap: 8px; }
  .pf-figs { text-align: center; margin-top: 26px; }
  .pf-figs > div + div { padding-left: 0; }
  .pf-figs b { font-size: 38px; }
  .crs-pb-row { flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding-bottom: 6px; }
  .crs-pb, .crs-pb.is-main { flex: none; width: 74px; }
  .crs-pb img, .crs-pb.is-main img { width: 64px; height: 84px; }
  .crs-pb.is-main { width: 92px; }
  .crs-pb.is-main img { width: 86px; height: 100px; }
  .crs-complete { padding: 40px 16px 64px; }
  .crs-figs-c { grid-template-columns: repeat(3, 1fr); }
  .crs-figs b { font-size: 36px; }
  .crs-admin-row { grid-template-columns: 1fr 1fr; }
}

/* ================= round 4: stories 2–5, their games, the checklist, gifts ================= */
.crs-badge-wall { align-items: flex-start; }
.crs-badge img { display: block; }
.crs-badge .crs-badge-name { min-height: 44px; display: flex; align-items: flex-start; justify-content: center; }
.crs-badge.is-main img { margin-bottom: 0; }
.crs-badge-wall .crs-badge:not(.is-main) { padding-top: 90px; }
.crs-badge.is-main { padding-top: 0; }
@media (max-width: 760px) { .crs-badge-wall .crs-badge:not(.is-main) { padding-top: 0; } }
.crs-gift-line { margin: 8px 0 0; font-size: 15px; }
.crs-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* soon tiles on the catalogue */
.crs-soon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.crs-soon-tile { background: #F6F4F0; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 168px; box-sizing: border-box; }
.crs-soon-top { display: flex; justify-content: space-between; align-items: center; }
.crs-soon-q { width: 40px; height: 40px; border-radius: 50%; background: #ECE8E1; color: #A39C91; display: grid; place-items: center; font-family: var(--crs-serif); font-size: 22px; }
.crs-soon-faces { display: flex; }
.crs-soon-faces i { width: 28px; height: 28px; border-radius: 50%; background: #ECE8E1; border: 2px solid #F6F4F0; }
.crs-soon-faces i + i { margin-left: -10px; background: #E4DFD7; }
.crs-soon-faces i + i + i { background: #DBD5CB; }
.crs-soon-title { font-size: 24px; line-height: 1.15; color: #555; }
.crs-soon-text { font-size: 15px; line-height: 1.45; color: var(--crs-muted2); }
@media (max-width: 760px) { .crs-soon { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 6px; } .crs-soon-tile { flex: 0 0 236px; scroll-snap-align: start; } }

/* the game card, dark variant */
.crs-game.is-dark { background: var(--crs-ink); color: #fff; }
.crs-game.is-dark .crs-game-tag { background: transparent; color: #E6A3B5; padding: 0; }
.crs-game.is-dark .crs-game-lead { color: #ddd; }
.crs-btn-ghost { border-color: #fff; color: #fff; background: transparent; }
.crs-btn-ghost:hover { background: #fff; color: var(--crs-ink); }

/* thermometer */
.crs-thermo { display: flex; gap: 22px; align-items: stretch; margin-top: 20px; }
.crs-thermo-glass { flex: none; }
.crs-thermo-merc, .crs-thermo-bulb { fill: #C9BFB8; transition: fill .2s, y .2s, height .2s; }
.crs-thermo-panel { flex: 1; background: #EEE9E2; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; transition: background .3s; }
.crs-thermo-word { font-size: 52px; line-height: 1; }
.crs-thermo-ends { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.14em; margin-top: 18px; }
.crs-thermo-ends .is-cold { color: #3E6FB0; } .crs-thermo-ends .is-warm { color: #C23B3B; }
.crs-thermo-track { position: relative; margin-top: 6px; }
.crs-temp { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; cursor: pointer; color: #C9BFB8; }
.crs-temp::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #3E6FB0, #C9BFB8 50%, #C23B3B); }
.crs-temp::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: currentColor; border: 3px solid #fff; box-shadow: 0 0 0 1px #111; margin-top: -9px; }
.crs-temp::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #3E6FB0, #C9BFB8 50%, #C23B3B); }
.crs-temp::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: currentColor; border: 3px solid #fff; box-shadow: 0 0 0 1px #111; }
.crs-thermo-avg { position: absolute; top: 0; width: 2px; height: 30px; background: var(--crs-ink); pointer-events: none; }
.crs-thermo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.crs-thermo-note { font-size: 14px; }
.crs-thermo-club { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.crs-thermo-club > .crs-muted { font-size: 13px; }
.crs-thermo-bins { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.crs-thermo-bins span { flex: 1; min-height: 3px; }
.crs-thermo-bins span.is-mine { outline: 2px solid var(--crs-ink); outline-offset: 2px; }

/* who is the lamb */
.crs-lamb-freezer { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #EEF2F6; margin-top: 18px; position: relative; }
.crs-lamb-leg { width: 56px; height: 70px; object-fit: contain; transition: transform .2s; }
.crs-lamb-freezer .crs-cap.is-cold { color: #3E6FB0; display: block; margin-bottom: 6px; }
.crs-lamb-take { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.crs-game-lamb.is-held { cursor: grabbing; }
.crs-game-lamb.is-held .crs-lamb-leg { position: absolute; z-index: 5; transform: rotate(-35deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); pointer-events: none; }
.crs-game-lamb { position: relative; overflow: hidden; }
.crs-lamb-zones { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.crs-lamb-zone { position: relative; min-height: 76px; border: 1px solid #E4DED4; background: #fff; display: flex; align-items: center; justify-content: center; font: inherit; cursor: pointer; transition: transform .15s, background .15s; }
.crs-lamb-zone .crs-serif { font-size: 28px; }
.crs-lamb-zone.is-own { min-height: 64px; } .crs-lamb-zone.is-own .crs-serif { font-size: 20px; }
.crs-game-lamb.is-held .crs-lamb-zone { border-color: var(--crs-ink); }
.crs-lamb-zone.is-hit { background: var(--crs-blush); border-color: var(--crs-ink); transform: rotate(-1.5deg) translateY(4px); }
.crs-lamb-thunk { position: absolute; right: 16px; top: 12px; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #C23B3B; transform: rotate(8deg); opacity: 0; }
.crs-lamb-zone.is-hit .crs-lamb-thunk { opacity: 1; }
.crs-lamb-zone.is-hit::before { content: ''; position: absolute; left: 26px; top: 6px; width: 52px; height: 70px; background: url("/uploads/courses/symbols/images/badge-lamb.png") center / contain no-repeat; transform: rotate(62deg); }
.crs-lamb-own { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.crs-lamb-note { margin: 14px 0 0; font-size: 18px; }
.crs-lamb-split { margin-top: 14px; }

/* his voice */
.crs-voice-player { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; background: var(--crs-paper); margin-top: 16px; }
.crs-voice-play { width: 46px; height: 46px; }
.crs-wave { flex: 1; height: 30px; fill: var(--crs-ink); }
.crs-ipa { position: relative; height: 330px; margin-top: 14px; background: #FBF9F6; }
.crs-ipa button { position: absolute; min-width: 48px; min-height: 48px; padding: 0 4px; border: 0; border-radius: 50%; background: transparent; color: var(--crs-ink); font-family: 'Noto Serif', var(--crs-serif); line-height: 1; cursor: pointer; }
.crs-ipa button.is-tried { color: #B9B2A7; text-decoration: line-through; }
.crs-ipa button.is-win { background: var(--crs-accent); color: #fff; }
.crs-ipa-note { margin: 12px 0 0; font-size: 19px; color: #555; }
.crs-ipa-note.is-win { color: var(--crs-accent-ink); }

/* ten flicks */
.crs-flicks { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 16px; }
.crs-lighter { width: 190px; height: 230px; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle at 50% 38%, rgba(230,163,181,0.28), rgba(17,17,17,0) 62%); display: grid; place-items: center; }
.crs-flame, .crs-smoke { opacity: 0; transition: opacity .15s; }
.crs-lighter.is-lit .crs-flame { opacity: 1; } .crs-lighter.is-smoke .crs-smoke { opacity: 1; }
.crs-flicks-side { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.crs-flicks-tally { color: #aaa; }
.crs-flicks-dots { display: flex; gap: 7px; }
.crs-flicks-dots span { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #555; box-sizing: border-box; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #111; }
.crs-flicks-dots span.is-ok { background: #E6A3B5; border-color: #E6A3B5; } .crs-flicks-dots span.is-x { background: #C23B3B; border-color: #C23B3B; }
.crs-flick-btn { min-height: 60px; padding: 0 40px; border: 0; background: #fff; color: #111; font-family: 'Jost', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 0 6px rgba(230,163,181,0.35); }
.crs-flick-btn:hover { box-shadow: 0 0 0 10px rgba(230,163,181,0.45); }
.crs-leave { min-height: 44px; padding: 0; border: 0; background: none; color: #7d7d7d; font-family: 'Jost', sans-serif; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.crs-flicks-out { border-top: 1px solid #333; margin-top: 22px; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.crs-flicks-head { font-size: 40px; line-height: 1.05; }
.crs-flicks-line { font-size: 23px; color: #eee; }
.crs-flicks-note { font-size: 15px; line-height: 1.5; color: #E6A3B5; }
.crs-flicks-club { margin-top: 22px; background: #1b1b1b; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.crs-flicks-club > .crs-cap { color: #aaa; }
.crs-flicks-locked { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 10px 0; }
.crs-flicks-locked .crs-serif-i { color: #ccc; font-size: 20px; }
.crs-flicks-bar { display: flex; height: 10px; } .crs-flicks-bar span:first-child { background: #E6A3B5; } .crs-flicks-bar span:last-child { flex: 1; background: #555; }
.crs-flicks-caps { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.12em; color: #aaa; text-transform: uppercase; }
.crs-flicks-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid #2c2c2c; }
.crs-flicks-row b { font-family: var(--crs-serif); font-weight: 400; font-size: 40px; line-height: 1; min-width: 56px; }
.crs-flicks-row.is-back b { font-size: 56px; color: #E6A3B5; }
.crs-flicks-row span { flex: 1; font-size: 16px; line-height: 1.35; color: #ddd; }
.crs-flicks-row .crs-you { font-size: 11px; letter-spacing: 0.16em; color: #E6A3B5; text-transform: uppercase; }

/* the guest book */
.crs-guest-in { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--crs-ink); margin-top: 14px; }
.crs-guest-in input { flex: 1; min-width: 0; border: 0; outline: none; padding: 10px 0; font-family: var(--crs-serif); font-size: 20px; background: transparent; }
.crs-guest-book { margin-top: 16px; background: #FBF7EF; padding: 14px 16px; display: flex; flex-direction: column; }
.crs-guest-row { padding: 9px 0; border-bottom: 1px solid #E4DCCB; font-family: var(--crs-serif); font-style: italic; font-size: 20px; display: flex; justify-content: space-between; align-items: baseline; }
.crs-guest-date { font-size: 15px; color: var(--crs-muted2); font-style: normal; }
.crs-guest-count { margin: 12px 0 0; font-size: 17px; }

/* the eye */
.crs-game-eye { position: relative; min-height: 380px; display: flex; flex-direction: column; cursor: crosshair; }
.crs-eye { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 220px; position: relative; }
.crs-cig { position: absolute; right: 18px; bottom: 10px; }
.crs-eye-note { margin: 0; color: #ccc; font-size: 18px; }

/* the Christ-figure checklist */
.crs-tools { display: flex; flex-direction: column; gap: 8px; }
.crs-tool { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 18px; border: 1px solid var(--crs-hair); background: #fff; text-align: left; cursor: pointer; font: inherit; color: var(--crs-ink); }
.crs-tool > span { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.crs-tool-sub { font-size: 13px; color: var(--crs-muted); }
.crs-cx-veil { position: fixed; inset: 0; background: rgba(17,17,17,0.45); z-index: 80; }
.crs-cx { position: fixed; z-index: 81; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 640px; max-width: calc(100% - 32px); max-height: calc(100vh - 64px); overflow: auto; background: #fff; box-sizing: border-box; padding: 30px 32px 28px; box-shadow: 0 24px 60px rgba(0,0,0,0.22); }
.crs-cx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.crs-cx-head .crs-h2-serif { font-size: 36px; margin-top: 4px; }
.crs-cx-lead { margin: 10px 0 0; font-size: 19px; color: #444; }
.crs-cx-list { display: flex; flex-direction: column; margin-top: 12px; }
.crs-cx-item { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 9px 0; border: 0; border-bottom: 1px solid #ECE9E4; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--crs-ink); }
.crs-cx-item .crs-serif { font-size: 19px; line-height: 1.35; }
.crs-cx-box { width: 20px; height: 20px; margin-top: 3px; flex: none; border: 1.5px solid var(--crs-ink); box-sizing: border-box; display: grid; place-items: center; color: #fff; font-size: 13px; }
.crs-cx-item.is-on .crs-cx-box { background: var(--crs-ink); }
.crs-cx-item.is-on .crs-cx-box::after { content: '✓'; }
.crs-cx-foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.crs-cx-score { font-size: 30px; line-height: 1; white-space: nowrap; }
.crs-cx-score span { font-size: 18px; color: var(--crs-muted2); }
.crs-cx-bar { flex: 1; height: 4px; }
.crs-cx-bar i { background: var(--crs-accent); }
.crs-cx-verdict { margin: 12px 0 0; font-size: 21px; color: var(--crs-accent-ink); }

/* gift pages */
.crs-giftbuy .crs-serif { font-size: 19px; }
.crs-code { font-family: ui-monospace, monospace; font-size: 22px; letter-spacing: 0.08em; }
.gift-code-line { margin: 8px 0 0; }
.crs-redeem-art { width: 180px; margin: 0 auto 16px; background: var(--crs-blush); padding: 20px 20px 0; overflow: hidden; }
.crs-redeem-art img { width: 100%; display: block; }
@media (max-width: 760px) {
  .crs-thermo-word { font-size: 40px; }
  .crs-flicks { gap: 16px; justify-content: center; }
  .crs-flicks-side { align-items: stretch; }
  .crs-flick-btn { width: 100%; }
  .crs-leave { align-self: center; }
  .crs-ipa { height: 360px; }
  .crs-cx { padding: 22px 18px; }
}

/* ---------- round 5: reviews, the finale, share the badge ---------- */
.crs-badge-finale { margin: 10px 0 0; font-size: 20px; } .crs-badge-finale a { color: var(--crs-ink); text-decoration: underline; text-underline-offset: 5px; }
.crs-review { width: 100%; max-width: 640px; box-sizing: border-box; margin-top: 64px; background: #fff; padding: 32px 34px; text-align: left; }
.crs-review-form { display: flex; flex-direction: column; gap: 14px; }
.crs-review-kicker { color: var(--crs-accent-ink); }
.crs-review-h { font-size: 34px; line-height: 1.1; }
.crs-review-lead { font-size: 19px; line-height: 1.5; color: #444; margin: 0; }
.crs-review-prev { background: #F6F4F0; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.crs-review-prev-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.crs-review-prev .crs-serif-i { margin: 0; font-size: 19px; line-height: 1.45; color: #333; }
.crs-stars-s { color: #D8D2C8; font-size: 18px; letter-spacing: 2px; font-style: normal; }
.crs-stars-s i { font-style: normal; } .crs-stars-s i.is-on { color: var(--crs-accent); }
.crs-stars { display: flex; gap: 2px; }
.crs-stars button { width: 48px; height: 48px; border: 0; background: none; cursor: pointer; font-size: 32px; line-height: 1; color: #D8D2C8; padding: 0; font-family: inherit; }
.crs-stars button.is-on { color: var(--crs-accent); }
.crs-review-field textarea { width: 100%; box-sizing: border-box; min-height: 110px; padding: 14px 16px; border: 1px solid var(--crs-ink); background: #FBF9F6; font-family: var(--crs-serif); font-size: 19px; line-height: 1.5; resize: vertical; outline: none; color: var(--crs-ink); }
.crs-review-field textarea::placeholder { color: #8a857d; }
.crs-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.crs-review-actions .crs-textlink { border: 0; background: none; padding: 0; min-height: 44px; color: var(--crs-muted2); font-family: 'Jost', sans-serif; font-size: 13px; cursor: pointer; }
.crs-review-thanks { display: flex; gap: 18px; align-items: center; }
.crs-review-thanks .crs-review-star { font-size: 40px; color: var(--crs-accent); line-height: 1; }
.crs-review-thanks div { display: flex; flex-direction: column; gap: 4px; }
.crs-review-thanks .crs-serif { font-size: 26px; } .crs-review-thanks .crs-serif-i { font-size: 19px; color: #444; }
.crs-finale .crs-complete-dek { max-width: 600px; font-size: 25px; }
.crs-finale-circle { position: relative; width: 440px; max-width: 100%; aspect-ratio: 1; margin-top: 14px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--crs-blush); animation: crs-pop .5s ease-out both; }
.crs-finale-circle img { position: relative; width: 75%; display: block; margin-bottom: -7%; }
.crs-finale-title { font-size: clamp(48px, 8vw, 88px); margin-top: 30px; }
.crs-finale .crs-minibadges-c { margin-top: 40px; }
.crs-finale .crs-minibadges-c img { height: 68px; max-width: 52px; } .crs-finale .crs-minibadges-c img.is-main { height: 92px; max-width: 74px; }
.crs-actions-finale { margin-top: 32px; }
.crs-btn-share { display: inline-flex; align-items: center; gap: 10px; }
.crs-share-veil { z-index: 90; }
.crs-share { position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1060px; max-width: calc(100% - 32px); height: 780px; max-height: calc(100vh - 40px); background: #fff; display: flex; box-shadow: 0 30px 80px rgba(0,0,0,0.3); text-align: left; }
.crs-share-grip { display: none; }
.crs-share-preview { width: 460px; flex: none; background: var(--crs-paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.crs-share-frame { position: relative; width: 356px; max-width: 80%; aspect-ratio: 9 / 16; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.15); background: #eee; transition: aspect-ratio .2s; }
.crs-share-frame.is-post { aspect-ratio: 4 / 5; }
.crs-share-frame img { position: absolute; left: 0; bottom: 0; width: 100%; display: block; }
.crs-share-cap { position: absolute; left: 0; right: 0; top: 22%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 30px; pointer-events: none; }
.crs-share-frame.is-post .crs-share-cap { top: 9%; }
.crs-share-cap span { background: var(--crs-ink); color: #fff; font-weight: 600; font-size: 15px; padding: 3px 9px; border-radius: 6px; font-family: 'Jost', sans-serif; }
.crs-share-captoggle { font-size: 13px; color: #555; min-height: 36px; }
.crs-share-side { flex: 1; min-width: 0; padding: 34px 38px 32px; display: flex; flex-direction: column; gap: 18px; overflow: auto; }
.crs-share-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.crs-share-head .crs-h2-serif { font-size: 38px; margin-top: 4px; }
.crs-share-lead { margin: 0; font-size: 19px; line-height: 1.45; color: #444; }
.crs-share-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.crs-share-thumbs button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px; border: 2px solid #E4E1DC; background: #fff; cursor: pointer; font-family: 'Jost', sans-serif; color: var(--crs-ink); }
.crs-share-thumbs button.is-on { border-color: var(--crs-ink); }
.crs-share-thumbs img { width: 92px; height: 163px; object-fit: cover; display: block; background: #eee; }
.crs-share-thumbs span { font-size: 12px; line-height: 1.25; text-align: center; }
.crs-share-stereo { margin: 0; padding: 12px 14px; background: var(--crs-blush); font-size: 14px; line-height: 1.45; color: #333; }
.crs-share-fmt { display: flex; align-items: center; gap: 14px; }
.crs-share-fmt > div { display: flex; gap: 4px; background: var(--crs-paper); padding: 4px; }
.crs-share-fmt button { min-height: 38px; padding: 0 14px; border: 0; background: none; font-family: 'Jost', sans-serif; font-size: 14px; cursor: pointer; color: var(--crs-ink); }
.crs-share-fmt button.is-on { background: #fff; }
.crs-share-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.crs-share-actions .crs-btn { display: inline-flex; align-items: center; gap: 10px; width: auto; }
.crs-share-hint { font-size: 13px; color: var(--crs-muted); }
.crs-eye-note { min-height: 1.4em; }
@media (max-width: 760px) {
  .crs-review { margin-top: 40px; padding: 22px 18px; }
  .crs-review-h { font-size: 28px; } .crs-review-lead { font-size: 17px; }
  .crs-stars { justify-content: space-between; }
  .crs-review-actions .crs-btn { width: 100%; }
  .crs-review-actions .crs-textlink { width: 100%; text-align: center; }
  .crs-finale-circle { width: 320px; }
  .crs-finale-title { font-size: 46px; line-height: 1; }
  .crs-share { top: auto; left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: none; height: auto; max-height: 92vh; border-radius: 16px 16px 0 0; flex-direction: column; overflow: auto; }
  .crs-share-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: #CFC7BA; margin: 10px auto 0; flex: none; }
  /* the sheet's order on a phone (mock m14): title → the card → thumbs → format → buttons; the side column dissolves into the sheet */
  .crs-share-side { display: contents; }
  .crs-share-head { order: 1; padding: 10px 20px 0; }
  .crs-share-preview { order: 2; width: 100%; background: #fff; padding: 14px 0 0; gap: 8px; }
  .crs-share-frame { width: 254px; max-width: 70%; }
  .crs-share-captoggle { display: none; }
  .crs-share-lead { order: 3; font-size: 14px; color: var(--crs-muted); text-align: center; margin: 10px 20px 0; }
  .crs-share-head .crs-h2-serif { font-size: 28px; }
  .crs-share-thumbs { order: 4; display: flex; overflow-x: auto; gap: 10px; margin: 12px 0 0; padding: 0 20px 4px; scrollbar-width: none; }
  .crs-share-thumbs::-webkit-scrollbar { display: none; }
  .crs-share-thumbs button { flex: 0 0 auto; } .crs-share-thumbs img { width: 64px; height: 114px; }
  .crs-share-stereo { order: 5; margin: 10px 20px 0; }
  .crs-share-fmt { order: 6; margin: 12px 20px 0; }
  .crs-share-actions { order: 7; margin: 14px 0 0; padding: 0 20px 24px; flex-direction: column; align-items: stretch; }
  .crs-share-actions .crs-btn { width: 100%; justify-content: center; }
  .crs-share-hint { display: none; }
}