@font-face {
  font-family: 'Inter';
  src: local('Inter'), local('Inter Regular');
}
:root{
  --bg: rgba(0,0,0,.25);
  --fg: #fff;
  --accent: #6cf;
}
*{box-sizing:border-box;}
body{margin:0;overflow:hidden;font-family:Inter,system-ui,Segoe UI,Arial;}
#wrap.hidden{display:none}
#wrap{position:fixed;inset:0;}
#hexLayer{position:absolute;inset:0;}

.hex{position:absolute; width:56px; height:60px; display:flex; align-items:center; justify-content:center; color:var(--fg); cursor:pointer; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); will-change: transform, left, top, opacity; transform-origin: center center;}
.hex:before, .hex:after{content:""; position:absolute; width:40px;height:40px; background:var(--bg); transform:rotate(45deg); border:2px solid var(--accent); border-radius:12px; transition: all 0.15s ease;}
.hex:after{transform:rotate(45deg) translateY(0);}
.hex i{font-size:22px; text-shadow:0 2px 8px rgba(0,0,0,.6); transition: transform 0.15s ease;}
.hex.grayed{filter: grayscale(80%) opacity(0.6);}

/* bottom bar */
#bottomBar{position:absolute; right:31%; bottom:39%; transform:none; display:flex; flex-direction:column; align-items:center; gap:8px;}

/* START OF CHANGE */
#bottomBar .hex {
  position: relative; /* This is the fix, it keeps the X button in the layout flow */
}
/* END OF CHANGE */

.hint{color:#ddd; font-size:12px; background:rgba(0,0,0,.4); padding:.35rem .6rem; border-radius:8px;}

/* Tooltip style */
#tooltip {
  position: absolute; display: none; z-index: 100;
  pointer-events: none; white-space: nowrap;
  transition: opacity 0.1s ease-in-out;
}

/* animations */
.hex{transition:transform .15s ease, opacity .15s ease, filter .15s ease;}
.hex:hover{transform:scale(1.08); filter:drop-shadow(0 8px 20px rgba(0,0,0,.6));}
.hex:hover:before, .hex:hover:after{border-color: #8df; background: rgba(0,0,0,.35);}
.hex:hover i{transform: scale(1.1);}
#bottomBar .hint{margin-top:4px;}