/* Honeycomb — pointy-top hex tiles, ghost grid, arrange-mode states.
   Ported from V:\_nginx\www\css\honeycomb.css and repaletted to WarmUp dark tokens. */

.wu-honeycomb-pane {
  position: relative;
  overflow: hidden;
}

/* Extended board (37 tiles, 7 rows) — same viewport-adaptive rule with the
   larger divisor (flower + ghost ring ≈ 8.1 hex-widths tall) */
.wu-board-extended {
  --hex-w: clamp(56px, calc((100vh - 56px) / 8.2), 96px);
  /* Must re-declare: var() inside a custom property resolves where it's
     DECLARED (:root), so --hex-h would otherwise keep the standard-board
     height and stretch the extended tiles vertically. */
  --hex-h: calc(var(--hex-w) * 1.1547);
  --hex-gap: 4px;
}

@media (max-width: 720px) {
  .wu-board-extended {
    --hex-w: clamp(48px, calc((100vh - 56px) / 8.2), 72px);
    --hex-h: calc(var(--hex-w) * 1.1547);
    --hex-gap: 2px;
  }
}

/* Ghost background grid — sits behind the active flower */
.wu-hex-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.wu-ghost-hex {
  position: absolute;
  width: var(--hex-w);
  height: var(--hex-h);
}
.wu-ghost-hex::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* 1px ring = the lattice line */
  background: var(--colour-grid-line);
}
.wu-ghost-hex::after {
  content: '';
  position: absolute;
  inset: 1px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* Matches the pane bg so cell fill and gap blend into one padding zone */
  background: var(--colour-grid-bg);
}

/* Stage centring wrapper — absolutely fills the pane so the flower is
   always centred regardless of the document height chain */
.wu-honeycomb-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  transition: opacity 180ms ease;
}

/* Crossfade between sub-flowers */
.wu-honeycomb-wrap.wu-fade-out {
  opacity: 0;
}

/* Absolute-positioned stage — width/height set by JS */
.wu-honeycomb-stage {
  position: relative;
  z-index: 1;
}

/* Tile wrapper. Hexes nest, so adjacent wraps overlap as rectangles —
   pointer events are disabled here and re-enabled on the hex-clipped hit
   layer below, so a tap only ever lands on the tile whose hexagon is
   visibly under the finger. */
.wu-hex-wrap {
  position: absolute;
  width: var(--hex-w);
  height: var(--hex-h);
  opacity: 0;
  animation: wu-fadeUp 0.5s forwards cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  touch-action: manipulation;
}

/* Transparent hit layer — the tile's true (hexagonal) tap target */
.wu-hex-hit {
  position: absolute;
  inset: 0;
  z-index: 4;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.wu-honeycomb-stage.no-animate .wu-hex-wrap {
  animation: none;
  opacity: 1;
}

@keyframes wu-fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wu-hex {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* Outline layer — resting outline carries the tile's own colour (softened);
   hover takes it to full strength. */
.wu-hex::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: color-mix(in srgb, var(--tile-color) 55%, var(--colour-border));
  transition: background 220ms ease;
}

/* Surface layer — inset = outline thickness. Pending tiles carry a whisper
   of their activity colour (8%); hover 18%, completed 28%, confirmed 55%. */
.wu-hex::after {
  content: '';
  position: absolute;
  inset: var(--hex-outline);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: color-mix(in srgb, var(--tile-color) 8%, var(--colour-surface));
  transition: background 220ms ease;
}

/* Inner content */
.wu-hex-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  pointer-events: none;
  user-select: none;
  padding: 0 var(--space-md);
  text-align: center;
}

/* Icon + label scale with the TILE (--hex-w), not the viewport — vw-based
   sizing oversized icons on landscape tablets where tiles are vh-driven
   (worst on the extended board). Ratios match the old desktop look at the
   132px max tile. */
.wu-hex-icon {
  font-size: calc(var(--hex-w) * 0.3);
  line-height: 1;
}

.wu-hex-icon-img {
  width: calc(var(--hex-w) * 0.32);
  height: calc(var(--hex-w) * 0.32);
  object-fit: contain;
  display: block;
}

.wu-hex-label {
  font-size: clamp(8px, calc(var(--hex-w) * 0.085), var(--font-size-xs));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-text-secondary);
  transition: color 220ms ease;
  line-height: 1.2;
}

/* Hover — suppressed in arrange mode, and ENTIRELY absent on .wu-static
   stages (the game boards): on touchscreens :hover sticks to the last-tapped
   tile, which left game tiles looking permanently "active" and masked their
   real state classes (owner report 2026-07-12). Nav flowers keep hover. */
