/* BOSS WORK - chsel.css : NEW GAME's chapter select (js/chsel.js), played on the title's theatre.
 * The logo and menu step aside (#screen-title.cs-open), a scrim comes up, a deck lands mid-stage and deals the cards out, each
 * flipping face up. Every card is a 3D object:
 *   .cs-card   (perspective; the deal / gather / pick moves; the rest tilt; the soft floor shadow)
 *   .cs-tilt   (leans toward the pointer: --px / --py in -1..1, set by js/chsel.js)
 *   .cs-flip   (the flip: face <-> back)
 *   .cs-face   (a candy-stripe rim in the chapter's colours; badge, ribbon nameplate, prop and buttons on their own Z planes;
 *               the cover art's layers .lf/.lm/.ln slide against the tilt; a rainbow ring runs round it on hover)
 * .cs-rec marks the likely pick (it breathes and glows). Locked covers sit dark and blurred under a padlock.
 * Reduced motion: fades only, cover loops paused. */

@property --cs-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- the title steps aside ---------- */
#screen-title > .tt-title, #screen-title > .tt-menu, #screen-title > .tt-intro, #screen-title > .tt-intro-pick {
  transition: opacity .38s ease, translate .55s cubic-bezier(.5,0,.3,1), scale .55s cubic-bezier(.5,0,.3,1), filter .4s; }
#screen-title.cs-open > .tt-title { opacity: 0; translate: 0 -140px; scale: .8; filter: blur(4px); pointer-events: none; }
#screen-title.cs-open > .tt-menu { opacity: 0; translate: -160px 40px; scale: .92; filter: blur(3px); pointer-events: none; }
html[dir=rtl] #screen-title.cs-open > .tt-menu { translate: 160px 40px; }
#screen-title.cs-open > .tt-intro, #screen-title.cs-open > .tt-intro-pick { opacity: 0; translate: 0 40px; pointer-events: none; }

/* ---------- the layer ---------- */
.cs { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 0 40px 6px; }
.cs-scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(ellipse 75% 62% at 50% 58%, rgba(60,14,40,.55), rgba(18,3,12,.9));
  -webkit-backdrop-filter: blur(4px) saturate(.8); backdrop-filter: blur(4px) saturate(.8); }
.cs-scrim::after { content: ''; position: absolute; left: 50%; bottom: 40px; width: 1100px; height: 170px; translate: -50% 0;
  background: radial-gradient(ellipse at center, rgba(255,226,170,.24), transparent 70%); }
