/* "Which battle was bigger?" Builds on play.css + geo.css (panel styles). */
.hl-q { margin:.2rem 0 .8rem; }
.hl-cards { display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:stretch; margin:.4rem 0 1rem; }
.hl-card { position:relative; display:flex; align-items:flex-end; min-height:270px; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer;
  border-radius:16px; border:1px solid var(--gold-line); background-size:cover; background-position:center 35%; overflow:hidden;
  box-shadow:0 24px 50px -30px #000; transition:border-color .25s, box-shadow .25s, transform .2s, opacity .3s, filter .3s; }
.hl-card:hover:not(:disabled), .hl-card:focus-visible { border-color:var(--gold); transform:translateY(-2px); outline:none; box-shadow:0 0 0 1px var(--gold), 0 24px 50px -30px #000; }
.hl-card:disabled { cursor:default; }
/* after the reveal: the bigger battle is always gold, the smaller one fades back */
.hl-card.hl-big { border-color:#f0d28c; box-shadow:0 0 0 2px #f0d28c, 0 0 38px -8px rgba(240,210,140,.55), 0 24px 50px -30px #000; }
.hl-card.hl-small { opacity:.62; filter:saturate(.55); }
.hl-badge:empty, .hl-mine:empty { display:none; }
.hl-badge { position:absolute; top:10px; left:10px; padding:.3rem .65rem; border-radius:999px; background:#f0d28c; color:#1a1204; font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.hl-mine { position:absolute; top:10px; right:10px; padding:.3rem .65rem; border-radius:999px; font-family:var(--font-mono); font-size:.72rem; font-weight:700; background:rgba(10,8,6,.85); border:1px solid; }
.hl-mine.ok { color:#5bef95; border-color:#5bef95; }
.hl-mine.no { color:#ff8a8a; border-color:#ff8a8a; }
.hl-in { display:block; padding:1rem 1.05rem 1.05rem; width:100%; }
.hl-in > span { display:block; }
.hl-when { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); }
.hl-name { font-family:var(--font-display); font-size:clamp(1.15rem,3.4vw,1.5rem); color:#fff6e2; line-height:1.15; margin:.25rem 0 .5rem; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.hl-num { font-family:var(--font-display); font-size:clamp(1.5rem,4.6vw,2.2rem); color:#f0d28c; line-height:1; font-variant-numeric:tabular-nums; }
.hl-num.hl-hidden { color:rgba(240,210,140,.55); }
.hl-unit { font-size:.8rem; color:rgba(232,226,212,.75); margin-top:.25rem; }
.hl-tap { margin-top:.75rem; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); }
.hl-tap kbd { display:inline-block; margin-right:.45rem; padding:.05rem .4rem; border:1px solid var(--gold-line); border-radius:6px; font-size:.7rem; }
.hl-card.hl-done .hl-tap { display:none; }
.hl-vs { align-self:center; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; color:var(--gold); border:1px solid var(--gold-line); border-radius:999px; padding:.55rem .5rem; background:rgba(10,8,6,.6); }
.hl-note { margin:1.1rem auto 0; max-width:560px; text-align:center; font-size:.78rem; color:var(--muted); opacity:.85; }
.hl-grid { font-size:1.6rem; letter-spacing:.12rem; word-break:break-all; }
.hl-times { text-align:center; font-family:var(--font-display); color:var(--gold-bright); font-size:1.05rem; margin:0 0 .9rem; }
.hl-pgrid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.hl-pb .geo-h { font-size:1.1rem; margin:.2rem 0 .3rem; }
.hl-pnum { font-family:var(--font-display); color:#f0d28c; font-size:1.25rem; margin-bottom:.6rem; }
.hl-pnum small { font-family:inherit; font-size:.72rem; color:var(--muted); }
.hl-pb .pl-read { display:inline-block; margin-top:.6rem; }
.hl-nextrow { margin-top:1.1rem; }
.play.hl .geo-stats table { min-width:0; }
.play.hl .geo-stats td { white-space:normal; }
.pl-recap .hl-rc { flex:1; min-width:0; }
@media (max-width:560px) {
  .hl-cards { grid-template-columns:1fr; gap:.5rem; }
  .hl-card { min-height:170px; }
  .hl-vs { justify-self:center; padding:.35rem .8rem; }
  .hl-pgrid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .hl-card { transition:none; } }
.hl-desc { font-size:.9rem; margin:0 0 .7rem; }