@import url('../global.css');

:root {
  --title-color: var(--color-hive);
  --hive-bark: #473525;
  --hive-loam: #273b31;
  --hive-amber: #d69a36;
  --hive-moon: #d9e5c6;
}

.hive-board[data-visual-theme='arcade'] {
  --hive-bark: #5c2350;
  --hive-loam: #3a1030;
  --hive-amber: #ff4fd8;
  --hive-moon: #ffd6f6;
}

.hive-board[data-visual-theme='arcade'] .hive-layout {
  background:
    radial-gradient(circle at 50% 50%, rgb(255 79 216 / 20%), transparent 36%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9%, rgb(255 214 246 / 4%) 9.2% 9.6%),
    linear-gradient(145deg, #4a1a41, var(--hive-loam) 58%, #1c0818);
  border-color: #a13f8f;
}

.hive-board[data-visual-theme='midnight'] {
  --hive-bark: #1e3245;
  --hive-loam: #14202e;
  --hive-amber: #38bdf8;
  --hive-moon: #cdeafe;
}

.hive-board[data-visual-theme='midnight'] .hive-layout {
  background:
    radial-gradient(circle at 50% 50%, rgb(56 189 248 / 20%), transparent 36%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9%, rgb(205 234 254 / 4%) 9.2% 9.6%),
    linear-gradient(145deg, #1c2f42, var(--hive-loam) 58%, #0a121a);
  border-color: #2c6a91;
}

.hive-board[data-visual-theme='daylight'] {
  --hive-bark: #6a4f8c;
  --hive-loam: #4c3a63;
  --hive-amber: #7c3aed;
  --hive-moon: #ece3fb;
}

.hive-board[data-visual-theme='daylight'] .hive-layout {
  background:
    radial-gradient(circle at 50% 50%, rgb(124 58 237 / 20%), transparent 36%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9%, rgb(236 227 251 / 6%) 9.2% 9.6%),
    linear-gradient(145deg, #5a4478, var(--hive-loam) 58%, #382a4a);
  border-color: #8a5fc4;
}

.hive-board[data-visual-theme='amber'] {
  --hive-bark: #6a4514;
  --hive-loam: #4a2f0c;
  --hive-amber: #fbbf24;
  --hive-moon: #f6dfa8;
}

.hive-board[data-visual-theme='amber'] .hive-layout {
  background:
    radial-gradient(circle at 50% 50%, rgb(251 191 36 / 20%), transparent 36%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9%, rgb(246 223 168 / 4%) 9.2% 9.6%),
    linear-gradient(145deg, #5c3d10, var(--hive-loam) 58%, #331f07);
  border-color: #a1720f;
}

/* ── Outer layout ──────────────────────────────────────────────────────────── */

.hive-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 0.8vw, 0.65rem);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.3rem, 1vw, 0.75rem);
  background:
    radial-gradient(circle at 50% 50%, rgb(116 154 100 / 22%), transparent 36%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9%, rgb(230 216 162 / 4%) 9.2% 9.6%),
    linear-gradient(145deg, #354b3c, var(--hive-loam) 58%, #172a25);
  border: 0.18rem solid #b98a45;
  border-radius: 1rem;
  box-shadow:
    0 1rem 2rem rgb(3 11 8 / 48%),
    inset 0 0 0 0.13rem rgb(242 218 143 / 26%);
}

/* ── Hand panels ───────────────────────────────────────────────────────────── */

.hive-hand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 0.3rem 0.55rem;
  min-height: 3.5rem;
  border: 1px solid rgb(237 218 154 / 18%);
  border-radius: 0.7rem;
  background: rgb(9 28 22 / 34%);
}

/* Mine = bottom in column layout */
.hive-hand.is-mine {
  order: 2;
}

.hive-hand:not(.is-mine) {
  order: 0;
}

.hive-hand-label {
  font-size: 0.7rem;
  color: #e7d5a2;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 1em;
}

/* ── Piece chips (in hand) ────────────────────────────────────────────────── */

.hive-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.28rem 0.4rem;
  border: 0.13rem solid rgb(239 224 170 / 30%);
  border-radius: 0.55rem;
  background:
    linear-gradient(135deg, rgb(255 250 214 / 18%), transparent 38%),
    linear-gradient(145deg, #65745d, #34493d);
  box-shadow: 0 0.18rem 0.35rem rgb(0 0 0 / 34%);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.1s;
  min-width: 44px;
}

.hive-chip:hover:not(:disabled) {
  border-color: var(--hive-moon);
  transform: translateY(-2px);
}

.hive-chip.is-selected {
  border-color: #ffdd78;
  background: linear-gradient(145deg, #896334, #485b43);
  box-shadow:
    0 0 0 0.15rem rgb(240 188 66 / 64%),
    0 0.18rem 0.35rem rgb(0 0 0 / 34%);
}

.hive-chip:disabled {
  opacity: 0.4;
  cursor: default;
}

.hive-chip svg {
  width: 28px;
  height: 28px;
}

.hive-chip.is-seat-0 {
  color: var(--hive-amber);
}
.hive-chip.is-seat-1 {
  color: #d8e7c0;
}

.hive-chip-count {
  font-size: 0.65rem;
  font-weight: 700;
  color: #f5e4af;
  line-height: 1;
}

/* ── Hex canvas ────────────────────────────────────────────────────────────── */

.hive-canvas {
  flex: 1;
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(229 212 156 / 22%);
  border-radius: 0.8rem;
  background:
    radial-gradient(circle at 50% 52%, rgb(178 196 145 / 13%), transparent 42%),
    repeating-linear-gradient(135deg, rgb(226 212 162 / 4%) 0 1px, transparent 1px 0.7rem),
    rgb(15 42 33 / 62%);
}

.hive-grid {
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0.45rem 0.55rem rgb(2 12 8 / 40%));
  cursor: default;
}

/* ── Hex hexagons ────────────────────────────────────────────────────────────*/

/* Base hex shape (polygon fills the <g>) */
.hive-hex polygon {
  fill: #506454;
  stroke: rgb(229 221 173 / 44%);
  stroke-width: 2.2;
  transition:
    fill 0.12s,
    stroke 0.12s;
}

/* Empty target: soft highlight */
.hive-hex.is-empty.is-target polygon {
  fill: rgb(218 181 77 / 36%);
  stroke: #f4d56d;
  stroke-width: 2.8;
  stroke-dasharray: 6 3;
}

/* Occupied hex — seat 0 */
.hive-hex.is-seat-0 polygon {
  fill: #c9822e;
  stroke: #5e3513;
  stroke-width: 2.4;
}

/* Occupied hex — seat 1 */
.hive-hex.is-seat-1 polygon {
  fill: #dbe8ca;
  stroke: #5c715f;
  stroke-width: 2.4;
}

/* Queen gets a glowing outline */
.hive-hex.is-queen polygon {
  stroke-width: 3;
  filter: drop-shadow(0 0 4px rgb(250 215 112 / 62%));
}

/* Selected board piece */
.hive-hex.is-selected polygon {
  stroke: #fff0a2;
  stroke-width: 3.5;
}

/* Movable board piece (can be picked up) */
.hive-hex.is-selectable polygon {
  stroke: #f5cb66;
  stroke-width: 2.5;
  stroke-dasharray: 4 2;
}

/* Target hex for current move */
.hive-hex.is-target polygon {
  stroke: #ffe59c;
  stroke-width: 2.5;
  stroke-dasharray: none;
  cursor: pointer;
}

.hive-hex.is-occupied polygon {
  cursor: pointer;
}

/* ── Piece icon inside hex ───────────────────────────────────────────────────*/

.hive-icon {
  pointer-events: none;
}

/* Icon colour: on seat-0 and seat-1 hexes, use white for the icon */
.hive-hex.is-seat-0 .hive-icon {
  color: #fff3c4;
}

.hive-hex.is-seat-1 .hive-icon {
  color: #243c32;
}

/* Stack height badge */
.hive-badge {
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  fill: #fff4c6;
  pointer-events: none;
}

@media (min-width: 768px) and (max-height: 520px) {
  .hive-layout {
    padding: 0.25rem;
    gap: 0.2rem;
  }

  .hive-hand {
    flex-wrap: nowrap;
    gap: 0.18rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.08rem;
  }

  .hive-hand-label {
    display: none;
  }

  .hive-chip {
    flex: 1 1 0;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0.1rem;
  }

  .hive-chip svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .hive-chip-count {
    font-size: 0.58rem;
  }
}