/* ==========================================================================
   30 Desk — Challenges design (from the approved canvas mockups)
   All classes are prefixed ch- so nothing in style.css is touched.
   Lines are always 1px solid #000. No shadows. Square corners.
   ========================================================================== */

:root {
  --ch-ink: #000;
  --ch-paper: #fff;
  --ch-grey: #f2f2f2;
  --ch-yellow: #FFE14D;
  --ch-line: 1px solid #000;
  --ch-dash: 1px dashed #000;
  --ch-font: "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.ch, .ch * { box-sizing: border-box; }
.ch { font-family: var(--ch-font); font-weight: 600; font-size: 9px; line-height: 1.4; color: var(--ch-ink); }
.ch a { color: var(--ch-ink); }
.ch button { font-family: inherit; font-weight: 600; cursor: pointer; }

/* ---------- Text ---------- */
.ch-h1 { font-size: 28px; font-weight: 800; line-height: 1; margin: 0; }
.ch-h2 { font-size: 17px; font-weight: 800; margin: 0; }
.ch-h3 { font-size: 15px; font-weight: 800; margin: 0; }
.ch-h4 { font-size: 12px; font-weight: 800; margin: 0; }
.ch-text { font-size: 10px; margin: 0; }
.ch-small { font-size: 9px; margin: 0; }
.ch-tiny { font-size: 8px; margin: 0; }
.ch-stack { display: flex; flex-direction: column; gap: 8px; }
.ch-row-flex { display: flex; align-items: center; gap: 12px; }
.ch-spacer { flex-grow: 1; }

/* ---------- Buttons ---------- */
.ch-btn { border: var(--ch-line); background: var(--ch-paper); color: var(--ch-ink); padding: 8px 16px; font-size: 10px; border-radius: 0; text-align: center; text-decoration: none; display: inline-block; }
.ch-btn:hover { background: var(--ch-grey); }
.ch-btn--primary { background: var(--ch-ink); color: var(--ch-paper); }
.ch-btn--primary:hover { background: #333; }
.ch-btn--block { display: block; width: 100%; }
.ch-btn--big { padding: 12px 18px; font-size: 12px; }

/* ---------- Challenge Ref (drawing tool + participate links) ---------- */
.ch-ref-btn { background: var(--ch-yellow); border: 1px solid #000; color: #000; font-weight: 800; border-radius: 0; box-shadow: none; }
.ch-ref-btn:hover { background: #ffd83d; }
.ch-ref-status { margin: -4px 0 8px; font-size: 12px; font-weight: 700; }
.ch-ref-rules {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  width: min(260px, 100%);
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 30px 12px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  overflow: auto;
}
.ch-ref-rules p { margin: 0; }
.ch-ref-rules-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
}
.ch-action-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ch-download-link { display: inline-block; font-size: 10px; font-weight: 700; text-decoration: underline; color: var(--ch-ink); }
.ch-download-link--inline { margin-top: 6px; }
.ch-ref-art-wrap { display: flex; flex-direction: column; align-items: center; }
.ch-hero-icons { display: inline-flex; gap: 6px; align-items: center; }
.ch-title-icon, .ch-tab-icon, .ch-name-icon, .ch-label-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 0.9em; }

/* ---------- Boxes ---------- */
.ch-box { border: var(--ch-line); background: var(--ch-paper); padding: 12px; }
.ch-box--yellow { background: var(--ch-yellow); }
.ch-box--dashed { border: var(--ch-dash); padding: 8px; }
.ch-placeholder { border: var(--ch-dash); display: flex; align-items: center; justify-content: center; font-size: 10px; text-align: center; background: var(--ch-paper); aspect-ratio: 1 / 1; }
.ch-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   WALL · Challenges! tab
   The 4th wall tab uses the EXISTING #feed-tabs button.frame style.
   ========================================================================== */
.ch-hero { padding: 18px 24px; background: var(--ch-yellow); border: 0; border-bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ch-hero-meta { font-size: 11px; }
.ch-intro { padding: 14px 24px 6px; display: flex; flex-direction: column; gap: 4px; }
.ch-intro-lead { font-size: 13px; margin: 0; }
.ch-intro-sub { font-size: 11px; margin: 0; }

/* Inner tabs: Ref duel · League · Community goal */
.ch-subtabs { display: flex; margin: 12px 24px 0; border: var(--ch-line); }
.ch-subtab { flex: 1 1 0; padding: 10px 8px; font-size: 12px; border: 0; border-right: var(--ch-line); background: var(--ch-paper); color: var(--ch-ink); }
.ch-subtab:last-child { border-right: 0; }
.ch-subtab.is-active { background: var(--ch-ink); color: var(--ch-paper); }
.ch-panel { padding: 14px 24px 18px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Ref duel ---------- */
.ch-refbox { display: flex; gap: 14px; align-items: center; }
.ch-refbox-text { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; }
.ch-ref-img { width: 150px; aspect-ratio: 4 / 5; flex-shrink: 0; }

.ch-vote { display: flex; flex-direction: column; gap: 10px; }
.ch-vote-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ch-vote-head .ch-vote-count { white-space: nowrap; margin-left: auto; }
.ch-vote-pair { display: flex; gap: 12px; }
.ch-vote-choice { flex: 1 1 0; aspect-ratio: 4 / 5; border: var(--ch-dash); background: var(--ch-paper); padding: 0; font-size: 10px; color: var(--ch-ink); }
.ch-vote-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-vote-choice.is-picked { border: var(--ch-line); background: var(--ch-yellow); }
.ch-vote-choice.is-placeholder { background: #f2f2f2; border: 1px solid #000; border-radius: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; padding: 18px; cursor: default; pointer-events: none; }
.ch-vote-placeholder-text { color: rgba(0, 0, 0, 0.6); font-size: 12px; line-height: 1.4; text-align: center; }
.ch-vote-hint { font-size: 9px; text-align: center; margin: 0; }

.ch-entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ch-entry-img { width: 120px; aspect-ratio: 4 / 5; flex-shrink: 0; }

.ch-winner { display: flex; gap: 12px; align-items: center; }
.ch-winner-name { font-size: 18px; font-weight: 800; }
.ch-winner-img { width: 150px; aspect-ratio: 4 / 5; flex-shrink: 0; }

/* ---------- League of Effort ---------- */
.ch-points { display: flex; gap: 10px; }
.ch-points-box { flex: 1 1 0; border: var(--ch-line); padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 9px; }
.ch-points-value { font-size: 17px; font-weight: 800; }

.ch-league { display: flex; gap: 12px; align-items: flex-start; }
.ch-board { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; }
.ch-board-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-bottom: var(--ch-line); background: var(--ch-paper); color: var(--ch-ink); text-align: left; font-size: 10px; width: 100%; }
.ch-board-row:hover, .ch-board-row.is-selected { background: var(--ch-grey); }
.ch-board-row.is-me { border: var(--ch-line); background: var(--ch-yellow); }
.ch-board-row.is-placeholder { background: #f2f2f2; border: 1px solid #000; border-bottom: 1px solid #000; border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 0.6); pointer-events: none; cursor: default; }
.ch-board-row.is-placeholder:hover { background: #f2f2f2; }
.ch-board-row.is-placeholder .ch-board-name,
.ch-board-row.is-placeholder .ch-board-pts,
.ch-board-row.is-placeholder .ch-board-rank { color: rgba(0, 0, 0, 0.6); }
.ch-board-rank { width: 20px; font-weight: 800; }
.ch-board-name { flex-grow: 1; display: flex; align-items: center; gap: 6px; }
.ch-board-pts { font-weight: 800; }
.ch-board-gap { text-align: center; padding: 4px 0; font-size: 10px; }
.ch-howto { margin-top: 8px; border: var(--ch-line); background: var(--ch-yellow); padding: 10px; display: flex; flex-direction: column; gap: 4px; }

.ch-player { flex-grow: 1; border: var(--ch-line); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ch-player-head { display: flex; justify-content: space-between; align-items: baseline; }
.ch-player-name { font-size: 16px; font-weight: 800; }
.ch-player-pts { font-size: 24px; font-weight: 800; }
.ch-quest { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: var(--ch-line); font-size: 10px; }
.ch-quest-label { flex-grow: 1; }
.ch-quest-detail { width: 52px; text-align: right; }
.ch-quest-pts { width: 52px; text-align: right; font-weight: 800; }
.ch-tie { font-size: 9px; background: var(--ch-yellow); border: var(--ch-line); padding: 6px 8px; margin: 0; }
.ch-rules { border-top: var(--ch-dash); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 9px; }

/* ---------- Community goal ---------- */
.ch-goal-count { display: flex; align-items: baseline; gap: 8px; }
.ch-goal-num { font-size: 34px; font-weight: 800; line-height: 1; }
.ch-goal-of { font-size: 13px; }
.ch-progress { height: 18px; border: var(--ch-line); display: flex; }
.ch-progress-fill { background: var(--ch-yellow); border-right: var(--ch-line); }
.ch-goal-badge { display: flex; gap: 12px; align-items: center; border-top: var(--ch-dash); padding-top: 10px; }
#ch-winner-link.is-placeholder-box { background: #f2f2f2; border: 1px solid #000; border-radius: 0; box-shadow: none; text-decoration: none; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ch-winner-placeholder-text { color: rgba(0, 0, 0, 0.6); text-align: center; font-size: 12px; line-height: 1.4; }

/* ==========================================================================
   INDEX · finish panel additions (inside the existing #completion-panel,
   ABOVE the existing Keep practicing / Check wall / Check your profile)
   ========================================================================== */
.ch-finish { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ch-finish-pts { display: flex; justify-content: space-between; align-items: center; border: var(--ch-line); padding: 8px 10px; font-size: 13px; }
.ch-finish-pts b { font-weight: 800; }
.ch-finish-duel { border: var(--ch-line); background: var(--ch-yellow); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ch-finish-duel[hidden] { display: none !important; }
.ch-finish-points { margin: 8px 0 0; font-weight: 800; }
.ch-finish-note { border: var(--ch-dash); padding: 10px; font-size: 13px; }
.ch-finish-link { font-size: 12px; }

/* ==========================================================================
   PROFILE additions (existing progress card stays exactly as it is)
   ========================================================================== */
.ch-week { width: 380px; border: var(--ch-line); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ch-week-head { display: flex; justify-content: space-between; align-items: baseline; }
.ch-week-row { display: flex; justify-content: space-between; border-bottom: var(--ch-line); padding: 6px 0; }
.ch-week-row b { font-weight: 800; }
.ch-week-badges { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

.ch-week-box {
  border: 1px solid #000;
  background: #fff;
  padding: 14px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 0;
}
.ch-week-box[hidden] { display: none !important; }
.ch-week-box .ch-bug-btn { align-self: flex-start; }
.ch-week-box h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #000;
}
.ch-week-box p,
.ch-week-box a,
.ch-week-box button,
.ch-week-box div {
  color: #000;
  font-size: 12px;
}
.ch-week-box p,
.ch-week-box .ch-week-duel,
.ch-week-box .ch-week-link {
  margin: 0;
}
.ch-week-duel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ch-week-box .primary {
  border-radius: 0;
  margin: 0;
  background: #000;
  color: #fff;
}
.ch-week-box .ch-week-error {
  background: #f2f2f2;
  padding: 6px 8px;
  border: 1px solid #000;
  margin-top: 4px;
}
.ch-week-box .ch-week-link {
  text-decoration: underline;
  color: #000;
}

/* Button on a post card (this week's ref, not entered yet) */
.ch-post { position: relative; }
.ch-post-enter { position: absolute; left: 6px; right: 6px; bottom: 6px; border: var(--ch-line); background: var(--ch-yellow); padding: 8px; font-size: 12px; }
.ch-post-label { position: absolute; left: 6px; bottom: 6px; border: var(--ch-line); background: var(--ch-paper); padding: 3px 6px; font-size: 11px; }

/* Achievements tab */
.ch-ach-league { display: flex; align-items: center; gap: 14px; border: var(--ch-line); padding: 14px 18px; }
.ch-ach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ch-ach-card { border: var(--ch-line); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ch-ach-art { position: relative; width: 140px; height: 140px; }
.ch-ach-count { position: absolute; top: -12px; right: -12px; background: var(--ch-yellow); border: var(--ch-line); padding: 2px 10px; font-size: 18px; font-weight: 800; }

/* ==========================================================================
   NOTIFICATIONS (use the existing .notif-item; these are extra variants)
   ========================================================================== */
.ch-notif-highlight { background: var(--ch-yellow) !important; color: var(--ch-ink) !important; }

/* Monday results popup (inside the existing .overlay) */
.ch-results { width: 480px; max-width: 94vw; border: var(--ch-line); background: var(--ch-paper); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.ch-results-title { font-size: 30px; font-weight: 800; line-height: 1.1; margin: 0; }
.ch-results-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: var(--ch-line); }
.ch-results-row b { font-weight: 800; }
.ch-results-badges { display: flex; gap: 12px; justify-content: center; }
.ch-results-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.ch-results-actions { display: flex; gap: 8px; }
.ch-results-actions > * { flex: 1 1 0; }

.ch-results-modal {
  width: min(420px, 92vw);
  max-width: 420px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}
.ch-results-header {
  background: #FFE14D;
  border-bottom: 1px solid #000;
  padding: 16px 20px 12px;
}
.ch-results-header h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  color: #000;
}
.ch-results-date,
.ch-results-line,
.ch-results-label {
  margin: 0;
  color: #000;
  font-size: 13px;
  line-height: 1.5;
}
#results-popup .box {
  padding: 0;
}
#results-popup .ch-results-date,
#results-popup .ch-results-line,
#results-popup .ch-results-badges-wrap,
#results-popup .ch-results-close {
  padding-left: 20px;
  padding-right: 20px;
}
#results-popup .ch-results-date { padding-top: 14px; }
#results-popup .ch-results-line { padding-top: 6px; }
#results-popup .ch-results-label { padding-top: 16px; padding-bottom: 8px; }
#results-popup .ch-results-badges-wrap { padding-bottom: 16px; }
#results-popup .ch-results-badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#results-popup .ch-results-badge { display: inline-flex; width: 32px; height: 32px; border: 0; background: transparent; padding: 0; }
#results-popup .ch-results-badge img { display: block; width: 32px; height: 32px; }
#results-popup .ch-results-close {
  margin: 0 20px 20px;
  width: calc(100% - 40px);
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 0;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
}

/* ==========================================================================
   AVATAR BADGES (PNG + number drawn on top by code)
   Files: /assets/30desk-badges/badge-{level|champion|podium|rising|community}-{16|20|32|64}(@2x).png
   Markup:
   <button class="ch-badge ch-badge--20 ch-badge--level" type="button" aria-label="Level 7">
     <img src="/assets/30desk-badges/badge-level-20.png"
          srcset="/assets/30desk-badges/badge-level-20@2x.png 2x" alt="">
     <span class="ch-badge-num">7</span>
     <span class="ch-badge-tip">Level 7 · Earned by finishing practices.</span>
   </button>
   Max 2 next to a name: Level + best current one (Champion > Podium > Rising > Community).
   ========================================================================== */
.name-badges { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; position: relative; top: -2px; }
.ch-badge { position: relative; display: inline-flex; flex-shrink: 0; padding: 0; border: 0; background: transparent; vertical-align: middle; }
.ch-bug-btn {
  background: #fff;
  border: 1px solid #000;
  color: #000;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 0;
  cursor: pointer;
}
.ch-badge img { display: block; width: 100%; height: 100%; }
.ch-badge--16 { width: 16px; height: 16px; }
.ch-badge--20 { width: 20px; height: 20px; }
.ch-badge--32 { width: 32px; height: 32px; }
.ch-badge--64 { width: 64px; height: 64px; }

.ch-badge-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #000; line-height: 1; pointer-events: none; }
.ch-badge--16 .ch-badge-num { font-size: 6px; }
.ch-badge--20 .ch-badge-num { font-size: 7px; }
.ch-badge--32 .ch-badge-num { font-size: 11px; }
.ch-badge--64 .ch-badge-num { font-size: 21px; }
.ch-badge--podium .ch-badge-num { padding-top: 12%; }   /* crown top pushes the centre down */
.ch-badge--champion .ch-badge-num { padding-top: 3%; }
.ch-badge--16.ch-badge--community .ch-badge-num { font-size: 5px; }
.ch-badge--20.ch-badge--community .ch-badge-num { font-size: 6px; }
.ch-badge--32.ch-badge--community .ch-badge-num { font-size: 9px; }
.ch-badge--64.ch-badge--community .ch-badge-num { font-size: 17px; }

/* Hover / tap info box */
.ch-badge-tip { display: none; position: absolute; top: calc(100% + 6px); left: -8px; z-index: 30; width: 220px; background: #fff; border: var(--ch-line); padding: 8px 10px; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left; color: #000; white-space: normal; }
.ch-badge:hover .ch-badge-tip,
.ch-badge:focus-visible .ch-badge-tip,
.ch-badge.is-open .ch-badge-tip { display: block; }
.ch-badge:focus-visible { outline: 1px solid #000; outline-offset: 2px; }

/* Name + badges line (wall posts, comments, league rows, profile header) */
.ch-namebadges { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .ch-hero, .ch-intro, .ch-panel { padding-left: 16px; padding-right: 16px; }
  .ch-subtabs { margin-left: 16px; margin-right: 16px; }
  .ch-subtab { font-size: 14px; padding: 12px 6px; }
  .ch-h1 { font-size: 40px; }
  .ch-refbox, .ch-entry, .ch-winner, .ch-league, .ch-points { flex-direction: column; align-items: stretch; }
  .ch-board, .ch-week { width: 100%; }
  .ch-vote-choice { height: 260px; }
  .ch-ach-grid { grid-template-columns: 1fr; }
}

/* ---------- Fixes 2026-09-24 ---------- */
/* hidden must win over display:flex, so only one inner tab shows */
.ch [hidden] { display: none !important; }
/* centred, narrower Challenges view */
#challenges-view { max-width: 1040px; margin: 0 auto; }
/* voting pair fits the screen without scrolling */
.ch-vote-pair { justify-content: center; }
.ch-vote-choice { flex: 0 1 auto; width: min(48%, 44vh); }
/* league board: full frame around the rows */
.ch-board-row { border-left: var(--ch-line); border-right: var(--ch-line); }
.ch-board-row:first-child { border-top: var(--ch-line); }
.ch-board > .ch-board-row:first-of-type { border-top: var(--ch-line); }
/* black buttons keep white text */
.ch a.ch-btn--primary { color: #fff; }
/* badge icons next to titles and tab names */
.ch-icon { display: inline-block; vertical-align: middle; margin-left: 4px; }
.ch-hero-icons { display: inline-flex; gap: 6px; align-items: center; vertical-align: middle; margin-left: 8px; }
.ch-hero-icons .ch-icon { margin-left: 0; }

/* ---------- Adjustments 2026-09-24 (2) ---------- */
/* one size for every artwork: the ref, the two voting practices and the winner */
.ch { --ch-art-w: 240px; }
.ch-art, .ch-vote-choice { flex: 0 0 auto; width: var(--ch-art-w); max-width: 42vw; aspect-ratio: 4 / 5; }
.ch-art { display: block; padding: 0; overflow: hidden; }
.ch-art img, .ch-vote-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* more room between text and box edges */
.ch-box { padding: 24px 28px; }

/* ref box and winner box: text left, image right, both centred in the box */
.ch-refbox, .ch-winner { justify-content: center; gap: 48px; }
.ch-refbox .ch-refbox-text, .ch-winner .ch-refbox-text { flex: 0 1 380px; }
.ch-winner-label { font-size: 13px; }

/* icon sits on the same centre line as the text */
.ch-title-row { display: inline-flex; align-items: center; gap: 8px; }
.ch-title-row .ch-icon { margin-left: 0; }

/* voting: picked = yellow, other = black, then both fade and the next pair appears */
.ch-vote-pair { gap: 24px; transition: opacity 0.25s; }
.ch-vote-pair.is-fading { opacity: 0; }
.ch-vote-choice { position: relative; }
.ch-vote-choice::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.ch-vote-choice.is-picked::after { background: var(--ch-yellow); opacity: 0.85; }
.ch-vote-choice.is-unpicked::after { background: #000; opacity: 0.85; }
.ch-vote-choice.is-picked { border: var(--ch-line); }

/* entry box: text left, one button right */
.ch-entry { align-items: center; }

/* Challenges! wall tab: yellow until selected, black when active */
#feed-tabs #tab-challenges:not(.active) { background: var(--ch-yellow); color: #000; }

/* ---------- Adjustments 2026-09-24 (3) ---------- */
/* every stroke is a solid line, no dashes */
.ch { --ch-dash: 1px solid #000; }

/* bigger artworks, all the same size */
.ch { --ch-art-w: 320px; }

/* voting: picked = full yellow, other = full black, then the next pair appears */
.ch-vote-choice::after { transition: none; }
.ch-vote-choice.is-picked::after,
.ch-vote-choice.is-unpicked::after { opacity: 1; }

/* icons next to words: lift them to the text's visual centre */
.ch-icon { position: relative; top: -2px; }
.ch-hero-icons .ch-icon { top: -3px; }

/* winner text */
.ch-winner-label { font-size: 13px; font-weight: 800; }
.ch-winner-date { font-size: 12px; }

/* phone: no big gap between titles and images; images centred and full size */
@media (max-width: 760px) {
  .ch-refbox, .ch-winner { gap: 16px; align-items: center; }
  .ch-refbox .ch-refbox-text, .ch-winner .ch-refbox-text { flex: none; width: 100%; }
  .ch-art, .ch-vote-choice { width: min(var(--ch-art-w), 100%); max-width: none; height: auto; }
  .ch-vote-pair { gap: 10px; }
  .ch-vote-choice { width: calc(50% - 5px); }
  .ch-entry { flex-direction: column; align-items: flex-start; }
}

/* ---------- Adjustments 2026-09-24 (4) ---------- */
/* box split in two halves: text centred in the left half, image centred in the right half */
.ch-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
.ch-split-text { justify-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 380px; }
.ch-split > .ch-art { justify-self: center; }

.ch-duel-title { font-size: 26px; font-weight: 600; margin: 0; letter-spacing: 0.01em; }
.ch-join-note { margin-top: 14px; background: var(--ch-yellow); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.ch-join-title { font-size: 14px; font-weight: 700; }
.ch-joined { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.ch-my-practice { width: 140px; aspect-ratio: 4 / 5; object-fit: cover; border: var(--ch-line); margin-top: 6px; display: block; }

/* winner text: name big, grey details */
.ch-winner-big { font-size: 28px; font-weight: 800; color: #000; }
.ch-muted { font-size: 12px; color: #666; }
.ch-split .ch-winner-label { font-size: 18px; font-weight: 700; margin-top: 12px; }
.ch-split .ch-winner-date { font-size: 16px; color: #666; }
.ch-title-row .ch-icon { top: -2px; }

/* voting: picked = yellow, the other = white, shorter */
.ch-vote-choice.is-unpicked::after { background: #fff; }

@media (max-width: 760px) {
  .ch-split { grid-template-columns: 1fr; }
  .ch-split-text { justify-self: stretch; max-width: none; }
}

/* ---------- Adjustments 2026-09-24 (5) ---------- */
.ch-vote-intro { font-size: 13px; margin: 0; }
.ch-vote-count { font-size: 13px; }
.ch-joined { background: var(--ch-grey); border: var(--ch-line); padding: 12px 14px; }
.ch-title-row .ch-badge.ch-icon { margin-left: 0; }
.ch-vote-hint { font-size: 12px; }

/* ---------- Adjustments 2026-09-24 (6) ---------- */
.ch-vote-intro { color: #666; }
/* colour cover over a picked pair: opacity driven by --ch-cover (frame by frame from JS) */
.ch-vote-choice::after { transition: none; opacity: var(--ch-cover, 0); }
.ch-vote-choice.is-picked::after { background: var(--ch-yellow); opacity: var(--ch-cover, 1); }
.ch-vote-choice.is-unpicked::after { background: #000; opacity: var(--ch-cover, 1); }
/* one slot = practice + "This is not the ref" under it */
.ch-vote-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ch-not-ref { border: 0; background: none; padding: 4px; font-size: 12px; text-decoration: underline; color: #666; cursor: pointer; }
.ch-not-ref:hover { color: #000; }
@media (max-width: 760px) {
  .ch-vote-slot { width: calc(50% - 5px); }
  .ch-vote-slot .ch-vote-choice { width: 100%; }
}

.name-badges .ch-badge-tip { width: auto; white-space: nowrap; left: 0; padding: 4px 8px; font-weight: 700; }

.ch-progress-fill--done { background: #2e9d4a; }
.ch-claim-btn { align-self: flex-start; background: #000; color: #fff; border: 1px solid #000; border-radius: 0; font: inherit; font-weight: 800; padding: 8px 14px; cursor: pointer; }
.achievements-card.is-highlight { outline: 3px solid #FFE14D; outline-offset: 2px; background: #fff8d6; }

.ch-ref-btn { white-space: nowrap; font-variant-numeric: tabular-nums; }

.ch-intro-notice { position: fixed; right: 16px; bottom: 16px; left: auto; max-width: 300px; z-index: 60; display: flex; align-items: flex-start; gap: 8px; background: #FFE14D; border: 1px solid #000; border-radius: 0; box-shadow: none; color: #000; font-size: 13px; font-weight: 700; line-height: 1.35; padding: 12px; }
.ch-intro-notice-link { color: #000; text-decoration: none; flex: 1; }
.ch-intro-notice-link:hover { text-decoration: underline; }
.ch-intro-notice-close { background: none; border: 0; border-radius: 0; color: #000; cursor: pointer; font: inherit; font-size: 15px; line-height: 1; padding: 0 2px; }
@media (max-width: 699px) {
  .ch-intro-notice { right: 16px; left: 16px; max-width: none; }
}
.ch-league-top-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; }