/* Colmeia: the word being typed, the honeycomb (the middle cell yellow, the six around it lilac), the buttons, the score
   with its bar and the words found. Hexagons by clip-path, flat side on top. */
.board.colmeia { aspect-ratio: auto; display: grid; justify-items: center; gap: 1rem; max-width: 30rem; user-select: none; -webkit-user-select: none; }
.bee-msg { min-height: 2.25rem; font: 800 1.125rem var(--title); color: var(--brand); text-align: center; }
.bee-msg:empty { visibility: hidden; }
.bee-word { min-height: 3rem; display: flex; gap: .05em; font: 900 clamp(1.75rem, 6vw, 2.5rem) var(--title); color: var(--ink); letter-spacing: .04em; border-bottom: 3px solid var(--line); padding: 0 .5rem .2rem; min-width: 60%; justify-content: center; }
.bee-word .mid { color: #c48a00; }
.hive { --w: clamp(5rem, 20vw, 6.75rem); --h: calc(var(--w) * .866); position: relative; width: calc(var(--w) * 2.6); height: calc(var(--h) * 3.1); }
.hex { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); border: 0; padding: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #efe6fd; font: 900 clamp(1.5rem, 6vw, 2.25rem) var(--title); color: var(--ink); cursor: pointer; }
.hex:active { filter: brightness(.94); }
.hex.mid { background: var(--yellow); }
.hex:nth-child(2) { transform: translate(0, calc(var(--h) * -1.04)); }
.hex:nth-child(3) { transform: translate(calc(var(--w) * .78), calc(var(--h) * -.52)); }
.hex:nth-child(4) { transform: translate(calc(var(--w) * .78), calc(var(--h) * .52)); }
.hex:nth-child(5) { transform: translate(0, calc(var(--h) * 1.04)); }
.hex:nth-child(6) { transform: translate(calc(var(--w) * -.78), calc(var(--h) * .52)); }
.hex:nth-child(7) { transform: translate(calc(var(--w) * -.78), calc(var(--h) * -.52)); }
.bee-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.bee-soft { font: 800 1.0625rem var(--title); color: var(--brand); background: #ede4fb; border: 0; border-radius: 999px; padding: .7rem 1.3rem; cursor: pointer; }
.bee-send { border: 0; cursor: pointer; font-size: 1.125rem; padding: .7rem 1.6rem; }
.bee-score { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; font-size: 1.0625rem; color: var(--text); }
.bee-score b { font: 900 1.25rem var(--title); color: var(--ink); }
.bee-bar { height: .75rem; border-radius: 999px; background: #efe6fd; overflow: hidden; position: relative; }
.bee-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--yellow); border-radius: 999px; transition: width .3s; }
.bee-found { border-top: 1px solid var(--line); padding-top: 1rem; }
.bee-found p { margin: 0 0 .5rem; font: 800 1.0625rem var(--title); color: var(--ink); }
.bee-found ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.bee-found li { font-size: 1.0625rem; color: var(--text); text-transform: capitalize; }
.bee-found li.all7 { font-weight: 800; color: #a86b00; }
.credit { margin: 1rem 0 0; font-size: 1rem; color: #7a6a95; }