/* -------------------------------------------------------
   HEX GRID (3D WORLD)
------------------------------------------------------- */
.hex-grid {
  position: relative;
  min-height: 600px;
  background: transparent;

  /* 3D perspective for the whole grid */
  transform-style: preserve-3d;
}


/* -------------------------------------------------------
   HEX TILE (3D LOOK)
------------------------------------------------------- */
.hex-tile {
  position: absolute;
  width: 140px;
  height: 160px;

  clip-path: polygon(
    50% 0%,
    93% 25%,
    93% 75%,
    50% 100%,
    7% 75%,
    7% 25%
  );

  background: rgba(255,255,255,0.98);

  border: 2px solid rgba(15, 23, 42, 0.25);

  /* 3D lighting + bevel */
  box-shadow:
    0px 10px 22px rgba(0,0,0,0.20),   /* main shadow */
    inset 0px 3px 6px rgba(255,255,255,0.55), /* highlight top */
    inset 0px -6px 10px rgba(0,0,0,0.25); /* shadow bottom */

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  cursor: pointer;

  /* 3D transform feel */
  transform-style: preserve-3d;
}
.hex-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.40),
    rgba(255,255,255,0.05),
    rgba(0,0,0,0.10)
  );

  pointer-events: none;
  opacity: 0.6;
}


/* -------------------------------------------------------
   TILE HOVER (3D POP)
------------------------------------------------------- */
.hex-tile:hover {
  transform: translateY(-6px) scale(1.06);

  border-color: rgba(59, 130, 246, 0.95);

  box-shadow:
    0px 16px 32px rgba(0,0,0,0.25),
    0px 10px 25px rgba(59,130,246,0.25),
    inset 0px 3px 6px rgba(255,255,255,0.65),
    inset 0px -6px 10px rgba(0,0,0,0.30);
}


/* -------------------------------------------------------
   LABEL
------------------------------------------------------- */
.hex-label {
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  line-height: 1.15;
  max-width: 120px;

  /* makes text pop on darker tiles */
  text-shadow: 0px 1px 2px rgba(0,0,0,0.25);
}


/* -------------------------------------------------------
   HIDE SCROLLBARS BUT KEEP SCROLLING
------------------------------------------------------- */
#gridWrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#gridWrapper::-webkit-scrollbar {
  display: none;
}


/* -------------------------------------------------------
   MAP DRAGGING UX
------------------------------------------------------- */
#gridWrapper {
  cursor: grab;
}

#gridWrapper.dragging {
  cursor: grabbing;
}

/* Writeup Box (Light Mode Default) */
.writeup-box {
  background: #f8fafc;   /* slate-50 */
  color: #0f172a;        /* slate-900 */
  border-color: #cbd5e1; /* slate-300 */
}

/* Writeup Box (Dark Mode Override) */
body.bg-slate-950 .writeup-box {
  background: #0f172a;   /* slate-900 */
  color: #f8fafc;        /* slate-50 */
  border-color: #334155; /* slate-700 */
}