/* Elixirdle game widget — Bright Royal theme */
.hg { --green:#16a34a; --yellow:#eab308; --grey:#dbe3ee; --grey-text:#3a4a63;
  --surface:#ffffff; --line:#d3deec; --primary:#2f6fdb; --elixir:#b14bdb; --muted:#5b6b85;
  max-width: 720px; margin: 0 auto; color:#16233a; 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:var(--muted); 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:var(--muted); 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:#42506b; }

/* 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(--surface); color:#16233a; box-shadow:0 1px 2px rgba(20,40,80,.05); }
.hg-input::placeholder { color:#9aa7bd; }
.hg-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,111,219,.15); }
.hg-guesses-left { text-align:center; color:var(--muted); 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:var(--surface); border:1px solid var(--line); border-radius:10px; max-height:320px; overflow:auto;
  box-shadow:0 8px 24px rgba(20,40,80,.12); }
.hg-suggest li { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; cursor:pointer; }
.hg-suggest li .hg-rdot { flex:none; }
.hg-suggest li span { flex:1; font-weight:600; }
.hg-rdot { width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.hg-suggest li em { color:var(--muted); font-style:normal; font-size:.8rem; }
.hg-suggest li.hg-active, .hg-suggest li:hover { background:#eaf1fc; }

/* grid — Card column + 5 attribute 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:var(--muted); font-size:.85rem; padding:20px; text-align:center; }
.hg-row { display:grid; grid-template-columns: minmax(84px, 1.4fr) repeat(5, minmax(0, 1fr)); gap:4px; }
.hg-row-head .hg-cell { background:transparent; color:var(--muted); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.03em; min-height:auto; padding:2px 0; box-shadow:none; }
.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); color:var(--grey-text); 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:var(--surface); border:1px solid var(--line);
  color:#16233a; font-weight:700; padding-left:8px; text-align:left; font-size:.78rem; }
.hg-cell-player span { overflow:hidden; }
.hg-hit { background:var(--green); color:#fff; }
.hg-close { background:var(--yellow); color:#3a2f00; }
.hg-miss { background:var(--grey); color:var(--grey-text); }
.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:var(--surface); border:1px solid var(--line); box-shadow:0 2px 10px rgba(20,40,80,.06); }
.hg-result-won { border-color: var(--green); box-shadow:0 2px 16px rgba(22,163,74,.18); }
.hg-result-lost { border-color:#dc6a6a; }
.hg-result-headline { font-size:1.1rem; font-weight:800; margin:0 0 4px; }
.hg-result-answer { margin:0 0 10px; color:#42506b; font-size:.9rem; }
.hg-result-answer b { color:var(--elixir); }
.hg-result-actions { display:flex; gap:8px; }
.hg-btn { padding:9px 15px; border-radius:8px; border:1px solid var(--line); background:#eef2f8; color:#16233a; cursor:pointer; font-size:.9rem; font-weight:600; }
.hg-btn:hover { background:#e2e9f4; }
.hg-btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.hg-btn-primary:hover { background:#2257b8; }
.hg-sharebox { margin-top:10px; padding:10px; background:#f1f5fb; border:1px solid var(--line); border-radius:8px; white-space:pre-wrap; font-size:.85rem; }

@media (max-width:430px) {
  .hg-row { grid-template-columns: minmax(62px, 1.3fr) repeat(5, minmax(0, 1fr)); gap:3px; }
  .hg-cell { font-size:.66rem; min-height:46px; }
  .hg-cell-player { gap:2px; text-align:left; font-size:.62rem; padding-left:5px; }
}