/* "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; gap:.55rem; }
.ch-card { 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; touch-action:none; 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:0 .25rem; }
.ch-img { 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:34px; height:28px; 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-card.ch-hinted { border-color:rgba(240,210,140,.6); }
.ch-card.ch-ok { border-color:#5bef95; background:linear-gradient(180deg,rgba(91,239,149,.08),var(--card)); cursor:default; }
.ch-card.ch-no { border-color:#ff8a8a; background:linear-gradient(180deg,rgba(255,138,138,.07),var(--card)); cursor:default; }
.ch-read { font-family:var(--font-mono); font-size:.72rem; color:var(--gold-bright); white-space:nowrap; 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; gap:.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); }
.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; } }