/* 小遊戲英雄榜（othello / gomoku / multiply 共用）。
   街機通關榜的味道，配色沿用 base.html 的銅色深色主題。 */
.game-content { max-width:960px; display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.game-main { flex:1 1 520px; min-width:0; }

.hb {
  flex:0 0 236px; width:236px; align-self:flex-start;
  position:sticky; top:76px;                 /* 76px = topbar 高度，捲動時榜跟著留在畫面上 */
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; box-shadow:var(--card-shadow);
}
.hb-head { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.hb-head .zh { font-size:.9rem; font-weight:700; color:var(--text-strong); }
.hb-head .en {
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.62rem; letter-spacing:.12em; color:var(--accent); text-transform:uppercase;
}
.hb-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.hb-list li {
  display:flex; align-items:center; gap:7px; padding:5px 6px; border-radius:5px;
  font-size:.8rem; font-variant-numeric:tabular-nums;
}
.hb-list li.me { background:rgba(217,139,74,.13); }
.hb-rank {
  flex:0 0 20px; text-align:right; color:var(--text-faint); font-weight:700;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:.74rem;
}
.hb-list li:nth-child(1) .hb-rank { color:#f0c674; }
.hb-list li:nth-child(2) .hb-rank { color:#c9ccd1; }
.hb-list li:nth-child(3) .hb-rank { color:#cd8f5a; }
.hb-name { flex:1 1 auto; min-width:0; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-diff {
  flex:0 0 auto; font-size:.64rem; padding:1px 5px; border-radius:3px;
  border:1px solid var(--border); color:var(--text-muted); background:var(--surface-2);
}
.hb-diff.hard { color:#f0a565; border-color:rgba(240,165,101,.4); }
.hb-wins { flex:0 0 auto; font-weight:700; color:var(--accent-strong); font-size:.8rem; }
.hb-wins small { font-weight:500; color:var(--text-faint); font-size:.64rem; margin-left:1px; }

.hb-empty, .hb-foot { font-size:.7rem; color:var(--text-faint); line-height:1.6; }
.hb-empty { padding:10px 2px; }
.hb-foot { margin:10px 0 0; padding-top:9px; border-top:1px solid var(--border-soft); }

/* 通關輸入區：贏了才會出現 */
.hb-entry { margin-top:10px; padding-top:10px; border-top:1px solid var(--border-soft); }
.hb-entry[hidden] { display:none; }
.hb-entry .cue {
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.66rem; letter-spacing:.06em; color:var(--accent); margin-bottom:6px;
}
.hb-entry .cue .blink { animation:hb-blink 1s steps(1,end) infinite; }
@keyframes hb-blink { 50% { opacity:0; } }
.hb-entry input {
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:5px; padding:6px 8px; font-size:.82rem; margin-bottom:6px;
}
.hb-entry input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,139,74,.16); }
.hb-entry .row { display:flex; gap:6px; }
.hb-entry .row .btn { flex:1 1 0; font-size:.74rem; padding:4px 6px; }
.hb-err { font-size:.7rem; color:#f08a8a; margin-top:5px; }

@media (max-width:991px) {
  .hb { position:static; width:100%; flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .hb-entry .cue .blink { animation:none; }
}