/* "Put the battles in order". Builds on play.css + geo.css (panel styles). */
.ch-end { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); text-align:center; margin:.4rem 0; }
.ch-list { list-style:none; margin:0 auto; padding:0; max-width:620px; display:grid; grid-template-columns:minmax(0,1fr); gap:.55rem; }
.ch-card { min-width:0; display:flex; align-items:center; gap:.75rem; padding:.55rem .6rem .55rem .5rem; border-radius:14px; border:1px solid var(--gold-line);
  background:linear-gradient(180deg,var(--card-2),var(--card)); cursor:grab; user-select:none; transition:border-color .2s, box-shadow .2s, background .3s; }
.ch-card:hover { border-color:var(--gold); }
.ch-card.ch-drag { position:fixed; z-index:60; cursor:grabbing; box-shadow:0 22px 50px -18px #000, 0 0 0 1px var(--gold); pointer-events:none; }
.ch-ph { border:1px dashed var(--gold-line); border-radius:14px; list-style:none; }
.ch-grip { color:var(--gold); opacity:.6; font-size:.8rem; letter-spacing:-.25em; padding:.9rem .5rem; touch-action:none; }
.ch-img { touch-action:none; flex:0 0 64px; height:48px; border-radius:9px; background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.06); }
.ch-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.ch-name { font-family:var(--font-display); color:var(--text); font-size:1.02rem; line-height:1.2; }
.ch-year { font-family:var(--font-mono); font-size:.78rem; color:var(--gold-bright); margin-top:.2rem; }
.ch-mv { display:flex; flex-direction:column; gap:4px; }
.ch-mv button { width:44px; height:44px; border-radius:8px; border:1px solid var(--gold-line); background:rgba(10,8,6,.5); color:var(--gold-bright); cursor:pointer; font-size:.7rem; }
.ch-mv button:hover { border-color:var(--gold); }
.ch-mv button:disabled { opacity:.3; cursor:default; }
.ch-card.ch-hinted { border-color:rgba(240,210,140,.6); }
.ch-card.ch-ok { border-color:var(--ok-line); background:linear-gradient(180deg,var(--ok-bg),var(--card)); box-shadow:0 0 16px -8px var(--ok-glow); cursor:default; }
.ch-card.ch-no { border-color:var(--no-line); background:linear-gradient(180deg,var(--no-bg),var(--card)); cursor:default; }
/* colour is never the only cue: each checked card carries a glyph */
.ch-card.ch-ok, .ch-card.ch-no { position:relative; }
.ch-card.ch-ok::after, .ch-card.ch-no::after { position:absolute; top:-.6rem; left:.5rem; width:1.3rem; height:1.3rem; border-radius:50%; border:1px solid; background:var(--card); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:.72rem; line-height:1; pointer-events:none; }
.ch-card.ch-ok::after { content:"\2713"; content:"\2713" / ""; color:var(--ok); border-color:var(--ok-line); }
.ch-card.ch-no::after { content:"\2717"; content:"\2717" / ""; color:var(--no); border-color:var(--no-line); }
.ch-read { align-self:flex-start; margin-top:.3rem; font-family:var(--font-mono); font-size:.72rem; color:var(--gold-bright); text-decoration:none; }
.ch-right { list-style:none; counter-reset:c; margin:0 0 1rem; padding:0; display:grid; gap:.4rem; }
.ch-right li { display:flex; flex-wrap:wrap; gap:.1rem .8rem; align-items:baseline; }
.ch-right b { font-family:var(--font-mono); font-size:.8rem; color:var(--gold-bright); min-width:6.5rem; }
.ch-right a { color:var(--text); min-width:0; overflow-wrap:break-word; }
.ch-grid { font-size:1.35rem; line-height:1.35; }
@media (max-width:560px) {
  .ch-img { flex-basis:48px; height:40px; }
  .ch-name { font-size:.95rem; }
  .ch-right b { min-width:5.2rem; }
}
@media (prefers-reduced-motion:reduce) { .ch-card { transition:none; } }

.ch-card { box-sizing:border-box; max-width:100%; min-width:0; }
.ch-mv { flex:0 0 auto; }
/* the per-card article link sits under the year (round 5), with a 44 px tap height */
.ch-read { white-space:normal; display:inline-flex; align-items:center; min-height:44px; margin-top:0; }
/* whole words: hyphens:auto split names that would fit on the next line ("Water-loo") */
.ch-name { overflow-wrap:break-word; hyphens:manual; }
/* 320-380 px: the picture and wide gaps left the name ~65 px, so "Water/loo" broke mid-word (QA 2026-10-30).
   The grip still starts a drag; the picture comes back above 380 px. */
@media (max-width:380px) {
  .ch-card { gap:.45rem; padding-left:.3rem; }
  .ch-grip { padding:.9rem .2rem; }
  .ch-img { display:none; }
}
/* 200% zoom on a phone (~195 px): the arrows go under the name, which gets the card's width */
@media (max-width:300px) {
  .ch-card { flex-wrap:wrap; row-gap:.2rem; }
  .ch-txt { flex:1 1 0; }
  .ch-mv { flex:1 0 100%; flex-direction:row; justify-content:flex-end; }
  .ch-right b { min-width:0; }
}