/* HoopGuess game widget */
.hg { --green:#16a34a; --yellow:#eab308; --grey:#3a3f4b; --bg:#15171c; --line:#262a33;
  max-width: 720px; margin: 0 auto; color:#e8eaed; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.hg * { box-sizing: border-box; }
.hg-head { text-align:center; margin-bottom: 14px; }
.hg-title { font-size: 1.25rem; margin: 0 0 4px; }
.hg-sub { margin: 0; color:#9aa0aa; font-size:.9rem; }

/* legend */
.hg-legend { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px;
  margin:0 auto 14px; color:#9aa0aa; font-size:.78rem; }
.hg-legend span { display:inline-flex; align-items:center; gap:5px; }
.hg-sw { width:13px; height:13px; border-radius:4px; display:inline-block; }
.hg-legend-arrow { color:#c4c9d2; }

/* input + autocomplete */
.hg-input-wrap { position: relative; margin: 0 auto 14px; max-width: 460px; }
.hg-input { width:100%; padding: 12px 14px; font-size: 1rem; border-radius: 10px;
  border:1px solid var(--line); background:var(--bg); color:#fff; }
.hg-input:focus { outline:none; border-color:#5b8def; }
.hg-guesses-left { text-align:center; color:#9aa0aa; font-size:.8rem; margin-top:6px; }
.hg-suggest { position:absolute; z-index:20; left:0; right:0; top:52px; margin:0; padding:4px;
  list-style:none; background:#1b1e25; border:1px solid var(--line); border-radius:10px; max-height:320px; overflow:auto; }
.hg-suggest li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; }
.hg-suggest li img { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#0d0f13; }
.hg-suggest li span { flex:1; }
.hg-suggest li em { color:#9aa0aa; font-style:normal; font-size:.8rem; }
.hg-suggest li.hg-active, .hg-suggest li:hover { background:#2a2f3a; }

/* grid — 8 columns sized to always fit the container (no horizontal scroll) */
.hg-grid { display:flex; flex-direction:column; gap:5px; }
.hg-grid-empty { align-items:center; }
.hg-grid-hint { color:#6b7280; font-size:.85rem; padding:20px; text-align:center; }
.hg-row { display:grid; grid-template-columns: minmax(64px, 96px) repeat(7, minmax(0, 1fr)); gap:4px; }
.hg-row-head .hg-cell { background:transparent; color:#9aa0aa; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.03em; min-height:auto; padding:2px 0; }
.hg-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:50px;
  padding:3px 2px; border-radius:8px; background:var(--grey); font-size:.74rem; font-weight:700; text-align:center; line-height:1.08; overflow:hidden; }
.hg-cell-player { flex-direction:row; justify-content:flex-start; gap:7px; background:#1b1e25; font-weight:600;
  padding-left:6px; text-align:left; font-size:.78rem; }
.hg-cell-player .hg-shot { width:30px; height:30px; border-radius:50%; object-fit:cover; background:#0d0f13; flex:none; }
.hg-cell-player span { overflow:hidden; }
.hg-hit { background:var(--green); color:#fff; }
.hg-close { background:var(--yellow); color:#1a1a1a; }
.hg-miss { background:var(--grey); color:#cbd0d8; }
.hg-arrow { font-size:.66rem; opacity:.95; line-height:1; }

/* result */
.hg-result { display:flex; gap:16px; align-items:center; margin-top:18px; padding:16px;
  border-radius:12px; background:#1b1e25; border:1px solid var(--line); }
.hg-result-won { border-color: var(--green); }
.hg-result-lost { border-color:#b91c1c; }
.hg-shot-big { width:84px; height:84px; border-radius:50%; object-fit:cover; background:#0d0f13; flex:none; }
.hg-result-headline { font-size:1.1rem; font-weight:700; margin:0 0 4px; }
.hg-result-answer { margin:0 0 10px; color:#c4c9d2; font-size:.9rem; }
.hg-result-actions { display:flex; gap:8px; }
.hg-btn { padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:#262a33; color:#fff; cursor:pointer; font-size:.9rem; }
.hg-btn-primary { background:#5b8def; border-color:#5b8def; }
.hg-sharebox { margin-top:10px; padding:10px; background:#0d0f13; border-radius:8px; white-space:pre-wrap; font-size:.85rem; }

@media (max-width:430px) {
  .hg-row { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap:3px; }
  .hg-cell { font-size:.68rem; min-height:46px; }
  .hg-cell-player { flex-direction:column; gap:2px; align-items:center; text-align:center; font-size:.58rem; padding-left:2px; }
  .hg-cell-player .hg-shot { width:26px; height:26px; }
}