/* THE HIVE // THE DAILY HONEYCOMB (static/js/games/hive.js). THE GRID's stage round a holo honeycomb: amber
   hexagons, the middle one lit; the ranks as a track with seven lamps. No loops. */
.hv-root { --ac: var(--holo, #4fe3ff); --aa: var(--amber, #ffb020); }
.hv-play { gap: 14px; }
.hv-bar { width: 100%; max-width: 560px; }
.hv-rank { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.hv-rank b { font: 700 16px var(--mono); letter-spacing: .2em; color: var(--aa); }
.hv-rank span { font: 600 11px var(--mono); color: rgba(160, 210, 235, .8); }
.hv-track { position: relative; height: 10px; background: rgba(79, 227, 255, .12); border-radius: 5px; }
.hv-track u { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #b06a00, var(--aa)); border-radius: 5px; text-decoration: none; }
.hv-track i { position: absolute; top: -3px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #0a1220; border: 2px solid rgba(79, 227, 255, .5); z-index: 1; }
.hv-track i.on { background: var(--aa); border-color: #ffe2a0; box-shadow: 0 0 8px var(--aa); }
.hv-typed { min-height: 40px; font: 700 30px var(--mono); letter-spacing: .12em; color: #e8f6ff; text-align: center; }
.hv-typed .mid { color: var(--aa); }
.hv-typed .out { color: rgba(160, 210, 235, .35); }
.hv-typed em { font: 500 14px var(--mono); color: rgba(160, 210, 235, .45); letter-spacing: .2em; font-style: normal; }
.hv-comb { --h: min(86px, 21vw); position: relative; width: calc(var(--h) * 3.1); height: calc(var(--h) * 3.2); }
.hv-cell { position: absolute; left: 50%; top: 50%; width: var(--h); height: calc(var(--h) * 1.1547); margin: 0; padding: 0; border: 0; cursor: pointer;
  transform: translate(calc(-50% + var(--x) * var(--h) * 1.06), calc(-50% + var(--y) * var(--h) * 1.06));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #1b2a40, #0c1626); }
.hv-cell::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: linear-gradient(160deg, #142238, #09111e); }
.hv-cell b { position: relative; font: 700 calc(var(--h) * .36) var(--mono); color: #e8f6ff; }
.hv-cell:active::before { background: #20375a; }
.hv-cell.mid { background: linear-gradient(160deg, #ffd27a, #b06a00); }
.hv-cell.mid::before { background: linear-gradient(160deg, #ffb020, #c27200); }
.hv-cell.mid b { color: #1a0d00; }
.hv-tools { max-width: 420px; }
.hv-found { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; max-width: 560px; min-height: 40px; padding: 10px; background: rgba(4, 10, 20, .7); border: 1px solid rgba(79, 227, 255, .3); }
.hv-found span { font: 600 13px var(--mono); color: #cfe8f5; padding: 3px 8px; border: 1px solid rgba(79, 227, 255, .25); }
.hv-found span.pan { color: #1a0d00; background: var(--aa); border-color: var(--aa); font-weight: 700; }
.hv-found span.bon { color: #7dffb0; border-color: rgba(125, 255, 176, .5); border-style: dashed; }
.hv-found em { font: 500 12px var(--mono); color: rgba(160, 210, 235, .45); font-style: normal; }
.hv-ybtn { width: 100%; margin: 4px 0 8px; padding: 7px; font: 700 10px var(--mono) !important; letter-spacing: .15em; color: var(--ac); background: transparent; border: 1px solid rgba(79, 227, 255, .4); cursor: pointer; }
.hv-ylist { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; max-height: 260px; overflow: auto; }
.hv-ylist span { font: 600 11px var(--mono); color: #cfe8f5; padding: 2px 5px; background: rgba(79, 227, 255, .08); }
.hv-ylist span small { margin-left: 4px; color: var(--aa); }
.hv-ylist span.pan { color: var(--aa); font-weight: 700; }
.hv-ylist span.none { opacity: .45; }