.cs.cs-in .cs-scrim { opacity: 1; }
.cs.cs-out .cs-scrim { opacity: 0; transition-delay: .25s; }
.cs-flash { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: #1e0712; }
@keyframes cs-flash { to { opacity: 1; } }

.cs-head { position: relative; z-index: 2; width: 100%; max-width: 1180px; display: flex; align-items: center; justify-content: center; min-height: 60px; }
.cs-title { margin: 0; font: 400 50px/1 var(--font-display); letter-spacing: .01em; color: #3a2433; -webkit-text-stroke: 9px #3a2433; paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 #3a2433) drop-shadow(5px 7px 0 #ff6f9a); transform: rotate(-2deg); }
.cs-tw { display: inline-block; position: relative; color: #3a2433; }
.cs-tw::after { content: 'Pick a chapter'; position: absolute; left: 0; top: 0; -webkit-text-stroke: 0; color: transparent;
  background: linear-gradient(180deg, #fff7f0 0 58%, #ffd0e2 58% 100%); -webkit-background-clip: text; background-clip: text; }
html[lang=ar] .cs-tw::after { content: none; }
html[lang=ar] .cs-tw { color: #fff7f0; }
.cs-back { position: absolute; inset-inline-start: 0; top: 50%; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px 0 12px; margin-top: -25px;
  border: 3px solid #3a2433; border-radius: 999px; background: #fff7f0; color: #3a2433; font: 900 16px/1 var(--font-ui); letter-spacing: .06em; cursor: pointer;
  box-shadow: 0 5px 0 #3a2433; transition: transform .22s cubic-bezier(.3,1.7,.5,1), box-shadow .12s, background-color .12s; }
.cs-back .cs-arrow { width: 22px; height: 22px; border-radius: 50%; background: #ff6f9a; border: 2.5px solid #3a2433; position: relative; }
.cs-back .cs-arrow::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: solid #fff7f0; border-width: 0 0 3px 3px; transform: translate(-30%, -50%) rotate(45deg); }
html[dir=rtl] .cs-back .cs-arrow::after { transform: translate(-70%, -50%) rotate(-135deg); }
.cs-back:hover, .cs-back:focus-visible { transform: translateY(-3px) rotate(-3deg); background: #ffe9a3; box-shadow: 0 8px 0 #3a2433; }
.cs-back:active { transform: translateY(3px); box-shadow: 0 2px 0 #3a2433; }
.cs-back:focus-visible { outline: 3px solid #ffd76a; outline-offset: 3px; }

/* ---------- the card: perspective, rest tilt, lift, floor shadow ---------- */
.cs-row { position: relative; z-index: 1; width: 100%; max-width: 1200px; display: flex; justify-content: center; align-items: flex-start; gap: 18px; }
.cs-card { --tone: #ffd8c2; --deep: #ff8a5c; --tilt: -1.8deg; --px: 0; --py: 0; position: relative; flex: 0 1 184px; min-width: 0; perspective: 820px;
  rotate: var(--tilt); transition: translate .32s cubic-bezier(.3,1.5,.5,1), rotate .32s cubic-bezier(.3,1.5,.5,1), scale .32s cubic-bezier(.3,1.5,.5,1); }
.cs-card:nth-child(even) { --tilt: 1.6deg; }
.cs-card:nth-child(3n) { --tilt: -.8deg; }
.cs-card::after { content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -18px; height: 26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10,0,6,.6), transparent 70%); translate: calc(var(--px) * -10px) 0;
  transition: scale .32s, opacity .32s, translate .2s; }
.cs-card.cs-hot, .cs-card:focus-within { z-index: 3; rotate: 0deg; translate: 0 -16px; scale: 1.07; }
.cs-card.cs-hot::after, .cs-card:focus-within::after { scale: 1.12 1.3; opacity: .7; translate: calc(var(--px) * -16px) 16px; }

.cs-tilt { position: relative; transform-style: preserve-3d; transform: rotateY(calc(var(--px) * 16deg)) rotateX(calc(var(--py) * -13deg));
  transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
.cs-hot > .cs-tilt { transition: transform .12s ease-out; }
.cs-flip { position: relative; transform-style: preserve-3d; }
.cs-face, .cs-rear { border: 3px solid #3a2433; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* the face: a candy-stripe rim in the chapter's colours around a cream inner panel */
.cs-c1 { --tone: #ffd8c2; --deep: #ff8a5c; }
.cs-c2 { --tone: #bfe4ff; --deep: #3d9be0; }
.cs-c3 { --tone: #ffc8dd; --deep: #ff4f86; }
.cs-c4 { --tone: #d6c8ff; --deep: #7a5cd6; }
.cs-final { --tone: #ffd66b; --deep: #c9821a; }
.cs-cot { --tone: #ffe9a3; --deep: #f0a019; }
.cs-face { position: relative; transform-style: preserve-3d; display: flex; flex-direction: column; padding: 7px;
  background: repeating-linear-gradient(-45deg, var(--tone) 0 9px, color-mix(in srgb, var(--tone), var(--deep) 32%) 9px 18px);
  box-shadow: 0 7px 0 #3a2433, inset 0 0 0 2px rgba(255,255,255,.55); }
.cs-panel { position: relative; transform-style: preserve-3d; display: flex; flex-direction: column; flex: 1 1 auto; border: 2.5px solid #3a2433; border-radius: 15px;
  background: radial-gradient(rgba(58,36,51,.06) 1px, transparent 1.5px) 0 0 / 7px 7px, #fff9f2; box-shadow: inset 0 -5px 0 rgba(58,36,51,.07); }
.cs-face > *, .cs-panel > *, .cs-go > *, .cs-cw > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cs-final .cs-face { background: repeating-linear-gradient(-45deg, #ffe07a 0 9px, #f5b733 9px 18px); }
.cs-final .cs-panel { background: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.5px) 0 0 / 7px 7px, linear-gradient(170deg, #fff4c4, #ffe08a); }
/* rivets in the rim's corners */
.cs-face::before { content: ''; position: absolute; inset: 0; border-radius: 19px; pointer-events: none; z-index: 1;
  background: radial-gradient(circle 3.5px at 12px 12px, #fff7f0 2.2px, #3a2433 2.6px, transparent 3.6px), radial-gradient(circle 3.5px at calc(100% - 12px) 12px, #fff7f0 2.2px, #3a2433 2.6px, transparent 3.6px),
    radial-gradient(circle 3.5px at 12px calc(100% - 12px), #fff7f0 2.2px, #3a2433 2.6px, transparent 3.6px), radial-gradient(circle 3.5px at calc(100% - 12px) calc(100% - 12px), #fff7f0 2.2px, #3a2433 2.6px, transparent 3.6px); }
/* the rainbow ring: runs round the card on hover / focus, breathes on the likely pick */
.cs-ring { position: absolute; inset: -11px; border-radius: 32px; padding: 6px; pointer-events: none; opacity: 0; transform: translateZ(-1px);
  background: conic-gradient(from var(--cs-ang), #ffd76a, #ff6f9a, #c9b6ff, #7fd0ff, #7fdcb0, #ffd76a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px rgba(255,236,170,.95)) drop-shadow(0 0 14px rgba(255,111,154,.6)); transition: opacity .25s; animation: cs-ang 2.4s linear infinite; }
@keyframes cs-ang { to { --cs-ang: 360deg; } }
.cs-hot .cs-ring, .cs-card:focus-within .cs-ring { opacity: 1; }
.cs.cs-in .cs-rec:not(.cs-hot):not(:focus-within) .cs-ring { animation: cs-ang 2.4s linear infinite, cs-breathe 2.2s ease-in-out 1.6s infinite; }
@keyframes cs-breathe { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
.cs.cs-in .cs-rec:not(.cs-hot):not(:focus-within) > .cs-tilt { animation: cs-hop 3.6s ease-in-out 2s infinite; }
@keyframes cs-hop { 0%, 80%, 100% { transform: none; } 86% { transform: translateY(-10px) rotateZ(-2deg); } 92% { transform: translateY(0) rotateZ(1deg); } }
.cs-locked .cs-ring { background: conic-gradient(from var(--cs-ang), #ece2ea, #9d8a98, #ece2ea); filter: none; }

/* sparkles that pop round a card under the pointer */
.cs-spark { position: absolute; z-index: 5; width: 16px; height: 16px; pointer-events: none; opacity: 0; background: #fff6c8;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 4px #ffd76a); transform: translateZ(50px); }
.cs-spark:nth-of-type(1) { top: 18%; right: -14px; }
.cs-spark:nth-of-type(2) { bottom: 22%; left: -12px; width: 12px; height: 12px; }
.cs-spark:nth-of-type(3) { top: -10px; left: 46%; width: 11px; height: 11px; }
.cs-hot .cs-spark, .cs-card:focus-within .cs-spark { animation: cs-spark 1.5s ease-in-out infinite; }
.cs-hot .cs-spark:nth-of-type(2), .cs-card:focus-within .cs-spark:nth-of-type(2) { animation-delay: .5s; }
.cs-hot .cs-spark:nth-of-type(3), .cs-card:focus-within .cs-spark:nth-of-type(3) { animation-delay: 1s; }
.cs-locked .cs-spark { display: none; }
@keyframes cs-spark { 0%, 100% { opacity: 0; scale: .2; rotate: 0deg; } 40% { opacity: 1; scale: 1.1; rotate: 45deg; } 70% { opacity: 0; scale: .5; rotate: 90deg; } }

/* the final card's foil: a rainbow sheen sweeping across now and then */
.cs-final:not(.cs-locked) .cs-panel::after { content: ''; position: absolute; inset: 0; border-radius: 13px; pointer-events: none; z-index: 2; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, #ff9fc2 42%, #bfe4ff 50%, #b9f0d6 58%, transparent 70%) 0 0 / 300% 100% no-repeat; animation: cs-foil 4.5s ease-in-out 1.6s infinite; }
@keyframes cs-foil { 0% { background-position: 120% 0; } 45%, 100% { background-position: -120% 0; } }

/* the back: the show's rose stripes, a dashed inner frame, the logo's clock at 5:00 */
.cs-rear { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 9px, transparent 9px 18px), linear-gradient(#ff93b5, #ff5a8c);
  box-shadow: 0 7px 0 #3a2433, inset 0 0 0 8px #ff5a8c, inset 0 0 0 10.5px rgba(255,247,240,.85); }
.cs-rear-emb { width: 60%; }
.cs-rear-emb svg { display: block; width: 100%; height: auto; }
.cs-rear-word { font: 400 22px/1 var(--font-display); color: #fff7f0; -webkit-text-stroke: 6px #3a2433; paint-order: stroke fill; text-shadow: 0 3px 0 #3a2433; }

/* ---------- the face's 3D planes ---------- */
.cs-badge { position: absolute; z-index: 4; top: -17px; inset-inline-start: -15px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: 3px solid #3a2433; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fff7f0 40%, #ffe3d0); box-shadow: 0 4px 0 #3a2433, 0 0 0 4px var(--deep) inset;
  font: 400 27px/1 var(--font-display); color: var(--deep); -webkit-text-stroke: 5px #3a2433; paint-order: stroke fill;
  transform: translateZ(40px) rotate(-12deg); pointer-events: none; transition: transform .45s cubic-bezier(.3,1.7,.5,1); }
.cs-hot .cs-badge, .cs-card:focus-within .cs-badge { transform: translateZ(52px) rotate(6deg) scale(1.1); }
.cs-final .cs-badge { background: #3a2433; color: #ffd66b; box-shadow: 0 4px 0 #1a0f17, 0 0 0 3px #ffd66b inset; }
.cs-locked .cs-badge { color: #b8a9b6; background: #efe7ed; box-shadow: 0 4px 0 #3a2433, 0 0 0 4px #cfc3cc inset; }

.cs-go { position: relative; display: flex; flex-direction: column; margin: 0; padding: 7px 7px 0; border: 0; background: none; color: #3a2433; text-align: start; cursor: pointer;
  font-family: var(--font-ui); transform-style: preserve-3d; border-radius: 14px; }
.cs-go:focus-visible, .cs-btn:focus-visible, .cs-sat:focus-visible { outline: 3px solid #ffd76a; outline-offset: 3px; border-radius: 12px; }
.cs-cw { position: relative; transform-style: preserve-3d; }
.cs-cover { position: relative; aspect-ratio: 200 / 214; border: 3px solid #3a2433; border-radius: 11px; overflow: hidden; background: #fff7f0; transform: translateZ(4px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.cs-cover .cs-art { display: block; width: 100%; height: 100%; scale: 1.1; transition: scale .5s cubic-bezier(.3,1.4,.5,1), filter .3s; }
.cs-hot .cs-cover .cs-art, .cs-card:focus-within .cs-cover .cs-art { scale: 1.16; }
/* the window effect: far moves with the lean, near against it */
.cs-art .lf, .cs-art .lm, .cs-art .ln { transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.cs-hot .cs-art .lf, .cs-hot .cs-art .lm, .cs-hot .cs-art .ln { transition-duration: .14s; transition-timing-function: ease-out; }
.cs-art .lf { transform: translate(calc(var(--px) * 8px), calc(var(--py) * 6px)); }
.cs-art .lm { transform: translate(calc(var(--px) * 1.5px), calc(var(--py) * 1px)); }
.cs-art .ln { transform: translate(calc(var(--px) * -8px), calc(var(--py) * -6px)); }
.cs-gloss { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: radial-gradient(circle at calc(50% + var(--px) * 45%) calc(45% + var(--py) * 45%), rgba(255,255,255,.95), rgba(255,255,255,0) 55%); }
.cs-hot .cs-gloss, .cs-card:focus-within .cs-gloss { opacity: 1; }
.cs-cover::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-120%) skewX(-16deg); }
.cs-card.cs-hot:not(.cs-locked) .cs-cover::after { animation: cs-sheen .75s ease-out; }
@keyframes cs-sheen { 0% { opacity: 1; transform: translateX(-120%) skewX(-16deg); } 100% { opacity: 1; transform: translateX(330%) skewX(-16deg); } }

/* the prop: breaks out of the frame's corner, nearest of all */
.cs-prop { position: absolute; z-index: 3; right: -20px; top: -22px; width: 56px; height: 56px; pointer-events: none;
  transform: translateZ(46px) rotate(9deg); filter: drop-shadow(0 4px 0 rgba(58,36,51,.9)) drop-shadow(0 10px 8px rgba(30,4,14,.3));
  transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.cs-prop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cs-hot .cs-prop, .cs-card:focus-within .cs-prop { transform: translateZ(60px) rotate(-6deg) scale(1.14); }
.cs-prop-3 { height: 68px; top: -28px; }
.cs-prop-ot { width: 62px; height: 62px; }

/* the ribbon nameplate across the cover's foot, then the small print */
.cs-meta { display: flex; flex-direction: column; align-items: center; padding: 0 2px 8px; min-width: 0; text-align: center; transform: translateZ(22px); }
.cs-name { order: -1; position: relative; z-index: 2; margin: -22px -16px 6px; padding: 7px 20px 8px; max-width: calc(100% + 32px); white-space: nowrap;
  font: 400 21px/1 var(--font-display); letter-spacing: .01em; color: #fff7f0; -webkit-text-stroke: 5px #3a2433; paint-order: stroke fill; text-shadow: 0 3px 0 #3a2433;
  background: linear-gradient(var(--deep), color-mix(in srgb, var(--deep), #3a2433 22%));
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
  filter: drop-shadow(0 3px 0 #3a2433); transform: rotate(-2deg); }
/* the ribbon's ink edge (the clip-path eats a border, so a second notched layer sits behind it) */
.cs-name::before { content: ''; position: absolute; inset: 2px 4px; z-index: -1; border-top: 2px solid rgba(255,255,255,.45); border-bottom: 2px solid rgba(0,0,0,.15); }
.cs-c3 .cs-name, .cs-final .cs-name { font-size: 18px; }
.cs-final .cs-name { color: #ffe36a; background: linear-gradient(#4a3044, #2a1824); }
.cs-num { font: 900 10px/1.1 var(--font-ui); letter-spacing: .18em; color: color-mix(in srgb, var(--deep), #3a2433 45%); }
.cs-at { margin-top: 2px; font: 800 9.5px/1.1 var(--font-ui); letter-spacing: .14em; color: rgba(58,36,51,.6); }
.cs-locked .cs-name { color: #efe7ed; background: linear-gradient(#8d7a89, #6e5a68); letter-spacing: .1em; }

.cs-state, .cs-acts, .cs-sats, .cs-hint { transform: translateZ(14px); }
.cs-state { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 9px 9px; padding: 6px 10px 5px; border-radius: 999px;
  background: #fff; border: 2px solid rgba(58,36,51,.25); font: 900 10.5px/1 var(--font-ui); letter-spacing: .14em; color: #3a2433; }
.cs-state.cs-new { justify-content: center; background: #ff4f86; border-color: #3a2433; color: #fff; box-shadow: 0 3px 0 #3a2433; }
.cs-state.cs-new span { animation: cs-throb 1.8s ease-in-out infinite; }
@keyframes cs-throb { 50% { transform: scale(1.12); } }
.cs-stars { font-size: 13px; letter-spacing: 1px; color: rgba(58,36,51,.22); }
.cs-stars .on { color: #ffb51f; text-shadow: 0 1px 0 #3a2433; }

.cs-acts { display: flex; gap: 6px; margin: 0 8px 9px; }
.cs-btn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 40px; padding: 0 6px;
  border: 2.5px solid #3a2433; border-radius: 12px; background: #fff7f0; color: #3a2433; font: 900 13px/1 var(--font-ui); letter-spacing: .03em; cursor: pointer;
  box-shadow: 0 3px 0 #3a2433; transition: transform .2s cubic-bezier(.3,1.7,.5,1), box-shadow .1s, background-color .15s, color .15s; }
.cs-btn small { font: 800 9px/1 var(--font-ui); letter-spacing: .14em; opacity: .85; }
.cs-cont { flex-grow: 2; background: #ff6f9a; color: #fff7f0; text-shadow: 0 1px 0 #3a2433; }
.cs-redo { flex: 0 1 auto; font-size: 11.5px; }
.cs-redo.cs-sure { background: #ff4f6a; color: #fff7f0; animation: cs-nudge .4s; }
@keyframes cs-nudge { 25% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } }
.cs-btn:hover, .cs-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 5px 0 #3a2433; }
.cs-redo:not(.cs-sure):hover, .cs-redo:not(.cs-sure):focus-visible { background: #ffe9a3; }
.cs-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a2433; }

/* OVERTIME: one Saturday stamp per week */
.cs-sats { display: flex; justify-content: space-between; gap: 4px; margin: 0 8px 9px; }
.cs-sat { flex: 1 1 0; min-width: 0; height: 40px; padding: 4px; border: 2.5px solid #3a2433; border-radius: 12px; background: #fff7f0; cursor: pointer; box-shadow: 0 3px 0 #3a2433;
  transition: transform .2s cubic-bezier(.3,1.7,.5,1), box-shadow .1s, background-color .1s; }
.cs-sat .tt-ico, .cs-sat .ico-svg { display: block; width: 100%; height: 100%; }
.cs-sat:hover, .cs-sat:focus-visible { transform: translateY(-3px) rotate(-4deg); background: #ffd66b; box-shadow: 0 5px 0 #3a2433; }
.cs-sat:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a2433; }
.cs-sats.cs-wake .cs-sat { animation: cs-wake .5s cubic-bezier(.3,1.7,.5,1) backwards; }
.cs-sats.cs-wake .cs-sat:nth-child(2) { animation-delay: .06s; } .cs-sats.cs-wake .cs-sat:nth-child(3) { animation-delay: .12s; } .cs-sats.cs-wake .cs-sat:nth-child(4) { animation-delay: .18s; }
@keyframes cs-wake { 40% { transform: translateY(-8px) scale(1.12); } }

/* ---------- locked ---------- */
.cs-locked { --tone: #e4d9e2; --deep: #9d8a98; }
.cs-locked .cs-face { background: repeating-linear-gradient(-45deg, #e4d9e2 0 9px, #d3c6d0 9px 18px); }
.cs-locked .cs-panel { background: #f4eef2; }
.cs-locked .cs-art { filter: grayscale(1) brightness(.22) blur(4px); }
.cs-locked .cs-art * { animation-play-state: paused !important; }
.cs-locked .cs-go { cursor: default; }
.cs-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cs-lock .cs-lock-ico { width: 46%; height: auto; filter: drop-shadow(0 4px 0 #3a2433) drop-shadow(0 0 14px rgba(255,159,194,.35)); transform: rotate(-8deg); }
.cs-shackle { transition: transform .2s; }
.cs-hot .cs-lock-ico { animation: cs-lockbob 1.6s ease-in-out infinite; }
@keyframes cs-lockbob { 50% { transform: rotate(-4deg) translateY(-3px); } }
.cs-deny .cs-lock-ico { animation: cs-rattle .5s ease-out; }
.cs-deny .cs-shackle { transform: translateY(-3px); }
@keyframes cs-rattle { 15% { transform: rotate(-22deg); } 35% { transform: rotate(10deg); } 55% { transform: rotate(-16deg); } 75% { transform: rotate(-4deg); } 100% { transform: rotate(-8deg); } }
.cs-hint { display: flex; flex-direction: column; gap: 5px; margin: 0 8px 9px; padding: 7px 9px 6px; border-radius: 11px; background: #fff; border: 2px dashed rgba(58,36,51,.35);
  font: 800 11px/1.15 var(--font-ui); color: #3a2433; letter-spacing: .02em; transition: background-color .3s, border-color .3s; }
.cs-hint small { font: 900 10px/1 var(--font-ui); letter-spacing: .12em; color: rgba(58,36,51,.7); }
.cs-bar { height: 10px; border-radius: 999px; border: 2px solid #3a2433; background: #fff7f0; overflow: hidden; }
.cs-bar i { display: block; height: 100%; min-width: 4px; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.3) 0 4px, transparent 4px 8px), linear-gradient(90deg, #ff6f9a, #ffd66b);
  border-inline-end: 2px solid #3a2433; transform-origin: 0 50%; }
.cs.cs-in .cs-bar i { animation: cs-fill .9s cubic-bezier(.3,1.2,.5,1) both; animation-delay: calc(1.05s + var(--i) * .085s); }
@keyframes cs-fill { from { transform: scaleX(0); } }
.cs-pips { display: flex; gap: 4px; }
.cs-pips i { flex: 1 1 0; height: 10px; border-radius: 999px; border: 2px solid #3a2433; background: #fff7f0; }
.cs-pips i.on { background: #ffd66b; }
.cs.cs-in .cs-card.cs-deny { animation: cs-deny .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes cs-deny { 15% { translate: -9px -16px; } 35% { translate: 8px -16px; } 55% { translate: -5px -16px; } 75% { translate: 3px -16px; } 100% { translate: 0 -16px; } }
.cs-deny .cs-hint { background: #ffe9a3; border-color: #3a2433; }

/* ---------- comings and goings ---------- */
.cs .cs-head, .cs .cs-card { opacity: 0; }
.cs.cs-in .cs-head { opacity: 1; animation: cs-head-in .6s cubic-bezier(.2,1.3,.4,1) .1s backwards; }
@keyframes cs-head-in { from { opacity: 0; transform: translateY(-60px) scale(.85) rotate(4deg); } }
.cs.cs-in .cs-card { opacity: 1; animation: cs-deal 1s cubic-bezier(.3,.9,.35,1) backwards; animation-delay: calc(.12s + var(--i) * .085s); }
.cs.cs-in .cs-flip { animation: cs-flip-in 1s cubic-bezier(.3,1.3,.5,1) backwards; animation-delay: calc(.12s + var(--i) * .085s); }
@keyframes cs-deal {
  0% { opacity: 0; translate: var(--dx) calc(var(--dy) + 460px); rotate: var(--r0); scale: .82; }
  10% { opacity: 1; }
  34% { translate: var(--dx) var(--dy); rotate: var(--r0); scale: .9; }
  72% { translate: 0 -20px; rotate: 0deg; scale: 1.03; }
  100% { opacity: 1; translate: 0 0; rotate: var(--tilt); scale: 1; }
}
@keyframes cs-flip-in { 0%, 46% { transform: rotateY(180deg); } 84% { transform: rotateY(-14deg); } 100% { transform: rotateY(0deg); } }
.cs-art .a-draw { stroke-dasharray: 100; stroke-dashoffset: 0; }
.cs.cs-in .cs-art .a-draw { animation: cs-draw .7s ease-out both; animation-delay: calc(1.05s + var(--i) * .085s); }
@keyframes cs-draw { from { stroke-dashoffset: 100; } }

.cs.cs-out .cs-head { animation: cs-head-out .32s ease-in both; }
@keyframes cs-head-out { to { opacity: 0; transform: translateY(-50px) scale(.9); } }
.cs.cs-out .cs-card { animation: cs-gather .62s cubic-bezier(.5,0,.6,1) both; animation-delay: calc((5 - var(--i)) * .035s); }
.cs.cs-out .cs-flip { animation: cs-flip-out .62s ease-in both; animation-delay: calc((5 - var(--i)) * .035s); }
@keyframes cs-gather {
  0% { translate: 0 0; rotate: var(--tilt); opacity: 1; }
  55% { translate: var(--dx) var(--dy); rotate: var(--r0); scale: .9; opacity: 1; }
  100% { translate: var(--dx) calc(var(--dy) + 460px); rotate: var(--r0); scale: .82; opacity: 0; }
}
@keyframes cs-flip-out { 0% { transform: rotateY(0deg); } 40%, 100% { transform: rotateY(180deg); } }

.cs.cs-going .cs-head { animation: cs-head-out .3s ease-in both; }
.cs.cs-going .cs-card:not(.cs-picked) { animation: cs-fall .5s cubic-bezier(.5,0,.8,.6) both; animation-delay: calc(var(--i) * .03s); }
@keyframes cs-fall { to { opacity: 0; translate: 0 420px; rotate: calc(var(--r0) * 3); } }
.cs.cs-going .cs-picked { z-index: 5; animation: cs-picked .8s cubic-bezier(.3,1.25,.5,1) both; }
.cs.cs-going .cs-picked > .cs-tilt { transform: none; animation: none; }
.cs.cs-going .cs-picked .cs-ring { opacity: 1; }
@keyframes cs-picked {
  0% { translate: 0 -16px; scale: 1.07; rotate: 0deg; }
  70% { translate: var(--dx) calc(var(--dy) - 10px); scale: 1.22; rotate: -2deg; }
  100% { translate: var(--dx) var(--dy); scale: 1.2; rotate: 0deg; }
}
.cs.cs-going .cs-picked .cs-prop, .cs.cs-going .cs-picked .cs-badge { transition: opacity .3s .3s; opacity: 0; }

/* ---------- the portal (js/chsel.js portal()): on #stage above everything, the cover opens out to the whole stage ---------- */
.cs-portal { position: absolute; inset: 0; z-index: 500; pointer-events: none; overflow: hidden; }
/* behind the card: the chapter's colour with slow rays turning */
.cs-pbg { position: absolute; inset: 0; opacity: 0; will-change: opacity; background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--deep), #fff 30%), color-mix(in srgb, var(--deep), #2a1420 55%) 80%);
  transition: opacity .8s ease .1s; overflow: hidden; }
.cs-prays { position: absolute; left: 50%; top: 50%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgba(255,247,240,.55) 0 7deg, transparent 7deg 18deg); animation: cs-spin-css 40s linear infinite; }
@keyframes cs-spin-css { to { transform: rotate(360deg); } }
.cs-p-open .cs-pbg { opacity: 1; }
.cs-pw { position: absolute; overflow: hidden; border: 0 solid #3a2433; background: #2a1420; box-shadow: 0 0 0 #3a2433, 0 0 0 rgba(20,0,10,0); transition: box-shadow .9s ease; }
.cs-p-open .cs-pw { box-shadow: 0 14px 0 #3a2433, 0 40px 90px rgba(20,0,10,.55); }
.cs-pw .cs-art { display: block; width: 100%; height: 100%; }
/* the dolly: as the window opens the camera pushes in, near layers a little faster than far ones */
.cs-pw .lf, .cs-pw .lm, .cs-pw .ln { transform-origin: 100px 110px; transform-box: view-box; }
.cs-p-open .cs-pw .lf { animation: cs-dolly-f 3.4s cubic-bezier(.3,0,.2,1) both; }
.cs-p-open .cs-pw .lm { animation: cs-dolly-m 3.4s cubic-bezier(.3,0,.2,1) both; }
.cs-p-open .cs-pw .ln { animation: cs-dolly-n 3.4s cubic-bezier(.3,0,.2,1) both; }
@keyframes cs-dolly-f { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes cs-dolly-m { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes cs-dolly-n { from { transform: scale(1); } to { transform: scale(1.16) translateY(4px); } }
.cs-pvig { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease .5s; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 45%, rgba(30,6,18,.5)); }
.cs-p-open .cs-pvig { opacity: 1; }
/* the title stamps on */
.cs-pt { position: absolute; left: 50%; top: 74%; display: flex; flex-direction: column; align-items: center; gap: 10px; translate: -50% -50%; opacity: 0; text-align: center; white-space: nowrap; }
.cs-pt small { padding: 5px 14px 4px; border-radius: 999px; background: #fff7f0; border: 3px solid #3a2433; box-shadow: 0 4px 0 #3a2433;
  font: 900 15px/1 var(--font-ui); letter-spacing: .24em; color: #3a2433; }
.cs-pt b { padding: 14px 54px 18px; font: 400 76px/1 var(--font-display); letter-spacing: .01em; color: #fff7f0; -webkit-text-stroke: 11px #3a2433; paint-order: stroke fill; text-shadow: 0 7px 0 #3a2433;
  background: linear-gradient(var(--deep), color-mix(in srgb, var(--deep), #3a2433 25%)); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 50%, 100% 100%, 0 100%, 26px 50%);
  filter: drop-shadow(0 6px 0 #3a2433); rotate: -3deg; }
.cs-pt span { padding: 6px 14px 5px; border-radius: 999px; background: #3a2433; font: 900 14px/1 var(--font-ui); letter-spacing: .22em; color: #fff7f0; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.cs-p-title .cs-pt { opacity: 1; }
.cs-p-title .cs-pt small { animation: cs-pt-in .45s cubic-bezier(.3,1.7,.5,1) .12s backwards; }
.cs-p-title .cs-pt b { animation: cs-stamp .55s cubic-bezier(.2,1.6,.4,1) backwards; }
.cs-p-title .cs-pt span { animation: cs-pt-in .45s cubic-bezier(.3,1.7,.5,1) .22s backwards; }
@keyframes cs-stamp { 0% { scale: 2.6; opacity: 0; rotate: -12deg; } 55% { scale: .92; opacity: 1; rotate: -2deg; } 100% { scale: 1; rotate: -3deg; } }
@keyframes cs-pt-in { from { opacity: 0; translate: 0 18px; scale: .7; } }
/* a slow chapter load: three dots under the title */
.cs-pload { position: absolute; left: 50%; bottom: 70px; display: flex; gap: 10px; translate: -50% 0; opacity: 0; transition: opacity .3s; }
.cs-pload i { width: 14px; height: 14px; border-radius: 50%; background: #fff7f0; border: 3px solid #3a2433; animation: cs-dot 1s ease-in-out infinite; }
.cs-pload i:nth-child(2) { animation-delay: .15s; } .cs-pload i:nth-child(3) { animation-delay: .3s; }
@keyframes cs-dot { 50% { translate: 0 -10px; } }
.cs-p-wait .cs-pload { opacity: 1; }
/* the reveal: the title lifts away, the picture pushes past the camera and dissolves onto what plays next */
.cs-p-out .cs-pt { transition: opacity .35s ease-in, translate .45s cubic-bezier(.6,0,.8,.4); opacity: 0; translate: -50% -90%; }
.cs-p-out .cs-pload { opacity: 0; }
.cs-p-out .cs-pw { transition: opacity .55s ease-in .3s, scale .85s cubic-bezier(.6,0,.75,.3), filter .6s ease-in .25s; opacity: 0; scale: 3.2; filter: blur(8px); }
.cs-p-out .cs-pbg, .cs-p-out .cs-pvig { transition: opacity .45s ease-in; opacity: 0; }
html.portrait .cs-pt { top: 70%; }
html.portrait .cs-pt b { font-size: 70px; padding-inline: 44px; }
@media (prefers-reduced-motion: reduce) {
  .cs-pw .lf, .cs-pw .lm, .cs-pw .ln, .cs-pt b, .cs-pt small, .cs-pt span { animation: none !important; }
  .cs-p-out .cs-pw, .cs-p-out .cs-pvig { scale: 1; filter: none; }
}

/* ---------- the covers' life (SVG; transform-origin in viewBox px, set inline where it matters) ---------- */
.cs-art .a-drift { animation: cs-drift 46s linear infinite; }
.cs-art .a-drift.a-slow2 { animation-duration: 80s; }
@keyframes cs-drift { to { transform: translateX(-200px); } }
.cs-art .a-spin { animation: cs-spin 22s linear infinite; }
.cs-art .a-spin.a-slow { animation-duration: 40s; }
.cs-art .a-unspin { animation: cs-spin 40s linear infinite reverse; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs-art .a-blink { animation: cs-blink 1.1s steps(1) infinite; }
@keyframes cs-blink { 50% { opacity: .15; } }
.cs-art .a-flap { animation: cs-rock 3.2s ease-in-out infinite; }
@keyframes cs-rock { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.cs-art .a-sway { animation: cs-rock 4.6s ease-in-out infinite; }
.cs-art .a-sway2 { animation: cs-sway2 5s ease-in-out infinite; }
@keyframes cs-sway2 { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.cs-art .a-flap2 { transform-box: fill-box; transform-origin: 50% 100%; animation: cs-wing .55s ease-in-out infinite alternate, cs-glide 9s ease-in-out infinite; }
@keyframes cs-wing { to { scale: 1 .55; } }
@keyframes cs-glide { 0%, 100% { translate: 0 0; } 50% { translate: 14px -5px; } }
.cs-art .a-puff { transform-box: fill-box; transform-origin: 50% 50%; animation: cs-puff 2.6s ease-out infinite; }
@keyframes cs-puff { 0% { transform: translate(0, 4px) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18px, -30px) scale(1.5); opacity: 0; } }
.cs-art .a-bob { animation: cs-bob 4.2s ease-in-out infinite; }
@keyframes cs-bob { 0%, 100% { transform: translateY(0) rotate(-1.3deg); } 50% { transform: translateY(3px) rotate(1.3deg); } }
.cs-art .a-wave { animation: cs-wave 3.4s linear infinite; }
.cs-art .a-wave2 { animation: cs-wave 2.6s linear infinite reverse; }
@keyframes cs-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.cs-art .a-glint { animation: cs-glint 2.2s ease-in-out infinite; }
@keyframes cs-glint { 50% { opacity: .2; } }
.cs-art .a-bob2 { animation: cs-bob2 3.4s ease-in-out infinite; }
@keyframes cs-bob2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-2deg); } }
.cs-art .a-flag { animation: cs-flag .7s ease-in-out infinite alternate; }
@keyframes cs-flag { to { transform: scaleX(.72) skewY(4deg); } }
.cs-art .a-chase { animation: cs-chase 1.32s linear infinite; }
@keyframes cs-chase { 0%, 100% { opacity: .35; } 15% { opacity: 1; } }
.cs-art .a-onair { animation: cs-onair 1.8s ease-in-out infinite; }
@keyframes cs-onair { 50% { opacity: .65; } }
.cs-art .a-beamL { animation: cs-beamL 5.2s ease-in-out infinite alternate; }
.cs-art .a-beamR { animation: cs-beamR 6.1s ease-in-out infinite alternate; }
@keyframes cs-beamL { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes cs-beamR { from { transform: rotate(8deg); } to { transform: rotate(-9deg); } }
.cs-art .a-tally, .cs-art .a-beacon { animation: cs-blink 1.4s steps(1) infinite; }
.cs-art .a-twinkle { animation: cs-twinkle 2.4s ease-in-out infinite; }
@keyframes cs-twinkle { 0%, 100% { transform: scale(.55); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
.cs-art .a-search { animation: cs-search 7s ease-in-out infinite alternate; }
@keyframes cs-search { from { transform: rotate(-22deg); } to { transform: rotate(14deg); } }
.cs-art .a-glow { animation: cs-glow 3s ease-in-out infinite; }
@keyframes cs-glow { 50% { opacity: .38; } }
.cs-art .c1-m, .cs-art .c1-h, .cs-art .c5-m, .cs-art .c5-h { transition: transform .55s cubic-bezier(.3,1.9,.5,1); }
.cs-hot .cs-art .c1-m, .cs-card:focus-within .cs-art .c1-m, .cs-hot .cs-art .c5-m, .cs-card:focus-within .cs-art .c5-m { transform: rotate(0deg) !important; }
.cs-hot .cs-art .c1-h, .cs-card:focus-within .cs-art .c1-h { transform: rotate(150deg) !important; }
.cs-hot .cs-art .c5-h, .cs-card:focus-within .cs-art .c5-h { transform: rotate(360deg) !important; }
.cs-prop .a-steam { animation: cs-steam 2.4s ease-in-out infinite; }
@keyframes cs-steam { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: .95; } 100% { transform: translateY(-6px); opacity: 0; } }
.cs-prop .a-clap { animation: cs-clap 2.8s ease-in-out infinite; }
@keyframes cs-clap { 0%, 60%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-16deg); } 78% { transform: rotate(0deg); } }
.cs-prop .a-press { animation: cs-press 2s ease-in-out infinite; }
@keyframes cs-press { 50% { fill: #ffe36a; } }
.cs-prop .a-ring { animation: cs-ring 2.6s linear infinite; }
@keyframes cs-ring { 0%, 34%, 100% { transform: rotate(0deg); } 3%, 11%, 19%, 27% { transform: rotate(-9deg); } 7%, 15%, 23%, 31% { transform: rotate(9deg); } }
.cs-prop .a-ringl { animation: cs-ringl 2.6s steps(1) infinite; }
@keyframes cs-ringl { 0% { opacity: 1; } 34%, 100% { opacity: 0; } }

/* ---------- portrait phones: three to a row ---------- */
html.portrait .cs { gap: 44px; padding: 0 24px; }
html.portrait .cs-title { font-size: 56px; }
html.portrait .cs-head { min-height: 140px; align-items: flex-end; }
html.portrait .cs-back { top: 0; margin-top: 0; height: 58px; font-size: 19px; }
html.portrait .cs-row { flex-wrap: wrap; gap: 44px 22px; }
html.portrait .cs-card { flex-basis: 200px; }
html.portrait .cs-name { font-size: 23px; }
html.portrait .cs-c3 .cs-name, html.portrait .cs-final .cs-name { font-size: 20px; }
html.portrait .cs-num, html.portrait .cs-at { font-size: 12px; }
html.portrait .cs-btn, html.portrait .cs-sat { height: 50px; }
html.portrait .cs-btn { font-size: 15px; }
html.portrait .cs-hint { font-size: 13px; }
html.portrait .cs-prop { width: 64px; height: 64px; }

@media (prefers-reduced-motion: reduce) {
  .cs.cs-in .cs-card, .cs.cs-in .cs-head { animation: tt-fade .3s backwards; }
  .cs.cs-in .cs-flip, .cs.cs-out .cs-flip { animation: none; }
  .cs.cs-out .cs-card, .cs.cs-out .cs-head, .cs.cs-going .cs-card, .cs.cs-going .cs-head { animation: cs-fade-out .25s both; }
  .cs-art *, .cs-prop *, .cs-ring, .cs-rec > .cs-tilt { animation: none !important; }
  .cs-tilt { transform: none !important; }
  #screen-title > .tt-title, #screen-title > .tt-menu { translate: none !important; scale: none !important; }
}
@keyframes cs-fade-out { to { opacity: 0; } }