/* Hive: the honeycomb, the rank track, the two-player strip and dialogs. Layout and the result
   card come from cb-arcade.css. */
.hv-page { --hv-honey: #f4b400; --hv-honey-d: #b07d00; --hv-cell: #fff3c9; --hv-cell-d: #e8cf86; --p1: #2563eb; --p1-soft: #dde8ff; --p2: #e2620f; --p2-soft: #ffe5d3; }

.hv-tabs { display: flex; gap: 6px; margin: 0 0 10px; background: var(--cbx-soft); padding: 4px; border-radius: 14px; }
.hv-tabs button { flex: 1; border: 0; background: transparent; padding: 10px 8px; border-radius: 11px; font: 900 15px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; }
.hv-tabs button[aria-selected="true"] { background: #fff; color: var(--cbx-ink); box-shadow: 0 2px 6px rgba(42,29,23,.12); }

.hv-card { padding-top: 14px; }
.hv-top { display: flex; justify-content: space-between; gap: 8px; }
.hv-pill { font: 900 13px var(--cbx-body); background: color-mix(in srgb, var(--cbx-accent) 16%, #fff); color: color-mix(in srgb, var(--cbx-accent) 60%, #000); padding: 6px 11px; border-radius: 999px; }
.hv-pill.ghost { background: var(--cbx-soft); color: var(--cbx-ink); font-variant-numeric: tabular-nums; }

/* rank track: one dot per rank, the current one big */
.hv-rank { margin: 8px 0 4px; }
.hv-track { position: relative; display: flex; justify-content: space-between; align-items: center; height: 22px; }
.hv-track::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; transform: translateY(-50%); background: var(--cbx-line); border-radius: 4px; }
.hv-track .fill { position: absolute; left: 6px; top: 50%; height: 4px; transform: translateY(-50%); background: var(--hv-honey); border-radius: 4px; transition: width .5s ease; }
.hv-track i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--cbx-line); }
.hv-track i.on { background: var(--hv-honey); }
.hv-track i.cur { width: 22px; height: 22px; background: var(--hv-honey); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(176,125,0,.45); }
.hv-rank-txt { margin: 6px 0 0; font: 800 14px var(--cbx-body); color: var(--cbx-muted); text-align: center; }
.hv-rank-txt b { color: var(--cbx-ink); font-weight: 900; }

/* two-player strip */
.hv-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 8px 8px 8px 12px; border-radius: 14px; font: 900 15px var(--cbx-body); }
.hv-strip.p1 { background: var(--p1-soft); color: var(--p1); } .hv-strip.p2 { background: var(--p2-soft); color: var(--p2); }
.hv-strip .dots i { display: inline-block; width: 9px; height: 9px; margin-left: 3px; border-radius: 50%; background: currentColor; }
.hv-strip .dots i.used { opacity: .25; }
.hv-strip-btn { border: 0; border-radius: 10px; padding: 8px 12px; background: currentColor; font: 900 14px var(--cbx-body); cursor: pointer; white-space: nowrap; }
.hv-strip-btn span, .hv-strip-btn { color: #fff; }
.hv-strip.p1 .hv-strip-btn { background: var(--p1); } .hv-strip.p2 .hv-strip-btn { background: var(--p2); }
.hv-strip-btn.ghost { background: transparent !important; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.hv-banner { margin: 6px 0; padding: 10px 12px; border-radius: 12px; background: #2a1d17; color: #fff; font: 800 14px/1.4 var(--cbx-body); }
.hv-banner b { color: #ffd66b; }

/* found words */
.hv-found { margin: 6px 0 2px; border: 2px solid var(--cbx-line); border-radius: 14px; padding: 2px 12px; }
.hv-found summary { cursor: pointer; padding: 6px 0; font: 900 14px var(--cbx-body); color: var(--cbx-ink-2); list-style: none; display: flex; gap: 6px; align-items: center; overflow: hidden; white-space: nowrap; }
.hv-found summary::after { content: '▾'; margin-left: auto; color: var(--cbx-muted); }
.hv-found[open] summary::after { content: '▴'; }
.hv-found summary::-webkit-details-marker { display: none; }
.hv-found summary .peek { font-weight: 800; color: var(--cbx-muted); overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.hv-found ul { list-style: none; margin: 0 0 10px; padding: 0; columns: 3 90px; column-gap: 12px; }
.hv-found li { font: 800 15px/1.7 var(--cbx-body); text-transform: capitalize; break-inside: avoid; }
.hv-found li.pan { font-weight: 900; color: var(--hv-honey-d); }
.hv-found li.p1 { color: var(--p1); } .hv-found li.p2 { color: var(--p2); }
.hv-found li.glow { animation: hv-glow 1.6s ease-in-out 3; border-radius: 6px; }
@keyframes hv-glow { 50% { background: #fff1b8; } }

/* the word being typed */
.hv-entry { min-height: 44px; margin: 4px 0 0; text-align: center; font: 900 30px/44px var(--cbx-body); letter-spacing: .06em; text-transform: uppercase; color: var(--cbx-ink); }
.hv-entry .c { color: var(--hv-honey-d); }
.hv-entry .x { color: #c9bcb0; }
.hv-entry .caret { display: inline-block; width: 3px; height: 32px; margin-left: 2px; vertical-align: -5px; background: var(--hv-honey); animation: hv-blink 1s steps(1) infinite; }
@keyframes hv-blink { 50% { opacity: 0; } }
.hv-entry.shake { animation: hv-shake .4s; }
@keyframes hv-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.hv-toast { min-height: 22px; margin: 0 0 4px; text-align: center; font: 900 15px var(--cbx-body); color: var(--cbx-ink-2); }
.hv-toast.good { color: var(--cbx-good); } .hv-toast.bad { color: var(--cbx-bad); } .hv-toast.wow { color: var(--hv-honey-d); }

/* the honeycomb: flat-topped hexes, centre plus six around */
.hv-comb { --w: min(25vw, 100px); --h: calc(var(--w) * .866); position: relative; width: calc(var(--w) * 2.5 + 12px); height: calc(var(--h) * 3 + 12px); margin: 2px auto 10px; filter: drop-shadow(0 3px 0 rgba(120,80,0,.25)) drop-shadow(0 8px 14px rgba(120,80,0,.18)); }
.hv-hex { position: absolute; width: var(--w); height: var(--h); border: 0; padding: 0; cursor: pointer; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(180deg, #fffbe9 0%, var(--hv-cell) 55%, var(--hv-cell-d) 100%); color: var(--cbx-ink); font: 900 calc(var(--w) * .34) var(--cbx-body); text-transform: uppercase;
  transition: transform .12s ease, filter .12s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hv-hex.center { background: linear-gradient(180deg, #ffd84d 0%, var(--hv-honey) 60%, #d99a00 100%); }
.hv-hex:active, .hv-hex.press { transform: scale(.92); filter: brightness(.95); }
.hv-hex.spin { animation: hv-spin .35s ease; }
@keyframes hv-spin { 0% { transform: scale(.7) rotate(-30deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
.hv-hex[data-p="0"] { left: calc(var(--w) * .75 + 6px); top: calc(var(--h) + 6px); }
.hv-hex[data-p="1"] { left: calc(var(--w) * .75 + 6px); top: 0; }
.hv-hex[data-p="2"] { left: calc(var(--w) * 1.5 + 12px); top: calc(var(--h) * .5 + 3px); }
.hv-hex[data-p="3"] { left: calc(var(--w) * 1.5 + 12px); top: calc(var(--h) * 1.5 + 9px); }
.hv-hex[data-p="4"] { left: calc(var(--w) * .75 + 6px); top: calc(var(--h) * 2 + 12px); }
.hv-hex[data-p="5"] { left: 0; top: calc(var(--h) * 1.5 + 9px); }
.hv-hex[data-p="6"] { left: 0; top: calc(var(--h) * .5 + 3px); }
.hv-comb.locked .hv-hex { filter: grayscale(.6) opacity(.6); cursor: default; }

.hv-controls { display: grid; grid-template-columns: 1fr auto auto 1fr; gap: 8px; }
.hv-ctl { min-height: 48px; }
.hv-icon { width: 52px; padding: 0; font-size: 20px; }
.hv-controls button:disabled { opacity: .45; }

.hv-solo-actions { margin-top: 14px; display: grid; gap: 4px; }
.hv-link { border: 0; background: none; padding: 8px; font: 800 14px var(--cbx-body); color: color-mix(in srgb, var(--cbx-accent) 70%, #000); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* result card extras */
.hv-result { margin-top: 14px; }
.hv-credits { text-align: left; margin: 10px 0; display: grid; gap: 6px; }
.hv-credits .row { padding: 10px 12px; border-radius: 12px; font: 800 14px/1.45 var(--cbx-body); }
.hv-credits .row.p1 { background: var(--p1-soft); color: var(--p1); } .hv-credits .row.p2 { background: var(--p2-soft); color: var(--p2); }
.hv-credits .row b { font-weight: 900; }
.hv-credits .row .nm { display: block; font-weight: 900; font-size: 15px; }
.hv-credits .top { text-align: center; font: 900 15px var(--cbx-body); margin: 2px 0 0; }
.hv-all { text-align: left; margin: 8px 0; }
.hv-all summary { cursor: pointer; font: 900 14px var(--cbx-body); }
.hv-all p { font: 800 14px/1.7 var(--cbx-body); text-transform: capitalize; color: var(--cbx-ink-2); }
.hv-all p .got { color: var(--cbx-good); }

/* dialogs */
.hv-dlg { border: 0; padding: 0; border-radius: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.hv-dlg::backdrop { background: rgba(42,29,23,.45); }
.hv-dlg-card { padding: 20px; }
.hv-dlg h2 { margin: 0 0 6px; font: 900 22px var(--cbx-display); }
.hv-dlg p { margin: 0 0 12px; font: 800 15px/1.45 var(--cbx-body); color: var(--cbx-muted); }
.hv-field { display: grid; gap: 4px; margin: 0 0 10px; font: 900 13px var(--cbx-body); color: var(--cbx-ink-2); }
.hv-field input { font: 800 17px var(--cbx-body); padding: 11px 12px; border: 2px solid var(--cbx-line); border-radius: 12px; }
.hv-field input:focus { border-color: var(--cbx-accent); outline: none; }
.hv-dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.hv-mine { margin-top: 14px; border-top: 2px solid var(--cbx-line); padding-top: 10px; }
.hv-mine h3 { margin: 0 0 6px; font: 900 14px var(--cbx-body); }
.hv-mine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hv-mine a { display: block; padding: 9px 12px; border-radius: 10px; background: var(--cbx-soft); font: 800 14px var(--cbx-body); color: var(--cbx-ink); text-decoration: none; }

/* 90-second sprint */
.hv-clock { display: inline-block; font: 900 28px/1 var(--cbx-body); color: var(--cbx-ink); font-variant-numeric: tabular-nums; }
.hv-clock.low { color: var(--cbx-bad); animation: hv-blink 1s steps(1) infinite; }
.hv-sprint-go { display: grid; gap: 10px; }
.hv-sprint-go .cbx-btn { justify-self: center; min-width: 160px; }

@media (max-width: 360px) { .hv-entry { font-size: 26px; } .hv-icon { width: 46px; } }
.hv-result .cbx-chips span { min-width: 0; }
.hv-result .cbx-chips b { overflow-wrap: anywhere; }