/* Hex Hive Numbers -- SVG honeycomb board. Shared layout in arcade-kit.css */

.hh-play {
  --hh-bg1: #33691e; --hh-bg2: #558b2f;
  --hh-cell: #fff3c4; --hh-cell-edge: #c8a13a; --hh-text: #4e3500;
  --hh-chain: #ffca28; --hh-chain-edge: #b26a00; --hh-trail: rgba(255, 179, 0, 0.85);
}
.hh-theme-sunflower { --hh-bg1: #e65100; --hh-bg2: #fb8c00; --hh-cell: #fffde7; --hh-cell-edge: #f9a825; --hh-chain: #ffee58; --hh-chain-edge: #f57f17; }
.hh-theme-lavender { --hh-bg1: #4527a0; --hh-bg2: #7e57c2; --hh-cell: #f3e5f5; --hh-cell-edge: #9575cd; --hh-text: #311b92; --hh-chain: #ffd54f; --hh-chain-edge: #6a1b9a; --hh-trail: rgba(255, 213, 79, 0.9); }
.hh-theme-moon { --hh-bg1: #0d1440; --hh-bg2: #1a237e; --hh-cell: #e1f5fe; --hh-cell-edge: #4fc3f7; --hh-text: #0d1440; --hh-chain: #fff59d; --hh-chain-edge: #0277bd; --hh-trail: rgba(255, 245, 157, 0.9); }
.hh-theme-royal { --hh-bg1: #311b92; --hh-bg2: #4a148c; --hh-cell: #fff8e1; --hh-cell-edge: #ffc400; --hh-text: #4a148c; --hh-chain: #ffd740; --hh-chain-edge: #ff6f00; }

.hh-target { flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 1.15rem; font-weight: 800; }
.hh-target-num {
  display: inline-block; min-width: 2.2em; padding: 2px 12px; border-radius: 12px; text-align: center;
  background: #ffca28; color: #3e2a00; font-size: 1.6rem; line-height: 1.3;
  box-shadow: 0 3px 0 #b26a00;
}
.hh-target small { font-size: 0.85rem; font-weight: 700; color: var(--color-text-soft); }

.hh-board-wrap {
  position: relative; width: 100%; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 30% 20%, var(--hh-bg2), var(--hh-bg1));
  border: 1px solid var(--color-border); padding: 8px;
}
.hh-board { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }

.hh-cell { cursor: pointer; outline: none; }
.hh-cell polygon {
  fill: var(--hh-cell); stroke: var(--hh-cell-edge); stroke-width: 3;
  transition: fill 0.12s ease, transform 0.12s ease;
  transform-box: fill-box; transform-origin: center;
}
.hh-label { fill: var(--hh-text); font: 800 24px system-ui, -apple-system, "Segoe UI", sans-serif; pointer-events: none; }
.hh-labels { pointer-events: none; }
.hh-label.is-honey { fill: #fff; transition: opacity 0.4s ease; opacity: 0; }
.hh-label.is-drop { animation: hh-drop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); }
@media (hover: hover) { .hh-cell:hover polygon { fill: #fffaf0; } }
.hh-cell.is-cursor polygon { stroke: var(--color-primary); stroke-width: 4; }
.hh-cell:focus-visible polygon { stroke: #ffffff; stroke-width: 5; }
.hh-cell.is-chain polygon { fill: var(--hh-chain); stroke: var(--hh-chain-edge); transform: scale(0.94); }
.hh-cell.is-last polygon { stroke-width: 5; }
.hh-cell.is-wrong polygon { fill: #ff8a80; stroke: #c62828; animation: hh-shake 0.35s ease; }
.hh-cell.is-hint polygon { animation: hh-glow 0.8s ease-in-out 2; }
.hh-cell.is-honey polygon { fill: #ffb300; stroke: #e65100; animation: hh-pop 0.45s ease forwards; }

.hh-cell.is-drop { animation: hh-drop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); }
.hh-trail { fill: none; stroke: var(--hh-trail); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

@keyframes hh-shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes hh-glow { 50% { fill: #fff59d; stroke: #ffffff; stroke-width: 7; } }
@keyframes hh-pop { 60% { transform: scale(1.15); } 100% { transform: scale(0.2); opacity: 0; } }
@keyframes hh-drop { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.hh-bee { position: absolute; font-size: 22px; pointer-events: none; animation: hh-fly 1.1s ease-out forwards; transform: translate(-50%, -50%); }
@keyframes hh-fly { to { transform: translate(calc(-50% + var(--dx, 0px)), -140px) rotate(20deg); opacity: 0; } }

.hh-chain { text-align: center; font-weight: 700; font-size: 1.05rem; min-height: 1.4em; }
.hh-msg { min-height: 1.3em; font-size: 0.92rem; }

@media (prefers-reduced-motion: reduce) {
  .hh-cell.is-wrong polygon, .hh-cell.is-hint polygon, .hh-cell.is-drop, .hh-label.is-drop, .hh-bee { animation: none; }
  .hh-cell.is-honey polygon { animation: none; opacity: 0.4; }
}