/* Hit & Blow (colors) – scoped to hb-* */
.hb-history{
  display:grid;
  gap:10px;
  min-height: 160px;
}
.hb-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius: 14px;
  background: rgba(0,0,0,.10);
}
.hb-row__left{display:flex;align-items:center;gap:10px;min-width:0}
.hb-row__right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hb-score{
  display:flex;align-items:center;gap:8px;
  font-weight:900;
}
.hb-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  font-size: 12px;
}
.hb-chip--hit{border-color: rgba(56,211,159,.35); background: rgba(56,211,159,.12)}
.hb-chip--blow{border-color: rgba(230,190,90,.35); background: rgba(230,190,90,.12)}
.hb-chip--p1{border-color: rgba(255,77,109,.35); background: rgba(255,77,109,.14)}
.hb-chip--p2{border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.14)}

.hb-current{
  display:grid;
  gap:12px;
}
.hb-slots{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.hb-slot{
  height: 64px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hb-peg{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22);
  box-shadow:
    0 10px 20px rgba(0,0,0,.25),
    inset 0 2px 6px rgba(255,255,255,.24),
    inset 0 -6px 10px rgba(0,0,0,.25);
  background: var(--c, rgba(255,255,255,.22));
}
.hb-peg.is-empty{
  width: 14px;height:14px;border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.22);
  box-shadow: none;
  background: transparent;
  opacity: .8;
}

.hb-actions{display:flex;gap:10px;flex-wrap:wrap}
.hb-actions .btn{flex:1; min-width: 140px}

.hb-palette-wrap .panel__head{margin-bottom:12px}
.hb-palette{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}
@media (max-width: 520px){
  .hb-palette{grid-template-columns: repeat(3, 1fr)}
}
.hb-colorbtn{
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 28px rgba(0,0,0,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.hb-colorbtn:active{transform: translateY(1px)}
.hb-colorbtn[disabled]{opacity:.45; cursor:not-allowed}
.hb-colorbtn .hb-peg{width: 34px; height: 34px}

/* Modal */
.hb-modal[hidden]{display:none !important}
.hb-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(5,8,18,.72);
  backdrop-filter: blur(8px);
}
.hb-modal__box{
  width: min(100%, 420px);
  padding: 22px 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(22, 32, 58, 0.98), rgba(12, 18, 36, 0.99));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
}
.hb-modal__title{margin:0 0 6px; font-size: 22px; font-weight: 900}
.hb-modal__msg{margin:0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.6}
.hb-modal__secret{margin: 10px 0 16px}
.hb-slots--secret .hb-slot{height: 58px; border-radius: 16px}
.hb-modal__btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}