/* Hex — own styles, theme variables only. Board colours: --gm-hex-red / --gm-hex-blue (fixed
   fallbacks that read on a light and on a dark site), cells on --gm-sq-light. */

.hx {
  width: 100%;
  max-width: 640px;
}

.hx-wrap {
  position: relative;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--gm-surface, #1b2740);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
  border-radius: var(--gm-radius, 12px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  -webkit-overflow-scrolling: touch;
}

.hx-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.hx-svg:focus-visible {
  outline: 3px solid var(--gm-accent-bright, #e0584a);
  outline-offset: 2px;
  border-radius: 8px;
}

.hx-edge {
  fill: none;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hx-edge-red { stroke: var(--gm-hex-red, #d9463c); }
.hx-edge-blue { stroke: var(--gm-hex-blue, #2f6fe8); }

.hx-cell path {
  fill: var(--gm-sq-light, #e9e0cc);
  stroke: var(--gm-board-edge, rgba(0, 0, 0, 0.45));
  stroke-width: 0.9;
  stroke-linejoin: round;
  transition: fill 0.12s ease;
}

.hx-cell { cursor: default; }
.hx-svg.is-live .hx-cell.is-empty { cursor: pointer; }

@media (hover: hover) {
  .hx-svg.is-live .hx-cell.is-empty:hover path { fill: var(--gm-accent-soft, rgba(192, 57, 43, 0.3)); }
}

.hx-stone,
.hx-mark {
  display: none;
  pointer-events: none;
}

.hx-cell.is-red .hx-stone,
.hx-cell.is-blue .hx-stone {
  display: block;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 0.8;
}

.hx-cell.is-red .hx-stone { fill: var(--gm-hex-red, #d9463c); }
.hx-cell.is-blue .hx-stone { fill: var(--gm-hex-blue, #2f6fe8); }

.hx-cell.is-last .hx-mark {
  display: block;
  fill: rgba(255, 255, 255, 0.85);
}

.hx-cell.is-new .hx-stone { animation: hx-pop 0.2s ease-out; transform-origin: center; transform-box: fill-box; }

.hx-svg.is-over .hx-cell .hx-stone { opacity: 0.4; }
.hx-svg.is-over .hx-cell.is-path .hx-stone {
  opacity: 1;
  stroke: var(--gm-text, #f2eee6);
  stroke-width: 1.8;
}
.hx-svg.is-over .hx-cell.is-path path { fill: var(--gm-accent-soft, rgba(192, 57, 43, 0.3)); }

.hx-cursor {
  display: none;
  fill: none;
  stroke: var(--gm-text, #f2eee6);
  stroke-width: 2.2;
  stroke-linejoin: round;
  pointer-events: none;
}
.hx-svg.is-kbd .hx-cursor { display: block; }

.hx-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.hx-swatch-red { background: var(--gm-hex-red, #d9463c); }
.hx-swatch-blue { background: var(--gm-hex-blue, #2f6fe8); }

#gm-hex .gm-status { margin-top: 12px; }

.gm-seg button,
.gm-actions .gm-btn { min-height: 44px; }

@keyframes hx-pop {
  0% { transform: scale(0.7); }
  100% { transform: scale(1); }
}

@media (max-width: 480px) {
  .hx-wrap { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-cell.is-new .hx-stone { animation: none; }
  .hx-cell path { transition: none; }
  .gm-status.is-thinking .gm-dot { animation: none; }
}