/* ═══════════════════════════════════════════
   CHALLENGES — Music Analysis
   Used only by challenges.html (builds on styles.css)
═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   CHALLENGES THEME — its own "game" palette.
   This file only loads on challenges.html, so these
   colours don't change any other page.
═══════════════════════════════════════════ */
:root {
  --bg:        #f4f2ff;
  --card:      #ffffff;
  --card2:     #ede9fe;
  --amber:     #7c3aed;   /* main accent on this page: violet */
  --amber2:    #5b21b6;
  --amber-dim: #ede9fe;
  --surface:   #1e1b4b;   /* sidebar */
  --border:    rgba(49,46,129,.12);
  --t3:        #6b6990;
  --ch-ink:    #1e1b4b;   /* dark panels and buttons */
  --ch-line:   #ddd6fe;
  --ch-line2:  #c4b5fd;
  --ch-line3:  #a5a3c9;
  --ch-glow:   #22d3ee;   /* cyan highlight */
}
body {
  background:
    radial-gradient(circle at 12% 0%, #e9e4ff 0, transparent 38%),
    radial-gradient(circle at 100% 35%, #d5f7fd 0, transparent 32%),
    var(--bg);
  background-attachment: fixed;
}
.page-hero { border-bottom: 4px solid var(--ch-glow); }
.page-hero::before { background: linear-gradient(120deg, rgba(30,27,75,.94) 0%, rgba(91,33,182,.82) 55%, rgba(190,24,93,.62) 100%); }
.page-hero .hero-eyebrow { color: #67e8f9 !important; }
.tag { background: var(--amber); border-color: var(--amber2); }
.nav-page-link.active { color: #c4b5fd; border-left-color: #a78bfa; background: rgba(167,139,250,.14); }
.nav-sub-link.active { color: #67e8f9; border-left-color: var(--ch-glow); }
.section-rule h2 { background: linear-gradient(90deg, #5b21b6, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* ═══ HUB */
.ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.ch-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: var(--rule);
  border-top: 4px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem 1.1rem;
  color: var(--text);
  transition: transform .18s, box-shadow .18s;
}
.ch-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.ch-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.ch-num { font-family: var(--ff-brand); font-size: 2rem; color: var(--amber); line-height: 1; }
.ch-best { font-size: .72rem; font-weight: 700; background: #dcfce7; color: #166534; padding: .2rem .55rem; border-radius: 99px; }
.ch-card-type { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--t3); font-weight: 600; margin-bottom: .25rem; }
.ch-card h3 { font-size: 1.05rem; }
.ch-card p { font-size: .87rem; flex: 1; }
.ch-card .tag-row { margin: .7rem 0 .5rem; }
.ch-tag-level { background: #312e81; border-color: #1a1510; }
.ch-start { font-weight: 700; font-size: .88rem; color: var(--amber2); }
.ch-teacher-link { margin-top: 2.5rem; font-size: .8rem; }
.ch-teacher-link a { color: var(--t3); }

/* ═══ LAYOUT */
.ch-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 2.5rem; align-items: start; }
.ch-side { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ch-tip { margin-top: 0; }
.ch-step { display: flex; align-items: baseline; gap: .7rem; margin: 2rem 0 .3rem; }
.ch-step:first-child { margin-top: 0; }
.ch-step span { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: #fff; background: var(--amber); padding: .15rem .55rem; border-radius: 4px; white-space: nowrap; }
.ch-step h3 { margin: 0; }
.ch-help { font-size: .9rem; }
.ch-muted { color: var(--t3); font-size: .85rem; }
.ch-small { font-size: .78rem; margin-top: .3rem; }
.ch-note { font-size: .8rem; background: #fee2e2; color: #991b1b !important; padding: .5rem .75rem; border-radius: 6px; margin-top: .5rem; }
kbd { font-family: var(--ff-body); font-size: .78rem; background: var(--card2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35rem; }

/* ═══ PLAYER */
.ch-player-frame { position: relative; aspect-ratio: 16/9; background: var(--ch-ink); border-radius: var(--radius); overflow: hidden; }
.ch-player-frame iframe, .ch-player-frame .yt-slot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══ BUTTONS */
.ch-btn {
  font-family: var(--ff-heading); font-weight: 700; font-size: .92rem;
  background: var(--amber); color: #fff; border: 2px solid var(--amber);
  border-radius: 8px; padding: .55rem 1.1rem; cursor: pointer; transition: background .15s;
}
.ch-btn:hover { background: var(--amber2); border-color: var(--amber2); }
.ch-btn-ghost { background: transparent; color: var(--amber2); }
.ch-btn-ghost:hover { background: var(--amber-dim); color: var(--amber2); }
.ch-btn-big { font-size: 1.05rem; padding: .75rem 1.6rem; }
.ch-submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.locked .ch-submit #check { display: none; }

/* ═══ CHIPS & SLOTS (structure) */
.ch-palette { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1.1rem; }
.ch-chip {
  --c: var(--amber);
  font-family: var(--ff-heading); font-weight: 700; font-size: .9rem;
  background: var(--c); color: #fff; border: 2px solid transparent;
  border-radius: 8px; padding: .5rem 1rem; cursor: grab; user-select: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.18); transition: transform .12s;
}
.ch-chip:hover { transform: translateY(-2px); }
.ch-chip.selected { border-color: #1a1510; outline: 3px solid var(--amber-dim); transform: translateY(-2px); }
.ch-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; list-style: none; }
.ch-slot {
  --c: transparent;
  position: relative; min-height: 70px; padding: .5rem .7rem;
  border: 2px dashed var(--ch-line2); border-radius: 8px; background: var(--card);
  display: flex; flex-direction: column; justify-content: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ch-slot.over { border-color: var(--amber); background: var(--amber-dim); }
.ch-slot.filled { border-style: solid; border-color: var(--c); background: var(--c); }
.ch-slot-n { position: absolute; top: .3rem; left: .5rem; font-size: .7rem; font-weight: 700; color: var(--t3); }
.ch-slot.filled .ch-slot-n { color: rgba(255,255,255,.75); }
.ch-slot-label { font-family: var(--ff-heading); font-weight: 700; font-size: .92rem; color: var(--ch-line3); text-align: center; margin-top: .4rem; }
.ch-slot.filled .ch-slot-label { color: #fff; }
.ch-slot.right { box-shadow: 0 0 0 3px #16a34a; }
.ch-slot.wrong { box-shadow: 0 0 0 3px #dc2626; }
.ch-slot.wrong .ch-slot-label { text-decoration: line-through; opacity: .75; }
.ch-bars { display: flex; align-items: center; justify-content: center; gap: .3rem; margin-top: .45rem; font-size: .75rem; font-weight: 600; color: var(--t3); cursor: default; flex-wrap: wrap; }
.ch-slot.filled .ch-bars { color: rgba(255,255,255,.9); }
.ch-bars input {
  width: 3.4rem; font-family: var(--ff-heading); font-size: .95rem; font-weight: 700; text-align: center;
  border: 2px solid var(--ch-line); border-radius: 6px; padding: .15rem .2rem; background: #fff; color: var(--text);
}
.ch-bars input:focus { outline: none; border-color: var(--amber); }
.ch-bars.right input { border-color: #16a34a; background: #dcfce7; color: #166534; }
.ch-bars.wrong input { border-color: #dc2626; background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.ch-bars-fix { flex-basis: 100%; text-align: center; font-size: .75rem; font-weight: 700; background: #fff; color: #166534; border-radius: 4px; padding: 0 .3rem; }
.ch-slot-fix {font-size: .75rem; font-weight: 700; text-align: center; background: #fff; color: #166534; border-radius: 4px; margin-top: .3rem; padding: 0 .3rem; }

/* ═══ MARKER (structure part B) */
.ch-marker { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .8rem 0; }
.ch-mark-btn {
  font-family: var(--ff-heading); font-weight: 800; font-size: 1.1rem;
  background: #dc2626; color: #fff; border: 0; border-radius: 99px;
  padding: .8rem 1.8rem; cursor: pointer; box-shadow: 0 3px 0 #991b1b; transition: transform .1s;
}
.ch-mark-btn:active, .ch-mark-btn.pulse { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 #991b1b; }
.ch-marks { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2rem; align-items: center; }
.ch-mark { font-size: .82rem; font-weight: 600; background: var(--card2); border: var(--rule); border-radius: 99px; padding: .15rem .65rem; }
.ch-mark button { border: 0; background: none; color: #dc2626; font-weight: 700; cursor: pointer; margin-left: .2rem; }

/* ═══ OPTIONS (spotter + quiz) */
.ch-options { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.ch-opt {
  font-family: var(--ff-body); font-size: .9rem; font-weight: 500;
  background: var(--card); color: var(--text); border: 2px solid var(--ch-line);
  border-radius: 8px; padding: .5rem .95rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.ch-opt:hover { border-color: var(--amber); }
.ch-opt.picked { border-color: var(--amber); background: var(--amber-dim); font-weight: 600; }
.ch-opt.right { border-color: #16a34a; background: #dcfce7; color: #166534; font-weight: 600; }
.ch-opt.wrong { border-color: #dc2626; background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.ch-opt.missed { border-color: #16a34a; border-style: dashed; color: #166534; }
.locked .ch-opt, .ch-opt.right, .ch-opt.wrong { cursor: default; }
.ch-explain { font-size: .88rem; background: var(--card2); border-radius: 8px; padding: .65rem .9rem; margin-top: .4rem; color: var(--t2); }

.ch-moment { background: var(--card); border: var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .9rem; }
.ch-moment-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.ch-moment-n { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--amber2); }
.ch-play-btn { font-family: var(--ff-heading); font-weight: 700; font-size: .85rem; background: var(--ch-ink); color: #fbbf24; border: 0; border-radius: 99px; padding: .35rem .9rem; cursor: pointer; }
.ch-play-btn span { color: #a5b4fc; font-weight: 500; margin-left: .3rem; }
.ch-play-btn:hover { background: #000; }
.ch-q { font-weight: 600; color: var(--text) !important; margin-bottom: .3rem; }
.ch-q-big { font-family: var(--ff-heading); font-size: 1.3rem; font-weight: 700; line-height: 1.35; }

/* ═══ QUIZ */
.ch-quiz { max-width: 760px; }
.ch-progress { height: 8px; background: var(--card2); border-radius: 99px; overflow: hidden; margin-bottom: .6rem; }
.ch-progress i { display: block; height: 100%; background: var(--amber); transition: width .3s; }
.ch-quiz-count { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--t3); font-weight: 600; margin-bottom: .6rem; }
.ch-btn.ch-auto { position: relative; overflow: hidden; }
.ch-btn.ch-auto::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: rgba(255,255,255,.75); animation: ch-countdown var(--auto, 4s) linear forwards;
}
@keyframes ch-countdown { from { width: 100%; } to { width: 0; } }
.ch-mystery { max-width: 480px; margin: .6rem 0 .4rem; }
.ch-mystery-frame { position: relative; }
.ch-mystery-cover {
  position: absolute; inset: 0; z-index: 2; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ch-ink), #312e81);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: .2rem;
  transition: opacity .4s;
}
.ch-mystery-cover span { font-size: 2.4rem; }
.ch-mystery-cover b { font-family: var(--ff-brand); font-size: 1.8rem; letter-spacing: .06em; font-weight: 400; color: #fbbf24; }
.ch-mystery-cover small { color: #c7d2fe; }
.ch-mystery-cover.revealed { opacity: 0; pointer-events: none; }
.ch-mystery-controls { display: flex; gap: .5rem; margin-top: .6rem; }

/* ═══ WRITER */
.ch-prompt { margin-top: 0; }
.ch-starters { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0 .5rem; }
.ch-starter {
  text-align: left; font-family: var(--ff-body); font-size: .88rem; color: var(--t2);
  background: var(--card); border: var(--rule); border-left: 4px solid var(--amber);
  border-radius: 6px; padding: .5rem .8rem; cursor: pointer; transition: background .15s;
}
.ch-starter:hover { background: var(--amber-dim); }
.ch-starter span, .ch-bracket { color: var(--amber2); font-weight: 600; }
.ch-writing {
  width: 100%; font-family: var(--ff-body); font-size: 1rem; line-height: 1.7; color: var(--text);
  background: var(--card); border: 2px solid var(--ch-line); border-radius: var(--radius);
  padding: .9rem 1rem; resize: vertical;
}
.ch-writing:focus { outline: none; border-color: var(--amber); }
.ch-writing[readonly] { background: var(--card2); }
.ch-writing-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; font-weight: 600; margin-top: .3rem; }
.ch-play-excerpt { width: 100%; }
.ch-score-guide { margin: 0; }
.ch-score-guide li { margin-bottom: .3rem; }
mark.ch-kw { background: #bbf7d0; color: #14532d; border-radius: 3px; padding: 0 .15rem; font-weight: 600; }
mark.ch-fx { background: transparent; color: #1d4ed8; border-bottom: 2px solid #3b82f6; }
.ch-legend { font-size: .8rem; margin-bottom: .4rem; }
.ch-marked { background: var(--card); border: var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; line-height: 1.85; color: var(--t2); }
.ch-code { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; margin-top: 1rem; }

/* ═══ RESULT CARD */
#result-host { margin-top: 2.5rem; }
.ch-result {
  max-width: 760px; background: var(--card); border: 2px solid var(--ch-ink);
  border-radius: var(--radius-lg); padding: 1.8rem 2rem; box-shadow: 0 10px 40px rgba(0,0,0,.08);
}
.ch-result-head { border-bottom: 3px solid var(--amber); padding-bottom: .8rem; margin-bottom: 1rem; }
.ch-result-brand { font-family: var(--ff-brand); font-size: 1.2rem; letter-spacing: .08em; color: var(--amber2); }
.ch-result-head h2 { margin: .1rem 0 0; }
.ch-result-song { font-style: italic; color: var(--t2); font-size: .92rem; }
.ch-result-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.2rem; }
.ch-name-field { flex: 1; min-width: 220px; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--t3); display: flex; flex-direction: column; gap: .25rem; }
.ch-name-field input { font-family: var(--ff-heading); font-size: 1.15rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text); border: 0; border-bottom: 2px solid var(--ch-line2); padding: .25rem 0; background: transparent; }
.ch-name-field input:focus { outline: none; border-bottom-color: var(--amber); }
.ch-print-name { display: none; }
.ch-result-date { font-size: .95rem; font-weight: 600; }
.ch-result-date span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--t3); }
.ch-score { display: flex; align-items: center; gap: 1.5rem; background: var(--ch-ink); color: #fff; border-radius: var(--radius); padding: 1rem 1.4rem; margin-bottom: 1.2rem; }
.ch-score-big { font-family: var(--ff-brand); font-size: 3.6rem; line-height: 1; color: #fbbf24; }
.ch-score-big span { font-size: 1.8rem; color: #c7d2fe; }
.ch-score-pct { font-family: var(--ff-heading); font-weight: 800; font-size: 1.5rem; }
.ch-score-msg { color: #c7d2fe; font-size: .9rem; }
.ch-parts { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.ch-part { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; font-size: .9rem; }
.ch-bar { grid-column: 1 / -1; height: 6px; background: var(--card2); border-radius: 99px; overflow: hidden; }
.ch-bar i { display: block; height: 100%; background: #16a34a; }
.ch-result-h { margin-top: 1.4rem; }
.ch-feedback { font-size: .88rem; display: grid; gap: .25rem; }
.ch-feedback li.ok { color: #166534; }
.ch-feedback li.miss { color: #991b1b; }
.ch-ideas { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ch-result-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.6rem; padding-top: 1.2rem; border-top: var(--rule); }
.ch-copied { font-size: .85rem; font-weight: 600; color: #166534; }
.ch-shake { animation: ch-shake .5s; border-bottom-color: #dc2626 !important; }
@keyframes ch-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* Structure timeline */
.ch-timeline { position: relative; display: flex; height: 54px; border-radius: 8px; overflow: hidden; }
.ch-tl-block { --c: #888; background: var(--c); color: #fff; padding: .3rem .4rem; border-right: 2px solid #fff; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.ch-tl-block b { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-tl-block small { font-size: .68rem; opacity: .85; }
.ch-tl-mark { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px var(--ch-ink); }

/* ═══ HUB GROUPS */
.ch-group { margin-bottom: 2.5rem; }
.ch-group .section-rule { margin-top: 0; }
.ch-group .section-rule h2 { margin: 0; white-space: nowrap; }
.ch-group-blurb { margin: -.6rem 0 1rem; font-size: .9rem; }
.ch-mystery-controls .ch-btn.playing { background: var(--ch-ink); border-color: var(--ch-ink); color: #fbbf24; }
.ch-mystery-controls { flex-wrap: wrap; align-items: center; }

/* Odd One Out: A / B / C tiles that light up while their clip plays */
.ch-seq { display: flex; gap: .7rem; width: 100%; margin-bottom: .3rem; }
.ch-seq-tile {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  background: var(--card); border: 3px solid var(--ch-line); border-radius: var(--radius);
  padding: .5rem .4rem .6rem; cursor: pointer; transition: transform .15s, border-color .15s, background .15s;
}
.ch-seq-tile b { font-family: var(--ff-brand); font-size: 3rem; font-weight: 400; line-height: 1; color: var(--t3); }
.ch-seq-tile small { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--t3); }
.ch-seq-tile:hover { border-color: var(--amber); }
.ch-seq-tile.playing { background: var(--ch-ink); border-color: #fbbf24; transform: translateY(-3px) scale(1.04); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ch-seq-tile.playing b { color: #fbbf24; }
.ch-seq-tile.playing small { color: #c7d2fe; }
.ch-seq-tile.playing small::after { content: ' · playing'; }
.ch-topics .ch-opt { font-size: 1.05rem; padding: .7rem 1.2rem; color: var(--t3); }
.ch-topics .ch-opt.picked { color: var(--text); }
.ch-topics .ch-opt.picked::before { content: '✓ '; color: var(--amber2); font-weight: 800; }
.ch-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ═══ TAP THE TEMPO */
.ch-tempo-player { max-width: 480px; margin: .6rem 0 1rem; }
.ch-tap-zone { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; background: var(--card); border: var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .6rem; }
.ch-tap {
  font-family: var(--ff-brand); font-size: 1.9rem; letter-spacing: .1em; flex-shrink: 0;
  width: 110px; height: 110px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--amber); color: #fff; box-shadow: 0 5px 0 var(--amber2); transition: transform .06s, box-shadow .06s;
  user-select: none; touch-action: manipulation;
}
.ch-tap:active, .ch-tap.hit { transform: translateY(4px); box-shadow: 0 1px 0 var(--amber2); }
.ch-tap:disabled { background: var(--ch-line2); box-shadow: 0 5px 0 var(--ch-line3); cursor: default; }
.ch-tap-help { font-size: .92rem; margin-bottom: .5rem; color: var(--t2); }
.ch-tap-dots { display: flex; gap: 4px; margin-bottom: .35rem; flex-wrap: wrap; }
.ch-tap-dots i { width: 13px; height: 13px; border-radius: 50%; background: var(--card2); border: 2px solid var(--ch-line); transition: background .08s; }
.ch-tap-dots i.bar { margin-left: 8px; }
.ch-tap-dots i.bar:first-child { margin-left: 0; }
.ch-tap-dots i.on { background: var(--amber); border-color: var(--amber2); }

/* Beat chart: a cell per beat, grouped into bars; the line is the beat, the dot is the tap */
.ch-beats { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; margin: .6rem 0 .2rem; }
.ch-beat { position: relative; height: 44px; background: var(--card2); border-radius: 4px; }
.ch-beat::before { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: var(--ch-line3); }
.ch-beat-bar { margin-left: 7px; }
.ch-beat-bar:first-child { margin-left: 0; }
.ch-beat-bar::before { background: #312e81; width: 3px; }
.ch-beat-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ch-beat-dot.good { background: #16a34a; }
.ch-beat-dot.ok { background: var(--amber); }
.ch-beat-dot.off { background: #dc2626; }
.ch-key { font-size: 1rem; }
.ch-key.good { color: #16a34a; }
.ch-key.ok { color: var(--amber); }
.ch-key.off { color: #dc2626; }
.ch-beats-key { display: flex; justify-content: space-between; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); font-weight: 600; }
.ch-tempo-feedback { background: var(--card); border: var(--rule); border-radius: var(--radius); padding: .4rem 1.2rem 1.2rem; }
.ch-tempo-notes { display: grid; gap: .3rem; margin: .8rem 0 .4rem; font-size: .92rem; }
.ch-tempo-notes li.ok strong { color: #166534; }
.ch-tempo-notes li.mid strong { color: var(--amber2); }
.ch-tempo-notes li.miss strong { color: #991b1b; }
.ch-tempo-sum { margin: .9rem 0 1.1rem; }
.ch-tempo-sum .ch-beat { height: 26px; }

/* ═══ SPOT THE MISTAKE */
.ch-mistake-text { background: var(--card); border: var(--rule); border-radius: var(--radius); padding: 1.3rem 1.5rem; font-size: 1.05rem; line-height: 2.1; color: var(--t2); }
.ch-word { cursor: pointer; border-radius: 3px; padding: .05rem .05rem; transition: background .1s; }
.ch-word:hover { background: var(--amber-dim); }
.ch-word.flag { background: #fde68a; box-shadow: 0 2px 0 var(--amber); }
.locked .ch-word { cursor: default; }
.locked .ch-word:hover { background: none; }
.ch-word.found { background: #fee2e2; color: #991b1b; text-decoration: line-through; box-shadow: none; }
.ch-word.missed { background: none; color: #991b1b; text-decoration: line-through dashed; }
.ch-word.false { background: #e7e5e4; text-decoration: none; box-shadow: none; opacity: .7; }
.ch-correction { background: #dcfce7; color: #166534; font-weight: 700; border-radius: 3px; padding: .05rem .3rem; }

/* ═══ TERM MATCH */
.ch-match { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 1.2rem; margin: 1rem 0; }
.ch-match-col { display: flex; flex-direction: column; gap: .5rem; }
.ch-term, .ch-def {
  position: relative; text-align: left; font-family: var(--ff-body); font-size: .9rem; line-height: 1.45;
  background: var(--card); color: var(--text); border: 2px solid var(--ch-line); border-radius: 8px;
  padding: .6rem .8rem .6rem 2.2rem; cursor: pointer; transition: border-color .15s, background .15s; min-height: 3rem;
}
.ch-term { font-family: var(--ff-heading); font-weight: 700; font-size: .98rem; }
.ch-term:hover, .ch-def:hover { border-color: var(--amber); }
.ch-term.selected, .ch-def.selected { border-color: var(--amber); background: var(--amber-dim); box-shadow: 0 0 0 3px rgba(217,119,6,.2); }
.ch-term.paired, .ch-def.paired { border-color: var(--ch-ink); }
.ch-term.paired::before, .ch-def.paired::before {
  content: attr(data-n); position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
  width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--ch-ink); color: #fbbf24;
  font: 700 .72rem/1.3rem var(--ff-heading); text-align: center;
}
.ch-term.right { border-color: #16a34a; background: #dcfce7; }
.ch-term.wrong { border-color: #dc2626; background: #fee2e2; }

/* ═══ UPGRADE THE SENTENCE */
.ch-weak { font-family: var(--ff-heading); font-size: 1.15rem; font-weight: 700; color: #991b1b !important; margin: .2rem 0 .5rem; }
.ch-upgrade .ch-writing { font-size: .95rem; }
/* Model answers: technique / effect / impact */
.ch-model { line-height: 2.3; }
.ch-ann { border-radius: 4px; padding: .1rem .3rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ch-ann sup { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-left: .25rem; opacity: .85; }
.ch-ann-t { background: #dbeafe; color: #1e3a8a; border-bottom: 2px solid #3b82f6; }
.ch-ann-e { background: #f3e8ff; color: #581c87; border-bottom: 2px solid #a855f7; }
.ch-ann-i { background: #ffedd5; color: #7c2d12; border-bottom: 2px solid #f97316; }
.ch-ann-key { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; font-weight: 700; margin-bottom: .5rem; }
.ch-ann-key .ch-muted { font-weight: 400; flex-basis: 100%; font-size: .78rem; }
.ch-upgrade-sum { margin: .8rem 0 1rem; }
.ch-marked-sm {padding: .6rem .8rem; margin-bottom: .4rem; font-size: .92rem; }

/* ═══ LAYER BY LAYER */
.ch-layer { --c: #312e81; }
.ch-layer.used { opacity: .3; }
.ch-layer-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; list-style: none; }
.ch-layer-slot { --c: #312e81; }

/* ═══ COVER VS ORIGINAL */
.ch-versions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .5rem 0 .8rem; }
.ch-version { background: var(--card); border: var(--rule); border-radius: var(--radius); padding: .8rem 1rem; }
.ch-version strong { display: block; font-family: var(--ff-heading); margin: .2rem 0 .5rem; }
.ch-version-tag { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: #2563eb; border-radius: 4px; padding: .1rem .5rem; }
.ch-version-tag.cover { background: #db2777; }
.ch-version-clips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ch-clip-btn { font-size: .82rem; padding: .35rem .7rem; }
.ch-clip-btn.playing { background: var(--ch-ink); border-color: var(--ch-ink); color: #fbbf24; }
.ch-statements { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 2.5rem; margin: .5rem 0 1rem; }
.ch-statement {
  font-family: var(--ff-body); font-size: .86rem; text-align: left; line-height: 1.4;
  background: var(--card); color: var(--text); border: 2px solid var(--ch-line); border-radius: 8px;
  padding: .45rem .7rem; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.ch-statement:hover { border-color: var(--amber); }
.ch-statement.selected { border-color: var(--amber); background: var(--amber-dim); box-shadow: 0 0 0 3px rgba(217,119,6,.2); }
.ch-statement.right { border-color: #16a34a; background: #dcfce7; }
.ch-statement.wrong { border-color: #dc2626; background: #fee2e2; }
.ch-statement-fix { display: block; font-size: .75rem; font-weight: 700; color: #166534; margin-top: .2rem; }
.ch-zones { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: .7rem; }
.ch-zone { min-height: 150px; border: 2px dashed var(--ch-line2); border-radius: var(--radius); padding: .6rem; background: rgba(255,255,255,.5); cursor: pointer; }
.ch-zone[data-zone="original"] { border-color: #93c5fd; background: rgba(219,234,254,.35); }
.ch-zone[data-zone="cover"] { border-color: #f9a8d4; background: rgba(252,231,243,.4); }
.ch-zone[data-zone="both"] { border-color: #c4b5fd; background: rgba(237,233,254,.45); }
.ch-zone-h { font-family: var(--ff-heading); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; color: var(--t2); text-align: center; }
.ch-zone-list { display: flex; flex-direction: column; gap: .4rem; }
.ch-zone .ch-statement { width: 100%; }

/* ═══ MELODY SHAPE */
.ch-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin: 1rem 0; }
.ch-shape {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer;
  background: var(--card); border: 2px solid var(--ch-line); border-radius: var(--radius); padding: .8rem .6rem .7rem;
  font-family: var(--ff-heading); font-weight: 700; color: var(--text); transition: border-color .15s, transform .15s;
}
.ch-shape:hover { border-color: var(--amber); transform: translateY(-2px); }
.ch-shape svg { width: 100%; max-width: 130px; height: 64px; }
.ch-shape polyline, .ch-melody-graph polyline { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ch-shape circle, .ch-melody-graph circle { fill: var(--ch-ink); }
.ch-shape.right { border-color: #16a34a; background: #dcfce7; }
.ch-shape.wrong { border-color: #dc2626; background: #fee2e2; }
.ch-shape.dim { opacity: .45; }
.ch-melody-graph { display: block; width: 100%; max-width: 320px; height: 80px; margin-top: .4rem; }
#m-play.playing { background: var(--ch-ink); border-color: var(--ch-ink); color: #fbbf24; }

/* ═══ ENERGY MAP */
.ch-energy { position: relative; display: grid; gap: 3px; margin: 1rem 0 .5rem; }
.ch-energy-y { display: flex; align-items: center; justify-content: center; font-family: var(--ff-brand); font-size: 1.3rem; color: var(--t3); }
.ch-energy-cell { --c: var(--amber); height: 34px; border: 0; border-radius: 4px; background: var(--card2); cursor: pointer; transition: background .1s; }
.ch-energy-cell:hover { outline: 2px solid var(--amber); }
.ch-energy-cell.on { background: var(--c); opacity: .85; }
.ch-energy-cell.model { box-shadow: inset 0 0 0 3px var(--ch-ink); }
.locked .ch-energy-cell { cursor: default; }
.ch-energy-x { text-align: center; font-size: .72rem; padding-top: .3rem; border-top: 4px solid var(--c); min-width: 0; }
.ch-energy-x b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-energy-play { font-size: .7rem; font-weight: 700; border: 0; background: none; color: var(--amber2); cursor: pointer; padding: .1rem; }
.ch-energy-play.playing { color: #fff; background: var(--ch-ink); border-radius: 4px; }
.ch-energy-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ch-energy-line polyline { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ch-energy-line polyline.yours { stroke: var(--ch-ink); }
.ch-energy-line polyline.model { stroke: #dc2626; stroke-dasharray: 8 6; }
.ch-energy-key { display: flex; gap: 1.2rem; font-size: .8rem; font-weight: 700; margin: .4rem 0 .6rem; }
.ch-energy-key span::before { content: ''; display: inline-block; width: 22px; height: 0; border-top: 4px solid var(--ch-ink); vertical-align: middle; margin-right: .4rem; }
.ch-energy-key .model::before { border-top: 4px dashed #dc2626; }

/* ═══ BOSS LEVEL LOCK */
.ch-card-locked { border-top-color: #312e81; background: repeating-linear-gradient(135deg, #fff, #fff 10px, var(--card2) 10px, var(--card2) 20px); }
.ch-card-locked .ch-start { color: var(--t3); }
.ch-locked-badge { font-size: .72rem; font-weight: 700; background: var(--ch-ink); color: #fbbf24; padding: .2rem .55rem; border-radius: 99px; }
.ch-lock-screen { max-width: 480px; text-align: center; margin: 1rem auto; background: var(--card); border: var(--rule); border-radius: var(--radius-lg); padding: 2rem; }
.ch-lock-icon { font-size: 3rem; }
.ch-lock-bar { margin: 1rem 0 1.4rem; height: 10px; }

/* ═══ TEACHER TOOL */
.ch-teacher-steps { padding-left: 1.2rem; font-size: .9rem; color: var(--t2); margin-bottom: 1rem; }
.ch-teacher-steps li { margin-bottom: .3rem; }
.ch-teacher-load { display: flex; gap: .5rem; }
.ch-teacher-load input.ch-bpm { flex: 0 0 6rem; }
.ch-teacher-load input { flex: 1;font-size: .95rem; padding: .5rem .75rem; border: 2px solid var(--ch-line); border-radius: 8px; font-family: var(--ff-body); }

/* ═══ SMALLER SCREENS */
@media (max-width: 1050px) {
  .ch-layout { grid-template-columns: 1fr; }
  .ch-side { position: static; order: -1; max-width: 560px; }
  .ch-match { grid-template-columns: 1fr; }
  .ch-versions, .ch-zones { grid-template-columns: 1fr; }
}

/* ═══ PRINT: just the result card */
@media print {
  body { background: #fff; display: block; }
  .sidebar, .page-hero, .ch-layout, .ch-quiz, .ch-result-actions, .ch-teacher-link { display: none !important; }
  .content-wrap { padding: 0; }
  #result-host { margin: 0; }
  .ch-result { box-shadow: none; border: 2px solid #000; max-width: none; }
  .ch-name-field input { display: none; }
  .ch-print-name { display: block; font-family: var(--ff-heading); font-size: 1.2rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: #000; border-bottom: 1px solid #999; }
  .ch-score, .ch-bar i, mark.ch-kw, .ch-tl-block { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ═══ COVER VS ORIGINAL: dragging + song chooser */
.ch-statement { user-select: none; touch-action: none; cursor: grab; }
.ch-statement.dragging { opacity: .35; }
.ch-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; cursor: grabbing; box-shadow: 0 10px 30px rgba(0,0,0,.25); transform-origin: top left; }
.ch-zone.drop-over, .ch-statements.drop-over { border-color: var(--amber); border-style: solid; background: var(--amber-dim); }
.ch-statements { border: 2px dashed transparent; border-radius: var(--radius); padding: .3rem; }
.ch-song-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; margin: 1rem 0; }
.ch-song-pick {
  display: flex; flex-direction: column; gap: .45rem; text-align: left; cursor: pointer;
  background: var(--card); border: 2px solid var(--ch-line); border-top: 4px solid var(--amber); border-radius: var(--radius);
  padding: 1rem 1.1rem; font-family: var(--ff-body); font-size: .88rem; color: var(--t2); transition: transform .15s, border-color .15s;
}
.ch-song-pick:hover { transform: translateY(-3px); border-color: var(--amber); }
.ch-song-pick b { font-family: var(--ff-heading); font-size: 1.1rem; color: var(--text); }
.ch-song-pick i { font-style: normal; margin-right: .3rem; }

/* ═══ STRUCTURE BUILDER: one step (name + bars + start time per box) */
.ch-steps-list { padding-left: 1.2rem; display: grid; gap: .25rem; margin-bottom: .6rem; }
.ch-stamp {
  margin-top: .4rem; align-self: center; font-family: var(--ff-heading); font-weight: 700; font-size: .78rem;
  background: #fff; color: #991b1b; border: 2px solid #fca5a5; border-radius: 99px; padding: .15rem .6rem; cursor: pointer;
}
.ch-stamp:hover { border-color: #dc2626; }
.ch-stamp.set { color: var(--ch-ink); border-color: var(--ch-ink); }
.ch-stamp.pulse { transform: scale(.94); }
.ch-stamp.fixed { color: var(--t3); border-color: var(--ch-line); cursor: default; }
.ch-stamp.right { border-color: #16a34a; background: #dcfce7; color: #166534; }
.ch-stamp.wrong { border-color: #dc2626; background: #fee2e2; color: #991b1b; }
.ch-slot .ch-bars-fix { margin-top: .2rem; }

/* ═══ QUIZ-SHOW ANSWER TILES (multiple choice) — soft tinted boxes */
.ch-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .9rem 0; }
.ch-tiles .ch-opt {
  --t: #b4505c; --tint: #fbeff1;           /* border colour / soft background */
  position: relative; display: flex; align-items: center; justify-content: center; gap: .85rem; min-height: 4.4rem;
  padding: .85rem 2.6rem; border: 2px solid color-mix(in srgb, var(--t) 22%, transparent); border-radius: 14px;
  background: var(--tint); color: var(--ch-ink); text-align: center;
  font-family: var(--ff-heading); font-weight: 700; font-size: 1.04rem; line-height: 1.25;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--t) 25%, transparent); cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s, opacity .25s, filter .25s;
}
.ch-tiles .ch-opt:nth-child(4n+2) { --t: #4a6fa8; --tint: #eef3fb; }
.ch-tiles .ch-opt:nth-child(4n+3) { --t: #a8842f; --tint: #fbf6e9; }
.ch-tiles .ch-opt:nth-child(4n+4) { --t: #4f8a55; --tint: #eff7ef; }
.ch-tiles .ch-opt:hover { transform: translateY(-2px); border-color: var(--t); box-shadow: 0 5px 0 color-mix(in srgb, var(--t) 30%, transparent); }
.ch-tiles .ch-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--t) 30%, transparent); }
.ch-tiles .ch-opt.picked { background: var(--tint); border-color: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 30%, transparent); font-weight: 800; }
/* After answering: the right answer is outlined in green, everything else fades */
.ch-tiles.answered .ch-opt { cursor: default; transform: none; }
.ch-tiles.answered .ch-opt:not(.right):not(.missed) { opacity: .4; filter: grayscale(.4); }
.ch-tiles .ch-opt.right, .ch-tiles .ch-opt.wrong, .ch-tiles .ch-opt.missed { background: var(--tint); color: var(--ch-ink); text-decoration: none; }
.ch-tiles .ch-opt.right { border-color: #16a34a; background: #ecfdf3; box-shadow: 0 0 0 3px rgba(22,163,74,.25); animation: ch-pop .35s; }
.ch-tiles .ch-opt.missed { border-color: #16a34a; border-style: dashed; background: #f3fbf5; }
.ch-tiles .ch-opt.wrong { border-color: #dc2626; }
.ch-tiles .ch-opt.right::after, .ch-tiles .ch-opt.missed::after, .ch-tiles .ch-opt.wrong::after {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .9rem; font-weight: 900; color: #fff;
}
.ch-tiles .ch-opt.right::after, .ch-tiles .ch-opt.missed::after { content: '✓'; background: #16a34a; }
.ch-tiles .ch-opt.wrong::after { content: '✗'; background: #dc2626; }
@keyframes ch-pop { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }
@media (max-width: 560px) { .ch-tiles { grid-template-columns: 1fr; } }

/* Live score + streak in quizzes */
.ch-quiz-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.ch-quiz-meta .ch-quiz-count { margin: 0; }
.ch-scorebox { display: flex; gap: .4rem; }
.ch-scorebox > span { font-family: var(--ff-heading); font-weight: 800; font-size: .9rem; background: var(--ch-ink); color: #fff; border-radius: 99px; padding: .25rem .75rem; }
.ch-scorebox b { color: #fde047; }
.ch-scorebox.bump > span { animation: ch-pop .4s; }
.ch-scorebox.bump > span:first-child { background: #16a34a; }
.ch-scorebox.miss > span:last-child { animation: ch-shake .5s; }
.ch-progress i { background: linear-gradient(90deg, var(--amber), #db2777); }

/* ═══ CENTRED LAYOUT: each challenge sits in the middle of the page */
#play-body, #c-hub .content-wrap { max-width: 1180px; margin-left: auto; margin-right: auto; }
.ch-quiz { max-width: 980px; margin-left: auto; margin-right: auto; }
#result-host .ch-result { margin-left: auto; margin-right: auto; }
/* Song chooser: all songs on one row (two per row on smaller screens) */
.ch-song-picks { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .ch-song-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ch-song-picks { grid-template-columns: 1fr; } }

/* Musical clues shown when a quiz answer is revealed */
.ch-attrs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.ch-attrs-h { flex-basis: 100%; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--amber2); }
.ch-attr { font-size: .84rem; font-weight: 600; background: #fff; color: var(--ch-ink); border: 1.5px solid var(--ch-line2); border-radius: 99px; padding: .2rem .7rem; }

/* Odd One Out: after answering, each tile becomes a row with its song and clues beside it */
.ch-seq-row { flex: 1; display: flex; min-width: 0; }
.ch-seq-row .ch-seq-tile { flex: 1; }
.ch-seq.revealed { flex-direction: column; gap: .5rem; }
.ch-seq.revealed .ch-seq-row {
  display: grid; grid-template-columns: 96px 1fr; gap: .9rem; align-items: center;
  background: var(--card); border: 2px solid var(--ch-line); border-radius: var(--radius); padding: .45rem .8rem .45rem .45rem;
}
.ch-seq.revealed .ch-seq-tile { padding: .35rem; transform: none; box-shadow: none; }
.ch-seq.revealed .ch-seq-tile b { font-size: 2.2rem; }
.ch-seq-info strong { display: block; font-family: var(--ff-heading); font-size: .95rem; color: var(--ch-ink); margin-bottom: .1rem; }
.ch-seq-info .ch-attrs { margin-top: .25rem; }
.ch-seq.revealed .ch-seq-row.answer { border-color: #16a34a; background: #f0fdf4; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.ch-seq-row.answer .ch-seq-info strong::after {
  content: 'Odd one out'; margin-left: .5rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: #16a34a; border-radius: 99px; padding: .1rem .5rem; vertical-align: middle;
  display: inline-block; white-space: nowrap;
}
.ch-mystery { max-width: 640px; }
@media (max-width: 560px) { .ch-seq.revealed .ch-seq-row { grid-template-columns: 70px 1fr; } }

/* Clip + side panel: after answering, the song and its clues sit to the right of the clip */
.ch-mystery { max-width: none; }
.ch-mystery-main { display: grid; grid-template-columns: minmax(0, 520px); gap: 1rem; align-items: stretch; }
.ch-mystery-main.has-info { grid-template-columns: minmax(0, 520px) minmax(220px, 1fr); }
.ch-mystery-main > [hidden] { display: none; }
.ch-clip-info {
  display: flex; flex-direction: column; gap: .4rem; justify-content: center;
  background: var(--card); border: 2px solid var(--ch-line); border-left: 5px solid #16a34a; border-radius: var(--radius);
  padding: .9rem 1.1rem; animation: ch-fade-in .35s ease;
}
.ch-clip-info strong { font-family: var(--ff-heading); font-size: 1.1rem; color: var(--ch-ink); line-height: 1.3; margin-bottom: .3rem; }
.ch-clip-info .ch-attrs { margin-top: 0; }
@keyframes ch-fade-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.ch-seq { max-width: 760px; }
@media (max-width: 760px) { .ch-mystery-main.has-info { grid-template-columns: 1fr; } }
.ch-clip-info .ch-attrs-h { flex-basis: auto; }
.ch-clip-info .ch-attrs-h + strong { margin-bottom: .5rem; }