body:not(.wu-edit-mode) .wu-honeycomb-stage:not(.wu-static) .wu-hex-wrap:not(.wu-locked):hover .wu-hex {
  transform: translateY(-4px);
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--tile-color) 45%, transparent));
}
body:not(.wu-edit-mode) .wu-honeycomb-stage:not(.wu-static) .wu-hex-wrap:not(.wu-locked):hover .wu-hex::before {
  background: var(--tile-color);
}
body:not(.wu-edit-mode) .wu-honeycomb-stage:not(.wu-static) .wu-hex-wrap:not(.wu-locked):hover .wu-hex::after {
  background: color-mix(in srgb, var(--tile-color) 18%, var(--colour-surface));
}
body:not(.wu-edit-mode) .wu-honeycomb-stage:not(.wu-static) .wu-hex-wrap:not(.wu-locked):hover .wu-hex-label {
  color: var(--colour-text-primary);
}

/* Locked tile (sub-flower breadcrumb anchors) — distinct, never hover-lifted */
.wu-hex-wrap.wu-locked .wu-hex::before {
  background: var(--colour-accent);
}
.wu-hex-wrap.wu-locked .wu-hex::after {
  background: color-mix(in srgb, var(--colour-accent) 14%, var(--colour-surface));
}
.wu-hex-wrap.wu-locked .wu-hex-label {
  font-family: var(--font-display);
  font-size: clamp(9px, calc(var(--hex-w) * 0.1), var(--font-size-sm));
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  color: var(--colour-text-primary);
}
.wu-hex-wrap.wu-locked { cursor: default; }

/* Centre brand tile only — solid amber hex + white star, matching the app icon
   (decision #56). Scoped to the brand tile so sub-flower anchors keep their
   accent look above. */
.wu-hex-wrap.wu-brand-tile .wu-hex::before {
  background: var(--colour-brand-deep);
}
.wu-hex-wrap.wu-brand-tile .wu-hex::after {
  background: var(--colour-brand);
}
.wu-hex-wrap.wu-brand-tile .wu-hex-icon,
.wu-hex-wrap.wu-brand-tile .wu-hex-label {
  color: #fff;
}

/* ── Completion states ──────────────────────────────────── */

.wu-hex-check {
  position: absolute;
  top: 26%;
  right: 24%;
  width: calc(var(--hex-w) * 0.18);
  height: calc(var(--hex-w) * 0.18);
  border-radius: 50%;
  background: var(--tile-color);
  color: var(--colour-bg);
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: calc(var(--hex-w) * 0.105);
  font-weight: 800;
  line-height: 1;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.wu-hex-wrap.wu-completed .wu-hex-check,
.wu-hex-wrap.wu-confirmed .wu-hex-check { display: flex; }

/* Count badge (e.g. Parent tile's pending confirmations) — top-right pip */
.wu-hex-badge {
  position: absolute;
  top: 20%;
  right: 18%;
  min-width: calc(var(--hex-w) * 0.22);
  height: calc(var(--hex-w) * 0.22);
  padding: 0 calc(var(--hex-w) * 0.04);
  border-radius: 999px;
  background: var(--colour-danger);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: calc(var(--hex-w) * 0.12);
  font-weight: 800;
  line-height: 1;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* Completed — child self-marked, awaiting parent confirmation (~28% fill) */
.wu-hex-wrap.wu-completed .wu-hex::before { background: var(--tile-color); }
.wu-hex-wrap.wu-completed .wu-hex::after {
  background: color-mix(in srgb, var(--tile-color) 28%, var(--colour-surface));
}
.wu-hex-wrap.wu-completed .wu-hex-label { color: var(--colour-text-primary); }

/* Confirmed — parent signed off at end of week (~55% fill, brighter) */
.wu-hex-wrap.wu-confirmed .wu-hex::before { background: var(--tile-color); }
.wu-hex-wrap.wu-confirmed .wu-hex::after {
  background: color-mix(in srgb, var(--tile-color) 55%, var(--colour-surface));
}
.wu-hex-wrap.wu-confirmed .wu-hex-label { color: var(--colour-text-primary); }

/* ── Arrange mode ───────────────────────────────────────── */

.wu-hex-wrap.wu-pressing:not(.wu-locked) .wu-hex::before {
  background: color-mix(in srgb, var(--colour-text-secondary) 60%, var(--colour-border));
}

.wu-hex-wrap.wu-selected .wu-hex {
  transform: translateY(-6px) scale(1.06);
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--tile-color) 50%, transparent));
}
.wu-hex-wrap.wu-selected .wu-hex::before { background: var(--tile-color) !important; }
.wu-hex-wrap.wu-selected .wu-hex::after {
  background: color-mix(in srgb, var(--tile-color) 22%, var(--colour-surface)) !important;
}

.wu-hex-wrap.wu-swap-target .wu-hex::before {
  background: var(--tile-color);
  animation: wu-pulse 700ms ease-in-out infinite alternate;
}

@keyframes wu-pulse {
  from { opacity: 0.3; }
  to   { opacity: 0.65; }
}

/* Hint bar */
.wu-edit-hint {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--colour-text-primary) 88%, transparent);
  color: var(--colour-bg);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 300;
  white-space: nowrap;
}

body.wu-edit-mode .wu-edit-hint { opacity: 1; }